@font-face{font-family:Sans;src:url('fonts/sans.woff2') format('woff2');font-display:swap;font-weight:400}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f4f3f3;color:#191b1c;font-family:Sans,Arial,sans-serif}#network{position:fixed;inset:0;background:radial-gradient(ellipse at center,#fff,#f4f3f3)}main{position:relative;min-height:100svh;display:grid;place-items:center;padding:80px 24px;pointer-events:none}.identity{display:flex;align-items:center;gap:7px;position:relative}.identity:before{content:'';position:absolute;inset:-60px -90px;background:radial-gradient(ellipse,#f4f3f3e8,transparent 70%);z-index:-1}.identity img{width:clamp(90px,13vw,170px);height:auto;object-fit:contain}h1{font-family:Comfortaa,Arial,sans-serif;transform:translateY(-.07em);font-size:clamp(44px,7vw,88px);font-weight:400;letter-spacing:-.055em;line-height:1.15;margin:0}.controls{position:fixed;bottom:22px;right:24px;display:flex;gap:10px}button{font:inherit;font-size:12px;color:#555;background:#f4f3f3c9;border:1px solid #5553;border-radius:30px;min-height:44px;padding:10px 15px;cursor:pointer;transition:background .3s,color .3s}button:hover{background:#fff;color:#111}button:focus-visible{outline:2px solid #6d619f;outline-offset:4px}[hidden]{display:none!important}@media(max-width:480px){.identity{flex-direction:row;gap:4px}.identity img{width:clamp(64px,19vw,90px)}h1{font-size:clamp(36px,10vw,48px)}.controls{right:16px;bottom:16px}}@media(prefers-reduced-motion:no-preference){.identity{animation:appear 1.8s ease-out both}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}







