:root{--bg: #0e0f12;--bg-elev: #16181d;--fg: #e8e8ea;--muted: #8a8d96;--accent: #7cf;--accent-2: #ff7a59;--border: rgba(255, 255, 255, .08);--code-bg: rgba(255, 255, 255, .06);--card-a: #ff7a59;--card-b: #59c8ff;--card-c: #c89bff;--card-d: #6dd58c;--card-e: #ffd166}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.55 -apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.9em}code{background:var(--code-bg);padding:.1em .4em;border-radius:4px}pre{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:1rem 1.25rem;overflow-x:auto;font-size:.85rem;line-height:1.6}pre code{background:transparent;padding:0}.container{max-width:56rem;margin:0 auto;padding:0 1.5rem}.hero{padding:6rem 0 4rem;border-bottom:1px solid var(--border)}.hero-tag{display:inline-block;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.8rem;color:var(--muted);padding:.3rem .7rem;border:1px solid var(--border);border-radius:999px;margin-bottom:1.5rem}.hero h1{font-size:clamp(2rem,5vw,3.25rem);margin:0 0 1rem;letter-spacing:-.02em;line-height:1.05}.hero h1 .accent{color:var(--accent)}.hero-sub{font-size:1.15rem;color:var(--muted);max-width:36rem;margin:0 0 2.5rem}.size-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}.size-row .badge{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.8rem;padding:.4rem .7rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-elev)}.size-row .badge strong{color:var(--accent)}.install{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:.85rem 1.1rem;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.95rem;display:inline-block}.install:before{content:"$ ";color:var(--muted)}.cta{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}.cta a{display:inline-block;padding:.6rem 1.1rem;border:1px solid var(--border);border-radius:6px;text-decoration:none}.cta a:hover{background:var(--bg-elev)}.section{padding:4rem 0;border-bottom:1px solid var(--border)}.section h2{font-size:1.75rem;margin:0 0 .5rem;letter-spacing:-.01em}.section .lede{color:var(--muted);margin:0 0 2rem;max-width:38rem}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}@media (max-width: 720px){.demo-grid{grid-template-columns:1fr}}.controls{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:1.5rem;position:sticky;top:1.5rem}.controls h3{margin:0 0 1.25rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}.control-row{margin-bottom:1.25rem}.control-row label{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.9rem;color:var(--muted)}.control-row label .value{font-family:ui-monospace,SF Mono,Menlo,monospace;color:var(--fg)}.control-row input[type=range]{width:100%;accent-color:var(--accent)}.axis-toggle{display:flex;gap:.5rem}.axis-toggle button{flex:1;padding:.5rem;background:transparent;color:var(--fg);border:1px solid var(--border);border-radius:6px;cursor:pointer;font:inherit;font-family:ui-monospace,SF Mono,Menlo,monospace}.axis-toggle button.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}.select{width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:.5rem .7rem;font:inherit;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.85rem;cursor:pointer}.select:focus{outline:2px solid var(--accent);outline-offset:1px}.card-control{padding:.85rem 0;border-bottom:1px solid var(--border)}.card-control:last-of-type{border-bottom:none}.card-control-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;font-size:.9rem}.card-control-head strong{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.85rem}.card-control-head .card-control-value{margin-left:auto;color:var(--muted);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.8rem}.card-swatch{width:.9rem;height:.9rem;border-radius:4px;display:inline-block;flex-shrink:0}.card-control input[type=range]{width:100%;accent-color:var(--accent);margin-bottom:.5rem}.reset-btn{margin-top:1rem;width:100%;background:#ffffff14;border:1px solid var(--border);color:var(--fg);padding:.5rem;border-radius:6px;font:inherit;cursor:pointer;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.85rem}.reset-btn:hover{background:#ffffff24}.demo-section{padding:5rem 0;border-bottom:1px solid var(--border)}.demo-section h2{font-size:1.85rem;margin:0 0 .6rem;letter-spacing:-.01em;display:flex;align-items:flex-start;gap:.75rem}.demo-section h2 .num{display:inline-grid;place-items:center;flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--bg-elev);border:1px solid var(--border);font-size:1.05rem;font-family:ui-monospace,SF Mono,Menlo,monospace;color:var(--accent)}.controls-bar{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin:2rem 0 3rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}@media (max-width: 720px){.controls-bar{grid-template-columns:1fr}}.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.5rem}.controls-grid-wide{grid-template-columns:1fr 1fr 1fr}@media (max-width: 720px){.controls-grid,.controls-grid-wide{grid-template-columns:1fr}}.controls-snippet{margin:0;font-size:.8rem;line-height:1.5}.scroll-row{display:grid;grid-template-columns:1fr 1fr;gap:4rem;min-height:100vh;align-items:center}@media (max-width: 720px){.scroll-row{grid-template-columns:1fr;gap:2rem}}.scroll-text{padding:4rem 0;min-width:0}.scroll-text p{color:var(--muted);font-size:1rem;margin:0 0 1.25rem;line-height:1.7}.scroll-text p:last-child{margin-bottom:0}.scroll-text code{color:var(--fg)}.scroll-card-col{display:grid;place-items:center;padding:4rem 0;min-width:0}.demo-card{width:280px;height:280px;border-radius:20px;display:grid;place-items:center;font:700 4rem/1 system-ui;color:#00000080;box-shadow:0 20px 50px #0006;background:var(--card-b)}@media (max-width: 720px){.demo-card{width:220px;height:220px;font-size:3rem}}.demo-hint{text-align:center;color:var(--muted);font-size:.9rem;padding:2rem 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border)}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}@media (max-width: 720px){.presets{grid-template-columns:1fr}}.preset{text-align:center}.preset h3{margin:0 0 .5rem;font-size:1.1rem}.preset .preset-meta{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.8rem;color:var(--muted);margin:0 0 1.5rem}.preset .preset-card{width:100%;max-width:200px;aspect-ratio:1 / 1;border-radius:16px;margin:6rem auto;box-shadow:0 15px 35px #00000059}.preset:nth-child(1) .preset-card{background:var(--card-a)}.preset:nth-child(2) .preset-card{background:var(--card-c)}.preset:nth-child(3) .preset-card{background:var(--card-d)}.api-table{width:100%;border-collapse:collapse;font-size:.95rem}.api-table th,.api-table td{text-align:left;padding:.75rem;border-bottom:1px solid var(--border);vertical-align:top}.api-table th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.api-table td:first-child code{color:var(--accent)}.api-subhead{margin-top:2.5rem;font-size:1.15rem}.browser-table{width:100%;border-collapse:collapse;font-size:.95rem}.browser-table th,.browser-table td{padding:.65rem .75rem;text-align:left;border-bottom:1px solid var(--border)}.browser-table th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.browser-table .status-ok{color:#aef0bf}.browser-table .status-warn{color:#ffd166}.browser-table .status-bad{color:#ffb29c}@media (max-width: 600px){.api-table,.api-table tbody,.api-table tr,.api-table td,.browser-table,.browser-table tbody,.browser-table tr,.browser-table td{display:block;width:100%}.api-table thead,.browser-table thead{display:none}.api-table tr,.browser-table tr{padding:.85rem 0;border-bottom:1px solid var(--border)}.api-table td,.browser-table td{border:none;padding:.1rem 0;overflow-wrap:anywhere}.api-table td:first-child,.browser-table td:first-child{margin-bottom:.4rem;font-size:1rem;font-weight:600}.api-table td:not(:first-child):before,.browser-table td:not(:first-child):before{display:block;color:var(--muted);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:.5rem;margin-bottom:.1rem}.api-table td:nth-child(2):before{content:"Type"}.api-table td:nth-child(3):before{content:"Default"}.api-table td:nth-child(4):before{content:"Notes"}.browser-table td:nth-child(2):before{content:"Status"}.browser-table td:nth-child(3):before{content:"Notes"}}.caveats{list-style:none;padding:0;margin:0}.caveats li{padding:.75rem 0;border-bottom:1px solid var(--border);color:var(--muted)}.caveats li:before{content:"→ ";color:var(--accent-2);margin-right:.5rem}.caveats li strong{color:var(--fg)}.footer{padding:3rem 0 4rem;text-align:center;color:var(--muted);font-size:.9rem}.footer-links{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem}.sticky-demo-scroller{height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:12px;background:var(--bg-elev);scroll-timeline:--stickyDemo block;width:100%}.sticky-demo-scroller .sticky-demo-header{animation-timeline:--stickyDemo;display:flex;align-items:center;gap:.75rem;padding:0 1rem;background:var(--accent);color:#0b0b0f;font-weight:700;border-radius:12px 12px 0 0;z-index:2;overflow:hidden}.sticky-demo-logo{width:40px;height:40px;border-radius:9px;background:#0b0b0f;flex:none;scale:calc(1 - .4 * var(--ouvarov-sticky-progress))}.sticky-demo-tag{margin-left:auto;font-size:.8rem;opacity:calc(1 - var(--ouvarov-sticky-progress))}.sticky-demo-filler{display:grid;gap:.75rem;padding:1rem}.sticky-demo-filler>div{height:64px;border-radius:8px;background:var(--card-b);opacity:.22}@property --ouvarov-parallax-from{syntax: "<length>"; inherits: true; initial-value: 30px;}@property --ouvarov-parallax-mid{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --ouvarov-parallax-to{syntax: "<length>"; inherits: true; initial-value: -30px;}@property --ouvarov-parallax-opacity-from{syntax: "<number>"; inherits: true; initial-value: 1;}@property --ouvarov-parallax-opacity-mid{syntax: "<number>"; inherits: true; initial-value: 1;}@property --ouvarov-parallax-opacity-to{syntax: "<number>"; inherits: true; initial-value: 1;}@property --ouvarov-parallax-scale-from{syntax: "<number>"; inherits: true; initial-value: 1;}@property --ouvarov-parallax-scale-to{syntax: "<number>"; inherits: true; initial-value: 1;}@property --ouvarov-parallax-rotate-from{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@property --ouvarov-parallax-rotate-to{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@keyframes ouvarov-parallax-y{0%{translate:0 var(--ouvarov-parallax-from);opacity:var(--ouvarov-parallax-opacity-from);scale:var(--ouvarov-parallax-scale-from);rotate:var(--ouvarov-parallax-rotate-from)}50%{translate:0 var(--ouvarov-parallax-mid);opacity:var(--ouvarov-parallax-opacity-mid)}to{translate:0 var(--ouvarov-parallax-to);opacity:var(--ouvarov-parallax-opacity-to);scale:var(--ouvarov-parallax-scale-to);rotate:var(--ouvarov-parallax-rotate-to)}}@keyframes ouvarov-parallax-x{0%{translate:var(--ouvarov-parallax-from) 0;opacity:var(--ouvarov-parallax-opacity-from);scale:var(--ouvarov-parallax-scale-from);rotate:var(--ouvarov-parallax-rotate-from)}50%{translate:var(--ouvarov-parallax-mid) 0;opacity:var(--ouvarov-parallax-opacity-mid)}to{translate:var(--ouvarov-parallax-to) 0;opacity:var(--ouvarov-parallax-opacity-to);scale:var(--ouvarov-parallax-scale-to);rotate:var(--ouvarov-parallax-rotate-to)}}.ouvarov-parallax{animation-name:ouvarov-parallax-y;animation-timing-function:linear;animation-timeline:view();animation-fill-mode:both}.ouvarov-parallax[data-axis=x]{animation-name:ouvarov-parallax-x}@supports (animation-timeline: view()){.ouvarov-parallax{animation-duration:1ms}}.ouvarov-parallax-stagger>*{animation-name:ouvarov-parallax-y;animation-timing-function:linear;animation-timeline:view();animation-fill-mode:both;animation-range-start:var(--ouvarov-stagger-rs-name, cover) calc(var(--ouvarov-stagger-rs, 0%) + var(--ouvarov-stagger, 0%) * var(--ouvarov-stagger-i, 0));animation-range-end:var(--ouvarov-stagger-re-name, cover) var(--ouvarov-stagger-re, 50%)}.ouvarov-parallax-stagger[data-axis=x]>*{animation-name:ouvarov-parallax-x}@supports (animation-timeline: view()){.ouvarov-parallax-stagger>*{animation-duration:1ms}}.ouvarov-parallax-stagger>*:nth-child(2){--ouvarov-stagger-i: 1}.ouvarov-parallax-stagger>*:nth-child(3){--ouvarov-stagger-i: 2}.ouvarov-parallax-stagger>*:nth-child(4){--ouvarov-stagger-i: 3}.ouvarov-parallax-stagger>*:nth-child(5){--ouvarov-stagger-i: 4}.ouvarov-parallax-stagger>*:nth-child(6){--ouvarov-stagger-i: 5}.ouvarov-parallax-stagger>*:nth-child(7){--ouvarov-stagger-i: 6}.ouvarov-parallax-stagger>*:nth-child(8){--ouvarov-stagger-i: 7}.ouvarov-parallax-stagger>*:nth-child(9){--ouvarov-stagger-i: 8}.ouvarov-parallax-stagger>*:nth-child(10){--ouvarov-stagger-i: 9}.ouvarov-parallax-stagger>*:nth-child(11){--ouvarov-stagger-i: 10}.ouvarov-parallax-stagger>*:nth-child(12){--ouvarov-stagger-i: 11}.ouvarov-parallax-stagger>*:nth-child(13){--ouvarov-stagger-i: 12}.ouvarov-parallax-stagger>*:nth-child(14){--ouvarov-stagger-i: 13}.ouvarov-parallax-stagger>*:nth-child(15){--ouvarov-stagger-i: 14}.ouvarov-parallax-stagger>*:nth-child(16){--ouvarov-stagger-i: 15}.ouvarov-parallax-stagger>*:nth-child(17){--ouvarov-stagger-i: 16}.ouvarov-parallax-stagger>*:nth-child(18){--ouvarov-stagger-i: 17}.ouvarov-parallax-stagger>*:nth-child(19){--ouvarov-stagger-i: 18}.ouvarov-parallax-stagger>*:nth-child(20){--ouvarov-stagger-i: 19}.ouvarov-parallax-stagger>*:nth-child(21){--ouvarov-stagger-i: 20}.ouvarov-parallax-stagger>*:nth-child(22){--ouvarov-stagger-i: 21}.ouvarov-parallax-stagger>*:nth-child(23){--ouvarov-stagger-i: 22}.ouvarov-parallax-stagger>*:nth-child(24){--ouvarov-stagger-i: 23}.ouvarov-parallax-stagger>*:nth-child(n+25){--ouvarov-stagger-i: 23}@media (prefers-reduced-motion: reduce){.ouvarov-parallax,.ouvarov-parallax-stagger>*{animation:none!important;translate:none!important;scale:none!important;rotate:none!important;opacity:1!important}}@keyframes ouvarov-scroll-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.ouvarov-scroll-progress{position:fixed;left:0;right:0;height:var(--ouvarov-scroll-progress-height, 4px);background:var(--ouvarov-scroll-progress-color, currentColor);transform:scaleX(0);transform-origin:left center;z-index:var(--ouvarov-scroll-progress-z, 2147483647);pointer-events:none;animation-name:ouvarov-scroll-progress;animation-timing-function:linear;animation-timeline:scroll(root block);animation-fill-mode:both}.ouvarov-scroll-progress[data-position=top]{top:0}.ouvarov-scroll-progress[data-position=bottom]{bottom:0}@supports (animation-timeline: scroll()){.ouvarov-scroll-progress{animation-duration:1ms}}@property --ouvarov-sticky-progress{syntax: "<number>"; inherits: true; initial-value: 0;}@keyframes ouvarov-sticky-shrink{0%{--ouvarov-sticky-progress: 0}to{--ouvarov-sticky-progress: 1}}.ouvarov-sticky-shrink{position:sticky;top:0;height:calc(var(--ouvarov-sticky-from, 80px) + (var(--ouvarov-sticky-to, 56px) - var(--ouvarov-sticky-from, 80px)) * var(--ouvarov-sticky-progress));animation-name:ouvarov-sticky-shrink;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root block);animation-range:0 var(--ouvarov-sticky-distance, 200px)}@supports (animation-timeline: scroll()){.ouvarov-sticky-shrink{animation-duration:1ms}}@media (prefers-reduced-motion: reduce){.ouvarov-sticky-shrink{animation:none!important;--ouvarov-sticky-progress: 0 !important}}