:root{--ui-bg:#0f1216;--ui-panel:#171b21;--ui-panel-2:#1e242c;--ui-border:#2a313b;--ui-text:#e6e9ee;--ui-text-dim:#97a0ad;--ui-accent:#5b8bff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--ui-bg);height:100%;color:var(--ui-text);margin:0;font-family:Inter,system-ui,-apple-system,sans-serif}.app{grid-template-rows:auto 1fr;height:100vh;display:grid;overflow:hidden}.topbar{background:var(--ui-panel);border-bottom:1px solid var(--ui-border);align-items:center;gap:1rem;padding:.55rem 1rem;display:flex}.topbar h1{letter-spacing:-.01em;margin:0;font-size:.95rem;font-weight:700}.topbar h1 span{color:var(--ui-text-dim);font-weight:400}.topbar .spacer{flex:1}.panes{grid-template-columns:360px 1fr minmax(320px,.85fr);min-height:0;display:grid}.sidebar{background:var(--ui-panel);border-right:1px solid var(--ui-border);min-height:0;padding:0 0 2rem;overflow-y:auto}.brandbar{border-bottom:1px solid var(--ui-border);background:var(--ui-panel);z-index:2;align-items:center;gap:.35rem;padding:.55rem .75rem;display:flex;position:sticky;top:0}.brandbar select{background:var(--ui-panel-2);border:1px solid var(--ui-border);min-width:0;color:var(--ui-text);font:inherit;border-radius:6px;flex:1;padding:.3rem .4rem;font-size:.8rem}.brandbar .btn{padding:.3rem .5rem}.preview-pane{border-right:1px solid var(--ui-border);background:#fff;min-width:0;min-height:0;overflow:hidden}.code-pane{background:#12151a;grid-template-rows:auto 1fr;min-width:0;min-height:0;display:grid;overflow:hidden}.code-head{border-bottom:1px solid var(--ui-border);text-transform:uppercase;letter-spacing:.08em;color:var(--ui-text-dim);align-items:center;gap:.5rem;padding:.4rem .75rem;font-size:.72rem;display:flex}details.panel{border-bottom:1px solid var(--ui-border)}details.panel>summary{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:.65rem 1rem;font-size:.82rem;font-weight:600;list-style:none;display:flex}details.panel>summary::-webkit-details-marker{display:none}details.panel>summary:after{content:"▾";color:var(--ui-text-dim)}details.panel[open]>summary:after{content:"▴"}.panel-body{flex-direction:column;gap:.6rem;padding:.25rem 1rem .9rem;display:flex}.field{color:var(--ui-text-dim);grid-template-columns:1fr auto;align-items:center;gap:.5rem;font-size:.8rem;display:grid}.field input[type=number],.field input[type=text],.field select{background:var(--ui-panel-2);border:1px solid var(--ui-border);color:var(--ui-text);font:inherit;border-radius:6px;width:100%;max-width:170px;padding:.3rem .45rem;font-size:.78rem}.field input[type=color]{border:1px solid var(--ui-border);background:0 0;border-radius:6px;width:34px;height:26px;padding:0}.color-row{grid-template-columns:1fr auto auto;align-items:center;gap:.5rem;font-size:.8rem;display:grid}.color-row .name{align-items:center;gap:.45rem;display:flex}.color-row .name input[type=checkbox]{accent-color:var(--ui-accent)}.color-row.is-off .name{opacity:.45}.swatches-mini{gap:2px;margin-top:2px;display:flex}.swatches-mini i{border-radius:2px;width:14px;height:10px;display:block}button.btn,a.btn{background:var(--ui-panel-2);border:1px solid var(--ui-border);color:var(--ui-text);font:inherit;cursor:pointer;border-radius:7px;align-items:center;gap:.35rem;padding:.38rem .7rem;font-size:.78rem;font-weight:600;text-decoration:none;display:inline-flex}button.btn:hover,a.btn:hover{border-color:var(--ui-accent)}button.btn.primary{background:var(--ui-accent);border-color:var(--ui-accent);color:#07101f}.seg{border:1px solid var(--ui-border);border-radius:7px;display:inline-flex;overflow:hidden}.seg button{background:var(--ui-panel-2);color:var(--ui-text-dim);font:inherit;cursor:pointer;border:0;padding:.34rem .6rem;font-size:.76rem}.seg button.active{background:var(--ui-accent);color:#07101f;font-weight:600}.switch{color:var(--ui-text-dim);align-items:center;gap:.4rem;font-size:.78rem;display:inline-flex}.overlay{z-index:50;background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}.modal{background:var(--ui-panel);border:1px solid var(--ui-border);border-radius:12px;width:min(680px,92vw);padding:1.25rem;box-shadow:0 20px 60px #00000080}.modal h2{margin:0 0 .4rem;font-size:1rem}.modal p{color:var(--ui-text-dim);margin:0 0 .75rem;font-size:.82rem;line-height:1.5}.modal textarea{resize:vertical;background:var(--ui-bg);border:1px solid var(--ui-border);width:100%;height:280px;color:var(--ui-text);border-radius:8px;padding:.6rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.modal-actions{justify-content:flex-end;gap:.5rem;margin-top:.75rem;display:flex}.toast{background:var(--ui-panel-2);border:1px solid var(--ui-accent);color:var(--ui-text);z-index:60;border-radius:8px;padding:.55rem .9rem;font-size:.8rem;position:fixed;bottom:1rem;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0006}