@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root,[data-theme=dark]{--bg-page:#0d1117;--bg-card:#161b22;--bg-card-hover:#1c2128;--bg-code:#0d1117;--bg-badge:#1f2937;--text-primary:#e6edf3;--text-secondary:#8b949e;--text-muted:#6e7681;--text-code:#79c0ff;--border:#30363d;--border-subtle:#21262d;--accent-rail:#21262d;--accent-track:#6e94b4;--accent-handle:#9bbfd4;--accent-handle-active:#c0dff0;--accent-handle-disabled:#4a5568;--accent-track-disabled:#374151;--accent-tick:#4b5563;--accent-tick-label:#8b949e;--toggle-bg:#21262d;--toggle-border:#30363d;--toggle-icon:#c9d1d9;--glow-color:#9bbfd426;--shadow-card:0 1px 3px #0006, 0 8px 24px #0000004d}[data-theme=light]{--bg-page:#f6f8fa;--bg-card:#fff;--bg-card-hover:#f0f3f6;--bg-code:#f6f8fa;--bg-badge:#eef1f4;--text-primary:#1f2328;--text-secondary:#57606a;--text-muted:#6e7781;--text-code:#0550ae;--border:#d0d7de;--border-subtle:#e8ebef;--accent-rail:#d0d7de;--accent-track:#4a7a9b;--accent-handle:#607e9e;--accent-handle-active:#3d6082;--accent-handle-disabled:#9ca3af;--accent-track-disabled:#d1d5db;--accent-tick:#9ca3af;--accent-tick-label:#6b7280;--toggle-bg:#f6f8fa;--toggle-border:#d0d7de;--toggle-icon:#57606a;--glow-color:#4a7a9b1a;--shadow-card:0 1px 3px #00000014, 0 4px 12px #0000000f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--bg-page);color:var(--text-primary);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;transition:background-color .25s,color .25s}.demo-wrapper{max-width:1000px;margin:0 auto;padding:0 24px 80px}.demo-header{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:48px;padding:32px 0 28px;display:flex}.demo-title{letter-spacing:-.03em;font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800}.demo-title span{background:linear-gradient(135deg, var(--accent-handle) 0%, var(--accent-track) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.demo-subtitle{color:var(--text-secondary);margin-top:4px;font-size:.95rem}.section-heading{border-bottom:1px solid var(--border-subtle);align-items:center;gap:12px;margin:64px 0 32px;padding-bottom:12px;display:flex}.section-heading h2{color:var(--text-primary);font-size:1.25rem;font-weight:700}.section-level{text-transform:uppercase;letter-spacing:.05em;background:var(--bg-badge);color:var(--text-secondary);border-radius:4px;padding:2px 8px;font-size:.7rem;font-weight:700}.level-1{color:#10b981;border:1px solid #10b981}.level-2{color:#3b82f6;border:1px solid #3b82f6}.level-3{color:#a78bfa;border:1px solid #a78bfa}.level-4{color:#f59e0b;border:1px solid #f59e0b}.demo-gallery{gap:32px;display:grid}.demo-card{background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-card);border-radius:16px;flex-direction:column;padding:32px;transition:border-color .2s,box-shadow .2s,background .25s;display:flex}.card-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.card-title{font-size:1.1rem;font-weight:600}.card-badge{background:var(--bg-badge);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:.7rem;font-weight:600}.card-description{color:var(--text-secondary);margin-bottom:24px;font-size:.88rem}.card-theory{border-left:3px solid var(--accent-track);color:var(--text-secondary);background:#9bbfd40d;border-radius:0 4px 4px 0;margin-top:-12px;margin-bottom:24px;padding:12px 16px;font-size:.82rem}.value-display{flex-wrap:wrap;gap:8px;margin-bottom:20px;display:flex}.value-chip{background:var(--bg-badge);border:1px solid var(--border);color:var(--text-secondary);border-radius:6px;align-items:center;gap:6px;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:600;transition:all .2s;display:flex}.value-chip.active{border-color:var(--accent-track);color:var(--text-primary);background:#6e94b41a;box-shadow:0 0 10px #6e94b41a}.slider-container{width:100%;padding:40px 20px;position:relative}.slider-root{touch-action:none;width:100%;height:40px;position:relative}.rail-outer{cursor:pointer;z-index:3;width:100%;height:40px;position:absolute;top:50%;transform:translateY(-50%)}.rail-outer.vertical{width:40px;height:100%;top:auto;left:50%;transform:translate(-50%)}.rail-inner{background:var(--accent-rail);border-radius:4px;width:100%;height:8px;position:absolute;top:50%;transform:translateY(-50%)}.rail-inner.vertical{width:8px;height:100%;top:auto;left:50%;transform:translate(-50%)}.track{background:var(--accent-track);z-index:1;border-radius:4px;height:8px;position:absolute;top:50%;transform:translateY(-50%)}.track.vertical{width:8px;height:auto;top:auto;left:50%;transform:translate(-50%)}.handle-wrapper{z-index:5;cursor:grab;justify-content:center;align-items:center;width:32px;height:40px;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%)}.handle-wrapper.vertical{width:40px;height:32px;top:auto;left:50%;transform:translate(-50%,50%)}.handle-wrapper:active{cursor:grabbing}.handle-dot{background:var(--accent-handle);border:2px solid var(--bg-card);border-radius:50%;width:22px;height:22px;transition:all .15s;box-shadow:0 2px 6px #0003}.handle-wrapper:hover .handle-dot{background:var(--accent-handle-active);transform:scale(1.15)}.handle-tooltip{background:var(--bg-card);border:1px solid var(--accent-handle);opacity:0;pointer-events:none;white-space:pre-line;text-align:center;border-radius:4px;min-width:80px;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:.7rem;line-height:1.2;transition:opacity .15s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.vertical .handle-tooltip{bottom:50%;left:calc(100% + 8px);transform:translateY(50%)}.handle-wrapper:hover .handle-tooltip{opacity:1}.tick-wrapper{flex-direction:column;align-items:center;display:flex;position:absolute;top:calc(50% + 12px);transform:translate(-50%)}.tick-wrapper.vertical{flex-direction:row;top:auto;left:calc(50% + 12px);transform:translateY(50%)}.tick-mark{background:var(--accent-tick);width:1px;height:6px}.tick-wrapper.vertical .tick-mark{width:6px;height:1px}.tick-label{color:var(--accent-tick-label);margin-top:8px;font-family:JetBrains Mono,monospace;font-size:.65rem}.tick-wrapper.vertical .tick-label{margin-top:0;margin-left:8px}.skin-ios .rail-inner{background:#d1d1d6;height:2px}.skin-ios .rail-inner.vertical{width:2px;height:100%}.skin-ios .track{background:#007aff;height:2px}.skin-ios .track.vertical{width:2px;height:auto}.skin-ios .handle-dot{background:#fff;border:.5px solid #0000001a;width:28px;height:28px;box-shadow:0 3px 8px #00000026,0 1px 1px #0000000d}.skin-ios .handle-wrapper:hover .handle-dot{background:#fff;transform:scale(1.02)}.skin-cyberpunk .rail-inner{background:#1a1a1a;border:1px solid #00f2ff;height:4px;box-shadow:0 0 10px #00f2ff33}.skin-cyberpunk .rail-inner.vertical{width:4px;height:100%}.skin-cyberpunk .track{background:linear-gradient(90deg,#f0f,#00f2ff);height:4px;box-shadow:0 0 15px #ff00ff80}.skin-cyberpunk .track.vertical{background:linear-gradient(#00f2ff,#f0f);width:4px;height:auto}.skin-cyberpunk .handle-dot{background:#00f2ff;border:none;border-radius:0;width:20px;height:20px;transform:rotate(45deg);box-shadow:0 0 15px #00f2ff}.skin-cyberpunk .handle-wrapper:hover .handle-dot{background:#fff;transform:rotate(45deg)scale(1.3);box-shadow:0 0 25px #00f2ff}.skin-cyberpunk .handle-tooltip{color:#00f2ff;text-transform:uppercase;letter-spacing:.1em;background:#000;border-color:#f0f}.skin-material .rail-inner{background:#e0e0e0;border-radius:0;height:4px}.skin-material .rail-inner.vertical{width:4px;height:100%}.skin-material .track{background:#6200ee;border-radius:0;height:4px}.skin-material .track.vertical{width:4px;height:auto}.skin-material .handle-dot{width:14px;height:14px;box-shadow:none;background:#6200ee;border:none}.skin-material .handle-wrapper:after{content:"";opacity:0;background:#6200ee;border-radius:50%;width:40px;height:40px;transition:opacity .2s,transform .2s;position:absolute;transform:scale(0)}.skin-material .handle-wrapper:hover:after{opacity:.1;transform:scale(1)}.skin-material .handle-wrapper:active:after{opacity:.2;transform:scale(1.2)}.skin-bootstrap .rail-inner{background:#dee2e6;border-radius:.375rem;height:8px}.skin-bootstrap .rail-inner.vertical{width:8px;height:100%}.skin-bootstrap .track{background:#0d6efd;border-radius:.375rem;height:8px}.skin-bootstrap .track.vertical{width:8px;height:auto}.skin-bootstrap .handle-dot{width:1rem;height:1rem;box-shadow:none;background:#0d6efd;border:none;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.skin-bootstrap .handle-wrapper:focus .handle-dot{box-shadow:0 0 0 .25rem #0d6efd40}.skin-mobile .rail-inner{background:var(--bg-badge);border:1px solid var(--border);border-radius:6px;height:12px}.skin-mobile .track{background:linear-gradient(90deg, var(--accent-track), var(--accent-handle));border-radius:6px;height:12px}.skin-mobile .handle-wrapper{width:44px;height:44px}.skin-mobile .handle-dot{border:2px solid var(--accent-track);background:#fff;width:32px;height:32px;box-shadow:0 4px 12px #0003}.skin-mobile .handle-wrapper:active .handle-dot{background:var(--accent-handle-active);transform:scale(1.2)}.skin-mobile .handle-tooltip{border-width:2px;padding:8px 12px;font-size:.85rem;bottom:calc(100% + 15px)}.theme-toggle{border:1px solid var(--border);background:var(--toggle-bg);color:var(--text-primary);cursor:pointer;border-radius:20px;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:500;display:flex}.theme-toggle:hover{border-color:var(--accent-handle)}.theme-toggle svg{width:16px;height:16px}.demo-footer{border-top:1px solid var(--border);text-align:center;color:var(--text-muted);margin-top:100px;padding:40px 0;font-size:.85rem}.demo-footer a{color:var(--accent-handle);font-weight:500;text-decoration:none}.demo-footer a:hover{text-decoration:underline}.code-block{background:var(--bg-code);border:1px solid var(--border);color:var(--text-secondary);border-radius:12px;margin-top:20px;padding:20px;font-family:JetBrains Mono,monospace;font-size:.75rem;line-height:1.5;overflow-x:auto}.skin-shifter-controls{flex-wrap:wrap;gap:8px;margin-bottom:24px;display:flex}.skin-btn{border:1px solid var(--border);background:var(--bg-badge);color:var(--text-secondary);cursor:pointer;border-radius:8px;padding:6px 16px;font-size:.85rem;font-weight:600;transition:all .2s}.skin-btn:hover{border-color:var(--accent-handle);color:var(--text-primary)}.skin-btn.active{background:var(--accent-handle);color:#000;border-color:var(--accent-handle)}@media (width<=600px){.demo-wrapper{padding:0 16px 40px}.demo-card{padding:24px 16px}.demo-header{flex-direction:column;align-items:flex-start}}