@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('assets/instrument-serif-regular.ttf') format('truetype')}
:root{--blue:#31578e;--blue-strong:#284b7d;--blue-wash:#e1eaf7;--blue-border:#bacce6;font-family:ui-rounded,'Avenir Next','Segoe UI',sans-serif;color:var(--blue);background:#f3f0e7;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#f3f0e7;transition:background .4s}button{-webkit-tap-highlight-color:transparent;font:inherit;color:inherit;cursor:pointer}button:focus-visible,#scene:focus-visible{outline:3px solid #6488bb;outline-offset:5px}.playground{height:100svh;min-height:460px;position:relative;overflow:hidden}h1{position:absolute;top:max(28px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-family:'Instrument Serif',Georgia,serif;font-size:38px;font-weight:400;letter-spacing:.01em;line-height:1.2;margin:0;z-index:2;pointer-events:none}.tools{position:absolute;right:30px;top:max(21px,env(safe-area-inset-top));display:flex;gap:8px;z-index:3}.icon-button{display:grid;place-items:center;width:43px;height:43px;border:1px solid #c4d1e388;border-radius:50%;background:#ffffffa8;transition:background .15s,transform .15s}.icon-button:hover{background:#fff;transform:translateY(-2px)}.icon-button svg{width:20px;height:20px}.sound-slash{display:none}#sound[aria-pressed=false] .sound-waves{display:none}#sound[aria-pressed=false] .sound-slash{display:block}#scene{position:absolute;inset:85px 0 115px;outline-offset:-8px;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}#scene canvas{display:block;width:100%;height:100%}#loading{position:absolute;width:30px;height:30px;top:50%;left:50%;border:2px solid #d3deee;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}#error{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);max-width:330px;text-align:center;line-height:1.6;font-size:16px}.picker{position:absolute;left:50%;transform:translateX(-50%);bottom:max(32px,env(safe-area-inset-bottom));display:flex;gap:4px;padding:6px;background:#f7f9fdde;border:1px solid #c8d5e8aa;box-shadow:0 8px 28px #31578e12,0 2px 5px #31578e05;border-radius:999px;max-width:calc(100vw - 24px);backdrop-filter:blur(16px);z-index:3}.choice{border:1px solid transparent;background:transparent;border-radius:999px;padding:12px 22px;min-height:46px;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:15px;font-weight:500;color:var(--blue);transition:background .2s,box-shadow .2s,transform .2s}.choice:hover{background:#edf2fa}.choice.active{background:var(--blue-wash);color:var(--blue-strong);border-color:var(--blue-border);box-shadow:0 2px 6px #31578e0d}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:700px){h1{top:23px;left:24px;transform:none;font-size:32px}.tools{right:18px;top:22px}.icon-button{width:40px;height:40px}#scene{inset:85px 0 105px}.picker{bottom:max(22px,env(safe-area-inset-bottom));gap:2px;padding:5px;border-radius:999px;max-width:calc(100vw - 24px)}.choice{padding:11px 16px;font-size:14px;border-radius:999px;min-width:0}}@media(max-height:550px) and (min-width:601px){#scene{inset:30px 0 76px}.picker{bottom:13px}.choice{padding:10px 14px}h1{top:21px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}#loading{animation:none}}