:root{--osd-color:rgba(235,235,235,.88)}
html,body{margin:0;overflow:hidden;background:#050505;font-family:'VT323',monospace;touch-action:none;user-select:none}
canvas{display:block}
.title{position:fixed;top:24px;left:24px;z-index:20;color:var(--osd-color);font-size:24px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;text-shadow:1px 1px 2px #000,0 0 8px rgba(255,255,255,.35)}
.title::before{content:"REC ●";color:#ff3333;margin-right:12px;animation:blink 1s infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.panel{position:fixed;left:24px;bottom:24px;display:flex;gap:12px;flex-wrap:wrap;max-width:calc(100vw - 48px);z-index:30;opacity:.9}
button,select,label{background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.22);color:var(--osd-color);border-radius:2px;padding:6px 12px;font-family:'VT323',monospace;font-size:18px;text-transform:uppercase;backdrop-filter:blur(4px);cursor:pointer;transition:all .2s ease}
button:hover,select:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
label{display:flex;align-items:center;gap:8px;cursor:default}
input[type=range]{width:100px;accent-color:#e0e0e0}
.status{position:fixed;right:24px;bottom:24px;z-index:20;color:var(--osd-color);font-size:20px;letter-spacing:.1em;text-transform:uppercase;text-align:right;text-shadow:1px 1px 2px #000,0 0 8px rgba(255,255,255,.35);pointer-events:none}
.hidden .panel,.hidden .title,.hidden .status{opacity:0;pointer-events:none;transition:opacity .3s ease}