:root{--bg: #f3eee1;--surface-1: #eae2d0;--surface-2: #fffdf8;--text: #201c16;--text-muted: #6e6455;--accent: #22406b;--accent-support: #a8382c;--success: #3f7a55;--danger: #a8382c;--font-display: "Fraunces", Georgia, "Times New Roman", serif;--font-ui: "Inter", system-ui, -apple-system, sans-serif;--space-1: 8px;--space-2: 16px;--space-3: 24px;--space-4: 32px;--space-6: 48px;--radius: 6px;--shadow-paper: 0 1px 2px rgba(32, 28, 22, .08), 0 4px 8px rgba(32, 28, 22, .08);--motion-ui: .16s ease-out}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);line-height:1.5}#app{min-height:100vh}h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0}a{color:var(--accent)}button{font-family:var(--font-ui)}::selection{background:var(--accent-support);color:var(--surface-2)}#app{display:flex;flex-direction:column;background:radial-gradient(ellipse at top left,rgba(34,64,107,.05),transparent 55%),radial-gradient(ellipse at bottom right,rgba(168,56,44,.04),transparent 55%),var(--bg)}.app-header{position:relative;padding:var(--space-4) var(--space-4) var(--space-2);text-align:center}.wordmark{position:relative;display:inline-block;font-size:clamp(2rem,4vw,2.75rem);letter-spacing:.01em;padding:0 var(--space-1)}.wordmark:after{content:"";position:absolute;inset:-.2em -.35em;border:2px solid var(--accent-support);border-radius:10px;transform:rotate(-2deg) scale(1.4);opacity:0;filter:blur(4px);animation:stamp-in .64s .12s cubic-bezier(.2,.8,.3,1) forwards;pointer-events:none}@keyframes stamp-in{0%{opacity:0;transform:rotate(-2deg) scale(1.4);filter:blur(4px)}60%{opacity:.9;filter:blur(.5px)}to{opacity:0;transform:rotate(-2deg) scale(1.06);filter:blur(0)}}@media(prefers-reduced-motion:reduce){.wordmark:after{animation:none;opacity:0}}.tagline{margin:var(--space-2) auto 0;max-width:52ch;color:var(--text-muted)}.mute-toggle{position:absolute;top:var(--space-3);right:var(--space-3);font-family:var(--font-ui);font-size:.8rem;font-weight:500;min-height:44px;padding:0 var(--space-2);border-radius:999px;border:1px solid var(--text-muted);background:var(--surface-2);color:var(--text);cursor:pointer;box-shadow:var(--shadow-paper);transition:var(--motion-ui);transition-property:background-color,color,border-color,transform}.mute-toggle:hover{border-color:var(--accent);color:var(--accent)}.mute-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mute-toggle:active{transform:scale(.97)}.mute-toggle--muted{color:var(--text-muted);border-color:var(--text-muted);background:var(--surface-1)}@media(max-width:480px){.app-header{display:flex;flex-direction:column;align-items:center}.mute-toggle{position:static;align-self:flex-end;margin-bottom:var(--space-2)}}.workspace{flex:1;display:grid;grid-template-columns:280px 1fr;gap:var(--space-4);padding:var(--space-2) var(--space-4) var(--space-6);align-items:start}@media(max-width:768px){.workspace{grid-template-columns:1fr;padding:var(--space-2) var(--space-2) var(--space-4)}}.mapping-rail{background:var(--surface-1);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow-paper);position:sticky;top:var(--space-2)}@media(max-width:768px){.mapping-rail{position:static;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2);min-width:0}}.mapping-rail__reset{font-family:var(--font-ui);font-weight:500;font-size:.8rem;padding:6px 14px;min-height:44px;border-radius:var(--radius);border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;margin-bottom:var(--space-2);transition:var(--motion-ui);transition-property:background-color,color,transform}.mapping-rail__reset:hover{background:var(--accent);color:var(--surface-2)}.mapping-rail__reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mapping-rail__reset:active{transform:scale(.97)}@media(max-width:768px){.mapping-rail__reset{margin-bottom:0;order:-1;width:100%}}.mapping-rail__heading{font-size:1.1rem;margin-bottom:var(--space-2)}@media(max-width:768px){.mapping-rail__heading{font-size:.95rem;margin-bottom:0}}.mapping-rail__hint{color:var(--text-muted);font-size:.95rem;margin:0}.mapping-list{display:flex;flex-direction:column;gap:var(--space-2)}@media(max-width:768px){.mapping-list{flex-direction:row;flex-wrap:nowrap;gap:var(--space-1);overflow-x:auto;padding-bottom:var(--space-1);-webkit-overflow-scrolling:touch;width:100%;min-width:0}}.mapping-row{display:flex;flex-direction:column;gap:4px}@media(max-width:768px){.mapping-row{flex:0 0 auto;flex-direction:row;align-items:center;gap:var(--space-1);background:var(--surface-2);border-radius:999px;padding:6px var(--space-2) 6px var(--space-2);box-shadow:var(--shadow-paper)}}.mapping-row__label-wrap{display:flex;align-items:baseline;gap:var(--space-1)}@media(max-width:768px){.mapping-row__label-wrap{flex-direction:column;align-items:flex-start;gap:0}}.mapping-row__field{font-weight:600;font-size:.9rem}@media(max-width:768px){.mapping-row__field{font-size:.75rem;white-space:nowrap}}.mapping-row__kind{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}@media(max-width:768px){.mapping-row__kind{font-size:.6rem}}.mapping-row__select{appearance:none;font-family:var(--font-ui);font-size:.9rem;padding:8px 32px 8px 10px;min-height:44px;border-radius:var(--radius);border:1px solid var(--surface-1);background:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%) calc(100% - 14px) center/6px 6px no-repeat,linear-gradient(135deg,var(--text-muted) 50%,transparent 50%) calc(100% - 8px) center/6px 6px no-repeat,var(--surface-2);color:var(--text);cursor:pointer;transition:var(--motion-ui);transition-property:border-color,box-shadow}.mapping-row__select:hover{border-color:var(--accent)}.mapping-row__select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #22406b33}@media(max-width:768px){.mapping-row__select{max-width:120px;padding:6px 26px 6px 8px;font-size:.8rem;min-height:44px}}.grid-area{min-height:60vh;display:flex;flex-direction:column;gap:var(--space-3)}.dropzone{flex:1;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);border:2px dashed var(--text-muted);border-radius:var(--radius);background:var(--surface-2);box-shadow:var(--shadow-paper);padding:var(--space-4);text-align:center;cursor:pointer;transition:var(--motion-ui);transition-property:border-color,box-shadow,transform,background}.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);box-shadow:0 2px 4px #201c161a,0 8px 16px #201c161a}.dropzone:focus-visible{outline:none}.dropzone--dragging{border-color:var(--accent);border-style:solid;background:var(--surface-1);transform:scale(1.005);box-shadow:0 3px 6px #201c161f,0 10px 20px #201c161f}.dropzone__icon{opacity:.9}.dropzone__title{font-family:var(--font-display);font-weight:700;font-size:1.35rem;margin:0}.dropzone__hint{color:var(--text-muted);margin:0;max-width:40ch}.dropzone__input,.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:768px){.dropzone,.grid-area{min-height:50vh}.dropzone{padding:var(--space-3)}}.file-chips{display:flex;flex-wrap:wrap;gap:var(--space-1)}.file-chip{font-size:.8rem;padding:6px 12px;border-radius:999px;background:var(--surface-1);color:var(--text-muted);border:1px solid transparent}.file-chip--ready{color:var(--success);border-color:var(--success);background:var(--surface-2)}.message{padding:var(--space-2) var(--space-3);border-radius:var(--radius);font-size:.9rem;margin:0}.message--error{background:var(--surface-2);color:var(--danger);border:1px solid var(--danger);box-shadow:var(--shadow-paper)}.thumb-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3);align-content:start}@media(max-width:768px){.thumb-grid{grid-template-columns:1fr}}.thumb-card{background:var(--surface-2);border-radius:var(--radius);box-shadow:var(--shadow-paper);padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-1);animation:card-in .22s ease-out both}.thumb-grid--success-pulse:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 #3f7a5500;animation:success-pulse .7s ease-out}@keyframes success-pulse{0%{box-shadow:inset 0 0 #3f7a5559}to{box-shadow:inset 0 0 0 60px #3f7a5500}}@media(prefers-reduced-motion:reduce){.thumb-grid--success-pulse:before{animation:none}}.thumb-card:nth-child(odd){transform:rotate(-.4deg)}.thumb-card:nth-child(2n){transform:rotate(.4deg)}@keyframes card-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.thumb-card{animation:none}}.thumb-card__preview{aspect-ratio:3 / 4;border-radius:4px;background:var(--surface-1);display:flex;align-items:center;justify-content:center;overflow:hidden}.thumb-card__preview img{width:100%;height:100%;object-fit:contain}.thumb-card__label{font-size:.85rem;font-weight:500;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thumb-card__spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--surface-2);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.thumb-card__spinner{animation-duration:1.6s}}.thumb-card--error .thumb-card__preview{background:#a8382c14}.thumb-card__error-text{color:var(--danger);font-size:.8rem;margin:0;padding:var(--space-1)}.thumb-card--warning{border:1px solid var(--accent-support)}.thumb-card__warning{color:var(--accent-support);font-size:.75rem;margin:0}.thumb-card__download{align-self:flex-start;font-size:.8rem;font-weight:500;padding:6px 12px;min-height:44px;border-radius:var(--radius);border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;transition:var(--motion-ui);transition-property:background-color,color,transform}.thumb-card__download:hover{background:var(--accent);color:var(--surface-2)}.thumb-card__download:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.thumb-card__download:active{transform:scale(.97)}.progress-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--surface-1);border-radius:var(--radius)}.progress-bar__label{margin:0;font-size:.85rem;color:var(--text-muted);min-width:11ch}.progress-bar__track{flex:1;min-width:120px;height:8px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 1px 2px #201c161f;overflow:hidden}.progress-bar__fill{height:100%;background:var(--accent);border-radius:999px;transition:width .16s ease-out}.progress-bar__cancel{font-weight:500;font-size:.85rem;padding:8px 16px;min-height:44px;border-radius:var(--radius);border:1px solid var(--accent-support);background:transparent;color:var(--accent-support);cursor:pointer;transition:var(--motion-ui);transition-property:background-color,color,transform}.progress-bar__cancel:hover:not(:disabled){background:var(--accent-support);color:var(--surface-2)}.progress-bar__cancel:focus-visible{outline:2px solid var(--accent-support);outline-offset:2px}.progress-bar__cancel:active:not(:disabled){transform:scale(.97)}.progress-bar__cancel:disabled{opacity:.5;cursor:not-allowed}.progress-bar--failed{border:1px solid var(--danger)}.progress-bar--failed .progress-bar__label{color:var(--danger)}.progress-bar--failed .progress-bar__fill{background:var(--danger)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2);background:var(--surface-1);border-radius:var(--radius)}.toolbar__filename-label{font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:var(--space-1)}.toolbar__filename-select{appearance:none;font-family:var(--font-ui);font-size:.85rem;padding:6px 28px 6px 10px;min-height:44px;border-radius:var(--radius);border:1px solid transparent;background:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%) calc(100% - 12px) center/5px 5px no-repeat,linear-gradient(135deg,var(--text-muted) 50%,transparent 50%) calc(100% - 7px) center/5px 5px no-repeat,var(--surface-2);color:var(--text);cursor:pointer;transition:var(--motion-ui)}.toolbar__filename-select:hover{border-color:var(--accent)}.toolbar__filename-select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #22406b33}.toolbar__download-all{margin-left:auto;font-weight:600;font-size:.9rem;padding:10px 20px;min-height:44px;border-radius:var(--radius);border:none;background:var(--accent-support);color:var(--surface-2);cursor:pointer;box-shadow:var(--shadow-paper);transition:var(--motion-ui);transition-property:transform,box-shadow,background-color}.toolbar__download-all:hover{background:#8f2e23}.toolbar__download-all:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.toolbar__download-all:active{transform:scale(.97)}@media(max-width:768px){.toolbar__download-all{margin-left:0;width:100%}}.learn{border-top:1px solid rgba(32,28,22,.1);background:linear-gradient(180deg,rgba(234,226,208,.35),transparent 40%),var(--bg);padding:var(--space-6) var(--space-4)}.learn__inner{max-width:68ch;margin:0 auto}.learn__heading{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:var(--space-3)}.learn__subheading{font-size:1.25rem;margin:var(--space-4) 0 var(--space-2)}.learn p,.learn li,.faq dd{color:var(--text);max-width:68ch}.learn__steps{padding-left:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}.learn code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;background:var(--surface-1);padding:1px 5px;border-radius:4px}.faq{margin:0}.faq dt{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-top:var(--space-3)}.faq dd{margin:var(--space-1) 0 0;color:var(--text-muted)}.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-6);border-top:1px solid rgba(32,28,22,.1);background:var(--surface-1)}.site-footer__link{font-weight:600;color:var(--accent);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.site-footer__link:hover{text-decoration:underline}.site-footer__portfolio{font-size:.9rem;color:var(--text-muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.site-footer__portfolio:hover{color:var(--accent)}@media(max-width:480px){.site-footer{flex-direction:column;align-items:flex-start}}