:root {
  --bg: #0b1118;
  --bg-2: #0f1720;
  --surface: #131b26;
  --surface-2: #1a2433;
  --line: rgb(255 255 255 / 0.08);
  --line-2: rgb(255 255 255 / 0.16);
  --text: #eef3f8;
  --muted: #93a3b8;
  --dim: #5f6f84;
  --brand: #00b3e3;
  --brand-2: #1a5eff;
  --amber: #fbd35a;
  --grad: linear-gradient(90deg, #33c2e9 15%, #1a5eff 90%);
  --radius: 14px;
  --sans: "Inter", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 85% -10%, rgb(0 179 227 / 0.12), transparent 60%),
    radial-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--text); color: var(--bg); }
.skip-link:focus { top: 12px; }
.wrap { width: min(1280px, 100% - 48px); margin: 0 auto; }

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height:66px; padding: 0 clamp(20px, 3vw, 40px);
  background: rgb(11 17 24 / 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; font: 600 12px/1.2 var(--mono); letter-spacing: 0.16em; }
.brand small { display: block; margin-top: 3px; font-weight: 400; letter-spacing: 0.12em; color: var(--dim); }
.brand-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--brand); box-shadow: 0 0 14px rgb(0 179 227 / 0.45); }
.header nav { display: flex; gap: clamp(14px, 2.4vw, 32px); font-size: 14px; color: var(--muted); }
.header nav a:hover, .header nav a.is-current { color: var(--text); }
.header-meta { font: 12px var(--mono); letter-spacing: 0.1em; color: var(--dim); }

