/* Sims 4 AI Chat landing page.
   Dusk-lit dark scenes alternate with cream "game UI" panels. Speech bubbles
   copy the in-game ones (white squircle, curved tail, name pill; see the
   bubble block below). Every animation is switched off
   under prefers-reduced-motion at the bottom of this file. */

@property --lx { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@property --ly { syntax: '<percentage>'; inherits: false; initial-value: 40%; }

:root {
  --bg: #0f0b16;
  --bg-2: #171020;
  --line: rgba(255, 232, 214, .12);
  --text: #f7efe6;
  --text-2: #d3c6d3;
  --text-3: #ad9fb3;
  --cream: #fbf4ea;
  --cream-2: #f2e6d5;
  --ink: #2a2236;
  --ink-2: #554a63;
  --green: #4fd35f;
  --green-hi: #8bf08b;
  --green-deep: #1d7f2d;
  --green-ink: #0b2410;
  --amber: #ffc46b;
  --rose: #ff86a6;
  --rose-ink: #b02f5c;
  --ui-navy: #22386e;
  --ui-blue: #3460b8;
  --bubble-ink: #3f4452;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-xl: clamp(28px, 4vw, 52px);
  --wrap: 1200px;
  interpolate-size: allow-keywords;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html.i18n-pending body { visibility: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
code { font-family: var(--mono); font-size: .86em; background: rgba(42, 34, 54, .08); padding: .1em .4em; border-radius: 6px; overflow-wrap: anywhere; }
b, strong { font-weight: 800; }
section[id] { scroll-margin-top: 72px; }
::selection { background: rgba(79, 211, 95, .35); color: #fff; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 8px; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--amber); color: var(--ink); font-weight: 800; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { left: 12px; }
.mono { font-family: var(--mono); }
.center { text-align: center; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* ---------- Type ---------- */
.display { font-weight: 900; letter-spacing: -.035em; line-height: .98; text-wrap: balance; overflow-wrap: break-word; }
.display em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 650;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  color: var(--amber);
  padding-right: .06em;
}
h1.display { font-size: min(clamp(3.1rem, .8rem + 5.6vw, 6.6rem), 19.5cqi); }
/* The hero accent is one short word or phrase: keep it whole ("наконец-то", "ついに"). */
h1.display em { white-space: nowrap; }
@media (max-width: 359px) { h1.display em { white-space: normal; } }

/* Line breaking per script. Japanese breaks between phrases instead of
   mid-word; Korean keeps words whole; German labels may hyphenate. */
:lang(ja) { word-break: auto-phrase; line-break: strict; }
:lang(ja) .display, :lang(ko) .display, :lang(zh) .display { line-height: 1.14; letter-spacing: -.01em; }
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(de) .pie-opt, :lang(de) .simcard-rows dt, :lang(de) .tier-tag, :lang(de) .meter-label, :lang(de) .qa summary { hyphens: auto; }
.h2 { font-size: clamp(2.35rem, 1.3rem + 3.9vw, 4.6rem); }
.h3 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
.lede { font-size: clamp(1.06rem, .98rem + .4vw, 1.3rem); color: var(--text-2); line-height: 1.55; text-wrap: pretty; }
.fine { font-size: .9rem; color: var(--text-3); margin-top: 18px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--green); margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 9px; height: 12px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 96'%3E%3Cpolygon points='36,3 6,33 36,43' fill='%239DF59D'/%3E%3Cpolygon points='36,3 66,33 36,43' fill='%234FD35F'/%3E%3Cpolygon points='6,33 36,43 36,93' fill='%233CC155'/%3E%3Cpolygon points='66,33 36,43 36,93' fill='%231E8C30'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section-head { text-align: center; max-width: 860px; margin: 0 auto clamp(44px, 6vw, 80px); }
.section-head .lede { margin: 22px auto 0; max-width: 680px; }
.section-head.is-left { text-align: left; margin-left: 0; }
.section-head.is-left .lede { margin-left: 0; }

/* Cream panels: game-UI paper floating on the dusk page */
.panel {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  margin: 0 clamp(8px, 1.6vw, 24px);
  border-radius: var(--radius-xl);
  padding: clamp(80px, 10vw, 136px) 0;
}
.panel .display em { color: var(--rose-ink); }
.panel .lede { color: var(--ink-2); }
.panel .fine { color: #6c6079; }
.panel .eyebrow { color: var(--green-deep); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font); font-weight: 900; font-size: 1rem; line-height: 1.1;
  padding: .8em 1.35em; border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--spring), box-shadow .3s ease, background-color .2s ease;
}
.btn-go {
  color: var(--green-ink);
  background: linear-gradient(180deg, #79e886 0%, #45c95a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .12), 0 14px 34px -12px rgba(79, 211, 95, .7);
}
.btn-go:hover { transform: translateY(-2px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .12), 0 20px 44px -12px rgba(79, 211, 95, .85); }
.btn-go:active { transform: translateY(0) scale(.98); }
.btn-ghost { color: var(--text); background: rgba(255, 240, 225, .05); box-shadow: inset 0 0 0 1.5px rgba(255, 232, 214, .28); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 240, 225, .1); }
.panel .btn-ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(42, 34, 54, .28); }
.btn-sm { font-size: .92rem; padding: .62em 1.1em; }
.btn-lg { font-size: 1.08rem; padding: .95em 1.55em; }
.btn-xl { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); padding: 1.05em 2em; }
.btn-block { width: 100%; }
@media (max-width: 400px) { .btn { max-width: 100%; white-space: normal; text-align: center; } }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .35s ease, box-shadow .35s ease; }
.nav.is-scrolled { background: rgba(15, 11, 22, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 14px clamp(16px, 3vw, 32px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 1.12rem; letter-spacing: -.01em; white-space: nowrap; }
.brand b { color: var(--green); }
.brand-mark { filter: drop-shadow(0 0 10px rgba(79, 211, 95, .55)); transition: transform .5s var(--spring); }
.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.1); }
.nav-links { display: none; margin-left: auto; gap: 28px; }
.nav-links a { text-decoration: none; font-weight: 800; font-size: .95rem; color: var(--text-2); transition: color .2s; position: relative; }
.nav-links a:hover, .nav-links a.is-active { color: var(--text); }
.nav-links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--green); }
.nav-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lang { position: relative; }
.lang-btn svg { flex: none; }
.lang-btn { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 0; background: none; color: var(--text-2); font-weight: 800; font-size: .85rem; cursor: pointer; }
.lang-btn:hover { color: var(--text); background: rgba(255, 240, 225, .06); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 190px; max-height: 340px; overflow: auto; padding: 6px; border-radius: 16px; background: #1e1629; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -20px rgba(0, 0, 0, .8); z-index: 60; }
.lang-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font-weight: 700; font-size: .92rem; cursor: pointer; }
.lang-item:hover, .lang-item.is-current { color: var(--green-hi); background: rgba(79, 211, 95, .1); }
.nav-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 0; background: rgba(255, 240, 225, .06); cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease), background .2s; }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-mobile { background: rgba(15, 11, 22, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8); padding: 8px clamp(16px, 3vw, 32px) 16px; }
.nav-mobile a { display: block; padding: 14px 4px; text-decoration: none; font-weight: 800; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
.nav-mobile a:last-child { border-bottom: 0; }
.brand-mark { flex: none; }
@media (max-width: 420px) { .nav .btn-sm { padding: .6em .9em; } .brand-word { font-size: 1rem; } .nav-inner { gap: 10px; } }
/* Small phones: the language code stays, the globe goes; below 375px the
   hero's own download button and the sticky pill cover the nav one. */
@media (max-width: 400px) { .lang-btn svg { display: none; } .lang-btn { padding: 8px 6px; } .nav-tools { gap: 6px; } }
@media (max-width: 374px) { .nav-tools .btn-go { display: none; } }
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-tools { margin-left: 12px; }
  .nav-toggle, .nav-mobile { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(104px, 14vh, 150px) 0 clamp(72px, 9vw, 120px); overflow: hidden; isolation: isolate; }
.hero-sky {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1.2px 1.2px at 12% 14%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 31% 8%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.4px 1.4px at 48% 22%, rgba(255, 236, 200, .6), transparent 60%),
    radial-gradient(1px 1px at 66% 6%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.2px 1.2px at 84% 16%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 93% 30%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(90% 60% at 72% 108%, rgba(255, 128, 84, .38), transparent 62%),
    radial-gradient(55% 45% at 78% 62%, rgba(255, 196, 107, .16), transparent 70%),
    radial-gradient(60% 50% at 8% 90%, rgba(79, 211, 95, .07), transparent 70%),
    linear-gradient(180deg, #0f0b16 0%, #181026 42%, #26142d 72%, #341a2e 100%);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: -1; background: linear-gradient(180deg, transparent, var(--bg)); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); align-items: center; }
.hero-copy { max-width: 640px; }
.hero-sub { margin-top: 26px; font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); color: var(--text-2); max-width: 34em; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; font-size: .93rem; font-weight: 700; color: var(--text-2); }
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { color: var(--green); flex: none; }
@media (max-width: 1023px) {
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy > .eyebrow { order: 1; justify-self: start; }
  .hero-copy > h1 { order: 2; }
  .hero-stage { order: 3; margin-top: 40px; max-width: 560px; width: 100%; justify-self: center; }
  .hero-sub { order: 4; margin-top: 30px; }
  .hero-ctas { order: 5; }
  .hero-trust { order: 6; }
}
@media (min-width: 1024px) {
  .hero-copy { container-type: inline-size; }
  .hero { min-height: min(100vh, 1000px); display: flex; align-items: center; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
}

/* The stage: a real frame from the recording, with live bubbles over it */
.hero-stage { position: relative; margin: 0; }
.stage-wrap { position: relative; }
.stage {
  position: relative; aspect-ratio: 932 / 1010; border-radius: 30px; overflow: hidden; isolation: isolate;
  background: #1a1220;
  box-shadow: 0 0 0 1px rgba(255, 232, 214, .1), 0 60px 110px -40px rgba(0, 0, 0, .85), 0 30px 140px -30px rgba(255, 140, 90, .35);
  container-type: inline-size;
}
.stage-cam { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform 1.8s var(--ease); }
.stage-img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 86.14%; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%); mask-image: linear-gradient(180deg, transparent 0, #000 13%);
}
.stage-light {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--lx) var(--ly), rgba(255, 214, 160, .75), rgba(255, 214, 160, 0) 34%);
  transition: --lx 1.6s var(--ease), --ly 1.6s var(--ease);
}
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(200deg, rgba(255, 170, 100, .22), rgba(110, 50, 130, .2)),
    radial-gradient(130% 95% at 50% 48%, transparent 58%, rgba(15, 11, 22, .7) 100%);
  mix-blend-mode: multiply;
}
.stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(12, 8, 20, 0); transition: background .5s ease; }
.stage.is-dim::after { background: rgba(12, 8, 20, .55); }
.stage-sim { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; }
.stage-bubbles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.stage-bubbles .bubble { position: absolute; }
.stage-dialog { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(86%, 430px); }
.stage-toggle {
  position: absolute; right: 16px; bottom: 16px; z-index: 7;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(15, 11, 22, .6); border: 1px solid rgba(255, 232, 214, .25); color: var(--text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: .75; transition: opacity .2s, transform .25s var(--spring);
}
.stage-toggle:hover { opacity: 1; transform: scale(1.08); }
.stage-toggle .ico-play { display: none; }
.stage-toggle[aria-pressed="true"] .ico-play { display: block; }
.stage-toggle[aria-pressed="true"] .ico-pause { display: none; }
.stage-caption { margin-top: 18px; font-size: .88rem; color: var(--text-3); text-align: center; }
.stage-caption a { color: var(--text-2); font-weight: 800; }

/* ---------- In-game speech bubble ----------
   Copies the game's own balloon (flash/src/s4ai/Bubble.as): a white squircle that
   fades to a hint of the sim's colour at the bottom, a curved tail, and the first
   name on a gradient pill across the top edge. Mood looks (.m-*) tint it the way
   MoodFx does: .q is the quiet everyday look, .big the one line that carries it. */
@property --ar { syntax: '<length>'; inherits: false; initial-value: 9px; }
.bubble {
  --h: 202;
  --acc: hsl(var(--h) 62% 50%);
  --acc-hi: hsl(var(--h) 72% 63%);
  --mc: #fff; --mt: 0; --mb: 0; --mbd: 0; --q: 1; --bw: 1px; --aura: transparent; --aa: .5;
  --edge: color-mix(in srgb, var(--mc) calc(var(--mbd) * var(--q) * 100%), #c8c6d4);
  --top: color-mix(in srgb, var(--mc) calc(var(--mt) * var(--q) * 150%), #fff);
  --bot: color-mix(in srgb, var(--mc) calc(var(--mb) * var(--q) * 150%), color-mix(in srgb, var(--acc) 12%, #f0f0f5));
  position: relative; display: block; width: max-content; max-width: min(78%, 300px);
  padding: 15px 20px 12px; border-radius: 22px;
  background: linear-gradient(180deg, var(--top), var(--bot));
  border: var(--bw) solid var(--edge);
  color: #343b47;
  font-size: 14.5px; font-weight: 700; line-height: 1.34; text-align: left;
  filter: drop-shadow(0 3px 5px rgba(8, 4, 20, .4));
}
.bubble::before, .bubble::after { content: ""; position: absolute; left: var(--tail, 50%); transform: translateX(-50%); }
.bubble::before { bottom: -15px; width: 22px; height: 17px; background: var(--edge); clip-path: path("M0 0 C5 0 8 7 11 17 C14 7 17 0 22 0 Z"); }
.bubble::after { bottom: -13.5px; width: 18px; height: 15px; background: var(--bot); clip-path: path("M0 0 C4 0 6.5 6 9 15 C11.5 6 14 0 18 0 Z"); }
.bubble-name {
  position: absolute; left: 16px; top: -10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 11px 2px; border-radius: 99px; white-space: nowrap;
  font-size: 11.5px; font-weight: 900; font-variant-caps: small-caps; letter-spacing: .03em; line-height: 1.35;
  color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, var(--acc-hi), var(--acc)); border: 1.5px solid rgba(255, 255, 255, .95);
}
.bubble-text { display: block; overflow-wrap: anywhere; }
.bubble-wave { display: none; align-items: center; gap: 2px; height: 9px; }
.bubble-wave i { display: block; width: 2.5px; height: 100%; border-radius: 2px; background: #fff; transform: scaleY(.3); animation: wave .9s ease-in-out infinite; }
.bubble-wave i:nth-child(2) { animation-delay: .12s; } .bubble-wave i:nth-child(3) { animation-delay: .24s; } .bubble-wave i:nth-child(4) { animation-delay: .36s; }
.bubble.is-speaking .bubble-wave { display: inline-flex; }
@keyframes wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.bubble .dots { display: inline-flex; gap: 4px; padding: 4px 0 2px; }
.bubble .dots i { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--h) 30% 55%); animation: dots 1s ease-in-out infinite; }
.bubble .dots i:nth-child(2) { animation-delay: .15s; } .bubble .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-4px); opacity: 1; } }

