:root{
  --bg:#2F3441;
  --panel:#353A47;
  --panel-hover:#3A404E;
  --ink:#F3F4F6;
  --muted:rgba(243,244,246,.60);
  --faint:rgba(243,244,246,.34);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --cta:#F2F3F5;
  --cta-ink:#22262E;
  --accent:#7896B2;
  --accent-rgb:120,150,178;
  --content:680px;
  color-scheme:dark;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Noto Sans TC","PingFang TC",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before,body::after,.ambient{display:none!important}
button,input,textarea{font:inherit}
button{cursor:pointer}

.topbar,.shell{
  width:min(var(--content),calc(100% - 32px));
}

/* 1. topbar */
.topbar{
  height:68px;
  margin:16px auto 0;
  padding:0 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
}

/* 2. logo */
.brand{
  display:inline-flex;
  align-items:center;
  height:100%;
  color:inherit;
  text-decoration:none;
}
.brand-logo{
  display:block;
  width:auto;
  height:22px;
  object-fit:contain;
}
.model-mark{
  font-size:9px;
  font-weight:520;
  letter-spacing:.16em;
  color:var(--faint);
  white-space:nowrap;
}
.member-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  font-size:11px;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
}
.member-nav a{
  color:rgba(243,244,246,.72);
  text-decoration:none;
  transition:color .16s ease;
}
.member-nav a:hover,.member-nav a:focus-visible{color:#fff}
.member-links{display:inline-flex;align-items:center;gap:8px}
.member-sep{color:rgba(243,244,246,.28)}

/* shell */
.shell{
  margin:72px auto 110px;
  position:relative;
}

/* 3. main experience — no card chrome */
.intro,.session,.error,.thinking{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.kicker,.question-label,.finish-label{
  margin:0 0 18px;
  color:var(--faint);
  font-size:10px;
  font-weight:540;
  letter-spacing:.15em;
  text-transform:uppercase;
}
h1{
  margin:0 0 24px;
  max-width:620px;
  color:var(--ink);
  font-size:clamp(40px,6.3vw,62px);
  line-height:1.04;
  letter-spacing:-.055em;
  font-weight:480;
  text-wrap:balance;
}
.sub{
  max-width:540px;
  margin:0 0 38px;
  color:var(--muted);
  font-size:15px;
  line-height:1.78;
}
.privacy{
  margin:16px 0 0;
  color:var(--faint);
  font-size:11px;
  line-height:1.65;
}

/* palette */
.palette{display:flex;flex-wrap:wrap;gap:11px;margin:0 0 20px}
.swatch{
  width:40px;height:40px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:var(--swatch);
  box-shadow:none;
  transition:transform .16s ease,border-color .16s ease;
}
.swatch:hover{transform:scale(1.05);border-color:rgba(255,255,255,.38)}
.swatch.selected{
  transform:scale(1.08);
  border:2px solid #F4F5F7;
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px rgba(255,255,255,.25);
}
.custom-row{
  display:flex;align-items:center;gap:10px;margin:0 0 30px;
  color:var(--muted);font-size:12px;
}
.custom-row input{
  width:28px;height:28px;padding:0;border:1px solid var(--line-strong);
  border-radius:50%;background:transparent;overflow:hidden;
}

/* 4. buttons */
.primary,.secondary,.answer,.send{box-shadow:none}
.primary{
  min-height:46px;padding:0 20px;border:0;border-radius:999px;
  background:var(--cta);color:var(--cta-ink);
  font-size:13px;font-weight:620;
  transition:transform .16s ease,background .16s ease,opacity .16s ease;
}
.primary:hover{background:#fff;transform:translateY(-1px)}
.primary:disabled{opacity:.25;cursor:not-allowed;transform:none}
.secondary{
  min-height:44px;padding:0 17px;border:1px solid var(--line);
  border-radius:999px;background:transparent;color:var(--muted);
}
.secondary:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.answer-options{display:flex;flex-wrap:wrap;gap:9px}
.answer{
  padding:10px 15px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:rgba(243,244,246,.80);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.answer:hover{background:rgba(255,255,255,.05);border-color:var(--line-strong);color:#fff}

/* 5. input */
.free-form{
  width:100%;display:flex;align-items:flex-end;gap:8px;
  padding:9px 9px 9px 17px;border:1px solid var(--line);
  border-radius:24px;background:var(--panel);
}
.free-form:focus-within{border-color:var(--line-strong)}
.free-form textarea{
  width:100%;padding:7px 0;border:0;outline:0;resize:none;
  background:transparent;color:var(--ink);font-size:14px;line-height:1.55;
}
.free-form textarea::placeholder{color:rgba(243,244,246,.28)}
.send{
  flex:0 0 auto;width:34px;height:34px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:var(--cta);color:var(--cta-ink);font-size:17px;
}

/* 6. AI area */
.color-line{
  display:flex;align-items:center;gap:10px;margin:0 0 34px;
  color:var(--faint);font-size:11px;
}
.mini-dot{width:17px;height:17px;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.text-button{
  margin-left:auto;padding:4px 0;border:0;background:none;color:var(--faint);font-size:11px;
}
.ai-copy{
  max-width:630px;margin:0 0 36px;color:var(--ink);
  font-size:clamp(23px,3vw,30px);line-height:1.52;
  letter-spacing:-.025em;font-weight:430;white-space:pre-wrap;
}
.state-list{margin:0 0 44px;border-top:1px solid var(--line)}
.state-row{
  display:grid;grid-template-columns:118px 1fr;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.state-row dt{color:var(--faint);font-size:11px}
.state-row dd{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.question{margin-top:44px}
.question h2{
  max-width:620px;margin:0 0 22px;color:var(--ink);
  font-size:clamp(24px,3.4vw,32px);line-height:1.4;
  letter-spacing:-.035em;font-weight:480;text-wrap:balance;
}

/* thinking */
.thinking{
  min-height:48vh;display:grid;place-items:center;text-align:center;color:var(--muted)
}
.selected-orb{
  width:82px;height:82px;margin:auto;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:var(--accent);box-shadow:none;
}
.selected-orb::after{display:none}
.thinking p{margin-top:22px;font-size:13px}
.pulse{
  display:inline-block;width:26px;height:1px;margin-right:10px;vertical-align:middle;
  background:rgba(243,244,246,.55);animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* finish */
.finish{margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.taste-line{
  margin:0 0 26px;color:var(--ink);font-size:21px;line-height:1.6;letter-spacing:-.02em;
}
.finish .primary{margin-right:8px}
.save-status{margin-top:15px;color:var(--faint);font-size:11px}

/* error */
.error{padding:64px 0;text-align:center}
.error>p:first-child{font-size:23px}
.muted{margin-bottom:24px;color:var(--muted);font-size:13px}

[hidden]{display:none!important}

@media(max-width:640px){
  .topbar,.shell{width:calc(100% - 28px)}
  .topbar{height:62px;margin-top:12px}
  .brand-logo{height:19px}
  .model-mark{font-size:8px;letter-spacing:.12em}
  .shell{margin-top:52px}
  .member-nav{font-size:10px;gap:6px}
  .member-links{gap:6px}
  h1{font-size:40px}
  .state-row{grid-template-columns:86px 1fr}
  .finish .primary,.finish .secondary{width:100%;margin:0 0 8px}
}
@media(max-width:430px){
  .topbar{gap:9px}
  .model-mark{font-size:7px;letter-spacing:.09em}
  .member-nav{font-size:9px}
  .member-account,.member-sep{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Biomni Health Review · 2026-09-23 */
.biomni-review{margin:22px 0 30px;padding:22px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.025)}
.biomni-review-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:10px}
.biomni-review-head span{display:block;color:rgba(255,255,255,.45);font-size:9px;letter-spacing:.15em;margin-bottom:7px}
.biomni-review-head h2{margin:0;font-size:18px;line-height:1.45;font-weight:520;letter-spacing:-.02em;color:#f3f4f6}
.biomni-review-head b{font-size:10px;font-weight:500;padding:6px 9px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.72);white-space:nowrap}
.biomni-review-head b[data-state="STABLE"]{color:#d8f3e8;border-color:rgba(174,228,207,.22)}
.biomni-review-head b[data-state="NEEDS_ATTENTION"]{color:#f4d49b;border-color:rgba(244,212,155,.22)}
.biomni-review-head b[data-state="WARNING"]{color:#ff6b6b;border-color:rgba(255,107,107,.35)}
.biomni-review-copy{margin:0 0 16px;color:rgba(255,255,255,.60);font-size:12px;line-height:1.7}
.biomni-review-warning{margin:0 0 14px;padding:14px 15px;border:1px solid rgba(255,80,80,.38);border-radius:14px;background:rgba(255,45,45,.06)}
.biomni-review-warning span{display:block;color:#ff5f63;font-size:9px;font-weight:700;letter-spacing:.14em;margin-bottom:6px}
.biomni-review-warning strong{display:block;color:#ff6b6f;font-size:14px;line-height:1.5;margin-bottom:4px}
.biomni-review-warning p{margin:0;color:rgba(255,215,215,.78);font-size:11px;line-height:1.65}
.biomni-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.biomni-review-grid article{padding:13px 14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(0,0,0,.10)}
.biomni-review-grid span{display:block;color:rgba(255,255,255,.40);font-size:9px;letter-spacing:.09em;margin-bottom:6px}
.biomni-review-grid strong{display:block;color:#eef0f2;font-size:12px;line-height:1.55;font-weight:520}
.biomni-review-grid p{margin:5px 0 0;color:rgba(255,255,255,.48);font-size:10px;line-height:1.6}
.biomni-review-note{margin:13px 0 0;color:rgba(255,255,255,.30);font-size:9px;line-height:1.5}
@media(max-width:640px){.biomni-review{padding:16px;margin-top:18px}.biomni-review-grid{grid-template-columns:1fr}.biomni-review-head h2{font-size:16px}}