.metronome-page .heading-lg { overflow-wrap: anywhere; }
.metronome-page main { overflow-wrap: anywhere; }
.metronome-page .aw-hero-action, .metronome-page .tool-story-jump { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.metronome-page .tool-story-step { grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; }
.metronome-page .tool-story-step > div { min-width: 0; }
.metronome-page .tool-story-legend { display: grid; grid-template-columns: minmax(0, 1fr); }
.metronome-page .tool-story-legend span { white-space: normal; min-width: 0; }
.metro-workspace .control-head { flex-wrap: wrap; gap: .4rem; }
.metro-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.125rem; }
.metro-workspace .tool-panel { margin: 0; min-width: 0; }
.metro-workspace label { display: block; font-weight: 650; margin: 1rem 0 .4rem; }
.metro-workspace .select-control { width: 100%; min-width: 0; min-height: 3rem; font: inherit; border: 1px solid var(--brand-border); border-radius: .65rem; padding: .65rem .8rem; background: var(--brand-surface); color: var(--brand-text-dark); }
.metro-tempo-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; align-items: end; }
.metro-tempo-row > div { grid-column: 1 / -1; min-width: 0; }
.metro-tempo-row button { min-width: 0; padding: .4rem; min-height: 3.2rem; font-size: 1rem; }
.metro-tempo-row input { font-size: 1.75rem !important; font-variant-numeric: tabular-nums; }
.metro-tempo-row label { font-size: .85rem; }
.metro-workspace button { white-space: normal; overflow-wrap: anywhere; min-height: 2.75rem; }
.metro-workspace .status-note { color: var(--brand-muted-strong); overflow-wrap: anywhere; }
.metro-workspace [role="alert"]:empty { display: none; }
.metro-workspace [role="alert"] { color: var(--brand-primary-dark); font-weight: 650; }
.metro-workspace [aria-invalid="true"] { border-color: var(--brand-primary-dark); }
.metro-workspace #metro-tap { width: 100%; }
.metro-workspace .metro-accent { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; }
.metro-accent input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; accent-color: var(--brand-primary-dark); }
.metro-transport, .metro-exports { flex-wrap: wrap; gap: .6rem; }
.metro-transport button { flex: 1 1 10rem; }
.metro-bar-summary { font-size: 1.05rem; line-height: 1.6; font-weight: 750; color: var(--brand-text-dark); }
.metro-pulses { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 1rem; }
.metro-pulse { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 2px solid var(--brand-border); border-radius: 50%; color: var(--brand-text-dark); font-variant-numeric: tabular-nums; }
.metro-pulse.is-accent { border-style: double; border-width: 4px; font-weight: 850; }
.metro-pulse.is-current { outline: 3px solid var(--brand-text-dark); outline-offset: 2px; font-weight: 850; }
.metro-position { min-height: 3.5rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.metro-plan { width: 100%; height: 8.125rem; display: block; overflow: hidden; background: var(--brand-surface-soft); border-radius: .75rem; }
.metro-plan text { font: 14px system-ui, sans-serif; fill: var(--brand-text-dark); }
.metro-axis { stroke: var(--brand-border); stroke-width: 1; }
.metro-tick { stroke: var(--brand-primary-dark); stroke-width: 2; }
.metro-tick--down { stroke-width: 4; }
.metro-tick--sub { stroke: var(--brand-muted-strong); stroke-width: 1.5; }
.metro-guide-link { display: inline-block; margin-top: 1rem; font-weight: 650; text-decoration: underline; }
.metro-workspace .row > button { margin: 0; }
@media (min-width: 1000px) { .metro-workspace { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } .metro-output { grid-column: 1 / -1; } }
@media (min-width: 640px) { .metronome-page .tool-story-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .metronome-page .tool-hero:has(.tool-hero-preview) > .heading-lg { font-size: clamp(2rem, 4vw, 3.2rem); } }
@media (max-width: 480px) { .metronome-page .heading-lg { font-size: clamp(2rem, 11vw, 2.7rem); } .metronome-page .tool-hero-preview-rail { grid-template-columns: minmax(0, 1fr); } .metronome-page .tool-hero-preview-rail span { min-width: 0; white-space: normal; } .metro-workspace .tool-panel { padding: 1rem; } .metro-exports button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .metro-workspace *, .metro-workspace *::before { animation: none !important; transition: none !important; } }