:root {
  color-scheme: dark;
  --canvas: #060a12;
  --canvas-deep: #03060b;
  --surface: rgba(13, 23, 37, 0.86);
  --surface-raised: rgba(18, 33, 50, 0.9);
  --line: rgba(132, 177, 205, 0.16);
  --line-strong: rgba(107, 214, 239, 0.36);
  --text: #edf7ff;
  --muted: #8ca0b5;
  --faint: #64758b;
  --cyan: #73dbef;
  --teal: #78ddb8;
  --amber: #f0c478;
  --danger: #ef9b9b;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  --radius: 20px;
  --page-max: 1060px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--canvas-deep); }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(75rem 40rem at 50% -11rem, rgba(40, 106, 133, 0.34), transparent 62%),
    radial-gradient(40rem 28rem at 110% 45%, rgba(24, 85, 90, 0.14), transparent 65%),
    linear-gradient(160deg, #0a111c 0%, var(--canvas) 50%, var(--canvas-deep) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

button:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.app-shell {
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px calc(102px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0 22px;
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.brand__mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(115, 219, 239, 0.76);
  border-radius: 50%;
  color: var(--cyan);
  background: radial-gradient(circle, rgba(60, 163, 190, 0.3), rgba(8, 21, 34, 0.3) 62%);
  box-shadow: 0 0 22px rgba(72, 199, 231, 0.18), inset 0 0 16px rgba(115, 219, 239, 0.12);
  font-size: 18px;
}

.brand__name, .eyebrow, .label, .section-heading, .state-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brand__name { font-size: 12px; font-weight: 700; }

.brand__meta, .eyebrow, .copy, .subtle, .status-card__detail, .device-copy, .chat-note {
  color: var(--muted);
}

.brand__meta { margin-top: 3px; font-size: 8px; letter-spacing: 0.14em; }

.preview-badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(8, 16, 27, 0.48);
  white-space: nowrap;
}

.preview-badge { padding: 7px 9px; font-size: 10px; }
.preview-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(120, 221, 184, 0.8); }

.view { animation: reveal 240ms ease both; }
.view[hidden] { display: none; }

.hero { padding: 9px 0 3px; }
.eyebrow { margin: 0 0 9px; color: var(--cyan); font-size: 9px; font-weight: 700; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 13ch; margin-bottom: 8px; font-size: clamp(2rem, 9vw, 3.7rem); font-weight: 560; letter-spacing: -0.052em; line-height: 1.04; }
h2 { margin-bottom: 5px; font-size: 16px; font-weight: 620; letter-spacing: -0.02em; }
h3 { margin-bottom: 6px; font-size: 13px; font-weight: 650; }
.copy { max-width: 52ch; font-size: 13px; line-height: 1.65; }
.subtle { font-size: 11px; line-height: 1.55; }

.core-area { display: grid; justify-items: center; padding: 23px 0 28px; }

.core-visual {
  position: relative;
  display: grid;
  width: min(68vw, 268px);
  aspect-ratio: 1;
  place-items: center;
  isolation: isolate;
}

.core-visual::before {
  position: absolute;
  z-index: -3;
  inset: 12%;
  border-radius: 42% 58% 52% 48% / 45% 43% 57% 55%;
  background:
    radial-gradient(circle at 25% 29%, rgba(133, 229, 244, 0.65), transparent 25%),
    radial-gradient(circle at 72% 71%, rgba(133, 125, 255, 0.44), transparent 42%),
    radial-gradient(circle at 58% 34%, rgba(94, 213, 194, 0.5), transparent 40%),
    radial-gradient(circle at center, rgba(50, 128, 174, 0.42), transparent 69%);
  box-shadow: 0 0 60px 24px rgba(67, 179, 211, 0.16);
  content: "";
  filter: blur(18px);
  opacity: 0.76;
  transition: transform 600ms ease, background 600ms ease, box-shadow 600ms ease, opacity 400ms ease;
}

