html[data-layout=notebook]{--print-paper:#fff;--print-shadow:0 7px 23px #1e272a12;--photo-empty:#e5e1dd;--selection:#c9dbe5;--on-air:#bd332e;--offline:#706c68;background:var(--paper)}
html[data-layout=notebook][data-color-scheme=dark]{--paper:#171c1e;--ink:#e5eceb;--muted:#acb8b9;--accent:#a8c7d6;--line:#384446;--soft:#232c30;--print-paper:#242c2f;--print-shadow:0 7px 23px #00000038;--photo-empty:#273033;--selection:#3b555e;--on-air:#ff8b83;--offline:#a8b3b5;scrollbar-color:var(--muted) var(--paper)}
html[data-layout=notebook] ::selection{background:var(--selection);color:var(--ink)}
body[data-layout=notebook] .view-panel[data-view=home] .photo-slideshow{background:var(--print-paper);box-shadow:var(--print-shadow)}
body[data-layout=notebook] .view-panel[data-view=home] .photo-window{background:var(--photo-empty)}
body[data-layout=notebook] .skip-link,
body[data-layout=notebook] .social-link .tooltip{background:var(--ink);color:var(--paper)}
body[data-layout=notebook] .video-poster-button:hover .play-label,
body[data-layout=notebook] .clip-launch:hover .play-label{background:var(--soft)}
body[data-layout=notebook] .player-tools button{color:var(--ink);background:var(--paper)}
body[data-layout=notebook] .player-toolbar .player-tools button{background:transparent}
body[data-layout=notebook] .player-toolbar .player-tools button:hover{background:var(--soft)}
body[data-layout=notebook] .player-notice,
body[data-layout=notebook] .player-loading{background:var(--paper);color:var(--ink)}
body[data-layout=notebook] .stream-status[data-stream-status=on_air]{color:var(--on-air)}
body[data-layout=notebook] .stream-status[data-stream-status=offline]{color:var(--offline)}

.theme-ring{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:44px;height:44px;z-index:30}
.theme-ring button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);padding:0}
.theme-ring button:hover{background:var(--soft)}
.theme-ring button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-ring .icon{width:19px;height:19px}
.theme-trigger{position:relative;z-index:2}
.theme-options{position:absolute;right:0;bottom:0;width:132px;height:132px}
.theme-options button{position:absolute;right:0;bottom:0;transform:translate(var(--ring-x),var(--ring-y));animation:theme-ring-open .18s var(--ease) both}
.theme-options button[aria-pressed=true]{border-width:2px;border-color:var(--accent);background:var(--soft);color:var(--accent)}
.theme-options [data-theme-choice=system]{--ring-x:0px;--ring-y:-84px}
.theme-options [data-theme-choice=light]{--ring-x:-60px;--ring-y:-60px}
.theme-options [data-theme-choice=dark]{--ring-x:-84px;--ring-y:0px}
.theme-ring-label{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--paper);font-size:11px;line-height:1.4;padding:4px 7px;pointer-events:none;opacity:0}
.theme-options button:hover .theme-ring-label,
.theme-options button:focus-visible .theme-ring-label{opacity:1}
@keyframes theme-ring-open{from{opacity:0;transform:translate(0,0) scale(.8)}to{opacity:1;transform:translate(var(--ring-x),var(--ring-y)) scale(1)}}
@media(prefers-reduced-motion:reduce){.theme-options button{animation:none}}