:root{
  /* paper, not screen */
  --paper:#FAF7F0; --paper-2:#F3EEE3; --card:#FFFFFF;
  --ink:#171410; --ink-soft:#5D5648; --ink-faint:#9A9182;
  --line:#EDE6D8; --line-soft:#F5F0E6;

  /* gold is the constant */
  --gold:#C9A227; --gold-lt:#E9CE7A; --gold-pale:#F8F1DC; --gold-deep:#9A7A14;

  --accent:var(--gold); --accent2:var(--gold-lt);
  --shadow:0 12px 38px rgba(46,36,14,.075), 0 2px 7px rgba(46,36,14,.045);
  --shadow-lift:0 20px 54px rgba(46,36,14,.13), 0 3px 10px rgba(46,36,14,.06);
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --r:22px; --r-sm:15px;
  --display:"Fraunces",Georgia,serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.55; padding-bottom:100px; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 500px at 50% -8%, #FFFCF3 0%, transparent 70%);
}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.012em;font-variation-settings:"SOFT" 20,"WONK" 0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
[hidden]{display:none !important}
svg{display:block}

/* ---------- gold gradient outline — the through-line ---------- */
.go{position:relative;background:var(--card);border-radius:var(--r)}
.go::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(145deg,var(--gold-lt) 0%,var(--accent) 46%,var(--gold) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;opacity:.85;
}

/* ---------- bar ---------- */
.bar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 13px) 18px 13px;
  background:rgba(250,247,240,.9);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.brand img{border-radius:10px;flex:none;box-shadow:0 3px 10px rgba(46,36,14,.16)}
.brand strong{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;line-height:1.2}
.brand small{display:block;color:var(--ink-faint);font-size:12px;line-height:1.35}
.back,.help{
  width:37px;height:37px;border-radius:50%;background:var(--card);
  box-shadow:inset 0 0 0 1.3px var(--line),0 2px 8px rgba(46,36,14,.05);
  font-size:18px;line-height:1;flex:none;color:var(--gold-deep);font-weight:700;
}
.back{font-size:25px;padding-bottom:3px}

main{padding:20px 18px 8px;max-width:700px;margin:0 auto}

