/* Studio homepage: white, sky blue and mint. */
body.studio-site { --studio-ink:#004d43; --studio-blue:#2f87ff; --studio-green:#007d46; --studio-yellow:#ffe25b; color:var(--studio-ink); }
.studio-site .studio-home { overflow:clip; background:#fff; }
.studio-site .studio-home .site-container { max-width:1560px; padding-inline:clamp(24px,4.2vw,72px); }

.studio-site .studio-icon { flex:none; width:28px; height:28px; }
.studio-site .studio-hero { position:relative; padding-top:var(--site-header-height,82px); isolation:isolate; background:radial-gradient(circle 110px at calc(100% + 20px) 76%,#e4f7ec 99.5%,transparent 100%),#fff; }
.studio-site .studio-hero::before,.studio-site .studio-hero::after { content:""; position:absolute; z-index:-1; width:180px; aspect-ratio:1; border-radius:50%; background:#e8f9ff; }
.studio-site .studio-hero::before { top:115px; left:-140px; }
.studio-site .studio-hero::after { bottom:-60px; left:-90px; width:200px; }
.studio-site .studio-hero__inner { display:grid; grid-template-columns:47% 53%; align-items:center; min-height:clamp(400px,32vw,540px); padding-block:30px 22px; }
.studio-site .studio-hero__copy { position:relative; z-index:2; padding:8px 0 14px 32px; }
/* Three full-width title glyphs at -.065em tracking leave the lead beside the second line. */
.studio-site .studio-hero__heading { --hero-title-size:clamp(54px,6.25vw,102px); --hero-lead-size:clamp(17px,1.55vw,23px); display:grid; grid-template-columns:calc(var(--hero-title-size) * 2.805) minmax(0,1fr); column-gap:clamp(12px,1.5vw,22px); }
.studio-site .studio-hero__title { grid-area:1 / 1 / 2 / -1; color:var(--studio-ink); font-size:var(--hero-title-size); font-weight:900; line-height:1.15; letter-spacing:-.065em; }
.studio-site .studio-hero__title > span { display:block; width:max-content; max-width:100%; white-space:nowrap; }
.studio-site .studio-hero__title-blue { position:relative; color:var(--studio-blue); z-index:0; }
.studio-site .studio-hero__title-blue::after { content:""; position:absolute; z-index:-1; left:0; right:-8px; bottom:-.015em; height:.105em; border-radius:100px; background:var(--studio-yellow); transform:rotate(-3deg); }
.studio-site .studio-hero__lead { grid-area:1 / 2 / 2 / 3; align-self:end; margin:0 0 calc(var(--hero-title-size) * .575 - var(--hero-lead-size) * 1.55); font-size:var(--hero-lead-size); font-weight:800; line-height:1.55; letter-spacing:.02em; white-space:nowrap; }
.studio-site .studio-hero__lead > span { display:block; }
.studio-site .studio-hero__intro { margin-top:20px; color:var(--studio-ink); font-size:clamp(18px,1.55vw,22px); font-weight:800; line-height:1.75; letter-spacing:.01em; }
.studio-site .studio-hero__intro > span { display:block; text-wrap:balance; line-break:strict; }
.studio-site .studio-hero__actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:22px; }
.studio-site .studio-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:11px 21px; color:#fff; border-radius:999px; font-size:clamp(12px,1.05vw,15px); font-weight:700; box-shadow:inset 0 3px 6px #ffffff66,inset 0 -5px 8px #005d7b26,0 5px 10px #246b8e1a; transition:transform .2s,box-shadow .2s; }
.studio-site .studio-button:hover { transform:translateY(-3px); box-shadow:inset 0 3px 6px #ffffff80,inset 0 -5px 8px #005d7b26,0 8px 16px #246b8e24; }
.studio-site .studio-button:active { transform:translateY(1px); }
.studio-site .studio-button--blue { background:linear-gradient(180deg,#41bbff 0%,#0877c0 24%,#066cad 74%,#07588f 100%); }
.studio-site .studio-button--green { background:linear-gradient(180deg,#35ca95 0%,#12a86e 45%,#0c945f 100%); }
.studio-site .studio-hero__actions .studio-button { min-height:64px; padding:18px 28px; font-size:16px; }
.studio-site .studio-button .studio-icon { width:24px; height:24px; }
.studio-site .studio-button__arrow { padding-left:8px; font-size:23px; line-height:1; font-weight:400; }
.studio-site .studio-hero__visual { position:relative; align-self:stretch; display:grid; align-items:center; margin-left:-10px; margin-right:-35px; }
.studio-site .studio-hero__art { width:100%; height:auto; max-height:490px; object-fit:contain; }
.studio-site .studio-hero__note { position:absolute; right:3%; top:10%; color:#0872b8; font-size:clamp(14px,1.3vw,20px); line-height:1.6; font-weight:800; letter-spacing:.12em; transform:rotate(-10deg); }
.studio-site .studio-hero__note::after { content:""; display:block; height:3px; background:var(--studio-yellow); transform:rotate(-5deg); margin-top:5px; }
.studio-site .studio-business { position:relative; padding-block:4px 0; }
.studio-site .studio-business__grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.studio-site .business-card { display:flex; align-items:center; gap:18px; padding:22px 26px; border-radius:20px; color:var(--studio-ink); transition:transform .2s,box-shadow .2s; }
.studio-site .business-card--game { background:linear-gradient(120deg,#e8f8ff,#def5ff); --business-color:#007fc4; }
.studio-site .business-card--web { background:linear-gradient(120deg,#eafbf1,#e0f8ed); --business-color:#009254; }
.studio-site .business-card:hover { transform:translateY(-4px); box-shadow:0 12px 22px #29667610; }
.studio-site .business-card__icon { flex:0 0 74px; width:74px; height:74px; display:grid; place-items:center; color:var(--business-color); background:#fff; border-radius:50%; }
.studio-site .business-card__icon .studio-icon { width:44px; height:44px; }
.studio-site .business-card__heading { flex:1 0 auto; }
.studio-site .business-card__english { display:block; color:var(--business-color); font-size:clamp(42px,4.8vw,72px); font-weight:900; line-height:.95; letter-spacing:-.025em; }
.studio-site .business-card__heading :is(h2,h3) { margin-top:7px; font-size:clamp(17px,1.7vw,25px); font-weight:900; line-height:1.25; white-space:nowrap; }
.studio-site .business-card__description { flex:1 1 auto; padding-left:18px; border-left:0; font-size:clamp(13px,1.15vw,17px); font-weight:700; line-height:1.7; white-space:nowrap; }
.studio-site .business-card__arrow { flex:0 0 42px; display:grid; place-items:center; width:42px; height:42px; background:var(--business-color); color:#fff; border-radius:50%; font-size:25px; line-height:1; }
.studio-site .studio-news { padding-block:40px 28px; background:#fff; }
.studio-site .studio-news__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.studio-site .studio-news__item { min-width:0; }
.studio-site .studio-news__card { display:block; color:var(--studio-ink); border-radius:14px; }
.studio-site .studio-news__card:focus-visible { outline:3px solid #0872b8; outline-offset:5px; }
.studio-site .studio-news__thumbnail { overflow:hidden; aspect-ratio:1200 / 630; background:#edf7f7; border-radius:14px; }
.studio-site .studio-news__thumbnail img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.studio-site .studio-news__card:hover .studio-news__thumbnail img { transform:scale(1.035); }
.studio-site .studio-news__meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:10px 2px 0; color:#526b62; font-size:12px; line-height:1.5; }
.studio-site .studio-news__category { padding:3px 9px; color:#007344; background:#e5f7ee; border-radius:999px; font-size:11px; font-weight:700; }
.studio-site .studio-news__caption { display:flex; align-items:center; gap:12px; padding:7px 2px 0; }
.studio-site .studio-news__caption :is(h2,h3) { flex:1; min-width:0; font-size:17px; font-weight:700; line-height:1.65; overflow-wrap:anywhere; }
.studio-site .studio-news__caption > span { display:grid; place-items:center; flex:none; width:24px; height:24px; background:#edf7f7; border-radius:50%; line-height:1; }
.studio-site .studio-news__caption svg { display:block; width:16px; height:16px; }
.studio-site .studio-selected { position:relative; padding-block:24px 64px; scroll-margin-top:82px; }
.studio-site .studio-anchor { display:block; position:relative; top:-100px; visibility:hidden; }
.studio-site .studio-work-filters { display:flex; flex-wrap:wrap; gap:8px; margin-block:0 22px; }
.studio-site .studio-work-filters[hidden],.studio-site .selected-work[hidden] { display:none; }
.studio-site .studio-work-filters button { padding:7px 19px; border:0; border-radius:999px; background:#fff; color:#557078; font-size:12px; font-weight:700; cursor:pointer; }
.studio-site .studio-work-filters button[aria-pressed="true"] { border-color:#0872b8; background:#0872b8; color:#fff; }
.studio-site .selected-work__category { margin-top:10px; font-size:10px; color:#3f7480; font-weight:700; letter-spacing:.06em; }
.studio-site .studio-selected__heading { display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin-bottom:17px; }
.studio-site .studio-selected__heading h2 { font-size:25px; line-height:1.4; font-weight:900; text-decoration:underline; text-decoration-color:var(--studio-yellow); text-decoration-thickness:6px; text-underline-offset:-1px; text-decoration-skip-ink:none; }
.studio-site .studio-selected__heading p { color:var(--studio-ink); font-size:17px; font-weight:700; }
.studio-site .studio-selected__heading > a { margin-left:auto; font-size:13px; font-weight:700; }
.studio-site .studio-selected__heading > a span { margin-left:10px; }
.studio-site .studio-selected__grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:32px 24px; }
.studio-site .selected-work { grid-column:span 2; min-width:0; color:var(--studio-ink); }
.studio-site .selected-work--featured { grid-column:span 3; }
.studio-site .selected-work figure { overflow:hidden; border:0; border-radius:14px; background:#f4faff; }
.studio-site .selected-work__image { width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:center top; transition:transform .4s; }
.studio-site .selected-work--featured .selected-work__caption h3 { font-size:16px; }
.studio-site .selected-work:hover .selected-work__image { transform:scale(1.035); }
.studio-site .selected-work__caption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 3px 0; }
.studio-site .selected-work__caption h3 { font-size:13px; font-weight:700; line-height:1.5; }
.studio-site .selected-work__caption > span { display:grid; place-items:center; flex:none; width:23px; height:23px; border:0; background:#edf7f7; border-radius:50%; font-size:21px; line-height:1; }
.studio-site .studio-section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:36px; }
.studio-site .studio-kicker { margin-bottom:12px; color:var(--studio-green); font-size:12px; font-weight:800; letter-spacing:.16em; }
.studio-site .studio-section-heading h2,.studio-site .studio-web h2 { font-size:clamp(27px,3vw,40px); line-height:1.5; font-weight:900; letter-spacing:-.015em; }
.studio-site .studio-section-heading > p { font-size:15px; line-height:1.9; color:#53686e; }
/* Game introduction between the works and the web introduction. */
.studio-site .studio-game { padding-block:8px 76px; background:#fff; scroll-margin-top:70px; }
.studio-site .studio-game__panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px); align-items:center; gap:56px; max-width:1180px; margin-inline:auto; padding:48px 56px; background:linear-gradient(120deg,#e8f8ff,#def5ff); border-radius:36px; }
.studio-site .studio-game h2 { color:var(--home-ink); font-family:var(--home-display); font-size:clamp(27px,2.8vw,37px); font-weight:900; line-height:1.5; letter-spacing:.01em; }
.studio-site .studio-game__description { max-width:540px; margin-top:22px; color:var(--home-muted); font-family:var(--home-rounded); font-size:17px; line-height:2; }
.studio-site .studio-game__description > span { display:inline-block; }
.studio-site .studio-game .studio-text-link { min-height:60px; margin-top:26px; padding:16px 26px; color:#fff; background:linear-gradient(180deg,#41bbff 0%,#0877c0 24%,#066cad 74%,#07588f 100%); border:0; border-radius:999px; box-shadow:inset 0 3px 6px #ffffff66,inset 0 -5px 8px #005d7b26,0 5px 10px #246b8e1a; font-family:var(--home-rounded); font-size:14px; font-weight:800; transition:transform .18s ease; }
.studio-site .studio-game .studio-text-link:hover { transform:translateY(-2px); }
.studio-site .studio-game__feature { display:block; padding:14px 14px 16px; color:var(--studio-ink); background:#fff; border-radius:28px; transition:transform .2s,box-shadow .2s; }
.studio-site .studio-game__feature:hover { transform:translateY(-4px); box-shadow:0 12px 22px #29667612; }
.studio-site .studio-game__feature figure { overflow:hidden; border-radius:18px; }
.studio-site .studio-game__feature img { width:100%; aspect-ratio:1200 / 630; object-fit:cover; }
.studio-site .studio-game__feature-label { margin:12px 4px 0; color:#0b7cc4; font-size:11px; font-weight:800; letter-spacing:.06em; }
.studio-site .studio-game__feature .selected-work__caption h3 { font-size:17px; font-weight:900; }
.studio-site .studio-web { padding-block:88px 70px; background:#fff; scroll-margin-top:70px; }
.studio-site .studio-home .studio-web__inner { max-width:1120px; }
.studio-site .studio-web__inner { display:grid; grid-template-columns:minmax(0,600px) 320px; justify-content:center; align-items:center; gap:48px; }
.studio-site .studio-web__copy > p:not(.studio-kicker) { max-width:580px; margin-top:25px; font-size:16px; color:#53686e; line-height:2; }
.studio-site .studio-text-link { display:inline-flex; gap:30px; align-items:center; margin-top:24px; padding-bottom:6px; border-bottom:2px solid #bce9d6; font-size:15px; font-weight:700; }
.studio-site .studio-web__portrait { position:relative; width:100%; max-width:320px; justify-self:center; }
.studio-site .studio-web__portrait::before { content:""; position:absolute; inset:20px -20px -20px 20px; z-index:0; background:#e7f8ef; border-radius:48% 48% 24px 24px; transform:rotate(5deg); }
.studio-site .studio-web__portrait img { position:relative; border-radius:48% 48% 24px 24px; width:100%; aspect-ratio:1; object-fit:cover; }
.studio-site .studio-web__portrait > span { position:absolute; left:50%; bottom:15px; transform:translateX(-50%); width:max-content; padding:7px 18px; background:#fff; border-radius:999px; font-size:13px; font-weight:700; box-shadow:0 3px 12px #1b6c5210; }
.studio-site .studio-journal { padding-block:72px; background:#fff; }
.studio-site .studio-journal__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.studio-site .studio-journal__item { padding:28px; border:0; border-radius:18px; }
.studio-site .studio-journal__item > p { color:#438291; font-size:12px; font-weight:700; }
.studio-site .studio-journal__item h3 { margin-top:12px; font-size:19px; line-height:1.65; }
.studio-site .studio-journal__notice { margin-top:20px; color:#70858b; font-size:13px; }
@media(min-width:1600px) { .studio-site .studio-hero__inner { min-height:540px; } }
@media(max-width:1200px) {
 .studio-site .business-card { gap:12px; padding:22px 20px; }
 .studio-site .business-card__icon { flex-basis:60px; width:60px; height:60px; }
 .studio-site .business-card__description { padding-left:14px; font-size:12px; }
 .studio-site .business-card__arrow { flex-basis:34px; width:34px; height:34px; font-size:20px; }
 .studio-site .studio-web__inner { gap:40px; }
}
@media(max-width:1000px) {
 .studio-site .studio-news__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .studio-site .studio-selected__grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .studio-site .selected-work--featured { grid-column:span 2; }
 .studio-site .studio-hero__inner { min-height:400px; grid-template-columns:49% 51%; }
 .studio-site .studio-hero__heading { --hero-title-size:clamp(46px,6.4vw,64px); --hero-lead-size:16px; }
 .studio-site .studio-hero__actions { gap:8px; margin-top:18px; }
 .studio-site .studio-button { min-height:43px; padding:9px 16px; font-size:12px; gap:7px; }
 .studio-site .studio-button .studio-icon { width:20px; height:20px; }
 .studio-site .studio-button__arrow { font-size:20px; }
 .studio-site .studio-hero__visual { margin-right:-20px; }
 .studio-site .business-card { flex-wrap:wrap; gap:10px 15px; }
 .studio-site .business-card__description { order:4; border:0; padding-left:0; flex-basis:100%; }
 .studio-site .business-card__description br { display:none; }
 .studio-site .business-card__english { font-size:48px; }
 .studio-site .business-card__heading :is(h2,h3) { font-size:18px; }
 .studio-site .studio-section-heading { gap:24px; }
 .studio-site .studio-section-heading > p { font-size:13px; }
 .studio-site .studio-web__inner { gap:32px; }
 .studio-site .studio-game__panel { grid-template-columns:1fr; max-width:680px; gap:32px; padding:40px 36px; }
}
@media(max-width:760px) {
 .studio-site .studio-home .site-container { padding-inline:22px; }

 .studio-site .studio-hero { padding-top:var(--site-header-height,68px); }
 .studio-site .studio-hero__inner { grid-template-columns:1fr; gap:4px; padding-top:32px; padding-bottom:18px; }
 .studio-site .studio-hero__copy { padding:0; }
 .studio-site .studio-hero__heading { --hero-title-size:clamp(46px,10.4vw,76px); }
 .studio-site .studio-hero__title { line-height:1.16; }
 .studio-site .studio-hero__actions { margin-top:18px; gap:9px; }
 .studio-site .studio-hero__actions .studio-button { min-height:60px; padding:16px 22px; font-size:14px; }
 .studio-site .studio-button { padding:11px 15px; min-height:45px; font-size:12px; }
 .studio-site .studio-button__arrow { padding-left:0; }
 .studio-site .studio-hero__visual { margin:0 -12px; min-width:0; justify-self:center; width:min(560px,100%); }
 .studio-site .studio-hero__art { max-height:320px; }
 .studio-site .studio-hero__visual { padding-top:50px; }
 .studio-site .studio-hero__note { right:4%; top:4px; font-size:14px; line-height:1.5; letter-spacing:.04em; transform:rotate(-7deg); text-align:center; }
 .studio-site .studio-business__grid { gap:12px; }
 .studio-site .business-card { padding:18px 14px; gap:12px 8px; border-radius:16px; }
 .studio-site .business-card__icon { flex-basis:38px; width:38px; height:38px; }
 .studio-site .business-card__icon .studio-icon { width:26px; height:26px; }
 .studio-site .business-card__heading { flex:1; }
 .studio-site .business-card__english { font-size:32px; }
 .studio-site .business-card__heading :is(h2,h3) { margin-top:5px; font-size:12px; }
 .studio-site .business-card__description { font-size:12px; line-height:1.65; white-space:normal; }
 .studio-site .business-card__arrow { display:none; }
 .studio-site .studio-selected { padding-block:28px 44px; }
 .studio-site .studio-news { padding-block:32px 16px; }
 .studio-site .studio-news__grid { gap:24px 14px; }
 .studio-site .studio-news__thumbnail { border-radius:12px; }
 .studio-site .studio-news__meta { gap:6px 8px; margin-top:8px; font-size:11px; }
 .studio-site .studio-news__category { padding:3px 7px; font-size:10px; }
 .studio-site .studio-news__caption { gap:6px; padding-top:7px; }
 .studio-site .studio-news__caption :is(h2,h3) { font-size:15px; line-height:1.6; }
 .studio-site .studio-news__caption > span { width:20px; height:20px; }
 .studio-site .studio-news__caption svg { width:14px; height:14px; }
 .studio-site .studio-selected__heading { gap:10px 20px; }
 .studio-site .studio-selected__heading h2 { font-size:24px; }
 .studio-site .studio-selected__heading p { flex-basis:100%; order:3; font-size:16px; }
 .studio-site .studio-selected__heading > a { font-size:11px; }
 .studio-site .studio-selected__grid { grid-template-columns:1fr; gap:28px; }
 .studio-site .selected-work,.studio-site .selected-work--featured { grid-column:auto; }
 .studio-site .selected-work__caption h3 { font-size:14px; }
 .studio-site .studio-section-heading { display:block; margin-bottom:28px; }
 .studio-site .studio-section-heading > p { margin-top:17px; font-size:14px; }
 .studio-site .studio-section-heading h2,.studio-site .studio-web h2 { font-size:27px; }
 .studio-site .studio-web { padding-block:64px; }
 .studio-site .studio-game { padding-bottom:56px; }
 .studio-site .studio-game__panel { padding:30px 20px 22px; border-radius:28px; gap:26px; }
 .studio-site .studio-game h2 { font-size:27px; }
 .studio-site .studio-game__description { margin-top:18px; font-size:15px; }
 .studio-site .studio-game__description > span { display:inline; }
 .studio-site .studio-game .studio-text-link { width:100%; justify-content:center; gap:16px; }
 .studio-site .studio-game__feature { padding:10px 10px 14px; border-radius:22px; }
 .studio-site .studio-web__inner { grid-template-columns:1fr; gap:38px; }
 .studio-site .studio-web__copy > p:not(.studio-kicker) { font-size:15px; margin-top:20px; }
 .studio-site .studio-web__portrait { max-width:260px; }
 .studio-site .studio-text-link { font-size:14px; gap:16px; }
 .studio-site .studio-journal { padding-block:56px; }
 .studio-site .studio-journal__grid { grid-template-columns:1fr; gap:16px; }
 .studio-site .studio-journal__item { padding:24px; }
}
@media(max-width:380px) {
 .studio-site .studio-home .site-container { padding-inline:16px; }
 .studio-site .studio-news .studio-selected__heading { column-gap:12px; }
 .studio-site .studio-news .studio-selected__heading h2 { font-size:22px; }

 .studio-site .studio-button { font-size:11px; padding-inline:12px; }
 .studio-site .studio-hero__actions .studio-button { padding-inline:18px; font-size:13px; }
 .studio-site .studio-button .studio-icon { width:19px; height:19px; }
 .studio-site .business-card__icon { display:none; }
 .studio-site .business-card__heading :is(h2,h3) { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .studio-site .studio-button,.studio-site .business-card,.studio-site .selected-work__image,.studio-site .studio-news__thumbnail img { transition:none; } }