.tap-stage{gap:var(--space-2)}.tap-pad{position:relative;width:min(300px,70vw);aspect-ratio:1;border-radius:50%;border:2px solid var(--color-hairline);background:radial-gradient(circle at 50% 38%,var(--color-surface-3),var(--color-surface-2) 72%);color:var(--color-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow-md);transition:border-color .2s ease,transform .06s ease,box-shadow .2s ease;--stab: var(--color-accent)}.tap-pad:hover{border-color:var(--color-accent)}.tap-pad.is-hit{transform:scale(.965);border-color:var(--color-accent);transition:none;box-shadow:var(--shadow-sm),0 0 0 6px var(--color-accent-dim)}.tap-pad__ring,.tap-pad__ghost{position:absolute;inset:-2px;border-radius:50%;border:3px solid var(--color-accent);opacity:0;pointer-events:none}.tap-pad__ring.is-on{animation:tap-ring .5s ease-out}.tap-pad__ghost{border-width:2px;border-color:var(--stab)}.tap-pad__ghost.is-on{animation:tap-ghost .6s ease-out}@keyframes tap-ring{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.2)}}@keyframes tap-ghost{0%{opacity:.45;transform:scale(.94)}to{opacity:0;transform:scale(1.08)}}.tap-pad__bpm{font-size:clamp(3.8rem,16vw,6.2rem);transition:color .2s ease}.tap-pad__bpm.is-pop{animation:tap-pop .18s ease-out}@keyframes tap-pop{0%{transform:scale(1.06)}to{transform:none}}.tap-pad__unit{margin-top:2px}.tap-pad__help{margin-top:10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-ink)}.tap-style{margin:0;min-height:1.4em;font-size:var(--fs-base);color:var(--color-ink-soft);text-align:center}.tap-style strong{color:var(--color-ink)}.tap-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;max-width:520px}.tap-stat{background:var(--color-surface-2);border:1px solid var(--color-hairline);border-radius:var(--radius-media);padding:8px 6px 6px;text-align:center;min-width:0;box-shadow:var(--shadow-sm)}.tap-stat__label{display:flex;align-items:center;justify-content:center;gap:4px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-gray);white-space:nowrap;min-height:22px}.tap-stat__label .info{width:18px;height:18px;margin:0}.tap-stat__val{display:block;font-family:var(--font-heading);font-weight:700;font-size:1.45rem;line-height:1.15;font-variant-numeric:tabular-nums}.tap-stat__val.is-good{color:var(--color-accent-ink)}.tap-stat__val.is-mid{color:var(--color-warn)}.tap-stat__val.is-bad{color:var(--color-danger)}.tap-actions{display:grid;grid-template-columns:56px 56px var(--tap) var(--tap) var(--tap) minmax(0,1fr);gap:8px;width:100%;max-width:520px;align-items:center}.tap-actions .btn--ghost{padding:0;font-size:1.05rem}.tap-actions__go{padding:0 14px;white-space:nowrap;overflow:hidden}.tap-actions__go span{overflow:hidden;text-overflow:ellipsis}a.btn[aria-disabled=true],a.icon-btn[aria-disabled=true]{opacity:.4;pointer-events:none;box-shadow:none}.tap-chart{margin:0;width:100%;max-width:520px}.tap-chart svg{width:100%;height:64px;background:var(--color-surface-2);border:1px solid var(--color-hairline);border-radius:var(--radius-media);overflow:hidden}.tap-chart figcaption{display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-sm);color:var(--color-gray);margin-top:8px}.tap-chart__mean{stroke:var(--color-gray)}.tap-chart__line{stroke:var(--color-accent)}.tap-chart__dot{fill:var(--color-accent)}.controls .switch+.switch{margin-top:4px}.tap-tips ul{margin:0;padding-left:1.1em;font-size:var(--fs-base);color:var(--color-ink-soft)}.tap-tips li+li{margin-top:4px}.tap-tips strong{color:var(--color-ink)}@media (max-width: 600px){.tap-pad{width:min(236px,62vw)}.tap-pad__bpm{font-size:3.6rem}.tap-stat{padding:6px 2px 5px}.tap-stat__val{font-size:1.2rem}.tap-stat__label{letter-spacing:0;gap:3px}.tap-chart svg{height:52px}.tap-actions{grid-template-columns:44px 44px var(--tap-sm) var(--tap-sm) var(--tap-sm) minmax(0,1fr)}.tap-actions__go{padding:0 12px;gap:.35em}.tap-actions .icon-btn{width:var(--tap-sm);height:var(--tap-sm)}.tap-go__long{display:none}}@media (min-width: 601px){.tap-go__short{display:none}}@media (max-height: 700px) and (max-width: 600px){.tap-pad{width:min(200px,54vw)}.tap-pad__bpm{font-size:3.1rem}.tap-stage{gap:12px}}.tap-stage:is(:fullscreen,.is-stage-mode){gap:min(3vh,28px)}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-actions,.tap-stage:is(:fullscreen,.is-stage-mode) .tap-chart,.tap-stage:is(:fullscreen,.is-stage-mode) .kbd-hints{display:none}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-pad{width:min(68vmin,58vh,720px);border-width:3px}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-pad__bpm{font-size:min(20vmin,17vh,13rem)}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-pad__unit{font-size:min(2.6vmin,1.2rem)}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-pad__help{font-size:min(2.4vmin,1.1rem)}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-style{font-size:min(3vmin,1.4rem)}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-stats{max-width:min(68vmin,720px)}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-stat__val{font-size:min(5vmin,2.6rem)}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-stat__label{font-size:min(1.9vmin,.95rem)}@media (orientation: landscape) and (max-height: 600px){.tap-stage:is(:fullscreen,.is-stage-mode) .tap-pad{width:min(64vh,520px)}.tap-stage:is(:fullscreen,.is-stage-mode) .tap-stats{display:none}}.ptl-ico{display:inline-block;width:16px;height:16px;margin:0 6px 0 0;vertical-align:-3px;color:var(--g-ink, var(--color-accent-ink));flex:0 0 auto}[role=tab] .ptl-ico{margin-right:6px}[role=tab][aria-selected=true] .ptl-ico{color:inherit}@media (max-width: 600px){[role=tab] .ptl-ico{display:none}}
