/* Same compact icon treatment and path morph as the reference site. */
:root{color-scheme:light}
.appearance-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:8px;border-radius:6px;color:var(--muted);flex:none;transition:background-color .15s,color .15s,scale .15s cubic-bezier(.23,1,.32,1)}
.appearance-toggle:hover{background:var(--line);color:var(--ink)}
.appearance-toggle:active{scale:.96}
.appearance-toggle svg{width:16px;height:16px;flex:none}
.appearance-toggle{position:relative}
.appearance-tooltip{position:absolute;top:calc(100% + 7px);right:0;z-index:50;width:max-content;max-width:calc(100vw - 40px);padding:5px 9px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);box-shadow:0 3px 12px #00000014;font:12px/1.5 var(--sans);white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .2s,visibility .15s}
.appearance-toggle:focus-visible .appearance-tooltip{visibility:visible;opacity:1;transform:translateY(0)}
@media(hover:hover){.appearance-toggle:hover .appearance-tooltip{visibility:visible;opacity:1;transform:translateY(0);transition-delay:.2s}}
@media(prefers-reduced-motion:reduce){.appearance-tooltip{transition:none;transform:none}}
html[data-color-scheme="dark"]{color-scheme:dark;--paper:#171918;--white:#212422;--ink:#eceee8;--muted:#a8afa5;--line:#383e38;--red:#ed8d77;--surface:#212622;--surface-hover:#2b312b}
html[data-color-scheme="dark"] body[data-theme]{--theme-paper:#171918!important;--theme-tint:#212622!important;--theme-ink:#eceee8!important}
html[data-color-scheme="dark"] body[data-theme="rrzxs"]{--theme-accent:#cdd4c8!important}
html[data-color-scheme="dark"] body[data-theme="rrzxs"] .button.primary,html[data-color-scheme="dark"] body[data-theme="rrzxs"] .sidebar-series a.active,html[data-color-scheme="dark"] body[data-theme="rrzxs"] .calendar-day.selected,html[data-color-scheme="dark"] body[data-theme="rrzxs"] .calendar-week-button[aria-pressed=true]{color:var(--paper)}
html[data-color-scheme="dark"] .edition-detail{--edition-color:#cdd4c8!important}
html[data-color-scheme="dark"] body[data-theme="rrzxs"] .edition-detail{--edition-color:#cdd4c8!important}
html[data-color-scheme="dark"] body[data-theme="xwds"] .edition-detail{--edition-color:#ffdf28!important}
html[data-color-scheme="dark"] body[data-theme="beer"] .edition-detail{--edition-color:#dfb453!important}
html[data-color-scheme="dark"] :is(.poster-stage,.detail-art,.edition-detail .detail-art,.card-empty,.update-note,.search-form,.work-note,.mobile-month-heading input){background:var(--surface)}
html[data-color-scheme="dark"] .poster-stage:hover,html[data-color-scheme="dark"] :is(.icon-button:hover:not(:disabled),.button.secondary:hover,.filter-tabs button:hover:not(.active),.sidebar-series a:hover:not(.active)){background:var(--surface-hover)}
html[data-color-scheme="dark"] :is(.calendar-day.has-record,.mobile-date-sheet .calendar-day.has-record){background:var(--surface-hover)}
html[data-color-scheme="dark"] .calendar-day.selected,html[data-color-scheme="dark"] .mobile-date-sheet .calendar-day.selected{background:var(--ink);color:var(--paper);border-color:var(--ink)}
html[data-color-scheme="dark"] :is(.art-caption,.reading-section>p,.work-note p){color:var(--muted)}
html[data-color-scheme="dark"] .calendar-day.outside{color:#899286}
html[data-color-scheme="dark"] :is(.stage-hint,.skip-link,.filter-tabs button.active,.button.primary,.pagination button.active,.sidebar-series a.active,.calendar-day.selected,.toast,.share-dialog button){color:var(--paper)}
html[data-color-scheme="dark"] body[data-theme] .button.primary:hover{background:var(--ink);color:var(--paper)}
html[data-color-scheme="dark"] .calendar-day.selected:after{background:currentColor}
html[data-color-scheme="dark"] :is(.image-dialog,.share-dialog){background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-color-scheme="dark"] .mobile-date-trigger{background:var(--surface);border-color:var(--line)}
html[data-color-scheme="dark"] .mobile-date-trigger:hover{background:var(--surface-hover)}
html[data-color-scheme="dark"] .detail-image-note{border-color:var(--line)}
html[data-color-scheme="dark"] ::selection{background:#526044;color:#fff}
@media(max-width:760px){.appearance-toggle{margin-left:auto;align-self:flex-start;margin-top:8px;padding:0 8px}}
@media(prefers-reduced-motion:reduce){.appearance-toggle{transition:none}}