:root,
[data-theme="light"] {
  --bg:#f5f7f9; --bg-2:#e9eef2; --surface:#ffffff;
  --text:#14191d; --text-soft:#586670;
  --accent:#3aa7df; --accent-2:#5bb8e8; --accent-ink:#ffffff;
  --accent-text:#0e6f9e;                 
  --line:#dde4e9;
  --verified:#2f8f5e; --caution:#b07d22; --caution-text:#8a6014;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
}


[data-theme="dark"] {
  --bg:#0b1117; --bg-2:#111a22; --surface:#16212b;
  --text:#eaf1f6; --text-soft:#94a5b0;
  --accent:#54b6ec; --accent-2:#76c6f0; --accent-ink:#07131c;
  --accent-text:#6cc3ef;                 
  --line:#23323f;
  --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
  --chip-bg:#1c2935;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0b1117; --bg-2:#111a22; --surface:#16212b;
    --text:#eaf1f6; --text-soft:#94a5b0;
    --accent:#54b6ec; --accent-2:#76c6f0; --accent-ink:#07131c;
    --accent-text:#6cc3ef;
    --line:#23323f;
    --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
    --chip-bg:#1c2935;
    --halo: radial-gradient(58% 55% at 80% -10%,
              color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
  }
}


.brand img.wordmark{width:auto;height:26px;border-radius:0}

[data-launch] > .launch-live, [data-launch] > .launch-prelaunch{ display:flex; gap:.9rem;
  flex-wrap:wrap; align-items:center; }
[data-launch="prelaunch"] .launch-live{ display:none; }
[data-launch="live"] .launch-prelaunch{ display:none; }
[data-store-badge="prelaunch"], [data-store-badge="absent"]{ display:none; }
.mac-edition{display:grid;gap:2rem;grid-template-columns:1fr 1.5fr;align-items:center}
.mac-edition figure{margin:0}
.mac-edition video{display:block;width:100%;height:auto;border-radius:12px}
.mac-edition figcaption{margin-top:.75rem;font-size:.875rem;color:var(--text-soft)}
@media(max-width:760px){.mac-edition{grid-template-columns:1fr}}


