:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{margin:0;min-height:100%;background:#111;color:#eee}body{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;overscroll-behavior:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}[hidden]{display:none!important}button,input{font:inherit}button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}header{padding:14px 16px 10px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}h1{margin:0;font-size:18px;font-weight:600;letter-spacing:.02em}#status{font-size:12px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}main{min-height:0;display:grid;place-items:center;padding:0 12px}.stage{position:relative;width:min(100%,78vh);aspect-ratio:1;overflow:hidden;background:#181818;border:1px solid #303030;border-radius:8px}.stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.stage canvas.mirrored{transform:scaleX(-1)}#source{display:none}.cameraButton{position:absolute;inset:0;margin:auto;width:108px;height:44px;border:1px solid #666;border-radius:8px;background:#191919dd;color:#eee}.liveBadge{position:absolute;top:10px;left:10px;padding:5px 8px;border-radius:6px;background:#eee;color:#111;font-size:11px;font-weight:700;letter-spacing:.08em}footer{padding:12px}.controls{display:grid;gap:9px;width:min(100%,78vh);margin-inline:auto}.stepRow{display:grid;grid-template-columns:auto 42px 1fr 42px;min-height:42px;align-items:center;border:1px solid #444;border-radius:8px;overflow:hidden}.stepRow span{padding:0 10px;font-size:10px;letter-spacing:.08em;color:#888}.stepRow button,.toggle{height:100%;min-height:42px;border:0;background:#191919;color:#ddd}.stepRow button{border-left:1px solid #3a3a3a}.stepRow output{display:grid;place-items:center;height:100%;font-size:12px;font-variant-numeric:tabular-nums;border-left:1px solid #3a3a3a}.toggleRow{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toggle{border:1px solid #444;border-radius:8px;color:#888}.toggle.active{background:#e7e7e7;color:#111;border-color:#e7e7e7}.keyRow{display:grid;grid-template-columns:auto 1fr;align-items:center;border:1px solid #444;border-radius:8px;overflow:hidden}.keyRow span{padding:0 10px;font-size:10px;letter-spacing:.06em;color:#888;white-space:nowrap}.keyRow input{min-width:0;height:42px;border:0;border-left:1px solid #3a3a3a;background:#151515;color:#eee;padding:0 10px;outline:none}.liveButton{min-height:48px;border:1px solid #777;border-radius:8px;background:#e7e7e7;color:#111;font-weight:700;letter-spacing:.04em}.liveButton.streaming{background:#191919;color:#eee}.liveButton:disabled{opacity:.35}.viewerRow{display:grid;gap:8px}.viewerRow input{width:100%;min-width:0;height:46px;border:1px solid #666;border-radius:8px;background:#050505;color:#eee;padding:0 12px;outline:none;font-size:12px}.viewerRow button{min-height:48px;border:1px solid #aaa;border-radius:8px;background:#e7e7e7;color:#111;font-weight:700;letter-spacing:.04em}@media(orientation:landscape) and (max-height:560px){body{grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);grid-template-rows:auto 1fr}header{grid-column:1/-1;padding-block:8px}main{grid-column:1;padding:0 8px 8px}.stage{width:min(100%,calc(100dvh - 60px))}footer{grid-column:2;display:grid;align-items:center;padding:8px}.controls{width:100%}.keyRow{grid-template-columns:1fr}.keyRow span{display:none}}