@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{color-scheme:light;font-family:IBM Plex Sans,system-ui,sans-serif;background:#f6f5f2;color:#1d1d1b}*{box-sizing:border-box;margin:0;padding:0}body{background:#f6f5f2;min-height:100vh}.app{padding:32px clamp(16px,4vw,48px) 32px;max-width:1400px;margin:0 auto;position:relative;min-height:100vh}.app-header{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between;margin-bottom:32px}h1{font-size:clamp(2.1rem,3.2vw,3.1rem);line-height:1.15;margin-bottom:8px}.subtitle{max-width:560px;color:#57554f;font-size:1rem}.version-badge{align-self:center;padding:6px 12px;border-radius:999px;background:#1d1d1b;color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}.layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,1.4fr);gap:24px;height:calc(100vh - 220px)}.panel{background:#fff;border-radius:24px;padding:24px;box-shadow:0 18px 45px #0c0a0714;display:flex;flex-direction:column;gap:20px;min-height:0}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-header h2{font-size:1.3rem}.count{background:#f0ede7;border-radius:999px;padding:4px 12px;font-size:.85rem;color:#6c6a62}.dropzone{position:relative;border:1.5px dashed #d7d1c6;border-radius:18px;padding:28px;background:#faf9f6;text-align:center;transition:border-color .2s ease,box-shadow .2s ease}.dropzone:hover{border-color:#9c998f;box-shadow:inset 0 0 0 1px #e5e0d5}.dropzone-content{pointer-events:none}.dropzone-title{font-weight:600;margin-bottom:4px}.dropzone-subtitle{font-size:.9rem;color:#6c6a62}.file-input{position:absolute;inset:0;opacity:0;cursor:pointer}.selectors{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}label span{display:block;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;color:#6c6a62}select{width:100%;border-radius:12px;border:1px solid #d6d0c5;padding:10px 12px;font-size:.95rem;background:#fff}.item-list{display:flex;flex-direction:column;gap:16px;overflow-y:auto;flex:1;padding-right:4px}.item-group{border:1px solid #eee9df;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;background:#fcfbf9}.item-group-header{display:flex;gap:12px;align-items:center}.badge{font-size:.7rem;font-weight:600;border-radius:999px;padding:4px 10px;text-transform:uppercase;letter-spacing:.08em}.group-name{font-weight:600}.group-meta{font-size:.85rem;color:#78736a}.item-group-list{display:flex;flex-direction:column;gap:10px}.item-row{border:1px solid transparent;background:#fff;border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.item-row:hover{border-color:#d0c7b6;background:#f7f4ee}.item-row.selected{border-color:#1d1d1b;background:#f0ede7;transform:translateY(-1px)}.item-type{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#6c6a62}.preview{min-height:680px}.preview-toolbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}.tabs{display:inline-flex;background:#f1eee8;border-radius:999px;padding:4px;gap:4px}.tabs button{border:none;background:transparent;padding:8px 16px;border-radius:999px;font-size:.9rem;cursor:pointer}.tabs button.active{background:#1d1d1b;color:#fff}.selection-label{text-align:right}.selection-label span{font-weight:600}.selection-label small{display:block;color:#6c6a62;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}.codes-controls,.excitebike-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.excitebike-controls label{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#6c6a62}.excitebike-controls input[type=range]{accent-color:#1d1d1b}.codes-controls label{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#6c6a62}.codes-controls input[type=range]{accent-color:#1d1d1b}.codes-zoom-buttons{display:flex;gap:6px}.preview-area{background:#f7f4ee;border-radius:18px;padding:20px;flex:1;min-height:0;overflow:auto}.preview-bg{display:flex;flex-direction:column;align-items:center;gap:12px}.preview-bg.preview-bg-codes{align-items:flex-start}.bg-preview-canvas{max-width:100%;height:auto;border-radius:14px;background:#0c0c0a;box-shadow:inset 0 0 0 1px #00000026;image-rendering:pixelated}.preview-bg:not(.preview-bg-codes) .bg-preview-canvas{border-radius:0;transform:translateZ(0)}.preview-bg.preview-bg-codes .bg-preview-canvas{max-width:none}.preview-excitebike .bg-preview-canvas{will-change:transform;backface-visibility:hidden}.preview-excitebike-wide{align-items:flex-start}.preview-excitebike-wide .bg-preview-canvas{max-width:none}.codes-modal{position:fixed;inset:0;background:#1118278c;display:flex;align-items:center;justify-content:center;padding:24px;z-index:20}.codes-modal-content{background:#f7f4ee;border-radius:20px;padding:20px;width:min(95vw,1600px);max-height:90vh;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 60px #0f172a59}.codes-modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.codes-modal-header h3{margin:0;font-size:1.2rem}.codes-modal-header p{margin:4px 0 0;color:#6c6a62;font-size:.85rem}.codes-modal-body{background:#efe8dd;border-radius:16px;padding:12px;overflow:auto;flex:1}.codes-modal-body .bg-preview-canvas{max-width:none}.bg-preview-error{margin:0;color:#b45309;font-size:.85rem}.excitebike-info{margin:0;color:#6c6a62;font-size:.85rem}.preview-text{font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.78rem;white-space:pre-wrap;word-break:break-word}.preview-text.preview-hex{font-size:.78rem;white-space:pre;word-break:normal;overflow-x:auto}.nav-buttons{display:flex;gap:8px}button{border:none;font-family:inherit}button.ghost{background:#f0ede7;padding:8px 14px;border-radius:999px;cursor:pointer}button.ghost:disabled{opacity:.4;cursor:not-allowed}.export-card{border-radius:18px;background:#f9f7f2;padding:20px;display:flex;flex-direction:column;gap:16px}.export-card h3{font-size:1.1rem;margin-bottom:4px}.export-card p{color:#6c6a62;font-size:.9rem}.export-controls{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;align-items:center}.export-controls select{grid-column:1;grid-row:1}.export-controls .primary{grid-column:2;grid-row:1;justify-self:end}.checkbox{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#5b584f;grid-column:1 / -1;grid-row:2}.primary{background:#1d1d1b;color:#fff;border-radius:12px;padding:10px 16px;cursor:pointer}.primary:disabled{opacity:.4;cursor:not-allowed}.empty-state{display:grid;gap:6px;color:#6c6a62;font-size:.9rem;padding:18px;text-align:center}.loader{position:fixed;inset:0;display:grid;place-items:center;background:#f5f3eecc;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20;padding:24px;color:#1d1d1b}.loader-content{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border-radius:20px;padding:24px 28px;box-shadow:0 16px 40px #0c0a071f;text-align:center;min-width:320px;max-width:420px}.loader p{font-size:.95rem;color:#4f4c45}.loader-messages{display:grid;gap:4px}.loader-messages p{margin:0}.loader-warning{font-size:.85rem;color:#8b857b}.loader-progress{font-size:.9rem;color:#5b584f}.spinner{width:40px;height:40px;border-radius:50%;border:3px solid #d6d0c5;border-top-color:#1d1d1b;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1024px){.layout{grid-template-columns:1fr;height:auto}.preview{min-height:auto}.preview-area{min-height:240px}.selectors,.export-controls{grid-template-columns:1fr}.export-controls .primary{grid-column:1;justify-self:stretch}}