:root{--ink:#16232b;--dim:#5d7078;--line:#dde5e6;--paper:#f6f4ef;--panel:#ffffff;--accent:#0f6f66;--accent-ink:#ffffff;--warm:#b4542a;--ok:#1d7a4a;--radius:14px}
html[data-theme=dark]{--ink:#e4edf0;--dim:#8ba0a8;--line:#22343a;--paper:#0c1417;--panel:#121e22;--accent:#2fd4be;--accent-ink:#06211d;--warm:#f0a07a;--ok:#5fd59a}
@media (prefers-color-scheme:dark){body.pub{--ink:#e4edf0;--dim:#8ba0a8;--line:#22343a;--paper:#0c1417;--panel:#121e22;--accent:#2fd4be;--accent-ink:#06211d;--warm:#f0a07a}}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--paper)}
a{color:var(--accent)}
.dim{color:var(--dim);font-weight:400}
.btn{display:inline-block;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);padding:.7rem 1.3rem;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.code{font:600 .95rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.pill{display:inline-block;font-size:.8rem;padding:.15rem .6rem;border-radius:999px;background:var(--line);color:var(--dim);white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.err{background:color-mix(in srgb,var(--warm) 12%,transparent);color:var(--warm);padding:.6rem .9rem;border-radius:10px}
.empty{color:var(--dim)}

main.cd{max-width:760px;margin:0 auto;padding:1.5rem 1rem 4rem}
main.cd h1{font-size:1.7rem;margin:.5rem 0 1rem}
main.cd h2{font-size:1.15rem;margin:2.2rem 0 .6rem}
.back{margin:0;font-size:.95rem}
.back a{text-decoration:none}
ul.cards,ul.profiles{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
ul.cards li,ul.profiles li{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-top:1px solid var(--line)}
ul.cards li:first-child,ul.profiles li:first-child{border-top:0}
ul.cards li a,ul.profiles li a{flex:1;display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline;color:inherit;text-decoration:none}
ul.cards .who{font-weight:600}
form.find{margin:1.4rem 0 0}
form.find label{display:block;font-weight:600;margin-bottom:.35rem}
.row{display:flex;gap:.5rem}
input:not([type=radio]):not([type=checkbox]),textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem;width:100%}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
form.find input{text-transform:uppercase;letter-spacing:.08em;max-width:14rem}
form.profile label{display:block;font-weight:600;margin:0 0 1rem}
form.profile label input,form.profile label textarea{margin-top:.3rem;font-weight:400}
fieldset{border:0;padding:0;margin:0 0 1rem}
legend{font-weight:600;margin-bottom:.3rem;padding:0}
.pair{display:grid;grid-template-columns:7.5rem 1fr;gap:.5rem;margin-bottom:.45rem}
form.danger{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1rem}

body.pub{min-height:100vh;display:flex;flex-direction:column}
.pubwrap{flex:1;width:100%;max-width:440px;margin:0 auto;padding:1.5rem 1rem 2rem;display:flex;flex-direction:column;gap:1rem}
.pubfoot{text-align:center;padding:1rem;font-size:.8rem}
.pubfoot a{color:var(--dim);text-decoration:none}
.kicker{margin:0;color:var(--dim);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.hero{margin-top:12vh}
.hero h1{font-size:2rem;line-height:1.15;margin:.4rem 0 1rem}
.note h1{font-size:1.5rem;margin:.3rem 0 .6rem}
.ownerbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.9rem;padding:.6rem .9rem;border-radius:10px;background:var(--panel);border:1px dashed var(--line)}
.personal{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);padding:1.2rem 1.3rem}
.personal .hello{margin:0 0 .3rem;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.personal .note{margin:0;font-size:1.2rem;line-height:1.4}
.personal .offer{margin:.9rem 0 0;padding:.7rem .9rem;border-radius:10px;background:color-mix(in srgb,var(--accent-ink) 14%,transparent);font-weight:600}
.contact{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.3rem}
.contact h1{font-size:1.7rem;line-height:1.2;margin:0}
.contact .role{margin:.2rem 0 0;color:var(--dim)}
.contact .save{margin-top:1.1rem;width:100%;text-align:center}
ul.ways{list-style:none;margin:1rem 0 0;padding:0}
ul.ways li a{display:flex;flex-direction:column;padding:.65rem 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;word-break:break-word}
ul.ways li a .dim{font-size:.8rem;text-transform:capitalize}
.addr,.about{margin:1rem 0 0;color:var(--dim)}
.choice{display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;margin:.4rem 0;background:var(--panel)}
.choice input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--accent)}
.cardline{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;color:var(--dim)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem}
form.inline{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
select{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem;max-width:100%}
form.danger .btn{margin:0 .4rem .4rem 0}
.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);padding:.6rem .9rem;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stage{position:relative;width:100%;max-width:640px;margin:1rem 0;border-radius:3.2% / 5%;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.18),0 8px 28px rgba(0,0,0,.12);background:#fff;user-select:none;touch-action:none}
.stage.tall{max-width:360px;border-radius:5% / 3.2%}
.stage img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.qrbox{position:absolute;background:#fff;color:#000;cursor:move;outline:2px dashed var(--accent);outline-offset:2px;display:flex;flex-direction:column;align-items:center}
.qrbox:focus-visible,.qrbox.moving{outline-style:solid;outline-width:3px}
.qrbox svg{display:block;width:100%;aspect-ratio:1;flex:none;pointer-events:none}
.qrbox .qrcode{font:700 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;margin-top:-1px;pointer-events:none;white-space:nowrap}
.qrbox .grip{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #fff;cursor:nwse-resize;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.nums label{margin:0!important;min-width:0}
.nums label input{display:block;margin-top:.3rem}
.hint{margin:.4rem 0 1rem;font-size:.9rem}
form.profile label.check{display:flex;gap:.5rem;align-items:center;font-weight:400}
ul.designs .thumb{height:3.6rem;width:auto;max-width:5.8rem;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
ul.designs li a{align-items:center}