@font-face {
  font-family: "Cinzel";
  src: url("/static/fonts/cinzel-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("/static/fonts/cinzel-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("/static/fonts/source-code-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("/static/fonts/source-code-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #07090e;
  --panel: #10141c;
  --ink: #dce8f4;
  --muted: #6a8499;
  --line: #1c2a3a;
  --accent: #4ec8ff;
  --local: #4a8a6a;
  --grok: #7eb8c8;
  --danger: #c4453c;
  --user: #0d2a44;
  --mono: "Source Code Pro", ui-monospace, monospace;
  --sans: "Noto Sans", "Adwaita Sans", system-ui, sans-serif;
  --display: "Source Code Pro", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { background: var(--bg); }
body {
  font-family: var(--sans);
  background:
    linear-gradient(180deg, rgba(7, 9, 14, 0.78) 0%, rgba(7, 9, 14, 0.58) 36%, rgba(7, 9, 14, 0.84) 100%),
    radial-gradient(circle at 50% 42%, #4ec8ff18 0%, transparent 28%),
    url("/static/chamber.jpg") center 42% / cover no-repeat,
    var(--bg);
  color: var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: none;
  min-width: 0;
  overflow: hidden;
}
body.with-draft { grid-template-columns: minmax(0, 1fr) minmax(220px, 34vw); }
body.on-side {
  --bg: #120206;
  --panel: #1a090d;
  --ink: #f8e6e8;
  --muted: #b48b92;
  --line: #5c2430;
  --accent: #ff3d52;
  --user: #4a121c;
  background:
    linear-gradient(180deg, rgba(18, 0, 4, 0.55) 0%, rgba(28, 0, 6, 0.28) 40%, rgba(10, 0, 2, 0.72) 100%),
    url("/static/chamber.jpg") center 42% / cover no-repeat,
    #120206;
}
body.on-side::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(150, 12, 28, 0.55), rgba(70, 0, 12, 0.78) 52%, rgba(24, 0, 6, 0.88));
  mix-blend-mode: color;
}
body.on-side .stage { position: relative; z-index: 1; }
body.on-side .sidebar {
  background: linear-gradient(180deg, rgba(32, 6, 10, 0.96) 0%, rgba(14, 2, 4, 0.98) 100%);
  border-right-color: #5c2430;
}
body.on-side .side-pages button.on,
body.on-side .chat-item.on { background: #4a121c; }
body.on-side .side-pages button:hover,
body.on-side .chat-item:hover { background: #2a0c12; }
body.on-side .modes button.on { background: #4a1520; }
body.on-side .brand { text-shadow: 0 0 18px #ff3d5244; }
body.on-side .link-grid a,
body.on-side .page-btn,
body.on-side .page-form input,
body.on-side .page-form textarea { background: #1a080ccc; }
body.on-side .composer {
  box-shadow: 0 8px 40px #0008, 0 0 24px #ff243822, 0 0 0 1px #ff243833;
}
body.on-side.listening .composer {
  box-shadow: 0 8px 40px #0008, 0 0 28px #ff3d5255, 0 0 0 1px #ff3d5266;
}
body.on-side #mic-btn.on { box-shadow: 0 0 14px #ff3d5266; animation-name: mic-pulse-side; }
body.on-side #send { color: #1a0508; }
@keyframes mic-pulse-side {
  0%, 100% { box-shadow: 0 0 8px #ff3d5244; }
  50% { box-shadow: 0 0 18px #ff3d52aa; }
}
body.on-jtech {
  --bg: #14171c;
  --panel: #1c2128;
  --ink: #eef1f4;
  --muted: #9aa3ad;
  --line: #3a424c;
  --accent: #d5dde6;
  --user: #2a313a;
  background:
    linear-gradient(180deg, rgba(16, 18, 22, 0.62) 0%, rgba(28, 32, 38, 0.34) 40%, rgba(10, 12, 16, 0.78) 100%),
    url("/static/chamber.jpg") center 42% / cover no-repeat,
    #14171c;
}
body.on-jtech::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, rgba(88, 96, 108, 0.45), rgba(36, 40, 48, 0.78) 52%, rgba(14, 16, 20, 0.9));
  mix-blend-mode: color;
}
body.on-jtech .stage { position: relative; z-index: 1; }
body.on-jtech .sidebar {
  background: linear-gradient(180deg, rgba(28, 32, 38, 0.96) 0%, rgba(14, 16, 20, 0.98) 100%);
  border-right-color: #3a424c;
}
body.on-jtech .side-pages button.on,
body.on-jtech .chat-item.on { background: #2a313a; }
body.on-jtech .side-pages button:hover,
body.on-jtech .chat-item:hover { background: #232830; }
body.on-jtech .modes button.on { background: #2c333c; }
body.on-jtech .brand { text-shadow: 0 0 18px #d5dde644; }
body.on-jtech .link-grid a,
body.on-jtech .page-btn,
body.on-jtech .page-form input,
body.on-jtech .page-form textarea,
body.on-jtech .client-add input { background: #1c2128cc; }
body.on-jtech .composer {
  box-shadow: 0 8px 40px #0008, 0 0 24px #9aa3ad22, 0 0 0 1px #d5dde622;
}
body.on-jtech #send { color: #14171c; }
button, .chip { touch-action: manipulation; }

.sidebar {
  display: none;
  position: fixed;
  inset: 0 auto 0 0;
  width: min(340px, 90vw);
  z-index: 16;
  flex-direction: column;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 12px 16px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12, 16, 24, 0.94) 0%, rgba(7, 9, 14, 0.96) 100%);
  backdrop-filter: blur(12px);
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
body.nav-open .sidebar { display: flex; }
.side-pages {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-pages button {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 8px;
  text-align: left;
  font: inherit;
  font-size: 15px;
  padding: 10px 10px;
  cursor: pointer;
}
.side-pages button:hover { background: #141c28; }
.side-pages button.on { background: #0d2a44; color: var(--accent); }
.side-folder { display: flex; flex-direction: column; gap: 4px; }
.side-folder-bar { display: flex; align-items: center; gap: 2px; }
.side-folder-bar [data-page] { flex: 1; min-width: 0; }
.side-pages button.side-twist {
  width: 36px;
  flex: 0 0 36px;
  padding: 10px 0;
  text-align: center;
  color: var(--muted);
}
.side-sub { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; }
.side-sub[hidden] { display: none; }
.side-head, .side-foot, .side-label, .new-chat, .brand {
  flex-shrink: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 8px;
  text-align: left;
  text-shadow: 0 0 18px #4ec8ff44;
}
.mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  background: #000;
  border-radius: 6px;
}
.new-chat {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.new-chat:hover { border-color: var(--accent); color: var(--ink); }
.chats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#projects {
  display: none;
}
#chats {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.chat-item {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  text-align: left;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 2.6em;
  flex: 0 0 auto;
  white-space: normal;
  overflow: visible;
  line-height: 1.4;
}
.chat-item .chat-title {
  display: block;
  max-height: 2.9em;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: inherit;
}
.chat-item .chat-meta {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.9;
}
.chat-item:hover { background: #141c28; color: var(--ink); }
.chat-item.on { background: #0d2a44; color: var(--accent); }
.chat-item.on .chat-meta { color: var(--accent); opacity: 0.75; }
.side-foot { display: flex; flex-wrap: wrap; gap: 6px; }
.side-foot .ghost { flex: 1 1 auto; min-width: 0; }

.stage {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto auto;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 12px 20px 16px;
  overflow: hidden;
}
body.with-draft .stage { max-width: none; }

.top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 12px;
}
.modes {
  display: flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.modes button, .ghost, .composer button, dialog button, .new-chat, .chat-item {
  font: inherit;
  cursor: pointer;
}
.modes button {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 6px 14px;
  border-radius: 999px;
}
.modes button.on { background: #16324a; color: var(--accent); }
.chips { margin-left: auto; display: flex; gap: 8px; }
.chip {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.chip.ok { color: var(--local); border-color: #2a4a3a; }
button.chip {
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.chip.ok.grok { color: var(--grok); border-color: #3a4a52; }
.chip.bad { color: var(--danger); }
.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  flex: 1;
}
.ghost:hover { color: var(--ink); }

.board-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.orb-band {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 12px 10px;
}
.orb-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 18px;
  width: min(1080px, 100%);
}
.orb-visual {
  grid-column: 2;
  position: relative;
  width: min(420px, 46vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 28px #ff9d2c22);
}
#orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb-scan, .orb-glow, .orb-core {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.orb-scan {
  inset: 14%;
  border: 1px solid #ffb75255;
  box-shadow: inset 0 0 42px #ff762c22;
  animation: orb-spin 27s linear infinite;
}
.orb-scan:before, .orb-scan:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.orb-scan:before {
  inset: 12%;
  border: 1px dashed #ffcf694d;
}
.orb-scan:after {
  inset: 26%;
  border: 1px solid #ffbb5244;
}
.orb-glow {
  width: 42%;
  height: 42%;
  background: radial-gradient(circle, #ffe6a7 0 3%, #ffb32f 11%, #e75d1d 34%, transparent 70%);
  filter: blur(12px);
  opacity: 0.92;
  animation: orb-breathe 4.6s ease-in-out infinite;
}
.orb-core {
  width: 16%;
  height: 16%;
  background: radial-gradient(circle at 43% 38%, #fff9da 0 7%, #ffd466 21%, #ff8432 45%, #c7421e 72%, transparent 73%);
  box-shadow: 0 0 10px #fff1a9, 0 0 28px #ffb22d, 0 0 70px #ff762c88;
  animation: orb-breathe 4.6s ease-in-out infinite;
}
.orb-core:before, .orb-core:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid #ffc25888;
  box-shadow: 0 0 20px #ff8d2b66;
  animation: orb-breathe 3.8s ease-in-out infinite;
}
.orb-core:before { inset: -32%; }
.orb-core:after { inset: -68%; border-color: #ffaf3e55; animation-delay: -1.4s; }
.orb-band[data-mode="listening"] { --orb-accent: #72f5be; }
.orb-band[data-mode="thinking"] { --orb-accent: #d78bff; }
.orb-band[data-mode="speaking"] { --orb-accent: #ffbe54; }
.orb-band[data-mode="listening"] .orb-glow,
.orb-band[data-mode="listening"] .orb-core { animation-duration: 2.1s; }
.orb-band[data-mode="thinking"] .orb-glow,
.orb-band[data-mode="thinking"] .orb-core { animation-duration: 3s; }
.orb-band[data-mode="speaking"] .orb-glow,
.orb-band[data-mode="speaking"] .orb-core { animation-duration: 0.48s; }
.orb-band[data-mode="speaking"] .orb-scan { animation-duration: 5s; }
.orb-band[data-mode="speaking"] .orb-visual { animation: orb-speak 0.46s ease-in-out infinite; }
.orb-kicker, .orb-page {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.orb-kicker:empty, .orb-line:empty { display: none; }
.orb-line {
  margin: 0;
  font-size: 15px;
  text-align: center;
}
.orb-reply {
  width: min(640px, 100%);
  margin: 8px 0 0;
  text-align: center;
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.4;
}
.orb-reply[hidden] { display: none; }
.ask-reply {
  width: min(860px, 100%);
  margin: 0 auto 8px;
  max-height: 148px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: rgba(16, 20, 28, 0.94);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
}
.ask-reply[hidden],
body.on-chat .ask-reply { display: none !important; }
.orb-controls {
  grid-column: 3;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 168px;
}
.orb-btn {
  appearance: none;
  border: 1px solid #d19e4b4a;
  background: #141417db;
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 12px;
  font: 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}
.orb-btn:hover, .orb-btn.on { border-color: #ffbf54; color: #ffbf54; }
body.on-side .orb-visual { filter: drop-shadow(0 0 28px #5cefff55); }
body.on-side .orb-scan {
  border-color: #9af4ff66;
  box-shadow: inset 0 0 42px #3adfff33;
}
body.on-side .orb-scan:before { border-color: #d8fbff55; }
body.on-side .orb-scan:after { border-color: #7eebff55; }
body.on-side .orb-glow {
  background: radial-gradient(circle, #f4feff 0 4%, #8ef6ff 14%, #1ecfff 36%, transparent 70%);
}
body.on-side .orb-core {
  background: radial-gradient(circle at 43% 38%, #ffffff 0 8%, #c8fbff 22%, #3adfff 46%, #0c6f99 72%, transparent 73%);
  box-shadow: 0 0 12px #f4feff, 0 0 32px #5cefff, 0 0 74px #19cfff99;
}
body.on-side .orb-core:before,
body.on-side .orb-core:after {
  border-color: #bdf7ff88;
  box-shadow: 0 0 20px #4ae7ff77;
}
body.on-side .orb-core:after { border-color: #7eebff66; }
body.on-side .orb-btn {
  border-color: #7eefff55;
  background: #12080cdb;
}
body.on-side .orb-btn:hover,
body.on-side .orb-btn.on { border-color: #d7fbff; color: #eafdff; }
body.on-side .ask-reply {
  background: rgba(28, 6, 10, 0.94);
  border-color: #7eebff;
  color: #f3feff;
  box-shadow: 0 0 22px #39e7ff33;
}
body.on-jtech .orb-visual { filter: drop-shadow(0 0 28px #b794ff66); }
body.on-jtech .orb-scan {
  border-color: #cbb6ff66;
  box-shadow: inset 0 0 42px #8b6cff33;
}
body.on-jtech .orb-scan:before { border-color: #efe6ff55; }
body.on-jtech .orb-scan:after { border-color: #b794ff55; }
body.on-jtech .orb-glow {
  background: radial-gradient(circle, #f7f2ff 0 4%, #d4c2ff 14%, #8d6bff 36%, transparent 70%);
}
body.on-jtech .orb-core {
  background: radial-gradient(circle at 43% 38%, #ffffff 0 8%, #efe6ff 22%, #b794ff 46%, #5b3d99 72%, transparent 73%);
  box-shadow: 0 0 12px #f4eeff, 0 0 32px #b794ff, 0 0 74px #7a5cff99;
}
body.on-jtech .orb-core:before,
body.on-jtech .orb-core:after {
  border-color: #e4d6ff88;
  box-shadow: 0 0 20px #b794ff77;
}
body.on-jtech .orb-core:after { border-color: #cbb6ff66; }
body.on-jtech .orb-btn {
  border-color: #cbb6ff55;
  background: #14161cdb;
}
body.on-jtech .orb-btn:hover,
body.on-jtech .orb-btn.on { border-color: #efe6ff; color: #f4eeff; }
body.on-jtech .ask-reply {
  background: rgba(20, 23, 28, 0.94);
  border-color: #cbb6ff;
  color: #f7f2ff;
  box-shadow: 0 0 22px #8d6bff33;
}
.client-work {
  width: min(640px, 100%);
  margin: 0 auto 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px 14px 14px;
  text-align: left;
}
.client-work summary {
  cursor: pointer;
  font-family: var(--display);
  letter-spacing: 0.06em;
  color: var(--accent);
  padding: 8px 0;
}
.client-work p { margin: 8px 0; }
.client-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.client-add input {
  flex: 1 1 140px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #10141ccc;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
}
.connect-accounts,
.account-add,
.mail-bar,
.mail-list,
.mail-read {
  width: min(640px, 100%);
  margin: 0 auto 16px;
  text-align: left;
}
.account-card,
.mail-row {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.mail-row span,
.account-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mail-actions, .mail-bar, .connect-add, .client-save, .apple-save {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mail-bar select,
.connect-add input,
.connect-add select,
.client-save input,
.apple-save input {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #10141ccc;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
  min-height: 44px;
}
.mail-main { color: var(--accent); }
.mail-read, .cal-events {
  white-space: pre-wrap;
  color: var(--ink);
  font: inherit;
}
.account-add summary { cursor: pointer; color: var(--accent); padding: 8px 0; }
.board { padding: 8px 8px 28px; }
.board h2 {
  margin: 8px 0 12px;
  text-align: center;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--accent);
}
.board-note, .board-section {
  width: min(640px, 100%);
  margin: 0 auto 16px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}
.link-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: min(640px, 100%);
  margin: 0 auto 22px;
}
.link-grid a {
  flex: 0 0 calc((100% - 24px) / 3);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #10141ccc;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
}
.link-grid a:hover { border-color: var(--accent); color: var(--accent); }
.account-connect {
  width: min(640px, 100%);
  margin: 0 auto 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.account-connect button {
  flex: 1 1 140px;
  max-width: 200px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #10141ccc;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.account-connect button:hover { border-color: var(--accent); color: var(--accent); }
.dash-folder {
  width: min(640px, 100%);
  margin: 0 auto 22px;
}
.dash-folder summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--display);
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 10px 12px;
  margin: 0 0 12px;
}
.dash-folder summary::-webkit-details-marker { display: none; }
.dash-folder summary::before { content: "▸  "; }
.dash-folder[open] summary::before { content: "▾  "; }
.dash-folder summary:focus-visible {
  outline: 1px solid var(--accent);
  border-radius: 8px;
}
.page-parent {
  width: min(640px, 100%);
  margin: 0 auto 4px;
  text-align: center;
}
.page-parent a { color: var(--muted); text-decoration: none; }
.page-parent a:hover { color: var(--accent); }
.page-body a { color: var(--accent); }
.page-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: min(640px, 100%);
  margin: 0 auto 14px;
}
.page-btn {
  background: #10141ccc;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.danger { color: var(--danger); }
.page-body {
  width: min(640px, 100%);
  margin: 0 auto 22px;
  text-align: left;
  line-height: 1.5;
}
.page-body p { margin: 0 0 6px; white-space: pre-wrap; }
.page-heading { margin: 16px 0 6px; font-size: 16px; font-weight: 650; }
.page-gap { height: 8px; }
.page-empty { color: var(--muted); }
.page-check-line { margin: 0 0 6px; }
.page-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin: 0 0 8px;
}
.page-check-name { min-width: 5.5rem; font-weight: 650; }
.page-check {
  display: inline-flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
}
.page-check input { margin-top: 4px; }
.page-form {
  width: min(640px, 100%);
  margin: 0 auto 22px;
  text-align: left;
}
.page-form label { display: block; margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.page-form input, .page-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: #10141ccc;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 17px;
}
.page-form textarea { min-height: 240px; resize: vertical; }
.page-hint { color: var(--muted); font-size: 13px; text-align: center; }
.form-error { color: var(--danger); text-align: center; }
.form-error[hidden] { display: none; }
.dash-top {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  width: min(440px, 100%);
  margin: 0 auto 18px;
}
.wall-clock {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.clock-shell {
  width: min(148px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 8px;
  background: linear-gradient(145deg, #454b5b, #171a23 55%, #07080c);
  box-shadow: 0 12px 28px #0009, inset 0 2px 2px #ffffff19, inset 0 -3px 5px #000b;
}
.clock {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 45% 38%, #343844 0, #1e212b 58%, #151720 100%);
  border: 1px solid #68708355;
  box-shadow: inset 0 0 0 3px #090a0e, inset 0 0 0 6px #454b5955;
}
.clock:before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, #dbe1ed 0 1deg, transparent 1deg 6deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
  opacity: 0.9;
}
.clock .num {
  position: absolute;
  inset: 0;
  z-index: 2;
  font-weight: 500;
  font-size: 14px;
  text-shadow: 0 2px 3px #000;
}
.clock .num span { position: absolute; }
.clock .n12 { top: 8%; left: 50%; transform: translateX(-50%); }
.clock .n3 { right: 10%; top: 46%; }
.clock .n6 { bottom: 8%; left: 50%; transform: translateX(-50%); }
.clock .n9 { left: 10%; top: 46%; }
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  border-radius: 8px 8px 3px 3px;
  z-index: 4;
  box-shadow: 0 2px 3px #000a;
}
.hand.hour { width: 5px; height: 27%; background: linear-gradient(90deg, #aeb7ca, #f5f7fb, #7e879a); }
.hand.minute { width: 3px; height: 37%; background: linear-gradient(90deg, #9ea8bb, #f5f7fb, #727d91); }
.hand.second { width: 2px; height: 41%; background: #ff5454; border-radius: 2px; box-shadow: 0 0 5px #f33; }
.hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #69748a, #1c2029 65%);
  z-index: 5;
  box-shadow: 0 2px 5px #000;
}
.clock-date {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
}
.clock-caption {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.weather-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px;
  border-radius: 18px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background:
    radial-gradient(circle at 78% 8%, #98622d 0, #493323 24%, transparent 48%),
    linear-gradient(150deg, #121426 0, #17182c 45%, #09101d 100%);
  box-shadow: 0 12px 28px #0009, inset 0 1px #ffffff19;
}
.weather-card:hover { outline: 1px solid #ffbf54; }
.dash-top .weather-hero { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 8px #ff9b3e77); }
.dash-top .weather-temp { font-size: 40px; line-height: 0.95; font-weight: 300; letter-spacing: -0.04em; margin-top: 4px; }
.dash-top .weather-temp .unit { font-size: 18px; vertical-align: top; margin-left: 1px; color: #dce2f2; }
.dash-top .weather-condition { font-size: 14px; font-weight: 600; margin-top: 2px; }
.dash-top .weather-city { margin-top: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.info-weather {
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 18px 18px 14px;
  border-radius: 22px;
  text-align: left;
  background:
    radial-gradient(circle at 78% 8%, #98622d 0, #493323 24%, transparent 48%),
    linear-gradient(150deg, #121426 0, #17182c 45%, #09101d 100%);
  box-shadow: 0 18px 44px #0009, inset 0 1px #ffffff19;
}
.weather-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.info-weather .eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.info-weather .weather-city { font-size: 22px; font-weight: 650; margin-top: 4px; }
.info-weather .weather-updated { font-size: 12px; color: var(--muted); margin-top: 4px; }
.info-weather .weather-hero { font-size: 42px; line-height: 1; filter: drop-shadow(0 5px 12px #ff9b3e77); }
.info-weather .weather-main { margin-top: 12px; }
.info-weather .weather-temp { font-size: 56px; line-height: 0.92; font-weight: 300; letter-spacing: -0.05em; }
.info-weather .weather-temp .unit { font-size: 22px; vertical-align: top; margin-left: 2px; color: #dce2f2; }
.info-weather .weather-condition { font-size: 17px; font-weight: 600; margin-top: 6px; }
.info-weather .weather-summary { font-size: 13px; color: var(--muted); margin-top: 4px; }
.weather-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.weather-stats .stat {
  padding: 6px 6px;
  border: 1px solid #ffffff1d;
  border-radius: 10px;
  background: #ffffff16;
}
.weather-stats .label { display: block; color: var(--muted); font-size: 10px; margin-bottom: 2px; }
.weather-stats .value { font-size: 12px; font-weight: 600; }
.weather-hours-title { font-size: 12px; font-weight: 650; margin: 10px 0 6px; }
.weather-hours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.weather-hours .hour {
  min-height: 0;
  padding: 6px 2px;
  text-align: center;
  border: 1px solid #ffffff1d;
  border-radius: 10px;
  background: #ffffff0c;
}
.weather-hours .hour:first-child { background: linear-gradient(180deg, #ffffff21, #ffffff0d); border-color: #ffffff37; }
.weather-hours .time { font-size: 10px; color: var(--muted); }
.weather-hours .icon { font-size: 16px; margin: 4px 0 2px; }
.weather-hours .deg { font-size: 12px; font-weight: 650; }
.weather-source { font-size: 10px; color: #aab1c7; text-align: center; margin-top: 8px; }
.history-list {
  width: min(640px, 100%);
  margin: 0 auto 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-list .chat-item {
  border: 1px solid var(--line);
  background: #10141ccc;
  border-radius: 12px;
  min-height: 48px;
}
.history-list .chat-item.on { border-color: var(--accent); }
.history-tools {
  width: min(640px, 100%);
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
}
.history-block {
  width: min(640px, 100%);
  margin: 0 auto 16px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #10141ccc;
  padding: 14px 16px;
}
.history-block h3 {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.history-block p { margin: 8px 0; white-space: pre-wrap; }
.history-block .where { color: var(--muted); font-size: 12px; }
.log {
  min-height: 0;
  overflow: visible;
  padding: 8px 4px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@keyframes orb-breathe {
  0%, 100% { transform: scale(0.92); opacity: 0.78; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-speak {
  0%, 100% { transform: translateY(0) scale(1); }
  32% { transform: translateY(-7px) scale(1.045); }
  64% { transform: translateY(4px) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .orb-glow, .orb-core, .orb-scan, .orb-visual { animation: none; }
}

.msg { max-width: 100%; }
.msg.user {
  align-self: flex-end;
  max-width: 80%;
}
.msg.user .bubble {
  background: var(--user);
  border-radius: 18px 18px 6px 18px;
}
.msg.assistant .bubble {
  background: transparent;
  padding-left: 0;
}
.bubble {
  padding: 12px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.55;
  font-size: 16px;
}
.meta {
  font-size: 11px;
  color: var(--muted);
  margin: 0 4px 6px;
  font-family: var(--mono);
}
.tool {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  background: #0a0e14;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 8px 0;
}
.tool b { color: var(--accent); font-weight: 600; }
.welcome {
  color: var(--muted);
  padding: 18vh 8px 0;
  line-height: 1.6;
  text-align: center;
}
.welcome h2 {
  color: var(--accent);
  font-family: var(--display);
  font-size: 30px;
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 0 24px #4ec8ff66;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 8px;
}
.actions button {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.actions button:hover, .actions button.on { border-color: var(--accent); color: var(--accent); }
.suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.suggest button {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  cursor: pointer;
}
.suggest button:hover { border-color: var(--accent); }
.follow-queue {
  list-style: none;
  margin: 0 4px 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.follow-queue li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 13px;
}
.follow-queue li span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-queue button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
}
.follow-queue .now {
  border-color: var(--accent);
  color: var(--accent);
}
.composer {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 18px;
  padding: 10px 10px 10px 10px;
  box-shadow: 0 8px 40px #0008, 0 0 24px #4ec8ff22, 0 0 0 1px #4ec8ff22;
}
body.busy .composer { grid-template-columns: auto 1fr auto auto auto; }
body.listening .composer {
  box-shadow: 0 8px 40px #0008, 0 0 28px #4ec8ff55, 0 0 0 1px #4ec8ff66;
}
#mic-btn.on {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 14px #4ec8ff66;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
#mic-btn svg { display: block; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 8px #4ec8ff44; }
  50% { box-shadow: 0 0 18px #4ec8ffaa; }
}
.icon-btn {
  background: transparent !important;
  color: var(--accent) !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-size: 22px;
  line-height: 1;
  align-self: end;
}
.attach-list {
  margin: 6px 4px 0;
  color: var(--muted);
  font-size: 12px;
}
.msg img.gen {
  max-width: min(420px, 100%);
  border-radius: 12px;
  margin-top: 8px;
  border: 1px solid var(--line);
}
.msg a.built-file {
  display: inline-block;
  margin-top: 8px;
  margin-right: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  background: #4ec8ff14;
}
.msg a.built-file:hover {
  background: #4ec8ff28;
}
.built-file-card {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: #4ec8ff14;
  max-width: min(420px, 100%);
}
.built-file-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  word-break: break-all;
}
.built-file-status {
  color: var(--muted);
  font-size: 12px;
  margin: 4px 0 8px;
}
.built-file-card button {
  background: var(--accent);
  color: #071018;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.install-url {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  word-break: break-all;
}
.msg .copy {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 0 4px;
}
textarea {
  resize: none;
  max-height: 180px;
  background: transparent;
  color: var(--ink);
  border: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  padding: 8px 0;
  outline: none;
}
#send, #key-save {
  background: var(--accent);
  color: #041018;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  align-self: end;
}
#send:disabled { opacity: 0.4; cursor: wait; }
.stop-btn {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 999px;
  padding: 0 12px;
  height: 40px;
  font: inherit;
  font-size: 13px;
  align-self: end;
  cursor: pointer;
}
.draft-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: #0a0e14;
}
.draft-pane[hidden] { display: none !important; }
.work-pane {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 8vh;
  right: 0;
  bottom: 0;
  width: min(420px, 94vw);
  z-index: 14;
  border-left: 1px solid var(--accent);
  background: #0a0e14;
  box-shadow: -12px 0 40px #000a;
}
.work-pane[hidden] { display: none !important; }
.work-log {
  flex: 1;
  margin: 0;
  padding: 8px 16px 16px;
  overflow: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
#work-btn.has-work { color: var(--accent); border-color: var(--accent); }
.draft-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  color: var(--accent);
  font-family: var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.draft-head .ghost { flex: 0; padding: 4px 8px; font-size: 12px; }
.draft-head span { flex: 1; }
#draft {
  flex: 1;
  width: 100%;
  border: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  padding: 8px 16px 16px;
  outline: none;
  max-height: none;
}
.ask-grok {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
}
.ask-grok p { margin: 0 0 8px; }
.ask-grok button {
  margin-right: 8px;
  background: var(--accent);
  color: #041018;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}
.ask-grok button.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.side-label {
  margin: 10px 8px 2px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
#chip-project { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint {
  margin: 8px 4px 0;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--mono);
  text-align: center;
}

.hermes-body {
  max-height: min(60vh, 420px);
  overflow: auto;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.hermes-body h3 {
  margin: 14px 0 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--ui);
}
.hermes-body ul { margin: 0; padding-left: 1.2em; }
.hermes-body li { margin: 0 0 4px; }
.hermes-meta { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
dialog {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 20px;
  width: min(420px, 92vw);
}
dialog::backdrop { background: #0008; }
dialog h2 { margin: 0 0 8px; font-size: 18px; font-family: var(--display); letter-spacing: 0.06em; }
dialog p { color: var(--muted); font-size: 14px; line-height: 1.45; }
dialog a { color: var(--accent); }
dialog label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
dialog input {
  width: 100%;
  margin: 4px 0 0;
  background: #07090e;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
}
.row { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.err { color: var(--danger); }

.setup {
  position: fixed;
  inset: 0;
  background: #07090ed9;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 20;
  backdrop-filter: blur(8px);
}
.setup[hidden] { display: none !important; pointer-events: none; }
.setup-card {
  width: min(440px, 100%);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 28px 24px;
}
.eyebrow {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--accent);
}
.setup-card h2 { margin: 0 0 8px; font-size: 26px; font-family: var(--display); letter-spacing: 0.06em; }
.setup-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
.setup-card label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.setup-card input {
  width: 100%;
  background: #07090e;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 18px;
  margin-bottom: 12px;
}
.setup-card button {
  width: 100%;
  background: var(--accent);
  color: #041018;
  font: inherit;
  font-weight: 650;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
}
.gate-mark {
  width: 72px;
  height: 72px;
  display: block;
  margin: 0 auto 12px;
  background: #000;
  border-radius: 16px;
}
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
}
body:not(.on-chat) .modes,
body:not(.on-chat) .chips,
body:not(.on-chat) #actions,
body:not(.on-chat) #attach-list,
body:not(.on-chat) #follow-queue,
body:not(.on-chat) #workspace,
body:not(.on-chat) #access-hint,
body:not(.on-chat) #log {
  display: none !important;
}
body.on-chat #board { display: none; }
.composer, .actions, .follow-queue, #attach-list, .hint, .log {
  width: min(860px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.nav-scrim {
  position: fixed;
  inset: 0;
  background: #0008;
  z-index: 15;
}
.nav-scrim[hidden] { display: none !important; pointer-events: none; }

@media (max-width: 720px) {
  .dash-top { gap: 10px; width: 100%; }
  .clock-shell { width: min(112px, 100%); padding: 6px; }
  .clock .num { font-size: 12px; }
  .clock-date { font-size: 11px; margin-top: 6px; }
  .clock-caption { font-size: 9px; letter-spacing: 0.02em; }
  .dash-top .weather-hero { font-size: 28px; }
  .dash-top .weather-temp { font-size: 32px; }
  .dash-top .weather-condition { font-size: 13px; }
  .info-weather .weather-temp { font-size: 44px; }
  .info-weather .weather-hours .hour:nth-child(5) { display: none; }
  .info-weather .weather-hours { grid-template-columns: repeat(4, 1fr); }
  .orb-row {
    grid-template-columns: minmax(0, 1fr) 142px;
    width: 100%;
  }
  .orb-visual {
    grid-column: 1;
    width: 100%;
    justify-self: end;
  }
  .orb-controls { grid-column: 2; width: 142px; }
  .orb-btn { letter-spacing: 0.04em; padding: 10px 8px; }
  body, body.with-draft { grid-template-columns: minmax(0, 1fr); }
  .draft-pane {
    position: fixed;
    inset: 8vh 0 0 0;
    z-index: 14;
    border-left: 0;
    border-top: 1px solid var(--accent);
    border-radius: 16px 16px 0 0;
  }
  body {
    background:
      linear-gradient(180deg, rgba(7, 9, 14, 0.86) 0%, rgba(7, 9, 14, 0.72) 40%, rgba(7, 9, 14, 0.90) 100%),
      url("/static/chamber.jpg") center 42% / cover no-repeat,
      var(--bg);
  }
  body.on-side {
    background:
      linear-gradient(180deg, rgba(18, 0, 4, 0.72) 0%, rgba(28, 0, 6, 0.48) 40%, rgba(10, 0, 2, 0.82) 100%),
      url("/static/chamber.jpg") center 42% / cover no-repeat,
      #120206;
  }
  body.on-jtech {
    background:
      linear-gradient(180deg, rgba(16, 18, 22, 0.78) 0%, rgba(28, 32, 38, 0.5) 40%, rgba(10, 12, 16, 0.86) 100%),
      url("/static/chamber.jpg") center 42% / cover no-repeat,
      #14171c;
  }
  .stage { padding: 8px 12px 10px; max-width: none; }
  .chips .chip:not(button) { display: none; }
  .composer {
    margin-bottom: calc(env(safe-area-inset-bottom) + var(--kb, 0px));
    padding: 8px 8px 8px 14px;
  }
  .modes button {
    padding: 10px 14px;
    min-height: 40px;
  }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  #send, .icon-btn, #mic-btn {
    width: 44px;
    height: 44px;
  }
  textarea { font-size: 17px; }
  .welcome { padding-top: 12vh; }
  .welcome h2 { font-size: 24px; }
}

.practice-wrap, .practice-tabs, .practice-subtabs, .practice-time {
  width: min(640px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.practice-tabs, .practice-subtabs, .practice-time, .practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.practice-tabs, .practice-subtabs { margin-bottom: 14px; }
.practice-tab.on, .practice-sub.on { border-color: var(--accent); color: var(--accent); }
.practice-tabs .page-btn, .practice-subtabs .page-btn, .practice-actions .page-btn, .practice-time .page-btn {
  min-height: 44px;
}
.practice-time { margin-bottom: 8px; }
.practice-time label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}
.practice-time input {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #10141ccc;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
  min-height: 44px;
}
.practice-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin: 10px 0;
  background: #10141ccc;
}
.practice-line {
  font-size: 22px;
  line-height: 1.45;
  text-align: center;
  margin: 0 0 14px;
}
.practice-block { margin: 0 0 12px; line-height: 1.5; }
.practice-part {
  text-align: center;
  color: var(--accent);
  margin: 0 0 8px;
}
.practice-subhead {
  font-size: 15px;
  margin: 16px 0 8px;
  color: var(--accent);
}
.practice-question { margin: 0 0 14px; }
.practice-question p { margin: 0 0 8px; }
.practice-choice {
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #10141ccc;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
  cursor: pointer;
}
.practice-choice:hover { border-color: var(--accent); }
.practice-choice.right { border-color: var(--accent); color: var(--accent); }
.practice-choice.wrong { border-color: var(--danger); }
.practice-choice:disabled { cursor: default; }
.practice-why { color: var(--muted); margin: 6px 0 0; }
.practice-error:empty { display: none; }