:root{color:#1c2628;background:#eef2ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #1c2628;--muted: #637171;--line: #cfdad5;--surface: #fbfcfa;--surface-strong: #ffffff;--accent: #da4f2f;--accent-dark: #af361f;--gold: #f6c453;--green: #247d62}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100dvh;overflow-x:hidden}button{border:0;font:inherit}button:focus-visible{outline:3px solid rgba(36,125,98,.38);outline-offset:3px}.app-shell{width:min(1360px,calc(100% - 32px));margin:0 auto;padding:22px 0 42px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:18px;align-items:start}.camera-panel,.readout-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 60px #1e2d2814}.camera-panel{padding:16px}.panel-header,.reference-heading{display:flex;align-items:start;justify-content:space-between;gap:18px;margin-bottom:16px}.eyebrow{margin:0 0 5px;color:var(--accent-dark);font-size:.75rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2{margin:0;color:var(--ink);letter-spacing:0}h1{font-size:clamp(2rem,2.75rem,2.75rem);line-height:1.02}h2{font-size:clamp(1.55rem,1.95rem,1.95rem)}.status-pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 12px;color:var(--muted);background:#edf3f0;border:1px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:700;white-space:nowrap}.status-pill.online{color:var(--green);background:#e8f5ef;border-color:#b8dccd}.camera-stage{position:relative;display:grid;overflow:hidden;min-height:440px;aspect-ratio:16 / 9;background:linear-gradient(135deg,rgba(218,79,47,.12),transparent 35%),#263438;border-radius:8px}.camera-stage video,.camera-stage canvas,.camera-empty{grid-area:1 / 1}.camera-stage video,.camera-stage canvas{width:100%;height:100%;object-fit:cover}.camera-stage canvas{pointer-events:none}.mirrored{transform:scaleX(-1)}.camera-empty{z-index:2;display:grid;place-items:center;align-content:center;gap:10px;color:#d7e3df;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.03) 12px,transparent 12px,transparent 24px)}.camera-empty p{margin:0;color:#d7e3df;font-weight:700}.toolbar{display:grid;grid-template-columns:minmax(180px,max-content) repeat(2,max-content);gap:10px;margin-top:14px}.toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 16px;border-radius:8px;cursor:pointer;font-weight:800;transition:transform .18s ease,background .18s ease,border-color .18s ease}.toolbar button:active{transform:translateY(1px)}.toolbar button:disabled{cursor:not-allowed;opacity:.58}.primary{color:#fff;background:var(--accent)}.primary:hover{background:var(--accent-dark)}.primary.stop{background:#2c3a3d}.toggle,.ghost{color:var(--ink);background:var(--surface-strong);border:1px solid var(--line)}.toggle.active{color:var(--green);border-color:#a7d2c0;background:#eaf6f1}.error-banner{display:flex;align-items:center;gap:8px;margin-top:12px;padding:11px 12px;color:#7e2215;background:#ffeae5;border:1px solid #f5b8aa;border-radius:8px;font-weight:700}.readout-panel{display:grid;align-content:start;gap:14px;position:sticky;top:16px;padding:16px}.letter-readout{display:grid;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line)}.letter-readout .label,.metric span,.section-title{color:var(--muted);font-size:.8rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.letter-readout strong{display:block;margin:8px 0 3px;font-size:clamp(5.5rem,8.5rem,8.5rem);line-height:.9;color:var(--accent);font-weight:900}.letter-readout p{margin:0;color:var(--muted);font-weight:750}.metrics{display:grid;gap:8px}.metric{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:11px 12px;background:#f3f6f4;border:1px solid var(--line);border-radius:8px}.metric strong{text-align:right}.history-panel{display:grid;gap:12px}.section-title{display:inline-flex;align-items:center;gap:7px}.history-list{display:flex;flex-wrap:wrap;gap:8px;min-height:44px}.history-chip{display:inline-grid;place-items:center;width:38px;height:38px;color:var(--ink);background:var(--gold);border:1px solid #d6a22b;border-radius:8px;font-weight:900}.empty-copy{color:var(--muted);font-weight:650}.reference-section{margin-top:18px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:8px}.reference-heading p:last-child{max-width:48ch;margin:4px 0 0;color:var(--muted);font-weight:650}.reference-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}.letter-card{display:grid;justify-items:center;gap:4px;min-height:118px;padding:9px;background:#f5f7f4;border:1px solid var(--line);border-radius:8px}.letter-card span{font-weight:900;color:var(--ink)}.glyph{width:96px;height:96px;color:var(--ink);overflow:visible}.glyph-compact{width:78px;height:78px}.glyph circle:not(.glyph-hand),.glyph-body,.glyph-arm,.glyph-pole{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:5}.glyph circle:not(.glyph-hand){fill:var(--surface-strong)}.glyph-arm{stroke-width:7}.glyph-pole{stroke-width:3}.glyph-hand{fill:var(--ink)}.glyph-flag.left{fill:var(--gold);stroke:#b7791a;stroke-width:1.5}.glyph-flag.right{fill:var(--accent);stroke:var(--accent-dark);stroke-width:1.5}@media(max-width:1040px){.workspace{grid-template-columns:1fr}.readout-panel{position:static;grid-template-columns:minmax(220px,.55fr) 1fr;align-items:stretch}.letter-readout{border-bottom:0;border-right:1px solid var(--line);padding:0 16px 0 0}.letter-readout strong{font-size:clamp(4.5rem,6.5rem,6.5rem)}.history-panel{grid-column:1 / -1}}@media(max-width:760px){.app-shell{width:100%;padding:0 0 calc(24px + env(safe-area-inset-bottom))}.camera-panel,.readout-panel,.reference-section{border-left:0;border-right:0;border-radius:0;box-shadow:none}.camera-panel{padding:calc(12px + env(safe-area-inset-top)) 12px 12px}.panel-header,.reference-heading{display:grid;gap:10px;margin-bottom:12px}.eyebrow{font-size:.68rem;margin-bottom:4px}h1{font-size:clamp(1.8rem,2.05rem,2.05rem);line-height:1.06}h2{font-size:clamp(1.35rem,1.55rem,1.55rem);line-height:1.12}.status-pill{justify-self:start;max-width:100%;white-space:normal;font-size:.82rem}.camera-stage{min-height:0;aspect-ratio:3 / 4;border-radius:8px}.camera-stage video,.camera-stage canvas{object-fit:cover}.camera-empty{padding:20px;text-align:center}.toolbar{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.toolbar button{min-height:48px;padding:0 10px;font-size:.9rem}.toolbar .primary{grid-column:1 / -1}.readout-panel{grid-template-columns:1fr;gap:12px;margin-top:10px;padding:12px;background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.letter-readout{grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:84px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px}.letter-readout strong{margin:0;min-width:74px;text-align:center;font-size:clamp(3.8rem,4.6rem,4.6rem)}.letter-readout p{margin-top:6px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.metric{display:grid;align-content:center;min-height:74px;padding:10px 8px}.metric span{font-size:.66rem}.metric strong{text-align:left;font-size:.86rem;line-height:1.2;overflow-wrap:anywhere}.history-panel{padding:0 2px}.history-list{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;-webkit-overflow-scrolling:touch}.history-chip{flex:0 0 auto}.reference-section{margin-top:10px;padding:14px 12px 18px}.reference-heading p:last-child{max-width:none;font-size:.92rem}.reference-grid{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.letter-card{flex:0 0 86px;min-height:112px;scroll-snap-align:start}.glyph-compact{width:72px;height:72px}}@media(max-width:420px){.camera-panel{padding-left:10px;padding-right:10px}h1{font-size:clamp(1.55rem,1.75rem,1.75rem)}.metrics{grid-template-columns:1fr}.metric{display:flex;min-height:46px;padding:9px 10px}.metric strong{text-align:right}.letter-readout strong{min-width:62px;font-size:clamp(3.2rem,3.8rem,3.8rem)}}