:root{color-scheme:dark;--ink:#7132f5;--text:#f1eaff;--muted:#b4a5c8;--line:#d6b8ff24;--glass:#130923cf;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#080210;color:var(--text)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d5aeff;outline-offset:5px}button{border:0}a{color:inherit;text-decoration:none}#universe,#scene{position:fixed;inset:0;width:100%;height:100%;height:100dvh}#scene{display:block;touch-action:none}header,footer{position:fixed;left:0;right:0;z-index:2;display:flex;justify-content:space-between;align-items:center;pointer-events:none}header{top:0;padding:30px 42px}header>*:not(.empty),footer>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:21px}.ink-word{font-size:51px;line-height:1;font-weight:750;letter-spacing:-4px}.brand-divider{width:1px;height:24px;background:#d6b8ff40}.world-label{font-size:12px;letter-spacing:.24em;color:#ddd0ed}.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#20103475;backdrop-filter:blur(15px);transition:background .2s}.icon-button:hover,.pill:hover{background:#6c3a974d}.icon-button svg{width:21px;height:21px}footer{bottom:0;padding:30px 42px;align-items:flex-end}.eyebrow{font-size:12px;letter-spacing:.25em;color:#d9c6ee}.scene-caption h1{font-size:clamp(24px,2.8vw,42px);line-height:1.1;font-weight:400;letter-spacing:-.05em;margin:12px 0 0}.scene-caption em{font-family:Georgia,serif;font-weight:400;color:#d4adff}.bottom-controls{text-align:right}#drag-hint{display:block;font-size:12px;color:var(--muted);margin-bottom:13px;letter-spacing:.04em}.control-row{display:flex;justify-content:flex-end;align-items:center;gap:9px}.pill{background:#20103475;backdrop-filter:blur(15px);border:1px solid var(--line);border-radius:30px;padding:12px 17px;font-size:14px}.pill span{color:#c7a0f4;margin-left:13px}#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;background:#090311;z-index:5;font-size:14px;color:#ccb9e6;transition:opacity .6s}.loader-orbit{width:24px;height:24px;border:1px solid #8755c344;border-top-color:#ddbbff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#loading.done{opacity:0;pointer-events:none}#error{position:fixed;top:45%;left:50%;transform:translateX(-50%);z-index:6;padding:25px;background:var(--glass);border:1px solid var(--line);border-radius:16px;text-align:center}#retry{padding:10px;border-radius:20px;background:#7438c9;margin-left:10px}#settings{position:fixed;right:42px;top:90px;z-index:4;width:290px;background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:20px 23px;backdrop-filter:blur(28px);box-shadow:0 15px 60px #0004}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.panel-title h2{font-size:16px;font-weight:500;margin:0}.panel-title .icon-button{width:30px;height:30px;font-size:22px}.setting{display:grid;grid-template-columns:1fr auto;gap:14px;margin:24px 0;font-size:14px}.setting output{color:#cba6ff}.setting input{grid-column:1/-1;width:100%;accent-color:#ae74ff;cursor:pointer}.switch-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin:21px 0}.switch-row input{accent-color:#995ee9;width:18px;height:18px;cursor:pointer}.text-button{background:none;color:#c2add6;font-size:13px;padding:10px 0 0;border-top:1px solid var(--line);width:100%;text-align:left}[hidden]{display:none!important}@media(max-width:650px){header{padding:22px}.ink-word{font-size:42px}.brand{gap:14px}.brand-divider{height:20px}.world-label{font-size:10px;letter-spacing:.15em}footer{padding:22px;gap:20px}.scene-caption h1{font-size:27px}.eyebrow{font-size:10px;letter-spacing:.15em}#drag-hint{font-size:11px;max-width:140px;line-height:1.5}.pill{font-size:12px;padding:12px}.pill span{margin-left:5px}#settings{right:18px;top:78px;width:min(290px,calc(100vw - 36px))}}@media(prefers-reduced-motion:reduce){.loader-orbit{animation:none}}
.token-word{font-size:clamp(26px,3.4vw,43px);font-weight:850;font-style:italic;letter-spacing:-.07em;line-height:1}.header-actions{display:flex;gap:10px;align-items:center}#start-screen{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:17px;background:linear-gradient(0deg,#080213b0,#08021322);backdrop-filter:blur(3px)}#enter{border:1px solid #c592ff55;border-radius:40px;padding:19px 28px;background:#331955b0;backdrop-filter:blur(18px);font-size:18px;letter-spacing:.01em;box-shadow:0 0 50px #7e35c322}#enter:hover{background:#542a82}#enter span{margin-left:20px;color:#d3a7ff}.sound-note{font-size:12px;color:#c4addc}#sound{min-width:98px}@media(max-width:650px){.token-word{font-size:28px}.header-actions{gap:7px}#sound{min-width:78px;font-size:12px;padding:11px}.world-label,.eyebrow{font-size:12px}footer{gap:8px}#replay{font-size:12px}}
.cinema-bar{position:fixed;left:0;right:0;height:calc(var(--cinema,1) * 12vh);background:#000;z-index:3;pointer-events:none}.cinema-top{top:0}.cinema-bottom{bottom:0}header,footer{z-index:4}#settings{z-index:6}#start-screen{z-index:5}
header,footer{transition:opacity 1.2s ease,visibility 1.2s}body.intro-playing header,body.intro-playing footer{opacity:0;visibility:hidden;pointer-events:none}body.intro-playing header *,body.intro-playing footer *{pointer-events:none}

/* Links out of the experience. They live in the footer, so they inherit its
   reveal when the intro ends; the extra delay lets them arrive a beat after
   the rest of the chrome rather than with it. */
#outro-links{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center;transition:opacity .9s ease .45s,transform .9s ease .45s}
body.intro-playing #outro-links{opacity:0;transform:translateY(16px)}
.link-pill{display:inline-flex;align-items:center;text-decoration:none;color:var(--text);background:#20103475;backdrop-filter:blur(15px);border:1px solid var(--line);border-radius:30px;padding:12px 17px;font-size:14px;letter-spacing:.02em;white-space:nowrap;transition:background .2s,border-color .2s}
.link-pill:hover{background:#6c3a974d;border-color:#d6b8ff5c}
/* the project link is the one this page exists to point at */
.link-pill.featured{border-color:#b070ff8c;background:#3a1a6b66;box-shadow:0 0 18px #7132f53d}
.link-pill.featured:hover{border-color:#d6a8ff;box-shadow:0 0 24px #7132f566}
@media(max-width:650px){
  /* On a phone the bottom edge already carries the replay button, the camera
     controls and the sound prompt, so the links move to the top instead -
     centred, clear of the header row. They stay a footer child so they keep
     inheriting its reveal when the intro ends. */
  #outro-links{position:fixed;left:50%;top:calc(var(--cinema,1) * 12vh + 96px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);margin:0}
  body.intro-playing #outro-links{transform:translateX(-50%) translateY(16px)}
  .link-pill{font-size:12px;padding:10px 13px}
}
@media(prefers-reduced-motion:reduce){#outro-links{transition-duration:.01ms}}

/* Autoplay prompt. It sits on the scene, not in the header, because the
   header is hidden for the whole intro - which is exactly when the music
   is supposed to start. Rides above the bottom cinema bar as that bar
   retracts. */
.sound-prompt{position:fixed;left:50%;bottom:calc(var(--cinema,1) * 12vh + 26px);transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:9px;padding:13px 20px;border:1px solid #d6b8ff59;border-radius:30px;background:#2410406b;backdrop-filter:blur(15px);color:var(--text);font:inherit;font-size:14px;letter-spacing:.02em;cursor:pointer;box-shadow:0 0 24px #7132f53d;animation:soundPulse 2.4s ease-in-out infinite}
.sound-prompt svg{width:19px;height:19px;stroke-linecap:round;stroke-linejoin:round}
.sound-prompt:hover{background:#6c3a9773;border-color:#d6a8ff}
@keyframes soundPulse{0%,100%{box-shadow:0 0 20px #7132f533}50%{box-shadow:0 0 30px #7132f577}}
@media(max-width:650px){.sound-prompt{font-size:13px;padding:11px 16px}}
@media(prefers-reduced-motion:reduce){.sound-prompt{animation:none}}

/* Entry: the page drops in from above when the scene has loaded. html needs
   the same background because the body uncovers it while it travels. */
html{background:#080210}
/* -100vh, not -100%: every child of body is fixed, so the body box itself is
   zero pixels tall and a percentage translate would resolve to nothing. */
@keyframes siteSlideDown{from{transform:translateY(-100vh)}to{transform:translateY(0)}}
body.revealing{animation:siteSlideDown .95s cubic-bezier(.16,.84,.24,1)}
@media(prefers-reduced-motion:reduce){body.revealing{animation:none}}
.skip-intro{display:none;position:fixed;right:max(24px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:7;padding:12px 18px;min-height:44px;background:rgba(30,12,50,.18);border:1px solid #eadcff55;border-radius:28px;color:#f1eaff;font-size:13px;backdrop-filter:blur(8px);transition:background .2s}.intro-playing .skip-intro{display:block}.skip-intro:hover{background:rgba(100,55,155,.3)}.skip-intro:disabled{visibility:hidden}.skip-intro span{margin-left:10px}@media(max-width:650px){.skip-intro{right:max(16px,env(safe-area-inset-right));padding:11px 14px}}