/* Blog article */
.top .wrap,.article .wrap,.cta .wrap,.more-sec .wrap{max-width:760px}
.top .wrap{padding-bottom:12px}
.top .kind{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.top .kind:hover{text-decoration:underline}
.top h1{max-width:22ch;font-size:clamp(1.9rem,4.2vw + .6rem,3.4rem)}
.top .lede{max-width:56ch;font-weight:500;color:var(--ink)}
.top .by{font-size:.88rem;color:var(--ink-3)}
.article .wrap{padding-top:8px}
.prose{display:grid;gap:14px;font-size:1.05rem;line-height:1.6;color:var(--ink-2)}
.prose h2{font-size:1.35rem;color:var(--ink);margin-top:14px}
.prose p{margin:0}
.prose p a{font-weight:600}
.prose ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.prose li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start}
.prose .pull{margin:10px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--blue);font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(1.2rem,1.4vw + .9rem,1.8rem);line-height:1.28;color:var(--ink)}
.prose .ask{margin:0 0 4px;padding:4px 0 4px 20px;border-left:3px solid var(--blue)}
.prose .ask p{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(1.15rem,1.2vw + .9rem,1.6rem);line-height:1.3;color:var(--ink)}
.prose .ask .by{margin:8px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* The worked example: a small sheet in the site's spreadsheet style */
.ex{margin:4px 0;font-family:var(--mono)}
.ex .core{background:#071533;color:#e8eefb;overflow:hidden}
.ex .chrome{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:.74rem;color:rgba(255,255,255,.65)}
.ex .chrome b{font-weight:500;color:#fff}
.ex .chrome span{font-size:.68rem}
.ex .wrapx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sheet{width:100%;border-collapse:collapse;font-size:.78rem;line-height:1.3;color:#e8eefb}
.sheet th,.sheet td{border:1px solid rgba(255,255,255,.08);padding:8px 10px;text-align:left;vertical-align:top}
.sheet thead th,.sheet th.r{background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-weight:400;font-size:.68rem}
.sheet thead th{text-align:left}
.sheet th.r{width:2em;text-align:center}
.sheet td.v{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet tr.sel td{background:rgba(31,101,204,.35);color:#fff;font-weight:500}
html.js .ex.in .sheet tbody tr{animation:build .6s var(--ease) both;animation-delay:calc(.2s + var(--r,0) * 90ms)}
@media (max-width:479px){.sheet{font-size:.7rem}.sheet th,.sheet td{padding:7px 6px}.sheet td.v{white-space:normal}}
@media (max-width:359px){.sheet{font-size:.64rem}.sheet th,.sheet td{padding:6px 4px}}
html.js .prose > *{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--j,0) * 60ms)}
html.js .prose.in > *{opacity:1;transform:none}
@media (min-width:768px){.prose{gap:18px;font-size:1.1rem}.prose h2{font-size:1.6rem;margin-top:20px}.prose .pull{padding-left:28px}.sheet{font-size:.84rem}.sheet th,.sheet td{padding:10px 14px}}
.more{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.more .core{padding:14px 16px;display:grid;gap:4px}
.more .kind{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.more a{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;line-height:1.3}
.more a:hover{color:var(--blue);text-decoration:underline}
@media (min-width:768px){.more{grid-template-columns:repeat(3,1fr);gap:12px}}
.sec.more-sec .wrap{padding-top:28px}
@media (min-width:768px){.sec.more-sec .wrap{padding-top:40px}}
@media (prefers-reduced-motion:reduce){html.js .prose > *{opacity:1;transform:none}html.js .ex.in .sheet tbody tr{animation:none}}
.prose li::before{content:"";width:18px;height:18px;margin-top:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f65cc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.prose li > *{margin:0}
.sheet tbody tr:nth-child(1){--r:1}.sheet tbody tr:nth-child(2){--r:2}.sheet tbody tr:nth-child(3){--r:3}.sheet tbody tr:nth-child(4){--r:4}.sheet tbody tr:nth-child(5){--r:5}.sheet tbody tr:nth-child(6){--r:6}.sheet tbody tr:nth-child(7){--r:7}.sheet tbody tr:nth-child(8){--r:8}.sheet tbody tr:nth-child(9){--r:9}.sheet tbody tr:nth-child(10){--r:10}
.prose img{max-width:100%;height:auto;border-radius:18px}