.metro-train-toggle{height:38px;padding:0 12px;border:1px solid #e1e8ee;border-radius:12px;background:#f4f6f8;color:#8a99a4;font-size:13px;font-weight:650;flex:none;transition:box-shadow .25s,background .25s;touch-action:manipulation}.metro-train-toggle:disabled{opacity:.55;cursor:default}.metro-train-toggle.is-ready{color:#087b91;border-color:#9edce5;background:#ecfcff;box-shadow:0 0 15px #00bdd522}.metro-train-toggle[aria-pressed=true]{background:#dffafa;border-color:#36bac9;box-shadow:0 0 0 3px #31c6d419,0 0 20px #12c5d232}
.metro-train-stage{grid-column:1/-1;position:relative;min-width:0;isolation:isolate}.metro-train-hud{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:4px 10px;align-items:center;border:1px solid #e1edf0;border-radius:18px;background:linear-gradient(110deg,#f2fcfd,#fff 50%,#fdf5fa);padding:12px 14px;direction:ltr}.metro-train-hud>div{display:flex;flex-direction:column;gap:1px}.metro-train-hud span{font-size:11px;color:#748896}.metro-train-hud strong{font-size:24px;line-height:1.2;font-weight:600;font-variant-numeric:tabular-nums}.metro-train-hud p{grid-column:1/4;grid-row:2;margin:3px 0 0;font-size:12px;color:#7c8b95;min-height:18px}.metro-train-hud button{grid-column:4;grid-row:1/3;border:1px solid #d7e5eb;border-radius:12px;padding:9px 12px;background:#fff;color:#607483;font-size:12px;min-height:40px}
#lab-metronome.is-training .metro-columns{grid-template-columns:1fr;gap:0}#lab-metronome.is-training .metro-controls,#lab-metronome.is-training .metro-mode,#lab-metronome.is-training .metro-ratio,#lab-metronome.is-training .metro-tempo-controls,#lab-metronome.is-training .metro-clock-hint,#lab-metronome.is-training .metro-dial-hint{display:none}#lab-metronome.is-training .metro-visual-column{display:grid;grid-template-columns:1fr;gap:12px;max-width:510px;width:100%;margin:auto}#lab-metronome.is-training .metro-train-stage{width:100%;height:320px;display:grid;place-items:start center;padding-top:2px}#lab-metronome.is-training .metro-orbit{width:270px;margin:auto auto 0;align-self:start;grid-column:auto}#lab-metronome.is-training .metro-cycle{display:none}
.metro-train-pads{position:absolute;inset:0;pointer-events:none;direction:ltr}.metro-train-pad{position:absolute;bottom:0;width:108px;height:129px;border:1px solid color-mix(in srgb,var(--train-color) 28%,white);border-radius:24px;background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--train-color) 7%,white));color:var(--train-color);box-shadow:0 7px 20px color-mix(in srgb,var(--train-color) 10%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:9px 4px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer;overflow:visible;outline-offset:4px;-webkit-tap-highlight-color:transparent}.metro-train-pad[data-train-pad=left]{left:0}.metro-train-pad[data-train-pad=right]{right:0}.train-pad-name{font-size:12px;font-weight:600;line-height:1.2}.train-target{position:relative;display:grid;place-items:center;width:58px;height:58px;border:1px solid color-mix(in srgb,var(--train-color) 32%,white);border-radius:50%;background:#ffffffb0}.train-target b{font-size:12px;font-weight:400;line-height:1;opacity:.7}.train-approach{position:absolute;inset:0;border:2px solid var(--train-color);border-radius:50%;opacity:calc(.1 + var(--approach,0)*.8);transform:scale(calc(1.6 - var(--approach,0)*.6));box-shadow:0 0 8px color-mix(in srgb,var(--train-color) 22%,transparent);pointer-events:none}.train-feedback{font-size:11px;line-height:15px;min-height:15px;font-weight:600}.metro-train-pad.is-due .train-target{background:color-mix(in srgb,var(--train-color) 16%,white);box-shadow:0 0 18px color-mix(in srgb,var(--train-color) 35%,transparent)}.train-impact{position:absolute;inset:-4px;border:2px solid var(--train-color);border-radius:50%;opacity:0;pointer-events:none}.metro-train-pad.is-hit .train-impact{animation:train-impact .35s ease-out}.metro-train-pad.is-hit[data-grade=perfect]{box-shadow:0 0 0 3px color-mix(in srgb,var(--train-color) 14%,transparent),0 0 27px color-mix(in srgb,var(--train-color) 27%,transparent)}.metro-train-pad[data-grade=outside] .train-feedback{color:#967655}.metro-train-pad:disabled{opacity:.45;cursor:default}.metro-train-pad:disabled .train-approach{display:none}.metro-train-instruction{grid-column:1/-1;max-width:390px;margin:0 auto;text-align:center;font-size:12px;line-height:1.6;color:#7c8e99}
.metro-train-effect{position:absolute;inset:0;overflow:hidden;border-radius:28px;pointer-events:none;z-index:3;opacity:0;display:grid;place-items:center}.metro-train-effect strong{position:absolute;top:39%;font-size:19px;letter-spacing:-.03em;background:#ffffffed;padding:11px 20px;border-radius:30px;color:#378b98;box-shadow:0 0 28px #40d3d62a;opacity:0}.train-aura{position:absolute;width:255px;height:255px;top:6px;border:2px solid #31cad6;border-radius:50%;box-shadow:0 0 18px #35d9e366,inset 0 0 18px #df5ca633}.train-spark{position:absolute;left:50%;top:43%;width:5px;height:14px;border-radius:4px;background:#30bbcf;opacity:0;transform:rotate(calc(var(--spark)*30deg)) translateY(-125px)}.train-spark:nth-child(odd){background:#e665b2}
[data-celebrate] .metro-train-effect{opacity:1}[data-celebrate] .metro-train-effect strong{animation:train-reward 1.6s ease both}[data-celebrate] .train-spark{animation:train-sparks 1.4s ease-out both}[data-celebrate='1'] .train-aura{animation:train-orbit 1.6s ease both}[data-celebrate='2'] .train-aura{border-style:dashed;animation:train-spin 1.6s cubic-bezier(.15,.7,.25,1) both}[data-celebrate='3'] .train-aura{border-width:6px;animation:train-bloom 1.6s ease-out both}[data-celebrate='4'] .train-aura{border-color:#dd56a6 #36ccde;animation:train-prism 1.6s ease both}[data-celebrate='5'] .train-aura{border-width:1px;box-shadow:0 0 0 12px #18bcd518,0 0 0 24px #df58a512;animation:train-ripple 1.6s ease-out both}
@keyframes train-impact{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(1.55)}}@keyframes train-reward{0%,100%{opacity:0;transform:translateY(9px) scale(.95)}20%,78%{opacity:1;transform:translateY(0) scale(1)}}@keyframes train-sparks{0%{opacity:0;transform:rotate(calc(var(--spark)*30deg)) translateY(-90px) scale(.5)}25%{opacity:.9}100%{opacity:0;transform:rotate(calc(var(--spark)*30deg + 20deg)) translateY(-178px) scale(.2)}}@keyframes train-orbit{0%{opacity:0;transform:scale(.75)}35%{opacity:.8}100%{opacity:0;transform:scale(1.3)}}@keyframes train-spin{0%{opacity:0;transform:rotate(-180deg) scale(.8)}20%{opacity:.8}100%{opacity:0;transform:rotate(180deg) scale(1.16)}}@keyframes train-bloom{0%{opacity:0;transform:scale(.3)}30%{opacity:.55}100%{opacity:0;transform:scale(1.4)}}@keyframes train-prism{0%{opacity:0;transform:rotate(-60deg) scale(.9)}35%{opacity:.8;border-radius:27%}100%{opacity:0;transform:rotate(90deg) scale(1.2);border-radius:50%}}@keyframes train-ripple{0%{opacity:0;transform:scale(.7)}20%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
#lab-metronome.train-summary .metro-columns,#lab-metronome.train-summary .metro-mode{display:none}.train-result-heading{text-align:center;padding:9px 0 18px}.train-result-heading>span{display:block;color:#7c8e98;font-size:13px}.train-result-heading>strong{display:block;font-size:37px;line-height:1.3;font-weight:550;color:#328da1;font-variant-numeric:tabular-nums}.train-result-heading strong small{font-size:13px;font-weight:400}.train-result-heading p{font-size:12px;color:#778d98;margin:3px 0}.train-result-hands{display:grid;grid-template-columns:1fr 1fr;gap:12px;direction:ltr}.train-result-hands article{border:1px solid #dfecef;background:linear-gradient(145deg,#f8fdff,#fff);border-radius:20px;padding:15px}.train-result-hands h3{font-size:14px;font-weight:600;margin:0 0 8px;color:#537483}.train-accuracy{font-size:28px;font-weight:550;color:#457d8e}.train-accuracy small{font-size:11px;color:#7d929d;font-weight:400}.train-result-hands p{font-size:11px;color:#85939c;line-height:1.6;margin:6px 0 10px}.train-result-hands dl{margin:0}.train-result-hands dl>div{border-top:1px solid #edf1f4;padding:9px 0 2px}.train-result-hands dt{font-size:11px;color:#778a96}.train-result-hands dd{font-size:18px;color:#345c72;margin:3px 0 5px;font-variant-numeric:tabular-nums;direction:ltr}.train-result-hands dd small{font-size:11px;color:#90a0aa;display:block}.train-result-note{font-size:11px;color:#81949e;line-height:1.6;margin:12px 2px}.metro-train-report>button{display:block;margin:14px auto 0;padding:12px 20px;border:1px solid #cfe6ed;border-radius:13px;background:#effafd;color:#357c92;font-size:13px}
@media(max-width:620px){.metro-header{gap:6px}.metro-header h2{font-size:19px}.metro-train-toggle{padding:0 10px;font-size:12px}.metro-header .metro-icon{width:32px;height:36px;min-width:32px}#lab-metronome.is-training .metro-train-stage{height:303px}#lab-metronome.is-training .metro-orbit{width:min(236px,80%);margin:0 auto}.metro-train-pad{width:91px;height:120px;border-radius:22px}.metro-train-hud{padding:10px 12px;gap:3px 8px}.metro-train-hud strong{font-size:22px}.metro-train-hud span{font-size:10px}.metro-train-hud button{padding:8px;font-size:11px}.train-result-hands{gap:8px}.train-result-hands article{padding:11px}.train-result-hands dd{font-size:16px}.train-result-hands h3{font-size:13px}.train-result-hands p{min-height:35px}.train-aura{width:215px;height:215px;left:calc(50% - 107.5px);top:10px}.metro-train-instruction{font-size:11px}}
@media(max-width:360px){.metro-header{padding-inline:11px;gap:4px}.metro-header h2{font-size:17px}.metro-eyebrow{font-size:9px}.metro-train-toggle{padding-inline:8px}.metro-train-pad{width:82px}.train-pad-name{font-size:11px}}
@media(prefers-reduced-motion:reduce){.metro-train-toggle{transition:none}.train-approach{transform:none;opacity:var(--approach)}.metro-train-effect .train-aura,.metro-train-effect .train-spark,.metro-train-pad.is-hit .train-impact{animation:none!important;display:none}.metro-train-effect strong{animation:none!important;opacity:1}.metro-train-pad.is-hit .train-target{background:color-mix(in srgb,var(--train-color) 15%,white)}}
.train-audio-notice{padding:12px 14px;border:1px solid #ebdfca;background:#fffbf3;border-radius:13px;color:#887345;font-size:13px;line-height:1.5}