:root {
  color-scheme: light;
  --bg: #f3f2ec;
  --surface: #e8e7df;
  --text: #1b2025;
  --muted: #626b72;
  --line: #cfd0c7;
  --accent: #e8bf31;
  --accent-ink: #1b2025;
  --radius: 26px;
  --pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #15191d;
    --surface: #20262c;
    --text: #f0f0e9;
    --muted: #abb1b5;
    --line: #384047;
    --accent: #e0b935;
    --accent-ink: #161b20;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100dvh; overflow-x: clip; color: var(--text); background: var(--bg); font-family: Aptos, "Segoe UI Variable", "Helvetica Neue", sans-serif; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure { margin: 0; }
a { color: inherit; }
.shell { width: min(1360px, calc(100% - 56px)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 20; min-height: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 26px; padding: 12px max(28px, calc((100vw - 1360px) / 2)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); }
.brand { width: fit-content; color: var(--text); font-size: 21px; font-weight: 950; letter-spacing: -.07em; text-decoration: none; }
nav { display: flex; gap: 28px; white-space: nowrap; }
nav a { color: var(--muted); font-size: 14px; font-weight: 720; text-decoration: none; }
nav a:hover { color: var(--text); }
.header-cta, .button { min-height: 46px; width: fit-content; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: var(--pill); color: var(--accent-ink); background: var(--accent); text-decoration: none; font-weight: 850; white-space: nowrap; transition: transform .22s cubic-bezier(.16, 1, .3, 1), filter .22s ease; }
.header-cta { justify-self: end; min-height: 40px; padding-inline: 18px; }
.header-cta:hover, .button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.header-cta:active, .button:active { transform: translateY(1px) scale(.98); }

.hero { min-height: calc(100dvh - 70px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(38px, 5vw, 76px); padding-block: clamp(38px, 6vw, 78px); }
.hero-copy { max-width: 620px; }
.eyebrow { margin: 0 0 20px; color: color-mix(in srgb, var(--text) 68%, var(--accent)); font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.055em; text-wrap: balance; }
h1 { max-width: 12ch; margin-bottom: 24px; font-size: clamp(50px, 5.5vw, 82px); line-height: .94; }
.hero-copy > p:not(.eyebrow) { max-width: 23ch; margin-bottom: 30px; color: var(--muted); font-size: clamp(18px, 2vw, 23px); line-height: 1.52; }
.hero-media { min-height: min(70dvh, 760px); border-radius: var(--radius); background: var(--accent); box-shadow: 18px 18px 0 color-mix(in srgb, var(--accent) 58%, var(--bg)); }

.section { padding-block: clamp(96px, 12vw, 162px); content-visibility: auto; contain-intrinsic-size: auto 900px; }
.section-heading { max-width: 800px; margin-bottom: clamp(46px, 7vw, 88px); }
.section-heading h2, .story-copy h2, .closing h2 { margin-bottom: 20px; font-size: clamp(42px, 5.5vw, 78px); line-height: .96; }
.section-heading p, .story-copy p { max-width: 56ch; margin-bottom: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }

.toy-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.toy-card { grid-column: span 5; display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.toy-card-large { grid-column: span 7; grid-row: span 2; }
.toy-card-wide { grid-column: span 7; grid-template-columns: minmax(0, 4fr) minmax(240px, 3fr); }
.toy-media { min-height: 400px; border-radius: 0; }
.toy-card-large .toy-media { min-height: 680px; }
.toy-card-wide .toy-media { min-height: 360px; }
.toy-copy { padding: 26px; }
.toy-copy h3 { margin-bottom: 10px; font-size: 29px; }
.toy-copy p { max-width: 35ch; margin-bottom: 0; color: var(--muted); line-height: 1.55; }

.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); align-items: center; gap: clamp(42px, 8vw, 120px); }
.story-media { min-height: 650px; border-radius: var(--radius); }
.story-copy a { display: inline-block; margin-top: 28px; color: var(--text); font-weight: 850; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.parents { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(44px, 9vw, 130px); }
.faq { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { position: relative; padding: 25px 60px 25px 0; cursor: pointer; list-style: none; font-size: clamp(22px, 3vw, 34px); font-weight: 790; letter-spacing: -.03em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 10px; color: color-mix(in srgb, var(--accent) 74%, var(--text)); }
details[open] summary::after { content: "-"; }
details p { max-width: 54ch; margin: 0 0 24px; color: var(--muted); line-height: 1.62; }
.closing { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; border-top: 1px solid var(--line); }
.closing h2 { max-width: 12ch; margin-bottom: 0; }
.site-footer { min-height: 150px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); font-weight: 850; }
.site-footer a { color: var(--muted); text-decoration: none; }

.media { position: relative; overflow: hidden; }
.media img { transition: opacity .35s ease, transform .8s cubic-bezier(.16, 1, .3, 1); }
.media:hover img { transform: scale(1.035); }
.media.is-loading::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, var(--surface) 20%, color-mix(in srgb, var(--surface) 70%, var(--accent)) 45%, var(--surface) 70%); background-size: 220% 100%; animation: shimmer 1.4s linear infinite; }
.media.is-loading img { opacity: 0; }
.media.is-error::after { content: attr(data-error); position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--muted); background: var(--surface); text-align: center; }
@keyframes shimmer { to { background-position: -220% 0; } }
.has-js .reveal { opacity: 0; transform: translateY(24px) rotate(.3deg); transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1); }
.has-js .reveal.is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 82%, var(--text)); outline-offset: 4px; }

