:root{font-family:Manrope,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--primary: #6366f1;--primary-hover: #4f46e5;--text-primary: #0f172a;--text-secondary: #64748b;--input-bg: #f8fafc;--border-color: #e2e8f0;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background-color:#f8fafc}a{font-weight:500;color:var(--primary);text-decoration:inherit;transition:color .2s}a:hover{color:var(--primary-hover)}h1{font-size:2.5rem;line-height:1.2;font-weight:700;margin-bottom:.5rem}button{border-radius:12px;border:1px solid transparent;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;font-family:inherit;background-color:var(--primary);color:#fff;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);width:100%}button:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}button:active{transform:translateY(0)}input{width:100%;padding:.875rem 1rem;background:var(--input-bg);border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-size:1rem;transition:all .2s;box-sizing:border-box}input:focus{outline:none;border-color:var(--primary);background:#ffffff14;box-shadow:0 0 0 4px #6366f11a}.glass-card{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:24px;padding:3rem;box-shadow:0 25px 50px -12px #00000080}@media(prefers-color-scheme:light){:root{--bg-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);--glass: rgba(255, 255, 255, .7);--glass-border: rgba(0, 0, 0, .05);--text-primary: #0f172a;--text-secondary: #64748b}input{background:#fff;color:#0f172a}inputValue:focus{background:#fff}.glass-card{box-shadow:0 25px 50px -12px #0000001a}}#root{width:100%;min-height:100vh}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}