html[data-theme="dark"] { color-scheme: dark; }

img[data-logo="dark"] { display: none; }
html[data-theme="dark"] img[data-logo="light"] { display: none; }
html[data-theme="dark"] img[data-logo="dark"] { display: block; }

/* smooth theme crossfade — clicking mid-transition reverses from the blended frame */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
::view-transition-old(root) { animation-name: checksms-vt-out; }
::view-transition-new(root) { animation-name: checksms-vt-in; }
@keyframes checksms-vt-out { to { opacity: 0; } }
@keyframes checksms-vt-in { from { opacity: 0; } }


/* fallback crossfade: theme vars interpolate — re-clicking mid-flight reverses from the live value */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #f5f6f2; }
@property --surface { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --raised { syntax: "<color>"; inherits: true; initial-value: #eef0e9; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #151b15; }
@property --body { syntax: "<color>"; inherits: true; initial-value: #475044; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #626d61; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #dce1d7; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #496a1f; }
@property --lime { syntax: "<color>"; inherits: true; initial-value: #d0ff82; }
@property --lime-ink { syntax: "<color>"; inherits: true; initial-value: #16200e; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: #759b3b18; }
html { transition: --bg 1s ease, --surface 1s ease, --raised 1s ease, --ink 1s ease, --body 1s ease, --muted 1s ease, --line 1s ease, --accent 1s ease, --lime 1s ease, --lime-ink 1s ease, --glow 1s ease; }

.theme-toggle {
    position: fixed; right: 20px; bottom: 20px; z-index: 60;
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid #dfe4d0; border-radius: 50%;
    background: #fff; color: #6b755e; cursor: pointer;
    box-shadow: 0 8px 24px #14200f14;
    transition: border-color .15s, color .15s, transform .05s, box-shadow .15s;
}
.theme-toggle svg { grid-area: 1/1; transition: opacity .28s ease, transform .28s ease; }
.theme-toggle .t-moon { opacity: 1; transform: none; }
.theme-toggle .t-sun { opacity: 0; transform: rotate(80deg) scale(.55); }
.theme-toggle:hover { color: #1a2316; border-color: #c7ccb4; }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle:focus-visible { outline: 2px solid #496a1f; outline-offset: 3px; }
html[data-theme="dark"] .theme-toggle { border-color: #3a4a2d; background: #1d2718; color: #b9bfa9; box-shadow: 0 8px 24px #00000040; }
html[data-theme="dark"] .theme-toggle:hover { color: #e9efdd; border-color: #4a5639; }
html[data-theme="dark"] .theme-toggle .t-sun { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle .t-moon { opacity: 0; transform: rotate(-80deg) scale(.55); }