.core-visual::after {
  position: absolute;
  z-index: -1;
  inset: 19%;
  border-radius: 56% 44% 46% 54% / 52% 56% 44% 48%;
  background:
    radial-gradient(ellipse at 36% 34%, rgba(222, 249, 255, 0.56), transparent 13%),
    radial-gradient(ellipse at 67% 63%, rgba(142, 132, 255, 0.45), transparent 29%),
    radial-gradient(ellipse at 44% 72%, rgba(84, 225, 193, 0.42), transparent 34%);
  box-shadow: inset 0 0 28px rgba(170, 242, 255, 0.1), 0 0 34px rgba(99, 194, 229, 0.18);
  content: "";
  filter: blur(5px);
  opacity: 0.88;
  transition: transform 600ms ease, opacity 400ms ease, filter 400ms ease;
}

.core-ring {
  position: absolute;
  border: 0;
  transition: opacity 380ms ease, transform 600ms ease, filter 400ms ease;
}

.core-ring--outer {
  inset: 5%;
  border-radius: 46% 54% 56% 44% / 52% 46% 54% 48%;
  background: conic-gradient(from 210deg, transparent 0 12%, rgba(134, 231, 246, 0.52) 22%, rgba(141, 133, 255, 0.42) 37%, transparent 54%, rgba(96, 221, 193, 0.42) 70%, transparent 84%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 0.5px));
  filter: blur(0.45px);
  opacity: 0.48;
}

.core-ring--middle {
  inset: 13%;
  border-radius: 57% 43% 49% 51% / 45% 57% 43% 55%;
  background:
    radial-gradient(circle at 28% 31%, rgba(117, 220, 239, 0.75), transparent 24%),
    radial-gradient(circle at 71% 34%, rgba(145, 132, 255, 0.5), transparent 32%),
    radial-gradient(circle at 54% 76%, rgba(102, 224, 193, 0.54), transparent 38%);
  filter: blur(12px);
  opacity: 0.78;
}

.core-ring--inner {
  inset: 28%;
  border-radius: 45% 55% 43% 57% / 56% 45% 55% 44%;
  background: radial-gradient(circle at 36% 30%, rgba(220, 250, 255, 0.74), transparent 18%), radial-gradient(circle at 65% 68%, rgba(91, 224, 198, 0.7), transparent 38%);
  box-shadow: 0 0 30px rgba(108, 213, 237, 0.34);
  filter: blur(8px);
  opacity: 0.84;
}

.core-center {
  position: relative;
  z-index: 1;
  display: grid;
  width: 33%;
  aspect-ratio: 1;
  place-content: center;
  border: 1px solid rgba(211, 249, 255, 0.44);
  border-radius: 50%;
  color: #e5fbff;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.92), rgba(149, 235, 249, 0.54) 16%, rgba(72, 159, 203, 0.33) 46%, rgba(20, 44, 75, 0.12) 72%, transparent 74%);
  box-shadow: 0 0 31px rgba(119, 220, 243, 0.45), inset 0 0 17px rgba(238, 255, 255, 0.31);
  transition: border-color 450ms ease, box-shadow 450ms ease, transform 450ms ease, color 400ms ease;
  text-align: center;
}

.core-center strong { font-size: 16px; font-weight: 500; letter-spacing: 0; text-shadow: 0 0 12px rgba(255, 255, 255, 0.86); }
.core-center span, .sound-bars { display: none; }

.sound-bars { position: absolute; bottom: 5%; display: flex; align-items: end; gap: 3px; height: 28px; opacity: 0; transition: opacity 220ms ease; }
.sound-bars i { width: 3px; height: 5px; border-radius: 3px; background: var(--teal); box-shadow: 0 0 8px rgba(120, 221, 184, 0.55); }

.state-readout { min-height: 48px; margin-top: 9px; text-align: center; }
.state-label { margin: 0 0 5px; color: var(--cyan); font-size: 9px; font-weight: 700; }
.state-description { max-width: 32ch; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.demo-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 11px; }

.button, .ghost-button, .nav-button, .quick-link, .demo-button {
  border: 0;
  cursor: pointer;
}

