.tc{--tc-hi:#fbfaf8;--tc-sky:#dbdfe2;--tc-mid:#9ea2a5;--tc-low:#575b5f;--tc-deep:#1f2225;--tc-floor:color-mix(in oklch, var(--stage,#f0f0ec) 50%, #66635e);--tc-shadow:#221812;--tc-k:.7;--tc-wheel:#f1ebdb;--tc-wheel-edge:#c8bca9;--tc-ink:#1d1713;--tc-slot:#0d0b09;aspect-ratio:22/30;perspective:900px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:min(220px,100%);position:relative;container-type:inline-size}@supports (color:lab(0% 0 0)){.tc{--tc-hi:lab(98.279% -.097543 1.13808);--tc-sky:lab(88.4097% -.985354 -1.98137);--tc-mid:lab(66.371% -1.14396 -2.30838);--tc-low:lab(38.5125% -.858113 -2.84785);--tc-deep:lab(12.9907% -.823006 -2.83027);--tc-floor:color-mix(in oklch, var(--stage,lab(94.7006% -.306189 1.87562)) 50%, lab(42.0222% .477433 3.02707));--tc-shadow:lab(9.44277% 4.20167 6.20367);--tc-wheel:lab(93.1381% .323296 8.47055);--tc-wheel-edge:lab(76.8728% 1.97572 11.4901);--tc-ink:lab(8.33118% 2.15461 3.80452);--tc-slot:lab(3.04172% .560716 .993812)}}[data-theme=dark] .tc{--tc-k:1.25;--tc-sky:#c7cbce;--tc-hi:#efeeeb}@supports (color:lab(0% 0 0)){[data-theme=dark] .tc{--tc-sky:lab(81.4496% -.984639 -1.98096);--tc-hi:lab(94.2252% -.128716 1.51831)}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tc{--tc-k:1.25;--tc-sky:#c7cbce;--tc-hi:#efeeeb}@supports (color:lab(0% 0 0)){:root:not([data-theme=light]) .tc{--tc-sky:lab(81.4496% -.984639 -1.98096);--tc-hi:lab(94.2252% -.128716 1.51831)}}}.tc-object{font-size:4.54545cqi;position:absolute;inset:0}.tc-object>*{position:absolute}.tc-press,.tc-knob{color:inherit;font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;cursor:pointer;background:0 0;border:0;margin:0;padding:0}.tc-press{z-index:2;width:18em;height:18em;box-shadow:0 .08em .12em oklch(from var(--tc-shadow) l c h / calc(.22 * var(--tc-k))), 0 1.1em 2em oklch(from var(--tc-shadow) l c h / calc(.2 * var(--tc-k))), 0 3em 4.4em oklch(from var(--tc-shadow) l c h / calc(.16 * var(--tc-k)));border-radius:50%;top:5.2em;left:1.6em}.tc-press:focus-visible{outline:2px solid var(--heading,currentColor);outline-offset:.5em}.tc-press>span{pointer-events:none;display:block;position:absolute}.tc-rim{background:conic-gradient(from 12deg, var(--tc-hi) 0deg, var(--tc-mid) 34deg, var(--tc-deep) 66deg, var(--tc-mid) 98deg, var(--tc-hi) 132deg, var(--tc-sky) 150deg, var(--tc-low) 182deg, var(--tc-deep) 210deg, var(--tc-floor) 246deg, var(--tc-hi) 284deg, var(--tc-mid) 318deg, var(--tc-hi) 360deg);border-radius:50%;inset:0;box-shadow:inset 0 .08em .06em #ffffffb3,inset 0 -.1em .14em #0006;box-shadow:inset 0 .08em .06em lab(100% 0 0/.7),inset 0 -.1em .14em lab(0% 0 0/.4)}.tc-face{background:radial-gradient(100% 100% at 50% 50%, transparent 62%, #00000029 100%), linear-gradient(180deg, var(--tc-sky) 0%, var(--tc-hi) 13%, var(--tc-sky) 25%, var(--tc-mid) 38%, var(--tc-low) 45%, var(--tc-deep) 49.5%, var(--tc-low) 53%, var(--tc-floor) 66%, color-mix(in oklch, var(--tc-floor) 55%, var(--tc-hi)) 86%, var(--tc-mid) 100%);border-radius:50%;inset:.6em;overflow:hidden;box-shadow:0 0 0 .05em #00000073,inset 0 .07em .05em #ffffffbf,inset 0 -.08em .12em #0000004d;box-shadow:0 0 0 .05em lab(0% 0 0/.45),inset 0 .07em .05em lab(100% 0 0/.75),inset 0 -.08em .12em lab(0% 0 0/.3)}@supports (color:lab(0% 0 0)){.tc-face{background:radial-gradient(100% 100% at 50% 50%, transparent 62%, lab(0% 0 0/.16) 100%), linear-gradient(180deg, var(--tc-sky) 0%, var(--tc-hi) 13%, var(--tc-sky) 25%, var(--tc-mid) 38%, var(--tc-low) 45%, var(--tc-deep) 49.5%, var(--tc-low) 53%, var(--tc-floor) 66%, color-mix(in oklch, var(--tc-floor) 55%, var(--tc-hi)) 86%, var(--tc-mid) 100%)}}.tc-sheen{background:radial-gradient(22% 16% at 30% 22%,#fffffff2,#fff0 100%),linear-gradient(118deg,#0000 52%,#ffffff80 57%,#ffffff1f 60%,#0000 63%),linear-gradient(118deg,#0000 66%,#fff3 67.5%,#0000 69%);background:radial-gradient(22% 16% at 30% 22%,lab(100% 0 0/.95),lab(100% 0 0/0) 100%),linear-gradient(118deg,#0000 52%,lab(100% 0 0/.5) 57%,lab(100% 0 0/.12) 60%,#0000 63%),linear-gradient(118deg,#0000 66%,lab(100% 0 0/.2) 67.5%,#0000 69%);position:absolute;inset:-12%}.tc-groove{border-radius:50%;position:absolute;inset:1.3em;box-shadow:inset 0 .06em .02em #00000038,0 .05em #ffffff73;box-shadow:inset 0 .06em .02em lab(0% 0 0/.22),0 .05em lab(100% 0 0/.45)}.tc-plunger{z-index:-1;width:4.6em;height:5.2em;top:-4.8em;left:6.7em;pointer-events:auto!important}.tc-stem{background:linear-gradient(90deg, var(--tc-deep), var(--tc-mid) 18%, var(--tc-hi) 36%, var(--tc-sky) 48%, var(--tc-low) 76%, var(--tc-deep));width:2em;height:3.8em;position:absolute;top:1.4em;left:1.3em}.tc-cap{background:linear-gradient(180deg, #ffffff8c 0, #ffffff1a .35em, transparent .4em, transparent calc(100% - .2em), #00000059), linear-gradient(90deg, var(--tc-deep), var(--tc-mid) 10%, var(--tc-hi) 27%, var(--tc-sky) 38%, var(--tc-mid) 60%, var(--tc-low) 82%, var(--tc-deep));border-radius:.55em .55em .4em .4em/.5em .5em .35em .35em;height:1.9em;position:absolute;inset:0 0 auto;box-shadow:0 .12em .16em #00000052;box-shadow:0 .12em .16em lab(0% 0 0/.32)}@supports (color:lab(0% 0 0)){.tc-cap{background:linear-gradient(180deg, lab(100% 0 0/.55) 0, lab(100% 0 0/.1) .35em, transparent .4em, transparent calc(100% - .2em), lab(0% 0 0/.35)), linear-gradient(90deg, var(--tc-deep), var(--tc-mid) 10%, var(--tc-hi) 27%, var(--tc-sky) 38%, var(--tc-mid) 60%, var(--tc-low) 82%, var(--tc-deep))}}.tc-collar{background:radial-gradient(1.05em .24em at 50% .24em, var(--tc-deep) 70%, transparent 100%), linear-gradient(180deg, #fff6, transparent .45em), linear-gradient(90deg, var(--tc-deep), var(--tc-mid) 10%, var(--tc-hi) 26%, var(--tc-sky) 40%, var(--tc-mid) 62%, var(--tc-low) 84%, var(--tc-deep));border-radius:.3em .3em .12em .12em;width:4em;height:1.35em;top:-.8em;left:7em;box-shadow:0 .08em .1em #00000059;box-shadow:0 .08em .1em lab(0% 0 0/.35)}@supports (color:lab(0% 0 0)){.tc-collar{background:radial-gradient(1.05em .24em at 50% .24em, var(--tc-deep) 70%, transparent 100%), linear-gradient(180deg, lab(100% 0 0/.4), transparent .45em), linear-gradient(90deg, var(--tc-deep), var(--tc-mid) 10%, var(--tc-hi) 26%, var(--tc-sky) 40%, var(--tc-mid) 62%, var(--tc-low) 84%, var(--tc-deep))}}.tc-bezel{background:linear-gradient(180deg, var(--tc-hi), var(--tc-sky) 26%, var(--tc-mid) 52%, var(--tc-low) 80%, var(--tc-deep));border-radius:1em;width:11.6em;height:5.9em;top:5.2em;left:3.2em;box-shadow:0 -.04em #fff9,0 .1em .14em #00000059,0 .3em .5em #00000024,inset 0 -.05em .04em #0000004d;box-shadow:0 -.04em lab(100% 0 0/.6),0 .1em .14em lab(0% 0 0/.35),0 .3em .5em lab(0% 0 0/.14),inset 0 -.05em .04em lab(0% 0 0/.3)}.tc-window{background:var(--tc-slot);isolation:isolate;border-radius:.6em;flex-direction:row-reverse;justify-content:center;gap:.25em;display:flex;position:absolute;inset:.45em;overflow:hidden}.tc-wheel{perspective:30em;flex:0 0 2.3em;height:100%;position:relative}.tc-drum{height:2.8em;transform-style:preserve-3d;margin-top:-1.4em;position:absolute;top:50%;left:0;right:0}.tc-cell{backface-visibility:hidden;background:linear-gradient(90deg, var(--tc-wheel-edge), var(--tc-wheel) 14%, var(--tc-wheel) 86%, var(--tc-wheel-edge));place-items:center;display:grid;position:absolute;top:-.03em;left:0;right:0}.tc-glyph{font-variant-numeric:tabular-nums;color:var(--tc-ink);text-shadow:0 .02em #ffffff59;text-shadow:0 .02em lab(100% 0 0/.35);font-family:DIN Alternate,DIN Condensed,Bahnschrift,Roboto Condensed,Arial Narrow,system-ui,sans-serif;font-size:2.3em;font-weight:700;line-height:1;translate:0 .03em}.tc-wash{background:var(--tc-wheel);opacity:0;pointer-events:none;position:absolute;inset:0}.tc-curve{pointer-events:none;background:linear-gradient(#000000db 0%,#0000006b 17%,#0000000f 36%,#ffffff1a 43%,#0000 52% 62%,#00000038 74%,#0009 88%,#000000e6 100%);background:linear-gradient(lab(0% 0 0/.86) 0%,lab(0% 0 0/.42) 17%,lab(0% 0 0/.06) 36%,lab(100% 0 0/.1) 43%,#0000 52% 62%,lab(0% 0 0/.22) 74%,lab(0% 0 0/.6) 88%,lab(0% 0 0/.9) 100%);position:absolute;inset:0;box-shadow:inset 0 .2em .3em #0000008c,inset 0 -.04em #ffffff1f;box-shadow:inset 0 .2em .3em lab(0% 0 0/.55),inset 0 -.04em lab(100% 0 0/.12)}.tc-glass{pointer-events:none;background:linear-gradient(164deg,#ffffff4d 0%,#ffffff14 30%,#0000 31%),linear-gradient(0deg,#ffffff1a 0,#0000 .12em);background:linear-gradient(164deg,lab(100% 0 0/.3) 0%,lab(100% 0 0/.08) 30%,#0000 31%),linear-gradient(0deg,lab(100% 0 0/.1) 0,#0000 .12em);position:absolute;inset:0}.tc-knob{z-index:1;cursor:grab;touch-action:none;width:2.4em;height:3.5em;top:11.65em;left:19.1em}.tc-knob:active{cursor:grabbing}.tc-knob:after{content:"";position:absolute;inset:-1.2em -1.1em -1.2em -.6em}.tc-knob:focus-visible{outline:none}.tc-knob:focus-visible .tc-knurled{outline:2px solid var(--heading,currentColor);outline-offset:.3em}.tc-knob>span{pointer-events:none;display:block;position:absolute}.tc-boss{background:linear-gradient(180deg, var(--tc-deep), var(--tc-mid) 16%, var(--tc-hi) 32%, var(--tc-sky) 44%, var(--tc-low) 76%, var(--tc-deep));width:1em;height:2.3em;top:.6em;left:0}.tc-knurled{background:var(--tc-low);border-radius:.35em/.5em;width:1.6em;height:3.5em;top:0;left:.8em;overflow:hidden;box-shadow:0 .12em .2em #00000059;box-shadow:0 .12em .2em lab(0% 0 0/.35)}.tc-knurl{background:repeating-linear-gradient(#313336 0 .07em,#c8cbcd .07em .14em,#777b7e .14em .26em);background:repeating-linear-gradient(lab(21.1142% -.640571 -2.13431) 0 .07em,lab(81.4465% -.65878 -1.32204) .07em .14em,lab(51.2822% -.820518 -2.06802) .14em .26em);height:calc(100% + .52em);position:absolute;top:-.26em;left:0;right:0}.tc-knob-wash{opacity:0;background:#83878a;background:lab(55.9222% -.82162 -2.06863);inset:0}.tc-knurled:after{content:"";border-radius:inherit;background:linear-gradient(90deg,#00000073,#0000 .3em calc(100% - .28em),#ffffff59 calc(100% - .18em),#00000040),linear-gradient(#000000b8 0%,#0000 24%,#fff6 34%,#0000 50% 64%,#000000bf 100%);background:linear-gradient(90deg,lab(0% 0 0/.45),#0000 .3em calc(100% - .28em),lab(100% 0 0/.35) calc(100% - .18em),lab(0% 0 0/.25)),linear-gradient(lab(0% 0 0/.72) 0%,#0000 24%,lab(100% 0 0/.4) 34%,#0000 50% 64%,lab(0% 0 0/.75) 100%);position:absolute;inset:0}.tc-ring{width:8.6em;height:8.6em;filter:drop-shadow(0 .25em .3em oklch(from var(--tc-shadow) l c h / calc(.28 * var(--tc-k))));pointer-events:none;top:20.7em;left:6.3em}.tc-ring>span{background:radial-gradient(closest-side, #00000080 calc(100% - .85em), #fff6 calc(100% - .56em), transparent calc(100% - .36em), #00000073 100%), conic-gradient(from 30deg, var(--tc-hi), var(--tc-mid) 50deg, var(--tc-deep) 100deg, var(--tc-sky) 150deg, var(--tc-low) 210deg, var(--tc-floor) 260deg, var(--tc-hi) 310deg, var(--tc-hi) 360deg);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(closest-side,#0000 calc(100% - .88em),#000 calc(100% - .84em) calc(100% - .04em),#0000 100%);mask:radial-gradient(closest-side,#0000 calc(100% - .88em),#000 calc(100% - .84em) calc(100% - .04em),#0000 100%)}@supports (color:lab(0% 0 0)){.tc-ring>span{background:radial-gradient(closest-side, lab(0% 0 0/.5) calc(100% - .85em), lab(100% 0 0/.4) calc(100% - .56em), transparent calc(100% - .36em), lab(0% 0 0/.45) 100%), conic-gradient(from 30deg, var(--tc-hi), var(--tc-mid) 50deg, var(--tc-deep) 100deg, var(--tc-sky) 150deg, var(--tc-low) 210deg, var(--tc-floor) 260deg, var(--tc-hi) 310deg, var(--tc-hi) 360deg)}}.tc-lug{background:linear-gradient(90deg, var(--tc-deep), var(--tc-mid) 14%, var(--tc-hi) 34%, var(--tc-mid) 62%, var(--tc-deep));pointer-events:none;border-radius:.3em;width:2.4em;height:1.7em;top:22.2em;left:9.4em;box-shadow:0 .1em .12em #0000004d;box-shadow:0 .1em .12em lab(0% 0 0/.3)}.tc-sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}