@font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('../assets/fonts/Roboto-Variable-Latin.woff2') format('woff2');
        }
@font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('../assets/fonts/Roboto-Variable-Latin.woff2') format('woff2');
        }
@font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('../assets/fonts/Roboto-Variable-Latin.woff2') format('woff2');
        }
        nav {
            position: fixed;
            top: 0; width: 100%;
            height: 80px;
            background: #000000;
            border-bottom: none;
            display: flex;
            justify-content: center;
            z-index: 1000;
        }

        .nav-inner {
            width: 100%; max-width: 1600px;
            padding: 0 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .nav-logo-image {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            display: block;
            object-fit: contain;
        }
        .nav-logo-text {
            font-size: 22px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px;
            border: 1px solid rgba(255,255,255,0.09);
            border-radius: 12px;
            background: rgba(255,255,255,0.035);
        }

        .nav-beta {
            display: inline-flex;
            align-items: center;
            padding: 10px 22px;
            border-radius: var(--pill);
            font-size: 15px;
            font-weight: 500;
            color: var(--txt2);
            background: rgba(43, 55, 80, 0.10);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            white-space: nowrap;
            border: none;
            box-shadow:
                inset 0 0 0 1px rgba(170,202,255,0.18),
                inset 0 0 14px 0 rgba(170,202,255,0.07),
                0 1px 3px 0 rgba(0,0,0,0.45),
                0 3px 10px 0 rgba(0,0,0,0.35);
            transition: color 0.2s, box-shadow 0.3s;
        }
        .nav-beta:hover {
            color: #fff;
            box-shadow:
                inset 0 0 0 1px rgba(170,202,255,0.32),
                inset 0 0 18px 0 rgba(170,202,255,0.12),
                0 1px 3px 0 rgba(0,0,0,0.50),
                0 4px 14px 0 rgba(0,0,0,0.42);
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            padding: 0 15px;
            border-radius: 8px;
            color: #D0D2D8;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            transition: color 0.16s ease, background-color 0.16s ease;
        }
        .nav-link:hover {
            color: #fff;
            background: rgba(255,255,255,0.075);
        }

        .lang-btn {
            position: relative;
            min-height: 36px;
            padding: 0 15px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: #92929A;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: none;
            transition: color 0.16s ease, background-color 0.16s ease;
        }
        .lang-btn::before {
            content: "";
            position: absolute;
            top: 9px;
            bottom: 9px;
            left: -3px;
            width: 1px;
            background: rgba(255,255,255,0.09);
            pointer-events: none;
        }
        .lang-btn:hover {
            color: #fff;
            background: rgba(255,255,255,0.075);
            box-shadow: none;
        }
        .nav-link:focus-visible,
        .lang-btn:focus-visible {
            outline: 2px solid rgba(124,131,255,0.72);
            outline-offset: 2px;
        }


        footer {
            background: #000000;
            border-top: none;
        }

        .footer-zh {
            padding: 28px 20px 24px;
            text-align: center;
        }
        .footer-zh-row {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0;
            font-size: 12px;
            color: var(--txt2);
            font-weight: 400;
            line-height: 2;
        }
        .footer-zh-row a {
            color: var(--txt2);
            font-weight: 400;
            transition: color 0.2s;
        }
        .footer-zh-row a:hover { color: var(--txt1); }
        .fsep {
            margin: 0 10px;
            color: rgba(255,255,255,0.2);
            font-weight: 400;
        }
        .footer-zh-row img.whjy {
            width: 18px; height: 18px;
            vertical-align: middle;
            margin-right: 5px;
            border-radius: 3px;
        }
        .footer-zh .copy {
            font-size: 12px;
            color: var(--txt2);
            font-weight: 400;
            margin-bottom: 4px;
        }
        .footer-zh .copy a,
        .footer-en .copy a {
            color: var(--txt2);
            font-weight: 400;
            transition: color 0.2s;
        }
        .footer-zh .copy a:hover,
        .footer-en .copy a:hover {
            color: var(--txt1);
        }

        .footer-en {
            display: none;
            padding: 28px 20px 24px;
            text-align: center;
        }


:root{--bg:#000;--card:#111;--txt1:#E8E8F0;--txt2:#8A8AA8;--sans:Roboto,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
body{margin:0}main{display:block}.page{padding-top:80px}.head{padding-top:64px}.head h1{font-size:clamp(28px,3.8vw,44px);font-weight:600;max-width:1000px}
.page>.narrow,.page>.mid,.page>.wide,.page>.quality{width:100%;max-width:960px}.page>.prose{margin-top:48px}.hero{margin-top:32px}
.nav-current{font-size:14px;color:#fff;white-space:nowrap;padding:0 15px;line-height:44px}.nav-right{gap:4px}.nav-link,.lang-btn{min-height:44px}.nav-logo-image{max-width:34px}.nav-inner{gap:16px}
.hero{position:relative}.hero video{background:#111}.hero video,.vid video{outline-offset:-3px}.quality{background:#111}.end{height:56px}footer{font-size:13px}
.tabs button,.chip{min-height:44px}.scrub-ctl input{min-height:44px}.slider:focus-within{outline:2px solid var(--blue-2);outline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #88baff;outline-offset:3px}.head,h2[id],section[id]{scroll-margin-top:104px}
.diagram-scroll{overflow-x:auto;overscroll-behavior-inline:contain;border-radius:12px}.diagram-scroll #diagram{min-width:880px}.diagram-scroll svg text{font-size:12px}
.plotcard{min-width:0}.plotcard>div,.timeline{overflow-x:auto;overscroll-behavior-inline:contain}.plotcard svg text{font-size:12px}#p-speed svg{min-width:740px}.timeline svg{min-width:900px}.timeline svg text{font-size:14px}button,input,[tabindex]{scroll-margin-top:104px}
.nav-logo:hover{opacity:.85}.nav-logo,.nav-link{line-height:1.4}.footer-zh .copy{margin-bottom:12px}
@media(max-width:760px){body{font-size:16px}.nav-inner{padding:0 20px}.nav-official{display:none}.page{padding-inline:20px}.head{padding-top:40px}.hero{margin-top:24px}.page>.prose{margin-top:36px;gap:20px}.prose h2{font-size:28px;margin-top:40px}.quality{padding:22px 18px}.plots{margin-top:40px}.plotcard svg{min-width:480px}.foot{margin-top:64px}.nav-current{padding:0 12px}}
@media(max-width:420px){.nav-inner{padding:0 16px;gap:8px}.nav-logo-text{font-size:18px}.nav-logo{gap:7px}.nav-logo-image{width:28px;height:28px}.nav-link,.lang-btn{padding:0 10px}.nav-current{padding:0 8px;font-size:13px;max-width:140px;white-space:normal;line-height:1.35;min-height:44px;display:flex;align-items:center}.nav-right{gap:2px}.page{padding-inline:16px}.quality-row{grid-template-columns:75px minmax(0,1fr) 36px}.quality-axis{grid-template-columns:75px minmax(0,1fr) 36px}.scrub-view .tag{font-size:11px;left:8px;top:8px}.tabs button{padding-inline:12px}.quad span{font-size:12px}.scrub-ctl{gap:8px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}