:root{
  --bg-0:#05060c;
  --bg-1:#0a0c18;
  --ink:#eef0ff;
  --ink-soft:#aab0d8;
  --ink-faint:#6b7099;
  --glow:#7c8bff;
  --glow-warm:#c9a8ff;
  --line:rgba(160,170,230,.16);
  --stage-max:min(92vw,640px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 120% at 50% -10%, #141833 0%, transparent 55%),
    radial-gradient(90% 90% at 80% 110%, #1a1030 0%, transparent 50%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0) 70%);
  background-attachment:fixed;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::after{ /* fine grain */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

#sky{position:fixed;inset:0;z-index:0;display:block}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Stage ---------- */
.stage{
  position:relative;z-index:2;
  min-height:100svh;min-height:100vh;
  display:grid;place-items:center;
  padding:max(24px,env(safe-area-inset-top)) 22px 128px;
}

.prompt{
  width:var(--stage-max);text-align:center;
  transition:opacity .9s ease, transform .9s ease, filter .9s ease;
}
.prompt.dissolving{opacity:0;transform:translateY(-10px);filter:blur(3px);pointer-events:none}

.eyebrow{
  margin:0 0 18px;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.45;letter-spacing:.42em}50%{opacity:.9;letter-spacing:.5em}}

.ask{
  margin:0 0 40px;font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(2.1rem,7vw,3.7rem);line-height:1.22;letter-spacing:-.01em;
  color:var(--ink);
}
.ask em{
  display:inline-block;
  font-style:italic;font-weight:300;
  padding:0 .12em .14em;margin:0 -.12em;   /* room for italic descenders + the '?' */
  background:linear-gradient(100deg,var(--glow),var(--glow-warm));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Composer ---------- */
.composer{
  display:flex;align-items:center;gap:10px;
  width:100%;max-width:520px;margin:0 auto;
  padding:6px 6px 6px 4px;
  border-bottom:1px solid var(--line);
  transition:border-color .5s ease;
}
.composer:focus-within{border-color:rgba(160,170,230,.5)}
.composer:focus-within::after{content:none}

#thing{
  flex:1;min-width:0;
  appearance:none;background:transparent;border:0;outline:0;
  color:var(--ink);
  font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(1.15rem,3.6vw,1.5rem);
  padding:14px 8px;
}
#thing::placeholder{color:var(--ink-faint);opacity:.7;font-style:italic}

.release{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:999px;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:.9rem;font-weight:500;letter-spacing:.02em;
  color:var(--ink);
  background:linear-gradient(180deg,rgba(124,139,255,.22),rgba(124,139,255,.08));
  border:1px solid rgba(124,139,255,.4);
  box-shadow:0 0 0 rgba(124,139,255,0);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,background .3s ease,opacity .3s ease;
}
.release:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(124,139,255,.28)}
.release:active{transform:translateY(0) scale(.97)}
.release:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.release svg{opacity:.85;transition:transform .3s ease}
.release:hover svg{transform:translateX(3px)}

.hint{
  margin:22px 0 0;font-size:.82rem;color:var(--ink-faint);
  opacity:.75;transition:opacity .5s ease;
}

/* ---------- Afterglow ---------- */
.afterglow{
  width:var(--stage-max);text-align:center;
  animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.settle{
  margin:0 0 26px;font-family:"Fraunces",serif;font-style:italic;font-weight:300;
  font-size:clamp(2rem,6vw,3rem);color:var(--ink);
  letter-spacing:.01em;
}
.again{
  appearance:none;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-soft);font-family:"Inter",sans-serif;font-size:.88rem;
  padding:11px 22px;transition:border-color .3s ease,color .3s ease,transform .2s ease;
}
.again:hover{border-color:rgba(160,170,230,.5);color:var(--ink);transform:translateY(-1px)}

/* ---------- Ledger / footer ---------- */
.ledger{
  position:fixed;left:0;right:0;bottom:0;z-index:3;
  padding:20px 22px calc(34px + env(safe-area-inset-bottom));
  text-align:center;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,6,12,.72) 55%);
}
.ledger a,.ledger button{pointer-events:auto}
.count-line{margin:0;display:flex;flex-wrap:wrap;gap:.5ch;align-items:baseline;justify-content:center}
.count{
  font-family:"Fraunces",serif;font-weight:400;
  font-size:clamp(1.2rem,4vw,1.6rem);
  color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  text-shadow:0 0 24px rgba(124,139,255,.35);
}
.count.pulse{animation:countpulse .8s ease}
@keyframes countpulse{0%{transform:scale(1)}30%{transform:scale(1.12);color:var(--glow-warm)}100%{transform:scale(1)}}
.count-label{font-size:.82rem;color:var(--ink-faint);letter-spacing:.04em}

