.metro-stage{gap:var(--space-2);transition:background-color .25s ease}.metro-stage.is-flash{background-color:var(--color-flash);transition:none}.metro-song{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;max-width:520px;padding:6px;border-radius:999px;background:var(--color-surface-2);border:1px solid var(--color-hairline)}.metro-song__info{display:flex;align-items:baseline;justify-content:center;gap:8px;min-width:0;text-align:center}.metro-song__pos{font-size:var(--fs-xs);font-weight:700;color:var(--color-accent-ink);font-variant-numeric:tabular-nums;flex:0 0 auto}.metro-song__name{font-weight:700;font-size:var(--fs-base);color:var(--color-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.metro-song__meta{font-size:var(--fs-xs);color:var(--color-gray);white-space:nowrap;flex:0 0 auto}.metro-song.is-changed .metro-song__name{animation:song-in .35s var(--ease)}@keyframes song-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.beats{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px;width:100%;min-height:72px;padding-top:16px}.beat{position:relative;width:40px;height:56px;border:0;padding:0;background:none;display:flex;align-items:flex-end;justify-content:center;touch-action:manipulation}.beat__bar{width:100%;border-radius:6px;background:var(--color-surface-3);border:1px solid var(--color-hairline);transform-origin:bottom;transition:height .15s var(--ease),background-color .08s ease,box-shadow .08s ease}.beat[data-level="3"] .beat__bar{height:100%;background:var(--color-accent-dim);border-color:color-mix(in srgb,var(--color-accent) 50%,transparent)}.beat[data-level="2"] .beat__bar{height:70%;background:color-mix(in srgb,var(--color-ink) 18%,var(--color-surface))}.beat[data-level="1"] .beat__bar{height:42%}.beat[data-level="0"] .beat__bar{height:18%;background:transparent;border-style:dashed}.beat.is-active .beat__bar{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 18px var(--color-accent-glow);transition:none;animation:beat-hit .16s ease-out}.beat[data-level="0"].is-active .beat__bar{background:transparent;border-color:var(--color-accent);box-shadow:none}.beat__num{position:absolute;top:-18px;font-size:var(--fs-xs);font-weight:700;color:var(--color-gray)}.beat:hover .beat__bar{border-color:var(--color-accent)}.beats--many .beat{width:30px;height:48px}@keyframes beat-hit{0%{transform:scaleY(1.08)}to{transform:none}}.metro-tempo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2);width:100%;max-width:460px}.metro-tempo__read{text-align:center;min-width:0}.metro-tempo__input{width:100%;background:transparent;border:0;padding:0;margin:0;border-radius:var(--radius);cursor:text}.metro-tempo__input:focus{outline:none;background:var(--color-surface-2)}.metro-range{max-width:460px}.metro-actions{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-3);width:100%;max-width:460px}.metro-tap{justify-self:end;min-width:84px}.metro-tap.is-hit{background:var(--color-accent-dim);border-color:var(--color-accent);color:var(--color-accent-ink)}.metro-play-wrap{position:relative;display:grid;place-items:center}.metro-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--color-accent);opacity:0;pointer-events:none}.metro-pulse.is-beat{animation:metro-pulse .45s ease-out}.metro-pulse.is-down{animation:metro-pulse-down .6s ease-out}@keyframes metro-pulse{0%{transform:scale(1);opacity:.7}to{transform:scale(1.5);opacity:0}}@keyframes metro-pulse-down{0%{transform:scale(1);opacity:1;border-width:4px}to{transform:scale(1.8);opacity:0;border-width:1px}}.metro-counter{justify-self:start;display:flex;flex-direction:column;align-items:center;min-width:84px;font-family:var(--font-heading);font-weight:700;font-size:1.8rem;line-height:1;font-variant-numeric:tabular-nums}.metro-counter small{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-gray);margin-top:6px}.metro-status{margin:0;min-height:1.4em;font-size:var(--fs-base);font-weight:700;color:var(--color-accent-ink);text-align:center}.metro-status.is-muted{color:var(--color-warn)}.metro-status:empty{display:none}.metro-quick{width:100%;display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--color-hairline)}.metro-quick__row{display:grid;gap:8px;min-width:0}.metro-quick__label{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-gray)}.metro-quick__value{margin-left:auto;letter-spacing:.02em;text-transform:none;font-size:var(--fs-sm);color:var(--color-ink)}.metro-sig{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:-2px -2px -4px}.metro-sig::-webkit-scrollbar{display:none}.metro-sig button{flex:1 0 auto;min-width:48px;min-height:var(--tap-sm);padding:0 10px}.metro-sub button{min-height:var(--tap-sm)}.metro-tabs{padding-top:10px}.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;margin-bottom:14px;border-radius:999px;background:var(--color-surface-2);border:1px solid var(--color-hairline)}.tabs [role=tab]{position:relative;min-height:var(--tap-sm);min-width:0;padding:0 4px;border:0;border-radius:999px;background:transparent;color:var(--color-gray);font-weight:700;font-size:var(--fs-sm);white-space:nowrap;transition:background .15s ease,color .15s ease;touch-action:manipulation}.tabs [role=tab]:hover{color:var(--color-ink)}.tabs [role=tab][aria-selected=true]{background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-sm)}.tab-dot{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 6px var(--color-accent-glow);opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .2s var(--ease)}.tab-dot.is-on{opacity:1;transform:none}.tab-pane{display:grid;gap:var(--space-2);animation:metro-fade .18s ease-out}.tab-pane .field+.field{margin-top:0}@keyframes metro-fade{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}.ramp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;transition:opacity .2s ease}.ramp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.ramp-grid .field+.field{margin-top:0}.ramp-grid .stepper{grid-template-columns:var(--tap-sm) minmax(0,1fr) var(--tap-sm);gap:6px}.ramp-grid .stepper .icon-btn{width:var(--tap-sm);height:var(--tap-sm)}.ramp-grid .stepper__value{height:var(--tap-sm);font-size:var(--fs-md)}.ramp-grid .field__label{font-size:var(--fs-sm)}.ramp-grid.is-off{opacity:.45}.metro-set{counter-reset:song}.metro-set .list__item{gap:8px}.metro-set .list__item:before{counter-increment:song;content:counter(song);flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--color-surface-2);border:1px solid var(--color-hairline);font-size:var(--fs-xs);font-weight:700;color:var(--color-gray);font-variant-numeric:tabular-nums}.metro-set .list__item.is-current:before{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.metro-set .list__item.is-current .list__title{color:var(--color-accent-ink)}.metro-set .list__item.is-editing{background:var(--color-accent-dim);border-radius:var(--radius)}.metro-set__tools{display:flex;gap:6px;flex:0 0 auto}.metro-set__hint{margin:0}#setCancel{justify-self:start}.metro-groove{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-media);border:1px solid var(--color-border);background:linear-gradient(120deg,var(--color-accent-dim),transparent 60%),var(--color-surface);color:var(--color-ink-soft);font-size:var(--fs-base);box-shadow:var(--shadow-card);transition:border-color .2s ease,transform .2s var(--ease)}.metro-groove:hover{border-color:var(--color-accent);color:var(--color-ink-soft);transform:translateY(-1px)}.metro-groove strong{color:var(--color-ink);display:block}.metro-groove__icon{width:30px;height:30px;color:var(--color-accent-ink);flex:0 0 auto}.metro-groove__icon svg{width:100%;height:100%;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.25))}.metro-groove__txt{flex:1 1 auto;min-width:0}.metro-groove__arrow{width:18px;height:18px;color:var(--color-gray);flex:0 0 auto;transition:transform .2s var(--ease),color .2s ease}.metro-groove:hover .metro-groove__arrow{color:var(--color-accent-ink);transform:translate(2px,-2px)}.metro-tips p{margin:0;font-size:var(--fs-base);color:var(--color-ink-soft)}.metro-tips strong{color:var(--color-ink)}.metro-stage:fullscreen,.metro-stage.is-stage-mode{gap:clamp(10px,2.2vh,28px)}.metro-stage:fullscreen .metro-range,.metro-stage.is-stage-mode .metro-range,.metro-stage:fullscreen .metro-quick,.metro-stage.is-stage-mode .metro-quick,.metro-stage:fullscreen .kbd-hints,.metro-stage.is-stage-mode .kbd-hints{display:none}.metro-stage:fullscreen .beats,.metro-stage.is-stage-mode .beats{gap:clamp(8px,1.6vw,18px);min-height:0}.metro-stage:fullscreen .beat,.metro-stage.is-stage-mode .beat{width:clamp(44px,7vw,96px);height:clamp(72px,13vh,150px)}.metro-stage:fullscreen .beats--many .beat,.metro-stage.is-stage-mode .beats--many .beat{width:clamp(26px,4vw,56px)}.metro-stage:fullscreen .beat__num,.metro-stage.is-stage-mode .beat__num{font-size:var(--fs-md);top:-26px}.metro-stage:fullscreen .metro-tempo,.metro-stage.is-stage-mode .metro-tempo,.metro-stage:fullscreen .metro-actions,.metro-stage.is-stage-mode .metro-actions{max-width:760px}.metro-stage:fullscreen .readout__unit,.metro-stage.is-stage-mode .readout__unit{font-size:var(--fs-md)}.metro-stage:fullscreen .metro-counter,.metro-stage.is-stage-mode .metro-counter{font-size:3rem}.metro-stage:fullscreen .metro-song,.metro-stage.is-stage-mode .metro-song{max-width:760px;padding:8px}.metro-stage:fullscreen .metro-song__name,.metro-stage.is-stage-mode .metro-song__name{font-size:var(--fs-xl);font-family:var(--font-heading)}.metro-stage:fullscreen .metro-song__meta,.metro-stage.is-stage-mode .metro-song__meta{font-size:var(--fs-md)}.metro-stage:fullscreen .metro-song .icon-btn,.metro-stage.is-stage-mode .metro-song .icon-btn{width:56px;height:56px}@media (max-width: 600px){.metro-stage{gap:12px}.metro-song{padding:4px;gap:6px}.metro-song__meta{display:none}.beats{min-height:58px;padding-top:14px;gap:6px}.beat{width:34px;height:44px}.beats--many .beat{width:22px;height:36px}.metro-tempo{gap:8px}.metro-tempo .icon-btn--lg{width:48px;height:48px}.readout__unit{margin-top:4px}.metro-actions{gap:12px}.metro-tap,.metro-counter{min-width:64px}.metro-counter{font-size:1.5rem}.metro-quick{padding-top:10px;gap:8px}.tabs [role=tab]{font-size:var(--fs-xs)}}@media (max-width: 420px){.ramp-grid{grid-template-columns:minmax(0,1fr)}.ramp-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 601px){.metro-stage{padding-top:var(--space-3);padding-bottom:var(--space-3)}.metro-stage:not(:fullscreen):not(.is-stage-mode) .readout{font-size:clamp(4.5rem,9vw,6.4rem)}.metro-quick__row{grid-template-columns:112px minmax(0,1fr);align-items:center;gap:10px}.metro-quick__label{flex-wrap:wrap;row-gap:2px}.metro-quick__value{margin-left:0;width:100%;font-size:var(--fs-sm);color:var(--color-ink-soft)}.metro-sig{overflow:visible}.metro-sig button{flex:1 1 0;min-width:0;padding:0 6px}}@media (min-width: 601px){.metro-stage:has(>.metro-song:not([hidden])):not(:fullscreen):not(.is-stage-mode){gap:12px;padding-top:18px;padding-bottom:18px}.metro-stage:has(>.metro-song:not([hidden])):not(:fullscreen):not(.is-stage-mode) .readout{font-size:clamp(4.2rem,8vw,5.6rem)}.metro-stage:has(>.metro-song:not([hidden])):not(:fullscreen):not(.is-stage-mode) .beats{min-height:64px;padding-top:14px}}@media (max-width: 600px){.metro-stage:has(>.metro-song:not([hidden])) .metro-range{display:none}.metro-stage:has(>.metro-song:not([hidden])) .beats{padding-top:12px;min-height:54px}}@media (max-width: 600px){.metro-stage:fullscreen .metro-song__name,.metro-stage.is-stage-mode .metro-song__name{font-size:var(--fs-lg)}.metro-stage:fullscreen .metro-song .icon-btn,.metro-stage.is-stage-mode .metro-song .icon-btn{width:44px;height:44px}}.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}}