:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffde;background-color:#0f172a;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5}body{margin:0;padding:0}.navbar{background:#1e293b;border-bottom:1px solid #334155;padding:20px;font-size:20px;font-weight:600}.wrapper{grid-template-columns:1fr 1fr;gap:20px;height:calc(100vh - 80px);padding:20px;display:grid}.sidebar-left{flex-direction:column;gap:20px;display:flex;overflow-y:auto}.section{background:#1f2937;border:1px solid #334155;border-radius:10px;padding:14px}.section h2{border-bottom:1px solid #ffffff26;margin:0 0 12px;padding-bottom:6px;font-size:16px}.method{background:#374151;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px 12px;display:flex}.method button{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:6px;width:80px;padding:4px 10px;font-size:12px;transition:all .25s}.method button:hover{background:#2563eb}.output-panel{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:20px;overflow-y:auto}.output-panel h2{border-bottom:1px solid #334155;margin-top:0;padding-bottom:8px;font-size:20px}.clear-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:6px;padding:4px 12px;transition:all .25s}.clear-btn:hover{background:#2563eb}.output-desc{opacity:.9;margin-bottom:20px;font-size:14px}.preview-box{background:#0f172a;border:1px solid #334155;border-radius:8px;margin-bottom:20px;padding:15px}.code-box{white-space:pre-wrap;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:15px;font-size:13px}.css-editor{color:#fff;background:#0f172a;border:1px solid #334155;border-radius:8px;width:100%;height:80px;margin-top:10px;padding:10px}.apply-btn{cursor:pointer;background:#3b82f6;border:none;border-radius:6px;margin-top:10px;padding:6px 16px;transition:all .25s}.apply-btn:hover{background:#2563eb}#root{text-align:center;max-width:1280px;margin:0 auto;padding:2rem}.logo{will-change:filter;height:6em;padding:1.5em;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:20s linear infinite logo-spin}}.card{padding:2em}.read-the-docs{color:#888}