/* CAD⁴: the slice on a stage, the model's numbers and its tree in a panel beside (landscape) or below (portrait) */
:root { --bg: #07080c; --panel: #0d0f15; --text: #e9e4da; --dim: #9a958c; --gold: #ffd27a; --ana: #38f2e0; --kata: #ff66b8; --bad: #ff6a4a; --mono: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; overscroll-behavior: none; }
[hidden] { display: none !important; }
body { display: grid; grid-template-columns: 1fr min(380px, 42vw); grid-template-rows: 100%; }
@media (orientation: portrait) { body { grid-template-columns: 100%; grid-template-rows: 56% 44%; } }
#stage { position: relative; overflow: hidden; min-width: 0; min-height: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#gl, #ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#gl { touch-action: none; cursor: grab; } #ov { pointer-events: none; }
#bar { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 6px; align-items: center; padding: calc(6px + env(safe-area-inset-top)) 8px 6px 12px; background: linear-gradient(rgba(7, 8, 12, 0.85), rgba(7, 8, 12, 0)); overflow-x: auto; scrollbar-width: none; }
#bar > b { font: 800 13px var(--mono); letter-spacing: 0.1em; margin-right: 4px; }
#bar button, #bar select, .btns button { flex: none; font: 600 12px var(--mono); background: rgba(7, 8, 12, 0.6); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; padding: 5px 9px; cursor: pointer; touch-action: manipulation; }
#bar select { border-color: var(--gold); color: var(--gold); max-width: 46vw; }
#bar button.on { border-color: var(--gold); color: var(--gold); }
#cap { position: absolute; left: 10px; top: calc(44px + env(safe-area-inset-top)); max-width: min(480px, calc(100% - 120px)); font: 12.5px/1.5 var(--sans); color: #d9d3c8; background: rgba(7, 8, 12, 0.62); border-radius: 10px; padding: 7px 10px; cursor: pointer; }
#cap.min { max-height: 2.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
#miss { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 13px var(--mono); color: var(--dim); background: rgba(7, 8, 12, 0.7); border: 1px dashed rgba(255, 255, 255, 0.25); border-radius: 10px; padding: 8px 12px; pointer-events: none; }
.pad { position: absolute; left: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(7, 8, 12, 0.35); touch-action: none; cursor: grab; }
.pad.live, .lever.live { border-color: rgba(255, 210, 122, 0.75); }
#twistKnob { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); pointer-events: none; }
.pad span { position: absolute; left: -10px; right: -10px; top: -17px; text-align: center; font: 10px var(--mono); color: var(--dim); pointer-events: none; }
.lever { position: absolute; right: 14px; bottom: calc(26px + env(safe-area-inset-bottom)); width: 42px; height: 112px; border-radius: 21px; border: 2px solid rgba(255, 255, 255, 0.28); background: linear-gradient(rgba(56, 242, 224, 0.18), rgba(7, 8, 12, 0.3) 50%, rgba(255, 102, 184, 0.18)); touch-action: none; cursor: ns-resize; }
#anaKnob { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); pointer-events: none; }
.lever b, .lever i { position: absolute; left: 0; right: 0; text-align: center; font: 600 10px var(--mono); font-style: normal; pointer-events: none; }
.lever b { top: -15px; color: var(--ana); } .lever i { bottom: -15px; color: var(--kata); }

#panel { background: var(--panel); border-left: 1px solid rgba(255, 255, 255, 0.1); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); font: 12px var(--mono); }
@media (orientation: portrait) { #panel { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } }
#panel section { margin: 0 0 12px; }
#panel h2 { font: 700 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
#panel h2 em { font: 400 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--dim); }
#params label { display: grid; grid-template-columns: 4.2em 1fr 3.6em; gap: 8px; align-items: center; margin: 2px 0; color: var(--dim); }
#params label span { color: var(--text); text-align: right; }
#params input { width: 100%; min-width: 0; accent-color: var(--gold); }
.rows { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.rows > i { font-style: normal; color: var(--dim); } .rows > span { text-align: right; overflow-wrap: anywhere; }
.rows .bad { color: var(--bad); font-weight: 700; } .rows .good { color: #8be28a; }
.rows:empty::after { content: '—'; color: var(--dim); }
#treeT { width: 100%; height: 190px; resize: vertical; background: #07080c; color: #cfd8d3; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; padding: 8px; font: 11px/1.45 var(--mono); white-space: pre; tab-size: 1; }
.btns { display: flex; gap: 6px; align-items: center; margin-top: 6px; } #err { color: var(--bad); font-size: 11px; overflow-wrap: anywhere; }
.foot { font: 12px/1.6 var(--sans); color: var(--dim); margin: 0; } .foot a, .foot b { color: var(--text); }
.foot .ana { color: var(--ana); font-style: normal; } .foot .kata { color: var(--kata); font-style: normal; }
#prof { display: block; width: 100%; height: 84px; margin-top: 6px; background: #07080c; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; }
@media (orientation: portrait) { #cap { font-size: 12px; max-width: calc(100% - 100px); } }
#films canvas { display: block; width: 100%; margin: 6px 0 4px; background: #07080c; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; }
#films h3 { font: 600 12px var(--mono); color: var(--text); margin: 10px 0 0; } #films p { font: 12px/1.55 var(--sans); color: var(--dim); margin: 0 0 4px; } #films p b { color: var(--text); } #films p b.free { color: var(--ana); } #films p b.held { color: var(--gold); }
.rows .held { color: var(--gold); }
.rows b.good { color: #8be28a; } .rows b.held { color: var(--gold); } .rows b.bad { color: var(--bad); }