:root { color-scheme: light; --ink:#17212b; --muted:#5f6b76; --line:#dce4e8; --paper:#fff; --bg:#f2f6f5; --brand:#087f6b; --brand-dark:#056555; --soft:#e8f6f2; --warn:#fff5d6; --danger:#a52b22; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); }
.site-header, main, footer { width:min(1100px, calc(100% - 24px)); margin:auto; }
.site-header { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:32px 0 20px; }
h1 { margin:0; font-size:clamp(2rem, 8vw, 4rem); letter-spacing:-.08em; }
h2 { margin:0 0 6px; font-size:1.12rem; }
h2 span { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; margin-right:5px; border-radius:50%; color:var(--brand-dark); background:var(--soft); font-size:.86rem; }
p { margin:4px 0 12px; line-height:1.5; color:var(--muted); }
.eyebrow { color:var(--brand-dark); font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.privacy-pill,.badge { flex:none; padding:6px 10px; border:1px solid #a8d9ce; border-radius:99px; color:var(--brand-dark); background:var(--soft); font-size:.78rem; font-weight:800; }
.card { padding:18px; margin-bottom:14px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:0 3px 14px #19312a0a; }
.upload-card { display:grid; gap:12px; }
.file-picker { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:12px 16px; border:2px dashed #a8cbc4; border-radius:10px; cursor:pointer; background:#fbfefd; }
.file-picker:hover { border-color:var(--brand); }
.file-picker input { position:absolute; opacity:0; pointer-events:none; }
.file-picker small { color:var(--muted); overflow-wrap:anywhere; text-align:right; }
.message { padding:10px 12px; border-radius:8px; background:var(--soft); color:var(--brand-dark); font-weight:650; }
.message.warn { color:#735400; background:var(--warn); }.message.error { color:var(--danger); background:#ffe8e5; }
.workspace { display:grid; gap:0; }.section-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.canvas-shell { display:grid; place-items:center; max-height:70vh; overflow:auto; padding:10px; border-radius:10px; background:repeating-conic-gradient(#eef2f2 0 25%, #fff 0 50%) 50% / 20px 20px; }
.selection-shell { position:relative; min-height:180px; }.selection-shell canvas { grid-area:1/1; }.selection-shell #selectionCanvas { cursor:crosshair; touch-action:none; }.selection-shell #selectionCanvas.disabled-canvas { cursor:not-allowed; }
canvas { display:block; max-width:100%; height:auto; image-rendering:auto; }
.hint { font-size:.86rem; }.controls-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:16px 0; }
label { display:block; color:var(--ink); font-size:.9rem; font-weight:700; } output { color:var(--brand-dark); }
.control-help { display:block; margin-top:6px; color:var(--muted); font-size:.78rem; font-weight:400; line-height:1.4; }
input[type=range] { width:100%; margin-top:8px; accent-color:var(--brand); }.check-row { display:flex; flex-wrap:wrap; gap:10px 20px; margin-bottom:15px; }.check-row input { accent-color:var(--brand); }
.preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; } figure { margin:0; min-width:0; } figcaption { margin-bottom:5px; color:var(--muted); font-size:.8rem; font-weight:750; } figure canvas { width:100%; border:1px solid var(--line); background:repeating-conic-gradient(#eef2f2 0 25%, #fff 0 50%) 50% / 14px 14px; }
.button-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } button { padding:10px 13px; border:0; border-radius:8px; color:white; background:var(--brand); cursor:pointer; font:inherit; font-size:.88rem; font-weight:800; } button:hover { background:var(--brand-dark); } button:disabled { cursor:not-allowed; opacity:.55; }.secondary { color:var(--brand-dark); border:1px solid #b5d9d1; background:#f8fffd; }.secondary:hover { background:var(--soft); }
.rotation-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } .rotation-row button { padding-inline:8px; }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.two-column > div + div { padding-left:24px; border-left:1px solid var(--line); }.two-column button { margin-top:12px; }
.metadata { font-size:.84rem; }.metadata-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }.metadata-highlights div { padding:14px; border:1px solid #b5d9d1; border-radius:10px; background:var(--soft); }.metadata-highlights dt { color:var(--muted); font-weight:750; }.metadata-highlights dd { margin:5px 0 0; color:var(--brand-dark); font-size:1.15rem; font-weight:900; }.metadata details { border:1px solid var(--line); border-radius:10px; background:#fbfefd; }.metadata summary { padding:11px 13px; cursor:pointer; color:var(--brand-dark); font-weight:850; }.metadata-details-body { overflow:auto; padding:0 12px 12px; border-top:1px solid var(--line); }.metadata table { width:100%; border-collapse:collapse; }.metadata th,.metadata td { padding:7px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }.metadata th { width:190px; color:var(--muted); }.metadata-palette { margin-top:12px; }.metadata-palette .palette-strip { margin:0 10px 10px; }.chunk-list { display:flex; flex-wrap:wrap; gap:5px; }.chunk { padding:2px 7px; border-radius:99px; background:var(--soft); color:var(--brand-dark); font-family:ui-monospace,monospace; }
footer { padding:12px 0 32px; color:var(--muted); font-size:.8rem; text-align:center; } footer a { color:var(--brand-dark); }
@media(max-width:650px){ .metadata-highlights { grid-template-columns:1fr; } .site-header { align-items:start; }.privacy-pill { margin-top:8px; }.section-heading { display:block; }.section-heading button { margin-top:4px; }.two-column { grid-template-columns:1fr; }.two-column > div + div { padding:18px 0 0; border-top:1px solid var(--line); border-left:0; }.preview-grid { grid-template-columns:1fr; }.vertical-mobile { display:grid; } }

.palette-options { margin:12px 0; padding:10px 12px; border-radius:8px; background:var(--soft); }
.palette-options .hint { margin:6px 0 0; }
.result-previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
.result-previews figure[hidden] { display:none; }
.operation-card, .step-card { padding:0; overflow:hidden; }
.operation-card > summary, .step-card > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px; cursor:pointer; list-style:none; }
.operation-card > summary::-webkit-details-marker, .step-card > summary::-webkit-details-marker { display:none; }
.operation-card > summary::after, .step-card > summary::after { content:'−'; display:grid; flex:none; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; color:var(--brand-dark); background:var(--soft); font-weight:900; }
.operation-card:not([open]) > summary::after, .step-card:not([open]) > summary::after { content:'+'; }
.summary-heading { display:flex; min-width:0; align-items:center; gap:7px; color:var(--ink); font-size:1.12rem; font-weight:800; }
.step-number { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; color:var(--brand-dark); background:var(--soft); font-size:.86rem; }
.operation-body, .step-body { padding:0 18px 18px; border-top:1px solid var(--line); }
.operation-body > p:first-child, .operation-body .section-heading, .step-body > p:first-child, .step-body .section-heading { margin-top:14px; }
.operation-card:not([open]), .step-card:not([open]) { background:#fbfefd; }
.result-card { border-color:#a8d9ce; }
.scanline-card { display:grid; gap:10px; }
.scanline-status { margin:0; padding:10px 12px; border-radius:8px; color:var(--brand-dark); background:var(--soft); font-size:.88rem; font-weight:700; }
.scanline-status.warn { color:#735400; background:var(--warn); }
.scanline-status.error { color:var(--danger); background:#ffe8e5; }
.scanline-layout { display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:14px; align-items:start; }
.scanline-legend { overflow:auto; border:1px solid var(--line); border-radius:10px; background:#fbfefd; font-size:.84rem; }
.scanline-legend table { width:100%; border-collapse:collapse; }
.scanline-legend th,.scanline-legend td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.scanline-legend tr:last-child th,.scanline-legend tr:last-child td { border-bottom:0; }
.scanline-legend th { color:var(--muted); font-weight:800; }
.scanline-legend td { color:var(--ink); font-variant-numeric:tabular-nums; text-align:right; }
.filter-swatch { display:inline-block; width:.85rem; height:.85rem; margin-right:7px; border:1px solid #0002; border-radius:3px; vertical-align:-.12em; background:var(--swatch); }
.filter-swatch.none { --swatch:#e53935; }
.filter-swatch.sub { --swatch:#fb8c00; }
.filter-swatch.up { --swatch:#1e88e5; }
.filter-swatch.average { --swatch:#43a047; }
.filter-swatch.paeth { --swatch:#8e24aa; }
.scanline-shell { max-height:55vh; }
.scanline-shell canvas { width:100%; border:1px solid var(--line); background:repeating-conic-gradient(#eef2f2 0 25%, #fff 0 50%) 50% / 14px 14px; }
@media(max-width:650px){ .scanline-layout { grid-template-columns:1fr; } }
select { width:100%; margin-top:8px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; font:inherit; font-weight:650; }
.disabled-control { opacity:.48; }
.disabled-control input, .disabled-control select { cursor:not-allowed; }
.palette-strip { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 12px; padding:8px; border:1px solid var(--line); border-radius:10px; background:#fbfefd; }
.palette-chip { width:22px; height:22px; border:1px solid #0003; border-radius:5px; background:var(--chip); }.palette-chip.translucent { background:linear-gradient(var(--chip),var(--chip)),linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%),#fff; background-position:0 0,0 0,0 10px,10px -10px,-10px 0,0 0; background-size:auto,20px 20px,20px 20px,20px 20px,20px 20px,auto; }
.reduction-preview canvas { min-height:120px; }

.resize-algorithm { margin:12px 0 0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fbfefd; }
.resize-algorithm legend { padding:0 4px; color:var(--muted); font-weight:850; }
.resize-algorithm label { display:block; margin:7px 0; font-weight:650; }