/* The light theme remains the baseline. Only the shared switch is unscoped. */
html[data-color-mode="light"]{color-scheme:light}
html[data-color-mode="dark"]{color-scheme:dark;background:#171b1a}
.guide-v5 .theme-switch{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.guide-v5 .theme-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.guide-v5 .theme-switch:hover{background:var(--panel)}
.guide-v5 .theme-switch .theme-sun{display:none}
html[data-color-mode="dark"] .theme-switch .theme-moon{display:none}
html[data-color-mode="dark"] .theme-switch .theme-sun{display:block}

html[data-color-mode="dark"] .guide-v5,
html[data-color-mode="dark"] .guide-v5.is-case{
  --bg:#171b1a;--ink:#eef1eb;--muted:#a4afa7;--line:#343d37;--panel:#202723;
  --dark-surface:#202723;--dark-elevated:#28312b;--dark-accent:#a6cbc8;
  background:var(--bg);color:var(--ink);
}
html[data-color-mode="dark"] .guide-v5 ::selection{background:#a6cbc84d;color:#fff}
html[data-color-mode="dark"] .guide-v5 :is(button,a,input,textarea,select):focus-visible{outline-color:var(--dark-accent)}
html[data-color-mode="dark"] .guide-v5 .nav{border-color:var(--line)}
html[data-color-mode="dark"] .guide-v5 .nav .keysoteka-brand{color:var(--ink)}
html[data-color-mode="dark"] .guide-v5 .keysoteka-sign{filter:brightness(0) invert(.94)}
html[data-color-mode="dark"] .guide-v5 .navlinks a{color:#c7d0c9}
html[data-color-mode="dark"] .guide-v5 .navlinks a:hover{color:var(--ink)}
html[data-color-mode="dark"] .guide-v5 .hero h1.animated-headline{color:var(--ink)}
html[data-color-mode="dark"] .guide-v5 .hero .intro{color:var(--dark-accent)}
html[data-color-mode="dark"] .guide-v5 .hero-search{background:var(--panel);border-color:#3a4640}
html[data-color-mode="dark"] .guide-v5 .hero-search-hint{color:#aebdb5}
html[data-color-mode="dark"] .guide-v5 :is(.hero-search,.catalog-search):focus-within{outline-color:var(--dark-accent)}
html[data-color-mode="dark"] .guide-v5 .heroart{filter:brightness(.8) saturate(.85)}
html[data-color-mode="dark"] .guide-v5 .herofoot{border-color:var(--line);color:var(--muted)}
html[data-color-mode="dark"] .guide-v5 :is(.catalog-kicker,.catalog-count){color:var(--muted)}
html[data-color-mode="dark"] .guide-v5 .catalog-search{color:var(--muted);border-color:#546159}
html[data-color-mode="dark"] .guide-v5 .catalog-search input::placeholder{color:var(--muted);opacity:1}
html[data-color-mode="dark"] .guide-v5 .catalog-reset{color:var(--dark-accent)}

/* Levels and the colored category index share the same quiet rules and text. */
html[data-color-mode="dark"] .guide-v5 .effort-caption,
html[data-color-mode="dark"] .guide-v5 .effort-caption>span:last-child{color:var(--muted)}
html[data-color-mode="dark"] .guide-v5 .effort-options,
html[data-color-mode="dark"] .guide-v5 .effort-option+.effort-option{border-color:var(--line)}
html[data-color-mode="dark"] .guide-v5 .effort-option{color:#c2cec4}
html[data-color-mode="dark"] .guide-v5 .effort-option[aria-pressed="true"]{background:linear-gradient(95deg,#a8bba111,transparent);color:var(--ink)}
html[data-color-mode="dark"] .guide-v5 .effort-option[aria-pressed="true"]::after{background:#bed0bd}
html[data-color-mode="dark"] .guide-v5 :is(.effort-number,.effort-meta,.effort-text>span){color:var(--muted)}
html[data-color-mode="dark"] .guide-v5 .color-item{color:var(--ink)}
html[data-color-mode="dark"] .guide-v5 .color-item[data-empty="true"] .color-label{color:#b4beb5}
html[data-color-mode="dark"] .guide-v5 .color-item .color-meta{color:var(--muted)}
html[data-color-mode="dark"] .guide-v5 .ribbon .color-grid,
html[data-color-mode="dark"] .guide-v5 .ribbon .color-item:nth-child(n+6){border-color:var(--line)}
html[data-color-mode="dark"] .guide-v5 .ribbon .color-item::before{background:linear-gradient(90deg,color-mix(in srgb,var(--nav-rich) 13%,transparent),transparent)}
html[data-color-mode="dark"] .guide-v5 .color-index .all-filter{color:var(--muted)}
html[data-color-mode="dark"] .guide-v5 .color-index .all-filter[aria-pressed="true"]{color:var(--ink);border-bottom-color:#b5c4b8}
html[data-color-mode="dark"] .guide-v5 .color-index :is(.nav-count,.grid-caption){color:var(--muted)}

/* Color faces retain dark ink; the surrounding descriptions use light ink. */
html[data-color-mode="dark"] .guide-v5 .case-body p{color:#b4beb6}
html[data-color-mode="dark"] .guide-v5 .case-bottom{color:var(--muted)}
html[data-color-mode="dark"] .guide-v5 .case-bottom>span:last-child{color:#c5d8cc}
html[data-color-mode="dark"] .guide-v5 #catalog .case:is(:hover,:focus-within) .case-surface{box-shadow:inset 0 0 0 1px #ffffff10,0 16px 32px -14px #0009}
html[data-color-mode="dark"] .guide-v5 .empty{background:var(--panel);border-color:var(--line)}
html[data-color-mode="dark"] .guide-v5 .empty h3{color:var(--ink)}
html[data-color-mode="dark"] .guide-v5 .empty p{color:var(--muted)}
html[data-color-mode="dark"] .guide-v5 .empty button{color:var(--dark-accent)}
html[data-color-mode="dark"] .guide-v5 .foot{border-color:var(--line);color:var(--muted)}
@media(max-width:700px){.guide-v5 .theme-switch{width:40px;height:40px;margin-left:auto}.guide-v5 .theme-switch+.account-entry{margin-left:0}}
