@font-face{font-family:Gridnik;src:local('Foundry Gridnik'),url('../fonts/FoundryGridnik-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Gridnik;src:local('Foundry Gridnik Light'),url('../fonts/FoundryGridnik-Light.woff2') format('woff2');font-weight:300;font-display:swap}
:root{color-scheme:dark;--ink:#d8d8d8;--muted:#999;--line:#242424;--font:Gridnik,ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}body{margin:0;background:#000;color:var(--ink);font:12px/1.6 var(--font);height:100dvh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}button,select,input{font:inherit}button,select{color:var(--ink);background:#000;border:1px solid var(--line);border-radius:0;min-height:36px;padding:7px 11px}button{cursor:pointer;white-space:nowrap}button:hover,select:hover{border-color:#999}button[aria-pressed=true]{background:var(--ink);color:#000}button:disabled{opacity:.4;cursor:wait}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}p,h1,h2{margin:0}h2{font-size:11px;letter-spacing:.07em;font-weight:400}button,select{font-size:11px}select{max-width:100%}input[type=range]{width:100%;accent-color:#ddd;cursor:pointer;height:20px;margin:0}input:focus-visible,button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #ddd;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.skip{position:absolute;top:-100px;z-index:20;padding:12px;background:#ddd;color:#000}.skip:focus{top:0}
header{margin:0 30px;padding:23px 0 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:40px;flex-shrink:0}.identity a{font-size:14px;letter-spacing:.11em;border-bottom:1px solid #666;padding-bottom:6px}.identity a span{color:#888}.identity p{font-size:8px;letter-spacing:.2em;color:#999;margin-top:12px}.headline{flex:1}.headline h1{font-weight:300;font-size:28px;letter-spacing:.035em;line-height:1.3}.headline p{font-size:10px;color:#999;margin-top:4px}.model-picker{display:grid;gap:5px;width:262px}.model-picker>span{font-size:9px;letter-spacing:.16em;color:#999}.model-picker select{width:100%;font-size:12px}
main{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:24px;margin:0 30px;flex:1;min-height:0}.workspace{min-width:0;display:flex;flex-direction:column;position:relative}.scene-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0 5px}.eyebrow{font-size:10px;letter-spacing:.16em}.scene-top p{color:#999;font-size:10px;margin-top:6px}.view-actions{display:flex;gap:7px;flex-shrink:0}.view-actions button{font-size:10px}#view{position:relative;flex:1;min-height:260px;overflow:hidden}#view>canvas{display:block;width:100%;height:100%;touch-action:none}#scene-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.layer-label{position:absolute;text-align:center;transform:translate(-50%,0);font-size:9px;letter-spacing:.06em;white-space:nowrap;line-height:1.5;color:#aaa}.layer-label b{font-size:10px;font-weight:400;color:#ddd;display:block}.layer-label.active b{color:#fff}.layer-label.active:before{content:'';display:block;width:16px;height:1px;background:#eee;margin:0 auto 6px}.axis{position:absolute;left:0;top:22px;font-size:8px;letter-spacing:.12em;color:#777;pointer-events:none}.axis span{padding:0 9px;color:#444}.gesture{position:absolute;bottom:18px;left:0;font-size:9px;color:#999;pointer-events:none}#loading{position:absolute;inset:0;z-index:2;display:grid;place-content:center;padding:24px;text-align:center;background:rgba(0,0,0,.92);font-size:12px}
aside{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#333 #000;border-left:1px solid var(--line);padding:20px 0 20px 20px}aside section+section{margin-top:20px;padding-top:17px;border-top:1px solid var(--line)}.section-title{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}.section-title>span{font-size:9px;color:#999}#pad{display:block;width:100%;aspect-ratio:1;background:#050505;border:1px solid #333;touch-action:none;cursor:crosshair}.input-actions{display:flex;margin-top:8px;gap:5px}.input-actions button{padding:6px 8px;flex:1;font-size:9px}.micro{font-size:10px;color:#999;line-height:1.65;margin-top:8px}.prediction{display:flex;align-items:center;gap:18px}.prediction>strong{font-size:58px;font-weight:300;line-height:1;width:1.2ch}#bars{flex:1;display:grid;gap:3px}.bar{display:grid;grid-template-columns:10px 1fr 30px;gap:8px;align-items:center;font-size:9px;color:#999}.bar-track{background:#171717;height:3px}.bar-fill{height:100%;background:#777;width:0;}.bar.top{color:#fff}.bar.top .bar-fill{background:#eee}.bar>span:last-child{text-align:right}.inspector>p{font-size:11px;color:#aaa;line-height:1.75}.inspector-controls{display:grid;gap:8px;margin-top:12px}.inspector-controls label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;color:#aaa}.inspector-controls select{max-width:150px;min-height:32px;font-size:10px}.inspector-controls input{width:115px}#detail{width:100%;height:auto;display:block;margin-top:12px;border:1px solid var(--line)}.inspector .equation{font-size:10px;color:#ddd;padding-top:9px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}details{font-size:10px;color:#999;margin-top:12px}summary{cursor:pointer;min-height:32px;display:list-item}details p{margin-top:8px}footer{border-top:1px solid var(--line);margin:0 30px;min-height:40px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:8px;color:#999;flex-shrink:0;letter-spacing:.06em}.telemetry{display:flex;gap:20px}.credit{color:#ddd}
@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 290px}.model-picker{width:290px}aside{padding-left:24px}.scene-top{padding-top:24px}}
@media(max-width:1100px){header{gap:24px}.headline h1{font-size:23px}.headline p{max-width:220px}.scene-top p{max-width:260px}}
@media(max-width:760px){body{height:auto;min-height:100dvh}header{margin:0 16px;padding:18px 0;gap:14px;flex-wrap:wrap}.identity{flex:1}.identity a{font-size:12px}.headline{display:none}.model-picker{width:175px}.model-picker select{font-size:12px}main{display:flex;flex-direction:column;margin:0 16px;gap:0}.scene-top{padding-top:18px;align-items:flex-start}.scene-top p{max-width:190px;font-size:9px}.eyebrow{font-size:9px}.view-actions{gap:4px}.view-actions button{font-size:9px;padding:5px 7px;min-height:44px}#view{height:42vh;min-height:300px;flex:none}.gesture{font-size:8px;max-width:240px;bottom:8px}aside{overflow:visible;border-left:0;border-top:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}aside section+section{margin:0;padding:0;border:0}aside .inspector{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}.prediction{gap:10px}.prediction>strong{font-size:42px}.prediction-section .section-title{flex-wrap:wrap}.prediction{align-items:flex-start}#bars{gap:7px}#input-note{font-size:9px}.input-actions{flex-wrap:wrap}.input-actions button{min-height:44px;min-width:44px}.input-actions button:first-child{flex-basis:100%}.inspector-controls{grid-template-columns:1fr 1fr}.inspector-controls label{flex-direction:column;align-items:flex-start}.inspector-controls select{min-height:44px;max-width:100%;width:100%}#detail{max-width:420px}.inspector .equation{font-size:12px}footer{margin:0 16px;padding:13px 0;flex-direction:column;align-items:flex-start;gap:8px}.telemetry{flex-wrap:wrap;gap:12px}select{font-size:16px}input[type=range]{height:32px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.workspace{min-height:0}#view>canvas{position:absolute;inset:0}.scene-top{flex-shrink:0}.channel-label{position:absolute;font-size:9px;color:#aaa;transform:translateY(-100%);white-space:nowrap}

#scene-labels,.axis,.gesture{z-index:1}#pad{max-width:210px;margin-inline:auto}@media(max-width:760px){#pad{max-width:none}}
/* Keep drawing and prediction side by side; details expand below them. */
@media(min-width:761px){main{grid-template-columns:minmax(0,1fr) 340px}.model-picker{width:340px}aside{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:20px 16px}aside section+section{margin:0;padding:0;border:0}aside .inspector{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}.prediction-section .section-title{flex-wrap:wrap}.prediction{display:block}.prediction>strong{display:block;font-size:46px;margin:8px 0 16px}.bar{grid-template-columns:9px 1fr 28px;gap:5px}.input-actions{flex-wrap:wrap}.input-actions button:first-child{flex-basis:100%}.input-actions button{min-height:32px;padding:5px 4px}.inspector-controls{grid-template-columns:1fr 1fr;gap:12px}.inspector-controls label{flex-direction:column;align-items:flex-start;gap:5px}.inspector-controls input{width:100%}.inspector-controls select{width:100%;max-width:none}.inspector>p{font-size:12px}#detail{margin-top:15px}.micro{font-size:10px}}
@media(min-width:1600px){main{grid-template-columns:minmax(0,1fr) 360px}.model-picker{width:360px}}

.inspector{margin:0;border-top:1px solid var(--line);padding-top:18px;grid-column:1/-1}
.inspector>summary{font-size:11px;letter-spacing:.04em;color:var(--ink);min-height:44px}
.layer-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}
.layer-picker select{flex:1;min-width:0}.inspector #focus{margin-bottom:12px}