/* Website appearance control, distinct from the app comparison. */
.site-theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:20px; min-height:40px; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; color:inherit; }
.header nav :is(a, .site-theme-toggle):hover { color:#2864c2; }
html[data-theme="dark"] .header nav :is(a, .site-theme-toggle):hover { color:var(--dark-accent); }
.theme-icon { width:20px; height:20px; flex-shrink:0; }
.theme-icon-sun { display:none; }
html[data-theme="dark"] .theme-icon-sun { display:block; }
html[data-theme="dark"] .theme-icon-moon { display:none; }
.image-comparison { position:relative; aspect-ratio:16/10; overflow:hidden; isolation:isolate; }
.image-comparison>img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; pointer-events:none; }
.image-comparison>.comparison-light { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.comparison-label { position:absolute; top:14px; padding:4px 10px; border-radius:5px; font-size:10px; font-weight:600; pointer-events:none; box-shadow:0 2px 8px #0002; }
.comparison-label-light { left:14px; background:#fffffff2; color:#243850; border:1px solid #dbe3ec; }
.comparison-label-dark { right:14px; background:#182332f2; color:#e6eef9; border:1px solid #4e5b6c; }
.comparison-divider { position:absolute; inset-block:0; left:var(--split); width:2px; transform:translateX(-50%); background:white; box-shadow:0 0 0 1px #182c4344,0 0 12px #0004; pointer-events:none; }
.comparison-handle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:48px; height:48px; border:3px solid #fff; border-radius:50%; background:#2f6fce; color:#fff; box-shadow:0 3px 18px #10294044; }
.comparison-handle svg { width:29px; height:19px; }
.comparison-range { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:ew-resize; touch-action:pan-y; }
.image-comparison:has(.comparison-range:focus-visible) { outline:3px solid #6ba2ff; outline-offset:-4px; }
.image-comparison:has(.comparison-range:focus-visible) .comparison-handle { box-shadow:0 0 0 4px #163c74,0 0 0 7px #9ec4ff; }
.comparison-caption { margin:15px 0 0; display:flex; align-items:center; justify-content:center; gap:9px; color:#697d96; font-size:11px; }
.comparison-caption>span { color:#447ac4; font-size:17px; }
html[data-theme="dark"] .comparison-caption { color:#a5b6ca; }
html[data-theme="dark"] .comparison-caption>span { color:#8bb8fb; }
@media(max-width:1050px) { .header { gap:18px; } .header nav { gap:22px; } }
@media(max-width:740px) { .comparison-caption { font-size:10px; gap:6px; } .comparison-label { top:9px; padding:3px 8px; font-size:9px; } .comparison-label-light { left:9px; } .comparison-label-dark { right:9px; } .comparison-handle { width:42px; height:42px; } }
@media(max-width:380px) { .header .brand { font-size:21px; gap:7px; } .header .button { padding:10px; gap:8px; } }