:root{--ink:#173f3a;--teal:#0b6960;--cream:#f6f5ec;--line:#ced9ce}*{box-sizing:border-box}body{background:var(--cream);color:var(--ink);font:16px/1.65 system-ui,sans-serif;margin:0}main{max-width:1180px!important;min-width:0}header{background:#073d3e;color:#fff7dd;border-radius:24px;padding:clamp(20px,4vw,46px);margin-bottom:24px}h1{font-size:clamp(2rem,4.5vw,3.8rem);font-weight:780;line-height:1.1;margin:12px 0 22px}h2{font-size:1.35rem;font-weight:750;line-height:1.3;overflow-wrap:anywhere}p{margin:.7rem 0}.eyebrow{font-size:.76rem;letter-spacing:.12em;font-weight:800}.lead{font-size:1.1rem}.notice{background:#e9efdc;border-left:4px solid #8f9e52;border-radius:0 12px 12px 0;padding:14px;color:#27483d}.card{background:#fffef8;border:1px solid var(--line);border-radius:18px;padding:22px;margin:18px 0;min-width:0}.controls{gap:10px}label{font-weight:700;margin:8px 0}.form-select,.form-control{font:inherit;border-color:#a7b8ae;max-width:100%;min-height:46px}.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0}.btn{min-height:44px;white-space:normal;border-radius:10px;font-weight:650;padding:10px 14px}.btn-primary{background:var(--teal);border-color:var(--teal)}.btn-primary:hover{background:#05473f;border-color:#05473f}.btn-outline-primary{color:var(--ink);border-color:#708d81}.btn-outline-primary:hover{background:var(--teal);border-color:var(--teal)}.btn:disabled{opacity:.6}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.work-grid .card{margin:0}.muted{color:#53665e;font-size:.9rem}pre{font:13px/1.65 ui-monospace,Consolas,monospace;background:#123c38;color:#e8f5e7;border-radius:12px;padding:16px;overflow:auto;max-height:460px;max-width:100%;white-space:pre}code{color:inherit}summary{font-weight:700;cursor:pointer;padding:12px 0}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;margin:12px 0}.table{margin:0;--bs-table-bg:transparent;--bs-table-color:var(--ink);font-size:.9rem;min-width:540px}.table td,.table th{padding:12px;vertical-align:top;max-width:360px;overflow-wrap:anywhere}.badge{background:#dce9bd;color:var(--ink);font-size:.85rem;padding:10px;white-space:normal}.result-heading{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}a{color:#00645c}header a{color:#fff}footer{font-size:.85rem;padding:28px 0}#feedback{min-height:26px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,pre:focus-visible,.table-wrap:focus-visible{outline:3px solid #bb8b1f;outline-offset:3px}[hidden]{display:none!important}@media(max-width:700px){.work-grid{grid-template-columns:1fr}.card{padding:16px}.actions>*{width:100%}.container{padding-left:12px;padding-right:12px}header{border-radius:18px}.form-select{font-size:.94rem}pre{max-height:330px}h1{font-size:2rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:360px){h1{font-size:1.75rem;overflow-wrap:anywhere}}

.compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:18px 0}.compare figure{min-width:0;margin:0}.compare figcaption{font-weight:750;margin:8px 0}.image-frame{height:300px;overflow:auto;border:1px solid #abb8a9;border-radius:10px;display:flex;align-items:center;justify-content:center;background-color:#fff;background-image:linear-gradient(45deg,#dce2da 25%,transparent 25%),linear-gradient(-45deg,#dce2da 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce2da 75%),linear-gradient(-45deg,transparent 75%,#dce2da 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.image-frame img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.image-frame[data-view=actual]{display:block}.image-frame[data-view=actual] img{max-width:none;max-height:none}.image-frame[data-background=light]{background:#fff}.image-frame[data-background=dark]{background:#102d2b}.image-meta,#hash,#source-hash{overflow-wrap:anywhere;font-size:.85rem}.display-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px}.notice[data-status=error]{border-color:#a65734;background:#fff0df}#no-output{padding:20px;background:#fff8ed;color:#583823}#after-download,#before-download{display:inline-block;padding:8px 0}pre{max-height:380px}@media(max-width:700px){.compare,.display-controls{grid-template-columns:1fr}.image-frame{height:230px}.compare{gap:22px}h1{font-size:1.95rem}}@media(max-width:360px){h1{font-size:1.6rem}.image-frame{height:200px}}