/* PAREA · a quieter, clearer visual language for four age collections.
   Loaded after the existing styles; every enhancement requires visual-refresh.
   Home introduction placement remains owned by placeHomeIntroduction() at 935px.
   No content, audio, DOM ordering, image drawing, or label changes live here. */

body.visual-refresh {
  --vf-ink: #273f38;
  --vf-muted: #596b61;
  --vf-accent: #436950;
  --vf-accent-strong: #2e503a;
  --vf-canvas: #f5f7f0;
  --vf-paper: #fffefb;
  --vf-surface: #eaf1e2;
  --vf-secondary: #f5e7c8;
  --vf-line: #d6dfcf;
  --vf-focus: #9c5927;
  --vf-type: 1;
  --vf-sidebar: 228px;
  --vf-shadow: 0 12px 32px rgb(35 61 43 / 6%);
  --vf-shadow-raised: 0 16px 36px rgb(35 61 43 / 11%);
  --ink: var(--vf-ink);
  --muted: var(--vf-muted);
  --bg: var(--vf-canvas);
  --paper: var(--vf-paper);
  --line: var(--vf-line);
  --green: var(--vf-accent);
  --green-dark: var(--vf-accent-strong);
  --radius: 24px;
  --shadow: var(--vf-shadow);
  min-height: 100svh;
  background: var(--vf-canvas);
  color: var(--vf-ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: calc(1rem * var(--vf-type));
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body.visual-refresh[data-age="2-4"] {
  --vf-ink: #3c4831;
  --vf-muted: #64705a;
  --vf-accent: #526f49;
  --vf-accent-strong: #3b5735;
  --vf-canvas: #faf8ee;
  --vf-paper: #fffef8;
  --vf-surface: #edf2df;
  --vf-secondary: #f5e3b5;
  --vf-line: #dce2cb;
  --vf-focus: #956028;
}

body.visual-refresh[data-age="4-6"] {
  --vf-ink: #463c48;
  --vf-muted: #706371;
  --vf-accent: #80617e;
  --vf-accent-strong: #654961;
  --vf-canvas: #faf5f1;
  --vf-paper: #fffdfb;
  --vf-surface: #f0e8f0;
  --vf-secondary: #f6dfcf;
  --vf-line: #e4d9df;
  --vf-focus: #9b4f47;
  --vf-shadow: 0 12px 32px rgb(86 56 77 / 6%);
  --vf-shadow-raised: 0 16px 36px rgb(86 56 77 / 11%);
}

body.visual-refresh[data-age="6-8"] {
  --vf-ink: #264345;
  --vf-muted: #556d70;
  --vf-accent: #2f7071;
  --vf-accent-strong: #22585b;
  --vf-canvas: #f1f7f4;
  --vf-paper: #fffefa;
  --vf-surface: #e1efea;
  --vf-secondary: #eee2c8;
  --vf-line: #cedeD9;
  --vf-focus: #98602d;
  --vf-shadow: 0 12px 32px rgb(29 73 69 / 6%);
  --vf-shadow-raised: 0 16px 36px rgb(29 73 69 / 11%);
}

body.visual-refresh[data-age="8-10"] {
  --vf-ink: #333d52;
  --vf-muted: #626b80;
  --vf-accent: #565d8d;
  --vf-accent-strong: #414873;
  --vf-canvas: #f4f5fa;
  --vf-paper: #fffefd;
  --vf-surface: #e9edf7;
  --vf-secondary: #ece3f2;
  --vf-line: #d9deeb;
  --vf-focus: #79558a;
  --vf-shadow: 0 12px 32px rgb(45 53 90 / 6%);
  --vf-shadow-raised: 0 16px 36px rgb(45 53 90 / 11%);
}

/* Typography and targets. These also neutralize the inherited 1400px scale jump. */
body.visual-refresh :where(h1, h2, h3) {
  color: var(--vf-ink);
  font-family: "Segoe UI", Arial, sans-serif;
  text-wrap: balance;
  overflow-wrap: break-word;
}
body.visual-refresh :where(p, small, label, .btn, .link-btn) { overflow-wrap: break-word; }
body.visual-refresh :where(button, .btn, .nav-link, .back-link, .link-btn, .quiet-btn, .profile-button, .welcome-top-link, .age-top-button, .footer a, .footer button) {
  min-height: 44px;
  touch-action: manipulation;
}
body.visual-refresh :where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--vf-focus);
  outline-offset: 4px;
}
body.visual-refresh :where(input, select, textarea) {
  max-width: 100%;
  accent-color: var(--vf-accent);
}
body.visual-refresh :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-height: 46px;
  font-size: calc(1rem * var(--vf-type));
}
body.visual-refresh :where(.page, .main-wrap, .hero-copy, .hero-art, .world-card, .world-card-body, .age-card, .catalog-search, .catalog-theme, .prompt-bubble, .complete-view) { min-width: 0; }
body.visual-refresh .eyebrow {
  color: var(--vf-muted);
  font-size: calc(.7rem * var(--vf-type));
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 1.6;
}
body.visual-refresh .page {
  max-width: 1380px;
  padding: 28px clamp(24px, 3.1vw, 52px) calc(32px + env(safe-area-inset-bottom));
}
body.visual-refresh .page-header { margin: 6px 0 28px; align-items: center; }
body.visual-refresh .page-header h1 {
  font-size: clamp(2rem, 3.3vw, 3rem);
  font-weight: 750;
  line-height: 1.17;
  letter-spacing: -.035em;
}
body.visual-refresh .page-header p {
  max-width: 66ch;
  margin-top: 12px;
  color: var(--vf-muted);
  font-size: calc(1rem * var(--vf-type));
  line-height: 1.75;
}
body.visual-refresh .section-heading { margin-bottom: 20px; gap: 20px; }
body.visual-refresh .section-heading h2 {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.25;
}
body.visual-refresh .section-heading p { font-size: calc(.95rem * var(--vf-type)); line-height: 1.7; color: var(--vf-muted); }
body.visual-refresh .section-heading .link-btn { font-size: calc(.9rem * var(--vf-type)); white-space: normal; text-align: left; }

