*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#f6f7fb;--card:#fff;--text:#1f2a37;--muted:#6b7b8c;--border:#e7eaf0;--primary:#2f6feb;--primary-600:#2563eb;--accent:#16a34a;--shadow:0 8px 24px rgba(16,24,40,.06);--radius:14px;--space-1:6px;--space-2:10px;--space-3:16px;--space-4:24px;--space-5:32px}[data-theme=dark]{--bg:#0b1020;--card:#0f1428;--text:#e6e9f2;--muted:#93a0b8;--border:#1e2640;--primary:#7aa2ff;--primary-600:#638fff;--accent:#34d399;--shadow:0 8px 24px rgba(0,0,0,.35)}body,html{height:100%}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;background:radial-gradient(1000px 800px at 10% -10%,#ffffff10 0,var(--bg) 60%),var(--bg);line-height:1.55;display:flex;flex-direction:column}body,h1,h2{color:var(--text)}h1{font-size:2.1rem;font-weight:700}h2{font-size:1.2rem;font-weight:650;margin-bottom:var(--space-2)}.hint,.muted{color:var(--muted)}.hint{display:block;font-size:.85rem;margin-top:2px}.container{width:100%;max-width:1280px;margin-inline:auto;padding:0 var(--space-3)}.site-header{background:linear-gradient(180deg,#fdfefe10,#f6f9fb10);border-bottom:1px solid var(--border);margin-bottom:var(--space-4)}.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.brand h1{line-height:1.15;padding:var(--space-4) 0 var(--space-1)}.subheading{margin-bottom:var(--space-3);color:var(--muted)}.Explanation,.controls,.image-area,.text-area{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.Explanation{padding:var(--space-4);margin-bottom:var(--space-4)}.Explanation a{color:var(--primary);text-decoration:none}.Explanation a:hover{text-decoration:underline}.content-grid{display:grid;grid-gap:var(--space-4);gap:var(--space-4);align-items:start;grid-template-columns:1fr}@media (min-width:960px){.content-grid{grid-template-columns:420px minmax(0,1fr)}}.controls{padding:var(--space-4);display:grid;grid-template-columns:1fr;grid-gap:var(--space-3);gap:var(--space-3);position:-webkit-sticky;position:sticky;top:var(--space-4)}@media (max-width:960px){.controls{position:static;top:auto}}.form-actions{display:flex;justify-content:flex-end}.form-actions .btn{min-width:120px}@media (max-width:560px){.form-actions{justify-content:stretch}.form-actions .btn{width:100%}}.form-group.inline{display:flex;align-items:center;gap:12px}.form-group.inline label{margin:0}.form-group label{font-weight:600;margin-bottom:6px;display:inline-block}input[type=number],select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:10px 12px;font-size:1rem;color:var(--text);background:transparent;border:1px solid #cfd7df33;border-radius:8px;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}input[type=number]:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 20%,transparent);background:#ffffff08}input[type=range]{width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:6px;background:linear-gradient(90deg,var(--primary) 0,var(--primary) 0) no-repeat,#e9eef622;border-radius:999px;outline:none}input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent;border-radius:999px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#fff;border:2px solid var(--primary);border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.1);margin-top:calc((6px - 18px) / 2)}input[type=range]::-moz-range-track{height:6px;background:#e9eef6;border-radius:999px}input[type=range]::-moz-range-progress{height:6px;background:var(--primary);border-radius:999px}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#fff;border:2px solid var(--primary);border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.1)}.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.chip{border:1px solid var(--border);background:transparent;color:var(--text);padding:6px 10px;border-radius:999px;cursor:pointer;font-size:.9rem}.chip:hover{border-color:var(--primary);color:var(--primary)}.help{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-left:6px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:help;font-weight:700;line-height:1}.help:focus-visible,.help:hover{border-color:var(--primary);color:var(--primary)}.help[data-tooltip]{position:relative}.help[data-tooltip]:focus-visible:after,.help[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);white-space:nowrap;background:#111827;color:#fff;border-radius:6px;padding:6px 8px;font-size:12px;box-shadow:0 4px 10px rgba(0,0,0,.15);z-index:10}.help[data-tooltip]:focus-visible:before,.help[data-tooltip]:hover:before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#111827}.output{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}.text-area{padding:var(--space-4)}.meta-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}.meta-chip{background:#4b9bff10;border:1px solid var(--border);color:var(--text);padding:4px 10px;border-radius:999px;font-size:.9rem;line-height:1.6}.kpis{display:grid;grid-template-columns:1fr;grid-gap:12px;gap:12px;margin-top:12px}@media (min-width:560px){.kpis{grid-template-columns:repeat(2,1fr)}}.kpi{border:1px solid var(--border);border-left:4px solid var(--primary);background:transparent;border-radius:10px;padding:12px}.kpi.good{border-left-color:#2ecc71}.kpi.warn{border-left-color:#f1c40f}.kpi.bad{border-left-color:#e74c3c}.kpi .value{font-size:1.25rem;font-weight:700}.kpi .label{color:var(--muted)}.image-area{padding:var(--space-4);text-align:center;min-height:320px}.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.card-header h2{margin:0}.image-area img{width:100%;height:auto;max-height:72vh;object-fit:contain;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06)}.placeholder{padding:24px}.actions{display:flex;gap:10px;justify-content:center;margin-top:12px;flex-wrap:wrap}.btn{border:1px solid var(--primary);background:linear-gradient(180deg,var(--primary) 0,var(--primary-600) 100%);color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600;font-size:.95rem;text-decoration:none}.btn:hover{filter:brightness(1.05)}.btn.secondary{background:transparent;color:var(--primary)}.actions .status{color:var(--muted);font-size:.9rem;align-self:center}.alert{border:1px solid #ffdddd33;background:#fff6f608;color:#ffb4b4;border-radius:8px;padding:10px 12px}.loader{width:36px;height:36px;border:3px solid #e6edf322;border-top:3px solid var(--primary);border-radius:50%;margin:12px auto;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.footer{background-color:#2c3e50;color:#fff;text-align:center;padding:0;margin-top:auto}.footer-inner{padding:var(--space-5) var(--space-3)}.footer-cols{display:grid;grid-template-columns:1fr;grid-gap:var(--space-4);gap:var(--space-4);border-top:4px solid var(--primary-600);padding-top:var(--space-4)}@media (min-width:720px){.footer-cols{grid-template-columns:2fr 1fr 1fr}}.footer-col h3{margin-bottom:10px}.footer-list{list-style:none}.footer-list li{margin-bottom:6px}.footer a{color:#dbeafe;text-decoration:none}.footer a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid hsla(0,0%,100%,.1);padding-top:var(--space-3);margin-top:var(--space-4);text-align:center}.results-grid{display:grid;grid-gap:var(--space-4);gap:var(--space-4);grid-template-columns:1fr}@media (min-width:1000px){.results-grid.is-compare{grid-template-columns:1fr 1fr}}.result{display:grid;grid-gap:var(--space-4);gap:var(--space-4);align-content:start}.chip:focus-visible,a:focus-visible,button:focus-visible,input[type=number]:focus-visible,input[type=range]:focus-visible,select:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media (max-width:560px){.card-header{flex-direction:column;align-items:stretch;gap:10px}.card-header .actions{justify-content:flex-start;gap:8px;width:100%}.card-header .actions .btn{width:100%}.image-area img{max-height:60vh}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}