/* Animated bubbles inflate from a small squashed balloon, breathe while held and
   bounce out. Hidden until the scene player brings them on. */
.stage-bubbles .bubble, .room-bubbles .bubble {
  opacity: 0; transform: translateY(14px) scale(.55, .4); transform-origin: var(--tail, 50%) 100%;
  transition: opacity .25s ease, transform .5s var(--spring);
}
.stage-bubbles .bubble.is-on, .room-bubbles .bubble.is-on { opacity: 1; transform: none; z-index: 2; animation: breathe 3.4s ease-in-out .6s infinite; }
.stage-bubbles .bubble.is-past, .room-bubbles .bubble.is-past { opacity: .5; transform: translateY(-6px) scale(.96); z-index: 1; transition: opacity .6s ease, transform .6s var(--ease); }
.stage-bubbles .bubble.is-gone, .room-bubbles .bubble.is-gone { opacity: 0; transform: translateY(-16px) scale(.94, 1.04); transition: opacity .5s ease, transform .6s var(--ease); }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.012; } }
.bubble.is-static { position: relative; width: fit-content; max-width: 100%; margin-top: 12px; }
@container (max-width: 420px) { .stage-bubbles .bubble { font-size: 13px; padding: 13px 15px 10px; max-width: 84%; } .bubble-name { font-size: 10.5px; } }

