:root{color-scheme:dark;--ink:#ebe6d5;--accent:#e6bd75;--line:#ffffff22;--panel:#1c2623}
*{box-sizing:border-box}
body{margin:0;background:#151e1c;color:var(--ink);font:15px/1.5 system-ui,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:15px 26px;border-bottom:1px solid var(--line);background:#151e1c}
.brand,.index,.eyebrow,.stage-label,.hint{font-size:11px;letter-spacing:.14em;font-weight:700}
.brand span,.eyebrow,em{color:var(--accent)}.brand small,.index,.hint{color:#c2c8ba}
main{display:grid;grid-template-columns:minmax(0,1fr) 345px;min-height:calc(100svh - 55px)}
#stage{height:calc(100svh - 55px);min-height:480px;position:sticky;top:0;overflow:hidden;background:radial-gradient(#748d87,#243b39)}
canvas{display:block;position:absolute;inset:0;touch-action:none;width:100%;height:100%}
.stage-label,.tools,.hint,#markers,#error{position:absolute;z-index:1}
.stage-label{top:22px;left:23px;color:white;text-shadow:0 1px 5px #000}.stage-label b{color:var(--accent)}
.tools{bottom:48px;left:22px;display:flex;gap:7px;flex-wrap:wrap}
button{cursor:pointer;color:var(--ink);background:#14201dea;border:1px solid #ffffff38;border-radius:4px;font:600 12px system-ui;padding:9px 11px}
button:hover,button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hint{bottom:20px;left:23px;text-shadow:0 1px 6px #000;color:#fff;letter-spacing:.05em}
#markers{inset:0;pointer-events:none}.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border-radius:50%;width:31px;height:31px;padding:0;box-shadow:0 0 0 4px #13201e44}
#error{top:42%;left:10%;right:10%;padding:20px;background:#14201d;border:1px solid var(--line)}
aside{padding:26px 24px;background:var(--panel);border-left:1px solid var(--line)}
h1{font:normal clamp(50px,5vw,81px)/.88 Georgia,serif;margin:18px 0 22px;letter-spacing:-.065em}h2{font:normal 26px Georgia,serif;margin:5px 0}
.intro,p{color:#d0d4c9}.rule{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
nav{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}
nav button{text-align:left}
article{border-left:2px solid var(--accent);padding:10px 13px;background:#141c19;margin:16px 0}
article p{margin:6px 0;font-size:13px}
details{font-size:12px;color:#c9d2c6;border-top:1px solid var(--line);padding-top:13px}
summary{cursor:pointer}a{color:var(--accent)}
@media(max-width:820px){main{display:block}#stage{position:relative;height:62svh;min-height:340px}aside{border:0}h1 br{display:none}h1 em{margin-left:.12em}header{padding:12px 15px}}
@media(max-width:450px){.index{display:none}.tools,.hint,.stage-label{left:12px}}