@property --hue-shift{syntax: "<number>"; inherits: true; initial-value: 0;}@property --glow-opacity{syntax: "<number>"; inherits: false; initial-value: 0;}@property --card-progress{syntax: "<number>"; inherits: false; initial-value: 0;}@property --morph-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --gradient-pos{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@layer reset,base,components,utilities;@layer reset{*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}canvas{display:block}}@layer base{:root{--bg: oklch(.15 .02 260);--bg-elevated: oklch(.2 .02 260);--text: oklch(.95 .01 260);--text-muted: oklch(.7 .02 260);--accent-1: oklch(.7 .2 250);--accent-2: oklch(.7 .2 320);--accent-3: oklch(.7 .2 150);--accent-soft: color-mix(in oklch, var(--accent-1) 30%, transparent);--accent-mid: color-mix(in oklch, var(--accent-1) 50%, var(--accent-2));--surface: color-mix(in oklch, var(--bg) 90%, var(--accent-1));color-scheme:dark light;--theme-bg: light-dark(oklch(.97 .01 260), oklch(.15 .02 260));--theme-text: light-dark(oklch(.15 .02 260), oklch(.95 .01 260));font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg)}body{overflow-x:hidden}}@layer components{.section{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;overflow:hidden}.section-header{text-align:center;margin-bottom:3rem;z-index:2}.section-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section-desc{margin-top:.75rem;font-size:1.1rem;color:var(--text-muted);letter-spacing:.02em}.section--hero{padding:0}#hero-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.hero-content{position:relative;z-index:2;text-align:center;pointer-events:none}.hero-title{font-size:clamp(3rem,10vw,8rem);font-weight:900;line-height:.95;letter-spacing:-.05em}.hero-title__line{display:block;background:linear-gradient(135deg,#e3f0ff,#c9acff);background:linear-gradient(135deg,color(xyz 0.803 0.861 1.217),color(xyz 0.596 0.486 1.153));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:hero-reveal 1.2s ease-out both}.hero-title__line:nth-child(2){animation-delay:.15s}.hero-title__line:nth-child(3){animation-delay:.3s}.hero-title__line--accent{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{margin-top:1.5rem;font-size:clamp(.9rem,2vw,1.2rem);color:var(--text-muted);letter-spacing:.15em;text-transform:uppercase;animation:hero-reveal 1.2s ease-out .5s both}@keyframes hero-reveal{0%{opacity:0;transform:translateY(40px);filter:blur(10px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.section--galaxy{padding-top:2rem}#galaxy-canvas{width:100%;max-width:900px;aspect-ratio:1;border-radius:1rem;cursor:grab}#galaxy-canvas:active{cursor:grabbing}.galaxy-controls{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap;justify-content:center}.galaxy-control{display:flex;flex-direction:column;gap:.5rem;font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.galaxy-control input[type=range]{width:160px;accent-color:var(--accent-1)}.section--scroll{min-height:auto;padding:6rem 2rem}.scroll-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:1200px;width:100%;container-type:inline-size}.scroll-card{container-type:inline-size;view-timeline-name:--card-timeline;view-timeline-axis:block;animation:card-enter linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.scroll-card__inner{background:var(--bg-elevated);border:1px solid oklch(.3 .02 260);border-radius:1rem;padding:2rem;transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s cubic-bezier(.23,1,.32,1);overflow:hidden;position:relative}.scroll-card__inner:hover{transform:translateY(-4px);box-shadow:0 20px 60px #0000004d}.scroll-card__number{font-size:4rem;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:.3}.scroll-card__title{font-size:1.4rem;font-weight:700;margin-top:.5rem;color:var(--text)}.scroll-card__text{margin-top:.75rem;font-size:.95rem;line-height:1.6;color:var(--text-muted)}.scroll-card__bar{position:absolute;bottom:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));transform-origin:left;animation:bar-fill linear both;animation-timeline:view();animation-range:entry 0% cover 50%}@keyframes card-enter{0%{opacity:0;transform:translateY(80px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes bar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@container (max-width: 350px){.scroll-card__inner{padding:1.25rem}.scroll-card__number{font-size:2.5rem}.scroll-card__title{font-size:1.1rem}}.section--svg{min-height:80vh}.svg-container{display:flex;flex-direction:column;align-items:center;gap:2rem}#morph-svg{width:min(500px,90vw);height:min(500px,90vw);filter:drop-shadow(0 0 40px oklch(.7 .2 250 / .3))}.svg-controls{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.svg-btn{padding:.6rem 1.5rem;border:1px solid oklch(.3 .02 260);border-radius:999px;background:var(--bg-elevated);color:var(--text);font-size:.9rem;cursor:pointer;transition:all .3s ease}.svg-btn:hover,.svg-btn.active{background:var(--accent-1);color:#070b14;border-color:var(--accent-1)}.section--generative{min-height:90vh}.generative-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;z-index:2}.gen-tab{padding:.5rem 1.25rem;border:1px solid oklch(.3 .02 260);border-radius:999px;background:transparent;color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:all .3s ease}.gen-tab.active{background:var(--accent-1);color:#070b14;border-color:var(--accent-1)}#gen-canvas{width:min(900px,95vw);height:min(600px,70vh);border-radius:1rem;border:1px solid oklch(.3 .02 260);cursor:crosshair}.section--audio{min-height:80vh}.audio-controls{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:2rem;z-index:2}.audio-btn{display:flex;align-items:center;gap:.75rem;padding:.8rem 2rem;border:none;border-radius:999px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#070b14;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.audio-btn:hover{transform:scale(1.05);box-shadow:0 0 30px #3fa3ff66;box-shadow:0 0 30px oklch(.7 .2 250 / .4)}.audio-btn.playing{background:linear-gradient(135deg,var(--accent-2),var(--accent-3))}.audio-presets{display:flex;gap:.5rem}.audio-preset{padding:.4rem 1rem;border:1px solid oklch(.3 .02 260);border-radius:999px;background:transparent;color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:all .3s ease}.audio-preset.active{background:#132139;color:var(--text);border-color:var(--accent-1)}#audio-canvas{width:min(900px,95vw);height:min(400px,50vh);border-radius:1rem}.section--footer{min-height:auto;padding:4rem 2rem 2rem}.footer-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;max-width:1000px;width:100%;margin-bottom:3rem}.anchor-demo{position:relative;display:flex;justify-content:center;align-items:center;min-height:200px}.anchor-trigger{anchor-name:--anchor-btn;padding:.75rem 1.5rem;border:1px solid var(--accent-1);border-radius:.5rem;background:var(--bg-elevated);color:var(--text);font-size:.95rem;cursor:pointer;transition:background .3s ease}.anchor-trigger:hover{background:#132139}.anchor-popover{position-anchor:--anchor-btn;top:anchor(bottom);left:anchor(center);translate:-50% 8px;opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease,display .3s allow-discrete;background:var(--bg-elevated);border:1px solid oklch(.3 .02 260);border-radius:.75rem;padding:1.25rem;max-width:300px;color:var(--text);font-size:.9rem;line-height:1.5;box-shadow:0 20px 60px #0006}.anchor-popover strong{color:var(--accent-1)}@starting-style{.anchor-popover:popover-open{opacity:0;transform:translateY(-10px)}}.anchor-popover:not(:popover-open){display:none}.color-demo{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.color-swatch{display:flex;align-items:center;justify-content:center;height:80px;border-radius:.75rem;font-size:.85rem;font-weight:600;color:#070b14;background:color-mix(in oklch,oklch(.7 .2 var(--hue)) 60%,oklch(.7 .15 calc(var(--hue) + 60)));transition:transform .3s ease}.color-swatch:hover{transform:scale(1.05)}.transition-demo{display:flex;flex-direction:column;align-items:center;gap:1rem}.discrete-btn{padding:.6rem 1.5rem;border:1px solid oklch(.3 .02 260);border-radius:.5rem;background:var(--bg-elevated);color:var(--text);font-size:.9rem;cursor:pointer}.discrete-target{background:var(--bg-elevated);border:1px solid oklch(.3 .02 260);border-radius:.75rem;padding:1.5rem;max-width:320px;text-align:center;font-size:.9rem;line-height:1.5;color:var(--text-muted);opacity:1;transform:scale(1);transition:opacity .4s ease,transform .4s ease,display .4s allow-discrete}.discrete-target.hidden{display:none;opacity:0;transform:scale(.95)}.discrete-target strong{color:var(--accent-1)}.discrete-target code{background:#1c222b;padding:.15em .4em;border-radius:.25em;font-size:.85em}.footer-credit{text-align:center;font-size:.85rem;color:var(--text-muted);opacity:.6}}@layer utilities{.section:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 60% 40% at 50% 0%,oklch(.3 .1 250 / .15),transparent);pointer-events:none}}@media(max-width:768px){.section{padding:3rem 1rem}.scroll-gallery,.footer-demo{grid-template-columns:1fr}}.category-divider{display:flex;align-items:center;gap:1.5rem;padding:2rem 2rem 0;max-width:1200px;margin:0 auto;width:100%}.category-tag{flex-shrink:0;padding:.35rem 1rem;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}[data-category=render] .category-tag,.category-divider[data-category=render] .category-tag{background:#002242;background:oklch(.25 .1 250);color:#89c3ff;color:oklch(.8 .15 250);border:1px solid oklch(.4 .1 250)}[data-category=css] .category-tag,.category-divider[data-category=css] .category-tag{background:#350a3e;color:#e89cf9;border:1px solid oklch(.4 .1 320)}[data-category=interactive] .category-tag,.category-divider[data-category=interactive] .category-tag{background:#002a0e;background:oklch(.25 .1 150);color:#6ed889;border:1px solid oklch(.4 .1 150)}[data-category=features] .category-tag,.category-divider[data-category=features] .category-tag{background:#351900;background:oklch(.25 .1 60);color:#ffa658;color:oklch(.8 .15 60);border:1px solid oklch(.4 .1 60)}.category-line{flex:1;height:1px;background:linear-gradient(90deg,oklch(.3 .05 260),transparent)}.section[data-lazy]{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}.section[data-lazy].loaded{opacity:1;transform:translateY(0)}.section-nav{position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.75rem;z-index:100}.nav-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid oklch(.5 .05 260);background:transparent;cursor:pointer;transition:all .3s ease;padding:0}.nav-dot:hover{background:#40639c;transform:scale(1.3)}.nav-dot.active{background:var(--accent-1);border-color:var(--accent-1);box-shadow:0 0 10px #3fa3ff80;box-shadow:0 0 10px oklch(.7 .2 250 / .5);transform:scale(1.2)}@media(max-width:768px){.section-nav{right:.5rem}.nav-dot{width:8px;height:8px}}