/* The launch page. Everything shared lives in app.css. */

.links a[aria-current="page"]{color:var(--text)}
.lw button,.lw label{-webkit-tap-highlight-color:transparent}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- head and layout ---------- */
.lw{border-bottom:0}
.lw>.frame{padding-block:84px 112px}
.lw-h{margin:0;font-weight:500;font-size:clamp(30px,3.3vw,44px);line-height:1.08;letter-spacing:-.035em}
.lw-h span{display:block;color:var(--dim)}
.lw-head .sub{max-width:500px}
.lw-grid{display:grid;grid-template-columns:150px minmax(0,1fr) 340px;gap:40px;align-items:start;margin-top:60px}

/* ---------- the step list ---------- */
.lw-rail{position:sticky;top:104px}
.lw-rail .cap{display:block;color:var(--mute);letter-spacing:.02em;text-transform:none;font-size:13px;line-height:1.4}
.lw-rail ol{list-style:none;margin-top:18px;display:grid;gap:3px}
.lw-rail button{display:flex;align-items:baseline;gap:12px;width:100%;padding:5px 0;font-size:13.5px;text-align:left;color:var(--dim);transition:color .15s}
.lw-rail button i{font-style:normal;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;transition:color .15s}
.lw-rail button.seen{color:var(--mute)}
.lw-rail button.seen:hover,.lw-rail button.on{color:var(--text)}
.lw-rail button.on i{color:var(--mute)}
.lw-rail button:disabled{cursor:default}
.lw-rail button:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:4px}

/* ---------- the panel ---------- */
.lw-panel{border:1px solid var(--line2);border-radius:22px;background:var(--p1);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);min-width:0}
.lw-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:0 32px;border-bottom:1px solid var(--line)}
.lw-top .cap{color:var(--text);letter-spacing:.14em}
.tb{font-size:13px;color:var(--mute);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px;transition:color .15s}
.tb:hover{color:var(--text)}
.tb:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:4px}
.tb:disabled{opacity:.4;pointer-events:none}
.step{padding:32px 32px 36px}
.step h2{font-weight:400;font-size:19px;line-height:1.42;letter-spacing:-.015em;color:var(--mute);max-width:470px;outline:0}
.step h2 b{font-weight:500;color:var(--text)}
.lw-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 32px;border-top:1px solid var(--line)}
.lw-foot .btn{min-width:124px}
.lw-foot .btn.white{margin-left:auto}
.lw-panel .btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}

