/* romanpeschke.com guide template. Monochrome, dark opening band. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:root{
  --bg:#fafafa;--card:#fff;--ink:#111;--body:#222;--mute:#5f5f5f;--line:#e4e4e4;--code:#ededed;
  --band:#111;--band-ink:#fff;--band-mute:#b3b3b3;--band-line:#2a2a2a;--band-card:#1c1c1c;
  --acc:#5457e3;--acc-soft:#e0e7ff;--acc-ink:#c7d2fe;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:680px;--gutter:22px;
}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--acc)}
::selection{background:var(--acc-soft);color:var(--ink)}
.band ::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
html{scrollbar-color:#bdbdbd var(--bg)}
code{font-family:var(--mono);font-size:.88em;background:var(--code);padding:2px 6px;border-radius:5px;color:var(--ink)}
strong{color:var(--ink)}
h1,h2,h3{color:var(--ink);text-wrap:balance}

/* Layout */
.container{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}

/* Opening band: header + hero share the dark ground */
.band{background:var(--band);color:var(--band-ink)}
.band a{color:var(--band-ink)}
.band strong,.band h1{color:var(--band-ink)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:8px;padding-bottom:8px;font-size:14px;font-weight:600;border-bottom:1px solid var(--band-line)}
.topbar a{text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.topbar .ig{color:var(--band-mute)}
.topbar .ig:hover{color:var(--band-ink)}
.hero{padding-top:52px;padding-bottom:110px}
@media(min-width:900px){.hero{padding-top:96px;padding-bottom:120px}}
.hero h1{font-size:clamp(36px,9.2vw,72px);line-height:.98;letter-spacing:-.036em;font-weight:700;margin:0 0 18px;max-width:14ch}
.hero .subtitle{font-size:19px;line-height:1.45;color:var(--band-mute);margin:0 0 26px;max-width:44ch}
@media(min-width:900px){.hero .subtitle{font-size:22px}}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tools li{display:contents}
.tool{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid #333;background:var(--band-card);border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:border-color .18s}
.tool:hover{border-color:var(--band-ink);color:var(--band-ink)}
@media(prefers-reduced-motion:no-preference){
  .hero>*{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
  .hero .subtitle{animation-delay:.08s}.hero .tools{animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* Reading ground */
main{padding-top:0;padding-bottom:70px}
@media(min-width:900px){main{padding-bottom:100px}}


/* Offer: a gray panel straddling the band edge, half in the dark, half on the white */
.offer{background:#f0f0f0;border-radius:12px;padding:22px;margin:-72px 0 40px;position:relative;z-index:1;overflow:hidden;isolation:isolate}
.offer>*{position:relative;z-index:1}
.sheen{position:absolute;inset:-60% -20%;z-index:0;pointer-events:none;transform:translateX(-70%) rotate(18deg);opacity:0}
.sheen::before,.sheen::after{content:"";position:absolute;inset:0}
.sheen::before{background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);filter:blur(6px)}
.sheen::after{background:linear-gradient(90deg,transparent 48.5%,#fff 50%,transparent 51.5%)}
@media(prefers-reduced-motion:no-preference){
  .sheen{animation:sweep 7s linear .9s infinite}
  @keyframes sweep{0%{transform:translateX(-70%) rotate(18deg);opacity:0}6%{opacity:1}34%{opacity:1}40%{transform:translateX(70%) rotate(18deg);opacity:0}100%{transform:translateX(70%) rotate(18deg);opacity:0}}
}
.offer-title{font-size:19px;font-weight:700;letter-spacing:-.012em;line-height:1.2;margin:0 0 6px;color:var(--ink)}
.offer-desc{font-size:16px;color:var(--body);margin:0;max-width:52ch}
.offer-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0 0}
@media(prefers-reduced-motion:no-preference){.offer{animation:rise .7s cubic-bezier(.16,1,.3,1) .26s both}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border-radius:8px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;text-decoration:none;transition:background .18s}
.btn:hover{background:#333;color:#fff}
.band .btn{background:#fff;color:var(--ink)}.band .btn:hover{background:#e4e4e4}

/* Sections */
.section{margin-top:44px}
.offer+.section{margin-top:0}
@media(min-width:900px){.section{margin-top:56px}}
.section>h2{font-size:clamp(24px,4.6vw,30px);line-height:1.15;letter-spacing:-.022em;font-weight:700;margin:0 0 6px}
.section-sub{color:var(--mute);margin:0 0 18px}
.intro{font-size:18px;line-height:1.55;max-width:62ch}
.intro p{margin:0 0 14px}.intro p:last-child{margin-bottom:0}

/* Decision cards */
.grid-3{display:grid;gap:12px}
@media(min-width:720px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.option{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.option-title{font-size:19px;font-weight:700;letter-spacing:-.012em;color:var(--ink);margin:0 0 4px}
.option-when{font-size:15px;color:var(--body);margin:0 0 10px}
.option ul{margin:0;padding-left:16px;font-size:14px;line-height:1.5}
.option li{margin:4px 0}

/* Steps */
.steps{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:4px}
.step-num{width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;margin-top:2px;font-variant-numeric:tabular-nums}
.step h3{font-size:19px;font-weight:700;letter-spacing:-.012em;margin:4px 0 6px}
.step p{margin:6px 0}.step ul{margin:6px 0;padding-left:20px}.step li{margin:4px 0}

/* Tip guides: grouped phases with headers, do lists, comparisons, examples */
.phase{margin-top:36px}
.phase>h2{font-size:clamp(22px,4.2vw,26px);letter-spacing:-.02em;font-weight:700;margin:0 0 4px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.tip{padding:20px 0 6px}
.tip-head{display:flex;align-items:baseline;gap:12px}
.tip-num{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--acc);font-variant-numeric:tabular-nums}
.tip h3{font-size:20px;font-weight:700;letter-spacing:-.014em;margin:0}
.tip p{margin:8px 0}
.tip-do{margin:10px 0}
.tip-do h4{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 4px}
.tip-do ul{margin:0;padding-left:20px;font-size:16px}.tip-do li{margin:4px 0}
.compare{display:grid;gap:10px;margin:12px 0}
@media(min-width:560px){.compare{grid-template-columns:1fr 1fr}}
.compare>div{border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5;border:1px solid var(--line);background:var(--card)}
.compare h4{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 6px}
.compare .before{color:var(--mute)}
.compare .after{border-color:var(--ink)}
.compare p{margin:2px 0}
.example{margin:12px 0;border-radius:10px;padding:12px 14px;background:var(--card);border:1px solid var(--line);font-size:15px}
.example h4{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 6px}
.example p{margin:4px 0}
.example code{background:var(--code)}

/* Notes and warnings */
.note{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--mute);margin-top:18px;background:var(--card)}
.warns{list-style:none;margin:0;padding:0}
.warn{display:grid;grid-template-columns:22px 1fr;gap:10px;margin:12px 0;font-size:15px}
.warn svg{width:18px;height:18px;margin-top:4px;stroke:var(--acc);stroke-width:2.5;fill:none;stroke-linecap:round}
.callout{background:var(--ink);color:#fff;border-radius:12px;padding:18px;margin-top:22px}
.callout h3{color:#fff;font-size:19px;font-weight:700;letter-spacing:-.012em;margin:0 0 8px}
.callout p{margin:0;color:#fff}.callout a{color:#fff}.callout code{background:#333;color:#fff}

/* FAQ */
.faq{margin:0;padding:0;list-style:none}
.faq li{padding:14px 0;border-top:1px solid var(--line)}
.faq li:first-child{border-top:0}
.faq h3{font-size:16px;font-weight:700;margin:0 0 4px;letter-spacing:-.005em}
.faq p{margin:0;font-size:15px;color:var(--mute)}

/* Footer */
footer{border-top:1px solid var(--line);padding:28px 0 40px;text-align:center}
.footer-title{margin:0 0 6px;font-size:19px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.footer-cta{margin:0 auto 14px;color:var(--mute);font-size:15px;max-width:48ch}
.footer-meta{margin-top:36px;font-size:13px;color:var(--mute);display:flex;justify-content:space-between;gap:12px}
.footer-meta a{color:var(--mute);text-decoration:none}.footer-meta a:hover{color:var(--ink)}

/* Homepage index */
.index{list-style:none;margin:0;padding:0}
.index li{border-top:1px solid var(--line)}
.index li:first-child{border-top:0}
.index a{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;text-decoration:none;color:inherit}
@media(min-width:640px){.index a{grid-template-columns:96px 1fr;gap:18px}}
.index time{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;padding-top:3px}
.index-title{display:block;font-size:18px;font-weight:700;letter-spacing:-.012em;line-height:1.3;color:var(--ink);transition:color .15s}
.index a:hover .index-title{color:var(--acc)}
.index-tools{display:block;font-size:14px;color:var(--mute);margin-top:2px}

/* Copyable values: tap the code, it copies and says so */
.copy-btn{all:unset;cursor:pointer;display:inline;position:relative;border-radius:5px;-webkit-tap-highlight-color:transparent}
.copy-btn::before{content:"";position:absolute;inset:-10px -6px}
.copy-btn code{text-decoration:underline dotted var(--acc);text-decoration-thickness:1px;text-underline-offset:3px;transition:background .15s}
.copy-btn:hover code{background:var(--acc-soft)}
.copy-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.copy-btn.is-copied code{background:var(--acc-soft)}
.copied{display:inline-block;margin-left:8px;font-size:13px;font-weight:600;color:var(--acc);vertical-align:baseline}
.copied:empty{display:none}
@media(prefers-reduced-motion:no-preference){.copied:not(:empty){animation:copied .25s cubic-bezier(.16,1,.3,1) both}@keyframes copied{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}}
.callout .copy-btn code{text-decoration-color:var(--acc-ink)}.callout .copy-btn:hover code,.callout .copy-btn.is-copied code{background:#333}.callout .copied{color:var(--acc-ink)}

/* Step check-off: the numeral is a button; done steps show a drawn check */
button.step-num{border:0;padding:0;cursor:pointer;font:inherit;font-weight:700;font-size:14px;position:relative;isolation:isolate;transition:background .15s;-webkit-tap-highlight-color:transparent}
button.step-num:hover{background:#333}
button.step-num::before{content:"";position:absolute;inset:-8px;border-radius:50%}
button.step-num svg{position:absolute;inset:0;width:30px;height:30px;padding:7px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
button.step-num svg path{stroke-dasharray:16;stroke-dashoffset:16}
.step.is-done button.step-num{background:var(--ink)}
.step.is-done button.step-num .step-n{opacity:0}
.step.is-done button.step-num svg{opacity:1}
.step.is-done button.step-num svg path{stroke-dashoffset:0}
.step.is-done h3{color:var(--mute)}
@media(prefers-reduced-motion:no-preference){
  button.step-num svg path{transition:stroke-dashoffset .3s cubic-bezier(.16,1,.3,1) .05s}
  button.step-num .step-n{transition:opacity .12s}
  button.step-num.bump{animation:bump .3s cubic-bezier(.16,1,.3,1)}
  @keyframes bump{40%{transform:scale(1.14)}to{transform:none}}
}
.steps-progress{margin:-8px 0 14px;font-size:14px;font-weight:600;color:var(--acc);font-variant-numeric:tabular-nums}

/* Patterns used by individual guides */
.toolcards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.toolcards a{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:border-color .18s}
.toolcards a:hover{border-color:var(--ink);color:inherit}
.toolcards .tc-name{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.toolcards .tc-desc{font-size:15px;color:var(--mute);margin:2px 0 6px}
.toolcards .tc-url{font-size:13px;color:var(--acc);font-weight:600}
code.prompt{display:block;white-space:pre-wrap;word-break:break-word;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.55;margin:10px 0;background:var(--code);color:var(--ink)}
.copy-btn code.prompt{text-decoration:none;box-shadow:inset 0 -2px 0 var(--acc-soft)}
.copy-btn.is-copied code.prompt,.copy-btn:hover code.prompt{background:var(--acc-soft)}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cards li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.cards .c-name{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:0 0 4px}
.cards p{margin:0;font-size:15px}
.grid-2{display:grid;gap:12px}@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}
.cmds{list-style:none;margin:0;padding:0}
.cmds li{display:grid;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
.cmds li:first-child{border-top:0}
@media(min-width:640px){.cmds li{grid-template-columns:220px 1fr;gap:16px}}
.cmds .cmd{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink)}
.cmds p{margin:0;font-size:15px;color:var(--body)}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:10px 0;border-top:1px solid var(--line)}
.plain li:first-child{border-top:0;padding-top:0}
.plain p{margin:0}
.quote{font-style:italic;color:var(--mute);margin:4px 0;padding-left:12px;border-left:2px solid var(--line)}
.ex-k{font-size:13px;font-weight:600;color:var(--ink);margin:10px 0 2px}
.ex-k:first-of-type{margin-top:0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin:12px 0;background:var(--card)}
.table{width:100%;border-collapse:collapse;font-size:15px;margin:0}
.table td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.table tr:first-child td{border-top:0}
.table td:first-child{font-family:var(--mono);font-size:13px;font-weight:500;white-space:nowrap;color:var(--ink)}
.table .recommended td:first-child{color:var(--acc)}
.section ul:not([class]){padding-left:20px}.section li{margin:5px 0}
.section>p{margin:0 0 14px}