/* Static fallback remains beneath the animated canvas. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
main{height:100svh;min-height:0;overflow:hidden}
#network{overflow:hidden;background-image:url("images/network-static.svg");background-size:cover;background-position:center;background-repeat:no-repeat}

/* Quiet navigation and centered reading panels. */
.menu-shell{position:fixed;top:24px;left:24px;z-index:5}.menu-toggle{width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px;background:#f4f3f3b0;border-color:transparent}.menu-toggle span{display:block;width:21px;height:1px;background:#373939;transition:transform .3s,opacity .3s}.menu-toggle[aria-expanded="true"] span:first-of-type{transform:translateY(6px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-of-type(2){opacity:0}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-6px) rotate(-45deg)}
#site-menu{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:200px;padding:12px;margin-top:10px;border:1px solid #ffffffb0;border-radius:18px;background:#f4f3f3e8;backdrop-filter:blur(18px);box-shadow:0 10px 50px #22222208;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .5s,transform .5s,visibility .5s;pointer-events:none}#site-menu.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}#site-menu button{border:0;border-radius:9px;background:transparent;text-align:left;font-size:15px;padding:12px 15px;color:#494b4c}#site-menu button:hover,#site-menu button:focus-visible{background:#ffffffbd;color:#111}
#information{padding:0;border:1px solid #fff9;border-radius:24px;width:min(620px,calc(100vw - 36px));max-height:calc(100dvh - 48px);margin:auto;background:#f7f6f3f5;color:#292c2c;box-shadow:0 24px 100px #2426281a;overflow:auto;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}#information.is-open{opacity:1;transform:none}#information::backdrop{background:#eeedeb77;backdrop-filter:blur(7px);opacity:0;transition:opacity .3s}#information.is-open::backdrop{opacity:1}.panel{position:relative;padding:60px 54px 52px}.panel-close{position:absolute;right:16px;top:14px;border:0;background:transparent;font-size:27px;padding:5px 12px;color:#646767}.panel-label{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#76716b;margin:0 0 22px}.panel h2{font-family:Comfortaa,Arial,sans-serif;font-size:clamp(25px,4vw,35px);font-weight:400;letter-spacing:-.035em;line-height:1.35;margin:0 0 26px}.panel h2:focus{outline:none}#panel-copy p{font-size:16px;line-height:1.85;color:#585c5c;margin:0 0 18px}#panel-copy p:last-child{margin-bottom:0}@media(max-width:480px){.menu-shell{top:16px;left:16px}.panel{padding:58px 28px 34px}}@media(prefers-reduced-motion:reduce){#site-menu,#information,#information::backdrop,.menu-toggle span{transition:none}}

/* Optical centering for the combined logo and wordmark. */
.identity{left:clamp(-42px,-3vw,-12px)}


.menu-toggle img{display:block;width:24px;height:24px;object-fit:contain}


.menu-toggle[aria-expanded='false'] span{display:none}
.menu-toggle[aria-expanded='true'] img{display:none}
.menu-toggle[aria-expanded='true'] span{display:block}



#site-menu button{display:flex;align-items:center;gap:12px}
#site-menu .menu-item-icon{display:block;width:18px;height:18px;flex:0 0 18px;object-fit:contain}
/* Layered glass navigation: translucent surface, light rim, soft depth. */
#site-menu{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.02) 48%,rgba(232,234,236,.045));
  -webkit-backdrop-filter:blur(4.5px) saturate(115%);
  backdrop-filter:blur(4.5px) saturate(115%);
  border:1px solid rgba(255,255,255,.65);
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 1px 0 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.25),0 12px 32px rgba(30,37,44,.09),0 2px 6px rgba(30,37,44,.035);
}
#site-menu::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(ellipse at 0% 0%,rgba(255,255,255,.115),transparent 63%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.035) 48%,transparent 62%);
}
#site-menu button{color:#303537;transition:background .25s,box-shadow .25s,color .25s}
#site-menu button:hover,#site-menu button:focus-visible{background:rgba(255,255,255,.43);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 8px rgba(30,37,44,.035);color:#111}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#site-menu{background:rgba(247,247,246,.96)}}
@media(prefers-reduced-transparency:reduce){#site-menu{background:#f4f3f3;-webkit-backdrop-filter:none;backdrop-filter:none}#site-menu::before{display:none}}



.controls button{width:48px;height:48px;min-height:48px;border-radius:16px;padding:11px;display:grid;place-items:center}.controls button img,.controls button svg{display:block;width:24px;height:24px;object-fit:contain}
/* Almost-clear glass: the network stays visible through the panel. */
#site-menu{
  background:rgba(255,255,255,.025);
  -webkit-backdrop-filter:blur(2px) saturate(110%);
  backdrop-filter:blur(2px) saturate(110%);
  border-color:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 28px rgba(30,37,44,.045);
}
#site-menu::before{background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 45%)}
#site-menu button:hover,#site-menu button:focus-visible{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#site-menu{background:rgba(247,247,246,.9)}}
@media(prefers-reduced-transparency:reduce){#site-menu{background:#f4f3f3;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Larger menu and a navigable information deck. */
#site-menu{width:252px;padding:16px;gap:6px;max-width:calc(100vw - 48px)}
#site-menu button{font-size:17px;min-height:54px;padding:14px 17px;gap:16px}
#site-menu .menu-item-icon{width:21px;height:21px;flex-basis:21px}
#card-content{min-height:290px}
.card-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid #5552}
.card-navigation button{width:46px;height:46px;flex:0 0 46px;border-radius:14px;font-size:23px;line-height:1;padding:8px;color:#292c2c}
#card-position{font-size:12px;color:#676c6c;text-align:center;line-height:1.5}
@media(max-width:480px){#card-content{min-height:310px}#site-menu{max-width:calc(100vw - 32px)}.card-navigation{gap:10px}}
/* Larger navigation with a high-contrast hover state. */
#site-menu{width:315px;padding:20px;gap:7.5px}
#site-menu button{font-size:21.25px;min-height:67.5px;padding:17.5px 21.25px;gap:20px}
#site-menu .menu-item-icon{width:26.25px;height:26.25px;flex-basis:26.25px;transition:filter .25s}
#site-menu button:hover,#site-menu button:focus-visible{background:#292c2c;color:#f4f3ee;box-shadow:none}
#site-menu button:hover .menu-item-icon,#site-menu button:focus-visible .menu-item-icon{filter:invert(96%) sepia(7%) saturate(190%) hue-rotate(8deg) brightness(102%) contrast(92%)}
#site-menu{max-height:calc(100dvh - 106px);overflow-y:auto}
/* A fixed deck frame keeps every section the same size. */
#information{height:min(540px,calc(100dvh - 48px));overflow:hidden}
#information .panel{height:100%;display:flex;flex-direction:column;overflow:hidden}
#card-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}
.card-navigation{flex-shrink:0}
@media(max-width:480px){#information{height:min(570px,calc(100dvh - 36px));max-height:calc(100dvh - 36px)}#card-content{min-height:0}}
/* Align the copyright with the center of the 48px controls. */
.copyright{position:fixed;left:24px;bottom:22px;height:48px;display:flex;align-items:center;gap:.25em;margin:0;font-size:12px;line-height:1.5;color:#656969}
@media(max-width:600px){.copyright{left:16px;bottom:16px;width:calc(100vw - 154px);display:block;align-content:center;font-size:10px}.controls{right:16px;bottom:16px}}
/* Compact menu with brand-color hover backgrounds. */
#site-menu{width:267.75px;padding:17px;gap:6.375px}
#site-menu button{font-size:18.0625px;min-height:57.375px;padding:14.875px 18.0625px;gap:17px}
#site-menu .menu-item-icon{width:22.3125px;height:22.3125px;flex-basis:22.3125px}
#site-menu [data-page="about"]{--hover-color:#00bce8;--hover-ink:#182125;--hover-icon:brightness(0)}
#site-menu [data-page="technology"]{--hover-color:#6330bd;--hover-ink:#f4f3ee;--hover-icon:brightness(0) invert(.96)}
#site-menu [data-page="lucidity"]{--hover-color:#f51fa6;--hover-ink:#20151e;--hover-icon:brightness(0)}
#site-menu [data-page="research"]{--hover-color:#b1e83b;--hover-ink:#1e2516;--hover-icon:brightness(0)}
#site-menu button:hover,#site-menu button:focus-visible{background:var(--hover-color);color:var(--hover-ink);box-shadow:none}
#site-menu button:hover .menu-item-icon,#site-menu button:focus-visible .menu-item-icon{filter:var(--hover-icon)}
/* Hollow color highlights with a solid right-hand marker. */
#site-menu button{position:relative;color:#000;padding-right:28px}
#site-menu button::after{content:'';position:absolute;inset:0;border:2px solid var(--hover-color);border-right-width:40px;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .25s}
#site-menu button:hover,#site-menu button:focus-visible{background:transparent;color:#000;box-shadow:none}
#site-menu button:hover::after,#site-menu button:focus-visible::after{opacity:1}
#site-menu .menu-item-icon,#site-menu button:hover .menu-item-icon,#site-menu button:focus-visible .menu-item-icon{filter:brightness(0)}
@media(prefers-reduced-motion:reduce){#site-menu button::after{transition:none}}

/* Hover volume control, separate from the mute toggle. */
.sound-control{position:relative}
.volume-popover{position:absolute;bottom:58px;left:50%;transform:translate(-50%,6px);width:58px;padding:14px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(255,255,255,.94);border:1px solid #2223;border-radius:18px;box-shadow:0 8px 26px #00000012;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,transform .35s,visibility .35s}
.volume-popover.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
#volume-slider{--volume-fill:25%;writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;width:32px;height:130px;margin:0;background:transparent;cursor:pointer;touch-action:none}
#volume-slider::-webkit-slider-runnable-track{width:5px;border:1px solid #222;border-radius:4px;background:linear-gradient(to top,#111 0 var(--volume-fill),#fff var(--volume-fill) 100%)}
#volume-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin-left:-7px;background:#fff;border:2px solid #111;border-radius:50%;box-shadow:0 1px 3px #0002}
#volume-slider::-moz-range-track{width:5px;border:1px solid #222;border-radius:4px;background:linear-gradient(to top,#111 0 var(--volume-fill),#fff var(--volume-fill) 100%)}
#volume-slider::-moz-range-thumb{width:14px;height:14px;background:#fff;border:2px solid #111;border-radius:50%}
#volume-slider:focus-visible{outline:2px solid #222;outline-offset:3px;border-radius:8px}
#volume-value{font-size:12px;color:#111;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.volume-popover{transition:none}}
/* Vertical copyright along the right edge. */
.copyright{left:auto;right:24px;top:50%;bottom:auto;width:max-content;height:auto;display:block;writing-mode:vertical-rl;transform:translateY(-50%);font-size:12px;line-height:1.5;white-space:nowrap}
@media(max-width:600px){.copyright{left:auto;right:12px;top:50%;bottom:auto;width:max-content;height:auto;display:block;font-size:10px}}






/* Music credit appears beside the playback controls without moving them. */
.music-credit{position:absolute;right:calc(100% + 18px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 158px);font-size:12px;line-height:1.5;color:#484a4b;opacity:0;pointer-events:none;transition:opacity .45s ease}
.controls:has(.sound-control:hover) .music-credit,
.controls:has(.sound-control:focus-within) .music-credit,
.controls:has(.volume-popover.is-visible) .music-credit{opacity:1}
@media(max-width:480px){.music-credit{right:calc(100% + 10px);font-size:10px;gap:5px}}
@media(prefers-reduced-motion:reduce){.music-credit{transition:none}}
/* Consistent, stroke-only modal direction cues. */
.navigation-chevron{display:inline-block;width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.card-navigation button,.article-slider-controls button{display:inline-flex;align-items:center;justify-content:center}
.audius-footer button[data-audius-close],.radio-footer button[data-radio-close],#audius-results-back:not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:7px}
.article-swipe-hint .navigation-chevron{width:12px;height:12px;margin-inline:4px}

/* Shared timing for every holographic border shimmer. */
:root{--shimmer-duration:1.5s}