/* The looks: Night Arcade (the default), Grandmaster's Club, Sunny Pop and Quiet Hours, picked with the Look setting (settings.js) and
   put on <html> as data-look by look.js before the page draws. Every page loads this first, then its own styles,
   which use only the tokens below. To add a look: a token block like these, its flourishes, and an entry in LOOKS
   in settings.js and look.js.

   The fonts are self-hosted (the Content Security Policy loads nothing from other sites), all under the SIL Open
   Font License (static/fonts/*-OFL.txt): Latin, Latin Extended and Devanagari, variable weights. A page downloads
   only those its look and its words use. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/inter-latin-ext.1ad231aac0a8.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: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/inter-latin.260c81a4759b.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: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/space-grotesk-latin-ext.0bb2ef2eda4e.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: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/space-grotesk-latin.87c506d88b9f.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: 'Fraunces'; font-style: normal; font-weight: 600 800; font-display: swap; src: url("fonts/fraunces-latin-ext.a04d353989ad.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: 'Fraunces'; font-style: normal; font-weight: 600 800; font-display: swap; src: url("fonts/fraunces-latin.069cb90e11a3.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: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/source-sans-3-latin-ext.c6ba61588d7d.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: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/source-sans-3-latin.9ef356ea553a.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: 'Fredoka'; font-style: normal; font-weight: 500 700; font-stretch: 100%; font-display: swap; src: url("fonts/fredoka-latin-ext.d3c5911bfd9a.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: 'Fredoka'; font-style: normal; font-weight: 500 700; font-stretch: 100%; font-display: swap; src: url("fonts/fredoka-latin.9591efe1be62.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: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/nunito-latin-ext.ffdc8b0c86fb.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: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/nunito-latin.166202cc391c.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: 'Newsreader'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/newsreader-latin-ext.2e01db0610b1.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: 'Newsreader'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/newsreader-latin.f94a697b1650.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: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("fonts/instrument-sans-latin-ext.1ff13d113ba4.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: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("fonts/instrument-sans-latin.fa41c43a3d8e.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; }
/* Devanagari (Hindi), under the same names: each family's Devanagari comes from a font of its kind (Noto Sans
   Devanagari for the sans, Noto Serif Devanagari for the serifs, the rounded Baloo 2 for Sunny Pop's rounded
   faces), downloaded only by a page that shows Devanagari. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/noto-sans-devanagari.6c6eb1f4e6b1.woff2") format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/noto-sans-devanagari.6c6eb1f4e6b1.woff2") format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/noto-sans-devanagari.6c6eb1f4e6b1.woff2") format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/noto-sans-devanagari.6c6eb1f4e6b1.woff2") format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/baloo-2-devanagari.454cfcf1d0b0.woff2") format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/baloo-2-devanagari.454cfcf1d0b0.woff2") format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600 800; font-display: swap; src: url("fonts/noto-serif-devanagari.56635e0577eb.woff2") format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/noto-serif-devanagari.56635e0577eb.woff2") format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }

/* ---------- text size ----------
   Every page sizes its text in rem, and 1rem is 16px at the normal Text size (so 0.875rem is 14px). The Text size
   setting (settings.js) scales them all, through data-text on <html> (look.js); a big screen adds a little more, so the
   text keeps pace with a big board. 100% keeps the browser's own font size setting. */
:root { --text-scale: 1; --screen-scale: 1; font-size: calc(100% * var(--text-scale) * var(--screen-scale)); }
:root[data-text="small"] { --text-scale: 0.9; }
:root[data-text="large"] { --text-scale: 1.125; }
:root[data-text="larger"] { --text-scale: 1.25; }
@media (min-width: 1600px) and (min-height: 940px) { :root { --screen-scale: 1.0625; } }

/* ---------- the tokens every page draws with ----------
   Night Arcade is the default (no data-look, or data-look="arcade"). Each look sets every token: colours for
   chess (win, loss, the stages, the board), surfaces (cards, controls, the main button), the header and type.
   style.css and the other pages use only these, so a new page looks right in every look. A look's own
   flourishes, the few things only it has, follow its tokens. */