.credits{
  margin-top:14px;
  animation:fadeUp 1s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.credits-text{margin:0 0 12px;font-size:.85rem;color:var(--ink-soft);font-style:italic}
.credits-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bmac,.share{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Inter",sans-serif;font-size:.83rem;font-weight:500;
  padding:9px 16px;border-radius:999px;cursor:pointer;text-decoration:none;
  transition:transform .2s ease,box-shadow .3s ease,background .3s ease,border-color .3s ease;
}
.bmac{
  color:#1a1205;
  background:linear-gradient(180deg,#ffdd6b,#ffcf3f);
  border:1px solid rgba(255,220,100,.7);
}
.bmac:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,207,63,.35)}
.share{
  color:var(--ink-soft);background:transparent;border:1px solid var(--line);
}
.share:hover{transform:translateY(-2px);color:var(--ink);border-color:rgba(160,170,230,.5)}

/* ---------- Corner actions (BMAC + sound) ---------- */
.corner{
  position:fixed;top:16px;right:16px;z-index:6;
  display:flex;gap:10px;align-items:center;
}
.coffee,.sound,.explore-btn{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;
  border:1px solid var(--line);backdrop-filter:blur(6px);
  transition:color .3s ease,border-color .3s ease,transform .2s ease,box-shadow .3s ease;
}
.explore-btn{color:var(--ink-soft);background:rgba(160,170,230,.06)}
.explore-btn:hover{color:var(--ink);border-color:rgba(160,170,230,.45);transform:scale(1.05)}
.coffee{
  color:#ffcf3f;background:rgba(255,207,63,.1);
  border-color:rgba(255,207,63,.34);text-decoration:none;
}
.coffee:hover{transform:scale(1.07) translateY(-1px);border-color:rgba(255,207,63,.62);box-shadow:0 8px 22px rgba(255,207,63,.28)}
.sound{color:var(--ink-soft);background:rgba(160,170,230,.06)}
.sound:hover{color:var(--ink);border-color:rgba(160,170,230,.45);transform:scale(1.05)}
.sound .sound-on{display:none}
.sound[aria-pressed="true"] .sound-off{display:none}
.sound[aria-pressed="true"] .sound-on{display:block;color:var(--glow)}

/* ---------- Explore mode ---------- */
.explore-bar{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);z-index:8;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  padding:10px 12px 10px 20px;border-radius:999px;
  background:rgba(12,14,26,.7);border:1px solid var(--line);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s ease;
  max-width:calc(100vw - 32px);
}
body.exploring .explore-bar{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.explore-hint{font-size:.76rem;color:var(--ink-faint);letter-spacing:.02em}
.explore-done{
  flex:none;cursor:pointer;border:1px solid rgba(124,139,255,.4);border-radius:999px;
  background:linear-gradient(180deg,rgba(124,139,255,.22),rgba(124,139,255,.08));
  color:var(--ink);font-family:"Inter",sans-serif;font-size:.82rem;font-weight:500;padding:8px 16px;
  transition:transform .2s ease,box-shadow .3s ease;
}
.explore-done:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(124,139,255,.28)}

/* when exploring: fade the whole interface away, leave only the stars */
body.exploring .stage,
body.exploring .ledger,
body.exploring .legal,
body.exploring .corner{opacity:0;pointer-events:none;transition:opacity .5s ease}
body.exploring #sky{cursor:grab}
body.exploring.grabbing #sky{cursor:grabbing}

