/* Accent theme: orange (default) or blue. Switch with ?theme=blue / ?theme=orange or the header dot button. */
:root{--acc:#ff5a14;--acc2:#ff7a3d;--acc-rgb:255,90,20;--acc2-rgb:255,122,61}
html[data-accent="blue"]{--acc:#2dbdd4;--acc2:#62d6ea;--acc-rgb:45,189,212;--acc2-rgb:98,214,234}
html[data-accent="blue"][data-theme="light"]{--acc2:#0e7f94}
@media (prefers-color-scheme:light){html[data-accent="blue"]:not([data-theme="dark"]){--acc2:#0e7f94}}
html[data-accent="blue"] .err{background:#0d1d22;border-color:#1d4a55;color:#8fe0ee}
#accentBtn{color:var(--acc);font-size:14px}

/* Pill light/dark toggle (sun/moon + sliding knob). Accent colour follows the orange/blue theme. */
.themebtn.tgl{align-self:center;vertical-align:middle;position:relative;width:64px;height:32px;padding:0;border-radius:999px;overflow:hidden;font-size:0;
background:#fbfaf7;border:1px solid rgba(120,140,160,.30);box-shadow:0 2px 8px rgba(30,40,60,.12),inset 0 1px 0 rgba(255,255,255,.9);
transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.tgl .ic{position:absolute;top:50%;left:9px;width:18px;height:18px;margin-top:-9px;transition:left .3s cubic-bezier(.4,0,.2,1)}
.tgl .ic svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--acc);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s ease,stroke .3s ease}
.tgl .moon{opacity:0}
.tgl .kn{position:absolute;top:50%;left:calc(100% - 25px);width:22px;height:22px;margin-top:-11px;border-radius:50%;box-sizing:border-box;border:3px solid var(--acc);background:rgba(var(--acc-rgb),.22);transition:left .3s cubic-bezier(.4,0,.2,1),border-color .3s ease,background .3s ease}
.themebtn.tgl:hover{box-shadow:0 3px 12px rgba(30,40,60,.18),inset 0 1px 0 rgba(255,255,255,.9)}
.themebtn.tgl:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
html[data-mode="dark"] .themebtn.tgl{background:linear-gradient(135deg,#2a3f5c,#3d5778);border-color:rgba(150,180,215,.45);box-shadow:0 2px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
html[data-mode="dark"] .tgl .ic{left:calc(100% - 27px)}
html[data-mode="dark"] .tgl .sun{opacity:0}
html[data-mode="dark"] .tgl .moon{opacity:1;stroke:#f4f6f8}
html[data-mode="dark"] .tgl .kn{left:3px;border-color:#f4f6f8;background:rgba(110,140,185,.7)}
@media (prefers-reduced-motion:reduce){.themebtn.tgl,.tgl .ic,.tgl .kn,.tgl .ic svg{transition:none}}