:root{--paper:#f8f5e8;--card:#fffdf7;--ink:#1f1d19;--soft:#5d5b54;--line:#e0dccd;--accent:#5645d4;--hl:#f9e79f;--flag:#dd5b00;--ok:#1aae39}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
.sr{position:absolute;left:-9999px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(16px,4vw,48px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:flex;gap:8px;align-items:center}
.mark{display:grid;place-items:center;width:26px;height:26px;background:var(--ink);color:var(--paper);border-radius:7px;font-family:Georgia,serif}
.tag{margin:0;color:var(--soft);font-size:14px}
main{padding:0 clamp(16px,4vw,48px) 64px}
button{font:inherit;cursor:pointer}
.primary{background:var(--accent);color:#fff;border:0;border-radius:999px;padding:12px 22px;font-weight:600;text-decoration:none;display:inline-block;text-align:center}
.primary:hover{background:#4534b3}
.ghost{background:transparent;border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--ink)}
.ghost:hover{border-color:var(--ink)}
.link{background:none;border:0;color:var(--soft);text-decoration:underline;padding:8px 0}
.draft{max-width:760px;margin:0 auto;padding-top:clamp(28px,6vw,72px)}
h1{font:600 clamp(30px,6vw,52px)/1.08 Georgia,"Iowan Old Style",serif;letter-spacing:-.02em;margin:0 0 14px}
h1 em{background:linear-gradient(transparent 60%,var(--hl) 60%);font-style:italic}
.intro p{color:var(--soft);font-size:18px;max-width:56ch;margin:0 0 24px}
textarea{width:100%;min-height:300px;resize:vertical;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:18px;font:15px/1.6 ui-monospace,"SF Mono",Menlo,monospace;color:var(--ink)}
textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.row{display:flex;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.pub{max-width:1240px;margin:0 auto;padding-top:20px}
.bar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.skins{display:flex;gap:4px;background:#ece8d6;padding:4px;border-radius:999px;overflow-x:auto;max-width:100%}
.skin{background:none;border:0;border-radius:999px;padding:8px 14px;white-space:nowrap;color:var(--soft)}
.skin.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px #0002;font-weight:600}
i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:#fff;border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:1px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.hint{margin:0 0 10px;color:var(--soft);font-size:14px}
.stage{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,5vw,64px);min-height:420px;box-shadow:0 20px 40px -28px #3a2a9955}
.stage h1.t{font-size:clamp(28px,5vw,44px)}
.stage .p{margin:0 0 1.1em;padding:2px 6px;margin-left:-6px;border-radius:6px;outline:none;position:relative;overflow-wrap:anywhere}
.stage .p:focus{background:#5645d40d;box-shadow:0 0 0 2px #5645d433}
.stage .p.changed::before{content:"";position:absolute;left:-14px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--ok)}
.stage mark{background:none;text-decoration:underline wavy var(--flag) 1.5px;text-underline-offset:4px;color:inherit}
.stage.blog{font:19px/1.7 Georgia,"Iowan Old Style",serif;max-width:none}
.stage.blog .p{max-width:62ch}
.stage.email{font:16px/1.6 -apple-system,"Segoe UI",sans-serif;background:#fff;max-width:600px;margin:0 auto;border-top:6px solid var(--accent)}
.stage.email::before{content:"Subject: your newsletter · Preview text";display:block;font-size:12px;color:var(--soft);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:22px}
.stage.social{background:#fff;max-width:520px;margin:0 auto;padding:14px;font:15px/1.45 system-ui,sans-serif;min-height:0}
.stage.social .p{border:1px solid var(--line);border-radius:14px;padding:14px 14px 14px 56px;margin:0 0 -1px;position:relative;margin-left:0}
.stage.social .p::after{content:"";position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--accent)}
.stage.social h1.t{font:700 20px/1.3 system-ui;margin:0 0 12px}
.stage.print{background:#fff;font:12pt/1.5 "Times New Roman",serif;max-width:640px;margin:0 auto;columns:1;text-align:justify;hyphens:auto}
.stage.print .p{text-indent:1.5em;margin-bottom:0}
.stage.print h1.t{text-align:center;font-size:22pt}
.side{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;position:sticky;top:12px}
.side h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 8px}
.flags{list-style:none;margin:0 0 18px;padding:0;max-height:220px;overflow:auto}
.flags li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer}
.flags li b{color:var(--flag)}
.edits{margin-bottom:14px;max-height:240px;overflow:auto;font-size:14px}
.edits .none,.flags .none{color:var(--soft);margin:0}
.edit{padding:8px 0;border-bottom:1px solid var(--line)}
del{background:#fde0ec;color:#a02e6d}ins{background:#d9f3e1;color:#136b25;text-decoration:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions .ghost{font-size:14px;padding:8px 12px}
.pay{margin-top:16px;padding:14px;border-radius:12px;background:var(--paper)}
.pay p{margin:0 0 10px;font-size:14px}
.pay.done{display:none}
@media(max-width:860px){.split{grid-template-columns:minmax(0,1fr)}.side{position:static}.tag{display:none}.stage.blog{font-size:18px}}
@media print{.top,.bar,.side,.hint{display:none}}

.foot{text-align:center;padding:24px 16px;font-size:13px;color:#6b6b6b}.foot a{color:inherit}
.trialnote{background:#ecebfb;color:#2b2570;border-radius:12px;padding:10px 14px;font-size:15px}.trialnote[hidden]{display:none}