@layer base,components,variants;@layer variants{.drum-clock{container-type:inline-size;container-name:drum;display:flex;justify-content:center;align-items:center;width:100%}.drum-clock__housing{position:relative;display:inline-flex;align-items:center;padding:clamp(8px,2cqi,14px) clamp(12px,3cqi,20px);border-radius:10px;background:linear-gradient(145deg,#4a4a4a,#3a3a3a 30%,#4a4a4a,#383838 70%,#454545);border:1px solid #555;box-shadow:0 4px 12px #00000080,inset 0 1px #ffffff14,inset 0 -1px #0000004d}.drum-clock__housing[data-material=matte-black]{background:linear-gradient(145deg,#1a1a1a,#111,#1a1a1a);border:1px solid #333;box-shadow:0 4px 12px #000000b3,inset 0 1px #ffffff0a}.drum-clock__housing[data-material=brass]{background:linear-gradient(145deg,#8b7535,#c9a84c 30%,#a68b3a,#d4b456 70%,#8b7535);border:1px solid #6B5525;box-shadow:0 4px 12px #00000080,inset 0 1px #ffffff26,inset 0 -1px #0003}.drum-clock__housing[data-material=chrome]{background:linear-gradient(145deg,#e0e0e0,silver,#e8e8e8,#b8b8b8,#d0d0d0);border:1px solid #aaa;box-shadow:0 4px 12px #0000004d,inset 0 1px #ffffff80,inset 0 -1px #00000026}@keyframes drum-flash{0%,to{box-shadow:0 4px 12px #00000080,inset 0 1px #ffffff14,inset 0 -1px #0000004d}50%{box-shadow:0 4px 24px var(--tk-accent-glow, rgba(0,255,136,.4)),0 0 32px var(--tk-accent-glow, rgba(0,255,136,.3)),inset 0 1px #ffffff1a,inset 0 -1px #0000004d}}.drum-clock--complete{animation:drum-flash .6s ease-in-out 3}.drum-clock__track{display:flex;flex-direction:row;align-items:center;gap:clamp(4px,1cqi,8px)}.drum-clock__pair{display:flex;flex-direction:row;gap:2px}.drum-clock__pair--ms{transform:scale(.65);transform-origin:left center;margin-right:calc(clamp(28px,7cqi,48px)*-.7);opacity:.85}.drum-clock__slot{--drum-face-h: var(--tk-drum-face-h, 48px);position:relative;width:clamp(28px,7cqi,48px);height:var(--drum-face-h);overflow:hidden;perspective:600px;background:#0a0a0a;border-radius:3px}.drum-clock__slot[data-window=rounded]{border-radius:6px}.drum-clock__slot[data-window=rectangular]{border-radius:2px}.drum-clock__cylinder{--drum-face-h: var(--tk-drum-face-h, 48px);--drum-r: var(--tk-drum-radius, 74px);position:absolute;top:50%;left:50%;width:clamp(28px,7cqi,48px);height:var(--drum-face-h);margin-top:calc(var(--drum-face-h) / -2);margin-left:calc(clamp(28px,7cqi,48px)/-2);transform-style:preserve-3d;will-change:transform}.drum-clock__cylinder--hh{transition:transform calc(.6s / var(--tk-drum-speed, 1)) cubic-bezier(.16,1,.3,1)}.drum-clock__cylinder--mm{transition:transform calc(.5s / var(--tk-drum-speed, 1)) cubic-bezier(.22,1,.36,1)}.drum-clock__cylinder--ss{transition:transform calc(.3s / var(--tk-drum-speed, 1)) cubic-bezier(.34,1.56,.64,1)}.drum-clock__cylinder--ms{transition:none}.drum-clock__cylinder--blur{filter:blur(1.5px)}.drum-clock__face{--drum-face-h: var(--tk-drum-face-h, 48px);position:absolute;top:0;left:0;width:100%;height:var(--drum-face-h);display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(to right,#0a0a0a,#1a1a1a 20%,#222,#1a1a1a 80%,#0a0a0a);font-family:var(--tk-font-mono, monospace);font-size:clamp(1.25rem,4cqi,2.25rem);font-weight:700;color:var(--tk-face-text, #f0f0f0);text-shadow:none;user-select:none}.drum-clock__shadow{position:absolute;left:0;width:100%;height:45%;pointer-events:none;z-index:2}.drum-clock__shadow--top{top:0;background:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 30%,transparent 100%)}.drum-clock__shadow--btm{bottom:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 30%,transparent 100%)}.drum-clock__separator{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:10px;height:var(--tk-drum-face-h, 48px)}.drum-clock__separator[data-style=dots]:before,.drum-clock__separator[data-style=dots]:after{content:"";display:block;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ffffff40,#b4b4b499);box-shadow:0 1px 2px #00000080;flex-shrink:0}.drum-clock__separator[data-style=bar]:before{content:"";display:block;width:2px;height:60%;background:linear-gradient(to bottom,#ffffff0d,#c8c8c866,#ffffff0d)}.drum-clock__separator[data-style=decimal]{justify-content:flex-end;padding-bottom:8px}.drum-clock__separator[data-style=decimal]:before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ffffff40,#b4b4b499);box-shadow:0 1px 2px #00000080}.drum-clock__separator[data-style=none]{width:8px}.drum-clock__screw{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.2),transparent 50%),radial-gradient(circle,#555,#333);box-shadow:inset 0 1px 1px #00000080,0 .5px #ffffff1a;z-index:3}.drum-clock__screw:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:1px;background:#222;transform:translate(-50%,-50%);box-shadow:0 -2px #222,0 2px #222}.drum-clock__screw--tl{top:5px;left:5px}.drum-clock__screw--tr{top:5px;right:5px}.drum-clock__screw--bl{bottom:5px;left:5px}.drum-clock__screw--br{bottom:5px;right:5px}@container drum (min-width: 480px){.drum-clock__slot{width:clamp(36px,7cqi,56px)}.drum-clock__housing{padding:clamp(10px,2cqi,16px) clamp(14px,3cqi,22px)}}[data-fullscreen] .drum-clock__slot{width:clamp(56px,9vw,96px);border-radius:6px}[data-fullscreen] .drum-clock__cylinder{width:clamp(56px,9vw,96px);margin-left:calc(clamp(56px,9vw,96px)/-2)}[data-fullscreen] .drum-clock__face{font-size:clamp(2rem,5.5vw,4.5rem)}[data-fullscreen] .drum-clock__track{gap:clamp(6px,1.2vw,14px)}[data-fullscreen] .drum-clock__pair{gap:4px}[data-fullscreen] .drum-clock__separator{width:clamp(12px,2vw,20px);gap:clamp(6px,1vw,10px)}[data-fullscreen] .drum-clock__separator[data-style=dots]:before,[data-fullscreen] .drum-clock__separator[data-style=dots]:after{width:clamp(7px,1.2vw,12px);height:clamp(7px,1.2vw,12px)}[data-fullscreen] .drum-clock__housing{padding:clamp(14px,2.5vw,28px) clamp(20px,3.5vw,40px);border-radius:14px}[data-theme=dark] .drum-clock__housing{box-shadow:0 6px 20px #000000b3,inset 0 1px #ffffff0f,inset 0 -1px #0006}}