/* AG LAB — builds on ../assets/css/style.css (tokens, fonts, grain, buttons). */

body.lab { background: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lab-main { padding-top: 64px; min-height: 100svh; }

/* ---------- top bar ---------- */
.lab-nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gut); background: rgba(244, 245, 243, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.lab-nav__brand { display: flex; align-items: center; gap: 12px; }
.lab-nav__mark { width: 50px; height: 26px; }
.lab-nav__name { display: grid; line-height: 1.1; }
.lab-nav__name b { font: var(--w-display) 15px/1.1 var(--f-display); letter-spacing: .04em; }
.lab-nav__name small { font: 500 12px/1.2 var(--f-ui); color: var(--mid); }
.lab-nav__tools { display: flex; align-items: center; gap: 18px; }
.lab-nav__back { font: 500 14px var(--f-ui); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }

/* ---------- buttons ---------- */
.btn-main, .btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 99px; font: 500 16px/1 var(--f-ui); white-space: nowrap;
  border: 1.5px solid var(--ink); transition: background .25s, color .25s, opacity .25s, transform .25s var(--ease); cursor: pointer;
}
.btn-main { background: var(--ink); color: var(--paper); }
.btn-main:hover:not(:disabled) { background: transparent; color: var(--ink); }
.btn-main:disabled { opacity: .3; cursor: not-allowed; }
.btn-main i { font-style: normal; transition: transform .25s var(--ease); }
.btn-main:hover:not(:disabled) i { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-main--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-main--light:hover:not(:disabled) { background: transparent; color: var(--paper); }
.btn-ghost--light { color: var(--paper); border-color: rgba(244, 245, 243, .5); }
.btn-ghost--light:hover { background: var(--paper); color: var(--ink); }
.link { font: 500 14px var(--f-ui); border-bottom: 1.5px solid currentColor; padding: 0 0 1px; cursor: pointer; white-space: nowrap; }
.kicker { display: inline-block; margin: 0; font: 500 13px/1 var(--f-ui); white-space: nowrap; letter-spacing: .14em; text-transform: uppercase; padding: 9px 15px; border: 1px solid rgba(14,15,14,.35); border-radius: 99px; background: rgba(244,245,243,.4); }
.kicker--light { color: var(--paper); border-color: rgba(244,245,243,.35); background: rgba(14,15,14,.25); }

/* ---------- fog (VI cover) ---------- */
.fog { position: absolute; inset: -12%; z-index: -1; filter: blur(64px); pointer-events: none; }
.fog i { position: absolute; border-radius: 50%; background: var(--ink); }
.fog i:nth-child(1) { width: 60%; height: 36%; left: 30%; top: 22%; opacity: .45; animation: fogA 20s ease-in-out infinite alternate; }
.fog i:nth-child(2) { width: 70%; height: 40%; right: -30%; bottom: -16%; opacity: .95; animation: fogB 24s ease-in-out infinite alternate; }
.fog i:nth-child(3) { width: 60%; height: 26%; left: -24%; bottom: -10%; opacity: .8; animation: fogC 28s ease-in-out infinite alternate; }
.fog--dark i { background: #6c6d6b; }
@keyframes fogA { to { transform: translate(-8%, 10%) scale(1.15, .9); } }
@keyframes fogB { to { transform: translate(-10%, -8%) rotate(-6deg); } }
@keyframes fogC { to { transform: translate(14%, -6%) scale(1.1); } }

/* ---------- intro ---------- */
.intro {
  position: relative; isolation: isolate; overflow: hidden; background: #d9dad8; min-height: calc(100svh - 64px);
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; padding: clamp(40px, 7vw, 96px) var(--gut);
}
.intro__inner { display: grid; gap: 24px; justify-items: start; max-width: 720px; container-type: inline-size; }
.intro__title { margin: 0; font: var(--w-display) clamp(46px, 7.2vw, 112px)/.98 var(--f-display); letter-spacing: -.01em; }
html[lang="zh-CN"] .intro__title { letter-spacing: .02em; line-height: 1.08; }
/* Chinese display titles break only at punctuation, spaces or a \u200b in lab-content.js (你是哪一种/创作者？) */
html[lang="zh-CN"] :is(.intro__title, .step-title, .r-h, .r-hero__title, .lead__t) { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.intro__lead { margin: 0; font: 400 clamp(17px, 1.6vw, 21px)/1.6 var(--f-body); color: var(--ink-3); max-width: 34em; }
.parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.parts li { display: grid; gap: 4px; padding: 16px 16px 18px; background: rgba(244,245,243,.62); border-radius: 16px; backdrop-filter: blur(6px); }
@container (max-width: 560px) { .parts { grid-template-columns: 1fr; } } /* three cards only when each has room for its title */
.parts b { font: var(--w-display) 22px/1 var(--f-display); }
.parts strong { font: 600 17px/1.3 var(--f-ui); }
.parts span { font-size: 14px; color: var(--ink-3); }
.intro__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.promise { margin: 0; font-size: 14px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.promise span { font-size: 9px; }
.wheel { position: relative; width: min(440px, 80vw); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.wheel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(14,15,14,.3); }
.wheel::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: var(--ink); }
.wheel__ring { position: absolute; inset: 0; animation: spin 80s linear infinite; }
.wheel__ring span {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--paper); font: 400 32px/1 var(--f-display);
  transform: rotate(calc(var(--i) * 72deg)) translateY(calc(min(440px, 80vw) / -2 + 8px)) rotate(calc(var(--i) * -72deg));
}
.wheel__mark { position: relative; z-index: 1; width: 44%; height: auto; color: var(--paper); fill: var(--paper); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- steps ---------- */
.step { max-width: 1160px; margin: 0 auto; padding: 36px var(--gut) 72px; grid-template-columns: minmax(0, 1fr); }
.step::before { content: none; } /* style.css also styles .step (the journey timeline); keep its columns and rule out of the lab */
.stepper { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 8px; }
.stepper li { flex: 1; min-width: 0; display: grid; gap: 6px; padding-top: 10px; border-top: 3px solid rgba(14,15,14,.14); color: var(--mid); font: 500 13px/1.2 var(--f-ui); }
.stepper li b { font: var(--w-display) 13px var(--f-display); }
.stepper li.on { border-color: var(--ink); color: var(--ink); }
.stepper li.done { border-color: var(--ink); color: var(--ink-3); }
.stepper li span { white-space: nowrap; }
.step-head { display: grid; gap: 10px; margin-bottom: 28px; }
.step-title { margin: 0; font: var(--w-display) clamp(min(36px, 10.9vw), 5vw, 64px)/1 var(--f-display); text-transform: uppercase; }
html[lang="zh-CN"] .step-title { line-height: 1.1; }
.step-lead { margin: 0; color: var(--ink-3); font-size: 17px; max-width: 42em; }
.step-nav { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; }

/* ---------- birth ---------- */
.birth { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; align-items: start; }
.birth__form { display: grid; gap: 14px; }
.block { background: var(--white); border-radius: 20px; padding: 20px 20px 22px; border: 1px solid var(--line); display: grid; gap: 14px; }
.block__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.block__head h2 { margin: 0; font: 600 18px var(--f-ui); }
.row2, .row3 { display: grid; gap: 10px; }
.row2 { grid-template-columns: 1fr 1fr; }
.row3 { grid-template-columns: 1.2fr 1fr 1fr; }
.row3.row3--long { grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); }
.sel select, .inp input, .search input {
  width: 100%; text-overflow: ellipsis; font: 400 17px/1.3 var(--f-body); color: var(--ink); background: var(--paper); border: 1.5px solid transparent;
  border-radius: 12px; padding: 13px 14px; transition: border-color .2s, background .2s;
}
.sel select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat;
}
.sel select:focus, .inp input:focus, .search input:focus { outline: 0; border-color: var(--ink); background-color: var(--white); }
.sel select:disabled { opacity: .4; cursor: not-allowed; }
.inp { display: grid; gap: 6px; }
.inp span { font: 500 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.inp--wide { grid-column: 1 / -1; }
.seg { display: inline-flex; background: var(--paper); border-radius: 99px; padding: 3px; }
.seg button { padding: 8px 14px; border-radius: 99px; font: 500 14px/1 var(--f-ui); color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--ink); color: var(--paper); }
.check, .radio { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.check input, .radio input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.hint { margin: 0; font-size: 13.5px; color: var(--mid); }
.search { position: relative; }
.search__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; max-height: 320px; overflow: auto; }
.search__list:empty { display: none; }
.search__list button { width: 100%; text-align: left; padding: 11px 12px; border-radius: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; cursor: pointer; }
.search__list button:hover, .search__list button:focus { background: var(--paper); outline: 0; }
.search__list b, .picked b { font: 600 16px var(--f-ui); }
.search__list span, .picked span { color: var(--ink-3); font-size: 14px; }
.search__list small, .picked small { width: 100%; color: var(--mid); font-size: 13px; }
.search__list .muted { padding: 10px 12px; color: var(--mid); font-size: 14px; }
.picked { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--paper); border-radius: 12px; }
.picked > div { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; }
.tz { display: grid; gap: 10px; }
.tz:empty { display: none; }
.tz__row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(14,15,14,.3); }
.tz__k { font: 500 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.tz__row b { font: 600 15px var(--f-ui); }
.tz__row span { font-size: 14px; }
.tz__row small { color: var(--mid); font-size: 13px; }
.tz__row .link { margin-left: auto; }
.adv { background: var(--white); border-radius: 20px; border: 1px solid var(--line); padding: 16px 20px; }
.adv summary { cursor: pointer; font: 600 16px var(--f-ui); list-style: none; display: flex; justify-content: space-between; }
.adv summary::after { content: "+"; font: 400 20px var(--f-display); }
.adv[open] summary::after { content: "−"; }
.adv summary::-webkit-details-marker { display: none; }
.adv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.adv fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.adv legend { font: 500 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--mid); margin-bottom: 8px; }