/* Navigation remains in its existing desktop/mobile locations. */
body.visual-refresh .sidebar {
  background: var(--vf-paper);
  border-color: var(--vf-line);
  box-shadow: 1px 0 0 rgb(255 255 255 / 50%);
}
body.visual-refresh .brand { gap: 10px; padding-inline: 4px; }
body.visual-refresh .brand-mark { width: 40px; height: 40px; flex: none; border-radius: 13px; }
body.visual-refresh .brand-name { font-size: 27px; font-weight: 800; letter-spacing: .075em; color: var(--vf-ink); }
body.visual-refresh .brand-sub { font-size: 12px; color: var(--vf-muted); letter-spacing: .035em; }
body.visual-refresh .nav-label { color: var(--vf-muted); font-size: 11px; letter-spacing: .14em; }
body.visual-refresh .nav-link { border: 1px solid transparent; color: var(--vf-muted); font-size: calc(.95rem * var(--vf-type)); font-weight: 650; border-radius: 14px; padding: 12px; gap: 11px; }
body.visual-refresh .nav-link.active { color: var(--vf-accent-strong); background: var(--vf-surface); border-color: var(--vf-line); }
body.visual-refresh .side-garden { background: linear-gradient(145deg, var(--vf-surface), var(--vf-paper)); border: 1px solid var(--vf-line); border-radius: 22px; padding: 23px 16px; }
body.visual-refresh .side-garden p { font-size: calc(.9rem * var(--vf-type)); line-height: 1.7; }
body.visual-refresh .side-version { font-size: 12px; color: var(--vf-muted); }
body.visual-refresh .tiny-dot { background: var(--vf-accent); }
body.visual-refresh .topbar { border-color: var(--vf-line); gap: 12px; padding: 22px clamp(24px, 3.1vw, 52px) 18px; background: var(--vf-canvas); }
body.visual-refresh .breadcrumb { font-size: calc(.85rem * var(--vf-type)); color: var(--vf-muted); }
body.visual-refresh .breadcrumb strong { color: var(--vf-ink); }
body.visual-refresh .top-actions { gap: 8px; min-width: 0; max-width: 100%; }
body.visual-refresh .round-button { width: 44px; height: 44px; min-width: 44px; background: var(--vf-paper); border: 1px solid var(--vf-line); color: var(--vf-ink); }
body.visual-refresh .quiet-btn { min-width: 44px; padding: 10px; color: var(--vf-ink); font-size: calc(.88rem * var(--vf-type)); }
body.visual-refresh .quiet-btn[aria-pressed="true"] { color: var(--vf-accent-strong); background: var(--vf-surface); }
body.visual-refresh .profile-button { min-width: 0; max-width: 100%; gap: 8px; font-size: calc(.88rem * var(--vf-type)); }
body.visual-refresh .profile-button > span:last-child { min-width: 0; overflow-wrap: anywhere; }
body.visual-refresh .avatar { width: 34px; height: 34px; background: var(--vf-secondary); color: var(--vf-accent-strong); }
body.visual-refresh :is(.welcome-top-link, .age-top-button) { border: 1px solid var(--vf-line); background: var(--vf-paper); color: var(--vf-accent-strong); border-radius: 13px; padding: 9px 12px; font-size: calc(.85rem * var(--vf-type)); }
body.visual-refresh .topbar.has-public-version > .public-version {
  color: var(--vf-muted);
  font-size: calc(.75rem * var(--vf-type));
  /* Deliberately plain, admin-editable text; no badge or button presentation. */
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}

