@font-face { font-family:'DM Mono'; font-style:normal; font-weight:300; font-display:swap; src:url(../dm-mono-300.ttf) format('truetype'); }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(../dm-mono-400.ttf) format('truetype'); }
:root {
  --bg:    #000000;
  --bg2:   rgba(255,255,255,0.07);
  --bg3:   rgba(255,255,255,0.12);
  --ink:   rgba(255,255,255,1);
  --ink2:  rgba(255,255,255,0.72);
  --ink3:  rgba(255,255,255,0.38);
  --paper: #000000;
  --paper2: rgba(255,255,255,0.07);
  --paper3: rgba(255,255,255,0.14);
  --accent: rgba(255,255,255,0.9);
  --accent2: rgba(255,255,255,0.7);
  --gold:  rgba(255,255,255,0.9);
  --line:  rgba(255,255,255,0.1);
  --line2: rgba(255,255,255,0.05);
  --green: #30d158;
  --red:   #ff453a;
  --blue:  #0a84ff;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-serif: 'New York', 'Georgia', 'Palatino Linotype', Palatino, serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-mono: 'DM Mono', 'SF Mono', monospace;
  --radius: 14px;
  --radius-sm: 10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;overscroll-behavior:none;height:100%}
body{background:#20120e;color:var(--ink);font-family:var(--font-sans);height:100%;margin:0;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
/* Lock viewport when explorer is active (prevents iOS rubber-band scroll) */
body.explorer-active{position:fixed;width:100%;overflow:hidden}
/* ── DYNAMIC GRADIENT BACKGROUND (Apple Music style) ── */
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .8s ease}
#bg-img{display:none}
#bg-gradient{position:absolute;inset:-10%;width:120%;height:120%}
@keyframes bgDrift{0%{transform:translate(0,0) scale(1)}25%{transform:translate(2%,-1%) scale(1.02)}50%{transform:translate(-1%,2%) scale(1.01)}75%{transform:translate(1%,1%) scale(1.03)}100%{transform:translate(-2%,-1%) scale(1)}}
.screen{display:none;min-height:100dvh;min-height:100vh;position:relative;z-index:2}
.screen.active{display:flex;flex-direction:column}

/* ── START SCREEN ── */
#screen-lang{align-items:center;padding:max(env(safe-area-inset-top,0px) + 40px, 60px) 24px max(env(safe-area-inset-bottom,0px) + 60px, 60px);text-align:center;min-height:100dvh;min-height:100vh;gap:0}
.lang-debug{position:fixed;top:max(env(safe-area-inset-top,0px) + 8px, 12px);left:12px;display:flex;gap:6px;z-index:100;opacity:0.4}
.lang-debug .skip-btn{font-size:10px;padding:4px 8px}
#screen-lang .step-middle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0;gap:16px}
#screen-lang .step-bottom{display:flex;flex-direction:column;align-items:center;flex-shrink:0;padding-top:48px;max-width:360px;width:100%}
.lang-logo{font-size:clamp(28px,5vw,36px);font-weight:700;letter-spacing:-.03em;margin-bottom:8px;line-height:1;color:rgba(255,255,255,0.35)}
.lang-logo em{font-style:normal;color:rgba(255,255,255,0.5)}
.lang-headline{font-family:var(--font-sans);font-size:clamp(35px,8vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.1;color:#fff;margin:0 0 48px;max-width:720px;text-wrap:balance}
.lang-headline #l-static{white-space:nowrap}
.lang-headline .rotating-word{display:block;color:rgba(255,255,255,0.5);transition:opacity .4s ease,transform .4s ease}
/* Card carousel */
.landing-cards{display:flex;justify-content:center;align-items:center;gap:0;height:320px;position:relative;width:100%;max-width:1100px;flex-shrink:0;margin:0 auto}
.landing-card{width:224px;height:224px;aspect-ratio:1/1;border-radius:24px;overflow:hidden;position:absolute;left:50%;margin-left:-112px;top:50%;margin-top:-112px;transform-origin:50% 900px;box-shadow:0 20px 50px rgba(0,0,0,0.55),0 6px 16px rgba(0,0,0,0.35),0 1px 3px rgba(0,0,0,0.2);transition:transform .5s cubic-bezier(.23,1,.32,1);will-change:transform;border:1px solid rgba(255,255,255,0.06)}
.landing-card img{width:100%;height:100%;object-fit:cover}
.landing-card:nth-child(1){transform:rotate(-20deg);z-index:1}
.landing-card:nth-child(2){transform:rotate(-12deg);z-index:2}
.landing-card:nth-child(3){transform:rotate(-4deg);z-index:3}
.landing-card:nth-child(4){transform:rotate(4deg);z-index:3}
.landing-card:nth-child(5){transform:rotate(12deg);z-index:2}
.landing-card:nth-child(6){transform:rotate(20deg);z-index:1}
.lang-toggle{display:flex;background:rgba(255,255,255,0.08);border-radius:20px;padding:3px;margin-top:48px}
.lang-pill{padding:8px 20px;border:none;background:none;color:rgba(255,255,255,0.35);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;font-weight:500;cursor:pointer;border-radius:17px;transition:all .25s ease}
.lang-pill.active{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.9)}
.landing-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 44px;background:rgba(255,255,255,0.9);color:#000;font-family:var(--font-sans);font-size:16px;letter-spacing:-.01em;border:none;cursor:pointer;transition:all .2s cubic-bezier(.23,1,.32,1);border-radius:14px;font-weight:600}
.landing-cta:hover{background:#fff;box-shadow:0 2px 16px rgba(255,255,255,0.15)}
.landing-cta svg{width:14px;height:14px}
.landing-meta{position:absolute;bottom:32px;font-family:var(--font-mono);font-size:11px;color:var(--ink3);letter-spacing:.1em}
.skip-btn{margin-top:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.25);background:none;border:1px solid rgba(255,255,255,0.1);padding:8px 20px;border-radius:20px;cursor:pointer;transition:color .18s,border-color .18s}
.skip-btn:hover{color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.3)}

