@import url('https://fonts.googleapis.com/css2?family=Satoshi:wght@400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Satoshi', 'SF Pro Display', 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: #1E1E1E;
    overflow: hidden;
    height: 100vh;
}

.container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
}

.canvas {
    flex: 1;
    height: 100vh;
    position: relative;
    background: #212121 !important;
    overflow: auto;
    margin-left: 221.43px;
}

.sidebar {
    width: 221.43px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: white;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.sidebar-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background: white;
}

.logo-container {
    width: 103.17px;
    height: 61.11px;
    left: 17.06px;
    top: 17.46px;
    position: absolute;
}

.logo-divider {
    width: 219.84px;
    height: 0px;
    left: -15.48px;
    top: 74.60px;
    position: absolute;
    outline: 0.79px #E6E6E6 solid;
    outline-offset: -0.40px;
}

.logo-content {
    width: 150px;
    left: 0px;
    top: 30.16px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3.97px;
    display: inline-flex;
}

.logo-title-wrapper {
    justify-content: center;
    align-items: center;
    gap: 7.94px;
    display: inline-flex;
}

.logo-title {
    color: #EDB000;
    font-size: 11.90px;
    font-family: SF Pro;
    font-weight: 510;
    word-wrap: break-word;
}

.logo-subtitle-wrapper {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 7.94px;
    display: inline-flex;
}

.logo-subtitle {
    color: #7F7F7F;
    font-size: 10.32px;
    font-family: SF Pro;
    font-weight: 510;
    word-wrap: break-word;
}

.logo-icon {
    width: 100%;
    height: 100%;
    right: 20.80px;
    bottom: 35px;
    position: absolute;
}

.nav-section {
    width: 219.84px;
    left: 1.59px;
    top: 98.81px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8.73px;
    display: inline-flex;
}

.nav-tabs {
    padding-left: 7.94px;
    padding-right: 7.94px;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.nav-tab {
    padding-left: 7.14px;
    padding-right: 7.14px;
    padding-top: 4.76px;
    padding-bottom: 4.76px;
    border-radius: 4.76px;
    justify-content: center;
    align-items: center;
    gap: 7.94px;
    display: flex;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-tab.file-tab {
    background: transparent;
}

.nav-tab.file-tab .tab-text {
    text-align: center;
    color: #7F7F7F;
    font-size: 10.32px;
    font-family: SF Pro;
    font-weight: 400;
    word-wrap: break-word;
}

.nav-tab.file-tab.active {
    background: #F5F5F5;
    border-radius: 6.85px;
}

.nav-tab.file-tab.active .tab-text {
    color: #191919;
    font-weight: 510;
}

.nav-tab.assets-tab {
    background: transparent;
}

.nav-tab.assets-tab .tab-text {
    text-align: center;
    color: #7F7F7F;
    font-size: 10.32px;
    font-family: SF Pro;
    font-weight: 400;
    word-wrap: break-word;
}

.nav-tab.assets-tab.active {
    background: #F5F5F5;
    border-radius: 6.85px;
}

.nav-tab.assets-tab.active .tab-text {
    color: #191919;
    font-weight: 510;
}

.nav-divider {
    align-self: stretch;
    height: 0px;
    outline: 0.79px #E6E6E6 solid;
    outline-offset: -0.40px;
}

.pages-section {
    width: 208.73px;
    left: 6.35px;
    top: 141.27px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 14.29px;
    display: inline-flex;
}

.pages-header {
    padding-left: 7.94px;
    padding-right: 7.94px;
    justify-content: center;
    align-items: center;
    gap: 7.94px;
    display: inline-flex;
}

.pages-title {
    color: black;
    font-size: 10.71px;
    font-family: SF Pro;
    font-weight: 510;
    word-wrap: break-word;
}

.pages-list {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 7.14px;
    display: flex;
}

.page-item {
    align-self: stretch;
    padding-top: 4.76px;
    padding-bottom: 4.76px;
    padding-left: 7.94px;
    border-radius: 4.78px;
    justify-content: flex-start;
    align-items: center;
    gap: 7.94px;
    display: inline-flex;
    cursor: pointer;
}

.butter-radius-item {
    padding-right: 0px;
}

.about-item {
    padding-right: 169.84px;
}

.about-item.active {
    background: #F5F5F5;
}

.page-text {
    width: 166.67px;
    color: #1A1A1A;
    font-size: 10.32px;
    font-family: SF Pro;
    font-weight: 400;
    word-wrap: break-word;
}

.about-item.active .page-text {
    color: #191919;
    font-weight: 510;
    letter-spacing: 0.10px;
}

.footer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 200px;
}

.footer-text {
    color: #BABFC7;
    font-size: 7.94px;
    font-family: SF Pro;
    font-weight: 400;
    word-wrap: break-word;
}

.page-content {
    display: none;
}

.page-content.active {
    display: block;
}

#about-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: #212121 !important;
    padding: 0;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}

#about-page:active {
    cursor: grabbing;
}

#about-page img {
    user-drag: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
}

.about-content-wrapper {
    width: 980px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    transition: transform 0.1s ease-out;
}

.figma-install-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1000;
}

.figma-install-btn:hover {
    transform: translateY(-1px);
}

.figma-install-btn svg {
    width: 20px;
    height: 20px;
}

.zoom-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-family: 'SF Pro', sans-serif;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.main-page-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.section-title {
    color: white;
    font-size: 11.90px;
    font-family: Satoshi;
    font-weight: 400;
    word-wrap: break-word;
}

