/* KAOS XL — the device. Anodized charcoal chassis, cream engraving, ember LEDs, one wide amber display.
   Inspired by the classic MPC workflow, drawn from scratch in the KaosHotBeatz palette. */
:root{--xl-body:#1c1916;--xl-body-2:#15120f;--xl-edge:#2b261f;--xl-pad:#2e2a26;--xl-pad-2:#211e1b;--xl-ink:var(--cream);--xl-engrave:#a3927a;--xl-lcd:#1b140d;--xl-lcd-ink:#f0b35a;--xl-lcd-dim:#6e5230;--xl-led:var(--ember);--xl-r:18px}
.xl-intro{padding:clamp(40px,7vh,88px) 0 clamp(16px,3vh,32px)}
.xl-intro h1{font-size:clamp(3rem,10vw,7.5rem);font-stretch:118%;letter-spacing:-.04em;line-height:.85;margin-bottom:.25em}
.xl-intro .lead{max-width:60ch}
.xl-fine{color:var(--dim);font-size:.88rem;max-width:70ch}
.xl-stage{padding:0 0 clamp(56px,9vh,120px)}
.xl-stage .wrap{max-width:1180px}

.xl{position:relative;background:linear-gradient(180deg,var(--xl-body),var(--xl-body-2));border:1px solid var(--xl-edge);border-radius:var(--xl-r);padding:clamp(12px,2.2vw,26px);box-shadow:0 1px 0 rgba(243,227,195,.08) inset,0 30px 60px -30px rgba(0,0,0,.9),0 2px 0 #000;touch-action:manipulation;color:var(--xl-ink)}
.xl::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
.xl-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,2vw,24px);align-items:stretch;margin-bottom:clamp(14px,2vw,22px)}
.xl-brand{display:flex;flex-direction:column;justify-content:end;padding:6px 4px 2px;min-width:120px}
.xl-brand b{font-family:var(--disp);font-weight:900;font-stretch:125%;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.03em;line-height:1;color:var(--xl-ink)}
.xl-brand span{font-family:var(--disp);font-weight:300;font-stretch:90%;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;color:var(--ember);letter-spacing:.04em}
.xl-brand em{font-style:normal;color:var(--xl-engrave);font-size:.74rem;margin-top:8px;letter-spacing:.01em}

