:root[data-theme=light]{--primary:#667eea;--primary-dark:#764ba2;--bg-primary:#fff;--bg-secondary:#f5f5f5;--bg-tertiary:#efefef;--text-primary:#1a1a1a;--text-secondary:#666;--border:#e0e0e0;--gradient:linear-gradient(135deg,#667eea,#764ba2)}:root[data-theme=dark]{--primary:#8b9dff;--primary-dark:#a8b5ff;--bg-primary:#1a1a1a;--bg-secondary:#2d2d2d;--bg-tertiary:#3d3d3d;--text-primary:#fff;--text-secondary:#ccc;--border:#444;--gradient:linear-gradient(135deg,#2d2d3d,#1a1a2e)}*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--gradient);color:var(--text-primary);min-height:100vh;padding:20px;transition:background-color .3s ease,color .3s ease}button{background:var(--primary);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1em;cursor:pointer;transition:all .3s ease;font-weight:600}button:hover{background:var(--primary-dark);transform:translateY(-2px)}button:active{transform:translateY(0)}input[type=range]{accent-color:var(--primary)}*{transition:background-color .2s ease,color .2s ease,border-color .2s ease}@media (max-width:768px){body{padding:10px}}