/* shared site header + menu, used by every page (Style Lab loads only this, not site.css) */
.bar{font-family:Inter,system-ui,sans-serif;line-height:normal}.bar a{color:inherit;text-decoration:none}.bar button{font-family:inherit;cursor:pointer}
.bar{position:sticky;top:0;z-index:20;background:rgba(7,11,20,.48);backdrop-filter:blur(14px);border-bottom:1px solid rgba(248,250,252,.035)}.wrap{position:relative;z-index:2;width:min(40rem,calc(100% - 2rem));margin:0 auto}.top{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0}.wordmark{font-weight:700;font-size:1.05rem;letter-spacing:-.015em;border:0;padding:0;background:none}.wordmark,.bar .wordmark{color:#F8FAFC}.wordmark .flake{background:linear-gradient(100deg,#67E8F9,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent}.home-wordmark{display:inline-block;font-size:clamp(1.1rem,.85rem + .9vw,1.3rem);font-weight:600;letter-spacing:-.02em;line-height:1}.tools{display:flex;align-items:center}.icon-btn{width:40px;height:40px;border:0;background:transparent;color:var(--frost);font-size:1.35rem;line-height:1;padding:0}.icon-btn.on{opacity:1}.icon-btn.off{color:var(--graphite);opacity:.5}
.right-cluster{display:flex;align-items:center;gap:4px}
.menu{position:relative}
.menu-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:20px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.menu.open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}.menu.open .menu-btn span:nth-child(2){opacity:0}.menu.open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.site-nav{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;display:flex;flex-direction:column;padding:6px;background:rgba(12,18,32,.97);border:1px solid rgba(248,250,252,.08);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.menu.open .site-nav{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.site-nav a{padding:11px 12px;border-radius:9px;font:600 12.5px Inter,sans-serif;letter-spacing:.04em;color:var(--graphite);text-transform:uppercase}
.site-nav a:hover,.site-nav a:focus-visible{background:rgba(248,250,252,.05);color:var(--cyan);outline:none}.site-nav a.active{color:var(--cyan)}
.tools{position:relative;display:flex;align-items:center}
/* ---- music: a "now playing" pill (play/pause half + name half) ---- */
.sound-pill{display:inline-flex;align-items:center;height:34px;border:1px solid rgba(248,250,252,.14);border-radius:999px;background:rgba(17,26,46,.55);color:var(--frost);transition:border-color .2s ease;margin-right:6px}
.sound-pill:hover,.sound-pill:focus-within{border-color:rgba(103,232,249,.45)}
.sp-play,.sp-open{height:32px;border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;cursor:pointer;padding:0}
/* play/pause, then the station name (opens the list), then the speaker (opens volume) */
.sp-play{width:34px;justify-content:center;border-radius:999px 0 0 999px}
.sp-open{gap:8px;padding:0 12px 0 10px;border-left:1px solid rgba(248,250,252,.1);font:600 12.5px Inter,sans-serif;letter-spacing:.02em}
.sp-open:hover .sp-now{color:#fff}
.sp-vol{position:relative;display:inline-flex;height:32px;border-left:1px solid rgba(248,250,252,.1)}
.sp-volbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;border:0;border-radius:0 999px 999px 0;background:transparent;color:inherit;cursor:pointer}
.sp-volbtn svg{flex:0 0 auto;width:18px;height:18px;fill:currentColor;opacity:.8}
.sp-volbtn:hover svg,.sp-volbtn[aria-expanded="true"] svg{opacity:1}
.sp-volbtn.muted svg path:last-child{display:none}
/* the volume dropdown: opens below the speaker */
.sp-volpop{position:absolute;top:calc(100% + 9px);right:-1px;z-index:31;display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(12,18,32,.98);border:1px solid rgba(248,250,252,.08);border-radius:14px;box-shadow:0 14px 32px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s}
.sp-volpop.open{opacity:1;visibility:visible;transform:none;transition:opacity .15s ease,transform .15s ease}
.sp-volpop output{width:34px;text-align:right;font:600 12px Inter,sans-serif;color:var(--graphite);font-variant-numeric:tabular-nums}
/* slim custom slider: the filled part (--v, set in sound.js) glows cyan */
.sp-vol input{-webkit-appearance:none;appearance:none;width:140px;height:18px;margin:0;background:transparent;cursor:pointer}
.sp-vol input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--cyan) var(--v,75%),rgba(248,250,252,.18) var(--v,75%))}
.sp-vol input::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--cyan) var(--v,75%),rgba(248,250,252,.18) var(--v,75%))}
.sp-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;border:0;background:var(--frost);box-shadow:0 0 0 3px rgba(103,232,249,.18)}
.sp-vol input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;border:0;background:var(--frost);box-shadow:0 0 0 3px rgba(103,232,249,.18)}
.sp-vol input:focus-visible{outline:none}
.sp-vol input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(103,232,249,.55)}
.sp-open::after,.sp-volbtn::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform .2s ease}
.sp-open[aria-expanded="true"]::after,.sp-volbtn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.sp-now{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* on a tight header the station name gives way first (it ends in "..."); the wordmark,
   play button, arrow and speaker keep their size */
.bar .home-wordmark{flex:0 0 auto}.bar .right-cluster,.bar .tools,.sound-pill{min-width:0}
.sp-open{min-width:0;flex:0 1 auto}.sp-now{min-width:0}.sp-play,.sp-vol,.bar .menu{flex:0 0 auto}
/* play triangle / pause bars drawn in CSS so they match exactly on every page */
.sp-play::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;margin-left:2px}
.sp-play.on::before{width:9px;height:10px;border:0;margin:0;background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}
/* the little equalizer: moving while it plays, flat and dim while paused */
.sp-bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.sp-bars i{display:block;width:2.5px;height:30%;border-radius:1px;background:var(--cyan);opacity:.45}
.sound-pill.playing .sp-bars i{opacity:1;animation:spbar .9s ease-in-out infinite}
.sound-pill.playing .sp-bars i:nth-child(2){animation-duration:1.15s;animation-delay:-.4s}
.sound-pill.playing .sp-bars i:nth-child(3){animation-duration:.8s;animation-delay:-.2s}
.sound-pill.playing .sp-bars i:nth-child(4){animation-duration:1.05s;animation-delay:-.6s}
@keyframes spbar{0%,100%{height:25%}50%{height:100%}}
@media(prefers-reduced-motion:reduce){.sound-pill.playing .sp-bars i{animation:none;height:70%}}
/* ---- the player panel (moved to <body> by sound.js; placed under the pill on desktop) ---- */
.sound-panel{position:fixed;z-index:30;width:220px;max-height:calc(100vh - 80px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(248,250,252,.18) transparent;padding:14px;background:rgba(12,18,32,.98);border:1px solid rgba(248,250,252,.08);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.45);color:var(--frost);font-family:Inter,system-ui,sans-serif;line-height:normal;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.sound-panel.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.sound-panel button{font-family:inherit;cursor:pointer}
.sp-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 10px}
.sp-done{display:none;border:1px solid rgba(248,250,252,.14);background:none;color:var(--frost);border-radius:999px;padding:6px 12px;font:600 12px Inter,sans-serif}
.sp-head{margin:0;font:600 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.sp-list{display:flex;flex-direction:column;gap:2px}

/* compact one-line rows: dot, name, tick */
.sp-st{display:grid;grid-template-columns:8px 1fr 14px;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--frost)}
.sp-st:hover,.sp-st:focus-visible{background:rgba(248,250,252,.06);outline:none}
.sp-dot{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.sp-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13.5px Inter,sans-serif}
.sp-st[aria-checked="true"]{border-color:rgba(103,232,249,.45);background:rgba(103,232,249,.07)}
.sp-st[aria-checked="true"] .sp-tick::before{content:"\2713";color:var(--cyan);font:700 13px Inter,sans-serif}
/* phones: the station list still drops down under the pill, just a little narrower */
@media(max-width:640px){
.sp-now{max-width:120px}
.sp-top{align-items:center}
.sound-panel{width:min(220px, calc(100vw - 24px))}
}
/* narrow phones: the header has little room, so the pill tightens up */
@media(max-width:480px){
.right-cluster{margin-left:10px;gap:2px}
.sound-pill{margin-right:0}
.sp-play{width:30px}
.sp-open{gap:6px;padding:0 9px 0 8px;font-size:12px}
.sp-now{max-width:110px}
.sp-volbtn{gap:5px;padding:0 10px 0 8px}
.sp-vol input{width:120px}
}
/* the equalizer bars give way only on the narrowest phones */
@media(max-width:419px){.sp-bars{display:none}}
@media(max-width:340px){
.bar .menu-btn{width:34px}
}
/* the header spans the window, edge to edge with a gutter, while page content keeps the
   narrow centered .wrap column (which is capped at 40rem) */
