/* The facet cards and "how your facets connect" on the home page (assets/home-dash.js) */
.wrap.pr.cr{width:min(72rem,calc(100% - 2rem));max-width:none}
.cr-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:center;gap:1.5rem;margin:.6rem 0 1rem}
#crCanvas{width:100%;max-width:440px;aspect-ratio:1/1;display:block;margin:0 auto}
.cr-stats{padding:1.2rem 1.25rem;border-radius:20px;background:rgba(12,18,32,.72);border:1px solid rgba(248,250,252,.08)}
.cr-stats .st-k{margin:0 0 .2rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a9b6c8}
.cr-big{margin:0 0 .6rem;font:400 2.6rem/1 "Instrument Serif",Georgia,serif;color:var(--frost)}
.cr-stats .pr-sum-n{margin:.5rem 0 0}
.cr-next{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(248,250,252,.08)}
.cr-next .btn{margin:.2rem 0 .4rem}
.cr-ins ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cr-ins li{padding:.75rem 1rem;border-radius:14px;background:rgba(103,232,249,.06);border:1px solid rgba(103,232,249,.22);color:#e2e8f0;line-height:1.5}
.cr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:12px}
.cr-card{display:flex;flex-direction:column;padding:1rem 1.1rem 1.05rem;border-radius:18px;background:rgba(12,18,32,.72);border:1px solid rgba(248,250,252,.08)}
.cr-card.s-done{border-color:rgba(103,232,249,.3)}
.cr-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.cr-card h3{margin:0;font:400 1.45rem/1.15 "Instrument Serif",Georgia,serif;color:var(--frost)}
.cr-card-top a:hover h3{color:var(--cyan)}
.cr-pill{flex:0 0 auto;font-size:.78rem;font-weight:700;color:#a9b6c8}
.s-done .cr-pill{color:var(--cyan)}.s-started .cr-pill{color:#c4b5fd}
.cr-part{margin:.1rem 0 .6rem;font-size:.88rem;color:#a9b6c8}
.cr-head{margin:0 0 .4rem;font-weight:600;font-size:1.05rem;color:var(--frost);line-height:1.35}
.cr-empty{margin:0 0 .4rem;color:#a9b6c8}
.cr-lines{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.25rem;font-size:.93rem;color:#cbd5e1;line-height:1.45}
.cr-lines b{color:var(--frost);font-weight:600}
.cr-foot{margin-top:auto;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem}
.cr-foot .btn{min-height:38px;padding:.4rem 1rem}
@media(max-width:760px){.cr-top{grid-template-columns:1fr}#crCanvas{max-width:320px}}
.cr-tl{color:var(--cyan);font-weight:600}

/* the home page: Your facets under the hero, for people who've started */
.home-dash{padding:2.5rem 0 3rem;border-top:1px solid rgba(248,250,252,.07);scroll-margin-top:calc(var(--bar-h) + 1rem)}
.home-dash[hidden]{display:none}
.hd-top{display:grid;gap:.6rem;margin-bottom:1.2rem}
.hd-top h2{margin:0;font:400 2rem/1.1 "Instrument Serif",Georgia,serif;color:var(--frost)}
.hd-top .pr-sum-n{margin:.2rem 0 0;color:#cbd5e1}
.hd-links{display:flex;flex-wrap:wrap;gap:1.2rem;margin:0}.hd-links a{color:var(--cyan);font-weight:600}
.home-dash .cr-ins{margin-bottom:1.4rem}
.home-facets.started .hf{display:none}
#facets{scroll-margin-top:calc(var(--bar-h) + 1.5rem)}

/* Your dashboard: the facets, then Your life */
.hd-h{margin:1.8rem 0 .8rem;font:400 1.6rem/1.15 "Instrument Serif",Georgia,serif;color:var(--frost);scroll-margin-top:calc(var(--bar-h) + 1rem)}
.home-dash .hd-top+.hd-h,.home-dash .cr-ins+.hd-h{margin-top:.6rem}
.home-dash h2{scroll-margin-top:calc(var(--bar-h) + 1rem)}
.cr-card.s-soon{border-style:dashed;background:rgba(12,18,32,.45)}
.cr-card.s-soon .cr-pill{color:#c4b5fd;border-color:rgba(196,181,253,.35)}
/* the home page's mood check-in (assets/home-mood.js): the first step for new visitors, a daily tap for everyone */
.hero-mood{grid-column:1/-1;display:grid;gap:.55rem}
.hm-q{margin:0;font-weight:600;color:var(--frost);font-size:1.02rem}
.hm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hm-grid button{display:flex;align-items:center;gap:.45rem;min-height:44px;padding:.45rem .7rem;border-radius:12px;border:1px solid rgba(248,250,252,.12);background:rgba(17,26,46,.65);color:#e2e8f0;font:600 .92rem Inter,sans-serif;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.hm-grid button i{flex:none;width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.hm-grid button:hover,.hm-grid button:focus-visible{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,rgba(17,26,46,.8));outline:none;transform:translateY(-1px)}
.hm-grid button[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,rgba(17,26,46,.8))}
.hm-hint{margin:0;font-size:.9rem;color:#a9b6c8}
.hm-done{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:0;padding:.65rem .9rem;border-radius:14px;background:rgba(17,26,46,.6);border:1px solid rgba(248,250,252,.1);color:#e2e8f0}
.hm-done i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.hm-done span{margin-right:auto}.hm-done b{color:var(--frost)}
.hm-saved{margin:0;color:var(--cyan);font-size:.92rem;line-height:1.5}
/* the facets, folded under the first step */
.hf-more{grid-column:1/-1}
.hf-more>summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;padding:.35rem 0;color:#cbd5e1;font-weight:600;font-size:.95rem}
.hf-more>summary::-webkit-details-marker{display:none}
.hf-more>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.hf-more[open]>summary::after{transform:rotate(-135deg) translate(-2px,0)}
.hf-more>summary:hover{color:var(--cyan)}
.hf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:.4rem}
.home-facets.started .hf-more{display:none}
/* What you'll get: examples for people who haven't started */
.home-example{padding:2.5rem 0 3rem;border-top:1px solid rgba(248,250,252,.07)}
.home-started .home-example{display:none}
.home-example h2{margin:0 0 .3rem;font:400 2rem/1.1 "Instrument Serif",Georgia,serif;color:var(--frost)}
.ex-lede{margin:0 0 1.2rem;color:#cbd5e1;line-height:1.55}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:12px}
.ex-card{position:relative;padding:1rem 1.1rem 1.1rem;border-radius:18px;background:rgba(12,18,32,.72);border:1px solid rgba(248,250,252,.08)}
.ex-card h3{margin:0 0 .7rem;padding-right:4.5rem;font:400 1.4rem/1.15 "Instrument Serif",Georgia,serif;color:var(--frost)}
.ex-card>p:last-child{margin:.7rem 0 0;color:#cbd5e1;line-height:1.5;font-size:.95rem}
.ex-tag{position:absolute;top:.9rem;right:1rem;padding:.12rem .55rem;border-radius:999px;border:1px solid rgba(196,181,253,.35);color:#c4b5fd;font-size:.75rem;font-weight:700;letter-spacing:.04em}
.ex-traits{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.ex-traits li{display:grid;grid-template-columns:8.5rem 1fr 2.6rem;align-items:center;gap:.6rem;font-size:.9rem;color:#cbd5e1}
.ex-traits i{position:relative;height:6px;border-radius:3px;background:rgba(248,250,252,.1)}
.ex-traits i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:3px;background:linear-gradient(90deg,rgba(103,232,249,.4),var(--cyan))}
.ex-traits b{color:var(--frost);text-align:right}
.ex-days{display:flex;gap:8px;margin:.2rem 0 0}
.ex-days i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 60%,transparent)}
.ex-pair{display:flex;justify-content:space-between;align-items:baseline;margin:0}.ex-pair b{color:var(--frost)}.ex-pair span{color:var(--cyan);font-weight:700}
.ex-track{position:relative;height:6px;margin:.8rem 0 0;border-radius:3px;background:rgba(248,250,252,.1)}
.ex-track i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%}
.ex-you{background:#dceeff;box-shadow:0 0 10px #dceeff}.ex-them{background:#f9a8d4;box-shadow:0 0 10px #f9a8d4}
.ex-go{margin:1.4rem 0 0;text-align:center}
/* coming back: a smaller hero, so the dashboard shows without scrolling */
.home-started .home-hero{min-height:0;padding-bottom:1.2rem}
.home-started .home-hero .hero-stage{width:min(100%,340px,42svh)}
@media(max-width:999px){.home-started .home-hero{grid-template-rows:auto auto auto auto auto auto auto}.home-started .home-hero .hero-stage{width:min(62vw,250px,32svh);margin-bottom:.8rem}}
.home-started .home-dash{padding-top:1.5rem}
/* From your connections */
.hd-news{margin:0 0 1.2rem;padding:.85rem 1rem;border-radius:16px;background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.28)}
.hd-news[hidden]{display:none}
.hd-news-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.hd-news h3{margin:0 0 .5rem;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c4b5fd}
.hd-news ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.hd-news li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;color:#e2e8f0;line-height:1.45}
.hd-news li b{color:var(--frost)}.hd-news li a{color:var(--cyan);font-weight:600;white-space:nowrap}
@media(max-width:560px){.hm-grid button{font-size:.88rem;padding:.4rem .55rem}.hf-grid{gap:8px}.ex-traits li{grid-template-columns:7.2rem 1fr 2.4rem}}
/* ===== coming back: the crystal is the dashboard (assets/home-dash.js) =====
   One centered column: greeting, one line (how filled in, the next step), the crystal with your facets around it,
   today's mood and news, then the dock. */
.home-started .home-hero{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;min-height:0;padding:clamp(.6rem,2vh,1.4rem) 0 2rem}
.home-started .hero-eyebrow,.home-started .home-hero .home-lede,.home-started .home-timeline{display:none}
.home-started .home-hero h1{order:1;font-size:clamp(1.8rem,3.2vw,2.4rem);margin:0 0 .2rem}
.home-started .hd-sub{order:2;margin:0 0 .4rem;color:#cbd5e1;font-size:.98rem}
.home-started .hd-sub b{color:var(--frost)}.home-started .hd-sub a{color:var(--cyan);font-weight:600}
.home-started .home-hero .hero-stage{order:3;width:min(400px,46svh,78vw);margin:.2rem 0 .4rem}
.home-started .home-hero .part-panel{order:3}
/* the facets: around the crystal on wide screens, a grid below it otherwise */

/* today's mood, compact */
.home-started .hero-mood{gap:.4rem}
.home-started .hm-q{font-size:.92rem;color:#cbd5e1;font-weight:600}
.home-started .hm-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.home-started .hm-grid button{min-height:34px;padding:.3rem .65rem;border-radius:999px;font-size:.85rem}
.home-started .hm-grid button i{width:9px;height:9px}
.home-started .hm-hint{display:none}
.home-started .hm-done{justify-content:center;padding:.5rem .8rem;border-radius:999px}
.home-started .hm-done span{margin-right:0}
.home-started .hf-acct{justify-content:center}
/* news, the dock and one insight */
/* the dock: Your life and Your people */

/* the question of the day (assets/home-qotd.js), under today's mood for people who've started */
.hero-qotd{grid-column:1/-1;width:100%}
.hero-qotd:empty{display:none}
.qd{margin-top:.7rem;padding:.75rem .9rem;border-radius:16px;background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.28);text-align:left}
.qd-k{margin:0 0 .3rem;font:700 .7rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#c4b5fd}
.qd-q{display:block;margin:0 0 .55rem;font:400 1.2rem/1.3 "Instrument Serif",Georgia,serif;color:var(--frost)}
.qd-scale{display:flex;flex-wrap:wrap;gap:5px}
.qd-scale button{flex:1 1 auto;min-height:34px;padding:.3rem .6rem;border-radius:999px;border:1px solid rgba(248,250,252,.14);background:rgba(17,26,46,.7);color:#e2e8f0;font:600 .82rem Inter,sans-serif;cursor:pointer}
.qd-scale button:hover,.qd-scale button:focus-visible{border-color:#c4b5fd;outline:none}
.qd-row{display:flex;gap:8px}.qd-row .set-input{flex:1;min-width:0;font:inherit;font-size:.95rem}
.qd-note{margin:.45rem 0 0;font-size:.8rem;color:#a9b6c8}
.qd-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;margin:.5rem 0 0;font-size:.85rem}
.qd-thanks{margin:0;color:#e2e8f0;font-size:.95rem}
.qd-done{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem}.qd-done .qd-k{width:100%}
.qd-list{list-style:none;width:100%;margin:.5rem 0 0;padding:0;display:grid;gap:.5rem;max-height:16rem;overflow:auto}
.qd-list li{padding:.45rem .6rem;border-radius:10px;background:rgba(17,26,46,.7)}
.qd-list span{font-size:.75rem;color:#a9b6c8}.qd-list b{display:block;font-weight:600;font-size:.85rem;color:#cbd5e1}.qd-list p{margin:.15rem 0 0;color:var(--frost);font-size:.92rem}
/* On this day (assets/home-otd.js) */
.otd{margin-top:.6rem;padding:.65rem .9rem;border-radius:16px;background:rgba(242,161,74,.06);border:1px solid rgba(242,161,74,.28);text-align:left}
.otd .qd-k{color:#f2a14a}
.otd-t{margin:0;color:#e2e8f0;font-size:.98rem;line-height:1.5}.otd-t b{color:var(--frost)}
.otd-m{margin:.25rem 0 0;color:#cbd5e1;font-size:.9rem}
/* your crystal over time (assets/crystal-time.js) */
.hd-time{font:inherit;font-weight:600;color:var(--cyan) !important}
.ct-cv{display:block;width:min(100%,300px);aspect-ratio:1/1;margin:0 auto}
.ct-when{text-align:center;margin:.2rem 0 .4rem !important;font:400 1.4rem "Instrument Serif",Georgia,serif !important;color:var(--frost) !important}
.ct-range{width:100%;accent-color:var(--cyan)}
.ct-ends{display:flex;justify-content:space-between;font-size:.8rem;color:#a9b6c8}
.ct-diff{margin:0;padding-left:1.1rem;color:#e2e8f0;line-height:1.55}
/* the share card (assets/share-card.js) */
.sh-cv{display:block;width:min(100%,300px);height:auto;margin:0 auto;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.sh-opts{display:grid;gap:.35rem;margin:.9rem 0 .2rem}
.sh-sw{display:flex;align-items:center;gap:.5rem;color:#e2e8f0;font-size:.95rem}.sh-sw input{width:1.05rem;height:1.05rem;accent-color:var(--cyan)}
.sh-acts{justify-content:center;margin-top:.6rem}
.sh-st{text-align:center;color:var(--cyan) !important;font-size:.9rem !important;margin:.4rem 0 0 !important}.sh-st:empty{display:none}
/* the moment to save (assets/home-dash.js) */
.hd-nudge{margin:0 0 .8rem;padding:.75rem .9rem;border-radius:16px;background:rgba(103,232,249,.07);border:1px solid rgba(103,232,249,.35);text-align:left}
.hd-nudge p{margin:0;color:#e2e8f0;line-height:1.5}.hd-nudge b{color:var(--frost)}
.hd-nudge-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin-top:.6rem !important}


/* the home page for people who've started (assets/home-dash.js): the crystal is the menu. Phones: one centered column.
   Laptops and wider: the crystal big on the left, the greeting, next step and Today slot on the right. */
.home-started .home-hero .cta-row{order:7;width:min(32rem,100%);margin-top:.5rem}
.home-started .home-dash{order:8;width:min(32rem,100%);padding:0;border:0;margin-top:.6rem}
.home-started .home-dash[hidden]{display:none}
.hd-next{order:6;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(32rem,100%);margin:.5rem 0 0;padding:.6rem 1rem;border-radius:14px;border:1px solid rgba(103,232,249,.35);background:rgba(103,232,249,.08);color:var(--frost);text-decoration:none;font-weight:600;font-size:.98rem;transition:border-color .2s,background .2s}
.hd-next i{font-style:normal;color:var(--cyan)}
.hd-next:hover,.hd-next:focus-visible{border-color:var(--cyan);background:rgba(103,232,249,.14);outline:none}
.hd-hint{order:4;margin:0;color:#a9b6c8;font-size:.82rem;font-style:italic;opacity:.75}
.home-hero.diving>.hd-grow,.home-hero.diving>.rd-row,.home-hero.diving>.hd-sub,.home-hero.diving>.hd-next,.home-hero.diving>.hd-hint,.home-hero.diving>.home-dash{display:none}
.home-started .hero-qotd .qd,.home-started .hero-qotd .otd{margin-top:0}
.home-started .hero-mood{padding:.7rem .85rem;border-radius:16px;border:1px solid rgba(248,250,252,.1);background:rgba(12,18,32,.62)}
.home-started .hero-mood:has(.hm-done){padding:0;border:0;background:none}
@media(min-width:1000px){
.home-started .home-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:1fr repeat(8,auto) 1fr;column-gap:clamp(2rem,4vw,4rem);align-items:start;justify-items:start;text-align:left;min-height:calc(100svh - var(--home-chrome,calc(var(--bar-h) + 3rem)));padding:1rem 0}
.home-started .home-hero .hero-stage{grid-column:1;grid-row:1/-1;align-self:center;justify-self:center;width:min(100%,640px,calc(100svh - var(--home-chrome,calc(var(--bar-h) + 3rem)) - 2rem));margin:0}
.home-started .home-hero>:not(.hero-stage){grid-column:2}
.home-started .home-hero h1{grid-row:2;font-size:clamp(2.2rem,3.4vw,3rem)}
.home-started .hd-sub{grid-row:3}
.home-started .hd-hint{grid-row:4;margin-bottom:.4rem}
.rd-home{grid-row:5}
.hd-next{grid-row:6}
.hd-grow{grid-row:7}
.home-started .home-hero .cta-row{grid-row:8;justify-content:flex-start}
.home-started .home-dash{grid-row:9}
.home-started .home-hero .part-panel{grid-row:2/10;align-self:center}
.home-started .home-mood .hm-grid,.home-started .hm-grid{justify-content:flex-start}
.home-started .hm-done{justify-content:flex-start}
}
/* phones turned sideways: a small version of the computer layout (the user, 2026-10-23: "could we do like a micro
   version of desktop mode"), the Soulflake left at the height of the screen, the words and Guided mode beside it, all
   on one screen instead of the words below the fold */
@media (max-width:999px) and (min-width:560px) and (min-aspect-ratio:3/2) and (max-height:560px){
.home-started .home-hero{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr repeat(8,auto) 1fr;column-gap:clamp(1.25rem,4vw,2.5rem);align-items:start;justify-items:start;text-align:left;min-height:calc(100svh - var(--home-chrome,calc(var(--bar-h) + 3rem)));padding:.4rem 0}
.home-started .home-hero .hero-stage{grid-column:1;grid-row:1/-1;align-self:center;justify-self:center;width:min(44vw,calc(100svh - var(--home-chrome,calc(var(--bar-h) + 3rem)) - .8rem));margin:0}
.home-started .home-hero>:not(.hero-stage){grid-column:2}
.home-started .home-hero h1{grid-row:2;font-size:clamp(1.45rem,3.4vw,2rem);margin:0 0 .3rem;text-align:left}
.home-started .hd-sub{grid-row:3}.home-started .hd-hint{grid-row:4;margin-bottom:.3rem}
.home-started .home-hero>.jr-cta,.home-started .home-hero>.hd-step{grid-row:5;justify-self:start;align-items:flex-start;justify-content:flex-start}
.home-started .home-hero>.jr-cta>span{text-align:left;padding:0}.home-started .jr-lead{text-align:left;padding:0}
.home-started .home-hero .cta-row{grid-row:8;justify-content:flex-start}.home-started .home-dash{grid-row:9}
.home-started .home-hero .part-panel{grid-row:2/10;align-self:center}
.home-started .hm-grid,.home-started .hm-done{justify-content:flex-start}
}
.part-tip{position:fixed;z-index:30;pointer-events:none;padding:.3rem .65rem;border-radius:10px;background:rgba(9,14,26,.92);border:1px solid rgba(103,232,249,.35);color:var(--frost);font:600 .85rem Inter,system-ui,sans-serif;white-space:nowrap;opacity:0;transition:opacity .15s}
.part-tip.on{opacity:1}
.home-started #heroMood[hidden],.home-started .hero-qotd[hidden]{display:none !important}
.home-started .hf-acct{display:none}

/* Share (assets/share-card.js) */
.sh-sec{padding:.2rem 0 1rem}.sh-sec+.sh-sec{border-top:1px solid rgba(248,250,252,.08);padding-top:1rem}
.sh-sec h3{margin:0 0 .35rem;font:400 1.45rem/1.15 "Instrument Serif",Georgia,serif;color:var(--frost)}
.sh-sec>p{margin:0 0 .5rem;color:#e2e8f0;line-height:1.5}
.sh-fine{font-size:.85rem !important;color:#a9b6c8 !important;text-align:center}
.sh-ask{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sh-ask li{display:flex;align-items:center;gap:.8rem;padding:.6rem .75rem;border-radius:12px;background:rgba(17,26,46,.65)}
.sh-ask li>div{flex:1;display:grid;gap:.15rem}.sh-ask b{color:var(--frost)}.sh-ask span{font-size:.88rem;color:#a9b6c8;line-height:1.4}
.sh-size{display:flex;justify-content:center;gap:4px;margin:0 0 .6rem}
.sh-size button{padding:.3rem .9rem;border-radius:999px;border:1px solid rgba(248,250,252,.14);background:none;color:#cbd5e1;font:600 .85rem Inter,sans-serif;cursor:pointer}
.sh-size button[aria-pressed="true"]{background:var(--frost);color:#070B14;border-color:var(--frost)}
.sh-sw{justify-content:center}
.sh-sec h3{text-transform:none;letter-spacing:0}

/* Grow my Soulflake (assets/grow.js): the button, and the round in its window */
.hd-grow{order:6;display:block;width:min(32rem,100%);margin:.45rem 0 0;padding:.5rem 1rem;border-radius:14px;border:1px dashed rgba(167,139,250,.45);background:rgba(167,139,250,.06);color:var(--frost);font:600 .92rem Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
.hd-grow span:not(.brand-grad){font-weight:500;color:#a9b6c8}
.hd-grow:hover,.hd-grow:focus-visible{border-color:#c4b5fd;background:rgba(167,139,250,.12);outline:none}
.in-grow{width:100%;margin:.3rem 0 .5rem}
.gr-dlg .pr-dlg-b{display:grid;gap:.6rem}
.gr-status{margin:0;color:#a9b6c8;font-size:.9rem}.gr-status b{color:var(--cyan)}
.gr-k{margin:0;font:700 .72rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#c4b5fd}
.gr-prompt{margin:0;color:var(--cyan);font-size:.92rem;font-weight:600}
.gr-q{margin:.1rem 0 .4rem;font:400 clamp(1.5rem,5vw,2rem)/1.15 "Instrument Serif",Georgia,serif;color:var(--frost)}
.gr-opts{display:grid;gap:6px}
.gr-credit{margin:0;font-size:.75rem;color:#a9b6c8}
.gr-end{margin:.4rem 0;color:#e2e8f0;line-height:1.6}
.gr-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.4rem}.gr-foot>span{display:flex;align-items:center;gap:1rem}
.gr-count{color:#a9b6c8;font-size:.85rem}
.gr-dlg .pr-dlg-b p.gr-q{font:400 clamp(1.6rem,5vw,2.1rem)/1.15 "Instrument Serif",Georgia,serif;color:var(--frost);margin:.1rem 0 .5rem}
.gr-dlg .pr-dlg-b p.gr-k{font:700 .72rem Inter,sans-serif;letter-spacing:.12em}

/* My Soulflake's key pages on the home page (assets/readings-row.js): a subheader of chips at the top, on every
   screen size, the same as the reading pages */
/* the facet row on the home page: as wide as the window allows, not the home column, so it stays one row */
.rd-side{margin:.7rem 0 .2rem;position:relative;left:50%;transform:translateX(-50%);width:min(60rem,calc(100vw - 2rem));max-width:none}
.rd-side-h{display:none}

/* a calmer home page: no Today slot once you've started; Quick questions is the one way in to more */
.home-started .home-hero .cta-row.home-facets{display:none}
.hd-next b{color:var(--cyan)}
.gr-opts.gr-mood{grid-template-columns:repeat(3,minmax(0,1fr))}

/* whispers beside the home Soulflake (assets/home-whispers.js): text with no background, a hairline to the part */
.wh{position:absolute;inset:0;z-index:3;pointer-events:none}
.wh svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity 1.2s ease}
.wh line{stroke:rgba(196,181,253,.55);stroke-width:1;stroke-dasharray:3 3}
.wh circle{fill:var(--cyan);filter:drop-shadow(0 0 4px rgba(103,232,249,.9))}
.wh-t{position:absolute;max-width:40%;margin:0;padding:2px;font:italic 400 clamp(.85rem,1.5vw,1.08rem)/1.35 "Instrument Serif",Georgia,serif;color:#eef3f9;text-shadow:0 1px 10px rgba(7,11,20,.95),0 0 2px rgba(7,11,20,.9);opacity:0;transition:opacity 1.2s ease}
.wh-t.gem{max-width:46%;color:#e9e4ff}.wh-t.gem i{font-style:normal;color:#c4b5fd;margin-right:.15rem}
/* quieter than the page's own text: a little see-through */
/* quieter still (the user, 2026-10-13: distracting): greyer and more see-through, still readable */
.wh.on svg{opacity:.45}.wh.on .wh-t{opacity:.55}.wh-t{color:#a9b6c8}.wh-t.gem{color:#b8b2d6}
.home-hero.diving .wh{display:none}

/* the home page's one card: next facet, and Quick questions as a quiet link inside it (assets/home-dash.js) */
.hd-next.hd-one{display:block;padding:0}
.hd-one .hd-go{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1rem;color:inherit;text-decoration:none}
.hd-one .hd-go i{font-style:normal;color:var(--cyan)}
.hd-qq{margin:-.15rem 0 0;padding:0 1rem .6rem;font-size:.88rem;font-weight:500;line-height:1.45;color:#a9b6c8}
.hd-qq button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:#c4b5fd;text-decoration:underline;text-decoration-color:rgba(196,181,253,.45);text-underline-offset:3px;cursor:pointer}
.hd-qq button:hover,.hd-qq button:focus-visible{color:var(--frost);outline:none}
.hd-next.hd-bare{border-color:transparent;background:none}.hd-bare .hd-qq{padding:.2rem 0 0;margin:0}
/* the quiet line under the home page's facet row (assets/readings-row.js) */
.rd-cap{position:relative;left:50%;transform:translateX(-50%);width:min(60rem,calc(100vw - 2rem));margin:.4rem 0 .5rem;padding-left:.2rem;text-align:left;font-size:.78rem;font-style:italic;line-height:1.4;color:#cbd5e1;opacity:.55}
.home-hero.diving~.rd-cap,body.testing .rd-cap{display:none}

/* the hover card: what a tap shows, in smaller type (assets/home.js tipHTML) */
.part-tip.rich{width:min(300px,calc(100vw - 24px));white-space:normal;padding:.65rem .8rem .7rem;border-radius:14px;font:400 .8rem/1.45 Inter,system-ui,sans-serif;color:#cbd5e1;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.part-tip.rich .part-kicker{font-size:10px;margin-bottom:1px}
.part-tip.rich h4{margin:0 0 .25rem;font:400 1.25rem/1.15 "Instrument Serif",Georgia,serif;color:var(--frost)}
.part-tip.rich p{margin:0 0 .35rem}
/* pointing shows a compact card: name and one line (assets/home.js tipHTML); a click opens the whole card */
.part-tip.rich:not(.tap){width:auto;max-width:min(260px,calc(100vw - 24px));padding:.5rem .7rem .45rem}
.part-tip.rich:not(.tap) h4{font-size:1.1rem;margin-bottom:.2rem}
.part-tip.rich:not(.tap) .part-branch,.part-tip.rich .part-one{margin:0;font-size:.8rem}
/* the branch under the pointer: its test and result, set apart from the arm's general lines */
.part-tip.rich .part-branch{margin:0 0 .45rem;padding:.35rem .5rem;border-radius:8px;background:rgba(125,211,252,.08);border-left:2px solid rgba(125,211,252,.55);color:#e2e8f0}
.part-tip.rich ul{margin:0 0 .3rem;padding-left:1em;color:#c5d0de}.part-tip.rich li{margin:1px 0}.part-tip.rich b{color:var(--frost)}
.part-tip.rich .part-tip-go{margin:.35rem 0 0;padding-top:.35rem;border-top:1px solid rgba(248,250,252,.08);color:var(--cyan);font-size:.75rem;font-weight:600}

/* on a touch screen the card stays where you tapped and its link can be tapped */
.part-tip.rich.tap{pointer-events:auto}
.part-tip.rich a.part-tip-go{display:block;text-decoration:none}

/* what the next facet gives back, under its name on the home card */
.hd-one .hd-go small.hd-pay{display:block;margin-top:.2rem;font-weight:500;font-size:.86rem;line-height:1.4;color:#cbd5e1}

/* home, before a reading: the Personality reading is the first step (assets/home-mood.js) */
.hm-start{padding:1rem 1.1rem;border-radius:16px;background:linear-gradient(160deg,rgba(103,232,249,.1),rgba(12,18,32,.75) 55%);border:1px solid rgba(103,232,249,.35);text-align:left}
.hm-k{margin:0 0 .2rem;font:700 .74rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.hm-t{margin:0;color:var(--frost);font:400 1.55rem/1.2 "Instrument Serif",Georgia,serif}.hm-t span{margin-left:.4rem;font:600 .82rem Inter,sans-serif;color:#a9b6c8;white-space:nowrap}
.hm-why{margin:.4rem 0 .8rem;color:#cbd5e1;font-size:.93rem;line-height:1.5}
.hm-start .hm-go{display:inline-flex;background:linear-gradient(120deg,var(--cyan),var(--violet));color:#070B14;border-color:transparent}
.hm-alt{margin:.7rem 0 0;color:#a9b6c8;font-size:.86rem}.hm-alt b{color:var(--frost)}
.hm-saved a{color:var(--cyan)}

/* whispers on phones: a short centered line above or below the Soulflake, never over it; just a faint dot on the part */
.wh-t.band{font-size:.82rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wh circle{r:2.5;opacity:.7}
/* the status line sits right under the facet buttons, as their footnote */
.rd-cap{margin-top:-.35rem;margin-bottom:.6rem}
.hd-hint{transition:opacity .9s ease}.hd-hint.wh-cap-off{opacity:0}
.wh-t.band{-webkit-line-clamp:3}
.wh:not(.on) svg{transition-duration:.5s}
/* the "Hover over or tap…" hint is gone (the user, 2026-10-13). The element stays, hidden, because the tester missions
   row (assets/tester.js) uses it as its place marker; phone whispers fall back to just under the Soulflake. */
.hd-hint{display:none!important}
/* stacked home (under 1000px, phones too): the Soulflake first, the greeting and its line underneath it (the user,
   2026-10-14) */
@media(max-width:999px){
.home-started .home-hero .hero-stage{order:0;margin:.4rem 0 .6rem}
.home-started .home-hero .part-panel{order:0}
.home-started .home-hero h1{order:1}
.home-started .hd-sub{order:2}
}
/* stacked home: the greeting sits lower, with real breathing room under the Soulflake (the user, 2026-10-14) */
@media(max-width:999px){.home-started .home-hero h1{margin-top:clamp(1.6rem,7vh,4.5rem)}}
/* stacked home: the Soulflake and greeting centered in the space under the facet rail (the user, 2026-10-14);
   --home-chrome is everything that isn't the hero, measured by assets/home-dash.js */
@media(max-width:999px){.home-started .home-hero{min-height:calc(100svh - var(--home-chrome,calc(var(--bar-h,56px) + 4rem)));justify-content:center;padding-bottom:clamp(1rem,4vh,3rem)}}
/* the one next step under the greeting (assets/home-dash.js) */
.hd-step{order:3;display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center;margin:.7rem 0 0;padding:.55rem 1rem;border-radius:999px;border:1px solid rgba(103,232,249,.35);background:rgba(103,232,249,.07);color:var(--frost);text-decoration:none;font-size:.95rem}
.hd-step b{font-weight:600}.hd-step span{color:var(--cyan);font-weight:600}
.hd-step:hover{border-color:var(--cyan);background:rgba(103,232,249,.12)}
@media(min-width:1000px){.home-started .home-hero>.hd-step{grid-row:4;justify-self:start}}
/* phones: a bigger Soulflake, easier to tap its parts (the user, 2026-10-15). Its square has a clear border around the
   drawing (room for the glow and threads), so that border overlaps the space above and below instead of pushing
   the page longer; the home page's fit-to-one-screen (assets/home-dash.js fit) still has the last word */
@media(max-width:999px){
  /* the trim is a share of the Soulflake's own size, not the window's: in a half-screen window on a computer the
     Soulflake stops at 430px while the window keeps growing, and a vw trim cut far too much, so the Soulflake and
     greeting sat high with a big gap under them (the user, 2026-10-18) */
  .home-started .home-hero .hero-stage{--hs:min(100vw,430px,62svh);width:var(--hs);margin:calc(var(--hs) * -.09) 0 calc(var(--hs) * -.11)}
  .rd-wrap,.home-started .home-hero>:not(.hero-stage){position:relative;z-index:2}
}
/* phones: a whisper borrows the greeting's second line while it shows, so it never lands on other text */
.home-hero .hd-sub{transition:opacity .9s ease}.home-hero .hd-sub.wh-cap-off{opacity:0}
@media(max-width:999px){.wh-t.band{-webkit-line-clamp:2}}
/* phones: the thought's line is one fixed slot shared with the whispers (two lines tall), so switching between them
   never moves the button or the next line */
@media(max-width:999px){
  .home-started .home-hero .hd-sub{min-height:2.9em}
  .wh-t.band{transition:opacity .9s ease}
}
/* the thought's line is the home page's one fading slot, on every screen: a whisper there reads as clearly as the thought */
.home-started .home-hero .hd-sub{min-height:2.9em}
.wh.on .wh-t.band{opacity:1}
.wh-t.band{text-shadow:none;font-style:normal}
.wh-t.band.gem i{color:#c4b5fd}
/* the one slot: fade out, swap, fade in, hold (assets/home-whispers.js rotate) */
.home-started .home-hero .hd-sub{transition:opacity 1.3s ease-in-out}
.home-started .home-hero .hd-sub.sl-out{opacity:0}
@media(prefers-reduced-motion:reduce){.home-started .home-hero .hd-sub{transition:none}}

/* each thought's type, as a small line icon in front of it (assets/home-lines.js icon) */
.th-ic{display:inline-block;width:1.05em;height:1.05em;margin-right:.42em;vertical-align:-.17em;color:var(--cyan);opacity:.9}
.th-ic svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.th-ic.th-ask,.th-ic.th-try,.th-ic.th-play,.th-ic.th-now{color:#c4b5fd}
.th-ic.th-science,.th-ic.th-tests,.th-ic.th-read,.th-ic.th-first,.th-ic.th-next{color:#a5f3fc}