/* Billie — acid green, matte charcoal and compact poster lettering. */
html[data-skin=billie]{
 color-scheme:light;--bg:#dce7c7;--surface:#f0f4e5;--text:#182012;--muted:#526145;--line:#a1b18d;
 --acid:#b6ef20;--acid-ink:#17200c;--accent-ink:#365216;--control:#e0e9cd;--control-hover:#d3e3b5;
 --selected:var(--acid);--selected-ink:var(--acid-ink);--ochre:var(--acid);--coral:var(--accent-ink);--warm-ink:var(--acid-ink);--asmm-link:var(--accent-ink);
 --billie-panel:#c9ed6b;--billie-panel-ink:#17200c;--billie-panel-muted:#405526;--billie-panel-line:#81994c;
 --billie-face:'Court Condensed','Arial Black',Arial,sans-serif;
}
html[data-skin=billie][data-theme=dark]{
 color-scheme:dark;--bg:#0b0e09;--surface:#171d12;--text:#edf3e3;--muted:#aab69a;--line:#48533d;
 --accent-ink:var(--acid);--control:#222b1b;--control-hover:#303e23;
 --billie-panel:#10160c;--billie-panel-ink:var(--acid);--billie-panel-muted:#aab69a;--billie-panel-line:#526633;
}
html[data-skin=billie] body{background:var(--bg)}
html[data-skin=billie] .site-header{border-bottom:2px solid var(--text)}
html[data-skin=billie] h1{font:800 italic 40px/1.2 var(--billie-face);letter-spacing:-.015em;margin:0}
html[data-skin=billie] h1:before{content:none}
html[data-skin=billie] .title-row .eyebrow{font-size:9px;letter-spacing:.14em;margin-bottom:6px;line-height:1.5}
html[data-skin=billie] .school-link{border-color:var(--accent-ink);color:var(--accent-ink)}
html[data-skin=billie] .school-link:hover,html[data-skin=billie] .school-link:focus-visible{background:var(--acid);border-color:var(--acid);color:var(--acid-ink)}
html[data-skin=billie] .workspace{border:1px solid var(--line);border-top:4px solid var(--accent-ink);border-radius:2px;background:var(--surface)}
html[data-skin=billie] :is(h2,.panel-top .eyebrow,.mode-switch button,.transport button,.settings-details summary){font:800 italic 20px/1.25 var(--billie-face);letter-spacing:.025em;text-transform:uppercase}
html[data-skin=billie] :is(.panel-top .eyebrow,.subdivision-panel h2){font-size:17px;color:var(--text)}
html[data-skin=billie] .mode-switch{padding:9px;gap:8px;border-bottom:1px solid var(--line)}
html[data-skin=billie][data-theme] :is(.language-switch button,.appearance-button,.mode-switch button,.signatures 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);border-radius:2px}
html[data-skin=billie][data-theme] :is(.language-switch button[aria-pressed=true],.mode-switch button[aria-pressed=true],.signatures button[aria-pressed=true],.preset-form button,.poly-speed-actions button[aria-pressed=true],#backbeat[aria-pressed=true]){background:var(--acid);border-color:var(--acid);color:var(--acid-ink)}
html[data-skin=billie][data-theme] .pixel-beats .beat{background:var(--control);border-color:var(--line)}
html[data-skin=billie] .beat-number{font:800 italic 21px/1 var(--billie-face)}
html[data-skin=billie][data-theme] .beat.accent .beat-meta{background:var(--control-hover);color:var(--accent-ink)}
html[data-skin=billie][data-theme] .pixel-beats .beat.active .beat-meta{background:var(--acid);color:var(--acid-ink);border-bottom-color:var(--acid)}
html[data-skin=billie][data-theme] .pixel-beats .beat.muted{background:var(--surface);border-color:var(--line)}
html[data-skin=billie][data-theme] .beat.muted .meter-face{background:var(--control)}
html[data-skin=billie][data-theme] .beat.muted .beat-caption{color:var(--muted)}
html[data-skin=billie][data-theme] .pixel-beats .beat.muted.active .beat-meta{background:var(--control-hover);color:var(--text)}
html[data-skin=billie][data-theme] :is(.subdivision-button,.subdivision-options button,.signatures button){background:var(--control);border-color:var(--line)}
html[data-skin=billie][data-theme] :is(.subdivision-button:hover,.subdivision-button.swung,.subdivision-options button:hover){background:var(--control-hover)}
html[data-skin=billie][data-theme] :is(.subdivision-options button[aria-pressed=true],.signatures button[aria-pressed=true]){background:var(--acid);color:var(--acid-ink);border-color:var(--acid)}
html[data-skin=billie] .subdivision-button{border-radius:2px;color:var(--accent-ink)}
html[data-skin=billie] .subdivision-name{color:var(--text)}
html[data-skin=billie] .subdivision-track{--subdivision-line:var(--line);--subdivision-dot:var(--muted)}
/* Flat ink, not a glowing screen; the light panel reverses the dark treatment. */
html[data-skin=billie] .tempo-panel{
 position:relative;isolation:isolate;margin:10px;padding:15px 18px;border:1px solid var(--billie-panel-line);border-radius:2px;
 background:var(--billie-panel);color:var(--billie-panel-ink);
 --text:var(--billie-panel-ink);--muted:var(--billie-panel-muted);--line:var(--billie-panel-line);--surface:var(--billie-panel)
}
html[data-skin=billie] .tempo-panel:before{content:'';position:absolute;top:0;left:0;width:36px;height:4px;background:var(--billie-panel-ink);pointer-events:none}
html[data-skin=billie] .tempo-panel:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");background-size:160px 160px}
html[data-skin=billie] .dial{container-type:inline-size;height:160px}
html[data-skin=billie] .dial input{font:800 italic clamp(44px,56cqw,115px)/1.1 var(--billie-face);letter-spacing:-.045em;color:var(--billie-panel-ink);padding:0 5px 0 0;caret-color:var(--billie-panel-ink)}
html[data-skin=billie] .dial input:focus{outline:2px solid var(--billie-panel-ink);outline-offset:2px}
html[data-skin=billie] .dial .eyebrow{font-size:9px;letter-spacing:.24em;color:var(--muted)}
html[data-skin=billie] .tempo-caption{gap:8px;color:var(--muted)}
html[data-skin=billie] .bpm-unit{color:var(--billie-panel-ink)}
html[data-skin=billie] .step-btn{background:transparent;border:1px solid var(--billie-panel-line);border-radius:2px;color:var(--billie-panel-ink)}
html[data-skin=billie][data-theme] .step-btn:hover:not(:disabled){background:var(--billie-panel-ink);border-color:var(--billie-panel-ink);color:var(--billie-panel)}
html[data-skin=billie] .transport button{border-radius:2px;font-size:20px}
html[data-skin=billie][data-theme] .play-btn{background:var(--billie-panel-ink);border-color:var(--billie-panel-ink);color:var(--billie-panel)}
html[data-skin=billie][data-theme] .tap-btn{background:transparent;border:1px solid var(--billie-panel-ink);color:var(--billie-panel-ink)}
html[data-skin=billie][data-theme] .tap-btn.tapped{background:var(--billie-panel-ink);color:var(--billie-panel)}
html[data-skin=billie][data-theme] input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--text) 0 var(--fill),var(--line) var(--fill) 100%)}
html[data-skin=billie][data-theme] input[type=range]::-webkit-slider-thumb{background:var(--acid);border-color:var(--text);outline:none;border-radius:1px;box-shadow:none}
html[data-skin=billie][data-theme] input[type=range]::-moz-range-track{background:var(--line)}
html[data-skin=billie][data-theme] input[type=range]::-moz-range-progress{background:var(--text)}
html[data-skin=billie][data-theme] input[type=range]::-moz-range-thumb{background:var(--acid);border-color:var(--text);outline:none;border-radius:1px;box-shadow:none}
html[data-skin=billie][data-theme] .settings-details{background:var(--surface);border-color:var(--line);border-radius:2px}
html[data-skin=billie][data-theme] .switch{background:var(--control);border-color:var(--line)}
html[data-skin=billie][data-theme] .switch[aria-checked=true]{background:var(--acid);border-color:var(--acid)}
html[data-skin=billie][data-theme] .switch[aria-checked=true] span{background:var(--acid-ink)}
html[data-skin=billie][data-theme] .poly-mute{background:#10383e;border-color:var(--line)}
html[data-skin=billie][data-theme] .poly-voice.muted .poly-mute{background:var(--control)}
html[data-skin=billie][data-theme] #swing-reset.at-center{background:var(--control);border-color:var(--line)}
html[data-skin=billie][data-theme] :is(.swing-labels button:hover:not(:disabled),.grouping-row button:hover,.preset-row button:hover,.small-buttons button:hover){background:var(--acid);color:var(--acid-ink)}
html[data-skin=billie] :is(.appearance-dialog,.subdivision-dialog){border-color:var(--line);border-radius:2px}
html[data-skin=billie] :is(.appearance-dialog,.subdivision-dialog)::backdrop{background:#0b0e0977}
html[data-skin=billie] :is(.sound-current,.sound-option-copy strong){font:800 italic 21px/1.15 var(--billie-face);text-transform:uppercase;letter-spacing:.015em}
html[data-skin=billie] .about-metronome h2{font-size:21px}
@media(max-width:619px){
 html[data-skin=billie] h1{font-size:31px}
 html[data-skin=billie] .mode-switch{padding:7px;gap:6px}
 html[data-skin=billie] :is(.panel-top .eyebrow,.subdivision-panel h2){font-size:14px}
 html[data-skin=billie] .tempo-panel{margin:8px;padding:12px 8px}
 html[data-skin=billie] .dial{height:140px}
 html[data-skin=billie] .school-link{font-size:.6875rem}
}
@media(max-width:359px){html[data-skin=billie] h1{font-size:28px}html[data-skin=billie] .dial{height:126px}}
@media(min-width:620px) and (max-height:900px){html[data-skin=billie] .transport{background:var(--billie-panel);border-color:var(--billie-panel-line)}}