/* TypingTutor.Online v17.10.285 — Keyboard-only Premium palettes.
   Scoped to the lesson's keyboard; typography, finger SVG geometry and the
   rest of the page follow existing light/dark settings. No remote assets. */
.tto-palette-section { margin:14px 0 6px; padding:13px; border:1px solid var(--border, #cbd5e1); border-radius:12px; }
.tto-palette-heading {display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.tto-palette-heading strong{font-size:12px;color:var(--text,#182339)}
.tto-palette-heading small,.tto-palette-feedback{font-size:11px;color:var(--text-muted,#64748b);line-height:1.55}
.tto-palette-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tto-palette-choice{position:relative;display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;min-width:0;padding:9px;border:1px solid var(--border,#cbd5e1);border-radius:10px;background:var(--surface-alt,#f8fafc);color:var(--text,#182339);font:inherit;cursor:pointer}
.tto-palette-choice:hover{border-color:var(--primary,#2563eb)}
.tto-palette-choice:focus-visible{outline:3px solid var(--primary,#2563eb);outline-offset:2px}
.tto-palette-choice[aria-pressed="true"]{border:2px solid var(--primary,#2563eb);padding:8px}
.tto-palette-preview{display:flex;align-items:center;justify-content:center;gap:3px;padding:5px;width:100%;height:32px;background:var(--swatch-base);border-radius:6px}
.tto-palette-preview i{width:25%;height:18px;border:1px solid #94a3b8;border-radius:4px;background:var(--swatch-key)}
.tto-palette-preview i:last-child{background:var(--swatch-active);border-color:transparent}
.tto-palette-name{font-size:11px;font-weight:700;white-space:normal}
.tto-palette-tier{font-size:10px;color:var(--text-muted,#64748b)}
.tto-palette-tier[data-premium-label="true"]{color:var(--primary,#2563eb);font-weight:750}
.tto-palette-choice[data-premium-locked="true"] .tto-palette-preview{opacity:.7}
.tto-palette-feedback{min-height:1.3em;margin:10px 0 0}
@media(max-width:600px){.tto-palette-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Explicit palettes use the same four key surfaces, independent of site theme.
   'auto' omits overrides to preserve the longstanding light/dark keyboard. */
html[data-keyboard-palette="classic"] #keyboardContainer{--pk-base:#f1f5fa;--pk-key:#ffffff;--pk-border:#cbd5e1;--pk-ink:#172338;--pk-secondary:#536176;--pk-highlight:#2563eb;--pk-hi-ink:#fff;--pk-home:#e2edff;--pk-shadow:rgba(21,41,76,.09)}
html[data-keyboard-palette="midnight"] #keyboardContainer{--pk-base:#101929;--pk-key:#24344b;--pk-border:#52637b;--pk-ink:#f1f5fb;--pk-secondary:#c0ccdc;--pk-highlight:#3169e8;--pk-hi-ink:#fff;--pk-home:#344866;--pk-shadow:rgba(0,0,0,.3)}
html[data-keyboard-palette="ocean"] #keyboardContainer{--pk-base:#dbeeff;--pk-key:#f5fbff;--pk-border:#8fbfec;--pk-ink:#184a78;--pk-secondary:#416486;--pk-highlight:#1269d3;--pk-hi-ink:#fff;--pk-home:#add7fa;--pk-shadow:rgba(24,74,120,.12)}
html[data-keyboard-palette="mint"] #keyboardContainer{--pk-base:#e1f6ed;--pk-key:#f8fffb;--pk-border:#a1cdb8;--pk-ink:#205343;--pk-secondary:#496a5c;--pk-highlight:#087e5b;--pk-hi-ink:#fff;--pk-home:#b8e9d1;--pk-shadow:rgba(32,83,67,.11)}
html[data-keyboard-palette="lavender"] #keyboardContainer{--pk-base:#eee8ff;--pk-key:#fcfaff;--pk-border:#c3b5e9;--pk-ink:#473477;--pk-secondary:#6c6090;--pk-highlight:#6d35c6;--pk-hi-ink:#fff;--pk-home:#d9cbfb;--pk-shadow:rgba(71,52,119,.11)}
html[data-keyboard-palette="graphite"] #keyboardContainer{--pk-base:#141b29;--pk-key:#283448;--pk-border:#627089;--pk-ink:#f3f6fb;--pk-secondary:#c4cddd;--pk-highlight:#f0ba42;--pk-hi-ink:#192232;--pk-home:#47465a;--pk-shadow:rgba(0,0,0,.36)}

html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer{background:var(--pk-base)!important;border-color:var(--pk-border)!important;color:var(--pk-ink)!important;color-scheme:normal;}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key:not(.key-next):not(.key-correct):not(.key-wrong){background:var(--pk-key)!important;border-color:var(--pk-border)!important;color:var(--pk-ink)!important;box-shadow:0 2px 5px var(--pk-shadow)!important;text-shadow:none!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key:not(.key-next):not(.key-correct):not(.key-wrong) .key-primary{color:var(--pk-ink)!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key:not(.key-next):not(.key-correct):not(.key-wrong) .key-secondary{color:var(--pk-secondary)!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-next{background:var(--pk-highlight)!important;border-color:var(--pk-highlight)!important;color:var(--pk-hi-ink)!important;box-shadow:0 0 0 3px var(--pk-shadow)!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-next .key-primary,html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-next .key-secondary{color:var(--pk-hi-ink)!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-correct{background:#d8f6df!important;border-color:#249048!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-wrong{background:#ffe3e3!important;border-color:#d63838!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer :is(.key-correct,.key-wrong) :is(.key-primary,.key-secondary){color:#172338!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer :is(.key-next,.key-correct,.key-wrong) .home-bump{background:currentColor!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .home-bump{background:var(--pk-secondary)!important}
html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key.home:not(.key-next):not(.key-correct):not(.key-wrong){background:var(--pk-home)!important}
html[data-high-contrast="true"][data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key{outline:1px solid var(--pk-border)}