/* display */
.xl-lcd{background:var(--xl-lcd);border-radius:12px;padding:12px 16px;border:1px solid #000;box-shadow:inset 0 2px 10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(240,179,90,.08),0 0 32px -10px rgba(240,179,90,.35);color:var(--xl-lcd-ink);font-family:var(--disp);font-variant-numeric:tabular-nums;display:grid;gap:6px;position:relative;overflow:hidden}
.xl-lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.14) 2px 3px)}
.xl-lcd output{font:inherit;color:inherit}
.lcd-row1{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.lcd-bpm output{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:700;font-stretch:100%;letter-spacing:-.02em;line-height:1}
.lcd-bpm small{font-size:.8rem;color:var(--xl-lcd-dim);margin-left:6px;font-weight:500}
.lcd-pos output{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:500;line-height:1}
.lcd-mode{margin-left:auto;font-size:.9rem;font-weight:600;color:var(--xl-lcd-ink);padding:3px 10px;border:1px solid rgba(240,179,90,.35);border-radius:6px}
.recording .lcd-mode{color:var(--xl-lcd);background:var(--xl-lcd-ink);border-color:var(--xl-lcd-ink)}
.lcd-row2,.lcd-row3{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;color:var(--xl-lcd-dim);font-family:var(--sans)}
.lcd-row2 output,.lcd-row3 output{color:var(--xl-lcd-ink);font-weight:600;font-family:var(--disp)}
.lcd-name{color:var(--xl-lcd-ink);font-weight:600;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
.lcd-steps{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;height:8px}
.lcd-steps i{background:rgba(240,179,90,.14);border-radius:2px}
.lcd-steps i:nth-child(4n+1){background:rgba(240,179,90,.3)}
.lcd-steps i.on{background:var(--xl-lcd-ink);box-shadow:0 0 8px var(--xl-lcd-ink)}

/* layout */
.xl-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(14px,2.4vw,28px);align-items:start}
.xl-left{display:grid;gap:12px}
.xl-right{display:grid;gap:12px;min-width:0}
@media (max-width:860px){.xl-top{grid-template-columns:1fr}.xl-brand{flex-direction:row;align-items:baseline;gap:8px;min-width:0}.xl-brand em{margin:0 0 0 auto}.xl-body{grid-template-columns:1fr}}

/* pads */
.xl-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.4vw,14px)}
.xl-pad{position:relative;aspect-ratio:1;border:0;border-radius:12px;background:linear-gradient(180deg,var(--xl-pad),var(--xl-pad-2));color:var(--xl-ink);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;display:grid;grid-template-rows:auto 1fr auto;padding:9px 10px;text-align:left;box-shadow:inset 0 1px 0 rgba(243,227,195,.09),inset 0 -3px 0 rgba(0,0,0,.5),0 3px 0 #0a0908;transition:transform .05s,box-shadow .05s,background .12s;font-family:var(--sans)}
.xl-pad .n{font-family:var(--disp);font-weight:800;font-size:clamp(1rem,1.8vw,1.35rem);letter-spacing:-.02em;color:var(--xl-engrave);line-height:1}
.xl-pad .nm{align-self:end;font-size:clamp(.66rem,1.1vw,.8rem);color:var(--cream-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1em}
.xl-pad kbd{position:absolute;right:9px;top:9px;font:600 .66rem var(--sans);color:var(--xl-engrave);border:1px solid rgba(163,146,122,.35);border-radius:4px;padding:1px 5px}
.xl-pad.empty .n{color:#5d534a}
.xl-pad.sel{box-shadow:inset 0 1px 0 rgba(243,227,195,.09),inset 0 -3px 0 rgba(0,0,0,.5),0 3px 0 #0a0908,0 0 0 2px var(--xl-engrave)}
.xl-pad.hit{background:linear-gradient(180deg,var(--ember-2),var(--ember));transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 #0a0908,0 0 28px -4px var(--ember)}
.xl-pad.hit .n,.xl-pad.hit .nm,.xl-pad.hit kbd{color:var(--ember-ink);border-color:rgba(26,10,4,.4)}
.xl-pad:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.xl-pad{transition:none}.xl-pad.hit{transform:none}}
.xl-under{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.xl-under .xl-seg{flex:1 1 auto}

/* keys and segments */
.xl-key{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:9px;border:1px solid var(--xl-edge);background:linear-gradient(180deg,#26221e,#1a1714);color:var(--cream-2);font:600 .86rem/1 var(--sans);cursor:pointer;box-shadow:0 2px 0 #0a0908;white-space:nowrap;position:relative}
.xl-key:hover{color:var(--cream);border-color:#3a342c}
.xl-key:active{transform:translateY(1px);box-shadow:0 1px 0 #0a0908}
.xl-key svg{width:14px;height:14px;fill:currentColor}
.xl-key[aria-pressed=true]{background:var(--cream);color:var(--tar);border-color:var(--cream)}
.xl-key.rec[aria-pressed=true]{background:var(--ember);color:var(--ember-ink);border-color:var(--ember)}
.xl-key.ember{background:var(--ember);color:var(--ember-ink);border-color:var(--ember)}
.xl-key.file{overflow:hidden}
.xl-key.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.xl-key.file:has(input:focus-visible){outline:2px solid var(--cream);outline-offset:2px}
.playing .xl-key.play{background:var(--ok);color:#06271a;border-color:var(--ok)}
.xl-key.play::after,.xl-key.rec::after{content:"";width:6px;height:6px;border-radius:50%;background:#3b352e;box-shadow:inset 0 1px 1px #000}
.playing .xl-key.play::after{background:#06271a}
.recording .xl-key.rec::after,.xl-key.rec[aria-pressed=true]::after{background:var(--ember-ink)}
@media (prefers-reduced-motion:no-preference){.recording.playing .xl-key.rec::after{animation:xl-blink 1s steps(2) infinite}}
@keyframes xl-blink{50%{opacity:.2}}
.xl-seg{display:inline-flex;border:1px solid var(--xl-edge);border-radius:9px;overflow:hidden;background:#15120f}
.xl-seg button{border:0;background:transparent;color:var(--cream-2);font:600 .84rem var(--sans);padding:0 12px;min-height:38px;cursor:pointer;border-left:1px solid var(--xl-edge);position:relative}
.xl-seg button:first-child{border-left:0}
.xl-seg button[aria-checked=true]{background:var(--cream);color:var(--tar)}
.xl-seg button.has::after{content:"";position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--ember)}
.xl-seg button[aria-checked=true].has::after{background:var(--ember)}
.xl-seg button:focus-visible{outline:2px solid var(--cream);outline-offset:-3px;z-index:1}
.xl-transport{display:flex;gap:8px;flex-wrap:wrap}
.xl-transport .xl-key{flex:0 0 auto}
/* site.css has a round 44px .play for the beat player; the device's Play key must not inherit it */
.xl .xl-key.play{display:inline-flex;width:auto;height:auto;min-height:40px;border-radius:9px;transition:none}
.xl .xl-key.play:hover{background:linear-gradient(180deg,#26221e,#1a1714);border-color:#3a342c;color:var(--cream)}
.xl.playing .xl-key.play,.xl.playing .xl-key.play:hover{background:var(--ok);color:#06271a;border-color:var(--ok)}

/* steps */
.xl-stepbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.xl-steps{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}
.xl-step{aspect-ratio:1;max-height:44px;border:1px solid var(--xl-edge);border-radius:6px;background:#15120f;cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 2px 0 #0a0908}
.xl-step:nth-child(4n+1){border-color:#3a342c}
.xl-step i{width:55%;height:35%;border-radius:3px;background:#3b352e;box-shadow:inset 0 1px 1px #000}
.xl-step[aria-checked=true] i{background:var(--ember);box-shadow:0 0 10px -2px var(--ember)}
.xl-step.now{background:#241f1a}
.xl-step.now i{outline:1px solid var(--xl-lcd-ink)}
.xl-step.past{opacity:.35}
.xl-step:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.xl-barpage{display:inline-flex;border:1px solid var(--xl-edge);border-radius:8px;overflow:hidden}
.xl-barpage button{border:0;background:#15120f;color:var(--cream-2);font:600 .8rem var(--sans);width:34px;min-height:36px;cursor:pointer;border-left:1px solid var(--xl-edge)}
.xl-barpage button:first-child{border-left:0}
.xl-barpage button[aria-checked=true]{background:var(--cream);color:var(--tar)}
.xl-barpage button:disabled{opacity:.3;cursor:default}
@media (max-width:520px){.xl-stepbar{grid-template-columns:1fr}.xl-steps{grid-template-columns:repeat(8,1fr)}.xl-step{max-height:none}}

/* panel */
.xl-panel{border:1px solid var(--xl-edge);border-radius:12px;background:#15120f;overflow:hidden}
.xl-tabs{display:flex;border-bottom:1px solid var(--xl-edge);overflow-x:auto;scrollbar-width:none}
.xl-tabs::-webkit-scrollbar{display:none}
.xl-tabs [role=tab]{flex:1 0 auto;border:0;background:transparent;color:var(--xl-engrave);font:600 .86rem var(--sans);padding:12px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.xl-tabs [role=tab][aria-selected=true]{color:var(--cream);border-bottom-color:var(--ember)}
.xl-tabs [role=tab]:focus-visible{outline:2px solid var(--cream);outline-offset:-4px}
.xl-pane{padding:14px;display:grid;gap:12px}
.xl-pane[hidden]{display:none}
.xl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.xl-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
@media (max-width:420px){.xl-grid2{grid-template-columns:1fr}}
.xl-ctl{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr) minmax(52px,auto);gap:8px;align-items:center;font-size:.84rem;color:var(--cream-2)}
.xl-ctl output{text-align:right;color:var(--cream);font-variant-numeric:tabular-nums;font-size:.82rem}
.xl-ctl.text{grid-template-columns:auto minmax(0,1fr)}
.xl-ctl input[type=text],.xl-ctl select,.xl-pane select{min-height:38px;border:1px solid var(--xl-edge);border-radius:8px;background:#1c1916;color:var(--cream);font:500 .88rem var(--sans);padding:0 10px}
.xl-ctl input[type=range],.xl-fader input[type=range]{accent-color:var(--ember);width:100%;min-height:28px;margin:0}
.xl-lbl{font-size:.84rem;color:var(--xl-engrave)}
.xl-hint{font-size:.8rem;color:var(--dim);flex:1 1 220px;line-height:1.45}
.xl-song{font-family:var(--disp);font-weight:700;letter-spacing:.12em;color:var(--xl-lcd-ink);background:var(--xl-lcd);border-radius:6px;padding:6px 10px;min-width:80px;font-size:.9rem}
.xl-mixer{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}
.xl-fader{display:grid;justify-items:center;gap:4px;font-size:.7rem;color:var(--xl-engrave)}
.xl-fader input{height:110px;width:22px!important;min-height:0}
@media (max-width:600px){.xl-mixer{grid-template-columns:repeat(8,minmax(0,1fr))}}
.xl-meter{display:inline-block;width:90px;height:8px;border-radius:4px;background:#0c0a08;border:1px solid var(--xl-edge);overflow:hidden}
.xl-meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--ok),var(--warn),var(--ember));transform-origin:left;transform:scaleX(0);transition:transform .08s linear}
.xl-wave{width:100%;height:auto;border-radius:8px;border:1px solid #000;cursor:crosshair;background:var(--xl-lcd)}
.xl-status{margin:12px 0 0;font-size:.84rem;color:var(--xl-engrave);min-height:1.4em}
.xl-help{margin-top:18px;color:var(--cream-2)}
.xl-help summary{cursor:pointer;font-weight:600;padding:8px 0}
.xl-help ul{padding-left:1.2em;margin:4px 0 0;font-size:.95rem}
.xl-help li{margin:4px 0}

/* ---- Theme switch (header) ---- */
.xl-brand .xl-seg{margin-top:10px;align-self:flex-start}
.xl-brand .xl-seg button{min-height:30px;font-size:.74rem;padding:0 10px}
@media (max-width:860px){.xl-brand{flex-wrap:wrap}.xl-brand .xl-seg{margin:0 0 0 auto}.xl-brand em{margin:0}}
.xl-leds{display:flex;gap:6px;margin-top:8px}
.xl-brand .xl-seg{align-self:flex-start}
.xl-leds i{display:block;width:8px;height:8px;border-radius:50%;background:#3b352e;box-shadow:inset 0 1px 1px #000}

/* ---- Retro theme: late-90s sampler-workstation colors (warm gray chassis, rubber pads, green LCD). Palette and feel only. ---- */
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/silkscreen-regular.ttf) format('truetype')}
.xl[data-theme=retro]{--xl-ink:#2b2a27;--xl-engrave:#45423c;--xl-edge:#8a867e;--xl-lcd:#1e3a24;--xl-lcd-ink:#9ad88a;--xl-lcd-dim:#78b86c;--cream:#2b2a27;--cream-2:#2b2a27;--dim:#45423c;--r-chassis:#d9d6cf;--r-chassis-2:#c9c5bd;--r-bezel:#6f6c66;--r-pad:#3a3a3a;--r-silk:#efe6cf;--r-btn:#bdb9b0;--r-field:#e9e6df;--xl-r:6px;
 color:#2b2a27;border:1px solid #8a867e;
 background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
  repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,rgba(0,0,0,.025) 1px 2px,transparent 2px 5px),
  linear-gradient(180deg,#dedbd4,#d9d6cf 40%,#c9c5bd);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.12),0 30px 60px -30px rgba(0,0,0,.9),0 2px 0 #4d4a45}
.xl[data-theme=retro]::before{background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 38%,rgba(0,0,0,.05));mix-blend-mode:normal}
.xl[data-theme=retro] .xl-brand b{color:#2b2a27}
.xl[data-theme=retro] .xl-brand span{color:#a8281d}
.xl[data-theme=retro] .xl-brand em,.xl[data-theme=retro] .xl-lbl,.xl[data-theme=retro] .xl-status{color:#45423c;font-family:var(--sans);font-weight:600;letter-spacing:.02em}
.xl[data-theme=retro] .xl-leds i{background:#8b877f;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.xl[data-theme=retro].live .xl-leds i:nth-child(3){background:#f0a020;box-shadow:0 0 6px #f0a020}
.xl[data-theme=retro].playing .xl-leds i:nth-child(1){background:#35d04a;box-shadow:0 0 6px #35d04a}
.xl[data-theme=retro].recording .xl-leds i:nth-child(2){background:#ff3a2a;box-shadow:0 0 6px #ff3a2a}
/* LCD: backlit green on dark green, faint scanlines + glow, chunky pixel face (Silkscreen, OFL) for LCD text only */
.xl[data-theme=retro] .xl-lcd{font-family:'Silkscreen','Courier New',monospace;font-weight:400;border-radius:3px;border:3px solid #6f6c66;outline:1px solid #3d3b37;box-shadow:inset 0 0 18px rgba(0,0,0,.65),inset 0 0 0 1px rgba(154,216,138,.12),0 0 0 2px #a9a59d,0 0 28px -8px rgba(154,216,138,.45);text-shadow:0 0 6px rgba(154,216,138,.55);background:radial-gradient(ellipse at 50% 40%,#244a2c,#1e3a24 70%)}
.xl[data-theme=retro] .xl-lcd::after{background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.2) 2px 3px)}
.xl[data-theme=retro] .xl-lcd *{font-family:'Silkscreen','Courier New',monospace;font-weight:400;font-stretch:100%;letter-spacing:0}
.xl[data-theme=retro] .lcd-bpm output{font-size:clamp(2rem,4.4vw,3rem)}
.xl[data-theme=retro] .lcd-bpm small,.xl[data-theme=retro] .lcd-row2,.xl[data-theme=retro] .lcd-row3{font-size:.74rem}
.xl[data-theme=retro] .lcd-row2 output,.xl[data-theme=retro] .lcd-row3 output{font-weight:400}
.xl[data-theme=retro] .lcd-mode{border-radius:0;border-color:rgba(154,216,138,.5);font-size:.74rem;font-weight:400}
.xl[data-theme=retro].recording .lcd-mode{color:#1e3a24;background:#9ad88a}
.xl[data-theme=retro] .lcd-steps i{background:rgba(154,216,138,.16);border-radius:0}
.xl[data-theme=retro] .lcd-steps i:nth-child(4n+1){background:rgba(154,216,138,.34)}
.xl[data-theme=retro] .lcd-steps i.on{background:#9ad88a;box-shadow:0 0 8px #9ad88a}
.xl[data-theme=retro] .xl-song{border-radius:0;font-family:'Silkscreen','Courier New',monospace;letter-spacing:.04em}
.xl[data-theme=retro] .xl-wave{border-radius:0;border:3px solid #6f6c66;background:#1e3a24}
/* pads: charcoal rubber, slight sheen, cream silkscreen; pressed darkens */
.xl[data-theme=retro] .xl-pads{padding:10px;background:#6f6c66;border-radius:4px;box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.5)}
.xl[data-theme=retro] .xl-pad{border-radius:5px;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.13),transparent 62%),linear-gradient(180deg,#444,#3a3a3a 55%,#323232);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.45),0 2px 0 #1b1b1b;color:var(--r-silk)}
.xl[data-theme=retro] .xl-pad .n{color:var(--r-silk);font-family:var(--sans);font-weight:700;letter-spacing:.04em}
.xl[data-theme=retro] .xl-pad .nm{color:var(--r-silk)}
.xl[data-theme=retro] .xl-pad kbd{color:#d6cdb6;border-color:rgba(239,230,207,.4);border-radius:2px}
.xl[data-theme=retro] .xl-pad.empty .n{color:#b9b09a}
.xl[data-theme=retro] .xl-pad.sel{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.45),0 2px 0 #1b1b1b,0 0 0 2px #f0a020}
.xl[data-theme=retro] .xl-pad.hit{background:linear-gradient(180deg,#262626,#1f1f1f);transform:translateY(2px);box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 0 0 1px #111,0 0 18px -4px rgba(154,216,138,.6)}
.xl[data-theme=retro] .xl-pad.hit .n,.xl[data-theme=retro] .xl-pad.hit .nm,.xl[data-theme=retro] .xl-pad.hit kbd{color:var(--r-silk);border-color:rgba(239,230,207,.4)}
.xl[data-theme=retro] .xl-pad:focus-visible,.xl[data-theme=retro] .xl-key:focus-visible,.xl[data-theme=retro] .xl-seg button:focus-visible,.xl[data-theme=retro] .xl-tabs [role=tab]:focus-visible,.xl[data-theme=retro] .xl-step:focus-visible{outline:2px solid #1a4fd0;outline-offset:2px}
/* hard-edged square buttons */
.xl[data-theme=retro] .xl-key{border-radius:2px;background:linear-gradient(180deg,#cfcbc3,#bdb9b0);border:1px solid #6f6c66;color:#2b2a27;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #55524d;font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;font-size:.74rem}
.xl[data-theme=retro] .xl-key.play{border-radius:2px}
.xl[data-theme=retro] .xl-key.play:hover{background:linear-gradient(180deg,#cfcbc3,#bdb9b0);color:#000;border-color:#3d3b37}
.xl[data-theme=retro].playing .xl-key.play,.xl[data-theme=retro].playing .xl-key.play:hover{background:linear-gradient(180deg,#2f7a3b,#2a6d35);color:#fff;border-color:#1b4a23}
.xl[data-theme=retro] .xl-key:hover{color:#000;border-color:#3d3b37}
.xl[data-theme=retro] .xl-key[aria-pressed=true]{background:linear-gradient(180deg,#3f3f3d,#4a4a48);color:#f3f0e8;border-color:#2b2b29;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.xl[data-theme=retro] .xl-key.ember{background:linear-gradient(180deg,#cfcbc3,#bdb9b0);color:#2b2a27;border-color:#6f6c66}
.xl[data-theme=retro] .xl-key.rec,.xl[data-theme=retro] .xl-key.rec[aria-pressed=true]{background:linear-gradient(180deg,#c42d20,#b3261b);color:#fff;border-color:#7a1810}
.xl[data-theme=retro] .xl-key.rec[aria-pressed=true]{box-shadow:inset 0 2px 4px rgba(0,0,0,.45)}
.xl[data-theme=retro] .xl-key.play::after,.xl[data-theme=retro] .xl-key.rec::after{background:#7e7a73;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.xl[data-theme=retro] .xl-key.rec::after{background:#f0a0a0}
.xl[data-theme=retro].playing .xl-key.play{background:linear-gradient(180deg,#2f7a3b,#2a6d35);color:#fff;border-color:#1b4a23}
.xl[data-theme=retro].playing .xl-key.play::after{background:#9dff9d;box-shadow:0 0 5px #9dff9d}
.xl[data-theme=retro].recording .xl-key.rec::after,.xl[data-theme=retro] .xl-key.rec[aria-pressed=true]::after{background:#fff}
.xl[data-theme=retro] .xl-seg,.xl[data-theme=retro] .xl-barpage{border-radius:2px;background:#bdb9b0;border-color:#6f6c66}
.xl[data-theme=retro] .xl-seg button,.xl[data-theme=retro] .xl-barpage button{color:#2b2a27;border-left-color:#8a867e;font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.72rem}
.xl[data-theme=retro] .xl-seg button[aria-checked=true],.xl[data-theme=retro] .xl-barpage button[aria-checked=true]{background:#4a4a48;color:#f3f0e8}
.xl[data-theme=retro] .xl-seg button.has::after{background:#c42d20}
.xl[data-theme=retro] .xl-seg button[aria-checked=true].has::after{background:#ff8a7a}
.xl[data-theme=retro] .xl-step{border-radius:2px;background:#bdb9b0;border-color:#6f6c66;box-shadow:0 2px 0 #55524d}
.xl[data-theme=retro] .xl-step:nth-child(4n+1){border-color:#2b2a27}
.xl[data-theme=retro] .xl-step i{background:#7e7a73;border-radius:1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.xl[data-theme=retro] .xl-step[aria-checked=true] i{background:#f0a020;box-shadow:0 0 8px -1px #f0a020}
.xl[data-theme=retro] .xl-step.now{background:#d9d6cf}
.xl[data-theme=retro] .xl-step.now i{outline:2px solid #1e3a24}
/* panel + fields */
.xl[data-theme=retro] .xl-panel{border-radius:2px;background:#cfccc4;border:2px solid #6f6c66;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.xl[data-theme=retro] .xl-tabs{border-bottom-color:#6f6c66;background:#c2beb5}
.xl[data-theme=retro] .xl-tabs [role=tab]{color:#2b2a27;font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.74rem}
.xl[data-theme=retro] .xl-tabs [role=tab][aria-selected=true]{background:#cfccc4;color:#000;border-bottom-color:#a8281d}
.xl[data-theme=retro] .xl-ctl{color:#2b2a27;font-family:var(--sans);font-weight:600}
.xl[data-theme=retro] .xl-ctl output{color:#2b2a27}
.xl[data-theme=retro] .xl-ctl input[type=text],.xl[data-theme=retro] .xl-ctl select,.xl[data-theme=retro] .xl-pane select{background:#e9e6df;color:#1b1a18;border:1px solid #6f6c66;border-radius:2px}
.xl[data-theme=retro] .xl-hint{color:#45423c}
.xl[data-theme=retro] .xl-fader{color:#2b2a27}
.xl[data-theme=retro] .xl-meter{background:#e9e6df;border-color:#6f6c66;border-radius:0}
.xl[data-theme=retro] .xl-help,.xl[data-theme=retro] .xl-help summary{color:var(--cream-2)}
/* knobs: dark cap with a white indicator line (the thumbs of the range controls) */
.xl[data-theme=retro] input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;accent-color:#2b2b2b}
.xl[data-theme=retro] input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(180deg,#55524d,#7e7a73);border-radius:0;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.xl[data-theme=retro] input[type=range]::-moz-range-track{height:6px;background:#66635d;border-radius:0}
.xl[data-theme=retro] input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;border:2px solid #111;background:linear-gradient(#fff,#fff) 50% 2px/2px 8px no-repeat,radial-gradient(circle at 35% 30%,#555,#262626);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.xl[data-theme=retro] input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:2px solid #111;background:linear-gradient(#fff,#fff) 50% 2px/2px 8px no-repeat,radial-gradient(circle at 35% 30%,#555,#262626)}
.xl[data-theme=retro] input[type=range]:focus-visible{outline:2px solid #1a4fd0;outline-offset:3px}
.xl[data-theme=retro] .xl-fader input{writing-mode:vertical-lr}
@media (prefers-reduced-motion:reduce){.xl[data-theme=retro] .xl-pad.hit{transform:none}}