:root{font:16px system-ui;color:#243b3c;background:#f2efe7}*{box-sizing:border-box}body{margin:0}main{max-width:1300px;margin:auto;padding:40px}header{border-bottom:2px solid #243b3c;padding-bottom:28px}small{letter-spacing:.2em;font-weight:700;color:#426d62}h1{font:clamp(2rem,5vw,4.5rem)/1.05 Georgia;margin:20px 0}h1 em{font-weight:400;color:#647f70}h2{font:2rem Georgia}nav,.controls{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}label{display:flex;flex-direction:column;gap:7px;font-size:.85rem;font-weight:600}input,select,textarea,button{font:inherit;border:1px solid #a6b3a9;background:#fffdf6;border-radius:5px;padding:10px;color:inherit}button{cursor:pointer;margin:4px;background:#e0e8dc}button:hover{background:#c8d9bf}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ac623d;outline-offset:2px}input[type=number]{width:90px}.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}article{background:#fffdf6;border:1px solid #c6cbbb;padding:20px;border-radius:10px}.pair{display:flex;gap:12px;margin:20px 0}figure{margin:0;position:relative;width:50%}figure img{width:100%;display:block;image-rendering:pixelated}figcaption{font-size:.8rem;margin-top:8px}.rasterbox{position:relative}.patch{position:absolute;border:2px dashed #f7bf4c;pointer-events:none}.patchfields{display:flex;flex-wrap:wrap;gap:6px}.patchfields input{width:54px;padding:7px}.good{color:#246344}.bad{color:#a33028}.status{padding:16px;background:#e7dfcb;border-left:4px solid #aa643c}section{margin:30px 0}textarea{width:100%;height:180px;font:13px monospace}footer{font-size:.85rem;line-height:1.6;border-top:1px solid #aaa;padding-top:20px;margin-top:40px}@media(max-width:600px){main{padding:18px}.controls{flex-direction:column}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}