.tool--tap{gap:14px}.tappad{border-radius:var(--md-sys-shape-corner-extra-large);background:var(--md-sys-color-primary-container);width:100%;min-height:clamp(220px,42vh,320px);color:var(--md-sys-color-on-primary-container);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:relative;overflow:clip}.tappad:active{background:color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-primary-container))}.tappad--testing{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.tappad__pulse{border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at center, color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent) 0%, transparent 70%);animation:tappad-pulse .42s var(--md-sys-motion-easing-standard-decelerate);position:absolute;inset:0}@keyframes tappad-pulse{0%{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}.tappad__marking{opacity:.8;min-height:1.25rem}.tappad__bpm{letter-spacing:-.02em;font-size:clamp(4.5rem,22vw,7rem);font-weight:500;line-height:1}.tappad__caption{letter-spacing:.05em;opacity:.85;margin-top:6px}.tappad__meta{text-align:center;opacity:.85;padding:0 12px;position:absolute;bottom:14px;left:0;right:0}.tap-hint{text-align:center;margin:-6px 0 0}.tap-hint__kbd{display:none}@media (hover:hover) and (pointer:fine){.tap-hint__kbd{display:inline}}.tap-hint kbd{font:var(--md-sys-typescale-label-small);font-family:var(--md-ref-typeface-mono);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);border-radius:4px;padding:0 4px}.tap-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.tap-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.tap-switch{align-items:center;gap:12px;display:inline-flex}.tap-alt,.takes,.tap-typed{flex-direction:column;gap:8px;display:flex}.tap-typed__input{border-radius:var(--md-sys-shape-corner-medium);border:1px solid var(--md-sys-color-outline);background:var(--md-sys-color-surface-container-lowest);width:100%;color:var(--md-sys-color-on-surface);padding:12px 16px}.tap-typed__input:focus{outline:2px solid var(--md-sys-color-primary);border-color:#0000}.accuracy{gap:10px;display:grid}.accuracy__head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.accuracy__scale{border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-surface-container-highest);height:28px;position:relative}.accuracy__center{background:var(--md-sys-color-on-surface-variant);border-radius:1px;width:2px;margin-left:-1px;position:absolute;top:4px;bottom:4px;left:50%}.accuracy__dot{background:color-mix(in srgb, var(--md-sys-color-primary) 45%, transparent);border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;top:50%}.accuracy__dot.is-last{background:var(--md-sys-color-tertiary);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--md-sys-color-tertiary) 30%, transparent);margin:-7px 0 0 -7px}.accuracy__legend{flex-wrap:wrap;justify-content:space-between;gap:8px;display:flex}.lengths{padding:12px 16px 6px}.lengths__head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;display:flex}.lengths__table{border-collapse:collapse;width:100%;font:var(--md-sys-typescale-body-medium)}.lengths__table th{text-align:left;font:var(--md-sys-typescale-label-medium);color:var(--md-sys-color-on-surface-variant);padding:6px 0}.lengths__table td{border-top:1px solid var(--md-sys-color-outline-variant);padding:6px 0}.lengths__table td:not(:first-child),.lengths__table th:not(:first-child){text-align:right}.lengths__table tr.is-beat td{color:var(--md-sys-color-primary);font-weight:600}.lengths__sym{min-width:3.2em;color:var(--md-sys-color-on-surface-variant);font-variant-numeric:tabular-nums;display:inline-block}