:root{
  --bg:#fbfcfe;--ink:#0d1118;--muted:#8a94a4;--line:#dbe0e7;--soft:#f5f7fa;--panel:#fff;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 62% 10%,rgba(219,232,247,.28),transparent 30%),linear-gradient(#fff,#fbfcfe 62%,#fff);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;line-height:1.65}.shell{width:min(1120px,calc(100% - 48px));margin-inline:auto}a{color:inherit}.site-header{padding:20px 0 6px}.header-inner{display:flex;justify-content:space-between;gap:40px;align-items:flex-start}.brand-lockup{text-decoration:none;display:flex;flex-direction:column}.brand-name{font-size:27px;font-weight:760;letter-spacing:-.055em}.brand-sub{font-size:12px;line-height:1.45;color:#9aa3b1;margin-top:1px;letter-spacing:.01em}.main-nav{display:flex;align-items:center;gap:38px;font-size:14px;padding-top:2px}.main-nav a{text-decoration:none;white-space:nowrap}.main-nav a:not(.contact-link){padding:5px 0;border-bottom:1px solid transparent}.main-nav a.active{border-bottom-color:#6f7782}.contact-link{border:1px solid #aab2bd;border-radius:999px;padding:10px 33px!important;margin-left:8px}.hero{position:relative;min-height:545px;padding-top:86px;display:grid;grid-template-columns:30% 57% 13%;align-items:start}.hero-copy h1{font-size:clamp(34px,4.1vw,55px);line-height:1.34;letter-spacing:-.045em;margin:0;font-weight:670}.short-rule{width:32px;border-top:2px solid #5c6470;margin:38px 0 27px}.hero-ja{font-size:14px;font-weight:620;margin:0 0 20px}.hero-en{font-size:14px;color:#9aa3b1;margin:0}.hero-flow{display:grid;grid-template-columns:125px 1fr 125px 1fr 270px;align-items:center;align-self:center;margin-top:110px;min-width:0}.flow-step,.flow-art{text-align:center}.flow-icon{margin:0 auto 22px}.null-dot{width:98px;height:98px;border:1px dashed #a9b1bc;border-radius:50%;display:grid;place-items:center}.null-dot span{width:8px;height:8px;background:#0d1118;border-radius:50%}.node-orb{width:72px;height:72px;border-radius:50%;border:1px solid #d4d9df;background:radial-gradient(circle at 45% 45%,#fff 0 16%,#dfe4eb 38%,#b7c0ce 60%,#edf0f4 78%,#fff 100%);box-shadow:inset 0 0 12px rgba(255,255,255,.85)}.flow-line{height:1px;background:#c7cdd6}.flow-step h2,.flow-art h2{font-size:25px;line-height:1.1;margin:0 0 8px;letter-spacing:-.04em}.flow-step p,.flow-art p{font-size:13px;font-weight:600;margin:0 0 2px}.flow-step small,.flow-art small{font-size:12px;color:#a4adba}.flow-art{align-self:center}.flow-art img{width:100%;max-width:250px;display:block;margin:-90px auto 12px;mix-blend-mode:multiply}.hero-note{font-size:12px;line-height:1.85;border-left:1px solid #87909d;padding-left:12px;margin-top:-28px}.hero-note p{margin:0 0 18px}.apps{padding:32px 0 54px}.section-heading{display:grid;grid-template-columns:auto 48px 1fr auto;gap:18px;align-items:center;margin-bottom:20px}.section-heading h2{font-size:30px;letter-spacing:-.04em;margin:0}.heading-rule{height:1px;background:#66707d}.section-heading p{font-size:14px;font-weight:600;text-align:center;margin:0}.section-heading a{font-size:12px;text-decoration:none;border-bottom:1px solid #9aa3b1;padding-bottom:2px}.app-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:18px}.app-card{position:relative;border:1px solid #e1e5ea;border-radius:12px;min-height:282px;padding:24px 28px;background:rgba(255,255,255,.86);overflow:hidden;box-shadow:0 12px 28px rgba(28,38,54,.04)}.app-meta{font-size:18px;font-weight:600;margin-bottom:5px}.app-kicker{font-size:11px;color:#8e98a7;letter-spacing:.03em}.app-card h3{font-size:28px;line-height:1.15;margin:9px 0 11px;letter-spacing:-.035em}.app-card p{font-size:12px;line-height:1.7;font-weight:540;margin:0;max-width:58%}.featured img{position:absolute;width:210px;right:-4px;bottom:-4px;mix-blend-mode:multiply}.round-arrow{position:absolute;left:28px;bottom:18px;width:43px;height:43px;border:1px solid #7d8793;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:19px}.muted-card{background:linear-gradient(135deg,#fbfcfd,#f0f2f5);color:#8791a0}.muted-card h3{font-size:18px;font-weight:500}.ghost{color:#7d8793}.placeholder{position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-25%,-20%);background:#d8dde4;filter:blur(.2px)}.blob{border-radius:42% 58% 62% 38%/52% 44% 56% 48%}.star{clip-path:polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 94%,50% 72%,21% 94%,32% 56%,2% 35%,39% 34%)}.about{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;padding:20px 0 56px;border-top:1px solid #e2e6eb;border-bottom:1px solid #e2e6eb}.about-copy{padding-top:28px}.about-label{font-size:13px;color:#8d96a4}.about h2{font-size:34px;margin:4px 0 10px;letter-spacing:-.04em}.about p{max-width:650px;font-size:14px;color:#596271}.about-phrase{border-left:1px solid #c7cdd6;padding-left:56px;display:flex;align-items:center;font-size:22px;line-height:1.35;color:#8490a0}.news{display:grid;grid-template-columns:130px 120px 1fr 40px;align-items:center;gap:24px;padding:30px 0 44px}.news-title{font-size:24px;font-weight:700;display:flex;align-items:center;gap:18px}.news-title span{display:block;width:38px;height:1px;background:#79828e}.news time,.news p{font-size:12px}.news p{margin:0}.news-arrow{text-align:right;font-size:19px}.site-footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #e0e4e9;padding:30px 0 36px;font-size:12px;color:#7f8998}.footer-left{display:flex;align-items:center;gap:22px}.footer-left strong{font-size:18px;color:#111821}.footer-right{display:flex;gap:30px}.footer-right a{text-decoration:none}
@media(max-width:980px){.main-nav{gap:20px}.hero{grid-template-columns:1fr}.hero-note{display:none}.hero-flow{grid-template-columns:100px 1fr 100px 1fr minmax(200px,260px);margin-top:90px}.app-grid{grid-template-columns:1.45fr 1fr}.app-card:last-child{display:none}.section-heading{grid-template-columns:auto 40px 1fr}.section-heading a{display:none}}
@media(max-width:720px){.shell{width:min(100% - 30px,1120px)}.site-header{padding-top:14px}.header-inner{align-items:center}.brand-name{font-size:23px}.brand-sub{font-size:10px}.main-nav{gap:14px;font-size:12px}.main-nav a:nth-child(3),.main-nav a:nth-child(4){display:none}.contact-link{padding:8px 16px!important;margin-left:0}.hero{padding-top:54px;min-height:0}.hero-copy h1{font-size:39px}.hero-ja,.hero-en{font-size:13px}.hero-flow{margin-top:54px;display:grid;grid-template-columns:1fr 44px 1fr;row-gap:36px}.flow-art{grid-column:1/4}.flow-art img{margin:-10px auto 10px;max-width:280px}.flow-line:nth-of-type(4){display:none}.apps{padding-top:64px}.section-heading{grid-template-columns:auto 1fr;align-items:end}.section-heading h2{font-size:27px}.heading-rule{display:none}.section-heading p{font-size:12px;text-align:right}.app-grid{grid-template-columns:1fr}.app-card{min-height:310px}.app-card:last-child{display:block}.featured img{width:190px}.about{grid-template-columns:1fr}.about-phrase{padding:24px 0 0;border-left:0;border-top:1px solid #d7dce3}.news{grid-template-columns:1fr auto;gap:8px 18px}.news-title{grid-column:1/3}.news p{grid-column:1/2}.news-arrow{grid-column:2/3;grid-row:2/4}.site-footer{flex-direction:column}.footer-left{flex-wrap:wrap;gap:8px 16px}}
@media(max-width:430px){.main-nav a:not(.contact-link){display:none}.hero-copy h1{font-size:34px}.hero-flow{grid-template-columns:1fr 32px 1fr}.flow-step h2,.flow-art h2{font-size:22px}.app-card p{max-width:60%}.featured img{width:170px;right:-16px}.about h2{font-size:30px}}

/* v2.1 — closer to the approved visual, with a connected mobile story */
@media(min-width:981px){
  .hero{grid-template-columns:30% 58% 12%;padding-top:72px;min-height:560px}
  .hero-flow{grid-template-columns:116px 1fr 105px 1fr 290px;margin-top:105px}
  .flow-art img{max-width:290px;margin:-108px auto 8px}
}

/* The character asset is transparent in v2.1; keep it optically integrated with the page. */
.flow-art img,.featured img{mix-blend-mode:normal}

@media(max-width:720px){
  .hero{padding-top:58px}
  .hero-copy h1{font-size:clamp(36px,10.2vw,48px);line-height:1.48;letter-spacing:-.055em}
  .short-rule{margin:42px 0 30px}
  .hero-ja{font-size:13px;line-height:1.85}
  .hero-en{margin-top:28px;font-size:13px;line-height:1.8}

  .hero-flow{position:relative;margin-top:70px;grid-template-columns:1fr 56px 1fr;row-gap:30px;align-items:center}
  .hero-flow::before{content:"";position:absolute;left:50%;top:71px;width:1px;height:calc(100% - 176px);background:linear-gradient(to bottom,#cbd1d9 0 36%,transparent 36% 43%,#cbd1d9 43% 100%);z-index:0}
  .flow-step,.flow-art,.flow-line{position:relative;z-index:1}
  .flow-line{height:1px;background:#cbd1d9}
  .flow-icon{background-color:var(--bg)}
  .flow-art{grid-column:1/4;margin-top:8px;padding-top:34px;background:linear-gradient(to bottom,transparent 0 28px,var(--bg) 28px)}
  .flow-art::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#0d1118;box-shadow:0 0 0 10px var(--bg)}
  .flow-art img{margin:0 auto 12px;max-width:min(88vw,360px)}
  .flow-art h2{font-size:28px}
  .flow-art p{font-size:14px}
  .flow-art small{font-size:12px}

  .apps{padding-top:76px}
  .section-heading{margin-bottom:26px}
}

@media(max-width:430px){
  .hero-copy h1{font-size:clamp(34px,10vw,42px)}
  .hero-flow{grid-template-columns:1fr 40px 1fr}
  .null-dot{width:108px;height:108px}
  .node-orb{width:82px;height:82px}
  .flow-art img{max-width:92vw}
}

/* v2.2 — shared inner-page system */
.inner-main{padding:72px 0 84px}
.inner-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:64px;align-items:center;padding:28px 0 68px;border-bottom:1px solid var(--line)}
.inner-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8c96a5;margin-bottom:16px}
.inner-title{font-size:clamp(46px,7vw,84px);line-height:1.04;letter-spacing:-.055em;margin:0 0 24px;font-weight:720}
.inner-lead{font-size:17px;line-height:1.9;max-width:620px;margin:0;color:#303846}
.inner-art{display:flex;justify-content:center;align-items:center;min-height:300px}
.inner-art img{display:block;width:min(100%,420px);height:auto}
.inner-section{padding:56px 0 0}
.inner-section h2{font-size:28px;letter-spacing:-.035em;margin:0 0 22px}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.feature-card{border:1px solid #e1e5ea;border-radius:14px;background:rgba(255,255,255,.8);padding:28px;min-height:170px}
.feature-card h3{font-size:22px;margin:0 0 10px;letter-spacing:-.03em}
.feature-card p{margin:0;color:#596271;font-size:14px;line-height:1.85}
.inner-prose{max-width:800px}
.inner-prose h1{font-size:clamp(42px,6vw,68px);line-height:1.08;letter-spacing:-.05em;margin:0 0 26px}
.inner-prose h2{font-size:24px;margin:42px 0 12px;letter-spacing:-.03em}
.inner-prose p{font-size:15px;line-height:1.95;color:#3c4552;margin:0 0 18px}
.inner-prose .small{font-size:12px;color:#8f98a6}
.mail-cta{display:inline-flex;align-items:center;gap:10px;border:1px solid #8d97a4;border-radius:999px;padding:11px 18px;text-decoration:none;margin-top:4px}
.inner-footer{margin-top:48px}
@media(max-width:720px){
  .inner-main{padding:46px 0 64px}
  .inner-hero{grid-template-columns:1fr;gap:34px;padding:16px 0 50px}
  .inner-title{font-size:clamp(48px,13vw,70px)}
  .inner-lead{font-size:15px}
  .inner-art{min-height:0}
  .inner-art img{width:min(94%,380px)}
  .inner-section{padding-top:44px}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{min-height:0;padding:24px}
  .inner-prose h1{font-size:46px}
}

/* v2.3 — one-app focus, future-ready hero rotation, support redesign, project stories */
.hero-work{transition:opacity .22s ease,transform .22s ease}.hero-work.is-changing{opacity:0;transform:translateY(4px)}
.hero-work-dots{display:flex;justify-content:center;gap:7px;margin-top:11px}.hero-work-dots[hidden]{display:none}.hero-work-dots button{appearance:none;border:0;padding:0;width:6px;height:6px;border-radius:50%;background:#c6ccd5;cursor:pointer}.hero-work-dots button[aria-current="true"]{background:#10151c}
.single-app-heading{grid-template-columns:auto 48px 1fr}.single-app-grid{grid-template-columns:minmax(0,560px)}
.single-app-grid .featured{min-height:300px}.single-app-grid .featured img{width:205px;right:14px;bottom:0}.single-app-grid .featured p{max-width:56%}
.project-art{overflow:visible}.project-art img{max-width:100%;object-fit:contain}
.project-subnav{display:flex;gap:26px;padding:20px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(251,252,254,.92);backdrop-filter:blur(12px);z-index:3}.project-subnav a{text-decoration:none;font-size:13px;color:#5c6674}.project-subnav a:hover{text-decoration:underline}
.section-intro-row{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);gap:52px;align-items:end;margin-bottom:24px}.section-intro-row h2{margin-bottom:0}.section-intro-row>p{margin:0;color:#697382;font-size:14px;line-height:1.85;max-width:620px}
.stories-section{padding-top:72px}.story-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px}.story-card{border:1px solid #e1e5ea;border-radius:16px;padding:28px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(246,248,251,.84));min-height:280px;display:flex;flex-direction:column}.story-lead{min-height:340px}.story-meta{font-size:11px;letter-spacing:.12em;color:#8b95a4}.story-card h3{font-size:25px;line-height:1.35;letter-spacing:-.035em;margin:16px 0 14px}.story-card p{font-size:14px;color:#5d6775;line-height:1.85;margin:0}.story-status{margin-top:auto;padding-top:28px;font-size:12px;color:#9aa3b0}.stories-note{font-size:12px;color:#939caa;margin:16px 0 0}
.support-layout{max-width:940px}.support-hero{margin-bottom:56px}.support-section{padding:44px 0;border-top:1px solid var(--line)}.faq-list{display:grid;gap:10px}.faq-list details{border:1px solid #e1e5ea;border-radius:12px;background:rgba(255,255,255,.8);padding:0 20px}.faq-list summary{cursor:pointer;font-weight:650;padding:18px 0;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"＋";float:right;font-weight:400;color:#7b8592}.faq-list details[open] summary::after{content:"−"}.faq-list details p{margin:0;padding:0 0 20px;color:#5e6876;font-size:14px;line-height:1.85}.support-note-panel{border:1px solid #e1e5ea;border-radius:16px;padding:32px;background:rgba(247,249,252,.86);margin-top:28px}.support-note-panel h2{font-size:26px;line-height:1.45;margin:7px 0 18px;letter-spacing:-.03em}.support-note-panel p{font-size:14px;color:#5d6775;line-height:1.9;margin:0 0 10px}
@media(max-width:720px){.single-app-heading{grid-template-columns:auto 1fr}.single-app-grid{grid-template-columns:1fr}.single-app-grid .featured{min-height:330px}.single-app-grid .featured img{width:185px;right:6px;bottom:0}.project-subnav{gap:18px;overflow-x:auto;white-space:nowrap;margin-inline:-15px;padding-inline:15px}.section-intro-row{grid-template-columns:1fr;gap:10px;align-items:start}.story-grid{grid-template-columns:1fr}.story-card,.story-lead{min-height:0}.support-note-panel{padding:24px}.support-note-panel h2{font-size:22px}}
@media(max-width:430px){.single-app-grid .featured img{width:160px;right:4px}.single-app-grid .featured p{max-width:61%}.project-art img{width:min(92vw,360px)}}

/* v2.4 — clearer Shizukuru information architecture + first production story */
.project-art{padding-inline:24px}
.project-art img{width:min(100%,380px);max-width:380px}
.project-overview{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:72px;padding:56px 0;border-bottom:1px solid var(--line)}
.overview-copy h2{font-size:34px;line-height:1.35;letter-spacing:-.04em;margin:0 0 18px}
.overview-copy p{font-size:15px;line-height:1.95;color:#596271;margin:0;max-width:650px}
.project-facts{margin:0;display:grid;align-content:start;border-top:1px solid var(--line)}
.project-facts>div{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}
.project-facts dt{font-size:11px;letter-spacing:.12em;color:#8d97a5}.project-facts dd{margin:0;font-size:13px;color:#3f4855}
.experience-group{margin-top:20px}.experience-group+.experience-group{margin-top:28px}.group-label{font-size:11px;letter-spacing:.14em;color:#909aa8;margin:0 0 12px}
.feature-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-grid-three .feature-card{position:relative;min-height:195px}.feature-no{display:block;font-size:11px;color:#a0a9b6;margin-bottom:28px}
.trust-card{display:flex;justify-content:space-between;gap:28px;align-items:center;border:1px solid #e1e5ea;border-radius:16px;padding:28px 32px;background:rgba(255,255,255,.78)}
.trust-card h3{font-size:22px;margin:0 0 8px;letter-spacing:-.03em}.trust-card p{margin:0;max-width:720px;color:#596271;font-size:14px;line-height:1.85}.trust-mark{width:42px;height:42px;border:1px solid #bac2cd;border-radius:50%;display:grid;place-items:center;color:#9aa4b1;flex:0 0 auto}
.story-feature{display:block;min-height:0;text-decoration:none;padding:34px 36px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.story-feature:hover{transform:translateY(-2px);border-color:#cfd5dd;box-shadow:0 12px 30px rgba(29,39,54,.05)}
.story-feature-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:end}.story-feature h3{font-size:clamp(28px,4vw,42px);line-height:1.3;margin:16px 0 18px}.story-feature p{max-width:720px}.story-read{display:inline-flex;align-items:center;gap:18px;white-space:nowrap;font-size:13px;border-bottom:1px solid #9ca5b1;padding-bottom:4px}.story-read b{font-size:18px;font-weight:400}.parents-section{padding-bottom:20px}
.shell-narrow{width:min(820px,calc(100% - 48px));margin-inline:auto}.story-article-main{padding:74px 0 90px}.back-link{text-decoration:none;font-size:12px;color:#6f7987}.article-header{padding:52px 0 38px;border-bottom:1px solid var(--line)}.article-header h1{font-size:clamp(42px,7vw,72px);line-height:1.22;letter-spacing:-.055em;margin:0 0 26px}.article-deck{font-size:17px;line-height:1.95;color:#4c5664;max-width:760px;margin:0}.article-hero-art{margin:38px 0 46px;display:flex;justify-content:center;overflow:hidden;border-radius:18px;background:linear-gradient(145deg,#fff,#f8fafc);border:1px solid #e4e8ed}.article-hero-art img{display:block;width:min(460px,82%);height:auto;margin:10px auto -14px}.article-body{font-family:"Noto Sans JP",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.article-body section{margin:0 0 52px}.article-body p{font-size:16px;line-height:2.05;color:#333d49;margin:0 0 19px}.article-body h2{font-size:30px;line-height:1.45;letter-spacing:-.035em;margin:0 0 20px}.article-body strong{color:#111821}.article-pullquote{margin:64px 0;padding:30px 0 30px 34px;border-left:2px solid #a9b2bf}.article-pullquote p{font-size:24px;line-height:1.7;letter-spacing:-.025em;margin:0;color:#202832}.article-end{margin-top:70px;padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;align-items:center}.article-end-label{font-size:10px;letter-spacing:.12em;color:#9aa3b0}
@media(max-width:720px){.project-art{padding-inline:36px}.project-art img{width:min(100%,320px)}.project-overview{grid-template-columns:1fr;gap:34px;padding:44px 0}.overview-copy h2{font-size:30px}.project-facts>div{grid-template-columns:86px 1fr}.feature-grid-three{grid-template-columns:1fr}.feature-grid-three .feature-card{min-height:0}.trust-card{padding:24px}.story-feature{padding:26px 24px}.story-feature-body{grid-template-columns:1fr;gap:26px}.story-feature h3{font-size:31px}.story-read{justify-self:start}.shell-narrow{width:min(100% - 34px,820px)}.story-article-main{padding:48px 0 68px}.article-header{padding:36px 0 30px}.article-header h1{font-size:clamp(38px,11vw,52px)}.article-deck{font-size:15px}.article-hero-art{margin:30px 0 40px}.article-hero-art img{width:88%}.article-body p{font-size:15px;line-height:2}.article-body h2{font-size:26px}.article-pullquote{margin:50px 0;padding-left:24px}.article-pullquote p{font-size:21px}.article-end{align-items:flex-start;flex-direction:column}}
@media(max-width:430px){.project-art{padding-inline:48px}.project-art img{width:min(100%,290px)}.story-feature h3{font-size:28px}}

/* v2.5 — optical artwork safety + stronger Stories transition */
/* Keep the mascot comfortably inside its visual field. The source art is intentionally
   given extra breathing room so it never feels clipped on narrow phones. */
@media(max-width:720px){
  .flow-art{overflow:visible;padding-inline:18px}
  .flow-art img{width:auto;max-width:min(78vw,310px);height:auto;margin-inline:auto}
  .project-art{overflow:visible;padding-inline:56px}
  .project-art img{width:auto;max-width:min(72vw,280px);height:auto;margin-inline:auto;display:block}
}
@media(max-width:430px){
  .flow-art img{max-width:min(76vw,292px)}
  .project-art{padding-inline:62px}
  .project-art img{max-width:min(68vw,260px)}
  .single-app-grid .featured img{width:145px;right:12px;bottom:8px}
}

/* Stories is a new editorial category, not just another content block. */
.stories-section{
  position:relative;
  margin-top:72px;
  padding-top:72px;
  padding-bottom:78px;
  border-top:1px solid #cfd5dd;
  border-bottom:1px solid #e3e7ec;
}
.stories-section::before{
  content:"STORIES";
  position:absolute;
  top:-13px;
  left:0;
  padding:0 16px 0 0;
  background:var(--bg);
  color:#111821;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}
.stories-section .section-intro-row{
  align-items:end;
  margin-bottom:30px;
}
.stories-section .inner-eyebrow{
  color:#596271;
  font-weight:700;
  letter-spacing:.16em;
}
.stories-section .section-intro-row h2{
  font-size:clamp(36px,5vw,54px);
  line-height:1.15;
  margin-top:4px;
}
.story-feature{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(247,249,251,.92));
  border-color:#d7dde5;
}
.story-meta{
  color:#5e6876;
  font-weight:700;
  letter-spacing:.14em;
}
@media(max-width:720px){
  .stories-section{margin-top:58px;padding-top:58px;padding-bottom:62px}
  .stories-section::before{top:-12px}
  .stories-section .section-intro-row{display:block;margin-bottom:24px}
  .stories-section .section-intro-row>p{margin-top:16px}
  .stories-section .section-intro-row h2{font-size:38px}
}

/* v2.6 — replace the previously clipped mascot asset with the full artwork.
   The artwork itself includes the soft floor shadow, so we only control layout here. */
.project-art{
  overflow:visible;
  padding-inline:20px;
}
.project-art img{
  width:min(100%,440px);
  max-width:440px;
  height:auto;
  object-fit:contain;
  object-position:center;
  display:block;
  margin-inline:auto;
}

.flow-art{
  overflow:visible;
}
.flow-art img{
  object-fit:contain;
  object-position:center;
}

@media(max-width:720px){
  .project-art{
    padding-inline:24px;
  }
  .project-art img{
    width:min(84vw,360px);
    max-width:360px;
  }
  .flow-art{
    padding-inline:22px;
  }
  .flow-art img{
    width:min(82vw,340px);
    max-width:340px;
  }
}

@media(max-width:430px){
  .project-art{
    padding-inline:28px;
  }
  .project-art img{
    width:min(80vw,330px);
    max-width:330px;
  }
  .flow-art img{
    width:min(80vw,320px);
    max-width:320px;
  }
}

/* v2.7 — editorial polish: make the production story feel like a distinct reading space. */
.story-article-main{
  background:linear-gradient(180deg,rgba(246,248,251,.78) 0,rgba(255,255,255,0) 420px);
}
.article-header .inner-eyebrow{font-weight:700;letter-spacing:.16em;color:#596271}
.article-summary{
  margin:34px 0 54px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;
}
.article-summary-label{font-size:10px;font-weight:700;letter-spacing:.16em;color:#8d97a5;text-transform:uppercase;padding-top:3px}
.article-summary p{margin:0;font-size:13px;line-height:1.9;color:#596271}
.article-body section{scroll-margin-top:28px}
.article-body h2::before{content:"";display:block;width:26px;border-top:1px solid #aab2bd;margin-bottom:18px}
.article-pullquote{background:rgba(247,249,252,.72);padding:30px 30px 30px 34px;border-radius:0 14px 14px 0}
@media(max-width:720px){
  .article-summary{grid-template-columns:1fr;gap:8px;margin:28px 0 42px;padding:18px 0}
  .article-pullquote{padding:25px 20px 25px 24px}
}


/* v2.8 — simplify information hierarchy and guarantee full mascot rendering. */
/* The previous asset touched the canvas edge, so CSS scaling alone could never restore
   the missing tip. v2.8 uses a fresh crop from the full source artwork with real breathing room. */
.project-hero .project-art{
  padding:22px 34px 8px;
  overflow:visible;
}
.project-hero .project-art img{
  display:block;
  width:min(100%,400px);
  max-width:400px;
  height:auto;
  object-fit:contain;
  object-position:center;
  margin:0 auto;
}

/* Overview duplicated the hero + Experience, so the page now starts directly with Experience. */
.project-subnav a:first-child{font-weight:600;color:#222a34}
#experience{padding-top:64px}
#experience .section-intro-row{margin-bottom:28px}
#experience .section-intro-row h2{font-size:clamp(32px,4.5vw,46px);line-height:1.25}

/* Trust information now lives where visitors expect it: For parents. */
.parent-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:28px 0 22px;
}
.parent-facts>div{
  border-top:1px solid var(--line);
  padding:18px 0 4px;
  display:grid;
  gap:6px;
}
.parent-facts strong{font-size:14px;letter-spacing:-.01em}
.parent-facts span{font-size:12px;line-height:1.75;color:#6a7481}

@media(max-width:720px){
  .project-hero{gap:26px}
  .project-hero .project-art{padding:16px 54px 4px}
  .project-hero .project-art img{width:min(72vw,300px);max-width:300px}
  #experience{padding-top:48px}
  #experience .section-intro-row h2{font-size:34px}
  .parent-facts{grid-template-columns:1fr;gap:0}
}
@media(max-width:430px){
  .project-hero .project-art{padding-inline:62px}
  .project-hero .project-art img{width:min(68vw,274px);max-width:274px}
  .project-subnav{gap:26px}
}

/* v2.9 — gentle, transparent explanation of the optional one-time support purchase. */
.support-purchase{margin-top:54px;padding-top:42px;border-top:1px solid var(--line)}
.support-purchase-kicker{margin-bottom:18px;font-size:10px;font-weight:700;letter-spacing:.16em;color:#8d97a5}
.support-purchase-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:48px;align-items:start}
.support-purchase h3{margin:0 0 18px;font-size:clamp(28px,4vw,38px);line-height:1.25;letter-spacing:-.035em}
.support-purchase p{margin:0 0 14px;color:#596271;font-size:14px;line-height:1.9}
.support-purchase-lead{color:#303946!important}
.support-purchase-how{padding:24px 26px 22px;border:1px solid #e0e5eb;border-radius:16px;background:rgba(255,255,255,.72)}
.support-purchase-price{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.support-purchase-price span{color:#8d97a5;font-size:11px;letter-spacing:.08em}
.support-purchase-price strong{font-size:30px;line-height:1;letter-spacing:-.04em}
.support-purchase-how ol{list-style:none;margin:0;padding:8px 0 2px}
.support-purchase-how li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid #eef1f4}
.support-purchase-how li:last-child{border-bottom:0}
.support-purchase-how li>span{color:#a0a9b6;font-size:10px;letter-spacing:.08em;padding-top:5px}
.support-purchase-how li p{margin:0;color:#3d4653;font-size:13px;line-height:1.7}
.support-purchase-note{margin:14px 0 0!important;padding-top:16px;border-top:1px solid var(--line);color:#7a8491!important;font-size:11px!important;line-height:1.8!important}
@media(max-width:720px){.support-purchase{margin-top:44px;padding-top:34px}.support-purchase-grid{grid-template-columns:1fr;gap:26px}.support-purchase h3{font-size:31px}.support-purchase-how{padding:22px 20px 20px}}

/* v2.12 — responsive reset for tablets + safe Shizukuru artwork */
/* The previous wide-tablet layout kept the desktop 3-column hero and compressed the
   NULL / NODE / PLAY flow into too little space. Treat touch tablets as the same
   editorial flow as mobile instead of squeezing the desktop composition. */
@media (min-width:721px) and (max-width:1200px),
       (pointer:coarse) and (min-width:721px) and (max-width:1600px){
  .hero{
    min-height:0;
    padding-top:64px;
    display:block;
  }
  .hero-copy{max-width:680px}
  .hero-copy h1{
    font-size:clamp(42px,6vw,58px);
    max-width:620px;
  }
  .hero-note{display:none}
  .hero-flow{
    position:relative;
    width:min(760px,100%);
    margin:76px auto 0;
    display:grid;
    grid-template-columns:minmax(180px,1fr) 72px minmax(180px,1fr);
    row-gap:42px;
    align-items:center;
  }
  .hero-flow::before{
    content:"";
    position:absolute;
    left:50%;
    top:78px;
    width:1px;
    height:calc(100% - 190px);
    background:linear-gradient(to bottom,#cbd1d9 0 36%,transparent 36% 43%,#cbd1d9 43% 100%);
    z-index:0;
  }
  .flow-step,.flow-art,.flow-line{position:relative;z-index:1;min-width:0}
  .flow-line{height:1px;background:#cbd1d9}
  .flow-art{
    grid-column:1/4;
    margin-top:4px;
    padding:42px 30px 0;
    overflow:visible;
    background:linear-gradient(to bottom,transparent 0 34px,var(--bg) 34px);
  }
  .flow-art::before{
    content:"";
    position:absolute;
    left:50%;top:0;
    transform:translateX(-50%);
    width:7px;height:7px;border-radius:50%;
    background:#0d1118;
    box-shadow:0 0 0 12px var(--bg);
  }
  .flow-art img{
    width:min(520px,68vw);
    max-width:520px;
    height:auto;
    margin:0 auto 12px;
    display:block;
    object-fit:contain;
    object-position:center;
  }
  .flow-step h2,.flow-art h2{white-space:nowrap}
  .flow-step p,.flow-art p{max-width:260px;margin-inline:auto}
  .apps{padding-top:72px}
  .app-grid{grid-template-columns:1fr}
  .app-card:last-child{display:block}
}

/* The transparent mascot source has the complete head tip. Keep it away from any
   clipping context and recreate the soft floating shadow in CSS. */
.flow-art{overflow:visible}
.flow-art img{mix-blend-mode:normal}
.flow-art.hero-work{isolation:isolate}
.flow-art.hero-work::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  width:min(190px,42%);
  height:20px;
  transform:translateX(-50%);
  bottom:72px;
  border-radius:50%;
  background:rgba(126,168,224,.18);
  filter:blur(9px);
  pointer-events:none;
}

@media(max-width:720px){
  .flow-art.hero-work{padding-top:46px;overflow:visible}
  .flow-art.hero-work img{
    width:auto;
    max-width:min(74vw,300px);
    height:auto;
    margin:0 auto 14px;
  }
  .flow-art.hero-work::after{
    width:min(150px,44%);
    height:17px;
    bottom:72px;
    filter:blur(8px);
  }
}
@media(max-width:430px){
  .flow-art.hero-work img{max-width:min(72vw,282px)}
}