@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{--ink:#08100e;--fg:#e9f6ed;--sub:#9aaeb0;--mint:#b5ffcb;--lime:#c9ffa0;--edge:#ffffff23;color-scheme:dark;font-family:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--fg);overflow-x:hidden}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #c8ffba;outline-offset:3px}::selection{color:#101b18;background:#c8ffba}
#flow-canvas{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:.85}.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.81' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E")}.reading-progress{position:fixed;right:0;top:0;bottom:0;width:3px;background:#ffffff12;z-index:20}.reading-progress span{display:block;background:#bcffc5;width:100%;height:0;box-shadow:0 0 14px #b7ffd6}
.top{position:relative;z-index:10;height:82px;border-bottom:1px solid var(--edge);background:#07100acc;display:flex;gap:24px;align-items:center;justify-content:space-between;padding:0 clamp(18px,3vw,62px);backdrop-filter:blur(17px)}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;font:800 20px 'Space Grotesk',sans-serif;letter-spacing:-.055em}.brand small{display:block;font:700 8px 'Space Mono',monospace;color:#7e9d95;letter-spacing:.08em;margin-top:5px}.asterisk{font:600 34px 'Space Grotesk',sans-serif;color:#c9ffd2}.mint{color:var(--mint)}.nav{display:flex;gap:27px;font:600 12px 'DM Sans',sans-serif;color:#bdcbbd}.nav a:hover{color:var(--mint)}.top-right{display:flex;align-items:center;gap:12px}#motion-toggle{background:#16261d;border:1px solid #5b8167;color:#bbf5bc;padding:10px 12px;font:700 9px 'Space Mono',monospace;white-space:nowrap}.mini-cta{padding:13px 17px;background:#b9ffae;color:#071a10;font-weight:800;font-size:11px;white-space:nowrap}
main,footer{position:relative;z-index:3}.intro{min-height:calc(100vh - 82px);padding:35px clamp(18px,4vw,74px) 26px;display:flex;flex-direction:column;justify-content:space-between;position:relative}.intro:before{position:absolute;z-index:-1;content:"";inset:0;background:radial-gradient(ellipse at 9% 40%,#08180de5,#08140ec9 40%,transparent 79%);pointer-events:none}.intro-top,.intro-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px}.meta,.overline,.intro-bottom{font:700 10px 'Space Mono',monospace;letter-spacing:.055em;color:#aacbbc}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#b9ffb0;margin-right:11px;box-shadow:0 0 12px #bcff98}.intro-main{padding:55px 0 40px;max-width:1200px}.intro-main .overline{color:#a7dcb8;margin:0}.intro h1{font:700 clamp(72px,11.2vw,189px)/.84 'Space Grotesk',sans-serif;letter-spacing:-.105em;margin:36px 0;max-width:1180px}.intro h1 em,.headline-flex h2 em,.outro h2 em{font-style:normal;color:var(--mint)}.intro h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.09em;font-style:italic}.lead{max-width:575px;font-size:clamp(14px,1.2vw,18px);line-height:1.8;color:#c1cdc7}.intro-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:28px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:33px;padding:16px 19px;background:#c8ffa0;color:#122010;font-weight:800;font-size:12px}.primary span{font-size:20px}.quiet{border-bottom:1px solid #658a70;padding:13px 0;font-size:12px;font-weight:700;color:#cce9d3}.quiet span{color:#b6ffba;margin-left:14px}.intro-bottom{font-size:9px;color:#abc7b0}.big-star{font-size:31px;color:#b8ffb9}
.catalog-head{padding:90px clamp(18px,4vw,74px) 35px;border-top:1px solid var(--edge);background:#0a1511e0;scroll-margin-top:0}.headline-flex{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);align-items:end;gap:35px}.headline-flex h2,.outro h2{font:700 clamp(50px,7.4vw,113px)/.95 'Space Grotesk',sans-serif;letter-spacing:-.085em;margin:17px 0}.headline-flex p{color:#acbfaf;line-height:1.75;font-size:14px;max-width:430px}.scene-switcher{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 0}.scene-switcher a{font:700 10px 'Space Mono',monospace;padding:10px 12px;border:1px solid #4d705a;background:#15261a;color:#a9d2a9;transition:background .25s}.scene-switcher a:hover{background:#c9ff9d;color:#11201a}
.scenes{padding:0 clamp(18px,4vw,74px);background:linear-gradient(180deg,#0a1511d8,#06100ebf)}.scene-section{scroll-margin-top:24px;min-height:600px;padding:75px 0 65px;border-top:1px solid #c2f4bb32;position:relative}.scene-heading{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:22px;align-items:end;margin-bottom:25px}.scene-count{color:#baffab;font:700 24px 'Space Mono',monospace}.scene-count span{color:#729a80;font-size:12px}.scene-heading h3{font:700 clamp(32px,5.4vw,76px)/.97 'Space Grotesk',sans-serif;letter-spacing:-.075em;margin:9px 0 13px}.scene-heading p:not(.overline){font-size:13px;line-height:1.7;color:#b7cbbb;max-width:680px;margin:0}.scene-info,.replay{background:#15251b;border:1px solid #648a6a;color:#d0ffc6;padding:12px 16px;font:700 11px 'DM Sans',sans-serif;white-space:nowrap}.scene-info:hover,.replay:hover{background:#baffb4;color:#0f1c12}.scene-stage{height:clamp(310px,42vw,620px);overflow:hidden;background:#0a1612;position:relative;border:1px solid #52735e;isolation:isolate;box-shadow:0 30px 80px #0008}.scene-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 24.8%,#ffffff0c 25% 25.05%,transparent 25.1% 49.8%,#ffffff0c 50% 50.05%,transparent 50.1% 74.8%,#ffffff0c 75% 75.05%,transparent 75.1%),linear-gradient(0deg,transparent 0 24.8%,#ffffff0a 25% 25.05%,transparent 25.1% 49.8%,#ffffff0a 50% 50.05%,transparent 50.1% 74.8%,#ffffff0a 75% 75.05%,transparent 75.1%);z-index:4;opacity:.3}.scene-demo,.scene-demo>div{position:relative;width:100%;height:100%;overflow:hidden}.scene-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 0;font:700 10px 'Space Mono',monospace;color:#87ae95}.scene-footer span:first-child{color:#b5ffad}.scene-footer .replay{padding:9px 12px}
.outro{padding:100px clamp(18px,4vw,74px);border-top:1px solid var(--edge);background:#09160fdd}.outro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.outro-grid p{font-size:16px;line-height:1.8;color:#aebdb2;max-width:590px}.checks{display:grid;gap:15px;margin:20px 0 35px}.checks span{border-bottom:1px solid #ffffff26;padding:10px 0;color:#cbdfcb;font-size:13px}.outro-overline{font:700 10px 'Space Mono';color:#acddb9}.outro h2{margin:20px 0}
footer{display:flex;gap:15px;justify-content:space-between;padding:26px clamp(18px,4vw,74px);background:#08110b;border-top:1px solid #34513b;font:700 10px 'Space Mono',monospace;color:#9db4a2}
#scene-dialog{background:#0e1b14;color:#e8ffec;border:1px solid #648e6a;width:min(650px,calc(100vw - 26px));padding:0;max-height:85vh;box-shadow:0 50px 140px #000c}#scene-dialog::backdrop{background:#000c;backdrop-filter:blur(6px)}.dialog-header{display:flex;justify-content:space-between;gap:14px;align-items:start;padding:28px;border-bottom:1px solid #3f6349}.dialog-header small{font:700 10px 'Space Mono';color:#b7edbc}.dialog-header h2{font:700 46px/1 'Space Grotesk';letter-spacing:-.06em;margin:14px 0 0}#close-dialog{background:#193326;border:1px solid #67996d;color:#d6ffc8;width:40px;height:40px}#dialog-text{padding:18px 28px 0;color:#b8cbbf;font-size:14px;line-height:1.75}.dialog-tags{display:flex;gap:7px;flex-wrap:wrap;margin:15px 28px}.dialog-tags span{border:1px solid #66896b;padding:6px 9px;color:#c5eab6;font:700 10px 'Space Mono'}.dialog-buttons{display:flex;flex-wrap:wrap;gap:9px;padding:10px 28px}.dialog-buttons a,.dialog-buttons button{background:#1c3323;border:1px solid #769a70;color:#e2ffe0;padding:12px 13px;font:700 11px 'DM Sans'}.dialog-buttons button{background:#c8ffa4;color:#122015}.dialog-note{font-size:11px;line-height:1.7;padding:15px 28px 20px;margin:0;color:#8ea799}
.motion-stopped *,.motion-stopped *:before,.motion-stopped *:after{animation-play-state:paused!important;transition-duration:0s!important}
@media(max-width:980px){.nav{display:none}.scene-heading{grid-template-columns:55px 1fr}.scene-heading .scene-info{grid-column:2;justify-self:start}.intro h1{font-size:clamp(65px,11vw,115px)}.headline-flex{grid-template-columns:1fr}.outro-grid{grid-template-columns:1fr;gap:20px}.scene-stage{height:440px}}
@media(max-width:650px){.top{height:72px}.brand{font-size:15px}.brand small{font-size:7px}.asterisk{font-size:27px}.mini-cta{display:none}.intro{min-height:760px}.intro .meta{font-size:8px}.intro-top .meta:last-child{display:none}.intro h1{font-size:clamp(56px,13vw,82px);word-break:break-word}.intro-actions{gap:12px}.intro-bottom span:last-child{display:none}.catalog-head{padding-top:60px}.headline-flex h2{font-size:52px}.scene-section{padding:50px 0;min-height:auto}.scene-heading{grid-template-columns:1fr;gap:8px}.scene-heading .scene-info{grid-column:1}.scene-count{font-size:15px}.scene-heading h3{font-size:42px}.scene-stage{height:340px}.scene-footer{flex-wrap:wrap;font-size:8px}.outro{padding-top:70px}.outro h2{font-size:52px}footer{flex-wrap:wrap}.dialog-header h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-demo *,.scene-demo *::before,.scene-demo *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 01 — living light line: SVG follows a predetermined Bézier; canvas backdrop remains scroll-linked */
.demo-trail{background:radial-gradient(circle at 55% 56%,#204f43,#0b1b1c 55%,#071011)}.demo-trail svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.trail-soft,.trail-hot{fill:none;stroke-linecap:round;stroke:#a3ffd7;stroke-width:17;opacity:.35;filter:url(#trail-glow)}.trail-hot{stroke:url(#trailshine);stroke:#c7ffdc;stroke-width:3;opacity:.9;filter:none;stroke-dasharray:190 1400;stroke-dashoffset:2000;animation:travel-line 5s linear infinite}.trail-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-shadow:0 0 30px #07120e}.trail-copy small,.trail-copy span{font:700 10px 'Space Mono',monospace;letter-spacing:.12em;color:#b7eec8}.trail-copy strong{font:700 clamp(90px,13vw,210px)/1 'Space Grotesk',sans-serif;letter-spacing:-.1em;color:#e8fff5;mix-blend-mode:screen}@keyframes travel-line{to{stroke-dashoffset:0}}
/* 02 — editorial masked headline */
.demo-editorial{background:#e8e4dc;color:#17231b;padding:clamp(18px,4vw,60px);display:flex;flex-direction:column;justify-content:space-between}.demo-editorial>small,.editorial-bottom{font:800 10px 'Space Mono',monospace;letter-spacing:.1em}.editorial-words{font:700 clamp(58px,11vw,148px)/.9 'Space Grotesk',sans-serif;letter-spacing:-.09em}.editorial-words span{display:block;transform:translateY(140%);opacity:0;animation:editorial-enter 5s cubic-bezier(.22,1,.2,1) infinite;animation-delay:calc(var(--i) * .22s)}.editorial-words em{font:400 italic 1.05em Georgia,serif;color:#557454}.editorial-bottom{display:flex;justify-content:space-between;gap:9px}@keyframes editorial-enter{0%,10%{transform:translateY(110%);opacity:0;filter:blur(12px)}31%,78%{transform:translateY(0);opacity:1;filter:blur(0)}100%{transform:translateY(-36%);opacity:0}}
/* 03 — interactive liquid lens */
.demo-lens{background:#041b24;color:#efffff;--x:50%;--y:50%;cursor:crosshair}.demo-lens:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(210px circle at var(--x) var(--y),#d9fff433,#c2fffa16 45%,transparent 73%)}.lens-beam{position:absolute;inset:-15%;background:radial-gradient(ellipse at 58% 45%,#9adccf 0%,#327b84 15%,transparent 16%),conic-gradient(from 90deg at 50% 50%,#040e18,#1e656a,#9de4d2,#08222c,#1c4f61,#040e18);filter:blur(9px);animation:lens-breathe 9s ease-in-out infinite alternate}.lens-top,.demo-lens>small{position:absolute;top:8%;left:6%;z-index:3;font:700 10px 'Space Mono';color:#ceece5}.demo-lens>small{top:auto;bottom:8%}.lens-form{position:absolute;width:38%;height:70%;top:17%;right:17%;border:1px solid #d9fff8c7;border-radius:50% 42% 55% 50%;transform:rotate(-24deg);box-shadow:0 0 80px #aaf5ce44,inset 0 0 35px #d7fff580;backdrop-filter:blur(12px);animation:lens-shape 8s ease-in-out infinite alternate}.lens-form span{position:absolute;inset:14%;border-radius:50%;border:1px solid #d7fff744}.demo-lens strong{position:absolute;left:8%;top:44%;z-index:3;transform:translateY(-40%);font:700 clamp(56px,9vw,145px)/.85 'Space Grotesk';letter-spacing:-.095em;text-shadow:0 8px 30px #0018}@keyframes lens-breathe{to{transform:rotate(18deg) scale(1.18);filter:blur(16px)}}@keyframes lens-shape{to{border-radius:63% 37% 42% 58%;transform:rotate(18deg) scale(1.12)}}
/* 04 — spatial gallery */
.demo-spatial{--rx:0deg;--ry:0deg;perspective:800px;background:radial-gradient(ellipse at 48%,#28382a,#121b14 80%)}.spatial-caption{position:absolute;top:7%;left:6%;font:700 10px 'Space Mono';color:#b8dfb5}.spatial-stack{position:absolute;left:50%;top:51%;width:min(64%,640px);height:66%;transform:translate(-50%,-50%) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .28s ease-out}.spatial-stack article{position:absolute;top:8%;width:42%;height:86%;padding:18px;border:1px solid #ffffff80;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 15px 40px #0008;transform-style:preserve-3d;transition:transform .45s}.spatial-stack article:nth-child(1){left:3%;background:linear-gradient(135deg,#659f7c,#144f4b);transform:translateX(-15%) rotateY(-22deg) translateZ(-40px)}.spatial-stack article:nth-child(2){left:29%;background:linear-gradient(145deg,#eef9c2,#97b778);color:#1b341e;transform:translateZ(100px) rotateY(0)}.spatial-stack article:nth-child(3){left:53%;background:linear-gradient(145deg,#5464aa,#231d45);transform:translateX(13%) rotateY(23deg) translateZ(-40px)}.spatial-stack article span{font:700 10px 'Space Mono'}.spatial-stack article strong{font:800 clamp(22px,4vw,54px) 'Space Grotesk';letter-spacing:-.07em}.demo-spatial>small{position:absolute;bottom:8%;left:6%;font:700 9px 'Space Mono';color:#a4caaa}
/* 05 — 3D tunnel */
.demo-tunnel{background:radial-gradient(circle at center,#142a3d,#030d15 70%);perspective:600px}.tunnel-depth{position:absolute;inset:0;transform-style:preserve-3d;animation:tunnel-cam 14s linear infinite}.tunnel-depth span{position:absolute;left:50%;top:50%;width:min(55%,310px);aspect-ratio:1;border:2px solid hsl(calc(155 + var(--i) * 4) 75% 80% / .62);box-shadow:0 0 20px #baffbb33,inset 0 0 15px #baffbb22;transform:translate(-50%,-50%) translateZ(calc(var(--i) * -54px)) rotate(calc(var(--i) * 8deg));border-radius:16%}.tunnel-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 1px 26px #000}.tunnel-label small,.tunnel-label span{font:700 10px 'Space Mono';letter-spacing:.12em}.tunnel-label strong{font:400 clamp(120px,20vw,280px) Georgia,serif;color:#d1ffe3;line-height:1}@keyframes tunnel-cam{to{transform:translateZ(594px) rotateZ(32deg)}}
/* 06 — SVG electric filament */
.demo-filament{background:linear-gradient(155deg,#061516,#0d2031 40%,#071711);display:grid;place-items:center}.demo-filament svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.demo-filament path{fill:none;stroke:#a6fcd6;stroke-width:2;stroke-linecap:round;stroke-dasharray:65 1320;stroke-dashoffset:1385;filter:drop-shadow(0 0 11px #b5ffdb);animation:filament-pulse 5.6s linear infinite}.demo-filament path:nth-child(2){stroke:#87e2fc;opacity:.65;animation-delay:-1.6s}.demo-filament path:nth-child(3){stroke:#f3ffc5;opacity:.5;animation-delay:-3.3s}.filament-copy{font:700 clamp(55px,11vw,160px) 'Space Grotesk';letter-spacing:-.085em;position:relative;color:#e4ffed}.filament-copy span{font:700 11px 'Space Mono';position:absolute;right:0;bottom:-8px;letter-spacing:.08em;color:#aef1b8}@keyframes filament-pulse{to{stroke-dashoffset:0}}
/* 07 — UI theater */
.demo-interface{background:linear-gradient(125deg,#0a1b1e,#173338 75%);display:grid;place-items:center;padding:8%}.interface-shell{width:min(82%,680px);height:83%;min-height:220px;background:#eef9ed;color:#122720;display:grid;grid-template-columns:60px 1fr;box-shadow:20px 30px 65px #000a;border:1px solid #ffffffbd;transform:perspective(1200px) rotateY(-8deg) rotateX(6deg);animation:interface-levitate 7s ease-in-out infinite alternate;overflow:hidden}.fake-sidebar{background:#18382e;padding:15px;display:flex;align-items:center;flex-direction:column;gap:18px}.fake-sidebar b{font-size:28px;color:#c4ffaf}.fake-sidebar i{width:20px;height:5px;background:#85b2a0}.fake-content{padding:clamp(14px,3vw,30px);display:flex;flex-direction:column;gap:12px}.fake-heading{display:flex;flex-direction:column;gap:8px;animation:interface-enter 5s ease-in-out infinite}.fake-heading small{font:700 8px 'Space Mono';color:#668b7c}.fake-heading strong{font:700 clamp(21px,3vw,38px) 'Space Grotesk';letter-spacing:-.055em}.fake-metrics{display:flex;gap:14px}.fake-metrics span{border:1px solid #bdd1bc;background:#e5f1e1;padding:9px 16px;display:flex;flex-direction:column;gap:3px}.fake-metrics b{font-size:clamp(15px,2vw,28px)}.fake-metrics small{font:700 8px 'Space Mono';color:#63866c}.fake-chart{height:100%;min-height:45px;display:flex;align-items:end;gap:5px;overflow:hidden}.fake-chart span{background:#79a691;height:calc(18% + (var(--i) * 9%));flex:1;min-width:3px;border-radius:2px 2px 0 0;animation:chart-rise 4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * .07s)}.demo-interface>small{position:absolute;left:8%;bottom:4%;font:700 9px 'Space Mono';color:#b5dcd1}@keyframes interface-levitate{to{transform:perspective(1200px) rotateY(5deg) rotateX(-3deg) translateY(-9px)}}@keyframes interface-enter{0%,6%{opacity:0;transform:translateY(20px)}24%,85%{opacity:1;transform:none}100%{opacity:0}}@keyframes chart-rise{to{transform:scaleY(.3)}}
/* 08 — magnetic orbit */
.demo-orbit{--mx:0px;--my:0px;background:radial-gradient(circle at 50%,#2a4133,#09160f 75%);display:grid;place-items:center}.orbit-one,.orbit-two{position:absolute;width:min(70%,400px);aspect-ratio:1;border:1px solid #d2ffb663;border-radius:50%;transform:rotate(-21deg) scaleY(.65);animation:orbit-rotate 12s linear infinite}.orbit-two{width:min(48%,300px);transform:rotate(48deg) scaleY(.9);animation-direction:reverse;animation-duration:8s}.orbit-one:after,.orbit-two:after{content:"";position:absolute;top:10%;left:19%;width:10px;height:10px;border-radius:50%;background:#c8ffac;box-shadow:0 0 25px #c8ffba}.orbit-center{font:400 clamp(80px,15vw,210px) 'Space Grotesk';color:#c4ffbe;text-shadow:0 0 70px #baffbb98;transform:translate(var(--mx),var(--my));transition:transform .18s}.orbit-cta{position:absolute;bottom:15%;border:1px solid #c3ffb1;background:#bcffa5;color:#133019;padding:14px 18px;display:flex;gap:30px;align-items:center;transform:translate(calc(var(--mx) * .4),calc(var(--my) * .3));transition:transform .18s;font-weight:800;font-size:11px}.orbit-cta span{font-size:20px}@keyframes orbit-rotate{to{rotate:360deg}}
/* 09 — kinetic stacked banners */
.demo-marquee{background:#baffad;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden;position:relative;transform:translateZ(0)}.marquee-line{font:900 clamp(48px,8vw,135px)/1 'Space Grotesk';white-space:nowrap;letter-spacing:-.1em;color:#10291c;transform:rotate(-7deg)}.marquee-line span{display:inline-block;animation:marquee-left 12s linear infinite}.marquee-line.b{background:#172d23;color:#d3ffc2;transform:rotate(5deg);margin:-13px 0}.marquee-line.b span{animation-name:marquee-right;animation-duration:10s}.marquee-line.c{transform:rotate(-3deg);opacity:.55}.marquee-line.c span{animation-duration:15s}.marquee-center{font:700 10px 'Space Mono';position:absolute;bottom:20px;right:30px;color:#0b3822;background:#e5ffe1;padding:7px}@keyframes marquee-left{to{transform:translateX(-48%)}}@keyframes marquee-right{from{transform:translateX(-48%)}to{transform:translateX(0)}}
/* 10 — ambient aurora silk */
.demo-aurora{background:linear-gradient(130deg,#071526,#0c1b21 50%,#092018);display:grid;place-items:center}.silk-ribbon{position:absolute;inset:-40%;border-radius:34% 60% 40% 54%;mix-blend-mode:screen;opacity:.68;filter:blur(26px);animation:silk-flow 9s ease-in-out infinite alternate}.silk-ribbon.a{background:linear-gradient(135deg,transparent 25%,#33e89e8f 40%,#ceffba77 54%,transparent 70%);transform:rotate(-28deg)}.silk-ribbon.b{background:linear-gradient(120deg,transparent 27%,#6a84ee8f 47%,#65d7da55 60%,transparent 74%);transform:rotate(32deg);animation-delay:-5s}.silk-ribbon.c{background:linear-gradient(135deg,transparent 20%,#dfffac75 42%,#2659a244 56%,transparent 66%);transform:rotate(5deg);animation-duration:12s}.aurora-mark{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;text-shadow:0 2px 40px #0008}.aurora-mark span{font:700 10px 'Space Mono';letter-spacing:.13em}.aurora-mark strong{font:700 clamp(50px,8vw,130px) 'Space Grotesk';letter-spacing:-.08em}@keyframes silk-flow{to{transform:rotate(38deg) scale(1.32) translate(6%,-7%);opacity:.9}}
/* 11 — responsive horizontal chapters */
.demo-horizontal{overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scrollbar-color:#bcffad #142017;scrollbar-width:thin;overscroll-behavior-inline:contain}.horizontal-track{width:300%;height:100%;display:flex}.h-story{flex:0 0 33.333333%;width:33.333333%;scroll-snap-align:start;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px}.h-story small{font:700 10px 'Space Mono'}.h-story strong{font:800 clamp(65px,11vw,175px)/1 'Space Grotesk';letter-spacing:-.09em}.h-story.a{background:linear-gradient(135deg,#163a2b,#45796b);color:#daffcc}.h-story.b{background:linear-gradient(135deg,#ebfbdf,#c4ddb2);color:#193f29}.h-story.c{background:linear-gradient(135deg,#2e205a,#8865b2);color:#eeebff}.horizontal-hint{position:sticky;bottom:17px;left:20px;padding:8px;background:#09190ebd;font:700 10px 'Space Mono';color:#e7ffde;z-index:4}
/* 12 — cinematic transition */
.demo-transition{background:#e4ecd8;color:#15291a}.transition-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.transition-content small,.transition-content span{font:700 11px 'Space Mono';letter-spacing:.12em}.transition-content strong{font:800 clamp(62px,11vw,160px)/.92 'Space Grotesk';letter-spacing:-.085em;text-align:center}.demo-transition.second-scene{background:#162d24;color:#d8ffb5}.demo-transition.second-scene .transition-content strong{font-family:Georgia,serif;font-style:italic;font-weight:400}.demo-transition.second-scene .transition-content strong:before{content:'FUTURE, ';}.demo-transition.second-scene .transition-content strong{font-size:clamp(50px,9vw,130px)}.demo-transition.second-scene .transition-content strong{font-variant:small-caps}.transition-curtain{position:absolute;z-index:4;top:0;bottom:0;left:0;width:0;background:#b9ff9f;pointer-events:none}.transitioning .transition-curtain{animation:cinematic-wipe 1.1s cubic-bezier(.7,0,.3,1) both}.transition-button{position:absolute;z-index:6;bottom:10%;left:50%;transform:translateX(-50%);background:#b9ff9f;color:#19301e;border:1px solid #112819;padding:15px 22px;font:800 12px 'DM Sans'}@keyframes cinematic-wipe{0%{width:0;left:0}43%,60%{width:100%;left:0}100%{width:0;left:100%}}
.replaying .scene-demo{animation:scene-replay .6s ease-out}@keyframes scene-replay{0%{opacity:0;filter:blur(10px)}100%{opacity:1;filter:blur(0)}}