:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  --bg:#11231e;
  --paper:#f4ebd7;
  --muted:#bdc6af;
  --panel:#1a3028;
  --line:#586f5c;
  --gold:#efbf89;
  --leaf:#b6cf9d;
  --mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--bg); }
body { min-height:100vh; margin:0; color:var(--paper); background:
  radial-gradient(ellipse at 10% 0%,#263c31,transparent 55%),
  radial-gradient(ellipse at 95% 20%,#2a3533,transparent 48%),var(--bg); }
main { max-width:1460px; margin:auto; padding:clamp(14px,3vw,38px); }
h1,h2,p { margin:0; }
h1,h2 { font-family:Georgia,serif; font-weight:600; }
h1 { font-size:clamp(32px,5vw,68px); line-height:.98; letter-spacing:-.045em; }
h2 { font-size:clamp(23px,2.05vw,31px); line-height:1.03; letter-spacing:-.027em; }
a { color:var(--gold); }
button { font:inherit; color:var(--paper); }
button:focus-visible,a:focus-visible,summary:focus-visible,.stage:focus-visible {
  outline:2px solid #ffdd9e; outline-offset:3px;
}
.skip,.sr-only {
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.skip:focus { z-index:3; top:10px; left:10px; width:auto; height:auto; padding:12px; overflow:visible; clip-path:none; background:var(--bg); }
.masthead { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:clamp(16px,2.35vw,32px); }
.eyebrow {
  display:block; color:var(--gold); font:700 .69rem/1.15 var(--mono); text-transform:uppercase; letter-spacing:.14em;
}
.masthead .eyebrow { margin-bottom:11px; }
.masthead .eyebrow > span:first-child { color:var(--leaf); }
.edition { color:#bac7ad; }
.atlas-link {
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 13px; border:1px solid var(--line);
  border-radius:9px; background:#223a30; color:var(--paper); font-weight:650; font-size:.84rem;
  text-decoration:none; white-space:nowrap;
}
.atlas-link:hover { border-color:var(--gold); color:#fff2dd; background:#2c4739; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(235px,275px); gap:16px; align-items:start; }
.stage {
  position:relative; isolation:isolate; height:clamp(420px,63vh,750px); min-width:0; overflow:hidden;
  border:1px solid #73806b; border-radius:14px; background:linear-gradient(155deg,#28384b,#81686c 85%);
  box-shadow:0 13px 34px #050b0a65; touch-action:pan-y;
}
.stage[data-ready="true"] { cursor:grab; }
.stage[data-ready="true"].dragging { cursor:grabbing; }
.stage canvas { position:absolute; inset:0; display:block; width:100%; height:100%; image-rendering:pixelated; }
.scene-badge,.scene-guide {
  position:absolute; padding:9px 11px; border:1px solid #b2bca077; border-radius:6px; background:#162b27df;
  color:var(--paper); pointer-events:none;
}
.scene-badge { top:15px; left:15px; font:600 1rem Georgia,serif; }
.scene-badge .eyebrow { margin-bottom:3px; font-size:.57rem; }
.scene-guide { right:15px; bottom:15px; font-size:.74rem; }
.stage-message {
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:15px; padding:24px;
  text-align:center; color:var(--paper); font:600 clamp(18px,2.2vw,30px)/1.2 Georgia,serif;
}
.stage-message > span { font-size:2rem; color:var(--gold); }
.stage-message p { max-width:25ch; }
.control-card {
  border:1px solid var(--line); border-radius:14px; background:linear-gradient(150deg,#263a30,var(--panel) 68%);
  padding:17px; box-shadow:0 10px 26px #050b0a45; min-width:0;
}
.control-card h2 { margin:7px 0 8px; }
.summary { font-size:.88rem; line-height:1.38; color:var(--muted); }
fieldset { min-inline-size:0; border:0; padding:0; margin:12px 0 0; }
.control-group { margin-top:12px; }
.control-group .eyebrow { color:var(--muted); margin-bottom:5px; }
.buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.triple { grid-template-columns:repeat(3,minmax(0,1fr)); }
.camera-buttons { grid-template-columns:repeat(4,minmax(0,1fr)); }
.buttons button {
  min-height:44px; min-width:0; padding:5px; border:1px solid #64806a; border-radius:7px; background:#2a4437;
  font-size:.83rem; font-weight:650; cursor:pointer;
}
.camera-buttons button { font-size:1.22rem; }
.buttons button:hover:not(:disabled) { background:#355546; border-color:var(--gold); }
.buttons button[aria-pressed="true"] { background:#704f44; border-color:#e9ae91; color:#fff0d9; }
.buttons button:disabled { opacity:.58; cursor:default; }
.motion { margin-top:14px; border-top:1px solid #64806a66; padding-top:12px; }
.motion button { background:#21382d; color:var(--leaf); }
footer {
  display:flex; gap:8px 18px; flex-wrap:wrap; justify-content:space-between; margin-top:16px;
  color:var(--muted); font-size:.76rem; line-height:1.45;
}
summary { color:var(--gold); cursor:pointer; }
footer ul { padding-left:18px; }
@media (max-width:850px) {
  .layout { grid-template-columns:minmax(0,1fr) minmax(220px,245px); gap:12px; }
}
@media (max-width:690px) {
  .masthead { align-items:flex-start; gap:9px; }
  .masthead .eyebrow { letter-spacing:.09em; }
  .masthead .atlas-link { font-size:.74rem; padding-inline:8px; }
  .edition { display:none; }
  .layout { grid-template-columns:minmax(0,1fr); }
  .stage { height:clamp(350px,54vh,540px); border-radius:11px; }
  .control-card { padding:13px; }
  fieldset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 9px; margin-top:6px; }
  .control-group { margin-top:6px; }
  .motion { grid-column:1/-1; margin-top:5px; padding-top:8px; }
  .scene-badge { top:9px; left:9px; }
  .scene-guide { right:9px; bottom:9px; }
}