.problem-section {
    left: 34.92px;
    top: 40.48px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.problem-img {
    width: 190.48px;
    height: 123.81px;
    border-radius: 6.35px;
}

.temp-solutions {
    left: 273.81px;
    top: 22.22px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11.90px;
}

.formula-img {
    width: 292.06px;
    height: 53.17px;
}

.calculator-img {
    width: 76.98px;
    height: 122.22px;
    margin-top: -20px;
    margin-right: 85px;
}

.button-dilemma {
    width: 210.32px;
    left: 646.03px;
    top: 42.86px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.button-img {
    width: 210.32px;
    height: 119.05px;
}

.thinking-section {
    width: 257.94px;
    left: 34.92px;
    top: 246.83px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.thinking-text {
    color: white;
    font-size: 6.35px;
    font-family: Satoshi;
    font-weight: 400;
    line-height: 7.94px;
    word-wrap: break-word;
}

.butter-tray-section {
    left: 334.92px;
    top: 236.51px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.butter-tray-img {
    width: 203.17px;
    height: 88.89px;
}

.two-button-section {
    width: 159.52px;
    left: 636.51px;
    top: 224.60px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.two-button-img {
    width: 159.52px;
    height: 88.89px;
}

.final-decision {
    width: 78.57px;
    left: 856.35px;
    top: 211.11px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.final-button-img {
    width: 50.79px;
    height: 50.79px;
}

.random-inspiration {
    left: 21.43px;
    top: 405.56px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.inspiration-img {
    width: 155.56px;
    height: 94.44px;
}

.anchor-points-section {
    left: 211.90px;
    top: 405.56px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.anchor-img {
    width: 97.62px;
    height: 79.37px;
}

.drafts-section {
    left: 423.02px;
    top: 376.98px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.drafts-img {
    width: 120.63px;
    height: 109.52px;
}

.coding {
    left: 230.16px;
    top: 600.79px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.coding-icons-img {
    width: 112.60px;
    height: 130.34px;
    object-fit: contain;
}

.timing-section {
    left: 12.70px;
    top: 627.78px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.timing-img {
    width: 49.21px;
    height: 49.21px;
    border-radius: 11.15px;
}

.final-flow {
    left: 636.51px;
    top: 442.06px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.flow-text {
    color: white;
    font-size: 6.35px;
    font-family: Satoshi;
    font-weight: 400;
    line-height: 7.94px;
    word-wrap: break-word;
}

.final-assets {
    left: 522.22px;
    top: 543.65px;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 11.90px;
    display: inline-flex;
}

.assets-img {
    width: 421.43px;
    height: 182.05px;
}

.arrow-1 {
    width: 19.22px;
    height: 16.70px;
    left: 237.71px;
    top: 80.78px;
    position: absolute;
}

.arrow-2 {
    width: 35.51px;
    height: 18.51px;
    left: 581.84px;
    top: 73.15px;
    position: absolute;
}

.arrow-3 {
    width: 25.99px;
    height: 26.16px;
    left: 869.67px;
    top: 172.38px;
    position: absolute;
}

.arrow-4 {
    width: 30.55px;
    height: 22.01px;
    left: 820.63px;
    top: 270.63px;
    position: absolute;
}

.arrow-5 {
    width: 34.40px;
    height: 26.69px;
    left: 579.02px;
    top: 293.38px;
    position: absolute;
}

.arrow-6 {
    width: 11.07px;
    height: 7.04px;
    left: 303.97px;
    top: 306.35px;
    position: absolute;
}

.arrow-7 {
    width: 42.08px;
    height: 58.09px;
    left: 99.56px;
    top: 340.72px;
    position: absolute;
}

.arrow-8 {
    width: 198.16px;
    height: 42.29px;
    left: 577.24px;
    top: 385.43px;
    position: absolute;
}

.arrow-9 {
    width: 27px;
    height: 10.78px;
    left: 191.03px;
    top: 451.72px;
    position: absolute;
}

.arrow-10 {
    width: 47.33px;
    height: 15.57px;
    left: 359.68px;
    top: 450.05px;
    position: absolute;
}

.arrow-11 {
    width: 466.89px;
    height: 104.57px;
    left: 156.39px;
    top: 500.28px;
    position: absolute;
}

.arrow-12 {
    width: 36.30px;
    height: 31.41px;
    left: 158.08px;
    top: 649.44px;
    position: absolute;
}

.arrow-13 {
    width: 109.47px;
    height: 81.18px;
    left: 370.71px;
    top: 613.48px;
    position: absolute;
}

.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    background: white;
    border: none;
    padding: 6px 8px 6px 8px;
    border-radius: 8px;
    cursor: grabbing;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media (max-width: 1440px) {
    .about-content-wrapper {
        transform: translate(-50%, -50%) scale(0.9);
    }
}

@media (max-width: 1280px) {
    .about-content-wrapper {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@media (max-width: 1024px) {
    .canvas {
        margin-left: 0;
        background: #212121 !important;
    }
    
    .sidebar {
        position: fixed;
        left: -221.43px;
        z-index: 1000;
        transition: left 0.3s;
    }
    
    .sidebar.open {
        left: 0;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .about-content-wrapper {
        transform: translate(-50%, -50%) scale(0.7);
    }
    
    .figma-install-btn {
        bottom: 80px;
        right: 10px;
    }
}

@media (max-width: 768px) {
    .about-content-wrapper {
        transform: translate(-50%, -50%) scale(0.5);
    }
    
    body, * {
        font-family: 'Satoshi', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important;
    }
    
    .section-title, .thinking-text, .flow-text {
        font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif !important;
    }
}

a.footer-text {
    text-decoration: none;
    color: #BABFC7;
}

a.footer-text:hover {
    color: #EDB000;
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 40px;
}

.video-container video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}