@font-face{font-family:Manrope;src:url('fonts/manrope-latin-400-normal.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/manrope-latin-600-normal.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/manrope-latin-700-normal.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--label-size:.75rem;--deny:#ff8a80;--allow:#7fd8a4;--warn:#f2c14e;color-scheme:dark;--bg:#101116;--surface:#191b23;--ink:#f4f5fa;--muted:#adb2c2;--line:#363b4b;--accent:#ff9675;--soft:#342725;--button-ink:#171113;--second:#a99bff;--shadow:#0006}
:root[data-canvas=light]{--deny:#b3261e;--allow:#1d7443;--warn:#855700;color-scheme:light;--bg:#f6f7fc;--surface:#fff;--ink:#181b2c;--muted:#515a70;--line:#c7ccdb;--accent:#a93918;--soft:#ffdfd2;--button-ink:#fff;--second:#6150bd;--shadow:#2733591c}
:root[data-palette=electric]{--accent:#70caff;--soft:#183044;--second:#dca4ff}:root[data-palette=acid]{--accent:#d6ef72;--soft:#2a321d;--second:#9fabff}:root[data-palette=neon]{--accent:#3ef2ff;--soft:#0f3038;--second:#ff4fd8}
:root[data-palette=tron]{--accent:#19d7ff;--soft:#08323f;--second:#ff7a14}:root[data-canvas=light][data-palette=tron]{--accent:#006f8a;--soft:#d6f1f7;--second:#b34700}:root[data-canvas=light][data-palette=electric]{--accent:#075b9b;--soft:#dceeff;--second:#8447aa}:root[data-canvas=light][data-palette=acid]{--accent:#496600;--soft:#e8f2c7;--second:#4d58b0}:root[data-canvas=light][data-palette=neon]{--accent:#00707d;--soft:#d6f4f7;--second:#b0178f}
:root{--site-width:1240px;--site-gutter:clamp(18px,2.5vw,40px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h,80px) + 24px)}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'Segoe UI',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,summary{font:inherit}button,summary{cursor:pointer}button{color:inherit}a,button,summary,input{touch-action:manipulation}a:hover{text-decoration:underline;text-underline-offset:5px}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}h1,h2,h3{font-family:'Arial',sans-serif;font-weight:500;line-height:1.06;letter-spacing:-.055em;margin:0}em{color:var(--accent);font-style:normal}p{margin:0 0 1.2rem}.shell{width:min(var(--site-width),calc(100% - 2 * var(--site-gutter)));margin:auto}.skip{position:fixed;top:-100px;left:20px;background:var(--accent);color:var(--button-ink);padding:12px;z-index:100}.skip:focus{top:10px}
@media(forced-colors:active){button[role=tab][aria-selected=true]{border-bottom:4px solid Highlight!important}}
/* Theme lives in header layer 20; lift only its open panel above the Contents dock (30). */
body>header:has(#remix[open]){z-index:31}
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:16px max(var(--site-gutter),calc((100% - var(--site-width))/2));background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand{font-size:22px;font-weight:600;margin-right:auto}.brand span{color:var(--accent)}nav{display:flex;flex-wrap:wrap;gap:24px}nav a{font-size:14px;padding:10px 0}summary{list-style:none}summary::-webkit-details-marker{display:none}#remix>summary{padding:9px 17px;border:1px solid var(--line);border-radius:30px;display:flex;align-items:center;gap:12px;font-size:14px}summary i{width:9px;height:9px;border-radius:50%;background:var(--accent)}.preferences{position:absolute;right:24px;top:78px;width:min(360px,calc(100vw - 32px));background:var(--surface);padding:24px;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 80px var(--shadow)}.preferences h2{font-size:28px;margin-bottom:20px}fieldset{border:0;padding:0;margin:16px 0;display:flex;flex-wrap:wrap;gap:12px}legend{font-size:14px;color:var(--muted);margin-bottom:8px}label{cursor:pointer}input{accent-color:var(--accent)}fieldset label{font-size:14px;padding:7px 0}.motion{display:flex;gap:9px;align-items:center;font-size:14px}#theme-status{font-size:12px;color:var(--muted);margin:12px 0 0}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;min-height:790px;padding-block:85px}.eyebrow{font-size:var(--label-size);letter-spacing:.14em;font-weight:700;color:var(--muted)}h1{font-size:clamp(64px,7.7vw,106px);margin:28px 0}.lead{font-size:22px;line-height:1.5;max-width:520px}.muted{color:var(--muted);max-width:490px}.button{display:inline-flex;gap:25px;align-items:center;justify-content:center;background:var(--accent);color:var(--button-ink);padding:14px 24px;border-radius:40px;font-weight:700;font-size:14px;margin-top:18px;min-height:48px}.hero-meta{display:flex;gap:20px;font-size:12px;color:var(--muted);margin-top:45px}.hero-meta span{border-top:1px solid var(--line);padding-top:12px}.experiment{min-width:0;border:1px solid var(--line);border-radius:22px;background:radial-gradient(ellipse at 50% 30%,var(--soft),var(--surface) 72%);box-shadow:0 30px 100px var(--shadow);overflow:hidden}.viewer-heading{display:flex;justify-content:space-between;padding:20px 24px;font:12px monospace;letter-spacing:.12em;border-bottom:1px solid var(--line)}.scene{height:355px;display:grid;place-items:center;perspective:1000px;overflow:hidden}.layers{width:245px;height:245px;position:relative;transform-style:preserve-3d;transform:rotateX(55deg) rotateZ(-32deg);transition:transform .65s ease}.plane{position:absolute;inset:0;border:1px solid var(--accent);border-radius:12px;background:var(--surface);box-shadow:0 10px 30px var(--shadow);overflow:hidden;transition:transform .65s ease}.plane>span{position:absolute;top:12px;left:13px;font-size:12px;letter-spacing:.07em;z-index:2}.plane-back{transform:translateZ(-62px)}.plane-middle{transform:translateZ(0)}.plane-front{transform:translateZ(62px);background:color-mix(in srgb,var(--surface) 86%,transparent)}.plane-front b{position:absolute;bottom:20px;left:20px;font-size:30px;line-height:1.1;letter-spacing:-.04em}.matrix{position:absolute;inset:45px 20px 20px;background:repeating-linear-gradient(90deg,transparent 0 21px,var(--line) 21px 23px),repeating-linear-gradient(0deg,var(--soft) 0 21px,var(--line) 21px 23px)}canvas{width:100%;height:100%;opacity:.8;image-rendering:pixelated}.signal{position:absolute;inset:55px 20px 100px;background:repeating-linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 12px);mask-image:linear-gradient(0deg,transparent,#000,transparent);opacity:.5}.layers.collapsed .plane{transform:translateZ(0)}.layers.collapsed{transform:rotateX(0) rotateZ(0)}.viewer-controls{padding:24px;border-top:1px solid var(--line);background:var(--surface)}.control-heading{display:flex;justify-content:space-between;gap:10px;font-size:14px}output{color:var(--accent);white-space:nowrap}input[type=range]{width:100%;height:30px;margin:15px 0 0}.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.quiet{border:1px solid var(--line);background:transparent;border-radius:30px;padding:10px 18px;font-size:14px;margin:18px 0 12px}.caption{font-size:12px;color:var(--muted);margin:0}
.work,.about{padding-block:100px;border-top:1px solid var(--line)}.section-head{max-width:720px;margin-bottom:65px}h2{font-size:clamp(42px,5vw,70px);margin:18px 0 24px}.project{display:grid;grid-template-columns:100px 1.5fr 1fr;gap:35px;padding:55px 0;border-top:1px solid var(--line);scroll-margin-top:0}.project-index{font-size:32px;color:var(--accent)}.project-index span{display:block;font:12px/1.6 sans-serif;letter-spacing:.08em;color:var(--muted);margin-top:14px}h3{font-size:40px;margin-bottom:22px}.project-body>p{color:var(--muted)}.tags{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}.tags span{border:1px solid var(--line);padding:6px 12px;border-radius:25px;font-size:12px}.case summary{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:18px 0;min-height:48px;font-weight:600}.case summary span{color:var(--accent)}.case[open] summary span{transform:rotate(45deg)}.case-content{padding:10px 0}.case-content h4{font-size:16px;margin:20px 0 8px}.case-content p{color:var(--muted)}.project-note{align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:4px 20px 4px 4px;padding:30px;transition:transform .3s ease}.project-note>span{font-size:12px;letter-spacing:.12em;color:var(--muted)}.project-note p{font-size:30px;line-height:1.3;letter-spacing:-.03em;margin-top:35px}.project-note a{font-size:14px;text-decoration:underline;text-underline-offset:5px}.about{display:grid;grid-template-columns:1.1fr 1fr;gap:70px}.about-copy{padding-top:40px}.about-copy>p:not(.lead){color:var(--muted)}#contact{margin-top:50px;scroll-margin-top:0}.text-link{display:inline-block;margin:20px 0;font-size:14px}footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-block:30px;font-size:12px;color:var(--muted)}
@media(max-width:1000px){.hero{gap:30px}h1{font-size:68px}.project{grid-template-columns:65px 1fr}.project-note{grid-column:2}.about{gap:40px}.control-heading{flex-wrap:wrap}}
@media(max-width:720px){header{padding:12px var(--site-gutter);gap:15px;flex-wrap:wrap}.brand{font-size:20px}nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:3px;gap:45px}nav a{padding:5px;min-height:35px}.preferences{top:60px;right:18px}.hero{grid-template-columns:1fr;padding-block:50px;gap:40px}.intro{text-align:center}.intro p{margin-inline:auto}h1{font-size:clamp(55px,13vw,84px)}.lead{font-size:20px}.hero-meta{margin-top:28px}.scene{height:325px}.layers{width:220px;height:220px}.viewer-controls{padding:20px}.control-heading{font-size:14px}.work,.about{padding-block:60px}.project{grid-template-columns:1fr;gap:20px;padding:35px 0}.project-index{display:flex;gap:20px;align-items:center;font-size:24px}.project-index span{margin:0}.project-note{grid-column:1}.project-note p{margin-top:18px}.section-head{margin-bottom:35px}h3{font-size:34px}.about{grid-template-columns:1fr;gap:5px}.about-copy{padding-top:10px}footer{flex-wrap:wrap;justify-content:center;text-align:center}.text-link{margin-left:0;display:block}.plane-front b{font-size:27px}}
.scroll-line{position:fixed;inset:0 0 auto;height:3px;background:var(--accent);z-index:40;transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero{position:relative}
.quick-remix{display:inline-flex;align-items:center;padding:8px 0;margin-top:16px;background:transparent;border:0;color:var(--accent);font-size:14px;text-decoration:underline;text-underline-offset:5px}
.explore-dock{position:fixed;z-index:15;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:4px;width:max-content;padding:6px;border:1px solid var(--line);border-radius:40px;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(16px);box-shadow:0 8px 36px var(--shadow)}
.explore-dock a{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:30px;font-size:14px;color:var(--muted)}.explore-dock a[aria-current]{background:var(--accent);color:var(--button-ink)}.chapter-number{font:12px monospace;opacity:1}
html[data-motion=on] .reveal.arrived{animation:arrive .65s cubic-bezier(.2,.7,.2,1) both}html[data-motion=on] .button,html[data-motion=on] .quick-remix,html[data-motion=on] .explore-dock a{transition:transform .22s ease}
@keyframes arrive{from{opacity:.65;translate:0 20px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine){html[data-motion=on] .button:hover{transform:translateY(-3px)}.quick-remix:hover{color:var(--ink)}.project-note:hover{border-color:var(--accent)}}
@media(max-width:720px){.explore-dock{padding:5px}.explore-dock a{padding:8px 13px;min-height:44px}.chapter-number{display:none}.quick-remix{margin-top:12px}}
body{isolation:isolate;font-family:Manrope,'Segoe UI',sans-serif;font-weight:400;line-height:1.7}h1,h2,h3{font-family:inherit;font-weight:700;letter-spacing:-.04em;line-height:1.12}h1{font-size:clamp(3.5rem,6.4vw,5.5rem);letter-spacing:-.045em}h2{font-size:clamp(2.5rem,4.5vw,3.75rem)}h3{font-size:2.25rem}.lead{font-weight:400;line-height:1.6}.eyebrow{font-weight:600;letter-spacing:.11em}.project-note p{letter-spacing:-.025em}.brand{display:flex;align-items:center;gap:12px;font-size:1rem;line-height:1.35;min-width:0;flex-shrink:0;letter-spacing:-.015em}.brand .monogram{font-size:1.35rem;font-weight:700;letter-spacing:-.055em}.brand .brand-name{color:var(--ink);font-weight:600}.brand .brand-slash{color:var(--accent);font-weight:400}.button{line-height:1.5}.project-index span{font-family:inherit}
@media(max-width:1000px) and (min-width:721px){.hero{grid-template-columns:1fr 1fr;gap:28px}h1{font-size:clamp(3rem,6.8vw,4.25rem)}.brand{font-size:.875rem;gap:9px}header{gap:18px}nav{gap:18px}}
@media(max-width:720px){.brand{flex:1;font-size:.875rem;gap:8px}.brand .monogram{font-size:1.125rem}h1{font-size:clamp(3rem,11.4vw,4.75rem);line-height:1.12}h3{font-size:2rem}.explore-dock{gap:2px}.explore-dock a{padding-inline:12px}}
@media(max-width:360px){.brand{gap:6px;font-size:.8125rem}#remix>summary{padding-inline:12px}}
/* Shared reading rhythm, comfortable controls, and the professional role. */
h1,h2,h3{overflow-wrap:anywhere}.explore-dock a{overflow-wrap:anywhere}
.large-text .explore-dock{position:static;transform:none;display:grid;grid-template-columns:1fr 1fr;margin:16px auto;max-width:calc(100% - 36px)}.large-text .explore-dock a{white-space:nowrap}.large-text header{position:relative;flex-wrap:wrap}.large-text .brand{flex-basis:100%;flex-shrink:1}.large-text .brand .brand-name{max-width:none}.large-text footer{padding-bottom:30px}.large-text .preferences{top:100%}.large-text h1{font-size:clamp(2rem,1.5rem + 6vw,5.5rem)}
html{scroll-padding-bottom:110px}body{font-size:1rem}.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.intro,.project-body,.about-copy{min-width:0}.hero-meta{flex-wrap:wrap;gap:14px}.hero-meta span{font-size:.875rem}.lead{font-size:1.375rem}.section-head{max-width:900px}.section-head h2{text-wrap:balance}.muted,.project-body>p,.case-content p,.about-copy>p{max-width:62ch}.role-card{display:grid;grid-template-columns:minmax(0,1fr);padding:36px;margin-bottom:48px;border:1px solid var(--line);border-radius:4px 20px 4px 4px;background:var(--surface)}.role-heading h3{font-size:clamp(1.75rem,2.7vw,2.5rem);margin:14px 0 20px}.role-heading>p:last-child{color:var(--muted);margin:0;max-width:43ch}
.button,.quiet,#remix>summary,header nav a,.project-note a,.text-link{min-height:44px}.project-note a{display:inline-flex;align-items:center}.preferences{max-height:calc(100dvh - 100px);overflow-y:auto}.preferences fieldset label{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;font-size:.875rem}.preferences label:has(input:checked){background:var(--soft);border-color:var(--accent)}.motion{min-height:44px;padding:8px;border-radius:10px}.tags span,.range-labels,.caption{font-size:.875rem}.control-heading,.quiet,.button,.quick-remix,.explore-dock a{font-size:.875rem}.caption{line-height:1.6}.quick-remix[hidden]{display:none}.quick-remix{min-height:44px}.intro:has(.quick-remix[hidden]){padding-bottom:60px}.range-labels{gap:16px}.range-labels span:last-child{text-align:right}.control-heading label{min-width:0}.explore-dock{max-width:calc(100% - 24px)}.explore-dock a{min-width:0}a,button,summary,input{scroll-margin-block:16px}
@media(max-width:1000px){.role-card{padding:28px}.hero{gap:28px}}
@media(max-width:720px){.hero{grid-template-columns:minmax(0,1fr)}.lead{font-size:1.125rem}.role-card{padding:24px;margin-bottom:32px}.role-heading h3{font-size:1.875rem}.hero-meta{gap:12px;justify-content:center}.hero-meta span{font-size:.8125rem}.control-heading{flex-wrap:wrap}.preferences{top:64px;max-height:calc(100dvh - 86px)}.brand{flex-shrink:1}.brand-name{overflow-wrap:anywhere}.explore-dock a{padding-inline:11px}}
@media(max-height:500px){header{position:relative}.explore-dock{position:static;transform:none;margin:0 auto 18px}footer{padding-bottom:30px}.preferences{max-height:70vh}}
html[data-motion=off]{scroll-behavior:auto}html[data-motion=off] *,html[data-motion=off] *::before{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before{animation:none!important;transition:none!important}}
/* Shared Remix panel: reachable from Work and every validation note. */
#remix{z-index:60}#remix>summary{border-color:var(--accent);background:var(--soft);font-weight:600;cursor:pointer}#remix[open]>summary{background:var(--accent);color:var(--button-ink)}#remix .preferences{position:fixed;top:90px;right:24px;z-index:70;max-height:calc(100dvh - 112px);overflow:auto}#remix .preferences h2{font-size:1.375rem;line-height:1.35;letter-spacing:-.02em}#remix .preferences fieldset{display:flex;flex-wrap:wrap;gap:10px}#remix .preferences label{margin:0;font-weight:400}#remix .preferences input{width:auto;min-height:0}#remix .preferences input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.remix-launch,.remix-close{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1.5px solid var(--accent);border-radius:10px;background:var(--soft);color:var(--ink);font-family:inherit;font-size:.9375rem;font-weight:600;line-height:1.5;cursor:pointer}.remix-launch:hover,.remix-close:hover{background:var(--accent);color:var(--button-ink)}.remix-launch{margin-top:16px}.remix-close{margin-top:12px;width:100%}
@media(max-width:650px){#remix .preferences{top:16px;right:16px;max-height:calc(100dvh - 32px);width:calc(100vw - 32px)}.notes-body header{gap:12px}.notes-body header nav{gap:12px}#remix{margin-left:auto}}
:root[data-palette=violet]{--accent:#c4a5ff;--soft:#2b2340;--second:#b7c4ff}:root[data-palette=rose]{--accent:#ffa3c5;--soft:#3b2430;--second:#dcc0ff}:root[data-palette=teal]{--accent:#65dcca;--soft:#19352f;--second:#a5d9ff}
:root[data-canvas=light][data-palette=violet]{--accent:#6743a5;--soft:#ede4fa;--second:#3d519a}:root[data-canvas=light][data-palette=rose]{--accent:#a72d5e;--soft:#ffe3ee;--second:#734091}:root[data-canvas=light][data-palette=teal]{--accent:#006c60;--soft:#d8f4ed;--second:#225785}
#remix .custom-colour{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}#remix input[type=color]{width:72px;height:44px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--bg);cursor:pointer}#custom-colour-help{font-size:.875rem;line-height:1.5;margin:8px 0 16px}

/* Small-screen audit: preserve intrinsic widths and make actions touchable. */
@media(max-width:700px){header{gap:10px}header nav a{min-height:44px;display:inline-flex;align-items:center}.project>*{min-width:0}.role-card,.project-body,.about-copy{overflow-wrap:anywhere}button,.button,summary{touch-action:manipulation}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px}.preferences{max-width:calc(100vw - 24px)}.explore-dock{overflow-x:auto;justify-content:flex-start}.explore-dock a{min-height:44px;display:flex;align-items:center}img,canvas,video{max-width:100%;height:auto}}

@media(max-width:720px){.portfolio-body header nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px}.portfolio-body header nav a{justify-content:center;text-align:center}}

/* The introduction precedes its actions; one shared baseline for links and icons. */
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin-block:1.5rem; }
.hero-actions .button { margin:0; gap:.85rem; text-align:left; }
.hero-secondary { display:inline-flex; align-items:center; gap:.75rem; min-height:48px; text-decoration:underline; text-underline-offset:.25rem; }
.hero .intro > .lead { margin-block:0 1rem; }
.hero .intro > h1 { margin-block:1.25rem 1.5rem; }
.hero-meta { margin-top:1.5rem; }
@media(max-width:600px) { .hero-actions { align-items:stretch; } .hero-actions > a { justify-content:space-between; width:100%; } }

.hero .intro { text-align:left; }
.hero .intro p { margin-inline:0; }
.hero .hero-meta { justify-content:flex-start; }

/* R41: native selects follow the canvas; page rules still win (zero specificity). */
:where(select){min-height:44px;padding:0 12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;font:inherit}

/* R41 (M10): Lumos/Nox reveal. The new canvas grows as one circle (script.js
   animates the clip), so the header is not captured on its own. */
:root.canvas-reveal::view-transition-old(root),:root.canvas-reveal::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.canvas-reveal body>header{view-transition-name:none}
/* R41 (E1): four palettes upfront sit two by two. */
.preferences>fieldset:has([value=neon])>label{flex-basis:40%}

/* Sticky navigation begins only after measurement; native links keep a small reading gap. */
html:not([data-navigation]) body > header{position:relative}
html:not([data-navigation]){scroll-padding-top:24px}
html[data-navigation]{scroll-padding-top:calc(var(--header-clearance,0px) + 24px)}
/* fragile: Playwright 1.56.1 / Chromium 141 (build 1194) shifts a fragment target by about 8px when the delayed web font swaps in; without this the heading lands off its reading gap (tests/site-navigation.mjs). The second selector, a heading inside a targeted section, is needed too: that test fails without it. */
:target:is(h1,h2,h3),:target :is(h1,h2,h3){overflow-anchor:none}

/* The themed arrow (black with a white outline on dark, white with a black outline on light) shows over everything, links, buttons and the playground's crosshair too;
   only text fields keep the I-beam. !important beats the page's own and scripted cursors. */
html{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M4.5 4.5L22.5 10.5 15 13.5 11.5 22z' fill='%23000' stroke='%23fff' stroke-width='7.5' stroke-linejoin='round'/%3E%3Cpath d='M4.5 4.5L22.5 10.5 15 13.5 11.5 22z' fill='%23000' stroke='%23000' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-canvas=light]{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M4.5 4.5L22.5 10.5 15 13.5 11.5 22z' fill='%23fff' stroke='%23000' stroke-width='7.5' stroke-linejoin='round'/%3E%3Cpath d='M4.5 4.5L22.5 10.5 15 13.5 11.5 22z' fill='%23fff' stroke='%23fff' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
:not(textarea,[contenteditable],input:is(:not([type]),[type=text],[type=search],[type=url],[type=email],[type=number],[type=password])),::file-selector-button{cursor:var(--arrow) 3 3,auto!important}

.investigation-examples{border-top:1px solid var(--line);margin:45px 0;padding-top:35px}.investigation-examples>h3{font-size:clamp(1.6rem,3vw,2.4rem);margin:12px 0 24px}.investigation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.investigation-grid article{background:var(--surface);border:1px solid var(--line);border-radius:4px 16px;padding:22px}.investigation-grid h4{margin:0 0 12px;font-size:1.1rem}.investigation-grid p{color:var(--muted);font-size:.9rem}.investigation-grid a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}.investigation-examples>.caption{margin-top:18px}
@media(max-width:800px){.investigation-grid{grid-template-columns:1fr}}
.project-image{display:block;max-width:100%;height:auto;margin-inline:auto}

.experiment .scene{height:340px;touch-action:pan-y;cursor:grab;user-select:none}.experiment .scene.dragging{cursor:grabbing}.experiment .layers{width:205px;height:205px;transition:none!important;--layer-gap:62px}.experiment .plane{transition:none!important}.experiment .plane-back{transform:translateZ(calc(-1 * var(--layer-gap)))}.experiment .plane-middle{transform:translateZ(0)}.experiment .plane-front{transform:translateZ(var(--layer-gap))}.experiment .plane[hidden]{display:none}.experiment .plane>span{font-size:12px;background:var(--surface);padding:3px 5px;left:8px;top:8px}.experiment .plane-front b{font-size:26px;background:var(--surface);padding:8px;left:12px;bottom:12px;border-radius:5px}.experiment #output-preview{opacity:.35}.experiment .scene-help{padding:0 24px 16px;margin:0;color:var(--muted);font-size:.875rem;line-height:1.5}.lab-actions{display:flex;flex-wrap:wrap;gap:10px}.lab-actions .quiet{margin:16px 0}.lab-settings,.architecture{border-top:1px solid var(--line)}.lab-settings>summary,.architecture>summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:48px;padding-block:14px;font-size:.875rem;font-weight:600}.lab-settings[open]>summary>span,.architecture[open]>summary>span{rotate:45deg}.settings-body{padding:8px 0 24px}.lab-control{margin-bottom:22px}.lab-control>.control-heading{display:flex;justify-content:space-between;gap:16px;font-size:.875rem}.lab-control input[type=range]{margin-top:6px;min-height:36px}.lab-control output{font-variant-numeric:tabular-nums;color:var(--accent)}.layer-options{gap:8px;margin:20px 0}.layer-options label{display:flex;align-items:center;gap:6px;font-size:.875rem;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:10px}.settings-body select{display:block;width:100%;min-height:44px;margin:10px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:.875rem}.settings-body>label{font-size:.875rem}.lab-disclaimer{padding-top:18px;border-top:1px solid var(--line)}.architecture h4{font-size:1.125rem;margin:22px 0 14px}.architecture p{font-size:.875rem;color:var(--muted)}.architecture .caption{margin:16px 0 0}.architecture a{text-decoration:underline;text-underline-offset:3px}
.photo-lab{border-top:1px solid var(--line)}.photo-lab>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding-block:14px;font-size:.875rem;font-weight:600}.photo-lab[open]>summary>span{rotate:45deg}.photo-upload{display:block;margin:20px 0 12px;font-size:.875rem}.photo-upload input{display:block;width:100%;max-width:100%;margin-top:10px;font-size:.875rem;min-height:44px}.photo-upload input::file-selector-button{background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;margin-right:10px}.photo-status{font-size:.875rem;color:var(--accent);margin:16px 0;overflow-wrap:anywhere}.photo-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px}.photo-comparison figure{margin:0;min-width:0}.photo-comparison canvas{display:block;width:100%;height:auto;aspect-ratio:1;border:1px solid var(--line);border-radius:10px;opacity:1;image-rendering:auto}.photo-comparison figcaption{font-size:.875rem;color:var(--muted);margin-top:8px}.photo-timeline-label{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font-size:.875rem}.photo-timeline-label output{color:var(--accent)}.photo-lab .lab-actions{gap:8px}.photo-lab .quiet{font-size:.875rem;padding-inline:12px}.dataset-photo{display:none;position:absolute;inset:0;opacity:1;image-rendering:auto}.has-photo .dataset-photo{display:block}.has-photo .matrix,.has-photo .plane-front b{display:none}.has-photo #output-preview{opacity:1;image-rendering:auto}
@media(max-width:1000px) and (min-width:721px){.hero{grid-template-columns:1fr}.intro{max-width:650px}.experiment{width:min(100%,650px);justify-self:center}.hero .intro{justify-self:center;text-align:center}.hero-meta{justify-content:center}}
@media(max-width:720px){.experiment .scene{height:310px}.experiment .layers{width:180px;height:180px}.experiment .plane-front b{font-size:22px}.experiment .plane>span{font-size:12px}.experiment .scene-help{padding-inline:20px}.lab-actions .quiet{flex:1;padding-inline:12px}}

.hero{min-height:650px}.lab-invitation{padding:40px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,var(--soft),var(--surface));min-width:0}.lab-invitation h2{font-size:clamp(2.5rem,4.3vw,4rem);margin:20px 0 28px}.lab-invitation>p:not(.eyebrow){max-width:36ch;color:var(--muted)}.invitation-topics{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px;font-size:.875rem;color:var(--muted)}.lab{padding-block:90px;border-top:1px solid var(--line);scroll-margin-top:100px}.lab .section-head{margin-bottom:40px}.lab .experiment{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;overflow:visible;width:100%;background:var(--surface)}.lab-visual{position:sticky;top:108px;min-width:0;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 50% 35%,var(--soft),var(--surface) 75%)}.lab .viewer-controls{min-width:0;border-top:0;border-left:1px solid var(--line);border-radius:0 22px 22px 0;padding:30px}.lab .scene{height:440px}.lab .layers{width:245px;height:245px}.lab .plane-front b{font-size:30px}.model-comparison{margin-top:28px;border:1px solid var(--line);border-radius:16px;padding:0 24px;background:var(--surface)}.model-comparison>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-size:1rem;font-weight:600}.model-comparison[open]>summary>span{rotate:45deg}.comparison-scroll{overflow-x:auto;border-top:1px solid var(--line);margin-bottom:22px}.comparison-scroll table{border-collapse:collapse;width:100%;font-size:.875rem;text-align:left}.comparison-scroll caption{text-align:left;color:var(--muted);padding:16px 0}.comparison-scroll th,.comparison-scroll td{padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:top;min-width:150px}.comparison-scroll th:first-child,.comparison-scroll td:first-child{padding-left:0}.comparison-scroll th{font-weight:600}.comparison-scroll td{color:var(--muted)}.comparison-scroll a,.architecture a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}.model-comparison>.caption{padding-bottom:22px;max-width:90ch}.lab .settings-body a{font-size:.875rem}.explore-dock a{padding-inline:13px}
@media(max-width:1000px){.lab .experiment{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lab .scene{height:350px}.lab .layers{width:190px;height:190px}.lab .viewer-controls{padding:22px}.lab .plane-front b{font-size:24px}.hero{grid-template-columns:1fr 1fr}.hero .intro{text-align:left}.hero .hero-meta{justify-content:flex-start}.lab-invitation{padding:28px}header nav{gap:16px}.lab .control-heading{flex-wrap:wrap}}
@media(max-width:720px){.hero{grid-template-columns:1fr;min-height:0}.hero .intro{text-align:left}.hero .hero-meta{justify-content:flex-start}.lab-invitation{text-align:center;padding:28px}.lab-invitation h2{font-size:2.5rem;line-height:1.2}.lab-invitation>p{margin-inline:auto}.invitation-topics{justify-content:center}.lab{padding-block:60px}.lab .experiment{grid-template-columns:minmax(0,1fr)}.lab-visual{position:static}.lab .viewer-controls{border-left:0;border-top:1px solid var(--line);border-radius:0 0 22px 22px;padding:20px}.lab .scene{height:320px}.lab .layers{width:180px;height:180px}.lab .plane-front b{font-size:22px}.model-comparison{padding:0 18px}.comparison-scroll th,.comparison-scroll td{min-width:135px;padding:14px 10px}.explore-dock a{padding-inline:8px;font-size:.875rem}.explore-dock{gap:0}header nav{gap:20px}}
@media(max-height:600px){.lab-visual{position:static}}
.large-text .lab .experiment{grid-template-columns:1fr}.large-text .lab-visual{position:static}.large-text .lab .viewer-controls{border-left:0;border-top:1px solid var(--line)}

.model-toolbar{padding:24px;border-bottom:1px solid var(--line)}.model-toolbar label{display:block;margin-bottom:8px;font-weight:600}.model-toolbar select{width:100%;font:inherit;padding:12px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px}.process-tabs{display:flex;gap:8px;margin-top:16px}.process-tabs button[aria-pressed=true]{background:var(--accent);color:var(--bg)}.architecture-visual{padding:24px}.architecture-visual h3{font-size:1.35rem;margin:0 0 16px}.flow-row{display:flex;align-items:center;gap:6px;margin:12px 0}.flow-node{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:12px 6px;text-align:center;font-size:.875rem;overflow-wrap:anywhere}.flow-node.active{border:2px solid var(--accent);padding:11px 5px;background:var(--soft)}.flow-arrow{color:var(--accent)}.flow-feedback{font-size:.875rem;color:var(--muted);border-left:2px solid var(--accent);padding-left:12px}.model-results{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.model-results figure{margin:0;min-width:0}.model-results canvas{width:100%;aspect-ratio:1;border:1px solid var(--line);border-radius:8px}.model-results figcaption{font-size:.875rem;margin-top:8px}.process-player{padding:20px 24px;border-top:1px solid var(--line)}.process-player .control-heading{display:flex;justify-content:space-between;gap:10px}.process-player input{width:100%}.process-player .lab-actions{margin-bottom:12px}.model-key{font-size:.875rem;color:var(--muted);min-height:3em}.lab .lab-visual{position:static}.lab .scene{height:280px}.lab .layers{width:160px;height:160px}.lab .plane-front b{font-size:22px}.spatial-details>summary{padding:20px 24px;border-top:1px solid var(--line)}.architecture-visual .caption{margin-bottom:0}@media(max-width:720px){.architecture-visual,.model-toolbar,.process-player{padding:20px}.flow-node{font-size:.875rem;padding-inline:4px}.flow-row{gap:4px}.model-results{gap:10px}}
.model-toolbar select{color:var(--ink)}.process-tabs button[aria-pressed=true]{color:var(--button-ink)}.model-results canvas{display:block;height:auto;opacity:1}.model-results{margin-bottom:16px}.process-tabs button:disabled{opacity:.5;cursor:not-allowed}

/* Shared disclosure affordance, including the rotatable layers. */
.inference-lab .credits{overflow-wrap:anywhere}
#up-compare .control-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
#up-download[hidden],#up-compare[hidden]{display:none}.up-detail{display:flex;gap:12px;align-items:center;min-height:44px;margin-top:12px;font-size:1rem}#up-download{justify-self:start}#upscale-lab{scroll-margin-top:150px}#sg-to-upscale,#anime-to-upscale{margin-top:16px}
.lab-shortcuts{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-start;border:0;padding:0;margin-top:22px;width:auto}.lab-shortcuts a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px;color:var(--accent)}
.fyp-evidence{margin:0 0 56px;padding:32px;border:1px solid var(--line);border-radius:4px 20px 4px 4px;background:var(--surface);scroll-margin-top:130px}
.fyp-evidence>p{max-width:75ch;color:var(--muted)}
.fyp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0}
.fyp-facts>div{border-top:1px solid var(--line);padding-top:16px}.fyp-facts dt{color:var(--muted);font-size:.875rem}.fyp-facts dd{margin:8px 0 0;font-size:1.3rem;font-weight:600}.fyp-facts small{font-size:.8rem;font-weight:400;color:var(--muted)}
.fyp-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.fyp-gallery figure{margin:0;min-width:0}.fyp-gallery a{display:block;border-radius:12px;overflow:hidden;background:white}.fyp-gallery img{display:block;width:100%;height:auto}.fyp-gallery figcaption{font-size:.875rem;color:var(--muted);margin:14px 0 28px}.fyp-gallery strong{display:block;color:var(--ink);margin-bottom:6px}.research-steps{padding-left:24px}.research-steps p{margin-top:6px}
@media(max-width:720px){.fyp-evidence{padding:20px}.fyp-facts,.fyp-gallery{grid-template-columns:1fr}.fyp-evidence h3{font-size:1.8rem}}
.large-text .fyp-facts,.large-text .fyp-gallery{grid-template-columns:1fr}
main details>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;font-size:1rem;font-weight:600;border-radius:8px}
main details>summary>span[aria-hidden=true]{display:none}
main details>summary::after{content:'';flex:0 0 9px;width:9px;height:9px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);margin:0 6px 5px 12px}
main details[open]>summary::after{transform:rotate(225deg);margin-top:6px}
main details>summary:hover{background:var(--soft)}
.spatial-details>summary{border:1px solid var(--line);margin:12px;padding:16px!important;background:var(--surface)}
select{scroll-margin-block:160px;max-width:100%;font:inherit}button:disabled{cursor:not-allowed;opacity:.55}
.model-toolbar select{font-size:1rem}.process-tabs{flex-wrap:wrap}.process-tabs .quiet{margin:4px 0}
.skip:not(:focus){clip-path:inset(100%);width:1px;height:1px;padding:0;overflow:hidden}
.inference-lab{margin-top:40px;padding:32px;border:1px solid var(--line);border-radius:4px 20px 4px 4px;background:var(--surface)}
.inference-lab h3{font-size:clamp(1.7rem,3vw,2.4rem);margin:12px 0 18px}.inference-lab p{max-width:75ch}
.inference-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.inference-controls{display:grid;gap:18px;min-width:0}.inference-controls label{display:block;font-size:1rem}.inference-controls input[type=file],.inference-controls select{display:block;width:100%;margin-top:8px;font-size:1rem;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:12px;border-radius:8px}
.inference-controls input::file-selector-button{background:var(--soft);color:var(--ink);padding:8px;border:1px solid var(--line);border-radius:6px;margin-right:8px}
.inference-controls .lab-actions button{margin:0}.inference-controls .caption{margin:0}.inference-preview{min-width:0;margin:0}.inference-preview canvas{display:block;width:100%;height:auto;aspect-ratio:1;opacity:1;border-radius:14px;border:1px solid var(--line);background:var(--bg);image-rendering:auto}.inference-preview figcaption{font-size:.875rem;margin-top:12px;color:var(--muted)}
.inference-preview[hidden],#anime-compare[hidden]{display:none}.inference-empty{border:1px dashed var(--line);border-radius:14px;padding:36px;color:var(--muted);text-align:center}.inference-lab a{text-decoration:underline;text-underline-offset:4px}.inference-lab .credits{margin:24px 0 0}.inference-status{min-height:3em;margin:0;color:var(--accent);overflow-wrap:anywhere}.inference-controls progress{width:100%;accent-color:var(--accent)}
@media(max-width:720px){.inference-lab{padding:20px}.inference-layout{grid-template-columns:1fr;gap:24px}.inference-controls input[type=file]{padding:8px;font-size:.875rem}.model-results figcaption{overflow-wrap:anywhere}}
.large-text .inference-layout{grid-template-columns:1fr}
.inference-controls input[type=number]{width:100%;padding:12px;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}.sg-pipeline{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0}.sg-pipeline li{padding:10px 14px;border:1px solid var(--line);border-radius:8px;font-size:.875rem}.sg-pipeline li span{color:var(--accent);margin-right:8px}.sg-trial .inference-controls label:has(input[type=checkbox]){display:flex;gap:12px;align-items:center;min-height:44px}
.lab .model-comparison{padding:0;overflow:hidden}
.lab .model-comparison>summary{width:100%;padding:18px 24px;border-radius:15px;min-height:64px}
.lab .model-comparison[open]>summary{border-radius:15px 15px 0 0}
.lab .model-comparison>.comparison-scroll{margin-inline:24px}
.lab .model-comparison>.caption{margin-inline:24px}
.lab .model-comparison>summary:focus-visible{outline-offset:-4px}
@media(max-width:720px){.lab .model-comparison>summary{padding-inline:18px}.lab .model-comparison>.comparison-scroll,.lab .model-comparison>.caption{margin-inline:18px}}
.sg-trial .sg-seed-control{display:flex;flex-wrap:wrap;align-items:end;gap:12px;min-width:0}
.sg-trial .sg-seed-control label{flex:1 1 180px;min-width:0;margin:0}
.sg-trial .sg-seed-control input{box-sizing:border-box;max-width:100%}
.sg-trial .sg-seed-control .quiet{min-height:44px;margin:0}
.site-legal{padding-block:32px 48px;border-top:1px solid var(--line);scroll-margin-top:90px}
.site-legal h2{font-size:clamp(1.3rem,2.5vw,1.8rem);margin:0 0 12px}
.site-legal p{max-width:90ch;margin:0 0 12px;color:var(--muted);line-height:1.6}
.site-legal p:last-child{margin-bottom:0}
footer{flex-wrap:wrap}
footer a[href="#site-legal"]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.inference-range .control-heading{margin-bottom:6px}.inference-range input[type=range]{width:100%;margin:0}

