:root{color-scheme:light;--ink:#283c37;--muted:#778079;--paper:#eeebe3;--line:#c9cfc2;--gold:#9d7c46;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #856434;outline-offset:5px}button:disabled{cursor:default}#app{height:100svh;min-height:760px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 60% 40%,#f7f5ef 0%,#eeebe3 80%)}header{height:105px;position:absolute;z-index:3;inset:0 4.5vw auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c9cfc280}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.08em}.brand-mark{font-family:Georgia,serif;font-size:40px;font-weight:normal;line-height:1}.brand small{display:block;font-size:7px;letter-spacing:.22em;margin-top:7px}.edition{font-size:8px;letter-spacing:.18em}.edition i{font-family:Georgia,serif;font-size:19px;letter-spacing:0;font-style:normal;margin-left:24px}main{height:100%}.introduction{position:absolute;z-index:2;left:5vw;top:24%;pointer-events:none}.eyebrow{font-size:7px;letter-spacing:.14em;display:flex;align-items:center;gap:8px}.eyebrow span{height:5px;width:5px;border-radius:50%;background:#92764e}h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:400;line-height:1.55;font-size:clamp(32px,3.1vw,51px);letter-spacing:.02em;margin:22px 0 18px}.introduction p{font-size:11px;line-height:2.1;color:#728078;letter-spacing:.045em}.specimen{display:flex;align-items:center;gap:16px;margin-top:44px}.specimen>b{font-family:Georgia,serif;font-style:italic;font-size:39px;font-weight:400;color:#a3a99a}.specimen>div{border-left:1px solid #b9c0b1;padding-left:16px;font-size:11px;letter-spacing:.06em}.specimen small{display:block;font-size:7px;letter-spacing:.17em;color:var(--muted);margin-top:7px}#stage{position:absolute;inset:85px 0 154px 24%;}canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}#loading{position:absolute;left:50%;top:46%;transform:translateX(-50%);font-size:12px;letter-spacing:.12em}#error{position:absolute;inset:35% 10% auto;padding:24px;background:#fff9ef;border:1px solid #a78966;line-height:1.8;font-size:13px}.view-hint{position:absolute;top:24px;bottom:auto;left:50%;transform:translateX(-50%);white-space:nowrap;color:#7f877e;font-size:9px;letter-spacing:.04em}.view-hint>span{margin-right:5px}.view-hint button{border:0;background:transparent;color:#7b8275;font-size:9px;text-decoration:underline;margin-left:9px}.controls{position:absolute;z-index:3;bottom:68px;left:50%;transform:translateX(-50%);width:min(900px,89vw);background:#f7f6f0e8;box-shadow:0 12px 45px #444c3910;border:1px solid #fff;border-radius:3px;padding:16px 22px 18px;backdrop-filter:blur(12px)}.status{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:10px;letter-spacing:.05em;color:#717e73}.counts{display:flex;gap:24px;align-items:center}.counts span{font-size:9px}.counts b{font-family:Georgia,serif;font-weight:400;font-size:21px;margin-right:5px;color:var(--ink);font-variant-numeric:tabular-nums}.control-row{display:flex;gap:17px;align-items:center}.release{display:flex;align-items:center;justify-content:space-between;gap:19px;min-width:247px;border:1px solid var(--ink);background:var(--ink);color:#fffdf2;min-height:50px;padding:0 17px;font-size:12px;letter-spacing:.1em;border-radius:2px;transition:background .2s,transform .2s}.release:hover{background:#3c5648}.release:active{transform:translateY(1px)}.release:disabled{background:#65796a;border-color:#65796a}.release .play{font-family:Georgia,serif;font-size:25px;font-weight:normal}.release .key{font-size:7px;letter-spacing:.08em;opacity:.5}.gate-control{display:flex;align-items:center;gap:12px;margin-left:auto}.control-label{font-size:10px;color:#798275}.segments{display:flex;border:1px solid #cdd2c5;border-radius:2px;padding:3px;gap:3px}.segments button{width:44px;height:36px;border:0;background:transparent;font-size:12px;border-radius:1px}.segments button[aria-pressed=true]{background:#dde4d5;color:#2d4937}.secondary{border:0;background:transparent;white-space:nowrap;font-size:11px;min-height:42px;padding:0 6px;color:#75806f}.secondary span{font-size:20px;vertical-align:-2px;margin-right:5px}.secondary[aria-pressed=true]{background:#e3e8da;color:#254e36;box-shadow:inset 0 -2px #658265}.secondary:hover{color:#263e2a}footer{position:absolute;z-index:4;bottom:0;left:4.5vw;right:4.5vw;height:47px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #c9cfc280;color:#858b80;font-size:9px;letter-spacing:.04em}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary span{margin-left:16px}.about-panel{position:absolute;right:0;bottom:44px;width:360px;max-height:70vh;overflow:auto;background:#faf9f3;box-shadow:0 10px 55px #35412c24;border:1px solid #d5d9ce;padding:25px;color:#596650;line-height:1.9;font-size:11px;letter-spacing:0}.about-panel a{color:#4e614c}.about-panel pre{font-size:10px;line-height:1.5;background:#edf0e7;padding:10px;white-space:pre-wrap}.about-panel details{margin:15px 0}.about-panel b{font-weight:500;color:var(--ink)}
@media(min-width:1500px){#stage{inset:85px 7% 170px 28%}.controls{bottom:80px}h1{font-size:52px}}
@media(max-width:900px) and (min-width:601px){.introduction{left:4vw;top:24%}h1{font-size:32px}.eyebrow{font-size:6px}#stage{left:22%}.controls{width:94vw;padding:14px}.control-row{gap:8px}.release{min-width:200px}.gate-control{gap:7px}.counts{gap:16px}.secondary{font-size:10px}.specimen{margin-top:30px}}
@media(max-width:600px){#app{min-height:810px;height:100svh}header{height:70px;inset:0 6vw auto}.brand{font-size:10px;gap:9px}.brand-mark{font-size:30px}.brand small{font-size:5px;margin-top:5px}.edition{font-size:0}.edition i{font-size:20px;margin:0}.introduction{top:92px;left:7vw}.eyebrow{font-size:5px;letter-spacing:.13em;gap:6px}.eyebrow span{width:4px;height:4px}h1{font-size:28px;line-height:1.45;margin:13px 0 0;letter-spacing:.06em}h1 br{display:none}.introduction p{font-size:9px;line-height:1.65;margin:8px 0}.introduction p br{display:none}.specimen{display:none}#stage{inset:180px -15px 224px -15px}.view-hint{top:auto;bottom:0;font-size:7px}.view-hint button{font-size:7px}.controls{bottom:53px;width:89vw;padding:13px 14px 14px}.status{font-size:8px;margin-bottom:11px;gap:6px;align-items:center;min-height:23px}#status-text{max-width:125px;font-size:8px}.counts{gap:12px}.counts b{font-size:17px;margin-right:2px}.counts span{font-size:7px}.control-row{display:grid;grid-template-columns:1.05fr 1fr;gap:10px}.release{min-width:0;min-height:44px;gap:6px;padding:0 10px;font-size:11px}.release .key{display:none}.release .play{font-size:22px}.gate-control{margin:0;justify-content:flex-end;gap:8px}.control-label{font-size:9px}.segments{padding:2px}.segments button{width:36px;height:34px}.secondary{font-size:10px;min-height:25px}.secondary span{font-size:17px}.reset{border-left:1px solid #d6dbcf}footer{left:6vw;right:6vw;height:38px;font-size:7px}.about-panel{width:88vw;bottom:38px;padding:21px}.about-panel p{font-size:10px}summary span{margin-left:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* The challenge shares the existing action row so the mobile exhibit stays tall. */
.secondary-actions{display:flex;align-items:center;gap:8px}.challenge{font-size:10px;letter-spacing:0;border-bottom:1px solid #bbc5b1;padding:0 7px}.challenge[aria-pressed=true]{color:#486136;border-bottom-color:#648044}.controls[data-challenge=success] #status-text{color:#3f713b;font-weight:600}.controls[data-challenge=finished] #status-text{color:#886a3c}
@media(max-width:900px) and (min-width:601px){.secondary-actions{gap:3px}.secondary-actions .secondary{font-size:9px;padding:0 3px}.release{min-width:185px}.control-row{gap:6px}}
@media(max-width:600px){.secondary-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:3px}.secondary-actions .secondary{font-size:9px;padding:0 2px;min-height:27px}.challenge{border-bottom:0;border-left:1px solid #d6dbcf}.status{min-height:26px}#status-text{line-height:1.55}}