@media (max-width: 940px) {
  .site-header { grid-template-columns: 1fr auto; }
  nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-media { min-height: 58dvh; }
  .toy-card, .toy-card-large, .toy-card-wide { grid-column: span 6; grid-row: auto; grid-template-columns: 1fr; }
  .toy-card .toy-media, .toy-card-large .toy-media, .toy-card-wide .toy-media { min-height: 470px; }
  .story, .parents { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .shell { width: min(100% - 30px, 680px); }
  .site-header { min-height: 64px; padding: 10px 15px; }
  .header-cta { min-height: 44px; padding-inline: 15px; font-size: 13px; }
  .hero { min-height: calc(100dvh - 64px); padding-block: 34px; }
  h1 { font-size: clamp(46px, 14vw, 68px); }
  .hero-media { min-height: 48dvh; box-shadow: 10px 10px 0 color-mix(in srgb, var(--accent) 58%, var(--bg)); }
  .section { padding-block: 90px; }
  .toy-grid { grid-template-columns: 1fr; }
  .toy-card, .toy-card-large, .toy-card-wide { grid-column: auto; }
  .toy-card .toy-media, .toy-card-large .toy-media, .toy-card-wide .toy-media { min-height: 420px; }
  .story-media { min-height: 520px; }
  .closing { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .has-js .reveal { opacity: 1; transform: none; }
  .media:hover img { transform: none; }
}

/* MIMO: oversized toy-packaging stage */
:root {
  color-scheme: light;
  --bg: #f7f4e9;
  --surface: #fffdf6;
  --text: #17232d;
  --muted: #50616a;
  --line: #bdc7c5;
  --accent: #f1c62f;
  --accent-ink: #17232d;
}
body { font-family: "Trebuchet MS", "Microsoft YaHei UI", sans-serif; }
.site-header { background: rgb(247 244 233 / .94); }
.hero {
  min-height: calc(100dvh - 94px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  margin-top: 24px;
  padding: clamp(34px, 5vw, 72px);
  border-radius: 44px;
  background:
    radial-gradient(circle at 14% 18%, rgb(255 255 255 / .5) 0 5rem, transparent 5.1rem),
    radial-gradient(circle at 88% 12%, rgb(232 92 76 / .72) 0 3.2rem, transparent 3.3rem),
    var(--accent);
}
.hero-copy { position: relative; z-index: 2; align-self: end; padding-bottom: clamp(8px, 3vw, 42px); }
.hero h1,
.section-heading h2,
.story-copy h2,
.closing h2 {
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Microsoft YaHei UI", sans-serif;
  font-weight: 900;
  letter-spacing: -.07em;
}
.hero h1 { max-width: 7ch; font-size: clamp(72px, 8.2vw, 126px); line-height: .82; }
.hero-copy > p:not(.eyebrow) { color: #263842; }
.hero-media {
  min-height: min(70dvh, 760px);
  position: relative;
  border: 8px solid #fffdf6;
  border-radius: 34px;
  background: #bcdce9;
  box-shadow: 24px 24px 0 #e85c4c;
  transform: rotate(-2deg);
}
.hero-media img { position: absolute; inset: 0; object-fit: contain; }
.hero .button { color: #fffdf6; background: #17232d; }
.toy-card { border: 0; box-shadow: 0 24px 70px rgb(69 84 91 / .12); }
.toy-copy h3 { font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; }

@media (min-width: 941px) {
  .toy-card:nth-child(2) { transform: translateY(64px) rotate(1deg); }
  .toy-card:nth-child(3) { transform: rotate(-1deg); }
}

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { align-self: auto; padding-bottom: 0; }
  .hero-media { min-height: 52dvh; }
}

@media (max-width: 767px) {
  .hero { min-height: calc(100dvh - 78px); gap: 28px; margin-top: 14px; padding: 28px 22px 36px; border-radius: 28px; }
  .hero h1 { max-width: 6ch; font-size: clamp(54px, 17vw, 72px); }
  .hero-media { min-height: 42dvh; border-width: 5px; border-radius: 22px; box-shadow: 12px 12px 0 #e85c4c; transform: rotate(-1deg); }
}