:root{--bg: #14120e;--surface: #1d1a15;--surface2: #242019;--line: #363126;--text: #e9e2d2;--dim: #93896f;--amber: #ffb547;--amber-deep: #e08a1e;--danger: #e06c4f;--ok: #9fc46a}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);font:13px/1.45 ui-monospace,SF Mono,Menlo,Consolas,monospace;overflow:hidden}#app{display:flex;height:100vh}#controls{width:380px;flex:none;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;padding:14px 14px 28px}#controls::-webkit-scrollbar{width:8px}#controls::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}#controls::-webkit-scrollbar-track{background:transparent}h1{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--amber);margin-bottom:2px}.sub{color:var(--dim);font-size:11px;margin-bottom:12px}fieldset{border:1px solid var(--line);border-radius:4px;padding:10px 10px 8px;margin-bottom:10px;min-inline-size:0}legend{padding:0 6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;gap:8px}.row:last-child{margin-bottom:2px}.row label{color:var(--dim);font-size:12px;white-space:nowrap}.row .val{color:var(--text);font-size:12px;min-width:56px;text-align:right}input[type=range]{flex:1;appearance:none;height:3px;background:var(--line);border-radius:2px;outline:none;min-width:50px}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--amber);cursor:pointer;border:2px solid var(--bg)}input[type=number]{width:62px;background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:3px;padding:3px 6px;font:inherit;text-align:right}input[type=number]:focus{border-color:var(--amber-deep);outline:none}select{width:100%;background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:3px;padding:5px 6px;font:inherit;margin-bottom:7px}button{background:var(--surface2);color:var(--text);border:1px solid var(--line);border-radius:3px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer}button:hover{border-color:var(--amber-deep)}button.primary{width:100%;background:var(--amber);color:#1a1206;font-weight:600;border:none;padding:8px;letter-spacing:.06em}button.primary:hover{background:#ffc670}button:disabled{opacity:.45;cursor:default}button.primary:disabled{background:var(--surface2);color:var(--dim);opacity:1}#stats{font-size:12px}#stats .srow{display:flex;justify-content:space-between;margin-bottom:4px}#stats .srow span:first-child{color:var(--dim)}.warn{color:var(--danger)}.good{color:var(--ok)}.hint{color:var(--dim);font-size:11px;margin-top:6px;line-height:1.45}.algOnly{display:none}.algOnly.show{display:flex}.flatOnly{display:none!important}body.flatMode .flatOnly.row{display:flex!important}body.flatMode .flatOnly.hint{display:block!important}body.flatMode .solidOnly{display:none!important}#stage{flex:1;display:flex;flex-direction:column;min-width:0}.box{position:relative;min-height:0}#threeBox{flex:1.25;border-bottom:1px solid var(--line)}#panelBox{flex:1;display:flex;align-items:center;justify-content:center;background:#100e0b}.tag{position:absolute;top:10px;left:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);pointer-events:none;z-index:2}#progress{position:absolute;top:10px;right:14px;font-size:11px;color:var(--amber);letter-spacing:.08em;z-index:2}.keyhelp{position:absolute;bottom:10px;left:14px;font-size:10px;color:var(--dim);pointer-events:none;z-index:2}#faceNav{position:absolute;bottom:10px;right:14px;z-index:2;display:flex;gap:6px;align-items:center}#faceNav span{color:var(--dim);font-size:11px}canvas{display:block}#viewToggle{position:absolute;top:8px;right:14px;z-index:2}.btnToggle{display:flex;gap:0}.btnToggle button{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:0}.btnToggle button:first-child{border-radius:3px 0 0 3px}.btnToggle button:last-child{border-radius:0 3px 3px 0}.btnToggle button.on{background:var(--amber);color:#1a1206;border-color:var(--amber)}.row2btns{display:flex;gap:6px;margin-top:8px}.row2btns button{flex:1}input[type=checkbox]{accent-color:var(--amber)}:focus-visible{outline:1px solid var(--amber-deep);outline-offset:1px}fieldset.faceScope{border-color:var(--amber-deep)}fieldset.faceScope legend{color:var(--amber)}.webgl-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:12px;padding:24px;text-align:center}#variantStrip{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}#variantStrip canvas{width:46px;height:46px;border:1px solid #3a3427;border-radius:3px;cursor:pointer}#variantStrip canvas:hover{border-color:var(--amber-deep)}#variantStrip canvas.current{border-color:var(--amber)}#roomToggle{position:absolute;bottom:10px;right:14px;z-index:2}#recordBtn{position:absolute;bottom:10px;right:118px;z-index:2;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px}#threeBox canvas,#panelCanvas{touch-action:none}@media(pointer:coarse){input[type=range]{height:6px}input[type=range]::-webkit-slider-thumb{width:20px;height:20px}button{padding:8px 12px}.btnToggle button{padding:6px 10px}}@media(max-width:860px){body{overflow:auto}.tag{right:150px}#app{flex-direction:column;height:auto}#stage{order:-1;flex:none;height:74vh;height:74dvh}#controls{width:100%;border-right:none;border-top:1px solid var(--line);overflow:visible;padding-bottom:40px}}