#screen-onboarding{padding:0;overflow:hidden}
#screen-onboard-slides{padding:0;overflow:hidden;align-items:center;justify-content:center}
.ob-slides-container{position:absolute;inset:0;overflow:hidden}
/* ── Onboarding slides — layout ── */
.ob-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:max(env(safe-area-inset-top,0px) + 40px, 60px) 24px 60px;opacity:0;transform:translateY(20px);transition:opacity .5s cubic-bezier(.23,1,.32,1),transform .5s cubic-bezier(.23,1,.32,1);pointer-events:none}
.ob-slide.active{opacity:1;transform:translateY(0);pointer-events:auto}
@media(max-width:480px){.ob-slide{padding:80px 20px calc(env(safe-area-inset-bottom,0px) + 16px)}}
/* Demo wrapper — fills upper space, centers card */
.ob-slide-top{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;min-height:0}
.ob-demo-wrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;padding:0}
.ob-demo-card{width:min(576px,88vw);position:relative;padding:24px;border-radius:24px;background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08)}
@media(max-width:480px){.ob-demo-card{width:100%;padding:0;border-radius:0;background:none;border:none}}
@media(max-width:380px){.ob-demo-card{width:100%}}
/* Replay button */
.ob-replay{position:absolute;top:-8px;right:-8px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .3s;z-index:2;font-size:16px;color:rgba(255,255,255,0.4);padding:0}
@media(min-width:500px){.ob-replay{width:40px;height:40px;font-size:18px;top:-12px;right:-12px}}
.ob-replay.visible{opacity:1}
/* ── Slide 1: Text streaming ── */
.ob-text-card{padding:28px 26px 32px}
.ob-text-age{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.25);margin-bottom:16px}
.ob-text-body{font-family:var(--font-serif);font-size:17px;line-height:1.7;color:rgba(255,255,255,0.55);min-height:160px}
@media(min-width:500px){.ob-text-body{font-size:18px;min-height:180px}}
@media(max-height:700px){.ob-text-body{min-height:110px;font-size:15px}}
.ob-text-body .ob-w{opacity:0;transition:opacity .12s}.ob-text-body .ob-w.vis{opacity:1}
.ob-text-cursor{display:inline-block;width:2px;height:1.1em;background:rgba(255,255,255,0.5);margin-left:1px;vertical-align:text-bottom;animation:obBlink 1s step-end infinite}
@keyframes obBlink{0%,100%{opacity:1}50%{opacity:0}}
/* ── Slide 2: iMessage (floating) ── */
.ob-im{display:flex;flex-direction:column;height:min(380px,58vh)}
@media(max-height:700px){.ob-im{height:min(280px,48vh)}}
.ob-im-nav{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:0.5px solid rgba(255,255,255,0.05)}
.ob-im-avatar{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:rgba(255,255,255,0.3)}
.ob-im-name{font-size:14px;font-weight:600;color:rgba(255,255,255,0.5)}
.ob-im-chat{flex:1;padding:14px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;overflow:hidden}
.ob-im-msg{max-width:80%;padding:9px 14px;border-radius:18px;font-size:15px;line-height:1.4;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.ob-im-msg.vis{opacity:1;transform:translateY(0)}
.ob-im-in{align-self:flex-start;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.55);border-bottom-left-radius:4px}
.ob-im-out{align-self:flex-end;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.55);border-bottom-right-radius:4px}
.ob-im-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 14px;background:rgba(255,255,255,0.06);border-radius:18px;border-bottom-left-radius:4px;opacity:0;transition:opacity .3s}
.ob-im-typing.vis{opacity:1}
.ob-im-typing span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.25);animation:obTypeDot 1.4s ease-in-out infinite}
.ob-im-typing span:nth-child(2){animation-delay:.2s}
.ob-im-typing span:nth-child(3){animation-delay:.4s}
@keyframes obTypeDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:.6;transform:translateY(-3px)}}
.ob-im-compose{display:flex;align-items:center;gap:8px;padding:10px 12px}
.ob-im-input{flex:1;padding:8px 12px;border-radius:18px;background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08);font-size:14px;color:rgba(255,255,255,0.2);overflow:hidden;white-space:nowrap;min-height:32px;line-height:32px}
.ob-im-send{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:rgba(255,255,255,0.3);opacity:0.3;transition:opacity .2s;flex-shrink:0}
.ob-im-send.active{opacity:1}
/* ── Slide 3: Branch demo (floating) ── */
.ob-tree{display:flex;flex-direction:column;align-items:center;justify-content:center;height:min(280px,46vh);padding:12px;gap:0}
@media(max-height:700px){.ob-tree{height:min(240px,40vh);padding:10px}}
.ob-tree-row{display:flex;gap:14px;justify-content:center}
.ob-tree-node{width:min(88px,22vw);border-radius:14px;overflow:hidden;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.1);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.ob-tree-node.vis{opacity:1;transform:translateY(0)}
.ob-tree-node.clicked{transform:scale(0.93);transition:transform .15s}
.ob-tree-cover{width:100%;aspect-ratio:1/1;background:rgba(255,255,255,0.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px}
.ob-tree-age{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,0.3)}
.ob-tree-title{font-family:var(--font-sans);font-size:13px;font-weight:600;color:rgba(255,255,255,0.55);text-align:center;line-height:1.2}
.ob-tree-metric{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;background:rgba(255,255,255,0.1);border-radius:0 0 14px 14px}
.ob-tree-mname{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,0.3)}
.ob-tree-mval{font-family:var(--font-sans);font-size:13px;font-weight:700;color:rgba(255,255,255,0.6);transition:color .4s}
.ob-tree-mval.changed{color:#7ec8a0}
.ob-tree-svg{width:min(200px,52vw);height:32px;flex-shrink:0}
.ob-tree-line{stroke:rgba(255,255,255,0.12);stroke-width:1.5;fill:none;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .8s cubic-bezier(.23,1,.32,1)}
.ob-tree-line.drawn{stroke-dashoffset:0}
.ob-tree-new{opacity:0;transform:translateY(8px)}
.ob-tree-new.vis{opacity:1;transform:translateY(0)}
/* ── Slide text + controls ── */
.ob-slide-text{text-align:center;max-width:360px;width:100%;z-index:1;flex-shrink:0;padding-top:48px}
.ob-slide-headline{font-family:var(--font-sans);font-size:clamp(35px,8vw,48px);font-weight:700;line-height:1.1;letter-spacing:-0.04em;color:#fff;margin:0 0 24px;text-wrap:balance;text-align:center;max-width:420px;flex-shrink:0}
.ob-slide-desc{font-family:var(--font-sans);font-size:15px;font-weight:400;line-height:1.55;color:rgba(255,255,255,0.45);margin:0 0 48px;text-wrap:pretty}
.ob-dots{display:flex;gap:8px;justify-content:center;margin-top:48px}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.12);transition:all .3s ease}
.ob-dot.active{background:rgba(255,255,255,0.8);transform:scale(1.2)}
.ob-dot.done{background:rgba(255,255,255,0.35)}
.ob-cta{padding:16px 44px;background:rgba(255,255,255,0.9);color:#000;font-family:var(--font-sans);font-size:16px;font-weight:600;letter-spacing:-0.01em;border:none;cursor:pointer;border-radius:14px;transition:all .25s cubic-bezier(.23,1,.32,1)}
.ob-cta:hover{background:#fff;box-shadow:0 4px 20px rgba(255,255,255,0.15)}
.ob-cta:active{transform:scale(0.97)}
.onboard-layout{display:flex;justify-content:center;align-items:stretch;height:100dvh;height:100vh;padding:0 24px;box-sizing:border-box;-webkit-overflow-scrolling:touch}
.onboard-main{width:100%;max-width:500px;display:flex;flex-direction:column;height:100%}
.onboard-step{display:none}
.onboard-step.active{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;text-align:center;padding:max(env(safe-area-inset-top,0px) + 40px, 60px) 0 60px}
.onboard-step .step-middle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0}
.onboard-step .step-middle .step-input-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:0}
.onboard-step .step-bottom{display:flex;flex-direction:column;align-items:center;flex-shrink:0;padding-top:48px;max-width:360px;width:100%}

/* Step progress — dots */
.step-dots{display:flex;gap:8px;margin-top:48px;justify-content:center}
.step-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.12);transition:all .3s ease}
.step-dot.active{background:rgba(255,255,255,0.8);transform:scale(1.2)}
.step-dot.done{background:rgba(255,255,255,0.35)}

/* Step heading */
.step-question{font-family:var(--font-sans);font-size:clamp(35px,8vw,48px);font-weight:700;line-height:1.1;letter-spacing:-.04em;color:#fff;margin:0 0 48px;max-width:420px;text-wrap:balance}
.step-desc{font-family:var(--font-sans);font-size:15px;font-weight:400;color:rgba(255,255,255,0.45);margin:0 0 36px;max-width:360px;line-height:1.55;text-wrap:pretty}

/* ── Name input — large, minimal ── */
.name-input{
  width:100%;max-width:340px;
  padding:18px 0;margin-top:8px;
  font-family:var(--font-sans);font-size:22px;font-weight:500;color:#fff;
  background:transparent;
  border:none;border-bottom:2px solid rgba(255,255,255,0.15);
  border-radius:0;
  outline:none;text-align:center;
  transition:border-color .3s;
  letter-spacing:-.01em;
  caret-color:rgba(255,255,255,0.7)
}
.name-input:focus{border-bottom-color:rgba(255,255,255,0.5)}
.name-input::placeholder{color:rgba(255,255,255,0.18);font-weight:400}

/* ── Age — horizontal scroll strip ── */
.age-wrap{position:relative;width:100%;max-width:200px;height:min(300px,45vh)}
.age-scroll{
  display:flex;flex-direction:column;align-items:center;
  width:100%;height:100%;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:calc(50% - 28px) 0;
  scroll-snap-type:y mandatory;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);
}
.age-scroll::-webkit-scrollbar{display:none}
.age-num{
  flex-shrink:0;
  width:100%;height:64px;
  font-family:var(--font-sans);font-size:38px;font-weight:700;
  color:rgba(255,255,255,0.18);
  background:none;border:none;
  cursor:pointer;
  transition:color .25s,font-size .25s;
  text-align:center;line-height:64px;
  scroll-snap-align:center;
}
.age-num:hover{color:rgba(255,255,255,0.4)}
.age-num.selected{color:#fff;font-size:52px}
.age-fade-top,.age-fade-bottom{display:none}

/* ── Values — card grid ── */
.values-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  width:100%;max-width:400px;margin-top:8px;
}
.val-card{
  padding:20px 16px;border-radius:16px;
  background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.06);
  cursor:pointer;transition:all .25s cubic-bezier(.23,1,.32,1);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.val-card:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.12)}
