.device-collection{perspective:800px;height:100%;transform-style:preserve-3d;--tilt:-5deg;position:relative}.device-collection[data-direction=right]{--tilt:-5deg}.device-collection[data-direction=left]{--tilt:5deg}.device-collection[data-direction=none]{--tilt:0deg}.device{transform:rotateY(var(--tilt)) rotateX(var(--rx,0deg)) translateZ(var(--tz,0px));transition:transform .4s;position:absolute}.device__canvas{width:100%;height:auto;display:block}.device.is-hovered{z-index:10;transform:rotateY(0)translateZ(120px)}.device[data-device=desktop]{z-index:1;--tz:0px;width:90%;bottom:15%;left:10%}.device[data-device=notebook]{z-index:2;--tz:40px;width:60%;bottom:0;left:0}.device[data-device=tablet]{z-index:3;--tz:50px;--rx:3deg;width:27%;bottom:10%;right:8%}.device[data-device=phone]{z-index:4;--tz:70px;--rx:3deg;width:22%;bottom:9%;right:0}.device-collection:not([data-devices~=desktop]) .device[data-device=notebook]{width:90%;bottom:0;left:0}.device-collection:not([data-devices~=desktop]) .device[data-device=tablet]{bottom:10%;right:6%}.device-collection:not([data-devices~=desktop]) .device[data-device=phone]{bottom:5%;right:0}.device-collection:not([data-devices~=notebook]) .device[data-device=tablet]{bottom:13%;left:8%;right:auto}.device-collection:not([data-devices~=notebook]) .device[data-device=phone]{bottom:12%;left:25%;right:auto}.device-collection:not([data-devices~=tablet]) .device[data-device=phone]{bottom:12%;left:75%;right:auto}.device-collection:not([data-devices~=phone]) .device[data-device=tablet]{bottom:11%;right:0}.device-collection:not([data-devices~=desktop]):not([data-devices~=notebook]) .device[data-device=tablet]{width:70%;bottom:5%;left:34%;right:auto}.device-collection:not([data-devices~=desktop]):not([data-devices~=notebook]) .device[data-device=phone]{width:70%;bottom:0;left:0;right:auto}.device-collection:not([data-devices~=desktop]):not([data-devices~=notebook]):not([data-devices~=tablet]) .device[data-device=phone]{width:90%;bottom:0;left:0}:root{--bg:#f6f7fb;--surface:#fff;--fg:#1a1a1a;--muted:#6b7280;--border:#e5e7eb;--accent:#2563eb;--accent-2:#7c3aed;--shadow:0 10px 30px -12px #0f172a40;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body.dark{--bg:#0b0b0f;--surface:#16161d;--fg:#f4f4f5;--muted:#9ca3af;--border:#26262e;--shadow:0 10px 30px -12px #0009;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), radial-gradient(1000px 500px at 0% 110%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 55%), var(--bg);min-height:100vh;color:var(--fg);flex-direction:column;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;transition:background .3s,color .3s;display:flex}.btn{font:inherit;cursor:pointer;border:1px solid #0000;border-radius:.6rem;align-items:center;gap:.45rem;padding:.5rem .95rem;font-weight:500;line-height:1;text-decoration:none;transition:background .15s,color .15s,border-color .15s,transform 50ms;display:inline-flex}.btn:active{transform:translateY(1px)}.btn__icon{font-size:.9em}.btn--ghost{color:var(--fg);border-color:var(--border);background:0 0}.btn--ghost:hover{background:color-mix(in srgb, var(--fg) 6%, transparent);border-color:color-mix(in srgb, var(--fg) 18%, transparent)}.btn--primary{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent-2));box-shadow:0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent)}.btn--primary:hover{filter:brightness(1.07)}.site-header{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--surface) 70%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,4vw,2.5rem);display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;color:var(--fg);align-items:center;gap:.55rem;font-size:1.05rem;font-weight:700;text-decoration:none;display:inline-flex}.brand__accent{color:var(--accent)}.brand__dot{background:linear-gradient(135deg, var(--accent), var(--accent-2));width:.7rem;height:.7rem;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);border-radius:50%}.site-nav{gap:.5rem;display:flex}main{flex:1;justify-content:center;align-items:center;min-height:0;padding:clamp(1rem,4vw,2.5rem);display:flex}.site-footer{border-top:1px solid var(--border);background:color-mix(in srgb, var(--surface) 70%, transparent);color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem clamp(1rem,4vw,2.5rem);font-size:.9rem;display:flex}.docs{border:1px solid var(--border);background:var(--surface);width:min(720px,92vw);max-height:85vh;color:var(--fg);box-shadow:var(--shadow);border-radius:1rem;padding:0;overflow:hidden}.docs::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0206178c}.docs__body{max-height:85vh;padding:1.5rem clamp(1.25rem,4vw,2rem);overflow-y:auto}.docs__head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.5rem;display:flex}.docs__head h2{margin:0;font-size:1.4rem}.docs__close{padding:.35rem .6rem}.docs h3{margin:1.4rem 0 .5rem;font-size:1.05rem}.docs p{color:var(--muted);line-height:1.6}.docs__hint{font-size:.9rem}.docs__live{color:var(--fg);background:color-mix(in srgb, var(--accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);border-radius:.6rem;padding:.6rem .85rem;font-size:.92rem}.docs a{color:var(--accent);font-weight:500}.docs code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}.docs :not(pre)>code{background:color-mix(in srgb, var(--fg) 8%, transparent);border-radius:.35rem;padding:.1em .4em}.docs pre{background:color-mix(in srgb, var(--fg) 6%, transparent);border:1px solid var(--border);border-radius:.6rem;margin:0;padding:1rem;overflow-x:auto}.docs__table{border-collapse:collapse;width:100%;font-size:.9rem}.docs__table td{border-top:1px solid var(--border);vertical-align:top;color:var(--muted);padding:.5rem}.docs__table td:first-child{white-space:nowrap;color:var(--fg)}.stage{aspect-ratio:16/15;width:auto;max-width:min(92vw,900px);height:min(68vh,560px);margin:0 auto}