:root{color-scheme:dark;--bg: #000;--panel: #101210;--panel-2: #151815;--line: #242824;--text: #f2f4ef;--muted: #aab2aa;--subtle: #687168;--accent: #17b6a4;--accent-2: #f5bd3d;--danger: #ef5c5c}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button{align-items:center;background:#101410;border:1px solid var(--line);border-radius:5px;color:var(--text);cursor:pointer;display:inline-flex;gap:.5rem;justify-content:center;min-height:2.35rem;padding:.58rem .72rem;transition:background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease}button:hover{background:#151a15;border-color:#667066}button:disabled{background:#070907;border-color:#181c18;color:#6f786f;cursor:not-allowed;opacity:.72}h1,h2,p{margin:0}h1{font-size:clamp(1.28rem,1.8vw,1.8rem);letter-spacing:0;line-height:1.1}h2{font-size:1rem;letter-spacing:0;line-height:1.28}.shell{min-height:100vh;padding:.5rem}.workspace{display:grid;gap:.5rem;grid-template-columns:clamp(13.5rem,19vw,18rem) minmax(0,1fr);min-height:calc(100vh - 1rem)}.control-panel,.main-panel{min-width:0}.control-panel{display:flex;flex-direction:column;gap:.48rem}.page-link{align-items:center;background:#050705;border:1px solid #1d221d;border-radius:5px;color:#d9e4d9;display:inline-flex;font-size:.78rem;font-weight:800;gap:.45rem;justify-content:center;min-height:2.35rem;text-transform:uppercase;transition:background-color .16s ease,border-color .16s ease}.page-link:hover{background:#111711;border-color:#4d594d}.file-input{display:none}.upload-zone{align-items:center;aspect-ratio:4 / 3;background:#000;border:1px solid #1d221d;border-radius:4px;color:var(--text);display:flex;flex-direction:column;gap:.45rem;padding:.75rem;width:100%}.upload-zone span{font-size:.92rem;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-zone small{color:#8b948b;font-size:.72rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button-grid{display:grid;gap:.48rem;grid-template-columns:1fr}.button-grid button{min-height:2.8rem}.button-grid .primary{background:var(--accent);border-color:var(--accent);color:#061210;font-weight:800}.gesture-panel{background:#050705;border:1px solid #1d221d;border-radius:6px;display:grid;gap:.35rem;grid-template-columns:repeat(4,minmax(0,1fr));padding:.55rem}.gesture-panel div{display:grid;gap:.12rem;min-width:0}.gesture-panel span{color:#7e877e;font-size:.62rem;text-transform:uppercase}.gesture-panel strong{color:var(--text);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frame-meter{background:#050705;border:1px solid #1d221d;border-radius:999px;height:.5rem;overflow:hidden}.frame-meter span,.stage-progress span{background:linear-gradient(90deg,var(--accent),var(--accent-2));display:block;height:100%;transition:width 55ms linear}.clip-status{align-items:center;background:#050705;border:1px solid #1d221d;border-radius:6px;display:grid;grid-template-columns:auto minmax(0,1fr);justify-content:start;min-height:2.45rem;padding:.5rem .58rem;text-align:left}.clip-status span{display:grid;gap:.08rem;min-width:0}.clip-status strong,.clip-status em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clip-status strong{color:#aab2aa;font-size:.72rem}.clip-status em{color:#687168;font-size:.62rem;font-style:normal;text-transform:uppercase}.camera-error{color:var(--danger);font-size:.72rem;line-height:1.35}.main-panel{display:grid;gap:.5rem;grid-template-rows:minmax(0,1fr);min-height:0}.stage{background:#000;border-radius:4px;display:grid;min-height:0;overflow:hidden;place-items:center;position:relative}.stage:after{background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 18%,transparent 72%,rgba(0,0,0,.62)),linear-gradient(90deg,rgba(23,182,164,.14),transparent 28%,transparent 72%,rgba(245,189,61,.12));content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute;z-index:2}.reel-video{background:#000;height:100%;top:0;right:0;bottom:0;left:0;object-fit:contain;opacity:0;position:absolute;transition:opacity .42s ease,transform .42s ease;width:100%}.stage-canvas{background:#000;height:100%;top:0;right:0;bottom:0;left:0;object-fit:contain;opacity:0;position:absolute;transition:opacity .16s ease;width:100%;z-index:3}.stage-canvas.ready{opacity:1}.reel-video.visible{opacity:1;transform:scale(1);z-index:1}.switching .reel-video.visible{transform:scale(1.012)}.stage-empty{align-items:center;color:#8b948b;display:flex;flex-direction:column;gap:.5rem;padding:1rem;text-align:center}.stage-empty strong{color:var(--text);font-size:clamp(1.2rem,2vw,1.8rem)}.stage-hud{align-items:center;display:flex;gap:.5rem;justify-content:space-between;left:.75rem;position:absolute;right:.75rem;top:.75rem;z-index:4}.stage-hud span{background:#0000007a;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#cbd4cb;font-size:.72rem;max-width:70%;overflow:hidden;padding:.36rem .5rem;text-overflow:ellipsis;white-space:nowrap}.stage-hud button{background:#0000007a;min-height:2rem;padding:.35rem .5rem}.stage-progress{background:#ffffff14;bottom:0;height:.2rem;left:0;overflow:hidden;position:absolute;right:0;z-index:4}.webcam-monitor{background:#050705;border:1px solid #1d221d;border-radius:6px;min-height:0;overflow:hidden}.webcam-monitor{display:grid;position:relative}.control-webcam{aspect-ratio:16 / 10;flex:0 0 auto;min-height:7.4rem}.webcam-video,.landmark-canvas{height:100%;top:0;right:0;bottom:0;left:0;object-fit:cover;position:absolute;transform:scaleX(-1);width:100%}.webcam-video{opacity:.72}.landmark-canvas{z-index:1}.monitor-label{align-self:end;background:linear-gradient(180deg,transparent,rgba(0,0,0,.76));display:grid;gap:.12rem;padding:2rem .7rem .7rem;position:relative;z-index:2}.monitor-label span{color:var(--accent-2);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.monitor-label strong{font-size:.82rem}.ascii-shell{min-height:100vh;padding:.5rem}.ascii-workspace{display:grid;gap:.5rem;grid-template-columns:clamp(14rem,22vw,20rem) minmax(0,1fr);min-height:calc(100vh - 1rem)}.ascii-control-panel,.ascii-main-panel{min-width:0}.ascii-control-panel{display:flex;flex-direction:column;gap:.48rem}.ascii-upload-zone{aspect-ratio:16 / 7;min-height:5.1rem}.ascii-upload-zone.has-clip{background:#070d0c;border-color:#22443e}.ascii-upload-zone.has-error{background:#14080a;border-color:#421d22}.ascii-upload-zone.has-clip small{color:#aeb8ae}.ascii-upload-zone.has-error small{color:var(--danger)}.analysis-progress{background:#0a140a;border:1px solid #1d421d;border-radius:5px;color:var(--accent);font-size:.78rem;padding:.52rem .72rem}.analysis-error{background:#14080a;border:1px solid #421d22;border-radius:5px;color:var(--danger);font-size:.78rem;padding:.52rem .72rem}.ascii-transport{display:grid;gap:.48rem;grid-template-columns:repeat(2,minmax(0,1fr))}.ascii-transport button{font-size:.78rem;min-height:2.55rem;white-space:nowrap}.ascii-transport .primary{background:var(--accent);border-color:var(--accent);color:#061210;font-weight:800}.ascii-panel-group,.ascii-band-panel{background:#050705;border:1px solid #1d221d;border-radius:6px;display:grid;gap:.55rem;padding:.6rem}.panel-title{align-items:center;color:#dce6dc;display:flex;gap:.42rem}.panel-title h2{font-size:.78rem;text-transform:uppercase}.auto-filter-row{align-items:center;display:grid;gap:.45rem;grid-template-columns:minmax(0,1fr) auto}.auto-filter-row button{background:#0d110d;border-color:#222822;color:#aeb8ae;font-size:.72rem;min-height:2.1rem;padding:.42rem .48rem}.auto-filter-row button.active{background:#17302c;border-color:var(--accent);color:#f2f4ef}.auto-filter-row span{color:#7e877e;font-size:.66rem;font-weight:800;max-width:6.4rem;overflow:hidden;text-align:right;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.mode-segments{display:grid;gap:.35rem;grid-template-columns:repeat(2,minmax(0,1fr))}.mode-segments button{background:#0d110d;border-color:#222822;color:#aeb8ae;font-size:.72rem;min-height:2.1rem;padding:.42rem .48rem}.mode-segments button.active{background:#17302c;border-color:var(--accent);color:#f2f4ef}.relief-route-grid{border-top:1px solid #1a1f1a;display:grid;gap:.4rem;margin-top:.62rem;padding-top:.62rem}.relief-route-row{align-items:center;display:grid;gap:.5rem;grid-template-columns:minmax(4.8rem,5.6rem) minmax(0,1fr)}.relief-route-row>span{color:#7e877e;font-size:.66rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.relief-toggle{display:grid;gap:.24rem;grid-template-columns:repeat(3,minmax(0,1fr))}.relief-toggle button{background:#0d110d;border-color:#222822;color:#aeb8ae;font-size:.66rem;min-height:1.75rem;padding:.26rem .18rem;white-space:nowrap}.relief-toggle button.active{background:#17302c;border-color:var(--accent);color:#f2f4ef}.frequency-route-grid{display:grid;gap:.36rem}.frequency-route-row{align-items:center;display:grid;gap:.5rem;grid-template-columns:4.8rem minmax(0,1fr)}.frequency-route-row span{color:#7e877e;font-size:.68rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.frequency-route-row select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(45deg,transparent 50%,#aeb8ae 50%) calc(100% - .86rem) 50% / .36rem .36rem no-repeat,#0d110d;border:1px solid #222822;border-radius:5px;color:#f2f4ef;font-size:.72rem;min-height:2rem;overflow:hidden;padding:.38rem 1.45rem .38rem .5rem;text-overflow:ellipsis;width:100%}.frequency-route-row select:focus{border-color:var(--accent);outline:none}.range-row{align-items:center;display:grid;gap:.48rem;grid-template-columns:4.1rem minmax(0,1fr) 2.4rem}.range-row span,.band-row span{color:#7e877e;font-size:.68rem;font-weight:800;text-transform:uppercase}.range-row strong,.band-row strong{color:#dce6dc;font-size:.72rem;text-align:right}.range-row input[type=range]{accent-color:var(--accent);width:100%}.select-row{align-items:center;display:grid;gap:.48rem;grid-template-columns:4.1rem minmax(0,1fr) 3rem}.select-row span,.select-row strong{color:#7e877e;font-size:.68rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.select-row strong{color:#dce6dc;font-size:.68rem;text-align:right}.select-row select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(45deg,transparent 50%,#aeb8ae 50%) calc(100% - .8rem) 50% / .34rem .34rem no-repeat,#0d110d;border:1px solid #222822;border-radius:5px;color:#f2f4ef;font-size:.72rem;min-height:2rem;padding:.36rem 1.36rem .36rem .5rem;width:100%}.select-row select:focus{border-color:var(--accent);outline:none}.band-row{align-items:center;display:grid;gap:.48rem;grid-template-columns:3.2rem minmax(0,1fr) 2rem}.profile-row{align-items:center;display:grid;gap:.48rem;grid-template-columns:3.2rem 4.2rem minmax(0,1fr)}.profile-row span{color:#7e877e;font-size:.68rem;font-weight:800;text-transform:uppercase}.profile-row strong{color:#f2f4ef;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.band-row meter,.profile-row meter{background:#111611;border-radius:999px;height:.46rem;overflow:hidden;width:100%}.band-row meter::-webkit-meter-bar,.profile-row meter::-webkit-meter-bar{background:#111611;border:0}.band-row meter::-webkit-meter-optimum-value,.profile-row meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,var(--accent),var(--accent-2))}.band-row meter::-moz-meter-bar,.profile-row meter::-moz-meter-bar{background:linear-gradient(90deg,var(--accent),var(--accent-2))}.ascii-main-panel{display:grid;min-height:0;place-items:center}.ascii-stage{aspect-ratio:9 / 13;background:#000;border-radius:4px;display:grid;height:100%;max-width:100%;min-height:0;overflow:hidden;place-items:center;position:relative}.ascii-stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.ascii-canvas{display:block;height:100%;width:100%}.ascii-canvas:fullscreen{background:#000;height:100vh;object-fit:contain;width:100vw}.ascii-source-video:fullscreen{background:#000;height:100vh;object-fit:contain;opacity:1;pointer-events:auto;width:100vw}.ascii-source-video{height:1px;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:1px}.stage-hit{background:transparent;border:0;border-radius:0;color:#f2f4ef;cursor:zoom-in;display:flex;justify-content:flex-end;left:0;min-height:0;opacity:0;padding:.7rem;position:absolute;right:0;transition:background-color .16s ease,opacity .16s ease;z-index:3}.stage-hit-generated{align-items:flex-start;height:46%;top:0}.stage-hit-original{align-items:flex-end;bottom:0;height:54%}.stage-hit:hover,.stage-hit:focus-visible{background:#0000002e;opacity:1;outline:none}.stage-hit span{background:#00000094;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#dce6dc;font-size:.68rem;font-weight:800;padding:.32rem .46rem;text-transform:uppercase}.ascii-empty-state{align-items:center;color:#8b948b;display:flex;flex-direction:column;gap:.5rem;top:0;right:0;bottom:0;left:0;justify-content:center;padding:1rem;position:absolute;text-align:center}.ascii-empty-state strong{color:var(--text);font-size:clamp(1.2rem,2vw,1.8rem)}.ascii-stage-hud{align-items:center;display:flex;gap:.5rem;justify-content:space-between;left:.75rem;pointer-events:none;position:absolute;right:.75rem;top:.75rem;z-index:2}.ascii-stage-hud span{background:#00000085;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#dce6dc;font-size:.72rem;max-width:62%;overflow:hidden;padding:.36rem .5rem;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}@media(min-width:821px){html,body{overflow:hidden}.shell{height:100vh}.workspace{height:100%}.control-panel{min-height:0;overflow:hidden}.ascii-shell{height:100vh}.ascii-workspace{height:100%}.ascii-control-panel{min-height:0;overflow:auto;padding-right:.1rem}}@media(max-width:820px){.shell{padding:.5rem}.workspace{grid-template-columns:minmax(0,1fr)}.control-panel{order:2}.main-panel{grid-template-rows:minmax(24rem,58vh);order:1}.control-webcam{aspect-ratio:16 / 9}.ascii-shell{padding:.5rem}.ascii-workspace{grid-template-columns:minmax(0,1fr)}.ascii-control-panel{order:2}.ascii-main-panel{min-height:70vh;order:1}.ascii-stage{height:auto;min-height:0;width:100%}}
