:root {
  color-scheme: dark;
  --bg: #0b0c10;
  --surface: #161922;
  --surface-raised: #1f2833;
  --text: #f4f6fa;
  --muted: #a8b0bf;
  --red: #ff3b30;
  --blue: #2f80ed;
  --line: rgba(255, 255, 255, .1);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: radial-gradient(ellipse at 82% 5%, rgba(47, 128, 237, .12), transparent 36rem), var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.site-header {
  position: sticky;
  z-index: 5;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 12, 16, .88);
  backdrop-filter: blur(16px);
}
.header-inner, .page-shell, .footer-inner { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 1.35rem; font-weight: 850; letter-spacing: -.06em; }
.brand-mark { color: var(--red); }
.primary-nav { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: .92rem; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--text); }
.nav-library { position: relative; }
.nav-library summary { cursor: pointer; list-style: none; }
.nav-library summary::-webkit-details-marker { display: none; }
.nav-library summary::after { content: " ▾"; color: var(--muted); }
.nav-library-list { position: absolute; top: 30px; right: 0; display: grid; min-width: 220px; max-height: 60vh; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 40px rgba(0, 0, 0, .4); }
.nav-library-list a { padding: 9px 10px; border-radius: 8px; }
.nav-library-list a:hover { background: var(--surface-raised); }
.menu-button { display: none; border: 0; color: var(--text); background: transparent; padding: 10px; }
.page-shell { padding-block: 56px 120px; }
.hero { max-width: 790px; padding-block: clamp(44px, 10vw, 120px) 70px; }
.home-hero {
  position: relative;
  display: grid;
  min-height: 550px;
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(52px, 8vw, 104px) 76px;
}
.home-copy { position: relative; z-index: 1; }
.home-copy h1 { font-size: clamp(3rem, 6.5vw, 5.3rem); }
.home-copy .lead { max-width: 610px; }
.eyebrow-dot, .board-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #ff776f; box-shadow: 0 0 16px rgba(255, 59, 48, .75); vertical-align: 1px; }
.practice-board {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(118, 179, 255, .22);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 92% 4%, rgba(47, 128, 237, .22), transparent 48%),
    linear-gradient(145deg, #191e29, #11141b 76%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28), 0 0 60px rgba(47, 128, 237, .08);
  transform: rotate(1deg);
}
.board-topline, .feature-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.board-label { color: #8f9bad; font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.board-dot { width: 7px; height: 7px; margin: 0; background: #6ad6a0; box-shadow: 0 0 14px rgba(106, 214, 160, .7); }
.board-date { margin-block: 24px 20px; font-size: 1.35rem; font-weight: 750; letter-spacing: -.035em; }
.board-task { display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; align-items: center; gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .035); }
.board-task-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; font-size: .84rem; font-weight: 800; }
.board-icon-blue { color: #9ecaff; background: rgba(47, 128, 237, .18); }
.board-icon-red { color: #ff9b95; background: rgba(255, 59, 48, .14); }
.board-task strong, .board-task small { display: block; }
.board-task strong { margin-bottom: 4px; font-size: .9rem; }
.board-task small { color: #98a1af; font-size: .75rem; line-height: 1.4; }
.board-arrow { color: #8ea0b5; }
.board-foot { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #828c9c; font-size: .72rem; }
.board-foot-mark { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #c4dcff; background: rgba(47, 128, 237, .2); font-weight: 850; }
.home-section { border-top: 0; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.home-section-heading h2 { margin-bottom: 0; }
.home-section-heading > p { max-width: 380px; margin: 0 0 4px; color: var(--muted); line-height: 1.7; }
.home-feature { min-height: 250px; }
.home-feature .card-icon { margin-bottom: 0; }
.availability { color: #a8b0bf; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-align: right; }
.availability-local { color: #85d8ae; }
.availability-planned { color: #f3bd77; }
.home-games { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 36px; overflow: hidden; margin-block: 24px 40px; padding: clamp(26px, 5vw, 52px); border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(120deg, rgba(31, 40, 51, .84), rgba(18, 21, 29, .94)); }
.home-games h2 { margin-bottom: 16px; }
.home-games-copy > p:not(.eyebrow) { max-width: 520px; margin-bottom: 22px; color: var(--muted); line-height: 1.7; }
.game-stamps { position: relative; min-height: 220px; }
.stamp { position: absolute; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; box-shadow: 0 18px 42px rgba(0, 0, 0, .28); font-weight: 900; }
.stamp-one { top: 14px; left: 12%; width: 150px; height: 154px; color: #11141b; background: #f1c96e; font-size: 1.25rem; line-height: .92; letter-spacing: -.06em; transform: rotate(-9deg); }
.stamp-two { top: 44px; right: 10%; width: 102px; height: 102px; color: #c6e0ff; background: #2d5a87; font-size: 2.3rem; transform: rotate(11deg); }
.stamp-three { right: 23%; bottom: 0; width: 130px; height: 52px; border-radius: 13px; color: #ffb5b0; background: #412524; font-size: .95rem; letter-spacing: .15em; transform: rotate(-4deg); }
.honesty-strip { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 18px; padding: 24px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; background: rgba(255, 255, 255, .025); }
.honesty-symbol { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #a6cfff; background: rgba(47, 128, 237, .18); font-weight: 850; }
.honesty-strip h2 { margin-bottom: 6px; font-size: 1.1rem; letter-spacing: -.02em; }
.honesty-strip p { max-width: 700px; margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.honesty-strip > a { color: #a6cfff; font-size: .86rem; font-weight: 700; white-space: nowrap; }
.eyebrow { margin: 0 0 14px; color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 20px; font-size: clamp(2.6rem, 7.8vw, 5.8rem); letter-spacing: -.065em; line-height: .99; }
h2 { margin-bottom: 14px; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.045em; line-height: 1.08; }
h3 { margin-bottom: 10px; font-size: 1.18rem; }
.text-blue { color: #76b3ff; }
.lead { max-width: 650px; color: var(--muted); font-size: clamp(1.06rem, 2vw, 1.25rem); line-height: 1.7; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 26px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 1px solid transparent; border-radius: 12px; font-weight: 750; transition: transform .18s ease, background .18s ease, border-color .18s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px) scale(1.02); }
.button:active { transform: scale(.97); }
.button-primary { color: #fff; background: var(--red); }
.button-primary:hover { background: #eb2e25; }
.button-secondary { border-color: var(--line); background: var(--surface); }
.button-secondary:hover { border-color: rgba(255, 255, 255, .25); background: var(--surface-raised); }
.disclaimer, .muted, .field-hint { color: var(--muted); font-size: .88rem; line-height: 1.6; }
.disclaimer { max-width: 650px; }
.section { padding-block: 54px; border-top: 1px solid var(--line); }
.section-heading { max-width: 720px; margin-bottom: 28px; }
.section-heading > p:last-child { color: var(--muted); line-height: 1.7; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card, .panel, .game-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(31, 40, 51, .9), rgba(22, 25, 34, .95));
}
.feature-card { display: flex; min-height: 230px; flex-direction: column; padding: 24px; transition: transform .18s ease, border-color .18s ease; }
.feature-card:hover, .game-card:hover { transform: translateY(-3px); border-color: rgba(118, 179, 255, .42); }
.feature-card p, .game-card p { color: var(--muted); line-height: 1.6; }
.card-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 11px; color: #9ecaff; background: rgba(47, 128, 237, .18); font-size: .76rem; font-weight: 800; }
.card-link { margin-top: auto; color: #9ecaff; font-weight: 700; }
.page-title { max-width: 760px; margin-bottom: 36px; }
.page-title h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.page-title p:last-child { color: var(--muted); line-height: 1.7; }
.panel { max-width: 760px; padding: clamp(20px, 4vw, 32px); }
.form-grid { display: grid; gap: 18px; }
.auth-page { padding-top: clamp(38px, 7vw, 76px); }
.auth-page .page-title { margin-bottom: 24px; }
.auth-panel { max-width: 560px; }
.auth-panel > .status-box { margin: 0 0 20px; }
.auth-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.auth-tabs .button { flex: 1; }
.auth-tabs .button[aria-pressed="true"] { border-color: rgba(118, 179, 255, .46); color: #c5dcff; background: rgba(47, 128, 237, .15); }
.auth-form[hidden], .auth-controls[hidden] { display: none; }
.auth-form .button-primary { width: 100%; }
.auth-text-button { justify-self: center; padding: 8px; border: 0; color: #a9c7ff; background: transparent; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-age-confirm { margin-block: 2px; }
.auth-panel .field-hint { margin: 0; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 700; }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: #10131a;
}
.field textarea { min-height: 210px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #7f8998; }
.inline-options { display: flex; flex-wrap: wrap; gap: 14px 24px; color: var(--muted); }
.inline-options label { display: inline-flex; align-items: center; gap: 8px; }
.status-box { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(0, 0, 0, .18); line-height: 1.55; }
.status-box[data-kind="error"] { border-color: rgba(255, 59, 48, .5); color: #ffaaa5; }
.status-box[data-kind="success"] { border-color: rgba(70, 190, 130, .42); color: #9ee0bd; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.game-card { display: flex; min-height: 210px; flex-direction: column; padding: 22px; transition: transform .18s ease, border-color .18s ease; }
.game-card .button { align-self: flex-start; margin-top: auto; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.metric { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.metric strong { display: block; margin-bottom: 5px; font-size: 1.5rem; }
.metric span { color: var(--muted); font-size: .86rem; }
.auth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.conversation-log { display: grid; gap: 10px; max-height: 350px; overflow-y: auto; }
.conversation-message { width: fit-content; max-width: min(90%, 620px); margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .035); line-height: 1.55; overflow-wrap: anywhere; }
.conversation-user { justify-self: end; border-color: rgba(47, 128, 237, .24); background: rgba(47, 128, 237, .1); }
.conversation-assistant { justify-self: start; }
.message-interim { opacity: .65; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; padding-block: 28px 100px; font-size: .85rem; line-height: 1.6; }
.footer-inner p { max-width: 650px; margin: 0; }
.mobile-nav { display: none; }
[hidden] { display: none !important; }

@media (max-width: 760px) {
  .header-inner, .page-shell, .footer-inner { width: min(100% - 32px, 600px); }
  .header-inner { min-height: 64px; }
  .menu-button { display: inline-flex; }
  .primary-nav { position: absolute; top: 63px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; border-bottom: 1px solid var(--line); background: #0b0c10; }
  .primary-nav[data-open="true"] { display: flex; }
  .primary-nav a { padding: 13px 8px; }
  .nav-library-list { position: static; max-height: 38vh; margin-top: 6px; box-shadow: none; }
  .page-shell { padding-top: 34px; padding-bottom: 112px; }
  .hero { padding-block: 56px 48px; }
  .home-hero { min-height: auto; grid-template-columns: 1fr; gap: 16px; padding-block: 58px 54px; }
  .practice-board { max-width: 500px; justify-self: center; transform: none; }
  .home-section-heading { display: block; }
  .home-section-heading > p { margin-top: 16px; }
  .home-games { grid-template-columns: 1fr; gap: 10px; }
  .game-stamps { min-height: 195px; max-width: 390px; width: 100%; justify-self: center; }
  .honesty-strip { grid-template-columns: 36px 1fr; gap: 12px; }
  .honesty-strip > a { grid-column: 2; }
  .card-grid, .game-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 190px; }
  .metric-grid { grid-template-columns: 1fr; }
  .auth-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; padding-bottom: 106px; }
  .mobile-nav {
    position: fixed;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(11, 12, 16, .94);
    backdrop-filter: blur(16px);
  }
  .mobile-nav a { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; color: var(--muted); font-size: .68rem; }
  .mobile-nav a[aria-current="page"] { color: var(--text); }
  .mobile-nav span:first-child { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Gero's play lab: an editorial canvas rather than a generic card dashboard. */
:root {
  --ink: #0b1012;
  --surface: #131a1b;
  --surface-raised: #1a2424;
  --paper: #f0efe7;
  --muted: #a7b1aa;
  --blue: #9bc4ff;
  --red: #ff6d57;
  --acid: #d8f27a;
  --line: rgba(231, 240, 225, .12);
}

body {
  background:
    radial-gradient(ellipse at 82% 8%, rgba(106, 151, 131, .11), transparent 34rem),
    linear-gradient(180deg, #0b1012 0%, #0c1114 48%, #0b0f12 100%);
}

.site-header { background: rgba(11, 16, 18, .91); }
.brand { letter-spacing: -.08em; }
.brand-mark { color: var(--acid); }
.home-hero { min-height: 620px; }
.home-copy h1 {
  max-width: 760px;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(3.3rem, 7.5vw, 6.2rem);
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: .96;
}
.home-copy .text-blue, .text-blue { color: var(--acid); }
.home-copy .lead { max-width: 540px; font-size: clamp(1.06rem, 1.8vw, 1.2rem); }
.home-copy .eyebrow { color: #c9d1c3; }
.eyebrow-dot { background: var(--acid); box-shadow: 0 0 18px rgba(216, 242, 122, .55); }
.button { border-radius: 8px; }
.button-primary { color: #14180d; background: var(--acid); }
.button-primary:hover { background: #e5ffa0; }
.button-secondary { background: #171e1f; }
.practice-board {
  min-height: 365px;
  border-color: rgba(216, 242, 122, .24);
  border-radius: 14px;
  background:
    linear-gradient(rgba(216, 242, 122, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 242, 122, .045) 1px, transparent 1px),
    radial-gradient(ellipse at 80% 6%, rgba(88, 143, 123, .22), transparent 60%),
    linear-gradient(145deg, #1a2522, #111819 76%);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34), 0 0 80px rgba(145, 190, 124, .07);
  transform: rotate(.75deg);
}
.board-label { color: #bbc5b7; }
.board-date { font-family: Georgia, serif; font-size: 1.55rem; }
.board-task { border-radius: 8px; background: rgba(8, 13, 13, .36); }
.board-icon-blue { color: #d8f27a; background: rgba(216, 242, 122, .12); }
.board-icon-red { color: #ffc2a2; background: rgba(255, 109, 87, .12); }
.board-foot-mark { color: #e6f5c1; background: rgba(216, 242, 122, .15); }
.home-section-heading h2, .home-games h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.home-games { border-radius: 14px; background: linear-gradient(112deg, #202820, #13191a 70%); }
.stamp { border-radius: 13px; }
.stamp-one { color: #152016; background: var(--acid); }
.stamp-two { color: #e5efff; background: #364f62; }
.stamp-three { color: #ffd4be; background: #55342a; }
.honesty-strip { border-radius: 12px; background: rgba(216, 242, 122, .035); }
.honesty-symbol { color: var(--acid); background: rgba(216, 242, 122, .12); }
.honesty-strip > a, .card-link { color: var(--acid); }
.feature-card, .panel, .game-card {
  border-radius: 12px;
  background: linear-gradient(145deg, #172021, #121819);
}
.feature-card:hover, .game-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216, 242, 122, .4);
}
.card-icon { color: var(--acid); background: rgba(216, 242, 122, .1); }
.page-title .eyebrow, .game-kicker { color: var(--acid); }
.availability-local { color: var(--acid); }

.game-library { padding-top: 76px; }
.library-heading { max-width: 820px; margin-bottom: 54px; }
.library-heading h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: clamp(3.4rem, 8vw, 6.4rem);
  font-weight: 500;
  line-height: .92;
}
.library-heading > p:last-of-type { max-width: 600px; font-size: 1.05rem; }
.library-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 32px; color: #9ba79f; font-size: .67rem; font-weight: 800; letter-spacing: .13em; }
.game-grid-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.game-grid-editorial .game-card { overflow: hidden; padding: 12px; }
.game-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: clamp(20px, 4vw, 52px); align-items: center; }
.game-art {
  position: relative;
  display: flex;
  min-height: 200px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: #192323;
  isolation: isolate;
}
.game-card-featured .game-art { min-height: 310px; }
.game-card-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 18px; }
.game-card-copy h2 { font-family: Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; }
.game-card-copy > p:not(.game-kicker) { margin-bottom: 24px; }
.game-card-copy .button { margin-top: auto; }
.game-kicker { margin-bottom: 12px; font-size: .64rem; font-weight: 850; letter-spacing: .14em; }
.art-index { position: absolute; z-index: 3; top: 16px; left: 18px; color: rgba(240, 239, 231, .64); font-size: .62rem; font-weight: 750; letter-spacing: .12em; }
.art-word { position: relative; z-index: 2; color: #111719; font-family: Georgia, serif; font-size: clamp(2.5rem, 6vw, 5rem); font-style: italic; letter-spacing: -.08em; transform: translateY(-5px) rotate(-8deg); text-shadow: 0 18px 35px rgba(0, 0, 0, .28); }
.game-art-catcher { background: radial-gradient(ellipse at 55% 58%, rgba(216, 242, 122, .18), transparent 50%), linear-gradient(135deg, #27372e, #152021 65%); }
.art-orbit { position: absolute; width: 280px; height: 118px; border: 1px solid rgba(216, 242, 122, .44); border-radius: 50%; transform: rotate(-22deg) skewX(12deg); }
.art-cube { position: absolute; top: 25%; right: 19%; width: 58px; height: 58px; border: 1px solid rgba(232, 255, 183, .7); background: linear-gradient(140deg, rgba(216, 242, 122, .8), rgba(130, 190, 171, .32)); box-shadow: 20px 18px 0 -1px rgba(66, 113, 102, .78), 0 20px 50px rgba(0, 0, 0, .35); transform: rotate(24deg) skewY(-12deg); }
.game-art-runner { background: linear-gradient(150deg, #172332, #18201f); }
.art-runner-line { position: absolute; left: 10%; right: 10%; bottom: 30%; height: 2px; background: #8fb8e9; box-shadow: 0 -28px 0 rgba(143, 184, 233, .22), 0 26px 0 rgba(143, 184, 233, .14); transform: skewY(-12deg); }
.art-runner-block { position: absolute; left: 40%; bottom: 32%; display: grid; width: 74px; height: 74px; place-items: center; color: #111821; background: #a8c9f4; font-weight: 900; transform: rotate(45deg) skew(-8deg, -8deg); box-shadow: 16px 16px 0 #526c81; }
.art-runner-block::first-line { transform: rotate(-45deg); }
.game-art-memory { gap: 12px; background: radial-gradient(circle at 50% 30%, #36352b, #191d19 68%); }
.game-art-memory > span:not(.art-index) { display: grid; width: 72px; height: 95px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #e7ebd4; background: linear-gradient(140deg, #445343, #26322c); font-family: Georgia, serif; font-size: 1.7rem; box-shadow: 8px 10px 0 rgba(0,0,0,.2); transform: rotate(-7deg); }
.game-art-memory > span:nth-child(2) { color: #182018; background: var(--acid); transform: translateY(-12px) rotate(5deg); }
.game-art-memory > span:nth-child(3) { color: #96a59b; transform: rotate(11deg); }
.game-art-speak { background: radial-gradient(circle at center, rgba(255, 109, 87, .2), transparent 46%), #211a1a; }
.speak-orb { width: 74px; height: 74px; border: 1px solid rgba(255, 174, 141, .8); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd5a8, #f37255 48%, #77382e); box-shadow: 0 0 65px rgba(255, 109, 87, .42), 10px 16px 0 rgba(94, 50, 43, .6); }
.speak-wave { position: absolute; width: 210px; height: 100px; border: 1px solid rgba(255, 172, 142, .4); border-radius: 50%; transform: rotate(-18deg); }
.speak-wave::before, .speak-wave::after { position: absolute; inset: 14px -26px; border: inherit; border-radius: inherit; content: ""; }
.speak-wave::after { inset: 28px -48px; }
.game-art-shooter { gap: 18px; color: #c4d6ff; background: radial-gradient(circle at 50% 50%, rgba(72, 117, 190, .28), transparent 48%), #151c2b; font-family: Georgia, serif; font-size: 2.6rem; }
.game-art-shooter > span:first-child { padding: 10px 14px; border: 1px solid rgba(175, 202, 255, .5); background: rgba(41, 65, 103, .44); box-shadow: 8px 9px 0 rgba(20, 31, 52, .8); transform: rotate(-8deg); }
.shooter-crosshair { position: absolute; right: 23%; top: 26%; display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid #e0edff; border-radius: 50%; color: #e0edff; font-family: sans-serif; font-size: 1.8rem; }
.game-art-debate { gap: 14px; background: linear-gradient(135deg, #30271e, #191b1a 64%); }
.game-art-debate > span:not(.art-index) { display: grid; width: 96px; height: 68px; place-items: center; border-radius: 40% 55% 45% 30%; color: #182017; background: #d8f27a; font-size: .8rem; font-weight: 900; transform: rotate(-7deg); }
.game-art-debate > span:nth-child(2) { color: #f0e7da; background: #625343; transform: translateY(17px) rotate(8deg); }
.library-note, .word-game-footnote { margin-top: 24px; color: var(--muted); font-size: .84rem; line-height: 1.7; }

.word-game-page { max-width: 1200px; padding-top: 62px; }
.word-game-heading { margin-bottom: 28px; }
.word-game-heading h1 { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 500; }
.word-game {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  overflow: hidden;
  border: 1px solid rgba(216, 242, 122, .2);
  border-radius: 14px;
  background: linear-gradient(130deg, #171f1d, #101718 65%);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .25);
}
.word-game-stage { position: relative; min-height: 510px; overflow: hidden; background: radial-gradient(ellipse at 50% 70%, rgba(86, 127, 103, .18), transparent 48%), #0d1517; }
.word-game-stage::after { position: absolute; z-index: 1; inset: 0; border-right: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(9,15,17,.15), transparent 40%, rgba(9,15,17,.4)); content: ""; pointer-events: none; }
.word-game-stage canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.word-game-stage-top, .word-game-stage-bottom { position: absolute; z-index: 3; right: 22px; left: 22px; display: flex; justify-content: space-between; gap: 12px; color: #c3cebd; font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.word-game-stage-top { top: 20px; }
.word-game-stage-bottom { bottom: 19px; color: #9ea99f; font-weight: 650; letter-spacing: .08em; }
.scene-fallback { position: absolute; z-index: 1; inset: 0; display: grid; align-content: center; justify-items: center; gap: 15px; color: var(--acid); text-align: center; }
.scene-fallback span { font-size: .6rem; letter-spacing: .2em; }
.scene-fallback strong { font-family: Georgia, serif; font-size: clamp(3rem, 7vw, 5.6rem); font-weight: 500; line-height: .82; transform: rotate(-8deg); }
.scene-fallback i { width: 140px; height: 1px; background: var(--acid); transform: rotate(-20deg); }
.word-game-console { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(20px, 3vw, 36px); }
.word-game-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.word-game-stats > div { display: grid; gap: 7px; }
.word-game-stats span { color: #95a39a; font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.word-game-stats strong { color: #f0efe7; font-size: clamp(1rem, 2vw, 1.3rem); font-variant-numeric: tabular-nums; }
.word-game-stats [data-lives] { color: var(--acid); font-size: .78rem; letter-spacing: .03em; white-space: nowrap; }
.word-game-question { min-height: 112px; padding-top: 28px; }
.word-game-question h2 { overflow-wrap: anywhere; font-family: Georgia, serif; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 500; }
.word-choice-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.word-choice { min-height: 48px; padding: 10px 14px; border: 1px solid rgba(240,239,231,.14); border-radius: 8px; color: var(--paper); background: rgba(240,239,231,.035); text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.word-choice:hover:not(:disabled) { border-color: rgba(216,242,122,.68); background: rgba(216,242,122,.08); transform: translateX(3px); }
.word-choice:disabled { cursor: default; opacity: .65; }
.word-choice[data-correct="true"] { border-color: rgba(216,242,122,.75); color: #e6f8bd; background: rgba(216,242,122,.11); }
.word-choice[data-wrong="true"] { border-color: rgba(255,109,87,.65); color: #ffc0b2; background: rgba(255,109,87,.08); }
.word-game-actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-top: 22px; }
.difficulty-picker { display: grid; gap: 7px; color: #95a39a; font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.difficulty-picker select { min-height: 42px; padding: 8px 28px 8px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--paper); background: #151d1d; }
.word-game-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.word-game-buttons .button { min-height: 42px; padding: 9px 12px; font-size: .83rem; }
.word-game .status-box { font-size: .85rem; }
.word-game-footnote { margin-left: 2px; }

@media (max-width: 850px) {
  .word-game { grid-template-columns: 1fr; }
  .word-game-stage { min-height: clamp(300px, 74vw, 440px); }
  .word-game-stage::after { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .word-game-console { padding: 22px; }
}
@media (max-width: 760px) {
  .home-hero { gap: 28px; }
  .practice-board { min-height: 0; }
  .game-library { padding-top: 42px; }
  .library-heading { margin-bottom: 34px; }
  .library-meta { gap: 10px 16px; font-size: .58rem; }
  .game-grid-editorial { grid-template-columns: 1fr; }
  .game-card-featured { grid-column: auto; grid-template-columns: 1fr; gap: 0; }
  .game-card-featured .game-art { min-height: 230px; }
  .game-card-copy { padding: 18px 10px 10px; }
  .word-game-page { padding-top: 38px; }
  .word-game-stage { min-height: 310px; }
  .word-game-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .word-game-stats span { font-size: .52rem; }
  .word-game-stats strong { font-size: 1rem; }
  .word-game-actions { align-items: stretch; }
  .word-game-buttons { width: 100%; }
  .word-game-buttons .button { flex: 1; }
}
@media (max-width: 390px) {
  .word-game-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .word-game-buttons .button:last-child { grid-column: 1 / -1; }
  .word-game-stats [data-lives] { letter-spacing: 0; }
}

:root {
  --bg: #101312;
  --surface: #171c19;
  --surface-raised: #202824;
  --text: #f2f1eb;
  --muted: #a7b0a9;
  --blue: #a8c7b2;
  --warm: #e8a887;
  --line: rgba(236, 239, 229, .12);
}

body {
  background:
    radial-gradient(ellipse at 75% 8%, rgba(135, 168, 145, .1), transparent 38rem),
    linear-gradient(180deg, #101312, #111614 55%, #0d1110);
}

.text-warm { color: var(--warm); }
.companion-home { padding-top: 28px; }
.companion-hero { position: relative; display: grid; min-height: 660px; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); align-items: center; gap: 30px; overflow: hidden; padding-block: 44px 78px; }
.companion-hero::before { position: absolute; z-index: -1; top: 4%; right: -8%; width: 68%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(47, 128, 237, .12), rgba(113, 79, 219, .07) 36%, transparent 70%); content: ""; filter: blur(22px); pointer-events: none; }
.companion-hero-copy { position: relative; z-index: 1; }
.companion-hero-copy h1 { max-width: 760px; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: clamp(3.2rem, 7.2vw, 6.25rem); font-weight: 550; letter-spacing: -.065em; line-height: .99; }
.companion-hero-copy .lead { max-width: 590px; color: #b9c1d0; }
.companion-orbit { position: relative; width: min(100%, 500px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; isolation: isolate; }
.companion-orbit::before { position: absolute; z-index: -1; inset: 7%; border-radius: 50%; background: radial-gradient(circle, rgba(71, 201, 214, .14), rgba(119, 87, 239, .1) 42%, transparent 74%); content: ""; filter: blur(28px); }
.welcome-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.welcome-canvas[hidden] { display: none; }
.welcome-fallback { position: absolute; inset: 8%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(85, 113, 226, .22), rgba(119, 87, 239, .08) 42%, transparent 68%); }
.welcome-fallback[hidden] { display: none; }
.welcome-fallback-core { width: 42%; aspect-ratio: 1; border: 1px solid rgba(195, 210, 255, .56); border-radius: 44% 56% 49% 51%; background: radial-gradient(circle at 34% 28%, #c3d4ff, #7389e2 32%, #533f9c 73%, #252253); box-shadow: 0 0 34px rgba(84, 113, 255, .5), inset -18px -20px 34px rgba(22, 18, 59, .55), inset 9px 8px 22px rgba(225, 239, 255, .28); animation: companion-drift 9s ease-in-out infinite; }
.welcome-fallback-ring { position: absolute; width: 76%; height: 32%; border: 1px solid rgba(113, 213, 223, .44); border-radius: 50%; transform: rotate(-28deg); }
.welcome-fallback-ring-two { width: 88%; height: 38%; border-color: rgba(161, 139, 255, .42); transform: rotate(50deg); }
.companion-orbit > p { position: absolute; bottom: 2%; color: #aeb8ca; font-size: .64rem; font-weight: 750; letter-spacing: .18em; }
.companion-login-link { margin: 17px 0 0; color: var(--muted); font-size: .9rem; }
.companion-login-link a { color: #a9c7ff; text-decoration: underline; text-underline-offset: 3px; }
.companion-hero .disclaimer { max-width: 560px; margin-top: 22px; }
.companion-intro { padding-top: 44px; }
.companion-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.companion-card { min-height: 205px; }
.companion-card .card-icon { color: #d4b293; background: rgba(232, 168, 135, .12); }
.companion-signoff { margin-top: 32px; color: #c4d2ee; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: clamp(1.45rem, 3vw, 2.2rem); letter-spacing: -.03em; }
.companion-safety-strip { margin-block: 38px 52px; }
.companion-safety-strip .honesty-symbol { color: #f0b99d; background: rgba(232, 168, 135, .12); }
.companion-safety-strip > a, .safety-link { color: #e5b69a; }
.companion-readiness { max-width: 760px; padding: 28px 0; border-top: 1px solid var(--line); }
.companion-readiness h2 { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.companion-readiness > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.companion-readiness [data-voice-availability] { color: #e8b99b; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.companion-talk-page { padding-top: 42px; }
.companion-talk-heading { max-width: 780px; margin-bottom: 30px; }
.companion-talk-heading h1 { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
.companion-workspace { display: grid; grid-template-columns: minmax(220px, .68fr) minmax(0, 1.55fr); gap: 18px; align-items: start; }
.companion-controls, .conversation-panel { border: 1px solid var(--line); border-radius: 20px; background: rgba(22, 29, 25, .85); }
.companion-controls { display: grid; gap: 18px; padding: 22px; }
.companion-section-label { margin: 0; color: #d9b392; font-size: .66rem; font-weight: 850; letter-spacing: .16em; }
.companion-controls .field { gap: 9px; color: #e7e8df; font-size: .85rem; font-weight: 650; }
.companion-controls select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: #111714; }
.companion-controls .field-hint { margin: -8px 0 0; font-size: .77rem; }
.companion-privacy-note { display: grid; gap: 7px; padding: 14px; border: 1px solid rgba(167, 190, 158, .18); border-radius: 12px; background: rgba(167, 190, 158, .06); }
.companion-privacy-note strong { font-size: .84rem; }
.companion-privacy-note span { color: var(--muted); font-size: .76rem; line-height: 1.55; }
.safety-link { font-size: .8rem; font-weight: 720; line-height: 1.5; }
.conversation-history { display: grid; gap: 11px; min-width: 0; }
.history-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-heading .companion-section-label { margin: 0; }
.history-new-link { color: #e5b69a; font-size: .75rem; font-weight: 750; white-space: nowrap; }
.history-search { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: #111714; }
.history-list { display: grid; max-height: 260px; gap: 6px; overflow: auto; }
.history-list-empty { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.history-more { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: transparent; font-size: .75rem; cursor: pointer; }
.history-more:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 8px; border: 1px solid transparent; border-radius: 9px; }
.history-item[aria-current="true"] { border-color: rgba(229, 182, 154, .3); background: rgba(229, 182, 154, .07); }
.history-item-link { min-width: 0; color: var(--text); font-size: .76rem; line-height: 1.4; overflow-wrap: anywhere; }
.history-item-link span { display: block; margin-top: 3px; color: var(--muted); font-size: .67rem; }
.history-delete { padding: 6px 8px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: .7rem; cursor: pointer; }
.history-delete:hover { color: #ffaaa5; background: rgba(255, 59, 48, .08); }
.conversation-panel { min-width: 0; overflow: hidden; }
.conversation-heading { display: flex; min-height: 78px; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.conversation-heading > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.conversation-heading strong { font-size: .92rem; }
.conversation-heading > div:nth-child(2) span { color: var(--muted); font-size: .72rem; }
.conversation-orb { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid rgba(230, 187, 153, .32); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #e9c6a7, #8ea98f 62%, #34473d); box-shadow: 0 0 20px rgba(166, 194, 162, .12); }
.conversation-orb span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 238, 214, .64); filter: blur(3px); }
.conversation-clear { margin-left: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.conversation-clear:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.companion-messages { display: flex; min-height: 310px; max-height: min(52vh, 580px); flex-direction: column; gap: 14px; padding: 22px; overflow-y: auto; }
.conversation-empty { display: grid; min-height: 255px; align-content: center; justify-items: center; gap: 10px; text-align: center; }
.conversation-empty-mark { color: #dfb89b; font-size: 1.8rem; }
.conversation-empty p { margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 1.2rem; }
.conversation-empty > span:last-child { max-width: 340px; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.conversation-message { display: grid; gap: 5px; width: fit-content; max-width: min(88%, 620px); padding: 12px 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .035); overflow-wrap: anywhere; }
.conversation-message-label { color: #e0b89b; font-size: .7rem; font-weight: 750; }
.conversation-message p { margin: 0; line-height: 1.62; white-space: pre-wrap; }
.conversation-user { align-self: flex-end; border-color: rgba(168, 199, 178, .22); background: rgba(168, 199, 178, .09); }
.conversation-user .conversation-message-label { color: #bad2be; }
.message-safety-note { padding-top: 7px; border-top: 1px solid var(--line); color: #e8b99b; font-size: .75rem; line-height: 1.5; }
.companion-status { margin: 0 20px 16px; font-size: .8rem; }
.companion-composer { display: grid; gap: 13px; padding: 17px 20px 20px; border-top: 1px solid var(--line); }
.companion-composer textarea { width: 100%; min-height: 78px; max-height: 180px; resize: vertical; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: #111714; line-height: 1.55; }
.companion-composer textarea::placeholder { color: #87928a; }
.composer-bottom { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.consent-option { display: flex; max-width: 430px; align-items: flex-start; gap: 9px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.consent-option input { width: 17px; height: 17px; flex: 0 0 17px; margin: 1px 0 0; accent-color: #d5a98b; }
.composer-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.composer-actions .button { min-height: 42px; padding: 9px 13px; font-size: .82rem; }
.companion-composer .button-primary { color: #211810; background: #e5b291; }
.companion-composer .button-primary:hover { background: #f0c4a4; }
.button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.companion-page-note { margin-top: 22px; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.history-setting-option { display: flex; align-items: flex-start; gap: 10px; margin-block: 18px; color: var(--text); line-height: 1.5; }
.history-setting-option input { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; accent-color: #d5a98b; }
.settings-delete-panel .button:disabled { cursor: not-allowed; opacity: .55; }
.safety-document { display: grid; gap: 0; max-width: 850px; border-top: 1px solid var(--line); }
.safety-section { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.safety-index { color: #ddb395; font-size: .76rem; font-weight: 800; letter-spacing: .08em; }
.safety-section h2 { margin: 0 0 9px; font-size: clamp(1.2rem, 2vw, 1.55rem); }
.safety-section p { max-width: 720px; margin: 0 0 10px; color: var(--muted); line-height: 1.75; }
.safety-section p:last-child { margin-bottom: 0; }
.safety-placeholder { max-width: 800px; margin-block: 28px; padding: 16px 18px; border: 1px solid rgba(232, 168, 135, .24); border-radius: 12px; color: #e6c2ac; background: rgba(232, 168, 135, .05); font-size: .84rem; line-height: 1.65; }
.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; }
@keyframes companion-drift { 0%, 100% { border-radius: 44% 56% 56% 44% / 48% 43% 57% 52%; transform: translateY(0) rotate(-3deg); } 50% { border-radius: 52% 48% 45% 55% / 43% 56% 44% 57%; transform: translateY(-8px) rotate(3deg); } }

@media (max-width: 760px) {
  .companion-hero { min-height: 0; grid-template-columns: 1fr; gap: 0; padding-block: 42px 38px; }
  .companion-hero-copy h1 { font-size: clamp(3rem, 12vw, 4.6rem); }
  .companion-orbit { width: min(88vw, 390px); margin-top: 4px; }
  .companion-orbit > p { bottom: 0; font-size: .57rem; }
  .companion-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .companion-card { min-height: 0; }
  .companion-workspace { grid-template-columns: 1fr; }
  .companion-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 17px; }
  .companion-section-label, .companion-controls .field-hint, .companion-privacy-note, .conversation-history, .safety-link { grid-column: 1 / -1; }
  .companion-messages { min-height: 280px; max-height: 45vh; padding: 16px; }
  .conversation-heading { padding-inline: 15px; }
  .conversation-heading > div:nth-child(2) span { max-width: 220px; line-height: 1.4; }
  .companion-status { margin-inline: 14px; }
  .companion-composer { padding-inline: 14px; }
  .composer-bottom { align-items: stretch; flex-direction: column; }
  .composer-actions { justify-content: flex-end; }
  .safety-section { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 390px) {
  .companion-card-grid { grid-template-columns: 1fr; }
  .companion-controls { grid-template-columns: 1fr; }
  .companion-controls .field-hint, .companion-privacy-note, .safety-link { grid-column: auto; }
  .composer-actions { width: 100%; }
  .composer-actions .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .companion-orb { animation: none; }
  .welcome-fallback-core { animation: none; }
}

/* Separate visual language for the authenticated account area. */
.welcome-continue { min-width: 190px; justify-content: center; }
.companion-home .button-row { margin-block: 30px 14px; }
.companion-safety-strip { grid-template-columns: 42px minmax(0, 1fr); }
.auth-brand-bar {
  display: flex;
  width: min(1120px, calc(100% - 40px));
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  margin-inline: auto;
  border-bottom: 1px solid var(--line);
}
.auth-brand-bar > a:last-child { color: var(--muted); font-size: .9rem; }
.auth-brand-bar > a:last-child:hover { color: var(--text); }

body[data-layout="app"] {
  color-scheme: light;
  --app-bg: #f4f7f3;
  --app-ink: #2b3933;
  --app-muted: #687970;
  --app-line: #dfe8e0;
  --app-blue: #527f70;
  color: var(--app-ink);
  background:
    radial-gradient(ellipse at 82% 0, rgba(193, 218, 198, .28), transparent 34rem),
    var(--app-bg);
}
.app-topbar {
  position: sticky;
  z-index: 8;
  top: 0;
  display: flex;
  height: 70px;
  align-items: center;
  justify-content: space-between;
  margin-left: 250px;
  padding-inline: clamp(22px, 5vw, 58px);
  border-bottom: 1px solid var(--app-line);
  background: rgba(250, 252, 249, .94);
  backdrop-filter: blur(16px);
}
.app-topbar .brand { color: var(--app-ink); }
.app-topbar .brand-mark { color: var(--app-blue); }
.app-account { display: flex; align-items: center; gap: 18px; color: var(--app-muted); font-size: .88rem; }
.app-logout { min-height: 42px; border: 1px solid var(--app-line); border-radius: 10px; padding: 9px 13px; color: var(--app-ink); background: #fff; cursor: pointer; }
.app-logout:hover { border-color: #a9c1b1; background: #f7faf6; }
.app-sidebar {
  position: fixed;
  z-index: 9;
  inset: 0 auto 0 0;
  display: flex;
  width: 250px;
  flex-direction: column;
  padding: 28px 17px 22px;
  border-right: 1px solid var(--app-line);
  background: #fbfcfa;
}
.app-sidebar-label { padding-inline: 12px; color: #81909d; font-size: .65rem; font-weight: 800; letter-spacing: .13em; }
.app-sidebar nav { display: grid; gap: 5px; }
.app-sidebar nav a { display: flex; min-height: 46px; align-items: center; gap: 12px; border-radius: 11px; padding: 10px 12px; color: #5c6d64; font-size: .9rem; transition: background .16s ease, color .16s ease; }
.app-nav-icon { width: 20px; color: #789083; text-align: center; }
.app-nav-short { display: none; }
.app-sidebar nav a:hover, .app-sidebar nav a[aria-current="page"] { color: #355f50; background: #eaf2e9; }
.app-sidebar nav a[aria-current="page"] .app-nav-icon { color: #477761; }
.app-sidebar-note { margin: auto 8px 0; border-top: 1px solid var(--app-line); padding: 17px 4px 0; color: #77838e; font-size: .72rem; line-height: 1.55; }
body[data-layout="app"] .page-shell {
  width: min(1220px, calc(100% - 310px));
  margin: 0 30px 0 280px;
  padding-block: 48px 88px;
}
body[data-layout="app"] .page-title > p:not(.eyebrow) { color: var(--app-muted); }
body[data-layout="app"] .page-title h1 { color: var(--app-ink); font-family: inherit; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 720; letter-spacing: -.06em; }
body[data-layout="app"] .page-title .eyebrow, body[data-layout="app"] .eyebrow { color: var(--app-blue); }
body[data-layout="app"] .text-warm { color: var(--app-blue); }
.app-dashboard { max-width: 1160px !important; }
.dashboard-welcome { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 64px; }
.dashboard-welcome h1 { margin-bottom: 10px; }
.dashboard-welcome > div:first-child > p:last-child { margin: 0; color: var(--app-muted); }
.dashboard-status { max-width: 360px; border: 1px solid #dce8dd; border-radius: 12px; padding: 13px 16px; color: #53675b; background: #fbfdf9; font-size: .83rem; line-height: 1.5; }
.dashboard-status[data-kind="success"] { border-color: #c7dfcb; color: #3e6a4e; background: #f1f8f0; }
.dashboard-status[data-kind="error"] { border-color: #ead5c9; color: #845a49; background: #fcf5ef; }
.dashboard-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.dashboard-section-heading h2 { margin: 0; color: var(--app-ink); font-size: clamp(1.65rem, 3vw, 2.35rem); }
.dashboard-section-heading > p { max-width: 390px; margin: 0; color: var(--app-muted); font-size: .85rem; line-height: 1.55; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.dashboard-card { display: grid; min-height: 252px; grid-template-rows: auto 1fr auto auto; gap: 14px; padding: 22px; border: 1px solid var(--app-line); border-radius: 16px; background: #fffefa; box-shadow: 0 7px 22px rgba(52, 74, 57, .045); }
.dashboard-card-feature { border-color: #d2e2d2; background: linear-gradient(140deg, #fffefa, #f0f6ee); }
.dashboard-card-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #507b68; background: #e9f1e7; font-size: 1.2rem; }
.dashboard-card-label { margin: 0 0 7px; color: #7d9182; font-size: .63rem; font-weight: 800; letter-spacing: .12em; }
.dashboard-card h3 { margin-bottom: 8px; color: var(--app-ink); font-size: 1.18rem; }
.dashboard-card p:not(.dashboard-card-label) { max-width: 440px; margin: 0; color: var(--app-muted); font-size: .86rem; line-height: 1.6; }
.dashboard-card .button { justify-self: start; }
.dashboard-card-link { justify-self: start; color: #4f7d68; font-size: .88rem; font-weight: 700; }
.dashboard-card .button-primary { color: #fff; background: #5f8975; }
.dashboard-card .button-primary:hover { background: #4e7865; }
.dashboard-card-state { color: #827354; font-size: .76rem; line-height: 1.45; }
.dashboard-card [aria-disabled="true"] { pointer-events: none; color: #8793a0; }
.dashboard-card [aria-disabled="true"].button { opacity: .55; }
.dashboard-notice { margin-top: 45px; border: 1px dashed #d1ded1; border-radius: 16px; padding: clamp(20px, 4vw, 30px); background: rgba(250, 252, 247, .78); }
.dashboard-notice h2 { margin-bottom: 10px; color: var(--app-ink); font-size: clamp(1.3rem, 2.7vw, 1.8rem); }
.dashboard-notice > p:last-child { max-width: 850px; margin-bottom: 0; color: var(--app-muted); font-size: .88rem; line-height: 1.65; }
.app-footer { margin-left: 250px; color: #687970; }
.app-footer .footer-inner { border-color: var(--app-line); }
body[data-layout="app"] .panel, body[data-layout="app"] .companion-controls, body[data-layout="app"] .conversation-panel { border-color: var(--app-line); background: #fffefa; }
body[data-layout="app"] .button-primary { color: #fff; background: #5f8975; }
body[data-layout="app"] .button-primary:hover { background: #4e7865; }
body[data-layout="app"] .button-secondary { border-color: var(--app-line); color: var(--app-ink); background: #f8faf6; }
body[data-layout="app"] .button-secondary:hover { border-color: #c8d9c9; background: #eef4eb; }
body[data-layout="app"] .companion-controls .field { color: var(--app-ink); }
body[data-layout="app"] .companion-controls select,
body[data-layout="app"] .field input,
body[data-layout="app"] .field textarea,
body[data-layout="app"] .field select { border-color: var(--app-line); color: var(--app-ink); background: #fbfcf9; }
body[data-layout="app"] .conversation-message { border-color: var(--app-line); color: var(--app-ink); background: #f7f9f5; }
body[data-layout="app"] .conversation-user { border-color: #d8e6d8; background: #edf4eb; }
body[data-layout="app"] .status-box { border-color: var(--app-line); color: var(--app-muted); background: #f8faf6; }
body[data-layout="app"] .status-box[data-kind="error"] { border-color: #ead5c9; color: #845a49; }
body[data-layout="app"] .status-box[data-kind="success"] { border-color: #c7dfcb; color: #3e6a4e; }
body[data-layout="app"] .page-title .lead { color: var(--app-muted); }
body[data-layout="app"] .conversation-heading strong, body[data-layout="app"] .conversation-heading span { color: var(--app-ink); }

@media (max-width: 820px) {
  .app-topbar { height: 62px; margin-left: 0; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .app-account { min-width: 0; }
  .app-account > span { overflow: hidden; max-width: min(38vw, 180px); text-overflow: ellipsis; white-space: nowrap; }
  .app-sidebar { inset: auto max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); width: auto; padding: 7px; border: 1px solid #dce7dc; border-radius: 18px; background: rgba(251, 252, 249, .97); box-shadow: 0 8px 28px rgba(52, 74, 57, .12); }
  .app-sidebar-label, .app-sidebar-note { display: none; }
  .app-sidebar nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .app-sidebar nav a { min-width: 0; min-height: 58px; flex-direction: column; justify-content: center; gap: 3px; padding: 5px 2px; color: #607267; font-size: .68rem; line-height: 1.15; }
  .app-nav-icon { width: auto; font-size: 1.08rem; line-height: 1; }
  .app-nav-full { display: none; }
  .app-nav-short { display: inline; }
  .app-sidebar nav a[aria-current="page"] { color: #355f50; background: #eaf2e9; }
  body[data-layout="app"] .page-shell { width: calc(100% - 32px); margin-inline: auto; padding-block: 30px max(112px, calc(100px + env(safe-area-inset-bottom))); }
  .app-footer { margin-left: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .auth-brand-bar { min-height: 64px; }
  .auth-brand-bar > a:last-child { font-size: .78rem; }
  .dashboard-welcome, .dashboard-section-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-welcome { gap: 18px; margin-bottom: 36px; }
  .dashboard-status { max-width: none; width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-card { min-height: 0; grid-template-rows: auto auto auto auto; gap: 13px; padding: 19px; }
  .app-account { gap: 9px; font-size: .75rem; }
  .app-logout { min-height: 42px; padding: 8px 10px; }
  .dashboard-section-heading { gap: 10px; margin-bottom: 18px; }
  .dashboard-section-heading > p { font-size: .88rem; }
  .dashboard-notice { margin-top: 28px; }
}
@media (max-width: 380px) {
  .app-topbar { padding-inline: 12px; }
  .app-account > span { max-width: 30vw; }
  .app-logout { padding-inline: 8px; }
  .app-sidebar { inset-inline: 6px; padding: 5px; }
  .app-sidebar nav a { font-size: .62rem; }
}