.val-card.selected{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.35);box-shadow:0 4px 24px rgba(255,255,255,0.06)}
.val-icon{font-size:28px;line-height:1}
.val-label{font-family:var(--font-sans);font-size:14px;font-weight:600;color:#fff}
.val-hint{font-family:var(--font-sans);font-size:12px;color:rgba(255,255,255,0.3);line-height:1.3}
.val-card.selected .val-label{color:#fff}
.val-card.selected .val-hint{color:rgba(255,255,255,0.5)}

/* ── Fear — single-select cards ── */
.fear-list{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px;margin-top:8px}
.fear-card{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;border-radius:16px;
  background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.06);
  cursor:pointer;transition:all .25s cubic-bezier(.23,1,.32,1);text-align:left;
}
.fear-card:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.12)}
.fear-card.selected{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.35);box-shadow:0 4px 24px rgba(255,255,255,0.06)}
.fear-icon{font-size:24px;flex-shrink:0}
.fear-label{font-family:var(--font-sans);font-size:17px;font-weight:600;color:#fff}

/* ── Fork + Secret — text areas ── */
.text-field-wrap{width:100%;max-width:420px;margin-bottom:0}
.text-field{
  width:100%;
  padding:20px 22px;
  font-family:var(--font-sans);font-size:18px;font-weight:400;
  background:rgba(255,255,255,0.06);
  border:1.5px solid rgba(255,255,255,0.08);
  border-radius:16px;
  color:var(--ink);outline:none;
  transition:border-color .3s,background .3s;
  resize:none;line-height:1.6;
  caret-color:rgba(255,255,255,0.7)
}
.text-field:focus{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.09)}
.text-field::placeholder{color:rgba(255,255,255,0.18);transition:opacity .3s ease}
.text-field.ph-fade::placeholder{opacity:0}
.text-section-label{
  font-family:var(--font-sans);font-size:13px;font-weight:500;
  color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:10px;margin-top:24px;text-align:left;width:100%;max-width:420px;
}

/* ── Scene picker (Step 1) ── */
.scene-grid{display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px;margin-top:8px}
.scene-card{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;border-radius:16px;
  background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.06);
  cursor:pointer;transition:all .25s cubic-bezier(.23,1,.32,1);text-align:left;
}
.scene-card:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.12)}
.scene-card.selected{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.35);box-shadow:0 4px 24px rgba(255,255,255,0.06)}
.scene-emoji{font-size:28px;flex-shrink:0}
.scene-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.scene-label{font-family:var(--font-sans);font-size:17px;font-weight:600;color:#fff}
.scene-desc{font-family:var(--font-sans);font-size:13px;color:rgba(255,255,255,0.35)}
.scene-card.selected .scene-desc{color:rgba(255,255,255,0.5)}

/* ── Depth cards (Step 2 — adaptive) ── */
.depth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:440px;margin-top:8px}
.depth-card{
  padding:24px 16px 20px;border-radius:18px;
  background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.06);
  cursor:pointer;transition:all .25s cubic-bezier(.23,1,.32,1);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.depth-icon{font-size:28px;line-height:1}
.depth-card:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.12)}
.depth-card.selected{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.35);box-shadow:0 4px 24px rgba(255,255,255,0.06)}
.depth-label{font-family:var(--font-sans);font-size:18px;font-weight:700;color:#fff}
.depth-desc{font-family:var(--font-sans);font-size:12px;color:rgba(255,255,255,0.35);line-height:1.3}
.depth-card.selected .depth-desc{color:rgba(255,255,255,0.5)}

/* Nav row */
.nav-row{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.btn-next{
  padding:16px 44px;
  background:rgba(255,255,255,0.9);color:#000;
  font-family:var(--font-sans);font-size:16px;font-weight:600;letter-spacing:-.01em;
  border:none;cursor:pointer;border-radius:14px;
  transition:all .25s cubic-bezier(.23,1,.32,1)
}
.btn-next:hover{background:#fff;box-shadow:0 4px 20px rgba(255,255,255,0.2)}
.btn-next:disabled{opacity:.15;pointer-events:none}
.btn-back{
  padding:16px 20px;
  background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.4);
  font-family:var(--font-sans);font-size:16px;font-weight:500;
  border:none;cursor:pointer;border-radius:14px;
  transition:all .2s
}
.btn-back:hover{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.7)}

/* ── EXPLORER ── */
#screen-explorer{flex-direction:column;height:100dvh;height:100vh;min-height:0!important;overflow:hidden;overscroll-behavior:none;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px)}
.explorer-header{display:flex;align-items:center;justify-content:center;padding:12px 24px;background:none;flex-shrink:0;z-index:10;position:relative}
.explorer-logo{font-family:var(--font-sans);font-size:clamp(18px,2.5vw,22px);font-weight:700;letter-spacing:-.03em;color:rgba(255,255,255,0.35);white-space:nowrap;cursor:pointer}
.explorer-logo em{font-style:normal;color:rgba(255,255,255,0.5)}
.explorer-context{display:flex;gap:6px;flex-wrap:wrap;flex:1}

.header-btns{display:flex;gap:8px;flex-shrink:0}
.hdr-btns{display:flex;gap:8px;position:absolute;right:20px}
.hdr-btn{font-family:var(--font-sans);font-size:12px;font-weight:500;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.08);border:none;padding:8px 14px;cursor:pointer;transition:all .18s;white-space:nowrap;border-radius:20px}
.hdr-btn:hover{color:#fff;background:rgba(255,255,255,0.18)}
.hdr-btn.share-map{color:#000;background:rgba(255,255,255,0.9);font-weight:600}
.hdr-btn.share-map:hover{background:#fff;box-shadow:0 2px 12px rgba(255,255,255,0.2)}
.hdr-btn.restart-btn{padding:8px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.hdr-btn.end-btn:hover{background:var(--accent);color:var(--paper)}

.explorer-body{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;flex:1;min-height:0;height:100%;transition:grid-template-columns .4s cubic-bezier(.23,1,.32,1)}
.tree-canvas{overflow:hidden;padding:0;background:transparent;position:relative;cursor:default;width:100%;height:100%;pointer-events:all;overscroll-behavior:contain;touch-action:none;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 40px),transparent 100%)}
.tree-canvas-inner{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;pointer-events:all;transition:transform .45s cubic-bezier(.4,0,.2,1)}
#tree-svg{display:block;overflow:visible;pointer-events:all}



/* ── DETAIL (right text column) ── */
.detail-sidebar{background:transparent;overflow:hidden;display:flex;flex-direction:column;height:100%;position:relative;transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .4s ease,filter .4s ease;transform:translateX(0);opacity:1;filter:blur(0)}
.detail-inner{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;height:100%}
.detail-empty-state{margin:auto;text-align:center;font-family:var(--font-sans);color:rgba(255,255,255,0.3);font-size:15px;font-weight:400;line-height:1.7;max-width:220px}

.detail-title{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.025em;color:#fff;margin-bottom:18px;word-wrap:break-word;margin-top:4px}
.detail-choice-tag{font-family:var(--font-sans);font-size:13px;font-weight:400;color:rgba(255,255,255,0.4);padding:0;border:none;background:none;display:inline-block;margin-bottom:20px}
.detail-story{font-family:var(--font-serif);font-size:20px;font-weight:400;line-height:2.0;color:rgba(255,255,255,0.82);margin-bottom:32px;letter-spacing:0.01em}
.detail-story em{font-style:italic;color:var(--ink)}
.detail-divider{height:1px;background:rgba(255,255,255,0.07);margin:32px 0}
.choices-heading{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:14px;margin-top:4px}
.choice-item{border:none;padding:14px 0;cursor:pointer;margin-bottom:2px;transition:all .22s;position:relative;background:none;border-bottom:1px solid rgba(255,255,255,0.07)}
.choice-item:hover .ci-label{color:rgba(255,255,255,1);} .choice-item:hover{background:none}
.choice-item.explored{background:none;border-bottom:1px solid rgba(255,255,255,0.07)}
.choice-item.explored::after{content:'✓';font-family:var(--font-sans);font-size:13px;font-weight:500;color:rgba(255,255,255,0.3);position:absolute;top:14px;right:0}
.choice-item.on-path{background:rgba(255,159,10,0.12);border:1px solid rgba(255,159,10,0.4)}
.choice-item.on-path::after{content:'↑ your path';font-family:var(--font-sans);font-size:11px;font-weight:500;color:rgba(255,255,255,0.35);position:absolute;top:14px;right:0}
.ci-label{font-family:var(--font-sans);font-size:17px;font-weight:500;color:rgba(255,255,255,0.82);margin-bottom:4px;letter-spacing:-.01em}
.ci-hint{font-family:var(--font-sans);font-size:14px;color:rgba(255,255,255,0.38);font-weight:400;line-height:1.4}
.detail-generating{display:flex;align-items:center;gap:12px;font-family:var(--font-sans);font-size:14px;color:rgba(255,255,255,0.4);font-style:normal;padding:20px 0}
.gen-dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);animation:dot-pulse 1.2s ease-in-out infinite}
.gen-dots span:nth-child(2){animation-delay:.2s}.gen-dots span:nth-child(3){animation-delay:.4s}
.detail-back{font-family:var(--font-sans);font-size:14px;font-weight:400;color:rgba(255,255,255,0.35);background:none;border:none;cursor:pointer;padding:0;margin-bottom:24px;transition:color .18s;display:flex;align-items:center;gap:4px}
.detail-back:hover{color:rgba(255,255,255,0.7)}
.breadcrumb-trail{font-family:var(--font-sans);font-size:12px;font-weight:500;color:rgba(255,255,255,0.38);margin-bottom:10px;display:flex;align-items:center;flex-wrap:wrap;gap:0;line-height:1.8;letter-spacing:.01em}
.bc-node{color:var(--ink3);transition:color .12s}
.bc-node.current{color:rgba(255,255,255,0.9);font-weight:600}
.bc-node.clickable{cursor:pointer}
.bc-node.clickable:hover{color:var(--ink)}
.bc-ellipsis{color:var(--ink3);padding:0 2px}
.bc-sep{color:rgba(255,255,255,0.2);margin:0 6px;font-size:10px}
.end-message{background:none;border:none;padding:8px 0 24px;margin-bottom:0;font-family:var(--font-sans);font-size:15px;color:rgba(255,255,255,0.42);line-height:1.7}
.svg-node{cursor:pointer}
@keyframes shimmer{0%{opacity:.4}50%{opacity:.8}100%{opacity:.4}}
.generating-node{animation:shimmer 1.5s ease-in-out infinite}
@keyframes unblur{from{filter:blur(8px);opacity:.6}to{filter:blur(0);opacity:1}}
.node-img-reveal{animation:unblur .6s ease-out forwards}
/* Fork-choice inline paragraphs in feed */
.fork-choices-container{display:flex;flex-direction:column;gap:0;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.06)}
.fork-choice-item{position:relative;padding:16px 20px;border-radius:12px;cursor:pointer;transition:all .3s ease;border:1px solid rgba(255,255,255,0.08);margin-bottom:8px}
.fork-choice-item .fork-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.fork-choice-item .fork-label::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.2);transition:background .3s}
.fork-choice-item .fork-text{font-size:inherit;line-height:1.75;color:rgba(255,255,255,0.3);transition:color .3s ease}
/* Unhovered: subtle, clearly clickable */
.fork-choice-item:hover{border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.03)}
.fork-choice-item:hover .fork-text{color:rgba(255,255,255,0.55)}
.fork-choice-item:hover .fork-label::before{background:rgba(255,255,255,0.5)}
/* Hovered via tree node */
.fork-choice-item.previewing{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.04)}
.fork-choice-item.previewing .fork-text{color:rgba(255,255,255,0.6)}
.fork-choice-item.previewing .fork-label::before{background:rgba(255,255,255,0.6)}
/* Selected/clicked: solid, like main text */
/* Selected: subtle accent border, checkmark in label */
.fork-choice-item.selected{border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.04);cursor:default}
.fork-choice-item.selected .fork-text{color:rgba(255,255,255,0.85)}
.fork-choice-item.selected .fork-label::before{background:var(--accent);box-shadow:0 0 6px var(--accent)}
.fork-choice-item.selected .fork-label{color:rgba(255,255,255,0.5)}
/* Rejected: dimmed ghost state, still visible and clickable */
.fork-choice-item.rejected{opacity:0.35;border-color:rgba(255,255,255,0.04);cursor:pointer;transition:all .4s ease}
.fork-choice-item.rejected:hover{opacity:0.6;border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.03)}
.fork-choice-item.rejected .fork-text{color:rgba(255,255,255,0.2)}
.fork-choice-item.rejected:hover .fork-text{color:rgba(255,255,255,0.4)}
.fork-choice-item.rejected .fork-label::before{background:rgba(255,255,255,0.1)}
@keyframes ghostPulse{0%,100%{opacity:.55}50%{opacity:.8}}


