body{margin:0;background:#0B0C0E}
a{color:#ECEDE8}a:hover{color:#C8F53C}
.nav-links{display:flex}
.menu-btn{display:none}
.m-cta{display:none}
@media (max-width:860px){.nav-links{display:none}.menu-btn{display:flex}}
@media (max-width:760px){.m-cta{display:flex}.hdr-cta{display:none !important}}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--acc);mix-blend-mode:difference;pointer-events:none;z-index:90;translate:var(--cx,-200px) var(--cy,-200px);scale:.3;transition:translate .14s ease-out,scale .35s cubic-bezier(.2,.7,.1,1)}
.root:has(a:hover) .cursor,.root:has(button:hover) .cursor{scale:1.7}
@media (hover:none){.cursor{display:none}}

/* ---------- page hero ---------- */
@property --hx{syntax:'<length-percentage>';inherits:true;initial-value:72%}
@property --hy{syntax:'<length-percentage>';inherits:true;initial-value:38%}
/* web spotlight: the cursor reveals the page's source code underneath */
.spot{position:absolute;inset:0;pointer-events:none;overflow:hidden;-webkit-mask-image:radial-gradient(circle 340px at var(--hx) var(--hy),#000 0,rgba(0,0,0,.35) 45%,transparent 78%);mask-image:radial-gradient(circle 340px at var(--hx) var(--hy),#000 0,rgba(0,0,0,.35) 45%,transparent 78%)}
.spot-code{column-count:4;column-gap:56px;padding:110px clamp(20px,4vw,40px) 0;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.85;opacity:.7}
.cl{display:block;white-space:pre;overflow:hidden;break-inside:avoid}
@media (max-width:760px){.spot-code{column-count:2;column-gap:28px;font-size:11px}}
@media (hover:none){.hero{animation:roam 9s ease-in-out infinite alternate}}
@keyframes roam{0%{--hx:15%;--hy:25%}50%{--hx:80%;--hy:40%}100%{--hx:40%;--hy:80%}}
.ch{display:inline-block;animation:ch-in 1s cubic-bezier(.2,.8,.1,1) both}
@keyframes ch-in{from{opacity:0;translate:0 .6em;rotate:8deg;filter:blur(10px)}to{opacity:1;translate:0 0;rotate:0deg;filter:blur(0)}}
.fade-in{animation:fade-in 1s cubic-bezier(.2,.8,.1,1) both}
@keyframes fade-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.blink{animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.live{animation:blink 1.6s steps(1) infinite}
.pill-nav a{transition:background .3s ease,color .3s ease,border-color .3s ease}
@media (max-width:640px){
.feat{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px !important}
.feat li{display:flex !important;align-items:center !important;gap:10px !important;min-height:56px;box-sizing:border-box;padding:10px 12px !important;border-radius:16px !important;font-size:13px !important;line-height:1.45}
.feat li>span:first-child{flex-shrink:0}
.cms{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px !important}
.cms li{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;box-sizing:border-box;padding:8px 10px !important;font-size:14px !important;white-space:nowrap}
.cms .cms-wide{grid-column:span 2}
.cms .cms-note{font-size:12px !important;white-space:normal}
.dfr{flex-direction:column}
.dfr>div{min-width:0}
.dfr-notes{width:auto !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px !important}
.bp-copy{white-space:nowrap;font-size:clamp(11px,3.4vw,14px) !important;letter-spacing:-0.01em}
.zc{align-self:stretch !important;flex-direction:column;align-items:stretch !important;gap:14px !important;padding:16px !important;border-radius:20px !important}
.zc-text{align-items:flex-start !important;white-space:normal !important}
.zc-text .live{line-height:1.6}
.zc-lines{flex-direction:column;gap:2px !important}
.zc-sub{font-size:12px;font-weight:500;color:#9A9EA6}
.zc-lines>span:last-child{font-size:18px;font-weight:900}
.zc-tag{min-height:48px;padding:0 16px !important;font-size:14px !important}
}
.pill-nav a:hover{background:var(--acc);color:#0B0C0E;border-color:var(--acc) !important}

/* ---------- process band (light dot runs) ---------- */
.runner{position:absolute;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--acc);box-shadow:0 0 18px 4px rgba(200,245,60,.55);animation:run 6s linear infinite}
@keyframes run{from{left:0%}to{left:100%}}
.trail{position:absolute;left:0;top:6px;height:2px;background:linear-gradient(90deg,transparent,var(--acc));animation:trail 6s linear infinite}
@keyframes trail{from{width:0%}to{width:100%}}
.fnode{animation:fnode 6s ease-out infinite}
@keyframes fnode{0%{background:var(--acc);color:#0B0C0E;border-color:var(--acc);box-shadow:0 0 0 8px rgba(200,245,60,.14)}20%,100%{background:#121417;color:#9A9EA6;border-color:#3A3E44;box-shadow:0 0 0 0 rgba(200,245,60,0)}}
.flabel{animation:flabel 6s ease-out infinite}
@keyframes flabel{0%{color:var(--acc)}20%,100%{color:#ECEDE8}}
@media (max-width:760px){.fnode{width:40px !important;height:40px !important}.fnode svg{width:16px;height:16px}.flabel{font-size:12px !important}.flabel-en{display:none}.flow-track{top:19px !important;left:20px !important;right:20px !important}}

/* ---------- approach: scanning browser ---------- */
.scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc);box-shadow:0 0 16px 3px rgba(200,245,60,.45);animation:scan 4.5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes scan{0%{top:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
.cta-pulse{animation:cta-pulse 2.2s ease-in-out infinite}
@keyframes cta-pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,245,60,.5)}50%{box-shadow:0 0 0 10px rgba(200,245,60,0)}}

/* ---------- cards & mini screens ---------- */
.card{transition:transform .45s cubic-bezier(.2,.7,.1,1),border-color .35s ease}
.card:hover{transform:translateY(-8px);border-color:var(--acc) !important}
.a-grow{transform-origin:bottom}
.a-prog{transform-origin:left;transform:scaleX(.38)}
.a-draw{stroke-dasharray:260;stroke-dashoffset:0}
.card:hover .a-grow{animation:grow .9s cubic-bezier(.2,.8,.1,1) both}
.card:hover .a-pop{animation:pop .6s cubic-bezier(.3,1.5,.5,1) both}
.card:hover .a-slide{animation:slide .7s cubic-bezier(.2,.8,.1,1) both}
.card:hover .a-prog{animation:prog 2.2s linear both}
.card:hover .a-pulse{animation:pulse 1s ease infinite}
.card:hover .a-scroll{animation:lp-scroll 3.2s cubic-bezier(.6,0,.3,1) infinite alternate}
.card:hover .a-draw{animation:draw 1.6s cubic-bezier(.4,0,.2,1) both}
.card:hover .a-swap{animation:swap 1.2s cubic-bezier(.2,.8,.1,1) both}
@keyframes grow{from{transform:scaleY(.08)}to{transform:scaleY(1)}}
@keyframes pop{from{scale:0;opacity:0}to{scale:1;opacity:1}}
@keyframes slide{from{translate:-40px 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse{50%{scale:1.12}}
@keyframes lp-scroll{from{translate:0 0}to{translate:0 -52%}}
@keyframes draw{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes swap{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (hover:none){
.a-grow{animation:grow 1.6s ease infinite alternate}
.a-pop{animation:pop 1.2s ease infinite alternate}
.a-slide{animation:slide 1.4s ease infinite alternate}
.a-prog{animation:prog 3s linear infinite}
.a-pulse{animation:pulse 1.4s ease infinite}
.a-scroll{animation:lp-scroll 3.2s ease-in-out infinite alternate}
.a-draw{animation:draw 2.4s ease infinite alternate}
.a-swap{animation:swap 2.4s ease infinite alternate}
}
.plan-std{transform:translateY(-16px)}
.plan-std:hover{transform:translateY(-24px)}
@media (max-width:1080px){.plan-std{transform:none}.plan-std:hover{transform:translateY(-8px)}}

/* ---------- showcase: design / code ---------- */
.tab{transition:background .3s ease,color .3s ease}
.type{display:block;white-space:pre;animation:type .5s steps(28) both}
@keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.view-in{animation:view-in .6s cubic-bezier(.2,.8,.1,1) both}
@keyframes view-in{from{opacity:0;translate:0 16px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.cube-mini{animation:cube-mini 9s linear infinite;transform-style:preserve-3d}
@keyframes cube-mini{from{transform:rotateX(-24deg) rotateY(0deg)}to{transform:rotateX(-24deg) rotateY(360deg)}}

/* ---------- flow ---------- */
.flow-head{position:static}
@media (min-width:1080px){.flow-head{position:sticky;top:120px}}
.vline{transform-origin:top}
/* zero: slot reel lands on 0, then neon flicker + light sweep */
.reel-win{view-timeline-name:--zero}
.reel{transform:translateY(-90%)}
.reel>span{display:flex;align-items:center;justify-content:center;height:1.4em}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
.reel{animation:reel both;animation-timing-function:cubic-bezier(.3,.8,.15,1);animation-timeline:--zero;animation-range:entry 30% cover 55%}
}
}
@keyframes reel{from{transform:translateY(0)}to{transform:translateY(-90%)}}
.zero-neon{text-shadow:0 0 18px rgba(200,245,60,.55),0 0 56px rgba(200,245,60,.28);animation:zn 4.5s linear infinite}
@keyframes zn{0%,88%,100%{opacity:1}89%{opacity:.3}90%{opacity:1}92%{opacity:.45}93.5%{opacity:1}}
.echo{position:absolute;left:0;top:.2em;height:1em;line-height:1;color:transparent;-webkit-text-stroke:2px var(--acc);pointer-events:none;transform-origin:50% 55%;opacity:0;animation:echo 3.6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes echo{0%{opacity:.75;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.45)}}
.zero-tick{animation:zt 1.2s steps(1) infinite}
@keyframes zt{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.zero-neon,.echo,.zero-tick{animation:none}.echo{display:none}}

/* ---------- footer neon trace ---------- */
.nl{stroke-dasharray:3000 3000;stroke-dashoffset:3000;animation-duration:7.5s;animation-timing-function:linear;animation-iteration-count:infinite}
.d0{animation-name:d0}.d1{animation-name:d1}.d2{animation-name:d2}.d3{animation-name:d3}.d4{animation-name:d4}.d5{animation-name:d5}.d6{animation-name:d6}.d7{animation-name:d7}.d8{animation-name:d8}.d9{animation-name:d9}.d10{animation-name:d10}
@keyframes d0{0%{stroke-dashoffset:3000;opacity:1}12%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d1{0%,4%{stroke-dashoffset:3000;opacity:1}16%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d2{0%,8%{stroke-dashoffset:3000;opacity:1}20%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d3{0%,12%{stroke-dashoffset:3000;opacity:1}24%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d4{0%,16%{stroke-dashoffset:3000;opacity:1}28%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d5{0%,20%{stroke-dashoffset:3000;opacity:1}32%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d6{0%,24%{stroke-dashoffset:3000;opacity:1}36%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d7{0%,28%{stroke-dashoffset:3000;opacity:1}40%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d8{0%,32%{stroke-dashoffset:3000;opacity:1}44%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d9{0%,36%{stroke-dashoffset:3000;opacity:1}48%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes d10{0%,40%{stroke-dashoffset:3000;opacity:1}52%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.neon-full{opacity:0;animation:neon-on 7.5s linear infinite}
@keyframes neon-on{0%,52%{opacity:0}53%{opacity:.9}54%{opacity:.15}55.5%{opacity:1}56.5%{opacity:.4}58%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.nl,.neon-full{animation:none}.nl{stroke-dashoffset:0}}

/* ---------- menu overlay ---------- */
.menu-ov{animation:mo-in .55s cubic-bezier(.8,0,.2,1) both}
@keyframes mo-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.mo-link{animation:mo-link .6s cubic-bezier(.2,.8,.1,1) both}
@keyframes mo-link{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}

/* ---------- scroll-driven ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;z-index:30}
.sr-line{transform-origin:left}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
.sr{animation:sr-up linear both;animation-timeline:view();animation-range:entry 5% entry 90%}
.sr-clip{animation:sr-clip linear both;animation-timeline:view();animation-range:entry 10% entry 100%}
.sr-line{animation:sr-line linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.sr-card{animation:sr-card linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
.hero-out{animation:hero-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
.vline{animation:vline linear both;animation-timeline:view();animation-range:entry 20% cover 80%}
.fill{background:linear-gradient(90deg,#ECEDE8 50%,#2E3136 50%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:fill linear both;animation-timeline:view();animation-range:entry 70% cover 45%}
.fill-acc{background:linear-gradient(90deg,var(--acc) 50%,#2E3136 50%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:fill linear both;animation-timeline:view();animation-range:entry 70% cover 45%}
.progress{animation:progress linear both;animation-timeline:scroll(root)}
.hdr{animation:hdr linear both;animation-timeline:scroll(root);animation-range:0px 240px}
}
}
@keyframes sr-up{from{opacity:0;translate:0 56px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes sr-clip{from{clip-path:inset(-0.3em -0.3em 100% -0.3em);translate:0 40%}to{clip-path:inset(-0.3em -0.3em -0.3em -0.3em);translate:0 0}}
@keyframes sr-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sr-card{from{opacity:0;translate:0 80px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes hero-out{from{opacity:1;translate:0 0;scale:1}to{opacity:0;translate:0 -140px;scale:.95}}
@keyframes vline{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fill{from{background-position:100% 0}to{background-position:0 0}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hdr{from{background:rgba(11,12,14,0)}to{background:rgba(11,12,14,.86);backdrop-filter:blur(14px);border-bottom-color:#26292E}}
@media (prefers-reduced-motion:reduce){.ch,.fade-in,.blink,.live,.hero,.runner,.trail,.fnode,.flabel,.scan,.cta-pulse,.type,.view-in,.cube-mini,.a-grow,.a-pop,.a-slide,.a-prog,.a-pulse,.a-scroll,.a-draw,.a-swap{animation:none !important}.runner,.trail,.scan{display:none}}

/* ---------- JP line breaking (phrase-aware, mobile) ---------- */
.root{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
.root p{text-wrap:pretty}
.w{display:inline-block}
.sp-br{display:none}
@media (max-width:760px){.flow-track ~ ol > li{width:40px !important}}
@media (max-width:600px){.pc-br{display:none}.sp-br{display:inline}}