.tb-tap{aspect-ratio:1;background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface-2) 70%);width:min(72vw,280px);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--line)), 0 12px 32px color-mix(in srgb, var(--accent) 18%, transparent);color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:0;border-radius:50%;align-content:center;place-items:center;margin:12px 0 4px;transition:transform 80ms;display:grid;position:relative}.tb-tap:active{transform:scale(.97)}.tb-tap:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.tb-ring{pointer-events:none;width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;inset:6px}.tb-ring-bg,.tb-ring-fg{fill:none;stroke-width:5px}.tb-ring-bg{stroke:color-mix(in srgb, var(--ink-2) 18%, transparent)}.tb-ring-fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dasharray .15s}.tb-num{font:700 clamp(3.4rem, 16vw, 5rem) / 1 var(--f-ui);animation:.18s ease-out tb-pop}@keyframes tb-pop{0%{transform:scale(1.12)}}.tb-of{color:var(--ink-2);margin-top:6px;font-size:.95rem}.tb-counter,.tb-styles{--tb-acc:var(--accent);--tb-ink:var(--ink);--tb-ink2:var(--ink-2);--tb-track:color-mix(in srgb, var(--ink-2) 18%, transparent)}.tb-focus .tb-counter{--tb-acc:var(--ft-accent,var(--accent));--tb-ink:var(--ft-ink,var(--ink));--tb-ink2:var(--ft-ink2,var(--ink-2));--tb-track:#ffffff24}.tb-tap{isolation:isolate;overflow:hidden}.tb-tap .tb-num,.tb-tap .tb-of{z-index:1;position:relative}.tb-beads{pointer-events:none;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;inset:4px}.tb-beads circle{fill:var(--tb-track);transition:fill .15s}.tb-beads circle.on{fill:var(--tb-acc)}.tb-beads circle.next{fill:none;stroke:var(--tb-acc);stroke-width:1.2px}.tb-tassel{fill:var(--gold)}.tb-s-digital{background:linear-gradient(160deg,#3a4048,#15181c);border-radius:42% 42% 46% 46%/36% 36% 56% 56%;align-content:center;gap:6px;box-shadow:inset 0 2px #ffffff2e,inset 0 -6px 14px #00000073,0 14px 30px #0000004d}.tb-lcd{background:linear-gradient(#b7c9a3,#9fb58a);border-radius:10px;place-items:center;width:70%;padding:6% 4%;display:grid;position:relative;box-shadow:inset 0 2px 6px #00000059,0 0 0 3px #0c0e10}.tb-lcd .tb-num{font:700 clamp(2.4rem, 11vw, 3.6rem) / 1 var(--f-ui);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#1d2a14;grid-area:1/1;animation:none}.tb-s-digital .tb-of{color:#c9ced6;font-size:.85rem}.tb-dig-btn{aspect-ratio:1;background:radial-gradient(circle at 40% 35%,#f3f4f6,#9aa1ab 70%);border-radius:50%;width:28%;margin-top:6px;transition:transform 60ms,box-shadow 60ms;box-shadow:0 4px #5b616b,0 6px 10px #0006}.tb-s-digital:active .tb-dig-btn{transform:translateY(3px);box-shadow:0 1px #5b616b,0 2px 4px #0006}.tb-focus .tb-s-digital{background:linear-gradient(160deg,#3a4048,#15181c)}.tb-s-minimal,.tb-focus .tb-s-minimal{box-shadow:none;background:0 0;border-radius:24px}.tb-s-minimal .tb-num{letter-spacing:-.02em;font-size:clamp(5rem,26vw,8rem);font-weight:600}.tb-line{background:var(--tb-track);border-radius:4px;width:70%;height:4px;margin-top:14px;overflow:hidden}.tb-line i{border-radius:inherit;background:var(--tb-acc);height:100%;transition:width .15s;display:block}.tb-s-dots{border-radius:28px;align-content:center;gap:2px}.tb-s-dots .tb-num{font-size:clamp(2.6rem,12vw,3.6rem)}.tb-dots{gap:5px;width:74%;margin-top:10px;display:grid}.tb-dots i{aspect-ratio:1;background:var(--tb-track);border-radius:50%;transition:background .15s,transform .15s}.tb-dots i.on{background:var(--tb-acc)}.tb-s-gauge{border-radius:32px;align-content:center}.tb-gauge{width:82%;margin-bottom:-4px}.tb-gauge .tb-ring-bg,.tb-gauge .tb-ring-fg{fill:none;stroke-width:7px;stroke-linecap:round}.tb-gauge .tb-ring-bg{stroke:var(--tb-track)}.tb-gauge .tb-ring-fg{stroke:var(--tb-acc);transition:stroke-dasharray .15s}.tb-tick{stroke:var(--tb-ink2);stroke-width:1px}.tb-needle{fill:var(--gold);transition:transform .2s cubic-bezier(.3,1.6,.6,1)}.tb-hub{fill:var(--tb-ink)}.tb-s-gauge .tb-num{margin-top:8px;font-size:clamp(2.6rem,12vw,3.8rem)}.tb-s-fill{border-radius:30% 30% 40% 40%/18% 18% 30% 30%}.tb-fill{z-index:0;background:linear-gradient(180deg, color-mix(in srgb, var(--tb-acc) 55%, transparent), color-mix(in srgb, var(--tb-acc) 85%, transparent));transition:height .25s ease-out;position:absolute;bottom:0;left:0;right:0}.tb-fill svg{width:100%;height:10px;fill:color-mix(in srgb, var(--tb-acc) 55%, transparent);position:absolute;bottom:100%;left:0}.tb-styles{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;display:grid}.tb-style{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .78rem/1.25 var(--f-ui);cursor:pointer;border-radius:12px;justify-items:center;gap:6px;padding:8px 4px 6px;display:grid}.tb-style.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);font-weight:700}.tb-style:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tb-mini-box{pointer-events:none;width:70px;height:70px;display:block;overflow:hidden}.tb-mini.tb-tap{transform-origin:0 0;width:280px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--line));margin:0;transform:scale(.25)}.tb-mini .tb-num{font-size:5rem;animation:none}.tb-mini.tb-s-minimal .tb-num{font-size:8rem}.tb-mini.tb-s-dots .tb-num,.tb-mini.tb-s-gauge .tb-num,.tb-mini .tb-lcd .tb-num{font-size:3.6rem}.tb-mini .tb-of{font-size:1.4rem}
