:root{--paper:#f3efe6;--card:#fbf9f4;--ink:#16181b;--mute:#6d6a62;--rule:#d9d3c5;--acc:#d9411e;--acc2:#b83415;--r:14px;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans);overflow-x:hidden;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1120px;width:100%;margin:0 auto;padding:16px 20px}
.brand{display:flex;align-items:center;gap:9px;font:700 20px var(--serif);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.mark{width:18px;height:22px;border:2px solid var(--ink);border-radius:2px;position:relative;background:var(--card)}
.mark:after{content:"";position:absolute;left:3px;right:3px;top:5px;height:2px;background:var(--acc);box-shadow:0 5px 0 var(--ink),0 10px 0 var(--ink)}
.pill{display:inline-flex;align-items:center;gap:7px;font:12px var(--mono);color:var(--mute);border:1px solid var(--rule);border-radius:99px;padding:5px 11px;background:var(--card);white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:#2f8a4f}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:36px 0 30px}
.eyebrow{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc2);margin:0 0 14px}
h1{font:700 clamp(40px,6.6vw,72px)/1.02 var(--serif);letter-spacing:-.025em;margin:0 0 18px}
h2{font:700 clamp(26px,4vw,34px)/1.1 var(--serif);margin:0 0 14px;letter-spacing:-.01em}
.lede{font-size:18px;color:#3b3a36;max-width:34em;margin:0 0 26px}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:12px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 16px var(--sans);cursor:pointer;text-decoration:none;transition:transform .12s,background .12s}
.btn:hover{background:#ebe5d6}.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--acc2);border-color:var(--acc2);color:#fff}.btn.primary:hover{background:#9c2c10}
.btn.ghost{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.btn.big{min-height:54px;padding:0 30px;font-size:18px}
.btn:focus-visible,.link:focus-visible,.looks button:focus-visible,.seg button:focus-visible,.handle:focus-visible{outline:3px solid #1b5fd1;outline-offset:2px}
.fine{font-size:13.5px;color:var(--mute);margin:16px 0 0}
.hero-art{display:flex;align-items:center;justify-content:center;gap:12px;min-height:280px}
.sheet{width:100%;aspect-ratio:3/4;background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:14%;display:flex;flex-direction:column;gap:9%;box-shadow:0 14px 30px -14px rgba(40,30,10,.35)}
.sheet b{height:8%;width:55%;background:var(--ink)}.sheet u{height:4%;background:#b9b3a3;width:100%}.sheet u:nth-of-type(2){width:86%}.sheet u:nth-of-type(3){width:94%}.sheet s{height:4%;width:40%;background:var(--acc);margin-top:auto}
.skew{width:42%;transform:perspective(500px) rotateX(24deg) rotateZ(-9deg) rotateY(14deg);filter:saturate(.8) brightness(.93)}
.flat{width:38%}.arrow{font:700 28px var(--serif);color:var(--acc)}
.bar{display:flex;align-items:center;gap:16px;padding:6px 0 14px;flex-wrap:wrap}
.seg{display:flex;background:#e7e1d2;border-radius:11px;padding:3px}
.seg button{border:0;background:transparent;font:600 15px var(--sans);padding:9px 18px;border-radius:9px;cursor:pointer;color:var(--mute);min-height:40px}
.seg [aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.link{background:none;border:0;font:600 15px var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:44px;padding:0 4px}
#del{margin-left:auto;color:var(--mute)}
#editor{padding-bottom:36px}
.stage{position:relative;margin:0 auto;background:#e3ddcd;border-radius:var(--r);overflow:hidden;touch-action:none;width:100%;max-width:560px;border:1px solid var(--rule)}
#view{display:block;width:100%;height:auto}
#ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#poly{fill:rgba(217,65,30,.12);stroke:var(--acc);stroke-width:2;vector-effect:non-scaling-stroke}
.handle{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;touch-action:none;cursor:grab;background:transparent;border:0;padding:0}
.handle:after{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff;border:3px solid var(--acc);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.stage.out #ov,.stage.out #handles{display:none}
.hint{position:absolute;left:10px;bottom:10px;margin:0;font:12px var(--mono);background:rgba(22,24,27,.82);color:#fff;border-radius:8px;padding:6px 10px;max-width:calc(100% - 20px)}
.hint:empty{display:none}
.looks{display:flex;gap:8px;margin:16px auto 0;max-width:560px;flex-wrap:wrap}
.looks button{flex:1 1 110px;text-align:left;border:1.5px solid var(--rule);background:var(--card);border-radius:12px;padding:10px 12px;font:600 15px var(--sans);cursor:pointer;color:var(--ink);min-height:48px}
.looks small{display:block;font:400 12px var(--sans);color:var(--mute)}
.looks [aria-checked=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.strip{display:flex;gap:10px;margin:16px auto 0;max-width:560px;overflow-x:auto;padding-bottom:4px}
.strip button{flex:0 0 auto;width:62px;height:82px;border:2px solid var(--rule);background:var(--card);border-radius:8px;padding:0;cursor:pointer;overflow:hidden;position:relative}
.strip button[aria-current=true]{border-color:var(--acc)}
.strip img{width:100%;height:100%;object-fit:cover;display:block}
.strip em{position:absolute;right:3px;bottom:3px;font:700 11px var(--mono);background:var(--ink);color:#fff;border-radius:5px;padding:1px 5px;font-style:normal}
.save{max-width:560px;margin:20px auto 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.save .fine{flex-basis:100%;margin:4px 0 0}
.card{position:fixed;inset:0;background:rgba(22,24,27,.55);display:flex;align-items:flex-end;justify-content:center;z-index:30;padding:0}
.card[hidden]{display:none}
.card-in{background:var(--card);width:100%;max-width:460px;border-radius:22px 22px 0 0;padding:28px 24px 26px;border:1px solid var(--rule)}
.card ul{margin:0 0 20px;padding-left:20px;color:#3b3a36}
.card .btn{width:100%}.card .link{display:block;margin:8px auto 0;color:var(--mute)}
footer{text-align:center;font-size:13px;color:var(--mute);padding:22px 20px 28px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:#fff;padding:11px 16px;border-radius:11px;font-size:15px;transition:.25s;pointer-events:none;z-index:40;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:760px){.card{align-items:center}.card-in{border-radius:22px}}
@media(max-width:759px){.hero{grid-template-columns:1fr;gap:20px;padding-top:14px}.hero-art{min-height:0;order:-1;width:100%;max-width:300px;margin:0 auto}.pill{font-size:11px}.btn{flex:1 1 auto}.btn.ghost{flex:0 0 auto;padding:0 4px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
footer p{margin:6px auto;max-width:720px}footer .pay{color:var(--ink);font-weight:600}footer .link{font-size:inherit;font-weight:600}footer .pay{display:inline-block;padding:13px 4px}.faq p a{display:inline-block;padding:13px 0}footer .legal{font-size:11px;line-height:1.5}

.faq{max-width:720px;margin:28px auto;padding:0 20px}.faq h2{font:700 22px var(--serif);margin:0 0 10px}.faq details{border-top:1px solid var(--rule);padding:10px 0}.faq summary{cursor:pointer;font-weight:600;min-height:32px}.faq p{margin:8px 0 0;color:var(--mute);font-size:15px}.faq a{color:var(--ink)}
/* layout: stack hero earlier so the art is not a small block beside tall text */
@media(min-width:760px) and (max-width:900px){.hero{grid-template-columns:1fr;gap:20px;padding-top:14px}.hero-art{min-height:0;order:-1;width:100%;max-width:300px;margin:0 auto}}