/* Expenity themes. A theme is a set of tokens (colors, shapes, type, borders, glow) plus a little decoration.
   The default Emerald theme lives in style.css; every other theme sets data-skin on <html>. Fonts are system stacks only. */
:root[data-skin] { --serif: "Noto Serif", Georgia, "Times New Roman", serif; --hand: "Alegreya", "Noto Serif", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono", "DejaVu Sans Mono", monospace; --round: "Comfortaa", "Noto Sans", ui-sans-serif, system-ui, sans-serif; }

/* Shared tint pairs for dark themes (colored icon circles) */
:root[data-skin="terminal"], :root[data-skin="synthwave"], :root[data-skin="blueprint"], :root[data-skin="oled"], :root[data-skin="chalk"], :root[data-skin="minimal"][data-theme="dark"] { color-scheme: dark; }
:root[data-skin="terminal"] .tint-blue, :root[data-skin="synthwave"] .tint-blue, :root[data-skin="blueprint"] .tint-blue, :root[data-skin="oled"] .tint-blue, :root[data-skin="chalk"] .tint-blue { --tbg: #1b2a4a; --tfg: #8ab4ff; }
:root[data-skin="terminal"] .tint-amber, :root[data-skin="synthwave"] .tint-amber, :root[data-skin="blueprint"] .tint-amber, :root[data-skin="oled"] .tint-amber, :root[data-skin="chalk"] .tint-amber { --tbg: #3a2d10; --tfg: #ffc861; }
:root[data-skin="terminal"] .tint-purple, :root[data-skin="synthwave"] .tint-purple, :root[data-skin="blueprint"] .tint-purple, :root[data-skin="oled"] .tint-purple, :root[data-skin="chalk"] .tint-purple { --tbg: #2c2146; --tfg: #c4a5ff; }
:root[data-skin="terminal"] .tint-teal, :root[data-skin="synthwave"] .tint-teal, :root[data-skin="blueprint"] .tint-teal, :root[data-skin="oled"] .tint-teal, :root[data-skin="chalk"] .tint-teal { --tbg: #12332e; --tfg: #5eead4; }
:root[data-skin="terminal"] .tint-red, :root[data-skin="synthwave"] .tint-red, :root[data-skin="blueprint"] .tint-red, :root[data-skin="oled"] .tint-red, :root[data-skin="chalk"] .tint-red { --tbg: #3b1d1b; --tfg: #ff9a92; }
:root[data-skin="terminal"] .tint-green, :root[data-skin="synthwave"] .tint-green, :root[data-skin="blueprint"] .tint-green, :root[data-skin="oled"] .tint-green, :root[data-skin="chalk"] .tint-green { --tbg: #16341f; --tfg: #6ee79a; }
:root[data-skin="terminal"] .tint-pink, :root[data-skin="synthwave"] .tint-pink, :root[data-skin="blueprint"] .tint-pink, :root[data-skin="oled"] .tint-pink, :root[data-skin="chalk"] .tint-pink { --tbg: #3b1a29; --tfg: #ff9dc4; }
:root[data-skin="terminal"] .tint-gray, :root[data-skin="synthwave"] .tint-gray, :root[data-skin="blueprint"] .tint-gray, :root[data-skin="oled"] .tint-gray, :root[data-skin="chalk"] .tint-gray { --tbg: #26302d; --tfg: #a9b8b2; }
:root[data-skin="minimal"][data-theme="dark"] .tint-blue, :root[data-skin="minimal"][data-theme="dark"] .tint-amber, :root[data-skin="minimal"][data-theme="dark"] .tint-purple, :root[data-skin="minimal"][data-theme="dark"] .tint-teal, :root[data-skin="minimal"][data-theme="dark"] .tint-red, :root[data-skin="minimal"][data-theme="dark"] .tint-green, :root[data-skin="minimal"][data-theme="dark"] .tint-pink, :root[data-skin="minimal"][data-theme="dark"] .tint-gray { --tbg: #1c1c1c; --tfg: #e5e5e5; }

/* 1. Minimal: monochrome, hairlines, no shadows, plenty of white space */
:root[data-skin="minimal"] { --bg: #fafafa; --surface: #fff; --ink: #111; --ink-2: #333; --muted: #6b6b6b; --line: #e6e6e6; --accent: #111; --accent-2: #111; --accent-ink: #fff; --accent-soft: #f0f0f0; --late: #c62828; --late-soft: #fdeaea; --ok: #111; --shadow: none; --rk: 0.3; --bw: 1px; --card-line: #e6e6e6; --brand: #111; --brand-ink: #fff; --brand-glow: none; --fab-bg: #111; --hero-bg: #111; --hero-ink: #fff; --bar-in: #111; --bar-out: #9a9a9a; --font-head: var(--font); }
:root[data-skin="minimal"] .tint-blue, :root[data-skin="minimal"] .tint-amber, :root[data-skin="minimal"] .tint-purple, :root[data-skin="minimal"] .tint-teal, :root[data-skin="minimal"] .tint-red, :root[data-skin="minimal"] .tint-green, :root[data-skin="minimal"] .tint-pink, :root[data-skin="minimal"] .tint-gray { --tbg: #f0f0f0; --tfg: #111; }
:root[data-skin="minimal"][data-theme="dark"] { --bg: #0c0c0c; --surface: #141414; --ink: #f2f2f2; --ink-2: #cfcfcf; --muted: #8a8a8a; --line: #262626; --accent: #f2f2f2; --accent-2: #f2f2f2; --accent-ink: #0c0c0c; --accent-soft: #1c1c1c; --late: #ff7b73; --late-soft: #2a1414; --ok: #f2f2f2; --card-line: #262626; --brand: #f2f2f2; --brand-ink: #0c0c0c; --fab-bg: #f2f2f2; --hero-bg: #1c1c1c; --hero-ink: #f2f2f2; --bar-in: #f2f2f2; --bar-out: #6b6b6b; }
@media (prefers-color-scheme: dark) { :root[data-skin="minimal"]:not([data-theme="light"]) { --bg: #0c0c0c; --surface: #141414; --ink: #f2f2f2; --ink-2: #cfcfcf; --muted: #8a8a8a; --line: #262626; --accent: #f2f2f2; --accent-2: #f2f2f2; --accent-ink: #0c0c0c; --accent-soft: #1c1c1c; --late: #ff7b73; --late-soft: #2a1414; --ok: #f2f2f2; --card-line: #262626; --brand: #f2f2f2; --brand-ink: #0c0c0c; --fab-bg: #f2f2f2; --hero-bg: #1c1c1c; --hero-ink: #f2f2f2; --bar-in: #f2f2f2; --bar-out: #6b6b6b; color-scheme: dark; } :root[data-skin="minimal"]:not([data-theme="light"]) .tint-blue, :root[data-skin="minimal"]:not([data-theme="light"]) .tint-amber, :root[data-skin="minimal"]:not([data-theme="light"]) .tint-purple, :root[data-skin="minimal"]:not([data-theme="light"]) .tint-teal, :root[data-skin="minimal"]:not([data-theme="light"]) .tint-red, :root[data-skin="minimal"]:not([data-theme="light"]) .tint-green, :root[data-skin="minimal"]:not([data-theme="light"]) .tint-pink, :root[data-skin="minimal"]:not([data-theme="light"]) .tint-gray { --tbg: #1c1c1c; --tfg: #e5e5e5; } }

/* 2. Paper notes: cream paper, ruled lines, handwriting, sticky-note hero with tape, slight tilts */
:root[data-skin="paper"] { --bg: #f4ecd8; --bg-img: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(80, 120, 190, 0.22) 31px 32px); --surface: #fffdf3; --ink: #2b2a40; --ink-2: #3f3d5c; --muted: #76715f; --line: #e3d7b4; --accent: #2f4b9a; --accent-2: #243b80; --accent-ink: #fff; --accent-soft: #e9eefb; --late: #b3261e; --late-soft: #fbe3df; --warn: #c27c00; --ok: #2d7a46; --shadow: 2px 3px 0 rgba(90, 70, 20, 0.12); --rk: 0.5; --bw: 1px; --card-line: #e3d7b4; --font-head: var(--hand); --brand: #2f4b9a; --brand-ink: #fff; --brand-glow: 2px 3px 0 rgba(30, 40, 90, 0.35); --fab-bg: #2f4b9a; --hero-bg: #ffe27a; --hero-ink: #3b2f00; --bar-in: #2d7a46; --bar-out: #c27c00; }
:root[data-skin="paper"] .tint-blue, :root[data-skin="paper"] .tint-purple, :root[data-skin="paper"] .tint-teal, :root[data-skin="paper"] .tint-green, :root[data-skin="paper"] .tint-gray { --tbg: #efe6c8; --tfg: #2f4b9a; } :root[data-skin="paper"] .tint-amber { --tbg: #ffe9a8; --tfg: #7a4a00; } :root[data-skin="paper"] .tint-red, :root[data-skin="paper"] .tint-pink { --tbg: #f8d9d4; --tfg: #a3261e; }
:root[data-skin="paper"] .hero { position: relative; transform: rotate(-0.7deg); box-shadow: 3px 5px 0 rgba(90, 70, 20, 0.18); border: 0; }
:root[data-skin="paper"] .hero::before { content: ""; position: absolute; left: 50%; top: -11px; width: 84px; height: 22px; margin-left: -42px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.08); transform: rotate(2deg); }
:root[data-skin="paper"] .hero > b { font-family: var(--hand); }
:root[data-skin="paper"] .card:nth-of-type(odd), :root[data-skin="paper"] .promo:nth-of-type(odd) { transform: rotate(-0.35deg); } :root[data-skin="paper"] .card:nth-of-type(even), :root[data-skin="paper"] .promo:nth-of-type(even) { transform: rotate(0.3deg); }
:root[data-skin="paper"] .appbar, :root[data-skin="paper"] .tabbar, :root[data-skin="paper"] .rail { background: #fffdf3; }

/* 3. Ledger: accounting book, serif type, double rules, green-tinted paper */
:root[data-skin="ledger"] { --bg: #e9eedd; --bg-img: repeating-linear-gradient(to right, transparent 0 63px, rgba(70, 110, 70, 0.1) 63px 64px); --surface: #fafcf2; --ink: #1c2a1c; --ink-2: #2c402c; --muted: #5d7358; --line: #b9c7a4; --accent: #1f5d3a; --accent-2: #174a2d; --accent-ink: #fff; --accent-soft: #e0ecd2; --late: #a32a1a; --late-soft: #f6e2dc; --warn: #a56a00; --ok: #1f5d3a; --shadow: none; --rk: 0.2; --bw: 3px; --bs: double; --card-line: #8aa07a; --font: var(--serif); --font-head: var(--serif); --brand: #1f5d3a; --brand-ink: #f6f3dc; --brand-glow: none; --fab-bg: #1f5d3a; --hero-bg: #1f4d34; --hero-ink: #f6f3dc; --bar-in: #1f5d3a; --bar-out: #a56a00; }
:root[data-skin="ledger"] .tint-blue, :root[data-skin="ledger"] .tint-purple, :root[data-skin="ledger"] .tint-teal, :root[data-skin="ledger"] .tint-green, :root[data-skin="ledger"] .tint-gray { --tbg: #dfe9cf; --tfg: #1f5d3a; } :root[data-skin="ledger"] .tint-amber { --tbg: #f0e3bd; --tfg: #7a4a00; } :root[data-skin="ledger"] .tint-red, :root[data-skin="ledger"] .tint-pink { --tbg: #f1d9d2; --tfg: #8f2a1a; }
:root[data-skin="ledger"] .hero > b, :root[data-skin="ledger"] .big, :root[data-skin="ledger"] .amt { font-variant-numeric: tabular-nums lining-nums; }
:root[data-skin="ledger"] .list > li, :root[data-skin="ledger"] .sw { border-bottom: 1px solid #b9c7a4; }
:root[data-skin="ledger"] h1, :root[data-skin="ledger"] h2 { border-bottom: 1px solid var(--line); padding-bottom: 4px; }

/* 4. Retro terminal: green on black, monospace, scanlines, blinking cursor */
:root[data-skin="terminal"] { --bg: #030803; --surface: #071307; --ink: #36ff6d; --ink-2: #2bd95a; --muted: #1fa347; --line: #12501d; --accent: #36ff6d; --accent-2: #36ff6d; --accent-ink: #021002; --accent-soft: #0c2a12; --late: #ff5a4f; --late-soft: #2a0d0b; --warn: #ffb000; --ok: #36ff6d; --shadow: none; --rk: 0; --bw: 1px; --card-line: #12501d; --glow: 0 0 14px rgba(54, 255, 109, 0.22); --font: var(--mono); --font-head: var(--mono); --brand: #36ff6d; --brand-ink: #021002; --brand-glow: 0 0 16px rgba(54, 255, 109, 0.5); --fab-bg: #36ff6d; --hero-bg: #071307; --hero-ink: #36ff6d; --bar-in: #36ff6d; --bar-out: #ffb000; }
:root[data-skin="terminal"] body { text-shadow: 0 0 6px rgba(54, 255, 109, 0.35); }
:root[data-skin="terminal"] body::after { content: ""; position: fixed; inset: 0; z-index: 400; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.22) 2px 3px); }
:root[data-skin="terminal"] .hero { border: 1px solid #36ff6d; }
:root[data-skin="terminal"] .ab-title::after { content: "_"; margin-left: 2px; animation: cursor 1s steps(1) infinite; } @keyframes cursor { 50% { opacity: 0; } }
:root[data-skin="terminal"] .tint-blue, :root[data-skin="terminal"] .tint-amber, :root[data-skin="terminal"] .tint-purple, :root[data-skin="terminal"] .tint-teal, :root[data-skin="terminal"] .tint-green, :root[data-skin="terminal"] .tint-pink, :root[data-skin="terminal"] .tint-gray { --tbg: #0c2a12; --tfg: #36ff6d; } :root[data-skin="terminal"] .tint-red { --tbg: #2a0d0b; --tfg: #ff5a4f; }

/* 5. 80s synthwave: dark purple, neon pink and cyan, glow, a grid horizon */
:root[data-skin="synthwave"] { --bg: #120726; --bg-img: linear-gradient(to bottom, rgba(18, 7, 38, 0) 55%, rgba(255, 62, 165, 0.25) 100%), repeating-linear-gradient(to right, rgba(45, 226, 230, 0.12) 0 1px, transparent 1px 38px), repeating-linear-gradient(to bottom, rgba(45, 226, 230, 0.12) 0 1px, transparent 1px 38px); --surface: #1f0f45; --ink: #fbeaff; --ink-2: #e2c9f7; --muted: #aa8fd6; --line: #3d2278; --accent: #ff3ea5; --accent-2: #2de2e6; --accent-ink: #19052e; --accent-soft: #2f1560; --late: #ff6b6b; --late-soft: #3a1030; --warn: #ffd23f; --ok: #2de2e6; --shadow: 0 10px 30px -14px rgba(255, 62, 165, 0.5); --rk: 1; --bw: 1px; --card-line: #4a2a8f; --glow: 0 0 18px rgba(255, 62, 165, 0.18); --font-head: var(--font); --brand: linear-gradient(90deg, #ff3ea5, #ff6bd0); --brand-ink: #1a0630; --brand-glow: 0 0 20px rgba(255, 62, 165, 0.6); --fab-bg: linear-gradient(135deg, #ff3ea5, #ff6bd0); --hero-bg: linear-gradient(135deg, #e0218d 0%, #7a2cff 60%, #4a2fb8 100%); --hero-ink: #fff; --bar-in: #2de2e6; --bar-out: #ff3ea5; }
:root[data-skin="synthwave"] h1, :root[data-skin="synthwave"] .ab-title { text-shadow: 0 0 14px rgba(45, 226, 230, 0.5); }
:root[data-skin="synthwave"] .appbar, :root[data-skin="synthwave"] .tabbar, :root[data-skin="synthwave"] .rail { background: rgba(31, 15, 69, 0.92); }

/* 6. Blueprint: blue drawing paper, white line art, dashed borders, grid */
:root[data-skin="blueprint"] { --bg: #0d3b82; --bg-img: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 24px), repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 24px), repeating-linear-gradient(to right, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 120px), repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 120px); --surface: #11449a; --ink: #f0f7ff; --ink-2: #d4e6ff; --muted: #a3c4f0; --line: rgba(255, 255, 255, 0.35); --accent: #ffffff; --accent-2: #bfe0ff; --accent-ink: #0d3b82; --accent-soft: rgba(255, 255, 255, 0.14); --late: #ffb4a8; --late-soft: rgba(255, 120, 100, 0.2); --warn: #ffe08a; --ok: #bff5d0; --shadow: none; --rk: 0.25; --bw: 1.5px; --bs: dashed; --card-line: rgba(255, 255, 255, 0.55); --font-head: var(--mono); --brand: #fff; --brand-ink: #0d3b82; --brand-glow: none; --fab-bg: #fff; --hero-bg: #124a9c; --hero-ink: #fff; --bar-in: #bff5d0; --bar-out: #ffe08a; }
:root[data-skin="blueprint"] .tint-blue, :root[data-skin="blueprint"] .tint-amber, :root[data-skin="blueprint"] .tint-purple, :root[data-skin="blueprint"] .tint-teal, :root[data-skin="blueprint"] .tint-green, :root[data-skin="blueprint"] .tint-pink, :root[data-skin="blueprint"] .tint-gray, :root[data-skin="blueprint"] .tint-red { --tbg: rgba(255, 255, 255, 0.14); --tfg: #fff; }
:root[data-skin="blueprint"] .appbar, :root[data-skin="blueprint"] .tabbar, :root[data-skin="blueprint"] .rail { background: #0d3b82; }
:root[data-skin="blueprint"] .hero { border: 1.5px dashed #fff; }

/* 7. Pastel candy: soft pastels, very round, playful */
:root[data-skin="candy"] { --bg: #fff1f8; --surface: #ffffff; --ink: #4a2a5c; --ink-2: #6a4a7e; --muted: #8e74a2; --line: #f6d3e8; --accent: #ff6fb0; --accent-2: #d6428a; --accent-ink: #fff; --accent-soft: #ffe0f0; --late: #e5484d; --late-soft: #ffe3e4; --warn: #f5a524; --ok: #29b583; --shadow: 0 10px 24px -12px rgba(255, 111, 176, 0.55); --rk: 1.5; --bw: 3px; --card-line: #ffe0f0; --font: var(--round); --font-head: var(--round); --brand: linear-gradient(135deg, #ff8fc3, #ffb48a); --brand-ink: #4a2a5c; --brand-glow: 0 10px 20px -8px rgba(255, 111, 176, 0.8); --fab-bg: linear-gradient(135deg, #ff8fc3, #ffb48a); --hero-bg: linear-gradient(135deg, #ff9ecf 0%, #b69cff 100%); --hero-ink: #3b1d4d; --bar-in: #5fd6b0; --bar-out: #ff9ecf; }
:root[data-skin="candy"] .tint-blue { --tbg: #dbe8ff; --tfg: #3b6fe0; } :root[data-skin="candy"] .tint-amber { --tbg: #ffecc7; --tfg: #b06a00; } :root[data-skin="candy"] .tint-purple { --tbg: #ecdfff; --tfg: #7d4fd6; } :root[data-skin="candy"] .tint-teal { --tbg: #d0f5ec; --tfg: #138a73; } :root[data-skin="candy"] .tint-green { --tbg: #d6f7df; --tfg: #1f9a4d; } :root[data-skin="candy"] .tint-pink { --tbg: #ffdcec; --tfg: #d6428a; } :root[data-skin="candy"] .tint-red { --tbg: #ffdede; --tfg: #d23a3a; }
:root[data-skin="candy"] .btn, :root[data-skin="candy"] .chip { font-weight: 800; }

/* 8. Midnight OLED: true black, thin accents, high contrast */
:root[data-skin="oled"] { --bg: #000; --surface: #0a0a0a; --ink: #fff; --ink-2: #e6e6e6; --muted: #9a9a9a; --line: #1e1e1e; --accent: #19e6a3; --accent-2: #19e6a3; --accent-ink: #00110b; --accent-soft: #08241b; --late: #ff6b6b; --late-soft: #2a0f0f; --warn: #ffc247; --ok: #19e6a3; --shadow: none; --rk: 0.9; --bw: 1px; --card-line: #1e1e1e; --brand: #19e6a3; --brand-ink: #00110b; --brand-glow: none; --fab-bg: #19e6a3; --hero-bg: #0a0a0a; --hero-ink: #fff; --bar-in: #19e6a3; --bar-out: #ffc247; }
:root[data-skin="oled"] .hero { border: 1px solid #19e6a3; } :root[data-skin="oled"] .hero > b { color: #19e6a3; }
:root[data-skin="oled"] .appbar, :root[data-skin="oled"] .tabbar, :root[data-skin="oled"] .rail { background: #000; }

/* 9. Glass: frosted translucent cards over a soft gradient */
:root[data-skin="glass"] { --bg: #c9d6ff; --bg-img: radial-gradient(circle at 15% 10%, #ffd1f3 0, transparent 45%), radial-gradient(circle at 85% 20%, #b8f0ff 0, transparent 40%), radial-gradient(circle at 50% 100%, #d9c8ff 0, transparent 55%); --surface: rgba(255, 255, 255, 0.55); --ink: #1d2142; --ink-2: #353a63; --muted: #5d6390; --line: rgba(255, 255, 255, 0.7); --accent: #5757d9; --accent-2: #4040b8; --accent-ink: #fff; --accent-soft: rgba(255, 255, 255, 0.6); --late: #d6403a; --late-soft: rgba(255, 255, 255, 0.7); --warn: #c77700; --ok: #1f9a6b; --shadow: 0 10px 30px -14px rgba(60, 60, 140, 0.4); --rk: 1.2; --bw: 1px; --card-line: rgba(255, 255, 255, 0.85); --brand: linear-gradient(135deg, #7a7af0, #b265e6); --brand-ink: #fff; --brand-glow: 0 10px 24px -10px rgba(98, 80, 220, 0.7); --fab-bg: linear-gradient(135deg, #7a7af0, #b265e6); --hero-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.92), rgba(236, 72, 153, 0.85)); --hero-ink: #fff; --bar-in: #38b88a; --bar-out: #ec7aa8; }
:root[data-skin="glass"] .card, :root[data-skin="glass"] .list, :root[data-skin="glass"] .wc, :root[data-skin="glass"] .promo, :root[data-skin="glass"] .profile { -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--card-line); }
:root[data-skin="glass"] .sheet, :root[data-skin="glass"] .tabbar, :root[data-skin="glass"] .rail, :root[data-skin="glass"] .appbar { background: rgba(255, 255, 255, 0.82); }
:root[data-skin="glass"] .tint-blue, :root[data-skin="glass"] .tint-amber, :root[data-skin="glass"] .tint-purple, :root[data-skin="glass"] .tint-teal, :root[data-skin="glass"] .tint-green, :root[data-skin="glass"] .tint-pink, :root[data-skin="glass"] .tint-gray, :root[data-skin="glass"] .tint-red { --tbg: rgba(255, 255, 255, 0.75); }

/* 10. Sunset: warm gradients, oranges and corals */
:root[data-skin="sunset"] { --bg: #fff3e8; --bg-img: linear-gradient(to bottom, #ffe2c7 0, rgba(255, 243, 232, 0) 320px); --surface: #fffaf5; --ink: #4a1f10; --ink-2: #6b3320; --muted: #92654f; --line: #f6dcc8; --accent: #f0572d; --accent-2: #c2410c; --accent-ink: #fff; --accent-soft: #ffe6d6; --late: #c1121f; --late-soft: #fde0e0; --warn: #d98200; --ok: #2f9e6b; --shadow: 0 10px 26px -14px rgba(194, 65, 12, 0.45); --rk: 1.1; --brand: linear-gradient(135deg, #ff9a3c, #f27a1a); --brand-ink: #3a1204; --brand-glow: 0 10px 20px -10px rgba(240, 87, 45, 0.9); --fab-bg: linear-gradient(135deg, #ff9a3c, #f27a1a); --hero-bg: linear-gradient(135deg, #e8661c 0%, #d0402a 55%, #a81f55 100%); --hero-ink: #fff; --bar-in: #2f9e6b; --bar-out: #f0572d; }
:root[data-skin="sunset"] .tint-teal, :root[data-skin="sunset"] .tint-blue, :root[data-skin="sunset"] .tint-green { --tbg: #ffe9d2; --tfg: #b4440b; } :root[data-skin="sunset"] .tint-purple, :root[data-skin="sunset"] .tint-pink { --tbg: #fde0e8; --tfg: #b0245a; }

/* 11. Chalkboard (dark notebook): chalk on a dark green board */
:root[data-skin="chalk"] { --bg: #1f3a30; --bg-img: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.05), transparent 50%), radial-gradient(circle at 80% 90%, rgba(255, 255, 255, 0.04), transparent 45%); --surface: #274a3d; --ink: #f3f0e4; --ink-2: #e0ddd0; --muted: #b7c7b7; --line: rgba(243, 240, 228, 0.28); --accent: #ffd86b; --accent-2: #ffd86b; --accent-ink: #2a2200; --accent-soft: rgba(255, 216, 107, 0.16); --late: #ff9b8f; --late-soft: rgba(255, 130, 110, 0.18); --warn: #ffd86b; --ok: #a6e3a1; --shadow: none; --rk: 0.7; --bw: 2px; --bs: dashed; --card-line: rgba(243, 240, 228, 0.55); --font-head: var(--hand); --brand: #ffd86b; --brand-ink: #2a2200; --brand-glow: none; --fab-bg: #ffd86b; --hero-bg: #2c5646; --hero-ink: #f3f0e4; --bar-in: #a6e3a1; --bar-out: #ffd86b; }
:root[data-skin="chalk"] .hero > b, :root[data-skin="chalk"] .ab-title { font-family: var(--hand); }
:root[data-skin="chalk"] .appbar, :root[data-skin="chalk"] .tabbar, :root[data-skin="chalk"] .rail { background: #1b342b; }
:root[data-skin="chalk"] .tint-blue, :root[data-skin="chalk"] .tint-amber, :root[data-skin="chalk"] .tint-purple, :root[data-skin="chalk"] .tint-teal, :root[data-skin="chalk"] .tint-green, :root[data-skin="chalk"] .tint-pink, :root[data-skin="chalk"] .tint-gray { --tbg: rgba(243, 240, 228, 0.12); --tfg: #f3f0e4; }
:root[data-skin="paper"] .hero { overflow: visible; }

/* Neon palettes with deliberately sparse, non-interactive trails. */
:root[data-skin="amberwave"],:root[data-skin="ion"]{--rk:.8;--bw:1px;--bg-img:none;--shadow:0 8px 30px #0005;--font-head:var(--mono);color-scheme:dark;--accent-2:var(--accent);--accent-ink:#061014;--brand:var(--accent);--brand-ink:var(--accent-ink);--fab-bg:var(--accent);--hero-ink:var(--ink);--card-line:var(--line);--bar-in:var(--accent);--bar-out:#ff78b0;--ok:#7fe8ad;--late:#ff9f9a;--late-soft:#3e2020}
:root[data-skin="amberwave"]{--bg:#120c07;--surface:#24160d;--ink:#fff2d6;--ink-2:#ffe1b0;--muted:#d0ad86;--line:#654321;--accent:#ffbd59;--accent-soft:#38250f;--hero-bg:linear-gradient(125deg,#41260e,#28101c);--trail:#ffbd59}
:root[data-skin="ion"]{--bg:#04131d;--surface:#092735;--ink:#dcfbff;--ink-2:#c2e8f2;--muted:#9cbecb;--line:#275469;--accent:#61eeff;--accent-soft:#103c49;--hero-bg:linear-gradient(125deg,#123c53,#20183e);--trail:#61eeff}
:root[data-skin="synthwave"]{--trail:#ff66c3}
.neon-trails{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.neon-trails i{position:absolute;top:-80px;width:1px;height:var(--length);background:linear-gradient(transparent,var(--trail));opacity:.27;animation:neon-fall var(--duration) var(--delay) linear infinite}
.neon-trails i::after{content:"";position:absolute;bottom:0;left:-.5px;width:2px;height:2px;border-radius:50%;background:var(--trail);box-shadow:0 0 4px var(--trail)}
@keyframes neon-fall{to{transform:translateY(calc(100dvh + 160px))}}
.app{position:relative;z-index:1}
#palettePreview{display:grid;gap:12px;border:1px solid;padding:20px}#palettePreview b{font-size:1.8rem}
#customThemeForm input[type=color]{width:100%;height:48px;padding:4px}
:root[data-motion=off] .neon-trails,:root[data-motion=reduced] .neon-trails{display:none}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) .neon-trails{display:none}}
/* Custom themes are a separate editor, never a template tile. */
.tc-name{display:flex;align-items:center;gap:6px}.tc-name .i{flex-shrink:0}.custom-theme-section{margin-top:22px;border-top:1px solid var(--line);padding:18px 0 4px}.custom-theme-heading{display:flex;align-items:flex-start;gap:12px}.custom-theme-heading h3{margin:0 0 5px}.custom-theme-heading p{font-size:.85rem;color:var(--muted);margin:0 0 12px}.custom-theme-section .btn-row{flex-wrap:wrap}.custom-theme-section .btn{white-space:normal;max-width:100%;min-height:44px}.custom-theme-swatches{display:flex;gap:6px;margin:8px 0 16px}.custom-theme-swatches i{width:36px;height:22px;border:1px solid var(--line);border-radius:7px}.custom-start-palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 22px}.palette-option{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:74px;padding:10px;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:12px;cursor:pointer;min-width:0}.palette-option[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.palette-option>span{display:flex;height:23px;overflow:hidden;border-radius:7px;border:1px solid var(--line)}.palette-option i{flex:1}.palette-option b{font-size:12px;text-align:start}.custom-colour-controls{display:grid;gap:10px;margin-bottom:20px}.custom-colour-row{display:grid;grid-template-columns:minmax(0,1fr) 52px 100px;gap:8px;align-items:center}.custom-colour-row>label{display:flex;align-items:center;gap:7px;font-size:13px;min-width:0;overflow-wrap:anywhere}.custom-colour-row>label .i{flex-shrink:0}.custom-colour-row input[data-palette-hex]{width:100%;min-width:0;font:13px var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;min-height:48px;padding:8px}.custom-colour-row input[type=color]{cursor:pointer;min-height:48px;border:1px solid var(--line);border-radius:9px;background:var(--surface);appearance:auto}#customThemeForm .f>span .i{vertical-align:middle;margin-right:5px}#customThemeForm .sticky-actions{background:var(--surface);padding-top:12px}#palettePreview{display:grid;gap:12px;background:var(--preview-bg);color:var(--preview-ink);border:1px solid var(--preview-icon);border-radius:var(--preview-round);padding:16px;margin-bottom:14px}#palettePreview .palette-preview-nav{display:flex;justify-content:space-around;color:var(--preview-icon);padding:8px}#palettePreview .palette-preview-card{background:var(--preview-accent);color:var(--preview-on-accent);border-radius:var(--preview-round);padding:16px;position:relative}#palettePreview .palette-preview-card b{display:block;margin-top:8px;font-size:28px;padding-right:45px}#palettePreview .palette-preview-add{position:absolute;bottom:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;background:var(--preview-on-accent);color:var(--preview-accent);border:0;border-radius:50%;pointer-events:none}#palettePreview .palette-preview-row{background:var(--preview-surface);color:var(--preview-ink);border-radius:var(--preview-round);display:flex;align-items:center;gap:10px;padding:12px;font-size:13px}#palettePreview .palette-preview-row>.i{color:var(--preview-icon);flex-shrink:0}#palettePreview .palette-preview-row span{flex:1;min-width:0}#palettePreview .palette-preview-row strong{font-size:13px}
@media(min-width:600px){.custom-start-palettes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.custom-theme-section{border:1px solid var(--line);background:var(--bg);padding:16px;border-radius:16px;margin:6px 0 24px}.custom-theme-editor .sheet-head h2{display:flex;gap:8px;align-items:center}.custom-theme-editor .sheet-head h2 .i{flex-shrink:0}

/* Playful tribute themes. UI surfaces stay opaque; scenery never handles input. */
:root:is([data-skin=mario],[data-skin=bricks],[data-skin=minnie]){color-scheme:light;--bg-img:none;--font:var(--round);--font-head:var(--round);--accent-ink:#fff;--brand-ink:#fff;--hero-ink:#fff;--brand:var(--accent);--fab-bg:var(--accent);--accent-2:var(--accent);--card-line:var(--line);--bw:2px;--rk:1.1;--brand-glow:none;--ok:#08734c;--late:#b62038;--late-soft:#ffe4e9;--bar-in:#08734c;--bar-out:var(--accent)}
:root[data-skin=mario]{--bg:#dcf3ff;--surface:#fffdf2;--ink:#172b49;--ink-2:#294464;--muted:#4a6077;--line:#a8c9db;--accent:#c52b32;--accent-soft:#ffe4d7;--hero-bg:linear-gradient(130deg,#174ea8,#2670b8);--shadow:0 4px 0 #90b7c43b;--font-head:var(--mono);--rk:.55}
:root[data-skin=bricks]{--bg:#fff5d8;--surface:#fff;--ink:#182d4b;--ink-2:#304966;--muted:#536479;--line:#c9d4e0;--accent:#164bb2;--accent-soft:#e3edff;--hero-bg:linear-gradient(115deg,#164bb2,#186d94);--shadow:0 5px 0 #9daec34d;--rk:.8}
:root[data-skin=minnie]{--bg:#fff0f3;--surface:#fffafd;--ink:#35202d;--ink-2:#593747;--muted:#795362;--line:#e6becd;--accent:#a7194c;--accent-soft:#fbe0e9;--hero-bg:linear-gradient(125deg,#a7194c,#74254b);--shadow:0 9px 24px #9f2c4b16;--rk:1.4;--font-head:var(--hand)}
:root[data-skin=mario] .hero{border-bottom:5px solid #f1bd3e}
:root[data-skin=bricks] .hero{border-bottom:5px solid #f2c52c}
:root[data-skin=bricks] .card,:root[data-skin=bricks] .wc{border-top-color:#e7bb26}
:root[data-skin=minnie] .hero{background-image:radial-gradient(circle at 7px 7px,#ffffff12 2px,transparent 3px),var(--hero-bg);background-size:22px 22px,100% 100%}
:root:is([data-skin=mario],[data-skin=bricks],[data-skin=minnie]) .theme-card.on{outline:2px solid var(--accent);outline-offset:2px}
.fun-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.fun-scene>i{position:absolute;left:var(--x);top:var(--y);animation-delay:var(--delay);animation-timing-function:ease-in-out;animation-iteration-count:infinite;pointer-events:none}
.fun-cloud{width:100px;height:24px;background:#fff;box-shadow:20px -18px 0 -2px #fff,45px -10px 0 #fff,16px 12px 0 -6px #fff;opacity:.7;animation:fun-cloud-drift 30s ease-in-out infinite}
.fun-hill{width:270px;height:180px;top:auto!important;bottom:-45px;border-radius:50% 50% 0 0;background:linear-gradient(150deg,#90d879,#3b9b6a);opacity:.32;animation:fun-hill-breathe 12s ease-in-out infinite}
.fun-hill:nth-child(5){bottom:10%;width:150px;height:100px;opacity:.18}
.fun-coin{width:17px;height:23px;border:3px solid #d39b17;background:#ffe07b;box-shadow:inset 3px 0 #fff5bb,3px 3px 0 #e8ac3533;opacity:.6;animation:fun-coin-turn 5s ease-in-out infinite}
.fun-block{width:38px;height:38px;border:3px solid #bf8128;background:repeating-linear-gradient(0deg,transparent 0 15px,#bf8128 15px 18px),repeating-linear-gradient(90deg,#f1bf60 0 16px,#bf8128 16px 19px);opacity:.35;animation:fun-float 8s ease-in-out infinite}
.fun-brick{width:clamp(220px,27vw,380px);height:clamp(148px,18vw,254px);background:url('assets/themes/brick-pencil-v3.webp') center/contain no-repeat;opacity:.72;transform:rotate(var(--turn));animation:fun-brick-float 16s ease-in-out infinite}
.fun-brick:nth-child(1){left:-12%;top:1%;--turn:-8deg}
.fun-brick:nth-child(2){left:75%;top:38%;--turn:12deg;animation-duration:20s}
.fun-brick:nth-child(3){left:-7%;top:78%;--turn:6deg;animation-duration:18s}
.minnie-scene{background:radial-gradient(ellipse at 10% 20%,#e7a0b522,transparent 36%),radial-gradient(ellipse at 90% 70%,#d898b72a,transparent 38%),radial-gradient(circle,#b45a7e22 1.5px,transparent 2px);background-size:auto,auto,32px 32px}
.fun-bow{width:52px;height:24px;opacity:.23;animation:fun-brick-float 12s ease-in-out infinite;background:radial-gradient(ellipse at center,#a7194c 0 5px,transparent 6px)}
.fun-bow::before,.fun-bow::after{content:"";position:absolute;top:0;width:24px;height:24px;background:radial-gradient(circle,#fff 1px,transparent 2px),#cf456b;background-size:8px 8px;border-radius:5px 65% 65% 5px;transform:rotate(12deg)}
.fun-bow::after{right:0;transform:rotate(168deg)}
.fun-confetti{width:8px;height:8px;border-radius:50%;background:#aa4969;opacity:.2;animation:fun-float 9s ease-in-out infinite}
.fun-petal{width:20px;height:35px;border-radius:80% 0 80% 0;background:linear-gradient(130deg,#e6a6bc,#cf6f93);opacity:.2;animation:fun-brick-float 16s ease-in-out infinite}
@keyframes fun-cloud-drift{0%,100%{transform:translateX(-25px)}50%{transform:translateX(55px)}}
@keyframes fun-hill-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes fun-coin-turn{0%,35%,100%{transform:rotateY(0) translateY(0)}65%{transform:rotateY(180deg) translateY(-9px)}}
@keyframes fun-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes fun-brick-float{0%,100%{transform:translateY(0) rotate(var(--turn))}50%{transform:translateY(-24px) rotate(calc(var(--turn) * -1))}}
:root[data-fun-motion=still] .fun-scene *{animation:none!important}
:root[data-fun-motion=still] :is(.tabbar,.rail)::before,:root[data-fun-motion=still] :is(.tabbar,.rail)::after{display:none!important}
:root:has(dialog[open]) :is(.tabbar,.rail)::before,:root:has(dialog[open]) :is(.tabbar,.rail)::after,:root:has(.dashboard-editing) :is(.tabbar,.rail)::before,:root:has(.dashboard-editing) :is(.tabbar,.rail)::after{visibility:hidden}
.theme-card:is([data-skin-set=mario],[data-skin-set=bricks],[data-skin-set=minnie]) .tc-prev{position:relative;overflow:hidden}
.theme-card[data-skin-set=mario] .tc-prev::before{content:"";position:absolute;right:9px;top:10px;width:16px;height:18px;background:#ffe07b;border:2px solid #d39b17;box-shadow:-80px 8px 0 -3px #fff}
.theme-card[data-skin-set=bricks] .tc-prev::before{content:"";position:absolute;right:0;top:0;width:65px;height:50px;background:url('assets/themes/brick-pencil-v3.webp') center/contain no-repeat}
.theme-card[data-skin-set=minnie] .tc-prev{background-image:radial-gradient(circle,#b45a7e33 2px,transparent 3px)!important;background-size:16px 16px!important}
:root[data-skin=bricks] .appbar,:root[data-skin=bricks] .sec-head{background:var(--bg)}

/* Vader: monochrome command deck. No colour filter is applied to user photos. */
:root[data-skin=vader]{color-scheme:dark;--bg:#000;--bg-img:none;--surface:#0b0b0b;--ink:#f3f3f3;--ink-2:#dedede;--muted:#ababab;--line:#3d3d3d;--accent:#fff;--accent-2:#fff;--accent-ink:#000;--accent-soft:#232323;--late:#fff;--late-soft:#252525;--warn:#d6d6d6;--ok:#ededed;--shadow:0 7px 30px #0009;--rk:.65;--bw:1px;--card-line:#4b4b4b;--font-head:var(--mono);--brand:#fff;--brand-ink:#000;--brand-glow:0 0 22px #ffffff16;--fab-bg:#fff;--hero-bg:linear-gradient(125deg,#171717,#050505 70%);--hero-ink:#fff;--bar-in:#fff;--bar-out:#8a8a8a;--tbg:#222;--tfg:#eee}
:root[data-skin=vader] [class*="tint-"]{--tbg:#202020;--tfg:#e9e9e9}
:root[data-skin=vader] :is(.appbar,.tabbar,.rail,.sheet,.pane){background:#080808}
:root[data-skin=vader] .hero{border:1px solid #666;box-shadow:inset 3px 0 #f6f6f6,inset 6px 0 12px #ffffff12,0 15px 36px #0008}
:root[data-skin=vader] .hero .flip-ic{background:#ffffff12;border:1px solid #ffffff40}
:root[data-skin=vader] :is(.chart,.ring,.donut,.legend-dot){filter:grayscale(1)}
:root[data-skin=vader] .sec-head{background:#000}
:root[data-skin=vader] .ab-title.home b i{color:#fff}
:root[data-skin=vader] .theme-card.on{outline:2px solid #fff;outline-offset:2px}
.vader-scene{background:radial-gradient(ellipse at 85% 20%,#ffffff06,transparent 45%)}
.fun-star{width:2px;height:2px;border-radius:50%;background:#fff;opacity:.42;box-shadow:0 0 5px #ffffff45;animation:orbit-star-drift 38s linear infinite}
.fun-star:nth-child(3n){width:1px;height:1px;opacity:.22;animation-duration:55s}.fun-star:nth-child(7n){width:3px;height:3px;opacity:.58;animation-duration:42s}
.fun-planet{width:clamp(200px,35vw,480px);aspect-ratio:1;left:72%!important;top:8%!important;border-radius:50%;background:radial-gradient(circle at 28% 24%,#555,#1c1c1c 27%,#080808 56%,#000 74%);box-shadow:inset 7px 2px 8px #ffffff35,-3px -1px 4px #ffffff12;animation:orbit-world-drift 55s ease-in-out infinite}
.fun-moon{width:90px;height:90px;left:-35px!important;top:68%!important;border-radius:50%;background:radial-gradient(circle at 20% 20%,#747474,#252525 30%,#050505 65%);box-shadow:inset 2px 1px 3px #aaa;opacity:.6;animation:orbit-world-drift 65s ease-in-out infinite reverse}
.fun-station{width:85px;height:85px;left:82%!important;top:54%!important;border-radius:50%;background:linear-gradient(0deg,transparent 48%,#000 49% 51%,transparent 52%),repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 6px),radial-gradient(circle at 25% 25%,#666,#181818 50%,#010101 74%);box-shadow:inset 2px 1px 3px #aaa;animation:orbit-world-drift 45s ease-in-out infinite}
.fun-station::after{content:"";position:absolute;left:20%;top:22%;width:26%;height:26%;border:1px solid #666;border-radius:50%;background:radial-gradient(circle at 60% 60%,#121212,#666);transform:rotate(-18deg) scaleY(.8)}
.fun-fighter,.fun-cruiser{left:-180px!important;width:76px;height:52px;background:url('assets/themes/orbit-fighter.svg') center/contain no-repeat;opacity:.72;animation:orbit-patrol 27s linear infinite;will-change:transform}
.fun-fighter:nth-last-child(3){width:43px;height:32px;opacity:.45;animation-duration:39s;animation-direction:reverse}
.fun-fighter:nth-last-child(2){width:61px;height:42px;opacity:.6;animation-duration:32s}
.fun-cruiser{width:170px;height:90px;background-image:url('assets/themes/orbit-cruiser.svg');opacity:.3;animation:orbit-patrol 70s linear infinite reverse}
@keyframes orbit-star-drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-25px,50px,0)}}
@keyframes orbit-world-drift{0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}50%{transform:translate3d(-15px,20px,0) rotate(7deg)}}
@keyframes orbit-patrol{0%{transform:translate3d(-160px,35px,0) rotate(-15deg)}100%{transform:translate3d(calc(100vw + 340px),-90px,0) rotate(15deg)}}
:root[data-fun-motion=still] .vader-scene :is(.fun-fighter,.fun-cruiser){display:none}
.theme-card[data-skin-set=vader] .tc-prev{background-image:radial-gradient(circle at 85% 15%,#fff 1px,transparent 2px),radial-gradient(circle at 15% 80%,#fff 1px,transparent 2px)!important}
:root[data-skin=vader] .btn-danger{background:#e5e5e5;color:#000;border-color:#fff}
:root[data-skin=vader] .hero{position:relative;isolation:isolate;overflow:hidden}
:root[data-skin=vader] .hero::after{content:"";position:absolute;pointer-events:none;z-index:-1;left:-90px;bottom:18px;width:70px;height:48px;background:url('assets/themes/orbit-fighter.svg') center/contain no-repeat;opacity:.3;animation:orbit-card-patrol 23s -9s linear infinite}
@keyframes orbit-card-patrol{from{transform:translate3d(0,10px,0) rotate(-12deg)}to{transform:translate3d(980px,-20px,0) rotate(15deg)}}
:root[data-fun-motion=still][data-skin=vader] .hero::after{display:none}
:root[data-skin=vader] .hero{background-image:radial-gradient(circle at 70% 16%,#ffffff99 0 1px,transparent 1.8px),radial-gradient(circle at 87% 39%,#ffffff66 0 1px,transparent 1.6px),radial-gradient(circle at 54% 70%,#ffffff55 0 .7px,transparent 1.6px),radial-gradient(circle at 15% 90%,#ffffff66 0 1px,transparent 1.8px),radial-gradient(circle at 36% 54%,#ffffff44 0 .7px,transparent 1.6px),var(--hero-bg)}
:root[data-skin=vader] .hero::before{content:"";position:absolute;pointer-events:none;right:-45px;top:75px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 25% 20%,#585858,#171717 33%,#050505 62%);box-shadow:inset 4px 1px 4px #ffffff66;opacity:.35;z-index:-1}
:root[data-skin=vader] .hero::after{animation-delay:-4s;opacity:.5}
/* User-selected portrait: locally bundled; grayscale is limited to this decorative artwork. */
:root[data-skin=vader] .hero-flip{position:relative;isolation:isolate;margin-top:156px}
:root[data-skin=vader] .hero-flip>.hero{position:relative;z-index:1}
:root[data-skin=vader] .hero-flip::before{content:"";position:absolute;pointer-events:none;right:16px;bottom:calc(100% - 27px);width:156px;height:190px;background:url('assets/themes/vader-portrait-v1.webp') center 18%/cover no-repeat;filter:grayscale(1) contrast(1.65) brightness(1.12);mix-blend-mode:screen;mask-image:linear-gradient(to right,transparent,#000 18% 82%,transparent);transform-origin:50% 100%;animation:vader-breathe 5s ease-in-out infinite;z-index:0}
:root[data-skin=vader] #view.enter .hero-flip:not(.character-retreated):not(.character-retreating)::before{animation:vader-emerge 1s .15s both}
:root[data-skin=vader] .hero-flip.character-retreating::before{animation:character-blur-away .85s ease-in forwards}
@keyframes vader-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.015)}}
@keyframes vader-emerge{from{opacity:0;transform:translateY(75px) rotateY(-35deg)}to{opacity:1;transform:translateY(0) rotateY(0)}}
:root[data-fun-motion=still][data-skin=vader] .hero-flip{margin-top:4px}
:root[data-fun-motion=still][data-skin=vader] .hero-flip::before{display:none}
:root[data-skin=vader] :is(.dash-small,.dash-medium,.dashboard-editing) .hero-flip{margin-top:4px}
:root[data-skin=vader] :is(.dash-small,.dash-medium,.dashboard-editing) .hero-flip::before{display:none}
:root:has(dialog[open])[data-skin=vader] .hero-flip::before{visibility:hidden}

:root[data-skin=vader] .hero-flip.character-retreated::before{opacity:0;animation:none;filter:var(--character-base-filter,brightness(1)) blur(6px);transform:none;top:16px;bottom:auto;z-index:2}
/* Sketchbook revision: actual colored-pencil artwork, including a visible card illustration. */
:root[data-skin=bricks]{--hero-bg:#fffdf0;--hero-ink:#182d4b;--card-line:#d6cdb5;--shadow:0 3px 0 #5b4c2e20}
:root[data-skin=bricks] .hero{position:relative;isolation:isolate;overflow:hidden;border:1px solid #b8ad8d;border-bottom:3px double #b8ad8d;box-shadow:2px 4px 0 #79664415}
:root[data-skin=bricks] .hero-tiles>div{background:#164bb20b;border:1px solid #182d4b20}
:root[data-skin=bricks] .hero .flip-ic{background:#182d4b0d;border:1px solid #182d4b26}
:root[data-skin=bricks] .hero::after{content:"";position:absolute;right:14px;bottom:8px;width:142px;height:95px;background:url('assets/themes/brick-pencil-v3.webp') center/contain no-repeat;pointer-events:none;z-index:-1;opacity:.8;animation:sketch-brick-sway 14s ease-in-out infinite}
:root[data-skin=bricks] .fun-brick{width:clamp(280px,32vw,420px);height:clamp(187px,21.4vw,280px);opacity:.66}
@keyframes sketch-brick-sway{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-5px)}}
:root[data-skin=bricks][data-fun-motion=still] .hero::after{animation:none}
:root[data-skin=bricks] .hero-back::after{display:none}
:root[data-skin=bricks] :is(.dash-small,.dash-medium) .hero::after{display:none}

/* Character illustrations belong to the balance card, never navigation or data controls. */
:root:is([data-skin=mario],[data-skin=minnie]) .hero-flip{position:relative;isolation:isolate;margin-top:178px}
:root:is([data-skin=mario],[data-skin=minnie]) .hero-flip>.hero{position:relative;z-index:1}
:root:is([data-skin=mario],[data-skin=minnie]) .hero-flip::before{content:"";position:absolute;pointer-events:none;right:10px;bottom:calc(100% - 22px);width:214px;height:206px;background:var(--card-character-image) center/290px 290px no-repeat;mix-blend-mode:multiply;transform-origin:50% 100%;animation:card-character-nudge 6s ease-in-out infinite;z-index:0}
:root[data-skin=mario]{--card-character-image:url('assets/themes/mario-pencil-v4.png')}
:root[data-skin=minnie]{--card-character-image:url('assets/themes/mickey-minnie-pencil-v1.webp')}
:root[data-skin=minnie] .hero-flip::before{right:8px;width:248px;height:206px;background-size:248px auto;background-position:center 34%;mask-image:linear-gradient(to right,transparent,#000 5% 95%,transparent)}
:root:is([data-skin=mario],[data-skin=minnie]) #view.enter .hero-flip:not(.character-retreated):not(.character-retreating)::before{animation:vader-emerge 1s .15s both}
:root:is([data-skin=mario],[data-skin=minnie]) .hero-flip.character-retreating::before{animation:character-blur-away .85s ease-in forwards}
:root:is([data-skin=mario],[data-skin=minnie]) .hero-flip.character-retreated::before{opacity:0;animation:none;filter:var(--character-base-filter,brightness(1)) blur(6px);transform:none;top:16px;bottom:auto;z-index:2}
@keyframes card-character-nudge{0%,45%,100%{transform:translateY(0) rotate(0)}54%{transform:translateY(-4px) rotate(-2deg)}62%{transform:translateY(0) rotate(1deg)}72%{transform:translateY(-2px) rotate(-1deg)}}
:root:is([data-skin=mario],[data-skin=minnie])[data-fun-motion=still] .hero-flip{margin-top:4px}
:root:is([data-skin=mario],[data-skin=minnie])[data-fun-motion=still] .hero-flip::before{display:none}
:root:is([data-skin=mario],[data-skin=minnie]) :is(.dash-small,.dash-medium,.dashboard-editing) .hero-flip{margin-top:4px}
:root:is([data-skin=mario],[data-skin=minnie]) :is(.dash-small,.dash-medium,.dashboard-editing) .hero-flip::before{display:none}
:root:has(dialog[open]):is([data-skin=mario],[data-skin=minnie]) .hero-flip::before{visibility:hidden}
@media(max-width:359px){:root[data-skin=minnie] .hero-flip::before{right:0;width:236px;background-size:236px auto}}
/* Blend the source paper with the selected theme instead of showing white rectangles. */
:root:is([data-skin=mario],[data-skin=minnie]) .hero-flip::before{background-color:var(--bg);background-blend-mode:multiply;mix-blend-mode:normal;mask-image:linear-gradient(to right,transparent,#000 5% 95%,transparent)}

:root[data-skin=mario] .hero-flip::before{width:214px;height:206px;background-size:214px auto;background-position:center top}

/* User-supplied transparent sketches; decorative and never interactive. */
:root[data-skin=mario] .hero-flip::before{background-size:auto 206px;background-position:center;background-color:transparent;background-blend-mode:normal;mask-image:none}
.mario-scene{background:radial-gradient(circle at 10% 15%,#ffffff80,transparent 48%)}
.mario-scene>i{width:clamp(100px,17vw,190px);height:clamp(120px,20vw,220px);background:center/contain no-repeat;opacity:.16;animation:fun-brick-float 19s ease-in-out infinite}
.mario-scene>.fun-sketch-goomba{left:-24px;top:16%;background-image:url('assets/themes/goomba-pencil-v1.png')}
.mario-scene>.fun-sketch-mushroom{left:auto;right:-22px;top:47%;background-image:url('assets/themes/mushroom-pencil-v1.png');animation-duration:24s}
.mario-scene>.fun-sketch-boo{left:-30px;top:76%;background-image:url('assets/themes/boo-pencil-v1.png');animation-duration:27s}
.mario-scene>.fun-sketch-star{left:auto;right:2%;top:5%;width:90px;height:100px;background-image:url('assets/themes/star-pencil-v1.png');opacity:.24;animation-duration:21s}
:root:has(dialog[open]) .mario-scene{visibility:hidden}
:root[data-fun-motion=still] .mario-scene>i{animation:none}

/* Reclaim the character's headroom after its retreat, without scrolling the whole page. */
:root:is([data-skin=vader],[data-skin=mario],[data-skin=minnie]) .hero-flip{transition:margin-top .55s ease}
:root:is([data-skin=vader],[data-skin=mario],[data-skin=minnie]) .hero-flip.character-collapsed{margin-top:4px}
:root[data-fun-motion=still] .hero-flip{transition:none}
@media(prefers-reduced-motion:reduce){:root:is([data-skin=vader],[data-skin=mario],[data-skin=minnie]) .hero-flip{transition:none}}

/* Keep a soft character watermark rather than turning or removing the artwork. */
:root[data-skin=vader] .hero-flip{--character-base-filter:grayscale(1) contrast(1.65) brightness(1.12)}
@keyframes character-blur-away{0%{opacity:1;filter:var(--character-base-filter,brightness(1)) blur(0);transform:none}60%{opacity:.2;filter:var(--character-base-filter,brightness(1)) blur(6px);transform:none}100%{opacity:0;filter:var(--character-base-filter,brightness(1)) blur(9px);transform:none}}

/* Locally hosted fonts: Latin and Greek subsets, regular and bold. */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-sans-greek-ext-400.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-sans-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-sans-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-sans-greek-ext-700.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-sans-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-sans-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-sans-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-serif-greek-ext-400.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-serif-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-serif-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-serif-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-serif-greek-ext-700.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-serif-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-serif-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/noto-serif-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-greek-ext-400.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-greek-ext-700.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-slab-greek-ext-400.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-slab-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-slab-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-slab-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-slab-greek-ext-700.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-slab-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-slab-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/roboto-slab-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/open-sans-greek-ext-400.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/open-sans-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/open-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/open-sans-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/open-sans-greek-ext-700.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/open-sans-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/open-sans-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/themes/fonts/open-sans-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/fira-sans-greek-ext-400.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/fira-sans-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/fira-sans-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/fira-sans-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/fira-sans-greek-ext-700.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/fira-sans-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/fira-sans-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/fira-sans-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/comfortaa-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/comfortaa-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/comfortaa-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/comfortaa-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/comfortaa-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/comfortaa-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/alegreya-greek-ext-400.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/alegreya-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/alegreya-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/alegreya-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/alegreya-greek-ext-700.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/alegreya-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/alegreya-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/alegreya-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/literata-greek-ext-400.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/literata-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/literata-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/literata-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/literata-greek-ext-700.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/literata-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/literata-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/literata-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/geologica-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/geologica-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/geologica-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/geologica-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/geologica-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/geologica-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* All balance-card characters blur out completely after the flip. */

/* Keep the dotted card layer valid when its palette is customized. */
:root[data-skin=minnie][data-fun-motion=on] .hero{animation:minnie-card-dots 20s linear infinite}
:root[data-skin=minnie][data-fun-motion=still] .hero{animation:none}
@keyframes minnie-card-dots{from{background-position:0 0,0 0}to{background-position:44px 22px,0 0}}
/* Monospace with proper Greek: the phone's own monospace font has no Greek letters, so Android mixes in other fonts. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/jetbrains-mono-greek-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/jetbrains-mono-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/themes/fonts/jetbrains-mono-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/jetbrains-mono-greek-700.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/jetbrains-mono-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/themes/fonts/jetbrains-mono-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Preview on Home: Apply or Cancel in a clear panel above the tab bar. */
.look-preview { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--safe-b) + 18px); z-index: 250; width: min(440px, calc(100vw - 24px)); display: grid; gap: 10px; padding: 14px 16px; background: var(--surface); color: var(--ink); border: 2px solid var(--accent); border-radius: calc(18px * var(--rk)); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); text-align: center; }
.look-preview b { font-size: 15px; } .look-preview .btn-row { display: flex; gap: 10px; } .look-preview .btn { flex: 1; }

/* Ambient motion (ambient.js): behind the content, never takes taps, off with the Animations setting. */
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}.ambient[hidden]{display:none}
.ambient i{position:absolute;display:block;left:var(--x);will-change:transform,opacity}
.amb-glow{position:absolute;left:-10%;right:-10%;bottom:-25%;height:60%;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 68%);animation:ambBreath 7s ease-in-out infinite}
.amb-ember{bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:var(--accent);box-shadow:0 0 10px 2px color-mix(in srgb,var(--accent) 60%,transparent);opacity:0;animation:ambRise var(--d) var(--w) linear infinite}
.amb-bubble{bottom:-40px;width:var(--s);height:var(--s);border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 80%,transparent);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.85),color-mix(in srgb,var(--accent) 14%,transparent) 62%);opacity:0;animation:ambRise var(--d) var(--w) ease-in infinite}
.amb-sprinkle{bottom:-20px;width:calc(var(--s) * .55);height:calc(var(--s) * .2);min-height:4px;border-radius:99px;background:var(--accent);opacity:0;animation:ambRise var(--d) var(--w) ease-in infinite,ambSpin 6s linear infinite}
.amb-leaf{top:-40px;width:var(--s);height:var(--s);border-radius:0 100% 0 100%;background:color-mix(in srgb,var(--accent) 45%,transparent);opacity:0;animation:ambFall var(--d) var(--w) linear infinite}
.amb-digits{top:-260px;width:12px;font:600 13px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;color:var(--accent);opacity:0;animation:ambDigits var(--d) var(--w) linear infinite;text-shadow:0 0 6px var(--accent)}
@keyframes ambRise{0%{transform:translate(0,0);opacity:0}12%{opacity:.95}85%{opacity:.5}100%{transform:translate(var(--sway),-108vh);opacity:0}}
@keyframes ambFall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.55}90%{opacity:.4}100%{transform:translate(var(--sway),108vh) rotate(var(--rot));opacity:0}}
@keyframes ambDigits{0%{transform:translateY(0);opacity:0}10%{opacity:.28}90%{opacity:.2}100%{transform:translateY(120vh);opacity:0}}
@keyframes ambBreath{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes ambSpin{to{rotate:360deg}}
:root[data-motion=off] .ambient,:root[data-motion=reduced] .ambient{display:none}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) .ambient{display:none}}
/* Glass: the swipe actions behind a row must never show through the translucent surface. */
:root[data-skin="glass"] .sw-front{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),#dfe6ff}
:root[data-skin="glass"] .sw-front:hover{background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),#dfe6ff}