/* 错觉博物馆: gallery frames, measurement meter, countdown ring and the Stroop board. */
.exhibit{position:relative;padding:22px;border-radius:10px;background:linear-gradient(145deg,#6b4a2b,#b08a55 30%,#6b4a2b 60%,#a37e4a);box-shadow:0 30px 60px -30px rgb(0 0 0/.6),inset 0 0 0 2px rgb(255 240 200/.35)}
.exhibit::before{content:"";position:absolute;left:12%;right:12%;top:-26px;height:60px;background:radial-gradient(50% 100% at 50% 0,rgb(255 236 180/.55),transparent);pointer-events:none;filter:blur(4px)}
.exhibit-stage{position:relative;background:#fff;padding:10px;box-shadow:inset 0 0 0 1px rgb(0 0 0/.15),inset 0 4px 14px rgb(0 0 0/.25)}
.exhibit-stage>svg{display:block;width:100%;height:auto;transition:opacity .3s;touch-action:manipulation;border-radius:0}
.exhibit-stage>svg.ghost{position:absolute;left:10px;top:10px;width:calc(100% - 20px);pointer-events:none;transition:opacity .8s ease}
.exhibit-stage>.interactive-canvas{border-radius:0;border:0}
.exhibit-plaque{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px auto 0;max-width:520px;padding:8px 18px;border-radius:4px;background:linear-gradient(#f3e6c4,#d9c18c);color:#3d2b16;box-shadow:0 4px 10px rgb(0 0 0/.3)}
.exhibit-plaque b{font-size:16px}.exhibit-plaque span{font-size:13.5px;opacity:.8}
.exhibit.plain{padding:14px}.exhibit.plain .exhibit-stage{padding:0;background:transparent;box-shadow:none}
.bias-meter{margin-top:12px;padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.bias-meter svg{width:100%;max-width:560px;height:auto;display:block;margin:0 auto}
.bias-meter p{margin:6px 0 0;font-size:15px;color:var(--muted)}
.bm-track{fill:var(--soft)}.bm-truth{stroke:var(--good);stroke-width:4}
.bm-label{font:700 15px var(--font);fill:var(--muted);text-anchor:middle}.bm-label.you{fill:var(--accent)}
.bm-mark circle{fill:var(--accent);stroke:var(--panel);stroke-width:4}
.bm-mark{transition:transform 1.2s cubic-bezier(.34,1.56,.64,1)}
.countdown .cd-bg{fill:rgb(255 255 255/.85);stroke:#d9d4c6;stroke-width:6}
.countdown .cd-fg{fill:none;stroke:#e07a45;stroke-width:6;transform:rotate(-90deg);transform-origin:840px 60px;stroke-linecap:round}
.countdown .cd-text{font:800 22px system-ui,sans-serif;fill:#2b3a4c;text-anchor:middle}
.stroop-board{display:grid;gap:16px;padding:24px;background:#fbfaf6;border-radius:6px;text-align:center}
.stroop-word{font:900 clamp(64px,10vw,110px)/1.2 var(--font);letter-spacing:.1em;color:#2b3a4c}
.stroop-word.pop{animation:pop .35s var(--spring)}
.stroop-progress{height:8px;border-radius:9px;background:#e9e4d6;overflow:hidden}.stroop-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d5424e,#386bd1);transition:width .3s}
.stroop-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stroop-key{border:0;border-radius:16px;padding:16px 8px;font-size:18px;font-weight:800;color:#fff;background:var(--key);box-shadow:0 8px 18px -10px var(--key);transition:transform .2s var(--spring)}
.stroop-key:active{transform:scale(.95)}
.stroop-board .inline-note{color:#5a6472}
@media (max-width:720px){.exhibit{padding:10px}.exhibit-stage{padding:5px}.exhibit-stage>svg.ghost{left:5px;top:5px;width:calc(100% - 10px)}.exhibit-plaque b{font-size:14.5px}.exhibit-plaque span{display:none}.stroop-keys{grid-template-columns:1fr 1fr}.stroop-board{padding:14px}}