/* ---------- cards ---------- */
.card{padding:22px 20px;margin-bottom:15px;box-shadow:var(--shadow)}
.card h2{margin:0 0 9px;font-size:21px;line-height:1.25}
.card p{margin:0 0 11px;color:var(--ink-soft);font-size:15px}
.card p:last-child{margin-bottom:0}
.lead{font-size:16px;color:var(--ink)}
.eyebrow{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:8px;
}
.rule{height:1px;background:linear-gradient(90deg,var(--gold-lt),transparent);margin:16px 0;border:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:15px;font-weight:600;font-size:15px;
  background:linear-gradient(140deg,#221C12,#3A2F1C);color:#FFF8E4;
  box-shadow:0 5px 16px rgba(34,28,18,.2);transition:transform .3s var(--spring);
}
.btn:active{transform:scale(.955)}
.btn.gold{background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#241B03;
  box-shadow:0 5px 18px rgba(201,162,39,.34)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.4px var(--line)}
.btn.wide{width:100%}

/* ---------- hero ---------- */
.hero{padding:24px 22px;margin-bottom:15px;box-shadow:var(--shadow-lift);overflow:hidden}
.hero h2{margin:0 0 10px;font-size:27px;line-height:1.14}
.hero .lead{margin-bottom:16px;color:var(--ink-soft)}
.hero-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.tag{font-size:11px;font-weight:700;padding:6px 12px;border-radius:999px;color:#fff;letter-spacing:.02em}
.tag.ghosty{background:var(--paper-2);color:var(--ink-soft)}
.tag.goldy{background:var(--gold-pale);color:var(--gold-deep)}
.hero-btns{display:flex;gap:9px;flex-wrap:wrap}
.hero-btns .btn{flex:1;min-width:130px}

/* ---------- the group card ---------- */
.group{padding:0;overflow:hidden;margin-bottom:15px;box-shadow:var(--shadow-lift)}
.group-top{padding:22px 22px 18px;background:linear-gradient(150deg,#1B1710,#33291A 70%,#3E301A);color:#FFF6E0}
.group-top .eyebrow{color:var(--gold-lt)}
.group-top h2{margin:0 0 9px;font-size:23px;color:#FFF6E0}
.group-top p{margin:0;color:#E4D8BC;font-size:14.5px;line-height:1.55}
.group-list{padding:14px 16px 16px}
.group-list h4{margin:0 0 10px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);font-family:Inter,sans-serif;font-weight:700}

.stat{text-align:center;font-size:12.5px;color:var(--ink-faint);margin:4px 0 16px;
  font-weight:600;letter-spacing:.02em}

/* ---------- category grid ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.cat{display:block;text-align:left;padding:17px 15px 15px;box-shadow:var(--shadow);
  transition:transform .3s var(--spring)}
.cat:active{transform:scale(.972)}
.cat-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;
  margin-bottom:11px;box-shadow:0 4px 13px rgba(46,36,14,.16)}
.cat-icon svg{width:21px;height:21px;fill:currentColor}
.cat-icon.big{width:52px;height:52px;border-radius:17px;margin-bottom:13px}
.cat-icon.big svg{width:27px;height:27px}
.cat strong{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;
  line-height:1.22;margin-bottom:5px}
.cat small{display:block;font-size:12px;color:var(--ink-soft);line-height:1.42;margin-bottom:9px}
.cat em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent);letter-spacing:.04em;
  text-transform:uppercase}

/* ---------- filters + lists ---------- */
.filters{display:flex;gap:7px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:999px;
  background:var(--card);color:var(--ink-soft);box-shadow:inset 0 0 0 1.3px var(--line)}
.filters button.on{background:var(--accent);color:#fff;box-shadow:none}
.lvl-h{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  margin:20px 0 10px;font-family:Inter,sans-serif;font-weight:700}

.ch{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 15px;
  margin-bottom:10px;box-shadow:var(--shadow);transition:transform .3s var(--spring)}
.ch:active{transform:scale(.982)}
.ch-mark{width:33px;height:33px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--gold-pale);color:var(--accent);font-size:14px;font-weight:700}
.ch-mark svg{width:17px;height:17px;fill:currentColor}
.ch-txt{flex:1;min-width:0}
.ch-txt strong{display:block;font-size:15px;line-height:1.3;font-weight:600}
.ch-txt small{display:block;font-size:12.5px;color:var(--ink-faint);line-height:1.42;margin-top:2px}
.lvlpip{flex:none;width:22px;height:22px;border-radius:8px;color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center}
.ch.done .ch-mark{background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#fff}
.ch.done .ch-txt strong{color:var(--ink-soft)}

/* ---------- children ---------- */
.kid{display:block;width:100%;padding:0;overflow:hidden;margin-bottom:15px;box-shadow:var(--shadow-lift)}
.kid-head{display:flex;align-items:center;gap:12px;padding:18px 20px 13px}
.kid-head h3{margin:0;font-size:20px;flex:1}
.dot{width:36px;height:36px;border-radius:50%;flex:none;box-shadow:0 3px 10px rgba(46,36,14,.18)}
.mini,.on-now{font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px;letter-spacing:.03em}
.mini{color:var(--gold-deep);background:var(--gold-pale)}
.on-now{font-style:normal;color:#241B03;background:linear-gradient(140deg,var(--gold-lt),var(--gold))}
.coast{display:block;width:100%;height:auto}
.coast-legend{display:flex;flex-wrap:wrap;gap:7px 12px;padding:14px 20px 0}
.coast-legend span{font-size:11px;color:var(--ink-faint);display:flex;align-items:center;gap:5px}
.coast-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
.kid-btns{display:flex;gap:8px;padding:15px 18px 18px;flex-wrap:wrap}
.kid-btns .btn{flex:1;min-width:100px;padding:11px 10px;font-size:13px}

/* ---------- next three ---------- */
.next3{padding:16px 18px 18px;border-top:1px solid var(--line-soft)}
.next3 h4{margin:0 0 11px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);font-family:Inter,sans-serif;font-weight:700}

/* ---------- strands / rungs ---------- */
.row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 17px;
  margin-bottom:11px;box-shadow:var(--shadow)}
.row .num{width:34px;height:34px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-weight:700;font-size:14px;font-family:var(--display)}
.row-txt{flex:1;min-width:0}
.row-txt strong{display:block;font-size:15.5px;line-height:1.3;font-weight:600}
.row-txt small{display:block;color:var(--ink-faint);font-size:12.5px;margin-top:2px;line-height:1.4}
.chip{flex:none;font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px;
  background:var(--gold-pale);color:var(--gold-deep);white-space:nowrap}
.chip.none{background:var(--paper-2);color:var(--ink-faint)}

.rung{padding:0;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.rung-head{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:16px 17px}
.rung-head .lamp{width:27px;height:27px;flex:none}
.rung-head strong{flex:1;font-size:16.5px;font-family:var(--display);font-weight:600}
.rung-head .tick{font-size:11px;font-weight:700;color:var(--gold-deep);background:var(--gold-pale);
  padding:5px 10px;border-radius:999px}
.rung-body{padding:15px 17px 17px;border-top:1px solid var(--line-soft)}
.rung-body ul{margin:0 0 15px;padding-left:19px}
.rung-body li{margin-bottom:8px}
.note{border-radius:var(--r-sm);padding:13px 15px;margin-bottom:12px;font-size:14.5px;line-height:1.55}
.note.show{background:var(--gold-pale);color:#6B5310}
.note.parent{background:#EDF1F5;color:#33475C}
.note.band{background:#F2EFF8;color:#463C6B}
.note b{font-family:var(--display);font-weight:600}

/* ---------- map ---------- */
.map-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.map-item:last-child{border-bottom:0}
.map-item span{flex:1;font-size:14.5px}
.states{display:flex;gap:5px;flex:none}
.states button{width:31px;height:31px;border-radius:10px;background:var(--paper-2);color:var(--ink-faint);
  font-size:13px;font-weight:700;transition:transform .3s var(--spring)}
.states button:active{transform:scale(.88)}
.states button.on{background:var(--accent);color:#fff}

/* ---------- toggle ---------- */
.toggle{display:flex;align-items:center;gap:13px;padding:15px 17px;margin-bottom:15px;box-shadow:var(--shadow)}
.toggle div{flex:1}
.toggle strong{display:block;font-size:15px;font-weight:600}
.toggle small{color:var(--ink-faint);font-size:12.5px}
.sw{width:51px;height:30px;border-radius:999px;background:#E2DBCC;position:relative;flex:none;transition:background .25s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.22);transition:transform .3s var(--spring)}
.sw.on{background:linear-gradient(140deg,var(--gold-lt),var(--gold))}
.sw.on::after{transform:translateX(21px)}

/* ---------- child mode ---------- */
body.childmode{padding-bottom:0;background:#0B1220}
body.childmode .bar,body.childmode .tabs,body.childmode .pill{display:none}
.cm{min-height:100vh;padding:calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 28px);
  max-width:640px;margin:0 auto;color:#FFF6E0}
.cm-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cm-top h1{margin:0;flex:1;font-size:30px;color:#FFF6E0}
.cm-exit{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);color:#FFF6E0;font-size:19px}
.cm .coast{border-radius:var(--r);box-shadow:0 16px 44px rgba(0,0,0,.42)}
.cm h4{margin:24px 0 13px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-lt);font-family:Inter,sans-serif;font-weight:700}
.cm-card{display:flex;align-items:center;gap:15px;width:100%;text-align:left;padding:19px 18px;
  margin-bottom:13px;border-radius:var(--r);background:rgba(255,255,255,.075);
  box-shadow:inset 0 0 0 1.4px rgba(233,206,122,.32);transition:transform .3s var(--spring)}
.cm-card:active{transform:scale(.97)}
.cm-icon{width:52px;height:52px;border-radius:17px;flex:none;display:grid;place-items:center;color:#fff}
.cm-icon svg{width:27px;height:27px;fill:currentColor}
.cm-card strong{font-size:19px;line-height:1.22;font-family:var(--display);font-weight:600;color:#FFF6E0}
.cm-card small{display:block;font-size:13px;color:#C7BCA0;margin-top:4px;line-height:1.4}
.cm-done{text-align:center;padding:26px 0 6px;color:#C7BCA0;font-size:14px}

/* ---------- celebration ---------- */
.burst{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;place-items:center}
.burst .ring{position:absolute;width:60px;height:60px;border-radius:50%;
  border:3px solid var(--gold-lt);animation:ring 1.1s var(--spring) forwards}
@keyframes ring{to{width:520px;height:520px;opacity:0;border-width:1px}}
.burst i{position:absolute;width:9px;height:9px;border-radius:2px;background:var(--gold-lt);
  animation:fly 1.15s cubic-bezier(.16,.9,.3,1) forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.burst-msg{position:relative;font-family:var(--display);font-weight:600;font-size:30px;color:var(--gold-deep);
  background:#fff;padding:20px 32px;border-radius:24px;box-shadow:var(--shadow-lift);
  animation:pop .55s var(--spring)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ---------- hints, tabs, sheet ---------- */
.hint{text-align:center;padding:32px 22px;color:var(--ink-faint);font-size:14.5px}
.hint b{display:block;color:var(--ink);font-size:18px;margin-bottom:7px;font-family:var(--display);font-weight:600}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:rgba(255,253,248,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line-soft);
  padding:7px 5px calc(env(safe-area-inset-bottom) + 7px)}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;
  font-size:10px;font-weight:600;color:var(--ink-faint);border-radius:13px;letter-spacing:.02em}
.tabs button svg{width:19px;height:19px;fill:currentColor}
.tabs button.on{color:var(--gold-deep)}

.sheet{position:fixed;inset:0;z-index:60;background:rgba(23,20,16,.42);display:flex;align-items:flex-end;
  backdrop-filter:blur(4px)}
.sheet-in{background:var(--card);width:100%;max-height:88vh;overflow:auto;border-radius:28px 28px 0 0;
  padding:26px 22px calc(env(safe-area-inset-bottom) + 28px);position:relative;animation:up .34s var(--spring)}
@keyframes up{from{transform:translateY(44px);opacity:.4}to{transform:none;opacity:1}}
.sheet .x{position:absolute;top:16px;right:18px;font-size:26px;color:var(--ink-faint);line-height:1}
.sheet h2{margin:0 0 11px;font-size:23px;padding-right:34px;line-height:1.2}
.sheet p{color:var(--ink-soft);margin:0 0 13px;font-size:15px}
.sheet ol{padding-left:20px;color:var(--ink-soft)}
.sheet ol li{margin-bottom:9px}
input[type=text]{width:100%;padding:14px 16px;border-radius:15px;border:1.4px solid var(--line);
  background:var(--paper);font-size:16px;font-family:inherit;color:var(--ink);margin-bottom:13px}
input[type=text]:focus{outline:none;border-color:var(--gold)}
.swatches{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.swatches button{width:39px;height:39px;border-radius:50%;transition:transform .3s var(--spring)}
.swatches button.on{transform:scale(1.16);box-shadow:0 0 0 3px #fff,0 0 0 5px currentColor}

.pill{position:fixed;right:10px;bottom:calc(env(safe-area-inset-bottom) + 64px);z-index:30;
  font-size:9.5px;color:var(--ink-faint);opacity:.45}
.update{position:fixed;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 72px);z-index:70;
  background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#241B03;padding:14px;
  border-radius:16px;text-align:center;font-weight:700;font-size:14px;box-shadow:var(--shadow-lift)}
.danger{color:#A8443A;font-size:13.5px;font-weight:600;display:block;margin-top:6px}

/* ---------- v4: tracks ---------- */
.trk{display:block;width:100%;text-align:left;padding:16px 16px 14px;margin-bottom:12px;
  box-shadow:var(--shadow);transition:transform .3s var(--spring)}
.trk:active{transform:scale(.985)}
.trk-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.trk-icon{width:38px;height:38px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;
  box-shadow:0 4px 12px rgba(46,36,14,.15)}
.trk-icon svg{width:20px;height:20px;fill:currentColor}
.trk-name{flex:1;min-width:0}
.trk-name strong{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
.trk-name small{display:block;font-size:12.5px;color:var(--ink-faint);line-height:1.4;margin-top:2px}
.lvlbadge{flex:none;font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px;
  background:var(--paper-2);color:var(--ink-faint);letter-spacing:.03em}
.lvlbadge.on{background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#241B03}
.pips{display:flex;gap:5px;margin-bottom:11px}
.pips i{flex:1;height:6px;border-radius:3px;background:var(--paper-2);display:block}
.pips i.on{background:linear-gradient(90deg,var(--gold-lt),var(--gold))}
.trk-next{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.trk-next b{color:var(--gold-deep);font-weight:700}

.step{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 16px;
  margin-bottom:10px;box-shadow:var(--shadow);transition:transform .3s var(--spring)}
.step:active{transform:scale(.985)}
.step-n{width:34px;height:34px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--paper-2);color:var(--ink-faint);font-size:15px;font-weight:700;font-family:var(--display)}
.step-n svg{width:17px;height:17px;fill:currentColor}
.step-txt{flex:1;min-width:0}
.step-txt strong{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;margin-bottom:3px}
.step-txt small{display:block;font-size:15px;color:var(--ink);line-height:1.45}
.step.done .step-n{background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#fff}
.step.done .step-txt small{color:var(--ink-faint)}
.step.next{box-shadow:var(--shadow-lift)}
.step.next::before{opacity:1;padding:2.2px}
.step-tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;background:var(--gold-pale);color:var(--gold-deep)}

/* ---------- v5: one person ---------- */
.hello{font-family:var(--display);font-weight:500;font-size:20px;color:var(--ink-soft);
  margin:0 2px 16px;letter-spacing:-.01em}
.hello b{color:var(--ink);font-weight:600}
.grid{grid-template-columns:1fr 1fr}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr 1fr}}

/* ---------- v6: the welcome ---------- */
body.welcoming{padding-bottom:0;background:#0A1120;overflow-x:hidden}
body.welcoming .bar,body.welcoming .tabs,body.welcoming .pill{display:none}
.wel{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 26px);
  max-width:560px;margin:0 auto;color:#FFF6E0;text-align:center}
.wel-skip{align-self:flex-end;font-size:13px;font-weight:600;color:#9AA6BC;padding:6px 4px;min-height:28px}
.wel-art{width:100%;margin:6px 0 26px;border-radius:26px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.5);animation:artin .5s var(--spring)}
@keyframes artin{from{transform:scale(.94) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.wel-art .hall{width:100%;display:block}
.wel-art .scene{width:100%;height:auto;display:block}
.aur-stage{background:linear-gradient(180deg,#0A1120,#16243D);display:grid;place-items:center;padding:26px 0 18px}

.wel-txt{flex:1;animation:txtin .5s .08s var(--spring) both}
@keyframes txtin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.wel-txt .eyebrow{color:var(--gold-lt)}
.wel h1{font-size:31px;line-height:1.12;margin:0 0 14px;color:#FFF6E0}
.wel p{font-size:16.5px;line-height:1.62;color:#CDC6B4;margin:0}
.wel-dots{display:flex;gap:8px;margin:26px 0 20px}
.wel-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:all .3s var(--spring)}
.wel-dots i.on{background:var(--gold-lt);width:22px;border-radius:4px}
.wel-btns{display:flex;gap:10px;width:100%}
.wel-btns .btn{flex:1;padding:16px;font-size:16px}
.wel-btns .btn.ghost{background:rgba(255,255,255,.08);color:#FFF6E0;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.16);flex:0 0 34%}

/* greeting row */
.hellorow{display:flex;align-items:center;gap:12px;margin:0 2px 18px}
.helloaur{flex:none;filter:drop-shadow(0 5px 14px rgba(46,36,14,.18))}
.hello{margin:0}
.hello small{display:block;font-family:Inter,sans-serif;font-size:13px;color:var(--ink-faint);
  font-weight:500;margin-top:3px;line-height:1.45}

/* ---------- v7: instructions, the first sixteen ---------- */
.ch{padding:0;overflow:hidden;align-items:stretch}
.ch .ch-mark{margin:0;border-radius:0;width:46px;height:auto;min-height:56px;align-self:stretch;
  display:grid;place-items:center;font-size:15px;transition:transform .25s var(--spring)}
.ch .ch-mark:active{transform:scale(.9)}
.ch .ch-txt{flex:1;text-align:left;padding:13px 14px 13px 12px;min-width:0}
.howpip{align-self:center;margin-right:12px;width:20px;height:20px;border-radius:50%;flex:none;
  background:var(--gold-pale);color:var(--gold-deep);font-size:11px;font-weight:700;
  display:grid;place-items:center}

.step{padding:0;overflow:hidden;align-items:stretch}
.step .step-n{margin:0;border-radius:0;width:52px;height:auto;align-self:stretch;min-height:62px;
  transition:transform .25s var(--spring)}
.step .step-n:active{transform:scale(.9)}
.step .step-txt{text-align:left;padding:14px 14px 14px 13px;min-width:0}
.step .step-tag{align-self:center;margin-right:13px}

.howto{background:var(--gold-pale);border-radius:var(--r-sm);padding:16px 18px 14px;margin-bottom:16px}
.howto-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.howto-head b{font-family:var(--display);font-weight:600;font-size:16px;color:var(--gold-deep)}
.howto-head .aur{flex:none}
.howto ol{margin:0;padding-left:20px;color:#5C4A16}
.howto ol li{margin-bottom:8px;font-size:15px;line-height:1.5}
.howto ol li:last-child{margin-bottom:0}

.starter .pips.big{gap:4px;margin:14px 0 8px}
.starter .pips.big i{height:9px;border-radius:4px}
.starter-count{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 16px !important}
.starter h2{font-size:24px}

/* ---------- v8: the sixteen, and a celebration you can feel ---------- */
.s16{display:flex;align-items:stretch;background:var(--card);border-radius:var(--r-sm);
  margin-bottom:10px;overflow:hidden;position:relative;
  box-shadow:0 3px 12px rgba(46,36,14,.06);
  border-left:6px solid var(--accent);transition:all .35s var(--spring)}
.s16-tick{width:46px;flex:none;display:grid;place-items:center;background:var(--paper-2);
  transition:all .35s var(--spring)}
.s16-tick::before{content:"";width:22px;height:22px;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--accent);opacity:.35}
.s16-tick svg{width:20px;height:20px;fill:#fff;position:absolute}
.s16-tick:active{transform:scale(.88)}
.s16-txt{flex:1;text-align:left;padding:13px 14px 12px 13px;min-width:0}
.s16-cat{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.s16-cat svg{width:12px;height:12px;fill:currentColor}
.s16-txt strong{display:block;font-size:15px;line-height:1.35;font-weight:600}
.s16-txt em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-faint);margin-top:4px}

.s16.done{border-left-width:6px;background:linear-gradient(100deg,
  color-mix(in srgb,var(--accent) 12%,#fff), color-mix(in srgb,var(--accent2) 22%,#fff));
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 26%,transparent)}
.s16.done .s16-tick{background:var(--accent)}
.s16.done .s16-tick::before{opacity:0}
.s16.done .s16-txt strong{color:var(--ink)}
.s16.done .s16-txt em{color:var(--accent);font-weight:700}

/* the six lights, right above the list, so something changes the moment you tick */
.lights{display:flex;gap:9px;justify-content:center;align-items:flex-end;height:44px;
  margin:16px 0 12px;padding:0 4px}
.lt{flex:1;max-width:44px;height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative}
.lt i{display:block;width:9px;border-radius:5px 5px 2px 2px;background:#E6E0D2;
  height:8px;transition:all .5s var(--spring)}
.lt.on i{background:var(--c);height:calc(8px + var(--lv) * 8px);
  box-shadow:0 0 14px 3px color-mix(in srgb,var(--c) 60%,transparent)}
.starter-count{text-align:center;font-size:13px;color:var(--ink-faint);font-weight:600;margin:0 0 10px}
.starter-count b{font-family:var(--display);font-size:20px;color:var(--gold-deep)}

/* celebration */
.burst .ring.r2{animation-delay:.12s;border-color:var(--gold)}
.burst-card{position:relative;background:#fff;border-radius:28px;padding:22px 30px 26px;text-align:center;
  box-shadow:0 26px 70px rgba(46,36,14,.3);animation:pop .5s var(--spring);max-width:82vw}
.burst-aur{margin:-58px auto 4px;animation:hop .62s var(--spring)}
@keyframes hop{0%{transform:translateY(26px) scale(.7)}60%{transform:translateY(-8px) scale(1.06)}100%{transform:none}}
.burst-card strong{display:block;font-family:var(--display);font-weight:600;font-size:27px;
  color:var(--gold-deep);line-height:1.15}
.burst-card span{display:block;font-size:14px;color:var(--ink-soft);margin-top:7px;line-height:1.45}
.burst.big .burst-card{padding:26px 32px 30px}
.burst.big .burst-card strong{font-size:33px}

/* ---------- v8: the voice ---------- */
.spk{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--gold-pale);color:var(--gold-deep);transition:transform .3s var(--spring)}
.spk svg{width:18px;height:18px;fill:currentColor}
.spk:active{transform:scale(.86)}
.howto-head .spk{margin-left:auto}
.wel-say{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:20px}
.wel-say .spk{background:rgba(233,206,122,.18);color:var(--gold-lt);width:40px;height:40px}
.wel-say span{font-size:12.5px;color:#9AA6BC;font-weight:600}

/* ---------- v9: Aurelia ---------- */
.aur{display:block}
.aur.bust{border-radius:50%;background:linear-gradient(165deg,#16243D,#0C1526)}
.aur-stage{background:linear-gradient(180deg,#0A1120,#16243D);display:grid;place-items:center;padding:20px 0 12px}
.helloaur{flex:none;filter:drop-shadow(0 5px 14px rgba(46,36,14,.18))}
.burst-aur{margin:-48px auto 6px;animation:hop .62s var(--spring);
  filter:drop-shadow(0 8px 20px rgba(46,36,14,.28))}
.howto-head .aur.bust{box-shadow:0 3px 10px rgba(46,36,14,.18)}

.findout{background:#EFF3F7;border-radius:var(--r-sm);padding:16px 18px 14px;margin-bottom:16px}
.findout .howto-head b{color:#2E5A80}
.findout p{color:#3A5470;font-size:15px;margin:0 0 10px;line-height:1.55}
.findout ul{margin:0 0 10px;padding-left:20px;color:#3A5470}
.findout ul li{margin-bottom:7px;font-size:15px}
.findout-note{font-weight:600;color:#2E5A80 !important;margin:0 !important;font-size:14px !important}

/* ---------- v10: fireworks ---------- */
.fw{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden}
.fw-shot{position:absolute;width:0;height:0}
.fw-shot i{position:absolute;width:7px;height:7px;border-radius:50%;
  animation:fwfly 1.5s cubic-bezier(.12,.72,.28,1) forwards}
@keyframes fwfly{
  0%{transform:none;opacity:1}
  70%{opacity:1}
  100%{transform:translate(var(--dx),calc(var(--dy) + 70px));opacity:0}}

/* ---------- v11: focus, and saying what to do next ---------- */
body.focused .tabs{display:none}
body.focused{padding-bottom:34px}

.whatnow{background:linear-gradient(160deg,#FFFDF7,#FBF5E6)}
.steps3{margin:0 0 14px;padding-left:0;list-style:none;counter-reset:s}
.steps3 li{counter-increment:s;position:relative;padding-left:38px;margin-bottom:13px;
  font-size:15px;line-height:1.55;color:var(--ink-soft)}
.steps3 li::before{content:counter(s);position:absolute;left:0;top:-1px;width:26px;height:26px;
  border-radius:9px;background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#241B03;
  font-family:var(--display);font-weight:700;font-size:14px;display:grid;place-items:center}
.steps3 b{color:var(--ink);font-weight:600}
.whatnow-note{font-size:13.5px !important;color:var(--ink-faint) !important;margin:0 !important;
  padding-top:13px;border-top:1px solid var(--line-soft)}

/* ---------- v12: the flame, and less noise ---------- */
.flame{display:block;width:100%;height:auto}
.clarify{background:#F4F0E6;border-left:3px solid var(--gold-lt);border-radius:0 10px 10px 0;
  padding:11px 14px;margin:0 0 16px;font-size:14.5px;line-height:1.55;color:#5C5340}
.figure{font-size:12.5px;color:var(--ink-faint);text-align:center;margin:16px 0 0;line-height:1.5}
.track-figure{margin:18px 0 4px}
.step-note{display:block;font-size:12.5px;color:#8A7F66;line-height:1.45;margin-top:6px;
  padding-left:9px;border-left:2px solid var(--line)}
.flamewrap{border-radius:var(--r);overflow:hidden;margin-bottom:15px;box-shadow:var(--shadow-lift)}
.flamecap{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;
  background:#1B120C;color:#E8D6B4;font-size:12.5px;font-weight:600}
.flamecap b{font-family:var(--display);font-size:17px;color:#FFCE3D}
.who{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.who:last-of-type{border-bottom:0}
.who strong{flex:1;font-size:16px;font-family:var(--display);font-weight:600}
.who-n{font-size:12px;color:var(--ink-faint);font-weight:600}
.who .dot{width:28px;height:28px}

/* ---------- v13: points and photographs ---------- */
.score{display:flex;align-items:flex-end;gap:14px;padding:15px 18px 12px;background:#1B120C;color:#E8D6B4}
.score-n{display:flex;align-items:baseline;gap:6px;flex:none}
.score-n b{font-family:var(--display);font-weight:700;font-size:34px;color:#FFCE3D;line-height:1}
.score-n span{font-size:12px;color:#B9A67F;font-weight:600}
.score-r{flex:1;text-align:right}
.score-r strong{display:block;font-family:var(--display);font-weight:600;font-size:19px;color:#FFE7A8}
.score-r small{font-size:11.5px;color:#9C8B67}
.score-bar{height:5px;background:#2A1B10}
.score-bar i{display:block;height:100%;background:linear-gradient(90deg,#E2872A,#FFCE3D);
  transition:width .7s var(--spring)}
.flamecap{font-size:11.5px;color:#B9A67F}

.pts{flex:none;align-self:center;margin-right:12px;font-size:11px;font-weight:700;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#fff);
  padding:5px 8px;border-radius:8px;letter-spacing:.02em}
.pts.big{font-size:12px;padding:6px 10px}
.s16 .pts{margin-right:11px}
.worth{font-size:13.5px;color:var(--gold-deep);margin:0 0 14px;font-weight:600}
.worth b{font-family:var(--display);font-size:15px}

.grouph{position:relative;margin:34px 0 15px;padding:16px 0 0;
  font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);line-height:1.15}
.grouph::before{content:"";position:absolute;top:0;left:0;width:52px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt))}
.grouph::after{content:"";position:absolute;top:1.5px;left:60px;right:0;height:1px;background:var(--line)}
.grouph span{display:block;font-family:Inter,sans-serif;font-size:13px;letter-spacing:0;
  color:var(--ink-faint);font-weight:500;margin-top:6px;line-height:1.5}

.cat.photo{padding:0;overflow:hidden}
.cat-img{display:block;height:96px;background-size:cover;background-position:center;
  background-color:#EDE7DA;position:relative}
.cat-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,20,16,0) 40%,rgba(23,20,16,.42))}
.cat.photo .cat-icon{position:absolute;bottom:-16px;left:12px;z-index:2;margin:0;width:34px;height:34px;
  border-radius:11px;box-shadow:0 5px 14px rgba(23,20,16,.4)}
.cat.photo .cat-icon svg{width:18px;height:18px}
.cat-body{display:block;padding:24px 13px 14px}
.catcard{padding:0;overflow:hidden}
.catbanner{height:150px;background-size:cover;background-position:center;background-color:#EDE7DA;
  position:relative;margin-bottom:14px}
.catbanner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,20,16,0) 45%,rgba(23,20,16,.4))}
.catcard .cat-icon.big{position:absolute;bottom:-22px;left:18px;z-index:2;margin:0}
.catcard h2,.catcard p{padding:0 20px}
.catcard h2{margin-top:16px}
.catcard p:last-child{padding-bottom:20px}
.whosaw{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);margin:0 0 12px !important}
.witness{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.wbtn{padding:14px 10px;border-radius:14px;font-size:14.5px;font-weight:600;
  background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#241B03;
  box-shadow:0 4px 14px rgba(201,162,39,.3);transition:transform .3s var(--spring)}
.wbtn:active{transform:scale(.95)}
.wbtn.self{background:var(--card);color:var(--ink-soft);box-shadow:inset 0 0 0 1.4px var(--line)}
.witness.big .wbtn{padding:17px 10px;font-size:16px}
.seenby{background:var(--gold-pale);color:var(--gold-deep);border-radius:var(--r-sm);
  padding:13px 15px;margin-bottom:12px;font-size:14.5px;font-weight:600}

/* ---------- v15: home, and the progress report ---------- */
.help svg{width:17px;height:17px;fill:currentColor}
.flamewrap.tappable{display:block;width:100%;padding:0;text-align:left;border:0;
  transition:transform .3s var(--spring)}
.flamewrap.tappable:active{transform:scale(.985)}
.flamecap span:last-child{color:var(--gold-lt)}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.figs.four{grid-template-columns:repeat(4,1fr)}
.figs div{background:var(--paper);border-radius:13px;padding:12px 8px;text-align:center}
.figs b{display:block;font-family:var(--display);font-weight:700;font-size:24px;color:var(--gold-deep);line-height:1.1}
.figs.four b{font-size:21px}
.figs span{display:block;font-size:10.5px;color:var(--ink-faint);font-weight:600;margin-top:4px;line-height:1.3}

/* ---------- v16: charts, trophies, warmer wording ---------- */
.chart{display:block;width:100%;height:auto;margin:4px 0 16px}
.slowdown{font-size:12.5px !important;color:var(--ink-faint) !important;margin:14px 0 0 !important;
  padding-top:13px;border-top:1px solid var(--line-soft);line-height:1.5}

.cbars{display:flex;flex-direction:column;gap:10px}
.cbar{display:flex;align-items:center;gap:10px}
.cbar-n{flex:0 0 40%;font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}
.cbar-t{flex:1;height:11px;background:var(--paper-2);border-radius:6px;overflow:hidden}
.cbar-t i{display:block;height:100%;border-radius:6px;transition:width .7s var(--spring)}
.cbar-v{flex:0 0 30px;text-align:right;font-size:12.5px;font-weight:700;font-family:var(--display)}

.trophies{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.tro{background:linear-gradient(155deg,#FFFDF6,#FBF2DC);border-radius:15px;padding:13px 12px;
  box-shadow:inset 0 0 0 1.3px #F0E3C2}
.tro-i{display:block;width:30px;height:30px;border-radius:10px;margin-bottom:8px;
  background:linear-gradient(140deg,var(--gold-lt),var(--gold));display:grid;place-items:center}
.tro-i svg{width:17px;height:17px;fill:#fff}
.tro b{display:block;font-family:var(--display);font-weight:600;font-size:14px;line-height:1.2;color:var(--ink)}
.tro span{display:block;font-size:11px;color:var(--ink-faint);margin-top:3px;line-height:1.35}
.tro.mark .tro-i{background:linear-gradient(140deg,#C9A227,#8A6B14)}
.nextaw{font-size:13px !important;color:var(--ink-soft) !important;margin:14px 0 0 !important;
  padding-top:13px;border-top:1px solid var(--line-soft)}
.nextaw b{color:var(--gold-deep)}
.creed{font-family:var(--display);font-weight:500;font-size:17.5px !important;line-height:1.5;
  color:var(--ink) !important;background:var(--gold-pale);border-radius:14px;padding:15px 17px;
  margin:0 0 14px !important}

/* ---------- v17: category progress, folding, a living flame ---------- */
.catstats{display:flex;gap:8px;padding:0 20px;margin-bottom:16px}
.catstats span{flex:1;background:var(--paper);border-radius:12px;padding:10px 6px;text-align:center;
  font-size:10px;color:var(--ink-faint);font-weight:600;line-height:1.3}
.catstats b{display:block;font-family:var(--display);font-weight:700;font-size:20px;
  color:var(--gold-deep);margin-bottom:2px}

.ladder{display:flex;gap:7px;align-items:flex-end;height:96px;padding:0 20px;margin-bottom:10px}
.rung-b{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.rung-b i{display:block;width:100%;border-radius:7px 7px 3px 3px;min-height:3px;
  transition:height .6s var(--spring)}
.rung-b b{font-size:12px;font-weight:700;font-family:var(--display);line-height:1}
.rung-b em{font-style:normal;font-size:9.5px;color:var(--ink-faint);font-weight:600}
.ladder-cap{font-size:12px;color:var(--ink-faint);padding:0 20px 20px;margin:0;line-height:1.45}

.whatnow-head{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:0}
.whatnow-head h2{margin:0}
.whatnow-head .chev{margin-left:auto;width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--gold-pale);color:var(--gold-deep);font-size:17px;font-weight:700;
  display:grid;place-items:center;line-height:1}
.whatnow.shut{padding-bottom:20px}
.whatnow .steps3{margin-top:16px}

/* the flame breathes, because a still flame looks dead */
.flame{animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@media (prefers-reduced-motion: reduce){.flame{animation:none}}

/* ---------- v18: things arriving ---------- */
.burst i{position:absolute;width:9px;height:9px;border-radius:2px;
  animation:fly var(--dur,1.4s) cubic-bezier(.16,.72,.3,1) forwards}
.burst i.rib{width:6px;height:15px;border-radius:3px}
@keyframes fly{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  55%{opacity:1}
  100%{transform:translate(var(--dx),calc(var(--dy) + var(--fall,180px))) rotate(var(--rot));opacity:0}}

.burst.award{background:rgba(20,15,8,.5);backdrop-filter:blur(5px)}
.aw-card{position:relative;background:linear-gradient(165deg,#FFFDF6,#F7EBCE);border-radius:30px;
  padding:30px 34px 22px;text-align:center;max-width:80vw;overflow:hidden;
  box-shadow:0 30px 80px rgba(40,28,8,.45),inset 0 0 0 1.6px #EFDDB2;
  animation:awin .68s cubic-bezier(.2,1.5,.4,1)}
@keyframes awin{0%{transform:scale(.55) rotate(-9deg);opacity:0}
  60%{transform:scale(1.06) rotate(2deg);opacity:1}100%{transform:none;opacity:1}}
.aw-shine{position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  animation:shine 1.5s .45s ease-out}
@keyframes shine{to{left:120%}}
.aw-i{display:grid;place-items:center;width:74px;height:74px;border-radius:24px;margin:0 auto 14px;
  background:linear-gradient(140deg,#FFE7A8,#C9A227);box-shadow:0 10px 26px rgba(201,162,39,.5);
  animation:spinin .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes spinin{0%{transform:scale(.3) rotate(-160deg)}100%{transform:none}}
.aw-i svg{width:38px;height:38px;fill:#fff}
.aw-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:6px}
.aw-card strong{display:block;font-family:var(--display);font-weight:600;font-size:29px;
  color:var(--ink);line-height:1.12}
.aw-line{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:8px}
.aw-tap{display:block;font-size:11px;color:var(--ink-faint);margin-top:16px;letter-spacing:.04em}

.tro{animation:tropop .5s var(--spring) both}
@keyframes tropop{0%{transform:scale(.8) translateY(10px);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){
  .tro,.aw-card,.aw-i,.aw-shine,.burst i{animation:none}
  .aw-shine{display:none}}
.witness-note{font-size:12px;color:var(--ink-faint);margin:12px 0 0;line-height:1.5;text-align:center}

/* ---------- the path ---------- */
.pathcard{background:linear-gradient(160deg,#FFFDF7,#F8F1DF)}
.pathbar{height:7px;background:var(--paper-2);border-radius:4px;overflow:hidden;margin:14px 0 16px}
.pathbar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold));transition:width .7s var(--spring)}

/* ---------- categories as rows, image on the left ---------- */
.layoutpick{display:flex;align-items:center;gap:8px;margin:22px 0 2px}
.layoutpick span{flex:1;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700}
.lp{width:32px;height:32px;border-radius:10px;background:var(--card);color:var(--ink-faint);
  font-size:15px;line-height:1;box-shadow:inset 0 0 0 1.3px var(--line)}
.lp.on{background:var(--gold-pale);color:var(--gold-deep);box-shadow:inset 0 0 0 1.3px var(--gold-lt)}

.rowlist{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.catrow{display:flex;align-items:stretch;width:100%;text-align:left;padding:0;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .3s var(--spring)}
.catrow:active{transform:scale(.985)}
.cr-img{flex:0 0 112px;background-size:cover;background-position:center;background-color:#EDE7DA;
  position:relative}
.cr-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(23,20,16,.12),transparent 60%)}
.cr-body{flex:1;min-width:0;padding:14px 6px 14px 15px}
.cr-body strong{display:block;font-family:var(--display);font-weight:600;font-size:17px;line-height:1.2}
.cr-body small{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.4;margin:4px 0 6px}
.cr-body em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent)}
.cr-go{align-self:center;padding:0 15px 0 8px;font-size:22px;color:var(--ink-faint);line-height:1}

/* ---------- stages, and telling one category from another ---------- */
.pathcount{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-deep);margin:-6px 0 14px}
.stagedots{display:flex;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.sd{flex:1;font-size:9.5px;font-weight:700;letter-spacing:.02em;text-align:center;line-height:1.3;
  color:var(--ink-faint);padding:7px 4px;border-radius:9px;background:var(--paper-2)}
.sd.past{background:var(--gold-pale);color:var(--gold-deep)}
.sd.on{background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#241B03}

/* the icon rides on the photo so each row reads as itself, not another warm picture */
.cr-img{position:relative}
.cr-icon{position:absolute;left:9px;bottom:9px;width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(23,20,16,.45);z-index:2}
.cr-icon svg{width:16px;height:16px;fill:currentColor}
.catrow{border-left:5px solid var(--accent)}

/* ---------- For today — the Classical Mind bar ---------- */
.today-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px}
.today-lead{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--ink)}
.today-roll{font-size:12px;font-weight:700;color:var(--gold-deep);background:var(--card);
  border-radius:999px;padding:8px 14px;box-shadow:inset 0 0 0 1.4px var(--line);
  transition:transform .3s var(--spring)}
.today-roll:active{transform:scale(.94)}
.today-list{display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.today-bar{position:relative;display:flex;align-items:stretch;width:100%;text-align:left;padding:0;
  background:var(--card);border-radius:17px;overflow:hidden;
  box-shadow:0 2px 5px rgba(46,36,14,.07),0 10px 26px rgba(46,36,14,.08);
  transition:transform .3s var(--spring)}
.today-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;z-index:3;
  background:linear-gradient(180deg,var(--tc),var(--tcd))}
.today-bar:active{transform:scale(.985)}
/* NO WASH OVER THE PHOTOGRAPH. This used to carry a 55-72% colour overlay in
   the category accent, which read as a fault — "it looks like it's faded out
   or there's something wrong with it". Nothing sits on top of these images, so
   nothing needed to be dimmed for legibility. The category glyph moves to a
   solid corner chip instead, which is the treatment .cr-icon already uses. */
.tb-photo{flex:none;width:104px;align-self:stretch;position:relative;overflow:hidden;
  background-size:cover;background-position:center;background-color:var(--tc)}
.tb-glyph{position:absolute;left:8px;bottom:8px;width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;z-index:2;color:#fff;box-shadow:0 3px 10px rgba(23,20,16,.45)}
.tb-glyph svg{width:15px;height:15px;fill:currentColor}
.tb-text{flex:1;min-width:0;padding:13px 15px 13px 17px;display:flex;flex-direction:column;
  justify-content:center;gap:5px}
.tb-kicker{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tc)}
/* the task, and it is the biggest thing on the card */
.tb-title{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.26;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* the track it belongs to — a filing label, so it is a footnote */
.tb-teaser{font-size:12px;color:var(--ink-faint);line-height:1.35}
.tb-teaser.thought-line{color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- v52: courage and skill ----------
   The second axis. Each kind gets one colour and keeps it everywhere — pill,
   row label, badge — so "this one only takes nerve" becomes recognisable at a
   glance rather than something you have to read. */
:root{ --k-courage:#9C3A47; --k-skill:#1F5E8A; --k-kindness:#2F6B4F; --k-attention:#6B4E9E; }
.kindrow{margin-bottom:2px}
.catpill.kind-courage.on{background:var(--k-courage)}
.catpill.kind-skill.on{background:var(--k-skill)}
.catpill.kind-kindness.on{background:var(--k-kindness)}
.catpill.kind-attention.on{background:var(--k-attention)}
.kindnote{margin:2px 2px 14px;padding:11px 13px;border-radius:var(--r-sm);font-size:13px;
  line-height:1.5;color:var(--ink-soft);background:var(--paper-2);border-left:4px solid var(--ink-faint)}
.kindnote.kind-courage{border-left-color:var(--k-courage)}
.kindnote.kind-skill{border-left-color:var(--k-skill)}
.kindnote.kind-kindness{border-left-color:var(--k-kindness)}
.kindnote.kind-attention{border-left-color:var(--k-attention)}
.tb-teaser b.kind-courage{color:var(--k-courage)}
.tb-teaser b.kind-skill{color:var(--k-skill)}
.tb-teaser b.kind-kindness{color:var(--k-kindness)}
.tb-teaser b.kind-attention{color:var(--k-attention)}

/* the badges — a rung you have reached, and how far to the next */
.badge{display:flex;align-items:center;gap:12px;padding:12px 13px;margin-bottom:10px;
  background:var(--paper-2);border-radius:var(--r-sm);border-left:4px solid var(--ink-faint);opacity:.72}
.badge.won{opacity:1;background:linear-gradient(150deg,#FFFDF6,var(--gold-pale))}
.badge.bk-courage{border-left-color:var(--k-courage)}
.badge.bk-kindness{border-left-color:var(--k-kindness)}
.badge.bk-attention{border-left-color:var(--k-attention)}
.badge-cup{flex:none;width:34px;height:34px;display:grid;place-items:center;color:#CFC7B4}
.badge.won .badge-cup{color:var(--gold)}
.badge-cup svg{width:30px;height:30px;fill:currentColor}
.badge-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.badge-t strong{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink)}
.badge-t small{font-size:11.5px;color:var(--ink-faint)}
.badge-bar{display:block;height:5px;border-radius:999px;background:#E4DDCC;overflow:hidden;margin:3px 0 1px}
.badge-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-lt),var(--gold))}
.badge-t em{font-style:normal;font-size:11px;color:var(--ink-faint)}

/* ---------- v47: everything in one place, and a trophy cabinet ----------
   Category pills across the top of the library, so "social skills this month"
   is one tap rather than a hunt. */
.pillrow{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pillrow::-webkit-scrollbar{display:none}
.catpill{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;
  background:var(--card);font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
  box-shadow:inset 0 0 0 1.4px var(--line);transition:transform .3s var(--spring)}
.catpill i{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-faint)}
.catpill:active{transform:scale(.95)}
.catpill.on{background:var(--tc,var(--gold));color:#fff;box-shadow:0 3px 12px rgba(46,36,14,.2)}
.catpill.on i{color:rgba(255,255,255,.8)}
.every-head{margin:6px 2px 14px}
/* inside one category */
.backcat{display:inline-block;margin:0 0 10px;padding:8px 14px 8px 10px;border-radius:999px;
  background:var(--paper-2);font-size:12.5px;font-weight:700;color:var(--ink-soft);
  transition:transform .3s var(--spring)}
.backcat:active{transform:scale(.95)}
.cathero{position:relative;height:130px;border-radius:var(--r);overflow:hidden;
  background-size:cover;background-position:center;display:flex;align-items:flex-end;
  box-shadow:var(--shadow)}
.cathero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,20,16,0) 30%,rgba(23,20,16,.72))}
.cathero-in{position:relative;z-index:2;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.cathero-in .cat-icon{margin-bottom:7px}
.cathero-in strong{font-family:var(--display);font-weight:600;font-size:21px;color:#fff}
.cathero-in small{font-size:12.5px;color:rgba(255,255,255,.86)}
.catstat{margin:11px 2px 14px;font-size:12.5px;color:var(--ink-faint)}
.catstat b{color:var(--gold-deep);font-family:var(--display);font-size:15px}
.catwrap .rowlist{margin-bottom:14px}
.every-head h2{margin:0 0 5px;font-size:22px}
.every-head p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-faint)}
.everypage .today-list{margin-bottom:16px}
/* what a row costs before you can start it, said plainly instead of hidden */
.tb-teaser.ctx-room,.tb-teaser.ctx-home{color:#2F6B4F}
.tb-teaser.ctx-kit,.tb-teaser.ctx-out{color:#A8641F}
.tb-teaser.ctx-with{color:#6B4E9E}
.tb-teaser.ctx-long{color:var(--ink-faint)}

/* the cabinet */
.trophycase h2{margin:4px 0 8px}
.trophycase>p{margin:0 0 4px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.tc-h{margin:16px 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-family:Inter,sans-serif}
.tcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.tcup{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;
  background:linear-gradient(160deg,#FFFDF6,var(--gold-pale));border-radius:var(--r-sm);
  text-align:center;transition:transform .3s var(--spring)}
.tcup:active{transform:scale(.96)}
.tcup i{width:42px;height:42px;display:grid;place-items:center;color:var(--gold);
  background-size:cover;background-position:center;border-radius:12px}
.tcup i svg{width:34px;height:34px;fill:currentColor;filter:drop-shadow(0 3px 8px rgba(201,162,39,.5))}
.tcup.skill i em{display:grid;place-items:center;width:100%;height:100%;border-radius:12px;
  background:rgba(23,20,16,.34)}
.tcup.skill i em svg{width:22px;height:22px;fill:#FFD87A}
.tcup b{font-family:var(--display);font-weight:600;font-size:12.5px;line-height:1.2;color:var(--ink)}
.tcup small{font-size:10px;color:var(--ink-faint)}
.tc-next{margin:14px 0 0;font-size:13px;color:var(--ink-faint);line-height:1.5}

/* ---------- v46: three buttons, and a page with nothing else on it ----------
   The three sections became three pages. A vertical stack of them was still a
   menu, just one you scroll instead of scan. */
.sectabs{display:flex;gap:6px;background:var(--paper-2);border-radius:999px;padding:4px;margin-bottom:14px}
.sectabs button{flex:1;padding:10px 6px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--ink-faint);letter-spacing:.01em;transition:transform .3s var(--spring),color .2s}
.sectabs button.on{background:var(--card);color:var(--gold-deep);
  box-shadow:0 2px 8px rgba(46,36,14,.14)}
.sectabs button:active{transform:scale(.96)}

/* the philosophy, folded, under the activity — glanceable, never in the way */
.thfold{margin-top:12px;overflow:hidden;
  background:linear-gradient(150deg,#FFFDF6,var(--gold-pale))}
.thf-head{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 14px;
  transition:transform .3s var(--spring)}
.thf-head:active{transform:scale(.99)}
.thf-bust{flex:none;width:38px;height:38px;display:grid;place-items:center}
.thf-bust svg,.thf-bust img{width:38px;height:38px}
.thf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.thf-who{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.thf-line{font-size:13px;line-height:1.35;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thfold.open .thf-line{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.thf-chev{flex:none;font-size:20px;color:var(--gold-deep);line-height:1;padding:0 2px}
.thf-body{padding:0 16px 16px}
.thf-body h3{margin:2px 0 8px;font-size:17px}
.thf-body p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.thf-say{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:12px;
  font-weight:700;color:var(--gold-deep)}

/* ---------- v45: the bar, the thought, the trophy ----------
   The programme, made visible. The bar is the first thing on the screen and it
   only ever goes up. */
.lvlbar{display:block;width:100%;text-align:left;padding:12px 16px 14px;margin-bottom:13px;
  box-shadow:var(--shadow);transition:transform .3s var(--spring)}
.lb-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.lb-top b{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink)}
.lb-top span{font-size:12px;font-weight:700;color:var(--ink-faint);letter-spacing:.02em}
.lb-track{display:block;height:9px;border-radius:999px;background:#EDE6D8;overflow:hidden}
.lb-track i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold));
  transition:width .6s var(--spring)}
/* full, and waiting to be tapped — this is a button, so it says so loudly */
.lvlbar.full{background:linear-gradient(150deg,#FFFBEF,var(--gold-pale));cursor:pointer}
.lvlbar.full:active{transform:scale(.985)}
.lvlbar.full .lb-top b{color:var(--gold-deep)}
.lvlbar.full .lb-top span{color:var(--gold-deep);font-weight:700}
.lvlbar.full .lb-track i{background:linear-gradient(90deg,var(--gold),#F0A23C)}

.trophycard{display:block;width:100%;text-align:center;padding:26px 20px 22px;
  background:linear-gradient(160deg,#FFFDF6,var(--gold-pale));transition:transform .3s var(--spring)}
.trophycard:active{transform:scale(.985)}
.trophy-cup{display:block;width:64px;height:64px;margin:0 auto 12px;color:var(--gold)}
.trophy-cup svg{width:64px;height:64px;fill:currentColor;
  filter:drop-shadow(0 6px 18px rgba(201,162,39,.45))}
.trophycard .eyebrow{color:var(--gold-deep)}
.trophycard h2{margin:4px 0 8px}
.trophycard p{margin:0 0 16px;color:var(--ink-soft);font-size:14.5px;line-height:1.5}

/* section three, shut by default — a menu is a fine thing to have and a
   terrible thing to be handed the moment you walk in */
.buffetsec .whatnow-head{display:flex;align-items:flex-start;justify-content:space-between;
  width:100%;text-align:left;gap:12px}
.buffetsec .whatnow-head h2{margin:2px 0 0;font-size:19px}
.buffetsec .chev{font-size:22px;color:var(--ink-faint);line-height:1}
.buf-note{margin:12px 0 14px;font-size:13px;line-height:1.5;color:var(--ink-faint)}
.buffetsec .today-list{margin-bottom:12px}
.wide-roll{display:block;width:100%;text-align:center}

/* ---------- v43: the tray, the thought, the long game ----------
   The order of the home screen changed and so did its centre of gravity.
   What is on top is what you could do in the next thirty seconds. */
.today{margin-bottom:22px}
.today-note{margin:0 2px 13px;font-size:13px;line-height:1.5;color:var(--ink-faint)}
.today-note b{color:var(--gold-deep);font-weight:700}
.today-foot{margin:2px 2px 0;font-size:12px;color:var(--ink-faint);text-align:center}
.today-list{margin-bottom:12px}
.tb-go{flex:none;align-self:center;padding:0 14px 0 4px;font-size:21px;
  color:var(--ink-faint);line-height:1}

/* the thought — same bar, different substance, so it is plainly not a task */
.today-bar.thought{--tc:var(--gold);--tcd:var(--gold-lt);
  background:linear-gradient(160deg,#FFFDF6,var(--gold-pale))}
.tb-bust{flex:none;width:104px;align-self:stretch;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--gold-pale),#F0E4BE)}
.tb-bust svg,.tb-bust img{width:56px;height:56px}
.today-bar.thought .tb-kicker{color:var(--gold-deep)}
.today-bar.thought.read{opacity:.62}

/* the thought, opened */
.thought-sheet .th-top{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.thought-sheet .th-top svg,.thought-sheet .th-top img{width:46px;height:46px}
.th-who{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep)}
.th-body{font-size:16.5px;line-height:1.62;color:var(--ink-soft)}

/* keep in your pocket — the ones that need a person, a place or a thing */
.later .whatnow-head{display:flex;align-items:flex-start;justify-content:space-between;
  width:100%;text-align:left;gap:12px}
.later .whatnow-head h2{margin:2px 0 0;font-size:19px}
.later .chev{font-size:22px;color:var(--ink-faint);line-height:1}
.laterlist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.later-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 12px;
  background:var(--paper-2);border-radius:var(--r-sm);transition:transform .3s var(--spring)}
.later-row:active{transform:scale(.98)}
.later-row i{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff}
.later-row i svg{width:16px;height:16px;fill:currentColor}
.later-row span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.later-row strong{font-size:14px;font-weight:600;line-height:1.32;color:var(--ink)}
.later-row small{font-size:11.5px;color:var(--ink-faint)}
.later-row em{font-style:normal;color:var(--ink-faint);font-size:18px}

/* the long game — a different shape on purpose: these do not finish today */
.longgame h2{margin:4px 0 6px}
.longgame>p{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.proj{background:var(--paper-2);border-radius:var(--r-sm);padding:13px 14px 14px;margin-bottom:11px;
  border-left:4px solid var(--tc)}
.proj-top{display:flex;align-items:center;gap:11px}
.proj-top i{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff}
.proj-top i svg{width:17px;height:17px;fill:currentColor}
.proj-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.proj-t strong{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.proj-t small{font-size:11.5px;color:var(--ink-faint)}
.proj-x{flex:none;width:28px;height:28px;border-radius:50%;font-size:17px;color:var(--ink-faint);
  display:grid;place-items:center;transition:transform .3s var(--spring)}
.proj-x:active{transform:scale(.88)}
.proj-dots{display:flex;gap:5px;margin:11px 0 9px}
.proj-dots i{flex:1;height:5px;border-radius:999px;background:#E4DDCC}
.proj-dots i.on{background:linear-gradient(90deg,var(--tc),var(--tcd))}
.proj-next{margin:0 0 12px;font-size:14px;line-height:1.42;color:var(--ink-soft)}
.proj-btns{display:flex;gap:8px;flex-wrap:wrap}
.proj-btns .btn{flex:1;min-width:130px;padding:11px 12px;font-size:14px}
.pick-proj{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:12px;
  background:var(--paper-2);border-radius:var(--r-sm);margin-bottom:9px;
  transition:transform .3s var(--spring)}
.pick-proj:active{transform:scale(.98)}
.pick-proj i{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff}
.pick-proj i svg{width:17px;height:17px;fill:currentColor}
.pick-proj span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pick-proj strong{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink)}
.pick-proj small{font-size:12px;color:var(--ink-faint);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick-proj em{font-style:normal;flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-deep)}

/* seven days, nothing resets */
.week{padding:14px 18px 12px;margin-bottom:15px;box-shadow:var(--shadow)}
.week-row{display:flex;justify-content:space-between;gap:4px}
.wk{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.wk svg{width:22px;height:22px;fill:#E6E0D2;transition:fill .4s,filter .4s}
.wk.on svg{fill:var(--gold);filter:drop-shadow(0 2px 6px rgba(201,162,39,.55))}
.wk.today svg{fill:#E2DBCC}
.wk.today.on svg{fill:#F0A23C}
.wk b{font-size:10px;font-weight:700;color:var(--ink-faint)}
.wk.today b{color:var(--gold-deep)}
.week-cap{margin:10px 0 0;font-size:12.5px;color:var(--ink-faint);text-align:center}
.week-cap b{font-family:var(--display);color:var(--gold-deep);font-size:15px}

.starter.shut{padding-bottom:18px}
.starter.shut .pips.big{margin-bottom:0}
.starter h2{font-size:22px}

.explore{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:17px 18px;
  margin:4px 0 15px;box-shadow:var(--shadow);transition:transform .3s var(--spring)}
.explore:active{transform:scale(.985)}
.explore-t{flex:1;min-width:0}
.explore-t strong{display:block;font-family:var(--display);font-weight:600;font-size:19px}
.explore-t small{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.explore .cr-go{padding-right:2px}

.who .sw{margin-left:auto}
.who strong{font-family:Inter,sans-serif;font-size:14.5px}

/* the name, on the dark */
.namescreen .wel-txt{width:100%;max-width:420px}
.namescreen input[type=text]{margin-top:22px;text-align:center;font-size:22px;font-family:var(--display);
  padding:16px;background:rgba(255,255,255,.07);color:#FFF6E0;border-color:rgba(233,206,122,.35)}
.namescreen input[type=text]::placeholder{color:#7F8AA3;font-family:Inter,sans-serif;font-size:16px}
.namescreen input[type=text]:focus{border-color:var(--gold-lt)}
.namescreen .wel-btns .btn{padding:17px;font-size:17px}

/* a moment: one rule, spoken once, at the point it applies */
/* visible from the first frame on purpose — nothing here waits on an animation
   tick, so a throttled tab or a slow phone still shows the card */
.moment{position:fixed;inset:0;z-index:85;background:rgba(10,17,32,.86);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:18px;opacity:1;transition:opacity .3s ease-in}
.moment.out{opacity:0}
/* The card caps its own height and the TEXT scrolls inside it, so the button
   is on screen whatever the phone and however long the words are. min-height:0
   on the scrolling child is what stops a flex item refusing to shrink. */
.mo-card{background:linear-gradient(180deg,#131F36,#0C1526);border-radius:30px;padding:0 22px 22px;
  text-align:center;max-width:440px;width:100%;color:#FFF6E0;
  max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);
  display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1.4px rgba(233,206,122,.3);
  transform:scale(.94) translateY(8px);transition:transform .5s var(--spring)}
.mo-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin:0 -22px;padding:0 22px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 15px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 15px),transparent)}
.mo-card > .btn{flex:none;margin-top:14px}
.moment.in .mo-card{transform:none}
.mo-fig{display:grid;place-items:center;padding:14px 0 2px}
.mo-fig .aur{filter:drop-shadow(0 12px 28px rgba(0,0,0,.5))}
.mo-who{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:8px}
.mo-card h2{margin:0 0 10px;font-size:24px;line-height:1.15;color:#FFF6E0}
.mo-card p{margin:0 0 13px;font-size:15px;line-height:1.55;color:#CDC6B4}
.mo-card p:last-of-type{margin-bottom:4px}
.mo-card .btn{padding:16px}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 92px);transform:translateX(-50%);
  z-index:80;background:#221C12;color:#FFF8E4;font-size:13.5px;font-weight:600;padding:11px 18px;
  border-radius:999px;box-shadow:var(--shadow-lift);animation:pop .4s var(--spring);white-space:nowrap}
.toast.out{transition:opacity .35s;opacity:0}
@media (prefers-reduced-motion: reduce){.moment,.toast,.mo-card{animation:none}}

/* ---------- v29: momentum, one card at a time ---------- */
.deck{padding:18px 20px 20px;margin-bottom:15px;box-shadow:var(--shadow-lift)}
.deck::before{opacity:1;padding:1.8px}
.deck-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.deck-head .eyebrow{margin:0;font-size:11px;letter-spacing:.18em}
.deck-count{font-size:11.5px;font-weight:700;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.deck-pips{display:flex;gap:3px;margin-bottom:16px}
.deck-pips i{flex:1;height:5px;border-radius:3px;background:var(--paper-2);transition:background .4s}
.deck-pips i.on{background:linear-gradient(90deg,var(--gold-lt),var(--gold))}
.deck-pips i.now{background:var(--gold-deep)}
.deck-tier{margin-bottom:14px}
.deck-tier b{display:block;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--gold-deep)}
.deck-tier span{display:block;font-size:12px;color:var(--ink-faint);line-height:1.45;margin-top:2px}
.deck-test{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.22;
  color:var(--ink);margin:0 0 16px;letter-spacing:-.012em}
.deck-note{background:#F4F0E6;border-left:3px solid var(--gold-lt);border-radius:0 10px 10px 0;
  padding:10px 13px;margin:0 0 16px;font-size:14px;line-height:1.5;color:#5C5340}
.deck-how{background:var(--gold-pale);border-radius:var(--r-sm);margin:0 0 16px;
  padding:14px 16px 14px 34px;color:#5C4A16}
.deck-how li{margin-bottom:7px;font-size:14.5px;line-height:1.5}
.deck-how li:last-child{margin-bottom:0}
.deck-go{padding:18px;font-size:17px}
.deck-skip{display:block;width:100%;text-align:center;margin-top:12px;font-size:12.5px;
  font-weight:600;color:var(--ink-faint);padding:6px}
/* the card is replaced wholesale on every tick, so it arrives rather than blinks */
.deck{animation:deckin .34s var(--spring)}
@keyframes deckin{from{transform:translateX(14px) scale(.99);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.deck{animation:none}}

.tierrow{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.tierrow:last-child{border-bottom:0;padding-bottom:0}
.tierdots{display:flex;flex-direction:column;gap:3px;flex:none;padding-top:4px}
.tierdots i{width:22px;height:4px;border-radius:2px;background:var(--paper-2)}
.tierdots i.on{background:linear-gradient(90deg,var(--gold-lt),var(--gold))}
.tiertxt strong{display:block;font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25}
.tiertxt small{display:block;font-size:12.5px;color:var(--ink-faint);line-height:1.45;margin-top:2px}
.tierrow.done .tiertxt strong{color:var(--gold-deep)}
.deck-howwrap{position:relative}
.deck-howwrap .spk{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.7)}
.deck-howwrap .deck-how{padding-right:52px}
/* the slim flame, while the deck is running */
.fs-flame{flex:none;width:26px;height:26px;display:grid;place-items:center}
.fs-flame svg{width:22px;height:22px;fill:var(--gold);
  opacity:calc(.34 + var(--k,0) * .66);
  filter:drop-shadow(0 0 calc(2px + var(--k,0) * 11px) rgba(226,135,42,calc(.25 + var(--k,0) * .6)));
  transform:scale(calc(.78 + var(--k,0) * .34));transition:transform .5s var(--spring)}
.fs-n{flex:none;font-size:12.5px;color:var(--ink-faint);font-weight:600}
.fs-n b{font-family:var(--display);font-size:17px;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.fs-bar{flex:1;height:6px;border-radius:3px;background:var(--paper-2);overflow:hidden}
.fs-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold-lt),var(--gold))}
.fs-r{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
/* a button with a warning under it stacks, rather than sitting beside it */
.btn:has(.danger){flex-direction:column;gap:3px;padding-top:12px;padding-bottom:12px}
.btn .danger{margin-top:0;font-size:12px;line-height:1.35;font-weight:600}
.btn.gold .danger{color:#7A2E14}
/* who is about to read this one, and the button that asks them to */
.deck-read{display:flex;align-items:center;gap:9px;margin:0 0 16px}
.deck-read .aur{flex:none;width:30px;height:30px;box-shadow:0 2px 7px rgba(46,36,14,.2)}
.deck-read .spk{width:30px;height:30px}
.deck-read .spk svg{width:15px;height:15px}
.deck-read span{font-size:12px;font-weight:600;color:var(--ink-faint)}
.deck-how{margin-top:0}

/* ---------- v35: the household, everybody at their own level one ---------- */
.house-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.house-head .eyebrow{margin-bottom:8px}
.house-lit{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#241B03;background:linear-gradient(140deg,var(--gold-lt),var(--gold));
  padding:5px 11px;border-radius:999px;margin-bottom:8px;white-space:nowrap}
.person{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;
  border-radius:15px;background:var(--paper);margin-bottom:8px;transition:transform .3s var(--spring)}
.person:active{transform:scale(.985)}
.person.on{background:var(--gold-pale);box-shadow:inset 0 0 0 1.4px var(--gold-lt)}
.person-fl{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#F1ECE0;box-shadow:inset 0 0 0 2px var(--dot)}
.person-fl svg{width:19px;height:19px;fill:#C9C2B2}
.person-fl.lit svg{fill:var(--gold);filter:drop-shadow(0 0 calc(2px + var(--k,0) * 9px) rgba(226,135,42,.65))}
.person-t{flex:1;min-width:0}
.person-t strong{display:block;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.2}
.person-t small{display:block;font-size:12px;color:var(--ink-faint);margin-top:2px}
.person-n{flex:none;font-family:var(--display);font-weight:700;font-size:17px;color:var(--gold-deep);
  font-variant-numeric:tabular-nums}
.person em{flex:none;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-deep)}
.house h2{font-size:19px}

/* ================= v36 ================= */

/* ---------- who is holding the phone ----------
   Sticks directly under the bar on every screen. Two things at once: the
   switch, and a lit flame beside an unlit one all day long, which argues that
   the grown-ups are in this without anybody having to read a paragraph. */
.whobar{
  position:sticky;top:calc(env(safe-area-inset-top) + 56px);z-index:38;
  display:flex;gap:7px;align-items:center;overflow-x:auto;scrollbar-width:none;
  padding:9px 18px;background:rgba(250,247,240,.985);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.whobar::-webkit-scrollbar{display:none}
.wf{
  display:flex;align-items:center;gap:7px;flex:none;padding:5px 12px 5px 6px;border-radius:999px;
  background:var(--card);box-shadow:inset 0 0 0 1.3px var(--line);
  transition:transform .18s var(--spring),box-shadow .2s,background .2s;
}
.wf:active{transform:scale(.95)}
.wf.on{background:var(--gold-pale);box-shadow:inset 0 0 0 1.6px var(--gold-lt)}
.wf b{font-size:12.5px;font-weight:600;white-space:nowrap;max-width:9ch;overflow:hidden;text-overflow:ellipsis}
.wf-fl{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-2);box-shadow:inset 0 0 0 1.5px var(--dot,var(--line))}
.wf-fl svg{width:13px;height:13px;fill:#C9C2B2}
.wf-fl.lit svg{fill:var(--gold);filter:drop-shadow(0 0 calc(1px + var(--k,0) * 7px) rgba(226,135,42,.7))}
.wf.ask{background:transparent;box-shadow:inset 0 0 0 1.3px var(--line);opacity:.72}
.wf.ask b{color:var(--ink-faint);font-style:italic;max-width:none}
.wf.add{padding:0;width:30px;height:30px;justify-content:center;font-size:19px;
  line-height:1;color:var(--gold-deep);font-weight:600}
/* the deck hides the tab bar; the strip stays, because a handover happens mid-deck */
body.welcoming .whobar,body.childmode .whobar{display:none}

/* ---------- what the two of them say along the way ---------- */


/* a move the phone was actually there for keeps its mark on the row of pips */
.deck-pips i.felt{background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  box-shadow:0 0 0 1px var(--gold-lt)}

/* ---------- witness ----------
   Everything below belongs to witness.js. Delete that file and delete this
   block; nothing else refers to any of it. */
.wt{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(250,247,240,.97);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .26s ease}
.wt.in{opacity:1}
.wt.dark{background:#0E0C09;color:#F6F1E4}
.wt-in{width:100%;max-width:400px;text-align:center;max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.wt-task{margin:0;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.25;
  flex:none;max-width:22ch}
.wt.dark .wt-task,.wt.dark .wt-say{color:#F6F1E4;opacity:.9}
.wt-stage{position:relative;width:180px;height:180px;flex:none;display:grid;place-items:center}
.wt-ring{position:absolute;inset:0;width:180px;height:180px;transform:rotate(-90deg)}
.wt-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.wt-bg{stroke:var(--line)}
.wt.dark .wt-bg{stroke:rgba(255,255,255,.13)}
.wt-fg{stroke:var(--gold-lt);transition:stroke-dashoffset .18s linear,stroke .3s}
.wt.good .wt-fg{stroke:var(--gold)}
.wt.won .wt-fg{stroke:var(--gold-deep)}
.wt-mid{position:relative;display:grid;place-items:center;gap:1px}
.wt-mid b{font-family:var(--display);font-weight:600;font-size:46px;line-height:1;
  font-variant-numeric:tabular-nums}
.wt-mid small{font-size:12px;color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase}
.wt.dark .wt-mid small{color:rgba(246,241,228,.55)}
.wt.good .wt-stage{animation:wtpulse .5s var(--spring)}
@keyframes wtpulse{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
.wt-say{margin:0;font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:30ch;flex:none}
.wt .btn{flex:none;width:100%}
.wt-said{font-size:12.5px;color:var(--ink-faint);text-decoration:underline;
  text-underline-offset:3px;flex:none;padding:6px}
.wt.dark .wt-said{color:rgba(246,241,228,.5)}
.wt-priv{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink-faint);max-width:32ch;flex:none}

.who strong small{display:block;font-weight:400;font-size:12px;line-height:1.45;
  color:var(--ink-faint);margin-top:3px;max-width:34ch}
.wt.won .wt-mid b{font-size:52px;color:var(--gold-deep);animation:wtpulse .5s var(--spring)}
.wt.won .wt-say{color:var(--ink);font-weight:600}

/* ---------- what the two of them say, on its own card ----------
   It used to live inside the activity card, between the task and the button.
   That made it read as part of the instruction and pushed the button down the
   screen. On its own surface under the card it is unmistakably a person
   talking to you while you work, and the card above stays clean. */
.aside{padding:15px 17px 17px;margin-bottom:15px}
.aside::before{opacity:.5}
.aside.arion{background:#FBFBFC}
.aside-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.aside-top svg,.aside-top img{flex:none;width:34px;height:34px;border-radius:50%}
.aside-who{flex:1;font-family:var(--display);font-weight:600;font-size:13px;
  color:var(--gold-deep);letter-spacing:.01em}
.aside.arion .aside-who{color:#46536B}
.aside.arion::before{background:linear-gradient(145deg,#C9D2E0 0%,#8E9BB0 46%,#6B7A93 100%)}
.aside .spk{flex:none}
.aside.arion .spk{background:#E7EAF0;color:#46536B}
.aside p{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink-soft)}

/* the passage read over a long clock, and the note on a walk-away move */
.wt-read{max-width:34ch;text-align:left;background:var(--card);border-radius:var(--r-sm);
  padding:13px 15px;box-shadow:inset 0 0 0 1.3px var(--line);flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.wt-read-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.wt-read-top svg,.wt-read-top img{flex:none;width:28px;height:28px;border-radius:50%}
.wt-read-top span{font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--gold-deep)}
.wt-read p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.deck-away{background:var(--paper-2);border-radius:var(--r-sm);margin:0 0 16px;padding:11px 13px;
  font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* ---------- v53: the mentors ----------
   A real face in a gold medallion, breathing, with a lamp-glow behind it.
   Gold duotone is done at build time (tools: see gen in images/mentors/raw),
   so the five sit together whatever century the source portrait came from. */
.mface{display:inline-grid;place-items:center;border-radius:50%;position:relative;flex:none;
  background:linear-gradient(145deg,var(--gold-lt),var(--gold) 55%,var(--gold-deep));padding:2.5px;
  box-shadow:0 10px 26px rgba(120,90,20,.28),0 2px 6px rgba(46,36,14,.12)}
.mface img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 2px #fff;background:#FBF4E2}
.helloaur{padding:0;border-radius:50%}
.hellorow .run{margin-left:auto;align-self:flex-start}
.run{flex:none;display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;
  background:var(--gold-pale);color:var(--gold-deep);font-size:12px;font-weight:700;white-space:nowrap}
.run svg{width:13px;height:13px;fill:currentColor}
.run.lit svg{animation:flick 1.6s ease-in-out infinite}
.run.relight{background:var(--paper-2);color:var(--ink-faint)}
@keyframes flick{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

.stage{display:flex;gap:16px;align-items:center;padding:18px 18px 16px;margin:0 0 15px;box-shadow:var(--shadow);overflow:hidden;
  background:radial-gradient(420px 220px at 12% 50%,#FFF6DA 0%,var(--card) 62%)}
.stage-port{position:relative;flex:none;padding:0;animation:breathe 5.2s ease-in-out infinite}
.stage-port.nod{animation:nod .7s var(--spring)}
.stage-port::before{content:"";position:absolute;inset:-22px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,206,61,.6) 0%,rgba(255,206,61,.2) 42%,transparent 70%);
  animation:glow 3.4s ease-in-out infinite}
.stage-port .mface{position:relative;z-index:1}
.stage-port:active .mface{transform:scale(.96)}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes glow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
@keyframes nod{0%{transform:scale(1)}40%{transform:scale(1.08) rotate(-2deg)}100%{transform:scale(1)}}
.stage-txt{flex:1;min-width:0}
.stage-week{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.stage-name{margin:1px 0 6px;font-size:19px;line-height:1.15}
.stage-line{margin:0;font-family:var(--display);font-weight:500;font-size:17px;line-height:1.35;color:var(--ink);
  font-variation-settings:"SOFT" 40,"WONK" 0}
.stage-line span{display:inline-block}
.stage-line.say span{animation:wordin .42s var(--spring) both;animation-delay:calc(var(--i) * 85ms)}
@keyframes wordin{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}}
.stage-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;flex-wrap:wrap}
.stage-foot small{font-size:11.5px;color:var(--ink-faint);line-height:1.35;flex:1;min-width:120px}
.stage-acts{display:flex;align-items:center;gap:6px;flex:none}
.stage-acts .spk{width:30px;height:30px}
.stage-acts .spk svg{width:15px;height:15px}
.stage-who{font-size:12px;font-weight:700;color:var(--gold-deep);padding:6px 11px;border-radius:999px;background:var(--gold-pale);white-space:nowrap}

/* who they were — the sheet */
.who-head{display:flex;gap:14px;align-items:center;margin-bottom:14px;padding-right:30px}
.who-head h2{margin:2px 0 0;padding-right:0}
.who-aur{flex:none;filter:drop-shadow(0 6px 16px rgba(46,36,14,.2))}
.who-dates{display:block;color:var(--ink-faint);font-size:12.5px;margin-top:2px}
.who-story{font-size:15.5px;line-height:1.6;color:var(--ink);margin:0 0 12px}
.who-more{margin:0 0 18px}
.who-more summary{cursor:pointer;font-weight:600;color:var(--gold-deep);font-size:13.5px;list-style:none}
.who-more summary::before{content:"+ ";font-weight:700}
.who-more[open] summary::before{content:"− "}
.who-more p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:8px 0 0}
.who-h{font-size:16px;margin:0 0 8px}
.who-lines{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.who-line{display:block;width:100%;text-align:left;background:var(--paper-2);border-radius:var(--r-sm);padding:11px 13px;transition:transform .25s var(--spring)}
.who-line:active{transform:scale(.985)}
.who-line q{quotes:"\201C" "\201D";display:block;font-family:var(--display);font-weight:500;font-size:15px;line-height:1.4;color:var(--ink)}
.who-line small{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-faint)}
.who-line.still{margin-top:4px}
.who-credit{font-size:11.5px;color:var(--ink-faint);line-height:1.45;margin:0}

/* the Done moment with a mentor in it */
.burst-card .mface.burst{margin:0 auto}
.burst-q{display:block;font-family:var(--display);font-style:italic;font-size:16.5px;line-height:1.4;color:var(--ink);
  margin-top:12px;quotes:"\201C" "\201D"}
.burst-q::before{content:open-quote}.burst-q::after{content:close-quote}
.burst-by{display:block;font-style:normal;font-size:12px;color:var(--gold-deep);font-weight:700;margin-top:5px;letter-spacing:.04em}