/* ── ANIMATIONS ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes dot-pulse{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}

/* ── Feed toggle — Apple round system button ── */
.feed-toggle{display:none;position:fixed;top:50%;right:50%;transform:translateY(-50%) translateX(50%);z-index:9999;width:36px;height:36px;border-radius:50%;background:rgba(28,28,30,0.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);cursor:pointer;transition:all .35s cubic-bezier(.23,1,.32,1);padding:0;box-shadow:0 2px 12px rgba(0,0,0,0.2)}
.feed-toggle svg{width:14px;height:14px;stroke:rgba(255,255,255,0.5);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.23,1,.32,1)}
.feed-toggle:hover{border-color:rgba(255,255,255,0.3);background:rgba(28,28,30,0.8)}
.feed-toggle:hover svg{stroke:rgba(255,255,255,0.9)}
/* Collapsed: feed slides right past arrow, peeks at edge */
/* Collapsed: tree gets full width, feed overlays as ghost at right */
.explorer-body.feed-collapsed{grid-template-columns:1fr 1fr;position:relative;overflow:visible}
.explorer-body.feed-collapsed .tree-canvas{-webkit-mask-image:none!important;mask-image:none!important;overflow:visible!important}
.explorer-body.feed-collapsed .detail-sidebar{transform:translateX(60%);opacity:0.15;pointer-events:none;filter:blur(2px);transition:transform .4s cubic-bezier(.23,1,.32,1),opacity .4s ease,filter .4s ease}
.explorer-body.feed-collapsed .feed-toggle{right:calc(20% + 2px);transform:translateY(-50%)}
.explorer-body.feed-collapsed .feed-toggle svg{transform:rotate(180deg)}
@media(min-width:901px){.feed-toggle{display:flex;align-items:center;justify-content:center}}

/* Mobile: tree toggle — fixed button, always on top */
.tree-toggle{display:none;position:fixed;bottom:calc(68vh - 18px);left:50%;transform:translateX(-50%);z-index:99999;width:44px;height:44px;border-radius:22px;background:rgba(255,255,255,0.08);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:0.5px solid rgba(255,255,255,0.12);cursor:pointer;transition:all .35s cubic-bezier(.23,1,.32,1);padding:0;box-shadow:0 2px 8px rgba(0,0,0,0.15);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tree-toggle svg{width:14px;height:14px;stroke:rgba(255,255,255,0.5);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.23,1,.32,1)}
.tree-toggle:hover{border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.14)}
/* Expanded: tree visible, feed peeks at bottom — tappable to return to read mode */
.explorer-body.tree-expanded .tree-canvas{display:block!important;max-height:none!important;min-height:0!important;height:calc(100dvh - 56px - 22vh)!important;position:relative;z-index:15}
.explorer-body.tree-expanded .detail-sidebar{max-height:22vh;overflow:hidden;opacity:0.35;cursor:pointer;pointer-events:auto;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%)}

