/* reset, keyframes and the classes toggled by settings */

* { box-sizing:border-box; margin:0; padding:0; }
html, body { width:100%; height:100%; overflow:hidden; }
body {
  background:var(--bg-body);
  color:var(--text-primary);
  font-family:var(--font);
  font-weight:var(--font-weight,400);
  text-transform:lowercase;
  -webkit-font-smoothing:antialiased;
}
button, input, select, textarea { font:inherit; text-transform:lowercase; }
::placeholder { text-transform:lowercase; }
button, a { -webkit-tap-highlight-color:transparent; }
::selection { background:var(--accent); color:var(--bg-body); }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#4e4e4e; border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:#707070; }
* { scrollbar-width:thin; scrollbar-color:#4e4e4e transparent; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fade-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes modal-in { from { opacity:0; transform:translate(-50%,-50%) scale(.94); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes modal-out { from { opacity:1; transform:translate(-50%,-50%) scale(1); } to { opacity:0; transform:translate(-50%,-50%) scale(.94); } }
@keyframes skeleton { to { transform:translateX(-100%); } }
@keyframes modal-pop { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:none; } }
@keyframes soft-rise { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes soft-pop { 0% { opacity:0; transform:scale(.92); } 70% { opacity:1; transform:scale(1.025); } 100% { transform:scale(1); } }
@keyframes chrome-in { from { opacity:0; transform:translateY(-10px); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes page-in { from { opacity:0; transform:scale(.992); } to { opacity:1; transform:scale(1); } }
@keyframes glow-drift { 0%,100% { transform:translate3d(-2%,0,0) scale(1); opacity:.32; } 50% { transform:translate3d(2%,1%,0) scale(1.06); opacity:.48; } }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
@keyframes button-bounce { 0% { transform:scale(1); } 45% { transform:scale(.94); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition-duration:.001ms!important; animation-duration:.001ms!important; animation-iteration-count:1!important; }
}

:root { --motion-fast:.12s; --motion-med:.22s; --motion-slow:.38s; --hover-scale:1.035; --radius-mult:1; }
html.motion-subtle { --motion-fast:.08s; --motion-med:.15s; --motion-slow:.24s; --hover-scale:1.02; }
html.motion-off { --motion-fast:.001s; --motion-med:.001s; --motion-slow:.001s; --hover-scale:1; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
html.grid-off .iframe-container { background:var(--bg-body); }
html.glow-on .iframe-container::before { content:""; position:absolute; inset:-22%; pointer-events:none; z-index:0; background:radial-gradient(circle at 50% 44%, var(--accent-soft), transparent 42%); filter:blur(34px); animation:glow-drift 9s ease-in-out infinite; opacity:.8; }
html.glow-on .iframe-container iframe, html.glow-on .iframe-container > .message-container, html.glow-on .iframe-container > .loading-bar-container { z-index:1; }
html.compact-ui .tabbar { height:31px; }
html.compact-ui .main-nav { height:42px; }
html.compact-ui .omnibox input, html.compact-ui .nav-music { height:29px; }
html.compact-ui .side-rail { width:44px; flex-basis:44px; }
html.compact-ui .side-btn { width:32px; height:32px; }


#boot-splash { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--bg-body); color:var(--text-muted); font-size:12px; transition:opacity .35s ease; }
#boot-splash.out { opacity:0; pointer-events:none; }
#boot-splash img { width:min(160px,40vw); height:auto; animation:spin 2.4s linear infinite; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
#boot-splash .spinner { display:none; margin:0; }
#boot-splash.no-img img { display:none; }
#boot-splash.no-img .spinner { display:block; }