.touch-layer{z-index:60;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:none;position:fixed;inset:0}.touch-layer.on{display:block}.touch-layer.on:not(.playing)>*{display:none}.touch-layer.on.playing{pointer-events:auto}.touch-base,.touch-knob{pointer-events:none;opacity:0;border-radius:50%;transition:opacity .15s;position:absolute;top:0;left:0}.touch-base{background:radial-gradient(circle,#ffffff0d,#ffffff05 60%,#0000 72%);border:1.5px solid #ffffff47;width:140px;height:140px;margin:-70px 0 0 -70px}.touch-knob{background:#39e1ff2e;border:1.5px solid #39e1ffd9;width:58px;height:58px;margin:-29px 0 0 -29px;box-shadow:0 0 22px #39e1ff73}.touch-layer.stick-on .touch-base,.touch-layer.stick-on .touch-knob{opacity:1}.touch-layer.playing:not(.stick-on):before{content:"";left:max(28px, env(safe-area-inset-left));pointer-events:none;border:1px dashed #ffffff29;border-radius:50%;width:112px;height:112px;position:absolute;bottom:34px}.touch-btn{right:max(22px, env(safe-area-inset-right));bottom:calc(26px + var(--slot) * 92px);color:#f3efe6db;letter-spacing:.18em;text-indent:.18em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-tap-highlight-color:transparent;background:#0a0b0e6b;border:1.5px solid #ffffff52;border-radius:50%;width:76px;height:76px;font:700 12px/1 Saira Variable,system-ui,sans-serif;transition:transform 80ms,background .12s,border-color .12s;position:absolute}.touch-btn.ready{color:#e2c8ff;border-color:#c08bffd9;box-shadow:0 0 18px #c08bff59}.touch-btn.pressed{background:#39e1ff38;border-color:#39e1ffe6;transform:scale(.92)}.touch-pause{left:max(16px, env(safe-area-inset-left));top:max(14px, env(safe-area-inset-top));-webkit-tap-highlight-color:transparent;background:#0a0b0e6b;border:1px solid #ffffff3d;border-radius:50%;grid-auto-flow:column;place-content:center;gap:6px;width:44px;height:44px;display:grid;position:absolute}.touch-pause i{background:#f3efe6db;width:4px;height:14px;display:block}.rotate-prompt{z-index:80;color:#f3efe6;letter-spacing:.12em;text-align:center;background:#07080b;place-content:center;justify-items:center;gap:18px;padding:24px;font:600 14px/1.6 Saira Variable,system-ui,sans-serif;display:none;position:fixed;inset:0}.rotate-prompt i{border:2px solid #ffe9c7d9;border-radius:9px;width:46px;height:78px;animation:2.2s ease-in-out infinite rotate-hint}@keyframes rotate-hint{0%,25%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}@media (orientation:portrait){body.touch .rotate-prompt{display:grid}}