:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#203b34;background:#f1f3ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1000px;margin:auto}header{padding:38px 24px 22px}.brand{font-weight:800;letter-spacing:.08em}.badge{float:right;font-size:12px;border:1px solid #b6c7bb;border-radius:20px;padding:6px 10px}h1{font-size:clamp(28px,5vw,44px);margin:26px 0 8px;letter-spacing:.02em}header p,.note,footer{color:#60736a;line-height:1.7}main{padding:0 20px}.card{background:#fff;border:1px solid #dbe2d8;border-radius:18px;padding:24px;margin:18px 0;box-shadow:0 4px 18px #203b3405}.heading{display:flex;align-items:center;gap:12px;margin-bottom:20px}.step{font-size:12px;background:#e8eee6;border-radius:50%;width:30px;height:30px;display:grid;place-items:center}h2{font-size:20px;margin:0}button,.button{font:inherit;font-weight:650;border:1px solid #bdccc1;border-radius:10px;background:#fff;color:#244c3d;padding:13px 17px;cursor:pointer;display:inline-block;text-align:center;min-height:48px}.primary{background:#245542;color:white;border-color:#245542}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,.button:focus-within,input:focus-visible,textarea:focus-visible{outline:3px solid #d5953f;outline-offset:3px}.actions{display:flex;gap:10px;flex-wrap:wrap}.button input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.note{font-size:13px;margin-bottom:0}.fields,.adjust{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}label{display:block;font-size:14px;font-weight:650}.wide{grid-column:1/-1}input:not([type=range]):not([type=file]),textarea{display:block;width:100%;margin-top:8px;border:1px solid #bfcdc3;border-radius:8px;padding:12px;font:inherit;background:#fcfdfb;color:#203b34}input[type=range]{width:100%;display:block;margin:16px 0 4px;accent-color:#245542;min-height:28px}textarea{resize:vertical}canvas{width:100%;height:auto;display:block;border-radius:6px}#boardPreview{max-width:720px;margin:auto}#composition{background:#e7ece6;touch-action:pan-y}#composition.dragging-mode{touch-action:none}.modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.modes button{flex:1;font-size:14px;padding:12px 8px}.modes button[aria-pressed=true]{background:#e4eee5;border-color:#245542;box-shadow:inset 0 0 0 1px #245542}.save{border-top:4px solid #245542}output{float:right;font-weight:400}footer{padding:22px;font-size:12px;text-align:center}#status{line-height:1.6}#empty{padding:15px;background:#f1f3ed;border-radius:8px}@media(max-width:600px){header{padding:26px 20px 10px}.card{padding:18px}main{padding:0 12px}.fields,.adjust{grid-template-columns:1fr}.wide{grid-column:auto}.modes button{flex-basis:28%}.badge{font-size:10px}.save button{width:100%}}

[hidden]{display:none!important}#stage{position:relative}#boardSelection{position:absolute;pointer-events:none;border:3px solid #eeb44c;box-shadow:0 0 0 2px #fff8;border-radius:3px}#stage[data-mode=photo]{outline:3px solid #d5953f;outline-offset:3px}#composition.dragging-mode{cursor:grab}#composition.is-dragging{cursor:grabbing}.error{border:1px solid #b34535;background:#fff1ed;color:#8e2e20;padding:14px;border-radius:8px;line-height:1.7;overflow-wrap:anywhere}#nudge{margin-bottom:18px}#nudge .actions{margin-top:8px}#photoEditor{scroll-margin-top:16px}input[type=hidden]{display:none!important}

/* Limit touch-scroll suppression to the two size controls. */
.adjust input[type=range]{--range-thumb-size:28px;-webkit-appearance:none;appearance:none;height:44px;min-height:44px;padding:0;border:0;background:transparent;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.adjust input[type=range]::-webkit-slider-runnable-track{height:6px;background:#c8d5ca;border-radius:6px}
.adjust input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--range-thumb-size);height:var(--range-thumb-size);margin-top:-11px;border:2px solid #fff;border-radius:50%;background:#245542;box-shadow:0 1px 5px #203b3440}
.adjust input[type=range]::-moz-range-track{height:6px;background:#c8d5ca;border-radius:6px}
.adjust input[type=range]::-moz-range-thumb{width:24px;height:24px;border:2px solid #fff;border-radius:50%;background:#245542;box-shadow:0 1px 5px #203b3440}

/* Compact save notification; no backdrop, focus trap or blocked page input. */
#status.save-message{position:fixed;z-index:20;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:min(26rem,calc(100vw - 32px));margin:0;padding:10px 14px;border-radius:10px;background:#fff;font-size:1rem;font-weight:400;line-height:1.6;color:#203b34;pointer-events:none;overflow-wrap:anywhere}
#status.save-message--failure{text-wrap:balance;font-size:1.125rem;font-weight:700;color:#512b22;border:1px solid #b46b54;background:#fff6f0;box-shadow:0 3px 14px #203b3420}
