:root {
  --bg: #0a0a0a;
  --fg: #d8d3c8;
  --dim: #6f6a60;
  --line: #262420;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.5 ui-monospace, "JetBrains Mono", Menlo, monospace; }
#app { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.hidden { display: none !important; }
.panel { width: min(520px, 100%); }
h1 { font-weight: 400; font-size: 28px; margin: 0 0 4px; letter-spacing: 0.08em; }
p { margin: 0 0 20px; color: var(--dim); }
p.small { font-size: 13px; margin-top: 16px; }
a { color: var(--dim); }
.drop { display: block; border: 1px dashed var(--dim); padding: 48px 20px; text-align: center; cursor: pointer; margin-bottom: 20px; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--fg); background: #111; }
.drop input { display: none; }
.row { display: flex; gap: 20px; flex-wrap: wrap; }
.row label, #debug label { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 13px; }
select, button, input[type=range] { font: inherit; background: #111; color: var(--fg); border: 1px solid var(--line); padding: 6px 10px; }
button { cursor: pointer; }
button:hover { border-color: var(--dim); }

#view { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#canvas { display: block; max-width: 100%; box-shadow: 0 0 60px #000; }
#hud { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--dim); flex-wrap: wrap; justify-content: center; }
#bar { width: 160px; height: 3px; background: var(--line); }
#bar i { display: block; height: 100%; width: 0; background: var(--fg); transition: width .3s linear; }
#epitaph { color: var(--dim); font-size: 14px; margin: 0; letter-spacing: 0.04em; }
#debug { font-size: 12px; color: var(--dim); display: none; }
#debug.on { display: block; }
#debug summary { cursor: pointer; list-style: none; text-align: center; }
#debug summary::before { content: "· "; }
#debug label { flex-direction: row; align-items: center; gap: 8px; margin-top: 8px; }
#debug input[type=range] { width: 260px; padding: 0; }