/* CodeBoom cheat sheets — Boom brand, dark surface (content/brand/tokens.css). Phone first: most visits come from an Instagram DM. */
:root {
  --bg: #0B0B0B; --ink: #F2F2F2; --mute: #9A9A9A; --chrome: #141414; --chrome-2: #1C1C1C; --rule: #2A2A2A;
  --signal: #00C853; --alarm: #FF453A; --amber: #FFB020; --code: #0F0F0F;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body);
  background-image: linear-gradient(var(--chrome) 1px, transparent 1px), linear-gradient(90deg, var(--chrome) 1px, transparent 1px);
  background-size: 48px 48px; }
a { color: var(--signal); text-underline-offset: 3px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 20px 16px 64px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.pill { font: 700 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 2px solid var(--ink); border-radius: 999px; padding: 8px 14px; color: var(--ink); text-decoration: none; }
.handle { font: 700 13px/1 var(--mono); letter-spacing: .08em; color: var(--mute); text-decoration: none; }

.kicker { font: 700 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin: 0 0 10px; }
h1 { font: 900 clamp(38px, 10vw, 64px)/.96 var(--display); letter-spacing: -.04em; text-transform: uppercase; margin: 0 0 14px; }
h1 .al, h2 .al { color: var(--alarm); }
.lede { font-size: 18px; color: #D6D6D6; margin: 0 0 22px; }
.from { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.from a { font: 700 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 10px 14px; border: 2px solid var(--rule); background: var(--chrome); color: var(--ink); }
.from a:hover { border-color: var(--signal); }

.tldr { border: 3px solid var(--signal); box-shadow: 8px 8px 0 var(--signal); background: var(--chrome); padding: 18px 20px; margin: 0 0 44px; }
.tldr h2 { margin: 0 0 10px; font-size: 22px; }
.tldr ol { margin: 0; padding-left: 22px; } .tldr li { margin: 6px 0; } .tldr li::marker { font-family: var(--mono); color: var(--signal); }

section { margin: 0 0 48px; }
.num { font: 700 13px/1 var(--mono); letter-spacing: .14em; color: var(--mute); margin: 0 0 8px; }
h2 { font: 900 clamp(26px, 6.5vw, 38px)/1 var(--display); letter-spacing: -.035em; text-transform: uppercase; margin: 0 0 16px; }
h3 { font: 800 19px/1.25 var(--display); letter-spacing: -.01em; margin: 22px 0 8px; }
p { margin: 0 0 14px; }
.mute { color: var(--mute); }
small, .src { font: 400 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--mute); }

/* timeline */
.tl { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--rule); }
.tl li { position: relative; padding: 0 0 18px 22px; }
.tl li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 15px; height: 15px; background: var(--bg); border: 3px solid var(--mute); }
.tl li.hot::before { border-color: var(--alarm); background: var(--alarm); }
.tl b { display: block; font: 800 17px/1.3 var(--display); }
.quote { margin: 8px 0 0; padding: 12px 14px; background: var(--chrome-2); border-left: 4px solid var(--alarm); font: 500 15px/1.5 var(--body); }

/* request flow */
.flow { display: grid; gap: 10px; margin: 6px 0 16px; }
.req { font: 700 15px/1.5 var(--mono); background: var(--code); border: 2px solid var(--rule); padding: 12px 14px; overflow-wrap: anywhere; }
.req .m { color: var(--amber); }
.gate { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--rule); background: var(--chrome); }
.gate .n { width: 44px; height: 44px; display: grid; place-items: center; font: 900 22px/1 var(--display); border: 3px solid currentColor; }
.gate .q { font: 800 16px/1.3 var(--display); }
.gate .r { font: 700 13px/1.2 var(--mono); letter-spacing: .06em; text-align: right; }
.gate.ok { color: var(--signal); } .gate.ok .q { color: var(--ink); }
.gate.bad { color: var(--alarm); border-style: dashed; border-color: var(--alarm); } .gate.bad .q { color: var(--ink); }
.out { font: 700 15px/1.4 var(--mono); color: var(--alarm); padding: 10px 14px; border: 2px solid var(--alarm); }

/* code */
.code { position: relative; margin: 8px 0 14px; }
.code .lab { display: inline-block; font: 700 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; background: var(--rule); }
.code.bad .lab { background: var(--alarm); color: var(--bg); } .code.good .lab { background: var(--signal); color: var(--bg); }
pre { margin: 0; padding: 14px 16px; background: var(--code); border: 2px solid var(--rule); overflow-x: auto; font: 400 14px/1.6 var(--mono); }
.code.bad pre { border-color: rgba(255,69,58,.55); } .code.good pre { border-color: rgba(0,200,83,.55); }
.k { color: #C792EA; } .s { color: #C3E88D; } .c { color: #7A7A7A; } .e { color: #FF8A80; } .h { background: rgba(0,200,83,.18); }

/* lists, tables */
.check { list-style: none; padding: 0; margin: 0; }
.check li { position: relative; padding: 12px 14px 12px 50px; border: 2px solid var(--rule); background: var(--chrome); margin: 0 0 8px; }
.check li::before { content: attr(data-n); position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; display: grid; place-items: center; font: 700 13px/1 var(--mono); color: var(--bg); background: var(--signal); }
.check.amber li::before { background: var(--amber); }
.check b { font-family: var(--display); font-weight: 800; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tblw { overflow-x: auto; border: 2px solid var(--rule); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.tbl th { font: 700 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); background: var(--chrome); }
.tbl td:first-child { font-family: var(--display); font-weight: 800; white-space: nowrap; }
.tbl tr.me td { background: rgba(255,69,58,.10); }
.cases { display: grid; gap: 10px; }
.case { border: 2px solid var(--rule); background: var(--chrome); padding: 14px 16px; }
.case b { font: 800 18px/1.2 var(--display); } .case p { margin: 6px 0 4px; }
.top10 { counter-reset: t; list-style: none; padding: 0; margin: 0; columns: 1; }
.top10 li { counter-increment: t; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.top10 li::before { content: "API" counter(t); display: inline-block; width: 62px; font: 700 13px/1 var(--mono); color: var(--mute); }
.top10 li.me { color: var(--alarm); font-weight: 700; } .top10 li.me::before { color: var(--alarm); }
.mistake { border: 3px solid var(--alarm); padding: 16px 18px; background: rgba(255,69,58,.07); }
.mistake b { font-family: var(--display); }
footer { border-top: 2px solid var(--rule); padding-top: 18px; margin-top: 56px; }
footer .src li { margin: 4px 0; }
@media (min-width: 640px) { .wrap { padding: 32px 24px 80px; } .top10 { columns: 2; column-gap: 28px; } .cases { grid-template-columns: 1fr 1fr; } }
@media print { body { background: #fff; color: #000; } .from, .top .handle { display: none; } pre, .req { white-space: pre-wrap; } }
pre, code, .req, .gate .r, .out { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
code { font-family: var(--mono); font-size: .9em; background: var(--chrome-2); padding: 1px 5px; }
pre code { background: none; padding: 0; }
@media (max-width: 420px) { pre { font-size: 13px; padding: 12px; } }