@font-face{font-family:Alegreya;src:url('./assets/fonts/alegreya-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Karla;src:url('./assets/fonts/karla-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light dark;--paper:oklch(98.8% .002 85);--ink:oklch(24% .004 85);--quiet:oklch(51% .003 85);--space-sm:8px;--space-md:24px;--space-lg:48px;--space-xl:96px;--body-font:Karla,'Avenir Next',sans-serif;--display-font:Alegreya,Georgia,serif}
@media(prefers-color-scheme:dark){:root{--paper:oklch(18% .003 85);--ink:oklch(91% .003 85);--quiet:oklch(69% .003 85)}}
*{box-sizing:border-box}
a{color:inherit}
a:focus-visible{outline:1px solid currentColor;outline-offset:8px}

/* The experience controls use the same paper, ink, type and fine lines as the entrance. */
.experience-nav,.sound-controls{color:var(--ink);background:var(--paper);border:0;border-radius:0;box-shadow:none;font-family:var(--display-font);font-weight:400}
:root{--control-edge:20px;--home-slot:108px}
.experience-nav{position:fixed;z-index:100;left:max(var(--control-edge),env(safe-area-inset-left));bottom:max(var(--control-edge),env(safe-area-inset-bottom));display:flex;align-items:center;padding:0}
.experience-nav a,.sound-toggle{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 16px;color:inherit;background:transparent;border:0;border-radius:0;font:400 18px/1.25 var(--display-font);text-decoration:none;cursor:pointer}
.experience-nav a{width:var(--home-slot)}
.experience-nav a:hover,.sound-toggle:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.experience-nav a:focus-visible,.sound-toggle:focus-visible,.volume:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.experience-nav .home-arrow{display:block;width:22px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.sound-controls{position:fixed;z-index:100;top:auto;right:auto;left:calc(max(var(--control-edge),env(safe-area-inset-left)) + var(--home-slot));bottom:max(var(--control-edge),env(safe-area-inset-bottom));display:flex;align-items:center;gap:0;max-width:calc(100% - var(--control-edge)*2 - var(--home-slot));padding:0}
.sound-header{display:flex;align-items:center;justify-content:space-between;gap:0}
.sound-toggle:disabled{cursor:wait;text-decoration:none}
.sound-toggle svg{width:20px;height:20px;flex:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.volume{appearance:none;-webkit-appearance:none;width:80px;height:44px;margin:0 16px 0 4px;padding:0;background:transparent;color:var(--ink);cursor:pointer;accent-color:var(--ink);border-radius:0}
.volume::-webkit-slider-runnable-track{height:1px;background:var(--ink)}
.volume::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-5px;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.volume::-moz-range-track{height:1px;background:var(--ink)}
.volume::-moz-range-thumb{width:9px;height:9px;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.audio-error{position:absolute;left:0;right:auto;top:auto;bottom:calc(100% + 8px);width:220px;max-width:calc(100vw - 24px);padding:12px 16px;background:var(--paper);color:var(--ink);font:16px/1.35 var(--display-font)}
.sound-controls [hidden]{display:none}
@media(max-width:480px){:root{--control-edge:12px}.experience-nav a,.sound-toggle{padding:10px 14px}.volume{width:68px;margin-right:14px}}
@media(max-width:360px){.sound-controls{left:max(var(--control-edge),env(safe-area-inset-left));bottom:calc(max(var(--control-edge),env(safe-area-inset-bottom)) + 48px);max-width:calc(100% - var(--control-edge)*2)}}

/* Active experiences end above a shared bar in normal page flow. */
body:has(.experience-toolbar),#root:has(>.experience-toolbar){display:flex;flex-direction:column;height:100svh;overflow:hidden}
body:has(.experience-toolbar)>main,#root:has(>.experience-toolbar)>.bead-study{flex:1;min-height:0;height:auto;width:100%;overflow:hidden}
.experience-toolbar{--home-slot:108px;position:relative;z-index:100;flex:none;display:flex;align-items:center;min-height:calc(56px + env(safe-area-inset-bottom));width:100%;padding:3px max(clamp(12px,2vw,24px),env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(clamp(12px,2vw,24px),env(safe-area-inset-left));color:var(--ink);background:var(--paper);border-top:1px solid color-mix(in oklch,var(--ink) 15%,var(--paper));font-family:var(--display-font)}
.experience-toolbar .experience-nav{position:static;z-index:auto;flex:none;inset:auto;width:auto;padding:0;background:transparent}
.experience-toolbar .sound-controls{position:relative;z-index:auto;inset:auto;flex:none;min-width:0;max-width:none;padding:0;background:transparent}
.experience-toolbar .sound-header{gap:0;white-space:nowrap}
.experience-toolbar a:focus-visible,.experience-toolbar button:focus-visible,.experience-toolbar .volume:focus-visible{outline-offset:2px}
.experience-toolbar .audio-error{bottom:calc(100% + 10px)}
@media(max-width:480px){.experience-toolbar{--home-slot:96px}.experience-toolbar .experience-nav a,.experience-toolbar .sound-toggle{padding-inline:10px}.experience-toolbar .volume{width:68px;margin-right:8px}}
@media(max-width:360px){.experience-toolbar{--home-slot:88px}.experience-toolbar .experience-nav a,.experience-toolbar .sound-toggle{font-size:16px;gap:8px;padding-inline:8px}.experience-toolbar .sound-toggle svg{width:18px;height:18px}.experience-toolbar .volume{width:40px;margin-right:8px}}