:root{color-scheme:dark;--bg:#0c2025;--panel:#133139;--ink:#f1e7cc;--muted:#9eb8b7;--mint:#91d8be;--gold:#e6b675}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0,#21454b 0,transparent 55%),var(--bg);color:var(--ink);font:16px/1.5 system-ui,sans-serif}main{max-width:1330px;padding:28px 44px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #477071;padding-bottom:18px}.brand{text-decoration:none;color:var(--ink);font-size:21px;letter-spacing:5px;font-weight:800}.brand span{display:block;font-size:9px;letter-spacing:4px;color:var(--mint)}.edition,.eyebrow{font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:650}.intro{display:flex;align-items:center;justify-content:space-between;padding:24px 0 28px}.intro p{color:var(--muted);margin:8px 0}h1{font:clamp(30px,3.3vw,48px)/1.08 Georgia,serif;letter-spacing:-1px;margin:10px 0 16px}h2{font:25px/1.2 Georgia,serif;margin:4px 0 12px}.progress{border:1px solid #416168;padding:22px 28px;border-radius:50%;text-align:center}.progress strong{display:block;font:32px Georgia}.progress span{font-size:10px;color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}.evidence,aside{border:1px solid #3a5a60;border-radius:16px;background:#102b32;overflow:hidden}.evidence{padding:22px;align-self:start}.panelhead{display:flex;justify-content:space-between;gap:10px;align-items:center}.panelhead select{width:120px}.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:#d6d0b8;margin:16px 0}.mint{color:var(--mint)}canvas{display:block;width:100%;height:auto;background:#0a2026;border:1px solid #35515a;border-radius:10px;touch-action:none;cursor:crosshair}.measure{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin:10px 0}.fieldnote{font:italic 16px/1.5 Georgia;color:#c6cfbd;min-height:48px}.toolbar{display:flex;gap:8px;flex-wrap:wrap}button,select{font:inherit;border:1px solid #4e7075;background:#1a3e46;color:var(--ink);border-radius:7px;padding:10px 12px;cursor:pointer}button:hover{background:#305a5b}button:disabled{opacity:.45;cursor:default}.primary{background:var(--mint);color:#122d2c;border-color:var(--mint);font-weight:700}.primary:hover{background:#b8ead4}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}#feedback{font-size:14px;min-height:42px;color:var(--mint)}.portrait{width:100%;height:225px;background-image:url('visitors.webp');background-size:200% 200%;border-bottom:1px solid #42646a}.controls{padding:20px}.controls label{display:block;font-size:13px;color:var(--ink);margin-top:18px}.controls output{float:right;color:var(--mint);font-weight:700}.controls input[type=range]{width:100%;accent-color:var(--mint)}.controls select{width:100%;font-size:12px}.small,.help{color:var(--muted);font-size:12px}.help{font-size:11px;margin:1px 0}.controls .eyebrow{margin:0 0 8px}details{max-width:900px;margin:26px 0;color:var(--muted);font-size:14px}summary{color:var(--ink);cursor:pointer}footer{border-top:1px solid #36555b;padding:20px 0;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}a{color:var(--mint)}[hidden]{display:none!important}@media(max-width:800px){main{padding:20px}.workspace{grid-template-columns:1fr}aside{display:grid;grid-template-columns:35% 65%}.portrait{height:100%;background-size:auto 200%;background-position:center!important}.controls{padding:16px}.intro{padding:20px 0}.edition{display:none}.progress{padding:18px}.evidence{padding:14px}.legend{gap:8px;font-size:10px}footer{display:block}.measure{flex-direction:column}}@media(max-width:480px){main{padding:12px}aside{display:block}.portrait{height:210px;background-size:200% 200%;background-position:var(--pos)!important}.intro h1{font-size:30px}.progress{display:none}.panelhead h2{font-size:21px}.toolbar button{padding:10px;font-size:12px}}
.portrait{height:auto;aspect-ratio:1;background-size:200% 200%;background-position:var(--pos)!important;align-self:start}

#boardframe{overflow-x:auto;border-radius:10px}.zoom{font-size:12px;margin:0 0 10px}.zoomed canvas{width:900px;max-width:none;touch-action:pan-x}