:root{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e9e6dc;background:#020306;font-size:14px;color-scheme:dark}
*{box-sizing:border-box}body,html,#stage{margin:0;width:100%;height:100%;overflow:hidden}#stage{position:fixed;inset:0;background:#020306;z-index:0;contain:strict;transform:translateZ(0)}canvas{width:100%;height:100%;display:block}body:not(.live) canvas{visibility:hidden}
#panel{position:fixed;z-index:2;top:clamp(16px,5vh,60px);left:50%;transform:translate3d(-50%,0,0);width:min(580px,calc(100% - 32px));max-height:calc(100dvh - 2 * clamp(16px,5vh,60px));overflow:auto;overscroll-behavior:contain;contain:layout paint;scrollbar-gutter:stable;padding:30px;background:#090b0e;border:1px solid #303237}
header{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#a6a39b;line-height:1.5}#offline{max-width:190px;text-align:right}
header{align-items:center}#hide-controls{font-size:11px;min-height:32px;padding:6px 9px;white-space:nowrap}body.live h1,body.live .intro{display:none}body.live .signal{margin-top:24px;min-height:42px}body.live #offline{display:none}
h1{font-size:clamp(28px,5vw,38px);font-weight:400;letter-spacing:-1.5px;margin:36px 0 14px}.intro{color:#b1aea6;line-height:1.8;margin:0 0 28px}
.signal{display:flex;flex-direction:column;gap:12px;margin:0 0 26px;min-height:48px}#status{font-size:12px;color:#e9e6dc;min-height:28px}meter{width:100%;height:6px}meter::-webkit-meter-bar{background:#292b2e;border:0}meter::-webkit-meter-optimum-value{background:#ff402f}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:flex;flex-direction:column;gap:9px;color:#aaa79f;font-size:12px}label:first-child{grid-column:1/-1}
select,button{font:inherit;color:#e9e6dc;background:#17191d;border:1px solid #414248;border-radius:0;padding:12px;min-height:44px;max-width:100%}select{width:100%}button{cursor:pointer}button:hover:enabled{border-color:#e9e6dc}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #ff402f;outline-offset:4px}
.sensitivity{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center}.sensitivity input{grid-column:1/-1;width:100%;accent-color:#ff402f;margin:0;min-height:24px}.actions{display:flex;gap:12px;margin-top:28px}.actions button{flex:1}#show{background:#e9e6dc;color:#080a0d;border-color:#e9e6dc}.secondary{display:flex;justify-content:space-between;gap:10px;margin:10px 0 0}.secondary button{border:0;background:transparent;color:#aaa79f;padding-left:0;font-size:12px}#error{color:#ff8a7f;line-height:1.6;font-size:12px}
footer{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;font-size:10px;color:#aaa79f;line-height:1.6}footer small{flex-basis:100%;font:inherit;color:#757570}#performance{margin-left:auto}
#output-status{position:fixed;top:18px;left:20px;color:#d6d3ca;background:#020306bc;padding:8px;font-size:12px;pointer-events:none}#blackout{position:fixed;inset:0;background:#000;z-index:100}body.output{cursor:none}body.output #panel{display:none}[hidden]{display:none!important}
@media(max-width:540px){#panel{padding:22px;top:16px;max-height:calc(100dvh - 32px)}header{font-size:10px;gap:10px}h1{margin-top:28px}.actions{flex-direction:column}.fields{gap:16px}.intro{font-size:12px}}