/* Looped themes. WRITTEN BY tools/uikit.mjs FROM ui/system/themes/: edit those
   files (or use the UI Editor), then run `node tools/uikit.mjs css`. Never edit
   this file by hand: `node tools/uikit.mjs check` fails when it is out of date.
   A theme is tokens only (ui/system/tokens.json says what each one does);
   looped.css builds every control from them. Pick one with
   <html data-look="...">; looped.js does it from the player's choice. */

:root, :root[data-look="ember"] {
  /* ---- Ember: Warm amber, frosted glass you can see the glow through, titles with a light passing through them. ---- */
  color-scheme: dark;
  --bg: #0E0906;
  --text: #F6EBDD;
  --text-2: #C2AC92;
  --text-3: #7F6B57;
  --rule: rgba(255,225,190,.1);
  --accent: #F4A64A;
  --key-text: #F6EBDD;
  --go-text: #1E1206;
  --ok: #7BD08F;
  --warn: #F2C744;
  --bad: #F27A68;
  --bg-glow: radial-gradient(ellipse 60% 45% at 15% 10%, rgba(242,140,44,.42), transparent 70%), radial-gradient(ellipse 55% 40% at 90% 35%, rgba(232,76,96,.26), transparent 70%), radial-gradient(ellipse 60% 45% at 35% 95%, rgba(128,82,210,.22), transparent 70%);
  --panel: linear-gradient(160deg, rgba(255,214,170,.11), rgba(255,214,170,.035));
  --over: rgba(32,20,13,.5);
  --field: rgba(0,0,0,.26);
  --key-bg: linear-gradient(180deg, rgba(255,220,180,.15), rgba(255,220,180,.05));
  --key-gloss: linear-gradient(180deg, rgba(255,240,220,.14), rgba(255,240,220,0) 50%);
  --go-bg: linear-gradient(135deg, #F8BF68, #EC7F34);
  --knob: radial-gradient(circle at 45% 30%, rgba(255,230,190,.45), transparent 45%), radial-gradient(circle, #3A2A1E, #1A120C);
  --panel-r: 22px;
  --field-r: 14px;
  --key-r: 16px;
  --panel-bw: 0px;
  --key-bw: 0px;
  --panel-edge: inset 0 1px 0 rgba(255,228,195,.18), inset 0 0 0 1px rgba(255,228,195,.07), 0 24px 60px rgba(0,0,0,.42);
  --panel-blur: blur(28px) saturate(145%);
  --field-edge: inset 0 0 0 1px rgba(255,228,195,.07);
  --key-shadow: inset 0 1px 0 rgba(255,232,205,.22), inset 0 0 0 1px rgba(255,228,195,.08), 0 8px 20px rgba(0,0,0,.28);
  --key-shadow-down: inset 0 1px 0 rgba(255,232,205,.1), inset 0 0 0 1px rgba(255,228,195,.08);
  --key-travel: 1px;
  --go-glow: 0 8px 28px rgba(242,140,44,.45);
  --display: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display-w: 800;
  --display-s: 112%;
  --display-ls: -0.02em;
  --text-font: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --key-case: none;
  --key-size: 14.5px;
  --key-weight: 650;
  --key-ls: 0.01em;
  --key-stretch: 100%;
  --c1: #EC7F34;
  --c2: #F4A64A;
  --c3: #F6D27E;
  --c4: #E85A6A;
  --off: rgba(255,228,195,.08);
  --led: #F4A64A;
  --step-shape: bulb;
  --bg-size: 170% 170%;
  --bg-motion: lp-drift;
  --title-fill: linear-gradient(100deg, #F6EBDD 0%, #F6EBDD 38%, #FFD08A 46%, #FF9A62 50%, #FFD08A 54%, #F6EBDD 62%, #F6EBDD 100%);
  --title-ink: transparent;
  --title-glow: rgba(244,150,70,.4);
  --title-motion: lp-shimmer-glow;
  --title-speed: 7s;
}
:root:not([data-look])[data-scheme="light"], :root[data-look="ember"][data-scheme="light"] {
  color-scheme: light;
  --bg: #F5ECE1;
  --text: #2A1D13;
  --text-2: #7A6450;
  --text-3: #AD9885;
  --rule: rgba(42,29,19,.1);
  --accent: #C9661A;
  --key-text: #2A1D13;
  --go-text: #FFFFFF;
  --ok: #2F9A55;
  --warn: #B7800C;
  --bad: #C84330;
  --bg-glow: radial-gradient(ellipse 60% 45% at 15% 10%, rgba(242,140,44,.32), transparent 70%), radial-gradient(ellipse 55% 40% at 90% 35%, rgba(232,76,96,.18), transparent 70%), radial-gradient(ellipse 60% 45% at 35% 95%, rgba(128,82,210,.14), transparent 70%);
  --panel: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,250,244,.38));
  --over: rgba(255,248,240,.55);
  --field: rgba(255,255,255,.5);
  --key-bg: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,250,244,.6));
  --key-gloss: none;
  --go-bg: linear-gradient(135deg, #EE9A44, #D4661C);
  --knob: radial-gradient(circle at 45% 30%, #FFFFFF, #EADCCB);
  --panel-edge: inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 1px rgba(90,50,20,.07), 0 20px 50px rgba(120,60,20,.12);
  --field-edge: inset 0 0 0 1px rgba(90,50,20,.08);
  --key-shadow: 0 0 0 1px rgba(90,50,20,.08), 0 6px 14px rgba(120,60,20,.1);
  --key-shadow-down: 0 0 0 1px rgba(90,50,20,.12);
  --go-glow: 0 8px 24px rgba(212,102,28,.32);
  --c3: #D9A33A;
  --off: rgba(90,50,20,.1);
  --led: #D4661C;
  --title-fill: linear-gradient(100deg, #2A1D13 0%, #2A1D13 38%, #C9661A 46%, #E8505F 50%, #C9661A 54%, #2A1D13 62%, #2A1D13 100%);
  --title-glow: rgba(212,102,28,.22);
}
@media (prefers-color-scheme: light) {
  :root:not([data-look]):not([data-scheme]), :root[data-look="ember"]:not([data-scheme]) {
    color-scheme: light;
    --bg: #F5ECE1;
    --text: #2A1D13;
    --text-2: #7A6450;
    --text-3: #AD9885;
    --rule: rgba(42,29,19,.1);
    --accent: #C9661A;
    --key-text: #2A1D13;
    --go-text: #FFFFFF;
    --ok: #2F9A55;
    --warn: #B7800C;
    --bad: #C84330;
    --bg-glow: radial-gradient(ellipse 60% 45% at 15% 10%, rgba(242,140,44,.32), transparent 70%), radial-gradient(ellipse 55% 40% at 90% 35%, rgba(232,76,96,.18), transparent 70%), radial-gradient(ellipse 60% 45% at 35% 95%, rgba(128,82,210,.14), transparent 70%);
    --panel: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,250,244,.38));
    --over: rgba(255,248,240,.55);
    --field: rgba(255,255,255,.5);
    --key-bg: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,250,244,.6));
    --key-gloss: none;
    --go-bg: linear-gradient(135deg, #EE9A44, #D4661C);
    --knob: radial-gradient(circle at 45% 30%, #FFFFFF, #EADCCB);
    --panel-edge: inset 0 1px 0 rgba(255,255,255,.85), 0 0 0 1px rgba(90,50,20,.07), 0 20px 50px rgba(120,60,20,.12);
    --field-edge: inset 0 0 0 1px rgba(90,50,20,.08);
    --key-shadow: 0 0 0 1px rgba(90,50,20,.08), 0 6px 14px rgba(120,60,20,.1);
    --key-shadow-down: 0 0 0 1px rgba(90,50,20,.12);
    --go-glow: 0 8px 24px rgba(212,102,28,.32);
    --c3: #D9A33A;
    --off: rgba(90,50,20,.1);
    --led: #D4661C;
    --title-fill: linear-gradient(100deg, #2A1D13 0%, #2A1D13 38%, #C9661A 46%, #E8505F 50%, #C9661A 54%, #2A1D13 62%, #2A1D13 100%);
    --title-glow: rgba(212,102,28,.22);
  }
}

:root[data-look="faceplate"] {
  /* ---- Faceplate: The drum machine: glossy keys, keycap lights. ---- */
  color-scheme: dark;
  --bg: #0A0908;
  --text: #EEE8DC;
  --text-2: #A59E92;
  --text-3: #6B655D;
  --rule: #2C2926;
  --accent: #F28C2C;
  --key-text: #EEE8DC;
  --go-text: #1C0E06;
  --ok: #56CF86;
  --warn: #F2C744;
  --bad: #FF6A64;
  --bg-glow: radial-gradient(ellipse 90% 50% at 50% -8%, rgba(242,140,44,.13), transparent 70%);
  --panel: linear-gradient(180deg, #1C1A18, #131210);
  --over: rgba(22,20,18,.86);
  --field: #0D0C0B;
  --key-bg: linear-gradient(180deg, #3B3733 0%, #2A2724 55%, #22201D 100%);
  --key-gloss: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 52%);
  --go-bg: linear-gradient(180deg, #FFAE5C 0%, #F28C2C 50%, #D46B10 100%);
  --knob: radial-gradient(circle at 50% 35%, rgba(255,255,255,.18), transparent 55%), repeating-conic-gradient(#2E2B28 0 6deg, #1C1A18 6deg 12deg);
  --panel-r: 16px;
  --field-r: 8px;
  --key-r: 8px;
  --panel-bw: 0px;
  --key-bw: 0px;
  --panel-edge: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px #2C2926, 0 14px 34px rgba(0,0,0,.55);
  --panel-blur: none;
  --field-edge: inset 0 2px 4px rgba(0,0,0,.7), inset 0 0 0 1px #24211E;
  --key-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 3px 0 #0A0908, 0 5px 10px rgba(0,0,0,.6);
  --key-shadow-down: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 #0A0908, 0 1px 3px rgba(0,0,0,.6);
  --key-travel: 3px;
  --go-glow: 0 0 20px rgba(242,140,44,.45);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-w: 800;
  --display-s: 125%;
  --display-ls: -.02em;
  --text-font: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --key-case: uppercase;
  --key-size: 12px;
  --key-weight: 700;
  --key-ls: .1em;
  --key-stretch: 75%;
  --c1: #EF4B33;
  --c2: #F28C2C;
  --c3: #F2C744;
  --c4: #EDE7D9;
  --off: #2A2724;
  --led: #FF4A3D;
  --step-shape: key;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}

:root[data-look="backbar"] {
  /* ---- Back Bar: Lacquered wood, brass, Edison bulbs. ---- */
  color-scheme: dark;
  --bg: #0A0605;
  --text: #F6E8D0;
  --text-2: #C8AC88;
  --text-3: #826A52;
  --rule: rgba(214,170,98,.22);
  --accent: #FFB347;
  --key-text: #F6E8D0;
  --go-text: #2A1404;
  --ok: #56CF86;
  --warn: #F2C744;
  --bad: #FF6A64;
  --bg-glow: radial-gradient(ellipse 80% 45% at 50% -5%, rgba(255,170,80,.20), transparent 70%), radial-gradient(ellipse 70% 40% at 50% 110%, rgba(140,30,20,.25), transparent 70%);
  --panel: repeating-linear-gradient(91deg, rgba(255,220,180,.018) 0 2px, transparent 2px 9px) padding-box, linear-gradient(180deg, #2C1610, #170B08) padding-box, linear-gradient(180deg, #F0D191, #A57A35 40%, #6E4A1C 60%, #D3AE66) border-box;
  --over: rgba(30,15,10,.88);
  --field: #100705;
  --key-bg: linear-gradient(180deg, #4A2219 0%, #2B120D 55%, #1E0B08 100%) padding-box, linear-gradient(180deg, #F6DCA0, #B98A3E 45%, #7A5422 58%, #D9B46A) border-box;
  --key-gloss: linear-gradient(180deg, rgba(255,235,205,.20), rgba(255,235,205,0) 55%);
  --go-bg: radial-gradient(ellipse 80% 90% at 50% 25%, #FFF0C8 0%, #FFB347 42%, #C3640F 100%) padding-box, linear-gradient(180deg, #F6DCA0, #B98A3E 45%, #7A5422 58%, #D9B46A) border-box;
  --knob: radial-gradient(circle at 40% 30%, rgba(255,250,230,.75), transparent 35%), conic-gradient(from 20deg, #F6DCA0, #9C7230, #E9C77E, #6E4A1C, #F6DCA0, #A57A35, #F6DCA0);
  --panel-r: 14px;
  --field-r: 8px;
  --key-r: 12px;
  --panel-bw: 2px;
  --key-bw: 2px;
  --panel-edge: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,230,190,.10), 0 18px 40px rgba(0,0,0,.65);
  --panel-blur: none;
  --field-edge: inset 0 2px 5px rgba(0,0,0,.8), inset 0 0 0 1px rgba(214,170,98,.25);
  --key-shadow: inset 0 1px 0 rgba(255,225,180,.20), 0 3px 0 #070302, 0 7px 14px rgba(0,0,0,.65);
  --key-shadow-down: inset 0 1px 0 rgba(255,225,180,.10), 0 1px 0 #070302, 0 2px 4px rgba(0,0,0,.6);
  --key-travel: 2px;
  --go-glow: 0 0 26px rgba(255,179,71,.55);
  --display: "Limelight", "Didot", Georgia, serif;
  --display-w: 400;
  --display-s: 100%;
  --display-ls: .01em;
  --text-font: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --key-case: uppercase;
  --key-size: 12px;
  --key-weight: 700;
  --key-ls: .1em;
  --key-stretch: 75%;
  --c1: #FF8A4C;
  --c2: #FFB347;
  --c3: #FFD580;
  --c4: #FFF2DA;
  --off: #2B1A12;
  --led: #FFB347;
  --step-shape: bulb;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}

:root[data-look="obsidian"] {
  /* ---- Obsidian: Deepest black, frosted glass, ice light. ---- */
  color-scheme: dark;
  --bg: #020203;
  --text: #F2F6FA;
  --text-2: #9AA6B2;
  --text-3: #586270;
  --rule: rgba(255,255,255,.08);
  --accent: #8BE9FF;
  --key-text: #E9EEF4;
  --go-text: #021019;
  --ok: #56CF86;
  --warn: #F2C744;
  --bad: #FF6A64;
  --bg-glow: radial-gradient(ellipse 60% 40% at 15% 0%, rgba(110,200,255,.13), transparent 70%), radial-gradient(ellipse 50% 35% at 95% 30%, rgba(92,242,214,.07), transparent 70%);
  --panel: linear-gradient(160deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 42%, rgba(255,255,255,.04) 100%);
  --over: rgba(8,9,12,.72);
  --field: rgba(0,0,0,.5);
  --key-bg: linear-gradient(180deg, #1E2027 0%, #0C0D10 50%, #050506 100%);
  --key-gloss: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 47%, rgba(255,255,255,0) 50%);
  --go-bg: linear-gradient(180deg, rgba(200,245,255,.98) 0%, rgba(120,215,250,.92) 50%, rgba(50,160,215,.95) 100%);
  --knob: radial-gradient(circle at 50% 18%, rgba(255,255,255,.35), rgba(255,255,255,0) 40%), radial-gradient(circle at 50% 60%, #15171C, #030304 70%);
  --panel-r: 20px;
  --field-r: 10px;
  --key-r: 12px;
  --panel-bw: 0px;
  --key-bw: 0px;
  --panel-edge: inset 0 1px 0 rgba(255,255,255,.20), inset 0 0 0 1px rgba(255,255,255,.07), 0 24px 60px rgba(0,0,0,.75);
  --panel-blur: blur(26px) saturate(150%);
  --field-edge: inset 0 1px 3px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.07);
  --key-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 0 #000, 0 10px 22px rgba(0,0,0,.85);
  --key-shadow-down: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 #000, 0 2px 6px rgba(0,0,0,.8);
  --key-travel: 2px;
  --go-glow: 0 0 26px rgba(139,233,255,.55);
  --display: "Unbounded", "Archivo", Arial, sans-serif;
  --display-w: 600;
  --display-s: 100%;
  --display-ls: -.015em;
  --text-font: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --key-case: uppercase;
  --key-size: 12px;
  --key-weight: 700;
  --key-ls: .1em;
  --key-stretch: 75%;
  --c1: #8BE9FF;
  --c2: #5CF2D6;
  --c3: #F4FBFF;
  --c4: #FFE29A;
  --off: rgba(255,255,255,.07);
  --led: #8BE9FF;
  --step-shape: prism;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}

:root[data-look="jukebox"] {
  /* ---- Jukebox: Chrome, candy jelly keys, bubble tubes. ---- */
  color-scheme: dark;
  --bg: #0B0306;
  --text: #FFF3EF;
  --text-2: #E2A6B0;
  --text-3: #8A5560;
  --rule: rgba(255,180,200,.14);
  --accent: #FF3B5C;
  --key-text: #FFF3EF;
  --go-text: #FFFFFF;
  --ok: #56CF86;
  --warn: #F2C744;
  --bad: #FF6A64;
  --bg-glow: radial-gradient(ellipse 80% 45% at 50% -5%, rgba(255,46,77,.22), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 60%, rgba(255,154,46,.12), transparent 70%);
  --panel: linear-gradient(180deg, #2B0A15, #15040A) padding-box, linear-gradient(180deg, #FFFFFF 0%, #B8BEC6 28%, #4E5560 50%, #DDE2E8 72%, #858C96 100%) border-box;
  --over: rgba(30,6,14,.88);
  --field: #120308;
  --key-bg: linear-gradient(180deg, #5A1A2C 0%, #34101B 55%, #250A13 100%) padding-box, linear-gradient(180deg, #FFFFFF 0%, #B8BEC6 30%, #555C66 52%, #E2E6EB 75%, #8C939C 100%) border-box;
  --key-gloss: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255,255,255,.32), rgba(255,255,255,0) 70%);
  --go-bg: radial-gradient(ellipse 80% 90% at 50% 20%, #FFB3BE 0%, #FF2E4D 45%, #A0001C 100%) padding-box, linear-gradient(180deg, #FFFFFF 0%, #B8BEC6 30%, #555C66 52%, #E2E6EB 75%, #8C939C 100%) border-box;
  --knob: radial-gradient(circle at 40% 28%, #FFFFFF, transparent 30%), conic-gradient(from 0deg, #E8ECF0, #6B727C, #F4F6F8, #4E5560, #E8ECF0, #8C939C, #E8ECF0);
  --panel-r: 24px;
  --field-r: 14px;
  --key-r: 999px;
  --panel-bw: 3px;
  --key-bw: 2px;
  --panel-edge: inset 0 2px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.7);
  --panel-blur: none;
  --field-edge: inset 0 2px 5px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,180,200,.14);
  --key-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #050102, 0 8px 16px rgba(0,0,0,.65);
  --key-shadow-down: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 #050102, 0 2px 5px rgba(0,0,0,.6);
  --key-travel: 2px;
  --go-glow: 0 0 26px rgba(255,46,77,.55);
  --display: "Righteous", "Archivo", Arial, sans-serif;
  --display-w: 400;
  --display-s: 100%;
  --display-ls: .01em;
  --text-font: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --key-case: uppercase;
  --key-size: 12px;
  --key-weight: 700;
  --key-ls: .1em;
  --key-stretch: 75%;
  --c1: #FF3B5C;
  --c2: #FF9A2E;
  --c3: #FFD93B;
  --c4: #3BE38A;
  --off: #2A0B14;
  --led: #FF3B5C;
  --step-shape: tube;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}

:root[data-look="clean"] {
  /* ---- Clean: Calm and clear, like the phone itself: system type, soft cards, one blue. ---- */
  color-scheme: light;
  --bg: #F2F2F7;
  --text: #1C1C1E;
  --text-2: #6C6C70;
  --text-3: #AEAEB2;
  --rule: rgba(60,60,67,.14);
  --accent: #007AFF;
  --key-text: #1C1C1E;
  --go-text: #FFFFFF;
  --ok: #34C759;
  --warn: #FF9500;
  --bad: #FF3B30;
  --bg-glow: none;
  --panel: #FFFFFF;
  --over: rgba(255,255,255,.78);
  --field: rgba(118,118,128,.12);
  --key-bg: #FFFFFF;
  --key-gloss: none;
  --go-bg: #007AFF;
  --knob: radial-gradient(circle at 50% 30%, #FFFFFF, #E5E5EA);
  --panel-r: 14px;
  --field-r: 10px;
  --key-r: 12px;
  --panel-bw: 0px;
  --key-bw: 0px;
  --panel-edge: 0 1px 2px rgba(0,0,0,.05), 0 0 0 .5px rgba(0,0,0,.05);
  --panel-blur: none;
  --field-edge: none;
  --key-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.1);
  --key-shadow-down: 0 0 0 .5px rgba(0,0,0,.12);
  --key-travel: 0px;
  --go-glow: 0 4px 14px rgba(0,122,255,.25);
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-w: 700;
  --display-s: 100%;
  --display-ls: -0.02em;
  --text-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --key-case: none;
  --key-size: 15px;
  --key-weight: 600;
  --key-ls: 0em;
  --key-stretch: 100%;
  --c1: #FF3B30;
  --c2: #FF9500;
  --c3: #FFCC00;
  --c4: #34C759;
  --off: #E5E5EA;
  --led: #34C759;
  --step-shape: key;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}
:root[data-look="clean"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --text: #F2F2F7;
  --text-2: #98989F;
  --text-3: #636366;
  --rule: rgba(84,84,88,.5);
  --accent: #0A84FF;
  --key-text: #F2F2F7;
  --ok: #30D158;
  --warn: #FF9F0A;
  --bad: #FF453A;
  --panel: #1C1C1E;
  --over: rgba(28,28,30,.78);
  --field: rgba(118,118,128,.24);
  --key-bg: #2C2C2E;
  --go-bg: #0A84FF;
  --knob: radial-gradient(circle at 50% 30%, #636366, #2C2C2E);
  --panel-edge: 0 0 0 .5px rgba(255,255,255,.06);
  --key-shadow: 0 0 0 .5px rgba(255,255,255,.08);
  --key-shadow-down: none;
  --go-glow: 0 4px 14px rgba(10,132,255,.3);
  --c1: #FF453A;
  --c2: #FF9F0A;
  --c3: #FFD60A;
  --c4: #30D158;
  --off: #2C2C2E;
  --led: #30D158;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="clean"]:not([data-scheme]) {
    color-scheme: dark;
    --bg: #000000;
    --text: #F2F2F7;
    --text-2: #98989F;
    --text-3: #636366;
    --rule: rgba(84,84,88,.5);
    --accent: #0A84FF;
    --key-text: #F2F2F7;
    --ok: #30D158;
    --warn: #FF9F0A;
    --bad: #FF453A;
    --panel: #1C1C1E;
    --over: rgba(28,28,30,.78);
    --field: rgba(118,118,128,.24);
    --key-bg: #2C2C2E;
    --go-bg: #0A84FF;
    --knob: radial-gradient(circle at 50% 30%, #636366, #2C2C2E);
    --panel-edge: 0 0 0 .5px rgba(255,255,255,.06);
    --key-shadow: 0 0 0 .5px rgba(255,255,255,.08);
    --key-shadow-down: none;
    --go-glow: 0 4px 14px rgba(10,132,255,.3);
    --c1: #FF453A;
    --c2: #FF9F0A;
    --c3: #FFD60A;
    --c4: #30D158;
    --off: #2C2C2E;
    --led: #30D158;
  }
}

:root[data-look="warm"] {
  /* ---- Warm: The bar at night: amber light on dark wood, soft and round, words as typed. ---- */
  color-scheme: dark;
  --bg: #120C08;
  --text: #F5EBDD;
  --text-2: #BDA78C;
  --text-3: #7C6853;
  --rule: rgba(245,235,221,.1);
  --accent: #F2A541;
  --key-text: #F5EBDD;
  --go-text: #1E1206;
  --ok: #7BCB8A;
  --warn: #F2C744;
  --bad: #F07060;
  --bg-glow: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(242,165,65,.16), transparent 70%);
  --panel: linear-gradient(180deg, #1F1711, #18110C);
  --over: rgba(28,19,13,.86);
  --field: #0D0805;
  --key-bg: linear-gradient(180deg, #33281E, #261D15);
  --key-gloss: linear-gradient(180deg, rgba(255,235,205,.08), rgba(255,235,205,0) 60%);
  --go-bg: linear-gradient(180deg, #F7BA62, #E8922C);
  --knob: radial-gradient(circle at 45% 30%, rgba(255,230,190,.35), transparent 45%), radial-gradient(circle, #3A2C20, #1E160F);
  --panel-r: 20px;
  --field-r: 12px;
  --key-r: 14px;
  --panel-bw: 0px;
  --key-bw: 0px;
  --panel-edge: inset 0 1px 0 rgba(255,230,190,.06), 0 0 0 1px rgba(245,235,221,.06), 0 16px 36px rgba(0,0,0,.5);
  --panel-blur: none;
  --field-edge: inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(245,235,221,.06);
  --key-shadow: inset 0 1px 0 rgba(255,230,190,.12), 0 2px 0 #0A0604, 0 6px 14px rgba(0,0,0,.45);
  --key-shadow-down: inset 0 1px 0 rgba(255,230,190,.06), 0 0 0 #0A0604;
  --key-travel: 2px;
  --go-glow: 0 0 24px rgba(242,165,65,.35);
  --display: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display-w: 800;
  --display-s: 112%;
  --display-ls: -0.02em;
  --text-font: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --key-case: none;
  --key-size: 14.5px;
  --key-weight: 650;
  --key-ls: 0.01em;
  --key-stretch: 100%;
  --c1: #F07A4A;
  --c2: #F2A541;
  --c3: #F2D27A;
  --c4: #F5EBDD;
  --off: #2A2018;
  --led: #F2A541;
  --step-shape: bulb;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}
:root[data-look="warm"][data-scheme="light"] {
  color-scheme: light;
  --bg: #F6EFE6;
  --text: #2A1E14;
  --text-2: #7B6652;
  --text-3: #AD9A86;
  --rule: rgba(42,30,20,.12);
  --accent: #C46F15;
  --key-text: #2A1E14;
  --go-text: #FFFFFF;
  --ok: #3E9B57;
  --warn: #C98A12;
  --bad: #C8442F;
  --bg-glow: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(242,165,65,.18), transparent 70%);
  --panel: #FFFBF5;
  --over: rgba(255,251,245,.88);
  --field: #EFE5D8;
  --key-bg: linear-gradient(180deg, #FFFFFF, #F6EEE3);
  --key-gloss: none;
  --go-bg: linear-gradient(180deg, #E99E44, #C9741C);
  --knob: radial-gradient(circle at 45% 30%, #FFFFFF, #E8DCCB);
  --panel-edge: 0 1px 2px rgba(60,35,10,.06), 0 0 0 1px rgba(60,35,10,.06), 0 12px 28px rgba(60,35,10,.07);
  --field-edge: inset 0 1px 2px rgba(60,35,10,.08);
  --key-shadow: 0 1px 0 rgba(60,35,10,.12), 0 0 0 1px rgba(60,35,10,.08), 0 4px 10px rgba(60,35,10,.06);
  --key-shadow-down: 0 0 0 1px rgba(60,35,10,.1);
  --go-glow: 0 6px 16px rgba(201,116,28,.3);
  --c4: #7B6652;
  --off: #E6DACB;
}
@media (prefers-color-scheme: light) {
  :root[data-look="warm"]:not([data-scheme]) {
    color-scheme: light;
    --bg: #F6EFE6;
    --text: #2A1E14;
    --text-2: #7B6652;
    --text-3: #AD9A86;
    --rule: rgba(42,30,20,.12);
    --accent: #C46F15;
    --key-text: #2A1E14;
    --go-text: #FFFFFF;
    --ok: #3E9B57;
    --warn: #C98A12;
    --bad: #C8442F;
    --bg-glow: radial-gradient(ellipse 90% 50% at 50% -10%, rgba(242,165,65,.18), transparent 70%);
    --panel: #FFFBF5;
    --over: rgba(255,251,245,.88);
    --field: #EFE5D8;
    --key-bg: linear-gradient(180deg, #FFFFFF, #F6EEE3);
    --key-gloss: none;
    --go-bg: linear-gradient(180deg, #E99E44, #C9741C);
    --knob: radial-gradient(circle at 45% 30%, #FFFFFF, #E8DCCB);
    --panel-edge: 0 1px 2px rgba(60,35,10,.06), 0 0 0 1px rgba(60,35,10,.06), 0 12px 28px rgba(60,35,10,.07);
    --field-edge: inset 0 1px 2px rgba(60,35,10,.08);
    --key-shadow: 0 1px 0 rgba(60,35,10,.12), 0 0 0 1px rgba(60,35,10,.08), 0 4px 10px rgba(60,35,10,.06);
    --key-shadow-down: 0 0 0 1px rgba(60,35,10,.1);
    --go-glow: 0 6px 16px rgba(201,116,28,.3);
    --c4: #7B6652;
    --off: #E6DACB;
  }
}

:root[data-look="bold"] {
  /* ---- Bold: Loud and certain: black frames, hard shadows, square corners, one yellow. ---- */
  color-scheme: light;
  --bg: #FFFFFF;
  --text: #0A0A0A;
  --text-2: #3D3D3D;
  --text-3: #8A8A8A;
  --rule: #0A0A0A;
  --accent: #0A0A0A;
  --key-text: #0A0A0A;
  --go-text: #0A0A0A;
  --ok: #00A651;
  --warn: #FF8A00;
  --bad: #FF2D2D;
  --bg-glow: none;
  --panel: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(#0A0A0A, #0A0A0A) border-box;
  --over: rgba(255,255,255,.94);
  --field: #F2F2F2;
  --key-bg: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(#0A0A0A, #0A0A0A) border-box;
  --key-gloss: none;
  --go-bg: linear-gradient(#FFE500, #FFE500) padding-box, linear-gradient(#0A0A0A, #0A0A0A) border-box;
  --knob: conic-gradient(#0A0A0A 0 25%, #FFFFFF 0 50%, #0A0A0A 0 75%, #FFFFFF 0);
  --panel-r: 4px;
  --field-r: 2px;
  --key-r: 4px;
  --panel-bw: 2px;
  --key-bw: 2px;
  --panel-edge: 5px 5px 0 #0A0A0A;
  --panel-blur: none;
  --field-edge: inset 0 0 0 2px #0A0A0A;
  --key-shadow: 3px 3px 0 #0A0A0A;
  --key-shadow-down: 0 0 0 #0A0A0A;
  --key-travel: 3px;
  --go-glow: 0 0 0 transparent;
  --display: "Unbounded", "Archivo", Arial, sans-serif;
  --display-w: 800;
  --display-s: 100%;
  --display-ls: -0.03em;
  --text-font: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --key-case: uppercase;
  --key-size: 13px;
  --key-weight: 800;
  --key-ls: 0.04em;
  --key-stretch: 100%;
  --c1: #FF2D2D;
  --c2: #FFE500;
  --c3: #2D6BFF;
  --c4: #00A651;
  --off: #E6E6E6;
  --led: #FF2D2D;
  --step-shape: key;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}
:root[data-look="bold"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #0A0A0A;
  --text: #FFFFFF;
  --text-2: #C2C2C2;
  --text-3: #7A7A7A;
  --rule: #FFFFFF;
  --accent: #FFE500;
  --key-text: #FFFFFF;
  --go-text: #0A0A0A;
  --panel: linear-gradient(#141414, #141414) padding-box, linear-gradient(#FFFFFF, #FFFFFF) border-box;
  --over: rgba(10,10,10,.94);
  --field: #1E1E1E;
  --key-bg: linear-gradient(#141414, #141414) padding-box, linear-gradient(#FFFFFF, #FFFFFF) border-box;
  --go-bg: linear-gradient(#FFE500, #FFE500) padding-box, linear-gradient(#FFFFFF, #FFFFFF) border-box;
  --knob: conic-gradient(#FFE500 0 25%, #141414 0 50%, #FFE500 0 75%, #141414 0);
  --panel-edge: 5px 5px 0 #FFE500;
  --field-edge: inset 0 0 0 2px #FFFFFF;
  --key-shadow: 3px 3px 0 #FFFFFF;
  --key-shadow-down: 0 0 0 #FFFFFF;
  --off: #2A2A2A;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="bold"]:not([data-scheme]) {
    color-scheme: dark;
    --bg: #0A0A0A;
    --text: #FFFFFF;
    --text-2: #C2C2C2;
    --text-3: #7A7A7A;
    --rule: #FFFFFF;
    --accent: #FFE500;
    --key-text: #FFFFFF;
    --go-text: #0A0A0A;
    --panel: linear-gradient(#141414, #141414) padding-box, linear-gradient(#FFFFFF, #FFFFFF) border-box;
    --over: rgba(10,10,10,.94);
    --field: #1E1E1E;
    --key-bg: linear-gradient(#141414, #141414) padding-box, linear-gradient(#FFFFFF, #FFFFFF) border-box;
    --go-bg: linear-gradient(#FFE500, #FFE500) padding-box, linear-gradient(#FFFFFF, #FFFFFF) border-box;
    --knob: conic-gradient(#FFE500 0 25%, #141414 0 50%, #FFE500 0 75%, #141414 0);
    --panel-edge: 5px 5px 0 #FFE500;
    --field-edge: inset 0 0 0 2px #FFFFFF;
    --key-shadow: 3px 3px 0 #FFFFFF;
    --key-shadow-down: 0 0 0 #FFFFFF;
    --off: #2A2A2A;
  }
}

:root[data-look="glass"] {
  /* ---- Glass: Frosted glass over deep colour: see-through panels, pill keys, a violet-to-cyan glow. ---- */
  color-scheme: dark;
  --bg: #0B0A1C;
  --text: #F4F3FF;
  --text-2: #B4B0D8;
  --text-3: #6F6A99;
  --rule: rgba(255,255,255,.1);
  --accent: #A78BFA;
  --key-text: #F4F3FF;
  --go-text: #FFFFFF;
  --ok: #5EEAD4;
  --warn: #FCD34D;
  --bad: #FB7185;
  --bg-glow: radial-gradient(ellipse 70% 45% at 10% 0%, rgba(139,92,246,.45), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 40%, rgba(34,211,238,.28), transparent 70%), radial-gradient(ellipse 60% 40% at 30% 100%, rgba(236,72,153,.22), transparent 70%);
  --panel: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  --over: rgba(20,18,44,.55);
  --field: rgba(255,255,255,.07);
  --key-bg: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  --key-gloss: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 50%);
  --go-bg: linear-gradient(135deg, #8B5CF6, #22D3EE);
  --knob: radial-gradient(circle at 50% 25%, rgba(255,255,255,.5), rgba(255,255,255,.05) 55%), radial-gradient(circle, #2A2550, #120F2A);
  --panel-r: 24px;
  --field-r: 14px;
  --key-r: 999px;
  --panel-bw: 0px;
  --key-bw: 0px;
  --panel-edge: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.45);
  --panel-blur: blur(26px) saturate(160%);
  --field-edge: inset 0 0 0 1px rgba(255,255,255,.08);
  --key-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 20px rgba(0,0,0,.3);
  --key-shadow-down: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08);
  --key-travel: 1px;
  --go-glow: 0 8px 30px rgba(139,92,246,.45);
  --display: "Unbounded", "Archivo", Arial, sans-serif;
  --display-w: 600;
  --display-s: 100%;
  --display-ls: -0.02em;
  --text-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --key-case: none;
  --key-size: 15px;
  --key-weight: 600;
  --key-ls: 0em;
  --key-stretch: 100%;
  --c1: #A78BFA;
  --c2: #22D3EE;
  --c3: #F472B6;
  --c4: #F4F3FF;
  --off: rgba(255,255,255,.08);
  --led: #22D3EE;
  --step-shape: prism;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}
:root[data-look="glass"][data-scheme="light"] {
  color-scheme: light;
  --bg: #EEF0FF;
  --text: #17162E;
  --text-2: #5B5880;
  --text-3: #9A97BF;
  --rule: rgba(23,22,46,.1);
  --accent: #7C3AED;
  --key-text: #17162E;
  --ok: #0D9488;
  --warn: #B45309;
  --bad: #E11D48;
  --bg-glow: radial-gradient(ellipse 70% 45% at 10% 0%, rgba(139,92,246,.3), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 40%, rgba(34,211,238,.25), transparent 70%), radial-gradient(ellipse 60% 40% at 30% 100%, rgba(236,72,153,.18), transparent 70%);
  --panel: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
  --over: rgba(255,255,255,.55);
  --field: rgba(255,255,255,.6);
  --key-bg: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  --key-gloss: none;
  --knob: radial-gradient(circle at 50% 25%, #FFFFFF, #DCDDF5);
  --panel-edge: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(23,22,46,.06), 0 20px 50px rgba(60,50,140,.15);
  --field-edge: inset 0 0 0 1px rgba(23,22,46,.08);
  --key-shadow: 0 0 0 1px rgba(23,22,46,.08), 0 6px 16px rgba(60,50,140,.12);
  --key-shadow-down: 0 0 0 1px rgba(23,22,46,.1);
  --go-glow: 0 8px 26px rgba(124,58,237,.35);
  --c4: #17162E;
  --off: rgba(23,22,46,.08);
}
@media (prefers-color-scheme: light) {
  :root[data-look="glass"]:not([data-scheme]) {
    color-scheme: light;
    --bg: #EEF0FF;
    --text: #17162E;
    --text-2: #5B5880;
    --text-3: #9A97BF;
    --rule: rgba(23,22,46,.1);
    --accent: #7C3AED;
    --key-text: #17162E;
    --ok: #0D9488;
    --warn: #B45309;
    --bad: #E11D48;
    --bg-glow: radial-gradient(ellipse 70% 45% at 10% 0%, rgba(139,92,246,.3), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 40%, rgba(34,211,238,.25), transparent 70%), radial-gradient(ellipse 60% 40% at 30% 100%, rgba(236,72,153,.18), transparent 70%);
    --panel: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.45));
    --over: rgba(255,255,255,.55);
    --field: rgba(255,255,255,.6);
    --key-bg: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
    --key-gloss: none;
    --knob: radial-gradient(circle at 50% 25%, #FFFFFF, #DCDDF5);
    --panel-edge: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(23,22,46,.06), 0 20px 50px rgba(60,50,140,.15);
    --field-edge: inset 0 0 0 1px rgba(23,22,46,.08);
    --key-shadow: 0 0 0 1px rgba(23,22,46,.08), 0 6px 16px rgba(60,50,140,.12);
    --key-shadow-down: 0 0 0 1px rgba(23,22,46,.1);
    --go-glow: 0 8px 26px rgba(124,58,237,.35);
    --c4: #17162E;
    --off: rgba(23,22,46,.08);
  }
}

:root[data-look="neon"] {
  /* ---- Neon: The bar's signs come alive: deep night, hot pink and cyan tubes that glow. ---- */
  color-scheme: dark;
  --bg: #07060F;
  --text: #F7F2FF;
  --text-2: #A9A2C9;
  --text-3: #625C85;
  --rule: rgba(69,212,255,.16);
  --accent: #FF2E88;
  --key-text: #F7F2FF;
  --go-text: #FFFFFF;
  --ok: #3BF0A0;
  --warn: #FFD23F;
  --bad: #FF4D6D;
  --bg-glow: radial-gradient(ellipse 70% 40% at 0% 0%, rgba(255,46,136,.25), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 20%, rgba(69,212,255,.18), transparent 70%);
  --panel: linear-gradient(180deg, #110E22, #0B0918);
  --over: rgba(12,10,26,.84);
  --field: #05040C;
  --key-bg: linear-gradient(180deg, #1B1735, #120F26);
  --key-gloss: none;
  --go-bg: linear-gradient(180deg, #FF4FA0, #E0177A);
  --knob: radial-gradient(circle, #1B1735, #07060F);
  --panel-r: 16px;
  --field-r: 10px;
  --key-r: 10px;
  --panel-bw: 0px;
  --key-bw: 0px;
  --panel-edge: 0 0 0 1px rgba(69,212,255,.35), 0 0 22px rgba(69,212,255,.12), inset 0 0 22px rgba(69,212,255,.05);
  --panel-blur: none;
  --field-edge: inset 0 0 0 1px rgba(255,46,136,.25);
  --key-shadow: 0 0 0 1px rgba(69,212,255,.5), 0 0 14px rgba(69,212,255,.25);
  --key-shadow-down: 0 0 0 1px rgba(69,212,255,.8), 0 0 22px rgba(69,212,255,.45);
  --key-travel: 0px;
  --go-glow: 0 0 18px rgba(255,46,136,.65), 0 0 40px rgba(255,46,136,.3);
  --display: "Righteous", "Archivo", Arial, sans-serif;
  --display-w: 400;
  --display-s: 100%;
  --display-ls: 0.01em;
  --text-font: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --key-case: uppercase;
  --key-size: 12.5px;
  --key-weight: 700;
  --key-ls: 0.12em;
  --key-stretch: 88%;
  --c1: #FF2E88;
  --c2: #45D4FF;
  --c3: #FFD23F;
  --c4: #3BF0A0;
  --off: #16132B;
  --led: #45D4FF;
  --step-shape: tube;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}
:root[data-look="neon"][data-scheme="light"] {
  color-scheme: light;
  --bg: #F8F5FF;
  --text: #1A1530;
  --text-2: #5E5682;
  --text-3: #9C95BD;
  --rule: rgba(26,21,48,.1);
  --accent: #E0177A;
  --key-text: #1A1530;
  --ok: #0E9F6E;
  --warn: #C98A00;
  --bg-glow: radial-gradient(ellipse 70% 40% at 0% 0%, rgba(255,46,136,.14), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 20%, rgba(69,212,255,.16), transparent 70%);
  --panel: #FFFFFF;
  --over: rgba(255,255,255,.88);
  --field: #F0ECFA;
  --key-bg: #FFFFFF;
  --knob: radial-gradient(circle, #FFFFFF, #E6E0F5);
  --panel-edge: 0 0 0 1px rgba(224,23,122,.18), 0 10px 30px rgba(120,40,140,.08);
  --field-edge: inset 0 0 0 1px rgba(26,21,48,.08);
  --key-shadow: 0 0 0 1px rgba(26,21,48,.12), 0 3px 8px rgba(120,40,140,.08);
  --key-shadow-down: 0 0 0 1px rgba(224,23,122,.5);
  --go-glow: 0 6px 18px rgba(224,23,122,.35);
  --c2: #0EA5D8;
  --off: #E6E0F5;
}
@media (prefers-color-scheme: light) {
  :root[data-look="neon"]:not([data-scheme]) {
    color-scheme: light;
    --bg: #F8F5FF;
    --text: #1A1530;
    --text-2: #5E5682;
    --text-3: #9C95BD;
    --rule: rgba(26,21,48,.1);
    --accent: #E0177A;
    --key-text: #1A1530;
    --ok: #0E9F6E;
    --warn: #C98A00;
    --bg-glow: radial-gradient(ellipse 70% 40% at 0% 0%, rgba(255,46,136,.14), transparent 70%), radial-gradient(ellipse 60% 40% at 100% 20%, rgba(69,212,255,.16), transparent 70%);
    --panel: #FFFFFF;
    --over: rgba(255,255,255,.88);
    --field: #F0ECFA;
    --key-bg: #FFFFFF;
    --knob: radial-gradient(circle, #FFFFFF, #E6E0F5);
    --panel-edge: 0 0 0 1px rgba(224,23,122,.18), 0 10px 30px rgba(120,40,140,.08);
    --field-edge: inset 0 0 0 1px rgba(26,21,48,.08);
    --key-shadow: 0 0 0 1px rgba(26,21,48,.12), 0 3px 8px rgba(120,40,140,.08);
    --key-shadow-down: 0 0 0 1px rgba(224,23,122,.5);
    --go-glow: 0 6px 18px rgba(224,23,122,.35);
    --c2: #0EA5D8;
    --off: #E6E0F5;
  }
}

:root[data-look="soft"] {
  /* ---- Soft: Friendly and light: very round, pastel, gentle shadows, rounded type. ---- */
  color-scheme: light;
  --bg: #F4F1FB;
  --text: #24203A;
  --text-2: #6E6890;
  --text-3: #A8A3C4;
  --rule: rgba(36,32,58,.08);
  --accent: #7C6CF2;
  --key-text: #24203A;
  --go-text: #FFFFFF;
  --ok: #3DBE8B;
  --warn: #F2A93B;
  --bad: #EF6A7A;
  --bg-glow: radial-gradient(ellipse 80% 40% at 50% -5%, rgba(124,108,242,.14), transparent 70%);
  --panel: #FFFFFF;
  --over: rgba(255,255,255,.85);
  --field: #F1EEF9;
  --key-bg: #F1EEFC;
  --key-gloss: none;
  --go-bg: linear-gradient(180deg, #8E80F6, #7262EE);
  --knob: radial-gradient(circle at 50% 30%, #FFFFFF, #E9E5FA);
  --panel-r: 28px;
  --field-r: 18px;
  --key-r: 999px;
  --panel-bw: 0px;
  --key-bw: 0px;
  --panel-edge: 0 10px 30px rgba(80,60,160,.08), 0 1px 2px rgba(80,60,160,.05);
  --panel-blur: none;
  --field-edge: none;
  --key-shadow: none;
  --key-shadow-down: inset 0 2px 4px rgba(80,60,160,.12);
  --key-travel: 0px;
  --go-glow: 0 8px 20px rgba(124,108,242,.35);
  --display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display-w: 700;
  --display-s: 100%;
  --display-ls: -0.01em;
  --text-font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --key-case: none;
  --key-size: 15px;
  --key-weight: 600;
  --key-ls: 0em;
  --key-stretch: 100%;
  --c1: #EF6A7A;
  --c2: #F2A93B;
  --c3: #7C6CF2;
  --c4: #3DBE8B;
  --off: #E7E3F5;
  --led: #7C6CF2;
  --step-shape: key;
  --bg-size: auto;
  --bg-motion: none;
  --title-fill: none;
  --title-ink: currentColor;
  --title-glow: transparent;
  --title-motion: none;
  --title-speed: 6s;
}
:root[data-look="soft"][data-scheme="dark"] {
  color-scheme: dark;
  --bg: #15131F;
  --text: #EEEBFA;
  --text-2: #A49FC2;
  --text-3: #6C6789;
  --rule: rgba(238,235,250,.08);
  --accent: #9D90FF;
  --key-text: #EEEBFA;
  --bg-glow: radial-gradient(ellipse 80% 40% at 50% -5%, rgba(157,144,255,.16), transparent 70%);
  --panel: #1F1C2E;
  --over: rgba(31,28,46,.85);
  --field: #18162A;
  --key-bg: #2B2742;
  --go-bg: linear-gradient(180deg, #A79BFF, #8A7CF8);
  --knob: radial-gradient(circle at 50% 30%, #3A3556, #1F1C2E);
  --panel-edge: 0 10px 30px rgba(0,0,0,.35);
  --key-shadow-down: inset 0 2px 4px rgba(0,0,0,.35);
  --go-glow: 0 8px 20px rgba(157,144,255,.3);
  --c3: #9D90FF;
  --off: #2B2742;
  --led: #9D90FF;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="soft"]:not([data-scheme]) {
    color-scheme: dark;
    --bg: #15131F;
    --text: #EEEBFA;
    --text-2: #A49FC2;
    --text-3: #6C6789;
    --rule: rgba(238,235,250,.08);
    --accent: #9D90FF;
    --key-text: #EEEBFA;
    --bg-glow: radial-gradient(ellipse 80% 40% at 50% -5%, rgba(157,144,255,.16), transparent 70%);
    --panel: #1F1C2E;
    --over: rgba(31,28,46,.85);
    --field: #18162A;
    --key-bg: #2B2742;
    --go-bg: linear-gradient(180deg, #A79BFF, #8A7CF8);
    --knob: radial-gradient(circle at 50% 30%, #3A3556, #1F1C2E);
    --panel-edge: 0 10px 30px rgba(0,0,0,.35);
    --key-shadow-down: inset 0 2px 4px rgba(0,0,0,.35);
    --go-glow: 0 8px 20px rgba(157,144,255,.3);
    --c3: #9D90FF;
    --off: #2B2742;
    --led: #9D90FF;
  }
}