:root {
  color-scheme: dark;
  --ink: #fff3f5;
  --muted: #c5a6aa;
  --line: rgba(251, 202, 206, 0.18);
  --panel: rgba(6, 84, 78, 0.92);
  --panel-deep: rgba(1, 61, 57, 0.96);
  --lime: #fbcace;
  --green: #e4a3aa;
  --maroon: #4a1c24;
  --cream: #f8e6e8;
  --bg: #024a45;
  font-family: Manrope, "PingFang HK", "Noto Sans HK", "Microsoft JhengHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 20%, rgba(251, 202, 206, 0.1), transparent 30rem),
    radial-gradient(circle at 12% 56%, rgba(228, 163, 170, 0.06), transparent 24rem),
    linear-gradient(180deg, #00443f 0%, var(--bg) 42%, #013f3b 100%),
    var(--bg);
}

a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button { color: inherit; }

.page-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.topbar {
  width: min(1240px, calc(100% - 48px));
  height: 80px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font: 600 14px/1 "Space Grotesk", sans-serif; letter-spacing: 0.08em; }
.brand img { border-radius: 9px; }
.topbar > p { margin: 0; color: var(--muted); font: 500 11px/1 "DM Mono", monospace; letter-spacing: 0.14em; }
.topbar > p i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.back-link { justify-self: end; color: var(--cream); font-size: 13px; }
.back-link span { color: var(--lime); margin-left: 5px; }

main { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.intro { padding: 92px 0 56px; display: grid; grid-template-columns: 1fr 0.75fr; gap: 70px; align-items: end; }
.overline { margin: 0 0 22px; color: var(--lime); font: 500 11px/1.2 "DM Mono", monospace; letter-spacing: 0.16em; }
.intro h1 { grid-column: 1; margin: 0; font-family: "Space Grotesk", "PingFang HK", "Noto Sans HK", sans-serif; font-size: clamp(45px, 6.2vw, 82px); font-weight: 600; line-height: 0.99; letter-spacing: -0.055em; }
.intro h1 em { color: var(--lime); font-style: normal; }
.intro-copy { grid-column: 2; grid-row: 1 / span 2; max-width: 430px; margin: 0 0 5px; padding-left: 22px; border-left: 1px solid var(--lime); color: var(--cream); font-size: 16px; line-height: 1.85; }

.call-workspace { position: relative; display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); min-height: 610px; border: 1px solid rgba(251, 202, 206, 0.28); background: var(--panel-deep); box-shadow: 0 32px 100px rgba(0, 31, 29, 0.34); }
.call-workspace::before { content: ""; position: absolute; inset: -1px -1px auto; height: 3px; background: linear-gradient(90deg, var(--lime), rgba(251, 202, 206, 0.1) 58%, transparent); }
.setup-panel, .session-panel { padding: 34px; }
.setup-panel { border-right: 1px solid var(--line); background: linear-gradient(155deg, rgba(13, 98, 91, 0.82), rgba(1, 61, 57, 0.95)); }
.panel-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 34px; }
.panel-heading > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(251, 202, 206, 0.34); color: var(--lime); font: 500 11px/1 "DM Mono", monospace; }
.panel-heading small, .engine-card small { color: var(--muted); font: 500 9px/1 "DM Mono", monospace; letter-spacing: 0.14em; }
.panel-heading h2 { margin: 5px 0 0; font-family: "Space Grotesk", "Noto Sans HK", sans-serif; font-size: 21px; }

.field-stack { display: grid; gap: 22px; }
.field-stack label { display: grid; gap: 9px; color: var(--cream); font-size: 13px; }
.field-stack select { width: 100%; min-height: 54px; padding: 0 42px 0 15px; border: 1px solid rgba(251, 202, 206, 0.24); border-radius: 0; outline: 0; color: var(--ink); background: #064f49; }
.field-stack select:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(251, 202, 206, 0.1); }
.field-stack select:disabled { color: #ad8f93; opacity: 1; cursor: wait; }

.engine-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; margin-top: 26px; padding: 14px; border: 1px solid var(--line); background: rgba(0, 45, 42, 0.34); }
.engine-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--maroon); background: var(--lime); font: 600 17px/1 "DM Mono", monospace; }
.engine-card strong { display: block; margin-top: 6px; font: 400 10px/1.5 "DM Mono", monospace; color: var(--cream); }
.engine-card > i { padding: 5px 7px; border: 1px solid rgba(251, 202, 206, 0.34); color: var(--lime); font: normal 500 8px/1 "DM Mono", monospace; letter-spacing: 0.12em; }

