/* Shared floating navigation and first-screen editorial composition. */
.nav{top:14px;width:calc(100% - 64px);max-width:1440px;margin:14px auto 0;border:1px solid var(--border-color);border-radius:24px;box-shadow:0 8px 35px #17255408}
.nav-inner{padding:0 24px;gap:14px;max-width:none}.nav-inner>.brand{margin-right:0}.nav-menu{position:static;transform:none;margin:auto;gap:4px}.nav-actions{margin-left:auto}.nav-link{position:relative;background:none!important;border-radius:0;padding:20px 12px;white-space:nowrap}.nav-link::after{content:'';position:absolute;height:2px;bottom:9px;left:12px;right:12px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}.nav-link:hover,.nav-link.is-active{color:var(--accent)}.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}.nav-cta-desktop{font-size:.85rem;padding:9px 20px;border-radius:30px;position:relative;overflow:hidden}.nav-cta-desktop::after{content:'';position:absolute;inset:-50% auto -50% -65%;width:38%;background:linear-gradient(90deg,transparent,#ffffff70,transparent);transform:rotate(24deg);animation:ctaShine 6s ease-in-out infinite;pointer-events:none}@keyframes ctaShine{0%,65%{left:-65%}90%,100%{left:145%}}
@media(min-width:1101px) and (max-width:1250px){.nav-link{padding-inline:8px;font-size:13px}.nav-inner{padding-inline:18px;gap:10px}.brand-logo-full{width:140px}}
@media(max-width:1100px){
    /* The bar and its dropdown need independent backdrop roots. Keeping the
       blur on .nav made the nested dropdown sample the bar instead of the
       page below it, so its own blur appeared inactive. */
    .nav{
        isolation:isolate;
        background:transparent;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }
    .nav::before{
        content:'';
        position:absolute;
        inset:0;
        z-index:-1;
        border-radius:inherit;
        background:var(--bg-glass);
        backdrop-filter:blur(16px) saturate(180%);
        -webkit-backdrop-filter:blur(16px) saturate(180%);
        pointer-events:none;
    }
    .nav-menu{
        position:absolute;
        inset:calc(100% + 12px) 0 auto;
        margin:0;
        padding:10px;
        gap:3px;
        overflow:hidden;
        background:rgba(255,255,255,.62);
        border:1px solid rgba(255,255,255,.65);
        border-radius:20px;
        box-shadow:0 8px 32px rgba(31,38,135,.1),0 2px 8px -2px rgba(0,0,0,.06),inset 0 1px 1px rgba(255,255,255,.9);
        backdrop-filter:blur(24px) saturate(155%);
        -webkit-backdrop-filter:blur(24px) saturate(155%);
        transform:translateY(-10px) scaleY(.72) scaleX(.96);
        transform-origin:top center;
        clip-path:inset(0 4% 100% 4% round 20px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:clip-path .38s cubic-bezier(.2,.78,.2,1),transform .38s cubic-bezier(.2,.78,.2,1),opacity .24s ease,visibility 0s linear .38s;
    }
    .nav-menu.is-open{
        transform:translateY(0) scaleY(1) scaleX(1);
        clip-path:inset(0 0 0 0 round 20px);
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transition-delay:0s;
    }
    .nav-menu .nav-link{padding:12px 14px;border-radius:12px}
    .nav-menu .nav-link::after{bottom:7px}
    .nav-menu .nav-link.is-active::after{transform:scaleX(0)}
    .nav-actions{margin-left:0}
    .nav-burger,.nav-burger:hover{
        background:transparent;
        border:0;
        box-shadow:none;
        transform:none;
    }
    .burger-lines{position:relative;display:block;width:21px;height:16px}
    .burger-lines span{
        position:absolute;
        left:0;
        width:21px;
        height:1.8px;
        border-radius:4px;
        background:currentColor;
        transform-origin:center;
        transition:top .28s cubic-bezier(.2,.75,.25,1),transform .34s cubic-bezier(.2,.75,.25,1),opacity .18s ease,width .25s ease;
    }
    .burger-lines span:nth-child(1){top:1px}
    .burger-lines span:nth-child(2){top:7px;width:15px;left:6px}
    .burger-lines span:nth-child(3){top:13px}
    .nav-burger[aria-expanded="true"] .burger-lines span:nth-child(1){top:7px;transform:rotate(45deg)}
    .nav-burger[aria-expanded="true"] .burger-lines span:nth-child(2){opacity:0;transform:scaleX(.2)}
    .nav-burger[aria-expanded="true"] .burger-lines span:nth-child(3){top:7px;transform:rotate(-45deg)}
}
[data-theme="dark"] .nav-menu{background:rgba(23,30,46,.62);border-color:rgba(255,255,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.4),0 2px 8px -2px rgba(0,0,0,.2),inset 0 1px 1px rgba(255,255,255,.08)}
@media(max-width:1100px) and (hover:hover){.nav-menu .nav-link:hover::after,.nav-menu .nav-link.is-active:hover::after{transform:scaleX(1)}}
@media(max-width:760px){.nav{width:calc(100% - 24px);top:10px;margin-top:10px;height:60px;border-radius:18px}.nav-inner{padding:0 12px;gap:8px}.brand-logo-full{width:128px}.nav-inner>.icon-btn{width:32px;height:34px}.nav-actions{gap:6px}}
@media(max-width:370px){.brand-logo-full{width:104px}.nav-inner{padding-inline:9px}}
.about-intro{position:relative;padding-top:90px;padding-bottom:85px;overflow:hidden}.about-kicker{font-size:11px;letter-spacing:.17em;font-weight:700;color:var(--accent)}.about-intro h1{font-size:clamp(46px,6.5vw,86px);letter-spacing:-.06em;line-height:1.04;white-space:pre-line;margin:26px 0;max-width:850px}.about-intro>p{max-width:610px;font-size:19px;line-height:1.7;color:var(--text-secondary)}.about-scroll{display:inline-flex;align-items:center;gap:30px;font-size:14px;font-weight:600;margin-top:30px}.about-scroll>span:last-child{font-size:26px}.intro-lines{position:absolute;right:15px;bottom:100px;display:flex;align-items:center;gap:10px;transform:rotate(-9deg);opacity:.8;z-index:-1}.intro-lines span{display:block;border:1px solid var(--border-strong);padding:25px;border-radius:18px;font-size:24px;box-shadow:var(--shadow-lg)}.intro-lines span:last-child{background:var(--accent);color:var(--bg-body)}.about-journey{display:grid;grid-template-columns:180px minmax(0,1fr);gap:55px;align-items:start}.chapter-index{position:sticky;top:130px;padding-top:40px;display:flex;flex-direction:column;gap:20px}.chapter-index a{display:flex;gap:15px;align-items:center;color:var(--text-tertiary);font-size:13px;transition:color .3s}.chapter-index a span{font:11px monospace}.chapter-index a.is-active{color:var(--accent)}.about-chapter{padding:50px 0 90px;scroll-margin-top:110px;border-top:1px solid var(--border-strong)}.chapter-number{font:12px monospace;color:var(--accent)}.chapter-copy h2{font-size:clamp(30px,3.4vw,44px);line-height:1.13;letter-spacing:-.04em;max-width:650px;margin:16px 0 20px;text-wrap:initial}.chapter-copy>p{color:var(--text-secondary);max-width:660px;line-height:1.8}.chapter-demo{margin-top:34px;padding:35px;border:1px solid var(--border-color);background:var(--bg-surface);border-radius:22px;box-shadow:0 20px 70px #16264b08;transition:transform .9s cubic-bezier(.2,.7,.3,1),box-shadow .9s;transform:perspective(1000px) rotateX(3deg) translateY(12px);transform-origin:center top}.chapter-visible .chapter-demo{transform:perspective(1000px) rotateX(0) translateY(0);box-shadow:0 20px 70px #16264b10}.chapter-demo label{display:block;font-size:13px;font-weight:600;margin-bottom:12px}.chapter-demo input{width:100%;font:inherit;padding:15px 18px;border:1px solid var(--border-strong);background:var(--bg-body);border-radius:10px;color:var(--text-primary);margin-bottom:15px}.demo-result{display:flex;align-items:center;gap:25px;padding:15px 0;border-bottom:1px solid var(--border-color)}.demo-result[hidden]{display:none}kbd{font-family:inherit}.demo-result kbd,.daily-note kbd{font-size:12px;padding:6px 10px;min-width:85px;border:1px solid var(--border-strong);border-radius:7px;background:var(--bg-surface-2)}.demo-result span{font-size:14px}.demo-caption{font-size:12px;color:var(--text-tertiary);margin-top:20px}.os-switch{display:flex;gap:8px}.os-switch button,.quiz-options button{background:var(--bg-body);color:var(--text-secondary);border:1px solid var(--border-strong);padding:9px 17px;border-radius:9px;transition:background .2s,color .2s}.os-switch button[aria-pressed=true]{background:var(--text-primary);color:var(--bg-body)}.demo-keyboard{display:flex;gap:20px;align-items:center;margin:36px 0}.demo-keyboard kbd{display:grid;place-items:center;width:90px;height:82px;background:var(--accent-soft);border:1px solid var(--accent-ring);border-bottom:5px solid var(--accent-ring);border-radius:12px;font-size:24px;font-weight:600}.chapter-demo h3{font-size:24px;margin:18px 0}.quiz-options{display:flex;gap:12px;margin:25px 0 12px}.quiz-options .answer-correct{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}#quizFeedback{min-height:2.2em;font-size:14px}.daily-note>span{float:right;font-size:30px;color:var(--accent)}.daily-note>div{display:flex;align-items:center;gap:20px;padding:14px 0;border-top:1px solid var(--border-color);font-size:14px}.about-future{padding:90px 0;background:var(--bg-inverse);color:#f5f5fa}.about-future h2,.about-end h2{font-size:clamp(36px,4.8vw,62px);letter-spacing:-.045em;white-space:pre-line;margin:24px 0}.future-lead{max-width:660px;color:#aebace;font-size:17px;line-height:1.8}.future-list{margin-top:60px}.future-item{display:grid;grid-template-columns:65px 1fr 35px;gap:25px;padding:35px 0;border-top:1px solid #ffffff24}.future-number{font-size:13px;color:#8593aa;padding-top:4px}.future-status{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#ff86a5}.future-item h3{font-size:25px;font-weight:600;margin:12px 0 15px}.future-item p{color:#aebace;line-height:1.8;max-width:800px}.future-arrow{color:#ff86a5;font-size:28px}.about-end{padding-block:90px;text-align:center}.about-end p{color:var(--text-secondary);margin-bottom:30px}.about-end .btn{border-radius:40px}
@media(max-width:900px){.intro-lines{display:none}.about-journey{grid-template-columns:130px minmax(0,1fr);gap:25px}.chapter-demo{padding:25px}.about-intro{padding-top:60px}}
@media(max-width:600px){.about-intro{padding-block:50px}.about-intro>p{font-size:16px}.about-journey{display:block}.chapter-index{position:static;flex-direction:row;gap:15px;flex-wrap:wrap;padding:0 0 28px}.chapter-index a{font-size:11px;gap:5px}.about-chapter{padding-block:35px 55px}.chapter-demo{padding:20px}.os-switch button,.quiz-options button{padding:8px 12px;font-size:12px}.future-item{grid-template-columns:25px 1fr;gap:14px}.future-arrow{display:none}.future-item h3{font-size:22px}.future-item p{font-size:15px}.about-future{padding-block:55px}.about-end{padding-block:55px}.daily-note>div{gap:10px}}
@media(prefers-reduced-motion:reduce){.chapter-demo{transform:none;transition:none}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* UI audit hardening ----------------------------------------------------- */
/* The theme control keeps its hit area without a visible container. */
#themeToggle,
#themeToggle:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* On the landing page the floating bar is a true overlay. The hero therefore
   starts at the top edge and its day/night artwork continues beneath the bar. */
.landing-page .nav {
    position: fixed;
    inset: 14px 0 auto;
    margin-top: 0;
}

/* Desktop navigation uses one shared, animated selector. Keeping a single
   layer avoids four competing hover backgrounds and makes active changes
   readable even when section spying updates the current link. */
.nav-selector {
    display: none;
}

@media (min-width: 1101px) {
    .nav-inner {
        position: relative;
    }

    .nav-menu {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
        isolation: isolate;
        gap: 0;
        padding: 3px;
        border: 1px solid rgba(15, 23, 42, .055);
        border-radius: 999px;
        background: rgba(226, 229, 237, .56);
        box-shadow: inset 0 2px 6px rgba(15, 23, 42, .13),
                    inset 0 -1px 1px rgba(255, 255, 255, .72),
                    0 1px 0 rgba(255, 255, 255, .34);
    }

    [data-theme="dark"] .nav-menu {
        border-color: rgba(255, 255, 255, .065);
        background: rgba(7, 10, 22, .58);
        box-shadow: inset 0 2px 7px rgba(0, 0, 0, .52),
                    inset 0 -1px 1px rgba(255, 255, 255, .055),
                    0 1px 0 rgba(255, 255, 255, .025);
    }

    .nav-selector {
        position: absolute;
        z-index: 0;
        top: 3px;
        bottom: 3px;
        left: 0;
        display: block;
        width: var(--nav-selector-width, 0px);
        border: 1px solid rgba(15, 23, 42, .045);
        border-radius: 999px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 3px 10px rgba(15, 23, 42, .10), inset 0 1px 0 #fff;
        opacity: var(--nav-selector-opacity, 0);
        transform: translate3d(var(--nav-selector-x, 0px), 0, 0);
        transition: width .36s cubic-bezier(.22, .8, .24, 1),
                    transform .44s cubic-bezier(.16, 1, .3, 1),
                    opacity .18s ease;
        will-change: width, transform;
        pointer-events: none;
    }

    [data-theme="dark"] .nav-selector {
        border-color: rgba(255, 255, 255, .09);
        background: rgba(40, 47, 65, .96);
        box-shadow: 0 5px 14px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .nav-menu .nav-link {
        z-index: 1;
        padding: 7px 14px;
        border-radius: 999px;
        background: transparent !important;
    }

    .nav-menu .nav-link::after {
        display: none;
    }

    .nav-menu .nav-link.is-active {
        color: var(--text-primary);
    }

    .nav-menu .nav-link:hover {
        color: var(--accent);
    }
}

/* The frosted effect belongs to the dropdown itself. The page behind it
   remains sharp so opening navigation does not alter the whole composition. */
body::after {
    display: none;
}

body main,
body.nav-menu-open main {
    filter: none;
    transition: none;
}

.nav .brand,
.nav .icon-btn,
.lang-current,
.cur-btn,
.dur-btn {
    min-height: 44px;
}

.nav .lang-current {
    min-height: 36px;
    padding-block: 3px;
}

.nav .btn {
    min-height: 40px;
    padding-block: 7px;
}

.nav .icon-btn {
    min-width: 44px;
}

.hero-editorial .hero-cta .btn {
    min-height: 44px;
}

@media (max-width: 760px) {
    :root {
        --nav-h: 58px;
    }

    .landing-page .nav {
        inset-block-start: 10px;
        height: var(--nav-h);
    }
}

@media (max-width: 980px) {
    .landing-page .hero-copy {
        padding-top: calc(var(--nav-h) + 24px);
    }
}

@media (max-width: 1100px) {
    .nav-menu {
        max-height: calc(100dvh - var(--nav-h) - 34px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu,
    .nav-selector,
    .burger-lines span {
        transition: none !important;
    }
}