.bar .wrap{width:auto;margin:0 clamp(1rem,3vw,2rem)}
/* profile icon beside the menu: outline when not signed in, lit with a dot when a flake is saved to an email */
.profile{position:relative;flex:0 0 auto}
.profile-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;color:var(--graphite)}
.profile-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.profile-btn:hover,.profile-btn:focus-visible{color:var(--frost)}
.profile.in .profile-btn{color:var(--frost)}
.profile.in .profile-btn svg circle{fill:currentColor}
.profile-dot{position:absolute;right:5px;bottom:8px;width:8px;height:8px;border-radius:50%;background:#5EEAD4;box-shadow:0 0 0 2px #070B14;display:none}
.profile.in .profile-dot{display:block}
.profile-pop{position:absolute;top:calc(100% + 8px);right:-44px;width:min(250px,calc(100vw - 2rem));padding:12px 14px;background:rgba(12,18,32,.97);border:1px solid rgba(248,250,252,.08);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);font:400 13px/1.5 Inter,sans-serif;color:var(--graphite);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:30}
.profile.open .profile-pop{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.profile-pop p{margin:0 0 6px}
.profile-state{font:600 11.5px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--frost)}
.profile.in .profile-state{color:#5EEAD4}
.profile-email{color:var(--frost);word-break:break-all}
.profile-pop a{display:inline-block;margin-top:4px;color:var(--cyan);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.profile-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px}
.profile-out{border:0;background:none;padding:0;margin-top:4px;font:600 13px Inter,sans-serif;color:var(--graphite);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.profile-out:hover{color:var(--frost)}
.profile-out.go{color:#070B14;background:linear-gradient(120deg,var(--cyan),var(--violet));text-decoration:none;border-radius:999px;padding:5px 12px}
.profile-confirm p{color:var(--ice)}
.profile-pop a.profile-signin{display:inline-flex;margin-top:6px;padding:6px 14px;border-radius:999px;border:1px solid rgba(148,163,184,.3);background:rgba(248,250,252,.06);color:var(--frost);text-decoration:none}.profile-pop a.profile-signin:hover{color:var(--cyan)}.profile-pop a.profile-signin:active{background:linear-gradient(120deg,var(--cyan),var(--violet));color:var(--midnight)}
.profile-sec+.profile-sec{margin-top:10px;padding-top:10px;border-top:1px solid rgba(248,250,252,.08)}
.profile-state.in{color:#5EEAD4}
.profile-pop a.profile-go{display:inline-block;margin-top:2px;color:var(--cyan);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.profile.in .profile-state:not(.in){color:var(--frost)}
/* sign-in window (assets/account.js) */
.acct-dlg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(3,6,12,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.acct-dlg[hidden]{display:none}
.acct-card{width:min(380px,100%);padding:22px 22px 18px;border-radius:18px;background:#0D1424;border:1px solid rgba(148,163,184,.2);box-shadow:0 24px 60px rgba(0,0,0,.5);font:400 14px/1.55 Inter,sans-serif;color:#CBD5E1}
.acct-card h2{margin:0 0 6px;font:400 26px/1.1 "Instrument Serif",serif;color:#F8FAFC}
.acct-card p{margin:0 0 16px}
.acct-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 14px;border-radius:999px;border:1px solid rgba(148,163,184,.3);background:rgba(248,250,252,.06);color:#F8FAFC;font:600 14px Inter,sans-serif;cursor:pointer}
.acct-google svg{width:18px;height:18px;background:#fff;border-radius:50%;padding:2px;box-sizing:content-box}
.acct-google:hover{color:#67E8F9}
.acct-google:active{background:linear-gradient(120deg,#67E8F9,#A78BFA);color:#070B14}
.acct-google:disabled{opacity:.6;cursor:default}
.acct-google:focus-visible,.acct-cancel:focus-visible,.acct-foot a:focus-visible{outline:2px solid #67E8F9;outline-offset:2px}
.acct-msg{min-height:1.2em;margin:10px 0 0!important;font-size:13px;color:#67E8F9}
.acct-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:12.5px}
.acct-foot a{color:#94A3B8;text-decoration:underline;text-underline-offset:3px}
.acct-cancel{border:0;background:none;color:#94A3B8;font:600 13px Inter,sans-serif;cursor:pointer;padding:6px 4px}
.acct-cancel:hover{color:#F8FAFC}
/* the Beta tag beside the wordmark */
.wordmark .beta{display:inline-block;margin-left:6px;vertical-align:3px;padding:1px 5px 0;border:1px solid rgba(167,139,250,.45);border-radius:999px;font:600 8px/1.3 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#C4B5FD;-webkit-text-fill-color:#C4B5FD;background:none}
@media (max-width:420px){.wordmark .beta{margin-left:4px;padding:1px 4px 0;font-size:7px;letter-spacing:.08em;vertical-align:3px}}
/* blizzard page transitions (assets/blizzard.js): the plain cover shown before the storm canvas takes over */
html.bz-in::after{content:"";position:fixed;inset:0;z-index:80;background:#0A1220}
.bz{position:fixed;inset:0;width:100%;height:100%;z-index:80;display:none;cursor:pointer}
.acct-card{max-height:calc(100vh - 32px);overflow:auto}
.acct-hint{margin:6px 0 0!important;font-size:12.5px;color:#94A3B8;text-align:center}
.acct-or{display:flex;align-items:center;gap:10px;margin:16px 0 10px;font-size:12px;color:#94A3B8}
.acct-or::before,.acct-or::after{content:"";flex:1;height:1px;background:rgba(148,163,184,.2)}
.acct-tabs{display:flex;gap:4px;padding:3px;border:1px solid rgba(148,163,184,.25);border-radius:999px;margin-bottom:12px}
.acct-tabs button{flex:1;border:0;background:none;color:#94A3B8;font:600 13px Inter,sans-serif;padding:7px 10px;border-radius:999px;cursor:pointer}
.acct-tabs button[aria-selected="true"]{background:#111A2E;color:#F8FAFC;box-shadow:inset 0 0 0 1px rgba(148,163,184,.3)}
.acct-form{display:grid;gap:6px}
.acct-form label{font-size:12.5px;color:#94A3B8;margin-top:4px}
.acct-form label span{color:#5B6B82}
.acct-form input{background:rgba(248,250,252,.05);border:1px solid rgba(148,163,184,.3);border-radius:12px;color:#F8FAFC;font:inherit;padding:10px 12px}
.acct-form input:focus{outline:2px solid #67E8F9;outline-offset:1px}
.acct-go{margin-top:10px;border:1px solid rgba(148,163,184,.3);background:rgba(248,250,252,.06);color:#F8FAFC;border-radius:999px;padding:10px 14px;font:600 14px Inter,sans-serif;cursor:pointer}
.acct-go:hover{color:#67E8F9}
.acct-go:active{background:linear-gradient(120deg,#67E8F9,#A78BFA);color:#070B14}
.acct-link{justify-self:start;border:0;background:none;padding:4px 0;color:#94A3B8;font:500 12.5px Inter,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.acct-link:hover{color:#F8FAFC}
.acct-msg.err{color:#FCA5A5}
.acct-dlg button:disabled,.acct-dlg input:disabled{opacity:.6;cursor:default}
/* the profile menu's parts sit as small cards inside it */
.profile-pop{padding:8px}
.profile-sec{padding:10px 12px;border-radius:10px;background:rgba(248,250,252,.035);border:1px solid rgba(248,250,252,.06)}
.profile-sec+.profile-sec{margin-top:6px;padding-top:10px;border-top:1px solid rgba(248,250,252,.06)}
/* the Begin chooser */
.acct-choices{display:grid;gap:8px;margin-top:4px}
.acct-choice{display:grid;gap:3px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.22);background:rgba(248,250,252,.03);color:#F8FAFC;cursor:pointer;font:400 13px/1.45 Inter,sans-serif}
.acct-choice b{font-weight:600;font-size:15px}
.acct-choice span{color:#94A3B8}
.acct-choice:hover{border-color:#67E8F9}
.acct-choice:active{background:linear-gradient(120deg,#67E8F9,#A78BFA);color:#070B14}
.acct-choice:active span{color:#0D1424}
.acct-choice.main{border-color:rgba(103,232,249,.55);background:rgba(103,232,249,.07)}
.acct-choice:focus-visible,.acct-back:focus-visible{outline:2px solid #67E8F9;outline-offset:2px}
.acct-back{border:0;background:none;padding:0 0 8px;color:#94A3B8;font:500 13px Inter,sans-serif;cursor:pointer}
.acct-back:hover{color:#F8FAFC}
/* the menu: Your insights hangs under Crystallize, joined by a small elbow line */
.site-nav a.sub{position:relative;padding-left:32px;font-size:11.5px}
.site-nav a.sub::before{content:"";position:absolute;left:18px;top:2px;width:8px;height:calc(50% - 2px);border-left:1px solid rgba(148,163,184,.45);border-bottom:1px solid rgba(148,163,184,.45);border-bottom-left-radius:4px}
.site-nav a.off{opacity:.35;cursor:default}
.site-nav a.off:hover{background:none;color:var(--graphite)}
/* Crystallize glimmers: the one action worth drawing the eye to. A sheen of icy light sweeps across the button
   every few seconds, with a frost rim and a small twinkling spark; in the menu, the word itself shimmers.
   Everything else stays calm. Reduced motion keeps the rim and drops the movement. */
[data-open-test],#insCta{position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(103,232,249,.38),0 0 18px rgba(103,232,249,.12)}
[data-open-test]::after,#insCta::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(220,245,255,.34) 46%,rgba(167,139,250,.2) 54%,transparent 70%);transform:translateX(-130%);animation:czSheen 4.4s ease-in-out infinite}
[data-open-test]::before,#insCta::before{content:"\2726";position:absolute;top:3px;right:9px;font-size:8px;line-height:1;color:#DCEEFF;pointer-events:none;animation:czTwinkle 2.2s ease-in-out infinite}
@keyframes czSheen{0%,52%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}
@keyframes czTwinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.95;transform:scale(1.1)}}
.site-nav a[href="/#test"]{background-image:linear-gradient(100deg,#94A3B8 0%,#94A3B8 38%,#F8FAFC 47%,#67E8F9 52%,#94A3B8 62%,#94A3B8 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:czText 4.4s ease-in-out infinite}
.site-nav a[href="/#test"]:hover,.site-nav a[href="/#test"]:focus-visible{background-color:rgba(248,250,252,.05)}
@keyframes czText{0%,50%{background-position:100% 0}85%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  [data-open-test]::after,#insCta::after,[data-open-test]::before,#insCta::before,.site-nav a[href="/#test"]{animation:none}
  .site-nav a[href="/#test"]{background:none;color:var(--graphite)}
}


/* keeping the music playing: the next page shows in a frame under this page's header (assets/blizzard.js) */
.sf-shell{position:fixed;left:0;width:100%;border:0;z-index:15;background:#070B14}
html.shelled,html.shelled body{overflow:hidden}
html.in-shell .bar{display:none}
.profile-pop a.profile-settings{display:block;margin:8px 2px 0;font:600 13px Inter,sans-serif;color:var(--graphite);text-decoration:underline;text-underline-offset:3px}.profile-pop a.profile-settings:hover{color:var(--frost)}
/* the menu groups the crystal's facets (Mood, Personality, ...) under one heading, each with the part it grows */
.site-nav .nav-group{margin:8px 12px 2px;padding-top:8px;border-top:1px solid rgba(248,250,252,.07);font:700 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(148,163,184,.75)}
.site-nav a.sub small{display:block;margin-top:3px;font:500 12.5px Inter,sans-serif;letter-spacing:0;text-transform:none;color:#a9b6c8}
.site-nav a.sub.active small{color:rgba(103,232,249,.7)}
.site-nav a.sub::before{height:16px}
.site-nav .nav-soon{margin:2px 12px 6px 32px;font:500 12.5px Inter,sans-serif;color:rgba(169,182,200,.7)}
.site-nav{min-width:236px}

/* the menu, condensed: one row per page, grouped under You (your results) and Facets (the tests) */
.site-nav{min-width:220px;padding:6px 6px 8px}
.site-nav a,.site-nav .nav-later{padding:8px 12px}
.site-nav a.sub,.site-nav .sub{padding-left:22px;font-size:12px}
.site-nav a.sub::before{display:none}
.site-nav .nav-group{margin:8px 12px 2px;padding-top:8px}
.site-nav .nav-later{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-radius:9px;font:600 12px Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:rgba(148,163,184,.55);cursor:default}
.site-nav .nav-later i{font-style:normal;font-size:10px;letter-spacing:.08em;color:rgba(167,139,250,.75);border:1px solid rgba(167,139,250,.35);border-radius:999px;padding:1px 7px}
@media(max-height:700px){.site-nav{max-height:calc(100svh - 80px);overflow-y:auto}}
/* music waiting for a tap after a refresh: the play button pulses */
.sound-pill.waiting{border-color:rgba(103,232,249,.55)}
.sound-pill.waiting .sp-play{animation:spWait 1.6s ease-in-out infinite}
@keyframes spWait{0%,100%{box-shadow:inset 0 0 0 0 rgba(103,232,249,0)}50%{box-shadow:inset 0 0 0 2px rgba(103,232,249,.7);background:rgba(103,232,249,.14)}}
@media(prefers-reduced-motion:reduce){.sound-pill.waiting .sp-play{animation:none;background:rgba(103,232,249,.16)}}

/* notifications: the bell beside your photo (assets/notify.js) */
.notif-wrap{position:relative;display:flex;align-items:center}
.notif-btn{position:relative}
.notif-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.notif-n{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#f2a14a;color:#1a1206;font:700 .68rem/17px Inter,sans-serif;font-style:normal;text-align:center}
.notif-n[hidden]{display:none}
.notif-pop{position:absolute;top:calc(100% + 8px);right:-48px;z-index:60;width:min(22rem,calc(100vw - 24px));max-height:min(70vh,30rem);overflow:auto;padding:.4rem;border-radius:16px;background:#0c1426;border:1px solid rgba(248,250,252,.12);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.notif-pop[hidden]{display:none}
.notif-top{display:flex;justify-content:space-between;align-items:baseline;padding:.45rem .6rem .35rem;color:var(--frost)}
.notif-top a{font-size:.85rem;color:#a9b6c8}
.notif-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.notif-list a{display:flex;gap:.65rem;align-items:flex-start;padding:.55rem .6rem;border-radius:12px;color:#e2e8f0;text-decoration:none;line-height:1.4;font-size:.92rem}
.notif-list a:hover{background:rgba(103,232,249,.07)}
.notif-list li.new a{background:rgba(242,161,74,.07)}
.notif-list b{color:var(--frost)}
.notif-list small{display:block;margin-top:.15rem;color:#a9b6c8;font-size:.78rem}
.notif-face{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--h,#c4b5fd) center/cover no-repeat;color:#0b1220;font:700 .8rem Inter,sans-serif;font-style:normal}
.notif-face.dot{background:radial-gradient(circle,#67e8f9 0 28%,rgba(103,232,249,.15) 30%)}
.notif-empty{margin:0;padding:.6rem;color:#cbd5e1;font-size:.92rem;line-height:1.5}
.notif-prefs{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.4rem}
.notif-prefs label{display:flex;align-items:center;gap:.5rem;color:#e2e8f0}.notif-prefs input{width:1.05rem;height:1.05rem;accent-color:var(--cyan)}
@media(max-width:420px){.sound-pill .sp-vol{display:none}}
/* the three tabs, My crystal · My life · Connections (assets/nav.js marks the one you're in): in the header on wider screens, a
   bar along the bottom on phones. While a test question is on screen the bar steps aside so the question fits. */
.tabs{display:flex;align-items:center;gap:2px;margin:0 auto;padding:3px;border-radius:999px;background:rgba(17,26,46,.55);border:1px solid rgba(248,250,252,.07)}
.tabs a{display:flex;align-items:center;gap:.4rem;padding:.32rem .95rem;border-radius:999px;color:#a9b6c8;font-size:.9rem;font-weight:600;line-height:1.2;transition:color .2s,background .2s}
.tabs a:hover,.tabs a:focus-visible{color:var(--frost);outline:none}
.tabs a[aria-current="page"],.tabs a.on{color:#070B14;background:var(--frost)}
.tabs svg{display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.in-shell .tabs,html.in-shell .tabs.tabs-bottom{display:none}
.tabs-bottom{display:none}
/* the tabs move to a bar along the bottom only on narrow screens: with two tabs, the header has room for them down to about 840px
   (a desktop browser in split screen keeps them up top) */
@media(max-width:839px){
.bar .tabs{display:none}
.tabs.tabs-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;margin:0;justify-content:space-around;gap:0;padding:4px 8px calc(4px + env(safe-area-inset-bottom));border-radius:0;border:0;border-top:1px solid rgba(248,250,252,.08);background:rgba(7,11,20,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tabs a{flex:1;flex-direction:column;gap:2px;padding:.3rem 0;border-radius:12px;font-size:.75rem}
.tabs svg{display:block}
.tabs a[aria-current="page"],.tabs a.on{color:var(--cyan);background:none}
body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
body:has(.pr-q) .tabs.tabs-bottom{display:none}body:has(.pr-q){padding-bottom:0}
}

/* the readings row (assets/readings-row.js): the eight readings with a dot for how far you are */
.rd-row{display:flex;flex-wrap:wrap;gap:6px}
.rdc{display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .75rem;border-radius:999px;border:1px solid rgba(248,250,252,.12);background:rgba(12,18,32,.7);color:#cbd5e1;font:600 .86rem Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.rdc i{width:8px;height:8px;border-radius:50%;flex:none;border:1.5px solid var(--cyan);box-sizing:border-box}
.rdc.s-done i{background:var(--cyan);box-shadow:0 0 6px rgba(103,232,249,.7)}
.rdc.s-started i{background:linear-gradient(90deg,var(--cyan) 50%,transparent 50%)}
.rdc.s-none{color:#a9b6c8}.rdc.s-none i{border-color:#64748b}
.rdc:hover,.rdc:focus-visible{border-color:var(--cyan);color:var(--frost);outline:none}
.rdc[aria-current="page"]{background:var(--frost);border-color:var(--frost);color:#070B14}
.rdc[aria-current="page"] i{border-color:#070B14}.rdc.s-done[aria-current="page"] i{background:#070B14;box-shadow:none}.rdc.s-started[aria-current="page"] i{background:linear-gradient(90deg,#070B14 50%,transparent 50%)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rd-home{order:5;justify-content:center;width:min(32rem,100%);margin:.55rem 0 0}
@media(min-width:1000px){.rd-home{justify-content:flex-start}}
.rd-wrap.wrap{position:relative;z-index:3;width:min(72rem,calc(100% - 2rem));padding-top:.7rem}
/* phones: all eight in a compact grid, four to a row, so nothing hides off the edge; wider screens: one centered row */
/* the facet row: one row of square-cornered buttons that share the width evenly and shrink their text to fit (the
   user, 2026-10-13: no bubbles, no second row). Only when even the smallest text can't fit (phones) does it scroll
   sideways, with a fade at the edge so you can tell there's more (assets/readings-row.js adds .rd-more) */
.rd-page{display:flex;flex-wrap:nowrap;gap:5px;max-width:60rem;margin:0 auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rd-page::-webkit-scrollbar{display:none}
.rd-page .rdc{flex:1 1 0;min-width:max-content;justify-content:center;gap:clamp(.25rem,.5vw,.45rem);padding:.52rem clamp(.45rem,1.1vw,1rem);border-radius:8px;font-size:clamp(.78rem,.55rem + .55vw,.95rem)}
.rd-page .rdc i{width:clamp(7px,.7vw,9px);height:clamp(7px,.7vw,9px)}
.rd-page.rd-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}
.rd-page.rd-more.rd-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5rem);mask-image:linear-gradient(90deg,transparent,#000 2.5rem)}
body:has(.pr-q) .rd-wrap{display:none}
.site-nav>.nav-group:first-child{margin-top:4px;padding-top:0;border-top:0}
.set-sw{display:flex;align-items:center;gap:.55rem;margin:.6rem 0 .2rem;color:#e2e8f0}.set-sw input{width:1.1rem;height:1.1rem;accent-color:var(--cyan)}
/* narrow windows: a compact header so the music player can show the station's name. The Beta tag tucks in above
   "flake" instead of sitting beside the wordmark, and the bell, profile and menu buttons slim down. */
@media(max-width:560px){
.bar .wordmark{position:relative;padding-top:7px}
.bar .wordmark .beta{position:absolute;right:-2px;top:-1px;margin:0;padding:0 3px;border-width:1px;font-size:6px;line-height:1.35;letter-spacing:.1em;vertical-align:0}
.bar .notif-btn,.bar .profile-btn,.bar .menu-btn{width:30px;height:36px}
.bar .notif-btn svg{width:19px;height:19px}
.bar .profile-btn svg{width:18px;height:18px}
.bar .menu-btn span{width:17px}
.bar .right-cluster{margin-left:8px;gap:0}
.sp-now{max-width:150px}
}

/* Notifications in the menu, with how many are new (assets/notify.js) */
.site-nav .notif-menu{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.notif-mn{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#f2a14a;color:#1a1206;font:700 .68rem/18px Inter,sans-serif;text-align:center;letter-spacing:0}
.notif-mn[hidden]{display:none}
.menu-btn{position:relative}
.menu-dot{display:none}
/* narrow screens: the bell's list opens full width under the header */
@media(max-width:560px){
.bar .notif-wrap{position:static}
.bar .notif-pop{position:fixed;top:calc(var(--bar-h) + 4px);left:8px;right:8px;width:auto}
.menu-dot{display:block;position:absolute;top:7px;right:3px;width:8px;height:8px;border-radius:50%;background:#f2a14a;box-shadow:0 0 0 2px #070B14}
.menu-dot[hidden]{display:none}
}

/* My Soulflake in the menu: an ordinary row, set apart by the brand's gradient */
.brand-grad{background:linear-gradient(100deg,#67E8F9,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent}

/* a reading's results shown inside Insights (?embed=1, assets/nav.js): just the results */
html.embed .bar,html.embed .tabs,html.embed .rd-wrap,html.embed .site-foot,html.embed #snow,html.embed .rays,html.embed .ground,html.embed .pr-head,html.embed .pr-tabs,html.embed .pr-explore,html.embed .pr-colh,html.embed .ab-head{display:none !important}
html.embed body{padding-bottom:0;background:transparent}
html.embed .pr-dash{display:block}html.embed .pr-results{display:block !important}
html.embed main{padding-top:.4rem;width:100% !important;max-width:none !important}
.tabs.tabs-bottom a span{white-space:nowrap}
@media(max-width:400px){.tabs.tabs-bottom a{font-size:.7rem;letter-spacing:-.01em}}
.bar .tabs a{white-space:nowrap}

/* an achievement unlocking (assets/achievements.js) */
.ach-pop{position:fixed;left:50%;bottom:24px;z-index:90;display:flex;align-items:center;gap:.75rem;min-width:min(20rem,calc(100vw - 32px));max-width:calc(100vw - 32px);padding:.7rem 1rem .7rem .8rem;border-radius:16px;background:rgba(12,20,38,.96);border:1px solid rgba(196,181,253,.45);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 24px rgba(167,139,250,.25);color:var(--frost);text-decoration:none;transform:translate(-50%,140%);opacity:0;transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.ach-pop.on{transform:translate(-50%,0);opacity:1}
.ach-pop small{display:block;font:700 .66rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#c4b5fd}
.ach-pop b{display:block;font:400 1.3rem/1.15 "Instrument Serif",Georgia,serif}
.ach-medal{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-style:normal;font-size:1.1rem;color:#1a1206;background:radial-gradient(circle at 35% 30%,#fde68a,#d97706);box-shadow:0 0 14px rgba(251,191,36,.5)}
.ach-medal.t-s{color:#0f172a;background:radial-gradient(circle at 35% 30%,#f8fafc,#94a3b8);box-shadow:0 0 14px rgba(203,213,225,.45)}
.ach-medal.t-b{color:#1c0f05;background:radial-gradient(circle at 35% 30%,#fdba74,#b45309);box-shadow:0 0 12px rgba(234,88,12,.4)}
@media(max-width:839px){.ach-pop{bottom:calc(74px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.ach-pop{transition:opacity .3s;transform:translate(-50%,0)}}
/* wide screens: the tabs sit at the true center of the header (centering them between the logo and the player
   pulled them left, since the player side is wider), lining up with the page and the chips below */
@media(min-width:1120px){.bar .top{position:relative}.bar .tabs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}}

/* the menu's facet tree: the eight facets branch off My Soulflake, indented with connector lines so it's clear they're
   inside it (the user, 2026-10-13) */
.site-nav .nav-tree{position:relative;margin:0 0 4px 30px;padding-left:12px}
.site-nav .nav-tree::before{content:"";position:absolute;left:0;top:0;bottom:15px;border-left:1px solid rgba(148,163,184,.4)}
.site-nav a.nav-leaf{position:relative;display:block;padding:5px 10px;font:500 12.5px/1.3 Inter,sans-serif;letter-spacing:0;text-transform:none;color:#a9b6c8}
.site-nav a.nav-leaf::before{content:"";position:absolute;left:-12px;top:50%;width:9px;border-top:1px solid rgba(148,163,184,.4)}
.site-nav a.nav-leaf:hover,.site-nav a.nav-leaf:focus-visible{color:var(--cyan)}.site-nav a.nav-leaf.active{color:var(--cyan)}

/* site activity in an admin's notifications (assets/notify.js) */
.notif-site{display:inline-block;margin-right:.3rem;padding:0 .4rem;border-radius:6px;background:rgba(167,139,250,.16);color:#c4b5fd;font:700 .68rem/1.6 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}

/* facets still locked (assets/unlock.js): dimmed with a small lock, still tappable (the page explains) */
.rdc.locked,.site-nav a.nav-leaf.locked,.hf-grid a.hf.locked{opacity:.45}
.rdc.locked i{display:none}.rdc.locked::before,.site-nav a.nav-leaf.locked::after,.hf-grid a.hf.locked b::after{content:"";display:inline-block;width:9px;height:10px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.site-nav a.nav-leaf.locked::after,.hf-grid a.hf.locked b::after{margin-left:.4rem;vertical-align:-1px}
/* a locked facet's page: what opens it */
body.sf-gated main.pr{display:none}
.sf-gate{max-width:36rem;margin:3rem auto 4rem;text-align:center}
.sf-gate-k{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.sf-gate h1{margin:.3rem 0 .8rem;font:400 clamp(2rem,6vw,2.8rem)/1.1 "Instrument Serif",Georgia,serif;color:var(--frost)}
.sf-gate p{color:#cbd5e1;line-height:1.6;margin:0 0 .8rem}.sf-gate .sf-gate-why{color:#a9b6c8;font-size:.95rem}
.sf-gate-go{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:1.4rem}
/* the unlock celebration */
.sf-unlock-pop{position:fixed;left:50%;top:calc(var(--bar-h,54px) + 14px);z-index:60;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.8rem 1.4rem;border-radius:18px;background:linear-gradient(135deg,rgba(17,26,46,.96),rgba(30,27,75,.96));border:1px solid rgba(196,181,253,.55);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 30px rgba(167,139,250,.25);color:var(--frost);text-decoration:none;transform:translate(-50%,-20px);opacity:0;transition:transform .5s ease,opacity .5s ease}
.sf-unlock-pop.on{transform:translate(-50%,0);opacity:1}
.sf-unlock-k{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c4b5fd}
.sf-unlock-pop b{font:400 1.5rem/1.2 "Instrument Serif",Georgia,serif}.sf-unlock-pop small{color:#cbd5e1;font-size:.85rem}

/* the facet row stays put under the header while you scroll (the user, 2026-10-13), with a full-width frosted strip
   behind it so the page scrolls cleanly underneath; --hdr is the header's real height (assets/readings-row.js) */
.rd-wrap.wrap,.home-main>.rd-side{position:sticky;top:var(--hdr,54px);z-index:15;padding-top:.55rem;padding-bottom:.55rem;
  border-image:linear-gradient(rgba(7,11,20,.82),rgba(7,11,20,.82)) fill 0//0 100vmax;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* sticky doesn't take the home row's left:50% trick, so it's centered with margins instead */
.home-main>.rd-side{left:auto;transform:none;margin-left:calc((100% - min(60rem,100vw - 2rem)) / 2);margin-right:0}

/* the account menu: a standard one (assets/nav.js). Who you are, a plain list, Sign out last */
.profile-pop{width:min(280px,calc(100vw - 1.5rem));padding:6px}
.pm-top{display:flex;gap:11px;align-items:flex-start;padding:10px 10px 12px}
.pm-face{flex:none;width:40px;height:40px;border-radius:50%;background:center/cover no-repeat;display:flex;align-items:center;justify-content:center;font:700 16px Inter,sans-serif;font-style:normal;color:#070B14}
.pm-face-none{background:linear-gradient(135deg,var(--cyan),var(--violet))}
.pm-id{display:flex;flex-direction:column;min-width:0;flex:1}
.pm-id b{color:var(--frost);font:600 14.5px/1.3 Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-email{color:#a9b6c8;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-saved{margin-top:3px;color:#5EEAD4;font-size:12px;font-weight:600}
.pm-note{margin-top:2px;color:#cbd5e1;font-size:12.5px;line-height:1.45}
.pm-auth{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.profile-pop a.pm-btn{margin:0;display:inline-flex;padding:6px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.3);background:rgba(248,250,252,.06);color:var(--frost);font:600 12.5px Inter,sans-serif;text-decoration:none}
.profile-pop a.pm-btn.pm-primary{border-color:transparent;background:linear-gradient(120deg,var(--cyan),var(--violet));color:#070B14}
.pm-list{display:flex;flex-direction:column;padding:4px 0;border-top:1px solid rgba(248,250,252,.08)}
.profile-pop .pm-item{display:flex;align-items:center;gap:11px;width:100%;margin:0;padding:8px 10px;border:0;border-radius:8px;background:none;color:#e2e8f0;font:500 13.5px Inter,sans-serif;text-decoration:none;text-align:left;cursor:pointer}
.profile-pop .pm-item:hover,.profile-pop .pm-item:focus-visible{background:rgba(248,250,252,.06);color:var(--frost);outline:none}
.pm-item svg{flex:none;width:17px;height:17px;fill:none;stroke:#a9b6c8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pm-item span{flex:1}.pm-item small{color:#a9b6c8;font-size:12px}
.pm-confirm{padding:8px 10px}.pm-confirm p{margin:0 0 8px;color:var(--ice)}
.pm-face svg{width:22px;height:22px;fill:none;stroke:#070B14;stroke-width:1.8;stroke-linecap:round}
.wordmark .beta{cursor:pointer}.wordmark .beta:hover{color:#E9D5FF;-webkit-text-fill-color:#E9D5FF;border-color:rgba(196,181,253,.9)}
/* the menu, condensed (the user, 2026-10-13): every page link in the same plain font as the facet pages under My
   Soulflake (no capitals, no letter-spacing), with less space between them, so the menu is shorter on phones */
.site-nav a.sub{padding:6px 12px;font:500 13px/1.3 Inter,sans-serif;letter-spacing:0;text-transform:none;color:#cbd5e1}
.site-nav a.sub::before{display:none}
.site-nav a.sub.nav-home,.site-nav a.sub[href="/connections/"]{font-weight:600;color:var(--frost)}
.site-nav a.sub.active{color:var(--cyan)}
.site-nav a.nav-leaf{padding:4px 10px;font-size:13px}
.site-nav .nav-tree{margin:0 0 2px 24px}
.site-nav .nav-group{margin:6px 12px 2px;padding-top:6px;font-size:10.5px}
/* home: the slim missions row (assets/tester.js) */
.tm-row{display:flex;align-items:center;gap:.7rem;max-width:30rem;margin:.6rem auto 0;padding:.55rem .9rem;border-radius:12px;border:1px solid rgba(103,232,249,.3);background:rgba(12,18,32,.7);color:#cbd5e1;font-size:.86rem;text-decoration:none}
.tm-row:hover{border-color:var(--cyan);color:var(--frost)}.tm-k{color:var(--cyan);font-weight:700;white-space:nowrap}.tm-row b{color:var(--frost);white-space:nowrap}.tm-bar{height:6px}
.tm-bar{flex:1;height:6px;border-radius:99px;background:rgba(248,250,252,.08);overflow:hidden}.tm-bar i{display:block;height:100%;width:var(--p);border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.profile-pop a.pm-tester{display:inline-flex;align-self:flex-start;margin:6px 0 0;padding:2px 9px;border-radius:999px;border:1px solid rgba(251,191,36,.5);background:rgba(251,191,36,.1);color:#fcd34d;font:600 11.5px Inter,sans-serif;text-decoration:none}

/* online dots and the unread badge (assets/social.js) */
[data-pres]{position:relative;display:inline-flex}
.pres-dot,.msg-on{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#5ee8a8;box-shadow:0 0 0 2px #0b1220}
.msg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;margin-left:5px;padding:0 4px;border-radius:999px;background:#f97316;color:#fff;font:700 10.5px/1 Inter,sans-serif;vertical-align:1px}
.tabs a[data-tab="people"]{position:relative}
.tabs-bottom a[data-tab="people"] .msg-badge{position:absolute;top:4px;left:calc(50% + 6px);margin:0}

/* menu trees beyond the facets (the user, 2026-10-13): Message center under Connections, Profile with its pages,
   and Other features, each with the same branch lines */
.site-nav .nav-parent{margin:0;padding:6px 12px;font:600 13px/1.3 Inter,sans-serif;color:var(--frost);cursor:default}
.site-nav .nav-tree-top{margin-top:2px}
.site-nav a.nav-leaf.notif-menu{display:flex;align-items:center;justify-content:space-between;gap:.6rem}

/* the chat button, bottom right, always there when signed in (assets/social.js) */
.chat-btn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(17,26,46,.95);border:1px solid rgba(103,232,249,.4);box-shadow:0 10px 28px rgba(0,0,0,.45);color:var(--cyan);text-decoration:none;transition:transform .2s,border-color .2s}
.chat-btn:hover{transform:translateY(-2px);border-color:var(--cyan)}
.chat-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.chat-btn em{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#f97316;color:#fff;font:700 11px/20px Inter,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px #0b1220}
.chat-btn.waiting{border-color:rgba(249,115,22,.7);animation:chat-pulse 2.4s ease-in-out infinite}
@keyframes chat-pulse{50%{box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 6px rgba(249,115,22,.12)}}
@media(max-width:768px){.chat-btn{right:12px;bottom:calc(74px + env(safe-area-inset-bottom));width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.chat-btn.waiting{animation:none}}

/* the pop-out chat (assets/chat-pop.js): over any page, above the chat button */
.chat-pop{position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:61;width:min(370px,calc(100vw - 32px));height:min(540px,calc(100svh - 160px));display:none;flex-direction:column;border-radius:20px;overflow:hidden;background:#0b1220;border:1px solid rgba(103,232,249,.3);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.chat-pop.on{display:flex;animation:cp-in .22s ease}
@keyframes cp-in{from{opacity:0;transform:translateY(14px) scale(.97);transform-origin:bottom right}}
.cp-top{display:flex;align-items:center;gap:.4rem;padding:.6rem .6rem .6rem .8rem;border-bottom:1px solid rgba(248,250,252,.08)}
.cp-head{flex:1;min-width:0;display:flex;align-items:center;gap:.55rem}.cp-head div{min-width:0;display:flex;flex-direction:column}
.cp-head b{color:var(--frost);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-head small{color:#5ee8a8;font-size:.75rem}
.cp-ic{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:rgba(248,250,252,.06);color:#cbd5e1;font-size:18px;line-height:32px;text-align:center;text-decoration:none;cursor:pointer}
.cp-ic:hover{background:rgba(248,250,252,.12);color:var(--frost)}
.cp-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
.cp-fw{position:relative;display:inline-flex;flex:none}
.cp-face{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--h,#a5b4fc);background-size:cover;background-position:center;color:#070B14;font:700 .9rem Inter,sans-serif;font-style:normal}
.cp-head .cp-face{width:30px;height:30px;font-size:.8rem}
.cp-list{list-style:none;margin:0;padding:6px}
.cp-list button{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.55rem;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cp-list button:hover{background:rgba(248,250,252,.05)}.cp-list button.unread{background:rgba(249,115,22,.08)}
.cp-lt{display:flex;flex-direction:column;min-width:0}.cp-lt b{color:var(--frost);font-size:.9rem}.cp-lt small{color:#a9b6c8;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-st{font:600 .7rem Inter,sans-serif;font-style:normal;color:#a9b6c8}.cp-st.new{color:#f97316}
.cp-when{color:#7c8aa0;font-size:.72rem}
.cp-scroll{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:5px}
.cp-b{max-width:80%;padding:.45rem .7rem;border-radius:14px;font-size:.9rem;line-height:1.4}.cp-b p{margin:0;white-space:pre-wrap;word-wrap:break-word}.cp-b time{display:block;margin-top:2px;font-size:.66rem;opacity:.7}
.cp-b.them{align-self:flex-start;background:rgba(248,250,252,.08);color:#e2e8f0;border-bottom-left-radius:5px}
.cp-b.me{align-self:flex-end;background:linear-gradient(120deg,rgba(103,232,249,.9),rgba(167,139,250,.9));color:#070B14;border-bottom-right-radius:5px}.cp-b.me time{text-align:right}.cp-b.pending{opacity:.6}
.cp-first,.cp-empty{margin:auto;padding:1.5rem;color:#a9b6c8;text-align:center;font-size:.9rem}.cp-empty a{color:var(--cyan)}
.cp-form{display:flex;gap:.4rem;align-items:flex-end;padding:.55rem;border-top:1px solid rgba(248,250,252,.08)}
.cp-form textarea{flex:1;resize:none;min-height:38px;max-height:120px;padding:.5rem .75rem;border-radius:18px;border:1px solid rgba(248,250,252,.14);background:rgba(7,11,20,.6);color:var(--frost);font:inherit;font-size:.9rem;line-height:1.35}
.cp-form .btn{min-height:38px;padding:.3rem .9rem}
.cp-err{margin:0;padding:0 .8rem .6rem;color:#fda4af;font-size:.8rem}
/* phones: a compact sheet above the chat button; 16px text so iPhones don't zoom in on the message box; with the
   keyboard up it sits just above it (assets/chat-pop.js sets --kb) */
/* edge to edge only on real phone widths; a split screen or a zoomed-in browser keeps the compact card (the user,
   2026-10-22: "taking up way too much space on split screen") */
@media(min-width:561px) and (max-width:768px){.chat-pop{height:min(480px,calc(100svh - 150px))}}
@media(max-width:560px){.chat-pop{right:8px;left:8px;width:auto;bottom:calc(132px + env(safe-area-inset-bottom));height:min(440px,52svh)}}
@media(max-width:768px){
.chat-pop.kb{bottom:calc(var(--kb,0px) + 8px);height:min(400px,calc(var(--vvh,100svh) - 24px))}
.cp-form textarea,.msg-form textarea{font-size:16px}}
button.chat-btn{padding:0;cursor:pointer;font:inherit}
/* phones: every text box at 16px or more, so iPhones never zoom the page when you tap into one */
@media(max-width:768px){input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px!important}}
.acct-ts{margin-top:8px}.acct-ts:empty{display:none}
.acct-ts-float{position:fixed;left:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:70}

/* emojis in chat (assets/social.js) */
.emo-btn{flex:none;align-self:flex-end;width:38px;height:38px;border-radius:50%;border:0;background:rgba(248,250,252,.06);font-size:19px;line-height:38px;cursor:pointer;filter:grayscale(.3)}
.emo-btn:hover,.emo-btn[aria-expanded="true"]{background:rgba(103,232,249,.14);filter:none}
.emo-pop{position:fixed;z-index:80;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;border-radius:16px;background:#0b1220;border:1px solid rgba(103,232,249,.3);box-shadow:0 16px 40px rgba(0,0,0,.55)}
.emo-pop button{aspect-ratio:1;border:0;border-radius:8px;background:none;font-size:22px;line-height:1;cursor:pointer;padding:0}
.emo-pop button:hover,.emo-pop button:focus-visible{background:rgba(248,250,252,.08);outline:none}

/* reactions on messages (assets/social.js) */
[data-mid]{position:relative;-webkit-touch-callout:none}
[data-mid].reacting{outline:2px solid rgba(103,232,249,.5);outline-offset:2px}
.has-react{margin-bottom:12px}
.react-pill{position:absolute;bottom:-12px;display:inline-flex;gap:1px;padding:1px 5px;border-radius:999px;background:#17223a;border:1px solid rgba(248,250,252,.15);font-size:13px;line-height:20px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.react-pill i{font-style:normal}
.cp-b.me .react-pill,.msg-b.me .react-pill{left:8px}.cp-b.them .react-pill,.msg-b.them .react-pill{right:8px}
.react-bar{position:fixed;z-index:85;display:flex;gap:2px;padding:5px 7px;border-radius:999px;background:#0b1220;border:1px solid rgba(103,232,249,.35);box-shadow:0 12px 32px rgba(0,0,0,.55);animation:react-in .15s ease}
@keyframes react-in{from{opacity:0;transform:translateY(6px) scale(.9)}}
.react-bar button{width:38px;height:38px;border:0;border-radius:50%;background:none;font-size:22px;line-height:1;cursor:pointer;padding:0;transition:transform .12s}
.react-bar button:hover{transform:scale(1.2)}.react-bar button.on{background:rgba(103,232,249,.18)}
.react-bar[hidden],.emo-pop[hidden]{display:none}

/* the count on the account photo (assets/social.js): top right, clear of the green dot (bottom right) */
.acct-badge{position:absolute;top:1px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#f97316;color:#fff;font:700 10px/16px Inter,sans-serif;text-align:center;box-shadow:0 0 0 2px #070B14;pointer-events:none}
.menu-dot{display:none!important}

/* Soulscope: the pinned Soulflake conversation (assets/soulscope.js) */
.scope-face{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,rgba(103,232,249,.35),rgba(167,139,250,.3) 70%);border:1px solid rgba(103,232,249,.45);color:#e0f7ff;font-size:18px;font-style:normal}
.cp-head .scope-face,.msg-th .scope-face{width:30px;height:30px;font-size:15px}
.scope-row button,.scope-row a{background:linear-gradient(90deg,rgba(103,232,249,.07),transparent)}
.scope-thread{gap:10px}
.scope-b{align-self:flex-start;max-width:92%;padding:.7rem .85rem;border-radius:16px;border-bottom-left-radius:5px;background:linear-gradient(160deg,rgba(103,232,249,.12),rgba(167,139,250,.1));border:1px solid rgba(103,232,249,.22)}
.scope-b p{margin:0;color:#e2e8f0;line-height:1.5;font-size:.92rem}
.scope-b .scope-day{margin-bottom:.25rem;font:700 .66rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.scope-b .scope-act{margin-top:.5rem;padding:.4rem .6rem;border-radius:10px;background:rgba(7,11,20,.45);font-size:.86rem}.scope-act b{color:#fcd34d;margin-right:.3rem}
.scope-note,.scope-empty{align-self:center;margin:.4rem 0 0;color:#7c8aa0;font-size:.76rem;text-align:center;line-height:1.5}
.scope-note .pr-link{font-size:.76rem}
/* the count sits on the bell when the bell is there; only on narrow screens (no bell) does the photo carry it */
.acct-badge{display:none}
@media(max-width:560px){.acct-badge{display:block}}

/* the menu as a plain list (the user, 2026-10-13: professional, consistent; dividers instead of a tree): every row is a
   link with an icon (or, for facets, a status dot), the same size, groups split by thin lines */
.site-nav{min-width:248px;padding:6px}
.site-nav a.mi{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;font:500 14px/1.3 Inter,sans-serif;letter-spacing:0;text-transform:none;color:#e2e8f0;text-decoration:none}
.site-nav a.mi::before{display:none}
.site-nav a.mi:hover,.site-nav a.mi:focus-visible{background:rgba(248,250,252,.06);color:var(--frost);outline:none}
.site-nav a.mi.active{color:var(--cyan);background:rgba(103,232,249,.08)}
.site-nav a.mi svg{flex:none;width:18px;height:18px;fill:none;stroke:#a9b6c8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.site-nav a.mi.active svg{stroke:var(--cyan)}
.site-nav .mi-dot{flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.site-nav .mi-dot::after{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid #7c8aa0}
.site-nav a.s-started .mi-dot::after{border-color:var(--cyan);background:linear-gradient(90deg,var(--cyan) 50%,transparent 50%)}
.site-nav a.s-done .mi-dot::after{border-color:var(--cyan);background:var(--cyan)}
.site-nav a.mi.locked{opacity:.45}
.site-nav a.mi.locked span::after{margin-left:.45rem}
.site-nav .m-div{margin:5px 10px;border:0;border-top:1px solid rgba(248,250,252,.08)}
.site-nav a.mi .msg-badge{margin-left:auto}
@media(max-height:760px){.site-nav{max-height:calc(100svh - 76px);overflow-y:auto}}

/* pages opened in the frame (the music keeps playing): the outer header stays pinned and solid, even when the page
   under it was scrolled (locking the scroll otherwise lets the sticky header slide away and the old page show through),
   and only the outer page's chat button shows (one bubble, not two) */
html.shelled .bar{position:fixed;top:0;left:0;right:0;background:#070B14}
html.in-shell .chat-btn,html.in-shell .chat-pop{display:none!important}

/* ---- a sleeker header (the user, 2026-10-13: "sleek and professional"; picks: quiet text tabs + icon music, and the
   facet row as a progress rail) ---- */
/* the music: one round icon (the equalizer bars, moving while it plays); the player opens from it */
.bar .sound-pill{width:34px;height:34px;justify-content:center;border-radius:50%;background:transparent;border-color:rgba(248,250,252,.12)}
.bar .sound-pill .sp-vol,.bar .sound-pill .sp-now{display:none}
.bar .sound-pill .sp-open{padding:0;width:32px;justify-content:center;border-left:0;border-radius:50%}
.bar .sound-pill .sp-open::after{display:none}
.bar .sound-pill .sp-bars{display:inline-flex;height:14px}
.bar .sound-pill.playing{border-color:rgba(103,232,249,.45)}
.sp-ctl{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid rgba(248,250,252,.08)}
.sp-ctl .sp-play{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(103,232,249,.14);color:var(--frost)}
.sp-ctl .sp-play:hover{background:rgba(103,232,249,.24)}
.sp-ctl .sp-vol-in{flex:1;height:auto;border:0;align-items:center;gap:8px}
.sp-ctl .sp-vol-in input{width:100%;min-width:0}
.sp-ctl output{font:600 12px Inter,sans-serif;color:#a9b6c8;font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
/* My Soulflake / Connections up top: plain text, the page you're on underlined (phones keep the bottom bar) */
@media(min-width:840px){
.bar .tabs{gap:1.6rem;padding:0;border:0;border-radius:0;background:none}
.bar .tabs a{position:relative;padding:.5rem 0;border-radius:0;background:none!important;color:#a9b6c8;font-size:.92rem}
.bar .tabs a:hover{color:var(--frost)}
.bar .tabs a[aria-current="page"],.bar .tabs a.on{color:var(--frost)}
.bar .tabs a[aria-current="page"]::after,.bar .tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--cyan)}
}
.bar{background:rgba(7,11,20,.86);border-bottom-color:rgba(248,250,252,.07)}
/* the facet row as one progress rail: square segments in one frame, a thin line along each filling as it takes shape */
.rd-page{gap:0;border:1px solid rgba(248,250,252,.1);border-radius:10px;background:rgba(12,18,32,.72)}
.rd-page .rdc{position:relative;border:0;border-radius:0;background:none;padding:.5rem clamp(.45rem,1.1vw,1rem) .7rem;color:#cbd5e1}
.rd-page .rdc+.rdc{border-left:1px solid rgba(248,250,252,.07)}
.rd-page .rdc i{display:none}
.rd-page .rdc::after{content:"";position:absolute;left:14%;right:14%;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan) calc(var(--p,0) * 100%),rgba(248,250,252,.1) calc(var(--p,0) * 100%))}
.rd-page .rdc.s-done::after{box-shadow:0 0 8px rgba(103,232,249,.55)}
.rd-page .rdc.s-none{color:#a9b6c8}
.rd-page .rdc:hover,.rd-page .rdc:focus-visible{background:rgba(248,250,252,.05);color:var(--frost)}
.rd-page .rdc[aria-current="page"]{background:rgba(103,232,249,.1);color:var(--frost);border-color:rgba(248,250,252,.07)}
.rd-page .rdc[aria-current="page"]+.rdc{border-left-color:rgba(248,250,252,.07)}
/* the line under it: readable, not fine print; what's next in cyan */
.rd-cap{font-style:normal;font-size:.86rem;opacity:1;color:#a9b6c8}
.rd-cap b{color:var(--cyan);font-weight:600}
/* the Soulscope sender's face: your own Soulflake in miniature (assets/soulscope.js faces()), a snowflake until it's drawn */
.scope-face{position:relative;overflow:hidden}
.scope-face canvas{position:absolute;inset:0;width:100%;height:100%}
.scope-face.drawn span{display:none}

/* Snowscope's deadpan conditions line, like the top of a weather report */
.scope-b .scope-cond{margin:0 0 .45rem;padding-bottom:.45rem;border-bottom:1px dashed rgba(248,250,252,.14);color:var(--frost);font:italic 400 1.05rem/1.3 "Instrument Serif",Georgia,serif}
.scope-b .scope-cond b{margin-right:.35rem;font:700 .66rem Inter,sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#a9b6c8}

/* the header without the My Soulflake / Connections tabs (the logo goes home; Connections is in the menu); on wide
   screens the facet rail sits in the header instead (assets/readings-row.js place()). Phones keep the bottom bar. */
.bar .tabs:not(.tabs-bottom){display:none!important}
.rd-slot{flex:1 1 auto;min-width:0;display:flex;justify-content:center;padding:0 1.2rem}
.rd-page.rd-in-bar{position:static;left:auto;transform:none;margin:0;width:auto;max-width:56rem;flex:0 1 auto;background:rgba(12,18,32,.55)}
.rd-page.rd-in-bar .rdc{font-size:.84rem;padding:.38rem .8rem .55rem}
.rd-page.rd-in-bar .rdc::after{bottom:4px}
html.rd-up .rd-wrap{display:none}
html.rd-up .home-main>.rd-cap,html.rd-up .rd-cap{margin-top:.9rem}

/* the three layers of a Soulflake, middle out (the user, 2026-10-13): state (mood, the nucleus) in amber, traits (the
   crystals) in ice blue, characteristics (the arms) in violet. A thin line along the top of the rail flows from one to
   the next; each segment's progress line takes its layer's color; a firmer divider where one layer meets the next. */
:root{--ly-state:#fbbf77;--ly-traits:#67e8f9;--ly-char:#a78bfa}
.rd-page{position:relative}
.rd-page::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--ly-state) 0,var(--ly-state) 7%,var(--ly-traits) 16%,var(--ly-traits) 24%,var(--ly-char) 34%,var(--ly-char) 100%);opacity:.75}
.rd-page.rd-more::before,.rd-page.rd-more.rd-end::before{background-attachment:local}
/* the line runs the whole length of the row (the user, 2026-10-20: scrolled right on a phone, it stopped partway, since
   it only spanned the visible width): assets/tab-track.js sets --rd-sw to the row's full scroll width */
.rd-page::before{right:auto;width:var(--rd-sw,100%)}
.rd-page .rdc.g-state::after{background:linear-gradient(90deg,var(--ly-state) calc(var(--p,0) * 100%),rgba(248,250,252,.1) calc(var(--p,0) * 100%))}
.rd-page .rdc.g-char::after{background:linear-gradient(90deg,var(--ly-char) calc(var(--p,0) * 100%),rgba(248,250,252,.1) calc(var(--p,0) * 100%))}
.rd-page .rdc.s-done.g-state::after{box-shadow:0 0 8px rgba(251,191,119,.55)}
.rd-page .rdc.s-done.g-char::after{box-shadow:0 0 8px rgba(167,139,250,.55)}
.rd-page .rdc.g-first{border-left:1px solid rgba(248,250,252,.2)}
.rd-page .rdc.g-state[aria-current="page"]{background:rgba(251,191,119,.1)}
.rd-page .rdc.g-char[aria-current="page"]{background:rgba(167,139,250,.1)}
/* the menu's facet dots in the same colors */
.site-nav a.g-state .mi-dot::after{border-color:var(--ly-state)}
.site-nav a.g-state.s-started .mi-dot::after{background:linear-gradient(90deg,var(--ly-state) 50%,transparent 50%)}
.site-nav a.g-state.s-done .mi-dot::after{background:var(--ly-state)}
.site-nav a.g-char .mi-dot::after{border-color:var(--ly-char)}
.site-nav a.g-char.s-started .mi-dot::after{background:linear-gradient(90deg,var(--ly-char) 50%,transparent 50%)}
.site-nav a.g-char.s-done .mi-dot::after{background:var(--ly-char)}
.site-nav a.g-traits .mi-dot::after{border-color:var(--ly-traits)}
.site-nav a.g-state.s-none .mi-dot::after,.site-nav a.g-traits.s-none .mi-dot::after,.site-nav a.g-char.s-none .mi-dot::after{opacity:.6}
.rd-page.rd-in-bar{position:relative}
/* Mood's tints follow its live color (assets/nav.js sets --ly-state from the latest check-in) */
.rd-page .rdc.g-state[aria-current="page"]{background:color-mix(in srgb,var(--ly-state) 12%,transparent)}
.rd-page .rdc.s-done.g-state::after{box-shadow:0 0 8px color-mix(in srgb,var(--ly-state) 55%,transparent)}
/* the "2 of 8 taken shape · Next: …" line under the facet rail is gone (the user, 2026-10-13); the rail's progress
   lines already show how far each facet is. The element stays, hidden: assets/readings-row.js uses it as a place marker. */
.rd-cap{display:none!important}

/* the daily lattice reading (assets/soulscope.js, assets/lattice-bank.js): a headline, the reading, what to try, and
   which of your results it came from */
.scope-b .scope-title{margin:0 0 .3rem;color:var(--frost);font:400 1.2rem/1.25 "Instrument Serif",Georgia,serif}
.scope-b .scope-from{margin-top:.45rem;color:#a9b6c8;font-size:.78rem}
/* the bell is back in the header, left of your photo (the user, 2026-10-18: there's room now), and opens your
   notifications right there; your photo's count is unread messages only */
.acct-badge{display:block}
.pm-item small .pm-new{display:inline-block;padding:0 .45rem;border-radius:999px;background:#f97316;color:#fff;font:700 .7rem/1.5 Inter,sans-serif}
/* the menus in Inter at the body's weight, so the header reads like part of the page (the user, 2026-10-14; the
   wordmark keeps its own Inter, the user didn't want it in the heading serif) */
.site-nav a.mi{font-weight:450;font-size:14.5px}
.pm-item{font-weight:450;font-size:14px}

/* Beta center in the menu: "Beta" as the logo's little BETA pill, for continuity */
.site-nav .beta-pill{display:inline-block;margin-right:.3rem;padding:1px 6px 0;border:1px solid rgba(167,139,250,.55);border-radius:999px;font:600 9.5px/1.4 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#C4B5FD;vertical-align:1px}
.site-nav a.mi.active .beta-pill,.site-nav a.mi:hover .beta-pill{border-color:rgba(196,181,253,.9);color:#E9D5FF}
.site-nav .beta-pill{margin-right:0}
.rd-dup{display:none!important}
/* the account menu's admin group (assets/nav.js), just above Sign out */
.pm-admin{border-top:1px solid rgba(248,250,252,.08);margin-top:4px;padding-top:4px}
/* the creator's own badges in the account menu (admins): Founder, and Admin (which opens Control center) */
.pm-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pm-founder,.profile-pop a.pm-adminb{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font:600 11.5px Inter,sans-serif;text-decoration:none}
.pm-founder{border:1px solid rgba(251,191,36,.6);background:linear-gradient(120deg,rgba(251,191,36,.18),rgba(244,114,182,.12));color:#fde68a}
.profile-pop a.pm-adminb{border:1px solid rgba(103,232,249,.5);background:rgba(103,232,249,.1);color:var(--cyan)}
.profile-pop a.pm-adminb:hover{border-color:var(--cyan)}
/* the dozing music icon (assets/nav.js): three small z's drift up from its top right */
.bar .sound-pill{position:relative}
.bar .sound-pill.zzz::before,.bar .sound-pill.zzz::after{content:"z";position:absolute;right:-3px;top:-4px;font:700 9px/1 Inter,sans-serif;color:#a9b6c8;pointer-events:none;opacity:0;animation:sf-zzz 3.6s ease-out infinite}
.bar .sound-pill.zzz::after{content:"Z";font-size:11px;animation-delay:1.8s}
@keyframes sf-zzz{0%{opacity:0;transform:translate(0,4px) scale(.7)}25%{opacity:.85}100%{opacity:0;transform:translate(8px,-14px) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.bar .sound-pill.zzz::before{animation:none;opacity:.7;content:"zz";transform:translate(4px,-6px)}.bar .sound-pill.zzz::after{display:none}}

/* phones: no bottom bar any more (the user, 2026-10-14: My Soulflake and Connections are both in the menu), so the
   page, the chat button and pop-ups sit at the real bottom; and the header icons get a little more room */
.tabs.tabs-bottom{display:none!important}
body{padding-bottom:0}
@media(max-width:839px){
.chat-btn{bottom:calc(16px + env(safe-area-inset-bottom))}
.ach-pop{bottom:calc(20px + env(safe-area-inset-bottom))}
.acct-ts-float{bottom:calc(20px + env(safe-area-inset-bottom))}
}
.bar .right-cluster{gap:10px;margin-left:12px}
.bar .tools{margin-right:2px}
@media(max-width:400px){.bar .right-cluster{gap:6px}}
/* the BETA tag: its own link right of the logo, a comfortable tap target (the visible pill stays small) */
.bar .wordmark{padding-top:0}
.bar .beta-tag{flex:none;display:inline-flex;align-items:center;margin:0 auto 0 4px;padding:10px 8px;text-decoration:none;cursor:pointer}
.bar .beta-tag::before{content:"Beta";display:inline-block;padding:1px 6px 0;border:1px solid rgba(167,139,250,.5);border-radius:999px;font:600 9px/1.35 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#C4B5FD}
.bar .beta-tag{font-size:0;color:transparent}
.bar .beta-tag:hover::before,.bar .beta-tag:focus-visible::before{border-color:rgba(196,181,253,.95);color:#E9D5FF}
.bar .rd-slot~.right-cluster,.bar .beta-tag~.rd-slot{margin-left:0}

/* making music findable while it's off (the user, 2026-10-14): a music note instead of flat bars, a soft glow now and then, and a one-time hint bubble (assets/nav.js) */
.bar .sound-pill:not(.playing):not(.waiting) .sp-bars{display:none}
.bar .sound-pill:not(.playing):not(.waiting) .sp-open::before{content:"\266B";font:400 16px/1 system-ui,sans-serif;color:var(--cyan)}
/* (the word "Music" on wide screens is gone: the user, 2026-10-30, "i like the compact version more"; the round note button everywhere) */
.bar .sound-pill:not(.playing):not(.waiting){animation:sf-music-glow 26s ease-in-out 8s infinite}
@keyframes sf-music-glow{0%,88%,100%{box-shadow:none;border-color:rgba(248,250,252,.12)}93%{box-shadow:0 0 14px rgba(103,232,249,.45);border-color:rgba(103,232,249,.6)}}
@media(prefers-reduced-motion:reduce){.bar .sound-pill{animation:none!important}}
.music-hint{position:fixed;z-index:70;max-width:220px;padding:.6rem .8rem;border-radius:12px;background:#0f1a2e;border:1px solid rgba(103,232,249,.45);box-shadow:0 12px 30px rgba(0,0,0,.5);color:#e2e8f0;font:500 .86rem/1.4 Inter,sans-serif;opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s;cursor:pointer}
.music-hint.on{opacity:1;transform:none}
.music-hint::before{content:"";position:absolute;top:-6px;left:var(--ax,18px);width:10px;height:10px;background:#0f1a2e;border-left:1px solid rgba(103,232,249,.45);border-top:1px solid rgba(103,232,249,.45);transform:rotate(45deg)}
.music-hint b{color:var(--cyan)}

/* the reveal moment after a reading (assets/guide.js) */
.sfg-reveal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(3,6,12,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s ease}
.sfg-reveal.on{opacity:1}
.sfg-in{position:relative;width:min(30rem,100%);max-height:calc(100svh - 32px);overflow:auto;padding:1.4rem 1.4rem 1.5rem;border-radius:22px;background:linear-gradient(170deg,#101a2e,#0a1120 70%);border:1px solid rgba(103,232,249,.3);box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center;transform:translateY(10px) scale(.98);transition:transform .45s cubic-bezier(.2,1.2,.4,1)}
.sfg-reveal.on .sfg-in{transform:none}
.sfg-cv{display:block;width:min(220px,55vw);aspect-ratio:1;margin:0 auto .2rem}
.sfg-k{margin:0;color:var(--cyan);font:700 .72rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.sfg-in h2{margin:.3rem 0 .8rem;color:var(--frost);font:400 clamp(1.7rem,5vw,2.2rem)/1.15 "Instrument Serif",Georgia,serif}
.sfg-finds{list-style:none;margin:0 auto 1.1rem;padding:0;display:grid;gap:.45rem;max-width:24rem;text-align:left}
.sfg-finds li{padding:.55rem .75rem;border-radius:12px;background:rgba(248,250,252,.05);border:1px solid rgba(248,250,252,.08);color:#e2e8f0;font-size:.95rem;line-height:1.4}
.sfg-go{display:block;width:100%;max-width:24rem;margin:0 auto}
.sfg-next{display:inline-block;margin-top:.8rem;color:#c4b5fd;font-size:.92rem;font-weight:600;text-decoration:none}
.sfg-next:hover{color:var(--frost)}
.sfg-x{position:absolute;top:.5rem;right:.6rem;width:36px;height:36px;border:0;background:none;color:#a9b6c8;font-size:1.5rem;cursor:pointer}
@media(prefers-reduced-motion:reduce){.sfg-reveal,.sfg-in{transition:none}}
/* the Oracle's row in the chat (assets/soulscope.js) */
.adv-face{background:radial-gradient(circle at 35% 30%,rgba(196,181,253,.45),rgba(30,27,75,.9))!important;color:#e9d5ff;font-size:16px;font-style:normal}
.sfg-tc{margin:0 auto .8rem;max-width:24rem;color:#cbd5e1;font-size:.92rem}.sfg-tc a{color:#c4b5fd;font-weight:600}
/* the reveal card for Traits: sharing first (assets/guide.js, funnel brief 2026-10-14) */
.sfg-more{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .6rem;margin-top:.7rem}
.sfg-sm{padding:.45rem .85rem;border-radius:999px;border:1px solid rgba(248,250,252,.18);background:none;color:#e2e8f0;font:600 .9rem Inter,sans-serif;cursor:pointer}
.sfg-sm:hover{border-color:rgba(103,232,249,.5)}
.sfg-st{margin:.5rem 0 0;min-height:1.2em;color:#a5f3fc;font-size:.9rem;word-break:break-word}.sfg-st:empty{min-height:0}
.sfg-see{background:none;border:0;cursor:pointer;font:inherit}

/* home: a brand-new visitor's first step on a phone's first screen (index.html .hero-go-row, assets/home-mood.js) */
.hero-go-row{display:none;margin:1rem 0 0;text-align:center}
@media(max-width:700px){html.sf-fresh .hero-go-row{display:block}}
@media(max-width:700px){html.sf-fresh .home-hero .hero-go-row{grid-row:6}html.sf-fresh .home-hero .cta-row,html.sf-fresh .home-hero .hd-next{grid-row:7}html.sf-fresh .home-hero .micro{grid-row:8}}
@media(max-width:700px) and (max-height:760px){html.sf-fresh #hero-stage{width:min(100%,34svh);justify-self:center}}

/* a facet button lit by pointing at its part of the home Soulflake (assets/home.js linkGlow) */
.rd-row a.rdc.link-glow,a.hf.link-glow{box-shadow:0 0 0 1px rgba(125,240,255,.55),0 0 16px rgba(125,240,255,.35);color:#f8fafc;transition:box-shadow .25s ease}

/* a facet with insights you haven't looked at yet (assets/readings-row.js) */
.rdc{position:relative}
/* new insights on this facet: the same little star as the tabs and cards (assets/fresh.js) */
.rdc-new{position:absolute;top:-3px;right:0;width:12px;height:12px;background:linear-gradient(135deg,#fff,#a5f3fc 45%,#c4b5fd);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 4px rgba(196,181,253,.9));animation:rdc-new 2.2s ease-in-out infinite}
@keyframes rdc-new{0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1.15);opacity:1}}
@media(prefers-reduced-motion:reduce){.rdc-new{animation:none}}
/* account menu: one tap to invite someone to connect (assets/nav.js) */
.pm-invite{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.15rem .6rem;padding:.35rem .4rem .35rem .75rem;border-radius:10px;border:1px solid rgba(165,243,252,.25);background:linear-gradient(160deg,rgba(103,232,249,.09),rgba(167,139,250,.06))}
.pm-invite span{display:grid;gap:.15rem;min-width:0}.pm-invite b{color:#f8fafc;font:600 .9rem Inter,sans-serif}.pm-invite small{color:#cbd5e1;font-size:.84rem;line-height:1.35}
.pm-invite-btn{flex:none;padding:.32rem .75rem;border-radius:999px;border:1px solid rgba(165,243,252,.5);background:rgba(103,232,249,.14);color:#e0f7ff;font:600 .88rem Inter,sans-serif;cursor:pointer;white-space:nowrap}
.pm-invite-btn:hover{background:rgba(103,232,249,.24)}.pm-invite-btn:disabled{opacity:.7;cursor:default}
.pm-invite-st{margin:0 .9rem;color:#a5f3fc;font-size:.86rem;word-break:break-all}.pm-invite-st:empty{display:none}

/* tester crowns on profile pictures (assets/nav.js SFCrownBadge): a small dark circle at the bottom right with the crown in its metal */
.has-crown,.pm-face{position:relative}
.crown-b{position:absolute;right:-3px;top:-3px;display:grid;place-items:center;width:max(14px,42%);aspect-ratio:1;border-radius:50%;background:#070B14;border:1.5px solid var(--cb);box-shadow:0 0 6px rgba(var(--cbg),.55);z-index:1;pointer-events:auto}
.crown-b svg,.pm-face .crown-b svg{width:72%;height:72%;fill:var(--cb);stroke:none}
.crown-gold{--cb:#fcd34d;--cbg:252,211,77}.crown-silver{--cb:#e2e8f0;--cbg:226,232,240}.crown-bronze{--cb:#e0a06a;--cbg:224,160,106}
.profile-btn .crown-b{width:14px;right:-2px;top:auto;bottom:1px}

/* What you share switches, also in Account settings (same look as assets/people.css) */
.pp-share{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:4px}
.pp-share label{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem .2rem;cursor:pointer;color:#e2e8f0;border-bottom:1px solid rgba(248,250,252,.05)}
.pp-share input{position:absolute;opacity:0;pointer-events:none}
.pp-share i{position:relative;flex:0 0 40px;height:22px;border-radius:999px;background:rgba(248,250,252,.14);transition:background .2s ease}
.pp-share i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#e2e8f0;transition:transform .2s ease}
.pp-share input:checked+i{background:rgba(103,232,249,.7)}.pp-share input:checked+i::after{transform:translateX(18px)}
.pp-share input:focus-visible+i{outline:2px solid var(--cyan);outline-offset:2px}

/* knowing who's online (assets/social.js heads, chat-pop.js strip): bubble dot, Online now strip, heads-up, bell */
.chat-btn .cb-on{position:absolute;left:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:#5ee8a8;border:2px solid #070B14;box-shadow:0 0 8px rgba(94,232,168,.7)}
.cp-on{padding:.55rem .75rem .15rem;border-bottom:1px solid rgba(248,250,252,.06)}
.cp-on small{display:block;margin-bottom:.4rem;color:#5ee8a8;font:600 .74rem Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.cp-on div{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.5rem}
.cp-on button{flex:none;display:flex;flex-direction:column;align-items:center;gap:.3rem;width:52px;padding:0;border:0;background:none;color:#e2e8f0;font:500 .78rem Inter,sans-serif;cursor:pointer}
.cp-on button>span:last-child{max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.on-toast{position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:61;display:flex;align-items:center;gap:.6rem;width:max-content;max-width:min(360px,calc(100vw - 32px));padding:.6rem .5rem .6rem .7rem;border-radius:14px;border:1px solid rgba(94,232,168,.35);background:rgba(12,18,32,.97);box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.on-toast.on{opacity:1;transform:none}
.on-toast p{margin:0;flex:1;min-width:0;color:#e2e8f0;font-size:.92rem;line-height:1.35}.on-toast b{color:#f8fafc}.on-toast small{display:block;color:#a9b6c8;font-size:.82rem}
.on-hi{flex:none;padding:.38rem .8rem;border-radius:999px;border:1px solid rgba(94,232,168,.5);background:rgba(94,232,168,.12);color:#dcfce7;font:600 .86rem Inter,sans-serif;cursor:pointer}
.on-hi:hover{background:rgba(94,232,168,.22)}
.on-x{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:none;color:#a9b6c8;font-size:19px;line-height:1;cursor:pointer}
.on-bell{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin-left:auto;padding:0;border:0;border-radius:50%;background:rgba(248,250,252,.06);color:#a9b6c8;cursor:pointer}
.on-bell svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.on-bell:hover{color:var(--frost)}
.on-bell[aria-pressed="true"]{color:#5ee8a8;background:rgba(94,232,168,.14)}.on-bell[aria-pressed="true"] svg{fill:rgba(94,232,168,.3)}
.cp-head .on-bell{margin-right:.2rem}.msg-th .on-bell{margin:0 .4rem 0 auto}
.notif-on-h{margin:1.1rem 0 .3rem;font:600 1rem Inter,sans-serif;color:var(--frost)}
@media(prefers-reduced-motion:reduce){.on-toast{transition:none}}
/* the facet page you're on is plainly lit in the facet row, like a tab (the user, 2026-10-15: "not obvious enough") */
.rdc{--hl:103,232,249}.rdc.g-state{--hl:251,191,119}.rdc.g-char{--hl:167,139,250}
.rd-page .rdc[aria-current="page"],.rd-row .rdc[aria-current="page"],.rd-row a.rdc.jr-cur{color:#fff;font-weight:700;border-color:rgba(var(--hl),.7);
  background:linear-gradient(180deg,rgba(var(--hl),.3),rgba(var(--hl),.08));box-shadow:inset 0 0 0 1px rgba(var(--hl),.55),0 0 18px rgba(var(--hl),.35);text-shadow:0 0 10px rgba(var(--hl),.75)}
/* the music frame's chat bubble steps aside while the page inside it is on the path (assets/journey.js shellFlag) */
/* inside the music frame, the same: during Guide me the bubble moves up out of the answers' way instead of hiding */
@media(max-width:700px){html.jr-kid .chat-btn{top:calc(var(--bar-h,56px) + 58px);bottom:auto;right:10px;width:40px;height:40px;opacity:.9}html.jr-kid .chat-btn svg{width:19px;height:19px}}

/* your report together, from the quick chat's top bar: the same two little Soulflakes as Messages (assets/social.js reportHTML) */
.cp-ic.cp-report{display:inline-grid;place-items:center;width:40px;border:1px solid rgba(103,232,249,.3);border-radius:12px;background:linear-gradient(120deg,rgba(103,232,249,.1),rgba(167,139,250,.12))}
.cp-report svg{width:30px;height:18px;filter:drop-shadow(0 0 4px rgba(103,232,249,.45));transition:transform .4s ease}
.cp-report:hover,.cp-report:focus-visible{border-color:var(--cyan);outline:none}.cp-report:hover svg{transform:rotate(-8deg)}
.cp-st.on{color:#5ee8a8}

/* your own bubbles as soft tinted glass instead of the bright gradient, so emoji and text read easily; emoji-only
   messages show big with no bubble at all (the user, 2026-10-16; assets/social.js emojiOnly) */
.cp-b.me,.msg-b.me{background:linear-gradient(120deg,rgba(103,232,249,.2),rgba(167,139,250,.24));border:1px solid rgba(125,211,252,.28);color:#f1f5f9}
.cp-b.me time,.msg-b.me time{color:#cbd5e1}
.cp-b.emo,.msg-b.emo{background:none;border-color:transparent;padding:0 .1rem}
.cp-b.emo p{font-size:2.1rem;line-height:1.15}.msg-b.emo p{font-size:2.4rem;line-height:1.15}
.cp-b.emo time,.msg-b.emo time{color:#a9b6c8}

/* the message box: no scrollbar or arrows inside it (the user, 2026-10-17), it still scrolls once a message gets long;
   the placeholder stays on one line */
.cp-form textarea,.msg-form textarea{scrollbar-width:none;overflow-y:auto}
.cp-form textarea::-webkit-scrollbar,.msg-form textarea::-webkit-scrollbar{display:none}
.cp-form textarea::placeholder,.msg-form textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* links in messages, and a card for Soulflake links (assets/social.js msgHTML) */
.cp-b a,.msg-b a{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.cp-b.them a,.msg-b.them a{color:#a5f3fc}
.sf-lcard{display:flex;align-items:center;gap:.6rem;margin-top:.45rem;padding:.55rem .7rem;border-radius:12px;border:1px solid rgba(103,232,249,.3);background:rgba(7,11,20,.45);color:var(--frost)!important;text-decoration:none!important;word-break:normal!important}
.sf-lcard:hover{border-color:var(--cyan)}
.sf-lc-ic{flex:none;display:inline-grid;place-items:center;width:38px;height:28px}.sf-lc-ic svg{width:100%;height:100%}
.sf-lc-t{display:flex;flex-direction:column;min-width:0}.sf-lc-t b{font-size:.9rem;font-weight:600}.sf-lc-t small{font-size:.76rem;color:#a9b6c8;line-height:1.3}
/* the share button and its menu (assets/social.js) */
.sh-btn svg{width:18px;height:18px}
.sh-pop{display:flex;flex-direction:column;gap:4px;padding:6px}
.sh-pop>button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .6rem;border:0;border-radius:10px;background:none;color:var(--frost);text-align:left;font:inherit;cursor:pointer}
.sh-pop>button:hover,.sh-pop>button:focus-visible{background:rgba(103,232,249,.1);outline:none}
.sh-pop b{display:block;font-size:.9rem;font-weight:600}.sh-pop small{display:block;font-size:.76rem;color:#a9b6c8}
.sh-st:empty{display:none}.sh-st{margin:.2rem .5rem .3rem;color:#a5f3fc;font-size:.8rem}

/* photos in chats (assets/social.js) */
.sf-mimg{display:block;max-width:100%;max-height:260px;margin:.1rem 0 .35rem;border-radius:10px;cursor:zoom-in;background:rgba(248,250,252,.05);min-height:60px;min-width:80px;object-fit:contain}
.sf-mimg-x{display:block;margin:.2rem 0;color:#a9b6c8;font-size:.8rem;font-style:italic}
.sf-photo-st{margin:0 .9rem .3rem;color:#a5f3fc;font-size:.82rem}
.sf-photo-view{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(3,6,12,.9);cursor:zoom-out}
.sf-photo-view img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
/* the share menu, compact (the user, 2026-10-17): its own look, not the emoji grid's square buttons */
.sh-pop{position:fixed;z-index:80;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:14px;background:#0b1220;border:1px solid rgba(103,232,249,.3);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.sh-pop[hidden]{display:none}
.sh-pop>button{aspect-ratio:auto;display:flex;align-items:center;gap:.6rem;min-height:0;padding:.45rem .55rem;font-size:inherit;line-height:1.3}
.sh-pop .sf-lc-ic{width:30px;height:22px;font-size:1.1rem}

/* the account menu's shortcut to Connections, under Connect with someone */
.pm-invite .pm-people{display:block;margin-top:.15rem;color:var(--cyan);font-size:.85rem;font-weight:600;text-decoration:none}
.pm-invite .pm-people:hover{text-decoration:underline}

/* Account settings: how your share card last saved (assets/settings.js) */
.set-card-ok{color:#5ee8a8}.set-card-bad{color:#fca5a5}

/* tab rows wider than the screen (assets/tab-track.js): an arrow and a fade on each side that has more */
.tb-arr{display:none}
.tb-on>.tb-arr{display:grid;place-items:center;position:sticky;z-index:2;flex:none;width:34px;min-height:42px;margin:0;padding:0;border:0;border-radius:12px;color:#e0f2fe;font:400 1.6rem/1 Inter,system-ui,sans-serif;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.tb-on>.tb-prev{left:0;margin-right:-34px;background:linear-gradient(90deg,rgba(14,20,38,1) 45%,rgba(14,20,38,0))}
.tb-on>.tb-next{right:0;margin-left:-34px;background:linear-gradient(270deg,rgba(14,20,38,1) 45%,rgba(14,20,38,0))}
.tb-on.tb-l>.tb-prev,.tb-on.tb-r>.tb-next{opacity:1;pointer-events:auto}
.pt-tabs.tb-on,.ty-tabs.tb-on,.rd-page.tb-on{-webkit-mask-image:none;mask-image:none}

/* the founder-only Store row in the menu (assets/nav.js) */
.mi-soon{margin-left:.4rem;color:#fcd34d;font-size:.72rem;letter-spacing:.04em}

/* the finishing moment (assets/guide.js): sparkles, the glow, and what just changed */
.sfg-spark{position:fixed;z-index:200;width:8px;height:8px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#f0f9ff 0,#a5f3fc 40%,rgba(165,243,252,0) 70%);transform:translate(-50%,-50%)}
.sfg-cv{animation:sfgCv 1.8s ease-out 1}
@keyframes sfgCv{0%{filter:drop-shadow(0 0 0 rgba(103,232,249,0))}40%{filter:drop-shadow(0 0 18px rgba(103,232,249,.85))}100%{filter:drop-shadow(0 0 4px rgba(103,232,249,.25))}}
canvas.sfg-glow{animation:sfgGlow 1.4s ease-in-out 3}
@keyframes sfgGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(103,232,249,0))}50%{filter:drop-shadow(0 0 14px rgba(103,232,249,.8))}}
.sfg-justnew{position:relative}
.sfg-justnew::after{content:"\2726";position:absolute;top:-.35em;right:-.2em;color:#a5f3fc;font-size:.85em;text-shadow:0 0 8px rgba(103,232,249,.9);animation:sfgTw 1.2s ease-in-out infinite;pointer-events:none}
.pt-tab.sfg-justnew{box-shadow:0 0 0 1px rgba(103,232,249,.7),0 0 16px rgba(103,232,249,.35)}
@keyframes sfgTw{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.sfg-cv,canvas.sfg-glow,.sfg-justnew::after{animation:none}}

/* editing your own message (assets/social.js editOpen): Edit in the reaction bar, and a small editor at the bottom */
.react-bar .react-edit{width:auto;padding:0 .7rem;border-left:1px solid rgba(248,250,252,.14);border-radius:0 999px 999px 0;font:600 .8rem Inter,system-ui,sans-serif;color:#a5f3fc}
.react-bar .react-edit[hidden]{display:none}
.msg-edit{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom,0px));z-index:95;transform:translateX(-50%);width:min(30rem,calc(100% - 2rem));padding:.9rem 1rem;border-radius:16px;background:#0e1426;border:1px solid rgba(103,232,249,.35);box-shadow:0 18px 48px rgba(0,0,0,.6)}
.msg-edit-k{margin:0 0 .45rem;font:600 .72rem/1.2 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#a5f3fc}
.msg-edit textarea{width:100%;box-sizing:border-box;resize:vertical;padding:.6rem .7rem;border-radius:10px;border:1px solid rgba(248,250,252,.16);background:rgba(248,250,252,.04);color:#f8fafc;font:400 1rem/1.45 Inter,system-ui,sans-serif}
.msg-edit-s{margin:.35rem 0 0;color:#8a96a8;font-size:.8rem}
.msg-edit-b{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.6rem}
.msg-edit-st{margin:.4rem 0 0;color:#fbbf77;font-size:.84rem}.msg-edit-st:empty{display:none}

/* unsend (assets/social.js): beside Edit in the reaction bar, and a small note that goes on its own */
.react-bar .react-unsend{border-radius:0 999px 999px 0;color:#fca5a5}
.react-bar .react-edit:not([hidden]) + .react-unsend:not([hidden]){border-left:1px solid rgba(248,250,252,.14)}
.react-bar .react-edit.mid{border-radius:0}
.msg-toast{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom,0px));z-index:96;transform:translateX(-50%);max-width:calc(100% - 2rem);margin:0;padding:.6rem .9rem;border-radius:12px;background:#0e1426;border:1px solid rgba(251,191,119,.5);color:#fde8cc;font-size:.88rem;box-shadow:0 12px 32px rgba(0,0,0,.5)}

/* voice typing in chat (assets/social.js micHTML): the microphone beside the emoji button, glowing while it listens */
.mic-btn{display:grid;place-items:center;color:#cbd5e1;filter:none}
.mic-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mic-btn.on{background:rgba(248,113,113,.22);color:#fecaca;box-shadow:0 0 0 2px rgba(248,113,113,.55);animation:mic-pulse 1.4s ease-in-out infinite}
@keyframes mic-pulse{50%{box-shadow:0 0 0 6px rgba(248,113,113,.15)}}
@media(prefers-reduced-motion:reduce){.mic-btn.on{animation:none}}

/* Settings > Notifications: one table, On Soulflake and By email (assets/notify.js prefsCard) */
.notif-fold>summary{cursor:pointer;color:#a5f3fc;font-weight:600;margin:.2rem 0 .6rem}
.notif-tw{overflow-x:auto;max-width:100%}
.notif-t{width:100%;border-collapse:collapse;font-size:.9rem}
.notif-t thead th{padding:.3rem .5rem;font:600 .68rem/1.2 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#a9b6c8;text-align:center}
.notif-t tbody th{padding:.5rem .4rem .5rem 0;text-align:left;font-weight:400;color:#e2e8f0}
.notif-t td{padding:.4rem .5rem;text-align:center;border-bottom:1px solid rgba(248,250,252,.05)}
.notif-t tbody th{border-bottom:1px solid rgba(248,250,252,.05)}
.notif-t td small{color:#64748b;font-size:.76rem}
.notif-t tr.notif-g th{padding:.9rem 0 .25rem;border:0;font:600 .7rem/1.2 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#c4b5fd}
.notif-t input{width:18px;height:18px;accent-color:#67e8f9;cursor:pointer}
.notif-email-st:empty{display:none}
/* the chat button in the header, between the bell and your account (assets/social.js, 2026-10-22); the Quick chat
   drops down under the header from the right, like the notifications */
.bar .chat-btn.hd-chat{position:relative;right:auto;bottom:auto;z-index:auto;width:38px;height:38px;flex:0 0 auto;border:0;border-radius:10px;background:none;box-shadow:none;color:var(--graphite);animation:none;transform:none}
.bar .chat-btn.hd-chat:hover{color:var(--frost);transform:none}
.bar .chat-btn.hd-chat svg{width:21px;height:21px;stroke-width:1.7}
.bar .chat-btn.hd-chat em{top:2px;right:0;min-width:17px;height:17px;font-size:10px;line-height:17px;box-shadow:0 0 0 2px #070b14}
.bar .chat-btn.hd-chat.waiting{color:#fdba74}
body.chat-open .bar .chat-btn.hd-chat{color:var(--cyan)}
.chat-pop{top:calc(var(--bar-h) + 8px);bottom:auto;height:min(540px,calc(100svh - var(--bar-h) - 24px))}
@media(max-width:560px){.bar .chat-btn.hd-chat{width:30px;height:36px}.bar .chat-btn.hd-chat svg{width:19px;height:19px}
  .chat-pop{top:calc(var(--bar-h) + 6px);bottom:auto;height:min(460px,62svh)}}
@media(max-width:768px){.chat-pop.kb{top:auto}}
/* the conversation list fits its contents, up to the usual height, then scrolls (assets/chat-pop.js cp-listview) */
.chat-pop.cp-listview:not(.kb){height:auto;max-height:min(540px,calc(100svh - var(--bar-h) - 24px))}.chat-pop.cp-listview .cp-body{flex:0 1 auto;padding-bottom:6px}
@media(max-width:560px){.chat-pop.cp-listview:not(.kb){max-height:min(460px,62svh)}}
/* the chat button's online dot matches the account picture's, and the icon is a touch larger (the user, 2026-10-22) */
.bar .chat-btn.hd-chat svg{width:27px;height:27px}
.bar .chat-btn.hd-chat .cb-on{left:auto;right:4px;bottom:6px;width:9px;height:9px;border-width:2px;box-shadow:none}
@media(max-width:560px){.bar .chat-btn.hd-chat svg{width:24px;height:24px}.bar .chat-btn.hd-chat .cb-on{right:2px;bottom:7px;width:8px;height:8px}}
/* the finish card, about the test you just took (assets/guide.js reveal, 2026-10-22) */
.sfg-about{margin:.2rem auto .8rem;max-width:30rem;color:#d3dbe6;font-size:1rem;line-height:1.5;text-align:center}
.sfg-with{margin:.4rem auto .9rem;max-width:28rem;color:#a5f3fc;font:italic 400 1.05rem/1.4 "Instrument Serif",Georgia,serif;text-align:center}

/* the creator's online count (assets/social.js onlineAll, 2026-10-23): a small violet count on the chat button for people
   online who aren't your connections, and a line at the top of Quick chat */
.chat-btn .cb-all{position:absolute;top:2px;left:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#a78bfa;color:#070B14;font:700 10px/16px Inter,sans-serif;text-align:center;box-shadow:0 0 0 2px #070B14,0 0 10px rgba(167,139,250,.55)}
.cp-live{display:flex;align-items:center;gap:6px;color:#c4b5fd!important}.cp-live i{width:7px;height:7px;border-radius:50%;background:#a78bfa;box-shadow:0 0 6px rgba(167,139,250,.8)}
.cp-live .adm-eye{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;opacity:.7}
.cp-live.cp-none{color:#94a3b8!important}.cp-live.cp-none i{background:#64748b;box-shadow:none}
.cp-live{flex-wrap:wrap}.cp-live .cp-last{order:2;flex-basis:100%;padding-left:13px;opacity:.85}

/* pinned conversations (Daily Soulscope, Feedback) wear a pin; Feedback is anonymous notes to the creator (assets/soulscope.js SFFbChat) */
.pin-ic{display:inline-block;width:12px;height:12px;margin-left:4px;vertical-align:-1px;fill:none;stroke:#94a3b8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(35deg)}
.fbc-face{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;color:#fcd34d;background:radial-gradient(circle at 35% 30%,rgba(252,211,77,.28),rgba(167,139,250,.22) 70%);border:1px solid rgba(252,211,77,.3)}
.cp-head .fbc-face,.msg-th .fbc-face{width:30px;height:30px;font-size:14px}
.fbc-row{list-style:none;padding:2px 0 4px}
.cp-list .fbc-row button.fbc-bar,.msg-list .fbc-row button.fbc-bar,.fbc-bar{width:50%!important;min-width:170px;display:flex!important;align-items:center;gap:6px;padding:3px 10px!important;border-radius:999px!important;border:1px solid rgba(252,211,77,.22)!important;background:rgba(252,211,77,.06)!important;color:#e2e8f0;font:500 12.5px/1.3 Inter,system-ui,sans-serif;cursor:pointer;text-align:left}
.fbc-bar span{color:#fcd34d;font-size:12px}.fbc-bar b{font-weight:600}.fbc-bar small{color:#94a3b8;font-size:11.5px}.fbc-bar .pin-ic{margin-left:auto}
.fbc-bar:hover{background:rgba(252,211,77,.12)!important}
.fbc-in small{display:block;margin-top:.3rem;color:#94a3b8;font-size:.78rem}
.fbc-new{display:none;margin-left:4px;font-style:normal;color:#fcd34d;text-shadow:0 0 6px rgba(252,211,77,.9);animation:sf-fb-twinkle 1.6s ease-in-out infinite}html.sf-fb-new .fbc-new{display:inline-block}
.scope-thread ~ .fbc-st,.fbc-st{font-size:.78rem}
.fbc-thread{display:flex;flex-direction:column;gap:.55rem}
.fbc-note .fbc-small{margin-top:.45rem;font-size:.84rem;color:#cbd5e1}.fbc-note a{color:var(--cyan)}
.fbc-sent{display:flex;flex-direction:column;gap:.5rem}
.fbc-b{align-self:flex-end;max-width:88%;padding:.55rem .75rem;border-radius:16px;border-bottom-right-radius:5px;background:rgba(167,139,250,.2);border:1px solid rgba(167,139,250,.3)}
.fbc-b p{margin:0;color:#f1f5f9;font-size:.92rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.fbc-b small{display:block;margin-top:.2rem;font-size:.72rem;color:#cbd5e1}
.fbc-form{display:flex;gap:.45rem;align-items:flex-end;padding:.55rem .6rem 0}
.fbc-form textarea{flex:1;min-width:0;resize:none;padding:.55rem .7rem;border-radius:14px;border:1px solid rgba(248,250,252,.16);background:rgba(7,11,20,.55);color:#f1f5f9;font:inherit;font-size:.95rem}
.fbc-go{flex:none;padding:.55rem .9rem;border-radius:999px;border:1px solid rgba(252,211,77,.4);background:rgba(252,211,77,.12);color:#fde68a;font:600 .88rem Inter,sans-serif;cursor:pointer}.fbc-go:disabled{opacity:.5}
.fbc-st{margin:.3rem .7rem .5rem;min-height:1em;font-size:.82rem;color:#cbd5e1}
/* Chat: who's online on top, everyone offline under a fold */
.cp-sec{display:flex;align-items:center;justify-content:space-between;width:100%;margin:.55rem 0 .1rem;padding:.2rem .7rem;border:0;background:none;font:700 .68rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8;text-align:left}
/* offline people are grayed out (the user, 2026-10-23) */
.cp-list button.cp-off .cp-lt b{color:#8792a6}.cp-list button.cp-off .cp-fw{opacity:.5;filter:grayscale(.7)}
.cp-fold{cursor:pointer}.cp-fold:hover{color:#e2e8f0}.cp-fold i{font-style:normal;font-size:.8rem}

/* new feedback for the creator: a gold sparkle on the account button and on the Feedback inbox row (assets/nav.js) */
html.sf-fb-new .profile-btn::after{content:'\2726';position:absolute;top:-2px;right:-4px;font-size:12px;line-height:1;color:#fcd34d;text-shadow:0 0 6px rgba(252,211,77,.9),0 0 12px rgba(252,211,77,.5);animation:sf-fb-twinkle 1.6s ease-in-out infinite;pointer-events:none}
html.sf-fb-new .pm-item[href="/feedback/?inbox"] span::after{content:'\2726';margin-left:6px;font-size:13px;color:#fcd34d;text-shadow:0 0 6px rgba(252,211,77,.9);display:inline-block;animation:sf-fb-twinkle 1.6s ease-in-out infinite}
html.sf-fb-new .pm-item[href="/feedback/?inbox"]{background:rgba(252,211,77,.08)}
@keyframes sf-fb-twinkle{0%,100%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.55;transform:scale(.8) rotate(20deg)}}
@media(prefers-reduced-motion:reduce){html.sf-fb-new .profile-btn::after,html.sf-fb-new .pm-item[href="/feedback/?inbox"] span::after{animation:none}}

/* phones turned sideways (a touch screen that's short and wide; the user, 2026-10-23: "I have very little window to
   actually read any text, and the text is too big ... condense things when it knows that it's a phone on landscape
   mode"): everything a notch smaller, and only the header stays pinned; the facet row and the tab rows scroll away
   with the page so most of the screen is for reading. The home page's Soulflake and words sit centered as a pair */
@media (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:560px){
  html{font-size:14px}
  .rd-wrap.wrap,.home-main>.rd-side,.pt-tabs,.cv-tabs,:root .pp-tabs.pp-tabs,:root .ty-tabs.ty-tabs,.bt-tabs,.cs-toc{position:static!important}
  .home-started .home-hero{grid-template-columns:auto minmax(0,24rem)!important;justify-content:center;column-gap:clamp(1.5rem,5vw,3rem)!important}
}

/* a new connection: what just opened up (assets/connect.js connGuide), and the sparkle on each facet's Compare tab */
.cg-card{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom, 0px));z-index:70;width:min(440px,calc(100vw - 24px));padding:1.1rem 1.2rem 1rem;border-radius:20px;background:rgba(11,17,32,.97);border:1px solid rgba(252,211,77,.4);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(252,211,77,.12);color:#e2e8f0;transform:translate(-50%,24px);opacity:0;transition:transform .4s cubic-bezier(.2,1.2,.4,1),opacity .3s}
.cg-card.on{transform:translate(-50%,0);opacity:1}
.cg-x{position:absolute;top:.4rem;right:.6rem;border:0;background:none;color:#a9b6c8;font-size:1.3rem;cursor:pointer}
.cg-k{margin:0 0 .2rem;font:700 .7rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fcd34d}
.cg-card h3{margin:0 0 .4rem;font:400 1.5rem/1.15 "Instrument Serif",Georgia,serif;color:#f8fafc}
.cg-card p{margin:0 0 .4rem;font-size:.92rem}
.cg-card ul{margin:0 0 .8rem;padding:0;list-style:none;display:grid;gap:.45rem}
.cg-card li{font-size:.88rem;line-height:1.45;color:#cbd5e1}.cg-card li b{display:block;color:#f8fafc;font-size:.92rem}
.cg-acts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.pt-new{margin-left:5px;font-style:normal;color:#fcd34d;text-shadow:0 0 6px rgba(252,211,77,.9);animation:sf-fb-twinkle 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.pt-new{animation:none}.cg-card{transition:none}}