:root{
  --blue:#2c5ead;     /* primary: brand, headings, links */
  --azure:#1591dc;    /* action: buttons, active */
  --sky:#4bb8fa;      /* bright: hover, highlights, upvoted */
  --pale:#c4e2f5;     /* subtle surfaces, chips, borders */
  --bg:#eef5fb; --panel:#ffffff;
  --ink:#12273d; --soft:#33506e; --muted:#6981a0;
  --line:#dceaf7; --line2:#c4e2f5;
  --good:#1591dc; --warn:#e0853a; --bad:#d84a4a;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --tap:44px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
a{color:var(--blue); text-decoration:none}
a:active{opacity:.7}
.wrap{width:100%; margin:0 auto; padding:0 12px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:13px}
img{max-width:100%}

/* ---------- header (mobile: compact bar) ---------- */
header.top{position:sticky; top:0; z-index:50; background:var(--blue); color:#fff;
  padding-top:env(safe-area-inset-top,0); box-shadow:0 1px 0 rgba(0,0,0,.08)}
header.top .frame{display:flex; align-items:center; gap:10px; padding:10px 12px}
header.top .row1{display:flex; align-items:center; gap:10px; flex:1; min-width:0}
header.top .row2{display:contents}            /* mobile: nav lives in bottom bar */
.brand{font-family:var(--mono); font-weight:700; font-size:17px; letter-spacing:.5px; color:#fff; display:flex; align-items:center; gap:8px}
.brand:active{opacity:.8}
.brand .sy-mark{flex:0 0 auto}
.tagline{display:none}
nav.main{display:none}                         /* shown on desktop */
.who{margin-left:auto; font-size:13px; font-family:var(--mono); color:#dceaf7; display:flex; align-items:center; gap:8px; white-space:nowrap}
.who a{color:#eaf4fd}
.who .badge{background:var(--sky); color:#06223a; font-weight:700; border-radius:10px; padding:0 6px; margin-left:2px; font-size:11px}

.sy-mark{display:inline-flex; align-items:center; justify-content:center; line-height:0}
.sy-mark svg{display:block}
.sy-anim .arrow{transform-box:fill-box; transform-origin:center; animation:sy-nudge 2.4s ease-in-out infinite}
.sy-anim .ghost{opacity:0; transform-box:fill-box; transform-origin:center; animation:sy-launch 2.4s ease-out infinite}
.sy-anim .d1{animation:sy-blip 2.4s ease-in-out infinite}
.sy-anim .d2{animation:sy-blip 2.4s ease-in-out .35s infinite}
@keyframes sy-nudge{0%,100%{transform:translate(0,0)} 50%{transform:translate(1.6px,-1.6px)}}
@keyframes sy-launch{0%{transform:translate(0,0);opacity:0} 14%{opacity:.85} 100%{transform:translate(15px,-15px);opacity:0}}
@keyframes sy-blip{0%,100%{opacity:.3} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .sy-anim .arrow,.sy-anim .ghost,.sy-anim .d1,.sy-anim .d2{animation:none}
  .sy-anim .ghost{opacity:0}
}


/* ---------- bottom tab bar (mobile primary nav) ---------- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex;
  background:var(--panel); border-top:1px solid var(--line2);
  padding-bottom:var(--safe-b); box-shadow:0 -2px 10px rgba(20,40,70,.06)}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 2px; min-height:var(--tap); color:var(--muted); font-size:11px; font-family:var(--mono)}
.tabbar a .ic{font-size:20px; line-height:1}
.tabbar a.on{color:var(--azure)}
.tabbar a:active{background:var(--bg)}

/* ---------- main / cards ---------- */
main{padding:12px 0 calc(72px + var(--safe-b))}   /* room for bottom bar */
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px}
h1{font-size:21px; margin:.1em 0 .5em; color:var(--ink); line-height:1.25}
.feed-intro h1{font-size:17px; margin:0 0 2px}   /* compact, keeps the HN-style density */
.crumbs{font-family:var(--mono); font-size:11px; color:var(--muted); margin:0 0 8px; letter-spacing:.2px}
.crumbs a{color:var(--blue)}
.crumbs .cur{color:var(--soft)}
a.tag{text-decoration:none}
a.tag:hover{background:var(--sky); color:#fff}
h2{font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:.6px; margin:0 0 10px; color:var(--blue)}
.section-head{display:flex; align-items:baseline; gap:12px; margin:18px 0 8px; flex-wrap:wrap}
.section-head h2{margin:0}

/* ---------- tabs (top/new) ---------- */
/* segmented slider: one track, the active segment is the highlighted thumb */
.tabs{display:inline-flex; gap:3px; margin:0 0 14px; padding:3px;
  background:var(--panel); border:1px solid var(--line2); border-radius:9px}
.tabs a{text-align:center; font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.5px; padding:6px 16px; min-height:0; border-radius:6px;
  color:var(--muted); display:flex; align-items:center; justify-content:center}
.tabs a.on{color:#fff; background:var(--azure); font-weight:700}

/* ---------- feed rows ---------- */
ol.feed{list-style:none; margin:0; padding:0}
ol.feed li{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); align-items:flex-start}
ol.feed li:last-child{border-bottom:none}
ol.feed li .rank{display:none}
.vote{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:var(--tap)}
.vote form{margin:0; line-height:1}
.vote button{background:var(--bg); border:1px solid var(--line2); border-radius:9px; cursor:pointer;
  font-size:18px; line-height:1; color:var(--muted); width:var(--tap); height:34px; font-family:var(--mono)}
.vote button.voted{color:#fff; background:var(--azure); border-color:var(--azure)}
.vote a.voted{color:var(--muted); font-size:18px; width:var(--tap); height:34px; display:flex; align-items:center;
  justify-content:center; background:var(--bg); border:1px solid var(--line2); border-radius:9px}
.vote .n{font-family:var(--mono); font-size:14px; font-weight:700; color:var(--soft)}
.itm{flex:1; min-width:0}
.itm .ttl{font-size:16px; font-weight:700; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; line-height:1.3}
.itm .ttl a{color:var(--ink)}
.itm .host{color:var(--muted); font-size:12px; font-family:var(--mono); font-weight:400}
.itm .pitch{margin:3px 0; color:var(--soft)}
.itm .meta{font-family:var(--mono); font-size:12px; color:var(--muted)}
.itm .meta a{color:var(--muted)}
.thumb{width:64px; height:48px; object-fit:cover; border:1px solid var(--line2); border-radius:8px; background:var(--pale); flex-shrink:0}

/* ---------- category chip ---------- */
.tag{display:inline-block; font-family:var(--mono); font-size:11px; color:var(--blue); background:var(--pale);
  border-radius:5px; padding:1px 7px; margin-right:6px; letter-spacing:.3px}

/* ---------- project media ---------- */
.hero{width:100%; max-height:60vh; object-fit:cover; border:1px solid var(--line2); border-radius:12px; background:var(--pale); display:block}
.gallery{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap}
.gallery img{width:100%; border:1px solid var(--line2); border-radius:10px; object-fit:cover; background:var(--pale)}
.proj-links a{display:inline-block; margin:0 12px 6px 0; font-family:var(--mono); font-size:13px}

/* ---------- reviews ---------- */
.review{border-top:1px solid var(--line); padding:12px 0}
.review .by{font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:4px}
.review .md{margin-top:6px}

/* ---------- rendered markdown (project descriptions) ---------- */
.md{color:var(--soft); line-height:1.6; margin-top:12px}
.md>:first-child{margin-top:0}
.md p{margin:0 0 10px}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{margin:16px 0 8px; line-height:1.3; color:var(--ink)}
.md h1{font-size:20px} .md h2{font-size:18px} .md h3{font-size:16px}
.md h4,.md h5,.md h6{font-size:15px}
.md ul,.md ol{margin:0 0 10px; padding-left:22px}
.md li{margin:3px 0}
.md a{color:var(--blue); text-decoration:underline}
.md code{font-family:var(--mono); background:var(--pale); color:var(--blue);
  padding:2px 6px; border-radius:5px; font-size:13px}
.md pre{background:var(--pale); padding:12px 14px; border-radius:8px; overflow:auto; margin:0 0 10px}
.md pre code{background:none; padding:0; color:var(--ink)}
.md blockquote{margin:0 0 10px; padding:2px 0 2px 12px; border-left:3px solid var(--line2); color:var(--muted)}
.md hr{border:0; border-top:1px solid var(--line); margin:14px 0}
.md img{max-width:100%; border-radius:8px}

/* ---------- forms (mobile: full width, big) ---------- */
form.stack{display:flex; flex-direction:column; gap:14px; max-width:560px}
label{font-size:12px; font-weight:700; display:block; margin-bottom:5px; font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.4px; color:var(--soft)}
label .hint{font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0}
input[type=text],input[type=email],input[type=password],input[type=url],textarea,select{
  width:100%; padding:13px 12px; border:1px solid var(--line2); background:#fbfdff; color:var(--ink);
  font:inherit; font-size:16px; border-radius:10px; min-height:var(--tap)}  /* 16px = no iOS zoom */
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--azure); box-shadow:0 0 0 3px rgba(21,145,220,.18)}
input::placeholder,textarea::placeholder{color:#9bb1c9}
input[type=file]{font-family:var(--mono); font-size:13px; color:var(--muted); padding:10px; background:#fbfdff}
textarea{min-height:130px; resize:vertical}
button.btn,input[type=submit]{
  background:var(--azure); color:#fff; border:none; padding:13px 20px; font:inherit; font-weight:700;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.4px; cursor:pointer; border-radius:10px;
  min-height:var(--tap); align-self:flex-start}
button.btn:active,input[type=submit]:active{background:var(--blue)}
button.btn.sec{background:#fff; color:var(--blue); border:1px solid var(--line2)}
button.btn.block{align-self:stretch; width:100%}
.err{background:#fdecec; border:1px solid #f3bcbc; color:#a32020; padding:11px 12px; margin-bottom:12px; font-size:14px; border-radius:10px}
.ok{background:#e7f5fd; border:1px solid var(--sky); color:#0c5a86; padding:11px 12px; margin-bottom:12px; font-size:14px; border-radius:10px}

/* ---------- invite tree ---------- */
.tree{font-family:var(--mono); font-size:13px; line-height:1.85; overflow-x:auto}
.tree .node{white-space:pre; color:var(--soft)}
.tree .node a{color:var(--blue)}
.tree .you{background:var(--pale); border-radius:4px}

/* ---------- invite codes / tables ---------- */
table.codes{border-collapse:collapse; width:100%; font-size:13px; display:block; overflow-x:auto}
table.codes td,table.codes th{border:1px solid var(--line); padding:9px 10px; text-align:left; white-space:nowrap}
table.codes th{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--muted); background:var(--bg)}
code.code{font-family:var(--mono); background:var(--pale); color:var(--blue); padding:3px 8px; border-radius:6px; font-size:14px; letter-spacing:1px}

/* ---------- featured strip ---------- */
.card.featured{border-color:var(--sky); background:linear-gradient(180deg,#e7f4fd,var(--panel))}
.featured-row{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
.featured-chip{flex:0 0 auto; display:flex; flex-direction:column; gap:3px; border:1px solid var(--line2);
  border-radius:10px; padding:10px 12px; min-width:180px; background:#fff}
.featured-chip .ft-title{font-weight:700; color:var(--ink)}
.featured-chip .ft-meta{font-family:var(--mono); font-size:11px; color:var(--muted)}

/* ---------- distribute panel ---------- */
.dist-grid{display:flex; gap:16px; flex-wrap:wrap}
.dist-share{flex:1; min-width:0}
.dist-card{width:100%}
.dist-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--blue); margin-bottom:8px}
.dist-label .hint{text-transform:none; letter-spacing:0; color:var(--muted)}
.share-row{display:flex; gap:8px; flex-wrap:wrap}
.share-btn{font-family:var(--mono); font-size:13px; color:var(--blue); background:#fff; border:1px solid var(--line2);
  border-radius:9px; padding:10px 13px; min-height:var(--tap); cursor:pointer; display:inline-flex; align-items:center}
.share-btn:active{background:var(--pale)}
.og-preview{width:100%; border:1px solid var(--line2); border-radius:10px; background:var(--pale); display:block}
.drip{font-family:var(--mono); font-size:13px; display:flex; flex-direction:column; gap:8px}
.drip-step{color:var(--soft)}
.drip-step .dot{display:inline-block; width:9px; height:9px; border-radius:50%; border:1px solid var(--line2); margin-right:8px; vertical-align:middle}
.drip-step.done .dot{background:var(--azure); border-color:var(--azure)}
.drip-step.pending .dot{background:transparent; border-color:var(--sky)}
.drip-step.error .dot{background:var(--bad); border-color:var(--bad)}
.drip-step.pending{color:var(--muted)}
.embed-snip{width:100%; font-family:var(--mono); font-size:12px; background:var(--bg); color:var(--blue);
  border:1px solid var(--line2); border-radius:10px; padding:10px; resize:vertical}

/* embed badge rendered on external sites */
.shipyard-embed{display:inline-flex; align-items:center; gap:6px; font-family:ui-monospace,Menlo,monospace;
  font-size:13px; color:#fff; background:#2c5ead; border-radius:8px; padding:5px 11px; text-decoration:none}

/* ---------- distribution agent (paid tier) ---------- */
.btn-link{display:inline-flex; align-items:center; justify-content:center; background:var(--azure); color:#fff;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.4px; font-weight:700; font-size:13px;
  padding:11px 16px; border-radius:10px; min-height:var(--tap); white-space:nowrap}
.btn-link:active{background:var(--blue)}
.agent-cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(180deg,#e7f4fd,var(--panel)); border:1px solid var(--sky);
  border-radius:10px; padding:12px; margin-bottom:14px}
.agent-channels{display:flex; flex-direction:column; gap:10px}
.agent-channel{border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.ac-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px}
.tag.risk-auto{color:#0c5a86; background:#d7f0ff}
.tag.risk-approve{color:#8a4b12; background:#fbe7cf}
.tag.risk-manual{color:var(--soft); background:var(--pale)}
.tasks{display:flex; flex-direction:column; gap:14px}
.task{border:1px solid var(--line2); border-radius:10px; padding:12px}
.task.skipped{opacity:.55}
.task-body{white-space:pre-wrap; color:var(--soft); margin-top:6px; font-size:14px}
.conn{display:flex; flex-direction:column; gap:12px}
.conn-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; border:1px solid var(--line);
  border-radius:10px; padding:12px}
.conn-row .conn-main{flex:1; min-width:160px}
.conn-row form.stack{gap:8px; max-width:none}

/* ---------- wallet + paid-review bounties ---------- */
.balance{font-family:var(--mono); font-size:32px; font-weight:700; color:var(--ink); line-height:1.1}
.money-pos{color:var(--good); font-family:var(--mono)}
.money-neg{color:var(--bad); font-family:var(--mono)}
.amount-pills{display:flex; gap:8px; flex-wrap:wrap}
.amount-pills form{margin:0}
table.codes td.money-pos,table.codes td.money-neg{font-weight:700}

/* ---------- install banner (PWA) ---------- */
.install{display:none; align-items:center; gap:10px; background:var(--blue); color:#fff; border-radius:12px;
  padding:12px 14px; margin-bottom:12px}
.install b{font-size:14px}
.install button{margin-left:auto; background:#fff; color:var(--blue); border:none; border-radius:9px;
  padding:9px 14px; font-weight:700; font-family:var(--mono); min-height:var(--tap); cursor:pointer}
.install .x{background:transparent; color:#cfe6fa; padding:9px 6px; margin-left:0}

/* ---------- small text button (looks like a link; e.g. "Resend code") ---------- */
.linkbtn{background:none; border:none; padding:6px 2px; color:var(--blue); cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.3px}
.linkbtn:active{opacity:.7}

/* ---------- feed: category filter chips ---------- */
.chips{display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 12px; padding-bottom:2px}
.chip{flex:0 0 auto; font-family:var(--mono); font-size:12px; letter-spacing:.3px; color:var(--blue);
  background:var(--pale); border:1px solid transparent; border-radius:5px; padding:7px 12px; min-height:34px;
  display:inline-flex; align-items:center; cursor:pointer; white-space:nowrap}
.chip:active{opacity:.7}
.chip.on{background:var(--pale); color:var(--blue); border-color:var(--sky); font-weight:700}
.feed-empty{padding:26px 4px 8px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px}

/* ---------- pager (top/new pagination) ---------- */
.pager{display:flex; align-items:center; justify-content:center; gap:14px; margin:20px 0 6px;
  font-family:var(--mono); font-size:12px}
.pager-btn{display:inline-flex; align-items:center; min-height:var(--tap); padding:9px 16px;
  border:1px solid var(--line2); border-radius:8px; background:var(--panel); color:var(--blue);
  letter-spacing:.3px}
.pager-btn:active{opacity:.7}
.pager-btn.disabled{color:var(--muted); border-color:var(--line); opacity:.5; pointer-events:none}
.pager-pos{color:var(--muted); text-transform:uppercase; letter-spacing:.4px}

/* ---------- form feedback: char counts, read-only fields ---------- */
.charcount{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:6px}
.charcount.ok{color:var(--good)}
input.ro{background:var(--bg); color:var(--soft); cursor:default}

/* ---------- profile stats ---------- */
.profile-stats{display:flex; gap:22px; font-family:var(--mono); font-size:12px; color:var(--muted);
  margin:8px 0 2px; text-transform:uppercase; letter-spacing:.4px}
.profile-stats b{color:var(--ink); font-size:19px; display:block; letter-spacing:0}

/* ---------- settings: notification toggles ---------- */
.toggles{margin-top:4px}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line)}
.toggle-row:last-child{border-bottom:none}
.toggle-row form{margin:0; line-height:1; flex:0 0 auto}
.toggle-row .tl{min-width:0}
.toggle-row .tl b{display:block; font-size:14px; color:var(--ink)}
.toggle-row .tl span{display:block; font-size:12px; color:var(--muted); margin-top:1px}
.switch{flex:0 0 auto; width:46px; height:28px; border-radius:999px; border:1px solid var(--line2);
  background:var(--bg); position:relative; cursor:pointer; padding:0}
.switch .knob{position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:#fff; border:1px solid var(--line2)}
.switch.on{background:var(--azure); border-color:var(--blue)}
.switch.on .knob{left:auto; right:2px; border-color:var(--azure)}
.switch:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(21,145,220,.18)}

/* ---------- settings: API keys ---------- */
.key-gen{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 14px}
.key-gen form{margin:0}
.key-reveal{background:#e7f5fd; border:1px solid var(--sky); border-radius:10px; padding:12px; margin:0 0 14px}
.key-reveal .kr-warn{font-family:var(--mono); font-size:12px; color:#0c5a86; letter-spacing:.3px; margin-bottom:9px}
.key-reveal .kr-row{display:flex; gap:8px; align-items:stretch; flex-wrap:wrap}
.key-code{flex:1; min-width:200px; font-family:var(--mono); font-size:13px; background:#fff;
  border:1px solid var(--line2); border-radius:8px; padding:11px 12px; word-break:break-all; color:var(--ink)}
table.keys td,table.keys th{vertical-align:middle}
table.keys form{margin:0}
.revoke{font-family:var(--mono); font-size:12px; color:var(--bad); background:none; border:none;
  cursor:pointer; padding:6px 2px; letter-spacing:.3px}
.revoke:active{opacity:.7}
.key-empty{font-family:var(--mono); font-size:13px; color:var(--muted); padding:6px 0}

footer{margin-top:26px; padding:16px 0; color:var(--muted); font-size:12px; font-family:var(--mono)}
footer .wrap{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
footer a{color:var(--muted)}

/* ===================================================================== */
/* DESKTOP / TABLET enhancements                                          */
/* ===================================================================== */
@media (min-width:760px){
  .wrap{max-width:920px; padding:0 16px}
  header.top{position:static}
  header.top .frame{flex-direction:column; align-items:stretch; gap:0; padding:0}
  header.top .row1{padding:11px 16px 9px}
  header.top .row2{display:flex; align-items:center; gap:8px; padding:0 16px 11px; border-top:1px solid rgba(255,255,255,.15)}
  .tagline{display:inline; font-family:var(--mono); font-size:12px; color:#cfe6fa; margin-left:4px}
  nav.main{display:flex; gap:4px; flex:1; flex-wrap:wrap; padding-top:9px}
  nav.main a{font-family:var(--mono); font-size:13px; color:#eaf4fd; padding:6px 11px; border-radius:8px; min-height:0}
  nav.main a:hover{background:rgba(255,255,255,.14)}
  .who{padding-top:9px}
  .who a:hover{color:#fff; text-decoration:underline}
  .tabbar{display:none}
  main{padding:18px 0 60px}
  .tabs a{min-width:72px}
  a:hover{text-decoration:underline}
  .thumb{width:74px; height:54px}
  .gallery img{width:48%; max-width:300px}
  .dist-card{width:300px}
  .vote button:hover,.share-btn:hover{border-color:var(--azure)}
  .chip:hover{border-color:var(--azure)}
  .tabs a:not(.on):hover{color:var(--blue)}
  .revoke:hover{text-decoration:underline}
  footer{border-top:1px solid var(--line); margin-top:34px}
}

@media (min-width:1040px){
  .wrap{max-width:980px}
}

/* --- agents: coming-soon page --- */
.cs-hero{display:flex; gap:14px; align-items:flex-start}
.cs-bot{width:54px; height:54px; border-radius:12px; background:var(--pale); border:1px solid var(--sky);
  display:flex; align-items:center; justify-content:center; font-size:28px; flex:0 0 auto}
.cs-soon{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:#8a4b12; background:#fbe7cf; border-radius:5px; padding:2px 8px;
  vertical-align:middle; margin-left:6px; position:relative; top:-3px}
.cs-steps{display:grid; gap:14px}
.cs-step{display:flex; gap:12px; align-items:flex-start}
.cs-step .num{flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--bg); border:1px solid var(--line2);
  color:var(--azure); font-family:var(--mono); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center}
.cs-step b{display:block; font-size:15px; color:var(--ink)}
.cs-step span{display:block; font-size:14px; color:var(--soft); margin-top:2px; text-wrap:pretty}
.cs-chips{display:flex; gap:6px; flex-wrap:wrap}
.cs-chips .tag{margin-right:0}
.cs-seg{display:inline-flex; gap:3px; padding:3px; background:var(--bg); border:1px solid var(--line2); border-radius:10px}
.cs-seg button{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);
  background:transparent; border:none; border-radius:7px; padding:9px 16px; min-height:38px; cursor:pointer}
.cs-seg button.on{background:var(--azure); color:#fff; font-weight:700}
@media (min-width:760px){
  .cs-steps{grid-template-columns:repeat(3,1fr)}
  .cs-step{flex-direction:column; gap:8px}
  .cs-seg button:not(.on):hover{color:var(--blue)}
}