.preview { position: sticky; top: 84px; background: var(--ink); color: var(--paper); border-radius: 22px; padding: 22px; display: grid; gap: 14px; overflow: hidden; }
.preview__t { margin: 0; font: 500 13px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--grey-2); }
.preview__need { margin: 0; color: var(--grey-2); font-size: 14px; }
.preview__time { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.preview__time span { font: 500 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); width: 100%; }
.preview__time b { font: 600 20px var(--f-ui); }
.preview__time em { font-style: normal; font: 400 18px var(--f-display); }
.preview__sub { margin: 0; font-size: 13px; color: var(--grey-2); }
.pmini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pmini__col { display: grid; justify-items: center; gap: 2px; padding: 12px 4px; border-radius: 14px; background: rgba(244,245,243,.06); }
.pmini__col.is-dm { background: rgba(244,245,243,.16); }
.pmini__pos { font: 500 12px var(--f-ui); color: var(--grey-2); }
.pmini__col b { font: 400 clamp(30px, 3.4vw, 44px)/1.15 var(--f-display); }
.pmini__col small { font-size: 12px; color: var(--grey-2); letter-spacing: .2em; }
.flag, .err { margin: 0; font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 10px; background: rgba(244,245,243,.1); }
.err { background: #3a1d1a; color: #ffd5cc; }
.r-card .flag { background: var(--paper); }

/* ---------- quiz ---------- */
.step--quiz { max-width: 900px; }
.qbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 18px; font: 500 14px var(--f-ui); }
.qbar__sec { color: var(--mid); letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; }
.qbar__track { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(14,15,14,.1); overflow: hidden; }
.qbar__track i { display: block; height: 100%; background: var(--ink); border-radius: 6px; transition: width .4s var(--ease); }
.qcard { background: var(--white); border: 1px solid var(--line); border-radius: 26px; padding: clamp(22px, 4vw, 44px); animation: qin .35s var(--ease); }
@keyframes qin { from { opacity: 0; transform: translateY(10px); } }
.bi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.bi__s { margin: 0; font: 600 clamp(18px, 2.2vw, 24px)/1.4 var(--f-ui); }
.bi__s--r { text-align: right; }
.dots { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 10px; }
.dot { border-radius: 50%; border: 2.5px solid var(--ink); background: transparent; cursor: pointer; flex: none; transition: transform .15s, background .15s; }
.dot.s3 { width: 58px; height: 58px; }
.dot.s2 { width: 46px; height: 46px; }
.dot.s1 { width: 36px; height: 36px; }
.dot.s0 { width: 26px; height: 26px; border-color: var(--mid); }
.dot.r { border-style: solid; }
.dot:hover { transform: scale(1.08); background: rgba(14,15,14,.08); }
.dot.on { background: var(--ink); }
.dot.on.m { background: var(--mid); }
.dots__lbl { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 500 12.5px var(--f-ui); color: var(--mid); }
.lk { display: grid; gap: 22px; }
.lk__s { margin: 0; font: 600 clamp(20px, 2.4vw, 26px)/1.4 var(--f-ui); text-align: center; }
.lk__opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lk__o { padding: 14px 8px; border-radius: 14px; border: 1.5px solid var(--line); font: 500 14.5px/1.3 var(--f-ui); text-wrap: balance; cursor: pointer; transition: all .15s; }
.lk__o:hover { border-color: var(--ink); }
.lk__o.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- profile ---------- */
.prof { display: grid; gap: 14px; }
.prof__q { border: 0; margin: 0; padding: 18px 20px 20px; background: var(--white); border-radius: 20px; border: 1px solid var(--line); }
.prof__q legend { float: left; width: 100%; margin-bottom: 12px; font: 600 17px var(--f-ui); padding: 0; }
.prof__q legend small { font: 400 13px var(--f-body); color: var(--mid); margin-left: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; clear: both; }
.chip { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 99px; border: 1.5px solid var(--line); font: 500 15px/1.2 var(--f-ui); white-space: nowrap; cursor: pointer; transition: all .15s; background: transparent; }
button.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips--static .chip { cursor: default; font: 500 14px/1.2 var(--f-ui); padding: 7px 12px; border: 1.5px solid var(--line); } /* beats style.css .chips span */
.chips--static .chip.on { border-color: var(--ink); }

