:root{--bg:#1b1d24;--bg-elevated:#23252e;--bg-inset:#16171d;--border:#33353f;--text:#d6d7de;--text-muted:#8b8d98;--text-heading:#f4f4f6;--accent:#c084fc;--accent-strong:#a855f7;--accent-contrast:#16171d;--good:#4ade80;--bad:#f87171;--checker-a:#2a2c36;--checker-b:#23252e;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--sans);color:var(--text);background:var(--bg);margin:0}button,input,textarea{font-family:inherit}.app{flex-direction:column;height:100%;display:flex}.app__header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 24px;display:flex}.header-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.app__title{color:var(--text-heading);letter-spacing:-.02em;margin:0;font-size:20px;font-weight:600}.app__tagline{color:var(--text-muted);margin:4px 0 0;font-size:13px}.app__workspace{flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:320px 1fr;min-height:0;display:grid}.app__main{flex-direction:column;min-width:0;min-height:0;display:flex}.app__viewer{border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex:1;min-height:0;overflow:hidden}.app__banner{border-bottom:1px solid var(--border);padding:8px 16px;font-size:13px}.app__banner--error{color:var(--bad);background:#f871711f}.dropzone{flex:1;justify-content:center;align-items:center;padding:24px;display:flex}.dropzone__box{border:2px dashed var(--border);background:var(--bg-elevated);text-align:center;border-radius:16px;flex-direction:column;align-items:center;gap:12px;max-width:420px;padding:48px 64px;display:flex}.dropzone__icon{color:var(--text-muted)}.dropzone__title{color:var(--text-heading);margin:0;font-size:16px;font-weight:500}.dropzone__subtitle{color:var(--text-muted);margin:0;font-size:13px}.dropzone__input{display:none}.dropzone__paste{flex-direction:column;gap:8px;width:100%;display:flex}.dropzone__paste-input{resize:vertical;background:var(--bg-inset);width:100%;color:var(--text);border:1px solid var(--border);font-family:var(--mono);border-radius:8px;padding:8px 10px;font-size:12px}.button{appearance:none;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;display:inline-flex}.button svg{flex-shrink:0}.button:hover{border-color:var(--accent)}.button:disabled{opacity:.5;cursor:not-allowed}.button--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);font-weight:600}.button--primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}.button--link{color:var(--accent);background:0 0;border:none;padding:4px}.button--toggle.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.toolbar__group{align-items:center;gap:8px;display:flex}.toolbar__view-toggle{border:1px solid var(--border);border-radius:6px;display:flex;overflow:hidden}.toolbar__view-toggle .button{border:none;border-radius:0}.toolbar__editing-label{color:var(--accent);font-size:13px;font-weight:600}.toolbar__checkbox{color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:13px;display:flex}.toolbar__error{color:var(--bad);max-width:320px;font-size:12px}.code-view,.code-view .cm-editor{height:100%}.image-preview{background-image:linear-gradient(45deg, var(--checker-a) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-a) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-a) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-a) 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;background-color:var(--checker-b);justify-content:center;align-items:center;height:100%;display:flex;overflow:auto}.image-preview__canvas{width:min(90%,480px);height:min(90%,70vh);display:flex}.image-preview__canvas svg{width:100%;height:100%}.size-stats{flex-shrink:0;align-items:center;gap:16px;padding:10px 16px;font-size:13px;display:flex}.size-stats__item{flex-direction:column;gap:2px;display:flex}.size-stats__label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:11px}.size-stats__value{color:var(--text-heading);font-family:var(--mono)}.size-stats__gzip{color:var(--text-muted);font-family:var(--mono)}.size-stats__arrow{color:var(--text-muted)}.size-stats__change{font-weight:700;font-family:var(--mono);margin-left:auto}.size-stats__change--good{color:var(--good)}.size-stats__change--bad{color:var(--bad)}.plugin-panel{border-right:1px solid var(--border);background:var(--bg-inset);flex-direction:column;min-height:0;display:flex}.plugin-panel__search{margin:12px;position:relative}.plugin-panel__search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.plugin-panel__filter{border:1px solid var(--border);background:var(--bg-elevated);width:100%;color:var(--text);border-radius:6px;padding:6px 10px 6px 30px;font-size:13px}.plugin-panel__scroll{flex:1;padding:0 12px 16px;overflow-y:auto}.plugin-panel__section+.plugin-panel__section{margin-top:16px}.plugin-panel__heading{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--bg-inset);margin:0 0 8px;padding:4px 0;font-size:11px;position:sticky;top:0}.plugin-row{border-bottom:1px solid var(--border);padding:6px 0}.plugin-row__header{cursor:pointer;align-items:baseline;gap:8px;display:flex}.plugin-row__label{color:var(--text-heading);font-size:13px}.plugin-row__description{color:var(--text-muted);margin:2px 0 0 22px;font-size:11px;line-height:1.4}.plugin-row__params{flex-direction:column;gap:4px;margin:6px 0 4px 22px;display:flex}.plugin-row__param{color:var(--text-muted);justify-content:space-between;align-items:center;gap:8px;font-size:12px;display:flex}.plugin-row__param input[type=number]{background:var(--bg-elevated);width:56px;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:2px 6px}@media (width<=800px){.app__workspace{grid-template-rows:auto 1fr;grid-template-columns:1fr}.plugin-panel{border-right:none;border-bottom:1px solid var(--border);max-height:260px}}