@charset "UTF-8";
:root {
  --cream:#fff8ea;
  --ink:#173a53;
  --muted:#506576;
  --coral:#d74c2f;
  --coral-soft:#ff714b;
  --gold:#f9b72c;
  --leaf:#8eb64a;
  --teal:#57ada1;
  --blue:#247aaa;
  --mint:#e8f0dc;
  --line:#dddccc;
  --rounded:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  --body:"Trebuchet MS",Arial,sans-serif;
  --page:1180px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
}
a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}
a:hover {
  color:var(--coral);
}
button {
  color:inherit;
}
button,a {
  touch-action:manipulation;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
svg {
  flex-shrink:0;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  font-family:var(--rounded);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.04em;
}
h2 {
  font-size:clamp(36px,4vw,55px);
}
h3 {
  font-size:25px;
}
p+p {
  margin-top:18px;
}
button:focus-visible,a:focus-visible,[tabindex="0"]:focus-visible {
  outline:3px solid #175f93;
  outline-offset:6px;
}
button {
  cursor:pointer;
}
[hidden] {
  display:none!important;
}
::selection {
  background:#f9d578;
  color:var(--ink);
}
.skip-link {
  position:fixed;
  z-index:20;
  top:12px;
  left:12px;
  background:white;
  padding:12px 20px;
  border:2px solid var(--ink);
  transform:translateY(-160%);
}
.skip-link:focus {
  transform:translateY(0);
}
.eyebrow {
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.6;
}
.section-wrap {
  max-width:var(--page);
  margin:0 auto;
  padding:100px 32px;
}
.site-header {
  max-width:1320px;
  min-height:112px;
  margin:auto;
  padding:18px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  position:relative;
  z-index:5;
}
.brand {
  display:block;
  width:192px;
  flex-shrink:0;
}
.brand img {
  width:100%;
  height:auto;
}
.main-nav {
  display:flex;
  align-items:center;
  gap:26px;
}
.header-social {
  display:flex;
  align-items:center;
  gap:6px;
  padding-left:18px;
  border-left:1px solid var(--line);
}
.header-social a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--ink);
  color:var(--cream);
  text-decoration:none;
  transition:background .2s,color .2s;
}
.header-social a:hover { background:var(--gold); color:var(--ink); }
.main-nav>a:not(.button) {
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  padding:10px 0;
}
.main-nav>a:not(.button):hover {
  text-decoration:underline;
  text-underline-offset:8px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:13px 25px;
  border-radius:999px;
  background:var(--ink);
  border:2px solid var(--ink);
  color:white;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  line-height:1.4;
  box-shadow:0 4px 0 #102c401a;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.button:hover {
  background:#28556d;
  border-color:#28556d;
  color:white;
  transform:translateY(-2px);
  box-shadow:0 6px 0 #102c401a;
}
.button-small {
  min-height:44px;
  padding:10px 19px;
  font-size:13px;
}
.text-link {
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  gap:10px;
  align-items:center;
  min-height:44px;
}
.text-link:hover {
  text-decoration:underline;
}
.text-link span {
  font-size:24px;
  font-weight:400;
}
.menu-toggle {
  display:none;
  border:1px solid var(--line);
  border-radius:30px;
  background:transparent;
  padding:9px 15px;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:700;
}
.menu-toggle svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
.hero {
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:40px 24px 25px;
  isolation:isolate;
}
.hero-copy {
  position:relative;
  z-index:2;
}
.hero .eyebrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#526f58;
}
.little-spark {
  color:#e59a17;
  font-size:21px;
  line-height:1;
}
.hero h1 {
  font-size:clamp(62px,6.9vw,100px);
  line-height:1;
  letter-spacing:-.055em;
  margin-top:18px;
}
.hero h1>span {
  color:var(--coral);
}
.hero-description {
  font-size:18px;
  line-height:1.6;
  margin-top:22px;
  color:var(--muted);
}
.hero-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;
  margin-top:25px;
}
.hero-sun {
  position:absolute;
  width:115px;
  height:115px;
  top:89px;
  right:calc(50% - 423px);
  color:var(--gold);
  transform:rotate(12deg);
}
.doodle-note {
  position:absolute;
  width:48px;
  height:64px;
  color:var(--teal);
}
.note-one {
  left:calc(50% - 389px);
  top:228px;
  transform:rotate(-16deg);
}
.hero-spark {
  position:absolute;
  color:#e49b21;
  font-size:40px;
  right:calc(50% - 348px);
  top:325px;
  transform:rotate(15deg);
}
.hero-stage {
  position:relative;
  max-width:1060px;
  margin:24px auto -5px;
  z-index:1;
}
.hero-friends {
  position:relative;
  width:100%;
  z-index:2;
}
.hero-stage:before {
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:220%;
  height:68%;
  bottom:-73px;
  border-radius:50% 50% 0 0 / 70% 70% 0 0;
  background:var(--mint);
  z-index:-1;
}
.stage-orbit {
  position:absolute;
  width:108%;
  height:23%;
  border:1px solid #b6c897;
  border-radius:50%;
  left:-4%;
  bottom:4%;
  transform:rotate(-3deg);
  z-index:0;
}
.stage-flower {
  position:absolute;
  color:var(--coral-soft);
  line-height:1;
  font-size:51px;
  z-index:2;
}
.flower-one {
  left:-4%;
  bottom:21%;
  transform:rotate(-14deg);
}
.flower-two {
  right:-4%;
  bottom:7%;
  font-size:38px;
  color:#7ea85c;
}
.hero-footnote {
  position:relative;
  z-index:2;
  font-size:12px;
  color:#526747;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  padding-top:9px;
  line-height:1.5;
}
.footnote-dot {
  width:4px;
  height:4px;
  background:#73825d;
  border-radius:50%;
}
.world {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:100px;
  align-items:center;
  padding-top:105px;
  padding-bottom:110px;
}
.section-heading .eyebrow {
  color:#687955;
  margin-bottom:20px;
}
.section-heading>p:last-child {
  margin-top:24px;
  color:var(--muted);
  font-size:16px;
  line-height:1.9;
}
.world-notes {
  display:grid;
  gap:25px;
}
.world-note {
  display:flex;
  gap:22px;
  align-items:flex-start;
}
.note-icon {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:56px;
  height:60px;
  border-radius:48% 46% 47% 43%;
  font-size:34px;
  font-family:Arial,sans-serif;
  font-weight:400;
  line-height:1;
  transform:rotate(-8deg);
}
.note-coral {
  background:#ffe1d1;
  color:#b9422c;
}
.note-green {
  background:#e3edcf;
  color:#4c7029;
  transform:rotate(7deg);
}
.note-gold {
  background:#ffedb8;
  color:#91640c;
}
.world-note h3 {
  font-size:23px;
  letter-spacing:-.025em;
}
.world-note p {
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
  margin-top:7px;
  max-width:350px;
}
.friends-section {
  background:#f0ebdd;
  border-top:1px solid #e5decf;
  border-bottom:1px solid #e5decf;
  position:relative;
}
.friends-section .section-wrap {
  padding-top:83px;
  padding-bottom:85px;
}
.friends-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
}
.friends-heading .eyebrow {
  margin-bottom:19px;
  color:#677953;
}
.friends-heading>p {
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  padding-bottom:4px;
}
.choose-prompt {
  display:inline-block;
  margin-top:11px;
  font-size:12px;
  font-weight:700;
  color:#7c6247;
}
.friends-lineup {
  margin:20px 0 -6px;
}
.friends-lineup img {
  width:100%;
}
.friend-tabs {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  position:relative;
  margin-top:5px;
}
.friend-tab {
  border:1px solid transparent;
  background:transparent;
  border-radius:16px;
  padding:16px 8px 15px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:7px;
  font-family:var(--rounded);
  font-size:23px;
  font-weight:700;
  line-height:1.2;
  transition:background .18s,transform .18s;
}
.friend-tab:hover {
  background:#fff8ea99;
  transform:translateY(-2px);
}
.friend-tab[aria-selected="true"] {
  background:var(--cream);
  border-color:#d8cebb;
  box-shadow:0 3px 0 #d8cebb55;
}
.friend-kind {
  display:block;
  flex-basis:100%;
  font:11px/1.5 var(--body);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#61717b;
}
.friend-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--friend-color);
}
.friend-country {
  display:block;
  flex-basis:100%;
  font:700 12px/1.5 var(--body);
  color:var(--ink);
  margin-top:2px;
}
.friend-home {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:15px;
  padding:5px 11px;
  border:1px solid #173a531a;
  border-radius:999px;
  background:#ffffff70;
  color:var(--ink);
  font:12px/1.6 var(--body);
}
.friend-home svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.friend-mimi {
  --friend-color:#e8942e;
  --friend-bg:#fff0d0;
}
.friend-avo {
  --friend-color:#789f43;
  --friend-bg:#e8edce;
}
.friend-pip {
  --friend-color:#df634d;
  --friend-bg:#ffe4d6;
}
.friend-kiki {
  --friend-color:#987244;
  --friend-bg:#eee2d0;
}
.friend-bibi {
  --friend-color:#826093;
  --friend-bg:#ece2ef;
}
.friend-lulu {
  --friend-color:#da7893;
  --friend-bg:#f9e0e5;
}
.friend-panels {
  margin-top:22px;
}
.friend-panel {
  display:grid;
  grid-template-columns:.9fr 1.2fr 60px;
  gap:35px;
  align-items:center;
  padding:32px 36px;
  border-radius:22px;
  background:var(--friend-bg);
  min-height:168px;
  border:1px solid #173a5310;
}
.friend-panel+.friend-panel {
  margin-top:16px;
}
.friend-panel[role="tabpanel"] {
  margin-top:0;
}
.friend-panel .eyebrow {
  font-size:10px;
  letter-spacing:.1em;
  margin-bottom:10px;
  color:#4e616c;
}
.friend-panel h3 {
  font-size:28px;
  letter-spacing:-.03em;
}
.friend-biography {
  min-width:0;
}
.friend-biography > p, .biography-translation > p:not(.translation-label) {
  font-size:15px;
  line-height:1.8;
  color:#405561;
}
.friend-greeting { margin-bottom:22px; }
.friend-greeting p { margin:0; }
.greeting-language, .translation-label { font-size:12px; font-weight:700; color:#405561; }
.friend-greeting .greeting-words { margin:5px 0; font-size:30px; line-height:1.5; font-weight:700; color:var(--ink); }
.greeting-meaning { font-size:16px; color:var(--ink); }
.greeting-meaning span { font-size:12px; color:var(--muted); }
.friend-greeting .greeting-pronunciation { margin-top:7px; font-size:13px; line-height:1.6; color:#405561; }
.biography-translation { margin-top:22px; padding-top:18px; border-top:1px solid #173a5329; }
.biography-translation .translation-label { margin:0 0 9px; }
.biography-translation > p:last-child { margin:0; }
:lang(hi) { font-family:"Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif; }
:lang(zh-Hans) { font-family:"Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif; }
.panel-doodle {
  font-size:59px;
  font-weight:400;
  color:var(--friend-color);
  line-height:1;
  text-align:center;
  transform:rotate(9deg);
}
.grown-ups {
  display:grid;
  grid-template-columns: .85fr 1fr;
  gap:95px;
  align-items:center;
  padding-top:120px;
  padding-bottom:120px;
}
.pip-postcard {
  padding:21px 21px 24px;
  position:relative;
  transform:rotate(-4deg);
  border-radius:3px;
  background:#fffcf3;
  box-shadow:0 13px 30px #50432310,0 2px 2px #50432310;
  border:1px solid #e8dfca;
  max-width:410px;
  margin:0 10px;
}
.postcard-label {
  display:flex;
  justify-content:space-between;
  gap:15px;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.08em;
  font-weight:700;
  margin-bottom:18px;
}
.postcard-label span {
  font-size:20px;
  line-height:1;
  color:var(--coral);
}
.pip-postcard img {
  width:100%;
  border-radius:2px;
}
.pip-postcard>p {
  text-align:center;
  font-family:var(--rounded);
  font-size:23px;
  line-height:1.3;
  margin-top:22px;
  letter-spacing:-.02em;
}
.postcard-tape {
  position:absolute;
  top:-18px;
  left:35%;
  width:125px;
  height:35px;
  background:#f7ca6299;
  transform:rotate(7deg);
  clip-path:polygon(1% 0,98% 0,96% 19%,100% 36%,97% 54%,100% 70%,97% 83%,99% 100%,1% 100%,3% 80%,0 60%,3% 38%,0 16%);
}
.grown-ups-copy>.eyebrow {
  margin-bottom:20px;
  color:#6b7b52;
}
.grown-ups-copy>p:not(.eyebrow) {
  margin-top:23px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85;
}
.together-note {
  border-top:1px solid var(--line);
  display:flex;
  gap:15px;
  align-items:flex-start;
  margin-top:29px;
  padding-top:24px;
}
.together-note>span {
  font-size:34px;
  line-height:1;
  color:var(--coral);
}
.together-note p {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}
.together-note strong {
  color:var(--ink);
  font-size:14px;
}
.channel-section {
  background:#e7efde;
  position:relative;
  padding:77px 30px 65px;
  border-top:1px solid #d4dfc6;
  overflow:hidden;
  text-align:center;
}
.channel-section:before,.channel-section:after {
  content:"";
  position:absolute;
  bottom:-135px;
  border-radius:50%;
  width:420px;
  height:320px;
  background:#d7e4c8;
  transform:rotate(-14deg);
}
.channel-section:before {
  left:-190px;
}
.channel-section:after {
  right:-190px;
  transform:rotate(14deg);
}
.channel-inner {
  position:relative;
  max-width:860px;
  margin:0 auto;
  z-index:1;
}
.channel-inner>.eyebrow {
  margin-bottom:17px;
  color:#5d7054;
}
.channel-inner h2 {
  font-size:clamp(44px,5.3vw,69px);
}
.channel-inner>p:not(.eyebrow):not(.channel-handle) {
  font-size:16px;
  margin-top:18px;
  color:#526650;
}
.channel-inner .button {
  margin-top:25px;
}
.channel-handle {
  font-size:12px;
  color:#526650;
  margin-top:15px;
}
.channel-note {
  position:absolute;
  left:10px;
  top:49px;
  font-size:78px;
  line-height:1;
  color:#719963;
  transform:rotate(-17deg);
}
.social-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:30px;
}
.social-links a {
  display:flex;
  flex:0 1 220px;
  flex-direction:column;
  gap:7px;
  padding:18px 24px;
  border:1px solid #b6c8a5;
  border-radius:18px;
  background:var(--cream);
  text-decoration:none;
}
.social-links a:hover { background:#fffdf7; border-color:var(--ink); }
.social-links strong { font-size:17px; }
.social-links a > span { font-size:13px; color:var(--muted); }
.footer-social {
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  font-size:12px;
  font-weight:700;
}
.footer-social a { padding:10px 0; text-decoration:none; }
.footer-social a:hover { text-decoration:underline; }
.site-footer {
  max-width:1320px;
  margin:auto;
  padding:49px 40px 29px;
  display:grid;
  grid-template-columns:210px 1fr auto;
  gap:20px 50px;
  align-items:center;
  position:relative;
}
.footer-brand {
  width:185px;
}
.site-footer>p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}
.footer-links {
  display:flex;
  gap:23px;
  align-items:center;
  font-size:12px;
  font-weight:700;
}
.footer-links a {
  padding:10px 0;
  text-decoration:none;
}
.footer-links a:hover {
  text-decoration:underline;
}
.site-footer small {
  grid-column:1/-1;
  text-align:right;
  font-size:10px;
  color:#6a7676;
}
.rainbow-rule {
  position:absolute;
  left:40px;
  right:40px;
  bottom:0;
  height:5px;
  display:flex;
  gap:0;
  border-radius:5px 5px 0 0;
  overflow:hidden;
}
.rainbow-rule i {
  flex:1;
}
.rainbow-rule i:nth-child(1) {
  background:#ff714b;
}
.rainbow-rule i:nth-child(2) {
  background:#f9b72c;
}
.rainbow-rule i:nth-child(3) {
  background:#8eb64a;
}
.rainbow-rule i:nth-child(4) {
  background:#57ada1;
}
.rainbow-rule i:nth-child(5) {
  background:#2f92c2;
}
.rainbow-rule i:nth-child(6) {
  background:#be8ab9;
}
.document-main {
  max-width:810px;
  margin:0 auto;
  padding:65px 30px 100px;
  min-height:65vh;
}
.document-main h1 {
  font-size:clamp(38px,5vw,60px);
  margin:15px 0 28px;
}
.document-main h2 {
  font-size:25px;
  letter-spacing:-.02em;
  margin-top:35px;
  margin-bottom:12px;
}
.document-main p {
  color:var(--muted);
  font-size:16px;
  line-height:1.9;
}
.document-main .button {
  margin-top:26px;
}
.document-main .eyebrow {
  color:#667650;
  font-size:12px;
}
.document-main ul {
  padding-left:22px;
  color:var(--muted);
}
.document-header .main-nav {
  gap:20px;
}
.error-main {
  text-align:center;
  max-width:780px;
}
.error-main>img {
  max-width:600px;
  margin:40px auto 0;
}
.error-number {
  font-family:var(--rounded);
  font-size:90px;
  line-height:1;
  color:var(--coral);
}
@media(min-width:1450px) {
  .hero {
    padding-top:55px;
  }
  .hero-stage {
    max-width:1120px;
  }
  .hero-footnote {
    padding-top:10px;
  }
}
@media(max-width:1000px) {
  .site-header {
    padding:15px 28px;
    min-height:98px;
    gap:18px;
  }
  .brand {
    width:163px;
  }
  .main-nav {
    gap:16px;
  }
  .header-social { gap:4px; padding-left:12px; }
  .main-nav>a:not(.button) {
    font-size:12px;
  }
  .hero {
    padding-top:28px;
  }
  .hero-sun {
    width:90px;
    height:90px;
    right:7%;
    top:110px;
  }
  .note-one {
    left:9%;
    top:235px;
    width:37px;
  }
  .hero-spark {
    right:13%;
    top:315px;
  }
  .hero-stage {
    max-width:850px;
  }
  .world {
    gap:45px;
  }
  .section-wrap {
    padding-left:35px;
    padding-right:35px;
  }
  .grown-ups {
    gap:55px;
  }
  .friend-panel {
    gap:25px;
    padding:28px;
    grid-template-columns:1fr 1.1fr;
  }
  .panel-doodle {
    display:none;
  }
  .site-footer {
    grid-template-columns:170px 1fr;
    gap:20px 35px;
    padding:38px 28px 27px;
  }
  .footer-brand {
    width:170px;
  }
  .footer-links {
    grid-column:1/-1;
    justify-content:center;
  }
  .site-footer small {
    text-align:center;
  }
  .rainbow-rule {
    left:28px;
    right:28px;
  }
  .channel-note {
    left:3%;
  }
}
@media(max-width:720px) {
  html {
    scroll-padding-top:25px;
  }
  .site-header {
    min-height:83px;
    padding:12px 22px;
    flex-wrap:wrap;
    gap:8px;
  }
  .brand {
    width:153px;
  }
  .main-nav {
    width:100%;
    justify-content:center;
    gap:20px;
    padding:12px 0 10px;
    flex-wrap:wrap;
  }
  .header-social {
    justify-content:center;
    width:100%;
    gap:12px;
    padding:12px 0 0;
    border-left:0;
  }
  .site-header > nav:not(.main-nav) { width:100%; }
  .main-nav>a:not(.button) {
    font-size:13px;
  }
  .main-nav .button {
    min-height:40px;
    padding:9px 17px;
    font-size:12px;
  }
  .js-ready .menu-toggle {
    display:flex;
  }
  .js-ready .main-nav {
    display:none;
  }
  .js-ready .main-nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:16px 5px;
    gap:3px;
  }
  .js-ready .main-nav.is-open>a:not(.button) {
    padding:12px 3px;
    border-bottom:1px solid var(--line);
  }
  .js-ready .main-nav.is-open>.button {
    margin-top:12px;
  }
  .hero {
    padding:36px 18px 25px;
  }
  .hero .eyebrow {
    font-size:10px;
    gap:8px;
    letter-spacing:.12em;
  }
  .little-spark {
    font-size:17px;
  }
  .hero h1 {
    font-size:clamp(54px,11.7vw,82px);
    line-height:1.04;
    margin-top:18px;
  }
  .hero-description {
    font-size:16px;
    margin-top:20px;
  }
  .hero-actions {
    flex-direction:column;
    gap:10px;
    margin-top:25px;
  }
  .hero-actions .button {
    min-height:52px;
  }
  .hero-actions .text-link {
    font-size:13px;
  }
  .hero-sun {
    top:10px;
    right:7%;
    width:40px;
    height:40px;
    opacity:.9;
  }
  .note-one {
    top:156px;
    left:5%;
    width:28px;
    height:38px;
  }
  .hero-spark {
    display:none;
  }
  .hero-stage {
    margin-top:22px;
    margin-left:-2px;
    margin-right:-2px;
  }
  .hero-stage:before {
    bottom:-92px;
    height:105%;
    width:280%;
    border-radius:50% 50% 0 0;
  }
  .stage-orbit {
    width:107%;
    left:-3%;
    bottom:0;
  }
  .stage-flower {
    display:none;
  }
  .hero-footnote {
    font-size:10px;
    gap:5px;
    flex-wrap:wrap;
    max-width:280px;
    margin:20px auto 0;
    padding:0;
  }
  .footnote-dot {
    display:none;
  }
  .hero-footnote span:not(.footnote-dot) {
    width:100%;
  }
  .section-wrap {
    padding:68px 25px;
  }
  .world {
    grid-template-columns:1fr;
    gap:35px;
  }
  .section-heading>p:last-child {
    font-size:15px;
    margin-top:21px;
  }
  .section-heading>p:last-child br {
    display:none;
  }
  .world-notes {
    gap:25px;
  }
  .world-note {
    gap:18px;
  }
  .world-note h3 {
    font-size:22px;
  }
  .world-note p {
    font-size:14px;
    max-width:100%;
  }
  .note-icon {
    width:49px;
    height:53px;
    font-size:31px;
  }
  .friends-section .section-wrap {
    padding-top:63px;
    padding-bottom:58px;
  }
  .friends-heading {
    display:block;
  }
  .friends-heading .eyebrow {
    font-size:10px;
    letter-spacing:.12em;
  }
  .friends-heading>p {
    margin-top:20px;
    font-size:14px;
  }
  .friends-heading>p br:first-of-type {
    display:none;
  }
  .friends-heading>p br:first-of-type:after {
    content:" ";
  }
  .choose-prompt {
    margin-top:8px;
  }
  .friends-lineup {
    margin:20px -12px 0;
  }
  .friend-tabs {
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:17px;
  }
  .friend-tab {
    font-size:21px;
    padding:13px 6px;
    border-color:#d8cebb66;
    border-radius:13px;
  }
  .friend-tab[aria-selected="true"] {
    border-color:var(--ink);
  }
  .friend-kind {
    font-size:10px;
  }
  .friend-country {
    font-size:11px;
  }
  .friend-dot {
    width:8px;
    height:8px;
  }
  .friend-panels {
    margin-top:20px;
  }
  .friend-panel {
    grid-template-columns:1fr;
    gap:17px;
    padding:27px 24px;
    min-height:235px;
    border-radius:18px;
  }
  .friend-panel h3 {
    font-size:28px;
  }
  .friend-biography > p, .biography-translation > p:not(.translation-label) {
    font-size:14px;
    line-height:1.85;
  }
  .friend-panel .eyebrow {
    font-size:9px;
  }
  .grown-ups {
    display:flex;
    flex-direction:column-reverse;
    gap:55px;
    padding-top:66px;
    padding-bottom:75px;
  }
  .grown-ups-copy>.eyebrow {
    font-size:10px;
    letter-spacing:.1em;
  }
  .grown-ups-copy>p:not(.eyebrow) {
    font-size:15px;
    margin-top:20px;
  }
  .together-note p {
    font-size:13px;
  }
  .together-note strong {
    font-size:13px;
  }
  .pip-postcard {
    width:calc(100% - 25px);
    max-width:350px;
    align-self:center;
    margin:0 12px;
    padding:17px 17px 21px;
  }
  .pip-postcard>p {
    font-size:22px;
  }
  .channel-section {
    padding:61px 24px 49px;
  }
  .channel-note {
    font-size:45px;
    left:0;
    top:21px;
  }
  .channel-inner>.eyebrow {
    font-size:9px;
    letter-spacing:.12em;
  }
  .channel-inner>p:not(.eyebrow):not(.channel-handle) {
    font-size:14px;
    max-width:265px;
    margin:19px auto 0;
  }
  .channel-inner .button {
    font-size:12px;
    padding:13px 19px;
    gap:8px;
  }
  .channel-handle {
    font-size:11px;
  }
  .channel-section:before,.channel-section:after {
    width:280px;
    height:200px;
    bottom:-100px;
  }
  .site-footer {
    display:flex;
    flex-direction:column;
    text-align:center;
    padding:32px 25px 26px;
    gap:12px;
  }
  .footer-brand {
    width:169px;
  }
  .site-footer>p {
    font-size:12px;
  }
  .footer-links {
    flex-wrap:wrap;
    gap:10px 23px;
    font-size:11px;
    justify-content:center;
    margin-top:5px;
  }
  .site-footer small {
    margin-top:3px;
    font-size:10px;
  }
  .rainbow-rule {
    left:25px;
    right:25px;
  }
  .document-header .main-nav {
    display:flex;
    flex-basis:auto;
    width:auto;
    padding:0;
  }
  .document-main {
    padding:40px 25px 75px;
  }
  .document-main h1 {
    font-size:39px;
  }
  .document-main p {
    font-size:15px;
  }
  .document-main h2 {
    font-size:25px;
  }
}
@media(max-width:370px) {
  .hero h1 {
    font-size:51px;
  }
  .hero-sun {
    right:5%;
    width:36px;
    height:36px;
    top:10px;
  }
  .note-one {
    left:1%;
    width:22px;
  }
  .hero .eyebrow {
    font-size:9px;
  }
  .hero-footnote {
    margin-top:17px;
  }
  .section-wrap {
    padding-left:21px;
    padding-right:21px;
  }
  .friend-tab {
    font-size:19px;
  }
  .channel-inner .button {
    font-size:11px;
    padding:13px 16px;
  }
  .channel-note {
    display:none;
  }
  .footer-links {
    gap:7px 15px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}
.friend-tabs:not([role="tablist"]) {
  display:none;
}
.choose-prompt {
  display:none;
}
.js-ready .choose-prompt {
  display:inline-block;
}

/* Frame the existing reference sheet's front three-quarter view without altering the artwork. */
.mara-section { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:65px; padding-top:70px; padding-bottom:70px; border-bottom:1px solid var(--line); }
.mara-art { position:relative; display:flex; justify-content:center; background:#f9f6ed; border-radius:48% 48% 24px 24px; overflow:hidden; }
.mara-portrait { position:relative; width:215px; aspect-ratio:300 / 610; overflow:hidden; }
.mara-portrait img { position:absolute; width:512%; max-width:none; height:auto; left:-146.666667%; top:0; mix-blend-mode:multiply; }
.mara-note { position:absolute; left:13%; top:22%; color:var(--coral); font-size:40px; transform:rotate(-12deg); }
.mara-copy h2 { margin:10px 0 18px; }
.mara-copy > p:not(.eyebrow):not(.friend-home) { max-width:470px; line-height:1.8; color:var(--muted); }
.mara-copy .friend-home { margin-bottom:25px; }
@media(max-width:720px) {
  .mara-section { grid-template-columns:1fr; gap:30px; padding-top:50px; padding-bottom:50px; }
  .mara-art { width:100%; max-width:360px; justify-self:center; }
  .mara-portrait { width:180px; }
  .mara-copy h2 { font-size:38px; }
}

/* Privacy information stays usable without scripts; the dialog is an enhancement. */
.privacy-notice {
  max-width:1080px;
  margin:28px auto;
  padding:24px 30px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#edf3e3;
  display:flex;
  align-items:center;
  gap:28px;
}
.privacy-notice h2 { font-size:23px; margin:0 0 5px; }
.privacy-notice p { margin:0; font-size:14px; line-height:1.65; max-width:600px; }
.privacy-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.privacy-notice .privacy-actions { flex-shrink:0; max-width:225px; }
.privacy-actions a { font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.privacy-dialog {
  width:min(570px, calc(100% - 32px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  padding:32px;
  border:1px solid var(--line);
  border-radius:25px;
  background:var(--cream);
  color:var(--ink);
  box-shadow:0 24px 80px #173a5338;
}
.privacy-dialog::backdrop { background:#173a5370; }
.privacy-dialog h2 { font-size:29px; margin:6px 30px 16px 0; }
.privacy-dialog p { font-size:14px; line-height:1.7; }
.privacy-dialog .eyebrow { margin:0; font-size:11px; }
.privacy-close { position:absolute; right:14px; top:12px; border:0; background:transparent; font-size:30px; width:44px; height:44px; }
.privacy-essential { margin:20px 0; padding:16px; background:var(--mint); border-radius:15px; font-size:15px; }
.privacy-essential p { margin:6px 0 0; }
.privacy-dialog label { display:block; font-weight:700; margin:20px 0 8px; font-size:15px; }
.privacy-dialog select { width:100%; border:1px solid #506576; border-radius:10px; padding:12px; font:inherit; font-size:15px; color:var(--ink); background:white; }
.privacy-dialog select:focus-visible { outline:3px solid #175f93; outline-offset:3px; }
.privacy-help { color:var(--muted); margin:12px 0 22px; }
.privacy-secondary { border:1px solid var(--ink); border-radius:25px; padding:10px 15px; background:transparent; font-size:13px; }
.privacy-dialog > a { display:inline-block; margin-top:16px; font-size:14px; text-decoration:underline; }
.privacy-status:empty { display:none; }
.privacy-status { font-size:14px; color:var(--ink); margin:16px 0 0; }
.privacy-page-status { max-width:1080px; margin:15px auto; padding:0 24px; }
.privacy-main a:not(.button) { text-decoration:underline; text-underline-offset:3px; }
.privacy-main li { margin:12px 0; }
.privacy-main code { font-size:.9em; overflow-wrap:anywhere; }
.privacy-main .button { margin-top:12px; margin-bottom:20px; }
.privacy-summary { font-size:18px!important; }
.retention-list { margin:20px 0; padding:22px; background:var(--mint); border-radius:18px; }
.retention-list dt { font-weight:700; margin-top:16px; }
.retention-list dt:first-child { margin-top:0; }
.retention-list dd { margin:7px 0 0; font-size:15px; color:var(--muted); }
@media(max-width:720px) {
  .privacy-notice { margin:22px 20px; padding:22px; flex-direction:column; align-items:stretch; gap:18px; }
  .privacy-notice .privacy-actions { max-width:none; }
  .privacy-dialog { padding:25px 22px; }
  .privacy-dialog h2 { font-size:25px; }
  .privacy-dialog .privacy-actions { align-items:stretch; flex-direction:column; }
}
