/* LA — gold and purple colour palettes. */
@font-face{font-family:'LA Display';src:url('./assets/fonts/Graduate-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Court Condensed';src:url('./assets/fonts/BarlowCondensed-ExtraBoldItalic.ttf') format('truetype');font-weight:800;font-style:italic;font-display:swap}

html[data-skin=la]{
 color-scheme:light;--bg:#eeece7;--surface:#f9f7f2;--text:#252329;--muted:#6c6266;--line:#cbc6c3;
 --la-accent:#512c78;--la-accent-ink:#fff6e3;--la-accent-soft:#ece5f0;
 --la-panel:#efb936;--la-panel-ink:#512c78;--la-panel-outline:#fff7e8;--la-panel-muted:#5c3c26;--la-panel-line:#ae7f29;
 --ochre:var(--la-accent);--coral:var(--la-accent);--asmm-link:var(--la-accent);--control:#ece7e0;--control-hover:#e3dcd4;
 --selected:var(--la-accent);--selected-ink:var(--la-accent-ink);--warm-ink:var(--la-accent-ink);
 --la-texture:radial-gradient(ellipse 1px 1.4px at 2px 2px,#00000010 95%,transparent);
}
html[data-skin=la][data-theme=dark]{
 color-scheme:dark;--bg:#241936;--surface:#30233f;--text:#fff3d9;--muted:#c8b9d9;--line:#675577;
 --la-accent:#f4c44a;--la-accent-ink:#30203f;--la-accent-soft:#463450;--control:#443251;--control-hover:#544061;
 --la-panel:#512c78;--la-panel-ink:#f8c64c;--la-panel-outline:#fff7e8;--la-panel-muted:#e7d5f1;--la-panel-line:#9e7cb8;
}
html[data-skin=la] body{background:var(--bg)}
html[data-skin=la][data-theme=light] .brand .logo-light{display:block}
html[data-skin=la][data-theme=light] .brand .logo-dark{display:none}
html[data-skin=la][data-theme=dark] .brand .logo-light{display:none}
html[data-skin=la][data-theme=dark] .brand .logo-dark{display:block}
html[data-skin=la] .site-header{border-bottom:1px solid var(--line)}
html[data-skin=la] h1{font:800 italic 40px/1.18 'Court Condensed',Impact,sans-serif;letter-spacing:.012em;margin:0}
html[data-skin=la] h1:before{content:none}
html[data-skin=la] .title-row .eyebrow{font-size:9px;letter-spacing:.16em;line-height:1.5;margin-bottom:7px}
html[data-skin=la] .school-link{color:var(--la-accent);border-color:var(--line);border-radius:3px}
html[data-skin=la] .school-link:hover{background:var(--la-accent);color:var(--la-accent-ink)}
html[data-skin=la] .workspace{border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 8px 28px #0000000c}
html[data-skin=la] :is(h2,.panel-top .eyebrow,.mode-switch button,.transport button,.settings-details summary){font:800 italic 20px/1.25 'Court Condensed',Impact,sans-serif;letter-spacing:.035em;text-transform:uppercase}
html[data-skin=la] :is(.panel-top .eyebrow,.subdivision-panel h2){font-size:16px;color:var(--text)}
html[data-skin=la] .mode-switch{padding:9px;gap:8px;border-bottom:1px solid var(--line)}
html[data-skin=la] .mode-switch button{border-radius:3px}
html[data-skin=la][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=la][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,.poly-speed-actions button[aria-pressed=true],#backbeat[aria-pressed=true]){background:var(--la-accent);border-color:var(--la-accent);color:var(--la-accent-ink)}
html[data-skin=la] .rhythm-top{border-bottom:0}
html[data-skin=la] .subdivision-panel{border-left:0}
html[data-skin=la][data-theme] .pixel-beats .beat{background:var(--control);border-color:var(--line);border-radius:2px}
html[data-skin=la] .beat-number{font:400 17px/1 'LA Display',serif}
html[data-skin=la][data-theme] .beat.accent .beat-meta{background:var(--la-accent-soft);color:var(--la-accent)}
html[data-skin=la][data-theme] .pixel-beats .beat.active .beat-meta{background:var(--la-accent);color:var(--la-accent-ink);border-bottom-color:var(--la-accent)}
html[data-skin=la][data-theme] .pixel-beats .beat.muted{background:var(--surface);border-color:var(--line)}
html[data-skin=la][data-theme] .beat.muted .meter-face{background:var(--control)}
html[data-skin=la][data-theme] .beat.muted .beat-caption{color:var(--muted)}
html[data-skin=la][data-theme] .pixel-beats .beat.muted.active .beat-meta{background:var(--control-hover);color:var(--text)}
html[data-skin=la][data-theme] :is(.subdivision-button,.subdivision-options button,.signatures button,.sounds button){background:var(--control);border-color:var(--line)}
html[data-skin=la][data-theme] :is(.subdivision-button:hover,.subdivision-options button:hover,.subdivision-button.swung){background:var(--la-accent-soft)}
html[data-skin=la][data-theme] :is(.subdivision-options button[aria-pressed=true],.signatures button[aria-pressed=true],.sounds button[aria-pressed=true]){background:var(--la-accent);color:var(--la-accent-ink);border-color:var(--la-accent)}
html[data-skin=la] .subdivision-button{border-radius:4px;color:var(--la-accent)}
html[data-skin=la] .subdivision-name{color:var(--text)}
/* Textured central display with outlined numerals and fine side stripes. */
html[data-skin=la] .tempo-panel{
 position:relative;isolation:isolate;margin:8px 12px 12px;padding:17px 26px 17px;border-radius:4px;
 background-color:var(--la-panel);background-image:var(--la-texture);background-size:6px 6px;
 color:var(--la-panel-ink);box-shadow:inset 0 0 0 1px var(--la-panel-line);
 --text:var(--la-panel-ink);--muted:var(--la-panel-muted);--line:var(--la-panel-line)
}
html[data-skin=la] .tempo-panel:before,html[data-skin=la] .tempo-panel:after{content:'';position:absolute;top:0;bottom:0;width:9px;pointer-events:none;background:linear-gradient(90deg,var(--la-panel-ink) 0 3px,var(--la-panel) 3px 5px,var(--la-panel-outline) 5px 7px,var(--la-panel) 7px);z-index:-1}
html[data-skin=la] .tempo-panel:before{left:7px;border-right:1px dashed var(--la-panel-line)}
html[data-skin=la] .tempo-panel:after{right:7px;transform:scaleX(-1);border-right:1px dashed var(--la-panel-line)}
html[data-skin=la] .dial{container-type:inline-size;width:270px;height:192px}
html[data-skin=la] .dial .eyebrow{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
html[data-skin=la] .dial input{font:400 clamp(50px,36cqw,98px)/1.15 'LA Display',serif;letter-spacing:-.05em;color:var(--la-panel-ink);-webkit-text-stroke:3px var(--la-panel-outline);paint-order:stroke fill;padding:3px 5px;text-shadow:0 2px 0 var(--la-panel-outline);caret-color:var(--la-panel-ink)}
html[data-skin=la] .dial input:focus{outline:2px solid var(--la-panel-ink);outline-offset:2px;border-radius:2px}
html[data-skin=la] .tempo-caption{font-size:.6875rem;gap:8px;margin-top:2px}
html[data-skin=la] .tempo-name{color:var(--la-panel-muted)}
html[data-skin=la] .bpm-unit{letter-spacing:.13em}
html[data-skin=la] .step-btn{background:transparent;border:1px solid var(--la-panel-line);border-radius:999px;color:var(--la-panel-ink)}
html[data-skin=la][data-theme] .step-btn:hover{background:var(--la-panel-ink);color:var(--la-panel);border-color:var(--la-panel-ink)}
html[data-skin=la] .tempo-slider{max-width:490px;margin-top:3px}
html[data-skin=la] .transport button{border-radius:3px;box-shadow:none}
html[data-skin=la][data-theme] .play-btn{background:var(--la-panel-ink);border-color:var(--la-panel-ink);color:var(--la-panel)}
html[data-skin=la][data-theme] .tap-btn{background:transparent;border:1px solid var(--la-panel-ink);color:var(--la-panel-ink)}
html[data-skin=la][data-theme] .tap-btn.tapped{background:var(--la-panel-ink);color:var(--la-panel)}
html[data-skin=la][data-theme] input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--text) 0 var(--fill),var(--line) var(--fill) 100%)}
html[data-skin=la][data-theme] input[type=range]::-webkit-slider-thumb{background:var(--surface);border:3px solid var(--text);outline:none;border-radius:50%}
html[data-skin=la][data-theme] input[type=range]::-moz-range-track{background:var(--line);height:3px}
html[data-skin=la][data-theme] input[type=range]::-moz-range-progress{background:var(--text);height:3px}
html[data-skin=la][data-theme] input[type=range]::-moz-range-thumb{background:var(--surface);border:3px solid var(--text);outline:none;border-radius:50%}
html[data-skin=la][data-theme] .settings-details{background:var(--surface);border-color:var(--line);border-radius:4px}
html[data-skin=la][data-theme] .switch{background:var(--control);border-color:var(--line)}
html[data-skin=la][data-theme] .switch[aria-checked=true]{background:var(--la-accent);border-color:var(--la-accent)}
html[data-skin=la][data-theme] .switch[aria-checked=true] span{background:var(--la-accent-ink)}
html[data-skin=la][data-theme] #swing-reset.at-center{background:var(--control);border-color:var(--line)}
html[data-skin=la][data-theme] :is(.swing-labels button:hover,.grouping-row button:hover,.preset-row button:hover,.small-buttons button:hover){background:var(--la-accent);color:var(--la-accent-ink)}
html[data-skin=la] .poly-mute{border-color:var(--line)}
html[data-skin=la] :is(.appearance-dialog,.subdivision-dialog){border-color:var(--line);border-radius:8px}
html[data-skin=la] .appearance-dialog h2{font:800 italic 23px/1.2 'Court Condensed',Impact,sans-serif;text-transform:uppercase}
html[data-skin=la] .appearance-dialog::backdrop{background:#19131f66}
html[data-skin=la] .about-metronome h2{font-size:22px}
@media(max-width:619px){
 html[data-skin=la] h1{font-size:31px}
 html[data-skin=la] .title-row{margin:13px 0}
 html[data-skin=la] :is(.panel-top .eyebrow,.subdivision-panel h2){font-size:14px}
 html[data-skin=la] .mode-switch{padding:7px;gap:6px}
 html[data-skin=la] .mode-switch button{font-size:18px}
 html[data-skin=la] .tempo-panel{margin:8px;padding:13px 19px 12px}
 html[data-skin=la] .dial{height:158px}
 html[data-skin=la] .dial input{-webkit-text-stroke:2px var(--la-panel-outline)}
 html[data-skin=la] .tempo-panel:before{left:5px;width:7px}
 html[data-skin=la] .tempo-panel:after{right:5px;width:7px}
 html[data-skin=la] .transport{background:var(--la-panel);border-top-color:var(--la-panel-line)}
 html[data-skin=la] .transport button{font-size:19px}
 html[data-skin=la] .beat-number{font-size:15px}
 html[data-skin=la] .school-link{font-size:.6875rem}
}
@media(max-width:359px){
 html[data-skin=la] h1{font-size:28px}
 html[data-skin=la] .dial{height:139px}
 html[data-skin=la] .dial input{font-size:36cqw}
 html[data-skin=la] .tempo-caption{font-size:9px;gap:5px}
 html[data-skin=la] .school-link{font-size:.625rem;max-width:128px}
}
@media(min-width:620px) and (max-height:900px){html[data-skin=la] .transport{background:var(--la-panel);border-color:var(--la-panel-line)}}