:root { color-scheme: dark; --bg:#111314; --ink:#c5c9ca; --muted:#8b9498; --amber:#ffab46; --line:#303638; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
main { max-width:1400px; margin:auto; padding:30px 34px 20px; }
header { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.brand { margin:0 0 8px; color:var(--amber); font-size:11px; letter-spacing:.22em; font-weight:700; }
h1 { font-size:clamp(20px,2.1vw,28px); margin:0; font-weight:400; letter-spacing:-.035em; }
.instruction { color:var(--muted); font-size:12px; line-height:1.7; margin:0; }
.instruction span { color:var(--ink); }
#stage { width:100%; aspect-ratio:3/2; min-height:360px; position:relative; margin:2px 0 0; }
canvas { display:block; width:100%; height:100%; outline:none; touch-action:pan-y; }
canvas:focus-visible { outline:1px solid var(--amber); outline-offset:3px; }
#loading, #error { position:absolute; top:45%; left:0; right:0; text-align:center; font-size:14px; color:var(--muted); padding:20px; }
#error { color:#ffc48c; max-width:680px; margin:auto; background:var(--bg); }
[hidden] { display:none !important; }
.controls { border-top:1px solid var(--line); padding:18px 0 0; }
#asset-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
button { color:var(--muted); background:#151819; border:1px solid var(--line); border-radius:4px; min-height:43px; padding:8px 12px; font:inherit; font-size:12px; text-align:left; cursor:pointer; transition:border-color .15s,color .15s,background .15s; }
button:hover:not(:disabled) { color:var(--ink); border-color:#60696d; }
button:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
button:disabled { opacity:.45; cursor:wait; }
button[aria-pressed="true"] { color:var(--amber); border-color:#b37132; background:#241c14; }
kbd { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:8px; border:1px solid currentColor; border-radius:3px; font:11px Arial,sans-serif; opacity:.9; }
.status-row { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:12px; }
#status { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
#all-off { min-height:36px; white-space:nowrap; background:transparent; border-color:transparent; padding-right:4px; }
footer { display:flex; justify-content:space-between; gap:16px; font-size:10px; line-height:1.5; color:#697479; border-top:1px solid #242a2c; margin-top:12px; padding-top:13px; }
@media(max-width:650px) {
  main { padding:22px 16px 16px; }
  header { display:block; }
  .instruction { margin-top:12px; font-size:12px; }
  .instruction br { display:none; }
  #stage { width:calc(100% + 16px); height:290px; min-height:0; aspect-ratio:auto; margin:6px -8px 0; }
  #asset-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  button { padding:8px; font-size:11px; min-height:44px; }
  kbd { margin-right:5px; }
  footer { flex-direction:column; gap:3px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }