/* Dragon — orange uniform and deep blue. Keep the saiyan ID for saved preferences. */
html[data-skin=saiyan]{
 color-scheme:light;--bg:#f1e7d9;--surface:#fff6e7;--text:#142e58;--muted:#59677c;--line:#b5b1a9;
 --ki-orange:#ed762a;--ki-blue:#203f80;--ki-gold:#ffda68;--ki-paper:#fff6df;--ki-edge:#142e58;
 --ki-accent:#a83e0f;--ki-soft:#f6d8b5;--ki-panel:#ef873b;--ki-panel-ink:#142e58;--ki-panel-muted:#463f45;--ki-panel-line:#a45730;
 --control:#ede7dd;--control-hover:#f8dfbe;--selected:var(--ki-blue);--selected-ink:var(--ki-paper);
 --ochre:var(--ki-orange);--coral:var(--ki-accent);--warm-ink:var(--ki-paper);--asmm-link:var(--ki-blue);
 --ki-face:'Court Condensed',Impact,'Arial Black',sans-serif;
}
html[data-skin=saiyan][data-theme=dark]{
 color-scheme:dark;--bg:#101d35;--surface:#192d4d;--text:#fff2dc;--muted:#b5c5dc;--line:#4a6383;
 --ki-orange:#f58b38;--ki-blue:#244d88;--ki-gold:#ffe09b;--ki-edge:#0b1930;
 --ki-accent:#ffab68;--ki-soft:#47372f;--ki-panel:#203f6c;--ki-panel-ink:#fff2dc;--ki-panel-muted:#c0cee3;--ki-panel-line:#6580a4;
 --control:#243b5c;--control-hover:#304d73;--selected:var(--ki-orange);--selected-ink:#152642;
 --ochre:var(--ki-orange);--warm-ink:#152642;--asmm-link:#b8d5ff;
}
html[data-skin=saiyan] body{background:var(--bg)}
html[data-skin=saiyan] .site-header{border-bottom:3px solid var(--ki-orange);box-shadow:0 3px 0 var(--ki-blue)}
html[data-skin=saiyan][data-theme=dark] .site-header{border-bottom-color:var(--ki-orange);box-shadow:0 3px 0 #305b93}
html[data-skin=saiyan] .title-row{margin:20px 0 16px}
html[data-skin=saiyan] h1{font:800 italic 42px/1.2 var(--ki-face);letter-spacing:.015em;margin:0;color:var(--ki-accent)}
html[data-skin=saiyan] h1:before{content:none}
html[data-skin=saiyan] .title-row .eyebrow{font-size:9px;line-height:1.6;letter-spacing:.14em;margin-bottom:7px}
html[data-skin=saiyan] .school-link{color:var(--asmm-link);border-color:var(--asmm-link);border-radius:3px}
html[data-skin=saiyan] .school-link:is(:hover,:focus-visible){background:var(--control);color:var(--asmm-link)}
html[data-skin=saiyan] .workspace{border:2px solid var(--ki-edge);border-radius:6px;background:var(--surface);box-shadow:0 4px 0 var(--ki-blue)}
html[data-skin=saiyan][data-theme=dark] .workspace{border-color:#45638a;box-shadow:0 4px 0 #0b1930}
html[data-skin=saiyan] :is(.mode-switch button,.transport button,.settings-details summary){font:800 italic 22px/1.2 var(--ki-face);text-transform:uppercase;letter-spacing:.025em}
html[data-skin=saiyan] :is(h2,.panel-top .eyebrow,.subdivision-panel h2){font-weight:800;letter-spacing:.06em}
html[data-skin=saiyan] .mode-switch{padding:9px;gap:8px;border-bottom:1px solid var(--line)}
html[data-skin=saiyan][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:3px}
html[data-skin=saiyan][data-theme] :is(.language-switch button[aria-pressed=true],.mode-switch button[aria-pressed=true],.signatures button[aria-pressed=true],.poly-speed-actions button[aria-pressed=true],#backbeat[aria-pressed=true],.preset-form button){background:var(--selected);color:var(--selected-ink);border-color:var(--selected)}
html[data-skin=saiyan] .rhythm-top{border-bottom:1px solid var(--line)}
html[data-skin=saiyan] .subdivision-panel{border-left:1px solid var(--line)}
html[data-skin=saiyan][data-theme] .pixel-beats .beat{background:var(--control);border-color:var(--line);border-radius:2px}
html[data-skin=saiyan] .beat-number{font:800 italic 23px/1 var(--ki-face)}
html[data-skin=saiyan][data-theme] .beat.accent .beat-meta{background:var(--ki-soft);color:var(--ki-accent)}
html[data-skin=saiyan][data-theme] .pixel-beats .beat.active .beat-meta{background:var(--selected);color:var(--selected-ink);border-bottom-color:var(--ki-orange)}
html[data-skin=saiyan][data-theme] .pixel-beats .beat.muted{background:var(--surface);border-color:var(--line)}
html[data-skin=saiyan][data-theme] .beat.muted .meter-face{background:var(--control)}
html[data-skin=saiyan][data-theme] .beat.muted .beat-caption{color:var(--muted)}
html[data-skin=saiyan][data-theme] .pixel-beats .beat.muted.active .beat-meta{background:var(--control-hover);color:var(--text)}
html[data-skin=saiyan][data-theme] .subdivision-button{position:relative;isolation:isolate;overflow:hidden;background:var(--ki-blue);color:var(--ki-paper);border:1px solid var(--ki-edge);border-radius:4px;box-shadow:inset 0 -4px 0 #102450}
html[data-skin=saiyan] .subdivision-name{color:inherit}
html[data-skin=saiyan][data-theme=dark] .subdivision-button{background:#284e87;color:var(--ki-paper);border-color:#6185b5;box-shadow:inset 0 -4px 0 var(--ki-orange)}
html[data-skin=saiyan] .subdivision-track{--subdivision-line:var(--line);--subdivision-dot:var(--muted)}
html[data-skin=saiyan] .subdivision-track i.active{background:var(--ki-accent);outline-color:var(--ki-orange)}
html[data-skin=saiyan] .tempo-panel{
 position:relative;isolation:isolate;background:var(--ki-panel);padding:17px 20px 16px;border-top:6px solid var(--ki-blue);
 --text:var(--ki-panel-ink);--muted:var(--ki-panel-muted);--line:var(--ki-panel-line);--surface:var(--ki-panel);--coral:var(--ki-panel-ink)
}
/* Narrow, static diagonal highlights suggest energy without glowing over controls. */
html[data-skin=saiyan] .tempo-panel:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 0 8%,#fff2ca1a 8% 9%,transparent 9% 91%,#fff2ca1a 91% 92%,transparent 92%),linear-gradient(0deg,#e966201a,transparent 50%)}
html[data-skin=saiyan][data-theme=dark] .tempo-panel{border-top:6px solid var(--ki-orange);background:linear-gradient(120deg,#274a7b,var(--ki-panel) 55%,#1a345b)}
html[data-skin=saiyan][data-theme=dark] .tempo-panel:before{opacity:.6}
html[data-skin=saiyan] .dial{container-type:inline-size;width:235px;height:170px}
html[data-skin=saiyan] .dial input{font:800 italic clamp(40px,51cqw,120px)/1.15 var(--ki-face);letter-spacing:-.025em;padding:0 9px 0 0;color:var(--ki-paper);-webkit-text-stroke:2px var(--ki-blue);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ki-blue);caret-color:var(--ki-panel-ink)}
html[data-skin=saiyan][data-theme=dark] .dial input{color:var(--ki-gold);-webkit-text-stroke:2px #10223f;text-shadow:3px 4px 0 #d27430,5px 6px 0 #10223f}
html[data-skin=saiyan] .dial .eyebrow{font-size:9px;letter-spacing:.22em;margin-bottom:4px}
html[data-skin=saiyan] .tempo-caption{margin-top:7px;gap:8px}
html[data-skin=saiyan][data-theme] .step-btn{background:transparent;color:var(--ki-panel-ink);border:2px solid var(--ki-panel-ink);border-radius:4px;box-shadow:none}
html[data-skin=saiyan][data-theme] .step-btn:hover:not(:disabled){background:var(--ki-panel-ink);color:var(--ki-panel);border-color:var(--ki-panel-ink)}
html[data-skin=saiyan] .transport{gap:10px}
html[data-skin=saiyan][data-theme] .transport button{border:2px solid var(--ki-blue);border-radius:4px}
html[data-skin=saiyan][data-theme] .play-btn{background:var(--ki-blue);color:var(--ki-paper)}
html[data-skin=saiyan][data-theme] .tap-btn{background:var(--ki-paper);color:var(--ki-blue)}
html[data-skin=saiyan][data-theme] .tap-btn.tapped{background:#f6d8b5}
html[data-skin=saiyan][data-theme=dark] .step-btn{color:var(--ki-orange);border-color:var(--ki-orange);background:#162e50}
html[data-skin=saiyan][data-theme=dark] .step-btn:hover:not(:disabled){background:var(--ki-orange);color:#152642;border-color:var(--ki-orange)}
html[data-skin=saiyan][data-theme=dark] .transport button{border-color:var(--ki-orange)}
html[data-skin=saiyan][data-theme=dark] .play-btn{background:var(--ki-orange);color:#152642}
html[data-skin=saiyan][data-theme=dark] .tap-btn{background:#162e50;color:var(--ki-paper);border-color:#789aca}
html[data-skin=saiyan][data-theme=dark] .tap-btn.tapped{background:#355a8b}
html[data-skin=saiyan][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=saiyan][data-theme] input[type=range]::-webkit-slider-thumb{background:var(--ki-gold);border-color:var(--ki-panel-ink);border-radius:2px;outline:none;box-shadow:none}
html[data-skin=saiyan][data-theme] input[type=range]::-moz-range-track{background:var(--line)}
html[data-skin=saiyan][data-theme] input[type=range]::-moz-range-progress{background:var(--text)}
html[data-skin=saiyan][data-theme] input[type=range]::-moz-range-thumb{background:var(--ki-gold);border-color:var(--ki-panel-ink);border-radius:2px;outline:none;box-shadow:none}
html[data-skin=saiyan][data-theme] :is(.settings-details,.subdivision-options button){background:var(--surface);border-color:var(--line);border-radius:4px}
html[data-skin=saiyan][data-theme] .subdivision-options button[aria-pressed=true]{background:var(--selected);color:var(--selected-ink);border-color:var(--selected)}
html[data-skin=saiyan][data-theme] .switch{background:var(--control);border-color:var(--line)}
html[data-skin=saiyan][data-theme] .switch[aria-checked=true]{background:var(--selected);border-color:var(--selected)}
html[data-skin=saiyan][data-theme] .switch[aria-checked=true] span{background:var(--selected-ink)}
html[data-skin=saiyan][data-theme] #swing-reset.at-center{background:var(--control);border-color:var(--line)}
html[data-skin=saiyan][data-theme] :is(.swing-labels button:hover:not(:disabled),.grouping-row button:hover,.preset-row button:hover,.small-buttons button:hover){background:var(--selected);color:var(--selected-ink)}
html[data-skin=saiyan] :is(.appearance-dialog,.subdivision-dialog,.sound-dialog){border:1px solid var(--line);border-radius:6px}
html[data-skin=saiyan] :is(.appearance-dialog,.subdivision-dialog)::backdrop{background:#10172988}
html[data-skin=saiyan] :is(.sound-current,.sound-option-copy strong){font:800 italic 21px/1.15 var(--ki-face);text-transform:uppercase;letter-spacing:.015em}
.skin-grid [data-appearance-skin=saiyan][data-appearance-theme=light]{--sample-bg:#ef873b;--sample-ink:#fff6df;--sample-line:#203f80;--sample-frame:#fff6e7}
.skin-grid [data-appearance-skin=saiyan][data-appearance-theme=dark]{--sample-bg:#203f6c;--sample-ink:#ffe09b;--sample-line:#f58b38;--sample-frame:#192d4d}
[data-appearance-skin=saiyan] .preview-value{font:800 italic 35px/1 'Court Condensed',Impact,sans-serif;letter-spacing:.01em;text-shadow:1px 2px 0 #203f80}
@media(max-width:619px){
 html[data-skin=saiyan] h1{font-size:31px}
 html[data-skin=saiyan] .title-row{margin:17px 0 13px}
 html[data-skin=saiyan] .mode-switch{padding:7px;gap:6px}
 html[data-skin=saiyan] :is(.mode-switch button,.transport button){font-size:20px}
 html[data-skin=saiyan] .tempo-panel{padding:13px 10px 15px}
 html[data-skin=saiyan] .dial{height:144px}
 html[data-skin=saiyan] .dial input{-webkit-text-stroke:1.5px var(--ki-blue);text-shadow:2px 3px 0 var(--ki-blue)}
}
@media(max-width:359px){html[data-skin=saiyan] h1{font-size:28px}html[data-skin=saiyan] .dial{height:128px}html[data-skin=saiyan] .tempo-caption{font-size:10px;gap:4px}}
@media(min-width:620px) and (max-height:900px){html[data-skin=saiyan] .transport{background:var(--ki-panel);border-color:var(--ki-panel-line)}}