.section .gallery{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.gallery .dv-iphone.dv-landscape{--dv-scale:.34}
.showcase .device-duo .dv-ipad{transform:rotate(calc(var(--rot) * -1.2))}
.device-duo .dv-iphone.dv-landscape{right:var(--sp-3);transform:rotate(calc(var(--rot) * 1.6))}
@media(max-width:820px){
  .section .gallery{grid-template-columns:none}
  .gallery .dv-iphone.dv-landscape{--dv-scale:.26}
}
@media(max-width:560px){
  .showcase .device-duo .dv-ipad{transform:rotate(0deg)}
  .device-duo .dv-iphone.dv-landscape{right:0}
}
@media(max-width:360px){
  .showcase .device-duo .dv-ipad{--dv-scale:.4}
  .device-duo .dv-iphone.dv-landscape{--dv-scale:.24;right:0}
  .gallery .dv-iphone.dv-landscape{--dv-scale:.22}
}



body.storybook-site {
  --rb-ink: #141413; --rb-paper: #ffffff; --rb-soft: #4b4a45;
  --rb-sky: #5bb0e3; --rb-sun: #f5c242; --rb-meadow: #7fc46f; --rb-rose: #e0937a;
  --rb-lilac: #ae93e3; --rb-tangerine: #f39a52; --rb-night: #1c2440;
  --rb-ground: var(--rb-paper); --rb-text: var(--rb-ink); --rb-text-soft: var(--rb-soft);
  --rb-line: #e4e2da;
  --rb-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Avenir Next Rounded",
    system-ui, sans-serif;
  --rb-gutter: max(20px, calc((100vw - 1240px) / 2));
  --rb-spring: cubic-bezier(.3, 1.6, .5, 1);
  --bg: var(--rb-ground); --bg-2: #f3f2ee; --surface: var(--rb-paper);
  --text: var(--rb-text); --text-soft: var(--rb-text-soft); --line: var(--rb-line);
  --accent: var(--rb-ink); --accent-text: var(--rb-ink); --accent-ink: var(--rb-paper);
  --display: var(--rb-display);
  margin: 0; overflow-x: clip; background: var(--rb-ground); color: var(--rb-text);
  font-size: 18px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  body.storybook-site {
    --rb-ground: #12172b; --rb-text: #f6f4ee; --rb-text-soft: #c4c6d2; --rb-line: #2c3352;
    --bg-2: #1c2440; --surface: #1c2440; color-scheme: dark;
  }
}
.storybook-site h1, .storybook-site h2, .storybook-site h3 { font-family: var(--rb-display); }
.storybook-site main { width: 100%; max-width: none; margin: 0; padding: 0; }
.storybook-site :focus-visible { outline: 3px solid currentColor; outline-offset: 4px;
  border-radius: 6px; }


.storybook-site .nav { position: relative; z-index: 8; display: flex; flex-wrap: wrap;
  align-items: center; gap: 12px 28px; width: auto; max-width: none; margin: 0;
  padding: 18px var(--rb-gutter); border: 0; background: transparent; }
.storybook-site .nav .brand { margin-inline-end: auto; min-height: 44px; }
.storybook-site .brand img:first-child { display: none; }
.storybook-site .brand img.wordmark { height: 46px; max-width: 190px; object-fit: contain; }
.storybook-site .nav > nav:not([data-language-picker]) { display: flex; flex-wrap: wrap;
  gap: 4px 28px; margin: 0; font-size: 17px; }
.storybook-site .nav > nav:not([data-language-picker]) a { display: inline-flex;
  align-items: center; min-height: 44px; color: var(--rb-text); font-weight: 700;
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 78% / 0 3px
  no-repeat; transition: background-size .25s ease; }
.storybook-site .nav > nav:not([data-language-picker]) a:hover { background-size: 100% 3px; }
body.storybook-site:has(.storybook) .nav { position: absolute; inset: 0 0 auto; }
body.storybook-site:has(.storybook) .nav > nav:not([data-language-picker]) a { color: var(--rb-ink); }


.storybook-site .story-button, .storybook-site .btn.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 60px; padding: 14px 30px; border: 0; border-radius: 18px;
  background: var(--rb-ink); color: var(--rb-paper); font: 800 20px/1.1 var(--rb-display);
  text-decoration: none; box-shadow: 0 6px 0 #000; transform: translateY(0);
  transition: transform .15s var(--rb-spring), box-shadow .15s ease; }
