@charset "UTF-8";
:root { color-scheme:dark; --paper:#102a2b; --ink:#e7eddf; --muted:#9bb0a7; --line:#ffffff20; --accent:#dbe8a0; --world:#102a2b; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
body[data-scene="membrane"] { --paper:#17252e; --world:#17252e; --accent:#cbbeef; --muted:#a4adbF; }
body[data-scene="neural"] { --paper:#292925; --world:#292925; --accent:#f6c085; --muted:#b7b4a4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button,select { touch-action:manipulation; }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,canvas:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button { color:inherit; }
[hidden] { display:none !important; }
.skip { position:fixed; z-index:8; top:-70px; padding:14px; color:var(--paper); background:var(--accent); }
.skip:focus { top:8px; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 26px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; font:18px var(--serif); letter-spacing:-.3px; flex-shrink:0; }
.brand-sub { display:block; font:9px var(--mono); letter-spacing:2.1px; margin-top:5px; }
.brand-mark { width:37px; height:38px; position:relative; transform:rotate(-18deg); }
.brand-mark i { position:absolute; border:1.3px solid var(--ink); width:18px; height:32px; border-radius:50%; left:10px; top:3px; }
.brand-mark i:nth-child(2) { transform:rotate(60deg); }
.brand-mark i:nth-child(3) { transform:rotate(120deg); }
.world-nav { display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--line); }
.world-nav button { border:0; background:none; padding:12px 22px 15px; position:relative; font-size:13px; }
.world-nav button span { font:10px var(--mono); margin-right:8px; color:var(--muted); }
.world-nav button[aria-pressed="true"]::after { content:""; position:absolute; bottom:-1px; left:14px; right:14px; height:2px; background:var(--ink); }
.world-nav button:hover { background:#ffffff08; }
.header-tools { display:flex; align-items:center; gap:12px; }
.audio-toggle { background:none; border:1px solid var(--line); padding:8px 10px; font:10px var(--mono); white-space:nowrap; }
.audio-toggle[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
.volume-control { width:58px; }
.source-button { border:0; padding:12px 0 12px 12px; background:none; font-size:12px; white-space:nowrap; }
.source-button span { padding-left:10px; }
main { margin:0; }
.stage { position:relative; isolation:isolate; height:clamp(620px,calc(100svh - 260px),1000px); min-height:620px; color:#edeede; background:var(--world); overflow:hidden; }
.stage[data-scene="membrane"] { --accent:#cbbeef; --world:#17252e; }
.stage[data-scene="neural"] { --accent:#f6c085; --world:#292925; }
.stage::after { content:""; position:absolute; inset:0; pointer-events:none; }
.stage-grain { position:absolute; inset:0; z-index:2; opacity:.08; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' opacity='.25' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.stage-heading { position:absolute; z-index:3; top:20px; left:28px; max-width:70%; pointer-events:none; }
.eyebrow { font:10px var(--mono); letter-spacing:1.7px; color:var(--accent); }
h1 { font:28px/1.1 var(--serif); letter-spacing:-.5px; font-weight:400; margin:9px 0 0; }
h1 em { color:var(--accent); font-weight:400; }
.world-sub { max-width:245px; font:12px/1.7 Arial,sans-serif; color:#c0cec5; }
.kind { display:flex; align-items:flex-start; gap:7px; font:8px/1.7 var(--mono); letter-spacing:.55px; color:#c0cec5; margin-top:8px; max-width:400px; }
.kind-light { flex:0 0 5px; height:5px; border-radius:50%; background:var(--accent); margin-top:4px; }
#world { display:block; width:100%; height:100%; position:absolute; inset:0; touch-action:pan-y; cursor:crosshair; }
.current-grip { position:absolute; z-index:4; width:48px; height:48px; border:1px solid #cbbeef44; border-radius:50%; cursor:ns-resize; touch-action:none; }
.current-grip:hover { background:#cbbeef0b; }
.current-grip:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.scene-stamp { position:absolute; right:29px; top:26px; display:flex; gap:10px; align-items:center; opacity:.65; pointer-events:none; }
.scene-stamp>span:first-child { font:39px var(--serif); }
.scene-stamp>span:last-child { font:7px/1.5 var(--mono); letter-spacing:1.5px; }
.scene-note { position:absolute; top:25px; right:28px; font:9px var(--mono); letter-spacing:.4px; color:var(--muted); pointer-events:none; }
.stage-heading .eyebrow { padding-top:3px; }
.scene-bottom { position:absolute; top:98px; left:28px; right:28px; display:flex; justify-content:flex-end; align-items:center; gap:12px; z-index:3; pointer-events:none; }
.scene-bottom p { margin:0; color:#cad8cd; font:10px var(--mono); }
.scene-bottom p span { padding-left:8px; color:var(--accent); }
.scene-legend { display:flex; gap:17px; font:9px var(--mono); color:#cad8cd; }
.scene-legend>span { display:flex; align-items:center; gap:7px; }
.line-key { display:block; width:16px; height:1px; background:var(--accent); }
.dot-key { width:4px; height:4px; border:1px solid #e9eddb; border-radius:50%; }
.cross-key { font:15px var(--mono); color:#c6926d; font-style:normal; }
.hover-note { position:absolute; z-index:5; background:var(--paper); color:var(--ink); padding:9px 12px; max-width:230px; font:10px/1.6 var(--mono); pointer-events:none; box-shadow:0 3px 12px #0002; }
.bench { padding:0 28px; border-top:1px solid var(--line); }
.readouts { position:absolute; z-index:3; bottom:0; left:28px; right:28px; display:flex; align-items:center; gap:52px; padding:16px 0 20px; border-top:1px solid var(--line); pointer-events:none; }
.readout-label { display:block; font:9px var(--mono); letter-spacing:1px; color:var(--muted); margin-bottom:6px; }
.readout>div { display:flex; align-items:baseline; gap:8px; }
.readout output { font:39px/.95 var(--serif); letter-spacing:-1.2px; }
.readout.primary output { min-width:74px; }
.readout-unit { font:11px var(--mono); }
.result-state { margin-left:auto; display:grid; grid-template-columns:20px 1fr; gap:4px 9px; font-size:11px; }
.result-state .state-symbol { grid-row:1/3; font-size:23px; color:var(--accent); }
#result-detail { font:9px var(--mono); color:var(--muted); max-width:290px; }
.experiment { display:flex; align-items:center; flex-wrap:wrap; gap:15px 24px; padding:16px 0 8px; }
.control-block { flex:1 1 135px; min-width:110px; }
.control-block label,fieldset legend { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; font:8px var(--mono); letter-spacing:.65px; color:var(--muted); }
.control-block output { color:var(--ink); white-space:nowrap; }
.selection { flex:1.15; }
.temperature-block { flex:1.7; }
select { width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink); background:transparent; padding:5px 24px 7px 0; font-size:12px; }
select option { background:var(--world); color:var(--ink); }
input[type="range"] { display:block; width:100%; height:24px; appearance:none; -webkit-appearance:none; margin:0; background:transparent; cursor:pointer; accent-color:#234c3e; }
input[type="range"]::-webkit-slider-runnable-track { height:2px; background:var(--line); }
input[type="range"]::-moz-range-track { height:2px; background:var(--line); }
input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:-4px; border:0; }
input[type="range"]::-moz-range-thumb { width:10px; height:10px; border-radius:50%; background:var(--accent); border:0; }
.range-ends { display:flex; justify-content:space-between; margin-top:5px; font:8px var(--mono); color:var(--muted); }
fieldset { border:0; margin:0; padding:0; }
.model-control { flex:1.3; min-width:255px; }
.segmented { display:flex; gap:1px; border:1px solid var(--line); padding:3px; }
.segmented button { font-size:10px; border:0; flex:1; background:transparent; padding:8px; }
.segmented button[aria-pressed="true"] { background:var(--accent); color:var(--paper); }
.quiet-toggle { display:flex; align-items:center; gap:7px; font-size:10px; border:0; background:transparent; padding:10px 0; white-space:nowrap; }
.toggle-check { display:block; border:1px solid var(--line); width:14px; height:14px; font:10px/13px Arial,sans-serif; text-align:center; color:transparent; }
.quiet-toggle[aria-pressed="true"] .toggle-check { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.transport { display:flex; gap:15px; align-items:center; padding:9px 12px 17px; }
.motion-toggle { background:transparent; border:1px solid var(--line); padding:7px 11px; font-size:10px; display:flex; gap:9px; align-items:center; min-width:84px; }
#motion-icon { font:13px var(--mono); width:10px; text-align:center; }
#transport-label { font:8px var(--mono); color:var(--muted); letter-spacing:.9px; }
.transport-track { flex:1; height:1px; background:var(--line); }
.transport-track span { display:block; height:1px; width:44%; background:var(--ink); transition:none; }
.reset { font:10px var(--mono); border:0; background:transparent; padding:7px 0 7px 15px; }
.reset span { padding-left:5px; }
footer { margin:0 28px; padding:9px 0 14px; display:flex; justify-content:flex-end; font:8px var(--mono); letter-spacing:.6px; color:var(--muted); }
footer>span { font:8px var(--mono); letter-spacing:.6px; }
dialog { max-width:540px; width:calc(100% - 32px); border:0; background:var(--paper); color:var(--ink); padding:30px 34px; box-shadow:0 20px 90px #0005; }
dialog::backdrop { background:#0b242bcc; backdrop-filter:blur(5px); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.dialog-head .eyebrow { color:var(--muted); font-size:8px; }
.dialog-head button { border:0; background:transparent; font-size:26px; padding:0 4px; }
h2 { font:38px var(--serif); font-weight:400; letter-spacing:-1px; margin:23px 0 18px; }
dialog p { font-size:12px; line-height:1.8; }
#source-citation { color:var(--accent); font-size:11px; }
dialog a { display:inline-block; margin:15px 0; color:var(--ink); font:11px var(--mono); text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:4px; }
dialog a span { padding-left:12px; }
dialog dl { font:9px/1.8 var(--mono); overflow-wrap:anywhere; }
dialog dt { color:var(--muted); margin-top:10px; }
dialog dd { margin-left:0; }
.source-local { color:var(--muted); border-top:1px solid var(--line); padding-top:12px; font:9px var(--mono); }
.share-link { display:block; font:10px var(--mono); margin-top:20px; }
.share-link input { display:block; width:100%; margin-top:8px; background:transparent; color:var(--ink); border:1px solid var(--line); padding:12px; font:10px var(--mono); }
#share-status { overflow-wrap:anywhere; color:var(--muted); }
@media (max-width:520px) { .header-tools { flex-wrap:wrap; justify-content:flex-end; } .volume-control { display:none; } .source-button { font-size:8px; } .masthead { gap:8px; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.noscript { padding:24px; }
@media (min-width:1600px) { .experiment { gap:18px 32px; } }
@media (max-width:1100px) { .masthead { gap:12px; padding:12px 22px; } .world-nav button { padding:12px 14px; } .model-control { min-width:220px; } .readouts { gap:35px; } .volume-control { width:45px; } }
@media (max-width:850px) { .brand { font-size:18px; } .world-nav button { font-size:11px; padding:10px 11px; } .world-nav button span { display:none; } .masthead { flex-wrap:wrap; padding:12px 18px; } .header-tools { margin-left:auto; gap:8px; } .world-nav { order:3; width:100%; justify-content:center; margin-top:2px; } .world-nav button { flex:1; } .stage { min-height:640px; height:calc(100svh - 145px); } .stage-heading { top:20px; left:22px; } h1 { font-size:26px; } .kind { font-size:7px; } .scene-note { right:22px; top:22px; font-size:8px; } .scene-bottom { left:22px; right:22px; top:98px; bottom:auto; } .scene-legend { font-size:8px; } .bench { padding:0 22px; } .readouts { left:22px; right:22px; gap:24px; flex-wrap:wrap; } .readout output { font-size:33px; } .result-state { margin-left:0; font-size:10px; } .experiment { gap:18px 24px; } .control-block { flex:1 1 28%; } .model-control { flex:1; min-width:230px; } .speed-block { min-width:90px; } .scrub-block { flex:1 1 40%; } }
@media (max-width:520px) { .brand-mark { width:28px; height:30px; transform:scale(.75); } .brand { font-size:16px; gap:6px; } .volume-control { width:40px; } .audio-toggle { font-size:8px; padding:8px; } .source-button { font-size:9px; padding-left:4px; } .source-button span { padding-left:2px; } .stage { min-height:650px; } .stage-heading { left:18px; } h1 { font-size:24px; } .kind { max-width:265px; } .scene-note { right:18px; font-size:7px; } .scene-bottom { left:18px; right:18px; top:98px; bottom:auto; justify-content:flex-start; } .scene-legend { gap:12px; } .readouts { left:18px; right:18px; gap:20px; } .readout-label { font-size:7px; } .readout output { font-size:31px; } .readout-unit { font-size:9px; } .result-state { width:100%; grid-template-columns:18px 1fr; } #result-detail { max-width:100%; } .readout.primary output { min-width:66px; } .bench { padding:0 18px; } .experiment { gap:16px 20px; } .control-block,.selection { flex:1 1 42%; min-width:120px; } .temperature-block,.scrub-block { flex:1 1 100%; } .model-control { min-width:0; flex:1 1 100%; } .quiet-toggle { margin-left:0; } .control-block label,fieldset legend { font-size:7px; letter-spacing:.4px; } .segmented button { font-size:11px; } .transport { gap:10px; padding:12px 0 16px; } #transport-label { font-size:7px; letter-spacing:.4px; } footer { font-size:7px; margin:0 18px; } dialog { padding:25px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation:none !important; transition:none !important; } }