.article-head .back{display:inline-block}.article-head .eyebrow{margin-top:28px;display:block}.article-head h1{max-width:18ch;margin-top:18px;font-size:clamp(42px,7vw,92px);line-height:.92}.article-card{border:1px solid var(--line);background:#101210;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);min-height:320px;display:grid;overflow:hidden}.listing-section .article-card+.article-card{margin-top:12px}.article-card-image-portrait{position:relative;overflow:hidden}.article-card-image-portrait img{object-fit:cover;object-position:50% 7%;width:100%;height:420px}.tutorial-head{align-items:end}.tutorial-head h1{max-width:10ch}.tutorial-deck{max-width:35em;color:var(--muted);text-wrap:pretty;margin:28px 0 0;font-size:clamp(16px,1.5vw,20px);line-height:1.7}.tutorial-reading{border-top:1px solid var(--line);grid-template-columns:minmax(130px,1fr) minmax(0,1040px) minmax(130px,1fr);align-items:start;gap:32px;padding:72px 24px 112px;display:grid}.tutorial-rail{width:min(180px,100%);color:var(--muted);grid-column:1;justify-self:end;gap:12px;display:grid;position:sticky;top:104px}.tutorial-rail-label{letter-spacing:.15em;font-size:10px}.tutorial-rail strong{color:var(--title);font-family:var(--font-geist-mono),monospace;font-size:32px;font-weight:500;line-height:1}.tutorial-progress{background:var(--line);transform-origin:0;height:2px;overflow:hidden}.tutorial-progress span{background:var(--acid);transform-origin:0;width:100%;height:100%;transition:transform .42s cubic-bezier(.22,.75,.18,1);display:block;transform:scaleX(.05)}.tutorial-rail a{width:max-content;color:var(--muted);font-size:11px;transition:color .18s}.tutorial-rail a:hover,.tutorial-rail a:focus-visible{color:var(--title)}.tutorial-pages{grid-column:2;min-width:0}.tutorial-chapter{padding:0 0 108px;scroll-margin-top:96px}.tutorial-chapter+.tutorial-chapter{border-top:1px solid var(--line);padding-top:96px}.tutorial-chapter-head{width:min(760px,100%);margin:0 auto 54px}.tutorial-chapter-head .eyebrow{color:var(--acid);letter-spacing:.14em;font-size:10px}.tutorial-chapter-head h2{max-width:15ch;color:var(--title);letter-spacing:-.045em;text-wrap:balance;margin:17px 0 0;font-size:clamp(38px,5vw,68px);font-weight:620;line-height:1.04}.tutorial-block+.tutorial-block{margin-top:64px}.tutorial-prose{width:min(760px,100%);margin-inline:auto}.tutorial-sublead{color:var(--muted);text-wrap:pretty;margin:0;font-size:18px;line-height:1.75}.tutorial-sublead strong{color:var(--title);margin-bottom:8px;font-size:clamp(22px,2.5vw,30px);font-weight:620;line-height:1.35;display:block}.tutorial-prose>h3{color:var(--title);margin:28px 0 12px;font-size:21px;font-weight:620;line-height:1.4}.tutorial-prose>p:not(.tutorial-sublead){color:var(--paper);opacity:.82;text-wrap:pretty;margin:0;font-size:17px;line-height:1.95}.tutorial-figure{background:0 0;width:100%;margin:26px 0 22px}.tutorial-figure img{object-fit:contain;width:100%;height:auto;max-height:720px;display:block}.tutorial-figure figcaption{color:var(--muted);font:10px/1.5 var(--font-geist-mono),monospace;letter-spacing:.05em;padding:12px 2px 0}.tutorial-figure-labels{gap:8px 24px;margin:0;padding:0;list-style:none;display:grid}.tutorial-figure-labels.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-figure-labels.hero-grid.label-count-4{grid-template-columns:repeat(3,minmax(0,1fr))}.tutorial-figure-labels.hero-grid li:first-child{grid-column:1/-1}.tutorial-figure-labels.stacked{grid-template-columns:repeat(2,minmax(0,1fr))}.tutorial-figure-labels li{min-width:0;color:var(--muted);align-items:baseline;gap:9px;display:flex}.tutorial-figure-labels li span{color:var(--acid);flex:none;font-size:9px}.tutorial-points{border-top:1px solid var(--line);margin:28px 0 8px}.tutorial-points>div{border-bottom:1px solid var(--line);grid-template-columns:minmax(170px,.7fr) 1fr;gap:24px;padding:22px 0;display:grid}.tutorial-points h3,.tutorial-points p{margin:0}.tutorial-points h3{color:var(--title);font-size:19px;font-weight:620}.tutorial-points p{color:var(--paper);opacity:.8;font-size:16px;line-height:1.75}.tutorial-prose blockquote{border-left:3px solid var(--acid);background:color-mix(in srgb,var(--acid) 9%,var(--panel));color:var(--title);margin:28px 0 0;padding:18px 22px 20px;font-size:clamp(17px,2vw,22px);font-weight:620;line-height:1.55}[data-theme=day] .tutorial-figure{background:0 0}.tutorial-page{margin:0 0 72px;scroll-margin-top:100px}.tutorial-page-meta{color:var(--muted);letter-spacing:.08em;justify-content:space-between;gap:20px;margin-bottom:10px;font-size:10px;display:flex}.tutorial-page-meta span:last-child{text-align:right}.tutorial-page img{border:1px solid var(--line);background:#edf0f4;width:100%;height:auto;display:block}.tutorial-end{border-top:1px solid var(--line);padding:56px 0 24px}.tutorial-end p{max-width:25em;color:var(--title);margin:18px 0 28px;font-size:clamp(24px,3vw,38px);font-weight:560;line-height:1.3}.article-card-image{background:#f4f1ea;place-items:center;min-height:280px;display:grid}.article-card-image img{object-fit:contain;width:100%;height:auto;max-height:420px;display:block}.article-card-copy{flex-direction:column;justify-content:space-between;gap:24px;padding:34px 36px;display:flex}.article-card-copy h2{color:var(--title);letter-spacing:-.02em;margin:14px 0 12px;font-family:Audiowide,PingFang SC,sans-serif;font-size:clamp(28px,3.4vw,46px);font-weight:400;line-height:1.05}.article-card-copy p{color:#8f9591;margin:0;font-size:15px;line-height:1.75}[data-theme=day] .article-card{background:#e3e7ea}[data-theme=day] .article-card-copy p,[data-theme=day] .article-body>p,[data-theme=day] .article-body>ul,[data-theme=day] .article-body>ol{color:#46545c}[data-theme=day] .article-stage{background:#dfe4e7}[data-theme=day] .article-figure figcaption{color:#46545c;background:#dfe4e7}.article-card-copy:hover h2,.article-card-copy:focus-visible h2{color:var(--acid)}.article-stage{border-bottom:1px solid var(--line);background:#070807}.article-hero-frame{width:min(1120px,100% - 48px);margin:0 auto;padding:28px 0 8px}.article-hero-frame img{background:#f4f1ea;width:100%;height:auto;display:block}.article-body{width:min(800px,100% - 48px);margin:0 auto;padding:88px 0 40px}.article-body>p,.article-body>ul,.article-body>ol{color:#a7aca8;font-size:17px;line-height:1.95}.article-body>p:first-of-type{color:var(--paper);font-size:19px}.article-body h2{color:var(--title);letter-spacing:.01em;margin:72px 0 18px;font-size:26px;font-weight:560;line-height:1.3}.article-body h3{color:#c5cbc7;margin:42px 0 14px;font-size:18px;font-weight:560}.article-body .lede{margin:0 0 28px}.article-body ul,.article-body ol{padding-left:1.2em}.article-body li+li{margin-top:10px}.article-kicker{color:var(--acid);font:10px/1 var(--font-geist-mono), monospace;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;display:inline-block}.article-figure{background:#f4f1ea;border:1px solid #d8d4cb;margin:28px 0 8px}.article-figure img{width:100%;height:auto;display:block}.article-figure figcaption{color:#8b918d;font:11px/1.5 var(--font-geist-mono), monospace;letter-spacing:.04em;background:#101210;padding:10px 12px 12px}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:8px;margin:28px 0 8px;display:grid}.article-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.article-grid .article-figure{margin:0}.article-body .is-wide{width:min(1520px,100vw - 48px);margin-left:calc(50% + -1*min(760px,50vw - 24px))}.article-note{border-top:1px solid var(--line);color:#8d938f;margin-top:64px;padding:26px 0 80px;font-size:12px;line-height:1.8}@media (width<=900px){.article-head{min-height:0;padding-top:64px}.article-head h1{max-width:none;font-size:clamp(46px,10vw,76px)}.article-card{grid-template-columns:1fr}.article-card-image{min-height:220px}.article-grid,.article-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}.article-body .is-wide{width:100%;margin-left:0}.tutorial-reading{grid-template-columns:1fr;padding-inline:24px}.tutorial-rail{z-index:3;background:color-mix(in srgb,var(--ink) 88%,transparent);border:1px solid var(--line);backdrop-filter:blur(12px);grid-column:1;grid-template-columns:auto auto 1fr;justify-self:stretch;align-items:center;width:auto;padding:10px 12px;top:72px}.tutorial-rail strong{font-size:18px}.tutorial-rail a{display:none}.tutorial-pages{grid-column:1}.tutorial-chapter+.tutorial-chapter{padding-top:72px}}@media (width<=600px){.listing-head{min-height:330px;padding-top:72px;padding-bottom:48px}.listing-head h1{font-size:clamp(54px,20vw,92px)}.article-card-image{min-height:0}.article-card-image img{width:100%;max-height:none}.article-card-copy{padding:26px 22px 30px}.article-card-copy h2{font-size:34px}.article-stage{padding-top:0}.article-hero-frame{width:calc(100% - 30px);padding:12px 0 0}.article-body{width:calc(100% - 30px);padding-top:54px}.article-body>p,.article-body>ul,.article-body>ol{font-size:16px;line-height:1.85}.article-body>p:first-of-type{font-size:17px}.article-body h2{margin-top:58px;font-size:24px}.article-figure{margin-inline:0}.article-grid{gap:5px}.article-grid .article-figure figcaption{padding:8px 7px 9px;font-size:9px}.article-grid .article-figure img{object-fit:contain;max-height:48svh}.article-note{padding-bottom:56px}.article-card-image-portrait img{object-fit:cover;object-position:top;height:auto;max-height:70svh}.tutorial-head h1{max-width:none}.tutorial-deck{font-size:16px}.tutorial-reading{gap:24px;padding:24px 15px 72px}.tutorial-rail{top:64px}.tutorial-page{margin-bottom:36px}.tutorial-page-meta{padding-inline:2px;font-size:9px}.tutorial-page-meta span:last-child{max-width:72%}.tutorial-chapter{padding-bottom:72px}.tutorial-chapter-head{margin-bottom:38px}.tutorial-chapter-head h2{font-size:clamp(34px,11vw,54px)}.tutorial-block+.tutorial-block{margin-top:48px}.tutorial-sublead{font-size:16px}.tutorial-prose>p:not(.tutorial-sublead){font-size:16px;line-height:1.85}.tutorial-points>div{grid-template-columns:1fr;gap:7px;padding:18px 0}.tutorial-prose blockquote{padding:18px 17px 20px;font-size:18px}.tutorial-figure-labels.hero-grid,.tutorial-figure-labels.hero-grid.label-count-4,.tutorial-figure-labels.stacked{grid-template-columns:1fr}.tutorial-figure-labels.hero-grid li:first-child{grid-column:auto}}