:root{font-family:system-ui,sans-serif;color:#263e3a;background:#f9f8f3}*{box-sizing:border-box}body{margin:0}header{height:66px;border-bottom:1px solid #d9ddd3;padding:0 30px;display:flex;align-items:center;justify-content:space-between;gap:15px}header a{text-decoration:none;color:inherit;letter-spacing:.12em;font-size:12px;font-weight:800}header a span{color:#7b8880;font-weight:500}.version{font-size:10px;letter-spacing:.14em;color:#69776e}main{display:grid;grid-template-columns:320px 1fr;min-height:calc(100dvh - 66px)}.panel{padding:32px 28px;border-right:1px solid #d9ddd3}.eyebrow{text-transform:uppercase;color:#a46f36;letter-spacing:.16em;font-size:10px;font-weight:750}h1{font-family:Georgia,serif;font-weight:400;font-size:38px;line-height:1.1;letter-spacing:-.04em;margin:20px 0}.intro{font-size:13px;line-height:1.8;color:#69766c}h2{font-size:10px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;margin:32px 0 12px}.views{display:grid;gap:5px}button{font:inherit;cursor:pointer}.views button{display:flex;align-items:center;gap:15px;text-align:left;border:1px solid transparent;border-radius:6px;background:transparent;padding:12px 10px;font-size:12px;color:#435a50}.views button span{font-size:10px;color:#8c9b8d}.views button b{margin-inline-start:auto;font-weight:400}.views button[aria-pressed=true]{background:#294b40;color:#fff}.views button[aria-pressed=true] span{color:#b7cbb7}.views button:hover{border-color:#afbdab}.options{display:grid;gap:13px;font-size:12px;border-top:1px solid #d9ddd3;margin-top:24px;padding-top:22px}input{accent-color:#325546;margin-inline-end:7px}.note{font-size:12px;line-height:1.7;color:#768174;margin-top:24px}.about{font-size:12px;line-height:1.7;margin-top:24px}.about summary{cursor:pointer}.about a{color:#325546}.stage{position:relative;min-height:680px;background:#e4e8dd}#viewport{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%}.stage-label{position:absolute;top:28px;left:28px;display:flex;align-items:center;gap:9px;pointer-events:none;font-size:10px;letter-spacing:.15em;color:#536353}.dot{width:6px;height:6px;border-radius:50%;background:#72946c}.zoom{position:absolute;right:24px;bottom:78px;display:grid;gap:3px}.zoom button{background:#fafaf4dd;border:1px solid #d5dccc;border-radius:5px;width:40px;height:40px;font-size:22px;color:#344e3b}.legend{position:absolute;bottom:22px;left:28px;right:28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:9px;color:#768374;letter-spacing:.08em;pointer-events:none}.legend b{display:block;font-size:11px;font-weight:500;color:#4d604f;letter-spacing:0;margin-top:4px}#status{position:absolute;left:28px;top:60px;font-size:13px;max-width:80%;background:#f9f8f3;padding:12px;border-radius:6px}#status:empty{display:none}:focus-visible{outline:3px solid #c08b42;outline-offset:3px}@media(max-width:800px){header{padding:0 18px}.version{display:none}main{display:flex;flex-direction:column}.stage{order:-1;height:62dvh;min-height:400px}.panel{padding:24px;border-right:0}h1 br{display:none}h1{font-size:32px}.views{grid-template-columns:repeat(2,1fr)}.views button{border-color:#d9ddd3}.legend span:last-child{display:none}.options{grid-template-columns:repeat(2,1fr)}.stage-label{top:20px;left:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.stage-label{background:#f9f8f3e8;padding:9px 12px;border-radius:5px}.legend{background:#f9f8f3e8;padding:10px 14px;border-radius:6px}