.button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(115, 219, 239, 0.42);
  border-radius: 13px;
  color: #e7fbff;
  background: linear-gradient(135deg, rgba(35, 102, 127, 0.94), rgba(18, 51, 75, 0.94));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  font-size: 12px;
  font-weight: 650;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.button:hover { border-color: var(--cyan); background: linear-gradient(135deg, rgba(47, 131, 159, 0.94), rgba(22, 68, 92, 0.94)); transform: translateY(-1px); }
.button:active { transform: translateY(0); }

.ghost-button, .demo-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(13, 27, 42, 0.55);
  font-size: 11px;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.ghost-button:hover, .demo-button:hover, .demo-button[aria-pressed="true"] { border-color: var(--line-strong); color: var(--cyan); background: rgba(21, 54, 73, 0.78); }

.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.surface {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(19, 34, 52, 0.78), rgba(7, 14, 25, 0.76));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.status-card { min-height: 145px; padding: 15px; }
.label { color: var(--faint); font-size: 9px; font-weight: 700; }
.status-card__value { margin: 13px 0 5px; font-size: 19px; font-weight: 580; letter-spacing: -0.035em; }
.status-card__detail { margin: 0; font-size: 10px; line-height: 1.5; }
.status-line { height: 3px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: rgba(121, 155, 180, 0.16); }
.status-line i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3d92c9, var(--cyan)); }

.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 25px 2px 10px; }
.section-heading { margin: 0; font-size: 11px; }

.quick-links { display: grid; gap: 10px; }
.quick-link { display: flex; align-items: center; width: 100%; min-height: 74px; padding: 13px; color: inherit; text-align: left; }
.quick-link:hover { border-color: var(--line-strong); }
.quick-link__icon, .device-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: var(--cyan); background: rgba(25, 73, 93, 0.6); font-size: 17px; }
.quick-link__copy { margin-left: 12px; }
.quick-link strong { display: block; font-size: 12px; }
.quick-link small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.quick-link__chevron { margin-left: auto; color: var(--faint); font-size: 22px; }

.install-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 24px; padding: 15px; }
.install-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(115, 219, 239, 0.28); border-radius: 14px; color: var(--cyan); background: radial-gradient(circle at 35% 28%, rgba(177, 239, 250, 0.31), rgba(27, 76, 103, 0.3) 62%); font-size: 23px; }
.install-card h2 { margin: 4px 0 3px; }
.install-card .ghost-button { grid-column: 2; justify-self: start; margin-top: 1px; }

.assistant-layout, .settings-stack, .device-stack { display: grid; gap: 11px; }
.chat-shell { padding: 14px; }
.chat-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tag { padding: 5px 8px; font-size: 9px; }
.tag--amber { border-color: rgba(240, 196, 120, 0.32); color: var(--amber); }
.tag--teal { border-color: rgba(120, 221, 184, 0.3); color: var(--teal); }

.chat-log { display: flex; min-height: 260px; max-height: 48vh; flex-direction: column; gap: 10px; margin: 13px 0; overflow: auto; padding: 3px 1px; scroll-behavior: smooth; }
.bubble { max-width: 88%; padding: 11px 12px; border-radius: 15px; font-size: 12px; line-height: 1.55; }
.bubble--jarvis { align-self: flex-start; border: 1px solid rgba(92, 205, 232, 0.14); background: rgba(20, 49, 67, 0.78); }
.bubble--user { align-self: flex-end; background: rgba(29, 76, 99, 0.83); }
.chat-note { margin: 0; font-size: 10px; line-height: 1.45; }
.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgba(4, 12, 21, 0.8); padding: 0 12px; font-size: 13px; }
.chat-form input::placeholder { color: #66788d; }

.interaction-panel { padding: 16px; }
.interaction-panel__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.interaction-panel__heading h2 { margin: 0 0 4px; }
.progress { height: 5px; margin: 17px 0 8px; overflow: hidden; border-radius: 99px; background: rgba(130, 171, 196, 0.16); }
.progress__value { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3e98cc, var(--teal)); box-shadow: 0 0 15px rgba(115, 219, 239, 0.45); transition: width 420ms ease; }

