:root {
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #000;
  background: #efefed;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: #efefed; }
img { display: block; }
a { color: inherit; text-decoration: none; }
figure, p, h1, h2, h3, ul { margin: 0; }

.portfolio-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 16964px;
  overflow: hidden;
  background: #fff;
  transform: scale(var(--portfolio-scale, 1));
  transform-origin: top left;
}

.site-header { position: absolute; inset: 0 auto auto 0; z-index: 10; width: 1920px; height: 120px; }
.brand { position: absolute; left: 73px; top: 50px; width: 158px; height: 36px; }
.brand img { width: 158px; height: 36px; object-fit: contain; }
.project-tag { position: absolute; left: 1568px; top: 70px; width: 279px; height: 32px; }
.project-tag img { width: 279px; height: 32px; object-fit: contain; }

main { position: absolute; inset: 0; width: 1920px; height: 16964px; }
.page-section { position: absolute; left: 0; width: 1920px; overflow: visible; }

.hero { top: 0; height: 1054px; }
.hero-copy { position: absolute; left: 73px; top: 262px; width: 700px; }
.hero h1 { width: 700px; font-size: 100px; font-weight: 900; line-height: .96; letter-spacing: -6px; }
.eyebrow { position: absolute; left: 0; top: 239px; width: 260px; font-size: 28px; font-weight: 650; line-height: 41px; }
.author { position: absolute; left: 0; top: 309px; width: 127px; height: 51px; object-fit: contain; }
.hero-visual { position: absolute; left: 0; top: 0; width: 1920px; height: 1054px; }
.browser-frame { position: absolute; left: 877px; top: 313px; width: 937px; height: 609px; overflow: hidden; }
.browser-frame img { width: 937px; height: 609px; object-fit: contain; }
.hero-mascot { position: absolute; left: 737px; top: 674px; width: 280px; height: 246px; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(104, 126, 255, .16)); }

