:root { color-scheme: dark; --ink:#090617; --panel:#17112d; --cyan:#34d9e6; --pink:#f34f95; --yellow:#ffd84a; --paper:#fff5dc; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--paper); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, select, input { font: inherit; }
.lab-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); }
.lab-stage { position: relative; min-height: 720px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #292249, var(--ink) 64%); }
#encounter-canvas { width: 100%; height: 100%; display: block; }
.lab-hud { position: absolute; inset: max(18px, env(safe-area-inset-top)) auto auto max(18px, env(safe-area-inset-left)); max-width: min(420px, calc(100% - 36px)); padding: 16px 18px; border: 2px solid var(--paper); border-radius: 12px; background: rgba(9,6,23,.88); box-shadow: 8px 8px 0 rgba(243,79,149,.24); }
.lab-hud span, header span { color: var(--cyan); font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
.lab-hud strong { display: block; margin-top: 7px; color: var(--yellow); font-size: clamp(1.35rem, 3vw, 2.1rem); }
.lab-hud p, header p { color: #ddd4ee; line-height: 1.45; }
.proof-overlay { margin-top: 12px; padding: 9px; border: 1px dashed var(--yellow); color: var(--yellow); font: 700 .72rem/1.3 ui-monospace, monospace; }
.lab-controls { max-height: 100vh; overflow-y: auto; padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) 24px; border-left: 2px solid var(--paper); background: linear-gradient(160deg, #211942, #130e29); }
header { margin-bottom: 24px; }
h1 { margin: 6px 0; font-size: clamp(2rem, 5vw, 3.4rem); line-height: .92; }
.lab-controls label { display: grid; gap: 7px; margin: 15px 0; color: var(--cyan); font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
select, input[type="range"] { width: 100%; min-height: 46px; border: 2px solid var(--paper); border-radius: 8px; background: #0f0a22; color: var(--paper); padding: 9px; }
input[type="range"] { accent-color: var(--pink); }
.check { grid-template-columns: auto 1fr; align-items: center; }
.check input { width: 28px; height: 28px; accent-color: var(--yellow); }
output { color: var(--yellow); }
.lab-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; }
.lab-readout div { min-width: 0; padding: 10px; border: 1px solid #544c74; border-radius: 8px; background: #0e0a20; }
.lab-readout dt { color: #aaa1c1; font-size: .62rem; text-transform: uppercase; }
.lab-readout dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--yellow); font-size: .78rem; font-weight: 800; }
@media (max-width: 760px) {
  .lab-shell { grid-template-columns: 1fr; }
  .lab-stage { min-height: 68vh; }
  .lab-controls { max-height: none; border-top: 2px solid var(--paper); border-left: 0; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .lab-shell { grid-template-columns: minmax(0, 1fr) minmax(280px, 38vw); }
  .lab-stage { min-height: 100vh; }
  .lab-hud { max-width: 44%; }
  .lab-controls { max-height: 100vh; border-top: 0; border-left: 2px solid var(--paper); }
}