:root{color-scheme:light;font-family:Georgia,serif;background:#e0d5bd;color:#493c32}*{box-sizing:border-box}body{margin:0}main{max-width:1000px;margin:auto;padding:clamp(16px,4vw,38px)}nav,.controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px}nav{justify-content:space-between}a{color:#42675b;text-underline-offset:4px}nav a,figure a{display:inline-flex;align-items:center;min-height:44px}header{padding:26px 0}h1{font-size:clamp(36px,7vw,60px);font-weight:normal;margin:0 0 16px}h2{font-size:28px;font-weight:normal;margin-top:0}p{line-height:1.6;max-width:76ch}.eyebrow{font:12px system-ui,sans-serif;letter-spacing:.17em}section{background:#f4ecda;border:1px solid #c9b796;border-radius:16px;padding:clamp(14px,3vw,25px);margin-bottom:24px;overflow:hidden}.controls{margin-bottom:18px;font:15px system-ui,sans-serif}.controls label{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:100%}button,select{font:16px system-ui,sans-serif;min-height:44px;max-width:100%;padding:9px 12px;color:#493c32;background:#fff9e8;border:1px solid #aa9570;border-radius:8px}button{cursor:pointer}button:disabled{cursor:default;opacity:.6}button[aria-pressed=true]{background:#587362;color:white}:focus-visible{outline:3px solid #a26944;outline-offset:3px}.paper{background:#ede4ce;border:1px solid #c9b796;border-radius:8px;overflow:hidden}canvas{display:block;image-rendering:pixelated;max-width:100%;height:auto}canvas[hidden],img[hidden]{display:none}#stage{width:min(100%,720px);margin:auto}.caption,figcaption,#status{font:14px/1.55 system-ui,sans-serif;color:#655640}.zones{display:flex;flex-wrap:wrap;gap:18px}.zones label{display:grid;gap:7px;font:15px system-ui,sans-serif}.zones input{width:86px;max-width:100%;height:44px;padding:4px;background:#fff9e8;border:1px solid #aa9570;border-radius:6px}.check{min-height:44px}.check input{width:22px;height:22px;accent-color:#587362}.frame-pairs{display:grid;grid-template-columns:1fr 1fr;gap:24px}figure{margin:0;min-width:0}.frames{display:flex;align-items:end;justify-content:center;gap:28px;min-height:112px;padding:18px;background:#ede4ce;border-radius:8px;margin-top:10px}.frames canvas{flex:none}img{display:block;max-width:100%;height:auto}.sheet{width:100%}footer{font:14px/1.6 system-ui,sans-serif}@media(max-width:520px){.frame-pairs{grid-template-columns:1fr}.controls label:not(.check){width:100%}.controls select{flex:1;min-width:0}.zones{gap:12px}.zones input{width:72px}}
