:root{--rvl-accent: #4c538d;--rvl-overlay-bg: rgba(0, 0, 0, .9);--rvl-theme-color: #000000;--rvl-bar-fg: rgba(255, 255, 255, .9);--rvl-bar-fg-muted: rgba(255, 255, 255, .5);--rvl-bar-fg-faint: rgba(255, 255, 255, .3);--rvl-btn-bg: rgba(255, 255, 255, .1);--rvl-btn-bg-hover: rgba(255, 255, 255, .2);--rvl-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;--rvl-radius: 4px;--rvl-anim-duration: .25s;--rvl-z: 50;--rvl-nav-height: 2.375rem;--rvl-nav-inset: 1.3rem;--rvl-chrome-bleed: 6rem}.rvl-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--rvl-z);display:flex;align-items:center;justify-content:center;touch-action:none;background-color:transparent;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}.rvl-backdrop{position:absolute;inset:calc(-1 * var(--rvl-chrome-bleed)) 0;z-index:0;background-color:var(--rvl-overlay-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transform:translateZ(0);transition:opacity var(--rvl-anim-duration) ease-out}.rvl-root.rvl-visible .rvl-backdrop{opacity:1}.rvl-chrome-tint{position:fixed;left:0;width:100%;height:6px;z-index:5;background-color:var(--rvl-theme-color);pointer-events:none}.rvl-chrome-tint-top{top:0}.rvl-chrome-tint-bottom{bottom:0}.rvl-bar{position:absolute;inset-inline:0;z-index:20;pointer-events:none;transition:opacity var(--rvl-anim-duration) ease-out,transform var(--rvl-anim-duration) ease-out}.rvl-top-bar{top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;padding-top:max(.75rem,env(safe-area-inset-top));background:linear-gradient(to bottom,#000000b3,#0006,#0000);opacity:0;transform:translateY(-.75rem)}.rvl-bottom-bar{bottom:0;padding-top:1rem;padding-bottom:max(var(--rvl-nav-inset),env(safe-area-inset-bottom));opacity:0;transform:translateY(.5rem)}.rvl-root.rvl-visible .rvl-bar{opacity:1;transform:translateY(0)}@media (min-width: 640px){.rvl-top-bar{padding:1rem 1.5rem}}.rvl-header{min-width:0;flex:1 1 0;pointer-events:auto}.rvl-header-title{margin:0;font-size:.875rem;line-height:1.35;color:var(--rvl-bar-fg)}.rvl-header-subtitle{margin:.125rem 0 0;font-size:.75rem;line-height:1.35;color:var(--rvl-bar-fg-muted)}.rvl-header-actions{display:flex;align-items:center;gap:.25rem;pointer-events:auto;flex-shrink:0}.rvl-btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;min-width:2rem;padding:0 .5rem;border:none;border-radius:.375rem;background:var(--rvl-btn-bg);color:#ffffffb3;font:inherit;font-size:.75rem;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:color .15s ease-out,background-color .15s ease-out,transform .15s ease-out}.rvl-btn:hover{color:#fff;background:var(--rvl-btn-bg-hover)}.rvl-btn:active{transform:scale(.95)}.rvl-btn:focus-visible{outline:2px solid var(--rvl-accent);outline-offset:2px}.rvl-btn.is-active{color:#fff;background:var(--rvl-btn-bg-active, var(--rvl-accent))}.rvl-btn-scale{font-variant-numeric:tabular-nums;font-family:var(--rvl-font-mono)}.rvl-btn svg,.rvl-btn svg *,.rvl-nav-btn svg,.rvl-nav-btn svg *{color:inherit}.rvl-stage{position:relative;z-index:10;width:100%;height:100%;transition:transform .35s cubic-bezier(.25,.1,.25,1)}.rvl-track{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;touch-action:none;pointer-events:auto;opacity:0;transition:opacity var(--rvl-anim-duration) ease-out}.rvl-root.rvl-visible .rvl-track,.rvl-track-visible{opacity:1}.rvl-track-swiping{will-change:transform}.rvl-adjacent{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:0}.rvl-img-wrapper{position:relative;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;overflow:hidden;cursor:default;touch-action:none;pointer-events:auto}.rvl-img{display:block;width:auto;height:auto;object-fit:contain;border-radius:var(--rvl-radius);max-width:96vw}.rvl-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:11;pointer-events:none}.rvl-spinner-ring{display:block;width:2.25rem;height:2.25rem;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#ffffffe6;animation:rvl-spin .7s linear infinite}@keyframes rvl-spin{to{transform:rotate(360deg)}}.rvl-nav-row{width:100%;padding:0 1rem;pointer-events:auto}@media (min-width: 640px){.rvl-nav-row{padding:0 1.5rem}}.rvl-nav-inner{position:relative;display:flex;align-items:center;justify-content:center;min-height:2.25rem;max-width:42rem;margin:0 auto}.rvl-nav-group{display:flex;align-items:center;justify-content:center;gap:.75rem}.rvl-nav-start,.rvl-nav-end{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center}.rvl-nav-start{left:0}.rvl-nav-end{right:0}.rvl-nav-inner.rvl-nav-inline{gap:.75rem}.rvl-nav-inline .rvl-nav-start,.rvl-nav-inline .rvl-nav-end{position:static;transform:none}.rvl-nav-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 1rem;border:none;background:none;border-radius:9999px;cursor:pointer;color:#fff6;transition:color .15s ease-out}.rvl-nav-btn svg{width:var(--rvl-nav-height);height:var(--rvl-nav-height)}.rvl-nav-btn:hover:not(:disabled){color:#fff9}.rvl-nav-btn:active:not(:disabled){color:#fffc}.rvl-nav-btn:disabled{color:#ffffff1a;cursor:default}.rvl-nav-btn:focus-visible{outline:2px solid var(--rvl-accent);outline-offset:2px}.rvl-counter{display:inline-block;text-align:center;font-size:var(--rvl-counter-font-size, calc(var(--rvl-nav-height) * .29));letter-spacing:.02em;color:var(--rvl-bar-fg-muted);font-variant-numeric:tabular-nums;font-family:var(--rvl-font-mono);-webkit-user-select:none;user-select:none}.rvl-hint{margin:.25rem auto;width:fit-content;text-align:center;pointer-events:auto}.rvl-hint span{font-size:.6875rem;letter-spacing:.02em;color:var(--rvl-bar-fg-faint)}.rvl-footer{pointer-events:auto}.rvl-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;pointer-events:none;opacity:0;transition:opacity var(--rvl-anim-duration) ease-out}.rvl-root.rvl-visible .rvl-overlay{opacity:1}.rvl-overlay>*{pointer-events:auto}@media (hover: none) and (pointer: coarse){.rvl-backdrop,.rvl-btn{-webkit-backdrop-filter:none;backdrop-filter:none}}@media (prefers-reduced-motion: reduce){.rvl-root,.rvl-backdrop,.rvl-bar,.rvl-stage,.rvl-track,.rvl-overlay,.rvl-btn,.rvl-nav-btn{transition-duration:.01ms!important}}:root{color-scheme:dark;--pg-bg: #0b0b0c;--pg-bg-soft: #141417;--pg-border: rgba(255, 255, 255, .08);--pg-fg: #e9e9ec;--pg-fg-muted: rgba(255, 255, 255, .55);--pg-fg-faint: rgba(255, 255, 255, .38);--pg-accent: #4c538d}*{box-sizing:border-box}html,body{margin:0}body{background:var(--pg-bg);color:var(--pg-fg);font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}.pg{max-width:960px;margin:0 auto;padding:clamp(2rem,5vw,5rem) clamp(1rem,4vw,2rem) 4rem}.pg-hero{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}.pg-badges{display:flex;flex-wrap:wrap;gap:.5rem}.pg-badge{font-size:.7rem;letter-spacing:.02em;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--pg-border);color:var(--pg-fg-muted);background:var(--pg-bg-soft)}.pg-title{margin:0;font-size:clamp(2rem,6vw,3.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.05}.pg-title-accent{color:var(--pg-accent)}.pg-tagline{margin:0;max-width:38rem;font-size:clamp(1rem,2.5vw,1.2rem);color:var(--pg-fg-muted)}.pg-cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.pg-install{display:inline-flex;align-items:center;gap:.75rem;padding:.55rem .6rem .55rem .9rem;border:1px solid var(--pg-border);border-radius:8px;background:var(--pg-bg-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}.pg-install code{color:var(--pg-fg)}.pg-install code:before{content:"$ ";color:var(--pg-fg-faint)}.pg-copy{border:none;border-radius:5px;padding:.3rem .55rem;font:inherit;font-size:.72rem;cursor:pointer;color:var(--pg-fg-muted);background:#ffffff0f;transition:color .15s,background .15s}.pg-copy:hover{color:var(--pg-fg);background:#ffffff1f}.pg-link{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:8px;border:1px solid var(--pg-border);color:var(--pg-fg);text-decoration:none;font-size:.9rem;transition:border-color .15s,background .15s}.pg-link:hover{border-color:#ffffff40;background:var(--pg-bg-soft)}.pg-section{margin-top:clamp(2.5rem,6vw,4rem)}.pg-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.pg-section-head h2{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}.pg-section-head p{margin:0;font-size:.85rem;color:var(--pg-fg-faint)}.pg-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}.pg-feature{padding:1.1rem;border:1px solid var(--pg-border);border-radius:10px;background:var(--pg-bg-soft)}.pg-feature h3{margin:0 0 .35rem;font-size:.9rem;font-weight:600}.pg-feature p{margin:0;font-size:.82rem;color:var(--pg-fg-muted)}.pg-controls{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;padding:.9rem 1.1rem;margin-bottom:1.25rem;border:1px solid var(--pg-border);border-radius:10px;background:var(--pg-bg-soft)}.pg-toggle{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--pg-fg-muted);cursor:pointer;-webkit-user-select:none;user-select:none}.pg-toggle input{accent-color:var(--pg-accent);width:1rem;height:1rem;cursor:pointer}.pg-range{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--pg-fg-muted);-webkit-user-select:none;user-select:none}.pg-range input{accent-color:var(--pg-accent);cursor:pointer;width:7rem}.pg-range-value{font-variant-numeric:tabular-nums;color:var(--pg-fg-faint);min-width:2.75rem}.pg-swatches{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto}.pg-swatches span{font-size:.8rem;color:var(--pg-fg-faint)}.pg-swatch{width:1.25rem;height:1.25rem;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;transition:transform .15s}.pg-swatch:hover{transform:scale(1.15)}.pg-swatch.is-active{border-color:#fff}.pg-code-wrap{display:grid;grid-template-rows:0fr;opacity:0;margin-bottom:0;transition:grid-template-rows .35s cubic-bezier(.25,.1,.25,1),opacity .25s ease,margin-bottom .35s cubic-bezier(.25,.1,.25,1)}.pg-code-wrap.is-open{grid-template-rows:1fr;opacity:1;margin-bottom:1.25rem}.pg-code-inner{min-height:0;overflow:hidden}@media (prefers-reduced-motion: reduce){.pg-code-wrap{transition:none}}.pg-code{border:1px solid var(--pg-border);border-radius:10px;overflow:hidden;background:#0d0d10}.pg-code-bar{display:flex;align-items:center;gap:.75rem;padding:.5rem .6rem .5rem .9rem;border-bottom:1px solid var(--pg-border);background:var(--pg-bg-soft)}.pg-code-file{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--pg-fg-muted)}.pg-code-hint{margin-left:auto;font-size:.72rem;color:var(--pg-fg-faint)}.pg-code-body{margin:0;padding:1rem 1.1rem;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.6;color:var(--pg-fg);-moz-tab-size:2;tab-size:2}.pg-code-body code{font:inherit;white-space:pre}.c-comment{color:var(--pg-fg-faint);font-style:italic}.c-string{color:#9ece6a}.c-keyword{color:#bb9af7}.c-component{color:#7dcfff}.c-prop{color:#e0af68}.pg-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}.pg-thumb{position:relative;display:block;padding:0;border:none;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--pg-bg-soft);aspect-ratio:16 / 10}.pg-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .3s}.pg-thumb:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.35),transparent 55%);opacity:0;transition:opacity .3s}.pg-thumb:hover img{transform:scale(1.06)}.pg-thumb:hover:after{opacity:1}.pg-thumb:focus-visible{outline:2px solid var(--pg-accent);outline-offset:2px}.pg-footer{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--pg-border);font-size:.8rem;color:var(--pg-fg-faint)}.pg-footer a{color:var(--pg-fg-muted)}