/* ── Floating metrics button (mobile) ── */
.metrics-fab{display:none;position:fixed;bottom:max(24px,env(safe-area-inset-bottom,24px));right:20px;width:52px;height:52px;border-radius:26px;background:rgba(28,28,30,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0.5px solid rgba(255,255,255,0.12);box-shadow:0 4px 24px rgba(0,0,0,0.5);cursor:pointer;z-index:99999;align-items:center;justify-content:center;padding:0;transition:all .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.metrics-fab:active{transform:scale(0.9)}
.metrics-fab svg{width:34px;height:34px}
.metrics-sheet{position:fixed;bottom:0;left:0;right:0;z-index:99998;background:rgba(28,28,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px 20px 0 0;padding:20px 20px 36px;transform:translateY(100%);transition:transform .35s cubic-bezier(.23,1,.32,1)}
.metrics-sheet.show{transform:translateY(0)}
.metrics-sheet-handle{width:36px;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;margin:0 auto 16px}

/* ── Node share icon ── */
.node-share-icon{width:32px;height:32px;border-radius:16px;background:rgba(255,255,255,0.9);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;margin-left:auto;flex-shrink:0}
.node-share-icon:hover{background:#fff;box-shadow:0 2px 8px rgba(255,255,255,0.2);transform:scale(1.05)}
.node-share-icon svg{width:15px;height:15px;fill:none;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:900px){
  .onboard-main{padding:32px 20px}
  /* Header: hide share/restart, keep logo visible */
  .explorer-header{padding:8px 16px}
  .hdr-btns{display:none!important}
  /* Explorer: no page scroll, only feed scrolls */
  #screen-explorer{overflow:hidden!important}
  .explorer-body{grid-template-columns:1fr;overflow:hidden}
  /* Read mode: tree hidden, feed fills below frame */
  .tree-canvas{display:none;min-height:0;max-height:0;overflow:hidden}
  .feed-toggle{display:none!important}
  .metrics-fab{display:none!important}
  .explorer-context{display:none}
  .detail-story-scroll{padding:16px 16px 12px}
  .detail-story-inner{padding:28px 20px 32px}
  .detail-choices-bar{padding:0 16px 12px}
  .choices-bar-heading{padding:10px 0 8px;font-size:10px}
  .cb-item{padding:10px 0}
  .cb-label{font-size:15px}
  .cb-hint{font-size:12px}
  .feed-node{padding:32px 24px}
  .feed-node-title{font-size:18px}
  .feed-node-story,.block-text,.opening-scene{font-size:18px;line-height:1.7}
  .detail-title{font-size:22px}
  .detail-story{font-size:18px}
  .share-header{padding:14px 20px}
  .share-body{padding:28px 20px 60px}
  .hdr-btn{padding:10px 16px}
  /* Hide metrics widgets on mobile — in Now Playing frame instead */
  .detail-metrics-inline{display:none!important}
  .detail-metrics-snap{display:none!important}
  .metrics-widget{display:none!important}
  /* Hide share icon in feed on mobile (keep on desktop) */
  .node-share-icon{display:none!important}
  /* ── Mobile Now Playing frame (Apple Podcasts style) ── */
  .mobile-now-playing{display:flex;flex-direction:column;background:rgba(255,255,255,0.08);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:16px;margin:0 12px 0;padding:0;border:0.5px solid rgba(255,255,255,0.12);flex-shrink:0;z-index:20;position:relative;transition:opacity .3s,transform .3s;box-shadow:0 2px 12px rgba(0,0,0,0.15)}
  .mnp-main{display:flex;align-items:center;gap:14px;padding:14px 14px 10px;cursor:pointer}
  .mnp-cover{width:64px;height:64px;border-radius:12px;object-fit:cover;background:rgba(255,255,255,0.05);flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,0.3)}
  .mnp-info{flex:1;min-width:0}
  .mnp-age{font-size:13px;color:rgba(235,235,245,0.5);margin-bottom:2px}
  .mnp-title{font-size:17px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em}
  .mnp-actions{display:flex;gap:6px;flex-shrink:0}
  .mnp-btn{width:34px;height:34px;border-radius:17px;background:rgba(255,255,255,0.10);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent;transition:background .15s}
  .mnp-btn:active{background:rgba(255,255,255,0.20)}
  .mnp-btn svg{width:16px;height:16px}
  .mnp-metrics{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:0.5px solid rgba(84,84,88,0.2);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mnp-metrics-summary{flex:1;font-size:12px;color:rgba(235,235,245,0.4);font-family:var(--font-mono);letter-spacing:.02em}
  .mnp-metrics-arrow{width:12px;height:8px;color:rgba(235,235,245,0.3);transition:transform .3s}
  .mnp-metrics-arrow.open{transform:rotate(180deg)}
  .mnp-metrics-expanded{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 14px}
  .mnp-metrics-expanded.open{max-height:200px;padding:0 14px 12px}
  /* Hide frame in explore mode */
  .mobile-now-playing.mnp-hidden{opacity:0;pointer-events:none;max-height:0;margin:0;overflow:hidden;transition:all .3s ease}
  /* Toggle button: bottom-left, Apple standard 44px touch target */
  .tree-toggle{display:flex!important;align-items:center;justify-content:center;left:16px!important;bottom:max(16px,env(safe-area-inset-bottom,16px))!important;transform:none!important;z-index:99999;width:44px!important;height:44px!important;border-radius:22px!important}
  /* Explore mode: filled white, arrow points up, SAME position */
  .explorer-body.tree-expanded ~ .tree-toggle{background:rgba(255,255,255,0.9)!important;border-color:transparent!important}
  .explorer-body.tree-expanded ~ .tree-toggle svg{transform:rotate(180deg);stroke:rgba(0,0,0,0.8)!important}
}
/* Hide Now Playing on desktop */
@media(min-width:901px){.mobile-now-playing{display:none!important}}
/* ── Small phones ── */
@media(max-width:480px){
  .tree-canvas{min-height:160px;max-height:28vh}
  .feed-node{padding:24px 18px}
  .feed-node-inner{max-width:100%}
  .feed-node-title{font-size:17px}
  .feed-node-story,.block-text,.opening-scene{font-size:17px;line-height:1.65}
  .detail-story-inner{padding:20px 16px 24px}
  .detail-title{font-size:20px}
  .detail-story{font-size:17px}
  /* Metrics: compact horizontal chips instead of bar rows */
  .detail-metrics-inline{flex-direction:row;flex-wrap:wrap;gap:8px;padding:16px 0 8px}
  .dmi-row{gap:6px;flex:0 0 auto;background:rgba(255,255,255,0.06);border-radius:20px;padding:6px 12px}
  .dmi-label{min-width:0;font-size:11px}
  .dmi-bar-wrap{display:none}
  .dmi-val{min-width:0;font-size:12px;font-weight:600;color:rgba(255,255,255,0.7)}
  /* Metrics snap in feed — same chip style */
  .dms-label{min-width:0;font-size:11px}
  .dms-bar-wrap{display:none}
  .dms-val{font-size:12px;font-weight:600}
  .share-header{padding:12px 16px}
  .share-body{padding:20px 16px 48px}
  .final-metrics{grid-template-columns:1fr}
  .onboard-layout{padding:0 20px}
  .onboard-step.active{padding:max(env(safe-area-inset-top,0px) + 16px, 32px) 0 max(env(safe-area-inset-bottom,0px) + 16px, 24px)}
  .onboard-step .step-bottom{padding-top:24px}
  .step-question{font-size:clamp(35px,8vw,48px);margin-bottom:24px}
  .step-dots{margin-top:24px}
  .scene-grid{gap:8px}
  .scene-card{padding:14px 16px}
  .depth-grid{gap:10px}
  .depth-card{padding:18px 14px 16px}
  .name-input{font-size:20px;max-width:100%;padding:16px 0}
  .age-wrap{max-width:180px;height:min(280px,42vh)}
  .age-num{font-size:32px;height:56px;line-height:56px}
  .age-num.selected{font-size:44px}
  .values-grid{grid-template-columns:1fr 1fr;gap:10px}
  .val-card{padding:12px 10px}
  .fear-card{padding:12px 14px}
  .fear-card .fear-icon{font-size:20px}
  .fear-card .fear-label{font-size:15px}
  .step-question{font-size:clamp(26px,7vw,36px)}
  .lang-logo{font-size:clamp(20px,4vw,26px)}
  .lang-headline{font-size:clamp(35px,8vw,48px);max-width:90vw}
  .lang-headline #l-static{white-space:normal}
  #screen-lang{padding:max(env(safe-area-inset-top,0px) + 16px, 32px) 20px max(env(safe-area-inset-bottom,0px) + 16px, 24px)}
  #screen-lang .step-bottom{padding-top:24px}
  .lang-headline{margin-bottom:24px}
  .lang-toggle{margin-top:24px}
  .landing-cards{height:min(180px,26vh);max-width:100%}
  .landing-card{width:112px;height:112px;margin-left:-56px;margin-top:-56px;border-radius:16px;transform-origin:50% 500px}
  .landing-card:nth-child(1){transform:rotate(-20deg)}
  .landing-card:nth-child(2){transform:rotate(-12deg)}
  .landing-card:nth-child(3){transform:rotate(-4deg)}
  .landing-card:nth-child(4){transform:rotate(4deg)}
  .landing-card:nth-child(5){transform:rotate(12deg)}
  .landing-card:nth-child(6){transform:rotate(20deg)}
  .landing-cta{padding:16px 44px;font-size:16px}
  .url-box{max-width:100%;width:100%}
  .share-header-right{flex-direction:column;align-items:flex-start}
}
/* ── per-node metrics block in detail panel ── */
.detail-metrics-snap{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;padding:20px 0;border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08)}
.dms-row{display:flex;align-items:center;gap:7px}
.dms-icon{font-size:13px;width:14px;flex-shrink:0;text-align:center}
.dms-label{font-family:var(--font-sans);font-size:12px;font-weight:500;color:rgba(255,255,255,0.45);min-width:80px}
.dms-bar-wrap{flex:1;height:2px;background:var(--paper3);border-radius:1px;overflow:hidden}
.dms-bar-fill{height:100%;border-radius:1px}
.dms-val{font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,0.5);min-width:24px;text-align:right}
.dms-delta{font-family:var(--font-mono);font-size:11px;min-width:28px;text-align:right;font-weight:600}
/* ── SHARE SCREEN ── */
#screen-share{flex-direction:column;background:transparent;overflow-y:auto;-webkit-overflow-scrolling:touch}
.share-header{display:flex;align-items:center;justify-content:space-between;padding:16px 36px;border-bottom:1px solid var(--line);flex-shrink:0;flex-wrap:wrap;gap:10px;background:rgba(0,0,0,0.4);backdrop-filter:blur(24px)}
.share-logo{font-family:var(--font-sans);font-size:clamp(18px,2.5vw,22px);font-weight:700;letter-spacing:-.03em;color:rgba(255,255,255,0.35);white-space:nowrap}.share-logo em{font-style:normal;color:rgba(255,255,255,0.5)}
.share-header-right{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-end}
.url-box{display:flex;align-items:center;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);max-width:520px;min-width:0;flex:1;border-radius:var(--radius-sm);overflow:hidden}
.url-text{font-family:var(--font-mono);font-size:12px;color:var(--accent);padding:7px 11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;letter-spacing:.02em}
.url-copy-btn{padding:10px 16px;background:rgba(255,255,255,0.9);color:#000;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:none;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .18s;font-weight:600}
.url-copy-btn:hover{background:var(--accent2)}.url-copy-btn.copied{background:var(--green);color:#000}
.share-back-btn{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);background:none;border:1px solid var(--line);padding:10px 16px;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap;flex-shrink:0}
.share-back-btn:hover{color:var(--ink);border-color:var(--ink3)}
.viewer-notice{background:rgba(255,255,255,.05);border-bottom:1px solid var(--line);padding:9px 36px;font-family:var(--font-mono);font-size:11px;color:var(--ink3);letter-spacing:.05em;text-align:center}
.viewer-notice a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(196,98,45,.3)}
.viewer-notice a:hover{border-color:var(--accent)}
.share-body{flex:1;max-width:700px;width:100%;margin:0 auto;padding:40px 40px 80px}
.share-headline{font-family:var(--font-sans);font-size:clamp(28px,5vw,50px);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin-bottom:6px}
.share-headline em{font-style:normal;color:var(--accent)}
.share-sub{font-size:15px;color:var(--ink3);font-weight:300;margin-bottom:32px;line-height:1.5}
.section-heading{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.chart-section{margin-bottom:40px}
.chart-wrap{position:relative;height:200px;margin-bottom:10px}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap}
.chart-leg-item{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:12px;color:var(--ink3)}
.chart-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.final-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:40px}
.fm-card{padding:15px 17px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:var(--radius)}
.fm-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.fm-icon{font-size:20px;margin-bottom:4px}
.fm-val{font-size:24px;font-weight:300;margin-bottom:3px}
.fm-desc{font-size:13px;color:var(--ink3);line-height:1.4}
.tl-entry{display:grid;grid-template-columns:58px 1fr;margin-bottom:0}
.tl-left{display:flex;flex-direction:column;align-items:center;padding-top:3px}
.tl-age{font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-bottom:5px;letter-spacing:.04em}
.tl-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.tl-line{width:1px;flex:1;background:var(--line);margin-top:4px;min-height:14px}
.tl-entry:last-child .tl-line{background:transparent}
.tl-right{padding:0 0 22px 13px}
.tl-title{font-family:var(--font-sans);font-size:17px;font-weight:600;color:#fff;margin-bottom:4px;line-height:1.25}
.tl-choice{font-family:var(--font-mono);font-size:12px;color:var(--ink3);margin-bottom:5px;letter-spacing:.02em}
.tl-story{font-size:14px;color:var(--ink2);font-weight:300;line-height:1.65;margin-bottom:7px}
.tl-metrics{display:flex;gap:12px;flex-wrap:wrap}
.tl-m{font-family:var(--font-mono);font-size:12px;color:var(--ink3)}
.tl-m b{color:var(--ink);font-weight:400}
.tl-m .up{color:var(--green)}.tl-m .dn{color:var(--red)}
/* Share action buttons — all circles with icons, Apple share sheet style */
.share-actions{display:flex;justify-content:center;gap:20px;margin-bottom:32px;padding:8px 0}
.share-action-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;color:rgba(235,235,245,0.6);font-size:11px;font-family:var(--font-sans);font-weight:500;transition:all .15s;padding:0}
.share-action-btn:active{transform:scale(0.92)}
.share-action-btn .sa-icon{width:50px;height:50px;border-radius:25px;background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;transition:background .15s}
.share-action-btn:hover .sa-icon{background:rgba(255,255,255,0.14)}
.share-action-btn .sa-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.share-action-btn .sa-label{font-size:11px;color:rgba(235,235,245,0.5)}
.viewer-cta{text-align:center;padding:40px 24px;margin-top:32px;border-top:1px solid rgba(255,255,255,0.08);border-radius:20px;background:rgba(255,255,255,0.03)}
.viewer-cta h2{font-family:var(--font-sans);font-size:clamp(22px,5vw,32px);font-weight:700;color:#fff;margin-bottom:8px;letter-spacing:-0.02em}
.viewer-cta p{font-size:14px;color:rgba(235,235,245,0.5);margin-bottom:20px;line-height:1.5}
.viewer-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:14px;background:rgba(255,255,255,0.9);color:#000;font-family:var(--font-sans);font-size:15px;font-weight:600;border:none;cursor:pointer;transition:all .15s;letter-spacing:-0.01em}
.viewer-cta-btn:hover{background:#fff;transform:scale(1.02)}
.viewer-cta-btn:active{transform:scale(0.97)}
@media(max-width:680px){
  /* Share page: clean sheet layout, no heavy header */
  #screen-share{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .share-header{padding:12px 16px 8px;border-bottom:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .share-logo{display:none}
  .share-header-right{width:100%;justify-content:space-between}
  .url-box{display:none!important}
  .share-back-btn{font-size:15px;font-family:var(--font-sans);text-transform:none;letter-spacing:0;color:rgba(255,255,255,0.5);border:none;padding:8px 0;font-weight:400}
  .share-body{padding:0 16px 40px}
  .share-headline{font-size:clamp(24px,6vw,30px);margin-bottom:4px}
  .share-sub{font-size:13px;color:rgba(255,255,255,0.4);margin-bottom:8px}
  /* Share circles — sticky as user scrolls */
  .share-actions{position:sticky;top:0;z-index:10;background:rgba(13,13,15,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);margin:0 -16px 20px;padding:12px 16px;gap:16px;border-bottom:0.5px solid rgba(255,255,255,0.06)}
  .share-action-btn .sa-icon{width:44px;height:44px;border-radius:22px}
  .share-action-btn .sa-icon svg{width:18px;height:18px}
  /* Chart compact */
  .chart-section{margin-bottom:24px}
  .chart-wrap{height:140px}
  .chart-legend{gap:12px}
  .chart-leg-item{font-size:11px}
  /* Metrics: horizontal scroll chips */
  .final-metrics{grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:24px}
  .fm-card{padding:10px 12px}
  .fm-label{font-size:9px;letter-spacing:.08em}
  .fm-icon{font-size:16px;margin-bottom:2px}
  .fm-val{font-size:20px}
  .fm-desc{display:none}
  .section-heading{font-size:10px;margin-bottom:10px;padding-bottom:8px}
  /* Timeline compact */
  .tl-entry{grid-template-columns:40px 1fr}
  .tl-age{font-size:10px}
  .tl-title{font-size:14px}
  .tl-story{font-size:13px;line-height:1.5;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .tl-right{padding:0 0 16px 10px}
  .tl-metrics{gap:8px}
  .tl-m{font-size:11px}
  /* Viewer CTA */
  .viewer-cta{padding:28px 20px;margin-top:20px}
  .viewer-cta h2{font-size:clamp(20px,5vw,26px)}
  .viewer-cta-btn{padding:14px 24px;font-size:15px;width:100%;border-radius:25px}
}

/* ── DETAIL CONTENT ── */
.detail-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;height:100%}
.detail-story-scroll{
  flex:1;overflow-y:auto;padding:0;box-sizing:border-box;
  display:flex;flex-direction:column
}
.detail-story-inner{
  padding:44px 52px 48px;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center; /* center vertically when short */
  box-sizing:border-box
}
/* When content is tall, align to top naturally via min-height */
.detail-choices-bar{flex-shrink:0;padding:0 20px 20px;background:rgba(0,0,0,0.5);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.07)}
.detail-choices-bar.empty{display:none}
.choices-bar-heading{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:16px 0 10px}
.cb-item{border:none;padding:13px 0;cursor:pointer;width:100%;text-align:left;background:none;display:block;border-bottom:1px solid rgba(255,255,255,0.07);transition:all .18s;position:relative}
.cb-item:last-child{border-bottom:none}
.cb-item:hover .cb-label{color:#fff}
.cb-label{font-family:var(--font-sans);font-size:16px;font-weight:500;color:rgba(255,255,255,0.78);margin-bottom:3px;display:block;letter-spacing:-.01em}
.cb-hint{font-family:var(--font-sans);font-size:13px;color:rgba(255,255,255,0.35);font-weight:400;line-height:1.4;display:block}
.cb-badge{font-family:var(--font-sans);font-size:11px;font-weight:500;color:rgba(255,255,255,0.28);position:absolute;top:14px;right:0}
.cb-item.on-path .cb-label{color:rgba(255,255,255,0.85)}
.cb-item.explored .cb-label{color:rgba(255,255,255,0.5)}
.cover-spinner{width:16px;height:16px;border:1.5px solid var(--paper3);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}


/* ── SVG NODE ZOOM LEVELS ── */
.svg-node-image{cursor:pointer}
.svg-node-image:hover rect{filter:brightness(.95)}

@media(max-width:860px){
  .explorer-body{grid-template-columns:1fr!important}
}
/* ── OPENING SCENE ── */
.opening-scene{font-family:var(--font-serif);font-size:21px;font-weight:400;line-height:2.0;color:rgba(255,255,255,0.85);margin-bottom:32px;letter-spacing:.01em}
.opening-cta{font-family:var(--font-sans);font-size:13px;font-weight:500;color:rgba(255,255,255,0.28);letter-spacing:.04em;text-transform:uppercase;margin-top:8px}

/* ── AMBIENT GRADIENT BACKGROUND (Apple Music style) ── */
#ambient-bg{
  position:fixed;inset:-15%;z-index:1;pointer-events:none;
  overflow:hidden;
  transition:opacity .8s ease;
  animation:ambientWave 20s ease-in-out infinite alternate;
}
#ambient-bg.hidden{opacity:0}
#ambient-bg .amb-layer{
  position:absolute;inset:0;
  /* transition handled by JS lerp — CSS can't interpolate complex gradients */
}
@keyframes ambientWave{
  0%{transform:translate(0,0) scale(1.0) rotate(0deg)}
  33%{transform:translate(2vw,-1vh) scale(1.04) rotate(0.5deg)}
  66%{transform:translate(-1vw,2vh) scale(1.02) rotate(-0.3deg)}
  100%{transform:translate(1vw,1vh) scale(1.05) rotate(0.2deg)}
}


