:root{--chakra:linear-gradient(90deg,#e38a83 0%,#efb27c 16.6%,#ead48a 33.3%,#9ecaa5 50%,#8fb8de 66.6%,#9a9ccf 83.3%,#b89ccd 100%);
  --cream:#fffbf3; --cream-deep:#faf4e6; --paper:#fff; --ink:#3b352e; --muted:#6a6153; --line:#ece5d6; --line-soft:#f3eee3;
  --gold:#f2b64a; --gold-hover:#e6a836; --gold-deep:#7a5a14; --gold-wash:#fbefd2; --gold-soft:#fdf7e8;
  --sage:#7fa585; --sage-deep:#3f6144; --sage-wash:#e4efe5; --teal:#17404f; --teal-wash:#e3edf0;
  --slate:#7189a4; --slate-deep:#44607c; --slate-wash:#e3eaf2; --danger:#b3402e; --danger-wash:#f9e5e1;
  --plum:#8c3f8f; --plum-wash:#f1e4f2; --brown:#5a4632;
  --radius:1.4rem; --pill:999px; --shadow:0 2px 4px rgba(59,53,46,.05),0 18px 40px -18px rgba(59,53,46,.28);
  --display:"Geologica","Lato",system-ui,sans-serif; --body:"Lato",system-ui,sans-serif;
  --col:30rem; --tabs:4.5rem;
}
html{font-size:16px}
@media(min-width:768px){html{font-size:17px}}
@media(min-width:1100px){html{font-size:19px}}
@media(min-width:1500px){html{font-size:20px}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.45;min-height:100%}
body{overscroll-behavior-y:none}
h1,h2,h3{font-family:var(--display);font-weight:650;margin:0;letter-spacing:-.015em}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
img{max-width:100%}
.app{position:relative;max-width:var(--col);margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--cream);overflow:clip}
@media(min-width:520px){.app{box-shadow:0 0 0 1px var(--line),0 30px 80px -30px rgba(59,53,46,.35)}}
/* top bar */
#top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;background:linear-gradient(var(--cream) 70%,rgba(255,251,243,0))}
#top .where{font-family:var(--display);font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:.5rem;min-width:0;flex:1}
#top .where .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
@media (max-width:420px){#top .where .pth{display:none}}
#top .where small{font-weight:500;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pillbar{display:flex;align-items:center;gap:.5rem;flex:none}
.iconbtn{width:2.25rem;height:2.25rem;border-radius:.75rem;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.iconbtn svg{width:1.1rem;height:1.1rem}
.score{position:relative;display:flex;align-items:center;gap:.35rem;padding:.45rem .75rem .45rem .6rem;border-radius:var(--pill);background:var(--ink);color:var(--cream);font-family:var(--display);font-weight:700;font-size:.875rem}
.score .star{width:.875rem;height:.875rem;fill:var(--gold)}
.score.bump{animation:bump .35s ease}
@keyframes bump{40%{transform:scale(1.14)}}
.float{position:absolute;right:.4rem;top:-.4rem;font-family:var(--display);font-weight:800;color:var(--sage-deep);animation:floatUp .9s ease forwards;pointer-events:none}
@keyframes floatUp{to{transform:translateY(-2.1rem);opacity:0}}
main{flex:1;display:flex;flex-direction:column;padding:0 0 calc(var(--tabs) + 1rem + env(safe-area-inset-bottom));min-height:0}
.pad{padding:0 1rem}
.screen{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(.4rem)}}
.kicker{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-deep)}
.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.4rem;border-radius:var(--pill);background:var(--gold);color:var(--ink);font-family:var(--display);font-weight:700;font-size:1rem;box-shadow:0 10px 22px -12px rgba(242,182,74,.9);transition:transform .12s,box-shadow .12s,opacity .2s}
.cta:active{transform:scale(.97)}
.cta.wide{width:100%}
.cta.ghost{background:var(--paper);border:1px solid var(--line);box-shadow:none}
.cta.dark{background:var(--ink);color:var(--cream);box-shadow:none}
.cta.sage{background:var(--sage);color:#fff;box-shadow:0 10px 22px -12px rgba(127,165,133,.9)}
.cta:disabled{opacity:.4;cursor:not-allowed;transform:none}
.cta svg{width:1.1rem;height:1.1rem}
/* stats strip */
.strip{display:flex;gap:.5rem;align-items:center;padding:.2rem 1rem .6rem;overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.stat{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border-radius:var(--pill);background:var(--paper);border:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--muted);white-space:nowrap}
.stat b{color:var(--ink)}
.stat.fire{background:var(--gold-wash);border-color:transparent;color:var(--gold-deep)}
.stat svg{width:.9rem;height:.9rem}
/* journey map */
.journey{display:grid;gap:0}
.trail{position:relative;overflow:hidden}
.trail .canvas{position:relative}
.trail .scene{position:absolute;inset:0;width:100%;height:100%}
.trail .deco{position:absolute;display:block;pointer-events:none;z-index:1}
.trail .deco.sun{right:1.3rem;top:.65rem;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(242,182,74,.5);box-shadow:0 0 0 .7rem rgba(242,182,74,.12)}
.trail .deco.sun.big{width:3.6rem;height:3.6rem;right:1.6rem;top:5.2rem;background:rgba(236,160,90,.45);box-shadow:0 0 0 1rem rgba(236,160,90,.12)}
.trail .deco.sun.warm{background:rgba(232,120,90,.45);box-shadow:0 0 0 1rem rgba(232,120,90,.12)}
.trail .deco.moon{right:1.5rem;top:.9rem;width:1.9rem;height:1.9rem;filter:drop-shadow(0 0 .6rem rgba(241,226,168,.8))}
.trail .deco.star{width:.28rem;height:.28rem;border-radius:50%;background:#fff;opacity:.85;box-shadow:0 0 .35rem #fff}
.trail .deco.tree{width:1.1rem;height:1.5rem;background:#a9c4a6;opacity:.75;clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateX(-50%)}
.trail .deco.tree.sm{width:.95rem;height:1.25rem}
.trail .deco svg{display:block;width:100%;height:100%}
.trail .deco.pine{width:1.25rem;height:1.9rem;transform:translateX(-50%);opacity:.85}
.trail .deco.pine.sm{width:1rem;height:1.5rem}
.trail .deco.cactus{width:1.1rem;height:1.65rem;transform:translateX(-50%);opacity:.85}
.trail .deco.cactus.sm{width:.85rem;height:1.3rem}
.trail .deco.rock{width:1.5rem;height:.75rem;transform:translateX(-50%)}
.trail .deco.peak{width:2.9rem;height:2rem;transform:translateX(-50%);opacity:.9}
.trail .deco.peak.sm{width:2.1rem;height:1.45rem}
.trail .deco.wave{width:3rem;height:.65rem;transform:translateX(-50%)}
.trail .deco.flower{width:.75rem;height:.75rem;border-radius:50%;transform:translateX(-50%);box-shadow:inset 0 0 0 .17rem #fff;opacity:.9}
.trail .deco.flower.a{background:#e8a0b4}.trail .deco.flower.b{background:#f2c85b}.trail .deco.flower.c{background:#9db7e6}
.trail .head{position:absolute;left:0;right:0;top:0;z-index:4;padding:1rem 1.1rem .5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem}
.trail .head h2{font-size:1.25rem;line-height:1.1;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.trail .head .tag{font-size:.8rem;color:var(--muted);margin-top:.2rem;max-width:18rem}
.trail .head .pct{font-family:var(--display);font-weight:800;font-size:.8rem;padding:.3rem .6rem;border-radius:var(--pill);background:rgba(255,255,255,.75);color:var(--ink);white-space:nowrap}
.trail .head .pct.lk,.trail .head .pct.done{display:grid;place-items:center;width:2rem;height:2rem;padding:0;color:var(--muted)}
.trail .head .pct.lk svg,.trail .head .pct.done svg{width:1rem;height:1rem}
.trail .head .pct.done{background:var(--sage);color:#fff}
/* the moment a path is finished */
.trail.stamped .head .pct{visibility:hidden}
.pathstamp{position:absolute;right:1rem;top:1rem;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--gold),0 18px 34px -14px rgba(59,53,46,.5);z-index:6;animation:stampIn .75s cubic-bezier(.2,1.5,.4,1) both}
.pathstamp svg{width:1.8rem;height:1.8rem}
@keyframes stampIn{0%{transform:scale(2.6) rotate(-24deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.trail.lift .canvas::after{content:"";position:absolute;inset:0;z-index:3;background:rgba(250,246,238,.55);pointer-events:none;animation:veilLift 1s ease .1s forwards}
@keyframes veilLift{to{opacity:0}}
.trail.lift .head .pct{animation:fadeUp .6s .5s both}
.trail.lift .nd.now .pin{animation:popcheck .7s .6s both,pulse 1.8s ease-in-out 1.4s infinite}
.trail .nodes{position:absolute;inset:0;z-index:2}
/* a path that is not open yet: every stop still there, the whole map lightened */
.trail.dim .canvas::after{content:"";position:absolute;inset:0;z-index:3;background:rgba(250,246,238,.55);pointer-events:none}
.trail.dim .head{z-index:2}
.trail.dim .nd .lbl{background:rgba(255,255,255,.6)}
.trail.dim .scene path[stroke-dasharray]{opacity:.6}
.nd{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;width:10rem;text-align:center}
.nd .pin{width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:3px solid var(--line);box-shadow:0 10px 20px -10px rgba(59,53,46,.45);color:var(--muted);transition:transform .15s;position:relative}
.nd .pin svg{width:1.6rem;height:1.6rem}
.nd .pin .n{font:800 1rem var(--display)}
.nd:active .pin{transform:scale(.95)}
.nd.done .pin{width:3rem;height:3rem;background:var(--sage);border-color:var(--sage);color:#fff;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ck,var(--sage)),0 10px 20px -10px rgba(59,53,46,.35)}
.nd.done .pin svg{width:1.3rem;height:1.3rem}
.nd.now .pin{background:var(--gold);border-color:var(--gold);color:var(--ink);animation:pulse 1.8s ease-in-out infinite}
.nd.now .pin::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--gold);opacity:.5;animation:ring 1.8s ease-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
@keyframes ring{from{transform:scale(.8);opacity:.6}to{transform:scale(1.25);opacity:0}}
.nd.lock .pin{background:var(--line-soft);border-color:var(--line);color:#c9bfae;box-shadow:none}
.nd.check .pin{border-radius:1.1rem;transform:rotate(45deg)}
.nd.check .pin>*{transform:rotate(-45deg)}
.nd.check:active .pin{transform:rotate(45deg) scale(.95)}
.nd .lbl{font-family:var(--display);font-weight:700;font-size:.72rem;line-height:1.1;color:var(--ink);background:rgba(255,255,255,.78);padding:.2rem .5rem;border-radius:.6rem;max-width:9.6rem}
.nd .lbl small{display:block;font-weight:500;font-size:.64rem;color:var(--muted);margin-top:.05rem}
.nd.lock .lbl{color:var(--muted);background:rgba(255,255,255,.5)}
/* a stop pushed back for later: a dashed ring, no words */
.nd.later .pin{border-style:dashed}
/* cameos: the person whose story lives at this stop stands beside the pin */
.nd .cameo{position:absolute;top:0;width:2.75rem;height:2.75rem;display:block;transform:translateY(-10%);z-index:1;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(59,53,46,.22));transition:transform .2s}
.nd .cameo.r{left:calc(50% + 2.3rem)}
.nd .cameo.l{right:calc(50% + 2.3rem)}
.nd .cameo .av{width:2.75rem!important;height:2.75rem!important;max-width:none;border-radius:.9rem;background:#fff;border:2px solid #fff}
.nd .cameo.lock{filter:grayscale(1) opacity(.45) drop-shadow(0 4px 8px rgba(59,53,46,.12))}
.nd .cameo.now{transform:translateY(-16%) rotate(-4deg)}
.nd.now:hover .cameo{transform:translateY(-22%) rotate(-6deg)}
h3.sec{font-size:.95rem;margin:.9rem 0 .45rem;display:flex;align-items:center;justify-content:space-between}
h3.sec small{font-weight:600;color:var(--muted);font-size:.78rem}
/* avatars */
.av{flex:none;border-radius:1.1rem;box-shadow:0 6px 16px -8px rgba(59,53,46,.35);display:block}
.av.ellie,.av.yolk{border-radius:0;box-shadow:none;object-fit:contain;background:none;border:0}
.qcard .body.mid > :first-child{margin-top:auto}
.qcard .body.mid > :last-child{margin-bottom:auto}
.who{display:flex;align-items:center;gap:.7rem}
.who .nm{font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1.1}
.who .rl{font-size:.75rem;color:var(--muted)}
/* deck */
.hud{display:flex;align-items:center;gap:.75rem;margin:.3rem 1rem .7rem}
.track{flex:1;height:.6rem;border-radius:var(--pill);background:var(--line-soft);overflow:hidden;position:relative}
.track{container-type:inline-size}
.track span{display:block;position:relative;overflow:hidden;height:100%;background:var(--chakra);width:0;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.track span::before{content:'';position:absolute;left:0;top:0;bottom:0;width:100cqw;background:var(--chakra)}
.hud .n{font-family:var(--display);font-weight:700;font-size:.875rem;color:var(--muted);white-space:nowrap}
.streak{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .55rem;border-radius:var(--pill);background:var(--gold-wash);color:var(--gold-deep);font-family:var(--display);font-weight:800;font-size:.78rem;opacity:0;transform:scale(.8);transition:all .25s;white-space:nowrap}
body.tabs3 .tabs{grid-template-columns:repeat(3,1fr)}
.tk.big{display:grid;width:3.4rem;height:3.4rem;margin:0 auto .4rem}
.tk.big svg{width:1.8rem;height:1.8rem}
.streak{display:none}
.streak.on{display:inline-flex;opacity:1;transform:none}
.deck{position:relative;flex:1;display:flex;flex-direction:column;margin:0 1rem;min-height:0}
body.indeck .app{height:100dvh;max-height:100dvh}
body.indeck main{min-height:0;overflow:hidden}
/* while the keyboard is up: no tab bar, app sized to what is actually visible */
body.kb .tabs{display:none}
body.kb main{padding-bottom:.5rem}
body.indeck.kb .app{height:var(--kbh,100dvh);max-height:var(--kbh,100dvh);min-height:0}
body.kb .qcard .foot{padding-bottom:.6rem}
body.kb .overlay{height:var(--kbh,100dvh);bottom:auto;padding:.75rem}
body.kb .modal.reader{max-height:calc(var(--kbh,100dvh) - 1.5rem)}
.deckwrap{display:flex;flex-direction:column;flex:1;min-height:0}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;flex:1;min-height:0;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .3s;overflow:hidden;position:relative}
.qcard.enter{transform:translateY(.75rem) scale(.97);opacity:0}
.qcard.leave{transform:translateY(-1.2rem) scale(.97);opacity:0}
.qcard .body{flex:1;min-height:0;overflow:auto;padding:1.6rem 1.4rem 1rem;display:flex;flex-direction:column;gap:.9rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;touch-action:pan-y}
.qcard .foot{padding:.6rem 1rem calc(.8rem + env(safe-area-inset-bottom)/2);display:flex;gap:.5rem;align-items:center;border-top:1px solid var(--line-soft);background:var(--paper)}
.qcard .foot .grow{flex:1}
.qcard .foot .cta{padding:.85rem 1.3rem;font-size:.95rem}
.qcard h2{font-size:1.2rem;line-height:1.22}
.qcard .x{font-size:1.02rem;line-height:1.55;white-space:pre-line}
.qcard .q{font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.3}
.stamp{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .55rem;border-radius:var(--pill);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;width:max-content}
.stamp.again{background:var(--danger-wash);color:var(--danger)}
.stamp.check{background:var(--ink);color:var(--gold)}
.stamp.back{background:var(--slate-wash);color:var(--slate-deep)}
.stat.prana{background:linear-gradient(90deg,#fdf7e8,#fbefd2);border-color:transparent;color:var(--gold-deep);box-shadow:0 0 0 1px rgba(242,182,74,.35),0 0 14px rgba(242,182,74,.35)}
.stat.prana svg{color:#e6a836;filter:drop-shadow(0 0 4px rgba(242,182,74,.9))}
.breath{position:relative;width:9rem;height:9rem;margin:.2rem auto;display:grid;place-items:center}
.breath .orb{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff6dc,#f2b64a 55%,rgba(242,182,74,0) 72%);opacity:.9;transform:scale(.72);transition:transform 1s}
.breath.on .orb{animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.72)}50%{transform:scale(1)}}
.breath .orbt{position:relative;font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink)}
/* speech */
.speech{display:grid;grid-template-columns:4rem 1fr;gap:.7rem;align-items:start}
.speech .bub{position:relative;background:var(--gold-soft);border:1.5px solid var(--gold-wash);border-radius:1.2rem;padding:1rem 1.1rem;font-family:var(--display);font-weight:400;font-size:1.06rem;line-height:1.5;letter-spacing:0;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 5 4;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:4;-webkit-hyphenate-limit-lines:1;overflow-wrap:break-word;transform-origin:left top;animation:popIn .4s cubic-bezier(.2,1.3,.3,1) both}
.speech .bub b{font-weight:700;color:var(--gold-deep)}
.river .speech .bub b{color:var(--teal)}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(.3rem)}}
.speech>div:first-child{animation:fadeIn .4s ease both}
.speech .bub::before{content:"";position:absolute;left:-9px;top:1.1rem;border:8px solid transparent;border-right-color:var(--gold-wash);border-left:0}
.speech .bub::after{content:"";position:absolute;left:-6px;top:1.15rem;border:7px solid transparent;border-right-color:var(--gold-soft);border-left:0}
.river .speech .bub{background:var(--teal-wash);border-color:#cfe1e6}
.river .speech .bub::before{border-right-color:#cfe1e6}.river .speech .bub::after{border-right-color:var(--teal-wash)}
.scenek{margin-bottom:-.3rem;color:var(--muted)}
.scenehead.sm{grid-template-columns:3rem 1fr;padding:.5rem .7rem;gap:.6rem}
.scenehead.sm .nm{font-size:.95rem}
.fixnote{border-radius:1rem;background:var(--sage-wash);padding:.8rem .95rem;animation:fadeUp .35s ease both}
.fixnote .kicker{color:var(--sage-deep);margin-bottom:.15rem}
.fixnote .cue{font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.4;color:var(--ink)}
.fixnote[hidden]{display:none}
.spotpic.fixed{outline:3px solid var(--sage);outline-offset:-3px}
.popcheck{display:inline-grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--sage);color:#fff;margin-right:.5rem;vertical-align:-.4rem;box-shadow:0 2px 0 var(--sage-deep);animation:popcheck .7s cubic-bezier(.34,1.6,.64,1) .15s both}
.popcheck svg{width:.95rem;height:.95rem;stroke-width:3}
.popcheck.big{width:3.2rem;height:3.2rem;margin:0 auto .6rem;display:grid;vertical-align:0}
.popcheck.big svg{width:1.7rem;height:1.7rem}
@keyframes popcheck{0%{transform:scale(0) rotate(-25deg);opacity:0}55%{transform:scale(1.3) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.meta{display:inline-flex;flex-wrap:wrap;column-gap:.85em;row-gap:.1em;align-items:center}
.tick{display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--sage);color:#fff;margin-left:.4rem;vertical-align:-.2rem}.tick svg{width:.7rem;height:.7rem;stroke-width:3}
.speech .nm{font-family:var(--display);font-weight:800;font-size:.72rem;color:var(--muted);margin-top:.2rem;text-align:center;line-height:1.1}
.qcard .x b{font-weight:800;color:var(--gold-deep)}
.scenehead{display:grid;grid-template-columns:4.4rem 1fr;gap:.8rem;align-items:center;padding:.8rem .9rem;border-radius:1.1rem;background:var(--cream-deep)}
.scenehead .nm{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.1}
.scenehead .rl{font-size:.78rem;color:var(--muted)}
.ill{display:grid;place-items:center;margin:0 auto}
.ill.big{width:6.5rem;height:6.5rem;border-radius:2rem;background:var(--gold-soft)}
.ill.big svg{width:3.6rem;height:3.6rem}
.ill svg{stroke:var(--gold-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.river .ill.big{background:var(--teal-wash)}.river .ill svg{stroke:var(--teal)}
.posepic{display:grid;place-items:center;background:var(--cream-deep);border-radius:1.1rem;padding:.6rem;min-height:8rem}
.posepic img{max-height:13rem;width:auto;object-fit:contain}
/* options */
.opts{display:grid;gap:.55rem}
.opt{position:relative;text-align:left;padding:.85rem 2.4rem .85rem .95rem;border:2px solid var(--line);border-radius:1.1rem;background:var(--cream);display:block;transition:transform .15s,border-color .15s,background .15s,opacity .15s;font-size:.98rem;line-height:1.4;width:100%;animation:fadeUp .35s ease both}
.opt:nth-child(2){animation-delay:.06s}.opt:nth-child(3){animation-delay:.12s}.opt:nth-child(4){animation-delay:.18s}
@keyframes fadeUp{from{opacity:0;transform:translateY(.5rem)}}
.q,.x,.sentence,.scenehead,.posepic,.vid,.ill{animation:fadeUp .35s ease both}
.chip,.step,.bank,.cols{animation:fadeUp .35s ease both}
.opt:active{transform:scale(.985)}
.opt.lit{border-color:var(--gold);background:var(--gold-soft)}
.opt.ok{border-color:var(--sage);background:var(--sage-wash)}
.opt.bad{border-color:var(--danger);background:var(--danger-wash);animation:shake .4s}
.opt.dim{opacity:.4}
.opt .key{position:absolute;top:.65rem;right:.65rem;width:1.4rem;height:1.4rem;border-radius:.45rem;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font:700 .72rem var(--display);color:var(--muted)}
.opt .mark{position:absolute;top:.7rem;right:.7rem;width:1.35rem;height:1.35rem;border-radius:50%;display:none;place-items:center;color:#fff;font-weight:800;font-size:.8rem}
.opt.ok .mark{display:grid;background:var(--sage)}.opt.bad .mark{display:grid;background:var(--danger)}
.opt.ok .key,.opt.bad .key{display:none}
.opt.quote{font-family:var(--display);font-weight:500}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.fb{padding:.8rem .95rem;border-radius:1rem;font-size:.92rem;line-height:1.45;animation:fadeIn .25s}
.fb.ok{background:var(--sage-wash);color:var(--sage-deep)}
.fb.bad{background:var(--danger-wash);color:var(--danger)}
.fb.note{background:var(--gold-soft);color:var(--gold-deep)}
.fb b{display:block;font-family:var(--display);margin-bottom:.15rem}
@media(hover:none) and (pointer:coarse){.opt .key{display:none}.hint.keys{display:none}}
@media(hover:hover) and (pointer:fine){.hint.touch{display:none}}
/* type */
.typerow{display:flex;gap:.5rem}
.inp{flex:1;min-width:0;padding:.85rem 1rem;border-radius:1rem;border:2px solid var(--line);font:inherit;font-size:1.05rem;background:var(--cream)}
.inp:focus{outline:none;border-color:var(--gold)}
.inp.ok{border-color:var(--sage);background:var(--sage-wash)}.inp.bad{border-color:var(--danger);background:var(--danger-wash);animation:shake .4s}
/* blank */
.sentence{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.5}
.slot{display:inline-block;min-width:6.5rem;padding:.1rem .6rem;border-bottom:3px solid var(--gold);border-radius:.3rem .3rem 0 0;background:var(--gold-soft);color:var(--gold-deep);text-align:center;vertical-align:baseline}
.slot.ok{background:var(--sage-wash);border-color:var(--sage);color:var(--sage-deep)}.slot.bad{background:var(--danger-wash);border-color:var(--danger);color:var(--danger);animation:shake .4s}
.bank{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{padding:.6rem .9rem;border-radius:var(--pill);background:var(--paper);border:2px solid var(--line);font-family:var(--display);font-weight:700;font-size:.95rem;transition:transform .12s,opacity .15s}
.chip:active{transform:scale(.95)}
.chip.used{opacity:.3}
#pool{display:flex;flex-direction:column;gap:0}
#pool .chip{margin-bottom:.45rem;max-height:12rem;text-align:left;transition:max-height .3s ease .45s,margin .3s ease .45s,padding .3s ease .45s,border-width .3s ease .45s,opacity .2s ease .4s,transform .12s}
#pool .chip.used{max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0;opacity:0;overflow:hidden;pointer-events:none}
.chip.sel{border-color:var(--gold);background:var(--gold-soft)}
.chip.ok{border-color:var(--sage);background:var(--sage-wash)}.chip.bad{border-color:var(--danger);background:var(--danger-wash);animation:shake .4s}
/* order */
.built{display:block;min-height:3rem;padding:.4rem .6rem;border-radius:1rem;background:var(--cream-deep);border:1.5px dashed var(--line)}
.brow{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem;padding:.25rem 0;animation:fadeIn .25s}
.brow .n{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font:800 .75rem var(--display)}
.built .ph{font-size:.85rem;color:var(--muted);text-align:center;padding:.3rem}
.pool{display:grid;gap:.45rem}
.pool .chip{text-align:left;border-radius:1rem;font-weight:600;font-size:.92rem;padding:.7rem .9rem;width:100%}
/* match */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cols .chip{width:100%;text-align:center;font-size:.9rem;padding:.75rem .5rem;border-radius:1rem;min-height:3.2rem;display:grid;place-items:center;line-height:1.25}
/* sort */
.sortarea{position:relative;display:flex;flex-direction:column;gap:.6rem;flex:none}
.side{flex:1;text-align:center;padding:.6rem .6rem;border-radius:1rem;background:var(--paper);border:2px solid var(--line);font-family:var(--display);font-weight:800;font-size:.92rem;line-height:1.1;transition:all .15s}
.side.l{border-color:var(--slate)}.side.r{border-color:var(--sage)}
.side:active{transform:scale(.97)}
.side small{display:block;font-weight:600;color:var(--muted);font-size:.7rem;margin-top:.1rem}
.side.lit{border-color:var(--gold);background:var(--gold-soft)}
.side.hit{border-color:var(--sage);background:var(--sage-wash)}
.side.miss{border-color:var(--danger);background:var(--danger-wash)}
.stack{position:relative;height:10rem;flex:none;margin-bottom:1.6rem;width:100%;max-width:30rem;align-self:center}
.scard.pic{padding:0;overflow:hidden;background:var(--cream-deep)}
.scard.pic img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:700 .82rem var(--display);cursor:pointer;margin-top:-.2rem}
.scard{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1.1rem;border-radius:1.2rem;background:var(--paper);border:2px solid var(--line);box-shadow:var(--shadow);font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.3;user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;will-change:transform}
.scard.b1{transform:translateY(.6rem) scale(.96);opacity:.85;z-index:1}
.scard.b2{transform:translateY(1.2rem) scale(.92);opacity:.6;z-index:0}
.scard.top{z-index:2}
.scard.dragging{transition:none}
.scard{user-select:none;-webkit-user-select:none;cursor:grab;touch-action:pan-y}
.scard.dragging{cursor:grabbing}
.sortbtns{max-width:30rem;width:100%;align-self:center}
@media (hover:hover){.hint.touch.sorthint::after{content:' · or press ← →'}}
.scard.out-l{transform:translateX(-140%) rotate(-12deg);opacity:0}
.scard.out-r{transform:translateX(140%) rotate(12deg);opacity:0}
.sortbtns{display:flex;gap:.5rem;position:relative;z-index:3}
.tally{display:flex;justify-content:center;gap:.35rem}
.tally i{width:.55rem;height:.55rem;border-radius:50%;background:var(--line)}
.tally i.ok{background:var(--sage)}.tally i.bad{background:var(--danger)}
/* carousel (poses) */
.car{position:relative;margin:0 -1.1rem}
.car .trk{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem 1.1rem .4rem;scrollbar-width:none;touch-action:pan-x pan-y}
.car .trk::-webkit-scrollbar{display:none}
.car .sl{flex:0 0 calc(100% - 1.6rem);scroll-snap-align:center;background:var(--paper);border:1.5px solid var(--line);border-radius:1.1rem;padding:.95rem 1rem;display:flex;flex-direction:column;gap:.3rem;align-items:center;text-align:center;min-height:8rem}
.car .sl img{max-height:11rem;width:auto;object-fit:contain}
.car .sl .nm{font-family:var(--display);font-weight:800}
.car .sl .sb{font-size:.82rem;color:var(--muted)}
.car .sl .nt{font-size:.85rem;margin-top:.1rem}
.dots{display:flex;justify-content:center;gap:.35rem;margin-top:.1rem;flex-wrap:wrap}
.dots i{width:.45rem;height:.45rem;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--gold);width:1.1rem;border-radius:var(--pill)}
.arrows{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.arrows .ab{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.arrows .ab svg{width:1.1rem;height:1.1rem}
.arrows .ab:disabled{opacity:.3}
/* flip */
.flipwrap{perspective:1200px;display:grid;place-items:center}
.flip{position:relative;width:100%;max-width:19rem;aspect-ratio:4/5;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.flip.on{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:1.1rem;overflow:hidden;background:var(--cream-deep);border:1px solid var(--line);display:grid;place-items:center;padding:.6rem;text-align:center}
.flip .b{transform:rotateY(180deg);background:var(--gold-soft)}
.flip img{width:100%;height:100%;object-fit:contain}
/* steps */
.steps{display:grid;gap:.45rem}
.step{display:grid;grid-template-columns:1.8rem 1fr;gap:.6rem;align-items:start;padding:.7rem .8rem;border-radius:.9rem;background:var(--cream-deep);font-size:.95rem;line-height:1.45;animation:fadeIn .3s}
.step .n{width:1.8rem;height:1.8rem;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font:800 .78rem var(--display)}
.step.hid{display:none}
/* video */
.vid{position:relative;border-radius:1.1rem;overflow:hidden;background:var(--ink);aspect-ratio:16/9}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidwrap{display:block}
.vid .zoomt{position:absolute;right:.5rem;top:.5rem;z-index:2;width:2.1rem;height:2.1rem;border-radius:50%;display:none;place-items:center;background:rgba(255,255,255,.88);color:var(--ink);border:0;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.vid .zoomt svg{width:1.05rem;height:1.05rem;stroke-width:2.2}
@media(max-width:519px){
  .vid .zoomt{display:grid}
  .vid.tall{aspect-ratio:auto;height:min(50dvh,24rem,100vw)}
  .vid.tall iframe{left:50%;top:50%;width:calc(100% * 16 / 9 * 5 / 4);height:auto;aspect-ratio:16/9;transform:translate(calc(-1 * var(--fx,50%)),-50%)}
}
/* reflect / mat */
.ta{width:100%;min-height:7rem;padding:.8rem .9rem;border-radius:1rem;border:2px solid var(--line);font:inherit;font-size:.95rem;background:var(--cream);resize:vertical}
.ta:focus{outline:none;border-color:var(--gold)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.two .opt{min-height:4rem;display:grid;place-items:center;text-align:center;padding:.8rem .6rem;font-family:var(--display);font-weight:700;font-size:1rem}
.hint{text-align:center;font-size:.75rem;color:var(--muted);padding:.35rem 1rem 0}
/* done screens */
.done{text-align:center;padding:1.2rem 1.25rem}
.done h2{font-size:1.5rem;margin:.6rem 0 .25rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0}
.tile{padding:.9rem 1rem;border-radius:1.1rem;background:var(--paper);border:1px solid var(--line);text-align:left;font:inherit;color:var(--ink);cursor:pointer;width:100%}
button.tile:hover{border-color:var(--gold)}
/* Me: who you are, at a glance */
.profile{display:grid;grid-template-columns:4rem minmax(0,1fr) auto;gap:.9rem;align-items:center;width:100%;padding:1rem 1rem 1rem .9rem;border-radius:1.3rem;border:1px solid var(--line);background:var(--paper);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.profile .av{width:4rem!important;height:4rem!important}
.profile .nm{font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.1}
.profile .rk{display:flex;align-items:center;gap:.4rem;margin:.25rem 0 .1rem;font:700 .82rem var(--display);color:var(--muted)}
.profile .rk .badge{width:1.4rem;height:1.4rem}
.profile .sub{font-size:.8rem;color:var(--muted)}
.profile .meter{margin-top:.45rem;height:.4rem}
.profile .chev,.door .chev{color:var(--muted);font-size:1.3rem}
.door{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.8rem;align-items:center;width:100%;padding:1rem;border-radius:1.2rem;border:1px solid var(--line);background:linear-gradient(135deg,var(--gold-wash),var(--paper));font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.door .ic{width:3rem;height:3rem;border-radius:1rem;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-deep)}
.door .ic svg{width:1.4rem;height:1.4rem}
.door .t{font-family:var(--display);font-weight:800;font-size:1.05rem}
.door .s{font-size:.82rem;color:var(--muted)}
/* library overlay */
.reader.library{max-height:92dvh;display:flex;flex-direction:column}
.reader.library .rbody{flex:1;min-height:0;overflow:auto}
.libtools{padding:.6rem 1.2rem .4rem;display:grid;gap:.55rem;border-bottom:1px solid var(--line-soft)}
.libtools .inp{font-size:.95rem;padding:.7rem .9rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chips .chip{padding:.35rem .7rem;font-size:.8rem;border-radius:var(--pill);border:1px solid var(--line);background:var(--paper);font-family:var(--display);font-weight:700;color:var(--muted);cursor:pointer}
.chips .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.searchbox{position:relative;display:flex;align-items:center}
.searchbox .si{position:absolute;left:.8rem;color:var(--muted);display:grid;place-items:center;pointer-events:none}.searchbox .si svg{width:1.05rem;height:1.05rem}
.searchbox .inp{padding-left:2.5rem;padding-right:2.6rem;width:100%}
.searchbox .inp::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.searchbox .clr{position:absolute;right:.5rem;width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;background:var(--cream-deep);color:var(--muted);border:0;cursor:pointer}.searchbox .clr svg{width:.9rem;height:.9rem;stroke-width:2.6}.searchbox .clr[hidden]{display:none}
.libtabs{display:flex;gap:.1rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:.2rem -.2rem 0;padding:0 1.5rem 0 .2rem;border-bottom:1px solid var(--line-soft);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.libtabs::-webkit-scrollbar{display:none}
.libtabs .ltab{flex:none;padding:.55rem .7rem .6rem;background:none;border:0;border-bottom:2.5px solid transparent;margin-bottom:-1px;font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--muted);cursor:pointer;border-radius:0}
.libtabs .ltab.on{color:var(--ink);border-bottom-color:var(--gold)}
.pcell.locked .pim{filter:grayscale(1) opacity(.55)}
.pcell.locked .pn,.pcell.locked .ps{color:var(--muted)}
.pcell .lk{position:absolute;right:.4rem;bottom:.4rem;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--muted);box-shadow:0 2px 8px rgba(59,53,46,.2)}
.pcell .lk svg{width:.9rem;height:.9rem}
.pim.sq{position:relative;aspect-ratio:4/5;width:100%;height:auto;overflow:hidden;border-radius:1rem;background:#fbf3df}
.pim.sq img{position:static;width:100%;height:100%;object-fit:cover;display:block;max-height:none}
.pim.sq .vpk{display:none;position:absolute;right:0;bottom:0;width:38%;height:16%;background:#fbf3df;border-top-left-radius:.6rem}
.pim.sq.badged .vpk{display:block}
.pim.sq.small{width:4.2rem;border-radius:.9rem;flex:none}
.posesheet .rhead .sub{font-size:.9rem;color:var(--muted);margin-top:.15rem}
.hearrow.left{justify-content:flex-start;margin:0 0 .6rem}
.contra{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.contra li{display:grid;grid-template-columns:4.2rem 1fr;gap:.6rem;align-items:start;padding:.7rem .85rem;border-radius:.9rem;background:var(--cream-deep)}
.contra li b{font-family:var(--display);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem 0;color:var(--sage-deep)}
.contra li.skip b{color:var(--danger)}
.contra li.skip{background:var(--danger-wash)}
.watchlist{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.watchlist li{display:grid;gap:.1rem;padding:.55rem .7rem;border-radius:.8rem;background:var(--cream)}
.watchlist b{font-family:var(--display);font-size:.88rem}
.watchlist span{font-size:.85rem;color:var(--muted)}
ul.plain{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.9rem}
.pcell{border:0;font:inherit;color:var(--ink);cursor:pointer;width:100%}
.door.journal{background:linear-gradient(135deg,var(--sage-wash,#e9f0e9),var(--paper))}
.door.journal .ic{background:var(--sage-wash,#e9f0e9);color:var(--sage-deep,var(--sage))}
.item.lib.locked .t{color:var(--muted)}
.rbody h4 small{font-weight:600;color:var(--muted);margin-left:.3rem}
.seqpic.sq{position:relative;overflow:hidden;border-radius:.7rem}
.seqpic.sq img{position:static;top:auto;width:100%;height:100%;object-fit:cover}
.tile .v{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1.1}
.tile .l{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.tile.gold{background:var(--gold-wash);border-color:transparent}
.tile.sage{background:var(--sage-wash);border-color:transparent}
.list{display:grid;gap:.5rem}
.item{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.75rem .85rem;border-radius:1rem;background:var(--paper);border:1px solid var(--line);text-align:left;width:100%}
.item .t{font-family:var(--display);font-weight:700;font-size:.9rem;line-height:1.15}
.item .s{font-size:.72rem;color:var(--muted)}
.item .t.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600}
.item .s.entry{color:var(--ink);font-size:.82rem;margin:.15rem 0 .1rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.item .ic{width:2.4rem;height:2.4rem;border-radius:.8rem;background:var(--cream-deep);display:grid;place-items:center;color:var(--muted)}
.item .ic svg{width:1.2rem;height:1.2rem}
.empty{text-align:center;padding:1.8rem 1rem}
.empty h2{font-size:1.25rem;margin:.6rem 0 .4rem}
.badge{width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 8px 18px -10px rgba(59,53,46,.5);flex:none}
.badge svg{width:55%;height:55%}
.badge.sm{width:2.6rem;height:2.6rem}
.modal.earn .badge{width:5.6rem;height:5.6rem;margin:0 auto .4rem;animation:stampIn .8s cubic-bezier(.2,1.5,.4,1) both}
.modal.earn .badge svg{width:2.6rem;height:2.6rem}
.badge.sage{background:var(--sage)}.badge.slate{background:var(--slate)}.badge.teal{background:var(--teal)}.badge.plum{background:var(--plum)}.badge.gold{background:var(--gold);color:var(--ink)}.badge.ink{background:var(--ink);color:var(--gold)}.badge.danger{background:var(--danger)}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:.4rem 0 .8rem}
.mecol{display:contents}
.doors{display:contents}
.item.allbadges{margin:.2rem 0 .6rem}
.bd{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;font-size:.68rem;font-weight:700;color:var(--muted);line-height:1.15}
.bd.off .badge{background:var(--line-soft);color:var(--line);box-shadow:none}
.bd.off{color:var(--line)}
.bd.on{color:var(--ink)}
.lvl{display:grid;grid-template-columns:3.6rem 1fr;gap:.8rem;align-items:center;padding:.9rem 1rem;border-radius:1.1rem;background:var(--paper);border:1px solid var(--line);margin:.6rem 0}
.lvl .nm{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.1}
.lvl .sub{font-size:.78rem;color:var(--muted);margin-top:.15rem}
.meter{height:.5rem;border-radius:var(--pill);background:var(--line-soft);overflow:hidden;margin-top:.45rem}
.meter{container-type:inline-size}
.meter span{display:block;position:relative;overflow:hidden;height:100%;background:var(--chakra);transition:width .5s}
.meter span::before{content:'';position:absolute;left:0;top:0;bottom:0;width:100cqw;background:var(--chakra)}
.row{display:flex;gap:.5rem;align-items:center}
/* tabs */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,var(--col));z-index:6;display:grid;grid-template-columns:repeat(4,1fr);padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom));background:rgba(255,251,243,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.4rem 0;border-radius:.9rem;color:var(--muted);font-family:var(--display);font-weight:700;font-size:.72rem;position:relative;transition:color .15s}
.tab svg{width:1.4rem;height:1.4rem}
.tab.on{color:var(--ink)}
.tab.on::before{content:"";position:absolute;top:-.55rem;width:1.75rem;height:3px;border-radius:2px;background:var(--gold)}
.tab .bdg{position:absolute;top:0;right:calc(50% - 1.5rem);min-width:1.1rem;height:1.1rem;padding:0 .3rem;border-radius:var(--pill);background:var(--gold);color:var(--ink);font-size:.68rem;display:grid;place-items:center}
/* overlay */
.overlay{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:1.25rem;background:rgba(59,53,46,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.overlay.on{display:flex;animation:fadeIn .25s}
.modal{width:min(100%,26rem);background:var(--paper);border-radius:1.6rem;padding:1.6rem 1.4rem 1.4rem;text-align:center;box-shadow:var(--shadow);animation:pop .45s cubic-bezier(.2,1.4,.3,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.modal h2{font-size:1.4rem;margin:.5rem 0 .4rem}
.modal .acts{display:grid;gap:.6rem;margin-top:1.1rem}
.modal .badge{margin:0 auto .4rem;width:5.25rem;height:5.25rem;animation:pop .6s cubic-bezier(.2,1.4,.3,1)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:9px;height:14px;border-radius:2px;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.6}}
.toast{position:fixed;left:50%;bottom:calc(var(--tabs) + 1.1rem + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(1rem);opacity:0;background:var(--ink);color:var(--cream);padding:.7rem 1rem;border-radius:var(--pill);font-family:var(--display);font-weight:700;font-size:.85rem;transition:all .3s;pointer-events:none;z-index:25;max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast.act{pointer-events:auto;display:inline-flex;align-items:center;gap:.9rem;padding-right:.5rem}
.toast .tundo{background:var(--gold);color:var(--ink);border:0;border-radius:999px;padding:.35rem .8rem;font:800 .78rem var(--display);cursor:pointer}
@media(max-height:720px){.qcard h2{font-size:1.1rem}.deck{min-height:20rem}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- library ---- */
.liblink{display:inline-flex;align-items:center;gap:.45rem;margin:.6rem auto 0;padding:.6rem .95rem;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:600 .86rem/1.2 var(--display);cursor:pointer;animation:fadeUp .5s .25s both}
.liblink svg{width:1.05rem;height:1.05rem}
.agree{display:flex;align-items:center;gap:.6rem;margin:.9rem 0 .5rem;font-weight:600;cursor:pointer;text-align:left}
.agree input{width:1.25rem;height:1.25rem;accent-color:var(--sage)}
.item.lib{display:flex;align-items:center;text-align:left;width:100%;border:1px solid var(--line);background:var(--paper);cursor:pointer;font:inherit;color:inherit}
.item.lib>div{flex:1;min-width:0}
.item.lib .ic{flex:none}
.item .chev{margin-left:auto;color:var(--muted);font-size:1.3rem;line-height:1}
.modal.reader{text-align:left;max-height:88dvh;max-height:88vh;display:flex;flex-direction:column;padding:1rem 1rem .9rem;width:min(100%,30rem)}
.reader .rhead{display:flex;align-items:center;gap:.7rem;padding:0 0 .7rem;border-bottom:1px solid var(--line)}
.reader .rhead .ic{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.8rem;background:var(--sand);color:var(--sage);flex:none}
.reader .rhead .ic svg{width:1.3rem;height:1.3rem}
.reader .rhead h2{font-size:1.1rem;margin:.1rem 0 0;line-height:1.2}
.reader .xbtn{margin-left:auto;flex:none;width:2.2rem;height:2.2rem;border-radius:50%;border:0;background:var(--sand);color:var(--ink);font-size:1rem;cursor:pointer}
.reader .rbody{overflow:auto;min-height:0;padding:.6rem .15rem .2rem;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;font-size:.95rem;line-height:1.5}
.reader h4{font-family:var(--display);font-size:1rem;margin:1rem 0 .3rem;color:var(--ink)}
.reader h4:first-child{margin-top:.2rem}
.reader p{margin:.3rem 0 .6rem}
.reader ul{margin:.2rem 0 .6rem;padding-left:1.2rem}
.reader li{margin:.25rem 0}
.gl{margin:.2rem 0 .6rem;display:grid;grid-template-columns:1fr;gap:.1rem}
.gl dt{font-family:var(--display);font-weight:700;margin-top:.55rem}
.gl dd{margin:0;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.pcell{background:var(--sand);border-radius:1rem;padding:.5rem;text-align:center}
.pcell img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:.7rem;background:#fff}
.pcell .pn{font-family:var(--display);font-weight:700;font-size:.85rem;margin-top:.35rem;line-height:1.2}
.pcell .ps{font-size:.75rem;color:var(--muted);margin-top:.15rem}
.signed{display:flex;align-items:center;gap:.5rem;margin:1rem 0 .3rem;padding:.7rem .9rem;border-radius:.9rem;background:var(--sage-soft,#e6efe6);color:var(--ink);font-size:.9rem}
.signed.todo{background:var(--sand);color:var(--muted)}
.signed svg{width:1.1rem;height:1.1rem;flex:none}

/* ---- chakra rainbow ---- */
.rainbow{height:.42rem;width:9rem;max-width:60%;margin:.7rem auto .3rem;border-radius:999px;background:var(--chakra);animation:fadeUp .6s .15s both}
.done .rainbow{margin-top:.2rem}
/* ---- typography: balanced headings, no orphans ---- */
h1,h2,h3,.q,.kicker,.lbl,.modal h2{text-wrap:balance}
p,.bub,.x,.fb,.opt,.hint,.s,.t,li,dd,.sentence,.chip,.scard,.tile .l{text-wrap:pretty}
.q,.gift .gk,.labrow .t,.nd .lbl,.door .t,h2{text-wrap:balance}
.x,.fb,.opt,.phone,.bellbox,.ps{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:9 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;-webkit-hyphenate-limit-lines:1}
/* phones: a wider measure for the bubbles, so the rag has room to even out */
@media(max-width:519px){.qcard .body{padding:1.5rem 1.15rem .9rem}.speech{grid-template-columns:3.4rem 1fr;gap:.55rem}.speech>div:first-child .av{width:3.4rem!important;height:3.4rem!important}.speech .bub{padding:.9rem 1rem}.speech .bub::before{top:1rem}.speech .bub::after{top:1.05rem}}
/* Geologica, dialled back a notch */
.qcard .q{font-weight:650}
.cta,.tab,.chip,.lbl{font-weight:650}
.gift .gk,.door .t,.profile .nm,.labrow .t,.sess .t,.tile .v{font-weight:700}

/* ---- meditation notes ---- */
.mnem{display:grid;grid-template-columns:1.6rem 1fr;gap:.5rem;align-items:start;padding:.75rem .9rem;border-radius:1rem;background:var(--gold-wash);border:1px solid var(--gold-soft);font-size:.9rem;line-height:1.45}
.mnem .bulb{font-size:1.1rem;line-height:1.3}
.mnem b{display:block;font-family:var(--display);font-size:.78rem;letter-spacing:.03em;color:var(--gold-deep);margin-bottom:.1rem}
.gl .mn{margin-top:.3rem;font-size:.84rem;color:var(--ink);background:var(--gold-wash);border-radius:.6rem;padding:.35rem .55rem}
.bellbox{display:flex;gap:.75rem;align-items:center;width:100%;text-align:left;padding:.8rem .95rem;border-radius:1.1rem;background:var(--cream-deep);border:1.5px solid var(--line-soft);color:var(--muted);font:inherit;font-size:.88rem;line-height:1.4;margin:.1rem 0 .2rem;cursor:pointer}
.bellbox .bi{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:var(--paper);font-size:1.05rem;box-shadow:0 1px 0 var(--line)}
.bellbox u{color:var(--sage-deep);font-weight:700;text-decoration-color:var(--sage);text-underline-offset:.15em}
.bellbox:active{transform:scale(.99)}
.breath{margin-top:0}
.linkbtn{background:none;border:0;padding:0;color:var(--sage-deep,var(--sage));font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.breath .orbt.sm{font-size:.95rem;line-height:1.1;max-width:6rem;text-align:center}
/* ---- pose pictures: fixed box, no overflow; VPK dosha badges hidden until the doshas are taught ---- */
.picwrap{display:flex;justify-content:center;background:var(--cream-deep);border-radius:1.1rem;padding:.5rem;animation:fadeUp .35s ease both}
.posepic{position:relative;height:12rem;display:block;min-height:0;padding:0;background:none;border-radius:.6rem;overflow:hidden}
.posepic img{height:100%;width:auto;max-height:none;display:block}
.posepic .vpk{position:absolute;left:62%;top:81.5%;width:33%;height:16%;background:#fbf3df;border-radius:.5rem;display:block}
.car .sl.crop-bc img{clip-path:inset(0 0 18% 0);margin-bottom:calc(-11rem * .18)}
.pcell .pim{position:relative;display:block}
.pcell .pim .vpk{position:absolute;left:62%;top:81.5%;width:33%;height:16%;background:#fbf3df;border-radius:.4rem;display:block}
.pcell.crop-bc img{clip-path:inset(0 0 18% 0);margin-bottom:-18%}
/* ---- stop-complete screen: everything centred, Ellie included ---- */
.screen.done{text-align:center}
.screen.done .av.ellie,.screen.done .av.yolk{display:block;margin:0 auto .2rem}
/* ---- fit-to-viewport steps (added by fitCard when a card would scroll) ---- */
.qcard.fit1 .body{zoom:.93}
.qcard.fit2 .body{zoom:.86}
.qcard.fit3 .body{zoom:.79}
.qcard.fit4 .body{zoom:.72}
.qcard.fit2 .posepic{height:10.5rem}
.qcard.fit3 .posepic,.qcard.fit4 .posepic{height:9rem}
.qcard.fit3 .breath,.qcard.fit4 .breath{width:7rem;height:7rem}
/* ---- flip cards: photo only on the front (caption band cropped), cue text on the back ---- */
.flip{aspect-ratio:1526/1040;max-width:21rem}
.flip .f img{width:100%;height:100%;object-fit:cover;object-position:top}
.flip .b .tx{display:grid;place-items:center;height:100%;padding:1rem 1.1rem;text-align:center;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.35}
.flip .b .tx small{display:block;font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.35rem}
/* ---- embodied moments: cue scripts ---- */
.kicker.embody{color:var(--sage-deep,var(--sage));text-align:left;margin-bottom:-.3rem}
.cues{margin:.1rem 0 .2rem;padding-left:1.35rem;font-size:.95rem;line-height:1.45}
.cues li{margin:.3rem 0;padding-left:.15rem}
.cues li::marker{font-family:var(--display);font-weight:800;color:var(--gold-deep)}
.phone{font-size:.82rem;color:var(--muted);text-align:center;margin:.1rem 0 .2rem}
.river .cues li::marker{color:var(--teal)}

.qcard.fit2 .body{padding:1.2rem 1.1rem .7rem}
.qcard.fit3 .body,.qcard.fit4 .body{padding:.9rem .9rem .5rem;gap:.55rem}
.qcard.fit4 .cues li{margin:.18rem 0}
/* ---- pronunciation audio ---- */
.hearrow{display:flex;justify-content:center;margin-top:-.2rem}
.hear{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:600 .9rem/1.1 var(--display);font-style:italic;cursor:pointer;animation:fadeUp .5s .2s both}
.hear .spk{font-style:normal;font-size:1rem}
.hear.playing{border-color:var(--gold);background:var(--gold-soft)}
.hear.playing .spk{animation:spk 1s ease-in-out infinite}
@keyframes spk{50%{transform:scale(1.2)}}
.hearrow.inbub{justify-content:flex-start;margin:.7rem 0 0}
.hearrow.inbub .hear{font-size:.86rem;padding:.42rem .8rem;border-color:var(--gold-wash);background:#fff}
.hearrow.inbub .hear.playing{border-color:var(--gold)}
.hear.sm{padding:.3rem .5rem;font-size:.8rem;border:0;background:var(--sand);vertical-align:middle;animation:none}
.pcell .hear.sm{margin-top:.3rem}
.gl dt .hear.sm{margin-left:.2rem}
/* ---- spot the misalignment ---- */
.spotpic{flex:none;border-radius:1rem;overflow:hidden;background:var(--cream-deep);aspect-ratio:1526/1040;height:13rem;max-width:100%;margin:0 auto;animation:fadeUp .35s ease both;transition:height .3s}
.spotpic.small{height:8.5rem}
#opts.spotopts .opt{padding:.6rem .8rem;font-size:.92rem;min-height:0}
.spotpic img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.qcard.fit3 .spotpic.small,.qcard.fit4 .spotpic.small{height:7rem}
#opts[hidden],#cueopts[hidden],[hidden]{display:none}
/* ---- hours ledger + live sessions ---- */
.hours{background:var(--paper);border:1px solid var(--line);border-radius:1.1rem;padding:.9rem 1rem}
.hours .meter.big{height:.7rem;margin:0 0 .4rem}
.hours .sub{font-size:.8rem;color:var(--muted);margin-bottom:.7rem}
.cats{display:grid;gap:.55rem}
.cat .ct{display:flex;justify-content:space-between;gap:.6rem;font-size:.84rem}
.cat .ct b{font-family:var(--display);white-space:nowrap}
.cat .ct small{font-weight:500;color:var(--muted)}
.cat .meter{margin-top:.25rem;height:.4rem}
.cat.live{margin-top:.3rem;padding-top:.5rem;border-top:1px dashed var(--line)}
.cat.live .meter span{background:var(--sage)}
.item.sess{grid-template-columns:2.4rem 1fr auto}
.item.sess .acts{display:flex;flex-direction:column;gap:.3rem}
.cta.sm{padding:.45rem .8rem;font-size:.8rem}
/* the Live path: sessions with your teachers, unlocked by progress */
/* the Live page */
.livehero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.1rem 1.1rem 1.1rem 1.2rem;border-radius:1.3rem;background:linear-gradient(135deg,var(--sage-wash,#e9f0e9),var(--paper));border:1px solid var(--line);margin:.3rem 0 .4rem}
.livehero h2{font-size:1.35rem;line-height:1.1;margin:.15rem 0 .35rem}
.livehero p{font-size:.9rem;color:var(--muted);margin:0;max-width:30rem}
.livehero .kicker{color:var(--sage-deep,var(--sage))}
.ring{--p:0;width:6.2rem;height:6.2rem;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--sage) calc(var(--p) * 1%),var(--line-soft) 0);position:relative;flex:none}
.ring::before{content:"";position:absolute;inset:.55rem;border-radius:50%;background:var(--paper)}
.mixlegend{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:-.1rem 0 .7rem;font-size:.74rem;color:var(--muted)}
.mixlegend i{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--kc);margin-right:.3rem}
.mixlegend b{color:var(--ink)}
.gift .gh{display:block;font:700 .72rem var(--body,inherit);color:var(--muted);margin-top:.1rem}
.ring b,.ring small{position:relative;font-family:var(--display);line-height:1.05}
.ring b{font-size:1rem}
.ring small{font-size:.66rem;color:var(--muted);font-weight:700}
.sesslist{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;position:relative;z-index:2}
.sess button.when,.sess button.what{border:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.sess button.what{background:none;padding:0;min-width:0}
.tk{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--gold);color:var(--ink)}
.tk svg{width:1rem;height:1rem}
.passes{display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;padding:.35rem .75rem .35rem .4rem;border-radius:var(--pill);background:var(--gold-soft);border:0;font:inherit;font-size:.9rem;color:var(--ink);cursor:pointer}
.passes b{font-family:var(--display);font-size:1.05rem}
.passes small{color:var(--muted);font-size:.8rem}
/* gift cards: one per kind of live session */
.gifts{display:grid;gap:.7rem;margin:.4rem 0 1rem}
.gift{--kc:var(--gold);position:relative;display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;gap:.9rem;align-items:center;width:100%;padding:1rem 1rem 1rem .9rem;border-radius:1.3rem;border:1.5px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--kc) 18%,#fff),var(--paper) 70%);text-align:left;font:inherit;color:var(--ink);cursor:pointer;box-shadow:0 10px 24px -18px rgba(59,53,46,.5);transition:transform .15s,box-shadow .15s;overflow:hidden}
.gift:hover{transform:translateY(-1px);box-shadow:0 14px 28px -18px rgba(59,53,46,.55)}
.gift .who{display:grid;place-items:center}
.gift .who .av{width:3.5rem!important;height:3.5rem!important;border-radius:1.1rem;box-shadow:none;border:2px solid #fff}
.gift .gtxt{display:grid;gap:.15rem;min-width:0}
.gift .gk{font-family:var(--display);font-weight:800;font-size:1.1rem;line-height:1.1}
.gift .gl{font-size:.82rem;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.gift .gtag{display:grid;place-items:center;min-width:2rem;height:2rem;padding:0 .5rem;border-radius:var(--pill);background:#fff;color:var(--muted);font:800 .7rem var(--display);letter-spacing:.05em;text-transform:uppercase}
.gift .gtag svg{width:1rem;height:1rem}
.gift.new{border-color:var(--kc);border-style:solid}
.gift.new .gtag{background:var(--kc);color:var(--ink);animation:pulse 1.8s ease-in-out infinite}
.gift.new::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-100%);animation:shine 2.6s ease-in-out 1s infinite;pointer-events:none}
@keyframes shine{to{transform:translateX(100%)}}
.gift.locked{border-style:dashed;background:var(--paper);box-shadow:none}
.gift.locked .who .av{filter:grayscale(1) opacity(.55)}
.gift.locked .gk{color:var(--muted)}
/* inside a card: labs and discussions in order */
.kindsheet .rhead .who .av{width:3rem!important;height:3rem!important;border-radius:1rem;box-shadow:none}
.labrow{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.7rem;align-items:start;padding:.8rem 0;border-top:1px solid var(--line-soft)}
.labrow:first-child{border-top:0}
.labrow .n{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--cream-deep);color:var(--muted)}
.labrow .n svg{width:1rem;height:1rem}
.labrow.cur .n{background:var(--kc,var(--gold));color:var(--ink)}
.labrow.done .n{background:var(--sage);color:#fff}
.labrow .t{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.15}
.labrow .s{font-size:.84rem;color:var(--muted);margin-top:.15rem}
.labrow .why{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted);margin-top:.35rem}
.labrow .why svg{width:.9rem;height:.9rem}
.labrow .sesslist{margin-top:.6rem}
.labrow.later .t,.labrow.wait .t{color:var(--muted)}
.labrow.later{opacity:.6}
.labrow > .cta{align-self:center}
.labrow.cur:has(> .cta){grid-template-columns:2rem minmax(0,1fr) auto}
/* calendar */
.cal{padding:.9rem .9rem 1rem;border-radius:1.3rem;border:1px solid var(--line);background:var(--paper)}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.calhead b{font-family:var(--display);font-size:.95rem}
.calhead .iconbtn{width:2rem;height:2rem}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem}
.cw{font:700 .66rem var(--display);color:var(--muted);text-align:center;padding:.2rem 0 .3rem}
.cd{position:relative;aspect-ratio:1;border:0;border-radius:.7rem;background:none;font:inherit;color:var(--ink);display:grid;place-content:center;gap:.2rem;padding:0;cursor:default}
.cd .dn{font-size:.8rem;line-height:1}
.cd .dots{display:flex;gap:.15rem;justify-content:center;min-height:.35rem}
.cd .dots i{width:.35rem;height:.35rem;border-radius:50%;background:var(--kc)}
.cd.has{cursor:pointer;background:var(--cream)}
.cd.has:hover{background:var(--cream-deep)}
.cd.bk{box-shadow:inset 0 0 0 2px var(--sage)}
.cd.today .dn{font-weight:800;color:var(--gold-deep)}
.cd:disabled .dn{color:var(--muted)}
.cd.pad{visibility:hidden}
.callegend{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.7rem;font-size:.72rem;color:var(--muted)}
.callegend i{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--kc);margin-right:.3rem}
.livepage .calcol{margin-top:.4rem}
.lockline{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted);margin:.2rem 0 .6rem}
.lockline svg{width:1rem;height:1rem}
.lockpill svg{width:.9rem;height:.9rem}
.cta.sm svg{width:.95rem;height:.95rem}
.sessdetail .sesslist .what .t{font-size:.9rem}
/* practice as a student · practice teaching */
.practicelist .item{grid-template-columns:2.4rem 1fr auto}
.teachsum{font-size:.9rem;color:var(--muted);margin:.1rem 0 .5rem}
.teachsum b{color:var(--ink);font-family:var(--display)}
.reader.practice .vid{margin:0 0 .8rem}
.reader .form{display:grid;gap:.75rem}
.fld{display:grid;gap:.3rem}
.fld span{font:700 .8rem var(--display);color:var(--muted)}
.fld .inp,.fld .ta{width:100%}
select.inp{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 1.1rem) 50%,calc(100% - .75rem) 50%;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.2rem}
/* path index: wide screens only */
.pathidx{display:none}
.sess{display:grid;gap:.7rem;align-items:center;padding:.65rem .75rem;border-radius:1rem;background:rgba(255,255,255,.85);border:1px solid var(--line)}
.sess{grid-template-columns:3.6rem minmax(0,1fr) auto}
.sess .when{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.45rem 0 .4rem;border-radius:.9rem;background:var(--cream-deep);font-family:var(--display);line-height:1;min-width:3.6rem}
.sess .when small{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.sess .when b{font-size:1.35rem;font-weight:800}
.sess .when span{font-size:.66rem;color:var(--muted);font-weight:700;margin-top:.1rem}
.sesslist.roomy .sess{padding:.85rem .9rem}
.spots{display:inline-block;padding:.1rem .45rem;border-radius:var(--pill);background:var(--sage-wash,#e9f0e9);color:var(--sage-deep,var(--sage));font:700 .7rem var(--display)}
.spots.few{background:var(--gold-wash);color:var(--gold-deep)}
.sess .k{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sess .t{font-family:var(--display);font-weight:800;font-size:.92rem;line-height:1.15;margin-top:.1rem}
.sess .why{font-size:.76rem;color:var(--muted);margin-top:.2rem}
.sess.locked{background:rgba(255,255,255,.5)}
.sess.locked .when,.sess.locked .t{opacity:.55}
.sess .act{display:flex;align-items:center}
.lockpill,.bookedpill{display:inline-flex;align-items:center;gap:.3rem;font:700 .72rem var(--display);color:var(--muted);padding:.4rem .6rem;border-radius:var(--pill);background:var(--cream-deep);white-space:nowrap}
.lockpill svg,.bookedpill svg{width:.9rem;height:.9rem}
.bookedpill{color:var(--sage-deep,var(--sage));background:var(--sage-wash,#e9f0e9)}
.morewrap{position:relative;z-index:2;padding:0 .9rem 1rem;display:flex;justify-content:center}

/* ---- wide layout: tablet + desktop. A left rail, content edge to edge, notes under the card ---- */
.rail{display:none}
.notes{display:none}
.notelist{list-style:none;margin:0 0 .6rem;padding:0;display:grid;gap:.4rem}
.notelist li{display:flex;align-items:flex-start;gap:.5rem;padding:.55rem .7rem;border-radius:.8rem;background:var(--gold-soft);border:1px solid var(--gold-wash);font-size:.86rem;line-height:1.4}
.notelist li .nt{flex:1}
.notelist li small{display:block;color:var(--muted);font-size:.72rem;margin-top:.15rem}
.notelist li .xs{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}.notelist li .xs svg{width:.8rem;height:.8rem}
.noteform{display:flex;gap:.4rem;align-items:center}
.noteform .inp.sm{flex:1;padding:.5rem .7rem;font-size:.86rem}
.selpill{position:fixed;z-index:30;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:999px;border:0;background:var(--ink);color:#fff;font:700 .82rem var(--display);box-shadow:0 10px 24px -10px rgba(0,0,0,.5);cursor:pointer;animation:fadeUp .2s ease both}
.selpill svg{width:.95rem;height:.95rem}
@media (min-width: 920px){
  :root{--rail:6.5rem}
  body{background:var(--cream)}
  .app{max-width:none;width:100%;margin:0;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:100dvh;box-shadow:none}
  body.indeck .app{height:100dvh}
  .rail{display:flex;flex-direction:column;align-items:stretch;gap:.35rem;grid-row:1 / span 2;grid-column:1;position:sticky;top:0;height:100dvh;padding:1.1rem .6rem 1rem;background:var(--paper);border-right:1px solid var(--line)}
  .rail .brand{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin:0 0 1rem;font:800 .72rem/1.15 var(--display);text-align:center;color:var(--ink)}
  .rail .brand img{width:2.75rem;height:2.75rem}
  .rail .tab{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.7rem .3rem;border-radius:1rem;border:0;background:none;color:var(--muted);font:700 .7rem var(--display);cursor:pointer}
  .rail .tab svg{width:1.5rem;height:1.5rem}
  .rail .tab.on{background:var(--gold-soft);color:var(--ink)}
  .rail .tab.on::before{display:none}
  .rail .tab:hover{color:var(--ink)}
  .rail .grow{flex:1}
  #top{grid-column:2;grid-row:1;padding:1rem 2rem .6rem;position:static;background:none}
  #top .where{font-size:1.15rem}
  main{grid-column:2;grid-row:2;padding:0 0 1.5rem;min-height:0}
  .tabs{display:none}
  .hint.keys{display:block}
  /* trail: stats across the top, always in view; the paths side by side underneath, each one scrolling on its own */
  body.inmap .app{height:100dvh}
  body.inmap main{overflow:hidden}
  .screen.map{display:flex;flex-direction:column;height:100%;min-height:0}
  .screen.map .topcards{padding:0 2rem .5rem;flex:none}
  .screen.map .strip{padding:.2rem 0;flex-wrap:wrap;overflow:visible;align-content:flex-start}
  .screen.map .jwrap{position:relative;flex:1;min-height:0;min-width:0}
  /* the first path starts out in the middle of the free space left of the journey panel (16rem wide, 2rem in from the right) */
  .screen.map .journey{--jpad:max(2rem,calc((100% - 48rem) / 2));position:relative;display:flex;gap:1.25rem;align-items:stretch;height:100%;max-width:none;width:100%;margin:0;min-width:0;padding:.25rem 20rem 1.25rem var(--jpad);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:0 18rem;cursor:grab}
  .screen.map .journey::-webkit-scrollbar{display:none}
  .screen.map .journey.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
  .screen.map .journey.drag .nd{pointer-events:none}
  /* each map is a fixed-width card that scrolls inside itself; its head stays put at the top */
  .screen.map .trail{flex:none;width:30rem;height:100%;overflow-y:auto;overflow-x:hidden;border-radius:1.4rem;border:1px solid var(--line);scroll-snap-align:center;scrollbar-width:none;overscroll-behavior-y:contain;overscroll-behavior-x:auto}
  .screen.map .trail::-webkit-scrollbar{display:none}
  .screen.map .trail .head{position:sticky;top:0;padding-bottom:2rem;background:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82) calc(100% - 2rem),rgba(255,255,255,0));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(#000 calc(100% - 2rem),transparent);mask-image:linear-gradient(#000 calc(100% - 2rem),transparent)}
  /* the whole journey, laid over the right-hand side so the paths show through behind it */
  .screen.map .pathidx{display:flex;flex-direction:column;position:absolute;z-index:6;top:.25rem;right:2rem;bottom:1.25rem;width:16rem;padding:1rem 1rem 1rem;border-radius:1.3rem;background:rgba(255,251,243,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 50px -30px rgba(59,53,46,.35)}
  .pathidx ol{list-style:none;margin:.5rem 0 .6rem;padding:0 .1rem 0 0;display:grid;grid-auto-rows:max-content;gap:.1rem;overflow-y:auto;min-height:0;flex:1;scrollbar-width:thin}
  .pathidx>.small{margin:0;flex:none}
  .pathidx li.grp{font:800 .62rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.7rem .5rem .25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pathidx li.grp:first-child{padding-top:.1rem}
  .pathidx li button{display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto;gap:.5rem;align-items:center;width:100%;padding:.32rem .5rem;border-radius:.8rem;border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
  .pathidx li button:hover{background:rgba(255,255,255,.75)}
  .pathidx li.now button{background:var(--gold-soft)}
  .pathidx .n{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;font:800 .72rem var(--display);background:var(--cream-deep);color:var(--muted)}
  .pathidx .n svg{width:.9rem;height:.9rem}
  .pathidx .n .dot{width:.4rem;height:.4rem;border-radius:50%;background:currentColor;opacity:.6}
  .pathidx li.done .n{background:var(--sage);color:#fff}
  .pathidx li.now .n{background:var(--gold);color:var(--ink)}
  .pathidx .t{font-size:.84rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pathidx .p{font-size:.72rem;color:var(--muted);font-weight:700;display:inline-flex;align-items:center}
  .pathidx .p svg{width:.8rem;height:.8rem}
  .pathidx li.soon .t{font-weight:600;color:var(--muted)}

  /* deck: card up top, notes shelf underneath */
  .ncol .kicker{margin-bottom:.45rem}
  .stoplist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
  .stoplist li{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--muted);padding:.22rem .5rem;border-radius:999px;background:var(--sand)}
  .stoplist li i{width:.5rem;height:.5rem;border-radius:50%;background:var(--line)}
  .stoplist li.done i{background:var(--sage)}
  .stoplist li.now{background:var(--gold-soft);color:var(--ink);font-weight:800}
  .stoplist li.now i{background:var(--gold)}
  .termlist{display:flex;flex-wrap:wrap;gap:.35rem}
  .term{display:inline-flex;align-items:center;gap:.2rem;font:700 .8rem var(--display);padding:.25rem .55rem;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
  .term .termgo{display:inline-flex;align-items:center;gap:.25rem;background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer}
  .term .termgo svg{width:.85rem;height:.85rem;color:var(--muted)}
  .term.go:hover{border-color:var(--gold);background:var(--gold-soft)}
  .preview{display:flex;align-items:center;gap:.8rem;opacity:.85}
  .preview .pv{width:4.5rem;height:4.5rem;border-radius:1rem;background:var(--sand);display:grid;place-items:center;overflow:hidden;flex:none}
  .preview .pv.pic img{width:100%;height:100%;object-fit:cover;object-position:top;filter:blur(1.5px)}
  .preview .pv.who{flex-direction:column;gap:.1rem;font-size:.65rem}
  .preview .pv.icon svg{width:1.8rem;height:1.8rem;color:var(--muted)}
  .preview .pvt{display:flex;flex-direction:column;gap:.15rem}
  .preview .pvt b{font-family:var(--display)}
  .preview .pvt span{font-size:.8rem;color:var(--muted)}
  /* me: two columns */
  .screen.pad{columns:2;column-gap:2.5rem;padding:0 2rem 2rem;max-width:80rem;margin:0 auto}
  /* Me: one grid, centred, filled */
  .screen.pad.mepage{columns:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem 2.5rem;align-items:start}
  .mepage .mecol{display:flex;flex-direction:column;gap:.8rem;min-width:0}
  .mepage .mecol.a{grid-column:1}
  .mepage .mecol.b{grid-column:2}
  .mepage .mecol h3.sec{margin-top:0}
  .mepage .doors{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.25rem}
  .mepage .doors h3.sec{grid-column:1 / -1;margin:0}
  .mepage .door{min-height:5.5rem}
  .mepage .badges{margin:0}
  /* Live: cards left, the month on the right */
  .screen.pad.livepage{columns:auto;max-width:84rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(24rem,.8fr);gap:2.5rem;align-items:start}
  .livepage .calcol{position:sticky;top:1rem;margin-top:.3rem}
  .livepage .livehero{padding:1.4rem 1.6rem}
  .livepage .gifts{grid-template-columns:1fr 1fr;gap:1rem}
  .livepage .gift{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:.8rem;padding:1.3rem 1.3rem 1.1rem;min-height:13rem;align-items:start}
  .livepage .gift .who .av{width:4.25rem!important;height:4.25rem!important}
  .livepage .gift .gk{font-size:1.3rem}
  .livepage .gift .gl{white-space:normal;font-size:.9rem}
  .livepage .gift .gtag{justify-self:end}
  .cal{padding:1.2rem 1.2rem 1.3rem}
  .cd .dn{font-size:.9rem}
  .cd .dots i{width:.45rem;height:.45rem}
  .screen.pad>*{break-inside:avoid}
  .screen.pad h3.sec{break-after:avoid}
  .screen.done{max-width:36rem;margin:0 auto;min-height:calc(100dvh - 7.5rem);display:flex;flex-direction:column;justify-content:center;padding-bottom:3rem}
  .screen.done > *{flex:none}
  .modal.reader{width:min(100%,38rem)}
}
/* ---- deck strip: neighbours peek on wide screens; look-back mode ---- */
.strip3{display:contents}
.qcard.ghost{display:none}
.iconbtn.back{width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:var(--cream-deep);border:0;cursor:pointer}
.iconbtn.back svg{width:1.2rem;height:1.2rem;display:block;stroke-width:2.6}
.qcard.ro .body{opacity:.92}
@media (min-width: 920px){
  .strip3{display:block;position:relative;height:100%;min-height:0;overflow:hidden;padding:0 .5rem}
  .strip3 > #q{width:min(100%,44rem);margin:0 auto;height:100%}
  .qcard.ghost{display:flex;position:absolute;top:0;bottom:0;width:44rem;opacity:.42;filter:blur(5px) saturate(.8);transform:scale(.94);pointer-events:none;overflow:hidden;min-height:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
  .qcard.ghost.prev{right:calc(50% + 22rem + 1.75rem);pointer-events:auto;cursor:pointer;mask-image:linear-gradient(to right,transparent 0,#000 55%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 55%)}
  .qcard.ghost.prev:hover{opacity:.6;filter:blur(3px)}
  .qcard.ghost.next{left:calc(50% + 22rem + 1.75rem);mask-image:linear-gradient(to left,transparent 0,#000 55%);-webkit-mask-image:linear-gradient(to left,transparent 0,#000 55%)}
  .strip3.enter .qcard.ghost{transform:translateX(6rem) scale(.94)}
  .qcard.ghost.empty{opacity:0}
  .qcard.ghost .body{overflow:hidden}
  .hint.keys{text-align:center}
}
@media (min-width: 920px){
  .qcard .body{padding:2.6rem 3rem 1.8rem;gap:1.1rem}
  /* the fit classes shrink type on wide screens, never the breathing room */
  .qcard.fit1 .body,.qcard.fit2 .body{padding:2.4rem 2.8rem 1.6rem}
  .qcard.fit3 .body,.qcard.fit4 .body{padding:2rem 2.6rem 1.4rem;gap:.8rem}
  /* a readable measure inside a wide card */
  .qcard .body > *{width:100%;max-width:42rem;margin-left:auto;margin-right:auto}
  /* photos keep their own shape on wide screens: as tall as the card allows, never cropped to a strip */
  .qcard .body > .spotpic{width:auto;height:min(21rem,40dvh)}
  .qcard .body > .spotpic.small{height:min(12rem,24dvh)}
  .qcard .body > :first-child{margin-top:auto}
  .qcard .body > :last-child{margin-bottom:auto}
  .qcard .foot{padding:1rem 1.6rem 1.4rem}
  .qcard .q{font-size:1.2rem}
  .qcard .x{font-size:1.06rem}
  .speech .bub{font-size:1.12rem}
}
@media (min-width: 920px){
}

/* ---- ghost frames + side chevrons (wide) ---- */
@media (min-width: 920px){
  .qcard.ghost{background:var(--paper);border:1.5px solid var(--line);border-radius:1.6rem;box-shadow:none;opacity:.6;filter:none;transform:scale(.92);mask-image:none;-webkit-mask-image:none}
  .qcard.ghost .body{filter:blur(4px) saturate(.7);opacity:.55;pointer-events:none;overflow:hidden}
  .qcard.ghost .foot{border-top:1px solid var(--line);min-height:3.2rem}
  .qcard.ghost .glabel{position:absolute;top:1rem;left:1.2rem;z-index:2;font:800 .7rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--paper);padding:.25rem .55rem;border-radius:999px;border:1px solid var(--line)}
  .qcard.ghost.next .glabel{left:auto;right:1.2rem}
  .qcard.ghost.prev:hover{opacity:.85}
  .qcard.ghost.prev:hover .body{filter:blur(2px)}
}
/* iOS Safari mis-lays-out dynamic content inside zoomed boxes → scale type instead of zooming there */
@supports (-webkit-touch-callout: none){
  .qcard.fit1 .body,.qcard.fit2 .body,.qcard.fit3 .body,.qcard.fit4 .body{zoom:1}
  .qcard.fit1 .body{font-size:.95em}
  .qcard.fit2 .body{font-size:.9em}
  .qcard.fit3 .body{font-size:.85em}
  .qcard.fit4 .body{font-size:.8em}
  .qcard.fit2 .x,.qcard.fit3 .x,.qcard.fit4 .x{font-size:.95em;line-height:1.45}
  .qcard.fit3 .q,.qcard.fit4 .q{font-size:1em}
  .qcard.fit3 .cues,.qcard.fit4 .cues{font-size:.88em}
  .qcard.fit3 .opt,.qcard.fit4 .opt{padding:.55rem .75rem;font-size:.9em}
}
.built{display:block}
/* ---- sequence illustrations: title band and dosha badges cropped away ---- */
.seqpic{position:relative;overflow:hidden;aspect-ratio:806/905;background:#fbf3df;border-radius:.9rem}
.seqpic img{position:absolute;left:0;top:-12.2%;width:100%;height:auto;display:block}
.seqpic.big{height:11rem;width:9.8rem;margin:0 auto}
.seqpic.sm{height:3.6rem;width:3.2rem;flex:none}
.qcard.fit2 .seqpic.big,.qcard.fit3 .seqpic.big,.qcard.fit4 .seqpic.big{height:8.5rem;width:7.6rem}
.seqrow{display:flex;align-items:center;justify-content:center;gap:.8rem}
.seqrow .seqpic{height:7rem;width:6.2rem}
.seqrow .arrow{font-size:1.6rem;color:var(--muted)}
.seqrow .qmark{width:4rem;height:4rem;border-radius:1rem;border:2px dashed var(--line);display:grid;place-items:center;font:800 1.6rem var(--display);color:var(--muted)}
.picopts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.popt{position:relative;border:2px solid var(--line);background:var(--paper);border-radius:1rem;padding:.4rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;font:inherit;color:inherit}
.popt .seqpic{width:100%;height:auto}
.popt .key{position:absolute;top:.3rem;left:.3rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--sand);font:800 .7rem var(--display);display:grid;place-items:center;z-index:2}
.popt .nm{font:700 .72rem var(--display);text-align:center;line-height:1.15;opacity:0;transition:opacity .3s;min-height:1.7rem}
.popt.show .nm{opacity:1}
.popt.ok{border-color:var(--sage);background:var(--sage-wash)}
.popt.bad{border-color:var(--danger);background:var(--danger-wash)}
.popt.lit{border-color:var(--gold);background:var(--gold-soft)}
.popt.dim{opacity:.55}
.seqlist{list-style:none;margin:.2rem 0 .6rem;padding:0;display:grid;gap:.4rem}
.seqlist li{display:flex;align-items:center;gap:.6rem;font-size:.88rem}
.seqlist li>div:nth-child(2){flex:1;min-width:0}
.pcell .pim.seqpic{height:auto;aspect-ratio:806/905}
.pcell .pim.seqpic img{position:absolute}
/* flex items in the card body never shrink — content stacks and the fit step handles size */
.qcard .body > *{flex-shrink:0}

/* ---- wide deck: vertically centred; progress under the card; notes below ---- */
@media (min-width: 920px){
  .deckwrap{display:flex;flex-direction:column;justify-content:center;gap:.9rem;height:100%;min-height:0;padding:0 2rem 1rem;width:100%;max-width:none}
  .deckwrap .deck{order:1;flex:none;height:min(36rem,calc(100dvh - 13rem));margin:0}
  .deckwrap .hud{order:2;flex:none;max-width:44rem;width:100%;margin:0 auto;padding:0}
  .deckwrap .hint.keys{order:3;flex:none;margin:0;text-align:center}
  /* the tray: a handle at the bottom edge; the body slides up when wanted, so the cards keep their centre */
  .notes{display:block;position:fixed;left:var(--rail);right:0;bottom:0;z-index:7;pointer-events:none}
  .notes .trayhandle{pointer-events:auto;display:inline-flex;align-items:center;gap:.45rem;margin:0 auto;position:relative;left:50%;transform:translateX(-50%);padding:.5rem .95rem;border-radius:.9rem .9rem 0 0;border:1px solid var(--line);border-bottom:0;background:var(--paper);color:var(--muted);font:700 .8rem var(--display);cursor:pointer;box-shadow:0 -6px 18px -12px rgba(59,53,46,.4)}
  .notes .trayhandle b{color:var(--ink)}
  .notes .trayhandle svg{width:1rem;height:1rem}
  .notes .traybody{pointer-events:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:1.5rem;padding:1rem 2rem 1.2rem;background:var(--paper);border-top:1px solid var(--line);max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .3s ease,padding .3s ease}
  .notes.open .traybody{max-height:16rem;padding:1rem 2rem 1.2rem;overflow:auto}
  .notes .ncol{max-width:44rem;margin:0 auto;width:100%}
  .notes.open .trayhandle{color:var(--ink)}
}

.iconbtn.back:disabled{opacity:.35;cursor:default}
.iconbtn.back + .iconbtn.back{margin-left:.4rem}
.deckwrap.review .qcard .body{padding-top:1.6rem}
.qcard .foot .iconbtn.back{background:var(--paper);border:1.5px solid var(--line)}

/* ============ beta: the floating button, the sign-in, the report sheet ============ */
.betabtn{position:fixed;left:0;top:58%;z-index:9;display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .5rem .55rem .45rem;border:1px solid var(--line);border-left:0;border-radius:0 .9rem .9rem 0;background:var(--paper);color:var(--muted);font:800 .66rem var(--display);letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--shadow);cursor:pointer;writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center}
.betabtn svg{width:1rem;height:1rem;transform:rotate(90deg)}
.betabtn:hover{color:var(--ink)}
body.kb .betabtn{display:none}
.modal.beta-gate{text-align:left;padding:1.1rem 1.1rem 1rem}
.modal.beta-gate .rhead{display:flex;align-items:center;gap:.7rem;padding:0 0 .7rem;border-bottom:1px solid var(--line)}
.modal.beta-gate .rhead h2{margin:0;font-size:1.25rem}
.rbody.form,.modal.beta-gate .form{display:flex;flex-direction:column;gap:.45rem;padding-top:.7rem}
.rbody.form label,.modal.beta-gate .form label{margin-top:.3rem}
.rbody.form .cta,.modal.beta-gate .form .cta{margin-top:.6rem}
.modal.beta-gate .form .inp{width:100%}
.modal.beta-gate .inp.code{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.18em;text-align:center;text-transform:uppercase}
.modal.beta-gate .linkbtn{align-self:center;margin-top:.5rem;font-weight:600;color:var(--muted)}
.modal.beta-gate [hidden]{display:none}
.beta textarea.inp{width:100%;resize:vertical;min-height:4.5rem;font-size:1rem;line-height:1.4}
.bugtools{display:flex;flex-wrap:wrap;gap:.5rem;margin:.55rem 0}
.bugtools .cta.sm{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;font-size:.84rem}
.bugtools .cta.sm svg{width:1rem;height:1rem}
.filebtn{cursor:pointer}
.bugshot{position:relative;margin:.2rem 0 .6rem;border-radius:.8rem;overflow:hidden;border:1px solid var(--line);background:var(--cream-deep);max-width:16rem}
.bugshot img{display:block;width:100%;height:auto}
.bugshot .xs{position:absolute;top:.3rem;right:.3rem;width:1.6rem;height:1.6rem;border-radius:50%;border:0;background:rgba(59,53,46,.75);color:#fff;display:grid;place-items:center;cursor:pointer}
.bugshot .xs svg{width:.8rem;height:.8rem}
.jumplist{display:flex;flex-direction:column;gap:.6rem}
.jpath b{display:block;font-family:var(--display);font-size:.82rem;color:var(--muted);margin-bottom:.3rem}
.jstops{display:flex;flex-wrap:wrap;gap:.3rem}
.jstop{font:700 .78rem var(--display);padding:.32rem .6rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.jstop.done{background:var(--sage-wash);border-color:transparent;color:var(--sage-deep)}
.jstop:hover{border-color:var(--gold);background:var(--gold-soft)}
/* a finished path sits a touch lighter than the one you are on */
.trail.past .canvas::after{content:"";position:absolute;inset:0;z-index:3;background:rgba(250,246,238,.32);pointer-events:none}
.trail.past .head{z-index:2}
@media (min-width: 920px){
  .betabtn{left:calc(var(--rail) + 1rem);top:auto;bottom:1rem;writing-mode:horizontal-tb;transform:none;border-left:1px solid var(--line);border-radius:999px;padding:.5rem .8rem}
  .betabtn svg{transform:none}
  .screen.map .trail.active{width:33rem}
}

/* ============ onboarding ============ */
.modal.onboard{text-align:center;padding:1.6rem 1.4rem 1.3rem}
.modal.onboard .av.ellie,.modal.onboard .av.yolk{margin:0 auto .4rem;display:block}
.modal.onboard h2{margin:.2rem 0 .4rem;font-size:1.45rem}
.modal.onboard p{margin:0 auto;max-width:24rem;color:var(--ink);font-size:1.02rem;line-height:1.5}
.modal.onboard .acts{margin-top:1.1rem}
.modal.onboard .obform{display:flex;flex-direction:column;gap:.7rem;margin-top:.6rem}
.modal.onboard .obform .inp{width:100%;text-align:center;font-size:1.15rem}
.modal.onboard .obav{display:flex;justify-content:center;margin:.6rem 0 .5rem}
.modal.onboard .obav .av{width:6.5rem!important;height:6.5rem!important;border-radius:1.6rem;box-shadow:0 14px 30px -14px rgba(59,53,46,.45)}
.bugtools.center{justify-content:center}
.coach{position:fixed;inset:0;z-index:40}
.coach .hole{position:absolute;box-shadow:0 0 0 200vmax rgba(59,53,46,.58);border:3px solid var(--gold);transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease,border-radius .35s ease;pointer-events:none}
.coach .cbub{position:absolute;left:50%;transform:translateX(-50%);width:min(22rem,calc(100vw - 2rem));display:grid;grid-template-columns:3.25rem 1fr;gap:.2rem .7rem;align-items:start;background:var(--paper);border-radius:1.25rem;padding:.95rem 1rem .85rem;box-shadow:0 24px 50px -24px rgba(0,0,0,.5);transition:top .35s ease}
.coach .cbub .av.ellie,.coach .cbub .av.yolk{width:3.25rem!important;height:3.25rem!important}
.coach .ctext{font-size:1rem;line-height:1.45;color:var(--ink);text-wrap:pretty}
.coach .cfoot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;margin-top:.5rem}
.coach .dots{display:inline-flex;gap:.3rem}
.coach .dots i{width:.45rem;height:.45rem;border-radius:50%;background:var(--line)}
.coach .dots i.on{background:var(--gold)}
.coach .cta.sm{padding:.55rem 1.1rem;font-size:.9rem}

/* ============ brands ============ */
/* Yoke (Studio Trudeau): Archivo Black for headlines at its one weight, Inter for everything else; the rest comes from the brand's variables */
[data-brand="yoke"] h1,[data-brand="yoke"] h2,[data-brand="yoke"] .where .ttl,[data-brand="yoke"] .trail .head h2,[data-brand="yoke"] .rail .brand span{font-family:var(--headline);font-weight:400;letter-spacing:-.02em}
[data-brand="yoke"] .kicker{letter-spacing:.16em}
[data-brand="yoke"] .qcard,[data-brand="yoke"] .trail,[data-brand="yoke"] .modal{border-color:var(--line)}
/* a video that is not wired in yet */
.vid.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;background:var(--cream-deep);color:var(--muted);text-align:center;padding:1rem}
.vid.placeholder svg{width:2rem;height:2rem}
.vid.placeholder b{font-family:var(--display);color:var(--ink);font-size:.95rem}
.vid.placeholder small{font-size:.8rem}
.vidcredit{font-size:.74rem;color:var(--muted);margin-top:.35rem;text-align:right}
.vidcredit a{color:inherit}