:root{color-scheme:light dark;--bg:#f3f7f4;--card:#fff;--fg:#14201a;--muted:#52645a;--line:#d3dfd7;--accent:#167a45;--accent-fg:#fff;--ok:#167a45;--warn:#9a6700;--warnbg:#fff8e1;--note:#e8f4ec;--code:#edf2ee;--hdr:#0a1a11;--hdr-fg:#eef2ea;--hdr-line:#1f9d55}
@media (prefers-color-scheme:dark){:root{--bg:#0b130e;--card:#111b15;--fg:#e8f0ea;--muted:#95a89c;--line:#223229;--accent:#3ddc84;--accent-fg:#07150d;--ok:#3ddc84;--warn:#e3b341;--warnbg:#2a2412;--note:#10241a;--code:#09100c;--hdr:#06100a;--hdr-fg:#eef2ea;--hdr-line:#1f9d55}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-fg);padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}
.tabs{display:flex;gap:4px;max-width:980px;margin:12px auto 0;padding:0 16px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{appearance:none;border:0;background:none;color:var(--muted);font:inherit;padding:10px 14px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}
main{max-width:980px;margin:0 auto;padding:16px}
main:focus{outline:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:14px 0}
.card.warn{border-color:var(--warn);background:var(--warnbg)}
h2{font-size:1.3rem;margin:.2em 0 .5em}h3{font-size:1.08rem;margin:1.1em 0 .4em}
.muted{color:var(--muted)}.small{font-size:.9rem}
fieldset{border:0;margin:0;padding:0}legend{font-size:1.2rem;font-weight:600;padding:0;margin-bottom:6px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;margin:8px 0;cursor:pointer}
.opt:hover{border-color:var(--accent)}.opt input{margin-top:4px;width:18px;height:18px;flex:none}
.opt .hint{display:block;color:var(--muted);font-size:.9rem}
input[type=text]{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--bg);color:var(--fg)}
button.btn,a.btn{appearance:none;display:inline-block;border:1px solid var(--accent);background:var(--accent);color:var(--accent-fg);font:inherit;padding:9px 16px;border-radius:8px;cursor:pointer;text-decoration:none}
button.btn.secondary,a.btn.secondary{background:none;color:var(--accent)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.row.between{justify-content:space-between;align-items:center}
.err{color:#b3261e;font-weight:600;margin:8px 0}
.steps{font-size:.9rem;color:var(--muted)}
.bar{height:10px;background:var(--line);border-radius:6px;overflow:hidden;margin:8px 0}.bar>span{display:block;height:100%;background:var(--ok);transition:width .2s}
details.task{border:1px solid var(--line);border-radius:10px;margin:10px 0;background:var(--card)}
details.task>summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style:none;display:flex;gap:10px;align-items:center}
details.task>summary::-webkit-details-marker{display:none}
details.task>summary .num{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--note);align-items:center;justify-content:center;font-size:.9rem;flex:none}
details.task.done>summary .num{background:var(--ok);color:#fff}
details.task .body{padding:0 18px 14px}.why{color:var(--muted);margin-top:0}
.codewrap{position:relative;margin:10px 0}
pre{margin:0;background:var(--code);border:1px solid var(--line);border-radius:8px;padding:14px 84px 14px 12px;overflow-x:auto;font:.88rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
button.btn.copy{position:absolute;top:8px;right:8px;font-size:.8rem;padding:3px 10px}
.label{font-size:.85rem;color:var(--muted);margin:2px 0 0}
code{background:var(--code);padding:1px 5px;border-radius:4px;font:.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre code{background:none;padding:0}
.note,.warnb,.expect{border-left:4px solid var(--accent);background:var(--note);padding:8px 12px;border-radius:0 8px 8px 0;margin:10px 0}
.warnb{border-color:var(--warn);background:var(--warnbg)}.expect{border-color:var(--ok)}
.expect::before{content:"What to expect: ";font-weight:600}
.tablewrap{overflow-x:auto;margin:10px 0}table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-weight:600}
.manual{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px}.toc{position:sticky;top:8px;align-self:start;font-size:.95rem}
.toc a{display:block;padding:3px 0}.toc input{margin-bottom:8px}
@media (max-width:720px){.manual{grid-template-columns:1fr}.toc{position:static}}
.foot{max-width:980px;margin:20px auto;padding:0 16px 30px;color:var(--muted);font-size:.9rem}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--note);font-size:.8rem;color:var(--muted)}
.radios{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.radios label{border:1px solid var(--line);border-radius:99px;padding:6px 14px;cursor:pointer}
.radios input{margin-right:6px}
@media print{.tabs,.hdr .status,.skip,.foot,.row,button,.copy,.opt input,.manual .toc{display:none!important}body{background:#fff;color:#000}details.task{break-inside:avoid}details.task[open]{display:block}details.task>summary{list-style:none}}

.hero{text-align:center;padding:26px 8px 6px}.hero h2{font-size:2rem;margin:0 0 6px}.hero p{max-width:640px;margin:0 auto;color:var(--muted);font-size:1.08rem}
.card.primary{border:2px solid var(--accent)}
.cardhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.cardhead h2{margin:0}
ol.steps{list-style:none;margin:12px 0;padding:0;display:grid;gap:12px}
li.step{display:flex;gap:12px;align-items:flex-start;font-size:1.05rem}
li.step .num{flex:none;display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-fg);align-items:center;justify-content:center;font-weight:700}
.bigcmd{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;background:var(--code);border:1px solid var(--line);border-radius:10px;padding:10px}
.bigcmd code{flex:1 1 280px;background:none;font-size:1.02rem;padding:6px 4px;word-break:break-all;align-self:center}
.btn.big{font-size:1.05rem;padding:10px 22px}
.done{font-size:1.05rem;margin:10px 0}
details.more{border-top:1px solid var(--line);padding:6px 0}details.more>summary{cursor:pointer;padding:6px 0;color:var(--accent)}
details.more .body{padding:4px 0 8px}
details:not(.task):not(.more) summary{cursor:pointer}

/* ---- Creatimus header ---- */
.hdr{background:var(--hdr);color:var(--hdr-fg);border-bottom:3px solid var(--hdr-line)}
.hdr-in{max-width:980px;margin:0 auto;padding:16px 16px 14px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
.logo{display:block;line-height:0}.logo img{display:block;max-width:100%;height:auto;image-rendering:pixelated}
.brand{flex:1 1 220px}.brand h1{margin:0;font-size:1.5rem;letter-spacing:.08em}.tag{margin:0;color:#a9c4b3;font-size:.9rem}
.status{margin:0;font-size:.9rem;color:#a9c4b3}.status.ok::before{content:"● ";color:#3ddc84}
.foot a{color:var(--accent)}

/* ---- Step 1: the three ways ---- */
.stepno{display:inline-block;margin-right:10px;padding:2px 10px;border-radius:99px;background:var(--accent);color:var(--accent-fg);font-size:.8rem;font-weight:700;vertical-align:middle;letter-spacing:.04em}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
@media (max-width:820px){.ways{grid-template-columns:1fr}}
.way{display:block;position:relative;cursor:pointer}
.way input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wbody{height:100%;border:2px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--card);transition:border-color .12s,box-shadow .12s}
.way:hover .wbody{border-color:var(--accent)}
.way input:checked + .wbody{border-color:var(--accent);box-shadow:0 0 0 3px var(--note),inset 0 0 0 1px var(--accent);background:var(--note)}
.way input:focus-visible + .wbody{outline:3px solid var(--accent);outline-offset:2px}
.whead{display:flex;gap:10px;align-items:center}.whead h3{margin:0;font-size:1.15rem}
.wbody .pill{margin-top:8px}
.wnum{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-fg);align-items:center;justify-content:center;font-weight:700;flex:none}
.pitch{margin:.5em 0;font-weight:600}
.facts{margin:0;font-size:.92rem}.facts dt{color:var(--muted);font-weight:600;margin-top:8px}.facts dd{margin:0}

/* ---- Step 2: guided steps ---- */
.guided{border-color:var(--accent)}
.progress{display:flex;align-items:center;gap:12px;margin:8px 0 12px}
progress{flex:1;height:10px;accent-color:var(--accent)}
details.task .stitle{flex:1}
details.task>summary .pill{margin-left:auto}
details.task .row{margin-top:10px}
.check{display:inline-flex;gap:8px;align-items:center;cursor:pointer;font-weight:600}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.finish{border:2px solid var(--ok)}
ul.try{padding-left:1.2em}
.center{text-align:center}
.expect{margin:12px 0}
details.qa{border-top:1px solid var(--line);padding:2px 0}details.qa>summary{cursor:pointer;padding:9px 0;font-weight:600}details.qa p{margin:0 0 10px}

/* ---- Guide ---- */
.intro{margin:4px 0 8px}
.tochead{margin:14px 0 4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.toc a{text-decoration:none}.toc a:hover{text-decoration:underline}
ol.flow{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px}
ol.flow li{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:.93rem}
.fnum{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-fg);align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:12px 0}
.mini{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:10px 12px;background:var(--bg)}
.mini h4{margin:0 0 4px;font-size:1rem}.mini p{margin:0;font-size:.93rem;color:var(--muted)}
.checklist{display:grid;gap:8px;margin:10px 0}.checklist .check{font-weight:400;align-items:flex-start}.checklist input{margin-top:2px;flex:none}
.way input:checked + .wbody .pill{background:var(--card)}