.cs .narrow{max-width:820px}.cs{padding-block:32px 40px}.cs .back{display:block;width:fit-content;margin-bottom:36px;font-size:15px}.cs h1{font-size:clamp(3rem,9vw,5.5rem);font-weight:200;letter-spacing:-.03em;line-height:1;margin:12px 0 18px}.cs .lede{font-size:1.2rem;color:var(--muted);margin:0;max-width:58ch}.cs .meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:40px 0 0;padding-top:20px;border-top:1px solid var(--line)}.cs .meta dt{font:400 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.cs .meta dd{margin:6px 0 0;font-size:15.5px}.cs .block{padding-block:64px 0;display:grid;gap:16px}.cs .block h2{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:200;letter-spacing:-.015em;line-height:1.15}.cs .block>p{margin:0;max-width:64ch}.cs .steps{list-style:none;margin:12px 0 0;padding:0;counter-reset:s;display:grid;gap:0}.cs .steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;position:relative;padding-bottom:26px}.cs .steps li:before{content:counter(s);width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);background:var(--bg);display:grid;place-items:center;font:400 14px var(--mono);position:relative;z-index:1}.cs .steps li:not(:last-child):after{content:"";position:absolute;left:17px;top:34px;bottom:0;width:1px;background:var(--line)}.cs .steps h3{font-size:1.15rem;font-weight:400;margin-top:4px}.cs .steps p{margin:4px 0 0;color:var(--muted);font-size:15.5px;max-width:60ch}.cs .side{border:1px dashed var(--warm);border-radius:14px;padding:18px 20px;background:var(--surface)}.cs .side b{font-weight:500}.cs .side p{margin:6px 0 0;color:var(--muted);font-size:15.5px}.cs .qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-top:8px}.cs .qa h3{font-size:1.1rem;font-weight:400}.cs .qa p{margin:6px 0 0;color:var(--muted);font-size:15.5px}.cs .muted{color:var(--muted)}.cs .end{flex-direction:row;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:72px 24px}@media(max-width:700px){.cs .meta,.cs .qa{grid-template-columns:minmax(0,1fr)}.cs .block{padding-block:48px 0}}.cs .shot{margin:8px 0 0;display:grid;gap:10px}.cs .shot figcaption{font:400 12.5px var(--mono);color:var(--muted)}.cs .shot.browser img{width:100%;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);display:block}.cs .shot.phone .frame{width:min(300px,80%);margin:0 auto;border:8px solid var(--ink);border-radius:36px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:9 / 18}.cs .shot.phone img{width:100%;height:100%;object-fit:cover;object-position:var(--pos, 50% 0%);display:block}.cs .shot.phone figcaption{text-align:center}.cs .challenges{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:28px}.cs .challenges li{display:grid;gap:8px;padding-top:18px;border-top:1px solid var(--line)}.cs .challenges h3{font-size:1.2rem;font-weight:400}.cs .challenges dl{margin:0;display:grid;gap:8px}.cs .challenges dt{font:400 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--warm)}.cs .challenges dd{margin:0;color:var(--muted);font-size:15.5px;max-width:64ch}.cs .tag{display:inline-block;font:400 10.5px var(--mono);letter-spacing:.08em;color:var(--warm);border:1px solid currentColor;border-radius:5px;padding:0 5px;margin-right:8px;vertical-align:3px}.cs .more-work{display:flex;flex-wrap:wrap;gap:10px 22px}.cs .arch{display:grid;justify-items:center;gap:0;margin-top:8px}.cs .arch .row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%;max-width:440px}.cs .arch .row.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}.cs .arch .row.pair{grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr);align-items:center;max-width:100%}.cs .arch .node{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);display:grid;gap:2px;text-align:center}.cs .arch .node b{font-weight:400}.cs .arch .node small{font:400 11.5px var(--mono);color:var(--muted)}.cs .arch .core{border-color:var(--accent);background:var(--accent-soft)}.cs .arch .store{border-style:dashed}.cs .arch .ext{background:var(--bg)}.cs .arch .link{font:400 11.5px var(--mono);color:var(--muted);white-space:nowrap}.cs .arch .arrow{font:400 11.5px var(--mono);color:var(--accent);padding:8px 0 8px 14px;border-left:1px solid var(--accent);margin:4px 0}@media(max-width:640px){.cs .arch .row.pair{grid-template-columns:minmax(0,1fr);justify-items:stretch}.cs .arch .row.pair .link{text-align:center}}.cs .next{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}.cs .next li{display:grid;gap:4px;align-content:start;padding-top:14px;border-top:1px solid var(--line)}.cs .next b{font-weight:400}.cs .next span{color:var(--muted);font-size:15.5px}@media(max-width:700px){.cs .next{grid-template-columns:minmax(0,1fr)}}@media(max-width:520px){.cs h1{font-size:2.4rem;line-height:1.05}.cs .lede{font-size:1.05rem}.cs .meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:28px}.cs .meta dd{font-size:14.5px}.cs .block{padding-block:40px 0}.cs .block h2{font-size:1.5rem}.cs .block>p,.cs .steps p,.cs .qa p,.cs .side p,.cs .next span,.cs .challenges dd{font-size:15px}.cs .challenges h3,.cs .steps h3,.cs .qa h3{font-size:1.05rem}.cs .back{margin-bottom:24px}}