:root{--bg:#050507;--surface:#0c0c10;--surface-2:#14141a;--line:#ffffff17;--line-strong:#ffffff38;--text:#f2f2f5;--muted:#f2f2f59e;--faint:#f2f2f566;--accent:#c7a6ff;--accent-2:#ff5fd2;--danger:#ff6b8b;--mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;--sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);margin:0}body{color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55}button,input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}code{font-family:var(--mono);background:#ffffff12;border-radius:4px;padding:.1em .35em;font-size:.9em}.page{min-height:100vh;position:relative}.nav{z-index:20;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#050507c7;height:56px;position:sticky;top:0}.nav__inner{justify-content:space-between;align-items:center;max-width:1280px;height:100%;margin:0 auto;padding:0 24px;display:flex}.brand{font-family:var(--mono);letter-spacing:.02em;align-items:center;gap:10px;font-size:14px;display:inline-flex}.brand__mark{border:1px solid var(--line-strong);width:26px;height:26px;color:var(--accent);border-radius:6px;place-items:center;display:grid}.nav__link{font-family:var(--mono);color:var(--muted);font-size:13px;text-decoration:none}.nav__link:hover{color:var(--text)}.hero{max-width:1280px;margin:0 auto;padding:44px 24px 28px}.hero__intro{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 40px;margin-bottom:24px;display:flex}.hero__title{font-family:var(--mono);letter-spacing:-.03em;margin:0;font-size:clamp(34px,5.2vw,60px);font-weight:500;line-height:1}.hero__accent{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text}.hero__sub{max-width:460px;color:var(--muted);margin:0}.stage{border:1px solid var(--line);background:#000;border-radius:14px;margin:0 auto;position:relative;overflow:hidden}.compare{cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.compare__pane{position:absolute;inset:0}.media-fill{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.compare__tag{z-index:3;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-strong);pointer-events:none;background:#0000008c;padding:5px 10px;font-size:11px;transition:opacity .2s;position:absolute;top:14px}.compare__tag--left{left:14px}.compare__tag--right{right:14px}.compare__divider{z-index:4;pointer-events:none;background:#fffc;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px);box-shadow:0 0 12px #ffffff59}.compare__handle{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;pointer-events:auto;cursor:ew-resize;background:#18161e8c;border:1px solid #ffffff8c;border-radius:50%;place-items:center;width:46px;height:46px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.looks{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.look{font-family:var(--mono);color:var(--muted);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;padding:9px 14px;font-size:13px;transition:color .15s,border-color .15s,background .15s}.look:hover{color:var(--text);border-color:var(--line-strong)}.look--on{color:var(--text);background:#ffffff0f;border-color:#ffffffd9}.bench{grid-template-columns:300px minmax(0,1fr);align-items:start;gap:24px;max-width:1280px;margin:0 auto;padding:8px 24px 56px;display:grid}.sourcebar{border:1px solid var(--line);background:var(--surface);border-radius:12px;gap:16px;padding:18px;display:grid;position:sticky;top:76px}.sourcebar__info{gap:4px;min-width:0;display:grid}.eyebrow{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-size:11px}.sourcebar__name{font-family:var(--mono);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.sourcebar__actions{flex-wrap:wrap;gap:8px;display:flex}.sourcebar__error{color:var(--danger);margin:0;font-size:13px}.sourcebar__hint{color:var(--faint);margin:0;font-size:12.5px}.btn{border:1px solid var(--line-strong);cursor:pointer;background:0 0;border-radius:8px;align-items:center;gap:8px;padding:8px 13px;font-size:13px;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover{background:#ffffff12}.btn--primary{color:#050507;background:#fff;border-color:#fff;justify-content:center;width:100%;font-weight:600}.btn--primary:hover{background:#ffffffe0}.btn--rec{border-color:var(--danger);color:var(--danger)}.dot{background:var(--danger);border-radius:50%;width:8px;height:8px}.btn--rec .dot{animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.25}}.controls{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;display:grid}.group{border:1px solid var(--line);background:var(--surface);border-radius:12px;min-width:0;margin:0;padding:18px}.group__title{float:left;width:100%;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;padding:0;font-size:11px}.ctl{clear:both;gap:7px;margin-bottom:15px;display:grid}.ctl:last-child{margin-bottom:0}.ctl--inline{grid-template-columns:1fr auto;align-items:center}.ctl__row{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.ctl__label{font-size:13px}.ctl__value,.ctl__hint{font-family:var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;font-size:12px;display:inline-flex}.ctl__pair{align-items:center;gap:8px;display:inline-flex}.chip{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);color:var(--faint);background:0 0;border-radius:4px;margin-right:8px;padding:1px 6px;font-size:10px}.chip--btn{cursor:pointer;color:var(--muted)}.chip--btn:hover{color:var(--text)}input[type=range]{--pct:50%;appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent) var(--pct), #ffffff1f var(--pct));border-radius:2px;height:4px}input[type=range]::-moz-range-track{background:linear-gradient(90deg, var(--accent) var(--pct), #ffffff1f var(--pct));border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:50%;width:14px;height:14px;margin-top:-5px;box-shadow:0 0 0 3px #c7a6ff40}input[type=range]::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:14px;height:14px}.select,.text{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px}.text{width:100%}.swatch{background:var(--surface-2);border:1px solid var(--line);cursor:pointer;border-radius:6px;width:34px;height:26px;padding:2px}.switch{appearance:none;cursor:pointer;background:#ffffff24;border-radius:10px;width:34px;height:20px;margin:0;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .15s;position:absolute;top:3px;left:3px}.switch:checked{background:var(--accent)}.switch:checked:after{transform:translate(14px)}.usage{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px;max-width:1280px;margin:0 auto;padding:56px 24px 88px;display:grid}.usage__title{font-family:var(--mono);letter-spacing:-.02em;margin:0 0 12px;font-size:26px;font-weight:500}.usage__text p{color:var(--muted);margin:0 0 16px}.usage__list{color:var(--muted);gap:8px;margin:0;padding-left:18px;display:grid}.code{border:1px solid var(--line);background:var(--surface);border-radius:12px;position:relative}.code pre{font-family:var(--mono);margin:0;padding:20px;font-size:13px;line-height:1.65;overflow-x:auto}.code pre code{background:0 0;padding:0}.code__copy{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--line-strong);cursor:pointer;border-radius:6px;padding:5px 10px;font-size:12px;position:absolute;top:12px;right:12px}.dropzone{z-index:100;font-family:var(--mono);pointer-events:none;background:#050507d1;border:2px dashed #ffffff73;border-radius:16px;place-items:center;font-size:20px;display:grid;position:fixed;inset:12px}@media (width<=900px){.hero{padding:28px 16px 20px}.bench{grid-template-columns:minmax(0,1fr);padding:8px 16px 40px}.sourcebar{position:static}.usage{grid-template-columns:minmax(0,1fr);gap:24px;padding:40px 16px 64px}.code pre{padding-top:52px}}