:root{color-scheme:light;--ink:#426778;--muted:#86b4c2;--paper:#fff;--loop:12s}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper)}
body{font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;-webkit-font-smoothing:antialiased}
.story{position:relative;display:grid;grid-template-columns:1fr 1fr 1.1fr;column-gap:5.3%;align-items:end;width:100%;height:100%;padding:3.5% 3.2% 7%;isolation:isolate;--px:0;--py:0}
.stage{position:relative;min-width:0;margin:0;align-self:end;--depth:1;--delay:0s}
.stage-build{--depth:-.65;--delay:-8s}
.stage-verify{--depth:1.15;--delay:-4s}
.art{transform:translate3d(calc(var(--px)*var(--depth)*4px),calc(var(--py)*var(--depth)*3px),0);transform-origin:50% 75%;will-change:auto}
.art>svg{display:block;width:100%;height:auto;overflow:hidden}
figcaption{position:relative;display:flex;justify-content:center;align-items:center;gap:12px;color:var(--ink);font-size:clamp(13px,1.7vw,23px);line-height:1.6;font-weight:500;letter-spacing:.025em;padding-top:3.5%;white-space:nowrap}
.step{font:400 .61em/1.4 Arial,sans-serif;letter-spacing:.06em;color:#7fabb7}
.step-progress{position:absolute;bottom:-12px;width:32px;height:2px;border-radius:2px;background:#8ec4ce;opacity:.24;animation:stage-focus var(--loop) ease-in-out infinite;animation-delay:var(--delay)}
.shared-line{position:absolute;bottom:7%;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,#d6e3e5 15%,#d6e3e5 85%,transparent);z-index:-1;transform:translateY(26px)}
.flow{position:absolute;top:44%;width:5.4%;height:auto;overflow:visible;fill:none;stroke:#b5d2dc;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;--flow-delay:-2.4s}
.flow-first{left:31.7%}.flow-second{left:64.9%;--flow-delay:-6.4s}
.flow>path:first-child{opacity:.32}
.flow-dot{stroke:none;fill:#86bbcd;opacity:.22;animation:flow-pass 4s ease-in-out infinite;animation-delay:var(--flow-delay)}
.dot-two{animation-delay:calc(var(--flow-delay) + .24s)}.dot-three{animation-delay:calc(var(--flow-delay) + .48s)}
.flow-arrow{opacity:.75;stroke-width:1.8}
.paper-notes .note{opacity:.48;animation:note-pass var(--loop) ease-in-out infinite;animation-delay:calc(var(--delay) + var(--note-delay,0s))}
.note-two{--note-delay:.32s}.note-three{--note-delay:.64s}
.paper-attention{opacity:.25;animation:collaborate var(--loop) ease-in-out infinite}
.code-line{opacity:.25;animation:code-pass var(--loop) ease-in-out infinite;animation-delay:calc(var(--delay) + var(--code-delay,0s))}
.code-two{--code-delay:.28s}.code-three{--code-delay:.56s}
.typing{opacity:.18;animation:typing var(--loop) ease-in-out infinite;animation-delay:var(--delay)}
.verification .check{stroke-dasharray:26;stroke-dashoffset:0;opacity:.15;animation:verify var(--loop) ease-in-out infinite;animation-delay:calc(var(--delay) + var(--check-delay,0s))}
.check-two{--check-delay:.32s}.check-three{--check-delay:.64s}
.verified-rays{opacity:.15;animation:collaborate var(--loop) ease-in-out infinite;animation-delay:calc(var(--delay) + .8s)}
.story.is-paused *{animation-play-state:paused!important}
@keyframes flow-pass{0%,18%,75%,100%{opacity:.25}34%,50%{opacity:.9}}
@keyframes stage-focus{0%,32%,100%{opacity:.24;transform:scaleX(1)}8%,24%{opacity:.85;transform:scaleX(1.6)}}
@keyframes note-pass{0%,34%,100%{opacity:.48}8%,25%{opacity:.98}}
@keyframes collaborate{0%,36%,100%{opacity:.15}12%,27%{opacity:.8}}
@keyframes code-pass{0%,32%,100%{opacity:.25}9%,14%,21%,26%{opacity:.95}17%{opacity:.38}}
@keyframes typing{0%,32%,100%{opacity:.12}8%,12%,18%,23%{opacity:.62}10%,15%,21%,26%{opacity:.17}}
@keyframes verify{0%,34%,100%{opacity:.15;stroke-dashoffset:0}4%{opacity:.75;stroke-dashoffset:26}13%,28%{opacity:.95;stroke-dashoffset:0}}
@media(max-width:600px){
 .story{grid-template-columns:1fr 1.1fr;grid-template-rows:minmax(0,1.1fr) minmax(0,1fr);column-gap:7%;row-gap:3%;padding:4% 4.2% 9%}
 .stage-understand{grid-column:1/-1;justify-self:center;align-self:end;width:66%;max-height:100%}
 .stage-understand .art>svg{max-height:calc(50vh - 38px)}
 .stage-build,.stage-verify{align-self:end}
 figcaption{font-size:clamp(11px,3.45vw,18px);gap:7px;padding-top:1.5%;line-height:1.6}
 .stage-understand figcaption{padding-top:0}
 .stage-understand .step-progress{display:none}
 .flow{top:73%;width:7%}
 .flow-first{display:none}
 .flow-second{left:44.5%}
 .shared-line{left:10%;right:10%;bottom:9%;transform:translateY(21px)}
 .step-progress{bottom:-10px;width:24px}
}
@media(prefers-reduced-motion:reduce){.story *{animation:none!important}.art{transform:none!important}}