/* The design tokens, and the one toolbar every world shares (docs/DESIGN-SYSTEM.md, sections 7 and 11).
   Values are the hub's own: the four strand colours, ink on paper, frosted glass pills in mono type, like the hub's tags.
   Every world links this file after its own styles, so the toolbar looks and behaves the same everywhere. */
:root{
  --violet:#6d2bd9;--coral:#e9542c;--teal:#1aa6a6;--gold:#f5a623;--apricot:#f4b878;--bone:#f5f0e6;--ink-0:#171019;--paper-0:#f6f2ea;
  --display:"Helvetica Neue",Helvetica,"Hub Display",Arial,sans-serif;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --type-control:700 .75rem/1 var(--mono);--type-eyebrow:400 12px/1.2 var(--mono);
  --type-read:400 clamp(16px,1.35vw,19px)/1.5 var(--sans);--type-head:800 clamp(30px,3.4vw,46px)/1 var(--display);
  --type-pane:800 clamp(38px,5.4vw,84px)/.92 var(--display);--type-word:800 clamp(64px,12vw,180px)/.88 var(--display);
  --track-word:-.075em;--track-pane:-.05em;--track-head:-.045em;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--page:5vw;--edge:16px;--hit:44px;
  --r-pill:999px;--r-pane:30px;--r-dialog:24px;--r-card:18px;
  --glass-fill:linear-gradient(140deg,color-mix(in srgb,var(--ground,#f6f2ea) 88%,transparent),color-mix(in srgb,var(--ground,#f6f2ea) 76%,transparent));
  --glass-blur:blur(14px) saturate(1.5);--glass-edge:1px solid rgba(255,255,255,.5);
  --glass-lift:inset 0 1px 1px rgba(255,255,255,.5),0 6px 16px rgba(12,8,24,.14);
  --glass-lift-hover:inset 0 1px 1px rgba(255,255,255,.7),0 10px 26px rgba(12,8,24,.22);
  --pane-fill:color-mix(in srgb,var(--ground,#f6f2ea) 55%,transparent);--pane-blur:blur(26px) saturate(1.6);
  --ease-arrive:cubic-bezier(.2,.8,.2,1);--ease-move:cubic-bezier(.4,0,.2,1);--t-press:.15s;--t-ui:.4s;--t-scene:1.1s;
}
/* The toolbar: Back to Hub on the left; the world's own switches, then Pause Motion, then Sound, on the right. */
.toolbar{position:fixed;top:max(var(--edge),env(safe-area-inset-top));left:max(var(--edge),env(safe-area-inset-left));right:max(var(--edge),env(safe-area-inset-right));bottom:auto;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;z-index:30;pointer-events:none;margin:0;padding:0}
.toolbar>*{pointer-events:auto}.toolbar .home{margin-right:auto}
.toolbar a,.toolbar button,.pill{all:unset;box-sizing:border-box;min-height:var(--hit);display:inline-flex;align-items:center;gap:.55rem;padding:0 1rem;border-radius:var(--r-pill);font:var(--type-control);letter-spacing:0;text-transform:none;color:var(--ink,#171019);background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--glass-edge);box-shadow:var(--glass-lift);cursor:pointer;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform var(--t-press),box-shadow .25s,background .8s var(--ease-move),color .8s var(--ease-move)}
.toolbar [hidden],.pill[hidden]{display:none}
.toolbar :is(a,button):hover,.pill:hover{box-shadow:var(--glass-lift-hover)}
.toolbar :is(a,button):active,.pill:active{transform:scale(.97)}
.toolbar :is(a,button):focus-visible,.pill:focus-visible{outline:2px solid var(--ink,#171019);outline-offset:3px}
.toolbar [aria-pressed=true],.pill[aria-pressed=true]{background:var(--ink,#171019);color:var(--ground,#f6f2ea);border-color:transparent}
.toolbar .home::before{content:"";width:.45rem;height:.45rem;border:solid currentColor;border-width:0 0 2px 2px;transform:translateX(2px) rotate(45deg)}
/* A world on a dark ground (oil) keeps the same pill, in its own colours. */
.toolbar.on-dark{--ground:#16131b;--ink:#f5f0e6;--glass-fill:linear-gradient(140deg,rgba(22,19,27,.8),rgba(22,19,27,.62));--glass-lift:inset 0 1px 1px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.4);--glass-lift-hover:inset 0 1px 1px rgba(255,255,255,.2),0 10px 26px rgba(0,0,0,.5)}
.toolbar.on-dark :is(a,button){border-color:rgba(255,255,255,.22)}
/* A group of the world's own actions, centred at the bottom. */
.world-bar{position:fixed;left:50%;bottom:max(var(--edge),env(safe-area-inset-bottom));translate:-50% 0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);max-width:calc(100vw - 2 * var(--edge));width:max-content;z-index:30}
/* Inside the hub's deek the hub's own deek button sits at the top right, so the toolbar leaves it room. */
html.framed .toolbar{right:calc(20px + 2.75rem + var(--s2))}
@media(max-width:600px){.toolbar{gap:5px}.toolbar a,.toolbar button{padding:0 .75rem}}
@media(prefers-reduced-transparency:reduce){.toolbar a,.toolbar button,.pill{background:var(--ground,#f6f2ea);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-contrast:more){.toolbar a,.toolbar button,.pill{background:var(--ground,#f6f2ea);border:2px solid var(--ink,#171019);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(forced-colors:active){.toolbar a,.toolbar button,.pill{border:1px solid CanvasText;background:Canvas;color:CanvasText}}
/* Moving between pages: the new page comes over the old one from the bottom right corner, the same diagonal as deek's fold,
   while the old page settles back a little. Browsers without page transitions simply change page. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.9s}
::view-transition-old(root){animation:.9s var(--ease-move) both page-under}
::view-transition-new(root){animation:.9s var(--ease-move) both page-over}
@keyframes page-under{to{filter:brightness(.92);transform:scale(.985)}}
@keyframes page-over{from{clip-path:polygon(100% 100%,100% 100%,100% 100%)}to{clip-path:polygon(100% 100%,100% -100%,-100% 100%)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}