:root {
  --panel: #0b0a0d;
  --panel-text: #f5efe5;
  --muted: #9f96a3;
  --accent: #ff7546;
  --line: #ffffff1c;
  --field: #060507;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { color: var(--panel-text); font-family: system-ui, sans-serif; }
button, input, textarea { font: inherit; }

.dream { position: fixed; inset: 0; background: #000; overscroll-behavior: none; }
canvas { display: block; width: 100%; height: 100%; cursor: none; touch-action: none; }
.dream[data-menu="open"] canvas { cursor: default; }
.fatal { position: fixed; inset: 0; display: grid; place-items: center; padding: 2rem; background: #070709; color: #ffbe9d; font: 13px/1.6 ui-monospace, monospace; }
.fatal[hidden] { display: none; }

.deck {
  position: fixed; z-index: 10; inset: 0 0 0 auto; width: min(430px, 94vw);
  overflow-y: auto; padding: 22px 18px 32px; border-left: 1px solid var(--line);
  background: var(--panel); box-shadow: -24px 0 80px #000b;
  transform: translateX(105%); visibility: hidden;
  transition: transform .24s ease, visibility 0s linear .24s;
  scrollbar-width: thin; scrollbar-color: #ffffff24 transparent;
}
.deck.open { transform: translateX(0); visibility: visible; transition: transform .24s ease; }
.deck::before { content: ""; position: fixed; z-index: -1; inset: 0 430px 0 -100vw; background: #0007; opacity: 0; pointer-events: none; transition: opacity .2s; }
.deck.open::before { opacity: 1; }
.close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; background: transparent; color: #c4bac8; font-size: 26px; cursor: pointer; }
.kicker { margin: 0; color: var(--accent); font: 600 10px/1 ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #756f78; }
.status-dot.live { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
h1 { margin: 9px 0 6px; font-size: 27px; font-weight: 540; letter-spacing: -.04em; }
.note { margin: 0; color: var(--muted); font: 11px/1.55 ui-monospace, monospace; }
.color-note { margin-bottom: 11px; }
section { margin-top: 22px; padding-top: 20px; border-top: 1px solid #ffffff14; }
h2, summary { margin: 0 0 14px; color: #d8cfdc; font: 600 10px/1 ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
summary { cursor: pointer; }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
button, .wide-button { min-height: 36px; border: 1px solid var(--line); border-radius: 3px; background: #171419; color: #dcd3df; font: 11px/1 ui-monospace, monospace; cursor: pointer; }
button:hover { background: #272129; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
button.active { border-color: var(--accent); background: #2b1712; color: #ff9975; }
.range-row, .toggle-row, .color-row { display: grid; grid-template-columns: 104px 1fr 50px; align-items: center; gap: 12px; min-height: 40px; color: #aaa1af; font: 11px/1.2 ui-monospace, monospace; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
input[type="checkbox"] { width: 32px; accent-color: var(--accent); }
output { color: #ff8b62; text-align: right; font-variant-numeric: tabular-nums; }
.colors { display: grid; gap: 7px; }
.color-row { grid-template-columns: 104px 46px 1fr; }
.color-row input[type="color"] { width: 46px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--field); cursor: pointer; }
.color-row code { color: #c3b8c7; }
.wide-button { width: 100%; margin-top: 10px; }
.text-input, .shader { width: 100%; border: 1px solid #ffffff20; border-radius: 3px; outline: none; background: var(--field); color: #d8d0da; font: 11px/1.5 ui-monospace, monospace; }
.text-input { height: 36px; margin-bottom: 8px; padding: 0 10px; }
.shader { min-height: 230px; margin-bottom: 8px; padding: 10px; resize: vertical; tab-size: 2; }
.text-input:focus, .shader:focus { border-color: var(--accent); }
.shader-error { max-height: 110px; overflow: auto; color: #ff9f9f; white-space: pre-wrap; font: 10px/1.45 ui-monospace, monospace; }

@media (prefers-reduced-motion: reduce) {
  canvas { display: none; }
  .dream::after { content: "Motion disabled by system preference. Press M to open controls."; position: fixed; inset: 0; display: grid; place-items: center; padding: 2rem; background: #08070a; color: #b8aebc; text-align: center; font: 12px/1.6 ui-monospace, monospace; }
}