/* public/daydreams/scene-chrome.css
   The interface every dreamscape scene wears: the site's paper and night
   tokens, its three typefaces, its glass pill. Contract: docs/dreamscape-chrome.md.
   Unversioned and edited in place; every edit bumps ?v= on both links in every
   scene page (pinned by tests/unit/contracts.test.ts). */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 600;font-display:swap;src:url(/daydreams/assets/ebgaramond-400-600-normal-latin-DHJaSK_n.woff2)format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 600;font-display:swap;src:url(/daydreams/assets/ebgaramond-400-600-italic-latin-B29g_meR.woff2)format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:300;font-display:swap;src:url(/daydreams/assets/jost-300-normal-latin-BzT6BTit.woff2)format("woff2")}
@font-face{font-family:"Julius Sans One";font-style:normal;font-weight:400;font-display:swap;src:url(/daydreams/assets/juliussansone-400-normal-latin-DfA94n6N.woff2)format("woff2")}

:root{
  --sc-paper:#eadfc6;--sc-ink:#241b10;--sc-soft:#463522;--sc-umber:#5c452e;
  --sc-gold:#c9a04a;--sc-gold-hover:#b8862e;--sc-gold-text:#6d5111;
  --sc-glass:rgba(234,223,198,.92);--sc-glass-strong:rgba(234,223,198,.95);
  --sc-border:rgba(84,64,42,.35);--sc-divider:rgba(84,64,42,.22);--sc-wash:rgba(84,64,42,.10);
  --sc-line:#4c3a2640;
  --sc-shadow:0 0 0 1px rgba(60,45,25,.04),0 2px 4px -1px rgba(60,45,25,.06),0 6px 10px -3px rgba(60,45,25,.07);
  --sc-display:"Julius Sans One",sans-serif;--sc-serif:"EB Garamond",Georgia,serif;--sc-caps:Jost,sans-serif;
  --sc-ease:cubic-bezier(.22,.61,.36,1);--sc-quick:.17s;--sc-med:.35s;
  --sc-gutter:clamp(16px,2.4vw,30px);--sc-dock-h:46px;--sc-menu-t:.22s;
}
html[data-theme=night]{
  --sc-paper:#181019;--sc-ink:#e6dcc2;--sc-soft:#cdc0a2;--sc-umber:#b09a72;
  --sc-gold:#d4ab57;--sc-gold-hover:#e3c074;--sc-gold-text:#e2c07a;
  --sc-glass:rgba(30,22,34,.92);--sc-glass-strong:rgba(30,22,34,.95);
  --sc-border:rgba(198,168,110,.42);--sc-divider:rgba(198,168,110,.30);--sc-wash:rgba(212,171,87,.12);
  --sc-line:#c6a86e38;--sc-shadow:0 2px 6px -1px rgba(0,0,0,.45);
}

