*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0f0f1a;height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#root{height:100vh}.app{height:100vh;display:flex;overflow:hidden}.panel{background:#16162a;border-right:1px solid #2a2a4a;flex-direction:column;gap:16px;width:340px;min-width:340px;padding:24px 20px;display:flex;overflow-y:auto}.title{color:#fff;margin:0;font-size:24px;font-weight:600}.subtitle{color:#888;margin-top:-8px;font-size:13px}.section{flex-direction:column;gap:8px;display:flex}.section-header{justify-content:space-between;align-items:center;display:flex}.section-header label{color:#bbb;text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:600}.color-swatches{gap:6px;display:flex}.swatch{cursor:pointer;border:2px solid #444;border-radius:6px;width:24px;height:24px;padding:0;transition:all .15s}.swatch:hover{border-color:#888;transform:scale(1.1)}.swatch.active{border-color:#6366f1;box-shadow:0 0 0 2px #6366f166}.option-grid{flex-wrap:wrap;gap:6px;display:flex}.option-btn{color:#ccc;cursor:pointer;background:#1e1e38;border:1px solid #333;border-radius:6px;padding:6px 12px;font-size:12px;transition:all .15s}.option-btn:hover{background:#2a2a50;border-color:#555}.option-btn.active{color:#fff;background:#3a3a6a;border-color:#6366f1}.toggle{color:#ccc;cursor:pointer;align-items:center;gap:8px;padding:6px 0;font-size:13px;display:flex}.toggle input[type=checkbox]{accent-color:#6366f1;cursor:pointer;width:16px;height:16px}.toggle-hint{color:#666;font-size:11px}.stats{color:#aaa;background:#1e1e38;border-radius:8px;justify-content:space-between;padding:10px 14px;font-size:13px;display:flex}.export-section{flex-direction:column;gap:8px;display:flex}.export-btn{cursor:pointer;color:#fff;background:#6366f1;border:none;border-radius:8px;width:100%;padding:10px;font-size:14px;font-weight:600;transition:all .15s}.export-btn:hover{background:#5558e6}.export-btn.export-alt{color:#6366f1;background:#1e1e38;border:1px solid #6366f1}.export-btn.export-alt:hover{background:#2a2a50}.hint{color:#555;text-align:center;font-size:11px}.viewport{flex:1;position:relative;overflow:hidden}.viewport canvas{display:block;width:100%!important;height:100%!important}@media (width<=768px){.app{flex-direction:column}.panel{width:100%;min-width:unset;border-bottom:1px solid #2a2a4a;border-right:none;max-height:50vh}.viewport{min-height:50vh}}