body{margin:0;min-width:320px;min-height:100vh}button{font-family:inherit}pre,code{font-family:Menlo,Monaco,Consolas,Liberation Mono,monospace}.upload-zone-wrapper{display:flex;flex-direction:column;gap:8px;flex:1}.upload-zone__label{margin:0;font-size:.875rem;font-weight:600;color:var(--color-text-secondary)}.upload-zone{display:flex;align-items:center;justify-content:center;border:2px dashed var(--color-border);border-radius:12px;padding:48px 24px;cursor:pointer;transition:border-color .15s,background-color .15s;background:var(--color-surface);-webkit-user-select:none;user-select:none;outline:none}.upload-zone:hover,.upload-zone:focus-visible{border-color:var(--color-accent);background:var(--color-surface-hover)}.upload-zone--dragging{border-color:var(--color-accent);background:var(--color-accent-subtle)}.upload-zone--has-file{padding:24px}.upload-zone--dark{border-color:#4a4a5a;background:#1e1e2e}.upload-zone--dark:hover,.upload-zone--dark:focus-visible{border-color:var(--color-accent);background:#252535}.upload-zone--dark.upload-zone--dragging{border-color:var(--color-accent);background:#252545}.upload-zone--dark .upload-zone__title,.upload-zone--dark .upload-zone__filename{color:#e0e0ee}.upload-zone--dark .upload-zone__icon,.upload-zone--dark .upload-zone__subtitle,.upload-zone--dark .upload-zone__hint{color:#8080a0}.upload-zone__prompt,.upload-zone__file-info{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.upload-zone__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:var(--color-muted);margin-bottom:8px}.upload-zone__icon svg{width:100%;height:100%}.upload-zone__icon--file{color:var(--color-accent);width:36px;height:36px}.upload-zone__title{margin:0;font-size:1rem;font-weight:600;color:var(--color-text)}.upload-zone__subtitle{margin:0;font-size:.875rem;color:var(--color-muted)}.upload-zone__link{color:var(--color-accent);font-weight:500}.upload-zone__filename{font-size:.9375rem;font-weight:600;color:var(--color-text)}.upload-zone__hint{font-size:.8125rem;color:var(--color-muted)}.browser-preview{border-radius:10px;overflow:hidden;box-shadow:0 4px 24px #0000001f,0 0 0 1px #0000000f;background:#e8e8e8;font-family:system-ui,-apple-system,sans-serif;max-width:480px}.browser-chrome{display:flex;align-items:flex-end;gap:0;background:#d4d4d4;padding:8px 12px 0;border-bottom:1px solid #b8b8b8}.browser-chrome__traffic-lights{display:flex;gap:6px;align-items:center;padding-bottom:10px;flex-shrink:0}.traffic-light{width:12px;height:12px;border-radius:50%;display:block}.traffic-light--red{background:#ff5f57}.traffic-light--yellow{background:#febc2e}.traffic-light--green{background:#28c840}.browser-chrome__tab-strip{display:flex;align-items:flex-end;gap:2px;margin-left:12px;flex:1}.browser-tab{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px 8px 0 0;font-size:12px;max-width:180px;min-width:120px;cursor:default;position:relative}.browser-tab--active{background:#f0f0f0;color:#1a1a1a;z-index:1}.browser-tab--inactive{background:#c8c8c8;color:#666;font-size:11px}.browser-tab__favicon{width:16px;height:16px;flex-shrink:0;object-fit:contain}.browser-tab__favicon-placeholder{width:16px;height:16px;flex-shrink:0;background:#ccc;border-radius:3px}.browser-tab--inactive .browser-tab__favicon-placeholder{background:#aaa}.browser-tab__title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.browser-tab__title--muted{font-weight:400;color:#888}.browser-tab__close{font-size:14px;line-height:1;color:#888;flex-shrink:0}.browser-preview--dark{background:#1e1e1e}.browser-preview--dark .browser-chrome{background:#2c2c2e;border-bottom-color:#3a3a3c}.browser-preview--dark .browser-tab--active{background:#3a3a3c;color:#f0f0f0}.browser-preview--dark .browser-tab--inactive{background:#252527;color:#888}.browser-preview--dark .browser-tab__favicon-placeholder{background:#555}.browser-preview--dark .browser-tab--inactive .browser-tab__favicon-placeholder{background:#444}.browser-preview--dark .browser-tab__title--muted,.browser-preview--dark .browser-tab__close{color:#666}.browser-preview--dark .browser-address-bar{background:#2c2c2e;border-color:#444}.browser-preview--dark .browser-address-bar__lock{color:#aaa}.browser-preview--dark .browser-address-bar__url{color:#ccc}.browser-preview-pair{display:flex;gap:24px;flex-wrap:wrap}.browser-preview-pair__item{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}.browser-preview-pair__label{margin:0;font-size:.8125rem;font-weight:600;color:var(--color-text-secondary)}.browser-address-bar{display:flex;align-items:center;gap:6px;background:#f0f0f0;margin:8px 12px;padding:5px 10px;border-radius:20px;border:1px solid #d0d0d0}.browser-address-bar__lock{color:#5a5a5a;display:flex;align-items:center;flex-shrink:0}.browser-address-bar__url{font-size:12px;color:#1a1a1a}.size-grid{display:flex;flex-direction:column;gap:16px}.size-grid__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.size-grid__title{margin:0;font-size:1rem;font-weight:600;color:var(--color-text)}.size-grid__actions{display:flex;gap:8px}.size-grid__action-btn{font-size:.8125rem;padding:4px 10px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-muted);cursor:pointer;transition:color .1s,border-color .1s}.size-grid__action-btn:hover:not(:disabled){color:var(--color-text);border-color:var(--color-text-secondary)}.size-grid__action-btn:disabled{opacity:.4;cursor:default}.size-grid__section{display:flex;flex-direction:column;gap:10px}.size-grid__section-title{margin:0;font-size:.8125rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.size-grid__section-title--dark{color:var(--color-muted)}.size-grid__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.size-cell{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 12px 12px;border:2px solid var(--color-border);border-radius:10px;background:var(--color-surface);cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s;text-align:center}.size-cell:hover{border-color:var(--color-accent)}.size-cell--selected{border-color:var(--color-accent);background:var(--color-accent-subtle)}.size-cell__checkbox{position:absolute;top:8px;right:8px;width:16px;height:16px;accent-color:var(--color-accent);cursor:pointer}.size-cell__preview-wrap{display:flex;align-items:center;justify-content:center;min-height:72px}.size-cell__checkerboard{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#fff;display:flex;align-items:center;justify-content:center}.size-cell__checkerboard img{display:block}.size-cell__info{display:flex;flex-direction:column;gap:2px}.size-cell__filename{font-size:.75rem;font-weight:600;color:var(--color-text);word-break:break-all}.size-cell__label{font-size:.6875rem;color:var(--color-muted)}.size-cell__svg-badge{display:inline-block;font-size:.5625rem;font-weight:700;letter-spacing:.04em;background:var(--color-accent);color:#fff;border-radius:3px;padding:1px 4px;margin-right:4px;vertical-align:middle;line-height:1.4}.size-cell__checkerboard--dark{background-image:linear-gradient(45deg,#444 25%,transparent 25%),linear-gradient(-45deg,#444 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#444 75%),linear-gradient(-45deg,transparent 75%,#444 75%);background-color:#1e1e1e}.download-panel{display:flex;flex-direction:column;gap:20px}.download-panel__snippet-section{display:flex;flex-direction:column;gap:10px}.download-panel__snippet-header{display:flex;align-items:center;justify-content:space-between}.download-panel__title{margin:0;font-size:1rem;font-weight:600;color:var(--color-text)}.download-panel__copy-btn{font-size:.8125rem;padding:4px 12px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-muted);cursor:pointer;transition:all .1s;min-width:60px}.download-panel__copy-btn:hover{color:var(--color-text);border-color:var(--color-text-secondary)}.download-panel__copy-btn--copied{background:var(--color-success-subtle);border-color:var(--color-success);color:var(--color-success)}.download-panel__code{background:var(--color-code-bg);border:1px solid var(--color-border);border-radius:8px;padding:16px;overflow-x:auto;font-size:.8125rem;line-height:1.6;color:var(--color-code-text);margin:0;white-space:pre}.download-panel__download-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;background:var(--color-accent);color:#fff;border:none;border-radius:8px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background .15s,opacity .15s}.download-panel__download-btn:hover:not(:disabled){background:var(--color-accent-hover)}.download-panel__download-btn:disabled{opacity:.5;cursor:default}.download-panel__spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}:root{--color-bg: #f7f7f8;--color-surface: #ffffff;--color-surface-hover: #f0f4ff;--color-border: #e2e4e9;--color-text: #111318;--color-text-secondary: #555962;--color-muted: #8a8f9e;--color-accent: #3b5bdb;--color-accent-hover: #2f4bbf;--color-accent-subtle: #eef2ff;--color-code-bg: #f5f6f8;--color-code-text: #2e3440;--color-success: #2f9e44;--color-success-subtle: #ebfbee;--color-error-bg: #fff5f5;--color-error-border: #fcc2c3;--color-error-text: #c92a2a}[data-theme=dark]{--color-bg: #111114;--color-surface: #1c1c20;--color-surface-hover: #1e2240;--color-border: #2e2e36;--color-text: #f0f0f5;--color-text-secondary: #a0a0b0;--color-muted: #6a6a80;--color-accent: #5c7cfa;--color-accent-hover: #4c6ef5;--color-accent-subtle: #1a2050;--color-code-bg: #18181e;--color-code-text: #c9d1d9;--color-success: #40c057;--color-success-subtle: #0a2010;--color-error-bg: #1e0808;--color-error-border: #7c1c1c;--color-error-text: #ff6b6b}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:20px 0}.app-header__inner{max-width:800px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.app-header__logo{display:flex;align-items:center;gap:10px}.app-header__logo-icon{width:32px;height:32px;flex-shrink:0}.app-header__name{font-size:1.125rem;font-weight:700;color:var(--color-text);letter-spacing:-.01em}.app-header__tagline{margin:0;font-size:.9375rem;color:var(--color-muted)}.theme-toggle{margin-left:auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:color .15s,border-color .15s,background .15s;flex-shrink:0}.theme-toggle:hover{color:var(--color-text);border-color:var(--color-text-secondary)}.upload-pair{display:flex;gap:16px;align-items:flex-start}@media(max-width:600px){.upload-pair{flex-direction:column}}.app-main{flex:1;max-width:800px;width:100%;margin:0 auto;padding:32px 24px;display:flex;flex-direction:column;gap:32px}.app-section{display:flex;flex-direction:column;gap:16px}.app-section--center{align-items:center;text-align:center}.app-section__title{margin:0;font-size:1rem;font-weight:600;color:var(--color-text)}.app-spinner{display:flex;align-items:center;justify-content:center}.app-spinner__ring{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-status-text{margin:0;font-size:.9375rem;color:var(--color-muted)}.app-error{padding:14px 16px;background:var(--color-error-bg);border:1px solid var(--color-error-border);border-radius:8px;color:var(--color-error-text);font-size:.9375rem}.app-footer{text-align:center;padding:24px;border-top:1px solid var(--color-border);color:var(--color-muted);font-size:.8125rem}.app-footer p{margin:0}.app-footer__share{display:inline-block;margin-top:8px;background:none;border:none;color:var(--color-accent);font:inherit;font-size:.8125rem;cursor:pointer;padding:0}.app-footer__share:hover{text-decoration:underline}@media(max-width:600px){.app-header__inner{flex-direction:column;align-items:flex-start;gap:8px}.app-main{padding:24px 16px;gap:24px}}