.sd-turbo-lab{scroll-margin-top:100px}
.sd-turbo-lab .inference-controls textarea{display:block;width:100%;margin-top:8px;padding:12px;min-height:112px;resize:vertical;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;line-height:1.5}
.sd-turbo-lab .inference-controls textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sd-turbo-lab .inference-controls :disabled{opacity:.7}
.sd-turbo-lab .lab-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sd-turbo-lab .lab-actions .quiet,.sd-turbo-lab .sd-result .quiet{min-height:44px;padding:10px 16px}
.sd-turbo-lab .sd-result{min-width:0;display:grid;align-content:start;gap:14px}
.sd-turbo-lab .inference-empty{display:grid;place-items:center;min-height:250px;margin:0;padding:24px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);text-align:center}
.sd-turbo-lab .inference-preview[hidden],.sd-turbo-lab [hidden]{display:none!important}
.sd-turbo-lab .inference-preview canvas{max-width:512px}
.sd-turbo-lab .credits{max-width:90ch}
.sd-turbo-lab .sd-seed-control{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.sd-turbo-lab .sd-seed-control label{flex:1 1 180px;margin:0}
.sd-turbo-lab .sd-seed-control .quiet{min-height:44px;margin:0}
.sd-turbo-lab .inference-layout>*{min-width:0}
.sd-turbo-lab .inference-controls select,.sd-turbo-lab .inference-controls input,.sd-turbo-lab .sd-export select{box-sizing:border-box;min-width:0;max-width:100%}
.sd-turbo-lab .sd-export{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.sd-turbo-lab .sd-export label{display:block;min-width:0;margin:0}
.sd-turbo-lab .sd-export select{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.sd-turbo-lab .sd-export-actions{display:flex;flex-wrap:wrap;gap:12px}
.sd-turbo-lab .sd-export .quiet{min-height:44px;max-width:100%}

.lab-tabbed [data-lab-panel][hidden],.lab-tabs[hidden],.lab-fallback[hidden]{display:none!important}
#lab>.section-head{max-width:100%;margin-bottom:20px}
#lab>.section-head h2{font-size:clamp(2rem,4vw,3.2rem);margin:12px 0}
.lab-use-notice{font-size:.875rem;line-height:1.6;color:var(--muted);max-width:85ch}
.lab-use-notice a,.tool-use-notice a{text-decoration:underline;text-underline-offset:3px}
.lab-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:16px}
.lab-tabs button{min-width:0;min-height:48px;padding:12px 8px;margin:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:.9375rem;cursor:pointer}
.lab-tabs button[aria-selected=true]{background:var(--accent);color:var(--button-ink);border-color:var(--accent);font-weight:700}
.lab-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lab-tabbed>.inference-lab{margin-top:0;padding:24px}
.lab-tabbed [data-lab-panel]{scroll-margin-top:110px}
.lab-tabbed .inference-lab>h3{font-size:clamp(1.5rem,3vw,2rem);margin:8px 0}
.tool-footprint{font-size:.875rem;color:var(--muted);margin:0 0 12px}
.tool-background{margin:0 0 22px;font-size:.9375rem;border-bottom:1px solid var(--line);padding-bottom:14px}
.tool-background summary{cursor:pointer;min-height:36px;padding:8px 0;color:var(--ink)}
.tool-background p{line-height:1.6;margin:12px 0}.tool-background .sg-pipeline{margin:12px 0}
.tool-use-notice{font-size:.875rem;color:var(--muted);margin:16px 0 0}
.lab-tabbed .inference-controls{gap:14px}
.lab-tabbed .inference-controls .caption{font-size:.875rem;line-height:1.55}
.terms-page{max-width:900px;padding-block:48px 64px}
.terms-page h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.1;margin:20px 0}
.terms-page h2{font-size:1.35rem;margin:30px 0 12px}
.terms-page p,.terms-page li{font-size:1rem;line-height:1.7;max-width:78ch}
.terms-page a{text-decoration:underline;text-underline-offset:3px}
.terms-page .terms-scope{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.terms-page .credits-list{display:grid;gap:18px;padding-left:20px}
.terms-page .credits-list li{padding-left:6px}
@media(max-width:720px){
 header nav{gap:clamp(12px,4vw,28px);flex-wrap:wrap}
 .lab-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
 .lab-tabs button{font-size:.875rem;padding:10px 5px}
 .lab-tabbed>.inference-lab{padding:18px}
 .terms-page{padding-block:28px 40px}
}

/* Keep tab labels, file pickers and long terms usable at narrow widths/zoom. */
.inference-layout>*{min-width:0}
.inference-controls input[type=file],.inference-controls select{max-width:100%;min-width:0}
.terms-page,.site-legal{overflow-wrap:anywhere}
.lab-tabs button{overflow-wrap:anywhere}
@media(min-width:721px) and (max-width:1000px){header{flex-wrap:wrap}header nav{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.notes-body header{flex-wrap:wrap}.notes-body header nav{flex-wrap:wrap;gap:20px}.notes-index,.note-article{padding-block:56px 80px}.notes-index h1{font-size:clamp(44px,7vw,84px)}.note-article h1{font-size:clamp(36px,5.4vw,64px);max-width:1000px;line-height:1.1;overflow-wrap:anywhere}.note-deck{font-size:clamp(20px,2.5vw,26px);max-width:850px;line-height:1.5}.notes-intro,.note-article>p{max-width:850px}.note-notice{padding:20px 24px;border-left:3px solid var(--accent);background:var(--surface);margin:28px 0;max-width:950px;color:var(--muted)}.notes-body .eyebrow{font-size:14px;margin-top:24px}.back-link{color:var(--accent)}.note-reading{max-width:850px}.note-reading h2{font-size:28px;margin:36px 0 16px;letter-spacing:-.025em}.note-reading li{margin-block:10px}.note-reading a,.code-lab a{text-decoration:underline;text-underline-offset:4px}.code-lab{margin:40px 0;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface);min-width:0}.code-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}.code-top h2{font-size:30px;letter-spacing:-.025em}.code-top span{font:14px monospace;color:var(--muted)}.code-lab label{display:block;font-weight:600;margin:20px 0 10px}.code-lab textarea{display:block;width:100%;height:470px;min-height:200px;resize:vertical;white-space:pre;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--bg);color:var(--ink);font:14px/1.65 ui-monospace,Consolas,monospace;tab-size:4}.code-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:20px 0}.code-actions button{margin:0;border:1px solid var(--line);border-radius:24px;padding:10px 18px;min-height:44px;background:var(--bg);font-size:14px}.code-actions .button{background:var(--accent);color:var(--button-ink)}.code-actions button:disabled{opacity:.55;cursor:wait}.code-lab h3{font-size:20px;letter-spacing:0}.code-lab pre{padding:18px;border-radius:8px;background:var(--bg);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-height:480px;font:14px/1.7 ui-monospace,Consolas,monospace}.run-status{color:var(--accent)}.code-fallback{font-size:14px;color:var(--muted);margin-bottom:0}.code-fallback code{overflow-wrap:anywhere}.validation-teaser{padding-block:60px;border-top:1px solid var(--line)}.validation-teaser h2{font-size:clamp(34px,5vw,56px)}.validation-teaser>p:not(.eyebrow){max-width:750px;margin-top:24px}.notes-body footer{flex-wrap:wrap;gap:20px}.notes-jump h2{font-size:clamp(1.4rem,2.5vw,1.75rem)}.pt-topics{display:grid;grid-template-columns:minmax(12rem,max-content) 1fr;gap:0 24px;margin:0}.pt-topics dt,.pt-topics dd{margin:0;padding-block:4px;border-top:1px solid var(--line)}.pt-topics dt{padding-top:12px;color:var(--muted);font-size:.875rem}:is(.pt-route,.pt-chapters,.pt-topics) a{text-decoration:underline;text-underline-offset:3px}@media(max-width:520px){.pt-topics{grid-template-columns:1fr}.pt-topics dd{border-top:0;padding-top:0}}@media(max-width:850px){.notes-body header{position:relative}.notes-body .brand{font-size:18px}.notes-body .shell{width:calc(100% - 32px)}.code-lab{padding:16px}.note-notice{padding:16px}.notes-index,.note-article{padding-top:32px}}@media(prefers-reduced-motion:reduce){.notes-body{scroll-behavior:auto}}
/* Shared text metrics keep the highlighted layer aligned with native editing. */
.syntax-editor{position:relative;background:var(--bg);border-radius:8px;overflow:hidden}
/* R41 (V8): the tokens live on the page so lab outputs can use them too. */
.notes-body{--cpp-comment:#9faebc;--cpp-keyword:#c5a5ff;--cpp-string:#b6d986;--cpp-number:#ffc38c;--cpp-type:#85d4e2;--cpp-function:#ffe19a;--cpp-directive:#ffb39f}
:root[data-canvas=light] .notes-body{--cpp-comment:#596779;--cpp-keyword:#7441a7;--cpp-string:#3f681b;--cpp-number:#914700;--cpp-type:#126675;--cpp-function:#805509;--cpp-directive:#a13f28}
.code-lab .syntax-editor textarea,.code-lab .syntax-highlight{font:14px/1.65 var(--term-font);font-variant-ligatures:none;letter-spacing:normal;tab-size:4;white-space:pre;overflow-wrap:normal;word-break:normal;padding:16px;border:1px solid var(--line);border-radius:8px;text-align:left;margin:0}
.code-lab .syntax-highlight{position:absolute;inset:0;max-height:none;overflow:hidden;pointer-events:none;color:var(--ink);background:var(--bg)}
.code-lab .syntax-ready textarea{position:relative;z-index:1;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--ink)}
.code-lab .syntax-ready textarea::selection{background:var(--soft);color:var(--ink);-webkit-text-fill-color:var(--ink)}
.syntax-highlight .cpp-comment{color:var(--cpp-comment)}.syntax-highlight .cpp-keyword,.syntax-highlight .cpp-literal{color:var(--cpp-keyword)}.syntax-highlight .cpp-string{color:var(--cpp-string)}.syntax-highlight .cpp-number{color:var(--cpp-number)}.syntax-highlight .cpp-type{color:var(--cpp-type)}.syntax-highlight .cpp-function{color:var(--cpp-function)}.syntax-highlight .cpp-directive{color:var(--cpp-directive)}
@media(forced-colors:active){.code-lab .syntax-highlight{display:none}.code-lab .syntax-ready textarea{color:CanvasText;-webkit-text-fill-color:CanvasText;background:Canvas;caret-color:CanvasText}}
@media print{.code-lab .syntax-highlight{display:none}.code-lab .syntax-ready textarea{color:#000;-webkit-text-fill-color:#000;background:#fff}}
/* Editorial typography and breathing room for the validation articles. */
.notes-body{font-family:Manrope,'Segoe UI',sans-serif;line-height:1.8}.notes-body h1,.notes-body h2,.notes-body h3{font-family:Manrope,'Segoe UI',sans-serif}.note-article>h1{font-weight:600;letter-spacing:-.045em;line-height:1.14}.note-reading>h2{padding-top:28px;margin-top:36px;border-top:1px solid var(--line);font-weight:600;line-height:1.3}.note-reading>p{max-width:76ch}.note-reading li{padding-left:5px}.note-article .note-deck{color:var(--muted);margin-bottom:28px}.code-top h2{font-weight:600}.code-lab #code-help{max-width:86ch;color:var(--muted);font-size:15px}.code-lab .syntax-editor textarea,.code-lab .syntax-highlight{font-size:15px;line-height:1.8;padding:22px}.code-lab .syntax-editor textarea{height:560px}.walk-explainer{margin:36px 0;padding:26px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.walk-explainer .eyebrow{margin-top:0}.walk-explainer h2{margin-top:0;font-size:26px}.address-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:24px 0}.address-fields>div{padding:16px 12px;border-right:1px solid var(--line)}.address-fields>div:last-child{border:0}.address-fields dt{font-size:14px;font-weight:600}.address-fields small{display:block;color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap}.address-fields dd{margin:12px 0 0;font:600 20px ui-monospace,Consolas,monospace}.offset-field{background:var(--soft);color:var(--accent)}.translation-result{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}.translation-result code{display:block;font:18px/1.8 ui-monospace,Consolas,monospace}.translation-result strong{color:var(--accent)}.walk-caption{font-size:14px;color:var(--muted);margin-bottom:0}@media(max-width:600px){.walk-explainer{padding:18px}.address-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.address-fields>div{border-bottom:1px solid var(--line)}.address-fields>div:nth-child(2n){border-right:0}.address-fields>div:last-child{grid-column:1/-1}.code-lab .syntax-editor textarea,.code-lab .syntax-highlight{padding:16px;font-size:14px}.code-lab .syntax-editor textarea{height:440px}}
.code-lab .syntax-editor textarea,.code-lab .syntax-highlight{padding-left:72px}.code-lab .code-gutter{position:absolute;z-index:2;left:0;top:0;bottom:0;width:54px;max-height:none;margin:0;padding:22px 10px 22px 0;border:1px solid var(--line);border-right:1px solid var(--line);border-radius:8px 0 0 8px;background:var(--bg);color:var(--muted);font:15px/1.8 var(--term-font);font-variant-ligatures:none;white-space:pre;overflow:hidden;text-align:right;pointer-events:none}.notes-body [data-editor-theme=midnight]{--bg:#0b1220;--ink:#e6edf7;--muted:#97a7bd;--line:#354359;--soft:#25354e;--cpp-comment:#9cacc2;--cpp-keyword:#c7a6ff;--cpp-string:#a8db9c;--cpp-number:#ffc48d;--cpp-type:#79d9df;--cpp-function:#ffdf96;--cpp-directive:#ffae9e}.notes-body [data-editor-theme=paper]{--bg:#fafbff;--ink:#172238;--muted:#58677c;--line:#cad2e0;--soft:#dce6f8;--cpp-comment:#5b697b;--cpp-keyword:#7138a5;--cpp-string:#346321;--cpp-number:#904500;--cpp-type:#126474;--cpp-function:#775200;--cpp-directive:#a13825}.notes-body [data-editor-theme=contrast]{--bg:#000;--ink:#fff;--muted:#ccc;--line:#aaa;--soft:#333;--cpp-comment:#bbb;--cpp-keyword:#e2b4ff;--cpp-string:#b6ff94;--cpp-number:#ffd197;--cpp-type:#8eeeff;--cpp-function:#ffff9e;--cpp-directive:#ffb3b3}@media(max-width:600px){.code-lab .code-gutter{padding-top:16px;padding-bottom:16px;font-size:14px}}@media(forced-colors:active){.code-lab .code-gutter{color:CanvasText;background:Canvas}}
.playground-link{display:grid;gap:1rem;padding:24px;margin:32px 0;border:1px solid var(--accent);background:var(--surface);border-radius:14px}.notes-body .playground-link>*{margin:0}.playground-link h2{font-size:30px;line-height:1.3}.playground-link>.button{justify-self:start;max-width:100%;text-align:left;overflow-wrap:anywhere}
.compiler-controls{display:flex;align-items:end;flex-wrap:wrap;gap:16px;margin:24px 0}.compiler-controls label{display:flex;flex-direction:column;gap:8px;font-size:14px}.compiler-controls select{font:inherit;padding:10px 12px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;max-width:100%}.compiler-controls p{flex-basis:100%;font-size:13px;color:var(--muted);margin:0}.notes-body [data-editor-theme=ocean]{--bg:#002b36;--ink:#e0eded;--muted:#a0babe;--line:#41636b;--soft:#124653;--cpp-comment:#91b0b5;--cpp-keyword:#efb0e4;--cpp-string:#badb87;--cpp-number:#ffc38e;--cpp-type:#83d8db;--cpp-function:#f0dc8b;--cpp-directive:#ffb4a5}.notes-body [data-editor-theme=forest]{--bg:#15241c;--ink:#e4ede1;--muted:#a2b69c;--line:#425c46;--soft:#284332;--cpp-comment:#a5bca0;--cpp-keyword:#dfbaff;--cpp-string:#bfe493;--cpp-number:#f5c49b;--cpp-type:#8dd9cc;--cpp-function:#ecdf99;--cpp-directive:#ffb5a1}.notes-body [data-editor-theme=violet]{--bg:#211b32;--ink:#f0e9fa;--muted:#b6a7c8;--line:#59446e;--soft:#3d2e55;--cpp-comment:#b8a9ca;--cpp-keyword:#e7adfa;--cpp-string:#b9e699;--cpp-number:#ffd093;--cpp-type:#8de2dd;--cpp-function:#ffe8a8;--cpp-directive:#ffb4c7}.notes-body [data-editor-theme=sepia]{--bg:#fbf3e3;--ink:#332a22;--muted:#756449;--line:#bcae92;--soft:#e9dcc4;--cpp-comment:#706347;--cpp-keyword:#763795;--cpp-string:#386225;--cpp-number:#974a12;--cpp-type:#12616a;--cpp-function:#74530d;--cpp-directive:#a53331}

/* R41 (V2): VS Code Dark+ and Light+; the terminal panel follows the theme. */
.notes-body [data-editor-theme=dark-plus]{--bg:#1e1e1e;--ink:#d4d4d4;--muted:#858585;--line:#3c3c3c;--soft:#264f78;--cpp-comment:#6a9955;--cpp-keyword:#569cd6;--cpp-string:#ce9178;--cpp-number:#b5cea8;--cpp-type:#4ec9b0;--cpp-function:#dcdcaa;--cpp-directive:#c586c0;--term-bar:#007acc;--term-bar-ink:#fff}
.notes-body [data-editor-theme=light-plus]{--bg:#fff;--ink:#000;--muted:#237893;--line:#e5e5e5;--soft:#add6ff;--cpp-comment:#008000;--cpp-keyword:#0000ff;--cpp-string:#a31515;--cpp-number:#098658;--cpp-type:#267f99;--cpp-function:#795e26;--cpp-directive:#af00db;--term-bar:#007acc;--term-bar-ink:#fff}
/* Verdict colours that keep AA on each theme's own background. */
.notes-body :is([data-editor-theme=midnight],[data-editor-theme=contrast],[data-editor-theme=ocean],[data-editor-theme=forest],[data-editor-theme=violet]){--allow:#7fd8a4;--deny:#ff8a80}
.notes-body [data-editor-theme=dark-plus]{--allow:#89d185;--deny:#f48771}
.notes-body :is([data-editor-theme=paper],[data-editor-theme=sepia]){--allow:#1d7443;--deny:#b3261e}
.notes-body [data-editor-theme=light-plus]{--allow:#1a7f37;--deny:#c72e0f}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{--term-font:'JetBrains Mono',ui-monospace,Consolas,Menlo,monospace}
/* JetBrains Mono draws -> and != as ligatures; code shows them as typed, and every font shorthand turns them back on, so each rule with one turns them off again. fragile: JetBrains Mono 2.211 (its calt feature); a new font: rule without font-variant-ligatures:none draws -> and != as ligatures. */
.term-panel{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg);color:var(--ink);font-variant-ligatures:none}
.term-tabs{display:flex;gap:22px;padding:8px 16px 0;border-bottom:1px solid var(--line);font:var(--label-size)/1.4 var(--term-font);font-variant-ligatures:none;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.term-tabs span{padding-bottom:6px;white-space:nowrap}
.term-tabs .on{color:var(--ink);border-bottom:1px solid var(--ink)}
.code-lab .term-panel pre{margin:0;border-radius:0;font-family:var(--term-font);font-variant-ligatures:none}
.term-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 14px;padding:3px 10px;background:var(--term-bar,var(--accent));color:var(--term-bar-ink,var(--button-ink));font:12px/1.6 var(--term-font);font-variant-ligatures:none}
/* R41 (V8): JSON and log verdicts in outputs. */
.out-key{color:var(--cpp-type)}
.out-string{color:var(--cpp-string)}
.out-number{color:var(--cpp-number)}
.out-literal{color:var(--cpp-keyword)}
.out-ok{color:var(--allow);font-weight:600}
.out-bad{color:var(--deny);font-weight:600}
/* R41 (V5): small print wraps at a readable 72 characters. */
.notes-body :is(.caption,.note-notice.model-note,.walk-caption,.ring-caption,.table-hint,.code-fallback){max-width:72ch}
/* R41 (V6): a tall table scrolls in its own box, so the header row can stick
   to that box (sticky binds to the nearest scroller). */
:is(.table-scroll,.edge-scroll,.table-wrap,.lesson-scroll,.trace-table-wrap,.peek-body):has(>table){max-height:70vh;overflow:auto}
:is(.table-scroll,.edge-scroll,.table-wrap,.lesson-scroll,.trace-table-wrap,.peek-body)>table>thead th{position:sticky;top:0;z-index:1}
:where(.table-scroll,.edge-scroll,.table-wrap,.lesson-scroll,.trace-table-wrap,.peek-body)>table>thead th{background:var(--bg)}
/* R41 (V7): panels with controls get an accent edge and a small label. */
:is(.code-lab,.lesson-panel,.sim-panel,.shared-node,.buffer-panel,.story-card):has(:is(button,select,input,textarea):not(.reference-trigger,.peek-toggle,.chapter-next)){box-shadow:inset 0 3px var(--accent)}
:is(.code-lab,.lesson-panel,.sim-panel,.shared-node,.buffer-panel,.story-card):has(:is(button,select,input,textarea):not(.reference-trigger,.peek-toggle,.chapter-next))::before{content:"\25B6  Interactive";content:"\25B6  Interactive"/"Interactive";display:block;margin-bottom:10px;font:600 11px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* One row for compiler, language and theme; the note wraps below it. */
.compiler-controls p{max-width:none}
/* File description under the tabs, as a breadcrumb; the editor joins them. */
.code-lab .code-breadcrumb{max-width:none;margin:0;padding:5px 14px;border:1px solid var(--line);border-top:0;border-bottom:0;background:var(--bg);color:var(--muted);font:12px/1.6 var(--term-font);font-variant-ligatures:none}
.code-breadcrumb+.syntax-editor,.code-breadcrumb+.syntax-editor :is(textarea,.syntax-highlight,.code-gutter){border-top-left-radius:0;border-top-right-radius:0}
/* The panel tabs work: Problems (clickable diagnostics), Output, Terminal. */
.code-lab .term-tabs button{min-height:30px;padding:0 0 6px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.code-lab .term-tabs button:hover,.code-lab .term-tabs [aria-selected=true]{color:var(--ink)}.code-lab .term-tabs [aria-selected=true]{border-bottom-color:var(--ink)}
.code-lab .term-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.term-count{margin-left:6px;padding:0 6px;border-radius:9px;background:var(--soft);color:var(--ink)}.term-count:empty{display:none}
.term-problems{max-height:420px;overflow:auto;padding:8px 0;font:13px/1.6 var(--term-font);font-variant-ligatures:none}
.code-lab .term-problems p{margin:0;padding:6px 16px;color:var(--muted);max-width:none}
.code-lab .term-problems button{display:flex;gap:10px;width:100%;min-height:0;padding:4px 16px;border:0;border-radius:0;white-space:normal;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.code-lab .term-problems button:disabled{cursor:default}.code-lab .term-problems button:not(:disabled):is(:hover,:focus-visible){background:var(--soft);outline:none}
.code-lab .term-problems .problem-where{margin-left:auto;padding-left:16px;color:var(--muted);white-space:nowrap}
.code-lab .term-problems .problem-error::before{content:"\2716";color:var(--deny)}.code-lab .term-problems .problem-warning::before{content:"\26A0";color:var(--cpp-number)}
@media(pointer:coarse){.code-lab .term-tabs button,.code-lab .term-problems button{min-height:44px}}
/* Claims.astro: the chapter's claims, folded to one line. */
/* .notes-body outranks the pages' own details and summary styles, so it looks the same on each. */
.notes-body .claims{margin-block:12px;padding:0;border:0;font-size:.875rem;color:var(--muted);max-width:72ch}
.notes-body .claims summary{display:block;width:auto;min-height:44px;padding:10px 0;line-height:1.7;border:0;border-radius:0;background:none;color:inherit;list-style:none;font-weight:600;cursor:pointer}
.notes-body .claims summary span{font-weight:400}.notes-body .claims[open] summary{color:var(--ink)}
/* The +/− hint is silent to screen readers; the plain content first serves older engines. */
.notes-body .claims summary::after{content:' +';content:' +' / '';font-size:inherit;font-weight:400;color:inherit}
.notes-body .claims[open] summary::after{content:' −';content:' −' / ''}

/* Full-width pages fill the window on wide screens; article prose keeps its measure below.
   !important because the page styles cap each block with selectors of their own. */
@media (min-width: 851px) {
  html[data-wide] .notes-body .shell { width: calc(100% - 2 * var(--site-gutter)); }
  html[data-wide] .notes-body header { padding-inline: var(--site-gutter); }
  html[data-wide] .reading-panel.shell { width: min(var(--site-width), calc(100% - 2 * var(--site-gutter))); }
}
html[data-wide] .notes-body :is(
    main p, main ul, main ol, main dl, main details, .note-reading, .note-deck, .notes-intro,
    .lesson-intro, .claims, .field-prose, .field-copy, .power-article, .smu-what
) { max-width: none !important; }

/* Article frames share the shell; prose keeps a reading measure inside it. */
.notes-body .note-article {
  --note-gap: clamp(2rem, 3vw, 3rem);
  --note-pad: clamp(1.25rem, 2vw, 2rem);
}
.notes-body .note-article > .note-reading {
  display: flow-root;
  max-width: none;
  margin-block: var(--note-gap);
}
.notes-body .note-article .note-reading > h2 {
  margin: var(--note-gap) 0 1rem;
  padding-top: var(--note-pad);
}
.notes-body .note-article .note-reading > h2:first-child { margin-top: 0; }
.notes-body .note-article .note-reading > :last-child { margin-bottom: 0; }
/* Normal mode keeps article text at a comfortable measure; Full-width opts out (above). */
html:not([data-wide]) .notes-body .note-article :is(
  .note-reading > p, .note-reading > ul, .note-reading > ol, .note-deck,
  .playground-link > p, .walk-explainer > p
) { max-width: 76ch !important; }
.notes-body .note-article :is(.playground-link, .walk-explainer, .code-lab) {
  margin-block: var(--note-gap);
  padding: var(--note-pad);
}

.side-dock{position:fixed;z-index:30;inset:0;pointer-events:none}
.side-dock .dock-toggle,.side-dock .dock-panel{pointer-events:auto}
.dock-toggle{position:absolute;top:45%;width:44px;min-height:116px;display:flex;align-items:center;gap:10px;flex-direction:column;padding:12px 9px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 8px 30px var(--shadow);font:inherit;font-size:.78rem;cursor:pointer}
.dock-toggle>span:last-child{writing-mode:vertical-rl}
.side-dock-right .dock-toggle{right:10px}
.dock-toggle[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
.dock-panel{position:absolute;top:100px;width:min(320px,calc(100vw - 92px));max-height:calc(100dvh - 124px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 12px 50px var(--shadow)}
.side-dock-right .dock-panel{right:64px}
.dock-panel[hidden]{display:none!important}
.dock-heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.dock-heading h2{font:600 1.05rem/1.3 'Segoe UI',sans-serif;letter-spacing:0;margin:0}
.dock-heading button{font:inherit;font-size:.8rem;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);cursor:pointer}
.dock-content{padding:14px 16px 18px}
.dock-content>.caption{font-size:.78rem;margin:0 0 12px}
.side-dock .dock-links{position:static;inset:auto;transform:none;display:grid;gap:4px;width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;overflow:visible}
.side-dock .dock-links a{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border-radius:9px;text-align:left;font-size:.88rem;white-space:normal;line-height:1.4;overflow-wrap:anywhere}
.side-dock .dock-links a[aria-current=location]{background:var(--soft);color:var(--ink);border-left:3px solid var(--accent)}
.side-dock .chapter-number{display:inline;color:var(--muted);font:12px monospace}
html[data-dock-layout=drawer] .dock-toggle{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));min-height:44px;width:auto;max-width:46vw;flex-direction:row;padding:10px 14px;border-radius:12px}
html[data-dock-layout=drawer] .dock-toggle>span:last-child{writing-mode:horizontal-tb}
html[data-dock-layout=drawer] .dock-panel{top:auto;bottom:calc(70px + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 96px)}
html[data-dock-layout=drawer] .side-dock-right .dock-panel{right:12px}
html[data-dock-layout=drawer] body{padding-bottom:72px}
html[data-dock-layout=drawer] .dock-content select{font-size:16px}
@media(prefers-reduced-motion:reduce){.dock-panel{scroll-behavior:auto}}
@media(forced-colors:active){.dock-toggle,.dock-panel{border-color:ButtonText}}
@media print{.side-dock{display:none}}

html[data-dock-layout=drawer].has-chapter-dock .dock-toggle{bottom:calc(84px + env(safe-area-inset-bottom))}
html[data-dock-layout=drawer].has-chapter-dock .dock-panel{bottom:calc(142px + env(safe-area-inset-bottom));max-height:calc(100dvh - 158px)}
html[data-dock-layout=drawer].has-chapter-dock footer{padding-bottom:160px}
.dock-links{display:grid;gap:6px}
.dock-links a{color:var(--ink);border-bottom:1px solid var(--line)}

/* Shared visual layer. Palette variables remain owned by Remix. */
:root {
  --field-serif: Georgia, "Times New Roman", serif;
  --field-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}
:root[data-canvas="light"] {
  --bg: #f7f5ef;
}
::selection {
  background: var(--accent);
  color: var(--button-ink);
}
body {
  text-rendering: optimizeLegibility;
}
.eyebrow {
  font-family: var(--field-mono);
  font-weight: 500;
  letter-spacing: 0.075em;
}
.hero h1 em,
.notes-index h1 em,
.lab-invitation h2 em {
  font-family: var(--field-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.055em;
}
.hero {
  position: relative;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 32px 0 auto;
  height: 8px;
  border-block: 1px solid var(--line);
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0 1px,
    transparent 1px 24px
  );
  pointer-events: none;
}
.hero .intro {
  padding-top: 12px;
}
.hero .lab-invitation {
  position: relative;
  border-radius: 4px 28px 4px 4px;
  border-top: 3px solid var(--accent);
  background: linear-gradient(135deg, var(--soft), var(--surface) 65%);
}
.lab-invitation:after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  right: 24px;
  bottom: 24px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 5px,
    var(--line) 6px 7px,
    transparent 8px 12px
  );
  opacity: 0.65;
  pointer-events: none;
}
.lab-invitation .invitation-topics {
  padding-right: 48px;
}
.notes-body main > .eyebrow:first-child {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.notes-body :is(.story-card, .lesson-player, .code-lab, .topic-card) {
  border-radius: 5px 18px 5px 5px;
}
.notes-body :is(.story-card, .lesson-player, .code-lab) {
  border-top: 2px solid var(--line);
}
.notes-body :is(.story-card, .lesson-player, .code-lab):focus-within {
  border-top-color: var(--accent);
}
.notes-body :is(.story-card, .lesson-player, .code-lab) h2 {
  letter-spacing: -0.035em;
}
.pcie-lesson-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
  gap: clamp(1rem, 3vw, 2.25rem);
  align-items: start;
  margin-block: 1.5rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--line);
}
.pcie-lesson-outcome,
.pcie-lesson-boundary { min-width: 0; }
.pcie-lesson-outcome .lesson-status {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}
.pcie-lesson-label {
  margin: 0 0 0.55rem;
  color: var(--accent);
  font: 500 var(--label-size)/1.4 var(--field-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pcie-lesson-boundary {
  padding-left: 1rem;
  border-left: 1px solid var(--accent);
  color: var(--ink);
}
.pcie-lesson-boundary > :last-child {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .pcie-lesson-evidence {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .pcie-lesson-boundary {
    padding: 0.9rem 0 0;
    border: 0;
    border-top: 1px solid var(--line);
  }
}
.notes-body :is(pre, code, output) {
  font-variant-numeric: tabular-nums;
}
.notes-body th {
  font-family: var(--field-mono);
  font-weight: 500;
}
.notes-body tbody tr:hover {
  background: color-mix(in srgb, var(--soft) 45%, transparent);
}
.notes-body .note-notice {
  border-left-width: 2px;
  border-radius: 0 8px 8px 0;
}
.notes-body :is(.note-reading, .field-prose) {
  max-width: 78ch;
}
.field-prose :is(p, li) {
  line-height: 1.85;
}
.field-prose h2 {
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
[data-reading="book"] .field-prose :is(p, li) {
  font-family: var(--field-serif);
  font-size: 1.12rem;
  line-height: 1.85;
}
[data-reading="book"] .field-prose :is(code, button, input, select, textarea) {
  font-family: var(--field-mono);
}
.field-permalink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: 0.3rem;
  color: var(--muted);
  font: 1.1rem var(--field-serif);
  vertical-align: middle;
  text-decoration: none !important;
}
.field-permalink:hover {
  color: var(--accent);
}
.field-reader {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin: 1rem 0;
}
.field-reader select {
  width: 100%;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--bg);
  font: inherit;
}
.field-find-open {
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  padding: 6px 8px;
  min-height: 44px;
}
.field-find-open:before {
  content: "⌕";
  margin-right: 0.35rem;
  font-size: 1.2rem;
}
.field-finder {
  width: min(660px, calc(100% - 24px));
  max-height: 85dvh;
  padding: clamp(18px, 4vw, 32px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 12px;
}
.field-finder::backdrop {
  background: #0009;
  backdrop-filter: blur(4px);
}
.finder-heading {
  display: flex;
  align-items: start;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.finder-heading h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.25;
}
.finder-heading .eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
}
.finder-heading button {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  flex-shrink: 0;
}
.field-finder label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.field-finder input {
  width: 100%;
  min-height: 50px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.field-finder ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.field-finder nav {
  display: block;
}
.field-finder li {
  border-top: 1px solid var(--line);
}
.field-finder li a {
  display: grid;
  gap: 4px;
  padding: 14px 4px;
  text-decoration: none;
}
.field-finder li a:hover {
  background: var(--soft);
}
.field-finder li span {
  font: 0.75rem/1.5 var(--field-mono);
  color: var(--accent);
}
.field-finder li small {
  display: block;
  padding: 0 4px 10px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.field-finder li small a {
  display: inline-block;
  padding: 0.3rem 0;
  text-decoration: underline;
}
.field-finder li strong {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
}
#field-count {
  margin: 0.75rem 0;
}
.finder-help {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Notes landing: editorial introduction and its call to action. */
.field-index-heading {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin: 1.5rem 0 3rem;
}
.field-index-heading h1 {
  margin: 0;
  font-size: clamp(3rem, 6.4vw, 6rem);
  line-height: 1.02;
}
.field-index-heading .note-deck {
  font-size: 1.2rem;
  line-height: 1.65;
}
.field-index-heading .notes-intro {
  font-size: 0.95rem;
  color: var(--muted);
}
.field-index-heading .button {
  margin-top: 1.5rem;
}
.cache-postcard {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  margin-block: 2rem 3rem;
  overflow: hidden;
}
.postcard-copy {
  padding: clamp(20px, 3vw, 36px);
  background: var(--soft);
}
.postcard-copy .eyebrow {
  margin: 0 0 1.4rem;
  font-size: 0.75rem;
}
.postcard-copy h2 {
  font: 700 clamp(1.9rem, 3.5vw, 2.9rem)/1.1 Manrope, "Segoe UI", sans-serif;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
}
.postcard-copy p {
  font-size: 1rem;
  line-height: 1.75;
}
.postcard-copy a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.postcard-workbench {
  padding: clamp(16px, 3vw, 30px);
  background: var(--surface);
  min-width: 0;
}
.postcard-meta {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  font: 0.75rem/1.6 var(--field-mono);
  color: var(--muted);
  margin-bottom: 1rem;
}
.postcard-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.postcard-map p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.postcard-map strong {
  display: block;
  font: 400 2rem/1.3 var(--field-mono);
  color: var(--ink);
}
.postcard-pages {
  display: grid;
  gap: 8px;
  margin: 1rem 0;
}
.postcard-page {
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
}
.postcard-page[data-reached="true"] {
  border-left-color: var(--accent);
  background: var(--soft);
}
.postcard-page b {
  font: 0.75rem/1.5 var(--field-mono);
  color: var(--muted);
}
.postcard-page code {
  display: block;
  font: 0.8rem/1.8 var(--field-mono);
  overflow-wrap: anywhere;
  color: var(--ink);
}
.postcard-change {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--accent);
  font: 0.7rem/1.5 var(--field-mono);
  text-transform: uppercase;
}
.postcard-change[hidden] { display: none; }
.postcard-page .postcard-change { margin: 0.35rem 0 0; }
.postcard-traffic {
  font: 0.78rem/1.65 var(--field-mono);
  color: var(--accent);
  min-height: 1.65em;
}
.postcard-step {
  font: 0.78rem/1.5 var(--field-mono);
  margin: 1rem 0 0;
}
.postcard-status {
  font-size: 0.94rem;
  line-height: 1.65;
  min-height: 8em;
  margin: 0.25rem 0 1rem;
}
.postcard-op {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.postcard-op select {
  font: inherit;
  margin-left: 8px;
  min-height: 36px;
}
.postcard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.postcard-actions button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--bg);
  text-align: left;
}
.postcard-actions button:first-child {
  background: var(--accent);
  color: var(--button-ink);
  border-color: var(--accent);
  flex: 1;
}
.postcard-actions button:disabled {
  opacity: 0.65;
  cursor: default;
}
.postcard-actions [hidden] {
  display: none;
}
@media (max-width: 850px) {
  .field-index-heading {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .cache-postcard {
    grid-template-columns: 1fr;
  }
  .notes-body header nav {
    gap: 12px;
  }
}
@media (max-width: 400px) {
  .finder-heading {
    flex-wrap: wrap;
  }
  .notes-body header nav a {
    font-size: 0.78rem;
  }
  .notes-body header nav {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .field-finder {
    transition: none;
    animation: none;
  }
}
@media print {
  .field-find-open,
  .field-finder,
  .field-reader,
  .field-permalink,
  .postcard-actions {
    display: none !important;
  }
  .cache-postcard {
    break-inside: avoid;
  }
}

.hero-meta a {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 0.875rem;
  min-height: 44px;
}

.field-copy {
  max-width: 72ch;
  line-height: 1.85;
}
[data-reading="book"] .field-copy {
  font-family: var(--field-serif);
  font-size: 1.12rem;
}
/* Keep the first shared-table/Linux action in reach on a narrow screen. */
@media (max-width:700px) {
  .shared-page > .eyebrow:first-child { margin-top:16px; padding-top:8px; }
  .shared-page > h1 { margin-block:16px; }
  .shared-page .shared-node > h2 { margin-top:.75rem; }
}

/* R19: one background, six objects, no standalone space simulator. */
body { isolation: isolate; }
.cosmic-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.cosmic-backdrop[hidden] { display: none; }
.cosmic-backdrop canvas { display: block; width: 100%; height: 100%; opacity: 1; image-rendering: auto; }
.notes-body .cosmic-backdrop { opacity: .55; }
.cosmic-preferences { display: grid; grid-template-columns: 1fr; gap: 7px; margin-block: 14px 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.cosmic-preferences > label { font-size: .8rem; font-weight: 600 !important; }
.cosmic-preferences > label.cosmic-grid-toggle { font-weight: 400 !important; }
.cosmic-preferences select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: .875rem; }
.cosmic-preferences p { margin: 0; font-size: .75rem; line-height: 1.55; }
.cosmic-preferences > button { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: .8125rem; cursor: pointer; }
.cosmic-preferences > button:hover { border-color: var(--accent); }
.cosmic-preferences > button:disabled { color: var(--muted); cursor: default; border-style: dashed; }
.cosmic-grid-toggle { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: .8125rem; }
.cosmic-grid-toggle input { width: 18px; height: 18px; }
/* Cards glow under the pointer (cosmic-field.mjs); a 14% tint keeps accent text at 4.5:1. */
:is(.project-note,.notebook-route,.project,.role-card) { position: relative; isolation: isolate; }
:is(.project-note,.notebook-route,.project,.role-card)::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(220px circle at var(--cosmic-x,50%) var(--cosmic-y,50%), color-mix(in srgb,var(--accent) 14%,transparent),transparent); opacity: 0; }
:is(.project-note,.notebook-route,.project,.role-card)[data-cosmic-lit]::before { opacity: 1; }
/* Opaque navigation avoids text bleed; no filter containing block for the fixed menu. */
header { backdrop-filter: none; background: var(--bg); }
#remix .preferences { width: min(348px,calc(100vw - 32px)); padding: 20px; }
#remix .preferences h2 { font-size: 1.3rem; margin: 0 0 14px; }
.preferences > fieldset { margin: 12px 0; gap: 6px; }
.preferences > fieldset > label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 7px; min-height: 40px; padding: 6px 8px; font-size: .8125rem; }
.preferences > fieldset > label:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.preferences > fieldset legend { font-size: .8rem; font-weight: 600; color: var(--ink); }
.remix-more { margin-block: 8px; border-block: 1px solid var(--line); }
.remix-more > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: .8125rem; }
.remix-more[open] > summary span { transform: rotate(180deg); }
.remix-more .extra-palettes { gap: 8px 16px; }
.remix-more .extra-palettes label { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
#motion-help { font-size: .75rem; margin: 4px 0 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media(max-width:650px) { #remix .preferences { padding: 16px; } }
@media(prefers-reduced-motion:reduce) { :is(.project-note,.notebook-route,.project,.role-card)::before { display: none; } }
@media(forced-colors:active) { .cosmic-backdrop, :is(.project-note,.notebook-route,.project,.role-card)::before { display: none; } }
@media print { .cosmic-backdrop { display: none; } }
/* Explicit reference previews preserve ordinary links and the reader's position. */
body button.reference-trigger { display: inline-grid; place-items: center; vertical-align: middle; margin-inline: 4px 6px; min-width: 28px; min-height: 28px; padding: 2px; border: 1px solid var(--line); border-radius: 5px; color: var(--accent); background: var(--surface); cursor: pointer; font: .8rem/1 var(--field-mono); }
body button.reference-trigger:hover { border-color: var(--accent); background: var(--soft); }
body button.reference-trigger.has-label { grid-auto-flow: column; gap: 4px; padding-inline: 6px; }
.reference-peek { position: fixed; inset: calc(var(--reading-top, 84px) + var(--reading-bar, 0px) + 16px) 24px 24px auto; width: min(660px,52vw); height: min(780px,calc(100dvh - var(--reading-top, 84px) - var(--reading-bar, 0px) - 40px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); margin: 0; padding: 20px; z-index: 80; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 6px 20px 6px 6px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 70px var(--shadow); }
.reference-peek[open] { display: flex; flex-direction: column; }
.reference-peek::backdrop { background: #090c14aa; }
.reference-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.reference-heading .eyebrow { font-size: var(--label-size); margin: 0 0 7px; }
.reference-heading h2 { margin: 0; font-size: clamp(1.05rem,2vw,1.4rem); line-height: 1.35; overflow-wrap: anywhere; }
.reference-peek button, .reference-toolbar a { min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: .8125rem; cursor: pointer; }
.reference-heading button { flex-shrink: 0; }
.reference-peek button:disabled { opacity: .65; cursor: default; }
.reference-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block: 14px 10px; flex-shrink: 0; }
.reference-toolbar a { display: inline-flex; align-items: center; margin-left: auto; color: var(--accent); }
.reference-toolbar a[data-reference-open] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }
.reference-status { color: var(--muted); font-size: .75rem; line-height: 1.55; margin: 0 0 12px; flex-shrink: 0; }
.reference-content { overflow: auto; overscroll-behavior: contain; min-height: 0; line-height: 1.75; font-size: .9rem; overflow-wrap: anywhere; }
.reference-content h2 { font-size: 1.5rem; line-height: 1.3; }
.reference-content h3 { font-size: 1.2rem; line-height: 1.35; margin-top: 24px; }
.reference-content p { margin: 12px 0; }
.reference-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.reference-content table { display: block; max-width: 100%; overflow-x: auto; font-size: .8rem; }
.reference-content th,.reference-content td { padding: 9px; border-bottom: 1px solid var(--line); text-align: left; }
.reference-content pre { max-width: 100%; overflow: auto; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font-size: .75rem; line-height: 1.65; }
.reference-content label { display: block; font-size: .8rem; margin-block: 12px; }
.reference-content select { width: 100%; margin-top: 6px; padding: 10px; min-height: 44px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.reference-file input { display: block; width: 100%; min-height: 44px; margin-top: 12px; font: inherit; color: var(--ink); }
.reference-pdf-controls { display: flex; align-items: end; gap: 10px; margin: 16px 0; }
.reference-pdf-controls label { margin: 0; }
.reference-pdf-controls input { display: block; width: 110px; min-height: 44px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: 8px; border-radius: 6px; font: inherit; }
.reference-pdf, .reference-external { width: 100%; height: 55vh; min-height: 300px; border: 1px solid var(--line); background: var(--bg); }
.reference-shelf { padding-block: 60px; }
.reference-shelf > h1 { font-size: clamp(2.5rem,6vw,5rem); }
.reference-edition { border-block: 1px solid var(--line); padding: 28px 0; margin-top: 24px; }
.reference-edition h2 { font-size: clamp(1.5rem,3vw,2rem); }
.reference-edition li { margin: 12px 0; }
.reference-shelf code { font-size: .85em; }
.reference-shelf .shelf-action { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; background: var(--soft); color: var(--ink); border: 1px solid var(--accent); border-radius: 8px; font: inherit; cursor: pointer; }
@media(max-width:760px) { .reference-peek { inset: 12px; margin: auto; width: calc(100vw - 24px); height: calc(100dvh - 24px); padding: 16px; max-height: calc(100dvh - 24px); } body button.reference-trigger { min-width: 24px; min-height: 24px; } .reference-content select, .reference-content input { font-size: 16px; } }
@media(pointer:coarse) { body button.reference-trigger { position: relative; min-width: 24px; min-height: 24px; padding: 0; } .reference-trigger::after { content: ""; position: absolute; inset: -10px; } }
@media print { .reference-peek,.reference-trigger { display: none !important; } }

/* ---------------------------------------------------------------------------
   R22 · one header: brand, navigation, search and Remix.
   The chapter pill and hero shortcuts were removed; Objects is a desktop tool.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
body > header { view-transition-name: site-header; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }
body > header .field-find-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 10px 0 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
body > header .field-find-open:before { content: none; }
body > header .field-find-open:hover { color: var(--ink); border-color: var(--accent); }
body > header .field-find-open kbd {
  font: 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
body > header .field-find-open ~ #remix { margin-left: 0; }
@media (max-width: 720px) {
  body > header .field-find-open { padding: 0 12px; }
  body > header .field-find-open .find-label,
  body > header .field-find-open kbd { display: none; }
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  html[data-dock-layout=drawer] body.portfolio-body,
  html[data-dock-layout=drawer] body[data-reading-kit] { padding-bottom: var(--reading-pad, 0); }
}
.site-footer { flex-wrap: wrap; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 420px) {
  body > header .brand { font-size: 0.9375rem; }
  body > header .brand .monogram { font-size: 1.05rem; }
}
@media (max-width: 720px) { body.notes-body > header .brand { font-size: 15px; } }

.reference-trigger svg { display: block; }
/* R26: verified spec sections that open inline in the reader. */
.spec-jumps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 20px}
.spec-jumps>span{font:600 var(--label-size)/1.4 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
main .spec-jumps a,.spec-jumps a{display:inline-flex;align-items:baseline;gap:6px;min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.8125rem;line-height:1.3;text-decoration:none}
.spec-jumps a small{font:var(--label-size) ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--accent)}
main .spec-jumps a:hover,.spec-jumps a:hover{border-color:var(--accent);text-decoration:none}
.reference-pdf-controls{flex-wrap:wrap}.reference-pdf-controls .reference-outside{margin-left:auto;align-self:center;color:var(--accent)}
.reference-content .reference-pdf{height:calc(100dvh - 330px);min-height:360px}
.reference-note{font-size:.8125rem;color:var(--muted)}.reference-fallback{display:inline-block;margin:8px 0;color:var(--accent)}
/* R26 review fixes: consistent secondary actions, touch targets and minimum text size. */
.lesson-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.lesson-actions>a:not(.button){display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}
.lesson-actions>a:not(.button):hover{text-decoration-color:var(--accent)}
.back-link{display:inline-flex;align-items:center;min-height:44px}
.site-footer a,.home-footer a{display:inline-flex;align-items:center;min-height:44px}
header .brand{min-height:44px}
.chapter-pager .eyebrow,.reading-constellation .eyebrow,.reading-next-link .eyebrow{font-size:var(--label-size)}
@media (max-width:720px){.latent-readout{font-size:11px}}
/* R26: home uses the same one-row phone nav as every other page (it wrapped 3 + 2). */
@media (max-width:720px){.portfolio-body header nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 8px}.portfolio-body header nav a{padding-inline:8px}}
/* R29 motion layer: kinetic headings, work thread, grid cover and the orbit rail. */
.kinetic .mw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;padding-right:.02em}
.kinetic .mw-i{display:inline-block;will-change:transform}
.work{position:relative}
.work-packet{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);rotate:45deg;pointer-events:none}
.work-thread{position:absolute;width:1px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 20%,transparent));transform-origin:top;transform:scaleY(0);pointer-events:none}
.grid-cover{position:absolute;inset:14px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);pointer-events:none}
.fyp-gallery figure>a{position:relative}
.grid-cover i{background:var(--surface);border-radius:4px;transform-origin:center}
.notebook-route,.project-note{transform-style:preserve-3d;will-change:transform}
.notebook-route{background-image:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,0%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 45%)}
.orbit-rail{position:fixed;right:max(18px,calc((100vw - 1240px)/2 - 72px));top:22vh;bottom:22vh;width:14px;z-index:15;opacity:0;transition:opacity .4s ease;pointer-events:none}
.orbit-rail[data-visible]{opacity:1;pointer-events:auto}
.orbit-rail[hidden]{display:none}
.orbit-track{position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--line)}
.orbit-fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.orbit-probe{position:absolute;left:1px;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
.orbit-rail a{position:absolute;left:0;display:flex;align-items:center;gap:10px;margin-top:-7px;height:14px;color:var(--muted);text-decoration:none;flex-direction:row-reverse;transform:translateX(calc(-100% + 14px))}
.orbit-rail a i{flex:none;width:9px;height:9px;margin-right:2px;border-radius:50%;border:1.5px solid var(--muted);background:var(--bg)}
.orbit-rail a span{font:600 10px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:opacity .25s ease,transform .25s ease}
.orbit-rail a:hover span{opacity:1;transform:none}
.orbit-rail a[data-active] i{border-color:var(--accent)}
.orbit-rail a[data-active] span{color:var(--ink)}
@media (max-width:1359px){.orbit-rail{display:none}}
@media (prefers-reduced-motion:reduce){.orbit-rail{display:none}}
html[data-motion=off] .orbit-rail{display:none}
/* A light trail above the probe, and under the rail the readout: the section in view and its nearest heading. */
.orbit-probe::before{content:"";position:absolute;left:4px;bottom:100%;width:3px;height:56px;border-radius:2px;background:linear-gradient(to top,var(--accent),transparent);opacity:.75}
.orbit-readout{position:absolute;top:calc(100% + 28px);right:0;width:max-content;max-width:18em;text-align:right;white-space:nowrap;font:500 10px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--muted)}
.orbit-readout[hidden],.orbit-readout b:empty{display:none}
.orbit-readout small{display:block;font-size:inherit;letter-spacing:.12em;text-transform:uppercase;white-space:normal}
.orbit-readout b{display:block;color:var(--accent);font-weight:600;font-size:11px;white-space:normal}
/* The headline's accent word carries a light trail once motion is on. */
html[data-story=on] .hero h1 em,html[data-story=on] .notes-index h1 em{position:relative}
html[data-story=on] .hero h1 em::after,html[data-story=on] .notes-index h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--second));transform:scaleX(0);transform-origin:left;animation:accent-trail 1.2s .4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes accent-trail{to{transform:scaleX(1)}}
.latent-sky .latent-ring{transform-box:fill-box;transform-origin:center}
.orbit-rail a span{white-space:nowrap}
/* R30: "Orbs" background — soft iridescent spheres in the Remix colours. */
.orb-layer { position: absolute; inset: -10vmax; pointer-events: none; }
.orb-layer[hidden] { display: none; }
.orb-drift { position: absolute; inset: 0; }
.orb { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; opacity: .42; filter: blur(10px) saturate(1.15);
  background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / .85) 0 4%, rgb(255 255 255 / .25) 12%, transparent 32%),
    radial-gradient(circle at 70% 78%, color-mix(in srgb, var(--second) 70%, transparent), transparent 55%),
    conic-gradient(from 210deg at 55% 50%, var(--accent), var(--second), #9fe3ff, #ffd1f0, var(--accent));
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%);
  box-shadow: inset 0 0 6vmax rgb(255 255 255 / .12); }