/* ── INLINE METRICS IN DETAIL PANEL ── */
.detail-metrics-inline{display:flex;flex-direction:column;gap:10px;padding:24px 0 8px;border-top:1px solid rgba(255,255,255,0.08);margin-top:24px}
.dmi-row{display:flex;align-items:center;gap:12px}
.dmi-label{font-family:var(--font-sans);font-size:12px;font-weight:500;color:rgba(255,255,255,0.45);white-space:nowrap;min-width:120px}
.dmi-bar-wrap{flex:1;height:2px;background:rgba(255,255,255,0.1);border-radius:1px;overflow:hidden}
.dmi-bar-fill{height:100%;border-radius:1px;transition:width .6s ease}
.dmi-val{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,0.45);min-width:24px;text-align:right}


/* ── WIDGET GATE (reveal button) ── */
.widget-gate{
  margin:32px 0 8px;
  cursor:pointer;
  transition:all .2s ease;
}
.widget-gate:hover{transform:translateY(-1px)}
.widget-gate:active{transform:scale(0.98)}
.widget-gate-line{
  width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
  margin-bottom:24px;
}
.widget-gate-content{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:18px 32px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  transition:all .2s ease;
}
.widget-gate:hover .widget-gate-content{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.2);
}
.widget-gate-label{
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:600;
  color:rgba(255,255,255,0.85);
  letter-spacing:-.01em;
}
.widget-gate-arrow{
  font-size:18px;
  color:rgba(255,255,255,0.4);
  transition:transform .2s ease;
}
.widget-gate:hover .widget-gate-arrow{transform:translateX(3px);color:rgba(255,255,255,0.7)}

