:root {
  --bg: #000;
  --panel: rgba(3, 5, 4, .96);
  --text: #f0f4f1;
  --muted: #828c85;
  --accent: #a7dd82;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
#stage { position: fixed; inset: 0; display: block; width: 100%; height: 100%; background: #000; cursor: crosshair; }
#camera { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hidden { display: none !important; }

.start-screen { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 24px; background: #000; transition: opacity .3s ease, visibility .3s ease; }
.start-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.start-card { width: min(660px, 100%); direction: ltr; border: 1px solid rgba(255,255,255,.16); padding: clamp(28px, 5vw, 56px); background: rgba(4, 6, 5, .99); }
.eyebrow { color: var(--accent); letter-spacing: .19em; font-size: 10px; margin-bottom: 20px; }
.start-card h1 { margin: 0; line-height: .88; font-size: clamp(54px, 8vw, 96px); letter-spacing: -.065em; font-weight: 800; }
.start-card h2 { direction: rtl; margin: 17px 0 20px; color: var(--accent); font-size: clamp(24px, 4vw, 38px); font-weight: 500; }
.start-card p { direction: rtl; max-width: 550px; color: #d3dbd5; font-size: 14px; line-height: 1.9; }
.start-actions { direction: rtl; display: flex; gap: 10px; margin-top: 28px; }
.start-actions button { min-height: 50px; padding: 0 22px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; transition: .18s ease; }
.start-actions button:hover { transform: translateY(-2px); }
.primary { background: var(--accent); color: #071006; border-color: var(--accent) !important; font-weight: 700; }
.secondary { background: transparent; }
.start-note { direction: rtl; color: var(--muted); margin-top: 15px; font-size: 10px; }
.start-note.error { color: #ffad8e; }

.panel { position: fixed; z-index: 20; top: 18px; right: 18px; width: min(350px, calc(100vw - 36px)); max-height: calc(100vh - 36px); overflow: auto; padding: 18px; border: 1px solid rgba(255,255,255,.15); background: var(--panel); box-shadow: 0 30px 80px rgba(0,0,0,.4); transition: transform .25s ease, opacity .25s ease; scrollbar-width: thin; scrollbar-color: #506254 transparent; }
.panel.hidden { transform: translateX(calc(100% + 30px)); opacity: 0; pointer-events: none; display: block !important; }
.panel-head { direction: ltr; display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.09); }
.panel-kicker { font-size: 9px; letter-spacing: .16em; color: var(--accent); }
.panel-title { font-size: 20px; font-weight: 600; margin-top: 3px; }
.icon-button { width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.13); background: transparent; font-size: 20px; cursor: pointer; }
.panel section { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.section-title { font-size: 11px; color: #d0d7d1; font-weight: 600; }
.section-row, .status-row { display: flex; justify-content: space-between; align-items: center; }
.value-label, .status-row strong { direction: ltr; color: var(--accent); font-size: 9px; letter-spacing: .07em; }
.status-row { direction: ltr; color: #aeb8b0; font-size: 9px; padding: 5px 0; }
.button-row { display: flex; gap: 7px; margin-top: 10px; }
.small-button, .reset-button { flex: 1; min-height: 36px; border: 1px solid rgba(255,255,255,.13); background: transparent; font-size: 10px; cursor: pointer; }
.small-button:hover, .reset-button:hover { border-color: var(--accent); }
.reset-button { width: 100%; margin-top: 11px; }
.toggle-row { direction: ltr; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; color: #bdc7bf; font-size: 10px; }
.toggle-row input { accent-color: var(--accent); }
.range-row { direction: rtl; display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-top: 12px; font-size: 10px; color: #c9d2ca; }
.range-row output { direction: ltr; color: var(--accent); }
.range-row input { grid-column: 1 / -1; width: 100%; height: 2px; accent-color: var(--accent); }
.panel-footer { direction: ltr; padding-top: 14px; color: #718077; font-size: 8px; line-height: 1.7; }
.show-panel { position: fixed; z-index: 18; right: 18px; top: 18px; border: 1px solid rgba(255,255,255,.18); background: rgba(4,8,5,.86); padding: 10px 13px; color: var(--accent); letter-spacing: .12em; font-size: 9px; cursor: pointer; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 38px; transform: translateX(-50%); padding: 10px 15px; background: rgba(3,7,4,.94); border: 1px solid rgba(255,255,255,.17); color: #dce5de; font-size: 11px; }

@media (max-width: 720px) {
  .panel { top: 10px; right: 10px; max-height: calc(100vh - 20px); width: calc(100vw - 20px); }
  .start-actions { flex-direction: column; }
}

.select-row { direction: rtl; display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; font-size:10px; color:#c9d2ca; }
.select-input { min-width: 160px; background:#071006; color:#dce5de; border:1px solid rgba(255,255,255,.16); min-height:32px; }

.audio-role-note { margin-top: 11px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.10); color:#aeb8b0; font-size:9px; line-height:1.8; direction:ltr; }
.audio-role-note strong { color: var(--accent); letter-spacing:.08em; }
.memory-note { margin-top: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.08); color: #9eaaa1; font-size: 9px; line-height: 1.8; }
.memory-note strong { color: var(--accent); letter-spacing: .08em; }

.site-tools { position:fixed; z-index:19; left:16px; bottom:16px; display:flex; gap:7px; direction:rtl; }
.site-tool-button { min-height:34px; padding:0 13px; border:1px solid rgba(255,255,255,.18); background:rgba(3,7,4,.78); color:#dce5de; font-size:10px; cursor:pointer; backdrop-filter:blur(8px); }
.site-tool-button:hover { border-color:var(--accent); color:var(--accent); }
body.site-public .panel, body.site-public .show-panel { display:none !important; }
body.site-public #stage { cursor:default; }
@media (max-width:720px) { .site-tools { left:10px; bottom:10px; } }
#visualOverlay { position:fixed; inset:0; z-index:4; width:100%; height:100%; pointer-events:none; background:transparent; mix-blend-mode:screen; }
#stage { z-index:2; }
.start-card h2, .start-card p, .start-actions, .start-note { direction:ltr; }
.start-actions { justify-content:flex-start; }
.panel { direction:ltr; }
.range-row, .select-row { direction:ltr; }
.panel-footer { direction:ltr; }
.select-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; font-size:10px; color:#c9d2ca; }
.select-input { min-width:165px; background:#071006; color:#dce5de; border:1px solid rgba(255,255,255,.16); min-height:32px; padding:0 8px; }
.audio-role-note { margin-top:11px; padding:10px 11px; border:1px solid rgba(255,255,255,.10); color:#aeb8b0; font-size:9px; line-height:1.7; direction:ltr; }
.memory-note { direction:ltr; }
.essential-keys { position:fixed; z-index:22; left:50%; bottom:11px; transform:translateX(-50%); white-space:nowrap; color:rgba(222,230,224,.66); font-size:9px; letter-spacing:.035em; background:rgba(0,0,0,.34); padding:7px 10px; border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(5px); pointer-events:none; }
.site-tools { bottom:48px; }
body.site-public .panel { display:block !important; }
body.site-public .panel.hidden { display:block !important; }
body.site-public .show-panel { display:none !important; }
body.site-public #stage { cursor:default; }
@media (max-width:720px) {
  .essential-keys { max-width:calc(100vw - 20px); overflow:hidden; text-overflow:ellipsis; font-size:8px; }
  .site-tools { bottom:48px; }
}

.color-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; font-size:10px; color:#c9d2ca; }
.color-input { width:58px; height:30px; padding:2px; border:1px solid rgba(255,255,255,.18); background:#071006; cursor:pointer; }