.orb-second { background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / .8) 0 4%, rgb(255 255 255 / .2) 12%, transparent 32%),
    conic-gradient(from 60deg at 45% 55%, var(--second), #9fe3ff, var(--accent), #ffd1f0, var(--second)); }
.orb-mix { opacity: .38; }
html[data-canvas="light"] .orb { opacity: .62; }
html[data-cosmic-scene="orbs"] .cosmic-backdrop canvas { opacity: .6; }
@media (forced-colors: active) { .orb-layer { display: none; } }

/* R31 UI fixes */
/* Summary rows: the hover wash extends past the text instead of hugging it. */
.case { border-top: 1px solid var(--line); }
.case > summary { border-top: 0; border-radius: 10px; transition: background-color .2s ease, box-shadow .2s ease; }
main .case > summary:hover { box-shadow: -14px 0 0 var(--soft), 14px 0 0 var(--soft); }
/* Wide screens have room for the whole gauge: every section is labelled (muted, not faded, so
   it keeps 4.5:1), the rail moves to the edge so the labels clear the content, and the active
   one turns ink. Narrower, a label would print over the page's text, so only a hovered marker
   shows one; the wider readout needs 1680px to clear the 1240px content column. */
@media (min-width: 1600px) {
  .orbit-rail { right: 28px; }
  .orbit-rail a span { opacity: 1; transform: none; }
}
@media (max-width: 1679px) { .orbit-readout { display: none; } }
@media (max-width: 720px) {
  /* Footer brand: centred as a block, like the links under it. */
  .home-footer > div { width: 100%; align-items: center; }
}
/* One header everywhere: the notes pages use the same phone nav size as the home page. */
@media (max-width: 720px) { .notes-body header nav a { font-size: 0.875rem; } }
/* Footer links are full touch targets on every page. */
body > footer a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 44px; }
/* Flex links keep the space before their arrow. */
.journal-feature-copy > a { column-gap: .3em; }
body > header .field-find-open { min-width: 44px; min-height: 44px; }
/* Tablets: search collapses to its icon so Remix stays on the header row. */
@media (min-width: 721px) and (max-width: 900px) {
  body > header .field-find-open { padding: 0 12px; }
  body > header .field-find-open .find-label,
  body > header .field-find-open kbd { display: none; }
}
/* The last link in a card does not add extra space under it. */
.fyp-evidence > .text-link:last-child { margin-bottom: 0; }
/* DMA journey recovery mission (R41: moved from the retired object-play.css). */
.recovery-mission{margin-block:16px;padding-block:14px;border-block:1px solid var(--line)}
.recovery-mission[hidden]{display:none}
.recovery-mission h3{font-size:1.1rem;letter-spacing:-.02em;margin:0 0 10px}
.recovery-mission ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.recovery-mission li{padding:8px 0;border-top:3px solid var(--line);font-size:.85rem}
.recovery-mission li[data-met=true]{border-color:var(--accent)}
.recovery-mission progress{width:100%;height:6px;accent-color:var(--accent)}
.recovery-mission .caption{margin:6px 0}
.recovery-mission button,.mission-start{min-height:44px}
#journey-actions button[data-recommended=true]{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:600px){.recovery-mission ol{grid-template-columns:1fr;gap:3px}.recovery-mission li{padding:6px 0}}

