*{box-sizing:border-box;font-family:Inter,system-ui,sans-serif}body{margin:0;background:#0f172a;color:#e2e8f0}.app{max-width:1100px;margin:0 auto;padding:24px}header{margin-bottom:20px}.info-box{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:.875rem;color:#94a3b8;display:flex;flex-direction:column;gap:4px}.info-box p{margin:0;line-height:1.5}.info-box strong{color:#e2e8f0}.info-box a{color:#38bdf8;text-decoration:none}.info-box a:hover{text-decoration:underline}.info-beta,.info-beta strong{color:#fbbf24}.header-banner{display:block;width:100%;border-radius:10px;margin-bottom:16px;object-fit:cover}.preview-panel{margin-bottom:16px;align-items:center}.preview-svg{width:100%;max-width:540px;height:auto;display:block}.layout{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:16px}.panel{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:background .15s ease,border-color .15s ease}.panel:not(.preview-panel):focus-within,.panel:not(.preview-panel).panel-active{background:#1a2f4a;border-color:#3b6090}label{display:flex;flex-direction:column;gap:6px;font-size:14px}input{border-radius:6px;border:1px solid #475569;background:#0f172a;color:#e2e8f0;padding:8px}button{margin-top:8px;border:0;border-radius:8px;padding:10px;background:#22c55e;color:#052e16;font-weight:600;cursor:pointer}button:disabled{background:#64748b;color:#cbd5e1;cursor:not-allowed}.list{display:grid;gap:8px;max-height:280px;overflow:auto;padding-right:6px}.list-item{display:flex;flex-direction:row;align-items:center;gap:8px}.size-badge{margin-left:auto;font-size:.75rem;opacity:.55;font-variant-numeric:tabular-nums}.tree{display:flex;flex-direction:column;max-height:420px;overflow-y:auto;padding-right:4px}.tree-group,.tree-children{display:flex;flex-direction:column}.tree-node{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:5px;-webkit-user-select:none;user-select:none}.tree-node:hover{background:#273549}.tree-level-0{font-weight:600;font-size:14px}.tree-level-1{padding-left:22px;font-size:14px}.tree-level-2{padding-left:44px;font-size:13px}.tree-toggle{margin-top:0;background:none;border:none;color:#64748b;cursor:pointer;padding:0;font-size:9px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:transform .15s,color .1s;flex-shrink:0}.tree-toggle:hover{background:none;color:#e2e8f0}.tree-toggle.expanded{transform:rotate(90deg)}.tree-label{flex:1}.tree-count{font-size:11px;opacity:.4;font-variant-numeric:tabular-nums}.store-link{color:inherit;text-decoration:underline;text-decoration-color:#e2e8f04d;text-underline-offset:4px}.store-link:hover{text-decoration-color:#e2e8f0a6}.panel-subtitle{margin:-14px 0 0;font-size:12px;color:#94a3b8}.options-heading{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.45;margin-top:10px}.error{color:#fca5a5}.line2-field{display:flex;flex-direction:column;gap:6px;font-size:14px}.line2-label-row{display:flex;align-items:center;justify-content:space-between}.mode-toggle{display:flex;border:2px solid #334155;border-radius:6px;overflow:hidden}.mode-toggle button{margin:0;padding:3px 10px;background:#0f172a;border:none;border-radius:0;color:#64748b;font-size:12px;font-weight:500;cursor:pointer;transition:background .1s,color .1s}.mode-toggle button+button{border-left:2px solid #334155}.mode-toggle button:hover:not(.active){background:#1e293b;color:#e2e8f0}.mode-toggle button.active{background:#14532d;color:#86efac}.width-selector{display:flex;align-items:center;justify-content:space-between;font-size:14px}.symbol-section{display:flex;flex-direction:column;gap:6px;font-size:14px}.symbol-picker{display:flex;flex-wrap:wrap;gap:8px}.symbol-item{margin-top:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;width:76px;background:#0f172a;border:2px solid #334155;border-radius:8px;cursor:pointer;color:#94a3b8;font-size:12px;font-weight:400;transition:border-color .1s,color .1s}.symbol-item img{width:40px;height:40px;object-fit:contain;filter:invert(1)}.symbol-item:hover:not(.selected){border-color:#64748b;color:#e2e8f0}.symbol-item.selected{border-color:#22c55e;color:#e2e8f0}@media(max-width:800px){.layout{grid-template-columns:1fr}}