/* hongkids-ux-source(2026-10-12) main.css 를 옮김 — 변수는 --v2-* 로 이름을 바꿔 기존 app.css 와 겹치지 않게,
   요소 기본 규칙(body·h1·button 등)은 빼고 아래 .v2 범위로 다시 정의. */
/* Mindinside Kids / calm, tactile, tablet-first UI.
   No external font files, image requests, CSS frameworks, or tracking. */
:root {
  --v2-canvas: #f7f8f3;
  --v2-surface: #ffffff;
  --v2-ink: #293c32;
  --v2-muted: #657267;
  --v2-brand: #365e4d;
  --v2-brand-hover: #2b4d3e;
  --v2-sage: #e6ecdf;
  --v2-sage-deep: #526c4e;
  --v2-peach: #f5e8dc;
  --v2-peach-ink: #795236;
  --v2-lilac: #eee9f2;
  --v2-lilac-ink: #695473;
  --v2-sky: #e5eef0;
  --v2-sky-ink: #42656d;
  --v2-butter: #f3eedb;
  --v2-butter-ink: #77622e;
  --v2-line: #dfe5da;
  --v2-quiet: #edf0e9;
  --v2-danger: #984b42;
  --v2-radius-sm: 12px;
  --v2-radius-md: 20px;
  --v2-radius-lg: 28px;
  --v2-shadow: 0 9px 30px rgba(47,66,49,.035);
  --v2-sidebar: 226px;
  --v2-font: "Pretendard", "NanumSquareRound", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
}
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.skip-link { position: fixed; z-index: 500; left: 16px; top: -70px; padding: 12px 20px; background: var(--v2-brand); color: white; border-radius: 12px; }
.skip-link:focus { top: 10px; }
.eyebrow { display: block; color: var(--v2-muted); font-size: 12px; letter-spacing: .025em; font-weight: 800; margin-bottom: 8px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 800; white-space: nowrap; line-height: 1.5; }
.sage { background: var(--v2-sage); color: var(--v2-sage-deep); }
.peach { background: var(--v2-peach); color: var(--v2-peach-ink); }
.lilac { background: var(--v2-lilac); color: var(--v2-lilac-ink); }
.sky { background: var(--v2-sky); color: var(--v2-sky-ink); }
.butter { background: var(--v2-butter); color: var(--v2-butter-ink); }
.neutral { background: var(--v2-quiet); color: var(--v2-muted); }
.white { background: rgba(255,255,255,.94); color: var(--v2-ink); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 20px; font-weight: 800; border: 1px solid transparent; border-radius: 14px; font-size: 15px; line-height: 1.5; transition: background .15s, transform .15s; }
.button.primary { background: var(--v2-brand); color: #fff; }
.button.primary:hover:not(:disabled) { background: var(--v2-brand-hover); }
.button.secondary { background: #fff; color: var(--v2-brand); border-color: #cfd9cc; }
.button.secondary:hover:not(:disabled) { background: #f0f4eb; }
.button.large { min-height: 60px; padding: 16px 25px; border-radius: 16px; font-size: 18px; }
.button.small { min-height: 44px; padding: 10px 15px; font-size: 13px; border-radius: 12px; }
.button.full { width: 100%; }
.button.danger { background: var(--v2-danger); color: white; }
.button.danger-outline { border-color: #dabfba; color: #8c443b; background: #fff; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; }
.button-row.center { justify-content: center; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 4px; color: var(--v2-brand); font-size: 14px; font-weight: 800; border-radius: 8px; }
.text-button:hover { color: #253c2e; }
.text-button.small { font-size: 12px; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; min-width: 44px; border-radius: 12px; color: var(--v2-muted); }
.icon-button:hover { background: var(--v2-quiet); }
.quiet-note { color: var(--v2-muted); font-size: 12px; line-height: 1.8; margin-top: 16px; }
.panel { border: 1px solid var(--v2-line); border-radius: var(--v2-radius-md); background: #fff; padding: 24px; }
.panel-description { color: var(--v2-muted); font-size: 13px; margin-top: 6px; line-height: 1.8; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-heading .eyebrow { margin-bottom: 4px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.page-heading p { color: var(--v2-muted); margin-top: 10px; font-size: 15px; }
/* Shell */
.sidebar { position: fixed; z-index: 30; top: 0; left: 0; bottom: 0; width: var(--v2-sidebar); padding: 29px 18px 18px; display: flex; flex-direction: column; background: #f2f4ed; border-right: 1px solid var(--v2-line); }
.brand { display: flex; align-items: center; gap: 10px; text-align: left; padding: 0 1px; min-height: 50px; flex: 0 0 auto; }
.brand > svg { flex: 0 0 auto; }
.brand > span { font-size: 14px; font-weight: 800; line-height: 1.6; letter-spacing: -.04em; }
.brand small { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--v2-brand); }
.brand em { display: none; }
.sidebar-divider { height: 1px; background: var(--v2-line); margin: 30px 6px 29px; }
.nav-label { font-size: 11px; font-weight: 800; color: var(--v2-muted); padding-left: 13px; margin-bottom: 13px; }
.primary-nav { display: grid; gap: 9px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 15px; border-radius: 14px; color: #61715f; text-align: left; font-size: 15px; font-weight: 800; }
.nav-item.active { background: #e0e8d8; color: #375b46; }
.nav-item:hover { background: #e7edde; }
.nav-chevron { margin-left: auto; opacity: 0; }
.nav-item.active .nav-chevron { opacity: 1; }
.sidebar-bottom { margin-top: auto; }
.sidebar-garden { padding: 27px 16px; color: #5c7650; }
.sidebar-garden > svg { transform: rotate(-8deg); margin: 4px 0 14px; }
.sidebar-garden p { font-size: 12px; line-height: 1.9; color: #6b7865; }
.sidebar-garden strong { font-weight: 700; color: #586e50; }
.parent-entry { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--v2-line); min-height: 58px; width: 100%; padding: 15px 12px; color: #5d6c5d; font-size: 14px; font-weight: 800; }
.parent-entry svg:last-child { margin-left: auto; }
.parent-entry.active { color: var(--v2-brand); }
.sidebar-version { font: 9px/1.5 system-ui,sans-serif; letter-spacing: .055em; color: #6d7969; text-align: center; margin: 15px 0 2px; }
.shell-body { margin-left: var(--v2-sidebar); min-width: 0; }
.topbar { min-height: 78px; border-bottom: 1px solid var(--v2-line); padding: 13px 38px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: rgba(250,251,246,.97); }
.topbar-note { display: flex; align-items: center; gap: 8px; color: var(--v2-muted); font-size: 12px; }
.status-dot, .tiny-dot { width: 6px; height: 6px; border-radius: 100%; background: #6f8a5d; display: inline-block; flex-shrink: 0; }
.topbar-actions { display: flex; gap: 15px; align-items: center; }
.family-button { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; color: #536551; }
.family-avatar { height: 33px; width: 33px; border-radius: 50%; background: #ecebdf; display: flex; align-items: center; justify-content: center; }
.main-content { max-width: 1330px; padding: 32px 38px 30px; margin: 0 auto; min-height: calc(100dvh - 155px); }
.main-content:focus { outline: none; }
.site-footer { max-width: 1330px; margin: 0 auto; padding: 24px 38px; display: flex; justify-content: space-between; gap: 12px; color: var(--v2-muted); font-size: 10px; }
.mobile-brand, .mobile-nav { display: none; }
/* Child home */
.hello-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.hello-row .eyebrow { margin: 0; }
.soft-label { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-muted); font-size: 11px; }
.home-hero { background: #edf1e7; border: 1px solid #e1e7d8; border-radius: 28px; padding: 32px 30px 29px 32px; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 10px; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .pill { font-size: 11px; padding: 5px 11px; background: #dfe8d6; color: #436143; margin-bottom: 18px; }
.hero-copy h1 { font-size: clamp(35px,3.15vw,46px); line-height: 1.32; letter-spacing: -.065em; color: #2c4735; }
.hero-copy p { font-size: 14px; line-height: 1.85; margin: 16px 0 23px; color: #576e56; }
.hero-copy .button { min-height: 56px; font-size: 16px; padding: 13px 24px; gap: 30px; }
.hero-footnote { display: flex; align-items: center; gap: 5px; font-size: 10px; margin-top: 12px; color: #62745c; }
.hero-illustration { position: relative; padding: 27px 0 18px; transform: translateX(8px); }
.scene-svg { display: block; width: 100%; height: auto; }
.hero-illustration > .scene-svg { border-radius: 100px 100px 22px 22px; }
.floating-note { position: absolute; display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: rgba(255,255,255,.95); border: 1px solid #e2e9dc; box-shadow: 0 8px 22px rgba(64,84,58,.05); border-radius: 15px 15px 15px 4px; left: 7%; top: 1%; font-size: 12px; font-weight: 800; transform: rotate(-3deg); color: #60715a; }
.hero-art-label { display: block; text-align: center; color: #6a7a62; margin: 12px 0 -16px; font-size: 10px; }
.mood-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 23px 0 28px; padding: 17px 22px; background: #fff; border: 1px solid var(--v2-line); border-radius: 18px; }
.mood-row h2 { font-size: 16px; }
.mood-row p { margin-top: 3px; font-size: 11px; color: var(--v2-muted); }
.mood-options { display: flex; gap: 8px; flex-wrap: wrap; }
.mood-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 49px; padding: 11px 15px; border: 1px solid #e0e5da; background: #fff; border-radius: 14px; font-size: 13px; font-weight: 700; color: #62715e; }
.mood-chip.selected { background: #edf1e3; border-color: #7f946c; color: #405f38; }
.mood-chip:hover { border-color: #7f946c; }
.recommend-section .section-heading { margin-bottom: 16px; }
.recommend-section h2 { font-size: 22px; }
.scene-grid { display: grid; gap: 18px; }
.home-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.explore-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.scene-card { padding: 0; display: flex; flex-direction: column; border: 1px solid var(--v2-line); background: #fff; border-radius: 19px; overflow: hidden; text-align: left; box-shadow: var(--v2-shadow); transition: transform .18s, box-shadow .18s, border-color .18s; min-width: 0; }
.scene-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(53,72,46,.07); border-color: #9eb08f; }
.scene-card-art { position: relative; padding: 0; width: 100%; }
.scene-card-art .scene-svg { border-radius: 0; }
.scene-card-art > svg > rect:first-child { rx: 0; }
.scene-card-time { position: absolute; top: 11px; right: 11px; background: rgba(255,255,255,.95); border-radius: 20px; padding: 3px 7px; display: flex; align-items: center; gap: 4px; font-size: 9px; color: #52654e; }
.scene-card-copy { padding: 18px 16px 21px; position: relative; flex: 1; width: 100%; }
.card-meta { display: flex; justify-content: space-between; align-items: center; color: #697566; font-size: 10px; gap: 4px; margin-bottom: 10px; }
.skill-label { display: flex; gap: 4px; align-items: center; font-weight: 800; color: #5a7253; }
.scene-card h3 { font-size: 17px; margin-bottom: 5px; letter-spacing: -.04em; }
.scene-card p { color: var(--v2-muted); font-size: 11px; line-height: 1.65; padding-right: 9px; }
.card-arrow { display: none; }
.kind-note { display: flex; align-items: center; gap: 12px; padding: 19px 18px; margin-top: 24px; border-radius: 14px; background: #f0ede6; color: #70634f; }
.kind-note p { font-size: 11px; line-height: 1.85; }
.kind-note strong { font-weight: 800; }
/* Explore */
.explore-controls { display: flex; gap: 15px; margin-bottom: 20px; }
.search-box { flex: 1; display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #ccd6c6; padding: 6px 8px 6px 15px; border-radius: 15px; }
.search-box input { border: 0; background: transparent; padding: 9px 2px; min-height: 40px; font-size: 14px; min-width: 0; }
.search-box input:focus { outline: none; }
.search-box:focus-within { outline: 3px solid #456952; outline-offset: 3px; }
.search-box > .icon { color: #677b5f; }
.place-select { width: 155px; }
.place-select select { height: 100%; border-color: #ccd6c6; font-size: 14px; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 45px; padding: 9px 13px; border: 1px solid #dde4d6; border-radius: 12px; background: #fff; color: #62705e; font-size: 12px; font-weight: 700; }
.filter-chip.selected { background: var(--v2-brand); border-color: var(--v2-brand); color: #fff; }
.result-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 12px; color: var(--v2-muted); }
.empty-state { text-align: center; padding: 60px 22px; background: #fff; border: 1px dashed #becbb4; border-radius: 24px; }
.empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 24px; background: var(--v2-sage); color: #608154; margin-bottom: 21px; }
.empty-state h3 { font-size: 23px; }
.empty-state p { color: var(--v2-muted); font-size: 14px; max-width: 460px; margin: 11px auto 23px; }
/* Intro */
.back-link { margin-bottom: 24px; }
.intro-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 38px; align-items: center; padding: 10px 0 30px; }
.scene-big { border-radius: 26px; overflow: hidden; border: 1px solid var(--v2-line); }
.character-intro { display: flex; align-items: center; gap: 12px; padding: 18px 15px; }
.character-intro strong { font-size: 18px; }
.character-intro p { font-size: 12px; color: var(--v2-muted); margin-top: 3px; }
.character-art { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.character-art > svg, .character-art > img { width: 100%; height: 100%; object-fit: contain; }
.avatar-md { width: 66px; height: 83px; }
.avatar-lg { width: 105px; height: 136px; }
.intro-copy .pill { margin-bottom: 16px; }
.intro-copy h1 { font-size: 34px; }
.intro-description { font-size: 16px; color: var(--v2-muted); margin-top: 16px; }
.speech-preview { background: #fff; border: 1px solid var(--v2-line); border-radius: 18px 18px 18px 4px; padding: 20px; font-size: 19px; font-weight: 700; line-height: 1.7; margin: 21px 0 26px; }
.support-picker { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; }
.support-picker legend { font-size: 14px; margin-bottom: 12px; }
.support-option { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 15px; border: 1px solid var(--v2-line); border-radius: 14px; cursor: pointer; background: #fff; }
.support-option.selected { background: #edf2e6; border-color: #819773; }
.support-option strong { display: block; font-size: 15px; }
.support-option small { display: block; color: var(--v2-muted); font-size: 11px; margin-top: 2px; }
/* Roleplay */
.play-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.play-title { font-size: 16px; font-weight: 800; text-align: center; }
.play-grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 24px; align-items: start; }
.play-stage { min-width: 0; }
.scene-stage { overflow: hidden; border-radius: 22px; position: relative; }
.scene-location { position: absolute; top: 12px; left: 12px; }
.friend-panel { display: flex; align-items: start; gap: 11px; margin-top: 18px; }
.friend-speech { background: #fff; border: 1px solid #dce5d5; border-radius: 21px 21px 21px 5px; padding: 13px 17px 20px; flex: 1; min-width: 0; }
.friend-name { display: flex; align-items: center; gap: 7px; }
.friend-name strong { font-size: 14px; }
.friend-name > span { font-size: 10px; color: var(--v2-muted); }
.friend-name .icon-button { margin-left: auto; }
.friend-speech > p { font-size: 22px; line-height: 1.65; letter-spacing: -.03em; font-weight: 700; }
.session-footnote { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--v2-muted); font-size: 11px; margin: 20px 0 0; }
.turn-dots { display: flex; gap: 6px; }
.turn-dots i { width: 6px; height: 6px; background: #bfc9b6; border-radius: 50%; }
.turn-dots .filled { background: #506f44; }
.response-panel { background: #fff; border: 1px solid var(--v2-line); border-radius: 23px; padding: 24px; min-height: 406px; box-shadow: var(--v2-shadow); }
.response-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 16px; }
.response-heading h2 { font-size: 19px; }
.response-heading .text-button { white-space: nowrap; }
.input-tabs { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 3px; padding: 4px; margin-bottom: 19px; border-radius: 12px; background: #f1f4ee; }
.input-tabs button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 46px; padding: 8px 4px; font-size: 12px; border-radius: 9px; color: #61705a; }
.input-tabs button.selected { color: var(--v2-brand); background: #fff; box-shadow: 0 2px 7px #d9e0d266; font-weight: 800; }
.reply-options { display: flex; flex-direction: column; gap: 12px; }
.reply-choice { display: flex; align-items: center; gap: 12px; min-height: 73px; background: #f9faf6; border: 1px solid #d9e2d1; border-radius: 15px; padding: 16px 14px; color: #3d5839; text-align: left; font-size: 17px; line-height: 1.65; font-weight: 700; }
.reply-choice:hover:not(:disabled) { background: #edf3e4; border-color: #8ca279; }
.reply-choice > span:nth-child(2) { flex: 1; word-break: keep-all; overflow-wrap: anywhere; }
.choice-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 25px; height: 25px; background: #eaf0e3; border-radius: 8px; font: 700 11px/1 system-ui,sans-serif; color: #617b50; }
.reply-choice > svg { color: #68875a; }
.input-reassurance { color: var(--v2-muted); font-size: 11px; line-height: 1.7; text-align: center; margin-top: 20px; }
.message-form textarea { font-size: 19px; padding: 15px; min-height: 152px; background: #fcfdf9; border-color: #bccbb1; }
.message-form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.message-form-bottom > span { font-size: 10px; color: var(--v2-muted); }
.hint-card { display: flex; align-items: start; gap: 9px; padding: 13px; border-radius: 12px; background: #f2eedf; color: #74613c; font-size: 13px; margin-bottom: 17px; line-height: 1.7; }
.hint-card > svg { margin-top: 3px; }
.waiting-card, .connection-error, .turn-complete { min-height: 360px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 18px; padding: 22px 0; }
.waiting-card h3, .connection-error h3, .turn-complete h3 { font-size: 23px; }
.waiting-card p, .connection-error p, .turn-complete p { color: var(--v2-muted); font-size: 14px; line-height: 1.85; }
.turn-complete > svg { color: #698550; margin-bottom: 5px; }
.turn-complete .button { margin-top: 5px; }
.thinking-dots { display: inline-flex; align-items: center; gap: 5px; }
.thinking-dots i { width: 7px; height: 7px; border-radius: 50%; background: #80966b; animation: thinking 1.3s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .14s; }
.thinking-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes thinking { 0%,70%,100% { opacity: .4; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.inline-wait { display: flex; gap: 10px; align-items: center; color: #5c7650; font-size: 11px; margin-top: 20px; min-height: 36px; }
.conversation-history { margin-top: 15px; color: var(--v2-muted); font-size: 12px; }
.conversation-history summary { display: flex; justify-content: space-between; padding: 10px; min-height: 44px; cursor: pointer; }
.conversation-history ol { padding: 7px 12px; list-style: none; margin: 0; background: #eff2e9; border-radius: 12px; }
.conversation-history li { display: flex; gap: 12px; padding: 9px 0; font-size: 12px; }
.conversation-history li strong { min-width: 24px; }
.conversation-history li span { overflow-wrap: anywhere; }
.reality-link { display: flex; gap: 7px; justify-content: center; align-items: center; min-height: 48px; margin: 27px auto 0; color: #5c7060; font-size: 12px; border-radius: 10px; text-decoration: underline; text-underline-offset: 4px; }
.demo-disclosure { font-size: 10px; color: var(--v2-muted); text-align: center; margin-top: 8px; }
/* Finishing, footprints, child safety */
.completion { max-width: 710px; margin: 0 auto; text-align: center; padding: 5px 0 25px; }
.completion-art { position: relative; width: 170px; margin: 0 auto 20px; }
.completion-character { width: 116px; height: 144px; }
.completion-sprout { position: absolute; right: 0; top: 25px; width: 57px; height: 57px; border-radius: 50%; background: #e3ead8; display: flex; align-items: center; justify-content: center; color: #63804f; transform: rotate(12deg); }
.completion h1 { margin-top: 15px; font-size: 38px; }
.completion-lead { margin-top: 9px; font-size: 16px; color: var(--v2-muted); }
.attempt-summary { display: flex; gap: 14px; align-items: center; text-align: left; padding: 20px 24px; max-width: 470px; margin: 27px auto; border: 1px solid var(--v2-line); background: #fff; border-radius: 18px; }
.attempt-summary > span { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--v2-sage); color: var(--v2-brand); flex-shrink: 0; }
.attempt-summary strong { font-size: 15px; }
.attempt-summary p { font-size: 12px; color: var(--v2-muted); margin-top: 4px; }
.reflection { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 25px; }
.reflection legend { margin-bottom: 14px; font-size: 15px; text-align: center; }
.life-mission { display: flex; align-items: center; text-align: left; gap: 18px; padding: 24px; margin-bottom: 30px; border-radius: 20px; background: #ecefdc; }
.mission-icon { flex-shrink: 0; color: #74804f; }
.life-mission .eyebrow { color: #687546; font-size: 11px; margin-bottom: 6px; }
.life-mission h3 { font-size: 17px; color: #4b5b36; }
.life-mission p { font-size: 11px; color: #64754b; margin-top: 7px; }
.footprint-garden { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.footprint-card { text-align: center; padding: 32px 20px; border: 1px solid rgba(75,95,65,.1); border-radius: 24px; position: relative; }
.footprint-number { position: absolute; top: 15px; left: 18px; font: 12px/1 system-ui; }
.footprint-card > svg { margin: 12px 0 20px; }
.footprint-card h3 { font-size: 18px; }
.footprint-card p { margin: 10px 0 8px; font-size: 11px; }
.footprint-card > span:last-child { font-size: 11px; }
.safety-child { max-width: 720px; margin: 20px auto 40px; text-align: center; }
.safety-symbol { display: flex; align-items: center; justify-content: center; width: 89px; height: 89px; border-radius: 29px; margin: 0 auto 25px; color: #577957; background: #e4ecdf; }
.safety-child .pill { margin-bottom: 20px; }
.safety-child h1 { font-size: 35px; line-height: 1.5; }
.safety-child > p { font-size: 17px; margin-top: 20px; color: #5d705b; line-height: 1.9; }
.safe-script { margin: 26px auto; padding: 23px; border: 1px solid #cedac4; border-radius: 22px; background: #fff; max-width: 490px; color: #49673e; font-weight: 700; font-size: 24px; line-height: 1.7; }
.safety-child > p.quiet-note { font-size: 12px; }
/* Parent space */
.parent-shell .main-content { max-width: 1430px; }
.parent-shell .page-heading h1 { font-size: 31px; }
.parent-shell .page-heading p { font-size: 13px; }
.parent-tabs { display: flex; gap: 8px; padding-bottom: 15px; margin-bottom: 24px; border-bottom: 1px solid var(--v2-line); overflow-x: auto; }
.parent-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; min-height: 46px; flex: 0 0 auto; border-radius: 11px; font-size: 13px; font-weight: 700; color: #62705e; }
.parent-tabs button.selected { background: #e6edde; color: #3f653c; }
.example-notice { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 8px 13px; border-radius: 12px; margin-bottom: 23px; background: #edf1e6; color: #5f7153; font-size: 11px; }
.example-notice.active { background: #f7eddc; color: #785a29; }
.example-notice > div { display: flex; align-items: center; gap: 10px; }
.example-notice .text-button { white-space: nowrap; font-size: 11px; }
.parent-stat-grid { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 16px; margin-bottom: 23px; }
.stat-card { background: #fff; border: 1px solid var(--v2-line); padding: 23px 22px; border-radius: 18px; }
.stat-card > span { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #5d7456; }
.stat-card > strong { display: block; font: 600 37px/1.4 var(--v2-font); letter-spacing: -.06em; margin: 12px 0 5px; }
.stat-card > strong > small { font-size: 15px; font-weight: 400; color: var(--v2-muted); letter-spacing: 0; margin-left: 6px; }
.stat-card p { font-size: 10px; color: var(--v2-muted); }
.stat-card.calm-stat { background: #eef0e3; border-color: #e0e5d3; }
.stat-card > .stat-words { font-size: 22px; line-height: 1.55; margin-top: 10px; margin-bottom: 8px; letter-spacing: -.04em; }
.parent-main-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(245px,1fr); gap: 22px; align-items: stretch; }
.parent-main-grid .section-heading { margin-bottom: 4px; }
.parent-main-grid h2 { font-size: 21px; }
.parent-aside { display: grid; gap: 20px; align-content: stretch; }
.coaching-card { background: #ece9ef; border: 1px solid #e1dce7; border-radius: 20px; padding: 22px 22px 15px; position: relative; }
.coaching-card .eyebrow { color: #705e7d; }
.quote-mark { color: #baaac6; font: 80px/.6 Georgia,serif; margin-top: 25px; height: 38px; }
.coaching-card h3 { font-size: 21px; color: #61526f; line-height: 1.6; margin-bottom: 13px; }
.coaching-card p { font-size: 12px; line-height: 1.8; color: #70637b; }
.coaching-card .text-button { font-size: 12px; color: #675570; margin-top: 10px; }
.next-step-card { background: #fff; border: 1px solid var(--v2-line); border-radius: 20px; padding: 23px 22px; }
.small-icon { width: 47px; height: 47px; border-radius: 14px; background: #edf1de; color: #6c8050; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.next-step-card h3 { font-size: 17px; margin-bottom: 9px; }
.next-step-card p { font-size: 12px; color: var(--v2-muted); line-height: 1.85; margin-bottom: 17px; }
.next-step-card small { display: block; font-size: 9px; color: var(--v2-muted); margin-top: 10px; }
.skill-evidence { margin-top: 26px; }
.skill-evidence-row { display: flex; align-items: center; gap: 11px; min-height: 73px; border-bottom: 1px solid #edf0e7; }
.skill-evidence-row:last-child { border-bottom: 0; }
.evidence-icon { width: 37px; height: 37px; border-radius: 12px; background: #edf1e5; color: #60794d; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.evidence-icon.boundary { background: #eee8f2; color: #826a95; }
.evidence-icon.repair { background: #e7eef1; color: #648795; }
.evidence-icon.negotiate { background: #f4e8dc; color: #a57a51; }
.evidence-icon.help { background: #eeefde; color: #7e8353; }
.skill-evidence-label { flex: 1; min-width: 0; }
.skill-evidence-label strong { display: block; font-size: 13px; }
.skill-evidence-label > span { color: var(--v2-muted); font-size: 9px; line-height: 1.6; }
.evidence-bar { width: 25%; height: 9px; display: flex; overflow: hidden; border-radius: 10px; background: #f1f3ed; gap: 2px; }
.evidence-bar .segment { height: 100%; }
.segment.sage, .chart-legend i.sage { background: #92aa79; }
.segment.sky, .chart-legend i.sky { background: #a5bdc6; }
.segment.lilac, .chart-legend i.lilac { background: #b8a4c5; }
.segment.peach, .chart-legend i.peach { background: #d6af90; }
.segment.neutral, .chart-legend i.neutral { background: #c6cbc0; }
.no-data-bar { width: 100%; background: repeating-linear-gradient(90deg,#e2e6dc 0,#e2e6dc 4px,transparent 4px,transparent 8px); }
.evidence-n { text-align: right; font: 600 16px/1.2 var(--v2-font); min-width: 38px; }
.evidence-n small { display: block; color: var(--v2-muted); font-size: 8px; font-weight: 400; margin-top: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 9px 12px; font-size: 9px; color: var(--v2-muted); margin: 22px 0 18px; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 2px; }
.measurement-note { display: flex; gap: 9px; align-items: flex-start; padding: 13px; border: 1px dashed #ccd5c3; border-radius: 12px; background: #f8faf3; color: #6c775f; }
.measurement-note > svg { margin-top: 2px; }
.measurement-note p { font-size: 10px; line-height: 1.9; }
.latest-session { margin-top: 25px; }
.latest-session .section-heading { margin-bottom: 10px; }
.latest-session .section-heading h2 { font-size: 21px; }
.latest-session-content { display: flex; align-items: center; gap: 17px; padding-top: 10px; }
.large-skill { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: #edf1e5; color: var(--v2-brand); flex-shrink: 0; }
.latest-session-content > div { flex: 1; }
.latest-session-content h3 { font-size: 16px; }
.latest-session-content p { font-size: 11px; color: var(--v2-muted); margin-top: 5px; }
.latest-session-content .pill { font-size: 9px; }
.source-note { margin-top: 23px; color: var(--v2-muted); font-size: 10px; line-height: 1.9; }
.source-note a { display: inline-flex; align-items: center; gap: 4px; }
.observation-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 28px 0 24px; }
.observation-intro h2 { font-size: 21px; }
.observation-intro p { color: var(--v2-muted); font-size: 12px; margin-top: 7px; }
.observation-intro .button { white-space: nowrap; }
.observation-filters { display: flex; align-items: end; gap: 16px; padding: 18px 20px; margin-bottom: 21px; background: #eff2e9; border-radius: 15px; }
.observation-filters label { color: #5d6f53; font-size: 11px; font-weight: 700; width: 175px; }
.observation-filters select { margin-top: 7px; font-size: 13px; min-height: 46px; padding: 10px 13px; }
.filtered-count { font-size: 11px; color: var(--v2-muted); margin-left: auto; padding-bottom: 11px; }
.observation-list { display: flex; flex-direction: column; gap: 13px; }
.observation-item { display: flex; align-items: flex-start; gap: 20px; padding: 23px; background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; }
.observation-date { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--v2-muted); white-space: nowrap; padding-top: 5px; }
.observation-body { flex: 1; min-width: 0; }
.observation-meta { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.observation-meta > strong { font-size: 14px; }
.observation-meta > span:not(.pill) { font-size: 10px; color: var(--v2-muted); }
.observation-meta .pill { font-size: 10px; }
.observation-body > p { font-size: 14px; margin: 12px 0 9px; line-height: 1.8; }
.source-label { font-size: 10px; color: #6e7966; }
.bottom-note { margin-top: 24px; }
.bottom-note p { font-size: 12px; }
.understand-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 35px; margin-bottom: 23px; background: #edf1e5; border: 1px solid #dfe7d3; border-radius: 24px; }
.understand-hero h2 { font-size: 31px; line-height: 1.5; margin-top: 16px; color: #3d5d39; }
.understand-hero p { font-size: 13px; color: #607252; margin-top: 13px; line-height: 1.9; }
.context-orbit { position: relative; flex-shrink: 0; width: 265px; height: 230px; }
.orbit-center { position: absolute; left: 80px; top: 65px; display: flex; align-items: center; justify-content: center; width: 105px; height: 105px; background: #739263; color: #fff; border-radius: 35px; font-size: 21px; font-weight: 700; line-height: 1.5; text-align: center; }
.orbit-item { position: absolute; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: #fffdf4; color: #62784f; border-radius: 24px; font-size: 15px; }
.orbit-item.a { top: 2px; left: 30px; transform: rotate(-10deg); }
.orbit-item.b { top: 15px; right: 6px; transform: rotate(8deg); }
.orbit-item.c { bottom: 0; left: 24px; transform: rotate(8deg); }
.orbit-item.d { bottom: 8px; right: 12px; transform: rotate(-12deg); }
.hypothesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.hypothesis-card { padding: 26px; background: #fff; border: 1px solid var(--v2-line); border-radius: 20px; position: relative; }
.hypothesis-icon { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; background: #edf1e5; border-radius: 15px; color: #658052; margin-bottom: 19px; }
.hypothesis-card .eyebrow { font-size: 10px; }
.hypothesis-card h3 { font-size: 19px; }
.hypothesis-card > p { font-size: 13px; line-height: 1.9; color: var(--v2-muted); margin-top: 11px; }
.hypothesis-card > div { padding-top: 15px; border-top: 1px solid #edf0e7; margin-top: 19px; }
.hypothesis-card > div strong { font-size: 11px; color: var(--v2-brand); }
.hypothesis-card > div p { font-size: 12px; line-height: 1.9; margin-top: 6px; color: #617454; }
.parent-kind-note { background: #ecefe1; color: #607346; }
.evidence-panel { margin-top: 26px; }
.evidence-panel > p { font-size: 13px; line-height: 1.9; color: var(--v2-muted); margin-top: 14px; }
.research-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--v2-line); }
.research-cards h3 { font-size: 15px; }
.research-cards p { font-size: 11px; color: var(--v2-muted); line-height: 1.9; margin-top: 8px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; min-height: 44px; }
.safety-parent-hero { display: flex; align-items: flex-start; gap: 25px; padding: 30px; background: #e9eee5; border-radius: 23px; }
.safety-parent-hero > svg { margin-top: 6px; color: #668b5d; }
.safety-parent-hero h2 { font-size: 30px; line-height: 1.5; color: #3c603c; }
.safety-parent-hero p { font-size: 13px; line-height: 1.9; color: #617b55; margin-top: 15px; }
.safety-step-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 24px 0; }
.safety-step { border: 1px solid var(--v2-line); border-radius: 20px; padding: 23px; background: #fff; }
.safety-step > span { display: block; font: 600 25px/1.3 var(--v2-font); color: #7d996b; margin-bottom: 14px; }
.safety-step h3 { font-size: 18px; }
.safety-step blockquote { padding: 0; margin: 15px 0; font-size: 15px; font-weight: 700; color: #526b47; line-height: 1.7; }
.safety-step p { font-size: 12px; line-height: 1.9; color: var(--v2-muted); }
.school-template h2 { font-size: 20px; }
.school-template blockquote { padding: 22px; background: #f3f5ee; border-left: 3px solid #9db18c; border-radius: 0 14px 14px 0; margin: 15px 0 0; font-size: 15px; color: #5b6f50; line-height: 1.95; }
.safety-accordions { margin-top: 24px; }
.safety-accordions details { border: 1px solid var(--v2-line); border-radius: 14px; background: #fff; margin-bottom: 12px; padding: 0 19px; }
.safety-accordions summary { min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-size: 14px; font-weight: 700; }
.safety-accordions details p { font-size: 13px; color: var(--v2-muted); line-height: 1.9; padding: 10px 0 23px; }
.settings-panel h2 { font-size: 22px; margin-bottom: 13px; }
.setting-row { display: flex; gap: 16px; align-items: center; padding: 24px 0; border-top: 1px solid var(--v2-line); }
.setting-row > div { flex: 1; }
.setting-row label { font-size: 16px; font-weight: 800; }
.setting-row p { font-size: 12px; line-height: 1.8; color: var(--v2-muted); margin-top: 5px; }
.setting-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: #eef2e6; color: #687f56; flex-shrink: 0; }
.switch { display: flex; align-items: center; width: 57px; height: 44px; padding: 9px 3px; border-radius: 30px; position: relative; flex-shrink: 0; }
.switch::before { content: ''; position: absolute; inset: 8px 0; background: #b9c3b0; border-radius: 30px; }
.switch > span { width: 23px; height: 23px; position: relative; border-radius: 50%; background: white; box-shadow: 0 1px 4px #293c3233; transform: translateX(0); transition: transform .15s; }
.switch.on::before { background: #507345; }
.switch.on > span { transform: translateX(28px); }
.privacy-panel { margin-top: 24px; }
.privacy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; margin: 25px 0; }
.privacy-grid > div > svg { margin-bottom: 10px; color: #638051; }
.privacy-grid h3 { font-size: 15px; margin-bottom: 9px; }
.privacy-grid p { font-size: 12px; line-height: 1.85; color: var(--v2-muted); }
.data-controls { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 25px; border-top: 1px solid var(--v2-line); }
.build-info { padding: 26px 7px 5px; color: var(--v2-muted); }
.build-info strong { display: block; font-size: 12px; }
.build-info span { display: block; font-size: 11px; margin-top: 6px; }
.build-info p { font-size: 10px; margin-top: 10px; line-height: 1.9; }
/* Dialogs and feedback */
.app-dialog { padding: 26px; border: 1px solid #d6e0ca; background: #fffefa; color: var(--v2-ink); border-radius: 25px; width: min(550px,calc(100% - 36px)); max-height: 90vh; max-height: 90dvh; margin: auto; overflow-y: auto; box-shadow: 0 25px 100px #2c402433; }
.app-dialog::backdrop { background: rgba(35,53,35,.38); backdrop-filter: blur(4px); }
.app-dialog.wide-dialog { width: min(670px,calc(100% - 32px)); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dialog-top h2 { font-size: 23px; line-height: 1.5; }
.dialog-body > p { font-size: 14px; line-height: 1.9; color: var(--v2-muted); }
.dialog-info { display: flex; gap: 12px; align-items: start; padding: 17px; border-radius: 13px; background: #eef2e6; margin: 19px 0; }
.dialog-info p { font-size: 12px; line-height: 1.9; color: #5c704d; }
.dialog-info > svg { margin-top: 3px; color: #6f845b; }
.checkbox-line { display: flex; align-items: start; gap: 10px; font-size: 13px; padding: 12px 0; min-height: 48px; cursor: pointer; }
.checkbox-line input { margin: 2px 0 0; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.dialog-actions .button { min-height: 50px; }
.pause-illustration { text-align: center; padding: 20px 0 27px; color: #929f70; }
.pause-illustration + p { text-align: center; font-size: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.form-grid label, .form-note-label { font-size: 13px; font-weight: 700; }
.form-grid input, .form-grid select, .form-note-label textarea { display: block; margin-top: 7px; font-size: 14px; font-weight: 400; }
.observation-supports { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.observation-supports legend { font-size: 13px; margin-bottom: 12px; }
.radio-card { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 12px 11px; border: 1px solid #d3deca; border-radius: 11px; font-size: 12px; background: #fafcf5; cursor: pointer; }
.radio-card:has(:checked) { background: #e7efdb; border-color: #7e9a67; }
.form-note-label { display: block; }
.storage-status { display: flex; gap: 7px; align-items: center; padding-top: 15px; color: #69755e; font-size: 11px; }
.field-error { display: block; font-size: 11px; color: #9d413b; margin-top: 5px; }
[aria-invalid="true"] { border: 2px solid #a3433e; }
.listening-icon { text-align: center; padding: 20px; color: #66804d; }
/* Text size and motion preferences are independent. */
.large-text .main-content { font-size: 18px; }
.large-text .hero-copy p, .large-text .intro-description { font-size: 18px; }
.large-text .scene-card h3 { font-size: 20px; }
.large-text .scene-card p { font-size: 14px; }
.large-text .friend-speech > p { font-size: 26px; }
.large-text .reply-choice { font-size: 21px; }
.large-text .input-tabs button, .large-text .filter-chip, .large-text .parent-tabs button { font-size: 15px; }
.large-text .observation-body > p, .large-text .panel-description, .large-text .setting-row p, .large-text .hypothesis-card p { font-size: 16px; }

@media (min-width: 1600px) {
  :root { --v2-sidebar: 245px; }
  .hero-copy h1 { font-size: 51px; }
  .home-hero { padding: 42px; gap: 32px; }
  .hero-copy p { font-size: 17px; }
  .scene-card h3 { font-size: 21px; }
  .scene-card p { font-size: 13px; }
  .brand em { display: inline; font-size: 9px; font-style: normal; font-weight: 400; }
}
@media (max-width: 1190px) {
  :root { --v2-sidebar: 204px; }
  .sidebar { padding: 25px 13px 17px; }
  .brand { gap: 8px; }
  .brand > span { font-size: 13px; }
  .main-content { padding: 28px; }
  .topbar { padding-left: 28px; padding-right: 28px; }
  .home-hero { padding: 28px 23px; grid-template-columns: 1fr 1fr; }
  .hero-copy h1 { font-size: 37px; }
  .hero-copy p { font-size: 13px; }
  .hero-art-label { font-size: 9px; }
  .home-grid, .explore-grid { gap: 14px; }
  .scene-card-copy { padding: 16px 13px 18px; }
  .scene-card h3 { font-size: 16px; }
  .mood-row { padding: 16px; }
  .mood-chip { padding: 9px 12px; font-size: 12px; }
  .parent-main-grid { grid-template-columns: 1fr; }
  .parent-aside { grid-template-columns: 1fr 1fr; }
  .coaching-card { padding: 25px; }
  .evidence-bar { width: 32%; }
  .play-grid { gap: 18px; grid-template-columns: 1fr 1fr; }
  .response-panel { padding: 18px; }
  .response-heading { flex-wrap: wrap; }
  .response-heading h2 { font-size: 18px; }
  .friend-panel { gap: 8px; }
  .avatar-lg { width: 73px; height: 96px; }
  .friend-speech { padding: 10px 12px 16px; }
  .friend-speech > p { font-size: 20px; }
  .friend-name > span { display: none; }
  .reply-choice { padding: 13px 11px; font-size: 16px; gap: 9px; }
  .intro-grid { gap: 25px; }
  .intro-copy h1 { font-size: 30px; }
  .safety-step-grid { gap: 13px; }
  .safety-step { padding: 20px; }
  .safety-step h3 { font-size: 16px; }
  .understand-hero { padding: 26px; }
  .understand-hero h2 { font-size: 27px; }
  .context-orbit { transform: scale(.84); transform-origin: right center; width: 245px; }
}
@media (max-width: 900px) {
  :root { --v2-sidebar: 0px; }
  .sidebar { display: none; }
  .shell-body { margin-left: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .mobile-brand { display: flex; align-items: center; gap: 10px; font-size: 14px; }
  .mobile-brand svg { width: 33px; height: 33px; }
  .topbar { padding: 14px 24px; min-height: 80px; }
  .topbar-note { font-size: 10px; }
  .family-button > span:not(.family-avatar), .family-button > svg { display: none; }
  .topbar-actions { gap: 5px; }
  .main-content { padding: 27px 25px; min-height: calc(100dvh - 230px); }
  .mobile-nav { display: grid; grid-template-columns: repeat(4,1fr); position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; background: #f8faf3; border-top: 1px solid #d3deca; padding: 5px 12px calc(5px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 22px rgba(70,90,55,.04); }
  .mobile-nav .nav-item { flex-direction: column; gap: 5px; justify-content: center; min-height: 65px; border-radius: 12px; font-size: 11px; padding: 9px 4px; }
  .mobile-nav .nav-chevron { display: none; }
  .site-footer { padding: 20px 25px 8px; font-size: 9px; }
  .parent-shell .page-heading h1 { font-size: 29px; }
}
@media (max-width: 680px) {
  .topbar { padding: 10px 18px 11px; gap: 7px; flex-wrap: wrap; }
  .mobile-brand { flex: 1; font-size: 13px; }
  .topbar-note { order: 3; width: 100%; padding-left: 2px; font-size: 10px; }
  .topbar-actions { gap: 3px; }
  .topbar-actions .icon-button { width: 40px; }
  .family-avatar { width: 31px; height: 31px; }
  .main-content { padding: 23px 18px 18px; }
  .hello-row { margin-bottom: 15px; }
  .hello-row .eyebrow { font-size: 11px; }
  .hello-row .soft-label { display: none; }
  .home-hero { grid-template-columns: 1fr; padding: 25px 24px 17px; gap: 0; border-radius: 24px; }
  .hero-copy h1 { font-size: 36px; }
  .hero-copy p { font-size: 14px; margin-top: 14px; margin-bottom: 21px; }
  .hero-copy .button { width: 100%; justify-content: space-between; min-height: 56px; }
  .hero-footnote { justify-content: center; font-size: 10px; margin-top: 11px; }
  .hero-illustration { padding: 14px 0 15px; margin-top: 8px; transform: none; }
  .hero-illustration > .scene-svg { border-radius: 25px; max-height: 195px; }
  .floating-note { font-size: 10px; padding: 7px 11px; top: 3px; left: 4%; }
  .hero-art-label { font-size: 8px; margin-top: 6px; }
  .mood-row { flex-direction: column; align-items: stretch; gap: 13px; padding: 18px; margin: 18px 0 26px; }
  .mood-options { flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
  .mood-chip { flex: 1; gap: 5px; font-size: 11px; padding: 10px 8px; min-height: 48px; }
  .mood-chip > svg { width: 19px; height: 19px; }
  .section-heading { gap: 10px; align-items: end; }
  .section-heading .text-button { font-size: 11px; padding-right: 0; gap: 4px; }
  .recommend-section h2 { font-size: 21px; }
  .scene-grid.home-grid { grid-template-columns: 1fr; gap: 13px; }
  .home-grid .scene-card { display: grid; grid-template-columns: 40% minmax(0,1fr); }
  .home-grid .scene-card-art { height: 100%; min-height: 158px; overflow: hidden; }
  .home-grid .scene-card-art .scene-svg { height: 100%; width: auto; min-width: 100%; position: absolute; left: 50%; transform: translateX(-50%); }
  .home-grid .scene-card-time { right: auto; left: 7px; top: 8px; font-size: 8px; }
  .home-grid .scene-card-copy { padding: 16px 13px; align-self: center; }
  .home-grid .card-meta { flex-wrap: wrap; font-size: 9px; gap: 5px; margin-bottom: 6px; }
  .home-grid .scene-card h3 { font-size: 16px; }
  .home-grid .scene-card p { font-size: 10px; padding: 0; }
  .kind-note { align-items: start; padding: 17px; margin-top: 20px; }
  .kind-note .icon { margin-top: 3px; }
  .kind-note p { font-size: 10px; }
  .page-heading { align-items: start; flex-direction: column; gap: 17px; margin-bottom: 23px; }
  .page-heading h1 { font-size: 29px; }
  .page-heading p { font-size: 13px; line-height: 1.8; }
  .explore-controls { flex-direction: column; gap: 12px; }
  .search-box { padding-left: 12px; }
  .search-box input { font-size: 12px; }
  .search-box .button { font-size: 12px; padding: 9px 12px; }
  .place-select { width: 100%; }
  .filter-chips { gap: 7px; }
  .filter-chip { font-size: 11px; padding: 8px 10px; gap: 5px; }
  .explore-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .explore-grid .scene-card h3 { font-size: 14px; }
  .explore-grid .scene-card p { font-size: 10px; }
  .explore-grid .scene-card-copy { padding: 13px 12px 16px; }
  .explore-grid .card-meta { flex-wrap: wrap; gap: 5px; font-size: 9px; margin-bottom: 7px; }
  .explore-grid .scene-card-time { font-size: 8px; padding: 3px 6px; right: 6px; top: 6px; }
  .explore-grid .scene-card-time > svg { display: none; }
  .intro-grid { grid-template-columns: 1fr; gap: 17px; padding-top: 0; }
  .back-link { margin-bottom: 14px; }
  .character-intro { padding: 10px 5px; }
  .avatar-md { width: 47px; height: 61px; }
  .character-intro strong { font-size: 15px; }
  .character-intro p { font-size: 11px; }
  .intro-copy h1 { font-size: 30px; }
  .intro-description { font-size: 16px; margin-top: 12px; }
  .speech-preview { font-size: 18px; }
  .play-top { gap: 7px; flex-wrap: wrap; margin-bottom: 17px; }
  .play-title { order: 3; width: 100%; padding: 10px 0 0; font-size: 17px; }
  .play-top .text-button { font-size: 12px; }
  .play-grid { grid-template-columns: 1fr; gap: 20px; }
  .scene-stage .scene-svg { max-height: 205px; width: 100%; }
  .friend-panel { margin-top: 15px; gap: 10px; }
  .avatar-lg { width: 69px; height: 91px; }
  .friend-name > span { display: inline; }
  .friend-speech { padding: 8px 14px 18px; }
  .friend-speech > p { font-size: 21px; }
  .response-panel { padding: 20px; min-height: 0; }
  .response-heading { flex-wrap: nowrap; gap: 10px; }
  .response-heading h2 { font-size: 18px; }
  .reply-choice { min-height: 74px; font-size: 18px; }
  .input-tabs button { font-size: 12px; }
  .session-footnote { margin-top: 13px; font-size: 10px; }
  .reality-link { text-align: center; font-size: 11px; line-height: 1.8; margin-top: 18px; }
  .waiting-card, .connection-error, .turn-complete { min-height: 270px; }
  .completion { padding-top: 0; }
  .completion h1 { font-size: 31px; }
  .completion-character { width: 96px; height: 122px; }
  .completion-art { margin-bottom: 12px; }
  .completion-lead { font-size: 14px; }
  .attempt-summary { padding: 18px; margin: 24px auto; gap: 12px; }
  .reflection { gap: 7px; }
  .life-mission { padding: 20px; gap: 13px; }
  .life-mission h3 { font-size: 16px; }
  .life-mission p { font-size: 10px; }
  .completion .button-row { flex-direction: column; }
  .footprint-garden { grid-template-columns: 1fr 1fr; gap: 13px; }
  .footprint-card { padding: 23px 15px; }
  .footprint-card h3 { font-size: 15px; }
  .footprint-card p { font-size: 10px; }
  .safety-child { margin: 15px auto; }
  .safety-child h1 { font-size: 28px; }
  .safety-child > p { font-size: 15px; }
  .safe-script { font-size: 21px; padding: 23px 17px; }
  .safety-child .button-row { flex-direction: column; }
  .parent-shell .page-heading h1 { font-size: 28px; }
  .parent-tabs { gap: 3px; margin-left: -3px; padding-bottom: 13px; margin-bottom: 20px; }
  .parent-tabs button { padding: 10px 12px; font-size: 12px; gap: 6px; }
  .example-notice { align-items: start; font-size: 10px; padding: 12px 13px; flex-direction: column; gap: 3px; }
  .example-notice .text-button { margin-left: auto; min-height: 44px; }
  .parent-stat-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .stat-card { padding: 19px 16px; }
  .stat-card > span { font-size: 11px; line-height: 1.7; align-items: start; gap: 6px; }
  .stat-card > span > svg { width: 17px; height: 17px; margin-top: 2px; }
  .stat-card > strong { font-size: 31px; }
  .stat-card p { font-size: 9px; }
  .stat-card.calm-stat { grid-column: 1 / -1; }
  .stat-card > .stat-words { font-size: 21px; }
  .stat-card > .stat-words > br { display: none; }
  .panel { padding: 20px 17px; }
  .parent-main-grid .section-heading { align-items: center; }
  .parent-main-grid h2 { font-size: 20px; }
  .parent-main-grid .pill { font-size: 10px; }
  .skill-evidence-row { gap: 8px; min-height: 76px; }
  .evidence-icon { width: 31px; height: 34px; border-radius: 10px; }
  .evidence-icon > svg { width: 18px; }
  .skill-evidence-label strong { font-size: 12px; }
  .skill-evidence-label > span { font-size: 8px; }
  .evidence-bar { width: 22%; }
  .evidence-n { font-size: 14px; min-width: 25px; }
  .evidence-n small { font-size: 7px; }
  .chart-legend { font-size: 8px; gap: 9px 10px; }
  .parent-aside { grid-template-columns: 1fr; }
  .coaching-card { padding: 25px; }
  .coaching-card h3 { font-size: 23px; }
  .next-step-card { padding: 25px; }
  .latest-session-content { flex-wrap: wrap; gap: 13px; }
  .latest-session-content > div { flex-basis: calc(100% - 70px); }
  .latest-session .section-heading { flex-wrap: wrap; }
  .latest-session .section-heading h2 { font-size: 20px; }
  .observation-intro { flex-direction: column; align-items: stretch; gap: 15px; }
  .observation-intro h2 { font-size: 20px; }
  .observation-filters { flex-wrap: wrap; padding: 16px; gap: 13px; }
  .observation-filters label { flex: 1; width: auto; min-width: 115px; }
  .filtered-count { width: 100%; padding-bottom: 0; text-align: right; }
  .observation-item { gap: 11px; padding: 18px 15px; flex-wrap: wrap; }
  .observation-date { width: 100%; }
  .observation-body > p { font-size: 13px; }
  .observation-meta { gap: 6px; }
  .observation-meta > strong { font-size: 13px; }
  .understand-hero { padding: 24px; flex-direction: column; align-items: start; gap: 15px; }
  .understand-hero h2 { font-size: 26px; }
  .understand-hero p { font-size: 12px; }
  .context-orbit { align-self: center; transform: scale(.85); transform-origin: center; margin-top: -5px; margin-bottom: -10px; }
  .hypothesis-grid { grid-template-columns: 1fr; }
  .hypothesis-card { padding: 25px; }
  .research-cards { grid-template-columns: 1fr; }
  .evidence-panel > h2 { font-size: 22px; }
  .safety-parent-hero { padding: 23px; gap: 15px; flex-direction: column; }
  .safety-parent-hero h2 { font-size: 25px; }
  .safety-step-grid { grid-template-columns: 1fr; }
  .safety-step { padding: 24px; }
  .safety-step h3 { font-size: 20px; }
  .school-template .section-heading { flex-direction: column; align-items: start; }
  .school-template blockquote { padding: 18px; font-size: 14px; }
  .safety-accordions summary { font-size: 13px; }
  .setting-row { gap: 12px; }
  .setting-icon { width: 35px; height: 38px; border-radius: 11px; }
  .setting-row label { font-size: 14px; }
  .setting-row p { font-size: 11px; }
  .privacy-grid { grid-template-columns: 1fr; gap: 23px; }
  .privacy-panel h2 { font-size: 23px; }
  .data-controls { flex-direction: column; }
  .site-footer { padding: 20px 18px 7px; gap: 5px; flex-direction: column; font-size: 9px; }
  .app-dialog { padding: 21px; border-radius: 22px; }
  .dialog-top { margin-bottom: 15px; gap: 8px; }
  .dialog-top h2 { font-size: 20px; }
  .dialog-body > p { font-size: 13px; }
  .dialog-actions { gap: 8px; margin-top: 21px; }
  .dialog-actions .button { font-size: 13px; padding: 12px 14px; flex: 1; }
  .form-grid { gap: 13px; }
  .form-grid label, .form-note-label { font-size: 12px; }
  .form-grid input, .form-grid select { font-size: 12px; padding: 11px; }
  .observation-supports { grid-template-columns: 1fr; }
  .radio-card { font-size: 12px; min-height: 51px; }
}
@media (max-width: 360px) {
  .main-content { padding-left: 13px; padding-right: 13px; }
  .home-hero { padding-left: 20px; padding-right: 20px; }
  .hero-copy h1 { font-size: 33px; }
  .mood-chip { padding-left: 5px; padding-right: 5px; font-size: 10px; }
  .explore-grid { grid-template-columns: 1fr; }
  .response-panel { padding: 16px; }
  .response-heading h2 { font-size: 17px; }
  .response-heading .text-button { font-size: 10px; }
}