:root{color-scheme:dark;--ivory:#f4e9d2;--muted:#c7b89e;--gold:#edb96f;--line:#75604088;--panel:#191512f5}
*{box-sizing:border-box}body{margin:0;background:#130e0c;color:var(--ivory);font:14px/1.5 system-ui,sans-serif}
main{height:100vh;height:100dvh;position:relative;overflow:hidden;isolation:isolate}
#viewport{position:absolute;inset:0}canvas{display:block;touch-action:none}
#pins{position:absolute;inset:0;pointer-events:none;z-index:1}
.pin{pointer-events:auto;position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:35px;height:35px;padding:0;color:#ffe8b7;background:#21140de8;border:1px solid #d7a361;font:700 11px system-ui;box-shadow:0 0 0 4px #d7a36127}
header{position:absolute;top:clamp(20px,5vw,62px);left:clamp(18px,5vw,66px);pointer-events:none;text-shadow:0 3px 22px #120a05,0 2px 3px #100a05}
.eyebrow{letter-spacing:.18em;color:var(--gold);font-size:10px;font-weight:750}.eyebrow span{display:inline-block;width:19px;height:1px;vertical-align:middle;background:currentColor;margin:0 .5em}
h1,h2{font:normal 2rem/1.04 Georgia,serif;margin:.25em 0}h1{font-size:clamp(39px,6.3vw,105px);letter-spacing:-.05em}header p{margin:9px 0;color:#ffdb9f;font-size:11px;letter-spacing:.15em}header p span{margin:0 .6em}
aside{position:absolute;right:clamp(16px,3.5vw,54px);top:50%;transform:translateY(-39%);width:min(320px,29vw);max-height:68%;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:17px;box-shadow:0 20px 52px #0007;z-index:2}
nav,.actions{display:flex;gap:6px;flex-wrap:wrap}nav{border-bottom:1px solid var(--line);padding-bottom:12px}
button{font:inherit;font-size:12px;font-weight:650;cursor:pointer;border:1px solid var(--line);border-radius:6px;background:#201914;color:var(--ivory);padding:7px 10px}button:hover,button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.entry{padding:15px 0 12px}.entry p,details p{margin:.55em 0;color:var(--muted)}.primary{background:#e7b775;color:#21150b;border-color:#e7b775}.primary:hover{background:#f7cd91;color:#21150b}
.timeline{display:flex;justify-content:space-between;gap:5px;margin-top:15px;font-size:10px;letter-spacing:.09em;color:var(--muted)}output{color:var(--gold)}input{width:100%;accent-color:#dda658;margin:5px 0 0}details{font-size:12px;margin-top:10px;border-top:1px solid var(--line);padding-top:9px}summary,a{color:var(--gold)}summary{cursor:pointer}
footer{position:absolute;bottom:18px;left:clamp(17px,5vw,66px);right:clamp(17px,3.5vw,54px);display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}footer button{pointer-events:auto}#hint{font-size:10px;letter-spacing:.15em;text-shadow:0 1px 3px black}#error{position:absolute;inset:40% 15% auto;z-index:3;background:#311a12;padding:20px}
@media(max-width:760px){header{top:17px;left:15px}h1{font-size:clamp(36px,8vw,58px)}aside{top:auto;bottom:55px;left:12px;right:12px;width:auto;transform:none;padding:10px;max-height:42%}.entry{padding:6px 0}.entry p{font-size:12px}h2{font-size:21px}nav{padding-bottom:6px}.timeline{margin-top:8px}footer{bottom:11px}#hint{display:none}footer div{margin-left:auto}}