/* R41 (P1): palette rows keep the result layout; the universe is a small tag. */
.field-finder .finder-command :is(a, button) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.field-finder .finder-command :is(a, button):is(:hover, :focus-visible) {
  background: var(--soft);
}
.field-finder .finder-command span {
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* R41 (M13): Rasengan, decorative; field-notes.mjs removes it. */
.rasengan {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 90;
  pointer-events: none;
}
.rasengan i {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.rasengan .ring {
  border: 2px solid var(--accent);
  background: none;
  box-shadow: 0 0 18px var(--accent);
}


/* R42: the employer line in every footer. */
.site-footer .footer-note, body > footer > .footer-note { flex-basis: 100%; margin: 4px 0 0; max-width: 60ch; color: var(--muted); font-size: .8125rem; }

/* Wide tables: fade the edge that still hides content (set by scrollCues). */
[data-scroll=start] { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
[data-scroll=end] { mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
[data-scroll=middle] { mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
[data-scroll]:focus-visible { outline-offset: -3px; }

/* Shared disclosure: without site-navigation.mjs the links stay visible. */
.menu-toggle { display: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; cursor: pointer; }
@media (max-width: 720px) {
  /* Keep wrapped mobile controls on the trailing edge of the header; below 207px they stay at the start. */
  body > header .field-find-open { margin-left: auto; }
  body > header .brand { margin-right: auto; }
}
@media (max-width: 206px) {
  body > header .field-find-open { margin-left: 0; }
}
/* Keep navigation out of the flow while the phone Menu controller loads.
   The theme script clears data-nav-pending at DOMContentLoaded so failed loading leaves usable links.
   Once installed, the existing data-menu rules below control the collapsed navigation. */
@media (max-width: 960px) {
  html[data-nav-pending] body > header:not([data-menu], [data-menu-open]) nav:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 480px) {
  header[data-menu] .brand-name { overflow-wrap: normal; }
  header[data-menu] .brand .monogram, header[data-menu] .brand-slash { display: none; }
  /* The summary has aria-label="Theme", so hiding the text keeps its name. The dot gets a ring in the
     text colour so it still shows when the open summary is painted accent, and under forced colours. */
  header[data-menu] .theme-label { display: none; }
  header[data-menu] #remix > summary { min-width: 44px; }
  header[data-menu] #remix > summary i { width: 12px; height: 12px; border: 2px solid currentColor; }
}

/* Navigation gives location feedback without competing with the reading surface. */
body > header > nav { position: relative; align-items: center; }
body > header > nav a { position: relative; border-radius: 8px; }
body > header > nav a[aria-current] { color: var(--accent); }
html:not([data-navigation]) body > header > nav a[aria-current=page] {
  text-decoration: underline;
  text-underline-offset: .3em;
}
.nav-indicator {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
}
.nav-indicator[hidden] { display: none; }
@media (max-width: 960px) {
  body > header[data-menu] { flex-wrap: wrap; gap: 8px; }
  body > header[data-menu] .menu-toggle { display: inline-flex; align-items: center; }
  body > header[data-menu] > nav {
    order: 3;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
  }
  body > header[data-menu]:not([data-menu-open]) > nav { display: none; }
  body > header[data-menu] > nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    min-height: 44px;
    text-align: center;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  body > header[data-menu] > nav a[aria-current] {
    background: var(--soft);
    text-decoration: underline;
    text-underline-offset: .3em;
  }
  body > header[data-menu] .nav-indicator { display: none; }
  body > header[data-menu] .field-find-open { padding: 0 12px; }
  body > header[data-menu] .find-label,
  body > header[data-menu] .field-find-open kbd { display: none; }
  body > header[data-menu] .brand { flex: 1; min-width: 0; }
  .large-text body > header[data-menu] .brand { flex-basis: 100%; }
}
/* .brand span (styles.css) is accent-coloured for the slash; the surname keeps the name's colour. */
.brand .brand-rest { color: inherit; }
/* Too narrow for the whole name beside the buttons: show "Aravind" so they share one row. */
@media (max-width: 360px) {
  html:not(.large-text) body > header[data-menu] .brand-rest { display: none; }
}
@media (forced-colors: active) {
  body > header > nav a[aria-current] {
    text-decoration: underline;
    text-underline-offset: .3em;
  }
  .nav-indicator { background: none; border-bottom: 2px solid currentColor; }
}

/* Personal identity at the entry points; technical reading keeps the shared system. */
.hero { align-items: center; gap: clamp(28px,4vw,64px); padding-block: 40px 32px; }
.hero .personal-invitation { padding: 0; overflow: hidden; border-radius: 4px 32px 4px 4px; background: var(--surface); }
.personal-invitation::after { display: none; }
.observatory-cover { margin: 0; }
.observatory-cover img { display: block; width: 100%; height: clamp(210px,24vw,330px); object-fit: cover; object-position: 65% 60%; }
.observatory-cover figcaption { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; padding: 9px 20px; border-bottom: 1px solid var(--line); font: .625rem/1.6 var(--field-mono); letter-spacing: .04em; color: var(--muted); background: var(--bg); }
.personal-invitation-copy { padding: 22px 28px; }
.personal-invitation-copy .eyebrow { font-size: var(--label-size); margin: 0; }
.personal-invitation .personal-invitation-copy h2 { font-size: clamp(1.8rem,2.8vw,2.6rem); line-height: 1.12; margin: 12px 0 16px; }
.personal-invitation-copy > p:not(.eyebrow) { font-size: .9rem; line-height: 1.65; color: var(--muted); margin-bottom: 18px; }
.personal-invitation-copy .button { padding: 12px 16px; font-size: .8125rem; }
.anime-evidence { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 18px 22px; border-top: 1px solid var(--line); background: var(--bg); min-height: 96px; }
.anime-evidence strong { display: block; font-size: .8125rem; line-height: 1.5; font-weight: 600; }
.anime-evidence small { display: block; color: var(--muted); font-size: var(--label-size); line-height: 1.6; margin-top: 4px; }
.anime-evidence > span:last-child { margin-left: auto; color: var(--accent); }
.anime-evidence:hover { background: var(--soft); }
.anime-samples { display: flex; gap: 4px; flex-shrink: 0; }
.anime-sample { position: relative; width: clamp(34px,3.4vw,48px); aspect-ratio: 1/1; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 3px; }
.anime-sample img { position: absolute; width: 400%; height: 400%; max-width: none; left: calc(var(--col)* -100%); top: calc(var(--row)* -100%); }
.notebook-paths { padding-block: 32px 56px; }
.notebook-heading { display: grid; gap: 10px; margin-bottom: 24px; }
.notebook-heading .eyebrow { margin: 0; }
.notebook-heading h2 { margin: 0; line-height: 1.2; }
.notebook-route-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.notebook-route { min-width: 0; padding: 24px; display: flex; flex-direction: column; background: var(--surface); }
.route-number { font: .7rem/1.7 var(--field-mono); color: var(--accent); }
.notebook-route h3, .postcard-copy h3 { font-size: clamp(1.25rem,2vw,1.6rem); line-height: 1.25; margin: 16px 0 12px; letter-spacing: -.025em; }
.notebook-route p, .postcard-copy p { font-size: .9rem; line-height: 1.7; color: var(--muted); margin: 0 0 22px; }
.route-guides a { min-height: 44px; display: flex; align-items: center; font-size: .85rem; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.route-guides { margin-top: auto; display: flex; flex-wrap: wrap; column-gap: 20px; }
#overview .cache-postcard { margin: 0 0 16px; border-radius: 4px 20px 4px 4px; border-top-width: 1px; border-color: var(--line); gap: 1px; background: var(--line); }
#overview .postcard-copy { background: var(--surface); }
.route-guides h4 { flex-basis: 100%; margin: 0 0 4px; font: .7rem/1.7 var(--field-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.journal-topics { display: flex; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.journal-topics a { min-height: 44px; display: flex; align-items: center; font: .8rem/1.5 var(--field-mono); color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.journal-feature { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 32px; align-items: center; padding: 28px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 4px 24px 4px 4px; margin-block: 32px 56px; background: var(--surface); }
.journal-feature-image { display: block; max-width: 340px; background: #fff; border: 1px solid var(--line); }
.journal-feature-image img { display: block; width: 100%; height: auto; }
.journal-feature-copy h2 { font-size: clamp(1.5rem,2.7vw,2.5rem); line-height: 1.2; margin: 14px 0 18px; }
.journal-feature-copy p { font-size: .9375rem; line-height: 1.8; }
.journal-feature-copy .eyebrow { font-size: var(--label-size); }
.journal-feature-copy .journal-feature-meta { font: .75rem/1.8 var(--field-mono); color: var(--muted); }
.journal-feature-copy > a { color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 5px; font-size: .875rem; }

@media(max-width:720px) {
  .hero { padding-block: 56px 24px; gap: 24px; }
  .personal-invitation { text-align: left; }
  .personal-invitation-copy { padding: 22px; }
  .personal-invitation .personal-invitation-copy h2 { font-size: 2rem; }
  .notebook-route-grid { grid-template-columns: 1fr; }
  .journal-feature { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .journal-feature-image { max-width: 260px; }
  .journal-topics { justify-content: flex-start; gap: 8px 18px; }
  .journal-feature-copy h2 { font-size: 1.75rem; }
}
@media(prefers-reduced-motion:reduce) { .notebook-route, .anime-evidence { transition: none; } }

.route-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); font-size: 1.3rem; margin-bottom: 16px; }
.notebook-route-grid { gap: 16px; border: 0; }
.notebook-route, .notebook-route + .notebook-route { border: 1px solid var(--line); border-radius: 4px 20px 4px 4px; }
@media print { .observatory-cover { display: none; } }
/* R30: a longer "what broke" story reads at body size, not as a pull quote. */
.project-note p.note-long{font-size:1.125rem;line-height:1.55;letter-spacing:-.01em;margin-top:18px}
/* Work proof: Problem, My part and Result are short blocks; each action keeps its preview button beside it. */
.proof-block { margin: 0 0 12px; }
.proof-block strong { display: block; font: 600 .75rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.proof-actions { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.proof-actions li { display: flex; align-items: center; gap: 2px; }
.proof-actions .text-link { min-width: 0; margin: 0; display: inline-flex; align-items: center; }
:is(.notebook-route, .postcard-copy, .role-heading) .route-status { font-size: .85rem; font-weight: 600; color: var(--ink); margin: 0 0 12px; }

/* Hero arrival, in CSS from the first frame (no blink when scripts load): the eyebrow, buttons and
   proof cells rise in order. Motion-off and reduced-motion rules in styles.css drop it. */
#home :is(.eyebrow, .hero-actions .button, .hero-proof > div) { animation: hero-rise 0.7s cubic-bezier(.2, .7, .2, 1) backwards; }
#home .hero-actions .button:nth-child(1) { animation-delay: 70ms; }
#home .hero-actions .button:nth-child(n+2) { animation-delay: 140ms; }
#home .hero-proof > div:nth-child(1) { animation-delay: 210ms; }
#home .hero-proof > div:nth-child(2) { animation-delay: 280ms; }
#home .hero-proof > div:nth-child(3) { animation-delay: 350ms; }
@keyframes hero-rise { from { opacity: 0; translate: 0 14px; } }

/* R22 hero: images from my StyleGAN2 model on an orbit. */
.latent-walk {
  --plate: #efe9df;
  --plate-line: #d8cfc1;
  --plate-ink: #5b5347;
  margin: 0;
  width: min(100%, 580px);
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 18px;
  container-type: inline-size;
  container-name: latent-figure;
}
.latent-stage {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  container-type: inline-size;
}
.latent-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.latent-stars circle { fill: var(--ink); }
.latent-ring { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 2 7; }
.latent-ring-outer { fill: none; stroke: var(--line); stroke-width: 1; opacity: 0.55; }
.latent-arc { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; opacity: 0.9; }
.latent-plate {
  position: absolute;
  left: 26.7%;
  top: 18.3%;
  width: 46.6%;
  height: 63.4%;
  border-radius: 22px;
  background: var(--plate);
  overflow: hidden;
  box-shadow: 0 34px 80px #00000070, 0 0 0 1px #ffffff1a;
  display: flex;
  flex-direction: column;
}
html[data-canvas="light"] .latent-plate { box-shadow: 0 24px 60px #27335926, 0 0 0 1px var(--line); }
.latent-layers { position: relative; flex: 1; margin: 8px 8px 0; }
.latent-layers img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  mix-blend-mode: multiply;
}
.latent-live .latent-layers img:not(:first-child) { opacity: 0; }
.latent-readout {
  margin: 0;
  height: 34px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--plate-line);
  color: var(--plate-ink);
  font: 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
/* The constellation: one small round portrait per stop, joined by thin lines.
   The button keeps a 44 px target on phones; the disc inside is a tenth of the stage. */
.latent-lines { fill: none; stroke: var(--muted); stroke-width: 1; opacity: 0.6; }
.latent-marker {
  position: absolute;
  width: max(44px, 10cqw);
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.latent-marker span {
  width: 10cqw;
  aspect-ratio: 1;
  border: 1.5px solid color-mix(in srgb, var(--muted) 50%, var(--line));
  border-radius: 50%;
  background: var(--plate);
  overflow: hidden;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.latent-marker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  scale: 1.6;  /* head and shoulders: a portrait, not the full figure */
  transform-origin: 50% 6%;
  mix-blend-mode: multiply;
}
.latent-marker:hover span { border-color: var(--muted); }
.latent-marker[data-active] span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.latent-marker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.latent-probe {
  position: absolute;
  left: 50%;
  top: 6.3%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 26px var(--accent);
  pointer-events: none;
}
.latent-walk:not(.latent-live) .latent-probe { display: none; }
.latent-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline: 4%;
}
.latent-controls[hidden] { display: none; }
.latent-toggle {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.latent-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.latent-toggle .icon-pause, [data-playing="true"] .latent-toggle .icon-play { display: none; }
[data-playing="true"] .latent-toggle .icon-pause { display: block; }
.latent-scrub { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.latent-scrub-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 11px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.latent-scrub input { width: 100%; margin: 0; accent-color: var(--accent); min-height: 24px; }
.latent-walk figcaption {
  padding-inline: 4%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.latent-walk figcaption a { color: var(--accent); text-underline-offset: 4px; min-height: 24px; }

/* Hero proof row, replacing the old small links. */
.hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.hero-proof > div { min-width: 0; padding-inline: 0 16px; border-right: 1px solid var(--line); }
.hero-proof > div:last-child { border-right: 0; padding-right: 0; }
.hero-proof dt { font: 11px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hero-proof dd { margin: 6px 0 0; font-size: 0.9rem; font-weight: 600; }
.hero-proof a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); text-underline-offset: 4px; }
.hero-proof a:hover { text-decoration-color: var(--accent); }

/* About: the observatory illustration now lives here. */
.about-art { margin: 32px 0 0; border-radius: 4px 20px 4px 4px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.about-art img { display: block; width: 100%; height: auto; }
.about-art picture { display: block; overflow: hidden; } /* R41: the scroll drift scales the image; keep it off the caption. */
.about-art figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font: 11px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.1em; color: var(--muted); }

/* 60-second overview: a direct contact row. */
.overview-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }

/* FYP slides are white; give them an ivory mat so they sit calmly on dark. */
.fyp-gallery figure > a { display: block; padding: 14px; border-radius: 16px; background: #efe9df; }
.fyp-gallery figure > a img { mix-blend-mode: multiply; border-radius: 6px; }
html[data-canvas="light"] .fyp-gallery figure > a { border: 1px solid var(--line); }

@media (max-width: 900px) {
  .latent-walk { justify-self: center; }
}
@media (max-width: 1000px) {
  .hero-proof { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero-proof > div { padding-right: 0; border-right: 0; }
}
@media (max-width: 520px) {
  .latent-plate { border-radius: 16px; }
  .latent-layers { margin: 8px 8px 0; }
  .latent-probe { width: 13px; height: 13px; }
}
/* Compact the readout and controls when the figure occupies a narrow hero column. */
@container latent-figure (max-width: 520px) {
  .latent-readout { height: 26px; padding: 0 10px; font-size: 11px; letter-spacing: 0.02em; }
  .latent-readout [data-latent-blend] { display: none; }
  .latent-scrub-label { flex-wrap: wrap; row-gap: 4px; }
  .latent-scrub-label label { flex-basis: 100%; }
}
@container latent-figure (max-width: 340px) { .latent-readout { font-size: 10px; letter-spacing: 0; } }
@media (forced-colors: active) {
  .latent-arc, .latent-probe { display: none; }
  .latent-marker span { border-color: CanvasText; }
  .latent-marker[data-active] span { border-color: Highlight; outline: 2px solid Highlight; outline-offset: 1px; }
}

/* R23: calm the background behind the orbit, and let the ring be dragged. */
.latent-stage::before {
  content: "";
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bg) 58%, color-mix(in srgb, var(--bg) 70%, transparent) 70%, transparent 74%);
  pointer-events: none;
}
.latent-stage { touch-action: pan-y; cursor: grab; }
.latent-stage.latent-dragging { cursor: grabbing; }
.latent-plate { cursor: default; }
.latent-hint { color: var(--ink); font-weight: 600; }

/* R23 style mixer: pure CSS selection, so it works without JavaScript. */
.style-mixer { margin: 32px 0 8px; padding: 22px; border: 1px solid var(--line); border-radius: 4px 20px 4px 4px; background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.style-mixer h4 { margin: 0; font-size: 1.15rem; }
.style-mixer > .caption { margin: 6px 0 18px; }
.mixer-row { display: grid; grid-template-columns: 150px auto minmax(0, 1.1fr) minmax(0, 1fr) auto 220px; gap: 16px; align-items: center; }
.mix-op { font-size: 1.6rem; color: var(--accent); font-weight: 700; }
.mix-a, .mix-out { margin: 0; }
.mix-a img, .mix-out img, .mix-b img { display: block; width: 100%; height: auto; border-radius: 10px; background: #efe9df; mix-blend-mode: normal; }
.mix-a figcaption, .mix-out figcaption { margin-top: 6px; font: 11px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mix-sources, .mix-bands { margin: 0; padding: 0; border: 0; min-width: 0; }
.mix-sources legend, .mix-bands legend { padding: 0; margin-bottom: 8px; font: 11px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mix-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mix-b { position: relative; cursor: pointer; border-radius: 12px; padding: 3px; border: 2px solid transparent; }
.mix-b:has(input:checked) { border-color: var(--accent); }
.mix-b input, .mix-l input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mix-b:has(input:focus-visible), .mix-l:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mix-bands { display: flex; flex-direction: column; gap: 8px; }
.mix-l { position: relative; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.875rem; color: var(--muted); }
.mix-l strong { color: var(--ink); margin-right: 4px; }
.mix-l:has(input:checked) { border-color: var(--accent); background: var(--soft); color: var(--ink); }
.mix-out { position: relative; }
.mix-res { display: none !important; }
@keyframes mixPop { from { transform: scale(0.94); opacity: 0.2; } to { transform: none; opacity: 1; } }
html[data-motion=on] .mix-out img { animation: mixPop 0.28s ease-out; }
.style-mixer:has(#mix-l1:checked):has(#mix-b1:checked) .mix-l1-b1,
.style-mixer:has(#mix-l1:checked):has(#mix-b2:checked) .mix-l1-b2,
.style-mixer:has(#mix-l1:checked):has(#mix-b3:checked) .mix-l1-b3,
.style-mixer:has(#mix-l2:checked):has(#mix-b1:checked) .mix-l2-b1,
.style-mixer:has(#mix-l2:checked):has(#mix-b2:checked) .mix-l2-b2,
.style-mixer:has(#mix-l2:checked):has(#mix-b3:checked) .mix-l2-b3,
.style-mixer:has(#mix-l3:checked):has(#mix-b1:checked) .mix-l3-b1,
.style-mixer:has(#mix-l3:checked):has(#mix-b2:checked) .mix-l3-b2,
.style-mixer:has(#mix-l3:checked):has(#mix-b3:checked) .mix-l3-b3 { display: block !important; }
@media (max-width: 1100px) {
  .mixer-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mix-sources, .mix-bands { grid-column: 1 / -1; }
  .mix-op { display: none; }
  .mix-out { grid-column: 2; grid-row: 1; }
}

/* Placeholders the owner must fill before publishing. */
.fill-me { background: color-mix(in srgb, #ffd54a 22%, transparent); border-bottom: 2px dashed var(--accent); padding: 0 3px; }
.home-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }
.home-footer > div { display: flex; flex-direction: column; gap: 2px; }
.home-footer > div span { color: var(--muted); }
.home-footer nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }

/* R24: buttons and text links in one row share a centre line (the GitHub links sat 8–10 px off). */
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.action-row > h3 { flex-basis: 100%; margin: 0 0 4px; }
.action-row > a { margin: 0; }
.action-row > .text-link { display: inline-flex; align-items: center; min-height: 48px; }
.validation-teaser .cache-postcard { margin: 28px 0; }

/* R25: character of the day. The chip jumps back to today's pick. */
.latent-scrub-label { align-items: center; }
.latent-scrub-label label { margin-right: auto; }
.latent-today {
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font: inherit;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.latent-today:hover { background: var(--accent); color: var(--button-ink); }
.latent-today[hidden] { display: none; }
.latent-marker[data-today] span { border-style: dashed; border-color: var(--accent); }

/* R27: forward-diffusion transition between characters. */
.latent-layers .latent-diffusion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  mix-blend-mode: multiply;
}
.latent-layers .latent-diffusion[hidden] { display: none; }
[data-latent-psi] { text-transform: none; }  /* R42: ψ, not Ψ */
@media (pointer: coarse) { .latent-today { min-height: 36px; } }

/* Arrival, in CSS so it runs from the first frame the parts exist (no load blink): portraits pop
   in one after another and the lines draw. The global motion-off and reduced-motion rules
   (styles.css) drop the animation, which leaves the final state. */
.latent-marker span { animation: portrait-in 0.6s calc(var(--i, 0) * 70ms) cubic-bezier(.34, 1.56, .64, 1) backwards; }
@keyframes portrait-in { from { scale: 0; opacity: 0; } }
.latent-lines[d] { stroke-dasharray: 1; animation: lines-draw 1.4s 0.3s ease-in-out backwards; }
@keyframes lines-draw { from { stroke-dashoffset: 1; } }
/* Forced colours: multiply over a dark Canvas would paint every image black. Last, to beat the
   rules above. */
@media (forced-colors: active) {
  .latent-marker img, .latent-layers img, .latent-layers .latent-diffusion { mix-blend-mode: normal; }
}

/* R25: the N100 homelab as a clickable diagram. */
.homelab-map { container-type: inline-size; margin: 8px 0 24px; padding: 18px; border: 1px solid var(--line); border-radius: 4px 20px 4px 4px; background: var(--surface); }
.homelab-map .eyebrow { margin: 0 0 10px; color: var(--accent); }
.hl-stage { display: none; }
.hl-live .hl-stage { display: block; position: relative; aspect-ratio: 640 / 300; }
.hl-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-box { fill: color-mix(in srgb, var(--second) 7%, transparent); stroke: var(--line); stroke-dasharray: 4 6; }
.hl-box-label { fill: var(--muted); font: 600 10px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.14em; }
.hl-links path { fill: none; stroke: var(--line); stroke-width: 1.5; transition: stroke 0.2s ease; }
.hl-links path[data-on] { stroke: var(--accent); stroke-width: 2; }
.hl-node {
  position: absolute;
  left: calc(var(--x) / 640 * 100%);
  top: calc(var(--y) / 300 * 100%);
  translate: -50% -50%;
  display: grid;
  gap: 1px;
  min-width: 112px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  line-height: 1.25;
}
.hl-node strong { font-size: 0.875rem; font-weight: 700; }
.hl-node span { white-space: nowrap; font: 11px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; color: var(--muted); }
.hl-node[data-node="visitors"] { --x:112; --y:66; }
.hl-node[data-node="access"] { --x:112; --y:156; }
.hl-node[data-node="site"] { --x:360; --y:92; }
.hl-node[data-node="models"] { --x:532; --y:92; }
.hl-node[data-node="telegram"] { --x:112; --y:250; }
.hl-node[data-node="n8n"] { --x:360; --y:218; }
.hl-node[data-node="backups"] { --x:532; --y:218; }

.hl-node:hover { border-color: var(--accent); }
.hl-node[aria-pressed="true"] { border-color: var(--accent); background: var(--soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.hl-panel { margin-top: 14px; }
.hl-panel:focus { outline: none; }
.hl-note { padding: 12px 0 0; border-top: 1px solid var(--line); }
.hl-note + .hl-note { margin-top: 10px; }
.hl-live .hl-note + .hl-note { margin-top: 0; }
.hl-note h4 { margin: 0 0 4px; font-size: 1rem; }
.hl-note p { margin: 0 0 6px; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; max-width: 62ch; }
.hl-note .hl-proof { color: var(--ink); font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 8px 10px; border-left: 2px solid var(--accent); background: var(--soft); border-radius: 0 8px 8px 0; }
.hl-note [hidden], .hl-note[hidden] { display: none; }
@container (max-width: 580px) {
  .hl-live .hl-stage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .hl-live .hl-links { display: none; }
  .hl-node { position: static; translate: none; min-width: 0; }
}

/* R31: small chips wrap their detail line instead of running into the border. */
@media (max-width: 520px) {
  .hl-node { padding-inline: 8px; }
  .hl-node span { white-space: normal; letter-spacing: .02em; text-align: center; }
}

/* Homepage sections: the exploded stack, the seed grid, the lab teaser and the sign-off band. */

/* ---- One write, seven layers ---- */
.stack { padding-block: 100px 60px; }
.stack-pin { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.stack-copy h2 { margin: 12px 0 24px; }
.stack-steps { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: step; display: grid; gap: 4px; }
.stack-steps li { counter-increment: step; position: relative; padding: 10px 0 10px 44px; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.55; transition: color .3s ease; }
.stack-steps li::before { content: attr(data-n); position: absolute; left: 0; top: 12px; font: 600 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .1em; color: var(--accent); }
.stack-steps li strong { display: block; color: var(--ink); font-size: 1.0625rem; }
.stack-figure { margin: 0; position: relative; }
.stack-svg { display: block; width: 100%; max-height: min(78vh, 760px); height: auto; margin-inline: auto; overflow: visible; }
.stack-axis { stroke: var(--line); stroke-dasharray: 2 6; fill: none; }
.plate .pl-top { fill: color-mix(in srgb, var(--surface) 88%, transparent); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.plate .pl-side { fill: none; stroke: var(--muted); stroke-width: 1; stroke-linejoin: round; }
.plate .pl-grid { fill: none; stroke: color-mix(in srgb, var(--muted) 45%, transparent); stroke-width: .8; }
.plate .pl-lead { fill: none; stroke: var(--muted); stroke-width: .9; }
.plate .pl-name { fill: var(--ink); font: 700 13px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; }
.plate .pl-desc { fill: var(--muted); font: 500 12px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; }
.plate[data-hot] .pl-top { stroke: var(--accent); stroke-width: 2; fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.plate[data-hot] .pl-name { fill: var(--accent); }
.plate[data-done] .pl-top { stroke: color-mix(in srgb, var(--accent) 55%, var(--ink)); }
.packet .pk-top { fill: var(--accent); }
.packet .pk-side { fill: color-mix(in srgb, var(--accent) 60%, #000); stroke: var(--accent); stroke-width: .6; }
.stack-ruler { display: none; }
/* Live: the section pins while scrolling drives the timeline. */
.stack.live { min-height: 270vh; padding-block: 0; }  /* R41 (H1): 340vh → 270vh, same story, less scrolling. */
.stack.live .stack-pin { position: sticky; top: calc(var(--header-h, 72px) + 8px); min-height: calc(100vh - var(--header-h, 72px) - 16px); }
.stack.live .stack-steps li[data-active] { color: var(--ink); }
.stack.live .stack-steps li[data-active] strong { color: var(--accent); }
.stack-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.stack-foot .text-link { margin: 0; display: inline-flex; align-items: center; }
/* The progress ruler sits with the steps, well away from the section rail on the right. */
.stack.live .stack-ruler { display: block; position: relative; flex: 0 0 auto; width: min(220px, 60%); height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 92%, #000); background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--muted) 55%, transparent) 0 1px, transparent 1px 7px); background-size: calc(100% - 24px) 12px; background-position: 12px center; background-repeat: no-repeat; }
/* Keep the plate labels clear of the section rail's active label on wide screens. */
@media (min-width: 1360px) { .stack.live .stack-figure { padding-right: 72px; } }
.stack-mark { position: absolute; top: 7px; bottom: 7px; left: 12px; width: 2px; border-radius: 1px; background: var(--accent); }
@media (max-width: 900px) {
  .stack-pin { grid-template-columns: 1fr; gap: 16px; }
  .stack.live .stack-pin { grid-template-rows: auto minmax(0, 1fr); align-content: start; }
  .stack.live .stack-steps li { display: none; }
  .stack.live .stack-steps li[data-active] { display: block; border-top: 0; }
  .stack.live .stack-foot { display: none; }
  .stack.live .stack-svg { max-height: calc(100vh - var(--header-h, 72px) - 260px); }
  .stack.live .stack-ruler { display: none; }
  /* Phones: the diagram is ~half size, so labels are enlarged and the detail line drops
     (the active step above the diagram already says it). The pinned run is shorter too. */
  .stack.live { min-height: 240vh; }
  .plate :is(.pl-desc, .pl-abyss, .pl-depth) { display: none; }
}
@media (max-width: 600px) { .plate .pl-name { font-size: 24px; letter-spacing: .08em; } .stack.live .stack-svg { max-height: calc(100vh - var(--header-h, 72px) - 330px); } }  /* R43: seven plates are taller */
@media (min-width: 601px) and (max-width: 900px) { .plate .pl-name { font-size: 16px; } }
/* Keep the 900px / 800px limits equal to compactStack in scroll-story.mjs.
   Short viewports show the seven native steps without pinning or shrinking the diagram. */
@media (max-width: 900px) and (max-height: 800px) { .stack-svg { max-height: none; } }
/* Desktop windows up to 1100 px tall: only the active step shows its sentence, so seven steps fit the pin. */
@media (min-width: 901px) and (max-height: 1100px) {
  .stack.live .stack-steps li { padding-block: 8px; }
  .stack.live .stack-steps li:not([data-active]) { color: transparent; font-size: 0; line-height: 0; }
  .stack.live .stack-steps li:not([data-active]) strong { font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
  .stack.live .stack-steps li:not([data-active])::before { top: 10px; }
  .stack-copy h2 { margin-bottom: 16px; }
}

/* ---- Seed grid: crisp samples beside the presentation record ---- */
.seed-grid { margin: 28px 0 8px; }
.seed-grid figcaption { max-width: 70ch; color: var(--muted); font-size: .9375rem; line-height: 1.6; margin-bottom: 16px; }
.seed-grid figcaption strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }
.seed-tiles { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; border-radius: 4px 20px 4px 4px; background: #efe9df; }
.seed-tiles li { margin: 0; }
.seed-tile { position: relative; display: block; border-radius: 8px; overflow: hidden; background: #fff; outline-offset: 3px; transition: transform .25s ease, box-shadow .25s ease; }
.seed-tile img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.seed-tile span { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: #171113d0; color: #fff; font: 600 10px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.seed-tile:hover span, .seed-tile:focus-visible span { opacity: 1; transform: none; }
.seed-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 24px #27335940; text-decoration: none; }
html[data-canvas="light"] .seed-tiles { border: 1px solid var(--line); }
.record-label { margin: 28px 0 12px; font: 600 11px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .seed-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px; gap: 6px; } .seed-tile span { display: none; } }

/* ---- Image lab: a compact teaser that opens the full lab ---- */
.lab-teaser { margin: 8px 0 32px; }
.lab-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lab-tools li { margin: 0; }
.lab-tools a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 4px 20px 4px 4px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.lab-tools a:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.lab-tools img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 10%; margin-bottom: 10px; border-radius: 2px 14px 2px 2px; background: #efe9df; }
.lab-tools strong { font-size: 1rem; }
.lab-tools span { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.lab-teaser-note { margin: 14px 0 0; color: var(--muted); font-size: .875rem; }
.lab-open { margin-top: 16px; }
.lab-open[hidden], .lab-close[hidden] { display: none; }
.lab-close { margin-top: 20px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: .875rem; font-weight: 600; }
.lab-body[hidden] { display: none; }
@media (max-width: 1000px) { .lab-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .lab-tools { grid-template-columns: 1fr; } }

/* ---- Sign-off band ---- */
.signoff { margin-top: 0; background: radial-gradient(ellipse at 18% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), linear-gradient(180deg, transparent, var(--surface) 28% 72%, transparent); }  /* R43: fades in and out, no hard band */
.signoff-inner { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 40px; align-items: center; padding-block: 64px; }
.signoff-orbit { width: 150px; height: 150px; overflow: visible; }
.signoff-orbit .so-ring { fill: none; stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 1.2; }
.signoff-orbit .so-dash { stroke-dasharray: 2 6; }
.signoff-orbit .so-probe circle, .signoff-orbit .so-core { fill: var(--accent); }
.signoff-orbit .so-probe { transform-origin: 100px 100px; }
.signoff-copy .eyebrow { margin: 0; }
.signoff-copy h2 { margin: 10px 0 12px; }
.signoff-line { margin: 0; color: var(--muted); font-size: 1.125rem; max-width: 52ch; }
.signoff .action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.signoff .action-row .button { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .signoff-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 48px; }
  .signoff-orbit { width: 96px; height: 96px; }
}

/* R41 (V1): the five layers as the Abyss. Each plate is a layer, with the
   hardware in its landscape; depth is a small mark, not a headline. */
.stack { --l1: #2a2618; --l2: #16291d; --l3: #2e1f22; --l4: #13292c; --l5: #10243a; --l6: #1f1936; --l7: #2a1020; --tree: #2f5a3e; --tree-ink: #6fae83; --water: #1f5d8a; --water-ink: #6fb7e8; --mist: #ffffff14; --paper: #d8d2c2; --bone: #d9d2bf; --pcb: #1f4a35; }
:root[data-canvas=light] .stack { --l1: #f3ecd6; --l2: #dcefdf; --l3: #f1e3e3; --l4: #dcf0ef; --l5: #d6e8f8; --l6: #e6e0f5; --l7: #f3dde6; --tree: #9fc9a6; --tree-ink: #2f6b43; --water: #8cc2ea; --water-ink: #1d5f91; --mist: #ffffff80; --paper: #ffffff; --bone: #9c8a5e; --pcb: #7fb896; }
/* R43: seven layers, each in its own colour (rim, forest, fault, goblets, sea, capital, maelstrom). */
.plate[data-i="0"] .pl-top { fill: color-mix(in srgb, var(--l1) 80%, transparent); }
.plate[data-i="1"] .pl-top { fill: color-mix(in srgb, var(--l2) 80%, transparent); }
.plate[data-i="2"] .pl-top { fill: color-mix(in srgb, var(--l3) 80%, transparent); }
.plate[data-i="3"] .pl-top { fill: color-mix(in srgb, var(--l4) 80%, transparent); }
.plate[data-i="4"] .pl-top { fill: color-mix(in srgb, var(--l5) 85%, transparent); }
.plate[data-i="5"] .pl-top { fill: color-mix(in srgb, var(--l6) 85%, transparent); }
.plate[data-i="6"] .pl-top { fill: color-mix(in srgb, var(--l7) 85%, transparent); }
.abyss-prop .sea { fill: color-mix(in srgb, var(--water) 55%, transparent); stroke: none; }
.abyss-prop .bubble circle { fill: color-mix(in srgb, var(--water-ink) 18%, transparent); stroke: var(--water-ink); stroke-width: 1; }
.abyss-prop .bubble-hi { fill: none; stroke: #ffffffb0; stroke-width: 1; stroke-linecap: round; }
:root[data-motion=on] .abyss-prop .bubble { animation: bubble-rise 3.6s ease-in infinite var(--d, 0s); }
@keyframes bubble-rise { 0% { transform: translateY(8px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }
.abyss-prop .road { fill: color-mix(in srgb, var(--l6) 60%, transparent); stroke: var(--muted); stroke-dasharray: 3 5; }
.abyss-prop .wall { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, var(--muted)); stroke-width: 2; }
.abyss-prop .window { stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 1.2; stroke-linecap: round; }
.abyss-prop .mast { stroke: var(--muted); stroke-width: 1.4; }
.abyss-prop .beacon { fill: var(--accent); stroke: none; filter: drop-shadow(0 0 4px var(--accent)); }
.abyss-prop .deep { fill: color-mix(in srgb, var(--water) 35%, var(--l7)); stroke: var(--water-ink); stroke-width: 1; opacity: .9; }
.abyss-prop .swirl { fill: none; stroke: var(--water-ink); stroke-width: 1.5; stroke-linecap: round; opacity: .75; }
.abyss-prop .eye-rim { fill: #05060a; stroke: color-mix(in srgb, var(--accent) 50%, transparent); stroke-width: 2; }
.abyss-prop .core { fill: var(--soft); stroke: var(--accent); }
.plate .pl-grid { opacity: .45; }
.abyss-prop path, .abyss-prop ellipse { stroke: var(--muted); stroke-width: 1; stroke-linejoin: round; }
.abyss-prop .f-top { fill: var(--surface); }
.abyss-prop .f-a { fill: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.abyss-prop .f-b { fill: var(--bg); }
.abyss-prop .hot { stroke: var(--accent); }
.abyss-prop .hot.f-top { fill: var(--soft); }
.abyss-prop .gold { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; }
.abyss-prop .lane { stroke-width: 1.4; fill: none; opacity: .8; }
.abyss-prop .roof { fill: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.abyss-prop .hole { fill: #05060a; }
.abyss-prop .tree { fill: var(--tree); stroke: var(--tree-ink); }
.abyss-prop .trunk { stroke: var(--tree-ink); stroke-width: 1.6; }
.abyss-prop .crack { fill: none; stroke: #05060a; stroke-width: 7; }
.abyss-prop .crack-glow { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .55; }
.plate[data-hot] .abyss-prop .crack-glow { opacity: 1; stroke-width: 3; }
.abyss-prop .water { fill: var(--water); stroke: var(--water-ink); opacity: .9; }
.abyss-prop .wave { fill: none; stroke: var(--water-ink); stroke-width: 1.2; opacity: .7; }
.abyss-prop .mist { fill: var(--mist); stroke: none; }
.abyss-prop .giant { fill: none; stroke: var(--bone); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .65; }
.abyss-prop .giant.socket { fill: color-mix(in srgb, var(--bone) 35%, transparent); }
.abyss-prop .page-shadow { fill: color-mix(in srgb, var(--water) 60%, #000); stroke: none; opacity: .5; }
.abyss-prop .sheet { fill: var(--paper); stroke: var(--muted); }
.abyss-prop .ear { fill: color-mix(in srgb, var(--paper) 70%, #000); stroke: var(--muted); }
.abyss-prop .pg-label { fill: #1b1d24; stroke: none; font: 700 11.5px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.abyss-prop .pte { stroke: #8a8472; stroke-width: 1.6; }
.abyss-prop .pte.on, .abyss-prop .page.hot .sheet { stroke: var(--accent); }
.abyss-prop .walk { fill: none; stroke: var(--accent); stroke-dasharray: 2 3; opacity: .85; }
.abyss-prop .pcb.f-top { fill: var(--pcb); }
.abyss-prop .pcb:is(.f-a, .f-b) { fill: color-mix(in srgb, var(--pcb) 55%, #000); }
.abyss-prop .chip.f-top { fill: #2a2c33; }
.abyss-prop .chip:is(.f-a, .f-b) { fill: #111216; }
.abyss-prop .chip.hot.f-top { fill: var(--accent); }
.abyss-prop .fingers { stroke: #d9b24a; stroke-width: 2; stroke-dasharray: 1.5 1.5; }
.plate .pl-abyss { fill: var(--accent); font: italic 500 13px Manrope, "Segoe UI", sans-serif; }
.plate .pl-depth { fill: var(--muted); font: 600 11px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; }
.plate[data-i="4"] .pl-depth { cursor: help; text-decoration: underline dotted; }

/* R43: a full-width band that passes through each layer's colour as the
   story scrolls, and fades out at both ends instead of stopping at an edge. */
.stack { border-image: linear-gradient(180deg, transparent, color-mix(in srgb, var(--l1) 50%, transparent) 9%, color-mix(in srgb, var(--l2) 50%, transparent) 22%, color-mix(in srgb, var(--l3) 50%, transparent) 35%, color-mix(in srgb, var(--l4) 50%, transparent) 48%, color-mix(in srgb, var(--l5) 55%, transparent) 61%, color-mix(in srgb, var(--l6) 55%, transparent) 74%, color-mix(in srgb, var(--l7) 55%, transparent) 87%, transparent) fill 0 / 0 / 0 100vw; }
.abyss-note { margin: 10px 0 0; min-height: 1.5em; color: var(--accent); font-size: .9375rem; }
.role-card { grid-template-columns: minmax(0, 1fr); }
#work .featured-project { border-top: 3px solid var(--accent); }
#work .featured-project .proof-block { max-width: 68ch; }
#work .featured-project .route-status { color: var(--accent); }
/* R41 (G3): a small window onto the gravity playground. */
.playground-window { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; padding-block: 72px; border-top: 1px solid var(--line); }
.pw-copy h2 { margin: 10px 0 16px; }
.pw-copy p:not(.eyebrow) { color: var(--muted); max-width: 46ch; }
.pw-stage { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; opacity: 1; border: 1px solid var(--line); border-radius: 4px 20px 4px 4px; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--second) 10%, var(--bg)), var(--bg) 70%); touch-action: pan-y; cursor: crosshair; }
@media (max-width: 800px) { .playground-window { grid-template-columns: 1fr; gap: 24px; padding-block: 48px; } }
/* R41 (H8): your opened chapters as a constellation in the sign-off. */
.signoff-stars { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; color: var(--muted); font-size: .875rem; }
.signoff-stars svg { flex: none; border-radius: 10px; background: color-mix(in srgb, var(--second) 10%, var(--bg)); }
.signoff-stars .cf-speck { fill: var(--muted); opacity: .35; }
.signoff-stars .cf-route { fill: none; stroke: var(--accent); stroke-linecap: round; }
.signoff-stars .cf-star, .signoff-stars .cf-seen { fill: var(--accent); }
/* R41 (M12): the Mellon gate, over the page while the doors open. */
.mellon-gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.mellon-gate svg { width: min(420px, 80vw); height: auto; }
.mellon-gate .arch { fill: none; stroke: var(--line); stroke-width: 2; }
.mellon-gate .leaf { fill: var(--surface); stroke: var(--muted); stroke-width: 1.2; }
.mellon-gate .ith { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--accent)); }
/* R41 (H9): a faint light under the pointer, dark canvas and motion only. */
.spotlight { display: none; }
:root[data-canvas=dark][data-motion=on] .spotlight { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(480px circle at var(--spot-x, -600px) var(--spot-y, -600px), color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); }
/* R41 (H3): the star-map teaser in the IOMMU route card. */
.notebook-route { position: relative; }
/* R42: the hero states the job; its headline is a sentence, so it runs smaller. */
#home { min-height: 0; padding-block: 64px 48px; }
#home .intro > :is(.lead, .muted) { max-width: 52ch; margin-inline: 0; }
.hero .intro h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); max-width: 17ch; text-wrap: balance; }
@media (max-width: 720px) { #home { padding-block: 48px 32px; } .hero .intro h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); } }
[data-cv][hidden] { display: none !important; }  /* until cv.pdf is published */
.button-quiet { background: transparent; color: var(--ink); border: 1.5px solid var(--accent); }
.button-quiet:hover { background: var(--soft); }
.role-skills { margin-top: 12px; color: var(--muted); font-size: .9375rem; }
.role-skills strong { margin-right: 8px; color: var(--ink); }
.footer-note { display: block; max-width: 52ch; margin-top: 6px; color: var(--muted); font-size: .8125rem; }
/* R43: seamless sections. Dividers between home sections fade out at both ends instead of running edge to edge. */
.work, .about, .playground-window { border-image: linear-gradient(90deg, transparent, var(--line) 20% 80%, transparent) 1; }
/* Tron theme: light cycles race behind the hero (home-cycles.mjs); the copy stays above them. */
.hero > .cycles { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .4; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 100%); }
.hero:has(> .cycles) > :not(.cycles) { position: relative; z-index: 1; }
/* Design review: on light paper the layer band muddies the page, so the paper stays flat. */
:root[data-canvas=light] .stack { border-image: none; }
/* One heading scale and one eyebrow (the overview cards' "01 / SILICON" label) for every section. */
#main h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
#main .eyebrow { font: .7rem/1.7 var(--field-mono); letter-spacing: normal; color: var(--accent); }
/* The twin-suns window: a guide circle at the planet's starting radius (r 260 of the 600 the
   frame's height spans; the suns' tug moves the planet a little inside it) and a label, so a
   still frame reads as an instrument rather than an empty box. */
.pw-frame { position: relative; margin: 0; }
.pw-frame::before { content: ""; position: absolute; top: 50%; left: 50%; height: 86.7%; aspect-ratio: 1; translate: -50% -50%; border: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 50%; pointer-events: none; }
.pw-frame figcaption { position: absolute; left: 16px; bottom: 12px; font: .7rem/1.4 var(--field-mono); color: var(--muted); pointer-events: none; }
/* On a phone the circle reaches the frame's corner, so the label sits under the frame, outside
   the box the circle is centred in. */
@media (max-width: 520px) {
  .pw-frame { margin-bottom: 1.75rem; }
  .pw-frame figcaption { left: 0; bottom: auto; top: calc(100% + 8px); }
}
/* Background: a newest-first timeline of cards on a line. */
#background { padding-block: 60px 100px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--line); display: grid; gap: 16px; max-width: 720px; }
.timeline > li { position: relative; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px 20px 4px 4px; }
.timeline > li::before { content: ""; position: absolute; left: -36px; top: 26px; width: 11px; height: 11px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); }
.timeline h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; margin: 6px 0 6px; letter-spacing: -.025em; }
.timeline p { margin: 0; color: var(--muted); }
.timeline .route-number { color: var(--accent); }
/* A link inside the sentence: accent and underlined, so it does not read as body text. */
.timeline .text-link { margin: 0; display: inline; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }