:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #090b12;
  color: #e7edf8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #18203b, #090b12 55%); }
main { width: min(1500px, 100%); margin: 0 auto; padding: 20px; }
header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
h1 { margin: 2px 0 0; font-size: clamp(1.5rem, 3vw, 2.6rem); }
h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: #8ea5d5; margin: 22px 0 8px; }
.eyebrow { margin: 0; color: #73e6bd; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
.session { display: flex; align-items: center; gap: 8px; }
#status { padding: 7px 12px; border: 1px solid #334369; border-radius: 999px; color: #92f0cf; background: #101728; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; }
canvas { width: 100%; min-height: 420px; background: #0c101d; border: 1px solid #2f3b5c; border-radius: 12px; cursor: crosshair; }
aside { padding: 14px; border: 1px solid #283654; background: rgba(11, 16, 29, 0.92); border-radius: 12px; overflow: auto; }
aside p, pre { color: #bdc8df; font-size: 0.82rem; line-height: 1.45; white-space: pre-wrap; }
#actions { display: flex; gap: 7px; flex-wrap: wrap; }
button { color: #e7edf8; background: #1c2947; border: 1px solid #415782; border-radius: 7px; padding: 8px 11px; font: inherit; cursor: pointer; }
button:hover, button.active { background: #275b68; border-color: #70d7c2; }
.welcome { margin-top: 36px; padding: clamp(28px, 6vw, 80px); min-height: 420px; border: 1px solid #544734; border-radius: 16px; background: radial-gradient(ellipse at 85% 25%, #354432 0%, #171d20 42%, #0c1019 85%); }
.welcome h2 { max-width: 700px; margin: 24px 0; color: #f2e6ca; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.08; text-transform: none; letter-spacing: -0.04em; }
.welcome p { max-width: 620px; line-height: 1.7; color: #c5cbbb; }
.welcome .welcome-hint { color: #92a59c; font-size: .88rem; margin-top: 32px; }
details { margin-top: 24px; font-size: .8rem; color: #92a59c; }
summary { cursor: pointer; }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; } aside { max-height: none; } }