.storybook-site .story-button:hover, .storybook-site .btn.primary:hover {
  background: var(--rb-ink); color: var(--rb-paper); transform: translateY(-2px);
  box-shadow: 0 8px 0 #000; }
.storybook-site .story-button:active, .storybook-site .btn.primary:active {
  transform: translateY(5px); box-shadow: 0 1px 0 #000; }
.storybook-site .story-button:focus-visible { outline-color: var(--rb-paper);
  box-shadow: 0 6px 0 #000, 0 0 0 6px var(--rb-ink); }
@media (prefers-color-scheme: dark) {
  .storybook-site .btn.primary { background: var(--rb-sun); color: var(--rb-ink);
    box-shadow: 0 6px 0 #b98a14; }
  .storybook-site .btn.primary:hover { background: var(--rb-sun); color: var(--rb-ink);
    box-shadow: 0 8px 0 #b98a14; }
}


.storybook-site .storybook { position: relative; isolation: isolate; overflow: clip;
  width: 100%; max-width: none; min-height: min(100svh, 64rem); margin: 0; border-radius: 0;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  grid-template-rows: 1fr auto; grid-template-areas: "copy art" "parade parade"; align-items: center;
  gap: 0 clamp(24px, 4vw, 64px); padding: clamp(96px, 12vh, 128px) var(--rb-gutter) 0;
  background: var(--rb-sky); color: var(--rb-ink); }
.storybook-site .storybook-copy { grid-area: copy; position: relative; z-index: 2;
  padding: 0; border: 0; background: none; box-shadow: none; animation: none; }
.storybook-site .storybook-copy::before, .storybook-site .storybook-copy::after { content: none; }
.storybook-site .storybook h1 { max-width: 11.5ch; margin: 0; color: var(--rb-ink);
  font: 900 clamp(44px, min(6.6vw, 11vh), 112px)/.92 var(--rb-display); letter-spacing: -.045em;
  text-shadow: none; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.storybook-site .storybook-copy > p { max-width: 26ch; margin: clamp(20px, 2.4vw, 32px) 0
  clamp(26px, 3vw, 40px); color: var(--rb-ink); font: 600 clamp(20px, 1.9vw, 27px)/1.35
  var(--rb-display); }
.storybook-site .storybook-art { grid-area: art; position: relative; z-index: 1; height: auto;
  margin: 0; transform: none; display: flex; justify-content: center; align-self: end; }
.rb-screen { width: min(100%, 300px, 30vh); margin: 0 0 -5rem; padding: 10px; background: var(--rb-paper);
  border-radius: 34px; transform: rotate(4deg); box-shadow: 0 30px 60px -24px #0b3a5c99;
  transition: transform .5s var(--rb-spring); }
.rb-screen:hover { transform: rotate(1deg) translateY(-8px); }
.storybook-site .rb-screen img.game-home { display: block; width: 100%; height: auto;
  border-radius: 25px; outline: 0; box-shadow: none; }
.rb-parade { grid-area: parade; position: relative; z-index: 3; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end;
  gap: clamp(6px, 1.2vw, 18px); margin: clamp(8px, 2vw, 24px) 0 0; padding: 0; list-style: none; }
.rb-parade li { --h: 6rem; display: flex; flex-direction: column; align-items: center;
  margin: 0; }
.rb-parade li::after { content: ""; align-self: stretch; height: var(--h);
  border-radius: clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px) 0 0; background: var(--c); }
.rb-parade img { position: relative; z-index: 1; display: block; width: 92%; height: auto;
  margin-bottom: -8.5%; transform-origin: 50% 92%;
  filter: drop-shadow(0 10px 8px #0003);
  transition: transform .45s var(--rb-spring); }
.rb-parade li:hover img { transform: translateY(-14px) rotate(-4deg); }
.rb-pawn { --c: var(--rb-meadow); } .rb-rook { --c: var(--rb-paper); }
.rb-knight { --c: var(--rb-rose); } .rb-bishop { --c: var(--rb-lilac); }
.rb-queen { --c: var(--rb-tangerine); } .rb-king { --c: var(--rb-sun); }
.rb-parade .rb-pawn { --h: clamp(44px, min(5.5vw, 8.8vh), 96px); }
.rb-parade .rb-rook { --h: clamp(64px, min(8vw, 12.8vh), 136px); }
.rb-parade .rb-knight { --h: clamp(36px, min(4.5vw, 7.2vh), 76px); }
.rb-parade .rb-bishop { --h: clamp(80px, min(10vw, 16.0vh), 168px); }
.rb-parade .rb-queen { --h: clamp(56px, min(7vw, 11.2vh), 116px); }
.rb-parade .rb-king { --h: clamp(96px, min(12vw, 19.2vh), 200px); }
.rb-parade .rb-rook::after { background: var(--rb-paper); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rb-breathe { 50% { transform: scale(1.025, .975); } }
  @keyframes rb-rise { from { transform: translateY(40%); opacity: 0; } }
  .rb-parade li { animation: rb-rise .9s var(--rb-spring) both; }
  .rb-parade li:nth-child(2) { animation-delay: .06s; } .rb-parade li:nth-child(3) { animation-delay: .12s; }
  .rb-parade li:nth-child(4) { animation-delay: .18s; } .rb-parade li:nth-child(5) { animation-delay: .24s; }
  .rb-parade li:nth-child(6) { animation-delay: .3s; }
  .rb-parade li:not(:hover) img { animation: rb-breathe 3.2s ease-in-out infinite; }
  .rb-parade li:nth-child(odd):not(:hover) img { animation-delay: -1.6s; }
}


.storybook-site .story-intro { position: relative; overflow: clip; max-width: none; min-height: 0;
  margin: 0; padding: clamp(96px, 13vw, 180px) var(--rb-gutter); text-align: center;
  background: var(--rb-ground); }
.storybook-site .story-intro::before { content: none; }
.storybook-site .story-intro > h2 { position: relative; z-index: 1; max-width: 15ch;
  margin: 0 auto; color: var(--rb-text); font: 900 clamp(38px, 6.2vw, 96px)/.98 var(--rb-display);
  letter-spacing: -.04em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.storybook-site .story-intro > p { position: relative; z-index: 1; max-width: 34ch;
  margin: 28px auto 24px; color: var(--rb-text-soft); font: 600 clamp(19px, 1.7vw, 24px)/1.45
  var(--rb-display); }
.storybook-site .story-intro > a { position: relative; z-index: 1; display: inline-block;
  min-height: 44px; padding: 0; color: var(--rb-text);
  background: none; box-shadow: none; font: 800 clamp(22px, 2vw, 28px)/1.2 var(--rb-display);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.storybook-site .story-intro > a:hover { text-decoration-color: var(--rb-tangerine); }
.storybook-site .story-friend { position: absolute; z-index: 0; top: auto; bottom: clamp(24px, 4vw, 64px);
  width: clamp(120px, 15vw, 230px); height: auto; filter: drop-shadow(0 14px 12px #0002);
  animation: none; }
.storybook-site .story-friend-rook { left: auto; inset-inline-start: var(--rb-gutter);
  transform: rotate(-8deg); }
.storybook-site .story-friend-knight { right: auto; inset-inline-end: var(--rb-gutter);
  transform: rotate(8deg) scaleX(-1); }


.rb-marquee { overflow: hidden; padding-block: clamp(48px, 6vw, 88px); background: var(--rb-sun); }
.rb-track { display: flex; width: max-content; }
.rb-run { display: flex; gap: clamp(18px, 2.4vw, 32px); padding-inline-end: clamp(18px, 2.4vw, 32px); }
.rb-run img { display: block; width: clamp(150px, 17vw, 240px); height: auto; border: 7px solid
  var(--rb-paper); border-radius: 26px; background: var(--rb-paper); }
.rb-run img:nth-child(odd) { transform: rotate(-2.5deg); }
.rb-run img:nth-child(even) { transform: rotate(2deg) translateY(18px); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rb-drift { to { transform: translateX(-50%); } }
  .rb-track { animation: rb-drift 70s linear infinite; }
  .rb-marquee:hover .rb-track { animation-play-state: paused; }
  [dir="rtl"] .rb-track { animation-direction: reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-marquee { overflow-x: auto; }
  .rb-run + .rb-run { display: none; }
  .rb-run { padding-inline: var(--rb-gutter); }
}


.storybook-site .story-features { width: 100%; max-width: none; margin: 0;
  padding: clamp(88px, 11vw, 160px) var(--rb-gutter) clamp(64px, 8vw, 120px);
  background: var(--rb-ground); }
.storybook-site .story-features > h2 { display: block; width: auto; max-width: 12ch;
  margin: 0 0 clamp(36px, 5vw, 72px); padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--rb-text); text-align: start; text-shadow: none;
  font: 900 clamp(44px, 7vw, 116px)/.94 var(--rb-display); letter-spacing: -.045em; }
.storybook-site .story-features ul { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.storybook-site .story-features li { --c: var(--rb-sky); position: sticky;
  top: calc(24px + var(--i) * 18px); min-height: min(30rem, 72vh); margin: 0; padding:
  clamp(28px, 4.5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: auto 1fr; gap: 20px clamp(24px, 5vw, 80px); align-content: start;
  overflow: hidden; border: 0; border-radius: clamp(28px, 3.4vw, 48px); background: var(--c);
  color: var(--rb-ink); box-shadow: 0 -12px 40px -24px #0006; transform: none; }
.storybook-site .story-features li::before { content: none; }
.storybook-site .story-features li::after { content: ""; grid-column: 2; grid-row: 1 / span 2;
  align-self: end; width: min(100%, 300px); aspect-ratio: 10 / 16; justify-self: center;
  margin-bottom: clamp(-160px, -12vw, -72px); border: 8px solid var(--rb-paper);
  border-radius: 30px; background: var(--rb-paper) var(--scene) 50% 0 / cover no-repeat;
  transform: rotate(var(--r)); box-shadow: 0 24px 50px -20px #0005; }
.storybook-site .story-features li:nth-child(1) { --i: 0; --c: var(--rb-meadow); --r: -4deg;
  --scene: url(shot-meet.webp); }
.storybook-site .story-features li:nth-child(2) { --i: 1; --c: var(--rb-lilac); --r: 3deg;
  --scene: url(shot-stories.webp); }
.storybook-site .story-features li:nth-child(3) { --i: 2; --c: var(--rb-tangerine); --r: -3deg;
  --scene: url(shot-puzzles.webp); }
.storybook-site .story-features li:nth-child(4) { --i: 3; --c: var(--rb-sky); --r: 4deg;
  --scene: url(shot-turns.webp); }
.storybook-site .story-features li:hover { transform: none; }
.storybook-site .story-features li h3 { grid-column: 1; margin: 0; padding: 0; border: 0;
  background: none; color: var(--rb-ink); text-shadow: none; max-width: 12ch;
  font: 900 clamp(36px, 5vw, 80px)/.96 var(--rb-display); letter-spacing: -.04em;
  overflow-wrap: break-word; hyphens: auto; }
.storybook-site .story-features li p { grid-column: 1; align-self: end; max-width: 30ch; margin: 0;
  padding: 0; background: none; color: var(--rb-ink); font: 600 clamp(19px, 1.7vw, 24px)/1.45
  var(--rb-display); }


.storybook-site .language-update { position: relative; width: 100%; max-width: none; margin: 0;
  padding: clamp(80px, 10vw, 150px) var(--rb-gutter); border-radius: 0; text-align: start;
  overflow: clip; background: var(--rb-night); color: #f6f4ee; }
.storybook-site .language-update::after { content: ""; position: absolute; z-index: 0;
  inset-block: 12% 0; inset-inline-end: var(--rb-gutter); width: min(40%, 520px);
  background: url(cast-queen.webp) 0 100% / 50% auto no-repeat,
    url(cast-king.webp) 100% 100% / 58% auto no-repeat;
  filter: drop-shadow(0 20px 24px #0008); pointer-events: none; }
.storybook-site .language-update > * { position: relative; z-index: 1; }
.storybook-site .language-update h2 { display: block; width: auto; max-width: 14ch; margin: 0;
  padding: 0; border: 0; background: none; box-shadow: none; color: #fff; text-shadow: none;
  font: 900 clamp(40px, 6.4vw, 104px)/.96 var(--rb-display); letter-spacing: -.04em;
  overflow-wrap: break-word; hyphens: auto; }
.storybook-site .language-update > p { max-width: 36ch; margin: 28px 0 0; color: #d5d8e6;
  font: 600 clamp(19px, 1.7vw, 24px)/1.5 var(--rb-display); }


.storybook-site footer { width: auto; margin: 0; padding: 28px var(--rb-gutter) 40px;
  border: 0; background: var(--rb-night); color: #d5d8e6; font-size: 15px; }
.storybook-site footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 12px 24px; width: 100%; max-width: none; padding: 24px 0 0;
  border-top: 1px solid #ffffff2b; }
.storybook-site footer strong { color: #fff; }
.storybook-site footer .links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.storybook-site footer a { display: inline-flex; align-items: center; min-height: 44px;
  color: #fff; text-underline-offset: 5px; }


.storybook-site .story-detail { --band: var(--rb-sky); display: flex; flex-direction: column;
  width: auto; max-width: none; margin: 0; padding: 0 var(--rb-gutter) clamp(64px, 8vw, 120px); }
body.storybook-site:has(.frow) .story-detail { --band: var(--rb-meadow); }
body.storybook-site:has(.faq) .story-detail { --band: var(--rb-lilac); }
body.storybook-site:has(.price) .story-detail { --band: var(--rb-sun); }
body.storybook-site:has(.story-detail) .nav { background: var(--band, var(--rb-sky)); }
body.storybook-site:has(.frow) .nav { --band: var(--rb-meadow); }
body.storybook-site:has(.faq) .nav { --band: var(--rb-lilac); }
body.storybook-site:has(.price) .nav { --band: var(--rb-sun); }
body.storybook-site:has(.story-detail) .nav > nav:not([data-language-picker]) a { color: var(--rb-ink); }
.storybook-site .story-detail > h1 { align-self: stretch; margin: 0 calc(-1 * var(--rb-gutter));
  padding: clamp(32px, 6vw, 96px) var(--rb-gutter) clamp(48px, 7vw, 112px); border: 0;
  border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); background: var(--band);
  color: var(--rb-ink); text-shadow: none; box-shadow: none;
  font: 900 clamp(52px, 9vw, 150px)/.92 var(--rb-display); letter-spacing: -.05em;
  overflow-wrap: break-word; hyphens: auto; }
.storybook-site .story-detail > .language-update { order: 100; width: auto;
  margin: clamp(48px, 6vw, 96px) 0 0; padding: clamp(48px, 7vw, 96px) clamp(28px, 6vw, 88px);
  border-radius: clamp(28px, 4vw, 56px); }
.storybook-site .story-detail .wrap { width: 100%; max-width: none; padding: 0; }
.storybook-site .story-detail .section { padding-block: clamp(48px, 6vw, 88px) 0; }
.storybook-site .story-detail .section-head { max-width: 46rem; margin-bottom: clamp(24px, 4vw, 56px); }
.storybook-site .story-detail .section-head h2 { margin: 8px 0 18px; color: var(--rb-text);
  font: 900 clamp(32px, 4.2vw, 64px)/1 var(--rb-display); letter-spacing: -.035em;
  text-wrap: balance; }
.storybook-site .story-detail .section-head p { color: var(--rb-text-soft); font-size: 20px;
  line-height: 1.55; }
.storybook-site .story-detail .eyebrow { display: block; padding: 0; border-radius: 0;
  background: none; color: var(--rb-text-soft); font: 800 17px/1.3 var(--rb-display);
  letter-spacing: 0; text-transform: none; }
.storybook-site .story-detail .frow { --c: var(--rb-sky); display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px);
  align-items: center; padding-block: clamp(28px, 4vw, 56px); border: 0; }
.storybook-site .story-detail .frow:nth-child(5n + 2) { --c: var(--rb-meadow); }
.storybook-site .story-detail .frow:nth-child(5n + 3) { --c: var(--rb-lilac); }
.storybook-site .story-detail .frow:nth-child(5n + 4) { --c: var(--rb-tangerine); }
.storybook-site .story-detail .frow:nth-child(5n + 5) { --c: var(--rb-rose); }
.storybook-site .story-detail .frow:nth-child(5n + 6) { --c: var(--rb-sun); }
.storybook-site .story-detail .frow:nth-child(odd) .fmedia { order: 2; }
.storybook-site .story-detail .frow:nth-child(even) .fmedia { order: 0; }
.storybook-site .story-detail .fmedia:has(img) { display: grid; place-items: center; padding:
  clamp(28px, 4vw, 56px); overflow: hidden; aspect-ratio: auto; border: 0;
  border-radius: clamp(28px, 3.4vw, 48px); background: var(--c); }
.storybook-site .story-detail .fmedia:has(img)::before { content: none; }
.storybook-site .story-detail .frow .fmedia img { position: static; display: block;
  width: min(100%, 280px); height: auto; margin: 0; border: 8px solid var(--rb-paper);
  border-radius: 28px; box-shadow: 0 24px 50px -20px #0005; transform: rotate(-3deg);
  transition: transform .45s var(--rb-spring); }
.storybook-site .story-detail .frow:nth-child(even) .fmedia img { transform: rotate(3deg); }
.storybook-site .story-detail .frow .fmedia img:hover { transform: rotate(0deg) scale(1.03); }
.storybook-site .story-detail .fbody { min-width: 0; max-width: 34rem; }
.storybook-site .story-detail .fbody h3 { margin: 0 0 16px; color: var(--rb-text);
  font: 900 clamp(30px, 3.4vw, 52px)/1 var(--rb-display); letter-spacing: -.035em; }
.storybook-site .story-detail .fbody p { color: var(--rb-text-soft); font-size: 19px; line-height: 1.6; }
.storybook-site .story-detail .more { display: inline-flex; align-items: center; min-height: 44px;
  padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--rb-text);
  font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 6px; }
.storybook-site .story-detail .gallery { display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; gap: 24px; }
.storybook-site .story-detail .gallery figure { width: min(100%, 340px); margin: 0; }
.storybook-site .story-detail .gallery img { display: block; width: 100%; height: auto;
  border: 8px solid var(--rb-paper); border-radius: 28px; box-shadow: 0 24px 50px -20px #0005;
  transform: rotate(-2deg); }
.storybook-site .story-detail .gallery figcaption { margin-top: 18px; text-align: center;
  color: var(--rb-text-soft); }

.storybook-site .story-detail .strip { margin: clamp(48px, 6vw, 88px) 0 0; padding: 0;
  border: 0; border-radius: 0; background: none; }
.storybook-site .story-detail .strip .wrap { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.storybook-site .story-detail .strip .item { --c: var(--rb-meadow); display: block;
  min-height: 11rem; padding: 28px; border-radius: 32px; background: var(--c); color: var(--rb-ink);
  font: 600 19px/1.45 var(--rb-display); }
.storybook-site .story-detail .strip .item:nth-child(2) { --c: var(--rb-sun); }
.storybook-site .story-detail .strip .item:nth-child(3) { --c: var(--rb-rose); }
.storybook-site .story-detail .strip .item:nth-child(4) { --c: var(--rb-sky); }
.storybook-site .story-detail .strip .item b { display: block; margin-bottom: 8px; color: inherit;
  font: 900 26px/1.1 var(--rb-display); letter-spacing: -.02em; }
.storybook-site .story-detail .strip .item:nth-child(4) b { display: inline; font: inherit;
  font-weight: 900; }
.storybook-site .story-detail .strip .ic { display: none; }
.storybook-site .story-detail .faq { width: 100%; max-width: 52rem; margin: clamp(64px, 8vw, 120px) 0 0; }
.storybook-site .story-detail .faq h2 { margin: 0 0 24px; color: var(--rb-text);
  font: 900 clamp(36px, 5vw, 72px)/1 var(--rb-display); letter-spacing: -.04em; }
.storybook-site .story-detail .faq details { margin: 0; padding: 0; border: 0;
  border-top: 2px solid var(--rb-text); border-radius: 0; background: none; }
.storybook-site .story-detail .faq details:last-of-type { border-bottom: 2px solid var(--rb-text); }
.storybook-site .story-detail .faq summary { display: flex; justify-content: space-between;
  align-items: center; gap: 24px; min-height: 44px; padding: 26px 0; cursor: pointer;
  list-style: none; color: var(--rb-text); font: 800 clamp(21px, 2vw, 28px)/1.25 var(--rb-display); }
.storybook-site .story-detail .faq summary::-webkit-details-marker { display: none; }
.storybook-site .story-detail .faq summary::after { content: "+"; flex: none; display: grid;
  place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--rb-lilac);
  color: var(--rb-ink); font: 800 28px/1 var(--rb-display); transition: transform .3s var(--rb-spring); }
.storybook-site .story-detail .faq details[open] summary::after { transform: rotate(45deg); }
.storybook-site .story-detail .faq details p { max-width: 42rem; margin: 0 0 28px;
  color: var(--rb-text-soft); font-size: 19px; line-height: 1.65; }
.storybook-site #how-its-made { padding-block: clamp(56px, 7vw, 96px) 0; }
.storybook-site #how-its-made .prose { max-width: 42rem; margin: 0; }
.storybook-site #how-its-made summary { min-height: 44px; cursor: pointer; font-weight: 700; }

.storybook-site .story-detail .price-wrap { position: relative; display: block;
  margin-top: clamp(48px, 6vw, 88px); padding: 0; }
.storybook-site .story-detail .price-wrap::after { content: ""; position: absolute;
  inset-block: 8% 4%; inset-inline: min(48rem, 56%) 0; pointer-events: none;
  background: url(cast-pawn.webp) 0% 100% / 24% auto no-repeat,
    url(cast-knight.webp) 26% 82% / 28% auto no-repeat,
    url(cast-bishop.webp) 52% 64% / 26% auto no-repeat,
    url(cast-queen.webp) 76% 40% / 24% auto no-repeat,
    url(cast-king.webp) 100% 8% / 26% auto no-repeat;
  filter: drop-shadow(0 16px 14px #0002); }
.storybook-site .story-detail .price::before { content: none; }
.storybook-site .story-detail .price .once { padding: 0; border: 0; background: none;
  letter-spacing: 0; text-transform: none; }
.storybook-site .story-detail .price li { color: var(--rb-text); font-size: 18px; }
.storybook-site .story-detail .price { position: relative; z-index: 1; width: min(100%, 40rem);
  max-width: none; margin: 0; padding: clamp(32px, 5vw, 64px);
  border: 2px solid var(--rb-text); border-radius: clamp(28px, 3.4vw, 48px);
  background: var(--rb-ground); box-shadow: 10px 10px 0 var(--rb-sun); }
.storybook-site .story-detail .price .once { display: block; color: var(--rb-text);
  font: 800 22px/1.2 var(--rb-display); }
.storybook-site .story-detail .price .amt { margin: 10px 0 18px; color: var(--rb-text);
  font: 900 clamp(64px, 9vw, 120px)/.9 var(--rb-display); letter-spacing: -.05em; }
.storybook-site .story-detail .price p { color: var(--rb-text-soft) !important; font-size: 19px;
  line-height: 1.6; }
.storybook-site .story-detail .price ul { display: grid; gap: 10px; margin: 24px 0 32px;
  padding: 0; list-style: none; font-weight: 700; }
.storybook-site .story-detail .price li { display: flex; gap: 12px; align-items: center; }
.storybook-site .story-detail .price li::before { content: ""; flex: none; width: 14px;
  height: 14px; border-radius: 4px; background: var(--rb-meadow); }
.storybook-site .story-detail .price [data-launch="live"] > .launch-live,
.storybook-site .story-detail .price [data-launch="prelaunch"] > .launch-prelaunch {
  display: grid; gap: 16px; }

.storybook-site .help-hero, .storybook-site .topic-grid, .storybook-site .help-cat,
.storybook-site .help-empty, .storybook-site .help-foot { width: calc(100% - 40px); }
.storybook-site .help-hero { padding-block: 40px 24px; }
.storybook-site .help-hero h1, .storybook-site main > .hero h1 {
  font: 900 clamp(36px, 6vw, 96px)/.95 var(--rb-display); letter-spacing: -.045em;
  overflow-wrap: anywhere; }
.storybook-site .topic-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.storybook-site .topic-card { border-radius: 28px; }
.storybook-site .tc-title, .storybook-site .help-cat h2 { overflow-wrap: anywhere;
  font-family: var(--rb-display); }
.storybook-site .help-foot { margin-bottom: 48px; }
.storybook-site #help-clear { min-width: 44px; min-height: 44px; right: auto; inset-inline-end: 4px; }
.storybook-site #help-q { padding-inline-end: 52px; }
.storybook-site .help-search .hs-ic { left: auto; inset-inline-start: 16px; }
.storybook-site .cat-n { margin-inline-start: auto; margin-inline-end: 0; }
.storybook-site .legal-doc { width: calc(100% - 40px); margin-inline: auto; }
.storybook-site .legal-doc h1, .storybook-site .legal-doc h2 { overflow-wrap: anywhere; hyphens: auto;
  font-family: var(--rb-display); }
[dir="rtl"] .story-button span, [dir="rtl"] .story-intro a span { display: inline-block;
  transform: scaleX(-1); }


@media (max-width: 900px) {
  .storybook-site .storybook { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "art" "parade"; min-height: 0; padding-top: 128px; }
  .storybook-site .storybook-art { margin-top: 40px; }
  .rb-screen { width: min(62%, 280px); margin-bottom: -3rem; }
  .storybook-site .story-features li { grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto; min-height: 0; }
  .storybook-site .story-features li::after { grid-column: 1; grid-row: 3; width: min(78%, 260px);
    margin: 12px 0 clamp(-140px, -30vw, -80px); }
  .storybook-site .story-detail .frow { grid-template-columns: minmax(0, 1fr); }
  .storybook-site .story-detail .frow:nth-child(odd) .fmedia { order: 0; }
  .storybook-site .story-detail .price-wrap::after { content: none; }
}
@media (max-width: 760px) {
  .storybook-site .nav { gap: 4px 20px; padding-block: 12px; }
  .storybook-site .nav > nav:not([data-language-picker]) { order: 3; width: 100%; gap: 0 22px;
    font-size: 16px; }
  .storybook-site .brand img.wordmark { height: 40px; max-width: 160px; }
  .storybook-site .storybook { padding-top: 156px; }
  .rb-screen { width: min(56%, 210px); padding: 7px; border-radius: 26px; }
  .storybook-site .rb-screen img.game-home { border-radius: 20px; }
  .storybook-site .story-features li { position: relative; top: auto; }
  .storybook-site .story-friend { width: 104px; bottom: auto; top: 28px; }
  .storybook-site .language-update { padding-bottom: 260px; }
  .storybook-site .language-update::after { inset-block: auto 0; height: 240px;
    width: min(80%, 320px); }
  .storybook-site .story-intro { padding-top: 150px; }
  .storybook-site footer .inner { flex-direction: column; align-items: flex-start; }
}


:is(:lang(ar), :lang(he), :lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(ta),
  :lang(te), :lang(kn), :lang(ml), :lang(th), :lang(ka)) .storybook-site
  :is(h1, h2, h3, .amt) { line-height: 1.22; letter-spacing: 0; }