:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f172a;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}a body{min-width:320px;min-height:100vh;margin:0;padding:0}: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}.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}.apply-btn:hover{background:#2563eb}table{border-collapse:collapse;width:100%}th{text-align:left;border-bottom:1px solid #334155;padding:8px;font-size:13px}td{border-bottom:1px solid #ffffff0d;padding:8px;font-size:13px}