/* Independent navigation glass and progressive viewport blur, preview edition. */
:root{--nav-blur:64px;--bottom-blur:20px;--edge-player-offset:0px;--edge-blur-height:clamp(42px,7vh,68px)}
body[data-nav-blur] > .site-header{position:sticky;top:0;z-index:40;background:transparent;isolation:isolate;box-shadow:0 8px 30px #0002}
body[data-nav-blur] .site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--bg);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-nav-blur] #mobile-menu{background:var(--bg);border-radius:0 0 12px 12px;max-height:calc(100dvh - 200px);overflow-y:auto;overscroll-behavior:contain;-webkit-backdrop-filter:none;backdrop-filter:none}

/* These sibling planes blur the page behind them, never the dock or its queue.
   A transparent parent avoids creating an intermediate backdrop-filter root. */
body:has([data-player]:not([hidden])){--edge-player-offset:var(--player-reserve,calc(var(--player-height) + env(safe-area-inset-bottom,0px)))}
.bottom-edge-blur{display:none;position:fixed;z-index:35;left:0;right:0;bottom:0;height:calc(var(--edge-player-offset) + var(--edge-blur-height));pointer-events:none;user-select:none;opacity:1;transition:opacity .25s ease}
.bottom-edge-blur > span{position:absolute;inset:0;pointer-events:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body[data-nav-blur="on"] .site-header::before,
  body[data-nav-blur="on"] #mobile-menu{background:color-mix(in srgb,var(--bg) 76%,transparent);-webkit-backdrop-filter:blur(var(--nav-blur)) saturate(115%);backdrop-filter:blur(var(--nav-blur)) saturate(115%)}
  @supports ((mask-image:linear-gradient(transparent,#000)) or (-webkit-mask-image:linear-gradient(transparent,#000))){
    body[data-bottom-blur-active="true"] .bottom-edge-blur{display:block}
    /* A short clearance works with the footer fade instead of reserving the whole band. */
    body[data-platform="preview"][data-bottom-blur-active="true"]{padding-bottom:calc(var(--edge-player-offset) + 18px)}
    .bottom-edge-blur > span{-webkit-backdrop-filter:blur(var(--layer-blur));backdrop-filter:blur(var(--layer-blur));-webkit-mask-image:linear-gradient(to bottom,transparent var(--fade-from),#000 var(--fade-to));mask-image:linear-gradient(to bottom,transparent var(--fade-from),#000 var(--fade-to))}
    .bottom-edge-blur > span:nth-child(1){--layer-blur:calc(var(--bottom-blur)/32);--fade-from:0%;--fade-to:16%}
    .bottom-edge-blur > span:nth-child(2){--layer-blur:calc(var(--bottom-blur)/16);--fade-from:8%;--fade-to:32%}
    .bottom-edge-blur > span:nth-child(3){--layer-blur:calc(var(--bottom-blur)/8);--fade-from:24%;--fade-to:48%}
    .bottom-edge-blur > span:nth-child(4){--layer-blur:calc(var(--bottom-blur)/4);--fade-from:40%;--fade-to:64%}
    .bottom-edge-blur > span:nth-child(5){--layer-blur:calc(var(--bottom-blur)/2);--fade-from:56%;--fade-to:80%}
    .bottom-edge-blur > span:nth-child(6){--layer-blur:var(--bottom-blur);--fade-from:72%;--fade-to:100%}
  }
}

/* Make the effect visible while adjusting it: the settings backdrop adds no blur. */
#theme-settings{width:450px;padding:26px;overscroll-behavior:contain}
body #theme-settings::backdrop{background:#08080822;-webkit-backdrop-filter:none;backdrop-filter:none}
#theme-settings .dialog-heading{position:sticky;top:-26px;z-index:1;background:var(--surface);padding:18px 0;margin-top:-18px;gap:10px}
#theme-settings .dialog-heading h2{font-size:34px;flex:1;min-width:0}
#theme-settings .dialog-heading button{flex-shrink:0}
.settings-effects{border:0;padding:0;margin:4px 0 2px;min-width:0;display:grid;gap:15px}
.settings-effects legend{font:900 24px/1 var(--font-display);text-transform:uppercase;margin-bottom:12px}
.settings-effect{background:#ffffff05;box-shadow:inset 0 2px 12px #ffffff03,0 6px 20px #0002;padding:16px;border-radius:10px;display:grid;gap:12px}
.settings-grid .settings-switch{grid-template-columns:1fr auto;gap:12px;font-weight:700;min-height:44px}
.settings-switch input{appearance:none;-webkit-appearance:none;width:48px;height:30px;margin:7px 0;background:#555550;border:0;border-radius:30px;box-shadow:0 3px 10px #0003;cursor:pointer;position:relative;transition:background .2s}
.settings-switch input::before{content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;background:var(--fg);border-radius:50%;box-shadow:0 2px 6px #0004;transition:transform .2s}
.settings-switch input:checked{background:var(--accent)}
.settings-switch input:checked::before{transform:translateX(18px);background:var(--on-accent)}
.settings-grid .settings-intensity{grid-template-columns:1fr auto;gap:4px 12px;font-size:11px}
.settings-intensity output{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px}
.settings-intensity input[type="range"]{grid-column:1 / -1;width:100%;min-width:0;height:36px;margin:0;accent-color:var(--accent);padding:0;box-shadow:none;background:transparent;cursor:pointer}
.settings-intensity:has(input:disabled){opacity:.45}
.settings-intensity input:disabled{cursor:not-allowed}
.settings-grid .settings-hint{font-size:10px;line-height:1.6}
@media(min-width:900px){#theme-settings{margin:16px 16px 16px auto;max-height:calc(100dvh - 32px)}}
@media(max-width:760px){
  :root{--edge-blur-height:clamp(32px,5vh,44px)}
  .bottom-edge-blur > span:nth-child(2),.bottom-edge-blur > span:nth-child(4){display:none}
  .bottom-edge-blur > span:nth-child(1){--layer-blur:calc(var(--bottom-blur)/8);--fade-from:0%;--fade-to:25%}
  .bottom-edge-blur > span:nth-child(3){--layer-blur:calc(var(--bottom-blur)/4);--fade-from:20%;--fade-to:50%}
  .bottom-edge-blur > span:nth-child(5){--fade-from:45%;--fade-to:75%}
  .bottom-edge-blur > span:nth-child(6){--fade-from:70%;--fade-to:100%}
  #theme-settings{padding:20px;max-width:calc(100vw - 24px);max-height:90dvh}
  #theme-settings .dialog-heading{top:-20px}
  #theme-settings .dialog-heading h2{font-size:30px}
}
/* Relieve only the focused page control that actually overlaps the edge. */
body[data-bottom-focus-overlap="true"] .bottom-edge-blur{opacity:0}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  body[data-nav-blur] .site-header::before,body[data-nav-blur] #mobile-menu{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  body[data-bottom-blur] .bottom-edge-blur{display:none}
  body[data-platform="preview"][data-bottom-blur-active="true"]{padding-bottom:var(--edge-player-offset)}
}
@media(forced-colors:active){
  body[data-bottom-blur] .bottom-edge-blur{display:none}
  body[data-platform="preview"][data-bottom-blur-active="true"]{padding-bottom:var(--edge-player-offset)}
  body[data-nav-blur] .site-header::before,body[data-nav-blur] #mobile-menu{background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none}
  .settings-switch input{appearance:auto;-webkit-appearance:auto}
  .settings-switch input::before{display:none}
}
@media(prefers-reduced-motion:reduce){.settings-switch input,.settings-switch input::before{transition:none}}
[data-motion="reduced"] .settings-switch input,[data-motion="reduced"] .settings-switch input::before{transition:none}

body[data-near-page-end="true"] .bottom-edge-blur{opacity:0}
@media(prefers-reduced-motion:reduce){.bottom-edge-blur{transition:none}}
[data-motion="reduced"] .bottom-edge-blur{transition:none}

/* The playground groups optional controls without making the dialog wider. */
.settings-effects > label { margin-top: 16px; }
.settings-video { padding: 20px; background: rgba(255,255,255,.035); border-radius: 12px; }
.settings-video summary { cursor: pointer; font-weight: 700; min-height: 24px; }
.settings-video > div { display: grid; gap: 16px; padding-top: 20px; }
.settings-video input[type="file"] { max-width: 100%; font-size: 12px; }
.settings-video-url { display: flex; gap: 10px; min-width: 0; }
.settings-video-url input { width: 100%; min-width: 0; }
.settings-video-url .button { flex-shrink: 0; padding-inline: 20px; }
.settings-video [data-hero-video-status] { font-size: 12px; line-height: 1.5; color: var(--muted); }

@media(max-width:575px){
  .settings-grid label:not(.settings-switch):not(.settings-intensity){grid-template-columns:minmax(0,1fr);gap:7px}
  .settings-grid select,.settings-grid input{min-width:0}
  .settings-video{padding:16px}
  .settings-video-url{flex-wrap:wrap}
  .settings-video-url input{flex:1 1 100%}
  .settings-video-url .button{width:100%}
}