/* Freeze the source appearance for the entire fullscreen presentation. */
html.theme-presentation-open { overflow:hidden; }
#theme-transition {
 --loader-bg:#050509;
 --loader-text:#f5f2ff;
 --loader-muted:#b8afd4;
 --loader-border:#827596;
 --loader-button:#17131f;
 --loader-hover:#292233;
 position:fixed;
 inset:0;
 width:100%;
 height:100dvh;
 max-width:none;
 max-height:none;
 margin:0;
 padding:clamp(16px, 4vw, 48px);
 border:0;
 border-radius:0;
 box-shadow:none;
 overflow:auto;
 overscroll-behavior:contain;
 color-scheme:dark;
 color:var(--loader-text);
 background:var(--loader-bg);
}
#theme-transition[data-animation-appearance="light"] {
 color-scheme:light;
 --loader-bg:#f7f8fc;
 --loader-text:#202432;
 --loader-muted:#565d70;
 --loader-border:#778096;
 --loader-button:#ffffff;
 --loader-hover:#e9ecf4;
}
#theme-transition[open] { display:grid; place-items:center; }
#theme-transition::backdrop { background:#050509; }
#theme-transition[data-animation-appearance="light"]::backdrop { background:#f7f8fc; }
#theme-transition .theme-transition-content {
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:24px;
 width:100%;
 text-align:center;
}
#theme-transition [data-theme-animation] {
 display:block;
 flex:none;
 width:min(420px, 60vw, 45dvh);
 max-width:100%;
 aspect-ratio:1;
 contain:layout style;
}
/* Preserve the source camera angle; never rotate the loader or its scene. */
#theme-transition [data-theme-animation] > svg { display:block; width:100%; height:100%; overflow:visible; }
#theme-transition h2 { margin:0; font-size:clamp(20px, 3vw, 28px); line-height:1.3; color:var(--loader-text); }
#theme-transition p { margin:8px 0 0; color:var(--loader-muted); font-size:16px; }
#theme-transition .theme-transition-skip {
 min-height:44px;
 padding:10px 20px;
 border:1px solid var(--loader-border);
 border-radius:10px;
 color:var(--loader-text);
 background:var(--loader-button);
 font:inherit;
}
#theme-transition .theme-transition-skip:hover { background:var(--loader-hover); }
#theme-transition .theme-transition-skip:focus-visible { outline:2px solid var(--loader-text); outline-offset:4px; }
@media (prefers-reduced-motion:reduce) {
 #theme-transition * { transition:none; animation:none; }
}
@media (forced-colors:active) {
 #theme-transition { background:Canvas; color:CanvasText; }
 #theme-transition h2, #theme-transition p { color:CanvasText; }
 #theme-transition .theme-transition-skip { color:ButtonText; background:ButtonFace; border-color:ButtonText; }
 #theme-transition .theme-transition-skip:focus-visible { outline-color:Highlight; }
}
