/*
 * The demo page.
 *
 * The palette is the panel's palette, because the panel appears inside this
 * page and two different whites next to each other read as a mistake. Colour
 * never carries a verdict on its own here either: every state is worded.
 */

:root {
  color-scheme: light;
  --bg:            #f5f6fa;
  --surface:       #ffffff;
  --surface-2:     #eef1f7;
  --ink:           #0b1220;
  --ink-2:         #263450;
  --muted:         #52607a;
  --rule:          #dbe1ec;
  --rule-strong:   #c6cfdf;
  --accent:        #9a5200;
  --accent-deep:   #7a4100;
  --accent-ink:    #ffffff;
  --good:          #1f7a4d;
  --bad:           #b3261e;
  --shadow:        0 1px 2px rgba(11, 18, 32, 0.05), 0 10px 30px rgba(11, 18, 32, 0.06);
  --radius:        12px;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #070b16;
    --surface:     #0e1424;
    --surface-2:   #141c30;
    --ink:         #eef2fa;
    --ink-2:       #c4cde0;
    --muted:       #97a3bd;
    --rule:        #24304a;
    --rule-strong: #33415f;
    --accent:      #ffb547;
    --accent-deep: #ffd08a;
    --accent-ink:  #1a1205;
    --good:        #6fd3a0;
    --bad:         #ff8a80;
    --shadow:      0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #070b16;
  --surface:     #0e1424;
  --surface-2:   #141c30;
  --ink:         #eef2fa;
  --ink-2:       #c4cde0;
  --muted:       #97a3bd;
  --rule:        #24304a;
  --rule-strong: #33415f;
  --accent:      #ffb547;
  --accent-deep: #ffd08a;
  --accent-ink:  #1a1205;
  --good:        #6fd3a0;
  --bad:         #ff8a80;
  --shadow:      0 10px 30px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--ink);
  padding: 10px 16px; z-index: 10; border: 1px solid var(--rule-strong); border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.top {
  border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; flex-wrap: wrap; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.mark { width: 20px; height: 20px; color: var(--accent); align-self: center; }
.brand-name { font-family: var(--display); font-weight: 650; letter-spacing: -0.02em; font-size: 1.05rem; }
.brand-tag { color: var(--muted); font-size: 0.82rem; }
.top-nav { display: flex; align-items: center; gap: 20px; font-size: 0.9rem; }
.top-nav a { color: var(--ink-2); text-decoration: none; }
.top-nav a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 6px; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 550;
  text-decoration: none; cursor: pointer; transition: border-color 120ms ease, background 120ms ease;
}
.button:hover { border-color: var(--muted); color: var(--ink); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.button.small { padding: 7px 13px; font-size: 0.88rem; }
.ghost {
  background: none; border: 1px solid var(--rule-strong); color: var(--ink-2);
  border-radius: 6px; padding: 5px 11px; font: inherit; font-size: 0.84rem; cursor: pointer;
}
.ghost:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(40px, 7vw, 84px) 8px; max-width: 1120px; }
.eyebrow {
  margin: 0 0 18px; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
}
h1 {
  margin: 0 0 20px; font-size: clamp(2.05rem, 5vw, 3.15rem); line-height: 1.04;
  letter-spacing: -0.032em; font-weight: 650; max-width: 17ch; font-family: var(--display);
}
h1 .hl { color: var(--accent); }
.lede { margin: 0; max-width: 62ch; font-size: clamp(1.02rem, 1.5vw, 1.14rem); color: var(--ink-2); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin: 48px 0 0; padding: 0; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--surface); padding: 16px 18px; }
.stat dt { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.stat dd {
  margin: 6px 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat dd small { font-size: 0.85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.stats-note { margin: 10px 0 0; font-size: 0.82rem; color: var(--muted); }

/* ---------- sections ---------- */
.section { padding-block: clamp(48px, 7vw, 88px); }
.section-head { max-width: 62ch; margin-bottom: 28px; }
.section-head h2 { font-family: var(--display); margin: 0 0 8px; font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -0.024em; font-weight: 640; }
.section-head p { margin: 0; color: var(--ink-2); }
.label { margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }

.panel-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.panel-card h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 640; letter-spacing: -0.015em; }
.panel-card p { margin: 0; color: var(--ink-2); font-size: 0.94rem; }

/* ---------- console ---------- */
.console { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 940px) { .console { grid-template-columns: 1fr; } }

.farm-note { margin: 8px 0 18px; font-size: 0.88rem; color: var(--ink-2); }
.group { margin-bottom: 18px; }
.group > p { margin: 0 0 8px; }
.request {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%;
  text-align: left; padding: 10px 12px; margin-bottom: 6px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 7px;
  font: inherit; font-size: 0.93rem; transition: border-color 120ms ease, background 120ms ease;
}
.request:hover { border-color: var(--muted); background: var(--surface-2); }
.request[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.request .tool { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.request[disabled] { opacity: 0.55; cursor: progress; }

.advanced { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 14px; }
.advanced summary { cursor: pointer; font-size: 0.88rem; color: var(--ink-2); }
.advanced summary:hover { color: var(--ink); }
.field { display: block; margin-top: 12px; }
.field span { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.field select, .field textarea {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--rule-strong); border-radius: 6px;
}
.field textarea { font-family: var(--mono); font-size: 0.82rem; resize: vertical; }
.advanced-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.results { display: grid; gap: 20px; }
.answer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.meta { margin: 0; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.meta .ok { color: var(--good); }
.meta .slow { color: var(--bad); }
.answer { margin: 0; font-size: 1.12rem; line-height: 1.55; color: var(--ink); }
.answer.waiting { color: var(--muted); }
.raw { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 12px; }
.raw summary { cursor: pointer; font-size: 0.84rem; color: var(--ink-2); }
.raw pre {
  margin: 10px 0 0; padding: 12px; background: var(--surface-2); border-radius: 6px;
  overflow: auto; max-height: 260px; font-family: var(--mono); font-size: 0.78rem; line-height: 1.5;
}

.screen-card iframe {
  display: block; width: 100%; height: 300px; border: 1px solid var(--rule); border-radius: 7px;
  background: var(--surface-2);
}
.caption { margin: 12px 0 0; font-size: 0.84rem; color: var(--muted); }

.log { list-style: none; margin: 10px 0 0; padding: 0; font-family: var(--mono); font-size: 0.79rem; }
.log li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.log li:last-child { border-bottom: 0; }
.log .log-empty { color: var(--muted); border-bottom: 0; }
.log .ms { color: var(--muted); }
.log .failed { color: var(--bad); }

/* ---------- content blocks ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.limits { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 76ch; }
.limits li {
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong); border-radius: 0 7px 7px 0; color: var(--ink-2); font-size: 0.95rem;
}
.limits b { color: var(--ink); font-weight: 620; }

.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.sources li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); padding: 14px 18px; }
.sources span { color: var(--muted); font-size: 0.88rem; }

.code {
  margin: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow-x: auto; font-family: var(--mono); font-size: 0.82rem; line-height: 1.6; color: var(--ink-2);
}
.code-note { margin: 18px 0 10px; color: var(--ink-2); font-size: 0.94rem; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); margin-top: 40px; padding-block: 32px 44px; color: var(--muted); font-size: 0.88rem; }
.foot p { margin: 0 0 8px; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.disclaimer { max-width: 76ch; font-size: 0.82rem; }


/*
 * The Alexa+ stand-in box.
 *
 * Deliberately quiet against the request catalogue beside it: the chosen tool is
 * the thing worth reading, so it gets the only emphasis, and the timing line is
 * muted because it is context rather than the answer. No colour carries meaning
 * on its own here - "chose" and "failed" are distinguished by their words first.
 */
.standin form { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.standin input {
  flex: 1 1 16rem; min-width: 0; padding: .6rem .7rem; font: inherit;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--rule); border-radius: 4px;
}
.standin input:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.standin .hint { font-size: .85rem; color: var(--text-secondary); margin: .35rem 0 0; }
.standin-out { margin-top: .85rem; }
.standin-out p { margin: .3rem 0; }
.standin-out .chose { font-size: .9rem; }
.standin-out .chose code { font-size: .85em; word-break: break-word; }
.standin-out .answer { font-size: 1rem; line-height: 1.5; }
.standin-out .muted { font-size: .8rem; color: var(--text-muted); }
.standin-out .thinking { font-size: .9rem; color: var(--text-secondary); }
.standin-out .bad { font-size: .9rem; }

/* Screen-reader-only label, so the input is named without a visible duplicate. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-contrast: more) {
  .standin input { border-color: var(--text-primary); }
  .standin .hint, .standin-out .muted, .standin-out .thinking { color: var(--text-primary); }
}


/* The play control. Quiet, and it only exists when the server can speak. */
.speak { margin-top: .5rem; font-size: .85rem; padding: .3rem .6rem; }
.speak[disabled] { opacity: .6; cursor: default; }


/* ---------- the sky, and the groups that fold ---------- */
/* The sky behind everything (sky.js). Content sits above it; the canvas never takes a click. */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body > header, body > main, body > footer { position: relative; z-index: 1; }
body > header.top { position: sticky; z-index: 5; }
.stats, .panel-card, .request, .limits li, .sources, .code { backdrop-filter: blur(2px); }
details.group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 0 8px; }
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 150ms ease; margin-right: 2px; }
details.group[open] > summary::before { transform: rotate(45deg); }
details.group > summary .count { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); letter-spacing: 0; }
.request:hover { transform: translateX(2px); }
.request { transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; }

/* On a phone the header is one line: the tagline goes, and the links scroll sideways instead of wrapping. */
@media (max-width: 640px) {
  .brand-tag { display: none; }
  .top-inner { min-height: 52px; gap: 10px; flex-wrap: nowrap; }
  .top-nav { gap: 14px; font-size: 0.86rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; min-width: 0; }
  .top-nav::-webkit-scrollbar { display: none; }
}

/* ---------- asking, and the examples by who is asking ---------- */
.ask { margin-bottom: 20px; padding: 24px; }
.ask-title { font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 6px 0 14px; letter-spacing: -0.02em; }
.standin form.ask-form { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; margin-top: 0; }
.ask-form input {
  flex: 1 1 auto; min-width: 0; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--rule-strong); border-radius: 9999px;
}
.ask-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ask-form .button { border-radius: 9999px; padding-inline: 22px; }
.mic {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.mic svg { width: 20px; height: 20px; fill: currentColor; }
.mic:hover { border-color: var(--accent); color: var(--accent); }
.mic.listening { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); animation: listen 1.2s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent); } }
.ask .hint { margin: 12px 0 0; font-size: 0.86rem; color: var(--muted); }
.audiences { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.audience {
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-2); border-radius: 9999px;
  padding: 6px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.audience:hover { color: var(--ink); border-color: var(--muted); }
.audience[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.audience:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.farm-note { font-size: 0.82rem; color: var(--muted); margin: 14px 0 8px; }
@media (max-width: 640px) { .ask { padding: 18px; } .ask-form .button { padding-inline: 14px; } .ask-form { gap: 8px; } .mic { width: 40px; height: 40px; } }

/* When the question is about, and Start again, under the ask box. The same control as the Echo page. */
.when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.when-label { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.seg, .preset, .restart { border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); border-radius: 9999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.seg { color: var(--muted); }
.seg:hover, .preset:hover, .restart:hover { color: var(--ink); border-color: var(--muted); }
.seg[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.preset[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.seg:focus-visible, .preset:focus-visible, .restart:focus-visible, .when input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.restart { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.restart svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.when-panel { flex-basis: 100%; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
.when-panel[hidden] { display: none; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.when-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.when-field { display: grid; gap: 4px; }
.when-field span { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.when input { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 8px; padding: 6px 10px; color-scheme: light dark; }
.when-readout { margin: 0; font-size: 14px; color: var(--ink); }
.when-note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 480px) { .restart { margin-left: 0; } }
/* On a phone the menu scrolled sideways with no sign it could, and the theme button sat off screen. The three
   links that only jump down this page go, since scrolling gets there; the other page, Try it and the theme stay. */
@media (max-width: 480px) { .top-nav a:nth-of-type(n+3) { display: none; } .brand-tag { display: none; } }

/* Real people's words on the examples: who said it, small, under the words; where, linked below the list. */
.request .who { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--muted); font-style: normal; }
.said-where { margin-top: 10px; font-size: 0.85rem; color: var(--muted); }
.said-where summary { cursor: pointer; }
.said-where ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.said-where a { color: var(--ink); }