/* Identity only. Page structure and responsive layout live in studio.css. */
@font-face{font-family:BlueDisplay;src:url('/assets/fonts/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:BlueBody;src:url('/assets/fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:CyanSans;src:url('/assets/fonts/plex-sans.woff2') format('woff2');font-weight:100 700;font-display:swap}
html[data-design=blue]{--paper:#fbfcff;--night:#f2f5fb;--ink:#18283f;--muted:#526171;--silver:#526171;--accent:#315eff;--font-display:BlueDisplay,Arial,sans-serif;--font-body:BlueBody,Arial,sans-serif}
html[data-design=cyan]{--paper:#111315;--night:#182a32;--ink:#f0f5f7;--muted:#bdcbd1;--silver:#bdcbd1;--accent:#a8e1e5;--font-display:CyanSans,Arial,sans-serif;--font-body:CyanSans,Arial,sans-serif}
.identity-blue,.identity-cyan{background:var(--paper);color:var(--ink)}
:is(.identity-blue,.identity-cyan) :is(.page-label,.spectrum-label-lockups span,.header-label){font-family:var(--font-body)}
.identity-blue :is(h1,h2,h3){font-weight:650}
.identity-cyan :is(h1,h2,h3){font-weight:600}

/* Blue */
.identity-blue .button{background:#315eff;color:#fff;border-color:#315eff}.identity-blue .button:hover{background:#244ce0;color:#fff;border-color:#244ce0}
.identity-blue .opening-copy h1 span:first-child{color:#18283f}.identity-blue .opening-copy h1 span:last-child{color:#315eff}
.identity-blue .games-label{color:#315eff}.identity-blue .research-label{color:#6132b8}
.identity-blue .paint-canvas{background:#fbfcff}
.identity-blue .paint-canvas :is(.hero-poster,.hero-film){object-fit:cover}
.identity-blue :is(.choice,.games-choice){border-color:#315eff}.identity-blue .research-choice{border-color:#7954bd}
.identity-blue .neural-story{background:#f0eaff;color:#21163e}.identity-blue .topic-links{border-color:#d3c4e8}
.identity-blue .working-story{background:#edf3fc}
.identity-blue .platform-showcase{background:#edf2fa}
.identity-blue .platform-group{border-color:#315eff}.identity-blue .platform-group:nth-child(even){border-color:#7954bd}
.identity-blue .platform-number{color:#315eff}.identity-blue .platform-group:nth-child(even) .platform-number{color:#6132b8}
.identity-blue .platform-eyebrow{color:#3452a0}
.identity-blue .spectrum-callout{background:#315eff;color:#fff}.identity-blue .spectrum-callout p{color:#fff}.identity-blue .spectrum-callout .button{background:#fff;color:#244ce0;border-color:#fff}
.identity-blue .spectrum-footer{background:#fff;border-color:#315eff}
.identity-blue :is(.studio-landing,.studio-engagement){--studio-tint:#edf2ff;--studio-colour:#244ce0;--studio-line:#d2dcf5}
.identity-blue .studio-research{--studio-tint:#f0eaff;--studio-colour:#6132b8;--studio-line:#d8caed}
.identity-blue .stroke-one{background:#cbd8ff}.identity-blue .stroke-two{background:#e0d3ff}
.identity-blue .studio-proof{background:#edf3fc;color:#18283f}.identity-blue .studio-proof:before{background:radial-gradient(circle at 0 100%,transparent 0 160px,#dce5fa 161px 210px,transparent 211px)}
.identity-blue .studio-publication strong{color:#6132b8}.identity-blue .studio-publication{border-color:#d8caed}
.identity-blue .studio-pipeline>div{border-color:#c7d5ed}.identity-blue .studio-pipeline .pipeline-build{background:#315eff;color:#fff;border-color:#315eff}
.identity-blue .pipeline-link{color:#3452a0}.identity-blue .pipeline-link:before,.identity-blue .pipeline-link:after{background:#9bb4eb}
.identity-blue .studio-sprint-board{background:#edf2ff;box-shadow:12px 12px 0 #e9e1f6}.identity-blue .studio-cadence-number strong{color:#315eff}
.identity-blue .studio-sprint-pair article{border-color:#315eff}.identity-blue .studio-sprint-pair article+article{border-color:#7954bd}
.identity-blue .studio-stage{background:#edf2ff}.identity-blue .studio-stage:nth-child(even){background:#f0eaff}.identity-blue .studio-stage-number{color:#244ce0}
.identity-blue .studio-stages:before{border-color:#b6c8ef}.identity-blue .studio-next a{background:#edf2ff}.identity-blue .studio-next a+a{background:#f0eaff}
.identity-blue :is(.engagement-proof,.games-hero-art){background:#edf2ff;color:#18283f}
.identity-blue .proof-showcase{--proof-surface:#edf2ff;--proof-secondary:#f0eaff;--proof-ink:#18283f;--proof-muted:#526171}
.identity-blue .console-license{background:#edf3ff;color:#2442a6;border-color:#cad8f5}
.identity-blue .mega-menu{--menu-accent:#244ce0;--menu-tint:#edf2ff;--menu-ink:#172645;--menu-border:#dce3f5}
.identity-blue .mega-menu:has(.mega-research){--menu-accent:#6132b8;--menu-tint:#f0eaff;--menu-border:#d8caed}
.identity-blue .mega-orbit{background:#dce3f5;border-radius:50%}

/* Cyan */
.identity-cyan .button{background:#a8e1e5;color:#15323a;border-color:#a8e1e5}.identity-cyan .button:hover{background:#cef0f2;color:#15323a;border-color:#cef0f2}
.identity-cyan .opening-copy h1 span:first-child{color:#f0f5f7}.identity-cyan .opening-copy h1 span:last-child{color:#a8e1e5}
.identity-cyan .games-label{color:#a8e1e5}.identity-cyan .research-label{color:#d4eda8}.identity-cyan .paint-canvas{background:#111315}
.identity-cyan .paint-canvas :is(.hero-poster,.hero-film){object-fit:cover;object-position:right center}
.identity-cyan :is(.page-label,.paint-caption,.choice>p:first-child,.work-card>div>p:not(.page-label),.note-row>span,.note-row time,.note-row p,.spectrum-related span,.spectrum-related p,.scope-notes dd,.project-meta dt,.article-meta,.media-block figcaption,.spectrum-trust-note){color:#bdcbd1}
.identity-cyan :is(.choice,.games-choice){border-color:#a8e1e5}.identity-cyan .research-choice{border-color:#d4eda8}
.identity-cyan :is(.neural-story,.working-story,.platform-showcase,.spectrum-callout,.studio-proof){background:#d3eded;color:#15323a}
.identity-cyan :is(.neural-story,.working-story,.platform-showcase,.spectrum-callout,.studio-proof) :is(.page-label,p,figcaption){color:#345058}
.identity-cyan :is(.neural-story,.working-story,.platform-showcase,.spectrum-callout,.studio-proof) .button{background:#173d48;color:#fff;border-color:#173d48}
.identity-cyan .topic-links{border-color:#99c5c9}.identity-cyan .platform-group{border-color:#087581}.identity-cyan .platform-group:nth-child(even){border-color:#597b36}
.identity-cyan .platform-number{color:#087581}.identity-cyan .platform-group:nth-child(even) .platform-number{color:#466328}.identity-cyan .platform-eyebrow{color:#345058}
.identity-cyan .platform-group li{background:#f4fbfb;color:#15323a}
.identity-cyan .spectrum-trust{color:#edf7f8}.identity-cyan .spectrum-partner-logos img{background:#fff;border-radius:6px;padding:7px}.identity-cyan .spectrum-partner-logos img.partner-dark{background:#19343d}
.identity-cyan .proof-links{color:#c3dade}
.identity-cyan .spectrum-footer{background:#111315;border-color:#557e86}.identity-cyan :is(.footer-intro p,.footer-links a,.footer-legal){color:#bdcbd1}
.identity-cyan :is(.spectrum-filters select,.spectrum-filters input){background:#19343e;color:#fff;border-color:#75929d}
.identity-cyan :is(.source-note,.draft-note,.scope-notes,.spectrum-related,.spectrum-faq details,.note-row){border-color:#526e79}
.identity-cyan :is(.studio-landing,.studio-engagement){--studio-tint:#d3eded;--studio-colour:#a8e1e5;--studio-line:#557e86}
.identity-cyan .studio-research{--studio-tint:#dfebcc;--studio-colour:#d4eda8;--studio-line:#67765a}
.identity-cyan :is(.studio-capability,.studio-stage,.studio-publication,.studio-sprint-board,.studio-next a,.studio-main-frame,.studio-inset-frame){color:#15323a;--studio-colour:#086773}
.identity-cyan :is(.studio-capability,.studio-stage,.studio-publication,.studio-sprint-board,.studio-next a,.studio-main-frame,.studio-inset-frame) :is(.page-label,p,figcaption){color:#345058}
.identity-cyan .studio-capability{background:#d3eded}.identity-cyan .studio-capability:nth-child(3n){background:#dfebcc}
.identity-cyan .stroke-one{background:#72bcc5}.identity-cyan .stroke-two{background:#d4eda8}
.identity-cyan .studio-art-note{color:#a8e1e5}
.identity-cyan .studio-proof:before{background:radial-gradient(circle at 0 100%,transparent 0 160px,#b2dadd 161px 210px,transparent 211px)}
.identity-cyan .studio-pipeline>div{background:#eff9f9;color:#15323a;border-color:#9cbfc7}.identity-cyan .studio-pipeline .pipeline-build{background:#173d48;color:#fff;border-color:#173d48}
.identity-cyan .studio-publication strong{color:#087581}.identity-cyan .studio-publication{background:#eff9f9;border-color:#9cbfc7}
.identity-cyan .studio-sprint-board{background:#d3eded;box-shadow:12px 12px 0 #243b37}.identity-cyan .studio-cadence-number strong{color:#087581}.identity-cyan .studio-sprint-pair article{border-color:#087581}.identity-cyan .studio-sprint-pair article+article{border-color:#597b36}
.identity-cyan .studio-stage{background:#d3eded}.identity-cyan .studio-stage:nth-child(even){background:#dfebcc}.identity-cyan .studio-stage-number{color:#08636b}.identity-cyan .studio-stages:before{border-color:#557e86}
.identity-cyan .studio-next a{background:#d3eded}.identity-cyan .studio-next a+a{background:#dfebcc}
.identity-cyan :is(.engagement-proof,.games-hero-art){background:#d3eded;color:#15323a}.identity-cyan .engagement-proof .button{background:#173d48;color:#fff;border-color:#173d48}
.identity-cyan .proof-showcase{--proof-surface:#d3eded;--proof-secondary:#1b3037;--proof-ink:#15323a;--proof-muted:#345058}.identity-cyan .proof-quote-grid blockquote{color:#edf7f8}.identity-cyan .proof-quote-grid footer span,.identity-cyan .quote-status{color:#bdcbd1}
.identity-cyan .console-license{background:#173d48;color:#c7f1f3;border-color:#4d707a}
.identity-cyan .mega-menu{--menu-accent:#086773;--menu-tint:#edf8f7;--menu-ink:#15323a;--menu-border:#c9e5df}.identity-cyan .mega-menu:has(.mega-research){--menu-accent:#466328;--menu-tint:#f1f6e9;--menu-border:#dce8c8}
.identity-cyan .mega-menu[open]>summary,.identity-cyan .mega-chevron{color:#a8e1e5}
.identity-cyan .mobile-nav nav{background:#19343e;color:#edf7f8;border-color:#75929d}
.identity-cyan .contact-section{background:#182a32;color:#edf7f8}.identity-cyan .contact-section input,.identity-cyan .contact-section textarea{background:#111f26;color:#fff;border-color:#78929d}.identity-cyan .contact-section :is(.field-hint,.required-note,.deck-note p,.form-bottom p,.contact-intro>p:not(.section-label),.connection-notice p){color:#bdcbd1}
.identity-cyan .reading pre{background:#1b3037;color:#edf7f8}
.identity-cyan.spectrum-studio :is(.neural-story,.working-story,.platform-showcase,.spectrum-callout,.studio-proof,.studio-capability,.studio-stage,.studio-publication,.studio-sprint-board,.studio-next a,.studio-main-frame,.studio-inset-frame) :is(.page-label,.media-block figcaption){color:#345058}
.identity-cyan :is(.contact-choices p,.result-count,.newsletter-note p){color:#bdcbd1}

/* All identities use the same type roles, including small labels. */
.spectrum-label-lockups span,.header-label{font-family:var(--font-display)}

.studio-home {
  --home-games: #cd4938;
  --home-research: #087581;
  --home-soft: #fff1ec;
  --home-cool: #edf8f7;
  --home-line: #bedbd7;
}
.identity-blue .studio-home { --home-games: #315eff; --home-research: #6132b8; --home-soft: #edf2ff; --home-cool: #f0eaff; --home-line: #d3c4e8; }
.identity-cyan .studio-home { --home-games: #a8e1e5; --home-research: #d4eda8; --home-soft: #19343e; --home-cool: #243b37; --home-line: #557e86; }
.studio-home .spectrum-opening { position: relative; }
.studio-home .opening-copy { position: relative; z-index: 1; }
.studio-home .paint-canvas { isolation: isolate; }
.home-art-decoration { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.home-art-decoration::before { content: ''; position: absolute; top: 8%; right: 4%; width: 65px; height: 65px; background: radial-gradient(circle, var(--home-research) 1px, transparent 1.5px) 0 0 / 12px 12px; opacity: .22; }
.hero-contours { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--home-research); opacity: .18; }
.hero-art-label { position: absolute; bottom: 3%; left: 12%; right: 8%; padding-top: 15px; border-top: 1px solid var(--home-line); color: var(--muted); font: 11px/1.5 var(--font-body); letter-spacing: .06em; text-align: right; }
.studio-home .hero-numbers { position: relative; border-bottom: 1px solid var(--home-line); padding-bottom: 30px; }
.studio-home .spectrum-choices { position: relative; gap: 24px 40px; padding-top: 72px; }
.home-choice-intro { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; margin-bottom: 12px; }
.home-choice-intro .page-label { font-size: 13px; }
.home-choice-intro::after { content: ''; flex: 1; height: 1px; background: var(--home-line); }
.studio-home .choice { position: relative; padding: 36px; border: 1px solid var(--home-line); border-top: 2px solid var(--home-games); border-radius: 4px; background: linear-gradient(145deg, var(--home-soft), var(--paper)); transition: transform 220ms ease, box-shadow 220ms ease; }
.studio-home .research-choice { background: linear-gradient(145deg, var(--home-cool), var(--paper)); border-top-color: var(--home-research); }
.identity-spectrum .studio-home .games-label { color: #b83e2f; }
.studio-home .choice:hover, .studio-home .choice:focus-visible { transform: translateY(-6px) rotate(-1deg); box-shadow: 8px 10px 0 var(--home-line); }
.studio-home .research-choice:hover, .studio-home .research-choice:focus-visible { transform: translateY(-6px) rotate(1deg); }
.founder-story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 88px); align-items: start; padding-block: 0 112px; }
.founder-portrait { margin: 0; max-width: 360px; }
.founder-portrait > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: 4px; }
.founder-portrait figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.founder-portrait figcaption strong { font: 600 21px/1.3 var(--font-display); }
.founder-portrait figcaption span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.founder-location { font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--home-line); }
.founder-copy > .page-label { display: flex; align-items: center; gap: 12px; }
.founder-copy > .page-label::before { content: ''; width: 24px; height: 2px; background: var(--home-games); }
.founder-copy h2 { font-size: clamp(38px, 4vw, 58px); line-height: 1.08; max-width: 21ch; margin: 22px 0 28px; }
.founder-copy blockquote { margin: 0; font-size: 18px; line-height: 1.8; }
.founder-copy blockquote p + p { margin-top: 22px; }
.founder-copy .founder-mission { border-left: 2px solid var(--home-games); padding-left: 20px; }
.founder-mission strong { font-weight: 600; }
.founder-copy > .plain-link { display: inline-block; margin-top: 20px; }
.studio-home .neural-story { position: relative; border: 1px solid var(--home-line); border-radius: 4px; }
.studio-home .neural-story > .media-block { position: relative; padding: 10px; background: #fff; color: #182c30; border: 1px solid var(--home-line); border-radius: 3px; box-shadow: 0 12px 28px rgb(24 44 48 / .05); }
.studio-home .neural-story > .media-block figcaption { color: #526568; }
.studio-home .topic-links { position: relative; isolation: isolate; gap: 10px; }
.studio-home .topic-links a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 46px; padding: 11px 18px; border: 1px solid var(--home-line); border-radius: 6px; background: rgb(255 255 255 / .24); font-weight: 500; line-height: 1.5; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
.studio-home .topic-links a:is(:hover, :focus-visible) { background: rgb(8 117 129 / .09); border-color: #087581; }
.studio-home .topic-links a:focus-visible { outline: 2px solid #087581; outline-offset: 4px; }
.studio-home .topic-links.has-topic-tracker a { background: transparent; }
.studio-home .topic-links.has-topic-tracker a.is-topic-target { border-color: transparent; }
.topic-hover-box { position: absolute; top: 0; left: 0; z-index: 0; box-sizing: border-box; pointer-events: none; border: 1px solid #087581; border-radius: 6px; background: rgb(8 117 129 / .09); box-shadow: 0 3px 0 rgb(8 117 129 / .1); }
.studio-home .spectrum-work .section-title { position: relative; }
.studio-home .spectrum-work .section-title { padding-top: 24px; border-top: 1px solid var(--home-line); }
.studio-home .work-card > :is(.media-block, .entry-visual) { border-radius: 4px; overflow: hidden; }
.studio-home .platform-showcase { border-radius: 4px; }
.studio-home .working-story { position: relative; overflow: hidden; }
.studio-home .working-story::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 1px), var(--home-line) 50%, transparent calc(50% + 1px)) 0 0 / 160px 100%; opacity: .18; mask-image: linear-gradient(to bottom, #000, transparent 75%); pointer-events: none; }
.studio-home .working-story > .wrap { position: relative; z-index: 1; }
.home-build-note { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 32px; }
.home-build-step { flex-shrink: 0; padding: 10px 14px; color: #345058; border-bottom: 1px solid #8fb6b5; font: 500 13px var(--font-body); letter-spacing: .02em; }
.home-build-review { border-bottom-color: #087581; color: #086773; }
.home-build-connector { display: block; flex: 0 0 64px; width: 64px; height: 32px; color: #087581; }
.home-build-connector.descending { transform: scaleY(-1); }
.studio-home .spectrum-callout { position: relative; overflow: hidden; isolation: isolate; }
.studio-home .spectrum-callout::before, .studio-home .spectrum-callout::after { content: ''; position: absolute; z-index: -1; width: 480px; height: 480px; border: 1px solid currentColor; border-radius: 50%; opacity: .14; pointer-events: none; }
.studio-home .spectrum-callout::before { left: -260px; top: -220px; }
.studio-home .spectrum-callout::after { right: -280px; bottom: -250px; }
@media (min-width: 901px) {
  .studio-home .spectrum-opening { margin-top: 48px; }
}
@media (max-width: 1100px) {
  .studio-home .choice { padding: 28px; }
}
@media (max-width: 900px) {
  .studio-home .paint-canvas { max-width: 680px; }
}
@media (max-width: 767px) {
  .founder-story { grid-template-columns: 1fr; gap: 32px; padding-bottom: 72px; }
  .founder-portrait { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 20px; align-items: center; max-width: none; }
  .founder-portrait > img { grid-row: 1 / 3; }
  .founder-portrait figcaption { margin-top: 0; align-self: end; }
  .founder-location { margin-top: 10px; padding-top: 0; border: 0; align-self: start; font-size: 10px; }
  .founder-copy h2 { font-size: 40px; }
  .founder-copy blockquote { font-size: 17px; line-height: 1.75; }
  .home-art-decoration::before { width: 41px; height: 41px; right: 7%; }
  .hero-contours { opacity: .12; }
  .hero-art-label { left: 9%; right: 9%; bottom: 0; padding-top: 10px; font-size: 9px; letter-spacing: 0; }
  .studio-home .spectrum-choices { gap: 24px; padding-top: 48px; }
  .home-choice-intro { gap: 8px; }
  .home-choice-intro .page-label { font-size: 12px; }
  .studio-home .choice h2 img { max-width: 100%; }
  .home-build-note { gap: 5px; }
  .home-build-step { padding: 8px 10px; font-size: 12px; }
  .home-build-connector { flex-basis: 36px; width: 36px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-home .topic-links a { transition: none; }
  .studio-home .choice { transition: none; }
  .studio-home .choice:hover, .studio-home .choice:focus-visible { transform: none; }
}

/* Scrolling past the hero pins the mark and pulls it apart.

   Where the headline and the mark sit does not depend on the viewer, so it is
   not waited for: both are laid out and pinned from the first paint. Only the
   track, the run they stay pinned over, is added once the viewer is drawing, so
   a browser without WebGPU or a visitor who asked for less motion never grows
   the extra height. Deferring the pinning too is what made the hero drop 70px
   into place a moment after the page appeared. */
@media (min-width: 901px) {
  .studio-home .spectrum-opening { align-items: start; }
  .studio-home .opening-copy { position: sticky; top: max(24px, calc(50vh - 210px)); }
  .studio-home .paint-canvas {
    grid-column: 2; grid-row: 1 / 3; align-self: start;
    position: sticky; top: max(24px, calc(50vh - 280px));
  }
  .has-hero-scroll .hero-scroll-track { grid-column: 2; grid-row: 2; height: 95vh; }
}
/* Phones hold the same blocks, for shorter. Two of them are taller than the
   screen they are held on, so they pin from the top and their tail arrives when
   they let go; what the run is there to show - the steps - is above it. */
@media (max-width: 900px) {
  .studio-home .paint-canvas { position: sticky; top: max(12px, calc(50vh - 190px)); }
  .has-hero-scroll .hero-scroll-track { height: 62vh; }
  .home-band-evolve .evolve-band { top: 12px; }
  .home-band-evolve .evolve-scroll-track { height: 58vh; }
  .platform-run .platform-showcase { top: 12px; }
  .platform-run .scroll-run-track { height: 58vh; }
  .home-band-samsung .samsung-proof { top: max(12px, calc(50vh - 330px)); }
  .home-band-samsung .scroll-run-track { height: 55vh; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .has-hero-scroll .paint-canvas { top: max(24px, calc(50vh - 250px)); }
}

/* Three places on this page ask a reader to stop rather than scan: the product,
   the platforms it runs on, and the one piece of the work a partner published
   themselves. Each holds for most of a screen while the page moves under it,
   and its steps come up in turn. The offsets keep each block inside the
   viewport it is held in. */
@media (min-width: 901px) {
  .home-band-evolve .evolve-band { top: max(24px, calc(50vh - 312px)); }
  .home-band-evolve .evolve-scroll-track { height: 86vh; }
  .evolve-facts { --steps: 4; }

  .platform-run .platform-showcase { top: max(16px, calc(50vh - 340px)); }
  .platform-run .scroll-run-track { height: 82vh; }

  .home-band-samsung .samsung-proof { top: max(24px, calc(50vh - 236px)); }
  .home-band-samsung .scroll-run-track { height: 78vh; }
}

/* The film that stands in for the viewer: one sheet of frames, stepped through
   by the same run the viewer would have been scrubbed by. Its own box holds the
   frame's aspect, so it is never cropped to the shape of the canvas area the way
   an image laid in with object-fit: cover would be. */
.paint-canvas .hero-reel {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  width: auto;
  aspect-ratio: 468 / 420;
  /* hero-logo.js sets the sheet and the size: which of the two a frame is on is
     something only it knows. */
  background-repeat: no-repeat;
  filter: drop-shadow(14px 34px 30px rgba(18, 38, 42, .34));
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.3, 0, 0, 1);
  pointer-events: none;
}
.paint-canvas .hero-reel.is-showing { opacity: 1; }
.paint-canvas:has(.hero-reel.is-showing) .hero-poster { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .paint-canvas .hero-reel { display: none; }
}

.neural-story.neural-carousel { display: block; }
.neural-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: inherit; border-radius: 3px; }
.neural-slides::-webkit-scrollbar { display: none; }
.neural-slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: 4fr 6fr; gap: 48px; align-items: center; scroll-snap-align: start; scroll-snap-stop: always; padding: 4px 4px 24px; box-sizing: border-box; }
.neural-slide .story-copy h2 { font-size: clamp(32px, 3.4vw, 50px); overflow-wrap: anywhere; }
.neural-slide .media-block { min-width: 0; padding: 10px; background: transparent; color: #182c30; border: 1px solid #c8dddc; border-radius: 3px; }
.neural-slide .media-block img { aspect-ratio: 4/3; object-fit: contain; }
.neural-carousel .topic-links { margin-top: 24px; gap: 12px 28px; }
.neural-carousel .topic-links a { padding-block: 10px; text-underline-offset: 6px; }
.neural-carousel .topic-links a[aria-current="true"] { font-weight: 600; text-decoration-thickness: 3px; background: rgb(8 117 129 / .12); border-color: #087581; box-shadow: inset 0 -3px #087581; }
.neural-carousel :is(a, .neural-slides):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 767px) {
  .neural-slide { grid-template-columns: 1fr; gap: 24px; align-content: start; }
  .neural-slide .story-copy h2 { font-size: 34px; }
  .neural-carousel .topic-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
}

.spectrum-header::before {
  content: '';
  position: absolute;
  inset: 0 calc((100% - 100vw) / 2);
  z-index: -1;
  pointer-events: none;
  background: #fff;
  border-bottom: 1px solid #b8dcd7;
}
body:has(.studio-home) { overflow-x: clip; }
.spectrum-header > .button { box-shadow: none; }

.studio-home {
  --band-cut: clamp(32px, 5vw, 80px);
  --band-warm: #fff4e9;
  --band-peach: #f3d4bb;
  --band-deep: #103e46;
  overflow-x: clip;
}

.studio-home .spectrum-opening {
  isolation: isolate;
}
.studio-home .spectrum-opening::before {
  content: '';
  position: absolute;
  top: -48px;
  left: 50%;
  width: 100vw;
  height: 720px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 6% 16%, #fbe8dc 0, transparent 42%),
    radial-gradient(ellipse at 94% 12%, #d9eeea 0, transparent 44%);
}
.studio-home .paint-canvas { background: transparent; mix-blend-mode: multiply; }

.studio-home .spectrum-choices { padding-bottom: 96px; }
.studio-home .choice { background: linear-gradient(155deg, #fff1e8, #fff 80%); }
.studio-home .research-choice { background: linear-gradient(155deg, #e3f4ef, #fff 80%); }

.home-band { position: relative; isolation: isolate; }
.home-band::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-band-founder { padding-block: calc(var(--band-cut) + 64px) 96px; }
.home-band-founder::before {
  background: radial-gradient(ellipse at 0 20%, var(--band-peach), transparent 65%),
    linear-gradient(140deg, var(--band-warm), #fffaf6 75%);
  clip-path: polygon(0 0, 100% var(--band-cut), 100% 100%, 0 100%);
}
.home-band-founder .founder-story { padding-bottom: 0; }
.home-band-founder .founder-portrait > img { border-radius: 3px; box-shadow: 16px 16px 0 #c9835820; }
.home-band-founder .founder-mission { border-color: #b54935; }

.home-band-research {
  padding-block: calc(var(--band-cut) + 64px) 88px;
  background: #fffaf6;
  color: #f4fbf8;
}
.home-band-research::before {
  background: radial-gradient(ellipse at 100% 0, #367c79, transparent 62%),
    linear-gradient(125deg, #10333d, var(--band-deep) 60%, #1c5c5c);
  clip-path: polygon(0 var(--band-cut), 100% 0, 100% 100%, 0 100%);
}
.studio-home .home-band-research .neural-story {
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
}
.home-band-research .neural-slide { gap: 64px; }
.home-band-research .story-copy > p:not(.page-label) { color: #d0e4e2; }
.home-band-research .page-label { color: #a7e4d5; }
.home-band-research .neural-slide .media-block { padding: 0; border: 0; background: transparent; }
.home-band-research .neural-slide .media-block img { border-radius: 3px; }
.home-band-research .media-block figcaption { color: #c3dbd8; }
.home-band-research .topic-links { border-color: #ffffff30; }
.studio-home .home-band-research .topic-links a { color: #e4f2ee; background: transparent; border-color: #83b2ac; }
.studio-home .home-band-research .topic-links a:is(:hover, :focus-visible) { color: #fff; background: #ffffff12; border-color: #b2e6d6; }
.studio-home .home-band-research .topic-links a[aria-current="true"] { background: #c6f2dd; color: #143d3f; border-color: #c6f2dd; box-shadow: inset 0 -3px #8bc7b3; }
.studio-home .home-band-research .topic-links a:focus-visible { outline-color: #c6f2dd; }
.home-band-research .neural-slides:focus-visible { outline-color: #c6f2dd; }

.studio-home .platform-showcase { border-radius: 0; }
.studio-home .spectrum-work .section-title { border-top: 0; padding-top: 0; }
.home-band-work { padding-top: var(--band-cut); }
.home-band-work::before {
  background: radial-gradient(ellipse at 0 25%, #c5e8dd, transparent 65%),
    linear-gradient(155deg, #f4fbf6, #e5f2ec);
  clip-path: polygon(0 var(--band-cut), 100% 0, 100% 100%, 0 100%);
}
.studio-home .home-band-work .spectrum-work { padding-block: 64px 96px; }
.home-band-work .work-card > :is(.media-block, .entry-visual) { box-shadow: 0 18px 44px #173d4812; }
.home-band-samsung {
  padding-block: 80px;
  background: radial-gradient(ellipse at 100% 80%, #376e79, transparent 65%),
    linear-gradient(115deg, #152f3b, #1b4651);
  border-top: 1px solid #8ab7b0;
}
.studio-home .home-band-samsung .samsung-proof { margin-block: 0; padding: 0; border: 0; background: transparent; }
.home-band-notes { padding-top: var(--band-cut); padding-bottom: 48px; background: #fae6d5; }
.home-band-notes::before {
  background: radial-gradient(ellipse at 100% 10%, #d2e6ef, transparent 65%),
    linear-gradient(165deg, #edf7f8, #fff 90%);
  clip-path: polygon(0 var(--band-cut), 100% 0, 100% 100%, 0 100%);
}
.studio-home .home-band-notes .spectrum-notes { padding-block: 64px; }
.home-band-notes .note-row { border-color: #aecbd0; }

.studio-home .working-story {
  padding-block: calc(var(--band-cut) + 80px) 104px;
  background: radial-gradient(ellipse at 100% 75%, #f2c7a8, transparent 65%),
    linear-gradient(120deg, #fff9f1, #fae6d5);
  clip-path: polygon(0 0, 100% var(--band-cut), 100% 100%, 0 100%);
}
.studio-home .working-story::before { opacity: .1; }
.studio-home .spectrum-notes { padding-block: 96px; }
.studio-home .spectrum-callout {
  padding-top: calc(var(--band-cut) + 88px);
  background: radial-gradient(ellipse at 10% 100%, #347978, transparent 60%),
    linear-gradient(125deg, #102e39, #164b50);
  color: #f4fbf8;
  clip-path: polygon(0 var(--band-cut), 100% 0, 100% 100%, 0 100%);
}
.studio-home .spectrum-callout p { color: #b9dfd4; }
.studio-home .spectrum-callout .button { background: #c6f2dd; color: #143d3f; border-color: #c6f2dd; }
.studio-home .spectrum-callout .button:hover { background: #fff; }
.studio-home .spectrum-callout::before, .studio-home .spectrum-callout::after { display: none; }

@media (max-width: 900px) {
  .home-band-research .neural-slide { gap: 32px; }
}
@media (max-width: 767px) {
  .studio-home .spectrum-opening::before { height: 640px; }
  .studio-home .spectrum-choices { padding-bottom: 56px; }
  .home-band-founder { padding-block: calc(var(--band-cut) + 40px) 56px; }
  .home-band-founder .founder-portrait > img { box-shadow: 6px 6px 0 #c9835820; }
  .home-band-research { padding-block: calc(var(--band-cut) + 32px) 48px; }
  .home-band-research .neural-slide { gap: 24px; }
  .studio-home .home-band-work .spectrum-work { padding-block: 40px 56px; }
  .home-band-samsung { padding-block: 56px; }
  .home-band-notes { padding-bottom: 24px; }
  .studio-home .home-band-notes .spectrum-notes { padding-block: 40px; }
  .studio-home .working-story { padding-block: calc(var(--band-cut) + 40px) 64px; }
  .studio-home .spectrum-notes { padding-block: 64px; }
  .studio-home .spectrum-callout { padding-top: calc(var(--band-cut) + 48px); }
}

.home-band-evolve {
  padding-block: calc(var(--band-cut) + 56px) 96px;
  color: #eaf6f4;
  clip-path: polygon(0 var(--band-cut), 100% 0, 100% 100%, 0 100%);
}
.home-band-evolve::before {
  background: radial-gradient(ellipse at 88% 10%, #17656d, transparent 62%),
    linear-gradient(150deg, #0c3238, #123f47 72%);
}
@media (max-width: 767px) {
  .home-band-evolve { padding-block: calc(var(--band-cut) + 36px) 56px; }
}

.studio-home .home-band-research .topic-links.has-topic-tracker a[aria-current="true"] { background: transparent; color: #e4f2ee; box-shadow: none; }
.studio-home .home-band-research .topic-links.has-topic-tracker a.is-topic-target { background: transparent; border-color: transparent; }
.studio-home .home-band-research .topic-hover-box { border-color: #c6f2dd; background: rgb(198 242 221 / .22); box-shadow: 0 3px 0 rgb(139 199 179 / .55); }