:root{--color-bg: #040404;--color-surface: #0a0a0a;--color-surface-2: #0f0f0f;--color-border: #1a1a1a;--color-border-mid: #222;--color-border-light: #333;--color-text: #f0f0f0;--color-text-strong: #f8f6f0;--color-muted: #666;--color-muted-2: #555;--color-muted-3: #3a3a3a;--color-muted-4: #444;--color-muted-5: #888;--color-muted-6: #2a2a2a;--color-accent: #eb6f46;--color-accent-bg: rgba(235, 111, 70, .06);--color-accent-bg-2: rgba(235, 111, 70, .08);--color-accent-bg-badge: rgba(235, 111, 70, .15);--color-standard-bg: rgba(248, 246, 240, .04);--color-standard-bg-badge: rgba(248, 246, 240, .1);--color-processing: #ffb400;--color-done: #4caf50;--color-error: #eb6f46;--font-primary: "JetBrains Mono", monospace;--font-secondary: "Geist", sans-serif;--text-xs: 9px;--text-sm: 10px;--text-base: 11px;--text-md: 12px;--text-lg: 13px;--text-xl: 1.5rem;--text-icon: 28px}*{box-sizing:border-box;margin:0;padding:0;text-wrap:balance}html{scrollbar-gutter:stable}body{font-family:var(--font-primary);background:var(--color-bg);color:var(--color-text);padding:28px 32px;min-height:100vh;max-width:920px;margin:auto}.small-screen-wall{display:none;position:fixed;inset:0;z-index:9999;background:var(--color-bg);align-items:center;justify-content:center;text-align:center;padding:32px}.small-screen-msg{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:280px}.small-screen-emoji{font-size:2.5rem;line-height:1}.small-screen-msg p{font-size:var(--text-md);font-weight:600;color:var(--color-text);line-height:1.5}.small-screen-sub{color:var(--color-muted)!important;font-weight:500!important}@media(max-width:768px){.small-screen-wall{display:flex}}.version{position:fixed;top:8px;left:12px;font-size:var(--text-xs);font-weight:600;color:var(--color-muted-3);letter-spacing:.06em;text-transform:uppercase;pointer-events:none}.header-title{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:20px;h1{text-transform:none}}h1{font-size:var(--text-xl);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-strong);text-align:center}.header-subheading{font-size:.75rem;color:var(--color-muted);font-weight:600}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--color-border);margin-bottom:20px}.tab-btn{font-family:var(--font-primary);background:none;border:none;color:var(--color-muted-2);padding:10px 14px;font-size:var(--text-base);font-weight:800;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.tab-btn:hover{color:var(--color-text)}.tab-btn.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.tab-panel{display:none}.tab-panel.active{display:block}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 20px;border:2px dashed var(--color-border-mid);border-radius:14px;text-align:center;cursor:pointer;transition:all .15s ease;min-height:160px;background:var(--color-surface);margin-bottom:16px}.drop-zone:hover{border-color:var(--color-muted-4);background:#111}.drop-zone.dragover,.drop-zone:hover{border-color:var(--color-accent);background:var(--color-accent-bg)}.drop-zone .icon{font-size:var(--text-icon);opacity:.6}.drop-zone .title{font-size:var(--text-lg);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent)}.drop-zone .desc{font-size:var(--text-base);font-weight:500;color:var(--color-muted);max-width:72ch;line-height:1.5}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-header h2{font-size:var(--text-md);font-weight:800;color:var(--color-muted);text-transform:uppercase;letter-spacing:.12em}.btn svg,h2 svg{vertical-align:bottom;display:inline-block}.btn{font-family:var(--font-secondary);font-size:var(--text-sm);font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:none;color:var(--color-muted-2);border:1px solid var(--color-border-mid);border-radius:6px;padding:6px 12px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.btn:hover{color:var(--color-accent);border-color:var(--color-accent)}.btn.primary{color:var(--color-accent);border-color:var(--color-accent);background:var(--color-accent-bg)}.btn.primary:hover{background:var(--color-accent-bg-2)}.btn:disabled{opacity:.35;cursor:not-allowed}.row{display:grid;align-items:center;gap:12px;padding:12px 16px;background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:10px;font-size:var(--text-md);margin-bottom:6px;border-left:4px solid var(--color-border-light)}.row.accent{border-left-color:var(--color-accent)}.row .badge{font-size:var(--text-sm);font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:6px;white-space:nowrap;background:var(--color-accent-bg-badge);color:var(--color-accent)}.row .label,.row input[type=text],.row input[type=number]{font-family:var(--font-primary);font-weight:700}.row input[type=text],.row input[type=number]{background:var(--color-surface);border:2px solid var(--color-border-light);color:var(--color-text-strong);padding:4px 8px;border-radius:6px;font-size:var(--text-md)}.row input[type=text]:focus,.row input[type=number]:focus{outline:none;border-color:var(--color-accent)}.muted{color:var(--color-muted);font-size:var(--text-base);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.empty{padding:24px;text-align:center;color:var(--color-border-light);font-size:var(--text-md);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.swatch{width:28px;height:28px;border-radius:6px;border:1px solid var(--color-border-light);flex-shrink:0}.swatch.sm{width:18px;height:18px;border-radius:4px}.row.asset{grid-template-columns:auto 1fr auto}.detected-colors{display:flex;gap:4px;flex-wrap:wrap}.row.color{grid-template-columns:auto 1fr 110px 170px 90px auto}.row.mapping{grid-template-columns:auto auto 1fr auto}.row select{font-family:var(--font-primary);background:var(--color-surface);color:var(--color-text-strong);border:2px solid var(--color-border-light);border-radius:6px;padding:5px 10px;font-size:var(--text-base);font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.row select:focus{outline:none;border-color:var(--color-accent)}.mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}.mode-card{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:10px;cursor:pointer;font-size:var(--text-md);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted-2);transition:all .15s}.mode-card:hover{border-color:var(--color-muted-4);color:var(--color-text)}.mode-card.active{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-bg)}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:12px}.preview-card{background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;align-items:center}.preview-card .checker{width:100%;aspect-ratio:1 / 1;background-color:#fff;background-image:linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}.preview-card .checker.dark{background-color:#222;background-image:linear-gradient(45deg,#333 25%,transparent 25%),linear-gradient(-45deg,#333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333 75%),linear-gradient(-45deg,transparent 75%,#333 75%)}.preview-card .checker svg{max-width:100%;max-height:100%;display:block}.preview-card .cap{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted-5);text-align:center}.log{font-size:var(--text-base);font-weight:600;color:var(--color-muted-5);background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:10px;padding:14px;max-height:220px;overflow:auto;white-space:pre-wrap;margin-top:12px}.log .ok{color:var(--color-done)}.log .err{color:var(--color-error)}.icon-btn{background:none;border:none;color:var(--color-muted-2);cursor:pointer;font-size:var(--text-md);font-weight:800;padding:4px 8px;border-radius:5px;border:1px solid var(--color-border-light);transition:color .15s,border-color .15s}.icon-btn:hover{color:var(--color-accent);border-color:var(--color-accent)}.helper{font-family:var(--font-secondary);font-size:var(--text-base);color:var(--color-muted);margin-bottom:12px;font-weight:500;line-height:1.5}.naming-template{margin-bottom:14px}.naming-template>label{display:block;font-size:var(--text-base);color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:4px}.naming-template>input[type=text]{font-family:var(--font-primary);width:100%;background:var(--color-surface);border:2px solid var(--color-border-light);color:var(--color-text-strong);padding:8px 12px;border-radius:6px;font-size:var(--text-md);font-weight:700}.naming-template>input[type=text]:focus{outline:none;border-color:var(--color-accent)}.token-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}.token-chip{font-family:var(--font-primary);font-size:var(--text-sm);font-weight:700;background:var(--color-surface-2);border:1px solid var(--color-border-light);color:var(--color-muted-2);padding:3px 8px;border-radius:5px;cursor:pointer;transition:color .15s,border-color .15s}.token-chip:hover{color:var(--color-accent);border-color:var(--color-accent)}#naming-preview{background:var(--color-surface-2);border:2px solid var(--color-border);border-radius:10px;padding:6px 0;max-height:320px;overflow:auto}.naming-preview-row{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;padding:6px 14px;font-family:var(--font-primary)}.naming-preview-row+.naming-preview-row{border-top:1px solid var(--color-border)}.naming-preview-row .tag{font-size:var(--text-xs);font-weight:700;padding:2px 6px;border-radius:4px;background:var(--color-muted-6);color:var(--color-muted-5);text-transform:uppercase;letter-spacing:.06em;text-align:center}.naming-preview-row .name{font-size:var(--text-md);color:var(--color-text);font-weight:700;word-break:break-all}.naming-preview-row.collision .tag{background:#ffb4001f;color:var(--color-processing)}.naming-preview-row.collision .name{color:var(--color-processing)}.naming-preview-warning{padding:10px 14px;font-size:var(--text-sm);font-weight:700;color:var(--color-processing);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--color-border)}dialog{background:var(--color-surface-2);border:2px solid var(--color-border-mid);border-radius:14px;padding:24px;max-width:560px;width:100%;color:var(--color-text);font-family:var(--font-primary);margin:auto}dialog::backdrop{background:#000000b8}dialog h3{font-size:var(--text-md);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);margin-bottom:14px}#paste-css-input{font-family:var(--font-primary);font-size:var(--text-base);font-weight:600;background:var(--color-surface);border:2px solid var(--color-border-light);border-radius:8px;color:var(--color-text);padding:10px 12px;width:100%;height:160px;resize:vertical;display:block;margin-bottom:14px;min-height:6lh}#paste-css-input:focus{outline:none;border-color:var(--color-accent)}#paste-css-preview{display:flex;flex-wrap:wrap;gap:10px;min-height:32px;margin-bottom:18px}#paste-css-preview .paste-preview-count{width:100%;font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted);margin-bottom:4px}.paste-preview-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:72px}.paste-preview-swatch .swatch{width:36px;height:36px;border-radius:8px;border:1px solid var(--color-border-light)}.paste-preview-swatch span{font-size:var(--text-xs);font-weight:700;color:var(--color-muted-5);text-align:center;word-break:break-all;max-width:72px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}footer{font-family:var(--font-primary);text-transform:uppercase;text-align:center;margin-top:40px;padding-bottom:8px;font-size:var(--text-sm);font-weight:500;color:var(--color-muted-6)}footer a{color:inherit;text-decoration:underline}footer a:hover{color:var(--color-muted)}.project-controls{position:fixed;bottom:14px;left:14px;display:flex;flex-direction:column;gap:2px;z-index:100}.project-btn{display:flex;align-items:center;gap:5px;padding:5px 8px;background:none;border:none;border-radius:6px;font-family:var(--font-primary);font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted-3);cursor:pointer;transition:color .15s,background .15s}.project-btn:hover{color:var(--color-text);background:var(--color-surface-2)}