/* 合拍 · 样式 —— 与社媒图、Demo 同一套视觉系统 */
:root{
  --ink:oklch(24% .055 274); --ink-2:oklch(30% .055 274); --ink-3:oklch(39% .065 274);
  --paper:oklch(97.4% .012 88); --surface:oklch(99.4% .008 88); --surface-2:oklch(94.8% .014 88);
  --line:oklch(89.7% .014 88); --line-2:oklch(81.8% .02 84);
  --text:oklch(25% .035 274); --text-2:oklch(43% .035 274); --text-3:oklch(55% .035 274);
  --gut:oklch(59% .17 36); --heart:oklch(57% .18 348); --head:oklch(54% .11 205);
  --gut-bright:oklch(70% .17 38); --heart-bright:oklch(69% .17 349); --head-bright:oklch(72% .12 205);
  --gut-soft:oklch(94% .035 38); --heart-soft:oklch(94% .035 348); --head-soft:oklch(94% .035 205);
  --gold:oklch(81% .16 82); --gold-strong:oklch(87% .17 86); --gold-soft:oklch(95% .045 86);
  --on-dark:oklch(97% .012 88); --on-dark-2:oklch(82% .035 274); --on-dark-3:oklch(70% .045 274);
  --sf:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --sf-en:"Iowan Old Style","Baskerville","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --mo:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:600px; --page-gutter:clamp(16px,5vw,20px);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-state:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
.sf{font-family:var(--sf);font-weight:700}
.mo{font-family:var(--mo);font-variant-numeric:tabular-nums}
[lang="en"] .sf,[lang="en"] .hero h1,[lang="en"] .explain__intro h2,[lang="en"] .example h3,[lang="en"] .qtext,[lang="en"] .arch__name,[lang="en"] .arch__intro{font-family:var(--sf-en)}
a{color:var(--gut);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;
  padding-left:max(var(--page-gutter),env(safe-area-inset-left));
  padding-right:max(var(--page-gutter),env(safe-area-inset-right))}
.hidden{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 首页 ---------- */
.hero{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden;
  padding:calc(64px + env(safe-area-inset-top)) 0 52px}
.hero .wrap{position:relative}
.hero__fig{position:absolute;top:-90px;right:-150px;opacity:.72;pointer-events:none}
.hero__top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.brand{font-family:var(--sf);font-size:26px;font-weight:700;letter-spacing:.18em;color:var(--on-dark)}
.eyebrow{font-family:var(--mo);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.hero h1{font-family:var(--sf);font-size:clamp(30px,8vw,40px);line-height:1.4;font-weight:700;
  letter-spacing:.01em;margin-top:34px;text-wrap:balance}
.hero p.lede{color:var(--on-dark-2);font-size:15px;line-height:1.9;margin-top:14px;max-width:34em}
.stack{display:flex;flex-direction:column}
.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-18{gap:18px}
.gap-22{gap:22px}.gap-28{gap:28px}.gap-36{gap:36px}
.motion-clip{overflow:hidden;padding:4px 0 10px;margin:-4px 0 -10px}

.lang-switch{display:inline-flex;align-items:center;justify-content:center;gap:1px;height:34px;padding:2px;
  border-radius:999px;font-family:var(--mo);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.lang-switch > span{opacity:.42;padding:0 1px}
.lang-switch button{display:inline-grid;place-items:center;min-width:31px;min-height:0;height:28px;padding:0;
  border-radius:999px;font-size:inherit;transition:color 140ms,background 140ms}
.lang-switch--dark{color:var(--on-dark-3);border:1px solid var(--ink-3);background:var(--ink-2)}
.lang-switch--dark button[aria-pressed="true"]{color:var(--ink);background:var(--gold-strong);font-weight:600}
.lang-switch--light{color:var(--text-3);border:1px solid var(--line);background:var(--surface)}
.lang-switch--light button[aria-pressed="true"]{color:var(--on-dark);background:var(--ink-2);font-weight:600}
.lang-switch--compact{height:30px}
.lang-switch--compact button{height:24px;min-width:28px;font-size:9.5px}

.startbtn{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;position:relative;
  min-height:60px;padding:0 22px;border-radius:6px;background:var(--gold-strong);color:oklch(24% .055 82);
  border:1px solid oklch(88% .16 86);font-size:16px;font-weight:650;letter-spacing:.025em;overflow:hidden;
  transition:transform 140ms var(--ease-out),filter 140ms,border-color 140ms}
.startbtn > span:not(.startbtn__sweep){white-space:nowrap;position:relative;z-index:1}
.startbtn:hover{filter:brightness(1.035);transform:translateY(-1px)}
.startbtn:active{transform:translateY(1px) scale(.995)}
.startbtn .meta{font-family:var(--mo);font-size:12px;color:oklch(36% .07 82);font-weight:550}
.startbtn--primary{box-shadow:0 12px 28px oklch(15% .05 274 / .22)}
.startbtn__sweep{position:absolute;top:-35%;left:-45%;width:34%;height:170%;pointer-events:none;opacity:0;
  transform:translateX(0) skewX(-14deg);background:linear-gradient(90deg,transparent,oklch(99% .015 88 / .72),transparent)}
.startbtn--ghost{background:transparent;color:var(--on-dark);border:1px solid var(--ink-3);font-weight:500}
.startbtn--ghost .meta{color:var(--on-dark-3)}
.startbtn--ghost:hover{background:var(--ink-2);filter:none}

/* 首页说明：保持折叠时轻，展开后才给完整语境 */
.explain{margin-top:18px;border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3)}
.explain summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:54px;padding:4px 2px;color:var(--on-dark-2);cursor:pointer;transition:color .15s,background .15s}
.explain summary::-webkit-details-marker{display:none}
.explain summary:hover{color:var(--on-dark)}
.explain__summary{display:flex;align-items:baseline;gap:10px;font-size:14px}
.explain__prompt{font-size:10.5px;letter-spacing:.08em;color:var(--gold)}
.explain__chev{flex:0 0 auto;color:var(--on-dark-3);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.explain[open] .explain__chev{transform:rotate(180deg)}
.explain__body{padding:20px 0 24px;animation:explain-in .2s cubic-bezier(.22,1,.36,1)}
@keyframes explain-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.explain__intro .mo{font-size:10px;letter-spacing:.16em;color:var(--gold)}
.explain__intro h2{font-family:var(--sf);font-size:clamp(22px,6vw,27px);font-weight:600;line-height:1.45;
  letter-spacing:.02em;color:var(--on-dark);margin-top:6px}
.explain__intro p{font-size:13.5px;line-height:1.9;color:var(--on-dark-2);margin-top:10px;max-width:40em}
.centers{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid var(--ink-3)}
.center{display:grid;grid-template-columns:82px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--ink-3)}
.center__key{display:flex;flex-direction:column;gap:1px;padding-left:11px;border-left:3px solid currentColor}
.center__name{font-size:13px;font-weight:600;color:var(--on-dark)}
.center__types{font-size:9.5px;letter-spacing:.06em;color:currentColor}
.center p{font-size:12.5px;line-height:1.8;color:var(--on-dark-3)}
.center p strong{font-weight:600;color:var(--on-dark-2)}
.center--gut{color:var(--gut-bright)}.center--heart{color:var(--heart-bright)}.center--head{color:var(--head-bright)}
.example{margin-top:22px;padding:18px;background:var(--ink-2);border:1px solid var(--ink-3);border-left:3px solid var(--gold)}
.example__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.example__top .mo{font-size:9.5px;letter-spacing:.14em;color:var(--gold)}
.example h3{font-size:25px;font-weight:600;letter-spacing:.1em;color:var(--on-dark);line-height:1.35;margin-top:12px}
.example__tag{font-size:12.5px;color:var(--on-dark-3);margin-top:3px}
.example__why{font-size:12.5px;line-height:1.85;color:var(--on-dark-2);margin-top:14px}
.example blockquote{font-size:13.5px;font-weight:600;line-height:1.9;color:var(--on-dark);
  border-top:1px solid var(--ink-3);padding-top:13px;margin-top:13px}

.caps{display:flex;flex-direction:column;gap:10px;margin-top:32px}
.cap{display:flex;align-items:center;gap:14px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:5px;padding:15px 17px}
.cap__bar{width:3px;height:36px;border-radius:2px;flex:0 0 auto}
.cap__bar--gut{background:var(--gut-bright)}.cap__bar--heart{background:var(--heart-bright)}.cap__bar--head{background:var(--head-bright)}
.cap__body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.cap__t{font-size:14.5px;font-weight:600;color:var(--on-dark)}
.cap__d{font-size:12px;color:var(--on-dark-3)}
.pill{font-family:var(--mo);font-size:10.5px;border-radius:3px;padding:3px 8px;white-space:nowrap;flex:0 0 auto}
.pill--free{color:var(--head-bright);border:1px solid var(--head)}
.pill--soon{color:var(--on-dark-3);border:1px solid var(--ink-3)}

.foot{padding-top:34px;padding-bottom:calc(44px + env(safe-area-inset-bottom));
  color:var(--text-3);font-size:12px;line-height:1.85;text-align:center}
.foot .mo{font-size:11px}

/* ---------- 答题 ---------- */
.quiz{padding-top:calc(26px + env(safe-area-inset-top));
  padding-bottom:calc(32px + env(safe-area-inset-bottom));
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.qtop{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.qtop > button{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2);min-height:44px}
.qtools{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.qmeta{font-family:var(--mo);font-size:11px;color:var(--text-3)}
.track{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:18px}
.track > span{display:block;height:100%;background:var(--gold);border-radius:2px;transition:width 250ms var(--ease-state)}
.qcount{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px}
.qcount .mo{font-size:11px;color:var(--text-3)}
.qbody{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4.2vh,34px) 0}
.qnum{font-family:var(--mo);font-size:40px;font-weight:500;color:var(--line-2);line-height:1}
.qtext{font-family:var(--sf);font-size:clamp(20px,5.6vw,24px);font-weight:500;line-height:1.75;
  color:var(--text);margin-top:20px;text-wrap:pretty}
.opts{display:flex;flex-direction:column;gap:11px;margin-top:clamp(28px,4.5vh,38px)}
.opt{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:0 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;font-size:16px;
  color:var(--text-2);transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--line-2)}
.opt__dot{width:17px;height:17px;border:1.5px solid var(--line-2);border-radius:50%;flex:0 0 auto}
.opt.is-on{background:var(--ink-2);border-color:var(--ink-2);color:var(--on-dark);font-weight:500}
.opt.is-on .opt__dot{background:var(--gold);border-color:var(--gold);display:flex;align-items:center;justify-content:center}
.qhint{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:8px}
.qhint span{font-size:12px;color:var(--text-3)}
.qhint button{font-size:13px;color:var(--text-2);border-bottom:1px solid var(--line-2);padding-bottom:2px;min-height:44px}
.qhint button[disabled]{opacity:.35;cursor:default;border-color:transparent}

/* ---------- 结果 ---------- */
.result{padding-top:calc(26px + env(safe-area-inset-top));
  padding-bottom:calc(48px + env(safe-area-inset-bottom))}
.rtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rtop .mo{font-size:10.5px;color:var(--text-3)}
.rtop__meta{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:24px 20px}
.arch__key{font-family:var(--mo);font-size:10.5px;letter-spacing:.16em;color:#7A756A}
.arch__name{font-family:var(--sf);font-size:clamp(30px,8.6vw,36px);font-weight:700;letter-spacing:.1em;
  line-height:1.25;color:var(--text);margin-top:8px}
[lang="en"] .arch__name{font-size:clamp(34px,10vw,45px);letter-spacing:-.025em;line-height:1.08}
[lang="en"] .arch__intro{font-size:16px;font-weight:600;line-height:1.72}
[lang="en"] .example h3{font-size:30px;letter-spacing:-.015em}
.arch__blend{font-size:12.5px;color:var(--text-3);margin-top:7px}
.arch__tag{font-size:13.5px;color:var(--text-2);margin-top:7px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{font-family:var(--mo);font-size:11px;border-radius:3px;padding:4px 10px}
.chip--gut{background:var(--gut-soft);color:var(--gut)}
.chip--heart{background:var(--heart-soft);color:var(--heart)}
.chip--head{background:var(--head-soft);color:var(--head)}
.chip--gold{background:var(--gold-soft);color:#8A6A20}
.wing-note{font-size:12.5px;line-height:1.72;color:var(--text-3);margin-top:10px}
.arch__intro{font-family:var(--sf);font-size:15px;font-weight:600;line-height:2;color:#33384A;
  border-top:1px solid #EDEBE4;border-bottom:1px solid #EDEBE4;padding:16px 0;margin-top:18px}

.bars{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.bar{display:grid;grid-template-columns:60px 1fr 42px;align-items:center;gap:10px}
.bar__lb{font-family:var(--mo);font-size:11px;color:var(--text-3)}
.bar__tr{height:7px;background:#EDEBE4;border-radius:4px;overflow:hidden}
.bar__fl{display:block;height:100%;border-radius:4px}
.bar__vl{font-family:var(--mo);font-size:10.5px;color:var(--text-3);text-align:right}
.bar.is-low .bar__lb,.bar.is-low .bar__vl{color:#A0A4B0}

.sect{margin-top:12px}
.sect__h{font-family:var(--mo);font-size:10.5px;letter-spacing:.14em;margin-bottom:10px}
.sect__h--gut{color:var(--gut)}.sect__h--heart{color:var(--heart)}.sect__h--head{color:var(--head)}
.sect__h--mute{color:#7A756A}
.line{font-size:14px;line-height:1.85;color:var(--text-2)}
.line + .line{margin-top:8px}
.kv{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline}
.kv + .kv{margin-top:10px}
.kv__k{font-family:var(--mo);font-size:11px;color:var(--text-3)}
.kv__v{font-size:14px;line-height:1.75;color:var(--text-2)}

.btnrow{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:5px;
  font-size:15px;font-weight:500;transition:background .15s,border-color .15s}
.btn--ghost{border:1px solid var(--line-2);color:var(--text-2);background:var(--surface)}
.btn--ghost:hover{border-color:var(--text-3)}
.btn--dark{background:var(--ink-2);color:var(--on-dark);font-weight:600}
.btn--dark:hover{background:var(--ink)}
.locked{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface-2);
  border:1px dashed var(--line-2);border-radius:6px;padding:16px 18px;margin-top:12px}
.locked__b{display:flex;flex-direction:column;gap:4px;min-width:0}
.locked__t{font-size:14.5px;font-weight:600;color:var(--text)}
.locked__d{font-size:12px;color:var(--text-3)}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);opacity:0;
  background:var(--ink-2);color:var(--on-dark);font-size:13.5px;padding:12px 20px;border-radius:5px;
  pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:88vw;text-align:center}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

.sheet{position:fixed;inset:0;background:rgba(18,22,42,.72);display:flex;align-items:center;
  justify-content:center;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
  max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));z-index:60}
.sheet__box{background:var(--surface);border-radius:8px;padding:22px 20px;max-width:400px;width:100%;
  display:flex;flex-direction:column;gap:14px;max-height:88vh;overflow:auto}
.sheet__img{width:100%;border:1px solid var(--line);border-radius:4px;display:block}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .startbtn__sweep{display:none}
  .startbtn--primary{box-shadow:inset 0 1px 0 oklch(99% .015 88 / .55)}
}
@media (prefers-reduced-transparency:reduce){
  .sheet{background:var(--ink)}
  .startbtn__sweep{display:none}
}
@media (max-height:700px){
  .quiz{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .track{margin-top:10px}
  .qbody{justify-content:flex-start;padding:18px 0 10px}
  .qnum{font-size:32px}
  .qtext{font-size:clamp(19px,5.8vw,22px);line-height:1.6;margin-top:12px}
  .opts{gap:8px;margin-top:22px}
  .opt{min-height:52px}
  .qhint{margin-top:4px}
}
@media (max-width:359px){
  .startbtn{gap:10px;padding:0 16px;font-size:15px}
  .startbtn .meta{font-size:10.5px}
  .qtools{gap:6px}
  .qtop > button{font-size:13px}
  .explain__summary{gap:7px;font-size:13.5px}
  .center{grid-template-columns:72px 1fr;gap:12px}
  .example{padding:16px 14px}
  .card{padding:22px 18px}
  .locked{padding:15px 16px}
  .qmeta{font-size:10px}
}
@media (max-width:479px){
  .rtop{align-items:flex-start;flex-direction:column;gap:8px}
  .rtop__meta{width:100%;justify-content:space-between}
}
@media (min-width:640px){
  .hero{padding:calc(80px + env(safe-area-inset-top)) 0 60px}
  .center{grid-template-columns:104px 1fr}
  .caps{flex-direction:row}
  .cap{flex:1}
  [lang="en"] .cap{display:grid;grid-template-columns:3px 1fr;grid-template-rows:auto auto;align-items:start;gap:10px 12px}
  [lang="en"] .cap__bar{grid-row:1 / span 2;height:100%;min-height:58px}
  [lang="en"] .cap__body{grid-column:2}
  [lang="en"] .cap .pill{grid-column:2;justify-self:start}
  .btnrow{flex-direction:row}
  .btnrow .btn{flex:1}
}