:root {
  color-scheme:dark;
  --ink:#101012;
  --ink-raised:#202024;
  --cream:#eee6df;
  --muted:#b1aaad;
  --gold:#b49364;
  --red:#e5092c;
  --frame-red:#8b2435;
  --rule:#ffffff22;
  font-family:"Chakra Petch","Noto Sans Thai",sans-serif;
  color:var(--cream);
  background:var(--ink);
}
*,*::before,*::after {box-sizing:border-box}
[hidden] {display:none!important}
body {margin:0}
button {font:inherit}
.preview {min-height:100dvh;display:grid;grid-template-rows:minmax(490px,1fr) auto}
.stage {
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(#0606096b,#060609a8),url("./assets/frontier.jpg") center 65%/cover;
}
.stage::after {
  content:"";position:absolute;inset:17px;border:1px solid #5a393b;
  pointer-events:none;z-index:-1;
}
.masthead {position:absolute;left:clamp(27px,4vw,66px);top:clamp(25px,5vh,59px)}
.brand {display:flex;align-items:center;gap:10px;color:var(--gold);margin:0;font-size:11px;font-weight:700;letter-spacing:.24em}
.brand::before {content:"";width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg)}
h1 {margin:5px 0 0;font-size:clamp(20px,3.1vw,42px);line-height:1.18;text-shadow:0 3px 18px #000}
.console {
  position:relative;z-index:1;padding:11px clamp(17px,5vw,80px) 13px;
  background:var(--ink);border-top:1px solid var(--frame-red);
}
.console-nav {display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule)}
.modes,.actions,.options {display:flex;flex-wrap:wrap;gap:5px 10px}
.modes button,.control {
  min-height:39px;padding:6px 10px;background:none;color:var(--muted);
  border:0;border-bottom:1px solid transparent;cursor:pointer;
}
.modes button {position:relative;font-size:14px;font-weight:700}
.modes button[aria-pressed=true] {color:var(--cream);border-bottom-color:var(--red)}
.modes button[aria-pressed=true]::before {content:"◇";color:var(--gold);margin-inline-end:6px}
.control {font-size:13px;color:var(--cream)}
.control:hover,.modes button:hover {color:var(--gold);border-bottom-color:var(--gold)}
.control:focus-visible,.modes button:focus-visible {outline:1px solid var(--gold);outline-offset:2px}
.options {margin-top:5px}
.options .control {padding-inline:14px;background:var(--ink-raised);border-inline-start:1px solid var(--rule)}
.actions {margin-bottom:4px}
.versions {display:flex;border:1px solid #b4936455;border-radius:6px}
.versions .control[aria-pressed=true] {background:var(--frame-red);color:var(--cream)}
.primary {background:var(--red);border:1px solid var(--red);border-radius:999px;color:#fff;padding-inline:14px}
.clear {color:var(--muted)}

.stage .hud {position:absolute}
@media (max-width:680px) {
  .preview {grid-template-rows:minmax(575px,1fr) auto}
  .stage::after {inset:10px}
  .masthead {top:19px;left:23px}
  .console-nav {align-items:start;flex-wrap:wrap}
  .modes,.actions,.options {gap:4px}
  .modes button,.options .control {padding-inline:7px}
}