:root{color-scheme:dark;--bg:#05090c;--text:#e1d9c8;--muted:#93a09a;--cyan:#83d9cf;--gold:#e3b57e;--line:#80968b28;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--serif:Georgia,'Iowan Old Style',serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}
body{font:14px/1.6 system-ui,sans-serif}
button,input{font:inherit}
button{color:inherit;cursor:pointer;border:1px solid var(--line);background:#081013bd;border-radius:99px;padding:8px 15px;transition:color .15s,border-color .15s,background .15s}
button:hover{color:#fff2da;border-color:#b1cab565;background:#102021b3}
button:disabled{opacity:.32;cursor:default}
button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:1px solid var(--cyan);outline-offset:5px}
button[aria-pressed=true]{color:var(--cyan);border-color:#83d9cf88;background:#102423bd}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}
.artwork,.view{position:absolute;inset:0}
.view canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.masthead{position:absolute;inset:27px 32px auto;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:2}
h1{font:400 32px/1 var(--serif);letter-spacing:-.055em;margin:0;color:#e1d9c8c9;text-shadow:0 1px 20px var(--bg)}
.masthead button{pointer-events:auto}
.quiet{border-color:transparent;background:transparent;font:11px var(--mono);color:var(--muted);padding:10px 0}
.quiet:hover{color:var(--text);background:transparent;border-color:transparent}
.interior{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.feeling{display:grid;grid-template-columns:1fr auto;gap:7px 4px;margin:0 0 22px;font:10px/1.4 var(--mono);color:#c5ac89;letter-spacing:.025em;text-shadow:0 1px 10px var(--bg)}
.feeling output{font-size:8px;opacity:.65;align-self:center}
.feeling:nth-child(2){color:#91bcb0}.feeling.danger{color:#b68f7e}
.meter{grid-column:1/-1;height:1px;background:#b4c1a918}
.meter i{display:block;width:0;height:100%;background:var(--gold);box-shadow:0 0 9px #e3b57e88;transition:width .18s}
.feeling:nth-child(2) .meter i{background:var(--cyan);box-shadow:0 0 9px #83d9cf66}.danger .meter i{background:#c88e7a}
.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:230px;padding:27px 24px;text-align:center;background:#05090cdb;border:1px solid #80968b22;border-radius:3px;backdrop-filter:blur(12px)}
.loading[hidden]{display:none}
.loading-title{font:italic 23px/1.4 var(--serif);color:var(--text);margin:0 0 20px}
#load{font:11px var(--mono);color:var(--cyan);border-color:#83d9cf55;padding:10px 18px;margin:18px auto 0}
#load[hidden]{display:none}
#progress{font:9px/1.6 var(--mono);color:var(--muted);margin-top:12px;overflow-wrap:anywhere}
#progress:empty{display:none}
.progress-track{height:1px;background:var(--line);margin:0 auto;width:140px}
#progress-bar{height:100%;width:0;background:var(--cyan);transition:width .2s}
.interaction{position:absolute;left:50%;bottom:27px;transform:translateX(-50%);z-index:3}
.hint{text-align:center;font:italic 14px/1.5 var(--serif);letter-spacing:.01em;color:#b3b6a688;margin:0 0 18px;transition:opacity 1.5s;pointer-events:none}
body.has-touched .hint{opacity:0}
.controls{display:flex;align-items:center;gap:24px;padding:13px 17px;background:#071012ba;border:1px solid var(--line);border-radius:99px;backdrop-filter:blur(14px);box-shadow:0 8px 30px #0002}
.controls label{display:flex;align-items:center;gap:13px;white-space:nowrap;font:10px var(--mono);color:#a9b8ad}
input[type=range]{appearance:none;width:88px;height:18px;background:transparent;cursor:pointer;margin:0;accent-color:var(--cyan)}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:#6d8e8388}
input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:#c7dfcf;border:0;margin-top:-4px;box-shadow:0 0 10px #9bdccc20}
input[type=range]::-moz-range-track{height:1px;background:#6d8e8388}
input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#c7dfcf;border:0}
.controls #auto{font:10px var(--mono);padding:6px 10px;border-color:#667e7244;background:transparent}
.keyboard-touch{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.keyboard-touch:focus-visible{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);width:auto;height:auto;clip-path:none;overflow:visible}
.keyboard-touch span{opacity:.55;margin-left:10px}
dialog{color:var(--text);background:#081013ed;border:1px solid #667e7240;border-radius:4px;padding:34px;width:min(490px,calc(100vw - 32px));max-height:calc(100svh - 64px);overflow:auto;backdrop-filter:blur(25px);box-shadow:0 20px 100px #0007;scrollbar-color:#52655b transparent}
dialog::backdrop{background:#0008;backdrop-filter:blur(5px)}
dialog h2{font:400 40px/1.15 var(--serif);letter-spacing:-.055em;margin:0 0 20px}
dialog p{font:15px/1.75 var(--serif);color:#b8c1b3;margin:0 0 17px}
dialog .eyebrow{font:8px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8fab9c;margin:0 0 9px}
.close{position:absolute;top:13px;right:19px;font:25px/1 system-ui,sans-serif;width:30px;height:30px;padding:0!important}
.about-links{display:flex;justify-content:space-between;margin-top:28px;font:10px var(--mono)}
.instruments{border-block:1px solid var(--line);margin:27px 0 0;padding:15px 0}
.instruments summary{cursor:pointer;font:10px var(--mono);color:#a6b5a7;list-style:none}
.instruments summary::-webkit-details-marker{display:none}
.instruments summary:after{content:'+';float:right;color:var(--cyan)}
.instruments[open] summary:after{content:'−'}
.instruments[open] summary{margin-bottom:20px}
.instruments p{font:12px/1.8 system-ui,sans-serif;color:#96a397}
.monitor{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:25px 0}
.scope>div{display:flex;justify-content:space-between;font:9px var(--mono);color:var(--muted)}
.scope b{color:var(--cyan);font-weight:400}.scope.reward b{color:var(--gold)}
.scope canvas{height:42px;width:100%;display:block;margin-top:12px}
.metrics{font:9px/1.8 var(--mono);color:var(--muted);margin:16px 0 8px}
.metrics>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px}.metrics dd{color:var(--text);margin:0}
.instruments .technical{font:9px/1.7 var(--mono);color:#70877a;margin:0 0 18px}
.bench-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font:9px var(--mono);padding-block:13px;border-block:1px solid var(--line)}
.bench-controls label{display:flex;align-items:center;gap:5px}.bench-controls input{accent-color:var(--cyan);margin:0}.bench-controls button{font-size:9px;padding:5px 9px}
.network-tools{display:flex;gap:9px;margin:18px 0}.network-tools button{font:9px var(--mono);padding:7px 10px}
.instruments .sources{display:flex;gap:16px;flex-wrap:wrap;font:9px/1.8 var(--mono);margin-top:24px}
.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}
@media(max-width:900px){.masthead{inset:25px 25px auto}}
@media(max-width:600px){.masthead{inset:23px 22px auto}h1{font-size:28px}.masthead .quiet{font-size:10px}.interior{gap:15px}.feeling{font-size:8px;gap:6px}.feeling output{font-size:7px}.interaction{bottom:max(20px,env(safe-area-inset-bottom));width:calc(100% - 34px)}.controls{padding:12px 14px;gap:15px;justify-content:center}.controls label{flex:1;gap:8px;font-size:8px;display:grid;grid-template-columns:1fr}.controls label span{color:#a9b8ad}.controls input[type=range]{width:100%;min-width:50px;height:16px}.controls #auto{font-size:9px;padding:7px 10px}.hint{font-size:13px;margin-bottom:14px}dialog{padding:28px;max-height:calc(100svh - 36px)}dialog h2{font-size:36px}dialog p{font-size:14px}}
@media(max-height:500px) and (min-width:601px){.masthead{inset:19px 24px auto}h1{font-size:25px}.interaction{bottom:18px}.hint{margin-bottom:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}