/* ---------- Public opt-in ---------- */
.pubtoggle{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  margin:24px auto 0;padding:8px 14px;border-radius:999px;
  border:1px solid transparent;
  transition:border-color .3s ease,background .3s ease;
  -webkit-tap-highlight-color:transparent;
}
.pubtoggle:hover{border-color:var(--line)}
.pubtoggle input{position:absolute;opacity:0;width:0;height:0}
.pub-box{
  flex:none;width:16px;height:16px;border-radius:5px;
  border:1.5px solid rgba(160,170,230,.45);
  display:grid;place-items:center;transition:all .25s ease;
}
.pub-box::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--glow);transform:scale(0);transition:transform .2s ease}
.pubtoggle input:checked + .pub-box{border-color:var(--glow);box-shadow:0 0 12px rgba(124,139,255,.4)}
.pubtoggle input:checked + .pub-box::after{transform:scale(1)}
.pubtoggle input:focus-visible + .pub-box{outline:2px solid var(--glow);outline-offset:2px}
.pub-label{font-size:.8rem;color:var(--ink-soft)}
.pub-label em{font-style:normal;color:var(--ink-faint);font-size:.92em}
.pubtoggle input:checked ~ .pub-label em{color:#e0a3b8}

/* ---------- Void number (afterglow) ---------- */
.voidnum{
  margin:-8px 0 26px;font-family:"Inter",sans-serif;font-size:.9rem;
  color:var(--ink-soft);letter-spacing:.03em;min-height:1.2em;
}
.voidnum b{color:var(--ink);font-weight:500}

/* ---------- Hover / tap tooltip ---------- */
.voidtip{
  position:fixed;z-index:7;pointer-events:none;
  max-width:min(76vw,300px);
  padding:10px 14px;border-radius:12px;
  transform:translate(-50%,-115%);
  background:rgba(12,14,26,.82);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  opacity:0;transition:opacity .18s ease;
}
.voidtip.show{opacity:1}
.voidtip .vt-text{
  margin:0;font-family:"Fraunces",serif;font-style:italic;font-weight:300;
  font-size:1rem;line-height:1.35;color:var(--ink);
}
.voidtip .vt-meta{
  margin:5px 0 0;font-family:"Inter",sans-serif;font-size:.72rem;
  letter-spacing:.04em;color:var(--ink-faint);
}

/* ---------- Legal footer ---------- */
.legal{
  position:fixed;left:0;right:0;bottom:0;z-index:4;
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  font-family:"Inter",sans-serif;font-size:.66rem;letter-spacing:.02em;
  pointer-events:none;
}
.legal a{pointer-events:auto;color:var(--ink-faint);text-decoration:none;opacity:.7;transition:opacity .3s ease,color .3s ease}
.legal a:hover{opacity:1;color:var(--ink-soft)}
.legal-links{display:flex;gap:8px;align-items:center}
.legal-links span{color:var(--ink-faint);opacity:.5}
.legal-cred{text-align:right}

/* ---------- Loader + entrance ---------- */
.loader{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;align-content:center;gap:20px;
  background:var(--bg-0);
  transition:opacity .9s ease;
}
.loader.gone{opacity:0;pointer-events:none}
.loader-orb{
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fff,var(--glow) 70%,transparent);
  box-shadow:0 0 30px 6px rgba(124,139,255,.5);
  animation:orbpulse 1.6s ease-in-out infinite;
}
@keyframes orbpulse{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.loader-word{
  margin:0;font-family:"Fraunces",serif;font-style:italic;font-weight:300;
  font-size:1.1rem;letter-spacing:.35em;color:var(--ink-faint);
  text-indent:.35em;
}

/* elements fade/rise in once loaded */
#sky{opacity:0;transition:opacity 1.8s ease}
body.loaded #sky{opacity:1}
.stage .eyebrow,.stage .ask,.composer,.pubtoggle,.hint,.count-line,.corner,.legal{
  opacity:0;transform:translateY(16px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1);
}
body.loaded .eyebrow{opacity:1;transform:none;transition-delay:.15s}
body.loaded .ask{opacity:1;transform:none;transition-delay:.32s}
body.loaded .composer{opacity:1;transform:none;transition-delay:.5s}
body.loaded .pubtoggle{opacity:1;transform:none;transition-delay:.62s}
body.loaded .hint{opacity:1;transform:none;transition-delay:.72s}
body.loaded .count-line{opacity:1;transform:none;transition-delay:.85s}
body.loaded .corner{opacity:1;transform:none;transition-delay:.95s}
body.loaded .legal{opacity:1;transform:none;transition-delay:1.05s}

/* explore mode wins over the entrance rules (declared last for source-order priority) */
body.exploring .stage,
body.exploring .ledger,
body.exploring .legal,
body.exploring .corner{
  opacity:0!important;pointer-events:none;
  transition:opacity .45s ease!important;transition-delay:0s!important;
}

@media (max-width:520px){
  .stage{padding-bottom:158px}
  .composer{flex-wrap:wrap}
  .release{width:100%;justify-content:center;margin-top:4px}
  .legal{font-size:.6rem;gap:8px}
  .legal-cred{max-width:54%;line-height:1.3}
  .pub-label{font-size:.74rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.15s!important}
}