:root{--bg:#0a0d16;--bg-2:#0f1424;--panel:#c4d6ff0a;--panel-2:#c4d6ff13;--line:#bed2ff21;--line-2:#bed2ff3d;--ink:#eef2ff;--ink-dim:#a3b0cc;--ink-faint:#7b86a0;--accent:#b8a6ff;--accent-2:#d9cfff;--accent-ink:#160f36;--guide:#ffd27a;--guide-2:#ffe7b3;--guide-ink:#2e1f00;--page-bg:radial-gradient(70% 50% at 50% -5%, #b8a6ff1f, transparent 60%), radial-gradient(60% 50% at 0% 100%, #ffd27a0d, transparent 60%), #0a0d16}h1.title{background:linear-gradient(100deg,#fff 10%,#d9cfff 40%,#a9d8ff 65%,#fff 90%);color:#0000;filter:drop-shadow(0 0 18px #b8a6ff4d);-webkit-background-clip:text;background-clip:text}.table{aspect-ratio:2.4;touch-action:none;user-select:none;border:1px solid var(--line);background:radial-gradient(60% 70% at 50% 0,#b8a6ff29,#0000 70%),radial-gradient(100% 60% at 50% 110%,#0009,#0000 70%),repeating-linear-gradient(90deg,#ffffff03 0 2px,#0000 2px 5px),linear-gradient(#161a35,#0d1024 70%,#090b19);border-radius:14px;width:100%;position:relative;overflow:hidden}.table:after{content:"";pointer-events:none;background:linear-gradient(#ffffff0d,#00000059);border-top:1px solid #ffffff12;height:7%;position:absolute;bottom:0;left:0;right:0}.glass{--level:0;left:var(--x);aspect-ratio:.4;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;background:0 0;border:0;padding:0;position:absolute;transform:translate(-50%)}.glass.front{z-index:2;width:5.4%;bottom:9%}.glass.back{z-index:1;filter:brightness(.85);width:4.4%;bottom:47%}.glass:focus-visible{outline:2px solid var(--guide);outline-offset:4px;border-radius:6px}.glass .bowl{background:linear-gradient(90deg,#fff3,#ffffff0a 30%,#ffffff05 62%,#ffffff29);border:1px solid #dce6ff61;border-radius:8% 8% 50% 50%/4% 4% 56% 56%;height:58%;transition:box-shadow .12s,border-color .12s;position:absolute;top:0;left:0;right:0;overflow:hidden}.glass .water{height:calc(var(--water) * 100%);background:linear-gradient(#a0cdff80,#5f8ceb6b);border-top:1px solid #e1f0ffd9;position:absolute;bottom:0;left:0;right:0}.glass .ripple{left:8%;right:8%;bottom:calc(var(--water) * 100% - 2px);opacity:0;background:radial-gradient(closest-side,#fffffff2,#0000);border-radius:50%;height:4px;position:absolute;transform:scaleX(.4)}.glass .shine{background:linear-gradient(#ffffff80,#0000);border-radius:40%;width:12%;height:70%;position:absolute;top:6%;left:14%}.glass .rim{background:#ffffff0a;border:1px solid #f0f5ffbf;border-radius:50%;height:5%;transition:box-shadow .12s;position:absolute;top:-2%;left:-1px;right:-1px}.glass .stem{background:linear-gradient(90deg,#fff6,#ffffff14);border-radius:2px;width:8%;height:34%;position:absolute;top:57%;left:46%}.glass .foot{background:#ffffff12;border:1px solid #dce6ff66;border-radius:50%;height:7%;position:absolute;bottom:0;left:12%;right:12%}.glass .lbl{white-space:nowrap;font-family:var(--font-mono);color:var(--ink-dim);opacity:0;font-size:clamp(11px,1.1vw,13px);transition:opacity .2s;position:absolute;top:100%;left:50%;transform:translate(-50%,6px)}body.show-names .glass .lbl{opacity:1}.glass.back .lbl{color:var(--ink-dim);top:auto;bottom:100%;transform:translate(-50%,-6px)}.glass.sing .rim{box-shadow:0 0 calc(4px + 22px * var(--level)) calc(1px + 3px * var(--level)) rgba(184, 166, 255, calc(.35 + .65 * var(--level)));border-color:#fff}.glass.sing .bowl{box-shadow:inset 0 0 calc(6px + 16px * var(--level)) rgba(184, 166, 255, calc(.2 + .5 * var(--level)));border-color:var(--accent-2)}.glass.sing .ripple{opacity:calc(.3 + .7 * var(--level));animation:.16s linear infinite shimmer}@keyframes shimmer{0%{transform:scaleX(.55)}50%{transform:scaleX(.95)}to{transform:scaleX(.55)}}.glass.target .rim{box-shadow:0 0 0 2px var(--guide), 0 0 22px 4px color-mix(in srgb, var(--guide) 65%, transparent);border-color:var(--guide-2);animation:1.2s ease-in-out infinite candle}.glass.target .lbl{opacity:1;color:var(--guide)}@keyframes candle{50%{box-shadow:0 0 0 3px var(--guide-2), 0 0 32px 8px color-mix(in srgb, var(--guide) 80%, transparent)}}.glass.wrong{animation:.35s wobble}@keyframes wobble{25%{transform:translate(calc(-50% - 3px))}75%{transform:translate(calc(3px - 50%))}}.rub-hint{letter-spacing:.06em;color:var(--ink-dim);pointer-events:none;white-space:nowrap;font-size:13px;position:absolute;top:6%;left:50%;transform:translate(-50%)}.table-scroll{border-radius:14px}@media (width<=760px){.table-scroll{overscroll-behavior-x:contain;scrollbar-width:thin;overflow-x:auto}.table{touch-action:pan-x;min-width:760px}.rub-hint{display:none}}