/* ---------- loader (one skin for every scene; moved here from the pages) ---------- */
#loading{position:fixed;inset:0;z-index:10;background:var(--sc-paper);color:var(--sc-ink);padding:32px 24px;overflow:auto;text-align:center;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;font-family:var(--sc-serif);letter-spacing:normal;transition:opacity .5s}
#loading.done{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
#loading[hidden]{display:none}
#loading .loading-back{position:absolute;top:24px;left:32px;color:var(--sc-soft);font:300 .66rem var(--sc-caps);letter-spacing:.15em;text-decoration:none;padding:8px 0}
#loading .loading-back:hover{color:var(--sc-gold)}
#loading .loading-back:focus-visible{outline:2px solid var(--sc-gold);outline-offset:3px}
#loading .loading-poster{display:block;width:min(760px,88vw,78svh);height:auto;max-height:57svh;object-fit:contain;border:1px solid var(--sc-line);box-shadow:0 12px 45px #0002}
#loading h1{font:400 clamp(1.7rem,3.6vw,2.4rem)/1.2 var(--sc-display);letter-spacing:.14em;text-indent:.14em;margin:28px 0 0;color:var(--sc-ink)}
#loading h1 + p{font:italic 1.28rem/1.5 var(--sc-serif);color:var(--sc-soft);margin:12px 0 0}
#loading [data-sc-status]{display:block;text-transform:none;font:300 .66rem/1.5 var(--sc-caps);letter-spacing:.08em;color:var(--sc-soft);margin:14px 0 0;min-height:1.5em}
#loading [data-sc-status] a{color:inherit;text-decoration:none;border-bottom:1px solid var(--sc-gold)}
#loading progress{appearance:none;width:min(240px,60vw);height:2px;border:0;background:var(--sc-line);margin-top:24px}
#loading progress::-webkit-progress-bar{background:var(--sc-line)}
#loading progress::-webkit-progress-value{background:var(--sc-gold)}
#loading progress::-moz-progress-bar{background:var(--sc-gold)}
#loading .track{position:relative;overflow:hidden;width:min(240px,60vw);height:2px;background:var(--sc-line);margin-top:24px}
#loading .track i{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--sc-gold);transition:width .3s}
#loading .track.sc-sweep i{width:34%;transition:none;animation:sc-sweep 1.9s ease-in-out infinite}
@keyframes sc-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(294%)}}
#loading.sc-failed{opacity:1;visibility:visible;pointer-events:auto}
#loading .sc-retry{margin-top:18px;border:1px solid var(--sc-border);border-radius:999px;background:none;color:var(--sc-ink);font:300 .64rem/1 var(--sc-caps);letter-spacing:.24em;text-transform:uppercase;padding:11px 20px 12px;cursor:pointer}
#loading .sc-retry:hover{border-color:color-mix(in srgb,var(--sc-gold) 65%,transparent);color:var(--sc-gold-text)}
#loading .sc-retry:focus-visible{outline:2px solid var(--sc-gold);outline-offset:3px}
@media(max-height:540px){#loading{padding:54px 16px 18px;justify-content:flex-start}#loading .loading-poster{max-height:40svh;width:auto;max-width:85vw}#loading h1{margin-top:14px;font-size:1.5rem}#loading h1 + p{margin-top:6px;font-size:1rem}}

/* ---------- glass surfaces ---------- */
.sc-identity,.sc-readout,.sc-dock,.sc-panel,.sc-menu,.sc-hint,.sc-toast,.sc-tooltip,.sc-stick,.sc-pad-keys button{
  background:var(--sc-glass);border:1px solid var(--sc-border);box-shadow:var(--sc-shadow);
  -webkit-backdrop-filter:blur(9px) saturate(1.05);backdrop-filter:blur(9px) saturate(1.05);box-sizing:border-box}

/* Wrappers inherit the site's serif, not the page's default face. */
.sc-identity,.sc-readout,.sc-dock,.sc-panel,.sc-hint{font-family:var(--sc-serif)}

/* ---------- top: identity left, readout right ---------- */
.sc-top{position:fixed;z-index:5;top:var(--sc-gutter);left:var(--sc-gutter);right:var(--sc-gutter);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;pointer-events:none}
.sc-top>*{pointer-events:auto}
.sc-identity{display:flex;flex-direction:column;gap:2px;max-width:26rem;padding:12px 20px 15px;border-radius:14px;color:var(--sc-ink)}
.sc-back{align-self:flex-start;font:300 .62rem/1 var(--sc-caps);letter-spacing:.24em;text-transform:uppercase;color:var(--sc-umber);text-decoration:none;padding:6px 0 9px}
.sc-back:hover{color:var(--sc-gold-hover)}
.sc-eyebrow{font:300 .6rem/1.4 var(--sc-caps);letter-spacing:.34em;text-transform:uppercase;color:var(--sc-umber)}
.sc-title{margin:.2rem 0 0;font:400 clamp(1.4rem,2.5vw,2rem)/1.15 var(--sc-display);letter-spacing:.14em;color:var(--sc-ink)}
.sc-line{margin:.3rem 0 0;font:italic 400 1.04rem/1.45 var(--sc-serif);color:var(--sc-soft);text-wrap:balance}
.sc-readout{display:flex;flex-direction:column;gap:6px;max-width:22rem;padding:12px 16px;border-radius:14px;
  font:300 .6rem/1.6 var(--sc-caps);letter-spacing:.2em;text-transform:uppercase;color:var(--sc-umber);font-variant-numeric:tabular-nums}
.sc-readout strong{font-weight:300;color:var(--sc-ink)}
.sc-meter{position:relative;height:2px;background:var(--sc-divider);overflow:hidden}
.sc-meter>span{position:absolute;inset:0 auto 0 0;background:var(--sc-gold)}

/* ---------- environment panel: discrete named-stop sliders ---------- */
.sc-env{margin-left:auto;width:min(28rem,100%);max-width:none;gap:12px;padding:12px 16px 10px}
.sc-stops{display:flex;flex-direction:column;gap:2px}
.sc-stops-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sc-stops-value{color:var(--sc-gold-text)}
.sc-slider{position:relative;height:46px;padding:0 30px;touch-action:none;cursor:pointer;border-radius:8px;-webkit-user-select:none;user-select:none}
.sc-slider:focus-visible{outline:2px solid var(--sc-gold);outline-offset:1px}
.sc-rail{position:relative;height:100%}
.sc-track{position:absolute;left:0;right:0;top:14px;height:2px;margin-top:-1px;background:var(--sc-divider)}
.sc-tick{position:absolute;top:10px;width:1px;height:9px;margin-left:-.5px;background:var(--sc-border)}
.sc-stop-name{position:absolute;top:26px;width:calc(100% / var(--gaps));transform:translateX(-50%);text-align:center;
  font:300 .54rem/1.25 var(--sc-caps);letter-spacing:.08em;text-transform:uppercase;color:var(--sc-umber);transition:color var(--sc-quick) var(--sc-ease)}
.sc-stop-name.is-on{color:var(--sc-gold-text)}
.sc-slider:hover .sc-stop-name{color:var(--sc-soft)}
.sc-slider:hover .sc-stop-name.is-on{color:var(--sc-gold-text)}
/* The gem the site uses for its marks: a small rotated square. */
.sc-thumb{position:absolute;top:14px;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;box-sizing:border-box;background:var(--sc-gold);
  border:1px solid var(--sc-paper);box-shadow:0 0 0 1px var(--sc-gold-hover);transform:rotate(45deg);transition:left var(--sc-med) var(--sc-ease)}
.sc-dragging .sc-thumb{transition:none}
.sc-stops.sc-disabled{opacity:.4}
.sc-stops.sc-disabled .sc-slider{cursor:default}
@media(max-width:640px){
  .sc-env{width:auto}
  .sc-stop-name[data-thin]:not(.is-on),.sc-stop-name.is-hushed{visibility:hidden}
}

/* ---------- dock ---------- */
.sc-dock{position:fixed;z-index:5;left:50%;bottom:var(--sc-gutter);transform:translateX(-50%);display:flex;align-items:stretch;
  max-width:calc(100vw - 2 * var(--sc-gutter));border-radius:999px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;white-space:nowrap}
.sc-dock::-webkit-scrollbar{display:none}
/* While the dock overflows, the edge that hides buttons fades. */
.sc-dock.sc-more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.sc-dock.sc-more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.sc-dock.sc-more-left.sc-more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.sc-group{display:contents}
.sc-group[hidden],.sc-dock [hidden]{display:none}
.sc-dock button{position:relative;flex:none;margin:0;border:0;border-radius:0;background:none;color:var(--sc-soft);
  font:300 .64rem/1 var(--sc-caps);letter-spacing:.2em;text-transform:uppercase;padding:0 18px;min-height:var(--sc-dock-h);cursor:pointer;
  transition:color var(--sc-quick) var(--sc-ease),background-color var(--sc-quick) var(--sc-ease)}
.sc-dock button::after{content:"";position:absolute;left:14px;right:14px;bottom:10px;height:1px;
  background:linear-gradient(90deg,transparent,var(--sc-gold),transparent);transform:scaleX(0);transition:transform var(--sc-quick) var(--sc-ease)}
.sc-dock button:hover{background:var(--sc-wash);color:var(--sc-ink)}
.sc-dock button:hover::after,.sc-dock button[aria-pressed=true]::after{transform:scaleX(1)}
.sc-dock button[aria-pressed=true]{color:var(--sc-gold-text)}
.sc-dock button:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px var(--sc-gold)}
.sc-dock button[disabled]{opacity:.4;cursor:default}
.sc-sep{flex:none;width:1px;margin:11px 0;background:var(--sc-divider)}