/* ---------- Game-UI dialog (Speak to the group, Personality of...) ---------- */
.sims-dialog { background: #fff; color: var(--ui-navy); border-radius: 8px; overflow: hidden; text-align: left; box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(34, 56, 110, .12); }
.sims-dialog-title { font-variant-caps: small-caps; font-weight: 800; font-size: 1.3rem; letter-spacing: .02em; text-align: center; color: var(--ui-navy); padding: 14px 16px 4px; line-height: 1.2; }
.sims-dialog-label { font-size: .82rem; font-weight: 800; color: var(--ui-blue); padding: 0 16px; }
.sims-dialog-input { margin: 6px 16px 14px; min-height: 36px; padding: 7px 11px; border-radius: 4px; border: 1px solid #c4cee2; box-shadow: inset 0 1px 3px rgba(20, 30, 60, .1); color: #2f9a43; font-weight: 800; font-size: .93rem; line-height: 1.4; }
.sims-dialog-buttons { display: grid; gap: 8px; padding: 12px 16px 14px; background: #e4e8f0; }
.sims-btn { display: block; text-align: center; padding: 7px; border-radius: 999px; font-weight: 800; font-size: .85rem; color: var(--ui-navy); background: linear-gradient(180deg, #fff, #e9edf3); box-shadow: 0 0 0 1px #b6c0d2, inset 0 1px 0 #fff, 0 2px 4px rgba(20, 30, 60, .15); transition: transform .15s ease, background .15s ease; }
.sims-btn.is-pressed { transform: scale(.97); background: linear-gradient(180deg, #e5f8e5, #c4ebc8); }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.16em; background: #2f9a43; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.stage-dialog, .room-dialog { opacity: 0; transform: translate(-50%, -46%) scale(.94); pointer-events: none; transition: opacity .3s ease, transform .4s var(--spring); }
.stage-dialog.is-open, .room-dialog.is-open { opacity: 1; transform: translate(-50%, -50%); }
@container (max-width: 420px) { .stage-dialog .sims-dialog-title { font-size: 1.05rem; padding-top: 10px; } .stage-dialog .sims-dialog-buttons { padding: 8px 12px 10px; gap: 6px; } .stage-dialog .sims-btn { padding: 5px; font-size: .78rem; } .stage-dialog .sims-dialog-input { font-size: .82rem; margin-bottom: 10px; } }

/* ---------- CSS-3D plumbob (square bipyramid, 8 faces) ---------- */
.plumbob3d { position: absolute; width: 76px; height: 102px; perspective: 600px; filter: drop-shadow(0 0 14px rgba(79, 211, 95, .7)); transition: left .9s var(--spring), top .9s var(--spring), filter .8s ease; }
.pb-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: pb-spin 9s linear infinite, pb-bob 3.2s ease-in-out infinite; }
@keyframes pb-spin { to { transform: rotateY(360deg); } }
@keyframes pb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.pf { position: absolute; left: 50%; display: block; backface-visibility: hidden; }
.pf.t0, .pf.t1, .pf.t2, .pf.t3 { top: -6.7px; width: 54.4px; height: 57.7px; margin-left: -27.2px; transform-origin: 50% 100%; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.pf.b0, .pf.b1, .pf.b2, .pf.b3 { top: 51px; width: 54.4px; height: 57.7px; margin-left: -27.2px; transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pf.t0 { transform: rotateY(45deg) translateZ(27px) rotateX(28deg); background: linear-gradient(180deg, #9DF59D, #4FD35F); }
.pf.t1 { transform: rotateY(135deg) translateZ(27px) rotateX(28deg); background: linear-gradient(180deg, #4FD35F, #27A83C); }
.pf.t2 { transform: rotateY(225deg) translateZ(27px) rotateX(28deg); background: linear-gradient(180deg, #35B84A, #178034); }
.pf.t3 { transform: rotateY(315deg) translateZ(27px) rotateX(28deg); background: linear-gradient(180deg, #6EE76E, #39B54A); }
.pf.b0 { transform: rotateY(45deg) translateZ(27px) rotateX(-28deg); background: linear-gradient(0deg, #14732B, #2FAE45); }
.pf.b1 { transform: rotateY(135deg) translateZ(27px) rotateX(-28deg); background: linear-gradient(0deg, #0F5F23, #27A83C); }
.pf.b2 { transform: rotateY(225deg) translateZ(27px) rotateX(-28deg); background: linear-gradient(0deg, #0C5420, #178034); }
.pf.b3 { transform: rotateY(315deg) translateZ(27px) rotateX(-28deg); background: linear-gradient(0deg, #178034, #35B84A); }
#stage-plumbob { scale: .3; transform-origin: 50% 100%; margin: -102px 0 0 -38px; z-index: 3; }
@container (max-width: 420px) { #stage-plumbob { scale: .24; } }
/* Mood shift: green -> Flirty pink */
.plumbob3d.is-flirty { filter: hue-rotate(205deg) saturate(1.3) drop-shadow(0 0 14px rgba(255, 110, 170, .8)); }

/* ---------- Proof ---------- */
.proof { padding: clamp(88px, 11vw, 150px) 0; background: radial-gradient(70% 50% at 30% 40%, rgba(255, 140, 90, .07), transparent 70%); }
.proof-grid { display: grid; gap: 40px; }
.proof-head { max-width: 760px; }
.proof-head .lede { margin-top: 20px; }
.film { position: relative; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 232, 214, .1), 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 160px -50px rgba(255, 150, 90, .4); }
.film video { width: 100%; height: auto; background: #000; }
.film-play {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: clamp(18px, 3vw, 32px);
  border: 0; cursor: pointer; color: var(--text);
  background: radial-gradient(60% 50% at 50% 50%, rgba(11, 8, 16, .55), rgba(11, 8, 16, .2) 70%), linear-gradient(180deg, rgba(11, 8, 16, 0) 50%, rgba(11, 8, 16, .6) 100%);
  text-align: center;
}
.film-play-ico { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: var(--green-ink); background: linear-gradient(180deg, #79e886, #45c95a); box-shadow: 0 0 0 10px rgba(79, 211, 95, .2), 0 16px 40px -10px rgba(79, 211, 95, .8); transition: transform .35s var(--spring); }
.film-play:hover .film-play-ico { transform: scale(1.08); }
.film-play-ico svg { margin-left: 4px; }
.film-play-text b { display: block; font-size: 1.25rem; font-weight: 900; }
.film-play-text small { font-size: .9rem; color: var(--text-2); font-weight: 700; }
.film.is-playing .film-play { display: none; }
.transcript-head { font-weight: 900; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.transcript { display: grid; gap: 4px; }
.transcript button {
  width: 100%; display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; padding: 12px 14px 12px 12px;
  border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer;
  border-left: 3px solid hsl(var(--h) 55% 72% / .5); transition: background .25s ease, border-color .25s ease;
}
.transcript button:hover { background: rgba(255, 240, 225, .05); }
.t-time { grid-row: span 2; font-family: var(--mono); font-size: .78rem; color: var(--text-3); padding-top: 3px; }
.t-who { font-weight: 900; font-size: .86rem; color: hsl(var(--h) 65% 74%); }
.t-who small { font-weight: 700; color: var(--text-3); margin-left: 6px; }
.t-line { color: var(--text-2); font-size: .98rem; line-height: 1.45; }
.transcript li.is-now button { background: rgba(255, 240, 225, .08); border-left-color: hsl(var(--h) 60% 72%); }
.transcript li.is-now .t-line { color: var(--text); }
@media (min-width: 1024px) {
  .proof-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .proof-head { grid-column: 1 / -1; }
}

/* ---------- Talk: pie menu + diorama ---------- */
.talk-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1024px) { .talk-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; } }
.pie { position: relative; width: 100%; max-width: 440px; height: 300px; margin: 0 auto; }
.pie::before { content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 2px dashed rgba(42, 34, 54, .14); }
.pie-hub { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, #e7efe3); box-shadow: 0 10px 30px -10px rgba(42, 34, 54, .4), 0 0 0 6px rgba(79, 211, 95, .14); }
.pie-hub svg { filter: drop-shadow(0 2px 6px rgba(30, 140, 48, .5)); }
.pie-opt {
  position: absolute; display: flex; align-items: center; gap: 9px; max-width: calc(50% - 14px);
  padding: 10px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: var(--ui-navy); font-weight: 800; font-size: .95rem; line-height: 1.2; text-align: left;
  box-shadow: 0 0 0 1px rgba(34, 56, 110, .12), 0 10px 24px -12px rgba(42, 34, 54, .45);
  transition: transform .35s var(--spring), box-shadow .25s ease, background .2s ease, color .2s ease;
}
.pie-opt svg { flex: none; color: var(--ui-blue); }
.pie-opt span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 359px) { .pie-opt { font-size: .84rem; padding: 8px 10px; gap: 6px; } }
.pie-opt:hover { transform: translateY(-2px) scale(1.03); }
.pie-opt[aria-pressed="true"] { background: var(--ui-navy); color: #fff; box-shadow: 0 0 0 3px rgba(79, 211, 95, .55), 0 14px 30px -12px rgba(34, 56, 110, .6); }
.pie-opt[aria-pressed="true"] svg { color: var(--green-hi); }
.pie-opt[data-scene="direct"] { right: calc(50% + 8px); bottom: calc(50% + 40px); }
.pie-opt[data-scene="group"] { left: calc(50% + 8px); bottom: calc(50% + 40px); }
.pie-opt[data-scene="social"] { right: calc(50% + 8px); top: calc(50% + 40px); }
.pie-opt[data-scene="auto"] { left: calc(50% + 8px); top: calc(50% + 40px); font-style: italic; }

.talk-stage { min-width: 0; }
.room { position: relative; aspect-ratio: 600 / 560; max-width: 720px; margin: 0 auto; container-type: inline-size; }
.room-world { position: absolute; left: 0; right: 0; bottom: 0; height: 76.8%; }
.room-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(60, 30, 50, .25)); }
.room-sim { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 9.4%; transform: translate(-50%, -96%); transition: left .9s var(--spring), transform .9s var(--spring); }
.room-sim.is-kid { width: 7%; }
.room-sim svg { width: 100%; height: auto; aspect-ratio: 60 / 140; overflow: visible; }
.room-sim.is-talking svg { animation: talk-bob .5s ease-in-out infinite alternate; }
@keyframes talk-bob { to { transform: translateY(-2.5%) rotate(-1.2deg); } }
.room.is-hug .room-sim[data-who="theo"] { left: 43%; transform: translate(-50%, -96%) rotate(6deg); }
.room.is-hug .room-sim[data-who="marisol"] { left: 50.5%; transform: translate(-50%, -96%) rotate(-6deg); }
.room-bubbles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.room-heart { position: absolute; z-index: 3; left: 47.5%; top: 47%; width: 26px; height: 24px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1 14 1 7.3C1 3.8 3.7 1.5 6.6 1.5c2.2 0 4.2 1.1 5.4 3 1.2-1.9 3.2-3 5.4-3 2.9 0 5.6 2.3 5.6 5.8C23 14 12 21 12 21z' fill='%23ff5f8f'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 4px 8px rgba(214, 63, 125, .5)); }
.room.is-hug .room-heart { animation: heart-pop 1.8s var(--ease) .35s both; }
@keyframes heart-pop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.4); } 30% { opacity: 1; transform: translate(-50%, 0) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
.room-bubbles .bubble { position: absolute; max-width: min(54%, 270px); font-size: 14px; }
@container (max-width: 460px) { .room-bubbles .bubble { font-size: 12.5px; padding: 6px 11px 8px; max-width: 62%; } }
.room-dialog { position: absolute; z-index: 6; left: 50%; top: 30%; width: min(84%, 420px); }
.room-dialog .sims-dialog-title { font-size: 1.05rem; padding-top: 10px; }
.room-dialog .sims-dialog-input { margin-bottom: 12px; font-size: .88rem; }
.room-chip { position: absolute; z-index: 5; left: 50%; bottom: 6%; transform: translate(-50%, 12px) scale(.9); opacity: 0; white-space: nowrap; padding: 7px 14px; border-radius: 999px; font-weight: 900; font-size: .85rem; color: #fff; background: var(--ui-navy); box-shadow: 0 0 0 3px rgba(79, 211, 95, .5), 0 12px 26px -10px rgba(34, 56, 110, .7); transition: opacity .3s ease, transform .45s var(--spring); }
.room-chip::before { content: "\25B6\FE0E"; color: var(--green-hi); margin-right: 8px; font-size: .75em; }
.room-chip.is-on { opacity: 1; transform: translate(-50%, 0); }
.scenes { margin-top: 18px; min-height: 3.4em; text-align: center; }
.scene-desc { font-weight: 700; color: var(--ink-2); max-width: 560px; margin: 0 auto; }
.talk-stage .fine { text-align: center; margin-top: 8px; }

.notes { display: grid; gap: 22px; margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(42, 34, 54, .12); }
@media (min-width: 720px) { .notes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .notes { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.notes li { display: flex; gap: 14px; align-items: flex-start; }
.notes p { color: var(--ink-2); font-size: .97rem; line-height: 1.5; }
.notes b { color: var(--ink); }
.note-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--green-deep); background: rgba(79, 211, 95, .14); }

/* ---------- Know: scroll-driven sim panel ---------- */
.know { position: relative; padding: clamp(96px, 12vw, 168px) 0; background: radial-gradient(60% 40% at 15% 30%, rgba(255, 140, 90, .08), transparent 70%), radial-gradient(50% 40% at 85% 70%, rgba(255, 110, 170, .06), transparent 70%); }
.know-grid { display: grid; gap: 32px; }
.know-sticky { position: sticky; top: 70px; z-index: 2; align-self: start; }
.simcard { background: #fff; color: var(--ui-navy); border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 120px -40px rgba(255, 140, 90, .35); }
.simcard-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(180deg, #eef6ff, #d9eafb); border-bottom: 1px solid #c9dbf0; }
.simcard-portrait { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #ffe8d2, #f7b98f); box-shadow: inset 0 0 0 3px #fff, 0 6px 14px -6px rgba(34, 56, 110, .5); }
.simcard-portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.simcard-head { position: relative; }
.simcard-head .plumbob3d { right: 22px; top: 50%; margin-top: -51px; scale: .42; transform-origin: 50% 50%; }
.simcard-name { font-weight: 900; font-size: 1.3rem; line-height: 1.1; color: var(--ui-navy); }
.simcard-age { font-size: .85rem; font-weight: 800; color: var(--ui-blue); }
.simcard-rows { padding: 6px 18px 4px; }
.simcard-rows .row { display: grid; grid-template-columns: 134px 1fr; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #e6ecf5; transition: opacity .5s ease; opacity: .32; }
.simcard-rows .row:last-child { border-bottom: 0; }
.simcard-rows dt { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-blue); }
.simcard-rows dd { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: .84rem; line-height: 1.25; color: var(--ui-navy); background: #e9f1fb; box-shadow: inset 0 0 0 1px #cfdcef; }
.chip-soft { color: #4d5a78; background: #f2f4f8; box-shadow: inset 0 0 0 1px #dfe3ea; }
.chip-warn { color: #8a3b10; background: #fff0de; box-shadow: inset 0 0 0 1px #f5cfa6; }
.chip-love { color: #9a2a55; background: #ffe6ef; box-shadow: inset 0 0 0 1px #f6bcd0; }
.moodlet { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 10px; background: #ffe6ef; box-shadow: inset 0 0 0 1px #f6bcd0; }
.moodlet::before { content: ""; width: 26px; height: 26px; border-radius: 7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1 14 1 7.3C1 3.8 3.7 1.5 6.6 1.5c2.2 0 4.2 1.1 5.4 3 1.2-1.9 3.2-3 5.4-3 2.9 0 5.6 2.3 5.6 5.8C23 14 12 21 12 21z' fill='%23fff'/%3E%3C/svg%3E") center / 13px no-repeat, linear-gradient(150deg, #ff8fbd, #d63f7d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.moodlet b { color: #9a2a55; font-size: .9rem; }
.moodlet small { color: #8a5a70; font-weight: 700; font-size: .8rem; }
.js .simcard-rows dd > * { opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .5s var(--spring); }
.js .simcard-rows dd > *:nth-child(2) { transition-delay: .08s; } .js .simcard-rows dd > *:nth-child(3) { transition-delay: .16s; }
.simcard-rows .row.is-on { opacity: 1; }
.simcard-rows .row.is-on dd > * { opacity: 1; transform: none; }
.simcard-say { padding: 18px 18px 26px; background: linear-gradient(180deg, #fff, #f6f9fd); border-top: 1px solid #e6ecf5; }
.simcard-say .bubble { max-width: 100%; width: auto; }
.js .simcard-say { display: none; }
.simcard.is-talking .simcard-say { display: block; animation: say-in .5s var(--spring); }
@keyframes say-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.bubble mark { color: inherit; background: linear-gradient(transparent 58%, rgba(255, 120, 160, .45) 58%); padding: 0 1px; }
.tw-host .tw:empty { display: none; }
.js .tw-host.is-typing .tw-src, .js .tw-host.is-typed .tw-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.know-steps { display: grid; }
.step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .3; transition: opacity .5s ease; }
.step.is-active { opacity: 1; }
.step-num { font-family: var(--serif); font-style: italic; font-weight: 650; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 2.6rem; line-height: 1; color: var(--amber); margin-bottom: 12px; }
.step h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 12px; }
.step p { color: var(--text-2); font-size: 1.1rem; max-width: 30em; }
@media (min-width: 960px) {
  .know-grid { grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); gap: clamp(48px, 7vw, 100px); }
  .know-sticky { top: max(84px, calc(50vh - 300px)); }
  .step:first-child { min-height: 50vh; }
  .know-steps { padding-bottom: 22vh; }
}
@media (max-width: 959px) {
  .know-sticky { top: 82px; }
  .simcard-head { padding: 10px 14px; }
  .simcard-portrait { width: 44px; height: 44px; }
  .simcard-name { font-size: 1.05rem; }
  .simcard-rows { padding: 2px 14px; }
  .simcard-rows .row { grid-template-columns: 28px 1fr; padding: 5px 0; gap: 6px; }
  .simcard-rows dt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .simcard-rows dd { min-height: 24px; gap: 4px; }
  .chip { font-size: .74rem; padding: 2px 8px; }
  .moodlet { padding: 2px 8px 2px 2px; } .moodlet::before { width: 18px; height: 18px; border-radius: 5px; }
  .moodlet b { font-size: .8rem; } .moodlet small { font-size: .7rem; }
  .simcard-say { padding: 10px 14px 16px; }
  .simcard-say .bubble { font-size: 13px; }
  .step { min-height: 56vh; }
  .step:first-child { margin-top: 24px; }
}

@media (min-width: 960px) and (max-height: 860px) {
  .simcard-head { padding: 10px 18px; }
  .simcard-portrait { width: 52px; height: 52px; }
  .simcard-rows .row { padding: 6px 0; }
  .simcard-say { padding: 12px 18px 18px; }
}

/* ---------- Memory ---------- */
.mem-story { position: relative; max-width: 980px; margin: 0 auto clamp(56px, 8vw, 96px); }
.sims-clock { display: flex; align-items: center; gap: 10px; width: max-content; margin: 0 auto 26px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 900; font-size: 1.05rem; font-variant-numeric: tabular-nums; box-shadow: 0 16px 30px -14px rgba(42, 34, 54, .6); }
.sims-clock svg { color: var(--green); }
.sims-clock span { display: inline-block; transition: transform .4s var(--ease), opacity .25s ease; }
.sims-clock.is-flip span { transform: translateY(-60%); opacity: 0; }
.mem-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 820px) { .mem-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } .mem-card:nth-child(2) { margin-top: 64px; } }
.mem-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 26px; background: #fff; box-shadow: 0 30px 60px -30px rgba(70, 40, 60, .35), 0 0 0 1px rgba(42, 34, 54, .06); }
.mem-card .bubble { max-width: 88%; }
.mem-card .bubble.is-you { align-self: flex-end; }
.mem-day { display: flex; align-items: center; gap: 8px; font-weight: 900; color: var(--ink-2); font-size: .95rem; }
.mem-stamp { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-weight: 900; font-size: .82rem; color: var(--green-deep); background: rgba(79, 211, 95, .16); }
.mem-list { display: grid; gap: 28px 32px; }
@media (min-width: 720px) { .mem-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mem-list { grid-template-columns: repeat(5, 1fr); } }
.mem-list li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid rgba(42, 34, 54, .1); }
.mem-list svg { color: var(--rose-ink); }
.mem-list h3 { font-size: 1.12rem; font-weight: 900; line-height: 1.2; }
.mem-list p { color: var(--ink-2); font-size: .97rem; line-height: 1.5; }

/* ---------- Voice + yours ---------- */
.voice { padding: clamp(96px, 12vw, 160px) 0; background: radial-gradient(60% 45% at 80% 20%, rgba(255, 196, 107, .07), transparent 70%); }
.voice-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 900px) { .voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duet { display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 232, 214, .07), rgba(255, 232, 214, .02)); box-shadow: inset 0 0 0 1px var(--line); }
.duet .bubble:nth-of-type(2) { align-self: flex-end; }
.duet-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 800; }
.duet-label b { color: var(--amber); }
.duet-label span { font-family: var(--mono); letter-spacing: 0; text-transform: none; }
.bubble.has-audio .bubble-name { left: 54px; }
.bubble.has-audio { position: relative; padding-left: 54px; max-width: 92%; font-size: 15px; }
.bubble-play { position: absolute; left: 10px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; background: hsl(var(--h) 55% 42%); box-shadow: 0 6px 14px -6px hsl(var(--h) 60% 30%); transition: transform .3s var(--spring); }
.bubble-play:hover { transform: scale(1.1); }
.bubble-play .ico-pause { display: none; }
.bubble.is-playing .bubble-play .ico-pause { display: block; }
.bubble.is-playing .bubble-play .ico-play { display: none; }
.bubble.is-playing .w { opacity: .38; transition: opacity .15s ease; }
.bubble.is-playing .w.is-said { opacity: 1; }
.voice-facts { grid-column: 1 / -1; display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 900px) { .voice-facts { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.voice-facts li { display: flex; align-items: baseline; gap: 14px; }
.voice-facts b { font-family: var(--serif); font-style: italic; font-weight: 650; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: .9; color: var(--amber); }
.voice-facts span { color: var(--text-2); font-weight: 700; }
.yours { margin-top: clamp(96px, 12vw, 150px); text-align: center; }
.yours .h3 { margin-bottom: clamp(40px, 6vw, 64px); }
.yours-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; text-align: left; }
@media (min-width: 800px) {
  .yours-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; max-width: 1000px; margin: 0 auto; }
  .yours-grid > :nth-child(1) { transform: rotate(-1.4deg); }
  .yours-grid > :nth-child(2) { transform: rotate(1.1deg) translateY(18px); }
  .yours-grid > :nth-child(3) { transform: rotate(.8deg); }
  .yours-grid > :nth-child(4) { transform: rotate(-1deg) translateY(18px); }
}
.yours-grid > .sims-dialog { transition: transform .5s var(--spring); }
.yours-grid > .sims-dialog:hover { transform: none; }
.is-panel .sims-dialog-title { font-size: 1.15rem; padding: 14px 16px 6px; border-bottom: 1px solid #e6ecf5; margin-bottom: 4px; }
.is-panel .sims-dialog-input { margin-top: 10px; min-height: 64px; color: var(--ui-navy); font-weight: 700; }
.yours-reply { margin: 2px 16px 22px; font-size: 14px; }
.voice-design-wave { display: flex; align-items: center; gap: 4px; height: 30px; margin: 0 16px 18px; }
.voice-design-wave i { flex: 1; max-width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #8bf08b, #2fae45); transform: scaleY(.18); }
.voice-design-wave.is-live i { animation: wave 1s ease-in-out infinite; }
.voice-design-wave i:nth-child(3n) { animation-delay: .1s; } .voice-design-wave i:nth-child(3n+1) { animation-delay: .25s; } .voice-design-wave i:nth-child(4n) { animation-delay: .4s; }
.yours .fine { margin-top: 40px; }

/* ---------- Install ---------- */
.loading { max-width: 560px; margin: 0 auto clamp(48px, 7vw, 72px); display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; }
.loading-gem { grid-row: span 2; filter: drop-shadow(0 4px 10px rgba(30, 140, 48, .5)); animation: gem-turn 3s ease-in-out infinite; }
@keyframes gem-turn { 50% { transform: scaleX(-1); } }
.loading-bar { height: 14px; border-radius: 999px; background: rgba(42, 34, 54, .1); overflow: hidden; box-shadow: inset 0 1px 3px rgba(42, 34, 54, .15); }
.loading-bar i { display: block; height: 100%; width: calc(var(--p, .08) * 100%); border-radius: inherit; background: linear-gradient(90deg, #45c95a, #8bf08b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); transition: width .3s ease-out; }
.loading-msg { font-weight: 800; color: var(--ink-2); font-size: .95rem; min-height: 1.5em; }
.steps { display: grid; gap: 28px; counter-reset: none; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.steps li { position: relative; padding-top: 6px; }
.steps-num { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; font-weight: 900; font-size: 1.4rem; color: var(--green-ink); background: linear-gradient(180deg, #79e886, #45c95a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 24px -12px rgba(30, 140, 48, .8); }
.steps h3 { font-size: 1.35rem; font-weight: 900; letter-spacing: -.01em; margin-bottom: 8px; }
.steps p { color: var(--ink-2); }
.install-cta { margin-top: clamp(44px, 6vw, 64px); text-align: center; }
.tips { display: grid; gap: 14px; margin-top: clamp(40px, 6vw, 56px); }
@media (min-width: 900px) { .tips { grid-template-columns: 1fr 1fr; } }
.tip { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: #fff; color: var(--ink-2); font-size: .95rem; box-shadow: 0 0 0 1px rgba(42, 34, 54, .07); }
.tip svg { flex: none; color: var(--green-deep); margin-top: 2px; }
.tip b { color: var(--ink); }

/* ---------- Pricing ladder ---------- */
.pricing { padding: clamp(96px, 12vw, 168px) 0; background: radial-gradient(60% 40% at 50% 0%, rgba(79, 211, 95, .07), transparent 70%); }
.trial {
  position: relative; display: grid; gap: 16px; align-items: center; margin: 0 auto 40px; max-width: 1000px;
  padding: 24px clamp(20px, 3vw, 34px); border-radius: 22px;
  background: linear-gradient(120deg, rgba(255, 196, 107, .16), rgba(255, 128, 84, .1));
  box-shadow: inset 0 0 0 1.5px rgba(255, 196, 107, .45);
  -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.trial-tag span { display: inline-block; padding: 6px 14px; border-radius: 999px; font-weight: 900; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #3a2405; background: var(--amber); }
.trial-text { color: var(--text-2); }
.trial-text b { color: var(--text); }
@media (min-width: 860px) { .trial { grid-template-columns: auto 1fr auto; gap: 24px; } }
.ladder { max-width: 1100px; margin: 0 auto; display: grid; gap: 12px; }
.ladder-head { display: none; }
.tier { position: relative; display: grid; gap: 16px; padding: 22px clamp(18px, 3vw, 28px); border-radius: 22px; background: rgba(255, 232, 214, .045); box-shadow: inset 0 0 0 1px var(--line); }
.tier-name h3 { font-size: 1.3rem; font-weight: 900; line-height: 1.15; }
.tier-price { font-weight: 900; font-size: 2rem; letter-spacing: -.03em; line-height: 1.1; margin-top: 2px; }
.tier-price span { font-size: .95rem; font-weight: 800; color: var(--text-3); letter-spacing: 0; margin-left: 2px; }
.tier-tag { color: var(--text-3); font-size: .9rem; font-weight: 700; }
.tier-meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; }
.tier-meter b { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; min-width: 2.2em; font-variant-numeric: tabular-nums; }
.meter-label { grid-column: 1 / -1; font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.meter { display: block; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter i { display: block; height: 100%; width: max(4%, calc(var(--v) * 100%)); border-radius: inherit; background: linear-gradient(90deg, #2fae45, #8bf08b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.is-voice .meter i { background: linear-gradient(90deg, #e98a3a, var(--amber)); }
.js .ladder .meter i { transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.js .ladder.is-in .meter i { transform: none; }
.js .ladder.is-in .tier:nth-child(3) .meter i { transition-delay: .08s; } .js .ladder.is-in .tier:nth-child(4) .meter i { transition-delay: .16s; } .js .ladder.is-in .tier:nth-child(5) .meter i { transition-delay: .24s; } .js .ladder.is-in .tier:nth-child(6) .meter i { transition-delay: .32s; }
.tier-extra { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.perks { display: grid; gap: 6px; font-size: .93rem; color: var(--text-2); }
.perks li { position: relative; padding-left: 18px; }
.perks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; transform: rotate(45deg); border-radius: 2px; background: var(--green); }
.tier.is-popular { background: linear-gradient(120deg, rgba(79, 211, 95, .13), rgba(79, 211, 95, .04)); box-shadow: inset 0 0 0 1.5px rgba(79, 211, 95, .55), 0 30px 70px -30px rgba(79, 211, 95, .45); }
.tier.is-max { background: linear-gradient(120deg, rgba(255, 134, 166, .1), rgba(255, 196, 107, .05)); box-shadow: inset 0 0 0 1px rgba(255, 134, 166, .3); }
.tier-badge { position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 999px; font-size: .74rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); background: var(--green); box-shadow: 0 8px 20px -8px rgba(79, 211, 95, .8); }
@media (min-width: 980px) {
  .ladder-head { display: grid; grid-template-columns: 1fr .8fr .8fr 1.95fr; gap: 28px; padding: 0 28px 4px; font-size: .7rem; font-weight: 900; letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: var(--text-3); }
  .tier { grid-template-columns: 1fr .8fr .8fr 1.95fr; gap: 28px; align-items: center; padding: 24px 28px; }
  .meter-label { display: none; }
  .tier-extra { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .tier-extra .btn { flex: none; }
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 72px; align-items: start; } .faq .section-head { position: sticky; top: 110px; } }
.faq-list { border-top: 1px solid rgba(42, 34, 54, .14); }
.qa { border-bottom: 1px solid rgba(42, 34, 54, .14); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; font-weight: 900; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.3; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(42, 34, 54, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2236' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .35s var(--spring), background-color .2s; }
.qa[open] summary::after { transform: rotate(45deg); background-color: rgba(79, 211, 95, .25); }
.qa summary:hover { color: var(--rose-ink); }
.qa-a { padding: 0 2px 24px; color: var(--ink-2); max-width: 46em; }
.qa-a p + p { margin-top: .8em; }
.qa-a b { color: var(--ink); }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.qa[open]::details-content { block-size: auto; }

/* ---------- Contact + footer ---------- */
.contact { padding: clamp(96px, 12vw, 150px) 0 clamp(72px, 9vw, 110px); }
.contact-wrap { max-width: 720px; }
.form { display: grid; gap: 18px; padding: clamp(22px, 4vw, 36px); border-radius: 26px; background: rgba(255, 232, 214, .045); box-shadow: inset 0 0 0 1px var(--line); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 800; font-size: .92rem; color: var(--text-2); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--text); padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 232, 214, .18); background: rgba(10, 6, 16, .55); transition: border-color .2s, box-shadow .2s; }
.field select option { color: #111; }
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8a7d92; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(79, 211, 95, .2); }
.form-status { text-align: center; font-weight: 800; }
.form-status.is-ok { color: var(--green-hi); }
.form-status.is-err { color: #ff9a9a; }
.footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 96px; font-size: .9rem; color: var(--text-3); }
.footer-brand { display: inline-flex; gap: 10px; align-items: center; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { text-decoration: none; font-weight: 800; }
.footer-links a:hover { color: var(--green-hi); }
@media (min-width: 1024px) { .footer-inner { padding-bottom: 32px; } }

/* Sticky mobile download pill */
.sticky-cta { position: fixed; left: 50%; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; text-decoration: none; font-weight: 900; color: var(--green-ink); background: linear-gradient(180deg, #79e886, #45c95a); box-shadow: 0 18px 40px -12px rgba(79, 211, 95, .8), inset 0 1px 0 rgba(255, 255, 255, .5); transform: translate(-50%, 140%); transition: transform .5s var(--spring); }
.sticky-cta.is-shown { transform: translate(-50%, 0); }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* ---------- Scroll reveals (only when JS runs and motion is welcome) ---------- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .rv.is-in { opacity: 1; transform: none; }

/* ---------- Reduced motion: no movement, nothing left hidden ---------- */

/* ---------- Mood bubbles (MoodFx.as): everyday tint vs the big moment ---------- */
.mood { padding: clamp(96px, 12vw, 160px) 0; background: radial-gradient(60% 45% at 20% 25%, rgba(255, 110, 170, .08), transparent 70%), radial-gradient(50% 40% at 85% 75%, rgba(120, 200, 255, .06), transparent 70%); }
.mood-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.mcard { display: flex; flex-direction: column; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 24px; padding: 22px 20px 20px; min-width: 0; }
.mcard-name { font-size: 1.15rem; font-weight: 900; letter-spacing: -.01em; color: var(--text); }
.mcard-note { margin-top: 4px; font-size: .92rem; line-height: 1.45; color: var(--text-3); text-wrap: pretty; }
.mscene { position: relative; flex: 1; align-content: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding: 16px 10px 30px; border-radius: 16px; overflow: hidden; background: radial-gradient(90% 80% at 50% 0%, #2c2a52, #14122a 78%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mscene.is-one { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.mscene.is-stack { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.mcell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 22px; min-width: 0; padding-top: 34px; }
.mtag { position: absolute; top: 0; left: 4px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.mscene .bubble { max-width: 100%; margin-top: 8px; font-size: 13.5px; padding: 15px 16px 11px; }
.mscene .bubble-name { left: 12px; }
.mscene .bubble-text { max-width: 15.5em; }

/* every look: tint variables, as in MoodFx.table() */
.m-angry { --mc: #e53935; --aura: #ff3b30; --aa: .55; --mt: .05; --mb: .17; --mbd: .8; --bw: 2px; --h: 352; }
.m-energized { --mc: #5ccb33; --aura: #b6ff3b; --aa: .5; --mt: .04; --mb: .15; --mbd: .75; --bw: 1.6px; --h: 98; }
.m-flirty { --mc: #ff5fa2; --aura: #ff7eb8; --aa: .45; --mt: .06; --mb: .17; --mbd: .6; --bw: 1.4px; --h: 330; }
.m-happy { --mc: #ffc23d; --aura: #ffd54f; --aa: .6; --mt: .06; --mb: .2; --mbd: .7; --bw: 1.6px; --h: 42; }
.m-playful { --mc: #ff8a3d; --aura: #ffb74d; --aa: .35; --mt: .05; --mb: .15; --mbd: .55; --bw: 1.4px; --h: 24; }
.m-sad { --mc: #5b8def; --aura: #7fa8f5; --aa: .3; --mt: .06; --mb: .2; --mbd: .55; --bw: 1.2px; --h: 216; }
.m-scared { --mc: #7e57c2; --aura: #9575cd; --aa: .3; --mt: .06; --mb: .18; --mbd: .7; --bw: 1.4px; --h: 262; }
.m-embarrassed { --mc: #ff7f97; --aura: #ff9fb2; --aa: .25; --mt: .02; --mb: .24; --mbd: .5; --bw: 1.2px; --h: 346; }
.m-confident { --mc: #f2b233; --aura: #ffd36b; --aa: .35; --mt: .03; --mb: .12; --mbd: .9; --bw: 2.2px; --h: 38; }
.m-steamy { --mc: #d6336c; --aura: #c2185b; --aa: .7; --mt: .1; --mb: .27; --mbd: .75; --bw: 1.8px; --h: 336; }
.m-shout { --mc: #ff7043; --mt: .04; --mb: .12; --mbd: .7; --bw: 1.8px; --h: 14; }
.m-whisper { --mc: #90a4ae; --mt: .02; --mb: .08; --mbd: .5; --bw: 1.2px; --h: 200; border-style: dashed; }
.m-tense { --mc: #9b7fd1; --mt: .05; --mb: .15; --mbd: .6; --bw: 1.3px; }
.m-thought { --h: 270; }
.bubble.q { --q: .42; }
.bubble.big { --q: 1; filter: drop-shadow(0 3px 5px rgba(8, 4, 20, .4)) drop-shadow(0 0 var(--ar) color-mix(in srgb, var(--aura) calc(var(--aa) * 100%), transparent)); animation: aura 2.6s ease-in-out infinite; }
@keyframes aura { 0%, 100% { --ar: 7px; } 50% { --ar: 13px; } }
.big.m-whisper { filter: drop-shadow(0 3px 5px rgba(8, 4, 20, .4)); animation: none; scale: .94; }

/* effects: everyday keeps only the one small .hint */
.fx, .fx-edge, .cl-b, .cl-f { position: absolute; pointer-events: none; }
.q .fx:not(.hint) { display: none; }
.fx { display: block; }
.fx-edge { z-index: -1; background: var(--edge); }
.m-angry .fx-edge { inset: -9px; background: #e53935; animation: jit .2s steps(2) infinite; }
.m-shout .fx-edge { inset: -12px; background: #ff7043; animation: jit .3s steps(2) infinite; }
@keyframes jit { 0% { translate: 0 0; } 50% { translate: .8px -.8px; } 100% { translate: -.8px .6px; } }
.big.m-shout { scale: 1.05; font-weight: 800; }

.vein { top: -9px; right: 8px; width: 17px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none' stroke='%23e53935' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 6.5Q6.5 6.5 6.5 2M10.5 2Q10.5 6.5 15 6.5M2 10.5Q6.5 10.5 6.5 15M15 10.5Q10.5 10.5 10.5 15'/%3E%3C/svg%3E") center / contain no-repeat; }
.q .vein { transform: scale(.7); }
.puff { top: -14px; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); animation: fume 2.2s ease-out infinite; opacity: 0; }
.puff.p1 { left: 22%; } .puff.p2 { left: 52%; animation-delay: .7s; } .puff.p3 { left: 78%; animation-delay: 1.4s; }
@keyframes fume { 0% { opacity: 0; transform: translateY(8px) scale(.5); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-22px) scale(1.5); } }

.spark { width: 9px; height: 14px; background: #e4ff5a; clip-path: polygon(58% 0, 8% 56%, 44% 56%, 26% 100%, 92% 38%, 54% 38%); filter: drop-shadow(0 0 3px #b6ff3b); animation: zap 1.1s steps(1) infinite; }
.spark.s1 { left: 12%; top: -9px; } .spark.s2 { right: 10%; top: -8px; animation-delay: .35s; rotate: 40deg; } .spark.s3 { left: -6px; top: 42%; animation-delay: .7s; rotate: -30deg; } .spark.s4 { right: -5px; bottom: 22%; animation-delay: .2s; rotate: 20deg; }
.q .spark.hint { opacity: .95; animation: none; }
@keyframes zap { 0% { opacity: 0; } 15% { opacity: 1; } 40% { opacity: 0; } 55% { opacity: 1; } 70%, 100% { opacity: 0; } }

.heart { width: 13px; height: 12px; background: #ff5fa2; clip-path: path("M6.5 12 C-5 4 2.5 -3 6.5 3 C10.5 -3 18 4 6.5 12Z"); opacity: 0; animation: drift 3s ease-in infinite; }
.heart.h1 { left: 16%; top: -6px; } .heart.h2 { left: 50%; top: -10px; animation-delay: 1s; scale: .8; background: #ff86b8; } .heart.h3 { left: 82%; top: -4px; animation-delay: 2s; scale: 1.15; }
.q .heart.hint { opacity: .95; animation: none; right: 10px; left: auto; top: -8px; width: 11px; height: 10px; }
@keyframes drift { 0% { opacity: 0; transform: translate(0, 10px); } 20% { opacity: 1; } 60% { transform: translate(7px, -22px); } 100% { opacity: 0; transform: translate(-4px, -46px); } }

.star { width: 12px; height: 12px; background: #ffc93c; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.6s ease-in-out infinite; }
.star.t1 { right: -4px; top: -5px; } .star.t2 { left: 10%; bottom: -6px; animation-delay: .5s; scale: .75; background: #ffe082; } .star.t3 { left: -5px; top: 30%; animation-delay: 1s; scale: .6; }
.q .star.hint { animation: none; width: 8px; height: 8px; }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.big.m-happy { animation: aura 2.6s ease-in-out infinite, hop 1.5s ease-in-out infinite; }
@keyframes hop { 0%, 55%, 100% { translate: 0 0; } 70% { translate: 0 -6px; } 85% { translate: 0 0; } }

.note { font-size: 17px; font-weight: 900; line-height: 1; color: #e8651f; animation: float-note 3s ease-in infinite; opacity: 0; }
.note::before { content: "\266A"; }
.note.n1 { left: 14%; top: -12px; } .note.n2 { right: 18%; top: -14px; animation-delay: 1.4s; color: #ff9d3a; }
.q .note.hint { animation: none; opacity: 1; right: 12px; top: -12px; font-size: 14px; }
@keyframes float-note { 0% { opacity: 0; transform: translate(0, 8px) rotate(-8deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -30px) rotate(10deg); } }
.confetti { width: 5px; height: 8px; border-radius: 1px; animation: fall 2.2s linear infinite; opacity: 0; }
.confetti.c1 { left: 8%; top: -8px; background: #ff5fa2; } .confetti.c2 { left: 38%; top: -10px; background: #29c5f6; animation-delay: .5s; } .confetti.c3 { left: 66%; top: -9px; background: #ffc23d; animation-delay: 1s; } .confetti.c4 { left: 90%; top: -8px; background: #7ce05a; animation-delay: 1.5s; }
@keyframes fall { 0% { opacity: 0; transform: translateY(-4px) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(38px) rotate(300deg); } }

.m-sad.big { border-radius: 22px 22px 34px 34px / 18px 18px 30px 30px; animation: aura 2.6s ease-in-out infinite, droop 3.2s ease-in-out infinite; }
@keyframes droop { 0%, 100% { translate: 0 0; } 50% { translate: 0 2px; } }
.tear { left: 22%; bottom: -3px; width: 8px; height: 11px; background: #8fb7ff; clip-path: path("M4 0 C4 4 8 6 8 8 A4 4 0 0 1 0 8 C0 6 4 4 4 0Z"); animation: tear 2.6s ease-in infinite; }
.q .tear.hint { animation: none; bottom: 2px; left: 14px; opacity: .85; }
@keyframes tear { 0% { opacity: 0; transform: translateY(-6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(34px); } }

.m-scared.big { animation: aura 2.6s ease-in-out infinite, shiver .14s steps(2) infinite; }
@keyframes shiver { 0% { translate: -.8px 0; } 100% { translate: .8px .4px; } }
.sweat { right: 12px; top: -7px; width: 8px; height: 11px; background: #bfe6ff; clip-path: path("M4 0 C4 4 8 6 8 8 A4 4 0 0 1 0 8 C0 6 4 4 4 0Z"); animation: sweat 1.8s ease-in infinite; }
.q .sweat.hint { animation: none; }
@keyframes sweat { 0% { opacity: 0; transform: translateY(-3px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

.blush { bottom: 4px; width: 34px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 96, 130, .6), rgba(255, 96, 130, 0)); animation: flush 2.4s ease-in-out infinite; }
.blush.b1 { left: 6px; } .blush.b2 { right: 6px; }
.q .blush.hint { animation: none; opacity: .8; }
@keyframes flush { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.shine { inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%) 160% 0 / 230% 100% no-repeat; animation: sweep 3.4s ease-in-out infinite; }
@keyframes sweep { 0%, 30% { background-position: 160% 0; } 70%, 100% { background-position: -60% 0; } }

.m-steamy.big { animation: aura 2.6s ease-in-out infinite, beat 1.05s ease-in-out infinite; }
@keyframes beat { 0%, 100% { scale: 1; } 14% { scale: 1.05; } 28% { scale: 1; } 42% { scale: 1.03; } 56% { scale: 1; } }
.steam { top: -22px; width: 14px; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(235, 225, 240, .55), rgba(235, 225, 240, 0)); filter: blur(2px); animation: rise 2.4s ease-out infinite; opacity: 0; }
.steam.w1 { left: 24%; } .steam.w2 { left: 48%; animation-delay: .8s; } .steam.w3 { left: 72%; animation-delay: 1.6s; }
@keyframes rise { 0% { opacity: 0; transform: translateY(14px) scaleX(.7); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-18px) scaleX(1.5); } }

/* thought: a cloud drawn by site.js (clip-path), a trail of puffs for the tail */
.m-thought { background: none; border: 0; filter: drop-shadow(0 3px 5px rgba(8, 4, 20, .4)); padding: 20px 24px 15px; }
.m-thought::before { bottom: -26px; left: calc(var(--tail, 50%) - 6px); width: 13px; height: 11px; border-radius: 50%; clip-path: none; background: #fff; box-shadow: 0 0 0 1.2px #c8c6d4; }
.m-thought::after { bottom: -38px; left: calc(var(--tail, 50%) - 12px); width: 7px; height: 6px; border-radius: 50%; clip-path: none; background: #fff; box-shadow: 0 0 0 1.2px #c8c6d4; }
.cl-b { inset: -12px; z-index: -2; background: #c8c6d4; }
.cl-f { inset: -12px; z-index: -1; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--acc) 12%, #f0f0f5)); }
.m-thought .bubble-name { top: -6px; left: 14px; }
.m-thought .bubble-text { font-style: normal; }

/* entrance: bubbles inflate once the grid scrolls in, then loop their effects */
.js .mood:not(.is-in) .mscene .bubble { opacity: 0; scale: .55 .4; }
.mscene .bubble { transition: opacity .3s ease, scale .6s var(--spring); transition-delay: calc(var(--i, 0) * 70ms + var(--j, 0) * 160ms); }
.mood.is-paused *, .mood.is-paused *::before, .mood.is-paused *::after { animation-play-state: paused !important; }

@media (min-width: 640px) { .mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .mood-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .mscene { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 10px 26px; } .mcell { padding-top: 26px; } .mscene .bubble-text { max-width: none; } }

/* ---------- The new in-game UI (SimsAiPanel.as, ChatComposer.as, UsagePage.as) ---------- */
.gui { padding-bottom: clamp(80px, 10vw, 136px); }
.gui-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.gui-card { min-width: 0; }
.gui-stage { position: relative; display: grid; place-items: center; min-height: 380px; padding: 26px 14px; border-radius: 24px; overflow: hidden; background: radial-gradient(90% 90% at 50% 0%, #38457a, #181a36 80%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -34px rgba(30, 20, 60, .7); }
.gui-card > h3 { margin-top: 20px; font-size: 1.28rem; font-weight: 900; letter-spacing: -.015em; color: var(--ink); }
.gui-card > p { margin-top: 8px; color: var(--ink-2); font-size: .98rem; line-height: 1.55; text-wrap: pretty; }
.gwin { width: 100%; max-width: 330px; background: rgba(255, 255, 255, .97); color: #2f3a48; border-radius: 16px; overflow: hidden; text-align: left; box-shadow: 0 24px 50px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .4); }
.gwin-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; color: #fff; background: linear-gradient(100deg, #3a8df0, #6a5adf); }
.gwin-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); }
.gwin-ttl { flex: 1; min-width: 0; line-height: 1.1; }
.gwin-ttl b { display: block; font-size: 1.02rem; font-weight: 900; font-variant-caps: small-caps; letter-spacing: .03em; }
.gwin-ttl small { display: block; margin-top: 2px; font-size: .72rem; font-weight: 700; opacity: .85; }
.gwin-x { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .22); position: relative; }
.gwin-x::before, .gwin-x::after { content: ""; position: absolute; left: 7px; top: 11px; width: 10px; height: 2px; border-radius: 1px; background: #fff; transform: rotate(45deg); }
.gwin-x::after { transform: rotate(-45deg); }
.gtabs { display: grid; grid-template-columns: 1fr 1fr; margin: 10px 10px 4px; padding: 3px; border-radius: 99px; background: #e9eef8; font-variant-caps: small-caps; font-weight: 900; font-size: .78rem; letter-spacing: .03em; color: #7a8596; }
.gtabs span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 0; border-radius: 99px; }
.gtabs .is-on { background: #fff; color: #2f3a48; box-shadow: 0 1px 3px rgba(40, 60, 110, .2); }
.gtabs i { width: 11px; height: 11px; border-radius: 50%; background: #e95aa0; }
.gtabs span:last-child i { background: #9aa4b2; }
.gsec { margin: 8px 14px 2px; font-size: .6rem; font-weight: 900; font-variant-caps: small-caps; letter-spacing: .08em; color: #6b7a90; }
.grow { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-top: 1px solid #eef1f6; }
.grow-i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.grow-i svg { width: 15px; height: 15px; }
.grow-t { flex: 1; min-width: 0; line-height: 1.2; }
.grow-t b { display: block; font-size: .84rem; font-weight: 800; color: #2f3a48; }
.grow-t small { display: block; margin-top: 1px; font-size: .68rem; font-weight: 600; color: #7a8596; line-height: 1.3; }
.grow-go { flex: none; padding: 3px 10px; border-radius: 99px; border: 1.5px solid #2f7fe0; color: #2f7fe0; font-size: .66rem; font-weight: 900; font-variant-caps: small-caps; letter-spacing: .03em; }
.grow-chev { flex: none; width: 7px; height: 7px; border-right: 2px solid #8ea0b8; border-top: 2px solid #8ea0b8; transform: rotate(45deg); margin-right: 2px; }
.bg-blue { background: #3a8df0; } .bg-pink { background: #ec5a9a; } .bg-orange { background: #f6933a; } .bg-red { background: #ee5a5a; } .bg-violet { background: #7a63e0; }
.gwin-foot { display: flex; justify-content: space-between; padding: 8px 14px 10px; border-top: 1px solid #eef1f6; font-size: .64rem; font-weight: 700; color: #7a8596; }
.gwin-foot b { color: #2f7fe0; }
.gui-hud { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 99px; background: rgba(20, 22, 40, .85); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.gui-hud i { width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.gui-hud .hud-ai { position: relative; width: 28px; height: 28px; background: radial-gradient(circle at 35% 30%, #7fb9ff, #2f7fe0); box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(80, 160, 255, .8); display: grid; place-items: center; }
.hud-ai svg { width: 15px; height: 15px; color: #fff; }
.hud-tip { position: absolute; right: 0; bottom: 38px; padding: 2px 9px; border-radius: 99px; background: #14162a; color: #fff; font-size: .66rem; font-weight: 900; font-variant-caps: small-caps; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.gui-panel-stage { align-items: start; padding-bottom: 78px; }
.gui-panel-stage .gwin { transform-origin: 90% 100%; }
.js .gui:not(.is-in) .gui-panel-stage .gwin { opacity: 0; transform: translate(14px, 30px) scale(.4); }
.gui-panel-stage .gwin { transition: opacity .3s ease, transform .6s var(--spring); transition-delay: .25s; }

.gcomp-body { padding: 12px; }
.gcomp-box { display: block; width: 100%; min-height: 110px; resize: none; padding: 10px 12px 28px; border-radius: 10px; border: 2px solid #2f7fe0; background: #fff; color: #2f3a48; font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.4; box-shadow: 0 0 0 3px rgba(47, 127, 224, .15); }
.gcomp-box:focus { outline: 0; }
.gcomp-count { position: relative; display: flex; align-items: center; gap: 10px; margin: -24px 12px 0; height: 22px; font-size: .72rem; font-weight: 700; color: #7a8596; }
.gcomp-bar { flex: 1; height: 3px; border-radius: 2px; background: #e3e7ee; overflow: hidden; }
.gcomp-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: #2f7fe0; transition: width .15s ease; }
.gcomp-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; }
.gcomp-hint { flex: 1; min-width: 0; font-size: .66rem; font-weight: 600; color: #7a8596; line-height: 1.3; }
.gbtn { flex: none; padding: 5px 13px; border-radius: 99px; font-size: .72rem; font-weight: 900; font-variant-caps: small-caps; letter-spacing: .04em; border: 1.5px solid #2f7fe0; color: #2f7fe0; background: #fff; }
.gbtn.is-go { background: #2f7fe0; color: #fff; }

.gu-body { padding: 10px 12px 4px; }
.gu-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #f3f6fc; border: 1px solid #e3e7ee; }
.gu-ring { position: relative; flex: none; width: 82px; height: 82px; }
.gu-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gu-ring circle { fill: none; stroke-width: 8; }
.gu-ring .gu-trk { stroke: #e2e8f3; }
.gu-ring .gu-arc { stroke: #4b78e6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s var(--ease) .4s; }
.gui.is-in .gu-arc { stroke-dashoffset: 64.6; }
.gu-ring b { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 900; color: #2f3a48; line-height: 1; }
.gu-ring b small { margin-top: 2px; font-size: .6rem; font-weight: 700; color: #7a8596; }
.gu-info { flex: 1; min-width: 0; }
.gu-info b { display: block; font-size: .78rem; font-weight: 900; font-variant-caps: small-caps; letter-spacing: .03em; color: #2f3a48; }
.gu-info small { display: block; margin-top: 3px; font-size: .64rem; font-weight: 600; color: #7a8596; line-height: 1.3; }
.gu-left { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 99px; background: #e0e9fb; color: #2457c4; font-size: .64rem; font-weight: 900; font-variant-caps: small-caps; }
.gu-bar { margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: #f3f6fc; border: 1px solid #e3e7ee; }
.gu-bar-top { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 900; font-variant-caps: small-caps; letter-spacing: .03em; color: #2f3a48; }
.gu-bar-top span { font-variant-caps: normal; font-weight: 800; }
.gu-track { margin-top: 6px; height: 6px; border-radius: 3px; background: #e2e8f3; overflow: hidden; }
.gu-track i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #66c858, #3fa83a); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease) .6s; }
.gui.is-in .gu-track i { transform: scaleX(var(--v)); }
.gu-note { margin: 8px 4px 6px; font-size: .62rem; font-weight: 600; color: #7a8596; line-height: 1.35; }

@media (min-width: 900px) { .gui-stage { min-height: 540px; } .gui-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 400px) { .gui-stage { padding: 20px 8px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rv { opacity: 1; transform: none; }
  .stage-toggle { display: none; }
  .js .simcard-rows dd > * { opacity: 1; transform: none; }
  .simcard-rows .row { opacity: 1; }
  .js .simcard-say { display: block; }
  .step { opacity: 1; }
  .js .ladder .meter i { transform: none; }
  .yours-grid > * { transform: none !important; }
  .caret { display: none; }
  .js .mood .mscene .bubble { opacity: 1; scale: none; }
  .js .gui .gui-panel-stage .gwin { opacity: 1; transform: none; }
  .gu-ring .gu-arc { stroke-dashoffset: 64.6; }
  .gu-track i { transform: scaleX(var(--v)); }
  .heart, .star, .note, .spark, .tear, .sweat, .puff, .steam, .confetti { opacity: .9; }
  .puff, .steam { opacity: .5; }
}