:root{--color-bg: #0a0a0b;--color-bg-elevated: #141416;--color-bg-card: #1a1a1d;--color-text: #fafafa;--color-text-muted: #a1a1aa;--color-accent: #22d3ee;--color-accent-hover: #67e8f9;--color-border: #27272a;--color-code-bg: #18181b;--font-sans: "DM Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 6rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s ease;--transition-base: .3s ease;--transition-bg-demo: .5s ease-out}body{margin:0;min-height:100vh;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--color-text);background:linear-gradient(180deg,#0f172a,#0c1222 40%,#0a0a0b);background-attachment:fixed;position:relative;transition:color var(--transition-bg-demo);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#1a0a0a,#120606,#0a0505 70%,#050202);background-attachment:fixed;opacity:0;pointer-events:none;transition:opacity var(--transition-bg-demo)}body.bg-demo:before{opacity:1}body.bg-demo{color:#fecaca}body.bg-demo .header{background:#3c1414bf;border-color:#fecaca1f;box-shadow:0 4px 24px #0006}body.bg-demo .footer{border-color:#fecaca14}body.bg-demo .header__logo,body.bg-demo .header__nav a,body.bg-demo .footer a{color:#fecaca}body.bg-demo .header__nav a:hover,body.bg-demo .footer a:hover{color:#fca5a5}body.bg-demo .header__github,body.bg-demo .footer__github{color:#f87171}body.bg-demo .header__github:hover,body.bg-demo .footer__github:hover{color:#fca5a5}body.bg-demo .section-title{color:#fecaca}body.bg-demo .hero__title{background:none;-webkit-text-fill-color:#fecaca;color:#fecaca}body.bg-demo .hero__badge{color:#f87171;background:#f8717126;border-color:#f871714d}body.bg-demo .hero__subtitle{color:#fca5a5}body.bg-demo .animation-section__header h3{color:#fecaca}body.bg-demo .animation-section__header p{color:#fca5a5}body.bg-demo .params-table th,body.bg-demo .params-table td{color:#fecaca}body.bg-demo .params-table code{color:#f87171}body.bg-demo .background-demo-text{color:#fca5a5}body.bg-demo .animation-section--dark{background:linear-gradient(160deg,#280a0abf,#f871710f 30%,#781e1e14 70%,#1e0808bf);border-color:#fecaca14}body.bg-demo .animations-nav__inner{background:#3c1414bf;border-color:#fecaca1f}body.bg-demo .animations-nav__item.active{color:#f87171}body.bg-demo .animations-nav__separator{background:#fecaca26}body.bg-demo .animations-nav__timeline:after{background:#f87171}.header{position:fixed;top:var(--space-md);left:var(--space-lg);right:var(--space-lg);z-index:100;max-width:100%;box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-xl);padding-top:max(var(--space-sm),env(safe-area-inset-top));background:#1c1c1eb8;-webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%);border-radius:30px;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 24px #00000040;transition:background var(--transition-bg-demo),border-color var(--transition-bg-demo),box-shadow var(--transition-bg-demo)}.header__logo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;flex-shrink:1;font-weight:500;font-size:.7rem;color:var(--color-text-muted);text-decoration:none;letter-spacing:.02em;text-transform:lowercase;transition:color var(--transition-bg-demo)}.header__logo:hover{color:var(--color-text)}.header__logo-img{height:28px;width:auto;display:block;flex-shrink:0}.header__nav{display:flex;gap:var(--space-xl)}.header__nav a{color:var(--color-text-muted);text-decoration:none;font-size:.9rem;font-weight:500;transition:color var(--transition-bg-demo)}.header__nav a:hover{color:var(--color-text)}.header__github{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-muted);text-decoration:none;font-size:.9rem;font-weight:500;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);transition:color var(--transition-bg-demo),background var(--transition-fast)}.header__github:hover{color:var(--color-accent);background:#22d3ee14}.animations-nav{position:fixed;left:var(--space-lg);top:50%;transform:translateY(-50%);z-index:90}.animations-nav__inner{background:#1c1c1eb8;-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 24px #00000040;padding:var(--space-xl) var(--space-lg);transition:background var(--transition-bg-demo),border-color var(--transition-bg-demo)}.animations-nav__timeline{display:flex;flex-direction:column;gap:0;position:relative;padding:var(--space-xs) 0}.animations-nav__separator{height:1px;margin:var(--space-sm) 0 var(--space-sm) var(--space-lg);background:#ffffff1f;flex-shrink:0}.animations-nav__timeline:before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:2px;background:#ffffff1f;border-radius:2px}.animations-nav__timeline:after{content:"";position:absolute;left:0;top:24px;width:2px;height:var(--timeline-progress, 0);background:var(--color-accent);border-radius:2px;transition:height .25s ease}.animations-nav__item{display:block;padding:var(--space-sm) 0 var(--space-sm) var(--space-lg);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-fast);position:relative;z-index:1}.animations-nav__item:hover{color:var(--color-text)}.animations-nav__item.active{color:var(--color-accent)}.animations-nav__item-title{display:block;font-size:.9rem;font-weight:500}.animations-nav__item-desc{display:block;font-size:.75rem;font-weight:400;opacity:.8;margin-top:1px;line-height:1.3}@media(max-width:1024px){.animations-nav{position:fixed;inset:auto 0 0;transform:none;z-index:90;width:100%;max-width:100vw;overflow-x:hidden}.animations-nav__inner{width:100%;max-width:100%;min-width:0;box-sizing:border-box;border-radius:0;border-left:none;border-right:none;border-bottom:none;padding:var(--space-sm) var(--space-md);padding-bottom:max(var(--space-sm),env(safe-area-inset-bottom));box-shadow:0 -4px 24px #0000004d}.animations-nav__timeline{min-width:0;flex-direction:row;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:0;padding:0}.animations-nav__timeline:before,.animations-nav__timeline:after{display:none}.animations-nav__item{flex-shrink:0;scroll-snap-align:center;padding:var(--space-sm) var(--space-md);white-space:nowrap;min-height:44px;display:flex;align-items:center}.animations-nav__item-desc{display:none}.animations-nav__separator{width:1px;height:24px;margin:0 var(--space-sm);flex-shrink:0}}main{padding-top:88px;max-width:960px;margin:0 auto;padding-left:var(--space-xl);padding-right:var(--space-xl);padding-bottom:var(--space-4xl)}.hero{min-height:85vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-4xl) 0}@media(min-width:1025px){.hero{min-height:75vh;padding:8vh 0 12vh;justify-content:center}.hero__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}.hero__badge{display:inline-block;padding:var(--space-sm) var(--space-lg);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);background:#22d3ee1f;border:1px solid rgba(34,211,238,.25);border-radius:100px}.hero__badge--size{color:var(--color-text-muted);background:#ffffff0f;border-color:#ffffff1f}.hero__badges-note{font-size:.8rem;color:var(--color-text-muted);margin:0 0 var(--space-lg);opacity:.9}.hero__title{font-size:clamp(3rem,7vw,4.5rem);margin-bottom:var(--space-xl);background:linear-gradient(135deg,var(--color-text) 0%,rgba(255,255,255,.85) 50%,var(--color-text-muted) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero__subtitle{font-size:1.2rem;max-width:500px;margin-bottom:var(--space-3xl)}.hero__cta-group{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center}.hero__cta{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-weight:600;font-size:1rem;border-radius:var(--radius-md);text-decoration:none;transition:all var(--transition-fast)}.hero__cta--primary{background:var(--color-accent);color:var(--color-bg);box-shadow:0 4px 20px #22d3ee59}.hero__cta--primary:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 8px 28px #22d3ee73}.hero__cta--secondary{background:transparent;color:var(--color-text-muted);border:1px solid var(--color-border)}.hero__cta--secondary:hover{color:var(--color-text);border-color:#fefefe33;background:#ffffff0a}}@media(max-width:1024px){.hero__badges,.hero__badges-note{display:none!important}.hero__cta-group{flex-direction:column;align-items:center}.hero__cta--secondary{display:none!important}}.hero__title{font-size:clamp(2.5rem,6vw,4rem);font-weight:700;line-height:1.1;letter-spacing:-.03em;margin:0 0 var(--space-lg);color:var(--color-text)}.hero__subtitle{font-size:clamp(1rem,2vw,1.25rem);color:var(--color-text-muted);margin:0 0 var(--space-2xl);max-width:520px;line-height:1.6}.hero__cta-group{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center}.hero__cta{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);background:var(--color-accent);color:var(--color-bg);text-decoration:none;font-weight:600;font-size:1rem;border-radius:var(--radius-md);transition:background var(--transition-fast),transform var(--transition-fast)}.hero__cta:hover{background:var(--color-accent-hover);transform:translateY(-2px)}.section-title{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:700;letter-spacing:-.02em;margin:0 0 var(--space-3xl);text-align:center;color:var(--color-text);transition:color var(--transition-bg-demo)}.dual-usage{padding:var(--space-4xl) 0}.dual-usage__intro{font-size:1rem;color:var(--color-text-muted);margin:0 0 var(--space-2xl);max-width:560px;line-height:1.6}.dual-usage__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xl);min-width:0}.usage-card{min-width:0;max-width:100%;overflow-x:hidden;padding:var(--space-xl);border-radius:var(--radius-lg);background:linear-gradient(160deg,#18181bb3,#22d3ee14 30%,#8b5cf614 70%,#18181bb3);background-size:200% 300%;-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border:1px solid rgba(255,255,255,.06);transition:border-color var(--transition-base)}.usage-card--attributes{border-left:3px solid var(--color-accent)}.usage-card--classes{border-left:3px solid rgba(139,92,246,.8)}.usage-card:hover{border-color:#22d3ee4d}.usage-card__badge{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent);margin-bottom:var(--space-sm)}.usage-card--classes .usage-card__badge{color:#a78bfa}.usage-card__title{font-size:1.25rem;font-weight:600;margin:0 0 var(--space-sm);color:var(--color-text)}.usage-card__desc{font-size:.9rem;color:var(--color-text-muted);margin:0 0 var(--space-md);line-height:1.6}.usage-card__pros{font-size:.85rem;color:var(--color-text-muted);margin:0 0 var(--space-lg);padding-left:0;line-height:1.7;list-style:none}.usage-card__pros li{margin-bottom:var(--space-xs);position:relative;padding-left:1.25rem}.usage-card__pros li:before{content:"✓";position:absolute;left:0;color:var(--color-accent)}.usage-card--classes .usage-card__pros li:before{color:#a78bfa}.usage-card__code-group{display:flex;flex-direction:column;gap:var(--space-sm)}.usage-card__code-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.usage-card h3{font-size:1.125rem;font-weight:600;margin:0 0 var(--space-sm);color:var(--color-text)}.usage-card p{font-size:.95rem;color:var(--color-text-muted);margin:0 0 var(--space-lg);line-height:1.6}.playground-viewport-lines{position:fixed;inset:0;pointer-events:none;z-index:85;opacity:0;transition:opacity .3s ease}.playground-viewport-lines.is-visible{opacity:1}.playground-viewport-line{position:absolute;left:0;right:0;width:100%;height:2px;transform:translateY(-50%)}.playground-viewport-line:before{content:"";position:absolute;inset:0;mask-image:repeating-linear-gradient(90deg,black 0,black 4px,transparent 4px,transparent 10px);-webkit-mask-image:repeating-linear-gradient(90deg,black 0,black 4px,transparent 4px,transparent 10px);mask-size:100% 100%;-webkit-mask-size:100% 100%}.playground-viewport-line--start:before{background:linear-gradient(90deg,transparent 0%,transparent 50%,var(--color-accent) 95%,var(--color-accent) 100%);opacity:.9}.playground-viewport-line--end:before{background:linear-gradient(90deg,transparent 0%,transparent 50%,rgba(139,92,246,.9) 95%,rgba(139,92,246,.9) 100%);opacity:.9}.playground-viewport-line__label{position:absolute;right:var(--space-lg);top:50%;transform:translateY(-50%);z-index:1;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:4px;white-space:nowrap}.playground-viewport-line--start .playground-viewport-line__label{color:var(--color-bg);background:var(--color-accent)}.playground-viewport-line--end .playground-viewport-line__label{color:var(--color-bg);background:#8b5cf6e6}.playground-viewport-progress{position:fixed;right:var(--space-lg);top:85%;transform:translateY(-50%);font-size:.85rem;font-weight:600;font-family:var(--font-mono);color:var(--color-accent);background:#18181b99;-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);padding:6px 12px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08)}.playground{padding:var(--space-4xl) 0}.playground__intro{text-align:center;color:var(--color-text-muted);margin:0 0 var(--space-2xl);font-size:.95rem}.playground__grid{display:grid;grid-template-columns:280px 1fr;gap:var(--space-2xl);align-items:start}.playground__controls{display:flex;flex-direction:column;gap:var(--space-lg)}.playground__label{display:flex;flex-direction:column;gap:var(--space-xs);font-size:.9rem;font-weight:500;color:var(--color-text-muted)}.playground__select,.playground__input{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text);font-family:var(--font-sans);font-size:.95rem;transition:border-color var(--transition-fast)}.playground__select:focus,.playground__input:focus{outline:none;border-color:var(--color-accent)}.playground-trigger{display:flex;flex-direction:column;gap:var(--space-md)}.playground-trigger__caption{font-size:.75rem;color:var(--color-muted);margin:0}.playground-trigger__diagram{padding:var(--space-md);border-radius:var(--radius-md);background:#18181b80;border:1px solid var(--color-border)}.playground-trigger__viewport{position:relative;height:180px;border:1px dashed rgba(255,255,255,.15);border-radius:var(--radius-sm);overflow:hidden}.playground-trigger__line{position:absolute;left:0;right:0;height:2px;display:flex;align-items:center;padding-left:var(--space-sm);z-index:2;transform:translateY(-50%);cursor:grab;padding-top:8px;padding-bottom:8px;margin-top:-8px}.playground-trigger__line:active{cursor:grabbing}.playground-trigger__line--start{background:linear-gradient(90deg,var(--color-accent) 0%,transparent 100%);opacity:.9}.playground-trigger__line--end{background:linear-gradient(90deg,rgba(139,92,246,.9) 0%,transparent 100%);opacity:.9}.playground-trigger__label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:4px}.playground-trigger__line--start .playground-trigger__label{color:var(--color-bg);background:var(--color-accent)}.playground-trigger__line--end .playground-trigger__label{color:var(--color-bg);background:#8b5cf6e6}.playground-trigger__element{position:absolute;left:0;right:0;height:24px;background:#22d3ee40;border:1px solid rgba(34,211,238,.4);border-radius:4px;will-change:top}.playground__replay{margin-top:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--color-accent);color:var(--color-bg);border:none;border-radius:var(--radius-md);font-weight:600;font-size:.95rem;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.playground__replay:hover{background:var(--color-accent-hover);transform:translateY(-2px)}.playground-preview{border-radius:var(--radius-lg);background:linear-gradient(160deg,#18181b80,#22d3ee0a 30%,#8b5cf60a 70%,#18181b80);background-size:200% 300%;border:1px solid var(--color-border);padding:var(--space-xl)}.playground-preview__block{display:flex;align-items:center;justify-content:center;min-height:120px;padding:var(--space-lg);border-radius:var(--radius-md);background:linear-gradient(160deg,#18181bb3,#22d3ee14 30%,#8b5cf614 70%,#18181bb3);background-size:200% 300%;-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border:1px solid rgba(255,255,255,.06)}.playground-preview__block span{font-weight:600;color:var(--color-accent)}.playground-code{margin-top:var(--space-xl)}.playground-code__tabs{display:flex;gap:0;margin-bottom:0}.playground-code__tab{padding:var(--space-sm) var(--space-lg);font-size:.9rem;font-weight:500;color:var(--color-text-muted);background:transparent;border:1px solid var(--color-border);border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;cursor:pointer;font-family:var(--font-sans);transition:color var(--transition-fast),background var(--transition-fast)}.playground-code__tab:first-child{margin-right:-1px}.playground-code__tab:hover{color:var(--color-text)}.playground-code__tab--active{color:var(--color-accent);background:var(--color-bg-card);border-color:var(--color-border)}.playground-code .code-block{border-radius:0 var(--radius-sm) var(--radius-sm) var(--radius-sm);border:1px solid var(--color-border)}.playground-code .code-block pre{background:linear-gradient(160deg,#18181bb3,#22d3ee14 30%,#8b5cf614 70%,#18181bb3);background-size:200% 300%;border-radius:0 var(--radius-sm) var(--radius-sm) var(--radius-sm);border:1px solid rgba(255,255,255,.06)}.playground-code__pre{padding:var(--space-md);padding-right:48px;margin:0;font-size:.85rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.playground-code__pre code{font-family:var(--font-mono);color:var(--color-accent)}@media(max-width:1024px){.playground{display:none}.playground-viewport-lines{display:none!important}}.code-block{position:relative;min-width:0;max-width:100%;overflow-x:hidden}.code-block__copy{position:absolute;top:var(--space-sm);right:var(--space-sm);z-index:10;display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;background:#ffffff1f;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)}.code-block__copy:hover{color:var(--color-accent);background:#22d3ee1f;border-color:#22d3ee33}.code-block__copy.copied{color:#4ade80}.code-block__copy-icon,.code-block__check-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .25s ease,opacity .2s ease}.code-block__check-icon,.code-block__copy.copied .code-block__copy-icon{opacity:0;transform:scale(.5)}.code-block__copy.copied .code-block__check-icon{opacity:1;transform:scale(1);animation:checkmark-pop .4s ease}@keyframes checkmark-pop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.code-block__copy svg{flex-shrink:0}.usage-card .code-block pre,.installation__code{position:relative;z-index:0;margin:0;padding:var(--space-md);padding-right:48px;min-width:0;overflow-x:auto;background:linear-gradient(160deg,#18181bb3,#22d3ee14 30%,#8b5cf614 70%,#18181bb3);background-size:200% 300%;-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.06)}.usage-card .code-block pre{padding:var(--space-md);padding-right:48px}.usage-card code{font-family:var(--font-mono);font-size:.8rem;color:var(--color-accent)}.installation{padding:var(--space-4xl) 0}.installation__content{display:flex;flex-direction:column;gap:var(--space-lg);min-width:0}.installation__note{font-size:.95rem;color:var(--color-text-muted);margin:0}.installation__note strong{color:var(--color-accent)}.granular-trigger{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}.granular-trigger:hover{color:var(--color-accent)}.granular-trigger--inline{font-weight:inherit}.installation__lightness .granular-trigger{color:var(--color-accent)}.installation__lightness .granular-trigger:hover{color:var(--color-accent-hover)}.granular-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-lg);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.granular-modal.is-open{opacity:1;visibility:visible}.granular-modal[hidden]{display:none!important}.granular-modal:not([hidden]).is-open{display:flex}.granular-modal__backdrop{position:absolute;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}.granular-modal__content{position:relative;max-width:520px;max-height:90vh;overflow-y:auto;padding:var(--space-2xl);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 24px 48px #00000080}.granular-modal__close{position:absolute;top:var(--space-md);right:var(--space-md);padding:var(--space-sm);background:none;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color .2s,background .2s}.granular-modal__close:hover{color:var(--color-text);background:#ffffff14}.granular-modal__title{font-size:1.25rem;margin:0 0 var(--space-md);color:var(--color-accent)}.granular-modal__intro{font-size:.95rem;color:var(--color-text-muted);margin:0 0 var(--space-xl);line-height:1.6}.granular-modal__modes{display:flex;flex-direction:column;gap:var(--space-xl)}.granular-modal__mode{padding:var(--space-lg);background:#0003;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.06)}.granular-modal__mode-title{font-size:.9rem;font-weight:600;color:var(--color-text);margin:0 0 var(--space-sm)}.granular-modal__mode-desc{font-size:.85rem;color:var(--color-text-muted);margin:0 0 var(--space-md);line-height:1.5}.granular-modal__visual{margin-top:var(--space-md)}.granular-modal__flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);font-size:.8rem;font-family:var(--font-mono)}.granular-modal__flow-step{padding:var(--space-xs) var(--space-sm);background:#22d3ee26;border-radius:var(--radius-sm);color:var(--color-accent)}.granular-modal__flow-arrow{color:var(--color-text-muted)}.granular-modal__flow-note{font-size:.75rem;color:var(--color-text-muted);margin:var(--space-sm) 0 0}.granular-modal__code{margin:0;padding:var(--space-md);font-size:.8rem;background:var(--color-code-bg);border-radius:var(--radius-sm);overflow-x:auto}.granular-modal__code code{color:var(--color-accent)}.installation__lightness{padding:var(--space-lg);background:#22d3ee0f;border:1px solid rgba(34,211,238,.15);border-radius:var(--radius-md)}.installation__lightness-title{font-size:.9rem;font-weight:600;color:var(--color-accent);margin:0 0 var(--space-sm);text-transform:uppercase;letter-spacing:.05em}.installation__lightness-text{font-size:.9rem;color:var(--color-text-muted);margin:0 0 var(--space-md);line-height:1.6}.installation__lightness-text strong{color:var(--color-accent)}.installation__lightness-text code{display:block;margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:.8rem;background:#0003;border-radius:var(--radius-sm);overflow-x:auto}.installation__lightness-comparison{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-xs) var(--space-xl);font-size:.8rem}.installation__lightness-comparison span:nth-child(odd){color:var(--color-text-muted)}.installation__lightness-comparison span:nth-child(2n){font-family:var(--font-mono);font-weight:500;color:var(--color-accent)}.installation__commands{display:flex;flex-direction:column;gap:0;min-width:0;width:100%}.installation__tabs{display:flex;gap:0;border-bottom:1px solid var(--color-border);margin-bottom:-1px}.installation__tab{padding:var(--space-sm) var(--space-lg);font-size:.9rem;font-weight:500;color:var(--color-text-muted);background:transparent;border:1px solid transparent;border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast)}.installation__tab:hover{color:var(--color-text)}.installation__tab.is-active{color:var(--color-accent);background:var(--color-code-bg);border-color:var(--color-border)}.installation__panels{position:relative;width:100%}.installation__panel{display:none}.installation__panel.is-active{display:block}.installation__label{font-size:.9rem;font-weight:600;color:var(--color-text-muted);margin:0}.installation__code{padding:var(--space-lg);padding-right:48px;border-radius:var(--radius-md);width:100%;max-width:100%;box-sizing:border-box}.installation__content .code-block,.installation__commands .code-block{min-width:0;max-width:100%}.installation__commands .installation__panel.code-block{width:100%;border:1px solid var(--color-border);border-top:none;border-radius:0 var(--radius-md) var(--radius-md) var(--radius-md)}.installation__code code{font-family:var(--font-mono);font-size:.9rem;color:var(--color-text)}.animations{padding:var(--space-4xl) 0}.animation-section{margin-bottom:var(--space-4xl);padding-bottom:var(--space-4xl);border-bottom:1px solid var(--color-border)}.animation-section:last-of-type{border-bottom:none}.animation-section--dark{margin-left:calc(-1 * var(--space-xl));margin-right:calc(-1 * var(--space-xl));padding:var(--space-3xl) var(--space-xl);border-radius:var(--radius-lg);background:linear-gradient(160deg,#141416b3,#22d3ee0f 30%,#8b5cf60f 70%,#141416b3);background-size:200% 300%;-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border:1px solid rgba(255,255,255,.06);transition:border-color var(--transition-bg-demo)}.animation-section__header{margin-bottom:var(--space-2xl)}.animation-section__header h3{font-size:1.5rem;font-weight:700;margin:0 0 var(--space-xs);color:var(--color-text);transition:color var(--transition-bg-demo)}.animation-section__header p{font-size:1rem;color:var(--color-text-muted);margin:0;transition:color var(--transition-bg-demo)}.animation-section__demo{margin-bottom:var(--space-2xl)}.animation-section__params h4{font-size:.9rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 var(--space-md)}.demo-grid{display:grid;gap:var(--space-lg)}.demo-grid--4{grid-template-columns:repeat(4,1fr)}.demo-grid--2{grid-template-columns:repeat(2,1fr)}.demo-block{display:flex;align-items:center;justify-content:center;min-height:120px;padding:var(--space-lg);border-radius:var(--radius-md);background:linear-gradient(160deg,#18181bb3,#22d3ee14 30%,#8b5cf614 70%,#18181bb3);background-size:200% 300%;-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);border:1px solid rgba(255,255,255,.06)}.demo-block span{font-weight:600;color:var(--color-accent)}.demo-block--wide{min-height:80px}.demo-text-grid{display:flex;flex-direction:column;gap:var(--space-xl)}.demo-text{font-size:1.5rem;font-weight:700;margin:0;color:var(--color-text)}.parallax-demo{display:flex;flex-direction:column;gap:var(--space-2xl)}.parallax-container{height:280px;border-radius:var(--radius-lg);overflow:hidden;position:relative}.parallax-container img{width:100%;height:120%;object-fit:cover;display:block}.background-demo-text,.scroll-demo-text{font-size:1.125rem;color:var(--color-text-muted);text-align:center;margin:0;transition:color var(--transition-bg-demo)}.params-table{width:100%;border-collapse:collapse;font-size:.9rem}.params-table th,.params-table td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--color-border)}.params-table th{font-weight:600;color:var(--color-text-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;transition:color var(--transition-bg-demo)}.params-table td{color:var(--color-text);transition:color var(--transition-bg-demo)}.params-table code{font-family:var(--font-mono);font-size:.85em;color:var(--color-accent);background:#22d3ee1a;padding:2px 6px;border-radius:4px;transition:color var(--transition-bg-demo),background var(--transition-bg-demo)}.footer{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-2xl) var(--space-xl);border-top:1px solid var(--color-border);text-align:center;transition:border-color var(--transition-bg-demo)}.footer__github{display:inline-flex;align-items:center;gap:var(--space-sm);color:var(--color-accent);text-decoration:none;font-weight:600;transition:color var(--transition-bg-demo)}.footer__github:hover{color:var(--color-accent-hover)}.footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md);font-size:.9rem}.footer__links a{color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-bg-demo)}.footer__links a:hover{color:var(--color-accent)}.footer__credits{font-size:.9rem;color:var(--color-text-muted);margin:0}.footer__credits a{color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-bg-demo)}.footer__credits a:hover{color:var(--color-accent)}.footer__version{font-family:var(--font-mono);font-size:.85em;color:var(--color-text-muted);opacity:.9}@media(max-width:1024px){main{padding-bottom:calc(80px + env(safe-area-inset-bottom))}}@media(max-width:768px){.header{left:var(--space-md);right:var(--space-md);top:var(--space-sm);padding:var(--space-sm) var(--space-lg);padding-top:max(var(--space-sm),env(safe-area-inset-top))}.header__nav{display:none}.header__logo{font-size:.65rem}.header__logo-img{height:24px}main{padding-left:var(--space-lg);padding-right:var(--space-lg);padding-top:72px}.hero{min-height:75vh;padding:var(--space-3xl) 0}.hero__subtitle br{display:none}.section-title{margin-bottom:var(--space-2xl)}.dual-usage__grid{grid-template-columns:1fr;gap:var(--space-lg)}.usage-card{padding:var(--space-lg)}.installation__code{padding:var(--space-md);padding-right:48px;font-size:.85rem}.installation__code code{font-size:.8rem}.code-block__copy{width:44px;height:44px;min-width:44px;min-height:44px}.usage-card .code-block pre,.installation__code{-webkit-overflow-scrolling:touch}.demo-grid--4{grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.demo-grid--2{grid-template-columns:1fr}.demo-block{min-height:100px;padding:var(--space-md)}.demo-block span{font-size:.9rem}.parallax-container{height:200px}.animation-section--dark{margin-left:calc(-1 * var(--space-lg));margin-right:calc(-1 * var(--space-lg));padding:var(--space-2xl) var(--space-lg)}.animation-section__header h3{font-size:1.25rem}.params-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--space-lg));padding:0 var(--space-lg)}.params-table{font-size:.8rem;min-width:320px}.params-table th,.params-table td{padding:var(--space-xs) var(--space-sm)}.footer{padding:var(--space-xl) var(--space-lg);padding-bottom:max(var(--space-xl),env(safe-area-inset-bottom))}}@media(max-width:480px){.header{left:var(--space-sm);right:var(--space-sm);padding:var(--space-sm) var(--space-md)}.header__logo{font-size:.6rem}.header__logo-img{height:22px}.header__github-text{display:none}main{padding-left:var(--space-md);padding-right:var(--space-md)}.hero__title{font-size:1.75rem}.hero__subtitle{font-size:.95rem}.hero__cta{padding:var(--space-md) var(--space-lg);font-size:.95rem}.demo-grid--4{grid-template-columns:1fr}.demo-text{font-size:1.25rem}.animation-section--dark{margin-left:calc(-1 * var(--space-md));margin-right:calc(-1 * var(--space-md));padding:var(--space-xl) var(--space-md)}.params-table-wrapper{margin:0 calc(-1 * var(--space-md));padding:0 var(--space-md)}}.akyos-animation-mask--right,.akyos-animation-mask--left,.akyos-animation-mask--top,.akyos-animation-mask--bottom{width:fit-content}.akyos-animation-mask--right{-webkit-mask-image:linear-gradient(90deg,#fff 0%,transparent 66.66%);mask-image:linear-gradient(90deg,#fff 0%,transparent 66.66%);-webkit-mask-size:0 100%;mask-size:0 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.akyos-animation-mask--right.akyos-animation-mask--no-fade{-webkit-mask-image:linear-gradient(90deg,#fff 100%,transparent 100%);mask-image:linear-gradient(90deg,#fff 100%,transparent 100%)}.akyos-animation-mask--left{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#fff 66.66%);mask-image:linear-gradient(90deg,transparent 0%,#fff 66.66%);-webkit-mask-position-x:right;-webkit-mask-size:0 100%;mask-size:0 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.akyos-animation-mask--left.akyos-animation-mask--no-fade{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#fff 0%);mask-image:linear-gradient(90deg,transparent 0%,#fff 0%)}.akyos-animation-mask--top{-webkit-mask-image:linear-gradient(0deg,#fff 33.33%,transparent 66.66%);mask-image:linear-gradient(0deg,#fff 33.33%,transparent 66.66%);-webkit-mask-position-y:bottom;-webkit-mask-size:100% 0;mask-size:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.akyos-animation-mask--top.akyos-animation-mask--no-fade{-webkit-mask-image:linear-gradient(0deg,#fff 0%,transparent 0%);mask-image:linear-gradient(0deg,#fff 0%,transparent 0%)}.akyos-animation-mask--bottom{-webkit-mask-image:linear-gradient(0deg,transparent 33.33%,#fff 66.66%);mask-image:linear-gradient(0deg,transparent 33.33%,#fff 66.66%);-webkit-mask-size:100% 0;mask-size:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.akyos-animation-mask--bottom.akyos-animation-mask--no-fade{-webkit-mask-image:linear-gradient(0deg,transparent 0%,#fff 0%);mask-image:linear-gradient(0deg,transparent 0%,#fff 0%)}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:clip}.lenis.lenis-smooth iframe{pointer-events:none}.akyos-animation-text-overflow{position:relative;overflow:hidden;display:block}.akyos-animation-text-overflow span{position:relative;display:block}