:root { color-scheme: dark; font-family: ui-monospace, Consolas, monospace; --cyan:#92f4ff; --ink:#fff7d7; }
* { box-sizing: border-box; }
body { margin:0; height:100vh; min-height:100vh; overflow:hidden; display:grid; grid-template-columns:minmax(260px, 1fr) minmax(280px, 440px); grid-template-rows:auto minmax(0,1fr); grid-template-areas:"nav nav" "preview controls"; background:#0b1827; color:var(--ink); }
main { grid-area:preview; position:relative; height:100%; min-height:0; overflow:hidden; background:radial-gradient(circle at 50% 42%,#2b5c79,#10263a 70%); }
canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.proof { position:absolute; inset:8%; border:1px dashed #ff5da8; pointer-events:none; padding:8px; color:#ffd5ea; background:rgba(7,13,22,.22); font-size:11px; }
.proof::before,.proof::after { content:""; position:absolute; background:#ff5da8; opacity:.8; }
.proof::before { left:50%; top:0; bottom:0; width:1px; }
.proof::after { top:68%; left:0; right:0; height:1px; }
aside { grid-area:controls; height:100%; min-height:0; padding:24px; overflow:auto; border-left:1px solid rgba(146,244,255,.35); background:#0d1b2c; }
.lab-nav { grid-area:nav; display:flex; flex-wrap:wrap; gap:.55rem 1.25rem; align-items:center; justify-content:space-between; min-height:46px; padding:.45rem 1rem; border-bottom:1px solid rgba(146,244,255,.35); background:#091522; font-size:11px; }
.lab-nav-primary,.lab-nav-sequence { display:flex; flex-wrap:wrap; gap:.55rem 1rem; align-items:center; }
.lab-nav a { color:var(--cyan); text-decoration:none; }
.lab-nav a:hover,.lab-nav a:focus-visible { color:#fff; text-decoration:underline; }
.lab-nav-sequence span { color:#b8c6c8; }
.eyebrow { color:var(--cyan); font-size:11px; letter-spacing:.18em; }
h1 { margin:8px 0 20px; font:700 clamp(24px,4vw,42px)/1 system-ui; }
fieldset { display:grid; gap:8px; margin:0 0 16px; padding:12px; border:1px solid rgba(146,244,255,.25); }
legend { color:var(--cyan); padding:0 6px; font-size:11px; }
.buttons { display:flex; flex-wrap:wrap; gap:6px; }
button,select,input { min-height:44px; color:var(--ink); border:1px solid rgba(146,244,255,.4); background:#11293c; font:inherit; }
button { padding:8px 10px; cursor:pointer; }
button[aria-pressed="true"] { color:#07101c; background:var(--cyan); }
select,input[type="range"] { width:100%; }
label { display:grid; gap:6px; font-size:11px; color:#b8c6c8; }
pre { max-height:240px; overflow:auto; white-space:pre-wrap; color:#b8c6c8; font-size:10px; }
@media (max-width:760px) { body { height:auto; overflow:auto; grid-template-columns:1fr; grid-template-rows:auto 55vh auto; grid-template-areas:"nav" "preview" "controls"; } main { height:55vh; min-height:55vh; } aside { height:auto; overflow:visible; border-left:0; border-top:1px solid rgba(146,244,255,.35); } .lab-nav { align-items:flex-start; flex-direction:column; } }