/* Playful toy-store palette; composition and character motion stay independent. */
.hero-reference-page{
  --hero-ink:#243653;
  --hero-paper:#fffaf2;
  --hero-secondary:#3f5269;
  --hero-sky:#c4f1ff;
  --hero-sun:#ffda61;
  --hero-coral:#ad3047;
}
.hero-reference-page .site-header{
  position:absolute;inset:20px 0 auto;z-index:20;
  color:var(--hero-ink);background:transparent;backdrop-filter:none;
  border:0;box-shadow:none;
}
.hero-reference-page .site-header.scrolled{border:0;box-shadow:none}
.hero-reference-page .header-inner{
  width:min(1404px,calc(100% - 144px));height:84px;
  display:grid;grid-template-columns:1fr auto 1fr;gap:24px;
}
.hero-reference-page .header-nav{grid-column:1;grid-row:1;gap:22px;margin:0;font-size:12px;font-weight:650}
.hero-reference-page .header-nav a{min-height:44px;display:flex;align-items:center;padding:8px 0}
.hero-reference-page .header-nav a:after{background:var(--hero-sun)}
.hero-reference-page .logo{grid-column:2;grid-row:1;gap:9px}
.hero-reference-page .logo-symbol{width:33px;height:33px;background:var(--hero-sun);border-radius:11px 14px 11px 5px}
.hero-reference-page .logo-symbol i{width:6px;height:9px;background:var(--hero-ink)}
.hero-reference-page .logo-copy{font-size:18px;letter-spacing:-.6px}
.hero-reference-page .logo-copy small{font-size:7px;letter-spacing:1.7px;margin-top:5px}
.hero-reference-page .header-actions{grid-column:3;grid-row:1;justify-self:end}
.hero-reference-page .cart-button{border-color:#24365330;background:#fffaf280;color:var(--hero-ink);min-height:44px}
.hero-reference-page .cart-button:hover,.hero-reference-page .menu-toggle:hover{background:#fffaf2d9}
.hero-reference-page .menu-toggle{background:#fffaf280;color:var(--hero-ink)}
.hero-reference-page .hero-wrap{padding:20px 20px 0}
.hero-reference-page .hero--reference{
  max-width:1560px;min-height:720px;border-radius:30px;color:var(--hero-ink);
  background:
    radial-gradient(ellipse at 61% 40%,#fff0aa 0%,#fff0aa99 25%,transparent 57%),
    linear-gradient(140deg,#c4f1ff 0%,#99dfea 58%,#c4eddb 100%);
  box-shadow:inset 0 0 0 1px #ffffffb3;transition:none;
}
.hero-reference-page .hero--reference:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 5% 95%,#fffaf25c,transparent 40%);
}
.hero--reference .hero-inner{width:100%;min-height:720px;display:block}
.hero--reference .hero-copy{position:absolute;left:4.7%;top:178px;padding:0;width:27%;z-index:4}
.hero--reference .section-label{font-size:10px;letter-spacing:1.1px;color:var(--hero-ink);gap:8px}
.hero--reference .section-label:before{width:8px;height:8px;background:var(--hero-coral);box-shadow:0 0 0 4px #ad304711}
.hero--reference h1{font-size:clamp(48px,5.35vw,80px);line-height:.96;font-weight:900;letter-spacing:-.068em;margin:24px 0 23px;text-transform:uppercase}
.hero--reference h1>span{display:block;white-space:nowrap}
.hero--reference h1 .accent{font-size:1em;line-height:.96;letter-spacing:inherit;margin-top:1px;color:var(--hero-coral)}
.hero--reference .hero-description{font-size:13px;line-height:1.65;letter-spacing:0;color:var(--hero-ink);max-width:240px;margin:0}
.hero--reference .hero-buttons{display:flex;align-items:flex-start;flex-direction:column;gap:9px;margin-top:27px}
.hero--reference .button.coral{background:var(--hero-sun);color:var(--hero-ink);border-color:#f5c544;min-height:52px;font-size:12px;gap:20px;padding:13px 20px}
.hero--reference .button.coral:hover{background:#ffe58a;box-shadow:0 10px 24px #91732b25;transform:translateY(-2px)}
.hero--reference .video-link{color:var(--hero-ink);font-size:11px;padding:5px 4px;min-height:44px;gap:10px}
.hero--reference .play-dot{width:30px;height:30px;border-color:#24365359}
.hero--reference .play-dot svg{fill:var(--hero-ink)}
.hero--reference.hero--head .hero-visual{position:absolute;inset:0;width:100%;margin:0;padding:0;height:auto;z-index:2;pointer-events:none}
.hero--reference.hero--head .hero-head-stage{position:absolute;left:20%;right:auto;top:85px;width:80%;aspect-ratio:1.9;transform:none;isolation:isolate}
.hero--reference .hero-head-renderer{pointer-events:auto}
.hero--reference .hero-art{border-radius:34px}
.hero--reference .hero-orb,.hero--reference .hero-spark,.hero--reference .touch-badge{display:none}
.hero--reference .hero-prompt{position:absolute;top:92px;right:4.7%;width:162px;z-index:5;pointer-events:none}
.hero--reference .cursor-orbit{position:absolute;left:-48px;top:2px;width:36px;height:36px;border:1px solid #24365345;border-radius:50%;display:grid;place-items:center}
.hero--reference .cursor-orbit svg{width:17px;height:17px;fill:var(--hero-ink);stroke:var(--hero-ink);stroke-width:1;transform:rotate(-12deg)}
.hero--reference .cursor-invitation{font-size:15px;line-height:1.3;font-weight:750;letter-spacing:-.45px;text-wrap:balance}
.hero--reference .touch-instruction{display:none}
.hero--reference.hero--head .speech{position:static;padding:12px 0 0;margin-top:13px;max-width:none;border:0;border-top:1px solid #24365330;border-radius:0;background:none;box-shadow:none;transform:none;color:var(--hero-ink);font-size:12px;line-height:1.5;letter-spacing:0;font-weight:500}
.hero--reference .speech small{font-size:8px;letter-spacing:.75px;color:var(--hero-coral);margin-bottom:5px;font-weight:650;line-height:1.5}
.hero--reference.hero--head .mood-picker{position:absolute;right:4.7%;bottom:52px;width:42%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:10px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;backdrop-filter:none;z-index:6}
.hero--reference .mood-picker button{position:relative;min-width:0;min-height:168px;padding:17px 16px 14px;border:1px solid #ffffffd9;border-radius:20px;text-align:left;background:var(--card-bg,#fff0b8);color:var(--hero-ink);box-shadow:0 8px 20px #3e668012;backdrop-filter:none;font-size:12px;transition:background .2s,border-color .2s,transform .2s}
.hero--reference .mood-picker button[data-mood=chat]{--card-bg:#fff0b8}
.hero--reference .mood-picker button[data-mood=story]{--card-bg:#e9e2ff}
.hero--reference .mood-picker button[data-mood=play]{--card-bg:#ffdccc}
.hero--reference .mood-picker button[aria-pressed=true]{background:var(--card-bg);border-color:var(--hero-ink);box-shadow:0 0 0 1px var(--hero-ink),0 8px 22px #3e668018;color:var(--hero-ink)}
.hero--reference .mood-index{display:block;font-size:8px;line-height:1;letter-spacing:1px;margin-bottom:11px;color:var(--hero-secondary)}
.hero--reference .mood-picker strong{display:block;font-size:19px;font-weight:760;letter-spacing:-.65px;line-height:1.15;margin-bottom:8px}
.hero--reference .mood-description{display:block;font-size:11px;font-weight:450;line-height:1.45;letter-spacing:-.1px;color:var(--hero-secondary)}
.hero--reference .mood-arrow{margin-top:16px;width:33px;height:23px;border-radius:20px;display:grid;place-items:center;background:var(--hero-paper);color:var(--hero-ink)}
.hero--reference .mood-arrow svg{width:17px;height:17px}
.hero--reference .mood-picker button[aria-pressed=true] .mood-arrow{background:var(--hero-ink);color:var(--hero-paper)}
.hero--reference .hero-number{left:4.7%;bottom:31px;font-size:8px;line-height:1.5;letter-spacing:1px;text-transform:uppercase;font-weight:550;color:var(--hero-secondary);gap:10px}
.hero--reference .hero-number:before{display:none}
.hero--reference .hero-number>span{font-size:18px;font-weight:400;color:var(--hero-coral)}
.hero--reference .hero-caption{left:auto;right:4.7%;bottom:25px;max-width:none;font-size:9px;line-height:1.4;color:var(--hero-secondary);letter-spacing:0}
.hero-reference-page .site-header :is(a,button):focus-visible,.hero--reference :is(a,button):focus-visible{outline:3px solid var(--hero-ink);outline-offset:5px}
@media(hover:hover){.hero--reference .mood-picker button:hover{background:var(--card-bg);border-color:var(--hero-ink);transform:translateY(-3px)}}
@media(min-width:1550px){
  .hero-reference-page .hero--reference,.hero--reference .hero-inner{min-height:760px}
  .hero--reference .hero-copy{top:188px}
  .hero--reference.hero--head .hero-head-stage{left:20%;top:85px;width:80%}
}
@media(max-width:1100px) and (min-width:701px){
  .hero-reference-page .header-inner{width:calc(100% - 104px);gap:18px;height:78px}
  .hero-reference-page .header-nav{font-size:10px;gap:17px}
  .hero-reference-page .hero--reference,.hero--reference .hero-inner{min-height:680px}
  .hero--reference .hero-copy{top:171px;left:4.5%;width:29%}
  .hero--reference h1{font-size:clamp(43px,5.3vw,60px);margin:23px 0}
  .hero--reference .section-label{font-size:8px;letter-spacing:.65px}
  .hero--reference .hero-description{font-size:12px;max-width:200px}
  .hero--reference.hero--head .hero-head-stage{left:20%;top:85px;width:80%;aspect-ratio:1.48}
  .hero--reference .hero-prompt{top:112px;right:4.5%;width:143px}
  .hero--reference .cursor-orbit{display:none}
  .hero--reference .cursor-invitation{font-size:13px}
  .hero--reference.hero--head .speech{font-size:10px;margin-top:10px;padding-top:9px}
  .hero--reference.hero--head .mood-picker{width:46%;right:4.5%;gap:8px;bottom:51px}
  .hero--reference .mood-picker button{padding:15px 12px 12px;min-height:158px;border-radius:17px}
  .hero--reference .mood-picker strong{font-size:16px;letter-spacing:-.4px}
  .hero--reference .mood-description{font-size:10px}
  .hero--reference .hero-caption{right:4.5%;font-size:8px}
  .hero--reference .hero-number{left:4.5%;font-size:7px;max-width:230px;letter-spacing:.6px}
}
@media(max-width:700px){
  .hero-reference-page .site-header{top:10px}
  .hero-reference-page .header-inner{width:calc(100% - 60px);height:77px;display:flex;gap:12px}
  .hero-reference-page .logo{margin-right:auto;gap:8px}
  .hero-reference-page .logo-copy{font-size:17px}
  .hero-reference-page .logo-symbol{width:31px;height:31px}
  .hero-reference-page .header-actions{margin:0;gap:8px}
  .hero-reference-page .cart-button{padding:8px 12px;min-height:44px}
  .hero-reference-page .menu-toggle{width:44px;height:44px}
  .hero-reference-page .mobile-menu.open{margin:0 20px;padding:12px 20px 17px;background:var(--hero-paper);color:var(--hero-ink);border:1px solid #24365326;border-radius:18px;box-shadow:0 14px 30px #24365326}
  .hero-reference-page .mobile-menu a{min-height:44px;font-size:14px}
  .hero-reference-page .hero-wrap{padding:10px 10px 0}
  .hero-reference-page .hero--reference{border-radius:25px;min-height:0;background:radial-gradient(ellipse at 59% 55%,#fff0aa 0%,#fff0aa66 25%,transparent 56%),linear-gradient(150deg,#c4f1ff 0%,#a8e4ec 55%,#c4eddb 100%)}
  .hero--reference .hero-inner{display:flex;flex-direction:column;min-height:0;width:100%}
  .hero--reference .hero-copy{position:relative;inset:auto;width:100%;padding:104px 22px 0;z-index:4}
  .hero--reference .section-label{font-size:8px;letter-spacing:1px}
  .hero--reference h1{font-size:clamp(47px,14.5vw,75px);line-height:.94;margin:20px 0 20px;letter-spacing:-.065em}
  .hero--reference h1>span,.hero--reference h1 .accent{display:block;line-height:.94;font-size:1em}
  .hero--reference h1>span:first-child:after{display:none}
  .hero--reference .hero-description{font-size:13px;line-height:1.6;max-width:290px}
  .hero--reference .hero-description br{display:none}
  .hero--reference .hero-buttons{flex-direction:row;align-items:center;flex-wrap:wrap;gap:13px;margin-top:20px}
  .hero--reference .button.coral{min-height:49px;padding:12px 16px;font-size:11px;gap:12px}
  .hero--reference .video-link{font-size:10px;gap:7px;padding:4px 0}
  .hero--reference .play-dot{width:27px;height:27px}
  .hero--reference.hero--head .hero-visual{position:relative;inset:auto;width:calc(100% + 24px);height:240px;margin:6px -12px 0;flex-shrink:0}
  .hero--reference.hero--head .hero-head-stage{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
  .hero--reference .hero-prompt{position:relative;inset:auto;width:auto;margin:-3px 22px 20px;display:flex;gap:17px;align-items:start;z-index:5}
  .hero--reference .cursor-orbit{display:none}
  .hero--reference .pointer-instruction{display:none}
  .hero--reference .touch-instruction{display:inline}
  .hero--reference .cursor-invitation{font-size:11px;line-height:1.4;flex:0 0 110px;padding-top:4px;letter-spacing:-.2px}
  .hero--reference.hero--head .speech{margin:0;padding:2px 0 2px 15px;border:0;border-left:1px solid #24365330;font-size:11px;line-height:1.5;flex:1;min-width:0}
  .hero--reference .speech small{font-size:7px;letter-spacing:.4px;margin-bottom:3px}
  .hero--reference.hero--head .mood-picker{position:relative;inset:auto;width:calc(100% - 40px);align-self:stretch;margin:0 20px;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero--reference .mood-picker button{padding:13px 10px 11px;min-height:148px;border-radius:16px;backdrop-filter:none}
  .hero--reference .mood-index{font-size:7px;margin-bottom:10px}
  .hero--reference .mood-picker strong{font-size:15px;letter-spacing:-.45px;margin-bottom:7px}
  .hero--reference .mood-description{font-size:10px;line-height:1.5;letter-spacing:-.15px}
  .hero--reference .mood-description br{display:none}
  .hero--reference .mood-arrow{margin-top:13px;width:30px;height:22px}
  .hero--reference .hero-number{display:none}
  .hero--reference .hero-caption{position:relative;inset:auto;margin:14px 22px 24px;text-align:left;font-size:8px;line-height:1.55;max-width:290px}
}
@media(max-width:370px){
  .hero--reference .hero-copy{padding-left:19px;padding-right:19px}
  .hero--reference .hero-buttons{gap:6px}
  .hero--reference .button.coral{font-size:10px;padding-left:13px;padding-right:13px}
  .hero--reference .video-link{font-size:9px}
  .hero--reference .mood-picker strong{font-size:13px}
  .hero--reference .mood-description{font-size:9px}
}
@media(pointer:coarse){.hero--reference .pointer-instruction{display:none}.hero--reference .touch-instruction{display:inline}}
@media(prefers-reduced-motion:reduce){
  .hero--reference *, .hero--reference *:before,.hero--reference *:after{animation:none!important;transition:none!important}
  .hero--reference .mood-picker button:hover,.hero--reference .button.coral:hover{transform:none}
}