:root{--bg: #071018;--bg-soft: #0f1f2b;--ink: #eaf3ff;--ink-soft: #9db7cb;--line: color-mix(in srgb, #d1e6ff 22%, transparent);--accent: #31d7c4;--accent-2: #ff7b4d;--accent-3: #ffd166;--surface: color-mix(in srgb, #1d3444 60%, transparent);--radius: 18px;--space: clamp(1rem, 1vw + .8rem, 2rem);--shadow: 0 18px 50px color-mix(in srgb, #000 30%, transparent)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Space Grotesk,Avenir Next,Noto Sans SC,sans-serif;background:radial-gradient(circle at 20% -10%,#214160 0%,transparent 40%),radial-gradient(circle at 110% 15%,#5e2f1f 0%,transparent 30%),var(--bg);color:var(--ink)}html{scroll-behavior:auto}body{line-height:1.5}a{color:inherit}code{font-family:IBM Plex Mono,SFMono-Regular,ui-monospace,monospace;color:color-mix(in srgb,var(--accent) 72%,white)}#app{position:relative;min-height:100vh;overflow-x:clip}.bg-grid{position:fixed;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 35%,black 35%,transparent 75%);mask-image:radial-gradient(circle at 50% 35%,black 35%,transparent 75%);pointer-events:none;z-index:-1}.topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1.25fr 2fr auto;gap:1rem;align-items:center;padding:.9rem 1.2rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg-soft) 85%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand-block h1{margin:0;font-size:clamp(1.1rem,1vw + .85rem,1.75rem);letter-spacing:.02em}.brand-kicker{margin:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.24em;color:var(--ink-soft)}.top-nav,.side-progress{display:flex;flex-wrap:wrap;gap:.45rem}.top-nav a,.side-progress a{border:1px solid var(--line);padding:.34rem .6rem;border-radius:999px;font-size:.78rem;letter-spacing:.02em;text-decoration:none;color:var(--ink-soft);transition:color .18s ease,border-color .18s ease,background .18s ease}.top-nav a:hover,.side-progress a:hover,.top-nav a.is-active,.side-progress a.is-active{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 60%,white);background:color-mix(in srgb,var(--accent) 20%,transparent)}.top-actions{display:grid;justify-items:end;gap:.35rem}.motion-indicator{margin:0;font-size:.72rem;color:var(--ink-soft)}.ghost-btn,.replay-btn,.control-row button{border:1px solid color-mix(in srgb,var(--accent) 45%,#fff 12%);border-radius:10px;padding:.45rem .75rem;color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent);font:inherit;font-size:.84rem;cursor:pointer;transition:transform .15s ease,background .15s ease}.ghost-btn:hover,.replay-btn:hover,.control-row button:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--accent) 25%,transparent)}.side-progress{position:fixed;right:.6rem;top:8.5rem;z-index:20;width:4.75rem;flex-direction:column}.showcase{width:min(1180px,100% - 7rem);margin-inline:auto;padding-block:2rem 5rem}.demo-section{position:relative;min-height:min(90svh,800px);margin-top:1.8rem;padding:var(--space);border:1px solid var(--line);border-radius:calc(var(--radius) + 8px);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 65%,transparent),color-mix(in srgb,#14304a 65%,transparent)),color-mix(in srgb,var(--bg-soft) 72%,transparent);box-shadow:var(--shadow)}.hero-section{min-height:88svh}.section-head{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:.8rem 1.1rem}.section-head h2{margin:0;font-size:clamp(1.15rem,1vw + .95rem,2rem)}.section-index{margin:0;color:color-mix(in srgb,var(--accent-3) 65%,white);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.82rem;letter-spacing:.12em}.section-copy{margin:.3rem 0 0;color:var(--ink-soft);max-width:66ch}.stage-card{margin-top:1.2rem;border-radius:var(--radius);border:1px solid var(--line);padding:clamp(.9rem,.8rem + 1vw,1.6rem);background:color-mix(in srgb,#102636 70%,transparent);min-height:250px}.hero-stage{min-height:56svh;display:grid;align-content:center;gap:1rem}.hero-kicker{margin:0;text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:var(--ink-soft)}.hero-subtitle{margin:0;font-size:clamp(1.05rem,.8rem + .9vw,1.45rem);max-width:34ch}.hero-badges{display:flex;flex-wrap:wrap;gap:.45rem}.hero-badges span{border:1px solid var(--line);border-radius:999px;padding:.3rem .55rem;font-size:.76rem;color:color-mix(in srgb,var(--accent-3) 65%,white)}.hero-orbs{position:relative;min-height:140px}.hero-orbs span{position:absolute;width:84px;height:84px;border-radius:50%;filter:blur(.3px);background:radial-gradient(circle at 35% 35%,white 0%,transparent 30%),linear-gradient(145deg,var(--accent),var(--accent-2));opacity:.8}.hero-orbs span:nth-child(1){left:8%;top:8%}.hero-orbs span:nth-child(2){left:31%;top:38%;width:112px;height:112px}.hero-orbs span:nth-child(3){left:62%;top:4%;width:72px;height:72px}.control-row{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}.control-row label,.control-row span{font-size:.8rem;color:var(--ink-soft)}.control-row input,.control-row select{accent-color:var(--accent);background:#122b3d;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:.3rem}.core-stage{margin-top:1rem;min-height:190px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.core-box{min-height:160px;border-radius:14px;display:grid;place-items:center;color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;background:linear-gradient(155deg,#17314a,#294f67);border:1px solid var(--line)}.to-box{background:linear-gradient(155deg,#1f4559,#2f8d89)}.from-box{background:linear-gradient(155deg,#5e3f2a,#bf7a3c)}.fromto-box{background:linear-gradient(155deg,#45305e,#8f4db7)}.keyframe-box{background:linear-gradient(155deg,#27495e,#356ea0)}.timeline-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1rem}.timeline-track:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}.timeline-dot{position:relative;width:32px;height:32px;margin:0 auto;border-radius:50%;border:1px solid var(--line);background:#11283a}.scroll-pin-wrap{min-height:62svh;display:grid;place-items:center}.scroll-pin-stack{position:relative;width:min(760px,95%);min-height:320px}.scroll-card{position:absolute;inset:0;margin:auto;width:70%;height:180px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(120deg,#143852,#1a5769);display:grid;place-items:center;font-size:clamp(1.2rem,2vw,1.8rem);letter-spacing:.15em;text-transform:uppercase}.scroll-card:nth-child(2){background:linear-gradient(120deg,#1a4250,#397a89)}.scroll-card:nth-child(3){background:linear-gradient(120deg,#384f73,#44719e)}.scroll-card:nth-child(4){background:linear-gradient(120deg,#4d4d73,#8f5872)}.horizontal-viewport{overflow:hidden}.horizontal-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:.8rem}.horizontal-panel{min-height:280px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(130deg,#233f58,#356d82);display:grid;place-items:center;font-size:clamp(1.4rem,2.2vw,2rem)}.motion-stage{position:relative;min-height:330px}.motion-stage svg{width:100%;height:220px}.motion-stage path{fill:none;stroke:color-mix(in srgb,var(--accent) 65%,white);stroke-width:3;stroke-dasharray:12 9;opacity:.75}.motion-ship{position:absolute;top:0;left:0;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:linear-gradient(120deg,#ff7b4d,#ffd166);color:#102232;font-size:1.2rem;box-shadow:0 10px 24px color-mix(in srgb,#ff7b4d 45%,transparent)}.flip-grid{margin-top:1rem;display:grid;gap:.7rem;grid-template-columns:repeat(4,minmax(0,1fr))}.flip-grid.is-list{grid-template-columns:1fr}.flip-item{min-height:88px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(145deg,#28445f,#385e78);display:grid;place-items:center;font-family:IBM Plex Mono,ui-monospace,monospace;letter-spacing:.08em}.drag-bounds{position:relative;min-height:320px;margin-top:.9rem;border-radius:14px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,#1a3a4b 75%,transparent)}.drag-item{position:absolute;width:122px;height:122px;border-radius:16px;border:1px solid var(--line);display:grid;place-items:center;background:linear-gradient(145deg,#24485b,#2e7886);cursor:grab;-webkit-user-select:none;user-select:none}.drag-item:active{cursor:grabbing}.drag-item:nth-child(1){left:6%;top:16%}.drag-item:nth-child(2){left:37%;top:33%}.drag-item:nth-child(3){left:68%;top:12%}.observer-viewport{position:relative;min-height:300px;overflow:hidden;touch-action:none}.observer-slide{position:absolute;inset:0;display:grid;place-items:center;border-radius:16px;border:1px solid var(--line);background:linear-gradient(145deg,#304e69,#3e708a);font-size:clamp(1.4rem,2vw,2rem);letter-spacing:.09em;text-transform:uppercase;opacity:0;transform:translateY(100%)}.observer-slide.is-active{opacity:1;transform:translateY(0)}.text-stage{min-height:300px}.text-dynamic{margin:0;font-size:clamp(1.15rem,1.3vw + .85rem,2rem);color:color-mix(in srgb,var(--accent-3) 70%,#fff)}.text-lines{margin-top:1rem;display:grid;gap:.4rem}.text-lines p{margin:0;color:var(--ink-soft)}.text-split-line{overflow:clip}.parallax-stage{position:relative;min-height:340px;overflow:hidden}.parallax-layer{position:absolute;border-radius:50%;border:1px solid var(--line);mix-blend-mode:screen}.layer-a{width:180px;height:180px;top:20%;left:12%;background:radial-gradient(circle at 35% 35%,#7cf2dd,#1f4f62)}.layer-b{width:240px;height:240px;top:8%;right:16%;background:radial-gradient(circle at 35% 35%,#ffd166,#96573b)}.layer-c{width:200px;height:200px;bottom:-8%;left:45%;background:radial-gradient(circle at 35% 35%,#90c8ff,#36507d)}.parallax-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid var(--line);border-radius:999px;padding:.45rem .8rem;color:var(--ink-soft);background:color-mix(in srgb,#0f2738 82%,transparent)}@media(max-width:1120px){.topbar{grid-template-columns:1fr;justify-items:start}.top-actions{justify-items:start}.showcase{width:min(980px,100% - 2rem)}.side-progress{display:none}.core-stage,.flip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:740px){.top-nav{gap:.35rem}.top-nav a{font-size:.72rem}.section-head,.core-stage{grid-template-columns:1fr}.horizontal-track{grid-auto-columns:85vw}.flip-grid{grid-template-columns:1fr}.drag-item{width:92px;height:92px}}#app[data-reduced-motion=true] .motion-indicator{color:color-mix(in srgb,var(--accent-3) 70%,#fff)}