/* Native amber instrument inside the existing arcade studio frame. */
.metro { --graphite:#0b0b0f; --plate:#16161d; --dial:#25252f; --chalk:#f4f2ec; --dust:#b9b6ae; --amber:#ffb020; --rule:#393941; --settle:cubic-bezier(.22,1,.36,1); --press:cubic-bezier(.7,0,.2,1); background:var(--graphite); color:var(--chalk); font-family:Archivo,system-ui,sans-serif; }
.metro * { min-width:0; }
.metro a { color:var(--amber); text-underline-offset:.22em; }
.metro a:hover { color:var(--chalk); }
.metro p { color:var(--dust); text-wrap:pretty; max-width:none; }
.metro h1,.metro h2,.metro h3 { font-family:Archivo,system-ui,sans-serif; color:var(--chalk); text-shadow:none; font-variation-settings:normal; font-weight:700; letter-spacing:-.04em; text-wrap:balance; }
.metro h1 { font-size:clamp(2.8rem,4.8vw,4.6rem); line-height:1.03; margin:1rem 0 1.5rem; }
.metro h2 { font-size:clamp(2rem,3.4vw,3.2rem); line-height:1.1; }
.metro h3 { font-size:1.18rem; line-height:1.35; letter-spacing:-.02em; }
.metro b { color:var(--chalk); }
.metro .line { display:block; }
.metro .keep { white-space:nowrap; }
.metro-label { font-family:"IBM Plex Mono",monospace; font-size:.72rem; line-height:1.7; letter-spacing:.07em; text-transform:uppercase; color:var(--dust); }
.metro-crumb { padding:1.8rem 0 0; font-size:.82rem; color:var(--dust); }
.metro-crumb a { color:var(--dust); }
.metro-name { color:var(--amber)!important; font-size:1.22rem; font-weight:600; margin-top:1.7rem; }
.metro-hero { padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,7vw,5rem); }
.metro-hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.metro .metro-lede { color:var(--dust); font-size:clamp(1.05rem,1vw + .5rem,1.2rem); line-height:1.65; max-width:48ch; }
.status-light { display:inline-block; width:.5rem; height:.5rem; background:var(--amber); border-radius:50%; margin-right:.4rem; }
.metro-action { display:inline-flex; align-items:center; gap:1.7rem; background:var(--amber); color:var(--graphite)!important; padding:.9rem 1.25rem; margin-top:1.8rem; font-size:.95rem; text-decoration:none; font-weight:700; transition:transform .12s var(--press); }
.metro-action:hover { transform:translateY(-2px); background:#ffc651; }
.metro .metro-status { margin-top:1.1rem; font-size:.8rem; }
.instrument { background:var(--plate); border:1px solid var(--rule); padding:1.5rem; border-radius:1.5rem; }
.instrument-label { display:grid; grid-template-columns:1fr max-content; gap:1rem; font:.68rem/1.5 "IBM Plex Mono",monospace; color:var(--dust); text-transform:uppercase; letter-spacing:.05em; }
.tempo-face { aspect-ratio:1; max-width:300px; margin:1.2rem auto; border:15px solid var(--dial); border-top-color:var(--amber); border-radius:50%; position:relative; display:grid; place-items:center; }
.tempo-ticks { position:absolute; inset:10px; border-radius:50%; background:repeating-conic-gradient(from 0deg,#73737c 0deg 1deg,transparent 1deg 10deg); mask:radial-gradient(circle,transparent 64%,#000 65%); }
.tempo-center { display:grid; text-align:center; z-index:1; }
#tempo-readout { font-size:clamp(3.5rem,6vw,5.4rem); font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.06em; }
.tempo-center span { font:.78rem/2 "IBM Plex Mono",monospace; letter-spacing:.15em; color:var(--dust); }
.pulse-beats { display:grid; grid-template-columns:repeat(var(--beat-count,4),16px); justify-content:center; gap:12px; margin:1.3rem 0; }
.pulse-beats i { height:16px; background:#777780; border-radius:50%; }
.pulse-beats i.active { background:var(--amber); }
.range-label { display:block; margin-bottom:.6rem; }
.instrument input { accent-color:var(--amber); width:100%; min-height:30px; cursor:pointer; }
.instrument-controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; margin-top:.8rem; }
.instrument button { min-height:48px; border:1px solid var(--rule); background:var(--dial); color:var(--chalk); font:600 .86rem Archivo,sans-serif; border-radius:.55rem; white-space:nowrap; cursor:pointer; }
.instrument button:hover { border-color:var(--amber); }
.instrument #pulse-start { background:var(--amber); color:var(--graphite); border-color:var(--amber); }
.instrument button:active { transform:translateY(1px); }
.metro .instrument-hint { text-align:center; font-size:.7rem; line-height:1.6; margin:1rem 0 0; }
.metro-band { background:var(--plate); border-block:1px solid var(--rule); padding:1.7rem 0; }
.metro-band-content { display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center; }
.metro-band p { font-size:1.08rem; }
.metro-band span { font:.68rem/1.7 "IBM Plex Mono",monospace; color:var(--dust); text-wrap:balance; }
.metro-section { padding:clamp(3rem,7vw,6rem) 0; }
.metro-section-heading { margin-bottom:2.8rem; display:grid; grid-template-columns:1fr 1fr; column-gap:4rem; align-items:start; }
.metro-section-heading .metro-label { grid-column:1/-1; margin-bottom:.8rem; }
.metro-section-heading p:not(.metro-label) { font-size:1rem; line-height:1.7; margin-top:.3rem; }
.practice-spread,.library-spread { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.app-screen { margin:0; display:grid; justify-items:center; }
.app-screen img { width:100%; max-width:270px; height:auto; border:1px solid var(--rule); border-radius:1rem; }
.app-screen figcaption { margin-top:1rem; font:.7rem/1.5 "IBM Plex Mono",monospace; color:var(--dust); }
.practice-row { padding:1.5rem 0; border-top:1px solid var(--rule); }
.practice-row:last-child { border-bottom:1px solid var(--rule); }
.practice-row h3 { margin-bottom:.55rem; }
.practice-row p { line-height:1.7; font-size:.97rem; }
.library-section { background:var(--plate); border-block:1px solid var(--rule); }
.library-copy h2 { margin:1rem 0 1.5rem; }
.resource-list { list-style:none; margin:2rem 0 1.5rem; padding:0; display:grid; gap:1.3rem; }
.resource-list li { display:grid; grid-template-columns:10rem minmax(0,1fr); gap:1rem; font-size:.93rem; line-height:1.7; color:var(--dust); }
.metro .metro-small { font-size:.8rem; line-height:1.7; }
.edition-grid { display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--rule); }
.edition-grid > div { padding:2rem 2rem 2rem 0; }
.edition-grid > div+div { padding:2rem 0 2rem 2rem; border-left:1px solid var(--rule); }
.edition-grid h3 { color:var(--amber); margin-bottom:.8rem; }
.edition-grid p { line-height:1.75; font-size:.97rem; }
.metro-close { margin-top:2.2rem; display:grid; grid-template-columns:1fr max-content; gap:2rem; align-items:center; }
.metro-close p { font-size:.9rem; line-height:1.7; }
.metro-close nav { display:flex; gap:1.4rem; font-size:.82rem; }
.metro a:focus-visible,.metro button:focus-visible,.metro input:focus-visible { outline:3px solid var(--amber); outline-offset:5px; }
.metro ::selection { background:var(--amber); color:var(--graphite); }
.metro-skip { position:fixed; top:-100px; left:16px; z-index:100; background:#ffb020; color:#0b0b0f; padding:1rem; }
.metro-skip:focus { top:16px; }
.policy-layout { display:grid; grid-template-columns:12rem minmax(0,1fr); gap:4rem; padding-top:4rem; padding-bottom:5rem; }
.policy-nav nav { display:grid; margin-top:1rem; gap:1rem; font-size:.9rem; }
.policy-copy { max-width:68ch; }
.policy-copy h1 { font-size:clamp(2.3rem,4vw,3.6rem); margin-top:.8rem; }
.policy-copy section { padding-top:2.5rem; scroll-margin-top:8rem; }
.policy-copy h2 { font-size:1.6rem; letter-spacing:-.025em; margin-bottom:1rem; }
.policy-copy p { line-height:1.8; margin-bottom:1rem; }
@media (max-width:58rem) { .metro-hero-grid { grid-template-columns:1fr 1fr; gap:2rem; } .metro h1 { font-size:clamp(2.6rem,5vw,3.4rem); } .instrument { padding:1.2rem; } .metro-section-heading,.practice-spread,.library-spread { gap:2rem; } .resource-list li { grid-template-columns:1fr; gap:.2rem; } .metro-close { grid-template-columns:1fr; gap:1rem; } }
@media (max-width:40rem) { .metro-hero-grid,.metro-band-content,.metro-section-heading,.practice-spread,.library-spread,.edition-grid,.policy-layout { grid-template-columns:1fr; } .metro-hero-grid { gap:2.5rem; } .metro h1 { font-size:clamp(2.6rem,9vw,3.6rem); } .metro-label { font-size:.64rem; } .metro-hero { padding-top:2.8rem; } .metro-band-content { gap:.7rem; } .metro-section-heading { gap:.7rem; margin-bottom:2rem; } .metro-section-heading .metro-label { margin:0; } .practice-spread { gap:2rem; } .app-screen img { max-width:248px; } .library-spread { gap:2.4rem; } .edition-grid > div,.edition-grid > div+div { padding:1.5rem 0; border-left:0; } .edition-grid > div+div { border-top:1px solid var(--rule); } .policy-layout { gap:2rem; padding-top:2.8rem; } .policy-nav nav { display:flex; flex-wrap:wrap; gap:1rem 1.4rem; } .metro .keep { white-space:normal; } }
@media (prefers-reduced-motion:reduce) { .metro *, .metro *::before, .metro *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

.tempo-center #tempo-marking { font-size:.61rem; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:40rem) { .policy-nav nav { display:grid; grid-template-columns:1fr 1fr; gap:0; } .policy-nav nav a { min-height:44px; display:flex; align-items:center; } .policy-nav nav a:last-child { grid-column:1/-1; } }

.instrument #meter { min-height:44px; min-width:44px; font:.72rem/1.5 "IBM Plex Mono",monospace; margin-top:-12px; margin-bottom:-12px; }

.instrument #tap-tempo { width:100%; margin-top:.5rem; }