:root {
            --max-width: 78rem;
            --nav-height: 68px;
            --shadow-preview: 0 26px 60px rgba(0,0,0,0.18);
            --glass-blur: 14px;
            --radius: 8px;
            --radius-sm: 3px;
            --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'Cascadia Code', Consolas, monospace;
            --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
        }
        body[data-theme="light"] {
            --bg:#ececeb; --bg2:#e2e2e0;
            --surface-glass: rgba(255,255,255,0.7); --surface-glass-strong: rgba(255,255,255,0.85);
            --panel:#fff;
            --text:#111; --muted:#6a6a6a;
            --line: rgba(17,17,17,0.14); --line-strong: rgba(17,17,17,0.24);
            --black:#000; --white:#fff;
            --nav-bg: rgba(236,236,235,0.82);
            --particle-color:#000; --particle-line: rgba(0,0,0,0.08);
            --cross:#b5b5b5;
            --accent:#0047d6; --accent-soft: rgba(0,71,214,0.10); --accent-line: rgba(0,71,214,0.42);
            --warm:#c9541f; --warm-soft: rgba(201,84,31,0.12);
        }
        body[data-theme="dark"] {
            --bg:#0d0d0f; --bg2:#131316;
            --surface-glass: rgba(26,26,29,0.62); --surface-glass-strong: rgba(20,20,23,0.8);
            --panel:#151518;
            --text:#f4f4f4; --muted:#9c9ca2;
            --line: rgba(255,255,255,0.12); --line-strong: rgba(255,255,255,0.22);
            --black:#000; --white:#fff;
            --nav-bg: rgba(13,13,15,0.82);
            --particle-color:#fff; --particle-line: rgba(255,255,255,0.08);
            --cross:#757575;
            --shadow-preview: 0 26px 60px rgba(0,0,0,0.5);
            --accent:#5ab0ff; --accent-soft: rgba(90,176,255,0.12); --accent-line: rgba(90,176,255,0.45);
            --warm:#ff9057; --warm-soft: rgba(255,144,87,0.14);
        }

        html { font-size: 16px; scroll-behavior: smooth; box-sizing: border-box; }
        *, *::before, *::after { box-sizing: inherit; }
        body {
            font-family: var(--sans); color: var(--text);
            background: var(--bg);
            overflow-x: hidden; line-height: 1.7; margin: 0; width: 100%; max-width: 100vw; position: relative;
            transition: background 0.3s ease, color 0.3s ease;
        }
        a { color: inherit; }
        .brand, .nav-links a, .theme-toggle, .hamburger, h1, h2, .kick, .chip, .tag, .btn, .fig-tag, .cap, .stat-l, .read, .ohm, .chapnav, .rlabel { font-family: var(--mono); letter-spacing: 0.02em; }
        .brand, .nav-links a, .theme-toggle, .hamburger, .kick, .tag, .btn, .fig-tag { text-transform: uppercase; }

        .content { position: relative; z-index: 2; width: 100%; max-width: 100vw; overflow-x: hidden; }
        .progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 60; }

        /* Nav */
        .navbar { position: fixed; inset: 0 0 auto 0; width: 100%; z-index: 50; background: var(--nav-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
        /* Transparent frosted-glass zone under the navbar: progressive backdrop-blur (five layers each
           blurring more and masked nearer the top) so content frosts gradually as it scrolls under the
           bar. Matches index.html. Sits below the navbar (50) and chapter dots (45). */
        .top-blur { position: fixed; top: var(--nav-height); left: 0; right: 0; height: 6rem; z-index: 44; pointer-events: none; }
        .top-blur .tb-layer { position: absolute; inset: 0; pointer-events: none; }
        .top-blur .tb-1 { backdrop-filter: blur(1px)  saturate(1.08); -webkit-backdrop-filter: blur(1px)  saturate(1.08); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%); mask-image: linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%); }
        .top-blur .tb-2 { backdrop-filter: blur(2px)  saturate(1.1);  -webkit-backdrop-filter: blur(2px)  saturate(1.1);  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 56%,transparent 84%);  mask-image: linear-gradient(to bottom,#000 0%,#000 56%,transparent 84%); }
        .top-blur .tb-3 { backdrop-filter: blur(4px)  saturate(1.14); -webkit-backdrop-filter: blur(4px)  saturate(1.14); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 40%,transparent 66%);  mask-image: linear-gradient(to bottom,#000 0%,#000 40%,transparent 66%); }
        .top-blur .tb-4 { backdrop-filter: blur(8px)  saturate(1.18); -webkit-backdrop-filter: blur(8px)  saturate(1.18); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 25%,transparent 48%);  mask-image: linear-gradient(to bottom,#000 0%,#000 25%,transparent 48%); }
        .top-blur .tb-5 { backdrop-filter: blur(16px) saturate(1.22); -webkit-backdrop-filter: blur(16px) saturate(1.22); -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 12%,transparent 30%);  mask-image: linear-gradient(to bottom,#000 0%,#000 12%,transparent 30%); }
        @media print { .top-blur { display: none !important; } }
        .nav-inner { max-width: var(--max-width); margin: 0 auto; min-height: var(--nav-height); padding: 0.9rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; box-sizing: border-box; }
        .brand { text-decoration: none; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; white-space: nowrap; }
        .brand::before { content: "[ "; } .brand::after { content: " ]"; }
        .nav-links { display: flex; gap: 0.7rem; align-items: center; }
        .nav-links a::before, .theme-toggle::before { content: "[ "; }
        .nav-links a::after, .theme-toggle::after { content: " ]"; }
        .nav-links a, .theme-toggle { text-decoration: none; color: var(--muted); padding: 0.35rem 0.5rem; background: transparent; border: 1px solid transparent; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
        .nav-links a:hover, .theme-toggle:hover { color: var(--white); background: var(--black); border-color: var(--black); }
        body[data-theme="dark"] .nav-links a:hover, body[data-theme="dark"] .theme-toggle:hover { color: var(--black); background: var(--white); border-color: var(--white); }
        .hamburger::before { content: "[ "; } .hamburger::after { content: " ]"; }
        .hamburger { display: none; background: transparent; border: 1px solid var(--line); color: var(--text); padding: 0.5rem 0.75rem; font-size: 0.85rem; cursor: pointer; }

        /* Chapter navigator (Maglr-style) */
        .chapnav { position: fixed; right: 1.15rem; top: 50%; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; gap: 0.75rem; }
        .chapnav a { width: 11px; height: 11px; border: 1px solid var(--muted); border-radius: 50%; position: relative; transition: background 0.25s, border-color 0.25s, transform 0.25s; }
        .chapnav a.on { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
        .chapnav a .cl { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 0.58rem; white-space: nowrap; color: var(--muted); opacity: 0; pointer-events: none; transition: opacity 0.2s; text-transform: uppercase; letter-spacing: 0.08em; }
        .chapnav a:hover .cl { opacity: 1; }
        @media (max-width: 64rem) { .chapnav { display: none; } }

        /* PANELS */
        .panel { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-height) + 3rem) 0 4rem; overflow: hidden; }
        .wrap { position: relative; z-index: 2; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        .panel.flip .txt { order: 2; }
        .txt { min-width: 0; }
        .exhibit { min-width: 0; display: flex; justify-content: center; }

        .kick { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; font-weight: 700; letter-spacing: 0.16em; font-size: 0.74rem; color: var(--muted); }
        .kick::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }
        .kick .n { color: var(--accent); }
        h2.ch { font-family: var(--mono); font-size: clamp(1.8rem, 4.2vw, 3.1rem); font-weight: 700; line-height: 1.12; margin: 0 0 1.3rem; letter-spacing: -0.01em; text-transform: none; }
        /* typewriter caret */
        .caret::after { content: "▊"; color: var(--accent); margin-left: 2px; animation: blink 1s steps(1) infinite; }
        @keyframes blink { 0%,50%{ opacity: 1; } 50.01%,100%{ opacity: 0; } }
        /* cinematic full-bleed photo panels + cover photo */
        .cover-bg, .cine-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
        .cover-bg img, .cine-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .cine-bg img { animation: kb 20s ease-in-out infinite alternate; }
        .cover-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
        .cover.has-photo .cover-scrim { opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.78)), radial-gradient(120% 90% at 50% 34%, rgba(0,0,0,0.12), rgba(0,0,0,0.5)); }
        .cover.has-photo .cover-inner, .cover.has-photo .cover-inner .hero-sub, .cover.has-photo .cover-inner .kicker { color: #fff; }
        .cine-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 32%, rgba(0,0,0,0.9) 100%); pointer-events: none; }
        .panel.cine { padding: 0; align-items: flex-end; min-height: 100vh; background: var(--bg); }
        .cine-inner { position: relative; z-index: 3; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 2rem 12vh; color: #fff; }
        .cine-inner .ch, .cine-inner p, .cine-inner .lead { color: #fff; }
        .cine-inner .kick { color: rgba(255,255,255,0.85); }
        /* let pointer/touch pass through overlay text to the interactive canvas behind it */
        #cev .cine-inner { pointer-events: none; }
        #cev .cine-inner .slide-dots, #cev .cine-inner .slide-dots button, #cev .cine-inner a { pointer-events: auto; }
        /* Chapter 01 - neural graph. Same dark background as the rest; pointer passes through text to the canvas. */
        #c1 .cine-inner { pointer-events: none; }
        #c1 .cine-inner a, #c1 .cine-inner button { pointer-events: auto; }
        #c1 .cine-scrim { background: radial-gradient(115% 105% at 24% 66%, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.4) 32%, rgba(0,0,0,0.12) 58%, rgba(0,0,0,0) 100%); }
        .cover-title { font-family: var(--mono); font-weight: 700; color: var(--text); }
        /* full-bleed animation canvas behind cinematic panels */
        .cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
        /* editorial drop-cap (Maglr) */
        p.dropcap:first-letter { font-family: var(--mono); font-weight: 800; font-size: 3.5em; line-height: 0.82; float: left; margin: 0.02em 0.14em 0 0; color: var(--accent); }
        /* big pull-quote interstitial */
        .panel.quote { min-height: 82vh; display: flex; align-items: center; }
        .quote-wrap { max-width: 60rem; margin: 0 auto; padding: 0 2rem; width: 100%; }
        .bigquote { font-family: var(--mono); font-weight: 800; font-size: clamp(1.8rem, 5vw, 3.6rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0; color: var(--text); border-left: 4px solid var(--accent); padding-left: clamp(1rem,3vw,2.2rem); }
        .bigquote .hl { color: var(--accent); }
        .quote-by { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); margin-top: 1.4rem; padding-left: clamp(1rem,3vw,2.2rem); letter-spacing: 0.08em; text-transform: uppercase; }
        /* Feynman portrait + attributed quotes */
        .feyn-wrap { align-items: center; }
        .portrait { max-width: 300px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-preview); background: var(--panel); }
        .portrait img { width: 100%; display: block; }
        .portrait .credit { font-family: var(--mono); font-size: 0.56rem; color: var(--muted); padding: 0.4rem 0.6rem; text-align: right; letter-spacing: 0.04em; }
        .txt .quote-by { padding-left: 0; }
        .fq { font-family: var(--mono); font-size: 0.98rem; line-height: 1.6; border-left: 3px solid var(--accent); padding-left: 1.1rem; margin: 1.8rem 0 0; max-width: 44rem; }
        .fq cite { display: block; margin-top: 0.6rem; font-size: 0.72rem; font-style: normal; opacity: 0.7; letter-spacing: 0.06em; }
        /* event slideshow */
        .slideshow { position: absolute; inset: 0; z-index: 0; background: #000; }
        .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
        .slide.on { opacity: 1; }
        .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; animation: kb 18s ease-in-out infinite alternate; }
        .slide .ph { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0; font-family: var(--mono); font-size: 0.72rem; color: #7a7a7a; border: 1px dashed #444; border-radius: var(--radius-sm); padding: 0.7rem 1rem; letter-spacing: 0.06em; }
        .slide-dots { display: flex; gap: 0.5rem; margin-top: 1.6rem; }
        .slide-dots button { width: 26px; height: 4px; border: none; border-radius: 3px; background: rgba(255,255,255,0.35); cursor: pointer; padding: 0; }
        .slide-dots button.on { background: var(--accent); }
        .txt p { font-size: 1.1rem; line-height: 1.8; margin: 0 0 1.15rem; }
        .txt p.lead { font-size: 1.28rem; line-height: 1.6; font-weight: 500; }
        .txt .ac { color: var(--accent); font-weight: 600; }
        .txt .wm { color: var(--warm); font-weight: 600; }
        .tagrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
        .tag { display: inline-block; padding: 0.35rem 0.6rem; border: 1px solid var(--line); background: rgba(150,150,150,0.07); font-size: 0.7rem; border-radius: var(--radius-sm); }
        .tag.ta { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); font-weight: 700; }

        /* entrance */
        .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
        .panel.in .reveal { opacity: 1; transform: none; }
        .exhibit .reveal { transform: translateY(30px) scale(0.98); }
        .panel.in .exhibit .reveal { transform: none; }

        /* Cover + closing (cinematic centered) */
        .cover, .closing { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--nav-height) + 3rem) 2rem 4rem; }
        .cover-inner { max-width: 56rem; width: 100%; min-width: 0; box-sizing: border-box; }
        .kicker { font-size: 0.8rem; color: var(--muted); }
        .kicker .dot { color: var(--accent); }
        .particle-target { font-family: var(--mono); font-weight: 700; color: transparent; user-select: none; line-height: 0.88; letter-spacing: 0.04em; display: block; margin: 0 auto 1.2rem; text-transform: uppercase; }
        @media (min-width: 48rem) { .hero-title { font-size: clamp(3rem, 15vw, 15rem) !important; } }
        .hero-title { font-size: clamp(2.5rem, 13vw, 7rem) !important; }
        .hero-sub { font-size: 1.08rem; color: var(--text); max-width: 42rem; margin: 1.4rem auto 1.6rem; }
        .hero-eqn { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.7rem 0; max-width: 40rem; margin: 0 auto 1.8rem; overflow-x: auto; white-space: nowrap; }
        .hero-eqn .op { color: var(--accent); }
        .scroll-hint { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; }
        .scroll-hint .arrow { display: block; margin-top: 0.5rem; animation: bob 1.8s ease-in-out infinite; }
        @keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(7px);} }
        .closing h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0 0 1.2rem; font-weight: 800; line-height: 1.05; }
        .closing p { font-size: 1.15rem; max-width: 40rem; margin: 0 auto; }
        .closing .actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
        .pull { font-size: clamp(1.4rem,3vw,2rem); font-weight: 700; line-height: 1.25; border-left: 3px solid var(--accent); padding-left: 1.2rem; margin: 0 auto; max-width: 40rem; }

        /* Exhibit card */
        .card { width: 100%; max-width: 32rem; background: var(--surface-glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-preview); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); padding: 1.4rem; position: relative; overflow: hidden; }
        .fig-tag { font-size: 0.64rem; color: var(--muted); letter-spacing: 0.14em; margin-bottom: 0.9rem; display: block; }
        .cap { font-size: 0.72rem; color: var(--muted); margin-top: 1rem; line-height: 1.55; }
        canvas.viz, svg.viz { width: 100%; display: block; }

        /* photo frame + filmstrip */
        .photo-frame { width: 100%; max-width: 26rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-preview); position: relative; background: var(--panel); }
        .photo-frame img { width: 100%; display: block; }
        .panel.in .photo-frame img { animation: kb 16s ease-in-out infinite alternate; }
        @keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }
        .photo-cap { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); text-align: center; margin-top: 0.8rem; letter-spacing: 0.06em; }
        .filmstrip { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5rem; width: 100%; max-width: 26rem; margin-top: 0.7rem; }
        .slot { position: relative; aspect-ratio: 1/1; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: rgba(150,150,150,0.05); display: flex; align-items: center; justify-content: center; }
        .slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
        .slot .sl { font-family: var(--mono); font-size: 0.5rem; color: var(--muted); text-align: center; padding: 0.2rem; line-height: 1.3; z-index: 1; }

        /* controls */
        .btn { display: inline-block; text-decoration: none; padding: 0.55rem 0.85rem; border: 1px solid var(--line-strong); background: rgba(150,150,150,0.1); color: var(--text); border-radius: var(--radius-sm); font-size: 0.78rem; cursor: pointer; text-align: center; transition: background 0.2s, color 0.2s, border-color 0.2s; font-family: var(--mono); }
        .btn::before { content: "[ "; } .btn::after { content: " ]"; }
        .btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
        body[data-theme="dark"] .btn:hover { background: var(--white); color: var(--black); border-color: var(--white); }
        .btn.mini { padding: 0.4rem 0.6rem; font-size: 0.7rem; }
        .ctrlrow { display: flex; gap: 0.55rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
        input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: var(--line-strong); border-radius: 3px; outline: none; flex: 1; min-width: 90px; }
        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); cursor: pointer; }
        input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background: var(--accent); cursor: pointer; }
        .rlabel { font-size: 0.66rem; color: var(--muted); white-space: nowrap; }

        .ohm { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--accent); background: rgba(0,0,0,0.22); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.45rem; margin-top: 0.8rem; letter-spacing: 0.05em; font-family: var(--mono); }
        body[data-theme="light"] .ohm { background: rgba(0,71,214,0.06); }
        .reads { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-top: 0.7rem; }
        .read { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.45rem; text-align: center; font-size: 0.68rem; color: var(--muted); font-family: var(--mono); }
        .read b { display: block; font-size: 0.95rem; color: var(--text); margin-top: 0.2rem; }
        .read.on { border-color: var(--accent-line); background: var(--accent-soft); }
        .read.on b { color: var(--accent); }

        .stat { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-top: 1px dashed var(--line); opacity: 0.35; transition: opacity 0.5s ease; }
        .stat.on { opacity: 1; }
        .stat .stat-l { font-size: 0.78rem; }
        .stat .stat-v { font-family: var(--mono); font-weight: 700; color: var(--accent); white-space: nowrap; }
        .bignum { text-align: center; font-family: var(--mono); font-size: 1.4rem; font-weight: 700; margin-top: 0.8rem; }
        .bignum .op { color: var(--accent); }

        .footer { padding: 2rem; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 0.8rem; font-family: var(--mono); position: relative; z-index: 3; }

        @media (prefers-reduced-motion: reduce) {
            .reveal { transition: none; opacity: 1; transform: none; } .scroll-hint .arrow { animation: none; } .panel.in .photo-frame img { animation: none; }
            html { scroll-behavior: auto; }
        }
        @media (max-width: 64rem) {
            .panel { padding: calc(var(--nav-height) + 2.5rem) 0 3rem; }
            .wrap { grid-template-columns: 1fr; gap: 2rem; }
            .panel.flip .txt { order: 0; }
            .exhibit { order: -1; }
            .card, .photo-frame, .filmstrip { max-width: 30rem; margin: 0 auto; }
        }
        @media (max-width: 48rem) {
            :root { --nav-height: 54px; }
            .nav-inner { padding: 0.5rem 1rem; }
            .hamburger { display: inline-block; }
            .nav-links { position: fixed; top: var(--nav-height); left: 0; width: 100%; flex-direction: column; align-items: flex-start; background: var(--surface-glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow-preview); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1.2rem; gap: 1rem; transform: translateY(-150%); transition: transform 0.3s ease; z-index: 40; }
            .nav-links.open { transform: translateY(0); }
            .nav-links a, .theme-toggle { width: 100%; font-size: 1rem; }
            .wrap { padding: 0 1.25rem; }
            h2.ch { font-size: 2rem; }
            .txt p.lead { font-size: 1.15rem; }
            .card { padding: 1.05rem; }
        }
        .vid { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.65rem 0; border-top: 1px solid var(--line); }
        .vid:first-of-type { border-top: 0; }
        .vid b { display: block; font-size: 0.92rem; }
        .vid span { display: block; font-family: var(--mono); font-size: 0.64rem; color: var(--muted); margin-top: 0.15rem; letter-spacing: 0.05em; }
        .vid .btn { flex-shrink: 0; }
        .btn.geo.on { background: var(--accent); color: #fff; border-color: var(--accent); }
        /* hero: photo on top, title + text below */
        .hero-split { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-height) + 2.4rem) 2rem 3rem; }
        .hero-wrap { max-width: 60rem; margin: 0 auto; width: 100%; text-align: center; }
        .hero-split .cover-title { color: var(--text); margin: 0.6rem auto 0; }
        .hero-photo { margin: 1.7rem auto; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-preview); max-width: 54rem; }
        .hero-photo img { width: 100%; display: block; max-height: 54vh; object-fit: cover; }
        .hero-split .hero-sub { margin: 0 auto 1.4rem; }
        @media (max-width: 48rem) { .hero-photo img { max-height: 40vh; } .hero-split { padding-top: calc(var(--nav-height) + 1.5rem); } }
        /* ---- work-experience pages: shared additions ---- */
        .role-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem; font-family: var(--mono); font-size: 0.74rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.75rem 0; max-width: 46rem; margin: 0 auto 1.8rem; }
        .role-strip b { color: var(--text); font-weight: 700; }
        .role-strip .op { color: var(--accent); }
        .hero-card { max-width: 46rem; margin: 1.6rem auto; text-align: left; }
        .steps { list-style: none; margin: 0.3rem 0 0; padding: 0; counter-reset: st; }
        .steps li { counter-increment: st; position: relative; padding: 0.62rem 0 0.62rem 2.4rem; border-top: 1px dashed var(--line); font-size: 0.95rem; line-height: 1.55; }
        .steps li:first-child { border-top: 0; }
        .steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 0; top: 0.66rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--accent); }
        .steps li b { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-bottom: 0.1rem; }
        .field { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.75rem; flex-wrap: wrap; }
        .field select, .field input[type="number"] { font-family: var(--mono); font-size: 0.74rem; color: var(--text); background: rgba(150,150,150,0.08); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.35rem 0.5rem; }
        .field select option { background: var(--panel); color: var(--text); }
        .rval { font-family: var(--mono); font-size: 0.72rem; color: var(--text); min-width: 4.2rem; text-align: right; white-space: nowrap; }
        .reads.four { grid-template-columns: repeat(4, 1fr); }
        @media (max-width: 30rem) { .reads.four { grid-template-columns: 1fr 1fr; } }
        .note { font-family: var(--mono); font-size: 0.64rem; color: var(--muted); margin-top: 0.8rem; line-height: 1.55; letter-spacing: 0.02em; }

        /* ---- skills chapter: hard + soft, side by side ---- */
        .skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; width: 100%; }
        .skill-card { background: var(--surface-glass); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
        .skill-card h3 { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.9rem; color: var(--muted); }
        .skill-card h3 .n { color: var(--accent); }
        .skill-card ul { list-style: none; margin: 0; padding: 0; }
        .skill-card li { padding: 0.55rem 0; border-top: 1px dashed var(--line); font-size: 0.94rem; line-height: 1.5; }
        .skill-card li:first-child { border-top: 0; }
        .skill-card li b { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-bottom: 0.1rem; }
        .skill-card li span { color: var(--muted); font-size: 0.86rem; }
        .skill-card.hard li b { color: var(--accent); }
        .wrap.skills { grid-template-columns: 1fr; gap: 2rem; }
        .wrap.skills .txt { max-width: 46rem; }
        @media (max-width: 48rem) { .skills-grid { grid-template-columns: 1fr; } }