:root{
  --ink:#0F0F3D;
  --ink-2:#1B1B52;
  --ink-soft:#46466A;
  --foot:#5A5A78;
  --pink:#E04894;
  --pink-deep:#C21655;
  --pink-pale:#FCEFF3;
  --pink-soft:#F3ACD0;
  --line:#E3E0EE;
  --paper:#FFFFFF;
  --paper-2:#F8F8FA;
  color-scheme:only light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Poppins,Inter,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.1}
a{color:var(--pink-deep);text-underline-offset:4px}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
[hidden]{display:none!important}
.skip{position:absolute;left:16px;top:-80px;padding:10px 16px;background:#fff;color:var(--ink);z-index:10;border-radius:8px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--pink);outline-offset:4px}

/* ---------- the focus panel: her result, continued ---------- */
.focus{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(224,72,148,.34) 0%, rgba(224,72,148,0) 62%),
    radial-gradient(70% 50% at 0% 100%, rgba(243,172,208,.10) 0%, rgba(243,172,208,0) 70%),
    var(--ink);
}
.focus-inner{max-width:760px;margin:0 auto;padding:18px 20px 44px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:26px}
.brand{color:#fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.02em;opacity:.9}
.partner{display:block;flex:0 0 auto;border-radius:9px;transition:transform .15s ease,box-shadow .15s ease}
.partner:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.topbar img{width:132px;height:auto;display:block;box-sizing:content-box;background:#fff;padding:6px 10px;border-radius:9px}
.kicker{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-soft)}
.area-name{font-size:56px;line-height:1;margin-top:8px;color:#fff}
.area-name:focus{outline:none}
.area-pattern{margin-top:12px;font-size:15px;color:#D9D6EC}
.area-pattern span{font-weight:600;color:#fff}
.area-what{margin-top:10px;font-size:18px;line-height:1.5;color:#EEEAF8;max-width:36ch}

.move{
  position:relative;margin-top:26px;background:#fff;color:var(--ink);
  border-radius:18px;padding:22px 20px 18px 24px;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.55);
}
.move::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;background:var(--pink)}
.move-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-deep)}
.move-text{margin-top:6px;font-size:19px;line-height:1.45;font-weight:500}
.move-toward{margin-top:8px;font-size:15px;color:var(--foot)}
.move .btn-big{margin-top:18px}
.move-how{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.change{margin-top:18px;background:none;border:none;color:#D9D6EC;font-size:14px;text-decoration:underline;text-underline-offset:4px;padding:6px 0}
.change:hover{color:#fff}

.choose-title{font-size:40px;line-height:1.05;margin-top:10px}
.choose-sub{margin-top:12px;font-size:17px;color:#EEEAF8;max-width:40ch}
.picks{margin-top:22px;display:grid;gap:10px}
.pick{
  display:block;width:100%;text-align:left;padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.22);color:#fff;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.pick:hover{background:rgba(255,255,255,.12);border-color:var(--pink-soft)}
.pick:active{transform:translateY(1px);background:var(--pink);border-color:var(--pink)}
.pick-name{display:block;font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:22px;line-height:1.2}
.pick-what{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:#D9D6EC}
.choose-foot{margin-top:18px;font-size:14px;color:#D9D6EC}
.choose-foot a{color:#fff}
.noscript details{margin-top:12px;background:#fff;color:var(--ink);border-radius:12px;padding:12px 14px}

/* ---------- buttons, prompts, status ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 22px;
  border:none;border-radius:12px;background:var(--pink);color:#fff;text-decoration:none;
  font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:16px;line-height:1.3;text-align:center;
  transition:background .15s ease,transform .1s ease;
}
.btn:hover{background:var(--pink-deep)}
.btn:active{transform:translateY(1px)}
.btn-big{width:100%;min-height:60px;font-size:18px;border-radius:14px}
.btn-quiet{background:#fff;color:var(--pink-deep);border:1.5px solid var(--pink)}
.btn-quiet:hover{background:var(--pink-pale)}
.btn-ink{background:var(--ink)}
.btn-ink:hover{background:var(--ink-2)}
.btn.copied{background:var(--ink);color:#fff;border-color:var(--ink)}
.linkish{background:none;border:none;color:var(--pink-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:0 2px}
.copy-status{font-size:14px;color:var(--pink-deep);font-weight:500}
.copy-status:not(:empty){margin-top:8px}
.prompt{margin-top:12px}
.prompt summary{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--pink-deep);padding:6px 0;list-style:none}
.prompt summary::-webkit-details-marker{display:none}
.prompt summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
.prompt[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.prompt pre{margin-top:8px;padding:16px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 Inter,sans-serif;color:var(--ink);max-height:360px;overflow:auto}
.manual-copy{display:block;width:100%;min-height:150px;margin-top:10px;padding:12px;border:2px solid var(--pink);border-radius:10px;font:14px/1.5 Inter,sans-serif;color:var(--ink)}

/* ---------- the rest of the guide ---------- */
.rest{background:var(--paper)}
.rest-inner{max-width:760px;margin:0 auto;padding:0 20px}
.rest .rest-inner{padding-top:38px;padding-bottom:20px}
.rest-kicker{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-deep)}
.rest-line{margin-top:8px;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:60ch}
.card{margin-top:20px;padding:22px 20px;border:1px solid var(--line);border-radius:18px;background:#fff}
.card-step{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--foot)}
.card h2{margin-top:4px;font-size:26px}
.card > p:not(.card-step):not(.copy-status):not(.card-note):not(.example){margin-top:10px;color:var(--ink-soft)}
.card .btn{margin-top:16px}
.card-note{margin-top:12px;font-size:14px;line-height:1.5;color:var(--foot)}
.example{margin-top:14px;padding:14px 16px;border-left:3px solid var(--pink);background:var(--pink-pale);border-radius:0 12px 12px 0;color:var(--ink);font-weight:500}
.example span{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:4px}
.card-how{font-size:15px}
.card-sub{margin-top:6px!important;font-size:18px;font-weight:600;color:var(--ink)!important;line-height:1.4}
.future{margin-top:12px;font-family:Poppins,Inter,sans-serif;font-weight:500;font-size:22px;line-height:1.35;color:var(--ink);padding-left:14px;border-left:4px solid var(--pink)}
.mentorship > p.future{color:var(--ink)}
.card-how strong{color:var(--ink)}
.card-note strong{color:var(--ink)}
.then{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.then h3{font-size:18px}
.then > p:not(.copy-status):not(.card-note){margin-top:6px;color:var(--ink-soft);font-size:16px}
.card-optional{background:var(--paper-2);border-style:dashed}
.mentorship{margin-top:28px;padding:26px 22px;border-radius:18px;background:var(--pink-pale)}
.mentorship h2{margin-top:4px;font-size:26px}
.mentorship > p:not(.card-step):not(.card-note):not(.future){margin-top:12px;color:var(--ink-soft)}
.mentorship .btn{margin-top:16px}
.footer{padding:30px 0 40px;font-size:13px;color:var(--foot)}
.footer p{margin-top:10px}

/* ---------- arrival ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.js .view-area:not([hidden]) .rise,.js .view-choose:not([hidden]) .rise{animation:rise .5s cubic-bezier(.22,.61,.36,1) both}
.rise:nth-child(2){animation-delay:.05s}.rise:nth-child(3){animation-delay:.1s}.rise:nth-child(4){animation-delay:.15s}.rise:nth-child(5){animation-delay:.22s}.rise:nth-child(6){animation-delay:.3s}

/* Small phones: keep the first-move button on the first screen. */
@media (max-width:400px) and (max-height:760px){
  .focus-inner{padding-top:12px}
  .topbar{padding-bottom:14px}
  .topbar img{width:112px;padding:5px 8px}
  .area-name{font-size:46px;margin-top:4px}
  .area-pattern{margin-top:8px;font-size:14px}
  .area-what{margin-top:6px;font-size:16px}
  .move{margin-top:18px;padding:18px 16px 16px 20px}
  .move::before{top:18px;bottom:18px}
  .move-text{font-size:17px}
  .move-toward{font-size:14px;margin-top:6px}
  .move .btn-big{margin-top:14px;min-height:56px}
}
@media (min-width:720px){
  body{font-size:18px}
  .focus-inner{padding:24px 32px 64px}
  .topbar{padding-bottom:44px}
  .topbar img{width:160px}
  .area-name{font-size:84px}
  .area-what{font-size:20px}
  .move{padding:28px 30px 24px 34px;margin-top:34px}
  .move-text{font-size:22px}
  .btn-big{width:auto;min-width:340px}
  .choose-title{font-size:56px}
  .picks{grid-template-columns:1fr 1fr}
  .pick:last-child{grid-column:1 / -1}
  .rest-inner{padding:0 32px}
  .card{padding:30px 30px}
  .mentorship{padding:32px 30px}
  .future{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{animation:none!important}
  .btn,.pick{transition:none}
}
@media print{
  .focus{background:#fff;color:var(--ink)}
  .btn,.change,.copy-status,.skip{display:none!important}
  .prompt pre{max-height:none}
}