:root, :root[data-look="arcade"] {
  color-scheme: dark;
  /* colour */
  --bg: #090c1b;
  --bg-art: radial-gradient(1100px 620px at 8% -12%, rgba(168, 85, 247, 0.30), transparent 62%),
    radial-gradient(900px 600px at 98% -4%, rgba(34, 211, 238, 0.20), transparent 60%),
    radial-gradient(900px 520px at 50% 115%, rgba(52, 211, 153, 0.10), transparent 60%);
  --panel: #11162e; --panel-2: #161c3a;
  --text: #eef1ff; --muted: #8f98c6; --line: #262d58;
  --accent: #22d3ee; --accent-2: #a855f7; --on-accent: #07091a;
  --win: #34d399; --loss: #fb7185; --c1: #fbbf24; --c2: #fb923c; --c3: #f43f5e; --info: #60a5fa;
  --last: rgba(34, 211, 238, 0.42); --sel: rgba(168, 85, 247, 0.6); --good: rgba(52, 211, 153, 0.6); --bad: rgba(251, 113, 133, 0.6);
  --sq-light: #dfe4fb; --sq-dark: #6b76bd;  /* the look's own board; the Board setting may choose another */
  /* a look may draw its board as art instead (Grandmaster's Club's inlaid wood, Sunny Pop's tiles): --board-art is
     drawn under the squares, which --sq-light-fill and --sq-dark-fill then leave clear or draw themselves (when unset,
     the squares are --sq-light and --sq-dark), and --board-frame-art under a see-through frame. --sq-mark-inset and
     --sq-mark-radius shape a marked square (the last move, the one picked up) to fit a tile. The Board setting's
     colours (settings.js) set the art aside. --land-bounce: 1 squashes a piece as it lands, like a toy's (board.js). */
  --board-art: none; --board-frame-art: none; --land-bounce: 0;
  /* arrows and circles on the board (style.css .tone-*): best move, the move played, your answer, your own (and with
     shift), and a lesson's warn and guard; how solid they are, and the shadow lifting them off any board colour */
  --arrow-best: #19d38f; --arrow-played: #ff4f7b; --arrow-answer: #4aa8ff; --arrow-mine: #ffa928; --arrow-alt: #b77cff;
  --arrow-warn: #fbbf24; --arrow-guard: #22d3ee; --arrow-alpha: 0.85; --arrow-shade: 0.4;
  /* how arrows live (board.js, style.css .arr): the halo's strength, the spark's, its pace (ms a run) and how far the halo
     sways (1 = the norm) */
  --arrow-halo: 0.5; --arrow-spark: 1; --arrow-pulse-ms: 1600; --arrow-sway: 1; --idea-motion: 1;
  /* a capture's burst (Board.shatter): its kind (neon, embers, confetti or ink), the flash, the ring of shock, the sparks'
     colours, the dust's (embers) and how much they glow (else --glow) */
  --cap-kind: neon; --cap-flash: rgba(220, 250, 255, 0.95); --cap-ring: #67e8f9; --cap-sparks: #22d3ee #a855f7 #f472b6 #ffffff;
  --cap-dust: none;
  --glow: 1;  /* how much things glow: 0 for none */
  --art-sweep: 900ms;  /* how long the welcome card's picture takes to sweep in (style.css .wl-art): the Arcade's the briskest */
  --news: 1;  /* how strongly news shows: an Update's new drills on the tab, the button ready again (update.js) */
  /* type */
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  --text-size: 1rem; --text-weight: 400; --display-weight: 700;
  /* surfaces */
  --card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --card-solid: #11162e;
  --card-line: rgba(124, 140, 255, 0.18);
  --card-radius: 16px;
  --card-shadow: 0 12px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --card-blur: blur(8px);
  --ctl-bg: rgba(255, 255, 255, 0.05); --ctl-line: rgba(124, 140, 255, 0.24); --ctl-radius: 10px; --ctl-depth: 1px; --ctl-weight: 600;
  --ctl-hover: 0 0 0 3px rgba(34, 211, 238, 0.14), 0 0 18px rgba(34, 211, 238, 0.18);
  --primary-bg: linear-gradient(135deg, #22d3ee, #8b5cf6 70%, #a855f7); --primary-fg: #07091a; --primary-line: transparent;
  /* another site's sign-in button (sitebtn.css): the fill and line Google's rules fix for a button its G stands on,
     dark here, and which of each logo's two files shows (static/brands/CREDITS.md) */
  --sitebtn-fill: #131314; --sitebtn-line: #8e918f; --sitebtn-ink: #e3e3e3; --sitebtn-light: none; --sitebtn-dark: inline-block;
  --primary-shadow: 0 8px 24px rgba(139, 92, 246, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.35); --primary-depth: 1px;
  --header-bg: rgba(9, 12, 27, 0.62); --header-line: rgba(124, 140, 255, 0.16); --header-shadow: none; --header-blur: blur(16px);
  --nav-radius: 999px; --nav-active-bg: linear-gradient(90deg, rgba(34, 211, 238, 0.22), rgba(168, 85, 247, 0.30));
  --nav-active-fg: #fff; --nav-active-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.5), 0 0 22px rgba(168, 85, 247, 0.28); --nav-active-line: transparent;
  --board-frame: 0 solid transparent; --board-radius: 14px;
  --board-shadow: 0 0 0 1px rgba(160, 170, 255, 0.35), 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 80px rgba(124, 58, 237, 0.28);
  --bar-track: rgba(255, 255, 255, 0.07); --bar-height: 10px;
  /* charts: a colour per time control (stats.js) */
  --s-rapid: #0b9fbd; --s-blitz: #c98200; --s-classical: #8a6cf2; --s-daily: #db4f97; --s-bullet: #3d7ff2;
  /* the moving background (backdrop.js): its scene (fluid or library), three colours the fluid gathers into over --bg,
     its ribbons' colour, and how strong the colours, the ribbons and the darkened edges are (0-1), and how fast it
     flows (1 = the norm). The library reads them its own way (backdrop.js says how). */
  --backdrop-scene: fluid;
  --fluid-1: #5b21b6; --fluid-2: #0e7490; --fluid-3: #065f46; --fluid-ribbon: #67e8f9;
  --fluid-strength: 0.62; --fluid-ribbons: 0.3; --fluid-edges: 0.7; --fluid-speed: 1;
}

:root[data-look="club"] {
  color-scheme: dark;
  /* the library's ground, and the library standing still (the moving one is backdrop.js's): the lamp's light from
     above, the fire's from the lower right, dark corners, mahogany planks and the books on them */
  --bg: #110c09;
  --bg-art: radial-gradient(1000px 560px at 50% -10%, rgba(255, 207, 143, 0.13), transparent 70%),
    radial-gradient(700px 520px at 104% 112%, rgba(255, 122, 48, 0.12), transparent 70%),
    radial-gradient(1500px 1000px at 50% 58%, transparent 40%, rgba(0, 0, 0, 0.65)),
    repeating-linear-gradient(180deg, rgba(64, 34, 17, 0.75) 0, rgba(30, 16, 8, 0.85) 2.6vh, rgba(8, 5, 3, 0.9) 2.6vh,
      rgba(8, 5, 3, 0.6) 7vh, transparent 11vh 31vh),
    repeating-linear-gradient(90deg, rgba(92, 22, 18, 0.13) 0 30px, rgba(0, 0, 0, 0.25) 30px 32px, rgba(22, 54, 35, 0.13) 32px 52px,
      rgba(0, 0, 0, 0.25) 52px 54px, rgba(112, 74, 38, 0.11) 54px 92px, rgba(0, 0, 0, 0.25) 92px 94px, rgba(24, 30, 62, 0.15) 94px 120px,
      rgba(0, 0, 0, 0.25) 120px 122px, rgba(66, 33, 16, 0.12) 122px 166px, rgba(0, 0, 0, 0.25) 166px 168px,
      rgba(92, 22, 18, 0.11) 168px 192px, rgba(0, 0, 0, 0.3) 192px 212px, rgba(22, 54, 35, 0.11) 212px 248px, rgba(0, 0, 0, 0.25) 248px 250px);
  --panel: #12271e; --panel-2: #173326;
  --text: #f5edd8; --muted: #a7b6a2; --line: #2b4637;
  --accent: #e4b445; --accent-2: #8ec6ef; --on-accent: #231904;
  --win: #82e09b; --loss: #f2856d; --c1: #ebc35e; --c2: #f09a5c; --c3: #ef6b5b; --info: #8ec6ef;
  --last: rgba(228, 180, 69, 0.48); --sel: rgba(120, 170, 255, 0.5); --good: rgba(80, 190, 110, 0.62); --bad: rgba(220, 90, 70, 0.6);
  /* an inlaid board, maple and walnut (looks/club-board.webp, drawn by tools/woodboard.py), lacquered: the banker's
     lamp catches it at the top and its corners fall into shadow. Flat, the woods' own colours (the coordinates, the
     eval bar, a board resting under a card) */
  --sq-light: #eddab3; --sq-dark: #97613a;
  --board-art: radial-gradient(85% 55% at 50% -8%, rgba(255, 230, 175, 0.24), transparent 70%) padding-box,
    radial-gradient(140% 120% at 50% 35%, transparent 58%, rgba(36, 18, 6, 0.32)) padding-box,
    url("looks/club-board.74a520a08966.webp") center / 100% 100% no-repeat padding-box;
  --sq-light-fill: transparent; --sq-dark-fill: transparent;
  --board-frame-art: url("looks/club-frame.4301e1e6d3e5.webp") center / 512px 256px border-box #3a2718;
  --arrow-best: #2c8f52; --arrow-played: #b3262f; --arrow-answer: #3577b8; --arrow-mine: #f0b43a; --arrow-alt: #8a5cc0;
  --arrow-warn: #d9762b; --arrow-guard: #23847d; --arrow-alpha: 0.85; --arrow-shade: 0.4;
  --arrow-halo: 0.2; --arrow-spark: 0.55; --arrow-pulse-ms: 2400; --arrow-sway: 0.5; --idea-motion: 0.5;  /* candlelight, not neon */
  --cap-kind: embers; --cap-flash: rgba(255, 220, 160, 0.7); --cap-ring: rgba(255, 210, 130, 0.65); --cap-sparks: #ffd27a #ff9a3c #fff1c4;
  --cap-dust: rgba(150, 110, 70, 0.5); --cap-glow: 1;
  --glow: 0;
  --art-sweep: 1300ms;
  --news: 0.55;  /* how strongly news shows: an Update's new drills on the tab, the button ready again (update.js) */
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --text-size: 1.0625rem; --text-weight: 400; --display-weight: 700;
  --card-bg: linear-gradient(180deg, #16301f 0%, #112419 100%);
  --card-solid: #112419;
  --card-line: rgba(228, 180, 69, 0.24);
  --card-radius: 12px;
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 32px rgba(0, 0, 0, 0.38);
  --card-blur: none;
  --ctl-bg: rgba(0, 0, 0, 0.22); --ctl-line: rgba(228, 180, 69, 0.30); --ctl-radius: 8px; --ctl-depth: 1px; --ctl-weight: 600;
  --ctl-hover: 0 0 0 3px rgba(228, 180, 69, 0.16);
  --primary-bg: linear-gradient(180deg, #f6d677, #d4a136 55%, #b8841f); --primary-fg: #231904; --primary-line: #f7df95;
  --sitebtn-fill: #131314; --sitebtn-line: #8e918f; --sitebtn-ink: #e3e3e3; --sitebtn-light: none; --sitebtn-dark: inline-block;  /* another site's sign-in button: Google's dark */
  --primary-shadow: 0 6px 18px rgba(228, 180, 69, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5); --primary-depth: 1px;
  --header-bg: linear-gradient(180deg, #102a20, #0c1d16); --header-line: rgba(228, 180, 69, 0.35);
  --header-shadow: 0 1px 0 rgba(228, 180, 69, 0.12), 0 12px 30px rgba(0, 0, 0, 0.35); --header-blur: none;
  --nav-radius: 0; --nav-active-bg: none; --nav-active-fg: #e4b445; --nav-active-shadow: none; --nav-active-line: #e4b445;
  --board-frame: 11px solid transparent; --board-radius: 5px;  /* walnut (--board-frame-art), with a gold inlay */
  --board-shadow: 0 0 0 1px rgba(228, 180, 69, 0.55), inset 0 0 0 1px rgba(228, 180, 69, 0.45), 0 28px 70px rgba(0, 0, 0, 0.65);
  --bar-track: rgba(0, 0, 0, 0.3); --bar-height: 9px;
  --s-rapid: #b8891f; --s-blitz: #3797c4; --s-classical: #d0623f; --s-daily: #9278d4; --s-bullet: #26a08f;
  /* the library: books in the dark under a banker's lamp (its warm light, the green of its shade), the glow of a
     fire, and gold dust in the air */
  --backdrop-scene: library;
  --fluid-1: #ffcf8f; --fluid-2: #2f9c5e; --fluid-3: #ff7a30; --fluid-ribbon: #ffd27a;
  --fluid-strength: 0.7; --fluid-ribbons: 0.8; --fluid-edges: 0.85; --fluid-speed: 0.6;
}

:root[data-look="pop"] {
  color-scheme: light;
  /* a sunny day: the ground, and the sky standing still (the moving one is backdrop.js's): the sun in the top left
     corner with its rays, and the sky deepening upwards */
  --bg: #fff8f0;
  --bg-art: radial-gradient(circle at 10% 0%, #fff3c4 0 70px, rgba(255, 211, 107, 0.55) 72px, transparent 340px),
    repeating-conic-gradient(from 0deg at 10% 0%, rgba(255, 255, 255, 0.35) 0 9deg, transparent 9deg 32.7deg),
    linear-gradient(0deg, #fff8f0 5%, #e3efff 100%);
  --panel: #ffffff; --panel-2: #fffdfa;
  --text: #2c2346; --muted: #776d93; --line: #efe2d4;
  --accent: #7c3aed; --accent-2: #0284c7; --on-accent: #ffffff;
  --win: #16a34a; --loss: #e11d48; --c1: #d18f00; --c2: #f97316; --c3: #e11d48; --info: #0284c7;
  --last: rgba(250, 204, 21, 0.6); --sel: rgba(124, 58, 237, 0.45); --good: rgba(34, 197, 94, 0.6); --bad: rgba(244, 63, 94, 0.55);
  /* chunky game tiles (looks/pop-tile-*.svg), each with a lip under it and a shine on top, set in a cream tray, and
     a piece lands with a squash */
  --sq-light: #f4f8e4; --sq-dark: #72b86a;
  --board-art: linear-gradient(180deg, #efe6d6, #e2d5c0);
  --sq-light-fill: url("looks/pop-tile-light.46b52e68724b.svg") center / 100% 100% no-repeat;
  --sq-dark-fill: url("looks/pop-tile-dark.0ae5dc2e8d14.svg") center / 100% 100% no-repeat;
  --sq-mark-inset: 2.5% 2.5% 9% 2.5%; --sq-mark-radius: 14%;
  --land-bounce: 1;
  --arrow-best: #0a8a4a; --arrow-played: #ec2f5b; --arrow-answer: #1a8fe0; --arrow-mine: #ff7a1a; --arrow-alt: #8b45f0;
  --arrow-warn: #e0a100; --arrow-guard: #0fa5b5; --arrow-alpha: 0.85; --arrow-shade: 0.25;
  --arrow-halo: 0.32; --arrow-spark: 0.95; --arrow-pulse-ms: 1450; --arrow-sway: 0.9; --idea-motion: 1.1;
  --cap-kind: confetti; --cap-flash: rgba(255, 245, 170, 0.9); --cap-ring: #ffc400; --cap-sparks: #ff4f7b #22c55e #3b82f6 #facc15 #a855f7 #ff7a1a;
  --cap-dust: none;
  --glow: 0;
  --art-sweep: 1000ms;
  --news: 0.8;  /* how strongly news shows: an Update's new drills on the tab, the button ready again (update.js) */
  --font-body: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Fredoka, Nunito, system-ui, sans-serif;
  --text-size: 1rem; --text-weight: 600; --display-weight: 700;
  --card-bg: #ffffff;
  --card-solid: #ffffff;
  --card-line: #f0e4d7;
  --card-radius: 22px;
  --card-shadow: 0 6px 0 #f0e4d7, 0 18px 36px rgba(124, 58, 237, 0.07);
  --card-blur: none;
  --ctl-bg: #ffffff; --ctl-line: #eadfd2; --ctl-radius: 14px; --ctl-depth: 4px; --ctl-weight: 700;
  --ctl-hover: none;
  --primary-bg: #22c55e; --primary-fg: #ffffff; --primary-line: #16a34a; --primary-shadow: none; --primary-depth: 5px;
  --sitebtn-fill: #ffffff; --sitebtn-line: #747775; --sitebtn-ink: #1f1f1f; --sitebtn-light: inline-block; --sitebtn-dark: none;  /* another site's sign-in button: Google's light */
  --header-bg: rgba(255, 255, 255, 0.85); --header-line: transparent; --header-shadow: 0 4px 0 #f0e4d7; --header-blur: blur(10px);
  --nav-radius: 999px; --nav-active-bg: #7c3aed; --nav-active-fg: #ffffff; --nav-active-shadow: 0 3px 0 #5b21b6; --nav-active-line: transparent;
  --board-frame: 0 solid transparent; --board-radius: 20px;
  --board-shadow: 0 9px 0 #d6c6b5, 0 26px 50px rgba(124, 58, 237, 0.16);
  --bar-track: #f1e7dc; --bar-height: 14px;
  --s-rapid: #7c3aed; --s-blitz: #ea6a0c; --s-classical: #0284c7; --s-daily: #d6286f; --s-bullet: #c99400;
  /* a sunny sky: the sun's yellow, the sky's blue, pink pop-art dots, and soap bubbles that burst at every move */
  --backdrop-scene: sunny;
  --fluid-1: #ffd36b; --fluid-2: #cfe6ff; --fluid-3: #ffcde0; --fluid-ribbon: #ffe7f3;
  --fluid-strength: 0.85; --fluid-ribbons: 0.4; --fluid-edges: 0.45; --fluid-speed: 0.8;
}

:root[data-look="quiet"] {
  color-scheme: light;
  /* a study in the morning: old chess books open on a desk, close up and tilted, their diagrams and notation printed
     like an old newspaper's, faded into warm paper so text on them reads; over them the window's light falls from the
     upper left in four panes, a plant's shadow in the sun, the room cooler away from it (backdrop.js's "study") */
  --bg: #f6f1e7;
  --bg-photo: url("looks/quiet-desk.6de0fdf74d92.webp") center / cover no-repeat;
  --bg-art: linear-gradient(118deg, transparent 18%, rgba(255, 243, 214, 0.7) 30% 56%, transparent 68%),
    radial-gradient(1300px 900px at 30% 20%, transparent 50%, rgba(120, 104, 74, 0.10)),
    linear-gradient(180deg, #f8f4ea, #f1ebde);
  --panel: #fbf8f1; --panel-2: #fffdf8;
  --text: #25302b; --muted: #5d675f; --line: #e3dccb;
  --accent: #3f6b57; --accent-2: #b25830; --on-accent: #fbf8f1;
  --win: #4e8b63; --loss: #b4483a; --c1: #c9952f; --c2: #c9783d; --c3: #b4483a; --info: #3d7aa8;
  --last: rgba(217, 164, 65, 0.42); --sel: rgba(63, 107, 87, 0.38); --good: rgba(78, 139, 99, 0.5); --bad: rgba(180, 72, 58, 0.45);
  /* a matte board, cream and sage, like paper over card */
  --sq-light: #ede3cf; --sq-dark: #8fa89a;
  --land-bounce: 0;
  --arrow-best: #3f8f5f; --arrow-played: #c0503a; --arrow-answer: #3d7aa8; --arrow-mine: #c9952f; --arrow-alt: #8a6bb0;
  --arrow-warn: #c98a2e; --arrow-guard: #3f8f8a; --arrow-alpha: 0.82; --arrow-shade: 0.18;
  --arrow-halo: 0.14; --arrow-spark: 0.45; --arrow-pulse-ms: 2600; --arrow-sway: 0.45; --idea-motion: 0.4;  /* ink, not light */
  --cap-kind: ink; --cap-flash: rgba(255, 249, 230, 0.85); --cap-ring: rgba(63, 107, 87, 0.5); --cap-sparks: rgba(63, 107, 87, 0.28);
  --cap-dust: none;
  --glow: 0;
  --art-sweep: 1600ms;
  --news: 0.35;  /* how strongly news shows: an Update's new drills on the tab, the button ready again (update.js) */
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Newsreader, Georgia, "Times New Roman", serif;
  --text-size: 1.0625rem; --text-weight: 400; --display-weight: 600;
  --card-bg: #fbf8f1;
  --card-solid: #fbf8f1;
  --card-line: #e6dfcf;
  --card-radius: 14px;
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 3px rgba(60, 50, 30, 0.06), 0 12px 30px rgba(60, 50, 30, 0.07);
  --card-blur: none;
  --ctl-bg: #fffdf8; --ctl-line: #dcd3c1; --ctl-radius: 10px; --ctl-depth: 1px; --ctl-weight: 600;
  --ctl-hover: 0 0 0 3px rgba(63, 107, 87, 0.14);
  --primary-bg: linear-gradient(180deg, #c36839, #a8502b); --primary-fg: #fffaf3; --primary-line: #974522;
  --sitebtn-fill: #ffffff; --sitebtn-line: #747775; --sitebtn-ink: #1f1f1f; --sitebtn-light: inline-block; --sitebtn-dark: none;  /* another site's sign-in button: Google's light */
  --primary-shadow: 0 6px 16px rgba(178, 88, 48, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25); --primary-depth: 1px;
  --header-bg: rgba(246, 241, 231, 0.88); --header-line: #e3dccb; --header-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); --header-blur: blur(10px);
  --nav-radius: 999px; --nav-active-bg: #3f6b57; --nav-active-fg: #fbf8f1; --nav-active-shadow: none; --nav-active-line: transparent;
  --board-frame: 0 solid transparent; --board-radius: 8px;
  --board-shadow: 0 0 0 1px rgba(60, 50, 30, 0.14), 0 2px 4px rgba(60, 50, 30, 0.06), 0 22px 46px rgba(60, 50, 30, 0.15);
  --bar-track: #ece5d6; --bar-height: 9px;
  --s-rapid: #3f6b57; --s-blitz: #c9783d; --s-classical: #3d7aa8; --s-daily: #b4483a; --s-bullet: #8a6bb0;
  /* the study (backdrop.js): the sun's warm light, the cool of the room away from it, the plant's shadow, the dust in
     the light; how bright the sun, how much dust, how dark the corners, how fast the leaves and the hours move */
  --backdrop-scene: study;
  --fluid-1: #fff1cf; --fluid-2: #dfe7e0; --fluid-3: #6f8a7a; --fluid-ribbon: #fffbf0;
  --fluid-strength: 0.8; --fluid-ribbons: 0.55; --fluid-edges: 0.4; --fluid-speed: 0.55;
}
@media (max-aspect-ratio: 4/5) {
  :root[data-look="quiet"] { --bg-photo: url("looks/quiet-desk-tall.a0215b366b07.webp") center / cover no-repeat; } /* the same, upright */
}

/* ---------- Night Arcade's own: a gradient name, and a glow on whatever just happened ---------- */
[data-look="arcade"] h1 {
  background: linear-gradient(90deg, #67e8f9, #a855f7 55%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-look="arcade"] h1 .mark { box-shadow: 0 0 16px rgba(168, 85, 247, 0.6); }
[data-look="arcade"] .pbar .mastered { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 0 14px rgba(52, 211, 153, 0.7); }
[data-look="arcade"] .pbar .novice { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 12px rgba(251, 191, 36, 0.55); }
[data-look="arcade"] .pbar .blunder { background: linear-gradient(90deg, #f43f5e, #fb7185); box-shadow: 0 0 12px rgba(251, 113, 133, 0.6); }
[data-look="arcade"] .ring .fill { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.8)); }
[data-look="arcade"] .level-text .drill-num { color: var(--accent); text-shadow: 0 0 14px rgba(34, 211, 238, 0.6); }
[data-look="arcade"] .dgame-moves .lm.you { text-shadow: 0 0 10px rgba(34, 211, 238, 0.7); }
[data-look="arcade"] .dgame-moves .lm.last, [data-look="arcade"] .dgame-moves .lm.now { background: rgba(34, 211, 238, 0.22); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.5); }
[data-look="arcade"] .streak.run.t2, [data-look="arcade"] .streak.run.t3, [data-look="arcade"] .streak.run.t4 { box-shadow: 0 0 16px rgba(251, 146, 60, 0.35); }

/* ---------- Grandmaster's Club's own: a gilded name, serif column heads, a gold medallion ---------- */
[data-look="club"] h1 { color: var(--accent); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 24px rgba(228, 180, 69, 0.25); }
[data-look="club"] nav a { letter-spacing: 0.02em; }
[data-look="club"] th { color: var(--accent); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
[data-look="club"] .pbar { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
[data-look="club"] .pbar .mastered { background: linear-gradient(180deg, #a3f0b6, #5cc27a); }
[data-look="club"] .pbar .novice { background: linear-gradient(180deg, #f7da8a, #d4a136); }
[data-look="club"] .pbar .blunder { background: linear-gradient(180deg, #f7a08c, #d9604a); }
[data-look="club"] .level-text b { color: var(--accent); }
[data-look="club"] .level-text .drill-num { color: var(--info); }
[data-look="club"] .ruler .mark.you span { background: var(--accent); color: var(--on-accent); }
[data-look="club"] .ruler .mark.you::after { border-top-color: var(--accent); }
[data-look="club"] .dgame-moves .lm.last, [data-look="club"] .dgame-moves .lm.now { background: rgba(228, 180, 69, 0.28); }
[data-look="club"] .badge-big { background: radial-gradient(circle at 35% 30%, #f7e2a0, #c99327 70%); box-shadow: 0 6px 18px rgba(228, 180, 69, 0.35); }
[data-look="club"] .badge-big .cup { fill: #3a2718; }
[data-look="club"] #d-next, [data-look="club"] .primary, [data-look="club"] .button-link { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }

/* the verdict and its mark glow in Night Arcade */
[data-look="arcade"] .verdict { text-shadow: 0 0 22px color-mix(in srgb, var(--verdict) 70%, transparent); }
[data-look="arcade"] .verdict .vmark { box-shadow: 0 0 24px color-mix(in srgb, var(--verdict) 75%, transparent); }
[data-look="arcade"] .note[class*="v-"] { box-shadow: var(--card-shadow), -8px 0 30px -12px var(--verdict); }
[data-look="arcade"] .plan-note { border-left-color: var(--accent-2); }
[data-look="pop"] button:active, [data-look="pop"] .button-link:active { transform: translateY(2px); border-bottom-width: 2px; }
[data-look="pop"] button:disabled:active { transform: none; border-bottom-width: var(--ctl-depth); }
[data-look="pop"] .ldot, [data-look="pop"] .ldot:active { border-width: 2px; transform: none; }
[data-look="arcade"] .pill.W { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.5), 0 0 12px rgba(52, 211, 153, 0.22); }

/* ---------- Sunny Pop's own: chunky, pressable, and round ---------- */
[data-look="pop"] h1 { color: var(--accent); }
[data-look="pop"] .note[class*="v-"] { border: 2px solid color-mix(in srgb, var(--verdict) 45%, #f0e4d7); box-shadow: 0 6px 0 color-mix(in srgb, var(--verdict) 35%, #f0e4d7); }
[data-look="pop"] .plan-note { background: #f5efff; border-color: #e4d6ff; box-shadow: 0 5px 0 #e4d6ff; color: #5b4b84; }
[data-look="pop"] .pbar { padding: 3px; box-sizing: content-box; }
[data-look="pop"] .pbar .mastered { background: #22c55e; }
[data-look="pop"] .pbar .junior, [data-look="pop"] .legend .junior { background: #86efac; opacity: 1; }
[data-look="pop"] .pbar .novice { background: #facc15; }
[data-look="pop"] .pbar .blunder { background: #fb7185; }
[data-look="pop"] .verdict .vmark { min-width: 44px; height: 44px; border-radius: 16px; box-shadow: 0 4px 0 color-mix(in srgb, var(--verdict) 70%, #000); }
[data-look="pop"] .level-text .drill-num { color: var(--info); }
[data-look="pop"] .ruler .track { height: 10px; top: 26px; opacity: 1; background: linear-gradient(90deg, #22c55e, #facc15 50%, #fb7185); }
[data-look="pop"] .ruler .mark.you span { background: var(--accent); }
[data-look="pop"] .ruler .mark.you::after { border-top-color: var(--accent); }
[data-look="pop"] .dgame-moves .lm.last, [data-look="pop"] .dgame-moves .lm.now { background: #fde68a; }
[data-look="pop"] .ring circle { stroke-width: 12; }
[data-look="pop"] .waitcard .tip { background: #f5efff; }
[data-look="pop"] th { font-weight: 800; }
/* the coordinates sit on the tiles, clear of their rounded corners and their lips */
[data-look="pop"] .sq .coord.rank { left: 9%; top: 7%; }
[data-look="pop"] .sq .coord.file { right: 9%; bottom: 12%; }
[data-look="pop"] th, [data-look="pop"] td { border-bottom-width: 2px; }

/* ---------- Quiet Hours' own: a serif in sage ink, hairline rules, nothing that shouts ---------- */
[data-look="quiet"] h1 { color: var(--accent); letter-spacing: -0.005em; }
[data-look="quiet"] h2, [data-look="quiet"] h3 { letter-spacing: -0.005em; }
[data-look="quiet"] th { color: var(--accent); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
[data-look="quiet"] .pbar { box-shadow: inset 0 1px 1px rgba(60, 50, 30, 0.12); }
[data-look="quiet"] .pbar .mastered { background: #4e8b63; }
[data-look="quiet"] .pbar .novice { background: #d9a441; }
[data-look="quiet"] .pbar .blunder { background: #c0503a; }
[data-look="quiet"] .level-text b, [data-look="quiet"] .level-text .drill-num { color: var(--accent); }
[data-look="quiet"] .dgame-moves .lm.last, [data-look="quiet"] .dgame-moves .lm.now { background: rgba(217, 164, 65, 0.3); }
[data-look="quiet"] .ruler .mark.you span { background: var(--accent); color: var(--on-accent); }
[data-look="quiet"] .ruler .mark.you::after { border-top-color: var(--accent); }
[data-look="quiet"] .badge-big { background: radial-gradient(circle at 35% 30%, #f3e2b8, #c9952f 75%); box-shadow: 0 6px 16px rgba(201, 149, 47, 0.25); }
[data-look="quiet"] .note[class*="v-"] { border-left-width: 3px; }
[data-look="quiet"] .verdict .vmark { box-shadow: 0 2px 0 color-mix(in srgb, var(--verdict) 55%, #3a2f1f); }

/* ---------- a lesson rewinding (style.css .rewind, lesson.js showRewind): each look's own way back ---------- */
/* Night Arcade: a VHS tape rewinding, neon badge and rolling scan lines over a hue-shifted board */
[data-look="arcade"] .rewind { background: rgba(9, 12, 30, 0.9); color: #67e8f9; text-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.65), 0 0 24px rgba(34, 211, 238, 0.45); }
[data-look="arcade"] #d-board.rewinding { filter: hue-rotate(-28deg) saturate(1.4) contrast(1.06); }
[data-look="arcade"] #d-board.rewinding::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(103, 232, 249, 0.12) 0 2px, transparent 2px 5px);
  animation: vhs-roll 0.45s linear infinite; }
@keyframes vhs-roll { to { background-position: 0 -20px; } }
/* Sunny Pop: a bouncy candy badge, the board a touch brighter */
[data-look="pop"] .rewind { background: #7c3aed; color: #fff; box-shadow: 0 4px 0 #5b21b6, 0 10px 22px rgba(124, 58, 237, 0.35); }
[data-look="pop"] #d-board.rewinding { filter: saturate(1.25) brightness(1.06); }
/* The Grandmaster's Club: back in time, an old photograph's sepia and a gold-edged plaque */
[data-look="club"] .rewind { background: #231904; color: var(--accent); box-shadow: 0 0 0 1px rgba(228, 180, 69, 0.7), 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: var(--font-display); letter-spacing: 0.01em; }
[data-look="club"] #d-board.rewinding { filter: sepia(0.5) brightness(0.93); }
/* Quiet Hours: a calm card that doesn't tug, the board softly faded */
[data-look="quiet"] .rewind { background: #fbf8f1; color: var(--accent); box-shadow: 0 0 0 1px rgba(63, 107, 87, 0.35), 0 6px 18px rgba(60, 50, 30, 0.18); }
[data-look="quiet"] .rewind.go svg { animation: none; }
[data-look="quiet"] #d-board.rewinding { filter: saturate(0.55) brightness(1.03); }