/* ── STEP EMOJI ── */
.step-emoji{
  font-size:40px;margin-bottom:20px;
  animation:fadeUp .5s ease both;
  display:block;line-height:1;
  filter:drop-shadow(0 0 20px rgba(255,255,255,0.15));
}

/* ── BRANCH FEED (scrollable story timeline) ── */
.branch-feed{flex:1;overflow-y:auto;padding:0;height:100%;scroll-snap-type:y mandatory;transition:opacity .18s ease;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.feed-node{
  min-height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:48px 52px 48px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  scroll-snap-align:start;scroll-snap-stop:always;
}
.feed-node:last-child{border-bottom:none;padding-bottom:80px}
/* Narrow left-aligned column — matches Podcasts transcript proportions */
.feed-node-inner{width:100%;max-width:470px}
.feed-node.feed-active{background:rgba(255,255,255,0.018)}
.feed-node-age{font-family:var(--font-mono);font-size:11px;font-weight:400;color:rgba(255,255,255,0.3);margin-bottom:12px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.feed-node-title{font-family:var(--font-sans);font-size:20px;font-weight:700;letter-spacing:-.022em;color:#fff;margin-bottom:14px;line-height:1.18}
.feed-node-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.feed-node-header .feed-node-title{margin-bottom:0;flex:1}
.feed-share-btn{display:none}
.feed-node-choice{font-family:var(--font-sans);font-size:12px;color:rgba(255,255,255,0.32);margin-bottom:16px;margin-top:-8px;letter-spacing:.01em}
/* Body — matches Podcasts transcript: 17px serif, 1.65 line-height */
.feed-node-story{font-family:var(--font-serif);font-size:21px;font-weight:400;line-height:1.65;color:rgba(255,255,255,0.75);margin-bottom:0;letter-spacing:.01em}

/* ── CONTENT BLOCKS ── */
.block-text{font-family:var(--font-serif);font-size:21px;font-weight:400;line-height:1.65;color:rgba(255,255,255,0.78);margin-bottom:32px;letter-spacing:.01em}
.block-text:last-child{margin-bottom:0}

/* Freeform block wrapper */
.block-freeform{margin:32px 0;border:1px solid rgba(255,255,255,0.1);border-radius:16px;overflow:hidden;background:rgba(255,255,255,0.04);backdrop-filter:blur(12px)}
.block-freeform-inner{padding:24px 28px}

/* Dilemma block */
.dilemma-question{font-family:var(--font-sans);font-size:15px;font-weight:600;color:rgba(255,255,255,0.75);margin-bottom:24px;line-height:1.4;letter-spacing:-.01em}
.dilemma-track-wrap{position:relative;padding:0 4px;margin-bottom:16px}
.dilemma-labels{display:flex;justify-content:space-between;margin-bottom:10px}
.dilemma-label{font-family:var(--font-sans);font-size:12px;font-weight:600;color:rgba(255,255,255,0.45);max-width:42%;line-height:1.3}
.dilemma-label.right{text-align:right}
.dilemma-track{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,0.15);outline:none;cursor:pointer}
.dilemma-track::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.4);transition:transform .15s}
.dilemma-track::-webkit-slider-thumb:hover{transform:scale(1.15)}
.dilemma-commit-btn{width:100%;padding:11px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);border-radius:10px;color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .18s;margin-top:4px}
.dilemma-commit-btn:hover{background:rgba(255,255,255,0.2)}

/* Reflection block */
.reflection-question{font-family:var(--font-sans);font-size:15px;font-weight:600;color:rgba(255,255,255,0.75);margin-bottom:16px;line-height:1.4;letter-spacing:-.01em}
.reflection-input{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:12px 14px;font-family:var(--font-serif);font-size:16px;color:#fff;resize:none;outline:none;line-height:1.6;transition:border-color .18s}
.reflection-input::placeholder{color:rgba(255,255,255,0.25)}
.reflection-input:focus{border-color:rgba(255,255,255,0.35)}
.reflection-hint{font-family:var(--font-sans);font-size:11px;color:rgba(255,255,255,0.28);margin-top:8px;letter-spacing:.02em}
.reflection-submit-btn{margin-top:12px;padding:10px 22px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);border-radius:10px;color:rgba(255,255,255,0.7);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .18s}
.reflection-submit-btn:hover{background:rgba(255,255,255,0.18);color:#fff}
.reflection-submit-btn:disabled{opacity:.35;cursor:not-allowed}

/* Tension block */
.tension-question{font-family:var(--font-sans);font-size:15px;font-weight:600;color:rgba(255,255,255,0.75);margin-bottom:16px;line-height:1.4;letter-spacing:-.01em}
.tension-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.tension-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;cursor:grab;user-select:none;transition:background .15s,border-color .15s}
.tension-item:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2)}
.tension-item.dragging{opacity:.5;background:rgba(255,255,255,0.15)}
.tension-rank{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,0.35);min-width:20px}
.tension-text{font-family:var(--font-sans);font-size:14px;font-weight:500;color:rgba(255,255,255,0.8)}
.tension-confirm-btn{width:100%;padding:11px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);border-radius:10px;color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .18s}
.tension-confirm-btn:hover{background:rgba(255,255,255,0.2)}

/* Freeform iframe block */
.block-iframe-spinner{width:28px;height:28px;border:2px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.6);border-radius:50%;animation:spin .8s linear infinite}
.block-iframe-loading-text{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.3)}

/* Completed block overlay */
.block-completed{position:relative}
.block-completed-overlay{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(255,255,255,0.04);border-radius:20px;font-family:var(--font-sans);font-size:12px;color:rgba(255,255,255,0.3);margin:8px 0}
.block-completed-icon{font-size:13px;opacity:.5}

