@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;900&display=swap");

:root {
  color-scheme: light;
  --bg: #f7f7fb;
  --bg-soft: #eff0f8;
  --ink: #0c1024;
  --muted: #5c6278;
  --line: #d9dceb;
  --panel: rgba(255, 255, 255, 0.76);
  --solid: #fff;
  --purple: #6945ff;
  --cyan: #04bfe7;
  --coral: #ff6577;
  --lime: #d6ff59;
  --shadow: 0 24px 80px rgba(34, 26, 87, 0.13);
  font-family: Manrope, "Noto Sans TC", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080a15;
  --bg-soft: #101426;
  --ink: #f6f5ff;
  --muted: #a7acc1;
  --line: #292e45;
  --panel: rgba(17, 20, 38, 0.78);
  --solid: #111426;
  --shadow: 0 28px 100px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 0%, rgba(65, 211, 255, .12), transparent 30rem),
    radial-gradient(circle at 5% 18%, rgba(120, 69, 255, .13), transparent 32rem),
    var(--bg);
  font-size: 16px;
  line-height: 1.65;
}
a { color: inherit; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(22px);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand > img { width: 58px; height: 39px; object-fit: fill; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 21px; letter-spacing: -.035em; }
.brand-copy strong span { color: var(--purple); }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .language-link {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--panel);
  text-decoration: none;
  cursor: pointer;
}
.language-link { font-size: 13px; font-weight: 800; letter-spacing: .04em; }

main { overflow: hidden; }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  align-items: center;
  gap: clamp(40px, 7vw, 112px);
  width: min(1320px, calc(100% - 40px));
  min-height: calc(100vh - 76px);
  margin: auto;
  padding: 92px 0 110px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: auto 48% 12% -20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  color: var(--purple);
  font: 600 13px/1 DM Mono, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--cyan)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--purple) 12%, transparent); }