/* ---------- fields ---------- */
.f{margin-top:28px}
.f>label,.f>.lab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:13.5px;font-weight:500}
.aside{display:inline-flex;gap:12px;font-weight:400;font-size:12px;color:var(--dim)}
.count.full{color:var(--warn)}
.in{display:flex;align-items:center;height:46px;border:1px solid var(--line2);border-radius:12px;background:var(--p2);transition:border-color .15s}
.in:hover{border-color:rgba(255,255,255,.24)}
.in:focus-within{border-color:var(--text)}
.in input,.in textarea{flex:1;min-width:0;width:100%;height:100%;padding:0 14px;border:0;outline:0;border-radius:11px;background:none;color:var(--text);font:inherit;font-size:14.5px}
.in input::placeholder,.in textarea::placeholder{color:var(--dim);opacity:1}
.in input:-webkit-autofill{-webkit-text-fill-color:var(--text);transition:background-color 99999s}
.in.area{height:auto;align-items:stretch}
.in.area textarea{display:block;min-height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
.in .ad{flex:none;padding-left:14px;font-size:14px;color:var(--dim)}
.in .ad+input{padding-left:5px}
.in .ad.r{padding:0 14px 0 0;font-size:12px;letter-spacing:.08em}
.in .ad.w{width:94px;font-size:13.5px;color:var(--mute)}
.in .ad.w+input{padding-left:0}
.bad>.in,.bad .in{border-color:var(--low)}
.hint{margin-top:9px;font-size:13px;line-height:1.5;color:var(--dim)}
.err{margin-top:9px;font-size:13px;line-height:1.45;color:var(--low)}
.two{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px;align-items:start}
.stack{display:grid;gap:8px}

/* picture */
.pic-row{display:flex;align-items:center;gap:18px}
.drop{position:relative;flex:none;display:grid;place-items:center;width:104px;height:104px;border:1px dashed var(--line2);border-radius:18px;background:var(--p2);color:var(--dim);cursor:pointer;overflow:hidden;transition:border-color .15s,color .15s}
.drop:hover,.drop.over{border-color:var(--text);color:var(--text)}
.drop svg{width:20px;height:20px}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop.has{border-style:solid}
.vh:focus-visible+.pic-row .drop{outline:2px solid var(--text);outline-offset:3px}
.bad .drop{border-color:var(--low)}
.pic-txt{min-width:0}
.pic-txt b{display:block;font-weight:500;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pic-txt .hint{margin-top:3px}
.pic-btns{display:flex;align-items:center;gap:16px;margin-top:13px}
.pic-btns .btn{cursor:pointer}

/* tax */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg button{height:46px;border:1px solid var(--line2);border-radius:12px;background:var(--p2);font-weight:500;font-size:14.5px;color:var(--mute);transition:border-color .15s,color .15s,background .15s}
.seg button:hover{border-color:rgba(255,255,255,.3);color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:#0a0a0a}
.seg button:focus-visible,.preset:focus-visible,.sugg:focus-visible{outline:2px solid var(--text);outline-offset:3px}

/* mind and mission */
.presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.preset{display:block;padding:14px 14px 15px;border:1px solid var(--line2);border-radius:14px;background:var(--p2);text-align:left;transition:border-color .15s}
.preset:hover{border-color:rgba(255,255,255,.3)}
.preset b{display:block;font-weight:500;font-size:14px}
.preset span{display:block;margin-top:5px;font-size:12.5px;line-height:1.42;color:var(--mute)}
.preset[aria-pressed="true"]{border-color:var(--text);background:var(--p3)}
.suggs{display:grid;gap:7px}
.sugg{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:11px;font-size:13.5px;line-height:1.45;text-align:left;color:var(--mute);transition:border-color .15s,color .15s}
.sugg:hover{border-color:var(--line2);color:var(--text)}
.sugg em{flex:none;font-style:normal;font-size:12px;color:var(--dim)}
.sugg[aria-pressed="true"]{border-color:var(--line2);background:var(--p3);color:var(--text)}

/* abilities */
.abs{margin-top:28px;border:1px solid var(--line2);border-radius:16px;overflow:hidden;background:var(--p2)}
.ab{display:flex;align-items:center;gap:16px;width:100%;padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);transition:background .15s}
.ab:last-child{border-bottom:0}
.ab:hover{background:rgba(255,255,255,.02)}
.ab .ab-t{min-width:0;flex:1}
.ab b{display:block;font-weight:500;font-size:14.5px;transition:color .15s}
.ab .ab-t span{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--mute);transition:color .15s}
.ab em{flex:none;width:22px;font-style:normal;font-size:12px;text-align:right;color:var(--mute)}
.ab .sw{flex:none;position:relative;width:42px;height:24px;border-radius:999px;background:var(--p3);border:1px solid var(--line2);transition:background .15s,border-color .15s}
.ab .sw::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--dim);transition:transform .15s,background .15s}
.ab[aria-checked="true"] .sw{background:var(--text);border-color:var(--text)}
.ab[aria-checked="true"] .sw::after{transform:translateX(18px);background:#0a0a0a}
.ab[aria-checked="false"] b{color:var(--mute)}
.ab[aria-checked="false"] .ab-t span,.ab[aria-checked="false"] em{color:var(--dim)}
.ab:focus-visible{outline:2px solid var(--text);outline-offset:-3px;border-radius:14px}

/* limits */
.lims{margin-top:28px;border:1px solid var(--line2);border-radius:16px;background:var(--p2);overflow:hidden}
.lim-row{display:grid;grid-template-columns:minmax(0,1fr) 168px;align-items:center;gap:6px 18px;padding:14px 14px 14px 18px;border-bottom:1px solid var(--line)}
.lim-row:last-child{border-bottom:0}
.lim-row label b{display:block;font-weight:500;font-size:14.5px}
.lim-row label span{display:block;margin-top:2px;font-size:13px;color:var(--mute)}
.lim-row .in{background:var(--p1)}
.lim-row .in input{text-align:right;padding-right:8px}
.lim-row .err{grid-column:1/-1;margin-top:2px}
.step .tiles{margin-top:0}
.step .tile{background:var(--p2)}
.track.mini{height:46px}
.track.mini div{border-radius:10px;padding:0 13px;font-size:17px;min-width:0}
.legend.mini{margin-top:13px;grid-template-columns:var(--cols,60fr 20fr 20fr)}
.legend.mini div{padding-right:10px;min-width:0}
.legend.mini b{font-size:13.5px}
.legend.mini b i{display:none;font-style:normal;color:var(--mute);margin-right:8px}
.legend.mini p{margin-top:2px;font-size:12.5px;line-height:1.4}

/* ---------- review ---------- */
.lw-note{margin-top:20px;padding:12px 14px;border:1px solid var(--line2);border-radius:11px;background:var(--p3);font-size:13.5px;color:var(--mute)}
#review .rv:first-of-type{margin-top:28px}
.rv{margin-top:10px;padding:0 16px 7px;border:1px solid var(--line);border-radius:14px;background:var(--p2)}
.rv-h{display:flex;align-items:center;gap:12px;min-height:46px;margin-bottom:3px;border-bottom:1px solid var(--line)}
.rv-h .cap{color:var(--text);letter-spacing:.14em}
.rv-h .tb{margin-left:auto}
.rv-bad{display:none;font-size:12px;color:var(--low)}
.rv.bad{border-color:rgba(255,122,102,.45)}
.rv.bad .rv-bad{display:inline}
.rv .kv{padding:8px 0}
.rv .kv b{max-width:68%;overflow-wrap:anywhere}
.rv .kv b.miss{color:var(--low)}
.rv .kv b.none{color:var(--dim);font-weight:400}
.rv-pic{display:inline-flex;align-items:center;gap:9px;max-width:100%}
.rv-pic img{flex:none;width:26px;height:26px;border-radius:7px;object-fit:cover}
.rv-pic span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-text{padding:10px 0 8px;font-size:13.5px;line-height:1.5;color:var(--text);white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.rv-text.none{color:var(--dim)}
.rv-chips{display:flex;flex-wrap:wrap;gap:6px;padding:11px 0 6px}
.rv-off{padding:4px 0 7px;font-size:13px;color:var(--dim)}
.go{margin-top:22px;padding-top:12px;border-top:1px solid var(--line)}
.go .kv{font-size:14px}
.go .kv a{color:var(--text);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px}
.prog{list-style:none;margin-top:8px;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:var(--p2)}
.prog li{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--dim)}
.prog li:last-child{border-bottom:0}
.prog li i{font-style:normal;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.prog li em{margin-left:auto;font-style:normal;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.prog li.now{background:var(--p3);color:var(--text)}
.prog li.now i{color:var(--mute)}
.prog li.now em{color:var(--mute)}
.prog li.done{color:var(--mute)}
.prog li.done em{color:var(--life)}
.go .err{margin-top:14px;padding:12px 14px;border:1px solid rgba(255,122,102,.4);border-radius:11px;background:rgba(255,122,102,.06)}
.go .hint{margin-top:14px}
.go .hint a{color:var(--text);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px}

/* born */
.born{padding:26px 0 14px;text-align:center}
.born>img{width:150px;margin:0 auto 10px;filter:drop-shadow(0 0 46px rgba(70,255,175,.22))}
.step .born h2{max-width:none;font-weight:500;font-size:30px;line-height:1.1;letter-spacing:-.03em;color:var(--text)}
.born>p{margin:12px auto 0;max-width:360px;font-size:14.5px;color:var(--mute)}
.born .ca{margin-top:26px}
.born .ca-v{font-size:13px}
.born .cta{margin-top:22px}

/* ---------- preview ---------- */
.lw-side{position:sticky;top:104px;min-width:0}
.pv-pic{height:172px;margin-top:14px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;background:radial-gradient(150px 110px at 50% 58%,rgba(125,255,200,.15),transparent 72%),var(--p1)}
.pv-pic img{width:132px}
.pv-id{display:flex;align-items:center;gap:11px;margin-top:16px}
.pv-coin{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px dashed var(--line2);border-radius:11px;overflow:hidden}
.pv-coin.has{border:0}
.pv-coin img{width:100%;height:100%;object-fit:cover}
.pv-names{min-width:0}
.pv-names b{display:block;font-weight:500;font-size:16px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-names span{display:block;font-size:12.5px;color:var(--dim)}
.pv-names .ph{color:var(--dim)}
#pv-bar .bar{margin:14px 0 6px}
.lw-side .kv{padding:7px 0}
.lw-side .box p{overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.lw-side .box p.ph{color:var(--dim)}
.pv-abs{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pv-abs .cap{font-size:10px}
.pv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pv-chips em{font-style:normal;font-size:13px;color:var(--dim)}
.pv-foot{margin-top:14px;padding:0 10px;font-size:12.5px;color:var(--dim);text-align:center}

@media (min-width:1081px) and (max-height:860px){
  .lw-rail,.lw-side{top:84px}
  .pv-pic{height:124px}
  .pv-pic img{width:96px}
  .lw-side .box p{-webkit-line-clamp:2}
}
@media (max-width:1080px){
  .lw-grid{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:44px}
  .lw-rail{position:static}
  .lw-rail .cap{display:none}
  .lw-rail ol{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:0}
  .lw-rail button{flex-direction:column;align-items:flex-start;gap:3px;padding:11px 0 2px;border-top:2px solid var(--line2);font-size:13px}
  .lw-rail button.seen{border-top-color:var(--dim)}
  .lw-rail button.on{border-top-color:var(--text)}
  .lw-side{position:static;width:100%;max-width:400px;margin:18px auto 0}
}
@media (max-width:640px){
  .lw>.frame{padding-block:52px 72px}
  .lw-grid{margin-top:34px}
  .lw-rail button span{display:none}
  .lw-rail button i{font-size:12px}
  .lw-top{padding:0 20px;min-height:54px}
  .step{padding:24px 20px 28px}
  .step h2{font-size:17.5px}
  .lw-foot{padding:16px 20px}
  .lw-foot .btn{min-width:0;padding:0 20px}
  .in input,.in textarea{font-size:16px}
  .two{grid-template-columns:minmax(0,1fr)}
  .two .f+.f{margin-top:22px}
  .presets{grid-template-columns:minmax(0,1fr)}
  .drop{width:88px;height:88px;border-radius:16px}
  .pic-row{gap:14px}
  .in .ad.w{width:84px}
  .lim-row{grid-template-columns:minmax(0,1fr) 132px;padding:13px 12px 13px 14px;gap:6px 12px}
  .ab{padding:14px;gap:12px}
  .ab em{display:none}
  .legend.mini{grid-template-columns:1fr;gap:10px}
  .legend.mini b i{display:inline}
  .rv{padding:0 14px 6px}
  .born .cta{flex-direction:column}
  .born .cta .btn{width:100%}
  .step .born h2{font-size:26px}
}