/* ---------- dock menu: a list that rolls open upward from its dock button ---------- */
.sc-dock [data-sc-menu][aria-expanded=true]{color:var(--sc-ink)}
.sc-dock [data-sc-menu][aria-expanded=true]::after{transform:scaleX(1)}
.sc-menu-caret{display:inline-block;margin-left:.7em;letter-spacing:0;color:var(--sc-umber)}
.sc-menu{position:fixed;z-index:6;--sc-menu-w:min(19rem,calc(100vw - 2 * var(--sc-gutter)));width:var(--sc-menu-w);
  left:clamp(var(--sc-gutter),var(--sc-menu-x,50vw),calc(100vw - var(--sc-gutter) - var(--sc-menu-w)));bottom:calc(var(--sc-gutter) + var(--sc-dock-h) + 12px);
  max-height:min(60vh,calc(100svh - 2 * var(--sc-gutter) - var(--sc-dock-h) - 24px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 0;border-radius:14px;background:var(--sc-glass-strong);color:var(--sc-ink);font-family:var(--sc-serif);
  clip-path:inset(100% -24px -24px -24px);opacity:0;visibility:hidden;
  transition:clip-path var(--sc-menu-t) var(--sc-ease),opacity var(--sc-menu-t) var(--sc-ease),visibility 0s linear var(--sc-menu-t)}
.sc-menu.sc-open{clip-path:inset(-24px);opacity:1;visibility:visible;transition:clip-path var(--sc-menu-t) var(--sc-ease),opacity var(--sc-menu-t) var(--sc-ease),visibility 0s}
.sc-menu[hidden]{display:none}
.sc-menu-heading{padding:12px 20px 4px 34px;font:300 .56rem/1.4 var(--sc-caps);letter-spacing:.24em;text-transform:uppercase;color:var(--sc-umber)}
.sc-menu-sep{height:1px;margin:6px 20px;background:var(--sc-divider)}
.sc-menu-item{position:relative;padding:8px 20px 9px 34px;font:400 1rem/1.3 var(--sc-serif);color:var(--sc-soft);cursor:pointer;outline:none;
  transition:color var(--sc-quick) var(--sc-ease),background-color var(--sc-quick) var(--sc-ease)}
.sc-menu-item[data-return]{font-style:italic;color:var(--sc-ink)}
.sc-menu-item:hover,.sc-menu-item:focus{background:var(--sc-wash);color:var(--sc-ink)}
.sc-menu-item:focus-visible{box-shadow:inset 0 0 0 1.5px var(--sc-gold)}
.sc-menu-item[aria-checked=true]{color:var(--sc-gold-text)}
/* The current choice wears the site's gem. */
.sc-menu-item[aria-checked=true]::before{content:"";position:absolute;left:16px;top:50%;width:7px;height:7px;margin-top:-3.5px;box-sizing:border-box;
  background:var(--sc-gold);border:1px solid var(--sc-paper);box-shadow:0 0 0 1px var(--sc-gold-hover);transform:rotate(45deg)}
/* While a list is open it stands where the hint lines are: they wait. */
.sc-menu-open .sc-hint{opacity:0}

/* ---------- panels ---------- */
.sc-panel{position:fixed;z-index:6;right:var(--sc-gutter);bottom:calc(var(--sc-gutter) + var(--sc-dock-h) + 16px);
  width:min(23.5rem,calc(100vw - 2 * var(--sc-gutter)));max-height:calc(100svh - 2 * var(--sc-gutter) - var(--sc-dock-h) - 32px);overflow:auto;
  padding:18px 20px 16px;border-radius:14px;background:var(--sc-glass-strong);color:var(--sc-ink);font-family:var(--sc-serif)}
.sc-panel[hidden]{display:none}
.sc-panel-title{margin:0 0 12px;font:italic 400 1.3rem/1.3 var(--sc-serif);color:var(--sc-ink)}
.sc-keys{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 12px;font:400 .95rem/1.45 var(--sc-serif);color:var(--sc-soft)}
.sc-keys dt{font:300 .58rem/2.3 var(--sc-caps);letter-spacing:.2em;text-transform:uppercase;color:var(--sc-umber)}
.sc-keys dd{margin:0}
.sc-panel kbd{font:300 .66rem/1 var(--sc-caps);letter-spacing:.06em;border:1px solid var(--sc-border);border-bottom-width:2px;border-radius:4px;padding:3px 6px 2px;color:var(--sc-ink);background:var(--sc-wash)}
.sc-note{margin:0 0 10px;font:400 .95rem/1.5 var(--sc-serif);color:var(--sc-soft)}
.sc-credit{margin:0 0 10px;font:italic 400 .82rem/1.45 var(--sc-serif);color:var(--sc-soft)}
.sc-close{display:block;margin:6px 0 0 auto;border:1px solid var(--sc-border);border-radius:999px;background:none;color:var(--sc-ink);
  font:300 .6rem/1 var(--sc-caps);letter-spacing:.24em;text-transform:uppercase;padding:9px 16px 10px;cursor:pointer}
.sc-close:hover{border-color:color-mix(in srgb,var(--sc-gold) 65%,transparent);color:var(--sc-gold-text)}
.sc-close:focus-visible,.sc-panel button:focus-visible,.sc-back:focus-visible{outline:2px solid var(--sc-gold);outline-offset:3px}
/* A place card or a reference dialog: the same glass, anchored left. */
.sc-panel--left{right:auto;left:var(--sc-gutter);bottom:auto;top:calc(var(--sc-gutter) + 170px)}

/* ---------- transient lines ---------- */
.sc-hint{position:fixed;z-index:5;left:50%;bottom:calc(var(--sc-gutter) + var(--sc-dock-h) + 18px);transform:translateX(-50%);
  max-width:calc(100vw - 2 * var(--sc-gutter));padding:8px 16px 9px;border-radius:999px;font:300 .58rem/1.4 var(--sc-caps);letter-spacing:.22em;
  text-transform:uppercase;color:var(--sc-umber);text-align:center;pointer-events:none;transition:opacity .5s ease}
.sc-hint[hidden]{display:none}
.sc-hint.sc-faded{opacity:0}
.sc-toast{position:fixed;z-index:7;left:50%;top:var(--sc-gutter);transform:translate(-50%,calc(-100% - var(--sc-gutter) - 8px));
  max-width:calc(100vw - 2 * var(--sc-gutter));padding:9px 18px 10px;border-radius:999px;font:300 .6rem/1.4 var(--sc-caps);letter-spacing:.2em;
  text-transform:uppercase;color:var(--sc-ink);transition:transform var(--sc-med) var(--sc-ease)}
.sc-toast.show{transform:translate(-50%,0)}
.sc-tooltip{position:fixed;z-index:6;pointer-events:none;padding:6px 12px 7px;border-radius:12px;font:300 .58rem/1.3 var(--sc-caps);letter-spacing:.2em;text-transform:uppercase;color:var(--sc-ink)}
.sc-tooltip[hidden]{display:none}

/* ---------- captured pointer ---------- */
.sc-cue{position:fixed;inset:0;z-index:4;display:none;place-items:center;pointer-events:none}
.sc-locked .sc-cue,.sc-retry .sc-cue{display:grid}
.sc-retry:not(.sc-locked) .sc-cue i{display:none}
/* Touch keeps drag-look and the pad: the mouse button has no use there. */
@media(pointer:coarse){[data-sc-lock]{display:none!important}}
.sc-no-lock [data-sc-lock]{display:none!important}
.sc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sc-cue i{width:7px;height:7px;border:1px solid var(--sc-gold);transform:rotate(45deg);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.sc-cue span{position:fixed;left:50%;bottom:calc(var(--sc-gutter) + var(--sc-dock-h) + 18px);transform:translateX(-50%);padding:8px 16px 9px;border-radius:999px;
  background:var(--sc-glass);border:1px solid var(--sc-border);font:300 .58rem/1.4 var(--sc-caps);letter-spacing:.22em;text-transform:uppercase;color:var(--sc-umber)}
/* Each vendored crosshair gives way to the shared cue. */
#crosshair{display:none!important}

/* ---------- touch pad ---------- */
.sc-pad{position:fixed;z-index:5;left:var(--sc-gutter);right:var(--sc-gutter);bottom:calc(var(--sc-gutter) + var(--sc-dock-h) + 16px);
  display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.sc-pad[hidden]{display:none}
.sc-stick{position:relative;width:124px;height:124px;border-radius:50%;pointer-events:auto;touch-action:none}
.sc-stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--sc-gold);opacity:.78;
  transform:translate(var(--x,0px),var(--y,0px))}
.sc-pad-keys{display:flex;flex-direction:column;gap:10px;pointer-events:auto}
.sc-pad-keys button{min-width:64px;min-height:46px;border-radius:999px;color:var(--sc-ink);font:300 .6rem/1 var(--sc-caps);letter-spacing:.2em;text-transform:uppercase;touch-action:none}
.sc-pad-keys button[aria-pressed=true]{color:var(--sc-gold-text);border-color:var(--sc-gold)}

/* ---------- narrow screens ---------- */
@media(max-width:640px){
  .sc-identity{max-width:none;flex:1 1 100%;padding:10px 14px 12px}
  .sc-title{font-size:1.3rem}
  .sc-line{font-size:.95rem}
  .sc-readout{flex:1 1 100%;max-width:none;padding:10px 14px}
  .sc-dock button{padding:0 14px;letter-spacing:.16em}
}
@media(prefers-reduced-motion:reduce){
  :root{--sc-quick:.01ms;--sc-med:.01ms;--sc-menu-t:.01ms}
  #loading .track.sc-sweep i{animation:none;left:33%;transform:none}
  .sc-hint,#loading{transition:none}
  #loading.done{transition:none}
}