:root{color-scheme:dark;--night:#071b20;--paper:#edf5e9;--dim:#98b7b5;--line:#375255;--mint:#99f3cb;--yellow:#ffc24b}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--night);color:var(--paper)}
body{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;overflow-x:hidden;overflow-y:auto}
button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--yellow);outline-offset:5px}
button{border:1px solid var(--line);background:transparent;border-radius:9px;padding:12px 16px;transition:background .15s,transform .15s}
button:hover{background:#ffffff0d}button:active{transform:translateY(1px)}
.exhibit{height:100vh;height:100dvh;min-height:580px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 55% 40%,#14363888,transparent 65%);isolation:isolate}
.exhibit-head{display:flex;justify-content:space-between;align-items:flex-start;padding:32px 42px 0;gap:24px;flex:none;z-index:2}
.eyeline{font-size:11px;letter-spacing:.12em;color:var(--dim);margin:0 0 12px}.title-line{display:flex;align-items:center;gap:22px}
h1{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:clamp(40px,5.6vw,72px);line-height:.98;letter-spacing:-.035em;margin:0;font-weight:800}
.found-sticker{background:var(--yellow);color:#17201b;transform:rotate(-7deg);padding:8px 12px;border-radius:4px;font-size:12px;box-shadow:3px 3px 0 #0008;white-space:nowrap}
.exhibit-sub{font-size:13px;margin:16px 0 0;color:var(--dim);line-height:1.6}
.head-actions{display:flex;gap:12px;align-items:center}.head-actions button{min-height:44px;white-space:nowrap}
#sound{border-color:var(--yellow);color:var(--yellow)}#sound[aria-pressed=true]{background:var(--yellow);color:#17201b}.sound-icon{font-size:19px;margin-right:8px}#exit{display:flex;align-items:center;gap:15px}#exit>span:last-child{font-size:25px;line-height:18px}
.stage-wrap{position:relative;flex:1;min-height:280px;margin:12px 0 0;overflow:hidden}
.stage-top{position:absolute;top:16px;left:42px;right:42px;display:flex;justify-content:space-between;gap:16px;color:var(--dim);font-size:12px;pointer-events:none;z-index:1}
.stage-meter{font-variant-numeric:tabular-nums;color:#779b9a}#garden{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline-offset:-6px}
.stage-help{position:absolute;bottom:8px;left:20px;right:20px;margin:0;text-align:center;font-size:12px;color:var(--dim);pointer-events:none;line-height:1.7}.stage-help span{color:#759492}
#bloom-message{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;gap:12px;pointer-events:none;opacity:0;transition:opacity .7s;color:var(--paper);text-shadow:0 3px 24px #031216}
#bloom-message.show{opacity:1}#bloom-message>span{font-size:11px;letter-spacing:.17em;color:var(--mint)}#bloom-message strong{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(27px,4vw,52px);line-height:1.08;letter-spacing:-.025em}
.control-deck{flex:none;padding:0 42px 20px;z-index:2}.controls-row{padding:18px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.scene-picker{display:flex;gap:3px;padding:4px;background:#020e1280;border:1px solid var(--line);border-radius:11px}.scene-picker button{border:0;padding:10px 16px;font-size:14px;border-radius:7px}.scene-picker button.selected{background:var(--paper);color:#10292b}
.tempo-control{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--dim)}.tempo-control input{width:95px;accent-color:var(--mint);cursor:pointer}.tempo-control output{min-width:3ch;font-size:13px;color:var(--paper)}
.pattern-tools{display:flex;gap:10px}.pattern-tools button{font-size:13px}#bloom{background:var(--mint);color:#082427;border-color:var(--mint);font-weight:500;display:flex;align-items:center;gap:14px}#bloom>span{font-size:20px;line-height:1}#bloom:disabled{opacity:.6;cursor:default}
.deck-caption{display:flex;justify-content:space-between;gap:16px;color:#769997;font-size:10px;letter-spacing:.025em}.deck-caption b{color:var(--dim);font-weight:400;margin-left:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){.exhibit-head{padding:26px 26px 0}.stage-top{left:26px;right:26px}.control-deck{padding:0 26px 18px}.tempo-control{display:none}.head-actions{gap:8px}.exit-label{display:none}.controls-row{gap:12px}.pattern-tools{gap:6px}.pattern-tools button{padding:12px}}
@media(max-width:620px){.exhibit{min-height:620px}.exhibit-head{padding:20px 20px 0;gap:10px}.eyeline{font-size:9px;letter-spacing:.055em;max-width:180px;line-height:1.6}.title-line{gap:8px;flex-wrap:wrap}h1{font-size:43px}.found-sticker{font-size:10px;padding:5px 8px;margin-top:5px}.exhibit-sub{font-size:11px;max-width:220px;margin-top:12px}.head-actions{flex-direction:column-reverse;align-items:flex-end;gap:10px}.head-actions button{font-size:11px;padding:10px;min-height:40px}#exit{border:0}.sound-icon{margin-right:5px;font-size:16px}.stage-top{left:20px;right:20px;font-size:10px}.stage-top #scene-caption{max-width:160px}.stage-meter{font-size:9px}.stage-help{font-size:10px}.stage-help span{display:none}.stage-wrap{margin-top:6px;min-height:260px}.control-deck{padding:0 20px 16px}.controls-row{justify-content:center;gap:12px;padding:14px 0}.scene-picker{width:100%}.scene-picker button{flex:1;padding:8px;font-size:13px}.pattern-tools{width:100%;justify-content:center;gap:8px}.pattern-tools button{font-size:12px;padding:10px 12px;min-height:40px}#bloom{flex:1;justify-content:center}.deck-caption{font-size:8px;line-height:1.6}.deck-caption>span:last-child{display:none}.deck-caption b{margin-left:5px}}
@media(max-height:650px) and (min-width:621px){.exhibit{min-height:460px}.exhibit-head{padding-top:18px}h1{font-size:43px}.exhibit-sub{margin-top:8px}.stage-wrap{min-height:220px}.control-deck{padding-bottom:12px}.controls-row{padding:12px 0}.eyeline{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){button,#bloom-message{transition:none}}