:root{font-family:Calibri,"Segoe UI",sans-serif;color:#18342d;background:#f2f5f3;color-scheme:light}
*{box-sizing:border-box}body{margin:0;padding:25px 18px}main{max-width:1000px;margin:auto}header{display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;border-bottom:2px solid #247c66;padding-bottom:12px}h1{font-size:29px;margin:0}header span,footer{color:#53665f}p{line-height:1.5}.instruction{font-size:22px;font-weight:700;margin-bottom:8px}kbd{background:#fff;border:1px solid #bdcbc5;border-radius:4px;padding:2px 6px;font-family:inherit;white-space:nowrap}button{font:inherit;font-weight:600;padding:9px 16px;min-height:41px;border:1px solid #9fb5ab;border-radius:7px;background:#fff;color:#18342d;cursor:pointer}button:hover:enabled{background:#e7f1ec}button:disabled{opacity:.45;cursor:default}button.primary{background:#176a55;color:#fff;border-color:#176a55}button.primary:hover:enabled{background:#105540}button:focus-visible,#drop-zone:focus-visible{outline:3px solid #b9851c;outline-offset:3px}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}#drop-zone{background:#fff;border:2px dashed #aac0b5;border-radius:10px;padding:18px;margin-top:20px}#drop-zone.drag{border-color:#176a55;background:#e5f4ec}#empty{text-align:center;color:#657a70;margin:26px 0}figure{margin:18px 0 0}#preview{display:block;max-width:100%;max-height:370px;width:auto;height:auto;object-fit:contain;margin:0 auto;border:1px solid #d8e1dc}figcaption{font-size:14px;text-align:center;margin-top:8px;color:#63776d}.decision{margin-top:17px}progress{width:150px;accent-color:#176a55}#status{min-height:24px;color:#425c50}.output{background:#fff;border:1px solid #c4d3cb;border-radius:10px;padding:16px}.output-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.output-heading label{font-weight:700;font-size:19px}textarea{font:18px/1.5 Calibri,"Segoe UI",sans-serif;width:100%;min-height:200px;resize:vertical;border:1px solid #acbfb4;border-radius:6px;padding:13px;color:#18342d;background:#fff;overflow:hidden}textarea:focus{outline:2px solid #247c66;outline-offset:1px}footer{font-size:14px;line-height:1.5;margin:18px 0}a{color:#176a55}[hidden]{display:none!important}@media(max-width:500px){body{padding:16px 12px}#drop-zone{padding:12px}.instruction{font-size:20px}button{padding:8px 12px}}
:root{color:#17211F;background:#EAF2EF}main{max-width:1080px}header{align-items:center;flex-wrap:nowrap;background:#0B2923;color:white;border:0;border-radius:14px;padding:14px 20px}header span{color:white}header button{margin-left:auto}.duck{width:54px;height:54px;object-fit:contain}button.primary{background:#188F87;border-color:#188F87}button.primary:hover:enabled{background:#0B2923}button:focus-visible,#drop-zone:focus-visible{outline-color:#188F87}#drop-zone,.output{border-color:#C8D2D0;border-radius:14px}#preview{max-height:420px}a{color:#1F6FB2}.dark{color-scheme:dark;background:#0B2923;color:white}.dark #drop-zone,.dark .output,.dark textarea,.dark button,.dark kbd{background:#172F29;color:white;border-color:#526A74}.dark #status,.dark #empty,.dark figcaption,.dark footer{color:#C8D2D0}.dark button.primary{background:#188F87}.dark a{color:#8DC7F5}@media(max-width:500px){header{padding:12px;gap:10px}.duck{width:40px;height:40px}h1{font-size:24px}header span{font-size:13px}header button{padding:8px}}
