:root{--primary: #3b82f6;--primary-dark: #2563eb;--success: #22c55e;--danger: #ef4444;--bg: #f8fafc;--bg-card: #ffffff;--text: #1e293b;--text-muted: #64748b;--border: #e2e8f0;--radius: 8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}.container{max-width:900px;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:3rem}header h1{font-size:2.5rem;margin-bottom:.5rem}header p{color:var(--text-muted);font-size:1.25rem}.demo-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem}.demo-section h2{font-size:1.25rem;margin-bottom:.5rem;color:var(--text)}.demo-section>p{font-size:.875rem;color:var(--text-muted);margin-bottom:1rem}.demo-section code{background:#f1f5f9;padding:.125rem .375rem;border-radius:4px;font-size:.8125rem}footer{text-align:center;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);color:var(--text-muted)}button{cursor:pointer;border:none;padding:.5rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;transition:all .2s}button.primary{background:var(--primary);color:#fff}button.primary:hover{background:var(--primary-dark)}button.secondary{background:#e2e8f0;color:var(--text)}button.secondary:hover{background:#cbd5e1}input[type=text],input[type=number],input[type=range]{border:1px solid var(--border);border-radius:var(--radius);padding:.5rem .75rem;font-size:.875rem;outline:none;transition:border-color .2s}input[type=text]:focus,input[type=number]:focus{border-color:var(--primary)}input[type=range]{width:100%;padding:0}