:root{--text:#1e1e2e;--text-h:#1e1e2e;--bg:#f8f8fc;--card-bg:#fff;--card-border:#e8e8ef;--input-bg:#f2f2f8;--accent:#6366f1;--shadow-subtle:0 1px 3px #0000000a;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--text:#cdd6f4;--text-h:#cdd6f4;--bg:#1e1e2e;--card-bg:#262637;--card-border:#363650;--input-bg:#313148}}*{box-sizing:border-box;margin:0;padding:0}#root{flex-direction:column;min-height:100svh;display:flex}.scroll-counter{font-variant-numeric:tabular-nums;color:inherit;align-items:center;transition:color .4s;display:inline-flex}.scroll-counter.sc-animating{animation:sc-color-pulse var(--dur) ease-in-out}@keyframes sc-color-pulse{0%{color:var(--color-from)}50%{color:var(--color-to)}to{color:var(--color-from)}}.sc-static{flex-shrink:0;height:1.25em;line-height:1.25em;display:inline-block}.sc-comma{text-align:center;min-width:.4em}.sc-dot{text-align:center;min-width:.3em}.sc-digit-wrapper{text-align:center;flex-shrink:0;min-width:.64em;height:1.25em;line-height:1.25em;display:inline-block;overflow:hidden}.sc-digit-strip{will-change:transform;transform:translateY(var(--from-y,0));flex-direction:column;display:inline-flex}.sc-digit-strip.sc-animate{animation:sc-roll var(--dur) cubic-bezier(.23, 1, .32, 1) var(--delay,0s) both}@keyframes sc-roll{0%{transform:translateY(var(--from-y))}to{transform:translateY(var(--to-y))}}.sc-digit{flex-shrink:0;height:1.25em;line-height:1.25em;display:block}.app{flex-direction:column;gap:32px;max-width:800px;margin:0 auto;padding:40px 24px 80px;display:flex}.app-title{text-align:center;letter-spacing:-1px;background:linear-gradient(135deg,#6366f1,#ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:40px;font-weight:700}.app-subtitle{text-align:center;opacity:.5;margin:-16px 0 0;font-size:15px}.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:32px}.hero-card{text-align:center;flex-direction:column;align-items:center;gap:28px;display:flex}.hero-counter{flex-direction:column;align-items:center;gap:8px;display:flex}.hero-counter__label{text-transform:uppercase;letter-spacing:2px;opacity:.5;font-size:13px}.hero-counter .scroll-counter{letter-spacing:-2px;font-variant-numeric:tabular-nums;font-size:64px;font-weight:700}.examples-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;display:grid}.example-card{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.example-label{text-transform:uppercase;letter-spacing:1.5px;opacity:.45;font-size:12px}.example-card .scroll-counter{font-variant-numeric:tabular-nums;font-size:32px;font-weight:700}.playground{flex-direction:column;gap:24px;display:flex}.playground-title{margin:0;font-size:18px;font-weight:600}.playground-display{text-align:center;border-radius:12px;padding:24px}.playground-counter{letter-spacing:-1px;font-weight:700;font-size:56px!important}.controls-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.control{opacity:.7;flex-direction:column;gap:6px;font-size:13px;display:flex}.control input[type=number],.control input[type=text]{border:1px solid var(--card-border);background:var(--input-bg);color:inherit;border-radius:8px;padding:8px 12px;font-family:inherit;font-size:14px}.control input[type=range]{accent-color:#6366f1}.range-value{text-align:right;opacity:.6;font-size:12px}.control-checkbox{flex-direction:row;grid-column:1/-1;align-items:center;gap:10px}.control-checkbox input[type=checkbox]{accent-color:#6366f1;width:18px;height:18px}.btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;padding:10px 28px;font-family:inherit;font-size:15px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f159}.btn-accent{color:#fff;background:linear-gradient(135deg,#ec4899,#f43f5e)}.btn-accent:hover{transform:translateY(-1px);box-shadow:0 6px 20px #ec489959}.btn-ghost{border:1px solid var(--card-border);color:inherit;background:0 0}.btn-ghost:hover{background:var(--input-bg)}.playground .btn{flex-direction:row;gap:8px}@media (width<=600px){.app{gap:24px;padding:24px 16px 60px}.app-title{font-size:28px}.hero-counter .scroll-counter{font-size:40px}.example-card .scroll-counter{font-size:24px}.playground-counter{font-size:36px!important}.controls-grid{grid-template-columns:1fr}.playground{flex-wrap:wrap;gap:12px;display:flex}}