.task-list { overflow: hidden; padding: 2px 15px; }
.task-list__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0 4px; }
.task { display: flex; align-items: flex-start; gap: 11px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.task input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--cyan); }
.task span { font-size: 12px; line-height: 1.45; }
.task small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.task input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(115, 219, 239, 0.6); }
.personal-tasks { margin-top: 25px; }
.task-create-form { display: flex; gap: 8px; }
.task-create-form input { width: 100%; min-width: 0; min-height: 43px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgba(4, 12, 21, 0.8); padding: 0 12px; font-size: 12px; }
.task-create-form input::placeholder { color: #66788d; }
.task-list--personal { display: none; margin-top: 10px; }
.task-list--personal.has-tasks { display: block; }
.task--personal { align-items: center; }
.task--personal label { display: flex; min-width: 0; flex: 1; align-items: center; gap: 11px; }
.task__remove { display: grid; width: 28px; height: 28px; flex: 0 0 auto; margin: -5px 0 -5px auto; place-items: center; border: 1px solid transparent; border-radius: 9px; color: var(--faint); background: transparent; cursor: pointer; font-size: 16px; line-height: 1; }
.task__remove:hover { border-color: rgba(239, 155, 155, 0.35); color: var(--danger); background: rgba(102, 40, 45, 0.18); }
.empty-task-state { margin: 10px 3px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.local-note { margin: 11px 3px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.device-card, .setting-card { padding: 16px; }
.device-card { display: flex; align-items: flex-start; gap: 12px; }
.device-copy { margin: 0; font-size: 11px; line-height: 1.55; }
.device-card .tag { margin-left: auto; }
.setting-card p { margin-bottom: 0; }

.bottom-nav {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid var(--line);
  background: rgba(5, 12, 21, 0.86);
  backdrop-filter: blur(20px);
}

.bottom-nav__inner { display: grid; width: min(100%, 620px); grid-template-columns: repeat(5, 1fr); margin: 0 auto; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
.nav-button { display: flex; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; color: var(--faint); background: transparent; font-size: 9px; }
.nav-button b { font-size: 16px; font-weight: 450; }
.nav-button.is-selected { color: var(--cyan); background: rgba(40, 107, 132, 0.2); }

.toast { position: fixed; z-index: 20; bottom: 96px; left: 50%; width: max-content; max-width: calc(100% - 36px); padding: 10px 13px; border: 1px solid rgba(115, 219, 239, 0.36); border-radius: 13px; color: var(--text); background: rgba(15, 35, 51, 0.96); box-shadow: var(--shadow); font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity 190ms ease, transform 190ms ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

body[data-agent-state="idle"] .core-visual::before { animation: ambient-drift 10s ease-in-out infinite; }
body[data-agent-state="idle"] .core-visual::after { animation: soft-bloom 8s ease-in-out 400ms infinite; }
body[data-agent-state="idle"] .core-ring--middle { animation: liquid-breathe 9s ease-in-out infinite; }
body[data-agent-state="idle"] .core-ring--inner { animation: liquid-breathe 7.4s ease-in-out -2s infinite reverse; }
body[data-agent-state="idle"] .core-center { animation: center-breathe 6.8s ease-in-out infinite; }

body[data-agent-state="listening"] .core-visual::before {
  background:
    radial-gradient(circle at 25% 29%, rgba(153, 240, 245, 0.77), transparent 25%),
    radial-gradient(circle at 72% 71%, rgba(165, 139, 255, 0.62), transparent 42%),
    radial-gradient(circle at 58% 34%, rgba(99, 232, 195, 0.69), transparent 40%),
    radial-gradient(circle at center, rgba(63, 152, 191, 0.52), transparent 69%);
  box-shadow: 0 0 84px 34px rgba(85, 201, 224, 0.28);
  animation: listening-bloom 2.2s ease-in-out infinite;
  opacity: 0.96;
}
body[data-agent-state="listening"] .core-visual::after { animation: listening-pulse 1.65s ease-in-out infinite; }
body[data-agent-state="listening"] .core-ring--outer { animation: listening-ripple 1.8s ease-in-out infinite; opacity: 0.92; }
body[data-agent-state="listening"] .core-ring--middle { animation: listening-liquid 1.45s ease-in-out 120ms infinite; opacity: 0.95; }
body[data-agent-state="listening"] .core-ring--inner { animation: listening-liquid 1.45s ease-in-out 260ms infinite reverse; }
body[data-agent-state="listening"] .core-center { animation: center-listening 1.7s ease-in-out infinite; }

body[data-agent-state="thinking"] .core-visual::before { animation: thinking-drift 3.8s cubic-bezier(.45, .05, .55, .95) infinite; }
body[data-agent-state="thinking"] .core-visual::after { animation: thinking-drift 2.65s ease-in-out infinite reverse; }
body[data-agent-state="thinking"] .core-ring--outer { animation: thinking-sweep 3.2s ease-in-out infinite; opacity: 0.82; }
body[data-agent-state="thinking"] .core-ring--middle { animation: liquid-breathe 2.5s ease-in-out infinite; }
body[data-agent-state="thinking"] .core-center { transform: scale(0.92); }

body[data-agent-state="executing"] .core-visual::before { animation: execution-bloom 1.55s ease-in-out infinite; }
body[data-agent-state="executing"] .core-ring--outer { animation: thinking-sweep 1.5s ease-in-out infinite; opacity: 1; }
body[data-agent-state="executing"] .core-ring--middle { animation: execution-flow 1.2s ease-in-out infinite; opacity: 1; }
body[data-agent-state="executing"] .core-ring--inner { box-shadow: 0 0 40px rgba(110, 228, 204, 0.5); }

body[data-agent-state="complete"] .core-visual::before { box-shadow: 0 0 100px 42px rgba(116, 234, 205, 0.27); opacity: 0.96; transform: scale(1.08); }
body[data-agent-state="complete"] .core-visual::after { opacity: 1; transform: scale(1.08); }
body[data-agent-state="complete"] .core-ring--outer { opacity: 0.76; transform: scale(1.08); }
body[data-agent-state="complete"] .core-ring--inner { box-shadow: 0 0 45px rgba(134, 241, 213, 0.58); }
body[data-agent-state="complete"] .core-center { border-color: rgba(201, 255, 236, 0.86); color: #d8fff1; box-shadow: 0 0 48px rgba(128, 237, 204, 0.58), inset 0 0 20px rgba(235, 255, 248, 0.46); transform: scale(1.08); }

@keyframes ambient-drift {
  0%, 100% { border-radius: 42% 58% 52% 48% / 45% 43% 57% 55%; transform: translate(-1%, 1%) scale(0.97) rotate(-4deg); }
  50% { border-radius: 57% 43% 45% 55% / 54% 48% 52% 46%; transform: translate(2%, -2%) scale(1.05) rotate(4deg); }
}
@keyframes soft-bloom {
  0%, 100% { border-radius: 56% 44% 46% 54% / 52% 56% 44% 48%; transform: scale(0.94) rotate(3deg); opacity: 0.68; }
  50% { border-radius: 45% 55% 57% 43% / 45% 48% 52% 55%; transform: scale(1.08) rotate(-5deg); opacity: 1; }
}
@keyframes liquid-breathe {
  0%, 100% { border-radius: 57% 43% 49% 51% / 45% 57% 43% 55%; transform: scale(0.96) rotate(-4deg); }
  50% { border-radius: 43% 57% 56% 44% / 56% 42% 58% 44%; transform: scale(1.07) rotate(5deg); }
}
@keyframes center-breathe { 50% { box-shadow: 0 0 45px rgba(120, 223, 243, 0.63), inset 0 0 20px rgba(238, 255, 255, 0.5); transform: scale(1.075); } }
@keyframes listening-bloom { 50% { border-radius: 58% 42% 45% 55% / 53% 43% 57% 47%; transform: scale(1.11) rotate(5deg); filter: blur(21px); } }
@keyframes listening-pulse { 50% { transform: scale(1.12); filter: blur(7px); opacity: 0.72; } }
@keyframes listening-ripple { 50% { border-radius: 56% 44% 42% 58% / 47% 58% 42% 53%; transform: scale(1.1); filter: blur(1.3px); opacity: 0.54; } }
@keyframes listening-liquid { 50% { border-radius: 42% 58% 56% 44% / 55% 44% 56% 45%; transform: scale(1.11) rotate(7deg); } }
@keyframes center-listening { 50% { box-shadow: 0 0 54px rgba(164, 237, 243, 0.8), inset 0 0 22px rgba(255, 255, 255, 0.64); transform: scale(1.14); } }
@keyframes thinking-drift { 50% { transform: translate(3%, -3%) scale(1.05) rotate(12deg); filter: blur(21px); } }
@keyframes thinking-sweep { 50% { border-radius: 58% 42% 57% 43% / 42% 55% 45% 58%; transform: rotate(18deg) scale(1.035); } }
@keyframes execution-bloom { 50% { transform: scale(1.11); opacity: 1; filter: blur(15px); } }
@keyframes execution-flow { 50% { border-radius: 47% 53% 43% 57% / 55% 43% 57% 45%; transform: scale(1.1) rotate(-9deg); filter: blur(9px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } }

@media (min-width: 700px) {
  .app-shell { padding-right: 28px; padding-left: 28px; }
  .home-grid { display: grid; grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.05fr); align-items: center; gap: 28px; }
  .core-area { padding-bottom: 0; }
  .status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .status-card { min-height: 157px; }
  .quick-links { grid-template-columns: repeat(2, 1fr); }
  .install-card { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .install-card .ghost-button { grid-column: 3; justify-self: end; }
  .assistant-layout { grid-template-columns: minmax(0, 1.4fr) minmax(250px, 0.6fr); align-items: start; }
  .chat-log { max-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Liquid Glass monochrome system — intentionally overrides the earlier blue preview palette. */
:root {
  color-scheme: dark;
  --canvas: #111113;
  --canvas-deep: #050506;
  --surface: rgba(255, 255, 255, 0.075);
  --surface-raised: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.38);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --faint: #6e6e73;
  --cyan: #f5f5f7;
  --teal: #d1d1d6;
  --amber: #c7c7cc;
  --danger: #ffb4b4;
  --shadow: 0 20px 55px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.055);
  --radius: 24px;
}

html { background: var(--canvas-deep); }
body {
  background:
    radial-gradient(45rem 28rem at 8% -10%, rgba(255, 255, 255, 0.12), transparent 62%),
    radial-gradient(38rem 24rem at 102% 34%, rgba(159, 159, 168, 0.11), transparent 65%),
    radial-gradient(27rem 20rem at 42% 94%, rgba(255, 255, 255, 0.055), transparent 68%),
    linear-gradient(145deg, #161618 0%, #09090b 48%, #020203 100%);
}

button:focus-visible, input:focus-visible { outline-color: rgba(255, 255, 255, 0.9); }
.brand__mark {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.04));
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 8px 24px rgba(0,0,0,.25);
}
.preview-badge, .tag {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}
.preview-badge::before { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.7); }
.eyebrow { color: #d1d1d6; }
.surface {
  border-color: var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  box-shadow: var(--shadow);
  backdrop-filter: blur(28px) saturate(128%);
  -webkit-backdrop-filter: blur(28px) saturate(128%);
}
.surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.13), transparent 34%);
}
.status-card, .quick-link, .chat-shell, .interaction-panel, .task-list, .setting-card, .device-card, .install-card { position: relative; }
.status-line { background: rgba(255,255,255,.10); }
.status-line i, .progress__value { background: linear-gradient(90deg, #7f7f85, #fff, #b8b8bd); box-shadow: 0 0 14px rgba(255,255,255,.28); }
.button {
  border-color: rgba(255,255,255,.28);
  color: #101012;
  background: linear-gradient(135deg, #fff, #d7d7db);
  box-shadow: inset 0 1px rgba(255,255,255,.8), 0 9px 24px rgba(0,0,0,.22);
}
.button:hover { border-color: #fff; background: #fff; }
.ghost-button, .demo-button {
  border-color: var(--line);
  color: #c7c7cc;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(14px);
}
.ghost-button:hover, .demo-button:hover, .demo-button[aria-pressed="true"] {
  border-color: rgba(255,255,255,.5);
  color: #fff;
  background: rgba(255,255,255,.16);
}
.quick-link__icon, .device-icon, .install-card__icon {
  border: 1px solid rgba(255,255,255,.13);
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.19), rgba(255,255,255,.04));
  box-shadow: inset 0 1px rgba(255,255,255,.15);
}
.tag--amber, .tag--teal { border-color: rgba(255,255,255,.22); color: #d1d1d6; }
.bubble--jarvis { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.095); }
.bubble--user { background: rgba(255,255,255,.19); }
.chat-form input, .task-create-form input {
  border-color: var(--line);
  background: rgba(0,0,0,.2);
}
.task input { accent-color: #fff; }
.bottom-nav { border-top-color: var(--line); background: rgba(18,18,20,.72); backdrop-filter: blur(32px) saturate(135%); -webkit-backdrop-filter: blur(32px) saturate(135%); }
.nav-button.is-selected { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 1px rgba(255,255,255,.13); }
.toast { border-color: rgba(255,255,255,.24); background: rgba(38,38,42,.9); backdrop-filter: blur(22px); }

/* State language: each mode has an intentionally different silhouette, not merely a color change. */
.core-area { padding: 26px 0 30px; }
.core-visual { width: min(70vw, 276px); overflow: visible; }
.core-visual::before, .core-visual::after { content: none !important; animation: none !important; }
.core-shadow {
  position: absolute;
  z-index: -3;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,.04) 44%, transparent 70%);
  filter: blur(22px);
  opacity: .8;
}
.core-orb {
  position: relative;
  z-index: 1;
  display: grid;
  width: 67%;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 43% 57% 55% 45% / 52% 47% 53% 48%;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.94) 0 3%, rgba(255,255,255,.32) 14%, transparent 29%),
    radial-gradient(circle at 69% 73%, rgba(255,255,255,.2), transparent 43%),
    linear-gradient(135deg, rgba(255,255,255,.31), rgba(255,255,255,.055) 42%, rgba(0,0,0,.28));
  box-shadow: inset 0 1px rgba(255,255,255,.65), inset -12px -15px 28px rgba(0,0,0,.26), 0 22px 58px rgba(0,0,0,.4), 0 0 42px rgba(255,255,255,.11);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  transition: transform .45s ease, border-radius .55s ease, box-shadow .45s ease, background .45s ease;
}
.core-orb__sheen { position: absolute; inset: 8% 13% 49% 15%; border-radius: 50%; background: linear-gradient(160deg, rgba(255,255,255,.72), transparent); filter: blur(6px); transform: rotate(-13deg); opacity: .7; }
.core-orb__refraction { position: absolute; inset: auto -15% -29% 20%; height: 55%; border-radius: 50%; background: rgba(255,255,255,.16); filter: blur(16px); }
.state-halo { position: absolute; z-index: -1; width: 78%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; opacity: .5; transition: transform .5s ease, opacity .5s ease; }
.state-mark { position: absolute; z-index: 2; color: #fff; }
.state-mark--idle { display: grid; width: 16px; height: 16px; place-items: center; }
.state-mark--idle i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px rgba(255,255,255,.9); }
.state-mark--listening { display: none; align-items: center; gap: 4px; height: 33px; }
.state-mark--listening i { width: 3px; height: 9px; border-radius: 999px; background: #fff; box-shadow: 0 0 9px rgba(255,255,255,.48); }
.state-mark--thinking { display: none; width: 44px; height: 44px; }
.state-mark--thinking i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.65); }
.state-mark--thinking i:nth-child(1) { top: 1px; left: 19px; }.state-mark--thinking i:nth-child(2) { right: 2px; bottom: 8px; }.state-mark--thinking i:nth-child(3) { bottom: 8px; left: 2px; }
.state-mark--executing { display: none; width: 40px; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.2); border-top-color: #fff; border-right-color: #fff; border-radius: 50%; }
.state-mark--complete { display: none; font-size: 35px; font-weight: 500; line-height: 1; text-shadow: 0 0 15px rgba(255,255,255,.65); }
.state-readout { min-height: 58px; margin-top: 15px; }
.state-label { display: flex; align-items: center; justify-content: center; gap: 8px; color: #f5f5f7; font-size: 10px; }
.state-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #bdbdc2; font-size: 7px; letter-spacing: .13em; }

body[data-agent-state="idle"] .core-orb { animation: glass-breathe 6s ease-in-out infinite; }
body[data-agent-state="idle"] .core-shadow { animation: shadow-breathe 6s ease-in-out infinite; }
body[data-agent-state="listening"] .state-mark { display: none; }
body[data-agent-state="listening"] .state-mark--listening { display: flex; }
body[data-agent-state="listening"] .core-orb { border-radius: 50%; animation: listen-wave 1.35s ease-in-out infinite; }
body[data-agent-state="listening"] .state-halo { animation: halo-ripple 1.35s ease-out infinite; }
body[data-agent-state="listening"] .state-mark--listening i { animation: waveform .78s ease-in-out infinite alternate; }
body[data-agent-state="listening"] .state-mark--listening i:nth-child(2) { animation-delay: -.4s; } body[data-agent-state="listening"] .state-mark--listening i:nth-child(3) { animation-delay: -.15s; } body[data-agent-state="listening"] .state-mark--listening i:nth-child(4) { animation-delay: -.55s; } body[data-agent-state="listening"] .state-mark--listening i:nth-child(5) { animation-delay: -.27s; }
body[data-agent-state="thinking"] .state-mark { display: none; }
body[data-agent-state="thinking"] .state-mark--thinking { display: block; animation: orbit 2.8s linear infinite; }
body[data-agent-state="thinking"] .core-orb { border-radius: 50%; transform: scale(.93); background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 43%, rgba(0,0,0,.38)); }
body[data-agent-state="thinking"] .state-halo { transform: scale(1.2); border-style: dashed; animation: orbit-reverse 5s linear infinite; }
body[data-agent-state="executing"] .state-mark { display: none; }
body[data-agent-state="executing"] .state-mark--executing { display: block; animation: spin 1.1s linear infinite; }
body[data-agent-state="executing"] .core-orb { border-radius: 50%; transform: scale(1.04); box-shadow: inset 0 1px rgba(255,255,255,.7), inset -12px -15px 28px rgba(0,0,0,.2), 0 0 55px rgba(255,255,255,.2); }
body[data-agent-state="executing"] .state-halo { opacity: .84; animation: pulse-ring 1.1s ease-in-out infinite; }
body[data-agent-state="complete"] .state-mark { display: none; }
body[data-agent-state="complete"] .state-mark--complete { display: block; }
body[data-agent-state="complete"] .core-orb { border-radius: 38% 62% 43% 57% / 43% 42% 58% 57%; transform: scale(1.08); background: radial-gradient(circle at 31% 24%, #fff, rgba(255,255,255,.38) 18%, rgba(255,255,255,.1) 54%, rgba(0,0,0,.2)); box-shadow: inset 0 1px #fff, 0 0 76px rgba(255,255,255,.34); }
body[data-agent-state="complete"] .state-halo { opacity: .95; transform: scale(1.25); border-color: rgba(255,255,255,.58); }
body[data-agent-state="complete"] .state-chip { color: #111; background: #fff; border-color: #fff; }

@keyframes glass-breathe { 0%,100% { transform: scale(.97) rotate(-2deg); border-radius: 43% 57% 55% 45% / 52% 47% 53% 48%; } 50% { transform: scale(1.035) rotate(2deg); border-radius: 55% 45% 47% 53% / 46% 56% 44% 54%; } }
@keyframes shadow-breathe { 50% { transform: scale(1.16); opacity: 1; } }
@keyframes listen-wave { 50% { transform: scale(1.1); box-shadow: inset 0 1px rgba(255,255,255,.75), 0 0 66px rgba(255,255,255,.26); } }
@keyframes halo-ripple { 0% { transform: scale(.9); opacity: .75; } 100% { transform: scale(1.38); opacity: 0; } }
@keyframes waveform { from { height: 7px; opacity: .5; } to { height: 29px; opacity: 1; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbit-reverse { to { transform: scale(1.2) rotate(-360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-ring { 50% { transform: scale(1.18); opacity: .26; } }