.background-section { top: 1054px; height: 1242px; text-align: center; }
.background-section .section-heading { position: absolute; left: 305px; top: 177px; width: 1311px; }
.section-heading h2 { font-size: 48px; font-weight: 800; line-height: 1.2; }
.background-section .section-heading p { margin-top: 36px; font-size: 28px; font-weight: 300; line-height: 1.65; }
.background-section .section-heading strong { font-weight: 650; }
.mascot-pair { position: absolute; left: 509px; top: 454px; width: 908px; height: 445px; }
.mascot-pair figure { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mascot-pair figure:first-child { left: 0; width: 339px; }
.mascot-pair figure:last-child { left: 596px; width: 313px; }
.mascot-pair img { width: 100%; height: 365px; object-fit: contain; }
.mascot-pair figure:last-child img { height: 365px; }
.mascot-pair .mascot-name { width: auto; height: 39px; margin: 18px auto 0; object-fit: contain; }
.mascot-pair figure:last-child .mascot-name { width: 135px; height: 39px; }

.goals-section { top: 2296px; height: 1077px; }
.goals-section .section-heading { position: absolute; left: 362px; top: 0; width: 1196px; text-align: center; }
.goal-list { position: absolute; left: 362px; top: 84px; width: 1450px; }
.goal-list article { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 24px; min-height: 96px; }
.goal-list article + article { margin-top: 28px; }
.goal-list span { font-size: 48px; font-weight: 900; line-height: 1; }
.goal-list p { font-size: 28px; font-weight: 300; line-height: 1.6; white-space: nowrap; }
.goals-section > .single-mascot { position: absolute; left: 818px; top: 604px; width: 284px; height: 452px; text-align: center; }
.goals-section > .single-mascot img,
.goals-section > .single-mascot video { width: 284px; height: 452px; object-fit: contain; }
.goals-section > .single-mascot video { position: absolute; left: -23px; top: 0; width: 330px; height: 350px; object-fit: contain; object-position: center top; background: #fff; visibility: hidden; opacity: 0; }
.goals-section > .single-mascot.is-playing > video { visibility: visible; opacity: 1; }
.goals-section > .single-mascot figcaption { display: none; }

#plan-1 { top: 3373px; height: 3661px; }
.plan-label { position: absolute; left: 362px; top: 0; display: flex; justify-content: center; width: 1196px; height: 44px; }
.plan-label img { width: auto; height: 23px; object-fit: contain; }
#plan-1 .plan-label { left: 378px; }
.plan-intro { position: absolute; left: 422px; top: 408px; width: 1076px; text-align: center; }
.plan-intro p { font-size: 28px; font-weight: 300; line-height: 1.65; }
#plan-1 > .wide-asset { position: absolute; left: 374px; top: 628px; width: 1171px; height: 240px; object-fit: contain; }
.traits { position: absolute; left: 0; top: 923px; display: flex; justify-content: center; gap: 71px; width: 1920px; padding: 0; list-style: none; }
.traits li { position: relative; padding-left: 28px; font-size: 30px; font-weight: 900; line-height: 34px; }
.traits li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: #000; }
#plan-1 .state-block { position: absolute; left: 165px; top: 1321px; width: 1590px; height: 376px; }
#plan-1 .state-block img { width: 1590px; height: 376px; object-fit: contain; }
#plan-1 .product-showcase { position: absolute; left: 80px; top: 2041px; width: 1761px; height: 789px; }
#plan-1 .product-showcase img { width: 1761px; height: 789px; object-fit: contain; }
#plan-1 > .single-mascot.short { position: absolute; left: 810px; top: 3184px; width: 300px; height: 450px; text-align: center; }
#plan-1 > .single-mascot.short > img { width: 300px; height: 345px; object-fit: contain; }
#plan-1 > .single-mascot.short > video { position: absolute; left: -15px; top: 0; width: 330px; height: 345px; object-fit: contain; object-position: center top; background: #fff; visibility: hidden; opacity: 0; }
#plan-1 > .single-mascot.short.is-playing > video { visibility: visible; opacity: 1; }
.single-mascot.short figcaption { display: grid; justify-items: center; margin-top: 28px; }
.single-mascot.short figcaption img { width: 193px; height: 44px; object-fit: contain; }

#plan-2 { top: 7034px; height: 3155px; }
#plan-2 .plan-label { left: 364px; top: 0; }
#plan-2 .plan-intro { left: 465px; top: 370px; width: 1005px; }
#plan-2 > .shape-process { position: absolute; left: 340px; top: 518px; width: 1254px; height: 273px; object-fit: contain; }
#plan-2 .state-block { position: absolute; left: 295px; top: 1186px; width: 1330px; height: 489px; }
#plan-2 .state-block img { width: 1330px; height: 489px; object-fit: contain; }
#plan-2 .state-block .default-label { position: absolute; left: 137px; top: 453px; width: 95px; height: 22px; object-fit: fill; }
#plan-2 .product-showcase { position: absolute; left: 63px; top: 2008px; width: 1795px; height: 808px; }
#plan-2 .product-showcase img { width: 1795px; height: 808px; object-fit: contain; }

.decision { top: 10189px; height: 1102px; }
.decision-result { position: absolute; left: 422px; top: 0; width: 1076px; text-align: center; font-size: 28px; font-weight: 300; line-height: 39px; }
.feedback { position: absolute; left: 375px; top: 105px; width: 1170px; height: 236px; object-fit: contain; }
.decision-content { position: absolute; left: 349px; top: 458px; display: flex; width: 1222px; flex-direction: column; align-items: center; gap: 36px; }
.decision .section-heading { position: static; width: 1222px; text-align: center; }
.decision-table { position: static; width: 1222px; height: 182px; padding: 24px 36px; overflow: hidden; border: 1px solid #595959; border-radius: 24px; }
.decision-table div { display: grid; grid-template-columns: 196px 1fr; gap: 28px; font-size: 27px; font-weight: 300; line-height: 44px; white-space: nowrap; }
.decision-table b { font-weight: 650; }

.applications { top: 11291px; height: 4405px; }
.application-shot { position: absolute; }
.application-shot img { width: 100%; height: 100%; object-fit: contain; }
.applications .application-shot:nth-child(1) { left: 362px; top: 0; width: 1196px; height: 630px; }
.applications .application-shot:nth-child(2) { left: 130px; top: 1083px; width: 1660px; height: 368px; }
.applications .application-shot:nth-child(3) { left: 76px; top: 1857px; width: 1768px; height: 792px; }
.application-pair { position: absolute; left: 74px; top: 3017px; display: grid; grid-template-columns: 867px 867px; gap: 38px; width: 1772px; height: 547px; }
.application-pair img { width: 867px; height: 547px; object-fit: contain; }
.scene-grid { position: absolute; left: 162px; top: 3676px; display: grid; grid-template-columns: repeat(4, 339px); gap: 72px; width: 1572px; height: 339px; }
.scene-grid img { width: 339px; height: 339px; object-fit: contain; }

.summary { top: 15696px; height: 1268px; text-align: center; }
.summary .section-heading { position: absolute; left: 304px; top: 0; width: 1312px; }
.summary h2 { font-size: 48px; line-height: 55px; }
.summary h3 { margin-top: 29px; font-size: 48px; font-weight: 800; line-height: 55px; }
.summary .section-heading p { margin-top: 105px; font-size: 28px; font-weight: 300; line-height: 1.65; }
.final-mascot { position: absolute; left: 853px; top: 606px; width: 216px; height: 262px; object-fit: contain; }

.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .82s cubic-bezier(.2,.72,.2,1), transform .82s cubic-bezier(.2,.72,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}