/* Shared appearance tokens. The legacy --green aliases keep all engines consistent. */
:root{
  color-scheme:light;
  --ink:#21313f;--muted:#536775;--paper:#f5f7fa;--white:#fff;--line:#d7e0e7;--soft:#eaf0f5;
  --field-bg:#f8fafc;--field-border:#879dad;--grid-border:#708b9d;--badge-bg:#3c647e;
  --accent:#245c85;--accent-hover:#194664;--accent-soft:#e5f1fa;--accent-bright:#9bd2f6;--on-accent:#fff;
  --green:var(--accent);--green-dark:var(--accent-hover);--focus:var(--accent);
  --brand-text:#f0f7fc;--brand-bg:#20313d;--illustration-frame:#29475b;--illustration-dots:#abc2d1;
  --tag-warm-bg:#f5ead8;--tag-warm-text:#755521;--tag-cool-bg:#e8ebf6;--tag-cool-text:#545c83;
  --success-bg:#eef6eb;--success-text:#285435;--success-border:#55815f;
  --warning-bg:#fff2df;--warning-text:#82421f;--warning-border:#a66130;
  --card-shadow:#203a330d;--dialog-shadow:#10282030;--backdrop:#101c29bd;
}
:root[data-accent=green]{--accent:#296145;--accent-hover:#1c4b36;--accent-soft:#e5f0e7;--accent-bright:#addec0}
:root[data-accent=violet]{--accent:#6b45a1;--accent-hover:#52337e;--accent-soft:#efe9f8;--accent-bright:#cbb3f5}
:root[data-accent=amber]{--accent:#805619;--accent-hover:#63400e;--accent-soft:#f7eedf;--accent-bright:#edc27c}
:root[data-accent=rose]{--accent:#9b3f64;--accent-hover:#792e4d;--accent-soft:#f8e9ee;--accent-bright:#f2acc7}
:root[data-accent=teal]{--accent:#14676b;--accent-hover:#104f52;--accent-soft:#e2f0f0;--accent-bright:#91d5d7}
:root[data-theme=dark]{
  color-scheme:dark;
  --ink:#e8f0f5;--muted:#b3c0c9;--paper:#0e1519;--white:#192328;--line:#35444d;--soft:#233039;
  --field-bg:#121c22;--field-border:#657e8e;--grid-border:#6b8492;--badge-bg:#334e5f;
  --accent:#9bd2f6;--accent-hover:#b7e1fc;--accent-soft:#1c3544;--on-accent:#102027;
  --brand-bg:#253742;--illustration-frame:#476171;--illustration-dots:#41545f;
  --tag-warm-bg:#3a3023;--tag-warm-text:#f0ce93;--tag-cool-bg:#2b2942;--tag-cool-text:#c5c3f4;
  --success-bg:#1d3427;--success-text:#b6e2bf;--success-border:#77af86;
  --warning-bg:#3c2b20;--warning-text:#ffd0a1;--warning-border:#c99564;
  --card-shadow:#0000002e;--dialog-shadow:#00000070;--backdrop:#050c13cb;
}
:root[data-theme=dark][data-accent=green]{--accent:#addec0;--accent-hover:#c7edd2;--accent-soft:#21372e}
:root[data-theme=dark][data-accent=violet]{--accent:#cbb3f5;--accent-hover:#ded0ff;--accent-soft:#302741}
:root[data-theme=dark][data-accent=amber]{--accent:#edc27c;--accent-hover:#f6dbaa;--accent-soft:#3b3020}
:root[data-theme=dark][data-accent=rose]{--accent:#f2acc7;--accent-hover:#ffd0df;--accent-soft:#3c2632}
:root[data-theme=dark][data-accent=teal]{--accent:#91d5d7;--accent-hover:#b6e9e7;--accent-soft:#1d3537}
/* Native system fallback when scripts are disabled. */
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--ink:#e8f0f5;--muted:#b3c0c9;--paper:#0e1519;--white:#192328;--line:#35444d;--soft:#233039;--field-bg:#121c22;--field-border:#657e8e;--grid-border:#6b8492;--accent:#9bd2f6;--accent-hover:#b7e1fc;--accent-soft:#1c3544;--on-accent:#102027;--success-bg:#1d3427;--success-text:#b6e2bf;--warning-bg:#3c2b20;--warning-text:#ffd0a1}}
body{background:var(--paper);color:var(--ink)}
.brand-mark{background:var(--brand-bg);color:var(--brand-text)}
.brand-mark span{color:var(--accent-bright)}
.hero-visual,.learning-note{background:var(--accent-soft)}
.filter.active span,.filter[data-filter=new].active span{background:var(--badge-bg);color:var(--brand-text)}
#TimerText,#matching-timer{background:var(--accent);color:var(--on-accent)}
.CrosswordGrid,.CrosswordGrid .BlankCell,.crossword-block{background:var(--brand-bg)}
.match-card.is-correct{border-color:var(--success-border)}
.is-correct .match-status{color:var(--success-text)}
.match-card img,#MatchDiv img{background:#fff;border-radius:8px}
input::placeholder{color:var(--muted);opacity:1}
.activity-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
/* Controls match the compact pill-shaped reference. */
.site-header{flex-wrap:wrap;column-gap:20px;row-gap:16px}
.header-link{margin-left:auto}
.appearance-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mode-switch{display:flex;gap:2px;align-items:center;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.mode-button{display:grid;place-items:center;width:42px;height:42px;min-height:42px;border:0;padding:0;background:transparent;color:var(--muted);border-radius:50%}
.mode-button:hover{background:var(--soft);color:var(--ink)}
.mode-button[aria-pressed=true]{background:var(--accent-bright);color:#102027}
.mode-button svg,.accent-chevron{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.accent-picker{position:relative}
.accent-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:174px;min-height:54px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);padding:10px 14px;font-size:12px;font-weight:700;white-space:nowrap}
.accent-trigger:hover,.accent-trigger[aria-expanded=true]{border-color:var(--field-border)}
.accent-swatch{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--swatch);border:1px solid #ffffff4d;flex-shrink:0}
.current-accent{background:var(--accent-bright)}
.accent-chevron{width:14px;height:14px;flex-shrink:0}
.accent-menu{position:absolute;right:0;top:calc(100% + 8px);width:230px;background:var(--white);border:1px solid var(--field-border);border-radius:15px;padding:7px;box-shadow:0 12px 32px var(--dialog-shadow);z-index:100}
.accent-option{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:13px;text-align:left}
.accent-option:hover,.accent-option:focus-visible{background:var(--soft)}
.accent-option[aria-checked=true]{background:var(--accent-soft);font-weight:650}
.accent-check{margin-left:auto;color:var(--accent);visibility:hidden}
.accent-option[aria-checked=true] .accent-check{visibility:visible}
@media(max-width:900px){.appearance-controls{width:100%;justify-content:flex-end;order:3}}
@media(max-width:600px){.appearance-controls{gap:8px}.mode-switch{padding:4px}.mode-button{width:38px;height:38px;min-height:38px}.accent-trigger{width:146px;min-height:48px;padding:9px 10px;gap:7px;font-size:11px}.accent-menu{width:230px}}
@media print{
  :root,:root[data-theme],:root[data-accent],:root[data-theme][data-accent]{color-scheme:light;--ink:#21313f;--muted:#536775;--paper:#fff;--white:#fff;--line:#c7d1da;--soft:#eaf0f5;--field-bg:#fff;--field-border:#879dad;--accent:#245c85;--accent-hover:#194664;--accent-soft:#e5f1fa;--on-accent:#fff;--success-bg:#eef6eb;--success-text:#285435;--warning-bg:#fff2df;--warning-text:#82421f;--brand-bg:#20313d;--grid-border:#708b9d;--tag-warm-bg:#f5ead8;--tag-warm-text:#755521;--tag-cool-bg:#e8ebf6;--tag-cool-text:#545c83}
  .appearance-controls{display:none!important}
}