@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');
:root{--ink:#242b28;--muted:#7e8580;--line:#e8e6df;--paper:#fffefa;--green:#325d4b;--pale:#eef2ed;--orange:#dc7954}*{box-sizing:border-box}body{margin:0;background:#f6f5f0;color:var(--ink);font-family:'DM Sans',sans-serif}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100vw - 1160px)/2),28px);background:#fbfaf7}.brand{text-decoration:none;color:var(--ink);font-weight:700;font-size:17px;display:flex;align-items:center;gap:10px}.brand-icon{color:var(--green);font-size:22px}.brand-tag{font:10px 'DM Mono',monospace;letter-spacing:.08em;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;margin-left:4px}.top-note{color:var(--muted);font-size:13px}.intro{max-width:1160px;margin:64px auto 35px;padding:0 28px}.eyebrow{font:10px 'DM Mono',monospace;letter-spacing:.14em;color:var(--green)}h1{font-size:clamp(42px,6vw,67px);line-height:1.03;letter-spacing:-.045em;margin:13px 0 17px;font-weight:600}h1 em{font-family:'Playfair Display',serif;color:var(--green)}.lede{max-width:550px;line-height:1.65;color:#68716b;font-size:15px;margin:0}.steps{max-width:1160px;padding:0 28px;margin:0 auto 23px;display:flex;align-items:center;gap:13px;color:#9a9f99;font-size:12px}.steps i{height:1px;background:#deded6;width:40px}.step{display:flex;align-items:center;gap:8px}.step b{width:23px;height:23px;border:1px solid #d9ddd7;border-radius:50%;display:grid;place-items:center;font:11px 'DM Mono',monospace}.step.active{color:var(--green)}.step.active b{background:var(--green);border-color:var(--green);color:white}.workspace{max-width:1160px;margin:auto;padding:0 28px;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(320px,.8fr);gap:23px;align-items:start}.editor{display:grid;gap:14px}.card,.preview-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:23px}.section-title{display:flex;gap:13px;align-items:flex-start;margin-bottom:20px}.number{font:10px 'DM Mono',monospace;color:#a1a69e;padding-top:4px}.section-title h2,.preview-head h2{font-size:16px;margin:0 0 5px;letter-spacing:-.02em}.section-title p{font-size:12px;color:var(--muted);margin:0}.button{border:0;border-radius:7px;font:600 13px 'DM Sans',sans-serif;cursor:pointer}.secondary{background:var(--pale);color:var(--green);padding:12px 15px}.secondary span{font-size:17px;margin-right:7px}.dropzone{position:relative;border:1px dashed #cfd5cd;border-radius:8px;min-height:112px;margin-top:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;background:#fcfcf8}.dropzone:hover{border-color:var(--green);background:#f8faf6}.dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload-icon{color:var(--green);font-size:21px;font-weight:600}.dropzone strong{font-size:12px}.dropzone small{color:var(--muted);font-size:11px}.tip{display:flex;gap:10px;margin-top:14px;background:#f6f5ef;padding:11px 13px;border-radius:7px;color:#6f756f}.tip>span{color:#b47d47}.tip p{font-size:11px;line-height:1.55;margin:0}.tip b{color:#444b46}.text-card textarea{width:100%;height:116px;resize:vertical;border:1px solid var(--line);border-radius:7px;padding:13px;font:16px/1.6 'Playfair Display',serif;color:var(--ink);background:#fffefa;outline:none}.text-card textarea:focus,input:focus{border-color:#8aa18f}.text-footer{display:flex;justify-content:space-between;align-items:center;color:#9a9f99;font:10px 'DM Mono',monospace;margin-top:10px}.text-footer label{display:flex;gap:8px;align-items:center}.text-footer input{width:80px;accent-color:var(--green)}.text-footer label span{color:var(--green);min-width:28px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}.settings-grid label{font-size:11px;color:#737a74;display:flex;justify-content:space-between;align-items:center}.settings-grid label span{display:flex;align-items:center;gap:5px;color:#9a9f99}.settings-grid input{width:57px;padding:6px 5px;border:1px solid var(--line);border-radius:5px;font:11px 'DM Mono',monospace;color:var(--ink);background:white}.settings-hint{font-size:10px;color:#939991;line-height:1.5;margin:14px 0 0}.preview-column{position:sticky;top:18px;display:grid;gap:12px}.preview-card{padding:23px}.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.preview-head .eyebrow{font-size:9px}.preview-head h2{font-size:17px;margin-top:5px}.live-dot{font:9px 'DM Mono',monospace;color:var(--green);background:#edf2ed;padding:6px 8px;border-radius:12px}.paper-wrap{padding:12px;background:#f0efe9;border-radius:8px;display:flex;justify-content:center}.paper{width:100%;max-width:305px;aspect-ratio:100/140;background:#fffefa;box-shadow:0 2px 10px #252b2810;position:relative;overflow:hidden}.paper canvas{position:absolute;inset:0;width:100%;height:100%}.paper-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#a9ada6}.paper-placeholder span{font-size:23px;color:#bac7b9}.paper-placeholder p{font-size:11px;line-height:1.55}.preview-meta{display:flex;justify-content:space-between;font:10px 'DM Mono',monospace;color:#969c94;margin:13px 0 15px}.preview-meta i{display:inline-block;width:7px;height:7px;border:1px dashed #91a593;border-radius:2px;margin-right:5px}.primary{width:100%;padding:14px;background:var(--green);color:white;display:flex;justify-content:center;gap:12px;align-items:center}.primary:hover{background:#254b3a}.primary span{font-size:17px}.downloads{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.downloads a{background:#edf2ed;color:var(--green);padding:11px 8px;text-align:center;text-decoration:none;border-radius:6px;font-size:11px;font-weight:600}.hidden{display:none}.format-note{text-align:center;font-size:10px;color:#9a9f99;margin:11px 0 0}.notice{background:#f3f1e9;border:1px solid #e9e5d9;border-radius:8px;padding:12px 13px;display:flex;gap:9px;color:#817754}.notice>span{font-size:14px}.notice p{font-size:10px;line-height:1.5;margin:0;color:#777366}.notice b{color:#615c4c}footer{max-width:1160px;margin:24px auto 40px;padding:0 28px;color:#999f97;font-size:10px}
@media(max-width:760px){.topbar{padding:0 18px}.top-note{display:none}.intro{margin:42px auto 28px;padding:0 19px}.workspace{grid-template-columns:1fr;padding:0 16px;gap:14px}.steps{padding:0 19px}.preview-column{position:static}.paper{max-width:270px}.card,.preview-card{padding:18px}footer{padding:0 18px}.settings-grid{gap:12px 9px}}
/* Refined layout, spacious writing template controls, and an optional dark palette. */
.top-actions{display:flex;align-items:center;gap:18px}.theme-toggle{border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);padding:8px 12px;font:11px 'DM Sans',sans-serif;cursor:pointer}.theme-toggle span{margin-left:5px}.variation-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}.variation-controls label{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:center;color:#7e8580;font:10px 'DM Mono',monospace}.variation-controls input{grid-column:1/-1;width:100%;accent-color:var(--green)}.variation-controls label span{color:var(--green)}.dropzone.dragover{border-color:var(--green);background:var(--pale)}.dropzone.needs-file{border-color:var(--orange);background:#fff8f3}
body.dark{--ink:#edf0eb;--muted:#a1aaa2;--line:#343d38;--paper:#202723;--green:#9bc1a6;--pale:#2b3830;--orange:#e59472;background:#151a17;color:var(--ink)}body.dark .topbar{background:#1b211e}body.dark .brand,body.dark .theme-toggle{color:var(--ink)}body.dark .brand-icon,body.dark .eyebrow,body.dark .number{color:#9bc1a6}body.dark h1 em{color:#a7c9af}body.dark .lede,body.dark .section-title p,body.dark .dropzone small,body.dark .settings-grid label,body.dark .settings-hint,body.dark footer{color:#a0aaa2}body.dark .steps i{background:#39433d}body.dark .step b{border-color:#465149}body.dark .card,body.dark .preview-card{background:#202723;border-color:#343d38}body.dark .dropzone,body.dark .text-card textarea,body.dark .settings-grid input{background:#191f1b;color:#e9eee9;border-color:#3b4640}body.dark .tip,body.dark .notice{background:#282a23;border-color:#414138;color:#c1b996}body.dark .tip p,body.dark .notice p{color:#bbb9a9}body.dark .tip b,body.dark .notice b{color:#e0dcc4}body.dark .paper-wrap{background:#171d19}body.dark .paper{background:#fdfcf5}body.dark .live-dot,body.dark .downloads a{background:#2b3830;color:#c3dfc9}body.dark .format-note,body.dark .preview-meta{color:#a1aaa2}body.dark .theme-toggle{background:#252d28;border-color:#3b4640}body.dark .secondary{background:#2b3830;color:#c3dfc9}
@media(max-width:760px){.top-actions{gap:8px}.theme-toggle{padding:7px 9px}.top-note{display:none}.variation-controls{grid-template-columns:1fr}}
.template-downloads{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.template-downloads .secondary{padding:10px 7px;font-size:11px}.template-downloads .secondary span{margin-right:3px}.top-actions .theme-toggle{white-space:nowrap}