/* Miami V5 — balanced sampled blue/rose and raspberry/orange palettes. */
@font-face{font-family:'Miami Display';src:url('./assets/fonts/BebasNeue-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
html[data-skin=miami]{
 --bg:#b9ccd4;--surface:#e4e1e9;--text:#34344f;--muted:#5f5870;--line:#b1a7bd;
 --ochre:#d5a6bf;--coral:#85476f;--asmm-link:#524b73;--control:#d7bbc9;--control-hover:#c9a7bc;
 --selected:#d5afc3;--selected-ink:#42344e;--warm-ink:#42344e;
 --miami-pink:#85476f;--miami-aqua:#465f7c;--miami-line:#aa91ad;--miami-panel:#e1cdd8;
 --subdivision-bg:#dbbdcb;--subdivision-hover:#d3b0c1;
 --page-wash:linear-gradient(135deg,#95b8ca 0%,#bdcdd4 43%,#d4b4c0 100%);
 --workspace-wash:linear-gradient(125deg,#d8e6ea 0%,#dcdfe9 42%,#e5cbd6 100%);
 --tempo-wash:linear-gradient(125deg,#a0c4d5 0%,#b4bfd6 45%,#d7adbf 100%);
 --tempo-ink:#343956;--tempo-muted:#55516b;--tempo-line:#a197b5;--tempo-surface:#bdc1d6;
 --tempo-control:#ded5e18c;--tempo-accent:#745073;--play-bg:#dbaec5;--play-ink:#40324d;
 --miami-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E")
}
html[data-skin=miami][data-theme=dark]{
 --bg:#6d5278;--surface:#5b4263;--text:#fff0cf;--muted:#e8cbd7;--line:#ac7b9b;
 --ochre:#e2a574;--coral:#f3b2d0;--asmm-link:#f4d5c5;--control:#805473;--control-hover:#96617f;
 --selected:#9d3b76;--selected-ink:#fff0d1;--warm-ink:#423047;
 --miami-pink:#f5b5d5;--miami-aqua:#f0d6b9;--miami-line:#c390b0;--miami-panel:#674966;
 --subdivision-bg:#9d4678;--subdivision-hover:#ac5184;
 --page-wash:linear-gradient(155deg,#685679 0%,#b07597 46%,#e2a574 100%);
 --workspace-wash:linear-gradient(135deg,#554566 0%,#6e4c6a 58%,#835373 100%);
 --tempo-wash:linear-gradient(130deg,#ce8bae 0%,#e2a190 47%,#efb578 100%);
 --tempo-ink:#4a3150;--tempo-muted:#563650;--tempo-line:#ac7088;--tempo-surface:#dda294;
 --tempo-control:#f0bdc177;--tempo-accent:#74345f;--play-bg:#963672;--play-ink:#fff0d1
}
html[data-skin=miami] body{background:var(--page-wash) fixed}
html[data-skin=miami] .site-header{border-bottom:1px solid var(--line);position:relative}
html[data-skin=miami] .site-header:after{content:'';position:absolute;bottom:-1px;right:0;width:64px;height:2px;background:var(--miami-pink);box-shadow:0 0 5px #eeb8d126}
html[data-skin=miami] h1{font:400 46px/1.16 'Miami Display',Impact,sans-serif;letter-spacing:.025em;margin:0;color:var(--text)}
html[data-skin=miami] h1:before{content:none}
html[data-skin=miami] .title-row .eyebrow{letter-spacing:.17em;font-size:.625rem;line-height:1.4;margin-bottom:11px}
html[data-skin=miami][data-theme] .school-link{color:var(--asmm-link);border-color:var(--asmm-link);border-radius:99px;box-shadow:none;text-shadow:none}
html[data-skin=miami][data-theme] .school-link:hover{background:var(--asmm-link);color:var(--surface)}
html[data-skin=miami][data-theme] .workspace{position:relative;isolation:isolate;background:var(--workspace-wash);border-color:var(--line);border-radius:18px;box-shadow:0 8px 24px #30293812}
html[data-skin=miami] .workspace:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background-image:var(--miami-grain);opacity:.14;mix-blend-mode:soft-light}
html[data-skin=miami] :is(.panel-top .eyebrow,.subdivision-panel h2,h2,.settings-details summary,.transport button,.mode-switch button){font:400 20px/1.3 'Miami Display',Impact,sans-serif;letter-spacing:.045em;text-transform:uppercase}
html[data-skin=miami] :is(.panel-top .eyebrow,.subdivision-panel h2){font-size:17px;color:var(--text)}
html[data-skin=miami][data-theme] :is(.language-switch button,.appearance-button,.mode-switch button,.signatures button,.sounds button,select,.poly-choices button,.poly-speed-actions button,#backbeat,.swing-labels button,#swing-reset,.practice-fields input,.preset-form input,.share-link-label input,.preset-form button,.small-buttons button,.preset-row button,#install-app){border-color:var(--line)}
html[data-skin=miami][data-theme] :is(.language-switch button,.appearance-button){border-radius:8px}
html[data-skin=miami][data-theme] :is(.language-switch button[aria-pressed=true],.mode-switch button[aria-pressed=true],.signatures button[aria-pressed=true],.sounds button[aria-pressed=true],.preset-form button){background:var(--selected);border-color:var(--selected);color:var(--selected-ink);box-shadow:none}
html[data-skin=miami] .mode-switch{padding:10px;gap:8px;border-bottom:0}
html[data-skin=miami][data-theme] .mode-switch button{border-radius:99px;min-height:44px}
html[data-skin=miami] .rhythm-top{border-top:1px solid var(--line);border-bottom:0}
html[data-skin=miami] .subdivision-panel{border-left:0}
html[data-skin=miami][data-theme] .pixel-beats .beat{background:var(--control);border-color:var(--line);border-radius:3px}
html[data-skin=miami][data-theme] .beat.accent .beat-meta{background:var(--control-hover);color:var(--miami-pink)}
html[data-skin=miami][data-theme] .pixel-beats .beat.active .beat-meta{background:var(--ochre);color:var(--warm-ink);border-bottom-color:var(--miami-pink)}
html[data-skin=miami][data-theme] .pixel-beats .beat.muted{background:var(--surface);border-color:var(--line)}
html[data-skin=miami][data-theme] .beat.muted .meter-face{background:var(--control)}
html[data-skin=miami][data-theme] .pixel-beats .beat.muted.active .beat-meta{background:var(--control);color:var(--muted)}
html[data-skin=miami][data-theme] :is(.subdivision-button,.subdivision-options button,.signatures button,.sounds button){background:var(--control);border-color:var(--line)}
html[data-skin=miami][data-theme] :is(.subdivision-button:hover,.subdivision-options button:hover,.subdivision-button.swung){background:var(--control-hover)}
html[data-skin=miami][data-theme] :is(.subdivision-options button[aria-pressed=true],.signatures button[aria-pressed=true],.sounds button[aria-pressed=true]){background:var(--selected);color:var(--selected-ink);border-color:var(--selected)}
html[data-skin=miami][data-theme] #subdivision-button{background:var(--subdivision-bg)}
html[data-skin=miami][data-theme] #subdivision-button:hover{background:var(--subdivision-hover)}
html[data-skin=miami] .subdivision-button{border-radius:10px;color:var(--miami-aqua);box-shadow:inset 0 1px 0 #ffffff0d}
html[data-skin=miami] .subdivision-name{color:var(--text)}
html[data-skin=miami] .subdivision-figure{filter:none}
html[data-skin=miami] .feel-panel{border-bottom:0}
/* The tempo follows the selected palette, including in the light blue theme. */
html[data-skin=miami] .tempo-panel{position:relative;isolation:isolate;margin:12px;border-radius:14px;background:var(--tempo-wash);box-shadow:inset 0 0 0 1px var(--tempo-line);--text:var(--tempo-ink);--muted:var(--tempo-muted);--line:var(--tempo-line);--surface:var(--tempo-surface);--miami-aqua:var(--tempo-accent);--miami-pink:var(--tempo-accent)}
html[data-skin=miami] .tempo-panel:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background-image:var(--miami-grain);opacity:.17;mix-blend-mode:soft-light}
html[data-skin=miami] .dial{height:166px;width:235px}
html[data-skin=miami] .dial input{font:400 126px/.94 'Miami Display',Impact,sans-serif;letter-spacing:.005em;color:var(--tempo-ink);text-shadow:0 0 8px #f9c9d31a;padding:0;caret-color:var(--tempo-accent);font-variant-numeric:tabular-nums}
html[data-skin=miami] .dial input:focus{text-shadow:none;outline:2px solid var(--tempo-accent);outline-offset:1px;border-radius:3px;background:var(--tempo-surface)}
html[data-skin=miami] .dial .eyebrow{font-size:9px;letter-spacing:.2em;color:var(--tempo-muted)}
html[data-skin=miami] .dial .eyebrow:after{content:' · MIAMI';color:var(--tempo-muted)}
html[data-skin=miami] .tempo-caption{gap:8px}
html[data-skin=miami] .bpm-unit{color:var(--tempo-ink);letter-spacing:.16em}
html[data-skin=miami] .tempo-name{color:var(--tempo-muted)}
html[data-skin=miami] .step-btn{color:var(--tempo-ink);border:1px solid var(--tempo-line);background:var(--tempo-control);border-radius:999px;box-shadow:0 0 6px #e5b5cf12;text-shadow:none}
html[data-skin=miami][data-theme] :is(.step-btn:hover:not(:disabled),.poly-speed-actions button[aria-pressed=true],#backbeat[aria-pressed=true],.swing-labels button:hover:not(:disabled)){background:var(--ochre);border-color:var(--ochre);color:var(--warm-ink)}
html[data-skin=miami] .tempo-slider{margin-top:8px}
html[data-skin=miami][data-theme] .play-btn{background:var(--play-bg);border-color:var(--play-bg);color:var(--play-ink);border-radius:99px;box-shadow:0 0 7px #f4d7b014}
html[data-skin=miami][data-theme] .tap-btn{color:var(--tempo-ink);background:var(--tempo-control);border:1px solid var(--tempo-line);border-radius:99px;box-shadow:none;text-shadow:none}
html[data-skin=miami][data-theme] .tap-btn.tapped{background:var(--play-bg);color:var(--play-ink)}
html[data-skin=miami][data-theme] input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--miami-aqua) 0 var(--fill),var(--line) var(--fill) 100%);height:3px}
html[data-skin=miami][data-theme] input[type=range]::-webkit-slider-thumb{background:var(--ochre);border:2px solid var(--surface);outline:1px solid var(--miami-pink);border-radius:50%;box-shadow:none}
html[data-skin=miami][data-theme] input[type=range]::-moz-range-track{background:var(--line);height:3px}
html[data-skin=miami][data-theme] input[type=range]::-moz-range-progress{background:var(--miami-aqua)}
html[data-skin=miami][data-theme] input[type=range]::-moz-range-thumb{background:var(--ochre);border:2px solid var(--surface);outline:1px solid var(--miami-pink);border-radius:50%;box-shadow:none}
html[data-skin=miami][data-theme] .settings-details{background:var(--miami-panel);border-color:var(--line);border-radius:11px}
html[data-skin=miami] .settings-details summary{letter-spacing:.025em}
html[data-skin=miami][data-theme] .switch{background:var(--control);border-color:var(--line)}
html[data-skin=miami][data-theme] .switch[aria-checked=true]{background:var(--miami-aqua);border-color:var(--miami-aqua)}
html[data-skin=miami][data-theme] .switch[aria-checked=true] span{background:var(--surface)}
html[data-skin=miami][data-theme] .poly-mute{background:#10383e;border-color:var(--line)}
html[data-skin=miami][data-theme] #swing-reset.at-center{background:var(--control);border-color:var(--line)}
html[data-skin=miami] :is(.appearance-dialog,.subdivision-dialog){border-color:var(--miami-line);border-radius:16px}
html[data-skin=miami][data-theme] :is(.subdivision-dialog,.appearance-dialog)::backdrop{background:#342a4566}
html[data-skin=miami] .appearance-dialog h2{font-size:21px}
html[data-skin=miami] .about-metronome h2{font-size:22px;letter-spacing:.03em}
html[data-skin=miami] .appearance-options button{border-radius:6px}
@media(max-width:619px){
 html[data-skin=miami] h1{font-size:37px}
 html[data-skin=miami] .mode-switch{padding:8px}
 html[data-skin=miami] .mode-switch button{font-size:19px}
 html[data-skin=miami] :is(.panel-top .eyebrow,.subdivision-panel h2){font-size:15px;letter-spacing:.035em}
 html[data-skin=miami] .dial{height:146px}
 html[data-skin=miami] .dial input{font-size:106px}
 html[data-skin=miami] .tempo-panel{margin:8px;padding:13px 10px 12px}
 html[data-skin=miami] .transport{background:var(--tempo-wash);border-top-color:var(--tempo-line);box-shadow:0 -5px 15px #40304612}
 html[data-skin=miami] .transport button{font-size:19px}
 html[data-skin=miami] .school-link{padding:7px 10px;font-size:.6875rem}
}
@media(max-width:359px){html[data-skin=miami] h1{font-size:32px}html[data-skin=miami] .dial input{font-size:88px}html[data-skin=miami] .dial{height:126px}.appearance-option-label{font-size:.7rem}}