:root{color-scheme:dark;--bg:#060b12;--ink:#edf5fa;--muted:#a0b2c1;--cyan:#70f3de;--violet:#ab91ff}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 'Space Grotesk',sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}::selection{background:#70f3de;color:#060b12}
header{position:fixed;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:24px 4vw;background:linear-gradient(var(--bg),#060b1200)}.brand{font-weight:700;letter-spacing:-.04em;font-size:22px}.brand span{color:var(--cyan)}.experiment{color:var(--muted);font:12px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase}.back{font-size:14px;color:var(--muted)}
#stage{overflow:hidden;position:relative;background:radial-gradient(ellipse at 50% 45%,#10212c77,transparent 65%)}#world{position:relative}.network{display:none}.node{width:min(720px,calc(100% - 48px));margin:0 auto;padding:110px 0 90px;position:relative;scroll-margin-top:85px}.eyebrow{font:12px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:12px}.eyebrow:before{content:'';width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 14px var(--cyan)}h1,h2,h3,p{margin:0}h1{font-size:clamp(48px,7.3vw,88px);line-height:1.02;letter-spacing:-.065em;margin:25px 0}h1 span{display:block;color:var(--cyan)}h2{font-size:clamp(34px,5vw,58px);line-height:1.1;letter-spacing:-.05em;margin:22px 0}h3{font-size:21px;letter-spacing:-.025em;line-height:1.3}.intro{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:580px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:26px;border:1px solid #354753;padding:11px 20px;border-radius:5px;font-size:14px}.button.primary{background:var(--cyan);border-color:var(--cyan);color:#06211e}.button:hover{border-color:var(--cyan)}.meta{margin-top:26px;color:var(--muted);font:12px/1.8 'IBM Plex Mono',monospace}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.chips span{font:13px 'IBM Plex Mono',monospace;color:#cad7e1;border:1px solid #2a3c4c;border-radius:4px;padding:7px 12px}.rows{margin-top:24px}.row{display:block;padding:19px 0;border-top:1px solid #ffffff20}.row:last-child{border-bottom:1px solid #ffffff20}.row:hover h3{color:var(--cyan)}.row .tag{color:var(--violet);font:12px 'IBM Plex Mono',monospace;margin-bottom:7px}.row p{color:var(--muted);margin-top:6px;font-size:15px}.row h3{display:flex;justify-content:space-between;gap:18px}.row h3 span{color:var(--cyan);font-weight:400}.contact-links{display:flex;gap:24px;margin-top:22px;color:var(--muted);font-size:14px}.contact-links a:hover{color:var(--cyan)}
nav{position:fixed;z-index:6;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:10px 15px;border:1px solid #ffffff18;border-radius:40px;background:#0a141feF;backdrop-filter:blur(16px)}nav a{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12px;color:var(--muted);white-space:nowrap}nav i{display:block;width:6px;height:6px;border-radius:50%;background:#455361}nav a[aria-current="step"]{color:var(--cyan)}nav a[aria-current="step"] i{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.status{position:fixed;bottom:39px;left:4vw;z-index:4;font:12px 'IBM Plex Mono',monospace;color:var(--muted)}.hint{position:fixed;bottom:39px;right:4vw;z-index:4;font:12px 'IBM Plex Mono',monospace;color:var(--muted)}
body.enhanced #stage{position:fixed;inset:0}body.enhanced #world{position:absolute;left:50%;top:50%;will-change:transform}body.enhanced .network{display:block;position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}body.enhanced .node{position:absolute;margin:0;padding:0;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 48px));will-change:opacity}body.enhanced .node:before{content:'';position:absolute;inset:-42px -38px;z-index:-1;border-radius:45%;background:radial-gradient(ellipse,#0b1623 30%,#0b1623ed 60%,#0b162300 73%);pointer-events:none}.edge{fill:none;stroke:#365466;stroke-width:1}.lit-edge{fill:none;stroke:var(--cyan);stroke-width:2;filter:url(#glow)}.halo{fill:#0c19234d;stroke:var(--cyan);stroke-opacity:.4;stroke-width:1}.outer{fill:none;stroke:#8b8bff25;stroke-width:1;stroke-dasharray:3 10}.satellite{fill:#101f2b;stroke:var(--cyan);stroke-opacity:.4;stroke-width:1}
@media(max-width:1000px){.status,.hint{display:none}}@media(max-width:600px){header{padding:19px 24px}.experiment{display:none}.brand{font-size:20px}.back{font-size:12px}nav{bottom:16px;gap:0;padding:8px}nav a{font-size:11px;padding:8px;gap:5px}.node{padding-top:100px}h1{margin:20px 0}.intro{font-size:17px}.row{padding:15px 0}.row p{font-size:14px}.contact-links{gap:18px}.button{padding:10px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#stage{background:radial-gradient(ellipse at top,#112c35,transparent 60%)}.node{border-bottom:1px solid #70f3de25}.hint{display:none}}

#neuron-field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.85}
.variant-picker{display:flex;align-items:center;gap:10px;font:12px 'IBM Plex Mono',monospace;color:var(--muted)}
.variant-picker select{font:14px 'Space Grotesk',sans-serif;color:var(--ink);background:#101d2b;border:1px solid #395064;border-radius:6px;padding:9px 30px 9px 12px;cursor:pointer;max-width:220px}
.variant-picker select:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.variant-caption{position:fixed;top:82px;left:50%;transform:translateX(-50%);width:calc(100% - 48px);text-align:center;z-index:4;color:var(--muted);font:12px/1.5 'IBM Plex Mono',monospace;pointer-events:none}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]){--cyan:#c3a0ff;--violet:#ffb7d5}
body[data-variant="layers"]{--cyan:#83caff;--violet:#85f2c6}
body.enhanced .node:before{background:radial-gradient(ellipse,#0b1623 35%,#0b1623f5 62%,#0b162300 76%)}
@media(max-width:600px){.variant-picker{gap:0}.variant-picker label{display:none}.variant-picker select{font-size:12px;max-width:180px;padding:8px}.back{max-width:65px;text-align:right;line-height:1.3}.variant-caption{top:74px;font-size:12px}.node{padding-top:140px}}

/* Cortex content lives inside circular somas; geometry is measured from the text. */
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .node{width:min(520px,calc(100% - 72px));text-align:center}
body.enhanced:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .node{width:min(520px,calc(100vw - 72px))}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .eyebrow,body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .actions,body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .chips,body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .contact-links{justify-content:center}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) h1{font-size:clamp(40px,5vw,62px);letter-spacing:-.055em}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) h2{font-size:clamp(32px,4vw,46px)}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .intro{font-size:17px;line-height:1.6}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .rows{text-align:left}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .row{padding:14px 0}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .row h3{font-size:18px}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .row p{font-size:14px}
body.enhanced:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .node:before{display:none}
.soma{fill:url(#soma-fill);stroke:#b294e0;stroke-opacity:.65;stroke-width:1.5}
.membrane{fill:none;stroke:#b69adc;stroke-width:1;stroke-opacity:.18}
.activation-ring{fill:none;stroke:#dabdff;stroke-width:2;filter:url(#glow)}
.dendrite{fill:none;stroke:#9e80cc;stroke-linecap:round;stroke-linejoin:round}
body:is([data-variant="cortex"],[data-variant="void"],[data-variant="paper"],[data-variant="graphite"],[data-variant="atlas"],[data-variant="carbon"]) .lit-edge{stroke-width:2.5}

/* Five complete monochrome directions share the same accessible content and navigation. */
body[data-palette="mono"]{--bg:#050505;--ink:#f5f5f5;--muted:#ababab;--cyan:#eeeeee;--violet:#bcbcbc;--line:#ffffff30;--surface:#141414;--button-ink:#111;--cell-line:#c7c7c7}
body[data-variant="graphite"]{--bg:#252525;--ink:#fafafa;--muted:#c1c1c1;--surface:#343434;--line:#ffffff38}
body[data-variant="carbon"]{--bg:#101010;--ink:#e8e8e8;--muted:#aaa;--surface:#202020;--line:#ffffff30}
body:is([data-variant="paper"],[data-variant="atlas"]){color-scheme:light;--bg:#fff;--ink:#151515;--muted:#555;--cyan:#1c1c1c;--violet:#555;--surface:#fff;--line:#00000030;--button-ink:#fff;--cell-line:#333}
body[data-palette="mono"] header{background:linear-gradient(var(--bg) 45%,transparent)}
body[data-palette="mono"] #stage{background:none}
body[data-palette="mono"] .variant-picker select,body[data-palette="mono"] nav{background:var(--surface);border-color:var(--line)}
body[data-palette="mono"] .button,body[data-palette="mono"] .row,body[data-palette="mono"] .chips span{border-color:var(--line)}
body[data-palette="mono"] .button.primary{color:var(--button-ink);border-color:var(--cyan)}
body[data-palette="mono"] .chips span{color:var(--ink)}
body[data-palette="mono"] .soma,body[data-palette="mono"] .membrane,body[data-palette="mono"] .activation-ring,body[data-palette="mono"] .dendrite,body[data-palette="mono"] .edge{stroke:var(--cell-line)}
body[data-palette="mono"] .satellite{fill:var(--surface)}
body[data-palette="mono"] ::selection{background:var(--ink);color:var(--bg)}
body[data-variant="void"] .soma{stroke-width:.8;stroke-opacity:.45}
body[data-variant="void"] .activation-ring{stroke-width:1.5}
body[data-variant="void"] .button{border-radius:30px}
body[data-variant="void"] h1{font-size:clamp(42px,5vw,68px);font-weight:400}
body[data-variant="void"] .eyebrow{letter-spacing:.24em}
body[data-variant="void"] #neuron-field{opacity:.55}
body:is([data-variant="paper"],[data-variant="atlas"]) .lit-edge,body:is([data-variant="paper"],[data-variant="atlas"]) .activation-ring{filter:none;stroke-width:1.5}
body[data-variant="paper"] .node{text-align:left}
body[data-variant="paper"] .eyebrow,body[data-variant="paper"] .actions,body[data-variant="paper"] .chips,body[data-variant="paper"] .contact-links{justify-content:flex-start}
body[data-variant="paper"] h1,body[data-variant="paper"] h2{letter-spacing:-.065em;font-weight:500}
body[data-variant="paper"] .eyebrow,body[data-variant="paper"] .row .tag{font-family:'IBM Plex Mono',monospace}
body[data-variant="paper"] .soma{stroke-width:1;stroke-opacity:.8}
body[data-variant="paper"] .membrane{stroke-dasharray:3 6}
body[data-variant="paper"] .button,body[data-variant="paper"] .chips span,body[data-variant="paper"] nav{border-radius:0}
body[data-variant="paper"] #stage{background-image:radial-gradient(#00000015 .7px,transparent .7px);background-size:24px 24px}
body[data-variant="graphite"] .soma{stroke-width:3;stroke-opacity:.5}
body[data-variant="graphite"] h1,body[data-variant="graphite"] h2{font-weight:700;letter-spacing:-.06em}
body[data-variant="graphite"] .row{padding:16px 18px;border:1px solid var(--line);border-radius:12px;margin-top:10px;background:#ffffff05}
body[data-variant="graphite"] .button{border-radius:8px}
body[data-variant="graphite"] .membrane{stroke-opacity:.35}
body[data-variant="atlas"] h1,body[data-variant="atlas"] h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.05em}
body[data-variant="atlas"] h1 span{font-style:italic}
body[data-variant="atlas"] .row h3{font-family:Georgia,'Times New Roman',serif;font-size:22px}
body[data-variant="atlas"] .eyebrow{letter-spacing:.22em}
body[data-variant="atlas"] .button{border-radius:0;border-width:0 0 1px;padding:10px 0;margin-right:18px}
body[data-variant="atlas"] .button.primary{background:transparent;color:var(--ink)}
body[data-variant="atlas"] .soma{stroke-opacity:.25;stroke-width:1}
body[data-variant="atlas"] #neuron-field{opacity:.5}
body[data-variant="carbon"] .node{font-family:'IBM Plex Mono',monospace}
body[data-variant="carbon"] h1,body[data-variant="carbon"] h2{font-family:'Space Grotesk',sans-serif;text-transform:uppercase;font-size:clamp(34px,4vw,50px);letter-spacing:-.045em}
body[data-variant="carbon"] .intro{font-size:15px}
body[data-variant="carbon"] .row h3{font-size:16px}
body[data-variant="carbon"] .row p{font-size:13px}
body[data-variant="carbon"] .button,body[data-variant="carbon"] .chips span{border-radius:0}
body[data-variant="carbon"] .membrane{stroke-dasharray:1 5;stroke-opacity:.6}
body[data-variant="carbon"] .activation-ring{stroke-dasharray:80 8;filter:none}
@media(min-width:1050px){body[data-variant="paper"] nav{left:28px;bottom:50%;transform:translateY(50%);flex-direction:column;padding:12px}body[data-variant="carbon"] nav{left:auto;right:28px;bottom:50%;transform:translateY(50%);flex-direction:column;border-radius:0}body[data-variant="atlas"] nav{background:transparent;border:none;border-radius:0;border-bottom:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){body[data-palette="mono"] .node{border-color:var(--line);background:var(--bg)}}

/* Carbon: restrained motion, stronger hierarchy, and tactile controls. */
body[data-variant="carbon"]{--bg:#090909;--surface:#181818;--muted:#b2b2b2}
body[data-variant="carbon"] header{padding-top:22px;padding-bottom:22px}
body[data-variant="carbon"] .brand{letter-spacing:-.07em}
body[data-variant="carbon"] .variant-caption{font-size:12px;letter-spacing:.07em;color:#999}
body[data-variant="carbon"] h1{font-size:clamp(40px,4.8vw,64px);line-height:1.03;font-weight:500;text-transform:none;letter-spacing:-.065em}
body[data-variant="carbon"] h1 span{color:#929292}
body[data-variant="carbon"] h2{font-size:clamp(32px,3.8vw,46px);line-height:1.1;text-transform:none;font-weight:500}
body[data-variant="carbon"] .intro{font-family:'Space Grotesk',sans-serif;font-size:17px;line-height:1.7}
body[data-variant="carbon"] .eyebrow{font-size:12px;letter-spacing:.15em;color:#c8c8c8}
body[data-variant="carbon"] .eyebrow:before{width:5px;height:5px;box-shadow:0 0 14px #ffffff70}
body[data-variant="carbon"] .rows{margin-top:24px}
body[data-variant="carbon"] .row{padding:16px 12px;border-color:#ffffff17;border-radius:5px;transition:background .25s,border-color .25s,transform .25s}
body[data-variant="carbon"] a.row:hover{background:#ffffff08;border-color:#ffffff45;transform:translateX(4px)}
body[data-variant="carbon"] .row p{font-family:'Space Grotesk',sans-serif;font-size:15px;line-height:1.55}
body[data-variant="carbon"] .row .tag{font-size:12px;letter-spacing:.06em;color:#969696}
body[data-variant="carbon"] .row h3 span{transition:transform .25s}
body[data-variant="carbon"] .row:hover h3 span{transform:translate(3px,-3px)}
body[data-variant="carbon"] .button{border-radius:5px;padding:12px 19px;font-family:'Space Grotesk',sans-serif;font-weight:500;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s}
body[data-variant="carbon"] .button.primary{background:#eee;border-color:#eee;box-shadow:0 2px 14px #ffffff0a}
body[data-variant="carbon"] .button:hover{transform:translateY(-2px);box-shadow:0 5px 24px #ffffff15}
body[data-variant="carbon"] .button:active{transform:translateY(0)}
body[data-variant="carbon"] .button span{transition:transform .25s}
body[data-variant="carbon"] .button:hover span{transform:translate(2px,-2px)}
body[data-variant="carbon"] .chips span{background:#ffffff04;border-color:#ffffff1c;border-radius:4px;font-size:12px;transition:border-color .25s,background .25s}
body[data-variant="carbon"] .chips span:hover{background:#ffffff0a;border-color:#ffffff50}
body[data-variant="carbon"] nav{background:#111111e8;border:1px solid #ffffff15;border-radius:12px;box-shadow:0 12px 40px #00000040}
body[data-variant="carbon"] nav a{border-radius:6px;transition:color .25s,background .25s}
body[data-variant="carbon"] nav a:hover{background:#ffffff06}
body[data-variant="carbon"] nav a[aria-current="step"]{background:#ffffff0c}
body[data-variant="carbon"] .soma{stroke-opacity:.5;stroke-width:1;fill:url(#soma-fill)}
body[data-variant="carbon"] .activation-ring{stroke-width:1.3;stroke-dasharray:110 12 2 12;filter:url(#glow)}
body[data-variant="carbon"] .membrane{stroke-opacity:.25}
body[data-variant="carbon"] .contact-links a{transition:color .25s;text-underline-offset:5px}
body[data-variant="carbon"] .contact-links a:hover{text-decoration:underline}
#journey-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:#ddd;z-index:10;pointer-events:none;display:none}
body[data-variant="carbon"] #journey-progress{display:block}
@media(min-width:1050px){body[data-variant="carbon"] nav{padding:12px 8px;gap:8px}body[data-variant="carbon"] nav a{padding:10px 14px}}


/* Reserved text keeps the neuron geometry fixed throughout typing. */
#hero-title .hero-opening{color:var(--ink)}
#hero-title .typewriter-line{display:grid;position:relative}
#hero-title .typewriter-space,#hero-title .typewriter-live{grid-area:1/1;display:block}
#hero-title .typewriter-space{visibility:hidden}
#hero-title .typewriter-live[data-typing="true"]:after{content:'';display:inline-block;width:2px;height:.8em;margin-left:5px;background:currentColor;vertical-align:-.02em;animation:typing-caret .85s step-end infinite}
@keyframes typing-caret{0%,48%{opacity:1}49%,100%{opacity:0}}
body[data-variant="carbon"] #neuron-field{opacity:.85}
@media(prefers-reduced-motion:reduce){#hero-title .typewriter-live:after{display:none}}

.pointer-light{pointer-events:none}

/* Live portfolio content controls. */
.catalog-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:16px;color:var(--muted);font:12px 'IBM Plex Mono',monospace}
.catalog-controls[hidden]{display:none}.catalog-controls button,.project-filter{font:13px 'Space Grotesk',sans-serif;background:#171717;border:1px solid #ffffff25;color:#ddd;border-radius:5px;padding:8px 12px;cursor:pointer}
.catalog-controls button:disabled{opacity:.35;cursor:default}.catalog-controls button:focus-visible,.project-filter:focus-visible{outline:2px solid #eee;outline-offset:4px}
.project-filter{margin-top:18px;max-width:100%}.learning{margin-top:20px;text-align:left;border-top:1px solid #ffffff20;padding-top:12px}.learning summary{cursor:pointer;color:#ccc}.learning p{font:15px/1.6 'Space Grotesk',sans-serif;color:var(--muted);margin-top:12px}
nav{max-width:calc(100vw - 24px);overflow:auto}.site-note{margin-top:28px;color:var(--muted);font:12px/1.6 'IBM Plex Mono',monospace}.back{font-size:14px}
@media(max-width:600px){nav a{padding:8px 6px;font-size:11px}nav{padding:6px}nav i{display:none}.back{max-width:none}.node{scroll-margin-top:100px}}

.catalog-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media(prefers-reduced-motion:reduce){body[data-variant="carbon"] *,body[data-variant="carbon"] *:before{animation:none!important;transition:none!important}}

/* Stable mobile viewport avoids toolbar-driven relayout and expensive SVG blur surfaces. */
@media(max-width:700px),(pointer:coarse){
  body.enhanced #stage{height:100svh;bottom:auto}
  body.enhanced #world{will-change:auto}
  body.enhanced .node{will-change:auto}
  body[data-variant="carbon"] .activation-ring,body[data-variant="carbon"] .lit-edge,#signal{filter:none}
  body[data-variant="carbon"] nav{backdrop-filter:none;box-shadow:none}
}