:root{--paper:#efeae0;--vermilion:#c0392b;--indigo:#2c3e50;--ochre:#e1a95f;--sage:#8fa68e;--ink:#3a3227}*{box-sizing:border-box}html,body{height:100%}html{overflow:hidden}body{min-height:100svh;color:var(--ink);-webkit-font-smoothing:antialiased;background:#d9cdb2;margin:0;font-family:Inter,system-ui,sans-serif;overflow:clip hidden}.stage{position:fixed;inset:0}#c{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}#c:active{cursor:grabbing}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.title{z-index:2;pointer-events:none;text-align:center;--rev:0;clip-path:inset(0 calc((1 - var(--rev)) * 100%) 0 0);opacity:calc(min(1, var(--rev) * 1.4));flex-direction:column;align-items:center;gap:.15em;display:flex;position:absolute;top:clamp(20px,7vh,66px);left:50%;translate:-50%}.title__kanji{color:var(--indigo);text-shadow:0 2px 10px #2c3e5024;font-family:Shippori Mincho,serif;font-size:clamp(3rem,13vmin,7rem);font-weight:800;line-height:.9}.title__romaji{letter-spacing:.55em;text-indent:.55em;color:var(--vermilion);font-family:Shippori Mincho,serif;font-size:clamp(.7rem,2.4vmin,1.05rem);font-weight:500}.control{z-index:3;flex-direction:column;align-items:center;gap:13px;width:min(78vw,430px);display:flex;position:absolute;bottom:clamp(24px,7vh,58px);left:50%;translate:-50%}.slider{cursor:pointer;touch-action:none;outline:none;align-items:center;width:100%;height:34px;display:flex;position:relative}.slider__track{background:#3a32272e;border-radius:999px;width:100%;height:6px;position:relative;overflow:hidden}.slider__fill{background:linear-gradient(90deg, var(--sage), var(--vermilion));border-radius:999px;width:0%;position:absolute;inset:0 auto 0 0}.slider__handle{background:var(--vermilion);cursor:grab;border:3px solid #fbf7ee;border-radius:50%;width:26px;height:26px;margin:0;padding:0;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);box-shadow:0 3px 10px #3a32274d}.slider__handle:active{cursor:grabbing}.slider:focus-visible .slider__handle{box-shadow:0 0 0 4px #fbf7eecc,0 3px 10px #3a322752}.hint{letter-spacing:.05em;color:#3a32279e;align-items:center;gap:9px;margin:0;font-size:.8rem;transition:opacity .5s,transform .5s;animation:2.6s ease-in-out infinite bob;display:flex}.hint__grip{border:2px solid #3a32278c;border-radius:50%;width:13px;height:13px;position:relative}.hint__grip:after{content:"";background:#3a32278c;border-radius:50%;position:absolute;inset:3px}.hint.is-gone{opacity:0;pointer-events:none;transform:translateY(6px)}@keyframes bob{50%{transform:translateY(-4px)}}.mute{z-index:5;width:44px;height:44px;color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#fbf7ee80;border:1px solid #3a322729;border-radius:50%;place-items:center;transition:background .2s,transform .2s,border-color .2s;display:grid;position:fixed;top:clamp(14px,3vh,26px);right:clamp(14px,3vw,26px)}.mute:hover{background:#fbf7eebf;transform:scale(1.05)}.mute:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.mute svg{fill:currentColor;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;fill-rule:evenodd;width:22px;height:22px}.mute .wave{fill:none;transition:opacity .2s}.mute[aria-pressed=false] .wave{opacity:.15}.mute[aria-pressed=true] .wave{opacity:1}@media (prefers-reduced-motion:reduce){.hint{animation:none}.mute{transition:none}}