:root { color-scheme: light; --page:#f7f8fc;--surface:#fff;--text:#1c2438;--secondary:#6b7285;--muted:#727c91;--border:#e6e8f0;--accent:#5265ed;--soft:#f4f6ff;--green:#5d9a4b;--green-soft:#f1f8ed;--error:#b43c48;--error-bg:#fff0f1; }
[data-theme="dark"] { color-scheme: dark;--page:#111522;--surface:#1a2030;--text:#eef1fa;--secondary:#a7b0c5;--muted:#96a0b6;--border:#30384c;--soft:#222b43;--green:#9cc88b;--green-soft:#24332a;--error:#ffb1b8;--error-bg:#38232d; }
* { box-sizing:border-box; } body { margin:0;font:14px/1.6 'Inter',system-ui,sans-serif;background:var(--page);color:var(--text); } button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } a { color:inherit;text-decoration:none; } button:disabled { cursor:not-allowed;opacity:.5; } :focus-visible { outline:3px solid #8291fa;outline-offset:3px; } [hidden] { display:none!important; } .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
.suite-header { height:72px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:30px;padding:0 max(28px,calc((100vw - 1440px)/2)); }
.suite-brand { display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:15px;font-weight:750;letter-spacing:-.5px; }.suite-brand>span:last-child { color:#8190f7;margin-left:-4px; }.brand-mark { width:36px;height:38px;border-radius:10px;background:#5968f3;display:grid;place-items:center;color:white;margin-right:3px; }.brand-mark svg { width:24px;height:24px; }
.suite-header nav { margin-left:auto;display:flex;gap:27px;font-size:12px;color:var(--secondary); }.suite-header nav a:hover { color:var(--accent); }.theme-button { width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--secondary);font-size:20px; }
.tool-shell { max-width:1250px;margin:auto;padding:25px 30px 24px; }.tool-breadcrumb { display:flex;gap:10px;font-size:10px;color:var(--muted); }.tool-breadcrumb strong { font-weight:500;color:var(--secondary); }.tool-breadcrumb a:hover { color:var(--accent); }
.tool-heading { text-align:center;margin:25px 0 24px; }.heading-icon { background:var(--green-soft);color:var(--green);width:48px;height:48px;display:grid;place-items:center;margin:0 auto 14px;border-radius:13px; }.heading-icon svg { width:29px;height:29px; }.tool-heading h1 { margin:0 0 8px;font-size:clamp(28px,3vw,37px);font-weight:750;letter-spacing:-1.5px;line-height:1.3; }.tool-heading p { margin:0;color:var(--secondary);font-size:13px; }
.flow-steps { display:flex;justify-content:center;gap:38px;list-style:none;padding:0;margin:26px 0 30px; }.flow-steps li { display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted); }.flow-steps li>span { display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--border);border-radius:50%;font-size:10px;background:var(--surface); }.flow-steps li[aria-current] { color:var(--accent);font-weight:600; }.flow-steps li[aria-current]>span { background:var(--accent);border-color:var(--accent);color:white; }
.workspace { display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:22px;align-items:start; }.file-workspace { min-width:0; }.tool-dropzone { border:1.5px dashed #94a4ee90;border-radius:15px;min-height:390px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 20px;text-align:center;transition:border-color .2s,background .2s; }.tool-dropzone.dragover { border-color:var(--accent);background:var(--soft); }.upload-symbol { display:grid;place-items:center;width:65px;height:65px;background:var(--soft);border-radius:18px;color:#7f90f5;margin-bottom:22px; }.upload-symbol svg { width:34px;height:34px; }.tool-dropzone h2 { font-size:20px;font-weight:650;letter-spacing:-.6px;margin:0 0 8px; }.tool-dropzone p { color:var(--secondary);font-size:12px;margin:0 0 24px; }
.primary-button { border:0;border-radius:9px;background:var(--accent);color:white;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:12px 24px;font-size:12px;font-weight:600;box-shadow:0 4px 8px #5265ed15;transition:background .2s,transform .2s; }.primary-button:not(:disabled):hover { background:#4254d7;transform:translateY(-1px); }.primary-button span { font-size:20px;line-height:1; }.upload-limits { display:flex;flex-wrap:wrap;justify-content:center;gap:9px;font-size:9px;color:var(--muted);margin-top:20px; }.upload-limits>span { color:#abb4cb; }
.options-panel { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:25px 22px; }.options-title>span { font-size:8px;font-weight:700;letter-spacing:.14em;color:var(--muted); }.options-title h2 { font-size:18px;letter-spacing:-.6px;margin:6px 0; }.options-title p { font-size:11px;color:var(--secondary);margin:0 0 22px; }fieldset { margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:10px; }.compression-choice { display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:10px;padding:14px 12px;cursor:pointer; }.compression-choice:has(input:checked) { border-color:#8290f4;background:var(--soft); }.compression-choice input { margin:0;width:14px;height:14px;accent-color:var(--accent);flex-shrink:0; }.choice-content { width:100%;min-width:0; }.choice-heading { display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:11px;font-weight:650; }.choice-heading>span { font-size:8px;color:var(--muted);font-weight:450; }.choice-heading .recommended-tag { font-size:6px;letter-spacing:.02em;font-weight:650;color:#6374db;background:#8796ff15;border-radius:3px;padding:3px; }.choice-desc { display:block;font-size:9px;color:var(--secondary);margin-top:5px; }.compression-detail { display:flex;align-items:start;gap:7px;margin:18px 0;color:var(--green); }.compression-detail svg { flex-shrink:0;margin-top:2px; }.compression-detail p { color:var(--secondary);font-size:9px;margin:0;line-height:1.8; }.process-button { width:100%;justify-content:space-between; }.process-hint { text-align:center;color:var(--muted);font-size:9px;margin:9px 0 22px; }.privacy-note { display:flex;gap:10px;border-top:1px solid var(--border);padding-top:17px;color:var(--muted); }.privacy-note>span { font-size:20px;color:var(--green); }.privacy-note p { font-size:9px;line-height:1.85;margin:0; }.privacy-note strong { display:block;color:var(--secondary);font-weight:550;margin-bottom:3px; }
.workflow-note { display:flex;align-items:start;gap:10px;color:#8190ab;margin:22px 5px; }.workflow-note>span { font-size:16px; }.workflow-note p { font-size:10px;color:var(--secondary);margin:0;line-height:1.8; }.workflow-note strong { display:block;font-size:11px;font-weight:550;color:var(--text);margin-bottom:3px; }
.files-toolbar { display:flex;justify-content:space-between;gap:12px;align-items:center;margin:0 0 18px; }.files-toolbar h2 { font-size:15px;margin:0;letter-spacing:-.4px; }.files-toolbar h2 span { font-size:10px;background:var(--soft);color:var(--accent);border-radius:5px;margin-left:6px;padding:2px 5px; }.files-toolbar p { font-size:10px;color:var(--secondary);margin:4px 0 0; }.text-button { background:none;border:0;color:var(--accent);padding:5px 0;font-size:11px; }.file-cards { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }.pdf-card { position:relative;min-width:0;border-radius:12px;background:var(--surface);border:1px solid var(--border);padding:18px 14px 13px; }.pdf-card canvas { width:100%;max-height:190px;object-fit:contain;background:white;border:1px solid var(--border);box-shadow:0 2px 8px #19233e06;aspect-ratio: .707; }.pdf-card h3 { font-size:10px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:12px 0 4px; }.pdf-card p { font-size:9px;color:var(--muted);margin:0; }.remove-file { position:absolute;top:8px;right:8px;width:23px;height:23px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);border-radius:50%;font-size:14px;color:var(--secondary); }.error-banner { background:var(--error-bg);color:var(--error);border:1px solid color-mix(in srgb,var(--error),transparent 75%);padding:13px 17px;font-size:12px;border-radius:10px;margin:0 0 20px; }
.center-state { max-width:850px;min-height:460px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;text-align:center;padding:45px 35px; }.center-state h2 { font-size:28px;line-height:1.35;letter-spacing:-1px;margin:10px 0; }.center-state>p { font-size:12px;color:var(--secondary);margin:10px 0 22px; }.state-eyebrow { font-size:8px;font-weight:650;letter-spacing:.13em;color:var(--muted); }.progress-orbit,.success-icon { width:66px;height:66px;display:grid;place-items:center;margin:0 auto 22px;border-radius:50%;background:var(--soft);color:var(--accent);font-size:32px; }.progress-orbit { animation:breathe 2s ease-in-out infinite; }.success-icon { background:var(--green-soft);color:var(--green); }progress { display:block;appearance:none;width:min(380px,100%);height:7px;border:0;border-radius:8px;background:var(--soft);margin:30px auto 10px;overflow:hidden; }progress::-webkit-progress-bar { background:var(--soft); }progress::-webkit-progress-value { background:var(--accent);transition:width .3s; }progress::-moz-progress-bar { background:var(--accent); }.progress-label { font-size:12px;font-weight:600;color:var(--accent); }.center-state .muted { font-size:10px;color:var(--muted); }.size-comparison { display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap;margin:30px 0; }.size-comparison>div>span { display:block;font-size:10px;color:var(--muted);margin-bottom:5px; }.size-comparison strong { font-size:23px;font-weight:650;letter-spacing:-.8px; }.size-arrow { color:var(--muted);font-size:23px; }.savings { padding:10px 20px;background:var(--green-soft);color:var(--green);border-radius:10px; }.size-comparison .savings>span { color:var(--green); }.download-button { min-width:280px; }.result-actions { margin:22px 0 10px;display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:11px;color:var(--accent); }.danger { color:var(--error); }.result-files { list-style:none;padding:0;margin:0 auto 24px;max-width:500px; }.result-files li { display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px solid var(--border);font-size:10px;color:var(--secondary); }.result-files li>span:first-child { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.suite-footnote { text-align:center;color:var(--muted);font-size:9px;margin:36px 0 0; }.suite-footnote span { margin-left:10px; }
@keyframes breathe { 50% { transform:scale(1.07); } }
@media(max-width:960px) { .workspace { grid-template-columns:minmax(0,1fr) 300px;gap:16px; }.file-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.options-panel { padding:22px 16px; }.tool-shell { padding:22px; } }
@media(max-width:680px) { .suite-header { padding:0 16px;height:64px;gap:12px; }.suite-brand { font-size:12px; }.brand-mark { width:30px;height:32px; }.suite-header nav { font-size:10px; }.suite-header nav a:last-child { display:none; }.tool-shell { padding:18px 16px; }.tool-breadcrumb { font-size:9px;gap:7px; }.tool-heading { margin:28px 0 20px; }.tool-heading h1 { letter-spacing:-1px; }.tool-heading p { font-size:11px; }.flow-steps { gap:17px;margin:22px 0; }.flow-steps li { gap:5px;font-size:9px; }.flow-steps li>span { width:20px;height:20px; }.workspace { grid-template-columns:1fr;gap:6px; }.tool-dropzone { min-height:300px; }.options-panel { padding:25px; }.choice-heading { font-size:12px; }.choice-desc { font-size:10px; }.choice-heading .recommended-tag { font-size:7px; }.file-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.center-state { padding:30px 19px; }.size-comparison { gap:15px; }.size-comparison strong { font-size:20px; }.size-comparison .savings { padding:9px 13px; }.result-actions { gap:12px;flex-direction:column; }.download-button { min-width:0;width:100%; }.suite-footnote span { display:block;margin:5px 0; } }
@media(prefers-reduced-motion:reduce) { *,*::before { animation:none!important;transition:none!important; } }