/* zz / workstation. Phosphor, machined graphite and bone-white lettering. */
:root{--bg:#0c0f0e;--surface:#151a18;--raised:#202623;--ink:#e7e4d8;--muted:#a4aea7;--line:#333d36;--accent:#adeda3;--accent-ink:#132319;--blue:#b9a8d2;--radius:9px;--amber:#dfb16c;--sans:Inter,"Segoe UI",Arial,sans-serif}
body{background:radial-gradient(ellipse at 82% 10%,#24372a30,transparent 44%),var(--bg)}
.wrap{width:min(1280px,calc(100% - 72px))}
.header{border-color:var(--line);min-height:76px}.brand{font-family:var(--mono);font-size:17px}.brand-mark{border-radius:5px}.nav,.header-link{font-family:var(--mono);font-size:11px}
.hero{padding:58px 0 48px;min-height:0;display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:center;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(32px,3.5vw,49px);line-height:1.09;letter-spacing:-.045em;margin:18px 0 22px}.hero h1 em{color:var(--ink)}
.hero .intro{font-size:15px;line-height:1.8;max-width:470px}.hero .actions{margin-top:26px;gap:22px}.hero .hero-note{margin-top:22px;font:9px/1.8 var(--mono);color:#7f9086}
.eyebrow{font-size:9px;letter-spacing:.12em;color:var(--accent)}.hero .btn{background:var(--ink);color:#18201a;border-radius:4px;font:600 11px var(--mono)}.hero .btn:hover{background:var(--accent)}.actions .text-link,.capri-home-cta{font:10px var(--mono)}
.identity-terminal{border:1px solid #445248;border-radius:8px;background:linear-gradient(135deg,#242e27,#101713 65%);padding:0 24px 22px;box-shadow:0 16px 50px #0003,inset 0 0 0 4px #111813;font-family:var(--mono);position:relative;transform:perspective(1000px) rotateY(-4deg)}
.identity-terminal::after{content:"";position:absolute;inset:4px;pointer-events:none;border-radius:5px;background:repeating-linear-gradient(0deg,#00000018 0 1px,transparent 1px 4px)}
.terminal-top{font:9px var(--mono);color:#8eaa95;border-bottom:1px solid #405046;display:flex;justify-content:space-between;align-items:center;padding:17px 0;position:relative;z-index:1}.terminal-led{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #adeda355}
.terminal-command{font:15px/1.8 var(--mono);color:var(--accent);margin:30px 0 28px;max-width:280px}.terminal-command>span:first-child{color:#688d70}.cursor{color:var(--amber)}
.terminal-route{display:flex;align-items:center;justify-content:space-between;font:8px var(--mono);color:var(--ink);gap:8px;padding:15px 0;border-block:1px solid #344b3c}.terminal-route i{color:var(--amber);font-style:normal}.identity-terminal>a{display:flex;justify-content:space-between;font:10px var(--mono);padding:24px 0 0;position:relative;z-index:2;color:var(--ink)}.identity-terminal>a:hover{color:var(--accent)}.terminal-foot{font:8px var(--mono);letter-spacing:.1em;color:#788e7f;margin-top:22px}
.projects{padding:0;margin:0 0 40px}.section-heading{margin:38px 0 22px}.section-heading h2{font-size:30px;letter-spacing:-.04em;line-height:1.2}.section-aside{font:8px/1.9 var(--mono);color:#819087}
.station{border:1px solid #4a554d;background:linear-gradient(130deg,#242a26,#131714 75%);border-radius:10px;padding:6px;box-shadow:0 24px 70px #0004,inset 0 1px #ffffff10;scroll-margin-top:24px}
.station-header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 25px;border:1px solid #364038;border-radius:5px 5px 0 0;background:linear-gradient(#242b25,#1b221d);position:relative}.station-header::before,.station-header::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;border:1px solid #566159;background:linear-gradient(135deg,#101713 40%,#616b62 44% 54%,#151d17 58%);top:7px}.station-header::before{left:7px}.station-header::after{right:7px}
.station-id{font:8px var(--mono);letter-spacing:.15em;color:var(--accent)}.station-header h3{font:500 22px/1.3 var(--sans);letter-spacing:-.03em;margin-top:6px}.station-scope{font:8px var(--mono);letter-spacing:.07em;color:#aab5ab;display:flex;align-items:center;gap:7px}.station-scope i{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.station-viewport{height:470px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #364038;border-top:0;background:radial-gradient(ellipse at 50% 70%,#41523b40,transparent 60%),linear-gradient(180deg,#0a100c,#151c16);}
.station-viewport::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#839b8110 1px,transparent 1px),linear-gradient(90deg,#839b8110 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(transparent,#0008);z-index:-1}
.station-viewport::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#00000013 0 1px,transparent 1px 4px);box-shadow:inset 0 0 90px #0005;z-index:2}
#lab-canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;position:relative;z-index:1}#lab-canvas:active{cursor:grabbing}#lab-canvas[hidden]{display:none}
.viewport-label{position:absolute;left:25px;top:23px;display:flex;flex-direction:column;gap:7px;font:8px var(--mono);letter-spacing:.13em;color:#91a48f;pointer-events:none;z-index:3}.viewport-label span+span{color:#526e59;font-size:7px}
.viewport-tools{position:absolute;right:20px;top:19px;display:flex;gap:7px;z-index:3}.viewport-tools button{border:1px solid #354b3b;border-radius:3px;background:#0b140fbf;backdrop-filter:blur(8px);color:#b8c9b7;font:9px var(--mono);min-height:32px;padding:7px 10px}.viewport-tools button:hover{border-color:var(--accent);color:var(--accent)}
.station-stage-labels{position:absolute;left:4%;right:4%;bottom:32px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;z-index:3;pointer-events:none}.station-stage-labels>span{font:9px var(--mono);letter-spacing:.1em;color:#b3c0af;text-align:center}.station-stage-labels b{font-size:8px;color:#758c72;margin-right:8px;font-weight:400}
.station[data-phase="printing"] .station-stage-labels>span:first-child,.station[data-phase="reading"] .station-stage-labels>span:nth-child(2),.station[data-phase="done"] .station-stage-labels>span:last-child{color:var(--accent);text-shadow:0 0 10px #adeda340}
.orbit-hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:7px var(--mono);letter-spacing:.1em;color:#6d826e;z-index:3;pointer-events:none}
.station-readout{position:relative;border-inline:1px solid #364038;border-bottom:1px solid #364038;background:#101713;padding:19px 25px 21px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;min-height:85px}
.readout-main{display:flex;gap:15px;align-items:center}.readout-label{font:7px/1.7 var(--mono);letter-spacing:.1em;color:#8d9f8d;max-width:58px}.readout-main strong{font:24px/1 var(--mono);color:var(--ink);white-space:nowrap;letter-spacing:-.06em}.signal-pill{font:8px var(--mono);padding:6px 9px;color:#a8b6a5;background:#263329;border:1px solid #3b4e3d;border-radius:3px;white-space:nowrap}
.station[data-signal="complete"] .signal-pill{color:var(--accent);border-color:#62885b}.station[data-signal="incomplete"] .signal-pill,.station[data-signal="incomplete_anomaly"] .signal-pill{color:#f1b18c;border-color:#815742}.station[data-signal="anomaly"] .signal-pill{color:#a8c8ec;border-color:#576e8b}
#lab-status{font:11px/1.7 var(--mono);color:#adb9ab;max-width:570px;justify-self:end}.station-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#263127;overflow:hidden}.station-progress i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 12px #adeda355;transition:width .5s ease}
.station-controls{display:flex;align-items:center;gap:20px;padding:15px 20px;background:#1c231d;border:1px solid #364038;border-top:0}.station-controls button,.manual-buttons button{font:10px var(--mono);min-height:40px;border:1px solid #465449;border-radius:4px;padding:11px 15px;color:#d3d9cc;background:linear-gradient(#2b352c,#202a23);box-shadow:0 2px 0 #060d08;white-space:nowrap}.station-controls button:hover,.manual-buttons button:hover{border-color:#8daf85;background:#354333}.station-controls button:disabled,.manual-buttons button:disabled{opacity:.4;cursor:default}.station-controls .lab-primary{color:#162018;background:linear-gradient(#c2e3b7,#9abf8d);border-color:#c8e9bc;min-width:145px;font-weight:600}.station-controls .lab-primary:hover{background:#c5edbc}.playback-controls{display:flex;gap:7px}.station-mode{font:7px var(--mono);letter-spacing:.12em;color:#849780;margin-left:auto}.station-controls .lab-experiment{background:#141d17;border-color:#3e5142}.lab-experiment>span{color:var(--accent);margin-left:12px}
.station-manual{padding:20px 24px;background:#111913;border:1px solid #364038;border-top:0}.station-manual[hidden]{display:none}.manual-intro{display:flex;align-items:center;gap:18px;margin-bottom:14px}.manual-intro>span{font:8px var(--mono);color:var(--amber);white-space:nowrap}.manual-intro p{font:10px/1.7 var(--mono);color:#93a58f}.manual-buttons{display:flex;gap:8px;flex-wrap:wrap}
.station-footer{display:flex;justify-content:space-between;gap:20px;padding:13px 21px 10px;font:8px/1.7 var(--mono);color:#889883}.station-footer>a{color:#b9c8af}.station-footer>a:hover{color:var(--accent)}
.station-fallback{position:absolute;inset:65px 25px 60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;color:var(--accent);font:13px/1.8 var(--mono);text-align:center}.station-fallback[hidden]{display:none}.station-fallback p{color:var(--muted);font-size:12px;max-width:420px}
.technical-panels{margin:26px 0 46px}.technical-caption{font:8px var(--mono);color:#97a98f;letter-spacing:.12em;margin:0 0 14px}.technical-caption>span{margin-left:16px;color:#677d69;font-size:8px;letter-spacing:0}
.technical-panel{border:1px solid #344138;border-radius:5px;margin-bottom:9px;background:#131a15;overflow:hidden}.technical-panel>summary{list-style:none;display:flex;gap:18px;align-items:center;padding:20px 23px;cursor:pointer;font:13px var(--mono);color:var(--ink);min-height:73px}.technical-panel>summary::-webkit-details-marker{display:none}.technical-panel>summary:hover{background:#1c271f}.technical-panel[open]>summary{border-bottom:1px solid #3c4f40}.technical-panel small{display:block;font:9px/1.6 var(--mono);color:#8c9e86;margin-top:6px}.technical-number{font:9px var(--mono);color:#9ab294;align-self:flex-start;padding-top:4px}.details-indicator{margin-left:auto;font-size:19px;color:#8d9f88}.technical-panel[open]>summary .details-indicator{transform:rotate(45deg)}
.technical-panel .project{margin:0;border:0;border-radius:0;background:#171e19}.technical-panel .project-copy{padding:30px}.technical-panel .project-description,.technical-panel .feature-list{font-size:12px}.technical-panel .case-study{margin:0 24px 24px}.technical-panel .project h3{font-size:31px}.technical-panel .subtitle{font-size:21px}.technical-panel .reader-demo{margin:0 24px 24px}.technical-panel .demo-panel{min-width:0;border-radius:4px}.technical-panel[open]{overflow:visible}.technical-panel .authorship{font-size:8px}
.rio-project{padding:28px 0 0!important;margin:0!important;border:0!important;background:transparent!important}.rio-intro{gap:30px!important;margin-bottom:22px!important}.rio-intro h3{font-size:36px!important}.rio-intro .subtitle{display:none}.rio-intro-copy .project-description{font-size:12px;line-height:1.8;max-width:520px}.rio-intro .tags,.rio-intro .authorship{display:none}.rio-fold{margin-top:20px}.rio-fold .rio-workspace{margin:0;border:0;border-radius:0}.rio-fold .rio-evidence{padding-inline:24px}
.secondary-details{border-block:1px solid var(--line);padding:18px 0;margin-top:-1px}.secondary-details>summary{cursor:pointer;font:11px var(--mono);color:#b0bdae;padding:8px 0}.secondary-details .engineering,.secondary-details .contributions{padding:20px 0;margin:0}.secondary-details .section-heading{display:none}.secondary-details .engineering-grid{margin-top:14px}
.about{padding:36px 0!important;margin:0!important}.about h2{font-size:27px}.about-copy{font-size:13px;line-height:1.9}.about-copy .process{display:none}.contact{background:#c8d4bd;color:#182018;border:1px solid #e4ead6;border-radius:6px;padding:30px!important;margin-top:10px}.contact h2{font-size:31px}.contact-links a{font-family:var(--mono);font-size:11px}.contact .eyebrow{color:#53634a}.footer{font:8px var(--mono);margin-top:30px;padding:25px 0}
#capri-helper{--capri-green:#adeda3;--capri-red:#dfb16c;--capri-violet:#9b8bb8}.capri-guide{background:#18201b;border-color:#5c705a;border-top-color:var(--capri-green);box-shadow:5px 5px 0 #080e0a80,0 18px 65px #0008}.capri-guide-header,.capri-guide-footer{border-color:#3e5140}#capri-helper .capri-guide-actions button,#capri-helper .capri-guide-actions a{background:#263329;border-color:#53694c;color:#e7e4d8}#capri-helper .capri-guide-actions .capri-primary{background:#adeda3;color:#152319}.capri-guide-copy,.capri-guide-footer span{color:#b6c1ad}.capri-bubble{background:#17231b;border-color:#536c4e;box-shadow:3px 3px 0 #75936b25}#capri-helper .capri-dock-controls button{background:#1b261d;border-color:#52624a;color:#d0dbc5}
@media(min-width:1700px){.station-viewport{height:520px}}
@media(max-width:1000px){.hero{gap:32px}.identity-terminal{padding-inline:19px}.terminal-command{font-size:13px}.station-viewport{height:400px}.station-mode{display:none}.station-readout{grid-template-columns:1fr;gap:10px}#lab-status{justify-self:start}.readout-main{gap:15px}.hero h1{font-size:36px}.section-heading h2{font-size:28px}}
@media(max-width:760px){.wrap{width:calc(100% - 32px)}.hero{grid-template-columns:1fr;padding:35px 0 30px;gap:28px}.hero h1{font-size:clamp(29px,7.9vw,43px);line-height:1.1;margin:15px 0 20px}.hero .intro{font-size:13px}.hero .actions{gap:18px;margin-top:22px}.hero .hero-note{font-size:8px;max-width:260px}.identity-terminal{transform:none;max-width:none}.terminal-top{padding:12px 0;font-size:8px}.terminal-command{margin:19px 0;font-size:13px;max-width:none}.terminal-route{padding:12px 0}.identity-terminal>a{padding-top:17px}.terminal-foot{margin-top:14px;font-size:7px}.header{min-height:64px}.brand{font-size:14px}.nav{gap:11px;font-size:8px}.header-link{display:none}.section-heading{margin:30px 0 18px}.section-heading h2{font-size:27px}.section-aside{display:none}.station{padding:4px;border-radius:7px}.station-header{padding:17px 15px;gap:10px}.station-header h3{font-size:19px}.station-scope{font-size:6px;letter-spacing:0;max-width:60px;line-height:1.7}.station-id{font-size:7px}.station-viewport{height:310px}.viewport-label{top:15px;left:13px;font-size:6px;max-width:85px;line-height:1.5}.viewport-label span+span{font-size:6px}.viewport-tools{top:13px;right:10px;gap:4px}.viewport-tools button{font-size:8px;padding:6px 8px;min-height:32px}.viewport-tools button:first-child span{display:none}.station-stage-labels{bottom:30px;left:2%;right:2%;gap:4px}.station-stage-labels>span{font-size:6px;letter-spacing:0}.station-stage-labels b{font-size:6px;margin-right:3px}.orbit-hint{font-size:6px}.station-readout{padding:17px 14px 18px;gap:13px}.readout-main{gap:13px;flex-wrap:wrap}.readout-main strong{font-size:24px}.readout-label{font-size:6px}.signal-pill{font-size:7px;margin-left:auto;padding:6px}#lab-status{font-size:10px;line-height:1.7}.station-controls{padding:12px 10px;gap:6px;flex-wrap:wrap;justify-content:space-between}.station-controls button{font-size:9px;min-height:39px;padding:9px 11px}.station-controls .lab-primary{min-width:112px}.playback-controls{gap:5px}.playback-controls #lab-replay{padding:9px 10px}.playback-controls #lab-replay>span{display:none}.station-controls .lab-experiment{padding-inline:10px}.lab-experiment>span{margin-left:4px}.station-footer{font-size:6px;padding:11px 10px 8px;gap:12px}.station-manual{padding:18px 14px}.manual-intro{align-items:flex-start;flex-direction:column;gap:9px}.manual-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.manual-buttons button{font-size:8px;white-space:normal;padding:10px 8px;min-height:42px}.technical-panels{margin:22px 0 30px}.technical-caption{font-size:7px;line-height:1.7;letter-spacing:.05em}.technical-caption>span{font-size:7px;margin-left:10px}.technical-panel>summary{padding:17px 14px;font-size:12px;gap:13px}.technical-panel small{font-size:8px}.technical-number{font-size:8px}.technical-panel .project-copy{padding:23px 18px}.technical-panel .reader-demo{margin:0 12px 18px}.technical-panel .case-study{margin:0 16px 16px}.technical-panel .project h3{font-size:28px}.technical-panel .bio-workspace{grid-template-columns:1fr}.technical-panel .project-links{flex-wrap:wrap}.rio-intro{grid-template-columns:1fr!important;gap:18px!important}.rio-intro h3{font-size:30px!important}.rio-intro-copy .project-description{font-size:11px}.rio-fold .rio-workspace{padding:0}.about{padding:30px 0!important}.about h2{font-size:26px}.about-copy{font-size:12px}.contact{padding:24px!important}.contact h2{font-size:27px}.footer{font-size:7px;line-height:1.8;gap:14px}}
@media(prefers-reduced-motion:reduce){.station *,.identity-terminal *{transition:none!important;animation:none!important}.station-viewport::after{background:none}}
/* On phones, give the working scene priority over the decorative terminal. */
@media(max-width:760px){.identity-terminal{display:none}.station-stage-labels>span{font-size:8px}.station-stage-labels b{font-size:7px}.station-controls button{font-size:10px}.station-footer{flex-direction:column;gap:3px;font-size:8px;padding:11px 12px}.station-footer>a{font-size:10px;min-height:32px;display:flex;align-items:center}.manual-buttons button{font-size:10px}}
.technical-panel>summary{width:100%;max-width:none}
@media(max-width:760px){.header{flex-wrap:wrap;padding-block:14px;row-gap:12px}.header .nav{order:2;width:100%;justify-content:space-between;flex-wrap:wrap}.header .about-nav{display:inline}}
/* The beacon and readout share the same presentation color during each pass. */
.station{--beacon-color:#a4aea7}.station[data-light="white"]{--beacon-color:#f2f7ff}.station[data-light="red"]{--beacon-color:#ff6a61}.station[data-light="blue"]{--beacon-color:#65aaff}.station[data-light="green"]{--beacon-color:#69ff93}
.station[data-light] .signal-pill{color:var(--beacon-color);border-color:var(--beacon-color);box-shadow:0 0 16px color-mix(in srgb,var(--beacon-color) 16%,transparent);font-size:10px}
.station[data-light] .signal-pill::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;background:var(--beacon-color);box-shadow:0 0 9px var(--beacon-color)}
.station[data-light] .station-readout{border-bottom-color:var(--beacon-color)}.station[data-light] .station-progress i{background:var(--beacon-color);box-shadow:0 0 14px var(--beacon-color)}
.station[data-light="white"] .station-viewport{box-shadow:inset 0 -18px 50px #ecf5ff0a}.station[data-pass-stage="reading"] .station-stage-labels>span:nth-child(2){color:#fff;text-shadow:0 0 10px #fff6}
@media(max-width:760px){.station[data-light] .signal-pill{font-size:9px}}