h1 { max-width: 780px; margin: 0; font-size: clamp(48px, 6vw, 92px); line-height: 1.02; letter-spacing: -.055em; font-weight: 900; }
.gradient-text { background: linear-gradient(100deg, var(--purple) 8%, #465eff 46%, var(--cyan) 82%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy > p { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 38px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--solid);
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
}
.button.primary { color: #fff; border: 0; background: linear-gradient(110deg, #7547ff, #355fff 56%, #00bcd9); box-shadow: 0 15px 40px rgba(86, 72, 255, .28); }
.button.small { min-height: 44px; padding: 0 18px; font-size: 14px; }
.trust-line { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; padding: 0; color: var(--muted); font-size: 13px; list-style: none; }
.trust-line li::before { content: "✓"; margin-right: 7px; color: var(--cyan); font-weight: 900; }

.product-window { position: relative; padding: 14px; border: 1px solid var(--line); border-radius: 34px; background: linear-gradient(145deg, color-mix(in srgb, var(--solid) 90%, transparent), color-mix(in srgb, var(--bg-soft) 75%, transparent)); box-shadow: var(--shadow); transform: rotate(1.2deg); }
.product-window::after { content: ""; position: absolute; z-index: -1; inset: 18% -16% -13% 20%; border-radius: 50%; background: linear-gradient(130deg, rgba(104, 68, 255, .28), rgba(0, 202, 231, .2)); filter: blur(45px); }
.window-bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px 17px; color: var(--muted); font: 500 11px/1 DM Mono, monospace; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.product-stage { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 470px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #080b17; }
.slide-preview { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 30px; color: #f6f5ff; background: radial-gradient(circle at 85% 15%, #253b72 0, transparent 30%), #101426; }
.slide-preview small { color: var(--lime); font: 600 11px/1 DM Mono, monospace; letter-spacing: .15em; }
.slide-preview h2 { margin: 0; font-size: clamp(30px, 3vw, 48px); line-height: 1.08; letter-spacing: -.04em; }
.slide-line { width: 65%; height: 4px; border-radius: 9px; background: linear-gradient(90deg, var(--coral), transparent); }
.response-panel { display: flex; flex-direction: column; gap: 16px; padding: 24px 18px; color: #f6f5ff; background: #0b1125; border-left: 1px solid #28304d; }
.mini-brand { display: flex; gap: 8px; align-items: center; font: 700 11px/1 DM Mono, monospace; letter-spacing: .12em; }
.mini-brand img { width: 27px; height: 27px; }
.response-card { padding: 18px; border: 1px solid #314265; border-radius: 18px; background: linear-gradient(150deg, #121b36, #0d1328); }
.response-card span { color: #9da6c9; font-size: 11px; }
.response-card strong { display: block; margin-top: 3px; font-size: 24px; }
.bell-curve { position: relative; height: 76px; margin-top: 15px; border-bottom: 1px solid #293455; }
.bell-curve svg { width: 100%; height: 100%; overflow: visible; }
.reactions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.reactions i { display: grid; place-items: center; min-height: 42px; border: 1px solid #2f3d61; border-radius: 13px; background: #101831; font-style: normal; }
.question-chip { padding: 14px; border: 1px solid #2f3d61; border-radius: 15px; color: #cdd2e8; font-size: 12px; }
.live-pulse { color: var(--lime); }

.section { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 110px 0; }
.section-header { display: grid; grid-template-columns: .65fr 1fr; gap: 50px; align-items: end; margin-bottom: 52px; }
.section h2 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.08; letter-spacing: -.045em; }
.section-header p { max-width: 560px; margin: 0; color: var(--muted); font-size: 18px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { min-height: 280px; padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: var(--panel); backdrop-filter: blur(18px); }
.step-number { display: flex; justify-content: space-between; color: var(--purple); font: 600 13px/1 DM Mono, monospace; }
.step-number i { width: 52px; height: 2px; background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.step h3 { margin: 78px 0 10px; font-size: 23px; }
.step p { margin: 0; color: var(--muted); }

.try-section {
  padding: 120px 0;
  color: #f6f5ff;
  background:
    radial-gradient(circle at 10% 10%, rgba(122, 69, 255, .24), transparent 28rem),
    radial-gradient(circle at 90% 80%, rgba(0, 203, 232, .16), transparent 28rem),
    #080b17;
}
.try-inner { width: min(1180px, calc(100% - 40px)); margin: auto; }
.try-heading { display: grid; grid-template-columns: .8fr 1fr; align-items: end; gap: 60px; margin-bottom: 48px; }
.try-heading h2 { margin: 0; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.05; letter-spacing: -.05em; }
.try-heading p { max-width: 600px; margin: 0; color: #a9b0c9; font-size: 18px; }
.demo-shell { padding: 14px; border: 1px solid #303750; border-radius: 34px; background: linear-gradient(145deg, #121629, #0d1020); box-shadow: 0 34px 110px rgba(0, 0, 0, .46); }
.demo-stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); min-height: 590px; overflow: hidden; border: 1px solid #303750; border-radius: 22px; background: #080b17; }
.demo-deck {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(30px, 5vw, 70px);
  border: 0;
  border-radius: 0;
  color: #f6f5ff;
  background:
    radial-gradient(circle at 84% 15%, rgba(50, 76, 146, .95), transparent 32%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    #101426;
  background-size: auto, 42px 42px, 42px 42px, auto;
  text-align: left;
  cursor: pointer;
}
.demo-deck::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; transition: border-color .2s, background .2s; pointer-events: none; }
.demo-deck:hover::after, .demo-deck:focus-visible::after { border-color: #33d6ed; background: rgba(61, 83, 255, .07); }
.demo-deck > small { color: var(--lime); font: 600 12px/1 DM Mono, monospace; letter-spacing: .15em; }
.demo-deck > strong { max-width: 730px; font-size: clamp(40px, 5.3vw, 74px); line-height: 1.02; letter-spacing: -.055em; }
.demo-slide-line { width: 62%; height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--coral), #7c4dff, transparent); }
.replace-hint { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 38px); display: grid; grid-template-columns: 42px auto; gap: 1px 12px; align-items: center; padding: 13px 18px; border: 1px solid rgba(75, 220, 255, .55); border-radius: 999px; background: rgba(7, 12, 27, .86); box-shadow: 0 14px 40px rgba(0,0,0,.35); backdrop-filter: blur(16px); }
.replace-hint i { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #07101d; background: linear-gradient(135deg, #8c5aff, #4bdcff); font-style: normal; font-size: 20px; }
.replace-hint b { font-size: 14px; }
.replace-hint small { color: #9fa9c3; font-size: 11px; }
.demo-responses { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 28px 22px; border-left: 1px solid #303750; background: #0b1125; }
.demo-reaction-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.demo-reaction-row span { padding: 10px 8px; border: 1px solid #2f3d61; border-radius: 12px; background: #101831; text-align: center; font-size: 12px; }
.demo-launch { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:36px; margin:28px 0 44px; padding:28px 30px; border:1px solid #34405d; border-radius:24px; background:linear-gradient(110deg,#0d1428,#101b34); color:#eef4ff; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.demo-launch-copy { display:grid; gap:7px; min-width:0; }
.demo-launch-copy > span:first-child { color:#4bdcff; font:700 10px/1.2 DM Mono,monospace; letter-spacing:.12em; text-transform:uppercase; }
.demo-launch strong { font-size:18px; line-height:1.35; }
.demo-launch p { max-width:760px; margin:0; color:#aeb7ce; font-size:13px; line-height:1.65; }
.demo-launch-stats { display:flex; flex-wrap:wrap; gap:7px; margin:5px 0 0; padding:0; list-style:none; }
.demo-launch-stats li { border:1px solid #344b68; border-radius:999px; padding:6px 10px; color:#aebbd2; background:#09152a; font-size:10px; line-height:1.2; }
.demo-launch-stats b { color:#d6ff59; font-size:12px; }
.demo-launch-button { flex:none; min-height:46px; color:#07101d; border-color:#4bdcff; background:linear-gradient(110deg,#b9f24a,#4bdcff); }
.demo-launch-button .button-arrow { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#07101d; background:rgba(7,16,29,.12); font:900 14px/1 system-ui,sans-serif; letter-spacing:0; text-transform:none; }

.creator-shell { scroll-margin-top: 96px; padding: clamp(26px, 5vw, 56px); border: 1px solid #303750; border-radius: 34px; background: #10162a; box-shadow: 0 34px 110px rgba(0, 0, 0, .46); }
.creator-topline { margin-bottom: 34px; padding-bottom: 28px; border-bottom: 1px solid #303750; }
.creator-topline > div > span { color: #4bdcff; font: 700 11px/1 DM Mono, monospace; letter-spacing: .14em; text-transform: uppercase; }
.creator-topline h3 { margin: 8px 0 3px; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -.045em; }
.creator-topline p { margin: 0; color: #9caaca; }
.quiet-button { margin-top:14px; border:0; padding:0; color:#73ddf4; background:transparent; font-size:12px; font-weight:800; text-decoration:underline; text-decoration-color:#4bdcff66; text-underline-offset:4px; cursor:pointer; }
.creator-shell form { display: grid; gap: 20px; }
.creator-shell fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.creator-shell legend { margin-bottom: 9px; color: #c4cee4; font-size: 14px; font-weight: 800; }
.creator-shell label { display: grid; gap: 9px; color: #c4cee4; font-size: 14px; font-weight: 800; }
.creator-shell label > span { color: #7d89a6; font-weight: 600; }
.creator-shell label small { color: #8793ae; font-weight: 500; }
.creator-shell input, .creator-shell textarea { width: 100%; border: 1px solid #34405d; border-radius: 15px; padding: 15px 16px; color: #f5f7ff; background: #080d1c; line-height: 1.45; }
.creator-shell input:focus, .creator-shell textarea:focus { outline: 3px solid rgba(116, 87, 255, .42); border-color: #8f7aff; }
.creator-shell textarea { resize: vertical; }
.source-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-bottom: 12px; padding: 5px; border: 1px solid #34405d; border-radius: 16px; background: #080d1c; }
.source-tabs button { border: 0; border-radius: 11px; padding: 13px; color: #8796b8; background: transparent; cursor: pointer; }
.source-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(110deg, #704bff, #285fcf); box-shadow: 0 8px 25px rgba(0,0,0,.38); }
.drop-zone { position: relative; display: grid !important; place-items: center; min-height: 190px; padding: 28px; border: 1px dashed rgba(75, 220, 255, .62); border-radius: 20px; background: #0b1428; text-align: center; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.drop-zone:hover, .drop-zone.is-dragging { border-color: #4bdcff; background: #0f1e38; transform: translateY(-1px); }
.drop-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.drop-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 8px; border-radius: 15px; color: #07101d; background: linear-gradient(135deg, #8c5aff, #4bdcff); font-size: 27px; }
.drop-zone strong { max-width: 100%; overflow-wrap: anywhere; color: #edf4ff; font-size: 16px; }
.drop-zone small { margin-top: 6px; }
.data-note { padding: 18px 20px; border: 1px solid rgba(199, 255, 80, .24); border-radius: 17px; background: rgba(199, 255, 80, .035); }
.data-note strong { color: var(--lime); font-size: 13px; }
.data-note p { margin: 6px 0 0; color: #9ca7c0; font-size: 12px; line-height: 1.65; }
.create-action { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(43, 220, 255, .16); }
.create-action p { margin: 0; color: #8d98b2; font-size: 13px; }
.create-action button { border: 1px solid #8068ff; border-radius: 999px; padding: 14px 22px; color: #fff; background: linear-gradient(110deg, #7547ff, #355fff 56%, #00bcd9); font-weight: 850; cursor: pointer; }
.create-action button:disabled { opacity: .55; cursor: wait; }
.form-message { min-height: 1.5em; color: #ff9bc5; font-weight: 750; }

.receipt { scroll-margin-top: 96px; padding: 10px 0; }
.receipt-ready { padding: 34px 0 28px; }
.receipt-ready > span, .start-card span, .receipt-grid article > span, .audience-card span { color: var(--lime); font: 800 11px/1 DM Mono, monospace; letter-spacing: .12em; }
.receipt-ready h2 { margin: 10px 0; font-size: clamp(38px, 6vw, 70px); line-height: 1.05; letter-spacing: -.05em; }
.receipt-ready p, .start-card p, .receipt-grid p { margin: 0; color: #a9b0c9; line-height: 1.55; }
.start-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 18px; padding: 30px; border: 1px solid rgba(199, 255, 80, .4); border-radius: 28px; background: linear-gradient(120deg, #182c31, #0d1d35); }
.start-card h3, .receipt-grid h3 { margin: 8px 0; font-size: 25px; }
.start-card a { flex: none; border-radius: 999px; padding: 14px 20px; color: #07101d; background: var(--lime); text-decoration: none; font-weight: 850; }
.receipt-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
.receipt-grid article { min-width: 0; padding: 25px; border: 1px solid #303750; border-radius: 25px; background: #10162a; }
.audience-card { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 20px; align-items: center; }
.audience-card img { display: block; width: 118px; height: 118px; border: 5px solid #f3eee4; border-radius: 16px; background: #f3eee4; }
.audience-card a { display: block; overflow: hidden; margin: 12px 0; color: #4bdcff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.receipt-grid button, .private-card a { display: inline-block; margin: 16px 7px 0 0; border: 1px solid rgba(43, 220, 255, .34); border-radius: 999px; padding: 10px 13px; color: #dbe7ff; background: #0d2140; text-decoration: none; font-size: 12px; cursor: pointer; }
.expiry { margin: 20px 0 8px; color: #8994ae; font-size: 12px; }
.create-another { display: inline-block; margin-top: 14px; color: #4bdcff; font-weight: 800; }
.privacy-header { grid-template-columns: 1fr; }

.prompt-section { padding: 120px 0; background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .prompt-section { background: #f1f1f7; color: #0b0f22; }
.prompt-inner { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; width: min(1180px, calc(100% - 40px)); margin: auto; align-items: center; }
.prompt-inner h2 { margin: 12px 0 22px; font-size: clamp(38px, 5vw, 64px); line-height: 1.08; letter-spacing: -.045em; }
.prompt-inner p { color: color-mix(in srgb, currentColor 70%, transparent); }
.prompt-box { position: relative; padding: 62px 26px 28px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 24px; background: color-mix(in srgb, currentColor 6%, transparent); }
.prompt-box::before { content: "PROMPT"; position: absolute; top: 24px; left: 26px; font: 600 11px/1 DM Mono, monospace; letter-spacing: .14em; color: #7f62ff; }
.prompt-box code { display: block; font: 500 15px/1.8 DM Mono, "Noto Sans TC", monospace; white-space: pre-wrap; }
.copy-prompt { margin-top: 24px; color: inherit; border-color: color-mix(in srgb, currentColor 20%, transparent); background: transparent; }

.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.principle { min-height: 330px; padding: 38px; border-radius: 28px; border: 1px solid var(--line); background: var(--panel); }
.principle:first-child { background: linear-gradient(145deg, color-mix(in srgb, var(--purple) 14%, var(--panel)), var(--panel)); }
.principle:nth-child(2) { background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 12%, var(--panel)), var(--panel)); }
.principle:last-child { background: linear-gradient(145deg, color-mix(in srgb, var(--lime) 10%, var(--panel)), var(--panel)); }
.principle .icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--solid); font-size: 24px; }
.principle h3 { margin: 62px 0 12px; font-size: 28px; }
.principle p { margin: 0; color: var(--muted); }
.principle-host { grid-column:1 / -1; display:grid; grid-template-columns:auto minmax(0,1fr) minmax(250px,.65fr); gap:26px; align-items:center; min-height:0; padding-block:30px; }
.principle-host .host-copy h3 { margin:0 0 7px; font-size:25px; }
.principle-host .host-copy p { max-width:650px; }
.host-actions { display:grid; gap:9px; }
.source-button, .host-prompt summary { display:flex; align-items:center; justify-content:space-between; min-height:46px; border:1px solid var(--line); border-radius:999px; padding:11px 17px; color:var(--ink); background:color-mix(in srgb,var(--solid) 72%,transparent); text-decoration:none; font-size:13px; font-weight:850; cursor:pointer; }
.source-button { border-color:color-mix(in srgb,var(--purple) 48%,var(--line)); }
.host-prompt summary { list-style:none; }
.host-prompt summary::-webkit-details-marker { display:none; }
.host-prompt summary span { color:var(--purple); font-size:18px; transition:transform .2s; }
.host-prompt[open] summary span { transform:rotate(45deg); }
.host-prompt-body { margin-top:10px; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--solid); box-shadow:0 18px 48px color-mix(in srgb,var(--ink) 14%,transparent); }
.host-prompt-body code { display:block; max-height:150px; overflow:auto; color:var(--muted); font:500 11px/1.65 DM Mono,"Noto Sans TC",monospace; white-space:pre-wrap; }
.host-prompt-body .button { min-height:38px; margin-top:13px; padding-inline:14px; font-size:12px; }
.use-policy { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; margin-top:18px; padding:22px 24px; border:1px solid color-mix(in srgb,var(--coral) 35%,var(--line)); border-radius:22px; background:color-mix(in srgb,var(--coral) 5%,var(--panel)); }
.use-policy strong { color:var(--coral); font:800 12px/1.4 DM Mono,"Noto Sans TC",monospace; letter-spacing:.08em; text-transform:uppercase; }
.use-policy p { margin:0; color:var(--muted); font-size:13px; }

.support { padding-top: 0; }
.support-card { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; padding: clamp(34px, 6vw, 72px); border: 1px solid var(--line); border-radius: 34px; background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 14%, var(--solid)), color-mix(in srgb, var(--cyan) 10%, var(--solid))); }
.support-card h2 { margin: 0 0 14px; }
.support-card p { max-width: 720px; margin: 0; color: var(--muted); }
.support-actions { display: flex; flex-direction: column; gap: 10px; }
.support-secondary { background: transparent; }
.faq-section { padding-top:70px; }
.faq-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.faq-list details { min-width:0; border:1px solid var(--line); border-radius:22px; padding:22px 24px; background:var(--panel); }
.faq-list details[open] { background:linear-gradient(145deg,color-mix(in srgb,var(--purple) 9%,var(--panel)),var(--panel)); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--ink); font-size:17px; font-weight:850; cursor:pointer; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"＋"; flex:none; color:var(--purple); font-size:20px; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list p { margin:14px 0 0; color:var(--muted); font-size:14px; line-height:1.75; }

footer { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; padding: 42px clamp(20px, 5vw, 72px); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer-brand { color: var(--ink); font-weight: 900; letter-spacing: .12em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { text-underline-offset: 4px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-copy { text-align: center; }
  .hero-copy > p { margin-left: auto; margin-right: auto; }
  .hero-actions, .trust-line { justify-content: center; }
  .product-window { width: min(660px, 100%); margin: auto; transform: none; }
  .section-header, .prompt-inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 220px; }
  .step h3 { margin-top: 52px; }
  .support-card { grid-template-columns: 1fr; }
  .support-actions { flex-direction: row; flex-wrap: wrap; }
  .try-heading { grid-template-columns: 1fr; gap: 22px; }
  .demo-stage { grid-template-columns: 1fr; }
  .demo-deck { min-height: 500px; }
  .demo-responses { border-top: 1px solid #303750; border-left: 0; }
  .receipt-grid { grid-template-columns: 1fr 1fr; }
  .audience-card { grid-column: 1 / -1; }
  .principles { grid-template-columns: 1fr; }
  .principle-host { grid-column:auto; grid-template-columns:auto 1fr; }
  .host-actions { grid-column:1 / -1; grid-template-columns:1fr 1fr; }
}

@media (max-width: 620px) {
  .site-header { min-height: 66px; padding-inline: 16px; }
  .brand > img { width: 50px; height: 34px; }
  .brand-copy small { display: none; }
  .hero { width: min(100% - 28px, 1320px); min-height: auto; padding: 64px 0 88px; }
  h1 { font-size: clamp(43px, 14vw, 64px); }
  .hero-copy > p { font-size: 17px; }
  .hero-actions .button { width: 100%; }
  .product-window { padding: 8px; border-radius: 24px; }
  .product-stage { grid-template-columns: 1fr; min-height: 0; }
  .slide-preview { min-height: 300px; }
  .response-panel { border-left: 0; border-top: 1px solid #28304d; }
  .section { width: min(100% - 28px, 1180px); padding: 84px 0; }
  .section-header { margin-bottom: 34px; }
  .section h2, .prompt-inner h2 { font-size: 40px; }
  .principles { grid-template-columns: 1fr; }
  .principle { min-height: 280px; padding: 28px; }
  .prompt-inner { width: min(100% - 28px, 1180px); gap: 34px; }
  .prompt-box { padding-inline: 20px; }
  .try-section { padding: 84px 0; }
  .try-inner { width: min(100% - 20px, 1180px); }
  .try-heading { padding-inline: 4px; }
  .try-heading h2 { font-size: 40px; }
  .try-heading p { font-size: 16px; }
  .demo-shell { padding: 8px; border-radius: 24px; }
  .demo-stage { border-radius: 17px; }
  .demo-deck { min-height: 390px; padding: 28px 22px; }
  .demo-deck > strong { font-size: clamp(35px, 11vw, 48px); }
  .replace-hint { right: 16px; bottom: 16px; left: 16px; grid-template-columns: 38px auto; border-radius: 20px; }
  .replace-hint i { width: 34px; height: 34px; }
  .demo-launch { grid-template-columns:1fr; padding:20px; }
  .demo-launch-button { width:100%; text-align:center; }
  .creator-shell { padding: 22px; border-radius: 24px; }
  .creator-topline { display: grid; }
  .quiet-button { justify-self: start; }
  .create-action, .start-card { display: grid; }
  .create-action button, .start-card a { width: 100%; text-align: center; }
  .receipt-grid { grid-template-columns: 1fr; }
  .audience-card { grid-column: auto; grid-template-columns: 90px minmax(0, 1fr); }
  .audience-card img { width: 90px; height: 90px; }
  .principle-host { grid-template-columns:1fr; }
  .principle-host .icon { margin-bottom:4px; }
  .host-actions { grid-column:auto; grid-template-columns:1fr; }
  .use-policy { grid-template-columns:1fr; gap:8px; }
  .faq-list { grid-template-columns:1fr; }
  footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}