@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600&family=Noto+Serif+JP:wght@400;500;600&family=Noto+Serif+TC:wght@400;500;600&display=swap");

/* Adapted from verified DESIGN.md v2.0 and current production chat CSS.
   Owns content only. biotwin-shell-v2.css exclusively owns the existing topbar. */
:root {
  --ds-canvas: #07100e;
  --ds-elevated: #0d1815;
  --ds-soft: #0c1714;
  --ds-ink: #F3F4EF;
  --ds-body: #B7C2BA;
  --ds-muted: #7D8C83;
  --ds-line: rgba(185,255,203,.08);
  --ds-line-strong: rgba(185,255,203,.16);
  --ds-accent: #B9FFCB;
  --ds-success: #72E6CF;
  --ds-warning: #d4a95f;
  --ds-danger: #d97a7a;
  /* Bio2Twin canonical typography — Google Fonts / open-source */
  --bt-font-sans: "Inter", "Noto Sans TC", "Noto Sans JP", "PingFang TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bt-font-sans-ja: "Inter", "Noto Sans JP", "Noto Sans TC", "Hiragino Sans", system-ui, sans-serif;
  --bt-font-serif: "Noto Serif TC", "Noto Serif JP", "Songti TC", serif;
  --bt-font-serif-ja: "Noto Serif JP", "Noto Serif TC", "Yu Mincho", serif;
  --ds-font: var(--bt-font-sans);
  --ds-font-serif: var(--bt-font-serif);
  --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px;
  --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px;
  --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px;
  --ds-max: 1180px; --ds-chat-max: 900px;
  --ds-radius-app: 8px; --ds-radius-card: 12px; --ds-radius-emphasis: 16px;
  --ds-radius-pill: 999px;
  --ds-shadow: 0 8px 30px rgba(0,0,0,.16);
  --ds-fast: 120ms; --ds-normal: 180ms; --ds-slow: 260ms;
  --ds-ease: cubic-bezier(.2,.8,.2,1);
}
body:has(> .bt-page), body.bt-chat { background: var(--ds-canvas); color: var(--ds-ink); color-scheme: dark; }
body.bt-chat { margin: 0; }
.bt-page, .bt-footer, .chat-page { font-family: var(--ds-font); font-size: 14px; line-height: 1.65; }
.bt-page :lang(ja), .bt-footer :lang(ja), .chat-page :lang(ja) { font-family: var(--bt-font-sans-ja); }
.bt-serif { font-family: var(--bt-font-serif); }
.bt-serif:lang(ja), .bt-serif :lang(ja) { font-family: var(--bt-font-serif-ja); }
.bt-page, .bt-page *, .bt-footer, .chat-page, .chat-page * { box-sizing: border-box; min-width: 0; }
.bt-page { width: min(calc(100% - 40px), var(--ds-max)); margin: auto; padding: var(--ds-space-12) 0; overflow-wrap: anywhere; }
.bt-page .kicker { margin: 0 0 var(--ds-space-4); color: var(--ds-muted); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.bt-page h1 { max-width: 920px; margin: 0; font-size: clamp(24px,2.6vw,36px); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }
.bt-page .lead { max-width: 740px; margin: var(--ds-space-5) 0 var(--ds-space-8); color: var(--ds-body); font-size: 14px; line-height: 1.65; }
.bt-section { padding: var(--ds-space-10) 0; border-top: 1px solid var(--ds-line); }
.bt-section-head { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: var(--ds-space-8); margin-bottom: var(--ds-space-6); }
.bt-section-head h2 { margin: 0; font-size: clamp(22px,2.2vw,28px); letter-spacing: -.02em; line-height: 1.25; font-weight: 600; }
.bt-section-head p { max-width: 680px; margin: var(--ds-space-4) 0 0; color: var(--ds-body); line-height: 1.65; }
.bt-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--ds-space-3); }
.bt-card { padding: var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-elevated); display: flex; flex-direction: column; }
.bt-card .n { color: var(--ds-muted); font-size: 11px; letter-spacing: .14em; }
.bt-card h3 { margin: var(--ds-space-6) 0 var(--ds-space-2); font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.bt-card p { margin: 0; color: var(--ds-body); font-size: 13px; line-height: 1.65; }
.bt-steps { border-top: 1px solid var(--ds-line); }
.bt-step { display: grid; grid-template-columns: 180px minmax(0,1fr) 32px; gap: var(--ds-space-8); padding: var(--ds-space-5) 0; border-bottom: 1px solid var(--ds-line); }
.bt-step span { color: var(--ds-muted); font-size: 11px; letter-spacing: .14em; }
.bt-step strong { font-size: 18px; font-weight: 500; }
.bt-step p { margin: var(--ds-space-2) 0 0; color: var(--ds-body); font-size: 14px; line-height: 1.65; }
.bt-notice { margin-top: var(--ds-space-8); padding: var(--ds-space-5); border-left: 2px solid var(--ds-accent); background: var(--ds-soft); color: var(--ds-body); font-size: 13px; line-height: 1.65; }
.bt-page .bt-cta { display: inline-flex; justify-content: center; align-items: center; margin-top: var(--ds-space-6); min-height: 44px; padding: 10px 16px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-pill); background: var(--ds-ink); color: #111; text-decoration: none; font-size: 14px; font-weight: 500; }
.bt-page :where(button, input, textarea, select) { font: inherit; }
.bt-page :where(button, .bt-button) { min-height: 44px; padding: 9px 12px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-app); background: var(--ds-elevated); color: var(--ds-ink); cursor: pointer; }
.bt-page :where(input, textarea, select) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-app); background: var(--ds-elevated); color: var(--ds-ink); }
.bt-page :where(button, a, input, textarea, select), .chat-page :where(button, textarea) { transition: border-color var(--ds-fast) var(--ds-ease), background-color var(--ds-normal) var(--ds-ease), opacity var(--ds-fast) var(--ds-ease); }
.bt-page :where(button, .bt-button):hover { background: var(--ds-soft); }
.bt-page .bt-cta:hover { background: #dededb; }
.bt-page :focus-visible, .bt-footer :focus-visible, .chat-page :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.bt-page summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.bt-page pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.bt-footer { width: min(calc(100% - 40px),var(--ds-max)); margin: auto; padding: var(--ds-space-8) 0 var(--ds-space-10); border-top: 1px solid var(--ds-line); display: flex; gap: var(--ds-space-4); justify-content: space-between; color: var(--ds-muted); font-size: 11px; }
.bt-footer a { color: inherit; }
@media (max-width: 900px) {
  .bt-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bt-section-head { grid-template-columns: 1fr; gap: var(--ds-space-4); }
  .bt-step { grid-template-columns: minmax(0,1fr) 32px; gap: var(--ds-space-3); }
  .bt-step span { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .bt-page, .bt-footer { width: calc(100% - 28px); font-size: 13px; }
  .bt-page { padding: var(--ds-space-8) 0; }
  .bt-page h1 { font-size: 24px; }
  .bt-page .lead { font-size: 13px; }
  .bt-section { padding: var(--ds-space-8) 0; }
  .bt-page :where(input, textarea, select) { font-size: 16px; }
  .bt-grid { grid-template-columns: 1fr; }
  .bt-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-page *, .chat-page * { transition: none; animation: none; scroll-behavior: auto; }
}