/* ---------- shared ---------- */
.eyebrow, .section-no { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 12px var(--mono); letter-spacing: 0.18em; color: var(--brand); }
.pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--brand); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
h1, h2 { margin: 0; letter-spacing: -0.02em; font-weight: 700; }
h1 em, h2 em { font-style: normal; color: transparent; background: linear-gradient(92deg, #f3f8fc 0%, #7fd8f3 55%, #6f9bff); -webkit-background-clip: text; background-clip: text; }
.button {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px;
  border: 1px solid rgb(0 179 227 / 0.55); background: rgb(0 179 227 / 0.1); font-weight: 600;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.button:hover { background: rgb(0 179 227 / 0.2); box-shadow: 0 0 28px rgb(0 179 227 / 0.28); }
.section { padding: 88px 0 40px; scroll-margin-top: 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr); gap: 12px 64px; align-items: end; margin-bottom: 24px; }
.section-head .section-no { grid-column: 1 / -1; margin: 0; }
.section-head h2 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.22; }
.section-head > p:last-child { margin: 0; color: var(--muted); max-width: 520px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 160ms ease, color 160ms ease; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px rgb(0 179 227 / 0.45); }

/* ---------- hero ---------- */
.hero { min-height: 100vh; padding: 112px 0 88px; display: flex; flex-direction: column; justify-content: center; gap: 48px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.1; }
.nowrap { white-space: nowrap; }
.hero-lead { margin: 24px 0 20px; color: #c3cfdd; font-size: 17px; max-width: 560px; }
.hero-lead b { color: var(--text); font-weight: 600; }
.hero-role { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.hero-role li { font-size: 13px; color: var(--muted); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); }

.pipeline { display: grid; grid-template-columns: 1fr 40px 1.15fr 40px 1fr; align-items: center; min-height: 460px; }
.pipe-col { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
.pipe-label { font: 11px var(--mono); letter-spacing: 0.14em; color: var(--dim); white-space: nowrap; }
.in-card { width: 100%; max-width: 150px; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); }
.in-card img { width: 100%; height: 86px; object-fit: cover; object-position: top; opacity: 0.85; }
.in-card span { display: block; padding: 6px 10px; font-size: 12px; color: var(--muted); }
.in-text code { display: block; height: 52px; padding: 10px; font: 11px/1.5 var(--mono); color: #9fdcf0; background: #0d141d; }
.pipe-line { position: relative; height: 2px; background: linear-gradient(90deg, var(--line-2), rgb(0 179 227 / 0.6)); }
.pipe-line i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 12px var(--brand); animation: flow 1.8s linear infinite; }
.pipe-line:last-of-type i { animation-delay: 0.9s; }
@keyframes flow { from { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
.core-card {
  width: 100%; padding: 20px; border-radius: 16px; text-align: left;
  background: linear-gradient(160deg, rgb(0 179 227 / 0.14), rgb(26 94 255 / 0.06) 60%), var(--surface);
  border: 1px solid rgb(0 179 227 / 0.4);
  box-shadow: 0 0 60px rgb(0 179 227 / 0.14);
}
.core-card strong { display: block; font-size: 18px; }
.core-card > span { font-size: 12px; color: var(--muted); }
.core-card ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.core-card li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 9px 12px; border-radius: 8px; background: rgb(255 255 255 / 0.04); border: 1px solid var(--line); }
.core-card li b { font: 500 13px var(--mono); color: #bfe9f7; }
.core-card li em { font-style: normal; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.core-card li.is-key { border-color: rgb(251 211 90 / 0.55); }
.core-card li.is-key b { color: var(--amber); }
.out-phone { width: min(100%, 190px); filter: drop-shadow(0 20px 40px rgb(0 0 0 / 0.55)); }
.out-tag { font: 11px var(--mono); color: var(--brand); }

.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.hero-stats div { padding: 20px 24px 0 0; display: flex; flex-direction: column; gap: 4px; }
.hero-stats b { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.hero-stats span { font-size: 13px; color: var(--muted); }

/* ---------- demo ---------- */
.demo-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 10px 10px 10px 14px; margin-bottom: 16px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.input-preview { display: flex; align-items: center; gap: 14px; min-width: 0; }
.input-thumbs { display: flex; gap: 6px; flex-shrink: 0; }
.input-thumbs img { width: 28px; height: 52px; object-fit: cover; object-position: top; border-radius: 5px; border: 1px solid var(--line-2); }
.input-prompt { margin: 0; font: 12.5px/1.55 var(--mono); color: #9fb3c8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.generate {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--grad); color: #fff; font-weight: 600; box-shadow: 0 8px 28px rgb(26 94 255 / 0.35); transition: transform 160ms ease, opacity 160ms ease;
}
.generate:hover { transform: translateY(-1px); }
.generate[disabled] { opacity: 0.6; cursor: progress; }
.generate.is-busy .gen-icon { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.stage { --stage-h: clamp(440px, calc(100vh - 360px), 620px); display: grid; grid-template-columns: minmax(0, 7fr) 56px minmax(0, 3fr); align-items: center; }
.frame { margin: 0; height: var(--stage-h); display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgb(0 0 0 / 0.45); position: relative; }
.frame-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #161e2a; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c3a4d; }
.frame-bar span { margin-left: 10px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-bar a { color: var(--brand); white-space: nowrap; }
.scaler { position: relative; overflow: hidden; width: 100%; }
.scaler iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #000; }
.frame-lib .scaler { flex: 1; min-height: 0; }
.used { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 16px; flex-shrink: 0; background: #161e2a; border-top: 1px solid var(--line); }
.used-label { font: 11px var(--mono); letter-spacing: 0.12em; color: var(--dim); white-space: nowrap; }
.used-list { display: flex; flex-wrap: wrap; gap: 6px; }
.frame-bar { flex-shrink: 0; }
.used-list span { font: 12px var(--mono); padding: 3px 9px; border-radius: 6px; color: var(--dim); border: 1px solid var(--line); transition: color 250ms ease, border-color 250ms ease, background 250ms ease, box-shadow 250ms ease; }
.used-list span.is-on { color: #dff6ff; border-color: rgb(0 179 227 / 0.7); background: rgb(0 179 227 / 0.16); box-shadow: 0 0 14px rgb(0 179 227 / 0.3); }

.arrow-gen { position: relative; height: 2px; margin: 0 6px; background: linear-gradient(90deg, var(--line-2), var(--brand)); }
.arrow-gen::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--brand); border-right: 0; }
.arrow-gen span { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); font: 10px var(--mono); letter-spacing: 0.1em; color: var(--dim); }
.stage.is-running .arrow-gen { background: var(--grad); box-shadow: 0 0 14px rgb(0 179 227 / 0.6); }

.phone-wrap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.phone { height: calc(var(--stage-h) - 48px); max-width: 100%; aspect-ratio: 393 / 852; padding: 9px; border-radius: 44px; background: #05070a; box-shadow: 0 0 0 1.5px #2b3442, 0 30px 70px rgb(0 0 0 / 0.55); position: relative; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #131b26; }
.screen-input, .screen-progress, .screen-result, .wf-result { position: absolute; inset: 0; }
.screen-input img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(0.6) brightness(0.55); }
.screen-input span { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; font: 11px var(--mono); letter-spacing: 0.1em; background: rgb(0 0 0 / 0.55); color: var(--muted); white-space: nowrap; }
.screen-progress { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 40%, rgb(0 179 227 / 0.18), transparent 60%), #0d141d; }
.screen-progress ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.screen-progress li { counter-increment: s; display: flex; gap: 10px; align-items: center; font: 12px var(--mono); color: var(--dim); transition: color 200ms ease; }
.screen-progress li::before { content: counter(s); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 10px; }
.screen-progress li.is-done { color: #cfeefa; }
.screen-progress li.is-done::before { content: "✓"; border-color: var(--brand); background: var(--brand); color: #001018; }
.screen-result { animation: reveal 700ms var(--ease); }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); filter: brightness(1.6); } to { clip-path: inset(0); filter: none; } }
.phone-scaler { height: 100%; }
.wf-result img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 500ms ease; }
.wf-result img.is-on { opacity: 1; }
.wf-step { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 5px 11px; border-radius: 999px; font: 11px var(--mono); background: rgb(0 0 0 / 0.65); color: #cfeefa; white-space: nowrap; z-index: 2; }
.phone-caption { font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; min-height: 38px; max-width: 280px; }
.phone-caption b { color: var(--brand); font-weight: 600; }

/* ---------- how ---------- */
.map { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 26px; margin-bottom: 16px; }
.map-head { position: absolute; top: 0; font: 11px var(--mono); letter-spacing: 0.14em; color: var(--dim); }
.map-head-from { left: 0; }
.map-head-to { right: 0; }
.map-row {
  position: relative; display: grid; grid-template-columns: 28px auto 1fr auto; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: left;
  transition: border-color 200ms ease, background 200ms ease;
}
.map-row:hover { border-color: var(--line-2); }
.map-row[aria-selected="true"] { border-color: rgb(0 179 227 / 0.6); background: linear-gradient(90deg, rgb(0 179 227 / 0.08), rgb(26 94 255 / 0.04)); }
.map-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font: 600 13px var(--mono); background: var(--surface-2); color: var(--muted); }
.map-row[aria-selected="true"] .map-no { background: var(--brand); color: #001018; }
.map-from { padding: 6px 11px; border-radius: 999px; background: rgb(124 196 255 / 0.12); color: #cfe6fb; font-weight: 500; font-size: 13px; white-space: nowrap; }
.map-to { padding: 6px 11px; border-radius: 999px; background: rgb(251 211 90 / 0.12); color: var(--amber); font: 500 13px var(--mono); white-space: nowrap; }
.map-arrow { min-width: 16px; height: 2px; background: linear-gradient(90deg, rgb(124 196 255 / 0.4), rgb(251 211 90 / 0.6)); position: relative; }
.map-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: rgb(251 211 90 / 0.8); border-right: 0; }
.key-badge { position: absolute; right: 10px; top: -10px; font: 600 11px var(--mono); letter-spacing: 0.1em; padding: 4px 9px; border-radius: 6px; background: var(--amber); color: #2a2000; }

.how-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; animation: fade 400ms var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
.how-card { margin: 0; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.how-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.how-card > header span { font: 11px var(--mono); letter-spacing: 0.14em; color: var(--dim); }
.how-card > header b { font-size: 14px; font-weight: 600; }
.how-card img { width: 100%; aspect-ratio: 16 / 8.2; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--line); }
.how-card .shot-pair { display: grid; grid-template-columns: 1fr 1fr; }
.how-card .shot-pair img { aspect-ratio: 4 / 3.3; }
.how-card .shot-pair img + img { border-left: 1px solid var(--line); }
.how-body { padding: 14px 18px 16px; }
.how-body p { margin: 0 0 12px; color: #c3cfdd; font-size: 14px; }
.how-body ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; display: grid; gap: 4px; }
.code {
  margin: 0; padding: 16px 18px; flex: 1; overflow: auto; max-height: 300px;
  font: 12.5px/1.65 var(--mono); color: #c9d6e4; background: #0a0f15; white-space: pre;
}
.code .k { color: #c792ea; } .code .s { color: #addb67; } .code .c { color: #5f7187; } .code .v { color: #7fdbff; } .code .n { color: #f78c6c; } .code .h { color: var(--amber); }
.tree { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.tree span { font: 11.5px var(--mono); padding: 3px 8px; border-radius: 6px; background: rgb(255 255 255 / 0.04); border: 1px solid var(--line); color: var(--muted); }
.tree span.is-used { color: #dff6ff; border-color: rgb(0 179 227 / 0.55); }

.runtime { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 28px 0 0; padding: 0; counter-reset: r; }
.runtime li { position: relative; counter-increment: r; padding: 16px 16px 16px 52px; border-radius: 12px; border: 1px dashed var(--line-2); }
.runtime li::before { content: "0" counter(r); position: absolute; left: 16px; top: 16px; font: 12px var(--mono); color: var(--brand); }
.runtime b { display: block; font-size: 15px; }
.runtime span { font-size: 13px; color: var(--muted); }

/* ---------- outcome ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stats div { padding: 22px 20px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.stats b { display: block; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats b i { font-style: normal; color: var(--dim); -webkit-text-fill-color: var(--dim); font-weight: 400; margin: 0 2px; }
.stats span { display: block; margin-top: 2px; font: 11px var(--mono); letter-spacing: 0.14em; color: var(--dim); }
.stats p { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.flows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.flow { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); }
.flow-new { border-color: rgb(0 179 227 / 0.45); background: linear-gradient(160deg, rgb(0 179 227 / 0.08), transparent 60%), var(--bg-2); }
.flow-title { font: 11px var(--mono); letter-spacing: 0.14em; color: var(--dim); }
.flow-new .flow-title { color: var(--brand); }
.flow ol { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow li { font-size: 13px; padding: 6px 11px; border-radius: 8px; background: rgb(255 255 255 / 0.04); color: #c3cfdd; }
.flow li + li::before { content: "→"; margin-right: 8px; color: var(--dim); }
.flow li b { color: var(--text); margin-left: 4px; }
.flow-old .flow-end b { color: #ff9771; }
.flow-new .flow-end b { color: #7fdbff; }

.deliver { display: grid; grid-template-columns: 1.2fr 1.2fr 0.6fr; gap: 12px; margin-bottom: 28px; }
.deliver figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; }
.deliver img { width: 100%; height: 180px; object-fit: cover; object-position: top left; }
.deliver figure:last-child img { object-position: top center; }
.deliver figcaption { padding: 12px 14px; font-size: 13px; color: var(--muted); }
.deliver figcaption b { display: block; color: var(--text); font-size: 14px; }

.tabs .seg { margin-bottom: 16px; }
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; animation: fade 400ms var(--ease); }
.points li { padding: 18px 20px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.points b { display: block; margin-bottom: 6px; color: var(--text); font-size: 15px; }

.footer { margin-top: 80px; padding: 28px 0 96px; border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--dim); }
.footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width:760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .pipeline { min-height: 0; }
  .stage { grid-template-columns: 1fr; gap: 28px; }
  .arrow-gen { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .runtime { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:760px) {
  body { overflow-x: hidden; }
  .header nav, .header-meta { display: none; }
  .wrap { width: calc(100% - 32px); }
  .seg { display: flex; width: 100%; }
  .seg button { flex: 1; padding: 9px 10px; font-size: 13px; }
  .demo-controls { padding: 12px; }
  .generate { justify-content: center; }
  .map-row { grid-template-columns: 28px 1fr; row-gap: 8px; }
  .map-from, .map-to { white-space: normal; justify-self: start; }
  .map-arrow { display: none; }
  .map-to { grid-column: 2; }
  .key-badge { top: 12px; }
  .how-card > header { flex-direction: column; align-items: flex-start; gap: 2px; }
  .code { font-size: 11.5px; }
  .section { padding-top: 88px; }
  .section-head { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr; gap: 14px; }
  .pipe-line { width: 2px; height: 28px; justify-self: center; background: linear-gradient(var(--line-2), var(--brand)); }
  .pipe-line i { display: none; }
  .pipe-in { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .pipe-in .pipe-label { width: 100%; text-align: center; }
  .in-card { max-width: 30%; }
  .hero-stats { grid-template-columns: 1fr; }
  .demo-controls { grid-template-columns: 1fr; }
  .map { grid-template-columns: 1fr; }
  .map-head { display: none; }
  .how-panel, .flows, .points { grid-template-columns: 1fr; }
  .deliver { grid-template-columns: 1fr; }
  .stats, .runtime { grid-template-columns: 1fr; }
  .stage { --stage-h: 520px; }
}

/* ===== Unified spec (tasks/unify.md): shared type scale, Inter + Noto Sans TC, mono labels,
   #dcdcdc greys on dark, auto-hiding header, 90px / 1400px desktop column. ===== */
:root{--muted:#dcdcdc}
body{font-family:var(--font-sans)}
/* labels / tags */
.eyebrow,.section-no,.header-meta,.pipe-label,.out-tag,.used-label,.map-head,.key-badge,.how-card>header span,.stats span,.flow-title,.footer,.brand small{font-size:var(--t-tag-size);line-height:var(--t-tag-line)}
.header nav{font-size:var(--t-small-size);line-height:var(--t-small-line)}
/* hero 大標題 */
.hero h1{font-size:var(--t-h1-size);line-height:var(--t-h1-line);font-weight:700}
.hero-lead{font-size:var(--t-body-size);line-height:var(--t-body-line)}
/* section titles 中標題 */
.section-head h2{font-size:var(--t-h2-size);line-height:var(--t-h2-line);font-weight:700;letter-spacing:-.02em}
.section-head>p:last-child{font-size:var(--t-body-size);line-height:var(--t-body-line)}
/* 超小標題 1 (numbers) / 3 */
.hero-stats b,.stats b{font-size:var(--t-h4-size);line-height:var(--t-h4-line)}
.core-card strong,.how-card>header b,.runtime b,.points b,.deliver figcaption b{font-size:var(--t-h6-size);line-height:var(--t-h6-line);font-weight:700}
/* 小描述 / tab */
.hero-role li,.hero-stats span,.seg button,.phone-caption,.map-from,.how-body p,.how-body ul,.runtime span,.stats p,.flow li,.deliver figcaption,.points li{font-size:var(--t-small-size);line-height:var(--t-small-line)}
/* buttons */
.button,.generate{font-size:var(--t-btn-m-size);line-height:var(--t-btn-m-line);font-weight:var(--t-btn-m-weight)}

/* Header: slides away while scrolling down, returns on scroll up. */
.header{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.header.is-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.header{transition:none}}
/* Desktop gutters: 90px sides, 1400px column; header aligned to it. */
@media(min-width:0px){.wrap{width:min(1400px,calc(100% - 2 * var(--gutter)))}.header{padding:0 max(var(--gutter),calc((100% - 1400px)/2))}}

/* ===== Live demo in three parts: Prompt → component library → prototype ===== */
.demo-controls{display:flex;justify-content:flex-start;padding:0;background:none;border:0;margin-bottom:18px}
.stage{grid-template-columns:minmax(0,2.6fr) 44px minmax(0,4.6fr) 44px minmax(0,2.2fr);align-items:stretch}
.stage>.arrow-gen{align-self:center}
/* Prompt, as a chat composer */
.prompt-card{margin:0;display:flex;flex-direction:column;height:var(--stage-h);border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.prompt-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.prompt-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)}
.prompt-thread{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding:16px}
.prompt-attach{display:flex;gap:6px;justify-content:flex-end}
.prompt-attach img{width:46px;height:auto;border-radius:6px;border:1px solid var(--line-2)}
.prompt-bubble{margin:0;padding:12px 14px;border:1px solid rgb(0 179 227 / .35);border-radius:14px 14px 4px 14px;background:rgb(0 179 227 / .1);color:var(--text);text-align:left;cursor:pointer;font:inherit;transition:background .2s,border-color .2s}
.prompt-bubble:hover{background:rgb(0 179 227 / .18);border-color:var(--brand)}
.prompt-bubble .input-prompt{margin:0;font:13px/1.65 var(--sans);color:inherit;display:block;-webkit-line-clamp:unset;overflow:visible}
.prompt-composer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 16px;border-top:1px solid var(--line)}
.prompt-composer>span{font-size:12px;color:var(--dim)}
.prompt-composer .generate{flex:none}
/* Default phone screen before generating: a neutral skeleton, not a finished design. */
.screen-input{background:#0d1219;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:8px;padding:44px 14px 14px;align-content:start}
.screen-input .sk{display:block;border-radius:8px;background:linear-gradient(90deg,#161d27 0,#1e2734 50%,#161d27 100%);background-size:200% 100%;animation:sk-shine 1.6s linear infinite}
.screen-input .sk-bar{grid-column:1/-1;height:18px;width:40%}
.screen-input .sk-title{grid-column:1/-1;height:12px;width:28%;margin-top:6px}
.screen-input .sk-grid{aspect-ratio:1}
.screen-input span{bottom:36px}
@keyframes sk-shine{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.screen-input .sk{animation:none}}
@media(max-width:760px){.stage{grid-template-columns:1fr}.stage>.arrow-gen{display:none}.prompt-card{height:auto;max-height:420px}}
.stage>.arrow-gen span{white-space:nowrap}
/* No "本次調用" strip under the library; smaller example tabs. */
.frame-lib .used{display:none}
.demo-controls .seg button{height:auto;padding:7px 14px;font-size:12px !important;line-height:18px}
.demo-controls .seg{padding:3px}
/* KV picture: laptop with the Omni library + phone with the generated prototype. */
.hero-devices{margin:0;min-width:0}
.hero-devices img{display:block;width:100%;height:auto}
/* Bigger KV picture, running out to the right edge of the window. */
@media(min-width:761px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-devices{margin-right:0}
  .hero-devices img{width:100%}
}
.hero{overflow-x:clip}
/* No caption under the phone; the send button sits at the right of the composer. */
.phone-caption{display:none}
.prompt-composer{justify-content:flex-end}
/* Tablet: the three mapping rows stack instead of overflowing the page. */
@media(max-width:760px){.map{grid-template-columns:minmax(0,1fr)}.map-row{min-width:0}}
/* Titles: second line in the solid accent, no gradient. */
h1 em, h2 em { background: none !important; color: #7fd8f3 !important; -webkit-text-fill-color: currentColor; }
/* Progress step badges keep their circle shape. */
.screen-progress li::before { flex: none; }
/* Demo laid out like the Figma frame: small chat left, library centred, larger phone right;
   all three share the bottom edge, short arrows centred in equal gaps. */
@media(min-width:1101px){
  .stage{grid-template-columns:minmax(0,2.4fr) minmax(64px,1fr) minmax(0,5fr) minmax(64px,1fr) auto;align-items:end}
  .stage>.prompt-card{height:var(--stage-h)}
  .stage>.frame-lib{height:var(--stage-h)}
  .stage>.arrow-gen{align-self:center;justify-self:center;width:36px;margin:0}
  .stage>.phone-wrap{align-self:end;display:flex;justify-content:center}
  .stage .phone{height:var(--stage-h);max-width:none}
}
/* How it works: no mapping caption; arrows, file names and the key badge in the solid accent. */
.map-head{display:none !important}
.map-to{background:#7fd8f3;color:#06141b}
.map-arrow{background:#7fd8f3}
.map-arrow::after{border-left-color:#7fd8f3}
.key-badge{background:#7fd8f3;color:#06141b}
/* The Figma Make template card: only the code block on white. */
.how-card:nth-child(2) .code{background:#d9dfe6;color:#46505d}
.how-card:nth-child(2) .code .k{color:#9b5cff}.how-card:nth-child(2) .code .s{color:#3f9443}.how-card:nth-child(2) .code .c{color:#7d8896}.how-card:nth-child(2) .code .v{color:#1a8cbd}.how-card:nth-child(2) .code .n,.how-card:nth-child(2) .code .h{color:#d4652f}
/* Outcome: three stats; the summary as plain stacked blocks instead of tabs. */
.stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.flows{margin-bottom:72px}
.summary{display:grid;gap:56px}
.summary-block h3{margin:0 0 20px;font-size:var(--t-h5-size,22px);line-height:var(--t-h5-line,32px);font-weight:700}
.summary-block .points{margin:0}
@media(max-width:760px){.stats{grid-template-columns:1fr !important}.flows{margin-bottom:56px}.summary{gap:40px}}
/* Summary: three large cards, three short points each. */
.summary{display:block}
.summary>h3{margin:0 0 24px;font-size:var(--t-h4-size,28px);line-height:var(--t-h4-line,40px);font-weight:700}
.sum-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sum-card{padding:28px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line)}
.sum-card h4{margin:0 0 20px;font:500 12px/16px var(--mono);letter-spacing:.14em;color:#7fd8f3}
.sum-card ul{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.sum-card li{display:grid;gap:6px;padding-top:20px;border-top:1px solid var(--line)}
.sum-card li:first-child{padding-top:0;border-top:0}
.sum-card b{font-size:16px;line-height:24px;color:var(--text)}
.sum-card span{font-size:14px;line-height:22px;color:var(--muted)}
@media(max-width:760px){.sum-grid{grid-template-columns:1fr}}
.stats{margin-bottom:16px !important}
/* Stats: dev-time and speed share one card; coverage in the other. */
.stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.stats .stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.stats .stat-pair .stat-item{padding:0;border:0;background:none;border-radius:0}
.stats .stat-pair .stat-item+.stat-item{padding-left:32px;border-left:1px solid var(--line)}
@media(max-width:760px){.stats{grid-template-columns:1fr !important}.stats .stat-pair{grid-template-columns:1fr;gap:24px}.stats .stat-pair .stat-item+.stat-item{padding:24px 0 0;border-left:0;border-top:1px solid var(--line)}}
/* Outcome, reworked: one hero number, three wins, limits and next steps as quiet lists. */
.oc{display:grid;gap:72px}
.oc-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:end;padding-bottom:56px;border-bottom:1px solid var(--line)}
.oc-num{margin:0;font-size:clamp(48px,6vw,88px);line-height:1;font-weight:700;letter-spacing:-.03em;color:#7fd8f3}
.oc-num i{font-style:normal;font-weight:400;color:var(--dim)}
.oc-num small{font-size:.32em;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:6px}
.oc-cap{margin:16px 0 0;font-size:16px;line-height:26px;color:var(--muted)}
.oc-side{margin:0;display:grid;gap:24px}
.oc-side div{display:grid;gap:4px}
.oc-side dt{font-size:28px;line-height:34px;font-weight:700;color:var(--text)}
.oc-side dd{margin:0;font-size:14px;line-height:22px;color:var(--muted)}
.oc-wins{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.oc-wins li{display:grid;gap:10px;align-content:start}
.oc-wins span{font:500 12px/16px var(--mono);letter-spacing:.14em;color:#7fd8f3}
.oc-wins b{font-size:22px;line-height:30px;color:var(--text)}
.oc-wins p{margin:0;font-size:15px;line-height:24px;color:var(--muted)}
.oc-notes{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:32px;border-radius:var(--radius);background:rgb(255 255 255 / .03)}
.oc-notes h4{margin:0 0 14px;font:500 12px/16px var(--mono);letter-spacing:.14em;color:var(--dim)}
.oc-notes ul{margin:0;padding-left:18px;display:grid;gap:8px}
.oc-notes li{font-size:14px;line-height:22px;color:var(--muted)}
@media(max-width:760px){.oc-hero,.oc-notes{grid-template-columns:1fr}.oc-wins{grid-template-columns:1fr;gap:32px}}
@media(max-width:760px){.oc{gap:48px}.oc-hero{padding-bottom:40px}.oc-notes{padding:24px;gap:28px}}
/* Outcome title sits in the left column above the hero number; the side stats fill the right, bottom-aligned. */
.oc-main .section-head{display:block;margin:0 0 56px}
.oc-side{gap:40px}
.oc-side dt{font-size:clamp(36px,4vw,56px);line-height:1.05;letter-spacing:-.02em}
.oc-side dd{font-size:15px;line-height:24px;margin-top:6px}
@media(min-width:1101px){#outcome-title{white-space:nowrap}}
/* Outcome per Figma 276:47147 */
.oc{gap:36px}
.oc-main .section-head{margin:0 0 30px}
.oc-num{font-size:clamp(56px,6vw,82px);line-height:1}
.oc-num small{font-size:26px;color:var(--text);margin-left:8px}
.oc-side{gap:40px}
.oc-side dt{font-size:clamp(40px,4.2vw,57px)}
.oc-side dd{font-size:14px;line-height:24px}
.oc-hero{padding-bottom:56px}
@media(min-width:1101px){.oc-hero{grid-template-columns:minmax(0,690px) minmax(0,1fr) !important}}
/* KV per Figma 276:47234: solid background, picture wider to the left and a little lower. */
[data-kv].hero, .hero[data-kv]{background:#0b1118 !important;background-image:none !important}
.hero[data-kv]::before,.hero[data-kv]::after{content:none !important}
@media(min-width:761px){
  .hero-devices{position:relative}
  .hero-devices img{width:calc(100% + 57.5px) !important;max-width:none;margin-left:-57.5px;transform:translateY(52px)}
}
/* Three-file tabs without the 1/2/3 badges (Figma 276:47462): label, short arrow, file — centred. */
.map-row{grid-template-columns:auto 28px auto !important;justify-content:center}
.map-row .map-arrow{width:28px;min-width:0}
@media(max-width:760px){.map-row{grid-template-columns:1fr !important;justify-content:start}.map-to{grid-column:auto}}
/* Demo: description on two lines; arrow labels in #dcdcdc, wrapping above the arrow. */
#demo .section-head>p:last-child{max-width:620px}
.stage>.arrow-gen span{white-space:normal !important;width:120px;top:auto;bottom:14px;text-align:center;line-height:16px;color:#dcdcdc;letter-spacing:.04em}
@media(min-width:1101px){#demo .section-head{grid-template-columns:minmax(0,1fr) 600px}#demo .section-head>p:last-child{max-width:600px}}
.stage>.arrow-gen span{white-space:nowrap !important;width:auto !important}
/* How-it-works cards: header / picture-or-code / notes share rows, so the code board matches the picture height. */
@media(min-width:761px){
  .how-panel{grid-template-rows:auto auto auto;row-gap:0}
  .how-panel>.how-card{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  .how-panel>.how-card .code{height:0;min-height:100%;max-height:none}
}
.how-card>header span,.how-body p,.how-body ul,.how-body li{color:#dcdcdc !important}
.how-card img.fit-contain{object-fit:contain;object-position:center;background:#131313}
/* Why + role: a small two-column band between the KV and the demo. */
.brief{padding:0 0 clamp(56px,8vh,88px)}
.brief-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;padding-top:40px;border-top:1px solid var(--line)}
.brief-item h3{margin:0 0 12px;font:500 12px/16px var(--mono);letter-spacing:.14em;color:#7fd8f3}
.brief-item p{margin:0;font-size:16px;line-height:28px;color:#dcdcdc}
.brief-item ul{margin:12px 0 0;padding-left:18px;display:grid;gap:6px}
.brief-item li{font-size:15px;line-height:24px;color:#dcdcdc}
@media(max-width:760px){.brief-grid{grid-template-columns:1fr;gap:32px;padding-top:32px}}
/* Why + role now sits under the demo as its own full-width band on a lighter ground. */
.brief{padding:clamp(56px,8vh,80px) 0;background:#111923;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brief-grid{padding-top:0;border-top:0}
.brief{padding:clamp(80px,11vh,112px) 0}
.brief-item h3{margin:0 0 16px;font:700 18px/26px var(--sans);letter-spacing:0;color:var(--text)}
@media(max-width:760px){.brief{padding:64px 0}}
.brief-item h3{font-size:22px;line-height:30px}
.brief-item h3{color:#7fd8f3}
/* Why: the old hand-off chain on its own accent line, then pain / goal. */
.brief-flow{font-size:18px !important;line-height:28px !important;font-weight:600;color:#7fd8f3 !important}
.brief-flow i{font-style:normal;color:var(--dim);margin:0 4px}
.brief-item li b{color:var(--text);margin-right:8px}
#demo{padding-bottom:clamp(96px,13vh,140px)}
.brief-flow{color:var(--text) !important}
.brief-flow i{color:var(--text)}
@media(min-width:1101px){section#top.hero[data-kv]{min-height:0 !important}}
#demo{scroll-margin-top:-64px}

/* Outcome on tablet / phone: one column, number on one line, side stats below. */
@media(max-width:760px){
  .oc-hero{grid-template-columns:minmax(0,1fr) !important;gap:40px}
  #outcome-title{white-space:normal}
}
@media(max-width:760px){
  .oc-num{font-size:clamp(34px,10.5vw,48px);white-space:nowrap}
  .oc-num small{font-size:18px}
  .oc-side dt{font-size:40px}
}
@media(max-width:760px){.oc-side dt{font-size:30px;line-height:36px}.oc-side{gap:28px}}
/* iOS Safari ignores overflow-x on body alone: clip sideways panning on the root as well. */
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow:clip){html,body{overflow-x:clip}}
/* Phone: the three files as one row of small tabs (file name only). */
@media(max-width:760px){
  .map{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:6px;padding-top:0}
  .map-row{grid-template-columns:1fr !important;justify-content:center;padding:6px;border-radius:999px;min-width:0}
  .map-row .map-from,.map-row .map-arrow{display:none !important}
  .map-row .map-to{grid-column:auto;justify-self:center;font-size:12px;padding:6px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:none;color:#dcdcdc}
  .map-row[aria-selected="true"] .map-to{background:#7fd8f3;color:#06141b}
  .map-row[aria-selected="true"]{border-color:transparent;background:none}
}
/* Tablet / phone demo: stacked, shorter library, vertical arrows with their labels. */
@media(max-width:760px){
  .stage{gap:0 !important}
  .stage>.arrow-gen{display:flex !important;flex-direction:column;align-items:center;gap:8px;width:auto;height:auto;margin:16px auto !important;background:none;box-shadow:none !important}
  .stage>.arrow-gen::before{content:"";order:2;width:2px;height:28px;background:linear-gradient(180deg,var(--line-2),#7fd8f3)}
  .stage>.arrow-gen::after{position:static;order:3;margin-top:-8px;border:6px solid transparent;border-top-color:#7fd8f3;border-bottom:0}
  .stage>.arrow-gen span{position:static !important;transform:none !important;order:1;text-align:center}
  .stage>.arrow-gen span br{display:none}
  .stage>.frame-lib{height:300px !important}
}
@media(max-width:760px){.map-row{padding:4px}.map-row .map-to{font-size:11px;padding:6px;white-space:nowrap;overflow:visible;text-overflow:clip;letter-spacing:0}}
/* Phone: a real segmented tab bar — the selected cell itself fills with the accent. */
@media(max-width:760px){
  .map{gap:4px !important;padding:4px !important;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
  .map-row,.map-row[aria-selected="true"]{padding:0 !important;border:0 !important;border-radius:999px;background:none;min-height:36px;align-items:center}
  .map-row .map-to,.map-row[aria-selected="true"] .map-to{background:none !important;padding:0 4px;border-radius:0}
  .map-row[aria-selected="true"]{background:#7fd8f3 !important}
  .map-row[aria-selected="true"] .map-to{color:#06141b}
}
/* Stacked demo: label to the left of the vertical arrow; no running glow bar behind it. */
@media(max-width:760px){
  .stage>.arrow-gen,.stage.is-running>.arrow-gen{display:grid !important;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;row-gap:0;justify-content:center;align-items:center;background:none !important;box-shadow:none !important}
  .stage>.arrow-gen span{grid-column:1;grid-row:1 / 3;text-align:right}
  .stage>.arrow-gen::before{grid-column:2;grid-row:1;justify-self:center}
  .stage>.arrow-gen::after{grid-column:2;grid-row:2;justify-self:center;margin-top:-1px}
}
/* Label to the right of the vertical arrow. */
@media(max-width:760px){
  .stage>.arrow-gen span{grid-column:2;text-align:left}
  .stage>.arrow-gen::before,.stage>.arrow-gen::after{grid-column:1}
}
@media(max-width:760px){.stage>.arrow-gen span br{display:inline}}
/* Arrow stays centred; its two-line label floats to the right of it. */
@media(max-width:760px){
  .stage>.arrow-gen,.stage.is-running>.arrow-gen{display:flex !important;flex-direction:column;align-items:center;position:relative;width:100% !important}
  .stage>.arrow-gen span{position:absolute !important;left:calc(50% + 16px) !important;top:50% !important;transform:translateY(-50%) !important;white-space:nowrap !important;text-align:left}
}
@media(max-width:760px){.stage>.arrow-gen span{display:block !important;height:auto !important;line-height:16px !important;font-size:11px !important}}
@media(max-width:760px){.stage>.arrow-gen span{bottom:auto !important}}
/* Phone: compact steps 1–2 so prompt → library → generated prototype fit one screen. */
@media(max-width:760px){
  .stage>.prompt-card{max-height:none !important;height:auto !important}
  .prompt-head{display:none}
  .prompt-thread{flex-direction:row;align-items:center;gap:10px;padding:10px 12px;overflow:visible}
  .prompt-attach{flex:none;gap:3px}
  .prompt-attach img{width:22px;border-radius:3px}
  .prompt-bubble{padding:8px 10px;border-radius:10px}
  .prompt-bubble .input-prompt{font-size:12px;line-height:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prompt-composer{padding:6px 8px;border-top:0}
  .prompt-composer .generate{height:34px;padding:0 14px;font-size:13px}
  .stage>.frame-lib{height:150px !important}
  .stage>.arrow-gen{margin:6px auto !important}
  .stage>.arrow-gen::before{height:18px}
  .stage .phone{height:400px;max-width:none;margin:0 auto}
}
/* Phone: the library as an icon summary instead of a squashed live frame; more breathing room. */
.lib-mini{display:none}
@media(max-width:760px){
  .stage>.frame-lib{height:auto !important}
  .stage>.frame-lib .scaler{display:none}
  .lib-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px;background:var(--surface)}
  .lib-mini span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:10px;background:rgb(255 255 255 / .04);border:1px solid var(--line);font-size:11px;line-height:14px;color:#dcdcdc;text-align:center}
  .lib-mini svg{width:22px;height:22px;fill:none;stroke:#7fd8f3;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .stage>.arrow-gen{margin:14px auto !important}
  .stage>.arrow-gen::before{height:28px}
  .stage .phone{height:420px}
}
@media(max-width:760px){
  .lib-mini{gap:6px;padding:12px}
  .lib-mini span{flex-direction:row;justify-content:flex-start;gap:6px;padding:8px;white-space:nowrap;text-align:left}
  .lib-mini svg{width:18px;height:18px;flex:none}
  .stage .phone{height:396px}
}
/* Phone: thumbnails, prompt and the 生成 button on one row. */
@media(max-width:760px){
  .stage>.prompt-card{flex-direction:row;align-items:center}
  .prompt-thread{flex:1;min-width:0;padding:10px 0 10px 10px;gap:8px}
  .prompt-bubble{min-width:0}
  .prompt-composer{flex:none;padding:0 10px 0 8px}
  .prompt-composer .generate{padding:0 12px}
}
@media(max-width:760px){.prompt-attach img:not(:first-child){display:none}.prompt-attach img{width:30px}}
/* ===== Tablet (761–1100): desktop structure, re-flowed where three columns don't fit ===== */
@media(min-width:761px) and (max-width:1100px){
  /* Demo: prompt across the top, then library → phone side by side. */
  .stage{--stage-h:560px;grid-template-columns:minmax(0,1fr) 56px auto;grid-template-areas:"p p p" "a1 a1 a1" "lib a2 ph";align-items:center}
  .stage>.prompt-card{grid-area:p;height:auto}
  .stage>.arrow-gen:nth-of-type(1){grid-area:a1;justify-self:center;width:2px;height:40px;margin:12px 0;background:linear-gradient(180deg,var(--line-2),var(--brand))}
  .stage>.arrow-gen:nth-of-type(1)::after{right:auto;left:-5px;top:auto;bottom:-2px;border:6px solid transparent;border-top-color:var(--brand);border-bottom:0}
  .stage>.arrow-gen:nth-of-type(1) span{left:16px;top:50%;transform:translateY(-50%);white-space:nowrap}
  .stage>.arrow-gen:nth-of-type(2){grid-area:a2;width:36px;justify-self:center}
  .stage>.frame-lib{grid-area:lib;height:var(--stage-h)}
  .stage>.phone-wrap{grid-area:ph}
  .stage .phone{height:var(--stage-h);max-width:none}
  /* Three files: label above the file name inside each card. */
  .map-row{grid-template-columns:1fr !important;justify-items:center;row-gap:8px}
  .map-row .map-arrow{display:none}
  .map-row .map-from,.map-row .map-to{justify-self:center;grid-column:auto}
  /* Outcome: hero number on top, the two side stats in a row below. */
  .oc-hero{grid-template-columns:minmax(0,1fr) !important;gap:40px}
  .oc-side{grid-template-columns:1fr 1fr}
}
@media(min-width:761px) and (max-width:1100px){.stage{grid-template-columns:minmax(0,1fr) 112px auto}.stage>.arrow-gen:nth-of-type(2){width:40px}}
/* Side gutters grow smoothly: 24px at 375 → 90px at 1200 (then fixed), instead of jumping at 1200. */
:root{--gutter:clamp(24px,calc(8vw - 6px),90px)}
.wrap{width:min(1400px,calc(100% - 2 * var(--gutter))) !important}
.header{padding-left:max(var(--gutter),calc((100% - 1400px) / 2)) !important;padding-right:max(var(--gutter),calc((100% - 1400px) / 2)) !important}
.kc-footer{padding-left:max(var(--gutter),calc((100% - 1400px) / 2)) !important;padding-right:max(var(--gutter),calc((100% - 1400px) / 2)) !important}
/* Wins: number / title / text rows shared across the three columns, so descriptions line up when a title wraps. */
@media(min-width:761px){.oc-wins{grid-template-rows:auto auto auto;row-gap:0}.oc-wins li{grid-row:span 3;grid-template-rows:subgrid;gap:0}.oc-wins li>span{margin-bottom:10px}.oc-wins li>b{margin-bottom:10px}}

/* Unify pass 2: section spacing 88 / compact 56 (phone 56 / 40) and section titles on the h2 role. */
main section#demo,main section#how,main section#outcome{padding-top:88px!important;padding-bottom:88px!important}
main section#brief{padding-top:56px!important;padding-bottom:56px!important}
@media(max-width:760px){main section#demo,main section#how,main section#outcome{padding-top:56px!important;padding-bottom:56px!important}main section#brief{padding-top:40px!important;padding-bottom:40px!important}}
section#brief.why-band,section#brief{padding-top:56px!important;padding-bottom:56px!important}@media(max-width:760px){section#brief{padding-top:40px!important;padding-bottom:40px!important}}
main section.brief{padding-top:56px!important;padding-bottom:56px!important}@media(max-width:760px){main section.brief{padding-top:40px!important;padding-bottom:40px!important}}

/* Tablet: section titles stack above their intro so authored line breaks hold. */
@media(min-width:761px) and (max-width:1299px){main .section-head{display:block}main .section-head>p{max-width:none;margin-top:24px}}
/* Tablet: the three file cards stack source → file vertically with a downward arrow between them. */
@media(min-width:761px) and (max-width:1199px){
 .map-row{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto 18px auto!important;justify-items:center;row-gap:8px}
 .map-row .map-arrow{display:block!important;width:2px!important;min-width:0;height:18px;background:#7fd8f3}
 .map-row .map-arrow::after{right:auto;left:-5px;top:auto;bottom:-4px;border:6px solid transparent;border-top-color:#7fd8f3;border-bottom:0}
}
/* Card header: source label left, title flush right even when it wraps. */
.how-card>:first-child>b{margin-left:auto;text-align:right}
/* Phone: long (English) labels wrap instead of overflowing the screen. */
@media(max-width:760px){
 .map-row{min-width:0}
 .map-row .map-to,.map-row[aria-selected="true"] .map-to{white-space:normal;text-align:center;line-height:1.25;overflow-wrap:anywhere}
 .oc-num{white-space:normal}
 .oc-num small{white-space:nowrap;display:inline-block}
}
@media(max-width:760px){html,body{overflow-x:clip}}