:root { --ink:#17232b; --ink-soft:#52616b; --paper:#f5f2eb; --panel:#fffdf8; --line:#d8d4ca; --accent:#c6472d; --accent-dark:#963321; --teal:#1c6d69; --yellow:#e9c85e; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); }
body { margin:0; min-width:320px; font-family:"DM Sans",sans-serif; background:var(--paper); }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }
.topbar { height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1180px)/2)); background:rgba(245,242,235,.94); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:7px; background:var(--accent); color:#fff; font:700 13px "Space Grotesk",sans-serif; letter-spacing:.04em; }
.brand strong, .brand small { display:block; }
.brand strong { font:700 16px "Space Grotesk",sans-serif; letter-spacing:-.03em; }
.brand small { margin-top:2px; color:var(--ink-soft); font-size:11px; }
.topbar-meta { color:var(--ink-soft); font-size:11px; letter-spacing:.02em; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--teal); }
.meta-divider { margin:0 8px; color:#a9a69c; }
.shell { max-width:1180px; margin:0 auto; padding:62px 24px 80px; }
.intro { max-width:780px; }
.eyebrow, .value-label, .section-label, .output-label { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.intro h1 { margin:14px 0 17px; font:700 clamp(42px,6vw,76px)/.98 "Space Grotesk",sans-serif; letter-spacing:-.065em; }
.intro h1 em { color:var(--accent); font-style:normal; }
.intro-copy { max-width:650px; margin:0; color:var(--ink-soft); font-size:17px; line-height:1.62; }
.proof-row { display:flex; flex-wrap:wrap; gap:18px; margin-top:27px; color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.04em; }
.proof-row span { padding-bottom:7px; border-bottom:2px solid var(--yellow); }
.workspace { display:grid; grid-template-columns:minmax(320px, .86fr) minmax(0,1.14fr); gap:24px; margin-top:54px; align-items:start; }
.panel, .output-panel { border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.panel { padding:24px; box-shadow:0 15px 40px rgba(23,35,43,.06); }
.panel-heading, .output-topline { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.panel-heading > div, .output-topline > div { display:flex; align-items:center; gap:10px; }
.step { color:var(--accent); font:700 11px "Space Grotesk",sans-serif; letter-spacing:.08em; }
h2, h3 { font-family:"Space Grotesk",sans-serif; }
.panel h2 { margin:0; font-size:20px; letter-spacing:-.035em; }
.panel-note { margin:11px 0 22px; color:var(--ink-soft); font-size:13px; line-height:1.55; }
.text-button, .export-button { padding:0; border:0; background:none; color:var(--accent-dark); font-size:11px; font-weight:700; text-decoration:underline; }
.export-button:disabled { color:#aaa79f; cursor:not-allowed; }
.field-label { display:block; margin-bottom:7px; color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
textarea, select { width:100%; border:1px solid #c9c6bc; border-radius:7px; background:#fff; color:var(--ink); outline:none; transition:border-color .2s,box-shadow .2s; }
textarea { min-height:260px; padding:13px; resize:vertical; font-size:13px; line-height:1.55; }
select { height:43px; padding:0 11px; font-size:13px; }
textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(198,71,45,.12); }
.input-meta { display:flex; justify-content:space-between; gap:10px; margin-top:8px; color:#8a8982; font-size:10px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.primary-button { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:21px; padding:14px 16px; border:0; border-radius:7px; background:var(--accent); color:#fff; font-weight:700; font-size:13px; transition:background .2s,transform .2s; }
.primary-button:hover { background:var(--accent-dark); transform:translateY(-1px); }
.primary-button:disabled { opacity:.65; cursor:wait; transform:none; }
.privacy-note { margin:14px 0 0; color:#7c817e; font-size:10px; line-height:1.5; }
.privacy-note span { color:var(--teal); }
.output-panel { min-height:630px; overflow:hidden; }
.output-topline { padding:19px 22px; border-bottom:1px solid var(--line); background:#faf8f2; }
.empty-state { display:grid; place-items:center; min-height:570px; padding:44px; text-align:center; }
.empty-number { color:#d9d5ca; font:700 90px/.85 "Space Grotesk",sans-serif; letter-spacing:-.08em; }
.empty-state h2 { max-width:380px; margin:22px 0 10px; font-size:24px; letter-spacing:-.04em; }
.empty-state p { max-width:420px; margin:0; color:var(--ink-soft); font-size:13px; line-height:1.65; }
.empty-list { display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; margin-top:25px; color:var(--teal); font-size:11px; font-weight:700; text-align:left; }
.empty-list span::before { content:"✓"; margin-right:6px; color:var(--accent); }
.pack-output { padding:22px; }
.fallback-note { margin-bottom:16px; padding:10px 12px; border-left:3px solid var(--yellow); background:#fff6d5; color:#6e5c1a; font-size:11px; line-height:1.5; }
.error-state { display:grid; place-items:center; min-height:420px; padding:30px; text-align:center; }
.error-state strong { font:600 22px "Space Grotesk",sans-serif; }
.error-state p { max-width:360px; margin:10px 0 16px; color:var(--ink-soft); font-size:13px; line-height:1.5; }
.pack-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--line); }
.pack-header h2 { margin:0; font-size:25px; line-height:1.05; letter-spacing:-.05em; }
.pack-header p { margin:7px 0 0; color:var(--ink-soft); font-size:12px; }
.pack-badge { flex:0 0 auto; padding:6px 8px; border-radius:4px; background:#e7f1ed; color:var(--teal); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.pack-section { padding:20px 0; border-bottom:1px solid var(--line); }
.pack-section:last-child { border-bottom:0; }
.pack-section h3 { margin:0 0 11px; font-size:13px; letter-spacing:-.02em; }
.headline-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; counter-reset:headlines; }
.headline-list li { display:grid; grid-template-columns:25px 1fr; gap:8px; padding:10px; border-radius:6px; background:#f3f0e9; font-size:13px; line-height:1.4; }
.headline-list li::before { counter-increment:headlines; content:"0" counter(headlines); color:var(--accent); font:700 11px "Space Grotesk",sans-serif; }
.idea-list { display:grid; gap:10px; }
.idea-card { padding:12px; border:1px solid var(--line); border-radius:6px; background:#faf8f2; }
.idea-card > div { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.idea-card h4 { margin:0; color:var(--ink); font:600 15px/1.25 "Space Grotesk",sans-serif; letter-spacing:-.03em; }
.idea-card > div span { flex:0 0 auto; color:var(--accent-dark); font-size:10px; font-weight:700; text-transform:uppercase; }
.idea-card p { margin:8px 0 0; color:#34434b; font-size:12px; line-height:1.45; }
.idea-card small { display:block; margin-top:8px; color:var(--ink-soft); font-size:10px; line-height:1.45; }
.idea-card small strong { color:var(--ink); }
.recommended-idea { margin-bottom:10px; padding:12px; border-left:3px solid var(--accent); background:#fff6d5; color:#6e5c1a; font-size:12px; line-height:1.45; }
.recommended-idea p { margin:5px 0 0; }
.article-draft { color:#34434b; font-size:13px; line-height:1.65; white-space:pre-line; }
.article-draft strong { color:var(--ink); }
.snippet-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.snippet { padding:12px; border:1px solid var(--line); border-radius:6px; background:#faf8f2; }
.snippet strong { display:block; margin-bottom:6px; color:var(--accent-dark); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.snippet p { margin:0; color:#34434b; font-size:12px; line-height:1.5; }
.checklist { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.checklist li { display:flex; gap:8px; color:#34434b; font-size:12px; line-height:1.45; }
.checklist li::before { content:"□"; color:var(--accent); font-size:16px; line-height:1; }
.value-strip { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:26px; align-items:center; margin-top:22px; padding:23px 25px; border-top:3px solid var(--yellow); background:var(--ink); color:#fff; }
.value-strip strong { display:block; margin-top:8px; font:600 20px/1.1 "Space Grotesk",sans-serif; letter-spacing:-.04em; }
.value-strip p { margin:0; color:#cbd3d4; font-size:12px; line-height:1.6; }
.value-points { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.value-points span { padding:7px 9px; border:1px solid #47565c; border-radius:4px; color:#dce4e3; font-size:10px; }
.how-it-works { margin-top:74px; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:17px; }
.steps-grid article { padding:22px 0; border-top:1px solid var(--line); }
.steps-grid article > span { color:var(--accent); font:700 12px "Space Grotesk",sans-serif; }
.steps-grid h3 { margin:13px 0 7px; font-size:20px; letter-spacing:-.04em; }
.steps-grid p { max-width:260px; margin:0; color:var(--ink-soft); font-size:13px; line-height:1.6; }
.footer { display:flex; justify-content:space-between; gap:18px; max-width:1180px; margin:0 auto; padding:20px 24px 30px; color:#858980; font-size:10px; }
@media (max-width:820px) { .topbar { padding:0 18px; } .topbar-meta { display:none; } .shell { padding:42px 18px 60px; } .workspace, .value-strip { grid-template-columns:1fr; } .output-panel { min-height:0; } .empty-state { min-height:420px; } .value-points { justify-content:flex-start; } .steps-grid { grid-template-columns:1fr; gap:0; } .footer { flex-direction:column; padding:20px 18px 28px; } }
@media (max-width:520px) { .intro h1 { font-size:45px; } .field-grid, .snippet-grid { grid-template-columns:1fr; } .panel, .pack-output { padding:18px; } .proof-row { gap:11px; } .idea-card > div { display:block; } .idea-card > div span { display:block; margin-top:5px; } }