:root{color-scheme:dark;--c:#39ddff;--line:#17394b;--muted:#88a8b8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#12374d,#020811 65%);color:#edfaff;font:14px Arial}header{height:58px;padding:0 4vw;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}header i{color:var(--c);font-style:normal}nav{display:flex;gap:24px}a{color:var(--muted);text-decoration:none}main{width:min(1500px,95vw);margin:auto}.crumb{color:var(--muted);margin-top:18px}h1{font-size:clamp(34px,5vw,60px);margin:20px 0 8px}.lead{color:var(--muted)}.lab{display:grid;grid-template-columns:1fr 330px;border:1px solid var(--line);background:#05141f}.lab>section{min-width:0}.lab canvas{width:100%;aspect-ratio:16/9;display:block;background:#020811;touch-action:none}.buttons{padding:10px;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line)}button,select{background:#0a202e;color:#edfaff;border:1px solid #1d465a;border-radius:6px;padding:8px}aside{padding:18px;border-left:1px solid var(--line)}aside label{display:grid;grid-template-columns:1fr auto;gap:7px;margin:13px 0;color:var(--muted)}aside input[type=range],aside select{grid-column:1/-1;width:100%}.metrics{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-top:0}.metrics article{padding:18px;border-right:1px solid var(--line)}small{display:block;color:var(--muted);font:10px monospace;margin-bottom:8px}.lesson{margin:25px 0;padding:25px;border-left:2px solid var(--c);background:#061621}.lesson p,.note{color:var(--muted);line-height:1.6}.lesson b{color:var(--c)}@media(max-width:900px){.lab{grid-template-columns:1fr}aside{border-left:0}.metrics{grid-template-columns:repeat(2,1fr)}}