:root{--slate-50:oklch(98.4% .003 247.858);--slate-100:oklch(96.8% .007 247.896);--slate-200:oklch(92.9% .013 255.508);--slate-300:oklch(86.9% .022 252.894);--slate-400:oklch(70.4% .04 256.788);--slate-500:oklch(55.4% .046 257.417);--slate-600:oklch(44.6% .043 257.281);--slate-700:oklch(37.2% .044 257.287);--slate-800:oklch(27.9% .041 260.031);--slate-900:oklch(20.8% .042 265.755);--slate-950:oklch(12.9% .042 264.695);--text-base:13px;--text-sm:calc(var(--text-base) / 1.2);--text-md:calc(var(--text-base) * 1.2);--text-lg:calc(var(--text-md) * 1.2);--text-xl:calc(var(--text-lg) * 1.2);--text-2xl:calc(var(--text-xl) * 1.2);--text-3xl:calc(var(--text-2xl) * 1.2);--background:var(--slate-100);--foreground:var(--slate-950);--muted:var(--slate-500);--card:var(--slate-50);--border:var(--slate-200);font-feature-settings:"cv11", "ss01";-webkit-font-smoothing:antialiased;font-family:InterDisplay,Inter,system-ui,-apple-system,sans-serif}*,:before,:after{box-sizing:border-box}body{background:var(--background);min-height:100vh;color:var(--foreground);font-size:var(--text-base);margin:0;line-height:1.5}.page{max-width:46rem;margin:0 auto;padding:clamp(2rem,6vh,3.5rem) 1.5rem 4rem}.intro{margin-bottom:1rem}.back{font-size:var(--text-sm);color:var(--muted);margin-bottom:1.25rem;text-decoration:none;display:inline-block}.back:hover{color:var(--foreground)}h1{font-size:var(--text-3xl);letter-spacing:-.025em;margin:0;font-weight:600;line-height:1.1}.lede{max-width:32rem;font-size:var(--text-md);color:var(--muted);margin:.875rem 0 0;line-height:1.5}.scene{--card-w:340px;--card-h:214px;--rail-y:356px;perspective:1250px;-webkit-user-select:none;user-select:none;isolation:isolate;max-width:640px;height:540px;margin:0 auto;position:relative}.scene-shadow{background:radial-gradient(#0f172a2e,#0000 70%);height:30px;position:absolute;bottom:20px;left:14%;right:14%}.stand{transform-origin:bottom;z-index:1;background:linear-gradient(90deg,#2b323a,#10141a 60%,#05070a);border-radius:9px;width:18px;height:150px;position:absolute;bottom:32px;box-shadow:2px 3px 6px #0f172a40,inset 1px 0 #ffffff2e}.stand-left{left:52px;transform:rotate(6deg)}.stand-right{right:52px;transform:rotate(-6deg)}.crossbar{z-index:1;background:linear-gradient(#333b44,#0b0e13 70%);border-radius:8px;height:16px;position:absolute;bottom:27px;left:44px;right:44px;box-shadow:inset 0 1px #ffffff38,0 4px 8px #0f172a40}.rail{left:72px;right:72px;top:calc(var(--rail-y) - 3px);z-index:1;background:linear-gradient(#3a424b,#12161c 60%,#05070a);border-radius:3px;height:6px;position:absolute;box-shadow:inset 0 1px #ffffff47,0 2px 4px #0f172a4d}.viewport{transform-style:preserve-3d;touch-action:none;cursor:grab;z-index:2;outline:none;position:absolute;inset:0 78px;transform:rotateX(10deg)}.viewport:active{cursor:grabbing}.viewport:focus-visible{outline:2px solid var(--slate-400);outline-offset:4px;border-radius:8px}.drum{transform-style:preserve-3d;position:absolute;inset:0}.slot{transform-style:preserve-3d;transform-origin:50% var(--rail-y);will-change:transform, opacity, filter;position:absolute;inset:0}.rcard{left:50%;top:calc(var(--rail-y) - var(--card-h));width:var(--card-w);height:var(--card-h);margin-left:calc(var(--card-w) / -2);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;position:absolute}.paper{color:var(--slate-700);background:linear-gradient(158deg,#fff 0%,#faf9f5 100%);border-radius:7px;flex-direction:column;padding:24px 28px 20px;font-family:Caveat,Segoe Script,Bradley Hand,cursive;display:flex;position:absolute;inset:0;box-shadow:0 10px 24px #0f172a1c,0 1px 2px #0f172a17,inset 0 0 0 1px #d6d1c98c}.r-name{color:var(--slate-800);letter-spacing:.01em;font-size:34px;font-weight:600;line-height:1.05}.r-note{color:var(--slate-500);margin-top:2px;font-size:21px;line-height:1.12}.r-line{color:var(--slate-600);font-size:22px;line-height:1.16}.r-line:first-of-type{margin-top:9px}.r-phone{color:var(--slate-800);margin-top:auto;font-size:22px;line-height:1.1}.slot:not(.is-current) .paper>span,.slot:not(.is-current) .clips{visibility:hidden}.clips{pointer-events:none;gap:52px;display:flex;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}.clips i{background:linear-gradient(90deg,#0a0d12,#39414a 35%,#070a0d 85%);border-radius:3px 3px 0 0;width:10px;height:17px;box-shadow:1px 1px 2px #0000004d,inset 1px 0 #ffffff40}.index-flag{color:#fff;letter-spacing:.12em;text-align:right;opacity:0;background:linear-gradient(#2a7ab0,#1b5a85);border-radius:5px 5px 0 0;min-width:62px;height:22px;padding:2px 10px 0;font:600 11px/18px InterDisplay,Inter,sans-serif;transition:opacity .15s;position:absolute;top:-8px;right:16px;box-shadow:0 -1px 2px #0000001f,inset 0 1px #fff3}.slot:nth-child(2n) .index-flag{text-align:left;left:16px;right:auto}.slot.is-flipped .index-flag{opacity:1}.knob{top:var(--rail-y);background:radial-gradient(circle at 36% 30%, var(--slate-600), var(--slate-950) 62%);cursor:pointer;z-index:3;border-radius:50%;width:84px;height:84px;margin-top:-42px;position:absolute;box-shadow:inset 0 2px 3px #ffffff29,inset 0 -3px 6px #00000073,0 10px 18px #0f172a4d}.knob-left{left:0}.knob-right{right:0}.knob:focus-visible{outline:2px solid var(--slate-400);outline-offset:3px}.knob-disc{background:repeating-conic-gradient(#ffffff1f 0deg 4deg,#0000 4deg 10deg);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 56%,#000 59%);mask:radial-gradient(circle,#0000 56%,#000 59%)}.knob:after{content:"";background:radial-gradient(circle at 38% 32%, var(--slate-500), var(--slate-900) 72%);border-radius:50%;position:absolute;inset:30px;box-shadow:inset 0 1px 2px #fff3,0 1px 3px #00000080}.sound{color:var(--slate-400);opacity:.55;cursor:pointer;z-index:6;background:0 0;border:0;border-radius:6px;padding:6px;position:absolute;bottom:0;right:4px}.sound:hover{opacity:1;color:var(--slate-600)}.sound:focus-visible{outline:2px solid var(--slate-400);outline-offset:2px;opacity:1}.sound .slash{display:none}.sound.muted .slash{display:block}.sound.muted .wave{display:none}.counter{text-align:center;font-size:var(--text-sm);color:var(--muted);font-variant-numeric:tabular-nums;margin:.25rem 0 0}.tabs{flex-wrap:wrap;justify-content:center;gap:3px;margin-top:1.5rem;display:flex}.tab{min-width:25px;color:var(--slate-300);background:0 0;border:.8px solid #0000;border-bottom:0;border-radius:6px 6px 0 0;padding:5px 4px 4px;font-family:InterDisplay,Inter,system-ui,sans-serif;font-size:11px;font-weight:500}.tab.on{color:var(--foreground);background:var(--card);border-color:var(--border);cursor:pointer}.tab.on:hover{background:var(--slate-200)}.tab.active,.tab.active:hover{background:var(--slate-950);border-color:var(--slate-950);color:var(--slate-50)}.tab:disabled{cursor:default}.hint{text-align:center;font-size:var(--text-sm);color:var(--slate-400);margin:1.25rem 0 0}@media (width<=560px){.scene{--card-w:min(70vw, 290px);--card-h:196px;--rail-y:300px;height:470px}.viewport{inset:0 46px}.rail{left:38px;right:38px}.paper{padding:20px 20px 16px}.r-name{font-size:30px}.r-note{font-size:19px}.r-line{font-size:20px}.r-phone{font-size:19px}.knob{width:54px;height:54px;margin-top:-27px}.knob:after{inset:19px}.stand{width:13px;height:112px}.stand-left{left:20px}.stand-right{right:20px}.crossbar{left:16px;right:16px}.index-flag{min-width:52px}}