:root{
  --ink:#241d1b;
  --paper:#f6efe5;
  --cream:#eadcc9;
  --gold:#b77742;
  --sage:#8f9a84;
  --rose:#b58b82;
  --sky:#b9c6c2;
  --white:#fffaf3;
  --wine:#6f3f3b;
  --shadow:0 20px 55px rgba(36,29,27,.16);
}
*{box-sizing:border-box}
body{margin:0;background:#efe7d9;color:var(--ink);font-family:Georgia,"Times New Roman",serif}
button,input,textarea{font:inherit}
button{cursor:pointer}
.shell{min-height:100vh;display:grid;place-items:center;padding:18px}
.game{width:min(100%,980px);min-height:680px;background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);position:relative;overflow:hidden}
.world{height:160px;background:linear-gradient(#9fc7d4 0 68%,#d8d0a9 68%);position:relative;border-bottom:3px solid var(--ink);overflow:hidden}
.cloud{position:absolute;background:#fff;border:2px solid var(--ink);width:72px;height:24px;border-radius:20px;opacity:.9}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border:2px solid var(--ink);border-bottom:0;border-radius:50% 50% 0 0}
.cloud:before{width:27px;height:20px;left:10px;top:-15px}.cloud:after{width:34px;height:27px;right:8px;top:-21px}
.c1{left:8%;top:35px}.c2{right:10%;top:24px}
.path{position:absolute;left:5%;right:5%;bottom:22px;height:8px;background:#795f45;border:2px solid var(--ink)}
.node{position:absolute;bottom:11px;width:22px;height:22px;background:var(--cream);border:2px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.node.done{background:var(--gold)}
.hero{position:absolute;bottom:30px;width:32px;height:40px;transition:left .55s ease;transform:translateX(-50%)}
.hero .head{width:20px;height:20px;background:#6a432f;border:2px solid var(--ink);margin:auto;image-rendering:pixelated}
.hero .body{width:28px;height:19px;background:#f1c26d;border:2px solid var(--ink);margin:-1px auto 0}
@media (prefers-reduced-motion:reduce){.hero{transition:none}}
.content{padding:30px clamp(20px,5vw,56px) 40px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font:700 12px Arial,sans-serif;color:#6c6258}
h1,h2{margin:.2em 0}.title{font-size:clamp(38px,7vw,72px);line-height:.95}.stage{font-size:clamp(30px,5vw,50px)}
.lede{font-size:19px;line-height:1.55;max-width:720px}
.card{background:var(--white);border:2px solid var(--ink);padding:22px;margin:20px 0;box-shadow:7px 7px 0 var(--cream)}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.choice{background:var(--white);border:2px solid var(--ink);padding:11px 14px;border-radius:2px}
.choice.selected{background:var(--ink);color:white}
textarea,input[type=text]{width:100%;border:2px solid var(--ink);background:#fff;padding:13px;min-height:48px}
textarea{min-height:100px;resize:vertical}
.nav{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:26px;flex-wrap:wrap}
.btn{border:2px solid var(--ink);background:var(--ink);color:white;padding:12px 18px;font-family:Arial,sans-serif;font-weight:700;letter-spacing:.03em}
.btn.alt{background:transparent;color:var(--ink)} .btn.soft{background:var(--cream);color:var(--ink)}
.progress{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.progress button{border:1px solid var(--ink);background:transparent;padding:6px 8px;font:700 10px Arial,sans-serif;text-transform:uppercase}
.progress button.active{background:var(--ink);color:white}
.small{font-size:13px;color:#6b6258;line-height:1.5}
.map{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.map .card{margin:0;box-shadow:none}
.map h3{font:700 11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;margin:0 0 8px}
.bigline{font-size:24px}
.footer-note{text-align:center;margin-top:25px}
@media(max-width:650px){.game{min-height:100vh;border-width:0}.world{height:135px}.content{padding-top:24px}.map{grid-template-columns:1fr}.title{font-size:48px}.lede{font-size:17px}}
@media print{body{background:white}.shell{padding:0}.game{box-shadow:none;border:0}.world,.nav,.progress,.no-print{display:none!important}.content{padding:10px}.map{grid-template-columns:1fr 1fr}}

/* Finding Hers V2 identity */
body{
  background:
    radial-gradient(circle at 20% 10%,rgba(183,119,66,.12),transparent 30%),
    radial-gradient(circle at 80% 85%,rgba(111,63,59,.10),transparent 35%),
    #e8dfd3;
}
.game{border-radius:18px}
.world{
  background:
    linear-gradient(rgba(255,255,255,.10),rgba(255,255,255,.02)),
    linear-gradient(#aebfba 0 67%,#c7b997 67%);
}
.world:after{
  content:"FINDING HERS";
  position:absolute;right:20px;top:14px;
  font:700 10px Arial,sans-serif;letter-spacing:.22em;color:rgba(36,29,27,.68)
}
.card{border-radius:10px;box-shadow:7px 7px 0 #ddcbb4}
.choice{border-radius:999px;transition:transform .15s ease,background .15s ease}
.choice:hover{transform:translateY(-2px)}
.choice.selected{background:var(--wine)}
.btn{background:var(--wine);border-color:var(--ink);border-radius:999px}
.btn.alt{background:transparent}.btn.soft{background:var(--cream)}
textarea,input[type=text],select{border-radius:9px}
.brandmark{display:flex;align-items:center;gap:9px;margin-bottom:20px;font:700 11px Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.brandmark:before{content:"✦";font-size:16px;color:var(--gold)}
.mantra{
  margin:26px 0 4px;padding:14px 16px;border-left:3px solid var(--gold);
  background:rgba(255,250,243,.62);font-style:italic
}
.level-number{font:700 11px Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--wine)}
.reflection-label{font:700 11px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--wine)}
@media(max-width:650px){
 .game{border-radius:0}
 .world:after{right:12px;top:10px}
}

/* V3 — journey world */
.world{height:205px;overflow:hidden}
.world-scene{position:absolute;inset:0;pointer-events:none}
.horizon{position:absolute;left:0;right:0;bottom:0;height:68px;background:#b6a77f;border-top:2px solid var(--ink)}
.trail{position:absolute;left:-3%;right:-3%;bottom:26px;height:17px;background:#80664d;border:2px solid var(--ink);transform:skewX(-12deg)}
.landmark{position:absolute;bottom:48px;transform:translateX(-50%);filter:drop-shadow(3px 4px 0 rgba(36,29,27,.12))}
.landmark .emoji{font-size:31px;display:block;text-align:center;filter:saturate(.55)}
.landmark .tag{font:700 8px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,250,243,.92);border:1px solid var(--ink);padding:3px 5px;white-space:nowrap;margin-top:2px}
.traveler{position:absolute;bottom:42px;width:42px;height:56px;transform:translateX(-50%);transition:left .75s cubic-bezier(.2,.8,.2,1);z-index:8}
.traveler.walking{animation:bob .35s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateX(-50%) translateY(-4px)}}
.traveler .hair{position:absolute;left:8px;top:1px;width:27px;height:24px;background:#2b211e;border:2px solid var(--ink);border-radius:45% 45% 35% 35%}
.traveler .face{position:absolute;left:12px;top:10px;width:20px;height:19px;background:#8b5b42;border:2px solid var(--ink);border-radius:4px}
.traveler .coat{position:absolute;left:7px;top:29px;width:29px;height:24px;background:var(--wine);border:2px solid var(--ink);border-radius:4px 4px 2px 2px}
.traveler .bag{position:absolute;right:1px;top:31px;width:11px;height:14px;background:var(--gold);border:2px solid var(--ink)}
.scene-caption{position:absolute;left:18px;bottom:8px;font:700 9px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,250,243,.8);padding:4px 7px}
.fork{position:absolute;bottom:27px;width:70px;height:12px;background:#80664d;border:2px solid var(--ink)}
.fork.a{right:0;transform:rotate(-19deg)}.fork.b{right:0;transform:rotate(19deg)}
@media(max-width:650px){
 .world{height:180px}.landmark .tag{display:none}.landmark .emoji{font-size:25px}.traveler{transform:translateX(-50%) scale(.9)}
}

/* V4 — spacious journey, no emoji markers, no "level" language */
.world{height:235px}
.world-scene{width:175%;left:0;right:auto;transition:transform .7s ease}
.landmark{bottom:53px}
.landmark .emoji{display:none}
.landmark .marker{
  display:block;width:24px;height:24px;margin:0 auto 7px;
  border:2px solid var(--ink);background:var(--paper);transform:rotate(45deg);
  box-shadow:4px 4px 0 rgba(36,29,27,.10)
}
.landmark.current .marker{background:var(--gold)}
.landmark .tag{
  display:block;font-size:8px;background:rgba(255,250,243,.94);
  padding:4px 7px;border-radius:999px
}
.trail{left:-5%;right:auto;width:185%}
.scene-caption{display:none}
.progress{margin:14px 0 24px;gap:8px}
.progress button{border-radius:999px;padding:7px 10px}
.eyebrow{display:none}
.level-number{margin-bottom:7px}
@media(max-width:650px){
 .world{height:205px}
 .landmark .tag{display:block;font-size:7px}
 .landmark .marker{width:18px;height:18px}
}

/* V5 — V3-style compact world + V4 cleanup */
.world{height:178px}
.world-scene{width:100%;transform:none!important}
.horizon{height:58px}
.trail{left:4%;right:4%;width:auto;bottom:24px}
.landmark{bottom:43px}
.landmark .marker{
  width:30px;height:30px;margin:0 auto 5px;
  border-radius:3px;
}
.landmark .tag{display:none}
.traveler{bottom:52px}
.fork{bottom:25px}
@media(max-width:650px){
 .world{height:158px}
 .landmark .marker{width:25px;height:25px}
 .traveler{bottom:47px}
}

/* V6 — restore destination labels while keeping compact landing mechanic */
.landmark .tag{
  display:block;
  font:700 7px Arial,sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(255,250,243,.94);
  border:1px solid var(--ink);
  padding:3px 5px;
  border-radius:999px;
  white-space:nowrap;
  margin-top:4px;
}
.landmark.current .tag{
  background:var(--ink);
  color:var(--paper);
}
@media(max-width:650px){
 .landmark .tag{display:block;font-size:6px;padding:2px 3px;letter-spacing:.02em}
}

/* V7 — EXPERIENCE PASS: character creator + responsive world */
.creator-wrap{max-width:760px;margin:0 auto}
.creator-preview{
  min-height:145px;display:grid;place-items:center;margin:12px 0 22px;
  border:2px solid var(--ink);border-radius:18px;
  background:linear-gradient(#c9d8c1 0 58%,#b8a77d 58% 100%);
  box-shadow:5px 6px 0 rgba(36,29,27,.12)
}
.creator-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.creator-group{padding:14px;border:1px solid rgba(50,39,34,.25);border-radius:14px;background:rgba(255,250,243,.7)}
.creator-group h3{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 10px}
.swatches,.mini-options{display:flex;gap:8px;flex-wrap:wrap}
.swatch,.mini-option{
  min-width:34px;height:34px;border:2px solid var(--ink);border-radius:999px;
  cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;background:var(--paper)
}
.mini-option{width:auto;padding:0 11px;font-size:.72rem;font-weight:700}
.swatch:hover,.mini-option:hover{transform:translateY(-2px)}
.swatch.selected,.mini-option.selected{box-shadow:0 0 0 3px var(--gold);transform:translateY(-2px)}
.creator-note{font-size:.82rem;color:var(--muted);margin-top:14px}

/* Character sprite assembled from CSS parts */
.pixel-person{position:relative;width:48px;height:68px;image-rendering:pixelated}
.pixel-person .p-hair{position:absolute;z-index:5}
.pixel-person .p-head{position:absolute;left:13px;top:15px;width:23px;height:23px;border:2px solid var(--ink);border-radius:4px;background:var(--skin,#8b5b42)}
.pixel-person .p-body{position:absolute;left:9px;top:39px;width:31px;height:24px;border:2px solid var(--ink);border-radius:4px;background:var(--outfit,var(--wine))}
.pixel-person .p-leg1,.pixel-person .p-leg2{position:absolute;top:61px;width:9px;height:7px;background:var(--ink)}
.pixel-person .p-leg1{left:12px}.pixel-person .p-leg2{right:9px}
.pixel-person .p-bag{display:none;position:absolute;z-index:7;right:0;top:41px;width:12px;height:15px;background:var(--gold);border:2px solid var(--ink)}
.pixel-person.accessory-bag .p-bag{display:block}
.pixel-person .p-hair.afro{left:5px;top:1px;width:39px;height:31px;background:var(--hair,#2b211e);border:2px solid var(--ink);border-radius:48%}
.pixel-person .p-hair.puffs{left:11px;top:5px;width:27px;height:21px;background:var(--hair,#2b211e);border:2px solid var(--ink);border-radius:45%}
.pixel-person .p-hair.puffs:before,.pixel-person .p-hair.puffs:after{content:"";position:absolute;top:-8px;width:16px;height:16px;background:var(--hair,#2b211e);border:2px solid var(--ink);border-radius:50%}
.pixel-person .p-hair.puffs:before{left:-11px}.pixel-person .p-hair.puffs:after{right:-11px}
.pixel-person .p-hair.curls{left:7px;top:3px;width:35px;height:28px;background:var(--hair,#2b211e);border:2px solid var(--ink);border-radius:40% 40% 25% 25%;box-shadow:-4px 6px 0 var(--hair,#2b211e),4px 6px 0 var(--hair,#2b211e)}
.pixel-person .p-hair.short{left:11px;top:8px;width:28px;height:14px;background:var(--hair,#2b211e);border:2px solid var(--ink);border-radius:50% 50% 10% 10%}
.pixel-person .p-hair.bun{left:9px;top:7px;width:31px;height:18px;background:var(--hair,#2b211e);border:2px solid var(--ink);border-radius:50%}
.pixel-person .p-hair.bun:after{content:"";position:absolute;right:-3px;top:-13px;width:17px;height:17px;background:var(--hair,#2b211e);border:2px solid var(--ink);border-radius:50%}
.pixel-person .p-hair.loc{left:8px;top:4px;width:34px;height:36px;border-top:10px solid var(--hair,#2b211e);border-left:5px solid var(--hair,#2b211e);border-right:5px solid var(--hair,#2b211e);border-radius:45% 45% 15% 15%}

/* Replace legacy traveler drawing with sprite */
.traveler{width:48px;height:68px;bottom:51px}
.traveler .hair,.traveler .face,.traveler .coat,.traveler .bag{display:none!important}
.traveler.walking .pixel-person{animation:stepbob .22s ease-in-out infinite alternate}
@keyframes stepbob{to{transform:translateY(-4px) rotate(1deg)}}

/* World response */
.world{transition:background .5s ease}
.world[data-stage="0"]{background:linear-gradient(#cbd9c4,#e9dfc7)}
.world[data-stage="1"]{background:linear-gradient(#c7d7c4,#eadfc8)}
.world[data-stage="2"]{background:linear-gradient(#bed4be,#e8dec5)}
.world[data-stage="3"]{background:linear-gradient(#b7cfb9,#e5d9bd)}
.world[data-stage="4"]{background:linear-gradient(#aec9b2,#e3d6b9)}
.world[data-stage="5"]{background:linear-gradient(#a9c4ae,#dfd1b2)}
.world[data-stage="6"]{background:linear-gradient(#a4c0aa,#dccba9)}
.world[data-stage="7"]{background:linear-gradient(#9ebba5,#f0d8a3)}
.world-flora{position:absolute;bottom:40px;font-size:18px;opacity:.8;animation:growin .5s ease both}
@keyframes growin{from{transform:scale(.2);opacity:0}}
.arrival-ring{position:absolute;width:50px;height:18px;border:2px solid var(--gold);border-radius:50%;bottom:48px;transform:translateX(-50%);animation:ring .7s ease-out both;pointer-events:none}
@keyframes ring{from{transform:translateX(-50%) scale(.25);opacity:1}to{transform:translateX(-50%) scale(1.8);opacity:0}}
.choice.selected{animation:choicepop .18s ease-out}
@keyframes choicepop{50%{transform:scale(1.025)}}
.map-reveal{animation:mapreveal .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes mapreveal{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.micro-delight{
  margin:13px 0 0;padding:9px 12px;border-left:3px solid var(--gold);
  background:rgba(197,157,85,.09);font-size:.84rem;font-style:italic
}
@media(max-width:650px){
 .creator-grid{grid-template-columns:1fr}
 .traveler{bottom:46px}
}

/* V9 — optional reflection scaffolding + cohesive map synthesis */
.prompt-help{margin:12px 0 18px;border:1.5px solid rgba(58,47,42,.35);border-radius:14px;background:rgba(255,252,245,.72);overflow:hidden}
.prompt-help summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:800;display:flex;justify-content:space-between;align-items:center;user-select:none}
.prompt-help summary::-webkit-details-marker{display:none}
.prompt-help[open] summary span{transform:rotate(180deg)}
.prompt-help summary span{transition:transform .18s ease}
.prompt-help-body{padding:0 12px 12px}
.prompt-starter{display:grid;grid-template-columns:minmax(76px,.32fr) 1fr;gap:10px;width:100%;text-align:left;margin:7px 0;padding:10px 11px;border:1px solid rgba(58,47,42,.24);border-radius:11px;background:var(--paper);color:var(--ink);cursor:pointer}
.prompt-starter:hover{transform:translateY(-1px);border-color:var(--gold)}
.prompt-starter strong{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--wine)}
.prompt-starter span{font-size:.86rem;line-height:1.35}
.help-note{margin:10px 2px 1px!important;color:var(--muted)}
.synthesis{margin:18px 0 22px;padding:20px;border:2px solid var(--ink);border-radius:18px;background:linear-gradient(135deg,rgba(197,157,85,.12),rgba(255,252,245,.88));box-shadow:6px 6px 0 rgba(58,47,42,.10)}
.synthesis>p{font-family:Georgia,serif;font-size:1.12rem;line-height:1.75;margin:8px 0 14px}
.synthesis-note{padding-top:11px;border-top:1px solid rgba(58,47,42,.22);font-size:.78rem;color:var(--muted);font-style:italic}
@media(max-width:650px){.prompt-starter{grid-template-columns:1fr;gap:3px}.synthesis{padding:16px}.synthesis>p{font-size:1.02rem}}

/* V10 — The Fork: assisted choice */
.choice-reveal{margin:18px 0;padding:20px;border:2px solid var(--ink);border-radius:18px;background:rgba(255,255,255,.58);box-shadow:4px 4px 0 rgba(21,35,56,.12)}
.choice-reveal.restore{background:rgba(183,140,69,.12)}
.choice-reveal p{line-height:1.65}
.choice-suggestions{display:grid;gap:10px;margin:14px 0}
.choice-suggestion{width:100%;text-align:left;padding:14px 16px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);font:inherit;cursor:pointer;line-height:1.4}
.choice-suggestion:hover,.choice-suggestion.selected{transform:translateY(-1px);box-shadow:3px 3px 0 var(--ink)}
.choice-suggestion.selected{outline:3px solid rgba(183,140,69,.35)}
.choice-map{margin:18px 0 24px;padding:20px;border:2px solid var(--ink);border-radius:20px;background:rgba(183,140,69,.10)}
.choice-flow{display:grid;grid-template-columns:1.25fr .55fr 1fr 1fr;gap:10px;align-items:stretch;margin-top:12px}
.choice-flow>div{border:1.5px solid var(--ink);border-radius:14px;padding:14px;background:rgba(255,255,255,.6)}
.choice-flow span{display:block;font-size:.72rem;letter-spacing:.08em;font-weight:800;margin-bottom:8px}
.choice-flow p{margin:.35rem 0 0;line-height:1.45}
.choice-flow .fork-symbol{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;letter-spacing:.08em;font-weight:900;background:transparent;border-style:dashed}
@media(max-width:720px){.choice-flow{grid-template-columns:1fr}.choice-flow .fork-symbol{min-height:48px}.choice-reveal,.choice-map{padding:16px}}

/* V11 — structured dropdown response system */
.answer-dropdown{border:2px solid var(--ink);border-radius:16px;background:rgba(255,255,255,.48);margin:18px 0;overflow:hidden}
.answer-dropdown summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:800}
.answer-dropdown summary::-webkit-details-marker{display:none}
.answer-dropdown summary strong{font-size:.82rem;white-space:nowrap;opacity:.7}
.answer-menu{border-top:1px solid rgba(43,33,30,.25);padding:10px;display:grid;gap:8px}
.dropdown-option{width:100%;text-align:left;border:1.5px solid rgba(43,33,30,.35);background:rgba(255,255,255,.55);border-radius:12px;padding:13px 14px;display:flex;gap:10px;align-items:flex-start;font:inherit;color:var(--ink);cursor:pointer}
.dropdown-option.selected{border-width:2px;background:rgba(183,140,69,.16)}
.dropdown-option .check{width:20px;height:20px;flex:0 0 20px;border:1.5px solid var(--ink);border-radius:5px;display:grid;place-items:center;font-size:.75rem;font-weight:900}
.other-answer{display:grid;gap:7px;padding:8px 4px 2px;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.other-answer input{font-size:16px;text-transform:none;letter-spacing:0;font-weight:500}
.other-answer.standalone{margin:14px 0;text-transform:none;letter-spacing:0}
.select-wrap{display:grid;gap:8px;margin:18px 0;font-weight:800}
.select-wrap select{width:100%;min-height:52px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);padding:12px 42px 12px 14px;font:inherit;font-size:16px}
.structured-review,.path-summary{display:grid;gap:10px;margin:14px 0}
.structured-review>div,.path-summary>div{display:grid;gap:4px;padding:12px 14px;border-left:3px solid var(--gold);background:rgba(255,255,255,.35)}
.structured-review span,.path-summary span{font-size:.72rem;letter-spacing:.08em;font-weight:900;opacity:.68}
.structured-review strong,.path-summary strong{line-height:1.35}
@media(max-width:560px){.answer-dropdown summary{padding:15px 14px}.answer-dropdown summary strong{font-size:.72rem}.dropdown-option{min-height:48px}.select-wrap select{min-height:52px}}

/* V12 — Founder identity + gentle world feedback */
/* The Founder is alive while waiting, not scored for participating. */
.traveler:not(.walking) .pixel-person,
.creator-preview .pixel-person{
  animation:founderIdle 1.25s ease-in-out infinite alternate;
  transform-origin:50% 100%;
}
@keyframes founderIdle{
  0%{transform:translateY(0) scaleY(1)}
  55%{transform:translateY(-3px) scaleY(1.015)}
  100%{transform:translateY(-6px) scaleY(.985)}
}
/* Keep walking distinct from idle bounce. */
.traveler.walking .pixel-person{animation:stepbob .22s ease-in-out infinite alternate!important}

/* A selection makes the interface respond without implying right/wrong. */
.dropdown-option{position:relative;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.dropdown-option:active{transform:scale(.985)}
.dropdown-option.selected{animation:choicePulse .28s ease}
@keyframes choicePulse{0%{transform:scale(1)}50%{transform:scale(1.018)}100%{transform:scale(1)}}
.choice-spark{position:fixed;z-index:9999;width:6px;height:6px;border:1.5px solid var(--ink);background:var(--gold);pointer-events:none;transform:rotate(45deg);animation:sparkPop .5s ease-out forwards}
.choice-spark:nth-of-type(2n){border-radius:50%;transform:none;background:var(--paper)}
@keyframes sparkPop{0%{opacity:0;transform:translateY(0) scale(.2) rotate(45deg)}35%{opacity:1}100%{opacity:0;transform:translateY(-25px) scale(1) rotate(110deg)}}

/* Make the current place feel discovered/activated. */
.landmark.active .node{animation:landmarkBreathe 1.6s ease-in-out infinite alternate}
@keyframes landmarkBreathe{from{box-shadow:0 0 0 0 rgba(183,140,69,.18)}to{box-shadow:0 0 0 8px rgba(183,140,69,0)}}

@media (prefers-reduced-motion:reduce){
 .traveler:not(.walking) .pixel-person,.creator-preview .pixel-person,.landmark.active .node{animation:none!important}
 .choice-spark{display:none}
}

/* V13 — the world remembers the journey */
.landmark{z-index:6}
.landmark.visited .marker{background:var(--sage);opacity:.82;transform:rotate(45deg) scale(.86)}
.landmark.visited .tag{opacity:.72}
.landmark.ahead .marker{opacity:.55}
.landmark.current .marker{animation:placeWake 1.55s ease-in-out infinite alternate}
@keyframes placeWake{from{box-shadow:3px 3px 0 rgba(36,29,27,.12),0 0 0 0 rgba(183,119,66,.18)}to{box-shadow:3px 3px 0 rgba(36,29,27,.12),0 0 0 9px rgba(183,119,66,0)}}
.footprint{position:absolute;bottom:43px;width:5px;height:8px;border:1.5px solid rgba(36,29,27,.72);border-radius:55% 45% 55% 45%;z-index:3;opacity:.65;animation:footIn .35s ease both}
.footprint.left{transform:rotate(-22deg) translateY(3px)}.footprint.right{transform:rotate(20deg) translateY(-2px)}
@keyframes footIn{from{opacity:0;scale:.2}to{opacity:.65;scale:1}}
.world-plant{position:absolute;bottom:53px;width:3px;height:11px;background:var(--sage);border:1px solid var(--ink);transform-origin:bottom;z-index:2;animation:plantGrow .45s cubic-bezier(.2,.9,.3,1.2) both}
.world-plant:before,.world-plant:after{content:"";position:absolute;width:7px;height:4px;background:var(--sage);border:1px solid var(--ink);border-radius:60% 10% 60% 10%;top:2px}
.world-plant:before{right:1px;transform:rotate(28deg)}.world-plant:after{left:1px;top:6px;transform:rotate(155deg)}
.world-plant.p1{height:15px}.world-plant.p2{height:8px}
@keyframes plantGrow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
/* The Loop curls back toward itself. */
.loop-landmark{position:absolute;left:41%;bottom:28px;width:54px;height:25px;border:3px solid rgba(128,102,77,.8);border-left-color:transparent;border-radius:50%;transform:translateX(-50%) rotate(-7deg);z-index:1;animation:loopDraw .65s ease both}
.loop-landmark:after{content:"";position:absolute;left:-2px;top:4px;border:5px solid transparent;border-right-color:#80664d;transform:rotate(-24deg)}
.loop-landmark i{display:none}
@keyframes loopDraw{from{opacity:0;transform:translateX(-50%) rotate(-7deg) scale(.5)}to{opacity:1;transform:translateX(-50%) rotate(-7deg) scale(1)}}
/* The Crossroads reveals possibilities without ranking them. */
.crossroads{position:absolute;left:56%;bottom:25px;width:70px;height:42px;transform:translateX(-50%);z-index:1;animation:roadsIn .55s ease both}
.crossroads .road{position:absolute;left:31px;bottom:0;width:9px;height:47px;background:#80664d;border:1.5px solid var(--ink);transform-origin:bottom}
.crossroads .one{transform:rotate(-43deg)}.crossroads .two{transform:rotate(0)}.crossroads .three{transform:rotate(43deg)}
@keyframes roadsIn{from{opacity:0;transform:translateX(-50%) scaleY(.2)}to{opacity:.72;transform:translateX(-50%) scaleY(1)}}
/* Old Path: faded footprints behind the Founder. */
.old-path{position:absolute;left:68.5%;bottom:36px;width:52px;height:24px;z-index:2;opacity:.55}
.old-path i{position:absolute;width:5px;height:8px;border-radius:50%;background:rgba(36,29,27,.5);animation:oldStep .4s ease both}
.old-path i:nth-child(1){left:3px;top:13px}.old-path i:nth-child(2){left:22px;top:4px}.old-path i:nth-child(3){left:42px;top:12px}
@keyframes oldStep{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
/* The Fork visibly branches. */
.fork{z-index:1;transform-origin:right center;animation:forkOpen .65s cubic-bezier(.2,.8,.2,1) both}
.fork.a{right:-2%;transform:rotate(-20deg)}.fork.b{right:-2%;transform:rotate(20deg)}
.fork-glow{position:absolute;right:9.5%;bottom:34px;width:44px;height:20px;border:2px solid var(--gold);border-radius:50%;opacity:.35;animation:forkPulse 1.8s ease-in-out infinite alternate}
@keyframes forkOpen{from{opacity:0;scale:.2 1}to{opacity:1;scale:1}}
@keyframes forkPulse{to{transform:scale(1.25);opacity:.08}}
/* The Open Road expands toward the horizon. */
.open-road{position:absolute;right:-1%;bottom:25px;width:19%;height:75px;overflow:hidden;z-index:0;animation:roadReveal .8s ease both}
.open-road:before{content:"";position:absolute;left:34%;bottom:-8px;width:55%;height:95px;background:#80664d;border:2px solid var(--ink);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);opacity:.9}
.open-road .ray{position:absolute;top:4px;width:2px;height:34px;background:rgba(183,119,66,.5);transform-origin:bottom}
.open-road .r1{left:28%;transform:rotate(-28deg)}.open-road .r2{left:50%}.open-road .r3{right:25%;transform:rotate(28deg)}
@keyframes roadReveal{from{opacity:0;transform:translateX(20px) scale(.8)}to{opacity:1;transform:none}}
/* A tiny bit more atmosphere as the Founder progresses. */
.world[data-stage="7"] .c1{animation:cloudDrift 7s ease-in-out infinite alternate}.world[data-stage="7"] .c2{animation:cloudDrift 9s ease-in-out infinite alternate-reverse}
@keyframes cloudDrift{to{transform:translateX(12px)}}
@media(max-width:650px){
 .footprint{bottom:38px}.world-plant{bottom:47px}.loop-landmark{bottom:23px}.crossroads{bottom:20px}.old-path{bottom:31px}.fork-glow{bottom:29px}.open-road{bottom:20px}
}
@media(prefers-reduced-motion:reduce){.landmark.current .marker,.footprint,.world-plant,.loop-landmark,.crossroads,.old-path i,.fork,.fork-glow,.open-road,.world[data-stage="7"] .c1,.world[data-stage="7"] .c2{animation:none!important}}

/* V14 — Beyond the Border: the world leaks gently into the page */
.shell{position:relative;overflow:hidden;isolation:isolate}
.game{z-index:2}
.beyond-world{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}

/* Clouds live outside the card and occasionally drift behind its corners. */
.outer-cloud{position:absolute;width:118px;height:35px;background:rgba(255,250,243,.78);border:2px solid rgba(36,29,27,.72);border-radius:28px;filter:drop-shadow(4px 5px 0 rgba(36,29,27,.06));opacity:.62}
.outer-cloud:before,.outer-cloud:after{content:"";position:absolute;background:inherit;border:inherit;border-bottom:0;border-radius:50% 50% 0 0}
.outer-cloud:before{width:42px;height:29px;left:18px;top:-22px}.outer-cloud:after{width:53px;height:39px;right:13px;top:-30px}
.oc1{left:-150px;top:8%;animation:outerCloudOrbitA 30s linear infinite}
.oc2{left:calc(100% + 45px);top:64%;transform:scale(.72);opacity:.42;animation:outerCloudOrbitB 36s linear infinite}
/* Clouds circulate around the experience instead of hovering in one strip.
   Each loop moves across the top, down a side, across the bottom, and back up. */
@keyframes outerCloudOrbitA{
  0%{left:-150px;top:8%;transform:scale(1)}
  28%{left:calc(100% - 20px);top:10%;transform:scale(.92)}
  42%{left:calc(100% + 34px);top:58%;transform:scale(.84)}
  68%{left:38%;top:calc(100% - 42px);transform:scale(.76)}
  84%{left:-95px;top:62%;transform:scale(.86)}
  100%{left:-150px;top:8%;transform:scale(1)}
}
@keyframes outerCloudOrbitB{
  0%{left:calc(100% + 45px);top:64%;transform:scale(.72)}
  24%{left:48%;top:calc(100% - 38px);transform:scale(.62)}
  48%{left:-105px;top:58%;transform:scale(.68)}
  66%{left:-72px;top:15%;transform:scale(.78)}
  86%{left:54%;top:5%;transform:scale(.7)}
  100%{left:calc(100% + 45px);top:64%;transform:scale(.72)}
}


/* V16 — fuller cloud ring: extra clouds circulate on staggered routes. */
.oc3{left:-130px;top:42%;transform:scale(.56);opacity:.36;animation:outerCloudOrbitC 42s linear infinite -11s}
.oc4{left:72%;top:-58px;transform:scale(.82);opacity:.5;animation:outerCloudOrbitD 34s linear infinite -18s}
.oc5{left:18%;top:calc(100% + 45px);transform:scale(.48);opacity:.3;animation:outerCloudOrbitC 47s linear infinite -29s}
.oc6{left:calc(100% + 75px);top:28%;transform:scale(1.08);opacity:.34;animation:outerCloudOrbitD 45s linear infinite -7s}
@keyframes outerCloudOrbitC{
  0%{left:-135px;top:42%;transform:scale(.56)}
  20%{left:8%;top:3%;transform:scale(.66)}
  45%{left:76%;top:7%;transform:scale(.58)}
  62%{left:calc(100% + 45px);top:45%;transform:scale(.5)}
  82%{left:58%;top:calc(100% - 30px);transform:scale(.62)}
  100%{left:-135px;top:42%;transform:scale(.56)}
}
@keyframes outerCloudOrbitD{
  0%{left:72%;top:-58px;transform:scale(.82)}
  22%{left:calc(100% + 42px);top:26%;transform:scale(.72)}
  48%{left:74%;top:calc(100% - 28px);transform:scale(.66)}
  70%{left:-105px;top:70%;transform:scale(.74)}
  88%{left:12%;top:1%;transform:scale(.9)}
  100%{left:72%;top:-58px;transform:scale(.82)}
}

/* Organic shapes break the left/right edges instead of respecting the box. */
.outer-branch{position:absolute;width:155px;height:16px;background:#80664d;border:2px solid var(--ink);border-radius:70% 15% 70% 15%;opacity:0;transform-origin:bottom left;transition:opacity .45s ease,transform .55s ease}
.outer-branch:before,.outer-branch:after{content:"";position:absolute;width:36px;height:17px;background:var(--sage);border:2px solid var(--ink);border-radius:70% 15% 70% 15%}
.outer-branch:before{left:47px;top:-17px;transform:rotate(-31deg)}.outer-branch:after{left:94px;top:11px;transform:rotate(29deg)}
.branch-left{left:-76px;top:35%;transform:rotate(-17deg) scale(.82)}
.branch-right{right:-85px;top:48%;transform:scaleX(-1) rotate(-13deg) scale(.82)}
.shell[data-stage="2"] .outer-branch,.shell[data-stage="3"] .outer-branch,.shell[data-stage="4"] .outer-branch,.shell[data-stage="5"] .outer-branch,.shell[data-stage="6"] .outer-branch,.shell[data-stage="7"] .outer-branch{opacity:.72;transform:rotate(-17deg) scale(1)}
.shell[data-stage="2"] .branch-right,.shell[data-stage="3"] .branch-right,.shell[data-stage="4"] .branch-right,.shell[data-stage="5"] .branch-right,.shell[data-stage="6"] .branch-right,.shell[data-stage="7"] .branch-right{transform:scaleX(-1) rotate(-13deg) scale(1)}

/* Grass grows past the bottom corners as the journey accumulates. */
.outer-grass{position:absolute;bottom:-9px;width:165px;height:92px;opacity:0;transition:opacity .5s ease;filter:drop-shadow(3px 3px 0 rgba(36,29,27,.05))}
.outer-grass:before,.outer-grass:after{content:"";position:absolute;bottom:0;width:9px;height:74px;background:var(--sage);border:2px solid var(--ink);border-radius:90% 10% 80% 20%;transform-origin:bottom}
.outer-grass:before{left:43px;transform:rotate(-20deg)}.outer-grass:after{left:78px;height:58px;transform:rotate(24deg)}
.grass-left{left:-25px}.grass-right{right:-30px;transform:scaleX(-1)}
.shell[data-stage="3"] .outer-grass,.shell[data-stage="4"] .outer-grass,.shell[data-stage="5"] .outer-grass,.shell[data-stage="6"] .outer-grass,.shell[data-stage="7"] .outer-grass{opacity:.72}

/* Small ambient lights appear later. They are atmosphere, not rewards. */
.outer-spark{position:absolute;width:8px;height:8px;border:1.5px solid var(--gold);background:rgba(255,250,243,.7);transform:rotate(45deg);opacity:0}
.os1{left:7%;top:56%}.os2{right:8%;top:35%}.os3{left:12%;top:76%}.os4{right:12%;top:72%}
.shell[data-stage="4"] .outer-spark,.shell[data-stage="5"] .outer-spark,.shell[data-stage="6"] .outer-spark,.shell[data-stage="7"] .outer-spark{opacity:.65;animation:outerTwinkle 2.2s ease-in-out infinite alternate}
.os2{animation-delay:.4s!important}.os3{animation-delay:.8s!important}.os4{animation-delay:1.2s!important}
@keyframes outerTwinkle{to{opacity:.18;transform:rotate(135deg) translateY(-4px) scale(.65)}}

/* At The Open Road, the path visibly refuses to end at the card border. */
.outer-road{position:absolute;right:-8%;top:24%;width:30%;height:120px;opacity:0;transform:translateX(35px) rotate(-5deg);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.outer-road:before{content:"";position:absolute;inset:0;background:#80664d;border:2px solid var(--ink);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);opacity:.7}
.shell[data-stage="7"] .outer-road{opacity:.72;transform:translateX(0) rotate(-5deg)}

/* Give the card enough visual breathing room for scenery to peek around it. */
@media(min-width:760px){.shell{padding:54px 76px}.game{width:min(100%,980px)}}
@media(max-width:759px){
 .shell{padding:18px 0;overflow:hidden}
 .outer-cloud{width:86px;height:26px}.oc1{animation-duration:27s}.oc2{animation-duration:33s}
 .outer-branch{width:110px}.branch-left{left:-78px}.branch-right{right:-82px}
 .outer-grass{width:110px;bottom:-22px}.grass-left{left:-50px}.grass-right{right:-50px}
 .outer-road{right:-18%;top:19%;width:42%;height:100px}
}
@media(prefers-reduced-motion:reduce){.outer-cloud,.outer-spark{animation:none!important}.outer-branch,.outer-grass,.outer-road{transition:none!important}}
@media print{.beyond-world{display:none!important}}


/* V17 — two roaming doves; side trees removed */
.dove{position:absolute;z-index:5;width:27px;height:17px;background:#fffaf3;border:2px solid var(--ink);border-radius:60% 48% 55% 45%;filter:drop-shadow(2px 3px 0 rgba(36,29,27,.08));transform-origin:center;pointer-events:none}
.dove:before{content:"";position:absolute;width:10px;height:10px;right:-6px;top:-4px;background:#fffaf3;border:2px solid var(--ink);border-radius:50%}
.dove:after{content:"";position:absolute;right:-10px;top:0;width:7px;height:4px;background:var(--gold);border:1px solid var(--ink);clip-path:polygon(0 0,100% 50%,0 100%)}
.dove .wing{position:absolute;left:5px;top:-8px;width:17px;height:13px;background:#fffaf3;border:2px solid var(--ink);border-radius:70% 20% 65% 20%;transform-origin:bottom left;animation:wingFlap .42s ease-in-out infinite alternate}
@keyframes wingFlap{from{transform:rotate(-18deg)}to{transform:rotate(38deg) translateY(-2px)}}
/* Each route includes long pauses on the side-tree branches, then another flight. */
.dove-one{left:5%;top:22%;animation:doveRouteOne 24s linear infinite}
.dove-two{left:88%;top:34%;transform:scale(.9);animation:doveRouteTwo 29s linear infinite -8s}
@keyframes doveRouteOne{
  0%{left:4%;top:26%;transform:scale(1) rotate(0)}
  17%{left:35%;top:13%;transform:scale(1) rotate(-4deg)}
  34%{left:73%;top:24%;transform:scale(1) rotate(4deg)}
  43%,58%{left:calc(100% - 73px);top:23%;transform:scale(1) rotate(0)}
  59%{left:calc(100% - 73px);top:23%}
  77%{left:52%;top:9%;transform:scaleX(-1) rotate(-3deg)}
  94%,100%{left:48px;top:22%;transform:scaleX(-1) rotate(0)}
}
@keyframes doveRouteTwo{
  0%,14%{left:calc(100% - 76px);top:31%;transform:scale(.9) rotate(0)}
  31%{left:68%;top:8%;transform:scaleX(-.9) rotate(-5deg)}
  49%{left:28%;top:18%;transform:scaleX(-.9) rotate(3deg)}
  58%,73%{left:52px;top:29%;transform:scaleX(-.9) rotate(0)}
  74%{left:52px;top:29%}
  90%{left:49%;top:12%;transform:scale(.9) rotate(4deg)}
  100%{left:calc(100% - 76px);top:31%;transform:scale(.9) rotate(0)}
}
/* Fold the wings while the birds are in their tree-rest windows. */
.dove-one .wing{animation-name:wingFlap}.dove-two .wing{animation-name:wingFlap}
@media(max-width:759px){.dove{transform:scale(.78)} }
@media(prefers-reduced-motion:reduce){.dove{animation:none!important}.dove-one{left:52px;top:22%}.dove-two{left:auto;right:52px;top:29%}.dove .wing{animation:none!important;transform:rotate(12deg)}}
\n\n/* Clean-base pass: no floating branches; no wedge/triangle art at The Fork. */
.outer-branch,.fork,.fork-glow{display:none!important}

/* A quiet grass edge grounds every screen, including intro/creator/map. */
.shell:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:34px;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(75deg, transparent 46%, var(--sage) 47% 54%, transparent 55%) 0 100%/19px 28px repeat-x,
    linear-gradient(105deg, transparent 46%, var(--sage) 47% 54%, transparent 55%) 8px 100%/23px 22px repeat-x,
    linear-gradient(to top, var(--sage) 0 8px, transparent 8px);
  opacity:.82;
}
/* Keep the existing corner tufts visible from the start, not only later stages. */
.outer-grass{opacity:.58!important}
@media(max-width:759px){.shell:after{height:27px;background-size:17px 22px,21px 18px,100% 100%}}
@media print{.shell:after{display:none!important}}

/* Final-page cleanup: remove the remaining road wedge/triangle on the map screen. */
body:has(.map) .open-road,
body:has(.map) .outer-road,
body:has(.map) .open-road:before,
body:has(.map) .outer-road:before { display:none !important; content:none !important; }

/* Practice/Open Road cleanup: remove the source wedge everywhere it can render. */
.open-road,
.outer-road,
.open-road:before,
.outer-road:before,
.world-scene .open-road,
.shell[data-stage="7"] .outer-road { display:none !important; content:none !important; }

/* EN / ES language switch */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.topbar .brandmark{margin-bottom:0}
.language-toggle{display:flex;gap:4px;padding:3px;border:1px solid rgba(21,35,56,.18);border-radius:999px;background:rgba(255,255,255,.55);position:relative;z-index:20}
.lang-btn{border:0;background:transparent;color:inherit;font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:6px 9px;border-radius:999px;cursor:pointer}
.lang-btn.active{background:#152338;color:#fff}
@media(max-width:640px){.topbar{align-items:flex-start}.language-toggle{flex-shrink:0}.lang-btn{padding:6px 8px}}
@media print{.language-toggle{display:none!important}}


/* Pre-beta QA: keep destination names readable on phones without widening the world. */
@media(max-width:650px){
  .landmark .tag{font-size:8px;line-height:1.05;padding:3px 4px;letter-spacing:0}
}
/* Interpretation bank — unobtrusive map addition */
.pattern-panel{margin:18px 0;padding:20px;border:2px solid var(--ink);border-radius:18px;background:rgba(255,250,243,.88)}
.pattern-panel>p{line-height:1.6}.pattern-panel>.small{font-weight:800;letter-spacing:.1em}.pattern-self{padding:10px 12px;background:rgba(183,140,69,.10);border-radius:10px}.pattern-feedback{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}.pattern-feedback span{width:100%;font-size:.86rem;font-weight:700}.pattern-reply{font-size:.9rem;font-style:italic}.pattern-disclaimer{margin:12px 0 22px;border:1px solid rgba(36,29,27,.4);border-radius:12px;padding:13px 16px;background:rgba(255,250,243,.55)}.pattern-disclaimer summary{cursor:pointer;font-weight:700}.pattern-disclaimer p{line-height:1.6;font-size:.9rem}@media print{.pattern-feedback,.pattern-disclaimer summary{display:none}.pattern-disclaimer:not([open]){display:none}}

/* Founder expressions: cosmetic only; works in preview and walking sprite. */
.pixel-person .p-expression{position:absolute;z-index:6;left:13px;top:15px;width:23px;height:23px;pointer-events:none}
.pixel-person .p-eye{position:absolute;top:9px;width:3px;height:3px;background:var(--ink);border-radius:1px}
.pixel-person .eye-left{left:5px}.pixel-person .eye-right{right:5px}
.pixel-person .p-mouth{position:absolute;left:8px;top:14px;width:7px;height:3px;border-bottom:2px solid var(--ink);border-radius:0 0 7px 7px}
.pixel-person.face-happy .p-mouth{left:7px;top:12px;width:9px;height:6px;border-bottom:2px solid var(--ink);border-radius:0 0 10px 10px}
.pixel-person.face-curious .p-mouth{left:9px;top:14px;width:5px;height:5px;border:2px solid var(--ink);border-radius:50%}
.pixel-person.face-curious .eye-right{top:7px}
.pixel-person.face-worried .p-mouth{left:7px;top:15px;width:9px;height:5px;border-top:2px solid var(--ink);border-bottom:0;border-radius:9px 9px 0 0}
.pixel-person.face-worried .p-eye{transform:rotate(25deg)}
.pixel-person.face-determined .p-mouth{left:7px;top:15px;width:9px;height:2px;border-bottom:2px solid var(--ink);border-radius:0}
.pixel-person.face-determined .eye-left{transform:rotate(25deg)}
.pixel-person.face-determined .eye-right{transform:rotate(-25deg)}

/* Keep the full face readable with afro and curls: hair frames the forehead
   and cheeks instead of covering the eyes and mouth. */
.pixel-person .p-hair.afro{left:5px;top:0;width:39px;height:22px;border-radius:52% 52% 22% 22%;box-shadow:none}
.pixel-person .p-hair.afro::before,.pixel-person .p-hair.afro::after{content:"";position:absolute;top:12px;width:7px;height:15px;background:var(--hair,#2b211e);border:2px solid var(--ink);border-radius:55%}
.pixel-person .p-hair.afro::before{left:-2px}.pixel-person .p-hair.afro::after{right:-2px}
.pixel-person .p-hair.curls{left:7px;top:2px;width:35px;height:19px;border-radius:50% 50% 25% 25%;box-shadow:none}
.pixel-person .p-hair.curls::before,.pixel-person .p-hair.curls::after{content:"";position:absolute;top:11px;width:7px;height:16px;background:var(--hair,#2b211e);border:2px solid var(--ink);border-radius:48%}
.pixel-person .p-hair.curls::before{left:-3px}.pixel-person .p-hair.curls::after{right:-3px}

/* Focused reflection guidance */
.howto-steps{padding-left:1.5rem;line-height:1.55}.howto-steps li{padding-left:.35rem;margin:1.1rem 0}.howto-steps p{margin:.3rem 0}.moment-reminder{font-size:1rem;line-height:1.5;margin:1rem 0}.selection-message{color:#873e2e;font-weight:600;line-height:1.45}.selection-message:empty{display:none}