/* ---------- loading ---------- */
.loading { min-height: calc(100svh - 64px); background: var(--ink); color: var(--paper); display: grid; place-items: center; padding: 40px var(--gut); }
.loading__inner { display: grid; justify-items: center; gap: 28px; }
.loading__mark { width: 140px; height: 72px; fill: var(--paper); color: var(--paper); animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .35; transform: scale(.96); } }
.loading__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 500 16px var(--f-ui); }
.loading__list li { opacity: 0; animation: lin .4s var(--ease) forwards; animation-delay: var(--d); }
.loading__list li::before { content: "✓"; margin-right: 10px; color: var(--grey-2); }
@keyframes lin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- report ---------- */
.r-hero {
  position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--paper);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(40px, 6vw, 88px) var(--gut);
}
.r-hero__text { display: grid; gap: 16px; justify-items: start; max-width: 640px; justify-self: end; }
.r-hero__title { margin: 0; font: var(--w-display) clamp(min(52px, 16vw), 8vw, 120px)/1 var(--f-display); letter-spacing: .02em; }
/* English persona names: the longest word (Experimenter) fits the column, and the name takes at most two lines */
html[lang="en"] .r-hero__title { font-size: clamp(40px, 6vw, 76px); }
.r-hero__en { margin: 0; font: 500 clamp(20px, 2.2vw, 28px) var(--f-ui); color: var(--grey-2); }
.r-hero__tags { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.r-hero__tags span { padding: 8px 14px; border-radius: 99px; border: 1.5px solid rgba(244,245,243,.4); font: 600 15px/1 var(--f-ui); white-space: nowrap; }
.r-hero__tags span:first-child { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.r-hero__d { margin: 0; font-size: 17px; line-height: 1.6; color: #d9dad8; max-width: 34em; }
.r-hero__dm { margin: 0; font-size: 14.5px; color: var(--grey-2); }
.r-hero__dm b { color: var(--paper); font-weight: 600; }
.r-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.r-hero__card { margin: 0; justify-self: start; width: min(420px, 100%); }
.r-hero__card canvas { width: 100%; height: auto; aspect-ratio: 3 / 4; display: block; border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); background: #2a2b2a; }
.r-tabs { position: sticky; top: 64px; z-index: 20; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 10px var(--gut); background: rgba(244,245,243,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.r-tabs a { padding: 9px 16px; border-radius: 99px; font: 500 14.5px var(--f-ui); white-space: nowrap; }
.r-tabs a:hover { background: var(--ink); color: var(--paper); }
.r-sec { padding: clamp(56px, 8vw, 104px) 0; scroll-margin-top: 120px; }
.r-sec--grey { background: var(--grey); }
.r-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.r-wrap--narrow { max-width: 880px; }
.r-h { margin: 0 0 28px; font: var(--w-display) clamp(36px, 5.4vw, 72px)/1 var(--f-display); text-transform: uppercase; }
.r-sub { margin: 40px 0 16px; font: 600 20px var(--f-ui); }
.r-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.r-grid + .r-grid { margin-top: 16px; }
.r-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-card { background: var(--white); border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; container-type: inline-size; }
.r-card--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.r-card--wide { grid-column: 1 / -1; }
.r-card--flush { padding: 0; overflow: hidden; margin-bottom: 16px; }
.r-h3 { margin: 0 0 4px; font: 600 17px var(--f-ui); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.r-h3 small { font: 400 13.5px var(--f-body); color: var(--mid); }
.r-note { margin: 0; font-size: 14.5px; color: var(--ink-3); line-height: 1.6; }
.r-card--dark .r-note { color: var(--grey-2); }
.bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 96px; gap: 10px; align-items: center; font-size: 14.5px; }
html[lang="en"] .bar { grid-template-columns: 150px minmax(0, 1fr) 118px; }
.bar__l { font: 500 15px var(--f-ui); white-space: nowrap; }
.bar__l small { color: var(--mid); font-size: 12px; margin-left: 4px; }
.bar__t { height: 12px; border-radius: 12px; background: rgba(14,15,14,.08); overflow: hidden; }
.bar__t i { display: block; height: 100%; border-radius: 12px; background: var(--ink); }
.bar__v { text-align: right; font: 500 14px var(--f-ui); white-space: nowrap; }
.bar__v .st { font-style: normal; color: var(--mid); margin-left: 4px; }
.dm { grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.dm__char { font: 400 clamp(110px, 12vw, 168px)/1 var(--f-display); }
.dm p { margin: 0 0 6px; color: #d9dad8; }
.dm__k { font: 500 13px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2) !important; }
.dm__img { font: 400 26px var(--f-display); color: var(--paper) !important; }
.dm__key { font: 600 15px var(--f-ui); color: var(--paper) !important; }

.ptable-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; min-width: 520px; }
.ptable th, .ptable td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
.ptable thead th { font: 500 13px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mid); background: var(--paper); }
.ptable tbody th { font: 500 13px var(--f-ui); color: var(--mid); text-align: left; white-space: nowrap; width: 90px; }
.ptable td small { display: block; color: var(--mid); font-size: 12px; }
.ptable .big { display: block; border: 0; font: 400 clamp(34px, 4vw, 48px)/1.1 var(--f-display); } /* style.css .big adds a top rule */
.ptable td:nth-child(4) { background: rgba(14,15,14,.04); }
.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14.5px; }
.kv dt { color: var(--mid); font: 500 13px/1.6 var(--f-ui); }
.kv dd { margin: 0; }
.kv dd small { display: block; color: var(--mid); font-size: 13px; }
.kv--stack { grid-template-columns: 1fr; gap: 4px; }
.kv--stack dd { margin-bottom: 10px; }
.balance { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font: 500 14px var(--f-ui); }
.balance__t { position: relative; height: 14px; border-radius: 14px; background: rgba(14,15,14,.12); overflow: hidden; }
.balance__t i { display: block; height: 100%; background: var(--ink); }
.balance__t em { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: #c9562f; }
.level { margin: 0; font: var(--w-display) 28px var(--f-display); }
.yong { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.yong .chip { cursor: default; font-size: 14.5px; padding: 8px 14px; }
.rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.rel b { font: 600 13px var(--f-ui); background: var(--paper); padding: 3px 8px; border-radius: 6px; margin-right: 6px; white-space: nowrap; }
.rel small { color: var(--mid); }

.tcode { justify-items: start; }
.tcode__code { margin: 0; font: 400 clamp(72px, 9vw, 120px)/.9 var(--f-display); letter-spacing: -.02em; }
.tcode__name { margin: 0; font: var(--w-display) 26px var(--f-display); }
.tcode p:last-child { margin: 0; color: #d9dad8; }
.dim { display: grid; grid-template-columns: 1fr minmax(0, 1.4fr) 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dim__a, .dim__b { font: 400 22px var(--f-display); color: var(--grey-2); }
.dim__b { text-align: right; }
.dim__a.on, .dim__b.on { color: var(--ink); }
.dim__a small, .dim__b small { font: 500 12.5px var(--f-ui); color: var(--mid); }
.dim__t { position: relative; height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--ink), rgba(14,15,14,.08) 50%, var(--ink)); }
.dim__t i { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.dim__c { grid-column: 1 / -1; font: 500 12.5px var(--f-ui); font-style: normal; color: var(--mid); text-align: center; }
.fn { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: fn; }
.fn li { display: grid; grid-template-columns: 52px 1fr; gap: 0 12px; align-items: baseline; }
.fn b { grid-row: span 2; font: 400 26px var(--f-display); }
.fn span { font: 600 15px var(--f-ui); }
.fn small { color: var(--mid); font-size: 13.5px; }

.country { gap: 10px; }
.country__top { display: flex; justify-content: space-between; align-items: baseline; }
.country h3 { margin: 0; font: var(--w-display) 30px var(--f-display); }
.country__score { font: 400 36px var(--f-display); }
.country p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.country__schools { color: var(--mid); font-size: 13.5px !important; }
.r-card--dark.country p { color: #d9dad8; }
.country__fang em { font-style: normal; font: 600 12px var(--f-ui); padding: 3px 8px; border-radius: 6px; border: 1px dashed currentColor; margin-right: 4px; white-space: nowrap; }
.mentor .kicker { justify-self: start; }
.mentor__name { margin: 0; font: var(--w-display) clamp(28px, 3vw, 40px) var(--f-display); }
.mentor p { margin: 0; }
.mentor__tutors small { display: block; color: var(--mid); font-size: 12.5px; margin-bottom: 4px; }
.mentor__tutors span { color: var(--mid); font-size: 14px; }

.schools-wrap { position: relative; }
.schools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.school { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.school:first-child { grid-column: 1 / -1; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.school__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; font: 500 13px var(--f-ui); white-space: nowrap; }
.school__rank { letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
.school__score b { font: 400 26px var(--f-display); margin-left: 4px; }
.school__name { margin: 0; font: 600 22px/1.25 var(--f-ui); }
.school__meta { margin: 0; color: var(--mid); font-size: 14px; }
.school__note { margin: 0; font-size: 15px; }
.school__why { margin: 4px 0 0; padding-left: 18px; font-size: 14px; display: grid; gap: 3px; }
.school:first-child .school__note, .school:first-child .school__why { color: #d9dad8; }
.school.is-locked { filter: blur(7px); user-select: none; pointer-events: none; }
.lock { position: absolute; left: 0; right: 0; bottom: 0; top: 34%; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; padding: 20px; }
.lock p { margin: 0; font: 600 18px var(--f-ui); max-width: 26em; text-wrap: balance; background: rgba(244,245,243,.9); padding: 10px 16px; border-radius: 12px; }
.lead { margin-top: 24px; gap: 16px; scroll-margin-top: 130px; }
.lead__t { margin: 0; font: var(--w-display) clamp(26px, 3vw, 38px)/1.15 var(--f-display); }
.lead p { margin: 0; color: #d9dad8; }
.lead__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.inp--dark input { background: rgba(244,245,243,.08); color: var(--paper); border-color: rgba(244,245,243,.2); }
.inp--dark input:focus { background: rgba(244,245,243,.14); border-color: var(--paper); }
.inp--dark span { color: var(--grey-2); }
.lead__f { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.lead__f legend { float: left; margin-right: 12px; font: 500 12px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--grey-2); padding: 0; }
.check--dark, .lead .radio { color: #e6e7e5; font-size: 14.5px; }
.check--dark a { text-decoration: underline; text-underline-offset: 3px; }
.lead .check input, .lead .radio input { accent-color: var(--paper); }
.hint--dark { color: #ffd5cc; }
.lead__msg { min-height: 1.4em; font-size: 14.5px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead .btn-main { justify-self: start; }
.ok { margin: 20px 0 0; padding: 16px 20px; border-radius: 16px; background: var(--ink); color: var(--paper); font: 600 16px var(--f-ui); }

.method { background: var(--white); border-radius: 20px; padding: 18px 22px; border: 1px solid var(--line); }
.method summary { cursor: pointer; font: 600 17px var(--f-ui); }
.method h4 { margin: 18px 0 6px; font: 600 15px var(--f-ui); }
.method ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.disclaimer { margin: 20px 0 0; font-size: 13.5px; color: var(--mid); line-height: 1.6; }
.r-end { margin-top: 24px; display: flex; justify-content: center; }

.modal { position: fixed; inset: 0; z-index: 100; background: rgba(14,15,14,.86); display: grid; place-items: center; padding: 20px; }
.modal__box { display: grid; gap: 14px; justify-items: center; max-width: 420px; color: var(--paper); text-align: center; }
.modal__box img { width: 100%; border-radius: 16px; }

.lab-foot { padding: 28px var(--gut) 36px; background: var(--ink); color: var(--grey-2); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.lab-foot a { color: var(--paper); border-bottom: 1px solid currentColor; white-space: nowrap; }
html[lang="en"] :is(.lab-foot span, .r-hero__dm, .parts span, .tz__row span, .bi__s, .lk__s) { text-wrap: balance; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .intro { grid-template-columns: 1fr; }
  .wheel { width: min(300px, 70vw); order: -1; }
  .wheel__ring span { width: 58px; height: 58px; margin: -29px 0 0 -29px; font-size: 24px; transform: rotate(calc(var(--i) * 72deg)) translateY(calc(min(300px, 70vw) / -2 + 6px)) rotate(calc(var(--i) * -72deg)); }
  .birth { grid-template-columns: 1fr; }
  .preview { position: static; order: -1; }
  .r-hero { grid-template-columns: 1fr; }
  .r-hero__text { justify-self: start; }
  .r-hero__card { justify-self: center; }
  html[lang="en"] .r-hero__title { font-size: clamp(32px, 11vw - 6px, 76px); }
  .r-grid, .r-grid--3 { grid-template-columns: 1fr; }
  .lead__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lab-nav__back { display: none; }
  /* result tabs: one row that scrolls sideways instead of a second row */
  .r-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .r-tabs::-webkit-scrollbar { display: none; }
  .r-tabs a { flex: none; padding-inline: 12px; }
  .r-tabs a:first-child { margin-left: auto; }
  .r-tabs a:last-child { margin-right: auto; }
  .parts { grid-template-columns: 1fr; }
  .row3 { grid-template-columns: 1fr 1fr 1fr; }
  .row3 .sel select { padding-left: 10px; padding-right: 26px; font-size: 16px; background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; }
  .adv__grid { grid-template-columns: 1fr; }
  .bi { gap: 14px; }
  .bi__s { font-size: 16.5px; }
  .lk__opts { grid-template-columns: 1fr; }
  .schools { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 76px minmax(0, 1fr) 70px; font-size: 13px; }
  .dm { grid-template-columns: 1fr; }
  .step-nav .btn-main, .step-nav .btn-ghost { padding: 14px 18px; }
  .step-nav .btn-main { flex-grow: 1; justify-content: center; }
  .dot.s3 { width: min(44px, 11.5vw); height: min(44px, 11.5vw); }
  .dot.s2 { width: min(36px, 9.2vw); height: min(36px, 9.2vw); }
  .dot.s1 { width: min(29px, 7.2vw); height: min(29px, 7.2vw); }
  .dot.s0 { width: min(22px, 5.4vw); height: min(22px, 5.4vw); }
  .dots__lbl span { max-width: 32%; text-wrap: balance; }
  .dots__lbl span:nth-child(2) { text-align: center; }
  .dots__lbl span:last-child { text-align: right; }
}
@media (max-width: 520px) {
  /* stepper: only the current step keeps its label; it runs on into the next step's empty space */
  .stepper li:not(.on) span { visibility: hidden; }
}
@media (max-width: 400px) {
  .seg button { padding: 8px 10px; font-size: 13px; }
  .row3 { grid-template-columns: 1fr 1fr; }
  .row3 > :first-child { grid-column: 1 / -1; }
  .sel select { padding-left: 10px; padding-right: 26px; font-size: 16px; background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; }
  .kicker { letter-spacing: .08em; padding-inline: 12px; }
}
@media (max-width: 340px) {
  .btn-main, .btn-ghost, .chip { white-space: normal; text-wrap: balance; text-align: center; }
}
/* narrow report cards (phones, and the two-column report just above 960px):
   bars get label and value on one line with the bar underneath, sliders get their labels above the track,
   and the time table puts each label above its value, so percentages, dates and time zones never break */
@container (max-width: 460px) {
  .bar, html[lang="en"] .bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .bar__t { grid-column: 1 / -1; grid-row: 2; }
  .dim { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .dim__a, .dim__b { display: grid; gap: 2px; grid-row: 1; }
  .dim__b { justify-items: end; }
  .dim__b small { order: 1; }
  .dim__a small, .dim__b small { white-space: nowrap; }
  .dim__t { grid-column: 1 / -1; grid-row: 2; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fog i, .wheel__ring, .loading__mark { animation: none !important; }
  .loading__list li { opacity: 1; animation: none; }
}

/* ---------- round 3 (2026-09-28): phones ---------- */
/* larger tap areas on touch screens without changing the look */
@media (pointer: coarse) {
  .seg button { min-height: 40px; }
  .check, .radio { padding: 8px 0; }
  .adv summary, .method summary { padding: 10px 0; }
  .lab-foot a { display: inline-block; padding: 10px 0; }
  .dot, .link { position: relative; }
  .link::after { content: ""; position: absolute; top: -11px; bottom: -11px; left: -6px; right: -6px; }
  .dot::before { content: ""; position: absolute; top: -12px; bottom: -12px; left: -6px; right: -6px; border-radius: 22px; }
}
/* the Four Pillars table fits a phone screen instead of scrolling sideways */
@media (max-width: 560px) {
  .ptable { min-width: 0; table-layout: fixed; }
  .ptable th, .ptable td { padding: 10px 3px; font-size: 13.5px; overflow-wrap: anywhere; }
  .ptable thead th { font-size: 12px; letter-spacing: .04em; overflow-wrap: normal; }
  .ptable tbody th { width: 54px; white-space: normal; font-size: 12px; line-height: 1.25; }
  .ptable .big { font-size: clamp(26px, 8vw, 34px); }
  .ptable td small { font-size: 12px; }
}
@media (max-width: 340px) { .ptable thead th { font-size: 11px; letter-spacing: 0; } }
/* the scattered curved wordmark from the VI (see ../assets/css/style.css), behind the intro */
.intro > .arcs { z-index: -1; --arcs-o: .09; --arcs-size: 480px; }
/* 280–340px screens (Galaxy Fold outer screen): the birth form stays inside the screen */
@media (max-width: 340px) {
  .birth { grid-template-columns: minmax(0, 1fr); }
  .block { padding: 16px 16px 18px; }
  .seg button { padding-inline: 8px; font-size: 12.5px; }
}