/* The path (assets/journey.js) lives inside the home page (the user, 2026-10-15: "it doesn't feel like I'm on the
   homepage anymore"): no layer on top. Your own Soulflake stays where it is, turning and growing as you answer, the
   facet row and the snow stay, and only the words beside the Soulflake (greeting, next step) give way to the path. */
.jr{display:none;width:100%;min-width:0}
.jr.on{display:block;animation:jr-in .35s ease-out}
@keyframes jr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html.jr-open .home-hero>:not(.hero-stage):not(.jr){display:none!important}
html.jr-open .home-hero{min-height:0}
.jr-in{position:relative;width:100%;max-width:38rem;transition:opacity .3s ease,transform .3s ease}
.jr.jr-thru .jr-in{opacity:0;transform:scale(.97)}
.jr-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0 0 .4rem}
.jr-x{display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .9rem;border-radius:999px;border:1px solid rgba(248,250,252,.16);background:rgba(12,18,32,.7);color:#cbd5e1;font:600 .9rem Inter,sans-serif;cursor:pointer}
.jr-x:hover{color:var(--frost);border-color:var(--cyan)}
.jr-k{margin:0;color:var(--cyan);font:600 .78rem/1.2 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.jr-bar{height:4px;margin:.5rem 0 1.2rem;border-radius:999px;background:rgba(248,250,252,.08);overflow:hidden}
.jr-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.jr-up{margin:0;color:#a9b6c8;font-size:.95rem}
.jr-h{margin:.1rem 0 .6rem;font:400 clamp(1.9rem,5.5vw,2.6rem)/1.08 "Instrument Serif",Georgia,serif;color:var(--frost)}
.jr-h small{display:block;margin-top:.25rem;font:500 1.02rem/1.3 Inter,sans-serif;color:#cbd5e1}
.jr-p{margin:0 0 1.1rem;color:#cbd5e1;font-size:1rem;line-height:1.55}
.jr-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:.9rem}
.jr-count{margin:.5rem 0 0;color:#a9b6c8;font-size:.9rem}.jr-count b{color:var(--frost);font-weight:600}
.jr .pr-ask{margin-top:1rem}
.jr .pr-item{min-height:0;margin-bottom:1rem;font-size:clamp(1.6rem,5.5vw,2.2rem)}
.jr .pr-opts{gap:6px}.jr .pr-opt{min-height:44px}
.jr-moods{grid-template-columns:repeat(3,minmax(0,1fr))}
.jr-card{padding:1.2rem 1.2rem 1rem;border-radius:18px;border:1px solid rgba(167,139,250,.4);background:radial-gradient(120% 90% at 0 0,rgba(167,139,250,.14),rgba(12,18,32,.8) 60%)}
.jr-spark::before{content:"\2726  ";color:#c4b5fd}
.jr-finds{margin:.2rem 0 .9rem;padding-left:1.1rem;color:#e2e8f0;line-height:1.55}.jr-finds li::marker{color:var(--cyan)}
.jr-dust{position:fixed;inset:0;z-index:95;pointer-events:none}
.jr-dust i{position:absolute;left:0;top:0;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(196,181,253,.9),0 0 14px 4px rgba(103,232,249,.6)}
/* your Soulflake beside the path: a little smaller on phones so a question and all its answers fit one screen, and a
   glow with each answer */
html.jr-open .home-hero .hero-stage.jr-pulse{animation:jr-pulse .6s ease-out}
@keyframes jr-pulse{0%{filter:brightness(1)}35%{filter:brightness(1.5) drop-shadow(0 0 22px rgba(103,232,249,.5))}100%{filter:brightness(1)}}
/* the facet button the dust lands in: a burst, then it keeps the sparkle of anything new (assets/header.css .rdc-new) */
.rd-row a.rdc.jr-lit{animation:jr-lit 1.6s ease-out}
@keyframes jr-lit{0%{box-shadow:0 0 0 0 rgba(196,181,253,.9)}30%{box-shadow:0 0 0 6px rgba(196,181,253,.5),0 0 24px 6px rgba(103,232,249,.6)}100%{box-shadow:0 0 0 0 rgba(196,181,253,0)}}
/* the button on the home page: right after the next step on phones, under the facet row on wide screens */
.jr-cta{order:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .9rem;margin:.9rem 0 0}
.jr-cta span{color:#94a0b4;font-size:.82rem;font-style:italic;line-height:1.4}
/* the line before Guide me: the two ways in (assets/journey.js paintCta) */
.jr-lead{flex-basis:100%;margin:0;color:#a9b4c4;font-size:.86rem;font-style:italic;line-height:1.45;text-align:inherit}
@media(min-width:1000px){
  .home-started .home-hero>.jr-cta{grid-row:7;justify-self:start;justify-content:flex-start}
  html.jr-open .home-hero>.jr{grid-column:2;grid-row:2/9;align-self:center;text-align:left}
}
@media(max-width:999px){
  html.jr-open .home-hero{justify-content:flex-start;padding-top:.4rem}
  html.jr-open .home-hero .hero-stage{width:min(44vw,190px,24svh)!important;margin:0 auto .4rem!important}
  html.jr-open .home-hero>.jr{order:5;text-align:left}
}
@media(prefers-reduced-motion:reduce){.jr.on,.jr-in{animation:none;transition:none}.rd-row a.rdc.jr-lit,html.jr-open .home-hero .hero-stage.jr-pulse{animation:none}}
html.jr-open .wh{display:none!important}
.jr .pr-ask{margin:.9rem 0 .2rem}.jr .pr-item{margin-top:0}
@media(max-width:999px){html.jr-open .home-hero .hero-stage{width:min(58vw,240px,30svh)!important}}
/* one phone screen for a question and every answer (the user, 2026-10-15: no scrolling to see the options). The home
   page's heading style no longer reaches the question, and everything else gets a little tighter */
html.jr-open .jr .pr-item{margin:0 0 .7rem!important;line-height:1.12;min-height:0}
@media(max-width:999px){
  html.jr-open .home-hero{padding-top:.2rem;padding-bottom:.6rem}
  html.jr-open .home-hero .hero-stage{width:min(40vw,170px,23svh)!important;margin:0 auto .2rem!important}
  .jr-top{margin:0}
  .jr-x{padding:.3rem .75rem;font-size:.84rem}
  .jr-bar{margin:.35rem 0 .8rem}.jr-qbar{margin-top:.45rem}
  .jr-count{margin-top:.35rem;font-size:.86rem}
  .jr .pr-ask{margin:.55rem 0 .15rem;font-size:.9rem}
  html.jr-open .jr .pr-item{font-size:clamp(1.4rem,6.2vw,1.85rem)!important;margin-bottom:.55rem!important}
  .jr .pr-opts{gap:5px}
  .jr .pr-opt{min-height:40px;padding-top:.4rem;padding-bottom:.4rem;font-size:.97rem;border-radius:12px}
  .jr .q-help{margin:-.2rem 0 .45rem}
  .jr-nav{margin-top:.45rem}.jr-pause2{display:none}
  .jr .gr-credit{margin:.35rem 0 0;font-size:.74rem}
}
@media(max-width:700px){
  /* phones only since 2026-10-21 (the user: on a split screen it sat oddly at the top with empty space below); */
  /* the chat bubble stays during Guide me (the user, 2026-10-17), moved up out of the answers' way: smaller, top right,
     just under the facet row (it used to be hidden because it sat on top of the answers) */
}
@media(max-width:999px) and (max-height:720px){
  html.jr-open .home-hero .hero-stage{width:min(36vw,140px,19svh)!important}
  .jr .pr-opt{min-height:38px}
  html.jr-open .jr .pr-item{font-size:clamp(1.3rem,5.8vw,1.7rem)!important}
}
.jr-top .jr-count{margin:0;flex:1;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-qbar{margin:.45rem 0 0}
/* one button on the home page: Follow the path (the user, 2026-10-15); its old "Explore next" pill steps aside, and
   insights waiting to be read are a small link under the button */
html.jr-ready .home-started .home-hero>.hd-step{display:none!important}
.jr-cta span{max-width:34rem}
.jr-new{color:var(--cyan);font-weight:600;text-decoration:none;white-space:nowrap}.jr-new:hover{text-decoration:underline}
@media(min-width:1000px){.home-started .home-hero>.jr-cta{grid-row:4}}
/* phones: the "Next" line sits under the button, clear of the chat bubble */
@media(max-width:999px){.jr-cta{flex-direction:column;gap:.45rem}.jr-cta>span{text-align:center;padding:0 2rem;text-wrap:balance}.jr-cta>span span{padding:0}.jr-cta .jr-dot{display:block;height:0;overflow:hidden}.jr-cta .jr-new{display:block}.jr-lead{text-align:center;padding:0 1.5rem;text-wrap:balance}}
/* a glimpse: a small "So far" card that slides up over the answers and never blocks them (assets/journey.js glimpse) */
.jr-gl{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:96;display:flex;align-items:center;gap:.7rem;width:min(26rem,calc(100% - 32px));padding:.7rem .7rem .7rem .9rem;border-radius:16px;border:1px solid rgba(167,139,250,.5);background:radial-gradient(120% 140% at 0 0,rgba(167,139,250,.22),rgba(12,18,32,.96) 60%);box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 24px rgba(167,139,250,.25);transform:translate(-50%,120%);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s ease;pointer-events:none}
.jr-gl.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.jr-gl p{flex:1;min-width:0;margin:0;color:#e2e8f0;font-size:.98rem;line-height:1.4}.jr-gl b{color:#fff}
.jr-gl small{display:block;color:#c4b5fd;font:600 .72rem/1.3 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.jr-gl-s{flex:none;color:#c4b5fd;font-style:normal;font-size:1.2rem;animation:jr-gl-s 2.4s ease-in-out infinite}
@keyframes jr-gl-s{50%{transform:scale(1.25) rotate(20deg);text-shadow:0 0 12px rgba(196,181,253,.9)}}
.jr-gl-x{flex:none;padding:.35rem .8rem;border-radius:999px;border:1px solid rgba(196,181,253,.5);background:rgba(167,139,250,.14);color:#ede9fe;font:600 .85rem Inter,sans-serif;cursor:pointer}
@media(prefers-reduced-motion:reduce){.jr-gl{transition:opacity .2s}.jr-gl-s{animation:none}}
@media(max-width:999px){.jr-gl{bottom:auto;top:calc(var(--bar-h,56px) + 64px);transform:translate(-50%,-30%)}.jr-gl.on{transform:translate(-50%,0)}}
@media(max-width:999px){.jr-top .jr-count{white-space:normal;line-height:1.3;font-size:.8rem}}
/* the close-up of the part you're building (assets/journey.js focusOn): it takes the Soulflake's place while you answer */
html.jr-open .home-hero .hero-stage>:not(.jr-focus){opacity:0;transition:opacity .5s ease}
.jr-focus{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;animation:jr-zoom .7s cubic-bezier(.2,.8,.3,1)}
@keyframes jr-zoom{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
.jr-focus canvas{flex:1 1 auto;width:100%;min-height:0}
/* the six sliders under the trait crystals, moving as you answer; the one this question measures lights up */
.jr-sl{display:none;flex:none;width:min(100%,30rem);grid-template-columns:1fr 1fr;gap:.3rem 1rem;padding:.2rem .2rem .3rem}
.jr-has-sl .jr-sl{display:grid}
.jr-sl span{display:grid;gap:3px;min-width:0;opacity:.7;transition:opacity .3s}
.jr-sl span.on{opacity:1}
.jr-sl b{font:600 .7rem/1.1 Inter,sans-serif;color:#a9b6c8;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-sl span.on b{color:var(--cyan)}
.jr-sl i{position:relative;display:block;height:4px;border-radius:999px;background:rgba(248,250,252,.1)}
.jr-sl i::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(248,250,252,.2)}
.jr-sl em{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#e2e8f0;transition:left .6s cubic-bezier(.3,.9,.3,1)}
.jr-sl span.on em{background:var(--cyan);box-shadow:0 0 8px rgba(103,232,249,.8)}
.jr-sl span.none em{opacity:.3}
/* phones: the questions sit at the bottom of the screen and the close-up gets all the room above them */
@media(max-width:999px){
  html.jr-open .home-hero{height:var(--jr-h,auto);min-height:0!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;padding:.2rem 0 .5rem!important;box-sizing:border-box}
  html.jr-open .home-hero .hero-stage{flex:1 1 auto!important;width:100%!important;max-width:none!important;height:auto!important;min-height:110px;aspect-ratio:auto!important;margin:0!important;position:relative}
  html.jr-open .home-hero>.jr{flex:none!important;order:5}
}
@media(prefers-reduced-motion:reduce){.jr-focus{animation:none}.jr-sl em{transition:none}}
@media(max-width:999px){
  html.jr-open .jr .q-help{margin:0 0 .4rem!important}
  html.jr-open .jr .jr-nav{margin-top:.3rem;min-height:0}.jr-nav .pr-link{padding:.2rem 0;font-size:.85rem}
}
/* the facet you're answering lights up in the facet row, like the tab you're on (same look: assets/header.css) */
html[data-jr-facet="mood"] .rd-row a.rdc[href="/mood/"],html[data-jr-facet="personality"] .rd-row a.rdc[href="/personality/"],html[data-jr-facet="interests"] .rd-row a.rdc[href="/interests/"],html[data-jr-facet="strengths"] .rd-row a.rdc[href="/strengths/"],html[data-jr-facet="values"] .rd-row a.rdc[href="/values/"],html[data-jr-facet="relationships"] .rd-row a.rdc[href="/relationships/"],html[data-jr-facet="drive"] .rd-row a.rdc[href="/drive/"],html[data-jr-facet="behavior"] .rd-row a.rdc[href="/behavior/"],html[data-jr-facet="story"] .rd-row a.rdc[href="/story/"]{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)}
/* achievement pop-ups move to the top while you're on the path, so the answers stay tappable */
@media(max-width:999px){html.jr-open .ach-pop{bottom:auto;top:calc(var(--bar-h,56px) + 64px)}}
/* an open explanation gets the room it needs on phones: the close-up gives way first */
@media(max-width:999px){html.jr-open .home-hero:has(.jr .q-help:not([hidden])) .hero-stage{min-height:0!important;flex-basis:0!important}
  .jr .q-help p{font-size:.92rem;line-height:1.45;padding:.55rem .75rem}}
/* the close-up as a small round window beside the question (phones, explanation open) */
.jr-focus.jr-mini{position:relative;inset:auto;float:right;width:88px;height:88px;margin:.15rem 0 .3rem .6rem;border-radius:50%;overflow:hidden;
  border:1px solid rgba(103,232,249,.35);background:radial-gradient(circle,rgba(103,232,249,.08),rgba(7,11,20,.6) 70%);box-shadow:0 0 18px rgba(103,232,249,.18);animation:jr-mini .45s cubic-bezier(.2,.8,.3,1)}
@keyframes jr-mini{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.jr-focus.jr-mini .jr-sl{display:none!important}
.jr-focus.jr-mini canvas{width:100%;height:100%}
@media(max-width:640px){.q-help p.q-help-opts{flex-wrap:nowrap!important;gap:.8rem!important;font-size:.76rem!important;white-space:nowrap;padding:0 .2rem!important;background:none!important;border:0!important}
  .q-help p.q-help-opts label{display:inline-flex}}

/* Follow the path catches the eye without shouting (the user, 2026-10-16): a slowly turning ice-to-violet edge,
   a soft breathing glow, a light shimmer every few seconds, and two tiny sparkles that twinkle in turn */
@property --jr-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn.jr-go{position:relative;isolation:isolate;overflow:visible;border-color:transparent;background:rgba(12,18,32,.85);color:#f8fafc;
  animation:jr-breathe 4.5s ease-in-out infinite}
.btn.jr-go::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--jr-a),rgba(103,232,249,.95),rgba(167,139,250,.95),rgba(103,232,249,.25),rgba(167,139,250,.25),rgba(103,232,249,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:jr-turn 6s linear infinite}
.btn.jr-go::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:jr-shine 7s ease-in-out infinite 1.5s}
.btn.jr-go:hover{background:rgba(20,30,52,.92);animation-duration:3s}
.jr-sp{position:absolute;width:9px;height:9px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 1px,transparent 1.6px),linear-gradient(#fff,#fff) center/1px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 1px no-repeat;
  filter:drop-shadow(0 0 3px rgba(165,243,252,.9));animation:jr-twinkle 5s ease-in-out infinite}
.jr-sp.a{top:-5px;right:14px}.jr-sp.b{bottom:-5px;left:16px;animation-delay:2.5s;width:7px;height:7px}
@keyframes jr-turn{to{--jr-a:360deg}}
@keyframes jr-breathe{0%,100%{box-shadow:0 0 0 rgba(103,232,249,0),0 0 14px rgba(103,232,249,.12)}50%{box-shadow:0 0 0 rgba(103,232,249,0),0 0 24px rgba(125,211,252,.3)}}
@keyframes jr-shine{0%,70%{background-position:150% 0}100%{background-position:-50% 0}}
@keyframes jr-twinkle{0%,62%,100%{opacity:0;transform:scale(.4) rotate(0)}74%{opacity:1;transform:scale(1) rotate(45deg)}86%{opacity:0;transform:scale(.5) rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.btn.jr-go,.btn.jr-go::before,.btn.jr-go::after{animation:none}.jr-sp{display:none}.btn.jr-go{box-shadow:0 0 18px rgba(103,232,249,.2)}}
@media(max-width:999px){html.jr-open.jr-tight .home-hero .hero-stage{flex:0 0 0!important;min-height:0!important}}
/* when a long explanation pulls the question up under the facet row (html.jr-tight), the bubble sits on the facet
   row's faded right end instead, so it never covers the question's counter */

/* home: comparing as the next step (assets/journey.js cmpFirst) */
.jr-cmp-h{font:400 1.45rem/1.2 "Instrument Serif",Georgia,serif;color:var(--frost,#f8fafc)}
.jr-cmp-l{margin:.2rem auto .7rem;max-width:34rem;color:#c9d4e3;line-height:1.5}
.jr-cmp-st{min-height:1.2em;margin:.4rem 0 0;color:#a5f3fc;font-size:.9rem}

/* Guide me and the second button beside it (assets/journey.js second()) */
.jr-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .6rem}
.jr-2w{display:inline-flex;align-items:center;gap:.15rem}
.jr-btns .jr-2{font-size:.86rem;padding:.5rem 1.05rem;min-height:0}
.jr-2x{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#94a0b4;font-size:1.05rem;line-height:1;cursor:pointer}
.jr-2x:hover{color:#e2e8f0;background:rgba(248,250,252,.06)}
/* a touch of mint behind Guided mode (the user, 2026-10-22), the same mint as the questionnaire bar */
.btn.jr-go{background:linear-gradient(180deg,rgba(143,196,166,.26),rgba(143,196,166,.12)),rgba(12,18,32,.85)}
.btn.jr-go:hover{background:linear-gradient(180deg,rgba(143,196,166,.34),rgba(143,196,166,.18)),rgba(20,30,52,.92)}
/* a quick favorite on the path (assets/journey.js favAsk) */
.jr-fav-in{width:100%;margin:.4rem 0 .5rem;font-size:1rem}
.jr-fav-list{list-style:none;margin:0 0 .4rem;padding:0;display:grid;gap:6px}
.jr-fav-pick{display:flex;align-items:center;gap:.7rem;width:100%;padding:.45rem .6rem;border-radius:12px;border:1px solid rgba(248,250,252,.12);background:rgba(248,250,252,.04);color:#f8fafc;text-align:left;font:inherit;cursor:pointer}
.jr-fav-pick:hover,.jr-fav-pick:focus-visible{border-color:rgba(103,232,249,.55);background:rgba(103,232,249,.08)}
.jr-fav-pick span{display:grid;min-width:0}.jr-fav-pick b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jr-fav-pick small{color:#a9b6c8;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jr-fav-pick img,.jr-fav-pick .sh-th{flex:none;width:40px;height:40px;border-radius:8px;object-fit:cover}
.jr-fav-typed{background:none;border-style:dashed}
.jr-fav-wait{color:#a9b6c8;font-size:.9rem;padding:.3rem .2rem}
/* up next: the card before each test (assets/journey.js upCard), and the timeline moment */
.jr-up .jr-h{margin:.2rem 0 .35rem}
.jr-up-m{margin:0 0 .6rem;color:#cbd5e1;font-size:.95rem}.jr-up-m b{color:#a5f3fc;font-weight:600}
.jr-other{display:grid;gap:6px;margin:.7rem 0 .2rem}
.jr-alt{display:grid;gap:.1rem;text-align:left;padding:.55rem .8rem;border-radius:12px;border:1px solid rgba(248,250,252,.14);background:rgba(248,250,252,.04);color:#f8fafc;font:inherit;cursor:pointer}
.jr-alt:hover{border-color:rgba(103,232,249,.5)}.jr-alt b{font-weight:600}.jr-alt span{color:#a9b6c8;font-size:.86rem}
.jr-tl-age{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .7rem;color:#cbd5e1;font-size:.92rem}.jr-tl-age input{width:5.5rem}
.jr-other[hidden]{display:none}
/* every questionnaire done (assets/journey.js celebrate) */
.jr-cel{position:relative}
.jr-cel-fx{position:absolute;inset:-2rem -1rem auto;width:calc(100% + 2rem);height:18rem;pointer-events:none}
.jr-cel .jr-h{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.4rem);line-height:1.12}
.jr-cel-l{list-style:none;margin:.9rem 0 1rem;padding:0;display:grid;gap:.6rem}
.jr-cel-l li{padding:.7rem .85rem;border-radius:12px;background:rgba(103,232,249,.06);border:1px solid rgba(103,232,249,.2);color:#cbd5e1;line-height:1.5}
.jr-cel-l b{color:#f8fafc}

/* the hint lines fade as you get familiar (assets/journey.js fam, 2026-10-23): now and then, then not at all */
/* only the two text lines, never the Guided mode button (2026-10-23: sharing the button's jr-breathe glow name made the
   button itself fade away) */
.jr-hfade{opacity:0;animation:jr-hint-fade 42s ease-in-out infinite}.jr-hfade.b2{animation-delay:21s}
@keyframes jr-hint-fade{0%{opacity:0}6%{opacity:1}22%{opacity:1}30%{opacity:0}100%{opacity:0}}
.jr-hgone{display:none!important}
/* the Next line: on screen most of the time, resting out of sight for a few seconds now and then */
.jr-dot{font-style:normal}
.jr-nrest{animation:jr-next-rest 48s ease-in-out infinite}
@keyframes jr-next-rest{0%{opacity:1}82%{opacity:1}87%{opacity:0}95%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.jr-nrest{animation:none}}
@media(prefers-reduced-motion:reduce){.jr-hfade{animation:none;display:none}}
/* "Log today's mood" on home: the nine squares in a small popup (assets/journey.js moodPop) */
.jr-mood{padding:0;border:0;background:none;color:#e2e8f0;max-width:calc(100vw - 32px);width:420px}
.jr-mood::backdrop{background:rgba(3,6,14,.6);backdrop-filter:blur(2px)}
.jr-mood-in{position:relative;padding:1.2rem 1.2rem 1rem;border-radius:20px;background:rgba(11,17,32,.97);border:1px solid rgba(165,243,252,.22);box-shadow:0 24px 60px rgba(0,0,0,.55);animation:jr-mood-in .25s ease-out}
.jr-mood-k{margin:0 0 .15rem;font:700 .72rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#67e8f9}
.jr-mood h3{margin:0 0 .8rem;font:400 1.6rem/1.15 "Instrument Serif",Georgia,serif;color:#f8fafc}
.jr-mood-h{margin:.7rem 0 0;font-size:.88rem;color:#cbd5e1}
.jr-mood-x{position:absolute;top:.45rem;right:.6rem;border:0;background:none;color:#a9b6c8;font-size:1.4rem;cursor:pointer}
@keyframes jr-mood-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.jr-mood-in{animation:none}}