.call-actions { margin-top: 30px; }
.start-button { width: 100%; min-height: 76px; display: flex; align-items: center; gap: 16px; padding: 12px 18px; border: 0; background: linear-gradient(105deg, #fbcace, #f8e6e8); color: var(--maroon); text-align: left; cursor: pointer; transition: transform 160ms ease, filter 160ms ease; }
.start-button:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.05); }
.start-button:disabled { opacity: 0.34; cursor: wait; }
.button-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--maroon); color: var(--lime); font-size: 12px; }
.start-button small { display: block; margin-bottom: 5px; font: 500 8px/1 "DM Mono", monospace; letter-spacing: 0.12em; opacity: 0.65; }
.start-button strong { font-size: 17px; }
.stop-button { width: 100%; min-height: 60px; border: 1px solid #ff7c71; color: #ff9a91; background: rgba(255, 75, 61, 0.08); cursor: pointer; }
.mic-note { margin: 13px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.mic-note span { color: var(--green); }

.session-panel { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.session-topline { display: flex; align-items: center; justify-content: space-between; }
.session-topline > div { display: flex; align-items: center; gap: 10px; color: var(--muted); font: 500 10px/1 "DM Mono", monospace; letter-spacing: 0.13em; }
.session-topline > div small { color: var(--lime); }
.status-pill { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 11px; border: 1px solid var(--line); background: rgba(0, 45, 42, 0.28); }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #74857d; }
.status-pill b { color: var(--cream); font: 500 10px/1 "DM Mono", monospace; }
[data-state="ready"] .status-pill i, [data-state="listening"] .status-pill i { background: var(--green); box-shadow: 0 0 10px var(--green); }
[data-state="speaking"] .status-pill i, [data-state="thinking"] .status-pill i { background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: blink 800ms ease-in-out infinite alternate; }
[data-state="error"] .status-pill i { background: #ff756d; }

.voice-stage { position: relative; min-height: 250px; display: grid; place-items: center; }
.voice-rings, .voice-rings i { position: absolute; inset: 50%; border: 1px solid rgba(251, 202, 206, 0.18); border-radius: 50%; transform: translate(-50%, -50%); }
.voice-rings { width: 210px; height: 210px; }
.voice-rings i:nth-child(1) { width: 160px; height: 160px; }
.voice-rings i:nth-child(2) { width: 110px; height: 110px; }
.voice-rings i:nth-child(3) { width: 260px; height: 260px; }
.voice-core { z-index: 1; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff3f5, var(--lime) 55%, #c7757e); color: var(--maroon); box-shadow: 0 0 60px rgba(251, 202, 206, 0.18); }
.voice-core span { align-self: end; font: 600 15px/1 "DM Mono", monospace; letter-spacing: 0.08em; }
.voice-core small { align-self: start; margin-top: 5px; font: 500 8px/1 "DM Mono", monospace; letter-spacing: 0.12em; }
.voice-bars { position: absolute; bottom: 23px; display: flex; align-items: center; gap: 5px; height: 30px; }
.voice-bars i { width: 2px; height: 5px; background: var(--green); opacity: 0.45; }
[data-state="speaking"] .voice-bars i, [data-state="listening"] .voice-bars i { animation: wave 700ms ease-in-out infinite alternate; }
.voice-bars i:nth-child(2), .voice-bars i:nth-child(8) { animation-delay: -160ms; }
.voice-bars i:nth-child(3), .voice-bars i:nth-child(7) { animation-delay: -320ms; }
.voice-bars i:nth-child(4), .voice-bars i:nth-child(6) { animation-delay: -480ms; }

.transcript-head { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--cream); font-size: 12px; }
.transcript-head small { color: var(--muted); font: 400 9px/1.5 "DM Mono", monospace; }
.transcript { height: 142px; overflow-y: auto; padding: 17px 3px 0; scrollbar-color: #c7757e transparent; }
.transcript p { display: grid; grid-template-columns: 42px 1fr; gap: 10px; margin: 0 0 13px; color: #d4b7bb; font-size: 12px; line-height: 1.65; }
.transcript strong { color: var(--green); font: 500 9px/1.8 "DM Mono", monospace; }
.transcript .customer strong { color: var(--lime); }
.transcript .system span { color: #c5a6aa; }
.fallback { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid #ff756d; background: rgba(255, 117, 109, 0.06); color: #cfaaa6; font-size: 11px; }
.fallback a { color: var(--lime); }

.guardrail-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-top: 0; }
.guardrail-strip article { min-height: 82px; display: flex; align-items: center; gap: 12px; padding: 18px; border-right: 1px solid var(--line); }
.guardrail-strip article:last-child { border-right: 0; }
.guardrail-strip b { color: var(--green); font: 500 9px/1 "DM Mono", monospace; }
.guardrail-strip span { color: #d4b7bb; font-size: 12px; }

.instructions { padding: 100px 0 92px; display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 90px; border-bottom: 1px solid var(--line); }
.instructions h2 { margin: 0; font-family: "Space Grotesk", "Noto Sans HK", sans-serif; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.04em; }
.instructions ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.instructions li > span { display: grid; place-items: center; width: 33px; height: 33px; margin-bottom: 22px; border: 1px solid rgba(251, 202, 206, 0.34); color: var(--lime); font: 500 10px/1 "DM Mono", monospace; }
.instructions li p { margin: 0; color: #c5a6aa; font-size: 13px; line-height: 1.75; }
.instructions li strong { display: block; margin-bottom: 7px; color: var(--cream); font-size: 15px; }

footer { width: min(1120px, calc(100% - 48px)); min-height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 400 10px/1 "DM Mono", monospace; }
footer div { display: flex; gap: 24px; }
footer a:hover { color: var(--lime); }

.analytics-consent { position: fixed; z-index: 20; right: 18px; bottom: 18px; width: min(380px, calc(100% - 36px)); padding: 18px; border: 1px solid rgba(251, 202, 206, 0.35); background: #013f3b; box-shadow: 0 16px 60px rgba(0,0,0,.35); }
.analytics-consent p { margin: 0 0 14px; color: var(--cream); font-size: 12px; line-height: 1.65; }
.analytics-consent div { display: flex; justify-content: flex-end; gap: 9px; }
.analytics-consent button { padding: 8px 12px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.analytics-consent [data-consent-accept] { border-color: var(--lime); color: var(--maroon); background: var(--lime); }

@keyframes wave { from { height: 4px; opacity: .3; } to { height: 28px; opacity: 1; } }
@keyframes blink { to { opacity: .4; } }

@media (max-width: 850px) {
  .topbar { grid-template-columns: 1fr auto; width: min(100% - 32px, 720px); }
  .topbar > p { display: none; }
  main { width: min(100% - 32px, 720px); }
  .intro { padding: 64px 0 40px; display: block; }
  .intro-copy { margin-top: 28px; max-width: 580px; }
  .call-workspace { grid-template-columns: 1fr; }
  .setup-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .guardrail-strip { grid-template-columns: 1fr 1fr; }
  .guardrail-strip article:nth-child(2) { border-right: 0; }
  .guardrail-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .instructions { grid-template-columns: 1fr; gap: 50px; }
  footer { width: min(100% - 32px, 720px); }
}

@media (max-width: 540px) {
  .topbar { height: 68px; }
  .brand span { display: none; }
  .back-link { font-size: 11px; }
  .intro { padding-top: 50px; }
  .intro h1 { font-size: clamp(39px, 12.5vw, 58px); }
  .intro-copy { font-size: 14px; line-height: 1.75; }
  .setup-panel, .session-panel { padding: 24px 20px; }
  .voice-stage { min-height: 220px; transform: scale(.9); margin: -10px 0; }
  .engine-card { grid-template-columns: auto 1fr; }
  .engine-card > i { display: none; }
  .guardrail-strip article { min-height: 76px; padding: 14px; align-items: flex-start; }
  .guardrail-strip span { font-size: 11px; }
  .instructions { padding: 74px 0 70px; }
  .instructions ol { grid-template-columns: 1fr; gap: 32px; }
  .instructions li { display: grid; grid-template-columns: 36px 1fr; gap: 15px; }
  .instructions li > span { margin: 0; }
  footer { min-height: 110px; align-items: flex-start; padding: 28px 0; }
}

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