body.visual-refresh .btn {
  min-height: 48px;
  max-width: 100%;
  padding: 12px 18px;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: var(--vf-surface);
  color: var(--vf-accent-strong);
  font-size: calc(.95rem * var(--vf-type));
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
body.visual-refresh .btn.primary { background: var(--vf-accent); color: #fff; box-shadow: 0 4px 10px rgb(35 50 43 / 9%); }
body.visual-refresh .btn.outline { background: var(--vf-paper); border-color: var(--vf-line); color: var(--vf-accent-strong); box-shadow: none; }
body.visual-refresh .btn.subtle { background: transparent; color: var(--vf-accent-strong); font-size: calc(.9rem * var(--vf-type)); padding: 10px 8px; box-shadow: none; }
body.visual-refresh .btn.small { min-height: 44px; padding: 9px 13px; font-size: calc(.88rem * var(--vf-type)); }
body.visual-refresh .btn.danger { background: #f9e8e3; color: #8e352c; border-color: #e7c6bf; }
body.visual-refresh .btn:disabled { opacity: .52; box-shadow: none; transform: none; }
body.visual-refresh .btn .icon { width: 18px; height: 18px; flex: none; }
body.visual-refresh .link-btn { color: var(--vf-accent-strong); font-weight: 700; }
body.visual-refresh .pill { color: var(--vf-accent-strong); background: var(--vf-surface); font-size: calc(.78rem * var(--vf-type)); padding: 7px 11px; }

/* Four collection cards: independent colors remain visible before an age is chosen. */
body.visual-refresh .age-grid { gap: 18px; margin: 28px 0; }
body.visual-refresh .age-card { --card-ink: #4a6540; --card-wash: #eef3de; --card-line: #dce4c9; background: linear-gradient(160deg, #fffefb 46%, var(--card-wash)); border: 1px solid var(--card-line); border-radius: 24px; padding: 18px; box-shadow: 0 5px 18px rgb(42 56 43 / 4%); color: var(--vf-ink); gap: 0; overflow: hidden; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
body.visual-refresh .age-card.age-2-4 { --card-ink: #566c3f; --card-wash: #f5edce; --card-line: #e3dfbc; }
body.visual-refresh .age-card.age-4-6 { --card-ink: #825e7c; --card-wash: #f4e3e2; --card-line: #e5cedc; }
body.visual-refresh .age-card.age-6-8 { --card-ink: #306d70; --card-wash: #e2efea; --card-line: #c9dfd9; }
body.visual-refresh .age-card.age-8-10 { --card-ink: #575d8c; --card-wash: #ece9f5; --card-line: #d8d6e9; }
body.visual-refresh .age-card-art { width: 100%; min-width: 0; min-height: 0; max-height: none; aspect-ratio: 460 / 355; margin: 0 0 16px; overflow: hidden; border-radius: 18px; background: var(--card-wash); }
body.visual-refresh .age-card-art .age-card-scene { display: block; width: 100%; height: 100%; max-width: none; max-height: none; }
body.visual-refresh .age-number { width: fit-content; color: var(--card-ink); border: 1px solid var(--card-line); background: rgb(255 255 255 / 75%); border-radius: 999px; padding: 4px 10px; margin: 0 0 10px; font-size: calc(.8rem * var(--vf-type)); font-weight: 750; line-height: 1.45; }
body.visual-refresh .age-card strong { color: var(--card-ink); font-size: calc(1.35rem * var(--vf-type)); font-weight: 750; line-height: 1.25; letter-spacing: -.02em; min-height: 0; overflow-wrap: break-word; }
body.visual-refresh .age-card small { color: #62695f; font-size: calc(.85rem * var(--vf-type)); line-height: 1.65; margin-top: 10px; }
body.visual-refresh .age-card-count { margin-top: auto; padding-top: 16px; color: var(--card-ink); font-size: calc(.78rem * var(--vf-type)); font-weight: 700; line-height: 1.5; }
body.visual-refresh .age-card.selected { border-color: var(--card-ink); box-shadow: inset 0 0 0 2px var(--card-ink), 0 7px 20px rgb(42 56 43 / 7%); }
body.visual-refresh .age-intro { max-width: 1200px; margin-inline: auto; }
body.visual-refresh .age-intro > h1 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 750; line-height: 1.13; letter-spacing: -.04em; margin: 18px 0; }
body.visual-refresh .age-intro > h1 em { font-style: normal; color: var(--vf-accent); }
body.visual-refresh .age-intro > p { font-size: calc(1.05rem * var(--vf-type)); line-height: 1.8; color: var(--vf-muted); max-width: 70ch; margin-inline: auto; }
body.visual-refresh .age-guidance { border: 1px solid var(--vf-line); background: var(--vf-paper); padding: 16px 20px; border-radius: 16px; font-size: calc(.9rem * var(--vf-type)) !important; line-height: 1.7; }

/* Hero surfaces: no display/order overrides here, so the approved 935px logic wins. */
body.visual-refresh .age-banner { padding: 14px 18px; margin-bottom: 22px; border: 1px solid var(--vf-line); background: var(--vf-surface); color: var(--vf-ink); border-radius: 16px; font-size: calc(.95rem * var(--vf-type)); line-height: 1.55; }
body.visual-refresh .age-banner button { min-height: 44px; color: var(--vf-accent-strong); padding: 8px 4px; font-size: calc(.88rem * var(--vf-type)); font-weight: 700; }
body.visual-refresh .age-hero { min-height: 0; margin-bottom: 30px; padding: clamp(22px, 2.8vw, 38px); gap: 26px; background: linear-gradient(125deg, var(--vf-paper) 32%, var(--vf-surface)); border: 1px solid var(--vf-line); border-radius: 30px; box-shadow: var(--vf-shadow); }
body.visual-refresh .hero .welcome-tag { width: fit-content; color: var(--vf-accent-strong); background: var(--vf-surface); border: 1px solid var(--vf-line); border-radius: 999px; padding: 7px 11px; margin-bottom: 19px; font-size: calc(.72rem * var(--vf-type)); font-weight: 700; letter-spacing: .035em; }
body.visual-refresh .age-hero .hero-copy h1 { font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(2.4rem, 3.8vw, 3.7rem); font-weight: 750; line-height: 1.13; letter-spacing: -.04em; max-width: 12ch; color: var(--vf-ink); }
body.visual-refresh .hero h1 em { color: var(--vf-accent); font-style: normal; }
body.visual-refresh .hero p { font-size: calc(1rem * var(--vf-type)); line-height: 1.8; color: var(--vf-muted); max-width: 46ch; margin: 18px 0 23px; }
body.visual-refresh .hero-actions { gap: 12px; flex-wrap: wrap; align-items: center; }
body.visual-refresh .hero-actions .btn { min-height: 50px; }
body.visual-refresh .hero-note { color: var(--vf-muted); font-size: calc(.8rem * var(--vf-type)); line-height: 1.6; gap: 7px; margin-top: 19px; }
body.visual-refresh .age-hero .hero-art { gap: 12px; padding-top: 0; min-width: 0; }
body.visual-refresh .age-hero .hero-bubble { position: relative; inset: auto; transform: none; color: var(--vf-ink); background: var(--vf-paper); border: 1px solid var(--vf-line); box-shadow: 0 6px 20px rgb(42 56 43 / 4%); font-size: calc(.9rem * var(--vf-type)); line-height: 1.65; padding: 15px 18px; max-width: min(94%, 350px); border-radius: 19px 19px 5px 19px; }
body.visual-refresh .age-hero .landscape.age-landscape { width: 100%; height: auto; max-height: 380px; aspect-ratio: 530 / 420; overflow: visible; }
body.visual-refresh .age-hero-pictures { gap: 9px; }
body.visual-refresh .age-hero-pictures .object-picture { background: var(--vf-paper); border: 1px solid var(--vf-line); border-radius: 18px; }
body.visual-refresh .meet-parea-section { border-color: var(--vf-line); border-radius: 28px; background: linear-gradient(140deg, var(--vf-surface), var(--vf-paper) 78%); box-shadow: var(--vf-shadow); }
body.visual-refresh .meet-parea-copy h2 { color: var(--vf-ink); font-family: "Segoe UI", Arial, sans-serif; font-weight: 750; letter-spacing: -.025em; }
body.visual-refresh .meet-parea-copy p { color: var(--vf-muted); font-size: calc(.98rem * var(--vf-type)); line-height: 1.7; }
body.visual-refresh .meet-parea-button { border-color: var(--vf-line); color: var(--vf-accent-strong); background: var(--vf-paper); }
body.visual-refresh .age-note { margin-top: 26px; background: var(--vf-surface); border: 1px solid var(--vf-line); color: var(--vf-muted); padding: 20px 22px; border-radius: 20px; }
body.visual-refresh .age-note p { font-size: calc(.95rem * var(--vf-type)); line-height: 1.75; }

/* Sound controls stay visible and keep their existing state/permission behavior. */
body.visual-refresh :is(.sound-entry, .voice-welcome, .music-welcome) { width: 100%; max-width: none; min-width: 0; border: 1px solid var(--vf-line); background: linear-gradient(125deg, var(--vf-surface), var(--vf-paper)); border-radius: 22px; padding: 22px; gap: 17px; box-shadow: 0 5px 18px rgb(42 56 43 / 3%); }
body.visual-refresh .sound-entry { grid-template-columns: 46px minmax(0, 1fr) auto; margin: 0 0 24px; }
body.visual-refresh .sound-entry-icon { width: 46px; height: 46px; border-radius: 15px; color: var(--vf-accent-strong); background: var(--vf-paper); border: 1px solid var(--vf-line); }
body.visual-refresh .sound-entry-copy strong { font-size: calc(1.1rem * var(--vf-type)); line-height: 1.4; color: var(--vf-ink); }
body.visual-refresh .sound-entry-copy p { color: var(--vf-muted); font-size: calc(.9rem * var(--vf-type)); line-height: 1.65; }
body.visual-refresh .sound-entry-actions { gap: 8px; }
body.visual-refresh .sound-help { color: var(--vf-accent-strong); font-size: calc(.82rem * var(--vf-type)); line-height: 1.5; min-height: 44px; display: inline-flex; align-items: center; padding: 6px 3px; }
body.visual-refresh :is(.voice-welcome, .music-welcome) { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; margin: 0 0 24px; align-items: center; }
body.visual-refresh .voice-welcome-icon { width: 48px; height: 48px; background: var(--vf-paper); color: var(--vf-accent-strong); border: 1px solid var(--vf-line); border-radius: 16px; }
body.visual-refresh :is(.voice-welcome-copy h2, .music-welcome h2) { color: var(--vf-ink); font-size: calc(1.25rem * var(--vf-type)); line-height: 1.35; font-weight: 750; letter-spacing: -.015em; }
body.visual-refresh :is(.voice-welcome-copy p, .music-welcome p) { color: var(--vf-muted); font-size: calc(.95rem * var(--vf-type)); line-height: 1.65; }
body.visual-refresh .voice-welcome-actions { gap: 7px; }
body.visual-refresh .music-welcome { background: linear-gradient(125deg, var(--vf-paper), var(--vf-secondary)); }
body.visual-refresh .music-welcome .music-record { width: 48px; height: 48px; flex: none; color: var(--vf-accent-strong); background: var(--vf-paper); border: 1px solid var(--vf-line); }
body.visual-refresh :is(.voice-live, .voice-mini-status, .music-status) { color: var(--vf-muted); font-size: calc(.82rem * var(--vf-type)); line-height: 1.6; }

/* Worlds and the catalog. Existing picture SVG contents stay untouched. */
body.visual-refresh .world-grid { gap: 20px; }
body.visual-refresh .world-card { border: 1px solid var(--vf-line); border-radius: 24px; background: var(--vf-paper); box-shadow: 0 5px 20px rgb(35 55 43 / 4%); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
body.visual-refresh .world-art { height: 180px; min-height: 180px; background: linear-gradient(145deg, #e9f1df, #dfead7); }
body.visual-refresh .world-art.story { background: linear-gradient(145deg, #f7e9db, #efdcd4); }
body.visual-refresh .world-art.turns { background: linear-gradient(145deg, #eeebf6, #e1dfed); }
body.visual-refresh .world-art svg.scene { height: 166px; max-width: 270px; }
body.visual-refresh .world-tag { top: 13px; left: 13px; max-width: calc(100% - 26px); padding: 5px 9px; border: 1px solid rgb(97 114 92 / 16%); border-radius: 9px; background: rgb(255 254 251 / 90%); color: #4a5c4b; font-size: calc(.75rem * var(--vf-type)); font-weight: 700; line-height: 1.4; }
body.visual-refresh .world-card-body { padding: 22px; }
body.visual-refresh .world-card h3 { font-size: calc(1.16rem * var(--vf-type)); font-weight: 750; color: var(--vf-ink); line-height: 1.35; letter-spacing: -.015em; margin: 0 0 8px; }
body.visual-refresh .world-card p { font-size: calc(.93rem * var(--vf-type)); color: var(--vf-muted); line-height: 1.7; }
body.visual-refresh .card-foot { font-size: calc(.78rem * var(--vf-type)); color: var(--vf-muted); border-color: var(--vf-line); margin-top: 20px; padding-top: 14px; gap: 10px; }
body.visual-refresh .card-foot > span:first-child { min-width: 0; }
body.visual-refresh .card-foot .arrow-circle { width: 32px; height: 32px; flex: none; color: var(--vf-accent-strong); background: var(--vf-surface); }
body.visual-refresh .catalog-pictures { width: 100%; padding: 22px 12px 4px; gap: 8px; }
body.visual-refresh .catalog-pictures > span { border: 1px solid rgb(255 255 255 / 70%); background: rgb(255 254 251 / 70%); border-radius: 18px; }
body.visual-refresh .catalog-tools { padding: 18px; margin-bottom: 23px; gap: 13px; border: 1px solid var(--vf-line); border-radius: 21px; background: var(--vf-paper); box-shadow: 0 4px 18px rgb(35 55 43 / 3%); }
body.visual-refresh .catalog-filters { gap: 6px; padding: 0; }
body.visual-refresh .catalog-filter { min-height: 44px; padding: 10px 14px; color: var(--vf-muted); background: var(--vf-canvas); border: 1px solid var(--vf-line); border-radius: 12px; font-size: calc(.88rem * var(--vf-type)); font-weight: 650; line-height: 1.4; }
body.visual-refresh .catalog-filter.active { color: #fff; background: var(--vf-accent); border-color: var(--vf-accent); }
body.visual-refresh .catalog-search input { width: 100%; min-width: 0; border: 1px solid var(--vf-line); background: var(--vf-paper); border-radius: 12px; padding: 11px 13px; color: var(--vf-ink); }
body.visual-refresh .catalog-search input::placeholder { color: var(--vf-muted); opacity: 1; }
body.visual-refresh .catalog-theme { font-size: calc(.8rem * var(--vf-type)); color: var(--vf-muted); gap: 5px; }
body.visual-refresh .catalog-theme select { border: 1px solid var(--vf-line); border-radius: 12px; padding: 10px 12px; background: var(--vf-paper); color: var(--vf-ink); min-width: 0; }
body.visual-refresh .catalog-summary { color: var(--vf-muted); font-size: calc(.88rem * var(--vf-type)); line-height: 1.65; gap: 10px; margin-bottom: 17px; }
body.visual-refresh .catalog-summary strong { color: var(--vf-ink); font-weight: 700; }
body.visual-refresh .catalog-pagination { margin-top: 26px; gap: 12px; }
body.visual-refresh .catalog-pagination > span { color: var(--vf-muted); font-size: calc(.85rem * var(--vf-type)); }
body.visual-refresh .activity-complete-badge { border-color: #b6cfb3; background: #f5fff1; color: #365735; box-shadow: 0 3px 10px rgb(43 79 45 / 12%); font-size: calc(.75rem * var(--vf-type)); padding: 7px 10px; }

/* Activity focus: stable cards, clear selected state, spacious touch controls. */
body.visual-refresh.activity-mode .topbar { max-width: 1240px; padding: 14px 28px; background: transparent; }
body.visual-refresh .activity-page { width: 100%; max-width: 1140px; padding: 10px 28px calc(30px + env(safe-area-inset-bottom)); margin-inline: auto; }
body.visual-refresh .activity-top { gap: 14px; padding-bottom: 20px; }
body.visual-refresh .back-link { color: var(--vf-accent-strong); font-size: calc(.9rem * var(--vf-type)); font-weight: 650; }
body.visual-refresh .activity-progress { color: var(--vf-muted); font-size: calc(.82rem * var(--vf-type)); line-height: 1.45; gap: 8px; }
body.visual-refresh .progress-dot { width: 27px; height: 7px; background: var(--vf-line); border-radius: 99px; }
body.visual-refresh .progress-dot.current { width: 36px; background: var(--vf-accent); box-shadow: 0 0 0 3px var(--vf-surface); }
body.visual-refresh .progress-dot.done { background: var(--vf-accent); }
body.visual-refresh .activity-intro { margin: 5px 0 23px; }
body.visual-refresh .activity-intro h1 { font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 750; line-height: 1.2; letter-spacing: -.025em; }
body.visual-refresh .activity-intro p { font-size: calc(.98rem * var(--vf-type)); color: var(--vf-muted); line-height: 1.65; margin-top: 10px; }
body.visual-refresh .play-area { min-height: 0; padding: 30px; overflow: visible; border: 1px solid var(--vf-line); border-radius: 28px; background: linear-gradient(145deg, var(--vf-surface), var(--vf-paper)); box-shadow: var(--vf-shadow); }
body.visual-refresh .companion-prompt { max-width: 820px; gap: 18px; align-items: center; margin-bottom: 27px; }
body.visual-refresh .companion-prompt > .mini-robot { width: 94px; height: 106px; flex: none; }
body.visual-refresh .prompt-bubble { min-width: 0; flex: 1; max-width: 620px; padding: 20px 24px; border: 1px solid var(--vf-line); border-radius: 22px 22px 22px 5px; background: var(--vf-paper); box-shadow: 0 4px 16px rgb(35 55 43 / 4%); }
body.visual-refresh .prompt-bubble p { font-size: calc(1.28rem * var(--vf-type)); font-weight: 650; line-height: 1.5; color: var(--vf-ink); }
body.visual-refresh .prompt-bubble small { font-size: calc(.85rem * var(--vf-type)); color: var(--vf-muted); line-height: 1.65; margin-top: 8px; }
body.visual-refresh .picture-options { max-width: 860px; gap: 18px; }
body.visual-refresh .picture-card { min-width: 0; min-height: 220px; padding: 18px 16px 20px; background: var(--vf-paper); border: 2px solid var(--vf-line); border-radius: 23px; box-shadow: 0 5px 15px rgb(35 55 43 / 4%); transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
body.visual-refresh .picture-card .object-picture { width: 100%; max-width: 190px; height: 146px; margin: 7px auto 13px; }
body.visual-refresh .picture-card .picture-word { display: block; color: var(--vf-ink); font-size: calc(1.15rem * var(--vf-type)); font-weight: 700; line-height: 1.35; overflow-wrap: break-word; }
body.visual-refresh .picture-number { color: var(--vf-muted); font-size: calc(.73rem * var(--vf-type)); top: 12px; left: 13px; }
body.visual-refresh .picture-card[aria-pressed="true"] { border-color: var(--vf-accent); background: var(--vf-surface); box-shadow: 0 0 0 3px var(--vf-paper), 0 0 0 5px var(--vf-accent); }
body.visual-refresh .selection-badge { width: 28px; height: 28px; top: 10px; right: 10px; color: #fff; background: var(--vf-accent); }
body.visual-refresh .selection-response { min-height: 64px; padding: 20px 4px 7px; font-size: calc(.95rem * var(--vf-type)); line-height: 1.65; color: var(--vf-accent-strong); }
body.visual-refresh .story-slots { gap: 9px; margin-bottom: 20px; }
body.visual-refresh .story-slot { min-width: 0; min-height: 66px; padding: 9px 10px; border-radius: 13px; border-color: var(--vf-line); background: var(--vf-paper); color: var(--vf-muted); font-size: calc(.83rem * var(--vf-type)); line-height: 1.45; overflow-wrap: break-word; }
body.visual-refresh .story-slot.filled { color: var(--vf-accent-strong); background: var(--vf-surface); border-color: var(--vf-accent); }
body.visual-refresh .story-slot > span { color: var(--vf-muted); font-size: calc(.72rem * var(--vf-type)); }
body.visual-refresh .activity-controls { gap: 15px; padding-top: 5px; }
body.visual-refresh .support-controls { gap: 8px; }
body.visual-refresh .support-controls .btn { min-height: 46px; padding: 10px 13px; font-size: calc(.84rem * var(--vf-type)); border-color: var(--vf-line); background: var(--vf-paper); }
body.visual-refresh .activity-controls > .btn { min-height: 50px; }
body.visual-refresh .session-footer { gap: 12px; padding-bottom: env(safe-area-inset-bottom); color: var(--vf-muted); font-size: calc(.85rem * var(--vf-type)); line-height: 1.65; }
body.visual-refresh .help-content { padding: 18px; border: 1px solid var(--vf-line); border-radius: 16px; background: var(--vf-paper); color: var(--vf-muted); font-size: calc(.95rem * var(--vf-type)); line-height: 1.75; }

/* Completion, parent surfaces, and dialogs retain their original actions. */
body.visual-refresh .complete-view { max-width: 840px; margin: 18px auto; text-align: center; }
body.visual-refresh .complete-scene { width: min(100%, 340px); height: auto; margin: 0 auto 18px; }
body.visual-refresh .complete-scene .landscape { width: 100%; height: auto; max-height: none; }
body.visual-refresh .complete-view h1 { font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(2rem, 3.5vw, 3.05rem); line-height: 1.17; font-weight: 750; letter-spacing: -.03em; }
body.visual-refresh .complete-view > p { max-width: 58ch; margin: 16px auto 0; color: var(--vf-muted); font-size: calc(1rem * var(--vf-type)); line-height: 1.8; }
body.visual-refresh .bridge-card { text-align: left; padding: 25px; gap: 17px; border: 1px solid var(--vf-line); border-radius: 23px; background: linear-gradient(130deg, var(--vf-surface), var(--vf-paper)); box-shadow: var(--vf-shadow); }
body.visual-refresh .bridge-card h3 { font-size: calc(1.2rem * var(--vf-type)); line-height: 1.35; }
body.visual-refresh .bridge-card p { color: var(--vf-muted); font-size: calc(1rem * var(--vf-type)); line-height: 1.75; }
body.visual-refresh .saved-state { color: var(--vf-muted); font-size: calc(.88rem * var(--vf-type)); line-height: 1.6; }
body.visual-refresh .complete-buttons { gap: 12px; }
body.visual-refresh .complete-navigation { gap: 13px; margin-top: 28px; padding-top: 23px; border-top: 1px solid var(--vf-line); }
body.visual-refresh .complete-nav-caption { color: var(--vf-muted); font-size: calc(.78rem * var(--vf-type)); letter-spacing: .08em; }
body.visual-refresh .complete-navigation .btn { min-height: 58px; padding: 13px 15px; }
body.visual-refresh .complete-nav-back .btn { background: var(--vf-paper); border-color: var(--vf-line); }
body.visual-refresh :is(.panel, .album-card, .stat, .empty-state) { background: var(--vf-paper); border-color: var(--vf-line); border-radius: 22px; box-shadow: 0 4px 16px rgb(35 55 43 / 3%); }
body.visual-refresh .panel { padding: 25px; }
body.visual-refresh .panel h2 { color: var(--vf-ink); font-size: calc(1.3rem * var(--vf-type)); line-height: 1.35; font-weight: 750; }
body.visual-refresh .panel p { color: var(--vf-muted); font-size: calc(.98rem * var(--vf-type)); line-height: 1.75; }
body.visual-refresh .parent-tabs { gap: 7px; border-color: var(--vf-line); }
body.visual-refresh .parent-tab { min-height: 44px; padding: 10px 14px; border-radius: 12px; color: var(--vf-muted); font-size: calc(.88rem * var(--vf-type)); }
body.visual-refresh .parent-tab.active { background: var(--vf-surface); color: var(--vf-accent-strong); font-weight: 700; }
body.visual-refresh :is(.field input, .field select, .field textarea, .control) { border: 1px solid var(--vf-line); border-radius: 12px; background: var(--vf-paper); color: var(--vf-ink); padding: 11px 13px; }
body.visual-refresh .field { color: var(--vf-muted); font-size: calc(.9rem * var(--vf-type)); min-width: 0; }
body.visual-refresh .field label { color: var(--vf-ink); }
body.visual-refresh .field small { color: var(--vf-muted); font-size: calc(.8rem * var(--vf-type)); line-height: 1.65; }
body.visual-refresh .setting-row { border-color: var(--vf-line); gap: 18px; }
body.visual-refresh .setting-row strong { font-size: calc(.96rem * var(--vf-type)); line-height: 1.5; color: var(--vf-ink); }
body.visual-refresh .setting-row small { color: var(--vf-muted); font-size: calc(.86rem * var(--vf-type)); line-height: 1.65; }
body.visual-refresh .switch { appearance: none; width: 52px; min-width: 52px; height: 44px; min-height: 44px; position: relative; background: transparent !important; border: 0; border-radius: 12px; }
body.visual-refresh .switch::after { content: ""; position: absolute; width: 52px; height: 30px; top: 7px; left: 0; border-radius: 99px; background: #cbd5cc; transition: background-color 160ms ease; }
body.visual-refresh .switch::before { content: ""; position: absolute; z-index: 1; top: 11px; left: 4px; width: 22px; height: 22px; background: #fff; box-shadow: 0 2px 5px rgb(34 53 39 / 17%); transition: left 160ms ease; }
body.visual-refresh .switch:checked::after { background: var(--vf-accent); }
body.visual-refresh .switch:checked::before { left: 26px; }
body.visual-refresh input[type="checkbox"]:not(.switch) { width: 24px; height: 24px; flex: none; margin: 10px 6px 10px 0; }
body.visual-refresh .music-options label { min-height: 44px; line-height: 1.5; }
body.visual-refresh input[type="range"] { min-height: 44px; }
body.visual-refresh :is(.history-row, .profile-row) { border-color: var(--vf-line); border-radius: 15px; background: var(--vf-paper); }
body.visual-refresh .notice { background: var(--vf-surface); color: var(--vf-muted); border-radius: 14px; line-height: 1.75; }
body.visual-refresh .footer { gap: 14px; color: var(--vf-muted); font-size: calc(.8rem * var(--vf-type)); line-height: 1.65; padding-top: 30px; }
body.visual-refresh .footer :is(a, button) { color: var(--vf-muted); font-size: calc(.8rem * var(--vf-type)); }
body.visual-refresh dialog { width: min(680px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; padding: 30px; border: 1px solid var(--vf-line); border-radius: 26px; color: var(--vf-ink); background: var(--vf-paper); box-shadow: 0 30px 100px rgb(24 38 31 / 22%); overflow: auto; overscroll-behavior: contain; }
body.visual-refresh dialog::backdrop { background: rgb(30 43 36 / 38%); backdrop-filter: blur(4px); }
body.visual-refresh dialog h2 { font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 750; line-height: 1.25; letter-spacing: -.025em; padding-right: 35px; }
body.visual-refresh dialog p { color: var(--vf-muted); font-size: calc(.98rem * var(--vf-type)); line-height: 1.8; }
body.visual-refresh .dialog-close { width: 44px; height: 44px; min-width: 44px; top: 10px; right: 10px; border: 1px solid var(--vf-line); border-radius: 50%; background: var(--vf-canvas); color: var(--vf-ink); }
body.visual-refresh .dialog-actions { gap: 10px; margin-top: 23px; }
body.visual-refresh .dialog-actions .btn { min-height: 48px; }
body.visual-refresh dialog.age-dialog { width: min(960px, calc(100vw - 32px)); }
body.visual-refresh .age-dialog .age-card-art { max-height: none; }
body.visual-refresh .toast { max-width: calc(100vw - 24px); border-radius: 14px; padding: 13px 17px; font-size: calc(.9rem * var(--vf-type)); line-height: 1.55; bottom: calc(14px + env(safe-area-inset-bottom)); }

/* Deliberate interaction, never ambient motion. */
body.visual-refresh :is(.floaty, .sway, .eye-blink) { animation: none !important; }
body.visual-refresh :is(.world-card, .picture-card, .age-card, .btn):hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
  body.visual-refresh .world-card:hover { transform: translateY(-3px); border-color: var(--vf-accent); box-shadow: var(--vf-shadow-raised); }
  body.visual-refresh .age-card:hover { transform: translateY(-3px); border-color: var(--card-ink); box-shadow: var(--vf-shadow-raised); }
  body.visual-refresh .picture-card:hover { transform: translateY(-2px); border-color: var(--vf-accent); }
  body.visual-refresh .btn:not(:disabled):hover { transform: translateY(-1px); }
  body.visual-refresh .btn.primary:not(:disabled):hover { background: var(--vf-accent-strong); }
  body.visual-refresh .btn.outline:not(:disabled):hover,
  body.visual-refresh .btn.subtle:not(:disabled):hover { background: var(--vf-surface); }
  body.visual-refresh .nav-link:hover { color: var(--vf-accent-strong); background: var(--vf-surface); }
}

/* Large screens use a consistent readable scale rather than another enlargement. */
@media (min-width: 936px) {
  body.visual-refresh:not(.activity-mode) .layout { grid-template-columns: var(--vf-sidebar) minmax(0, 1fr); }
  body.visual-refresh:not(.activity-mode) .sidebar { width: var(--vf-sidebar); padding: 32px 18px 24px; }
  body.visual-refresh.large-text:not(.activity-mode) .layout { grid-template-columns: calc(var(--vf-sidebar) * 1.18) minmax(0, 1fr); }
  body.visual-refresh.large-text:not(.activity-mode) .sidebar { width: calc(var(--vf-sidebar) * 1.18); }
  body.visual-refresh .age-hero { grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); }
  body.visual-refresh .age-hero .hero-art { align-self: center; }
  body.visual-refresh .meet-parea-section:not(.meet-parea-returning) { padding: 28px; gap: 30px; }
}
@media (min-width: 1401px) and (max-width: 1599px) {
  body.visual-refresh { --vf-sidebar: 248px; }
}
@media (min-width: 1600px) {
  body.visual-refresh { --vf-sidebar: 248px; }
  body.visual-refresh .page { padding-top: 36px; }
  body.visual-refresh .age-hero { padding: 38px 42px; gap: 30px; }
  body.visual-refresh .age-hero .landscape.age-landscape { max-height: 420px; }
}
@media (min-width: 936px) and (max-width: 1100px) {
  body.visual-refresh { --vf-sidebar: 194px; }
  body.visual-refresh:not(.activity-mode) .sidebar { padding-inline: 12px; }
  body.visual-refresh .brand { gap: 7px; }
  body.visual-refresh .brand-name { font-size: 23px; }
  body.visual-refresh .nav-link { padding-inline: 10px; gap: 8px; font-size: calc(.85rem * var(--vf-type)); }
  body.visual-refresh .page { padding-inline: 24px; }
  body.visual-refresh .age-hero { padding: 24px; gap: 18px; }
  body.visual-refresh .age-hero .hero-copy h1 { font-size: 2.45rem; }
  body.visual-refresh .hero-actions { gap: 8px; }
}
@media (max-width: 1150px) {
  body.visual-refresh .age-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.visual-refresh :is(.voice-welcome, .music-welcome, .sound-entry) { grid-template-columns: 46px minmax(0, 1fr); }
  body.visual-refresh :is(.voice-welcome-actions, .sound-entry-actions),
  body.visual-refresh .music-welcome > .btn { grid-column: 1 / -1; max-width: none; justify-self: stretch; }
  body.visual-refresh .voice-welcome-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  body.visual-refresh .sound-entry-actions { justify-content: flex-start; }
}

/* Keep the existing mobile introduction and hidden duplicate hero at 935px. */
@media (max-width: 935px) {
  body.visual-refresh .meet-parea-section.meet-parea-mobile-hero {
    width: 100%; max-width: 680px; padding: 14px 18px 22px; gap: 0;
    border-radius: 26px; margin: 0 auto 22px;
    background: linear-gradient(145deg, var(--vf-surface), var(--vf-paper) 84%);
  }
  body.visual-refresh .meet-parea-mobile-hero .meet-parea-illustration { width: 100%; background: none; min-height: 0; }
  body.visual-refresh .meet-parea-mobile-hero .meet-parea-scene { width: 100%; max-width: 510px; }
  body.visual-refresh .meet-parea-mobile-hero .meet-parea-scene .landscape { width: 100%; height: auto; max-height: none; aspect-ratio: 530 / 420; }
  body.visual-refresh .meet-parea-mobile-hero .meet-parea-copy { max-width: 520px; text-align: center; }
  body.visual-refresh .meet-parea-mobile-hero .meet-parea-copy h2 { font-size: clamp(1.65rem, 4.8vw, 2.1rem); margin: 9px 0; line-height: 1.2; }
  body.visual-refresh .meet-parea-mobile-hero .meet-parea-copy .eyebrow { font-size: calc(.66rem * var(--vf-type)); letter-spacing: .12em; }
  body.visual-refresh .meet-parea-mobile-hero .meet-parea-copy p { font-size: calc(.95rem * var(--vf-type)); line-height: 1.7; margin: 0 auto 16px; }
  body.visual-refresh .meet-parea-mobile-hero .meet-parea-button { width: 100%; max-width: 340px; min-height: 48px; font-size: calc(.95rem * var(--vf-type)); }
  body.visual-refresh .home-page .age-hero { grid-template-columns: minmax(0, 1fr); padding: 25px; gap: 0; }
  body.visual-refresh .home-page .age-hero > .hero-art,
  body.visual-refresh .home-page .age-hero .hero-actions [data-action="meet"] { display: none; }
  body.visual-refresh .home-page .age-hero .hero-copy h1 { max-width: 18ch; font-size: clamp(2.05rem, 4.7vw, 3rem); }
  body.visual-refresh .home-page .hero p { max-width: 58ch; }
  body.visual-refresh .hero-actions { max-width: 100%; }
  body.visual-refresh .world-grid { gap: 16px; }
}
@media (max-width: 820px) {
  body.visual-refresh .page { padding: 24px 22px calc(30px + env(safe-area-inset-bottom)); }
  body.visual-refresh .topbar { padding: 12px 22px; }
  body.visual-refresh .sidebar { border-bottom: 1px solid var(--vf-line); padding: 15px 22px; }
  body.visual-refresh .sidebar .brand-sub { display: none; }
  body.visual-refresh .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.visual-refresh .world-card-body { padding: 19px; }
  body.visual-refresh .world-art { height: 170px; min-height: 170px; }
  body.visual-refresh .catalog-tools { gap: 12px; padding: 16px; }
  body.visual-refresh .catalog-filters { flex-wrap: wrap; width: 100%; }
  body.visual-refresh .catalog-search { flex: 1 1 240px; }
  body.visual-refresh .catalog-theme { flex: 1 1 180px; }
  body.visual-refresh .activity-page { padding-inline: 20px; }
  body.visual-refresh .play-area { padding: 24px 20px; }
  body.visual-refresh .picture-options { gap: 14px; }
  body.visual-refresh .picture-card { min-height: 205px; padding-inline: 12px; }
  body.visual-refresh .picture-card .object-picture { height: 132px; }
  body.visual-refresh .picture-card .picture-word { font-size: calc(1.05rem * var(--vf-type)); }
  body.visual-refresh .activity-controls { flex-wrap: wrap; }
  body.visual-refresh .activity-controls > .btn { min-width: 190px; }
}
@media (max-width: 650px) {
  body.visual-refresh .sidebar { padding: calc(10px + env(safe-area-inset-top)) 14px 10px; gap: 8px; background: var(--vf-paper); box-shadow: 0 3px 16px rgb(40 56 42 / 5%); }
  body.visual-refresh .brand { padding: 0; gap: 7px; }
  body.visual-refresh .brand-mark { width: 30px; height: 30px; border-radius: 10px; }
  body.visual-refresh .brand-name { font-size: 20px; letter-spacing: .07em; }
  body.visual-refresh .nav { gap: 2px; }
  body.visual-refresh .nav-link { min-width: 44px; min-height: 44px; padding: 10px; border-radius: 12px; }
  body.visual-refresh .nav-link .icon { width: 20px; height: 20px; }
  body.visual-refresh .topbar { padding: 8px 12px 11px; }
  body.visual-refresh .top-actions { flex-wrap: wrap; gap: 6px; overflow: visible; justify-content: flex-end; padding: 2px 0; }
  body.visual-refresh :is(.welcome-top-link, .age-top-button) { font-size: calc(.8rem * var(--vf-type)); padding-inline: 10px; }
  body.visual-refresh .topbar.has-public-version > .public-version { font-size: calc(.72rem * var(--vf-type)); }
  body.visual-refresh .page { padding: 20px 16px calc(26px + env(safe-area-inset-bottom)); }
  body.visual-refresh .age-banner { gap: 10px; padding: 12px 14px; font-size: calc(.88rem * var(--vf-type)); margin-bottom: 18px; }
  body.visual-refresh .age-banner button { flex: none; font-size: calc(.8rem * var(--vf-type)); }
  body.visual-refresh .age-intro > h1 { font-size: clamp(2.05rem, 8vw, 2.7rem); line-height: 1.15; margin: 17px 0; }
  body.visual-refresh .age-intro > p { font-size: calc(1rem * var(--vf-type)); line-height: 1.75; }
  body.visual-refresh .home-page .age-hero { padding: 22px; border-radius: 24px; margin-bottom: 23px; }
  body.visual-refresh .home-page .age-hero .hero-copy h1 { font-size: clamp(2rem, 8vw, 2.6rem); max-width: 15ch; }
  body.visual-refresh .hero p { font-size: calc(.98rem * var(--vf-type)); margin: 16px 0 21px; }
  body.visual-refresh .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 10px; }
  body.visual-refresh .hero-actions .btn.primary { width: 100%; min-height: 52px; }
  body.visual-refresh .hero-note { font-size: calc(.78rem * var(--vf-type)); line-height: 1.6; margin-top: 16px; }
  body.visual-refresh :is(.sound-entry, .voice-welcome, .music-welcome) { padding: 18px; border-radius: 21px; gap: 13px; margin-bottom: 21px; }
  body.visual-refresh .sound-entry-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  body.visual-refresh .sound-entry-actions .primary { grid-column: 1 / -1; width: 100%; min-height: 50px; }
  body.visual-refresh .voice-welcome-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
  body.visual-refresh .voice-welcome-actions .btn { width: 100%; }
  body.visual-refresh .voice-welcome-actions .link-btn { justify-content: center; }
  body.visual-refresh :is(.voice-welcome-copy h2, .music-welcome h2) { font-size: calc(1.15rem * var(--vf-type)); }
  body.visual-refresh :is(.voice-welcome-copy p, .music-welcome p, .sound-entry-copy p) { font-size: calc(.88rem * var(--vf-type)); }
  body.visual-refresh .section-heading { flex-wrap: wrap; align-items: flex-start; gap: 8px 18px; margin: 26px 0 16px; }
  body.visual-refresh .section-heading h2 { font-size: 1.7rem; }
  body.visual-refresh .section-heading .link-btn { min-height: 44px; font-size: calc(.85rem * var(--vf-type)); }
  body.visual-refresh .world-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  body.visual-refresh .world-art { height: 180px; min-height: 180px; }
  body.visual-refresh .world-card h3 { font-size: calc(1.18rem * var(--vf-type)); }
  body.visual-refresh .world-card p { font-size: calc(.95rem * var(--vf-type)); }
  body.visual-refresh .page-header { flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
  body.visual-refresh .page-header h1 { font-size: clamp(1.95rem, 7.5vw, 2.4rem); line-height: 1.2; }
  body.visual-refresh .page-header p { font-size: calc(.98rem * var(--vf-type)); }
  body.visual-refresh .catalog-tools { display: grid; grid-template-columns: minmax(0, 1fr); padding: 14px; border-radius: 19px; }
  body.visual-refresh .catalog-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 7px; }
  body.visual-refresh .catalog-filter { width: 100%; min-width: 0; min-height: 46px; font-size: calc(.85rem * var(--vf-type)); padding: 10px 8px; }
  body.visual-refresh .catalog-search, body.visual-refresh .catalog-theme { width: 100%; }
  body.visual-refresh .catalog-theme { gap: 5px; font-size: calc(.82rem * var(--vf-type)); }
  body.visual-refresh .catalog-summary { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: calc(.85rem * var(--vf-type)); }
  body.visual-refresh .catalog-pagination { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; text-align: center; }
  body.visual-refresh .catalog-pagination .btn { width: 100%; min-height: 48px; }
  body.visual-refresh .activity-page { padding: 8px 12px calc(25px + env(safe-area-inset-bottom)); }
  body.visual-refresh.activity-mode .topbar { padding: 8px 12px; }
  body.visual-refresh .activity-top { gap: 8px; padding-bottom: 18px; flex-wrap: wrap; }
  body.visual-refresh .activity-top .btn { font-size: calc(.82rem * var(--vf-type)); padding-inline: 11px; }
  body.visual-refresh .activity-top .back-link { font-size: calc(.82rem * var(--vf-type)); }
  body.visual-refresh .activity-intro { margin: 3px 3px 18px; }
  body.visual-refresh .activity-intro h1 { font-size: clamp(1.7rem, 7vw, 2.15rem); line-height: 1.22; }
  body.visual-refresh .activity-intro p { font-size: calc(.92rem * var(--vf-type)); }
  body.visual-refresh .play-area { padding: 18px 12px; border-radius: 23px; }
  body.visual-refresh .companion-prompt { gap: 10px; align-items: flex-start; margin-bottom: 22px; }
  body.visual-refresh .companion-prompt > .mini-robot { width: 58px; height: 73px; margin-top: 4px; }
  body.visual-refresh .prompt-bubble { padding: 15px; border-radius: 18px 18px 18px 4px; }
  body.visual-refresh .prompt-bubble p { font-size: calc(1.12rem * var(--vf-type)); line-height: 1.5; }
  body.visual-refresh .prompt-bubble small { font-size: calc(.8rem * var(--vf-type)); }
  body.visual-refresh .picture-options { gap: 13px; }
  body.visual-refresh .picture-card { padding: 14px 9px 16px; min-height: 190px; border-radius: 19px; }
  body.visual-refresh .picture-card .object-picture { height: 118px; margin: 10px auto; }
  body.visual-refresh .picture-card .picture-word { font-size: calc(1.05rem * var(--vf-type)); line-height: 1.38; }
  body.visual-refresh .picture-number { font-size: calc(.69rem * var(--vf-type)); top: 9px; left: 10px; }
  body.visual-refresh .selection-badge { width: 25px; height: 25px; top: 7px; right: 7px; }
  body.visual-refresh .selection-response { min-height: 64px; padding-top: 18px; font-size: calc(.9rem * var(--vf-type)); }
  body.visual-refresh .activity-controls { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  body.visual-refresh .support-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  body.visual-refresh .support-controls .btn { min-width: 0; width: 100%; min-height: 48px; padding: 10px 9px; font-size: calc(.83rem * var(--vf-type)); }
  body.visual-refresh .support-controls .btn:first-child { grid-column: 1 / -1; }
  body.visual-refresh .activity-controls > .btn { width: 100%; min-height: 54px; font-size: calc(.98rem * var(--vf-type)); }
  body.visual-refresh .session-footer { margin: 18px 3px 0; font-size: calc(.83rem * var(--vf-type)); line-height: 1.7; }
  body.visual-refresh .story-slots { gap: 6px; }
  body.visual-refresh .story-slot { padding: 8px 6px; font-size: calc(.78rem * var(--vf-type)); line-height: 1.5; }
  body.visual-refresh .complete-scene { width: min(100%, 270px); margin-bottom: 14px; }
  body.visual-refresh .complete-view h1 { font-size: clamp(1.9rem, 7.7vw, 2.4rem); }
  body.visual-refresh .bridge-card { padding: 20px 17px; gap: 13px; }
  body.visual-refresh .complete-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.visual-refresh .complete-navigation .btn { min-height: 64px; padding: 12px 9px; font-size: calc(.84rem * var(--vf-type)); }
  body.visual-refresh .panel { padding: 20px 17px; border-radius: 20px; }
  body.visual-refresh .parent-tabs { gap: 6px; }
  body.visual-refresh .parent-tab { min-height: 46px; font-size: calc(.85rem * var(--vf-type)); }
  body.visual-refresh .data-buttons { gap: 9px; }
  body.visual-refresh .data-buttons .btn { margin: 0; }
  body.visual-refresh dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 25px 18px 20px; border-radius: 23px; }
  body.visual-refresh dialog.age-dialog { width: calc(100vw - 24px); }
  body.visual-refresh dialog h2 { padding-right: 34px; font-size: 1.65rem; }
  body.visual-refresh .dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
  body.visual-refresh .dialog-actions .btn { width: 100%; min-height: 50px; }
  body.visual-refresh .footer { flex-wrap: wrap; padding-top: 24px; }
}
@media (max-width: 540px) {
  body.visual-refresh .age-grid { grid-template-columns: minmax(0, 1fr); gap: 13px; margin: 23px 0; }
  body.visual-refresh .age-card { grid-template-columns: 108px minmax(0, 1fr); column-gap: 15px; padding: 15px; border-radius: 22px; }
  body.visual-refresh .age-card-art { align-self: center; width: 100%; margin: 0; border-radius: 16px; }
  body.visual-refresh .age-number { padding: 2px 8px; margin-bottom: 5px; font-size: calc(.74rem * var(--vf-type)); }
  body.visual-refresh .age-card strong { font-size: calc(1.25rem * var(--vf-type)); line-height: 1.22; }
  body.visual-refresh .age-card small { font-size: calc(.8rem * var(--vf-type)); line-height: 1.6; margin-top: 7px; }
  body.visual-refresh .age-card-count { font-size: calc(.74rem * var(--vf-type)); padding-top: 9px; }
  body.visual-refresh .age-dialog .age-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.visual-refresh .age-dialog .age-card { padding: 12px; }
  body.visual-refresh .age-dialog .age-card-art { margin-bottom: 10px; }
  body.visual-refresh .age-dialog .age-card strong { font-size: calc(1.1rem * var(--vf-type)); line-height: 1.3; }
  body.visual-refresh .picture-options { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
  body.visual-refresh .picture-options.count-3 .picture-card:last-child { grid-column: 1 / -1; width: calc(50% - 6.5px); justify-self: center; }
  body.visual-refresh .picture-options.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.visual-refresh .picture-options.count-1 { grid-template-columns: minmax(0, 240px); justify-content: center; }
}
@media (max-width: 380px) {
  body.visual-refresh .sidebar { padding-inline: 10px; gap: 5px; }
  body.visual-refresh .brand { gap: 6px; }
  body.visual-refresh .brand-mark { width: 28px; height: 28px; }
  body.visual-refresh .brand-name { font-size: 17px; letter-spacing: .055em; }
  body.visual-refresh .nav { gap: 0; }
  body.visual-refresh .nav-link { padding: 10px; }
  body.visual-refresh .page { padding-inline: 12px; }
  body.visual-refresh .topbar { padding-inline: 9px; }
  body.visual-refresh .age-card { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; padding: 13px; }
  body.visual-refresh .age-card strong { font-size: calc(1.16rem * var(--vf-type)); }
  body.visual-refresh .meet-parea-section.meet-parea-mobile-hero { padding: 10px 13px 18px; border-radius: 23px; }
  body.visual-refresh .meet-parea-mobile-hero .meet-parea-copy p { font-size: calc(.9rem * var(--vf-type)); }
  body.visual-refresh .home-page .age-hero { padding: 19px; }
  body.visual-refresh :is(.sound-entry, .voice-welcome, .music-welcome) { padding: 15px; gap: 10px; }
  body.visual-refresh .sound-entry-actions { grid-template-columns: minmax(0, 1fr); }
  body.visual-refresh .sound-entry-actions .subtle, body.visual-refresh .sound-help { justify-self: center; }
  body.visual-refresh .activity-page { padding-inline: 9px; }
  body.visual-refresh .play-area { padding-inline: 10px; }
  body.visual-refresh .companion-prompt { gap: 8px; }
  body.visual-refresh .companion-prompt > .mini-robot { width: 48px; height: 64px; }
  body.visual-refresh .prompt-bubble { padding: 13px; }
  body.visual-refresh .prompt-bubble p { font-size: calc(1.04rem * var(--vf-type)); }
  body.visual-refresh .picture-card .picture-word { font-size: calc(1rem * var(--vf-type)); }
  body.visual-refresh .support-controls { grid-template-columns: minmax(0, 1fr); }
  body.visual-refresh .support-controls .btn:first-child { grid-column: 1; }
  body.visual-refresh .complete-nav-back, body.visual-refresh .complete-nav-step { grid-template-columns: minmax(0, 1fr); }
  body.visual-refresh .complete-navigation .btn { min-height: 50px; }
}

/* Accessibility modes increase actual text sizes without fixed-height clipping. */
body.visual-refresh.large-text { --vf-type: 1.18; }
body.visual-refresh.large-text .hero .welcome-tag { white-space: normal; }
body.visual-refresh.large-text .age-card strong { overflow-wrap: anywhere; }
body.visual-refresh.large-text .picture-card .picture-word { font-size: 1.4rem; }
body.visual-refresh.large-text .prompt-bubble p { font-size: 1.5rem; }
body.visual-refresh.large-text .hero-copy h1 { max-width: 100%; }
body.visual-refresh.large-text :is(.top-actions, .hero-actions, .activity-top, .complete-buttons, .voice-actions) { flex-wrap: wrap; }
@media (max-width: 650px) {
  body.visual-refresh.large-text .age-dialog .age-grid { grid-template-columns: minmax(0, 1fr); }
  body.visual-refresh.large-text .age-dialog .age-card { gap: 5px; }
  body.visual-refresh.large-text .age-dialog .age-card-art { max-width: 180px; margin-inline: auto; }
  body.visual-refresh.large-text .prompt-bubble p { font-size: 1.3rem; }
  body.visual-refresh.large-text .picture-card .picture-word { font-size: 1.24rem; }
  body.visual-refresh.large-text .age-banner { flex-wrap: wrap; }
}
body.visual-refresh.quiet *, body.visual-refresh.quiet *::before, body.visual-refresh.quiet *::after,
body.visual-refresh.reduced-motion *, body.visual-refresh.reduced-motion *::before, body.visual-refresh.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
body.visual-refresh.quiet :is(.btn, .world-card, .age-card, .picture-card):hover,
body.visual-refresh.reduced-motion :is(.btn, .world-card, .age-card, .picture-card):hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  body.visual-refresh *, body.visual-refresh *::before, body.visual-refresh *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  body.visual-refresh :is(.btn, .world-card, .age-card, .picture-card):hover { transform: none !important; }
}
@media (forced-colors: active) {
  body.visual-refresh :is(.btn, .world-card, .age-card, .picture-card, .catalog-filter, .nav-link.active) { border: 1px solid ButtonText; }
  body.visual-refresh .picture-card[aria-pressed="true"], body.visual-refresh .age-card.selected { outline: 3px solid Highlight; outline-offset: 2px; }
  body.visual-refresh :where(button, a, input, select, textarea):focus-visible { outline-color: Highlight; }
}
@media print {
  body.visual-refresh { background: #fff; color: #222; }
  body.visual-refresh :is(.age-hero, .world-card, .picture-card, .meet-parea-section, .panel, .bridge-card) { box-shadow: none; }
}