/* Replay button on feed nodes */
.feed-replay-btn{display:inline-flex;align-items:center;gap:5px;margin-top:16px;padding:8px 18px;background:rgba(255,255,255,0.08);border:none;border-radius:20px;color:rgba(255,255,255,0.4);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s}
.feed-replay-btn:hover{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.7)}
.feed-node-metrics{display:flex;flex-direction:column;gap:8px;padding:16px 0;border-top:1px solid rgba(255,255,255,0.07)}
.feed-node-cta{font-family:var(--font-sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.2);padding:36px 0 0}

/* Preview ghost node */
.feed-preview{padding:48px 52px 80px;opacity:0;pointer-events:none;transition:opacity .4s;scroll-snap-align:start;min-height:60%}
.feed-preview.visible{opacity:1;pointer-events:auto}
.feed-preview-inner{max-width:470px;opacity:0.35;animation:feedFlicker 2.4s ease-in-out infinite}
@keyframes feedFlicker{0%,100%{opacity:.35} 50%{opacity:.55} 70%{opacity:.28}}
.feed-preview-age{font-family:var(--font-mono);font-size:11px;font-weight:400;color:rgba(255,255,255,0.4);margin-bottom:12px;letter-spacing:.1em;text-transform:uppercase}
.feed-preview-title{font-family:var(--font-sans);font-size:20px;font-weight:700;color:rgba(255,255,255,0.7);margin-bottom:10px;letter-spacing:-.022em}
.feed-preview-hint{font-family:var(--font-serif);font-size:17px;color:rgba(255,255,255,0.5);line-height:1.68;font-style:italic}
.feed-preview-cta{font-family:var(--font-sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.22);margin-top:20px}

/* ── METRICS WIDGET ── */
.metrics-widget{flex-shrink:0;padding:12px 48px 4px;position:relative;z-index:5}
.mw-card{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;overflow:hidden;
  max-width:470px;
}
.mw-node-label{
  font-family:var(--font-sans);font-size:11px;font-weight:500;
  color:rgba(255,255,255,0.3);padding:8px 14px 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid rgba(255,255,255,0.07);
  transition:opacity .35s;
}
.mw-tiles{display:flex;flex-direction:column}
.mw-tile{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:relative;
}
.mw-tile:last-child{border-bottom:none}
.mw-tile-icon{font-size:14px;line-height:1;flex-shrink:0;width:18px;text-align:center}
.mw-tile-label{
  font-family:var(--font-sans);font-size:13px;font-weight:500;
  color:rgba(255,255,255,0.65);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mw-arc{flex:1;max-width:80px;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden}
.mw-arc-fill{height:100%;border-radius:2px;transition:width .55s ease,background .55s ease}
.mw-tile-val{
  font-family:var(--font-mono);font-size:13px;font-weight:600;
  color:rgba(255,255,255,0.85);min-width:22px;text-align:right;
  transition:color .4s;
}
.mw-tile-delta{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  min-width:28px;text-align:right;transition:color .3s;
}
.mw-tile-delta.pos{color:var(--green)}
.mw-tile-delta.neg{color:var(--red)}
.mw-tile-delta.zero{color:transparent}

/* ── Auth UI ─────────────────────────────────────────── */
.auth-login-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:50px;background:rgba(255,255,255,0.12);border:0.5px solid rgba(255,255,255,0.15);color:#fff;font:13px/1 -apple-system,sans-serif;font-weight:500;cursor:pointer;transition:all .2s;backdrop-filter:blur(20px)}
.auth-login-btn:hover{background:rgba(255,255,255,0.2)}
.auth-login-btn svg{width:14px;height:14px}

.auth-badge{display:none;align-items:center;gap:8px}
.auth-badge.visible{display:inline-flex}

.token-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:50px;background:rgba(255,255,255,0.1);border:0.5px solid rgba(255,255,255,0.12);cursor:pointer;transition:all .2s}
.token-badge:hover{background:rgba(255,255,255,0.18)}
.token-badge .tk-icon{width:16px;height:16px;background:linear-gradient(135deg,#FFD700,#FFA500);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#000}
.token-badge .tk-count{font:13px/1 'DM Mono',monospace;color:#fff;letter-spacing:.02em}

.auth-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.15);border:0.5px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font:14px/1 -apple-system,sans-serif;font-weight:600;color:#fff;cursor:pointer;transition:all .2s;overflow:hidden;position:relative}
.auth-avatar:hover{background:rgba(255,255,255,0.25)}
.auth-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Profile dropdown */
.profile-drop{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:rgba(30,30,32,0.95);backdrop-filter:blur(40px) saturate(180%);border:0.5px solid rgba(255,255,255,0.12);border-radius:12px;padding:4px;z-index:9999;opacity:0;transform:translateY(-4px) scale(.97);pointer-events:none;transition:all .15s ease}
.profile-drop.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.profile-drop-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;font:14px/1 -apple-system,sans-serif;color:rgba(255,255,255,.85);cursor:pointer;transition:background .15s}
.profile-drop-item:hover{background:rgba(255,255,255,0.08)}
.profile-drop-item.danger{color:#FF3B30}
.profile-drop-sep{height:0.5px;background:rgba(255,255,255,0.08);margin:4px 10px}

/* Token modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-card{width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;background:rgba(255,255,255,0.08);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:0.5px solid rgba(255,255,255,0.12);border-radius:16px;padding:24px;transform:translateY(10px) scale(.97);transition:transform .2s}
.modal-card::-webkit-scrollbar{width:0;display:none}
.modal-overlay.open .modal-card{transform:translateY(0) scale(1)}
.modal-title{font:22px/1.2 -apple-system,sans-serif;font-weight:700;color:#fff;margin-bottom:4px}
.modal-sub{font:14px/1.4 -apple-system,sans-serif;color:rgba(255,255,255,0.5);margin-bottom:20px}
.modal-close{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Token packages */
.pkg-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.pkg-card{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.1);cursor:pointer;transition:all .15s}
.pkg-card:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2)}
.pkg-card.popular{border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.1)}
.pkg-left{display:flex;flex-direction:column;gap:2px}
.pkg-name{font:15px/1 -apple-system,sans-serif;font-weight:600;color:#fff}
.pkg-desc{font:12px/1.3 -apple-system,sans-serif;color:rgba(255,255,255,0.45)}
.pkg-price{font:16px/1 'DM Mono',monospace;font-weight:500;color:#fff}
.pkg-badge{font:10px/1 'DM Mono',monospace;letter-spacing:.05em;color:#fff;background:rgba(255,255,255,0.12);padding:3px 7px;border-radius:4px;margin-top:4px}

.modal-divider{height:0.5px;background:rgba(255,255,255,0.08);margin:16px 0}
.referral-row{display:flex;gap:8px}
.referral-input{flex:1;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.12);color:#fff;font:13px/1 'DM Mono',monospace;outline:none}
.referral-input:focus{border-color:rgba(255,255,255,0.3)}
.referral-apply{padding:10px 16px;border-radius:10px;background:rgba(255,255,255,0.12);border:none;color:#fff;font:13px/1 -apple-system,sans-serif;font-weight:500;cursor:pointer}
.referral-apply:hover{background:rgba(255,255,255,0.2)}

/* Stripe payment view */
.pay-back{background:none;border:none;color:rgba(255,255,255,0.5);font:14px/1 -apple-system,sans-serif;cursor:pointer;padding:0;margin-bottom:16px;display:flex;align-items:center;gap:4px}
.pay-back:hover{color:#fff}
#stripe-element{background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.12);border-radius:12px;padding:16px;margin-top:8px;min-height:60px;max-height:320px;overflow-y:auto;-webkit-overflow-scrolling:touch}
#stripe-element::-webkit-scrollbar{width:0;display:none}
.pay-btn{width:100%;margin-top:16px;padding:14px;border-radius:14px;background:rgba(255,255,255,0.9);border:none;color:#000;font:15px/1 -apple-system,sans-serif;font-weight:600;cursor:pointer;transition:all .15s}
.pay-btn:hover{background:#fff}
.pay-btn:disabled{opacity:0.4;cursor:not-allowed}
.pay-btn.loading{background:rgba(255,255,255,0.2);color:rgba(255,255,255,0.5)}

/* Insufficient tokens banner */
.low-tokens-banner{display:none;padding:12px 16px;background:rgba(255,59,48,0.12);border:0.5px solid rgba(255,59,48,0.2);border-radius:12px;margin:8px 16px;text-align:center}
.low-tokens-banner.show{display:block}
.low-tokens-banner p{font:13px/1.4 -apple-system,sans-serif;color:rgba(255,255,255,0.7);margin:0 0 8px}
.low-tokens-banner button{padding:8px 20px;border-radius:50px;background:#fff;border:none;color:#000;font:13px/1 -apple-system,sans-serif;font-weight:600;cursor:pointer}