.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.tutorials-hero{--dot-field-inset:0 0 0 34%;--dot-field-size:34px 34px;border-top:1px solid #0000;border-bottom:1px solid var(--line-strong);grid-template-columns:minmax(0,1fr) minmax(260px,390px);gap:clamp(34px,6vw,90px);min-height:440px;display:grid;position:relative;overflow:hidden}.tutorials-hero-copy{z-index:1;align-content:center;gap:22px;max-width:860px;padding:56px 0 64px;display:grid;position:relative}.tutorials-hero h1{--poster-heading-size:clamp(4.2rem, 7.4vw, 7.4rem);max-width:10ch}.tutorials-lede{max-width:43ch;color:var(--ink);font-family:var(--mono);font-size:var(--mono-copy-size);font-weight:500;line-height:1.8}.tutorials-hero-actions{font-family:var(--mono);flex-wrap:wrap;gap:12px;display:flex}.tutorials-hero-actions a{border:1px solid var(--line-strong);min-height:40px;color:var(--ink);font-size:var(--mono-meta-size);text-transform:uppercase;align-items:center;padding:0 14px;font-weight:900;transition:border-color .16s,color .16s,transform .16s;display:inline-flex}.tutorials-hero-actions a:hover,.tutorials-hero-actions a:focus-visible{border-color:var(--red);color:var(--red);transform:translateY(-2px)}.tutorials-process{z-index:1;border:1px solid var(--line-strong);font-family:var(--mono);background:radial-gradient(circle at 88% 12%,#d9272229,#0000 8rem),#ffffff2e;align-self:center;gap:18px;padding:24px;display:grid;position:relative}.tutorials-process p{color:var(--red);font-size:var(--mono-meta-size);letter-spacing:.09em;text-transform:uppercase;font-weight:900}.tutorials-process ol{gap:12px;margin:0;padding:0;list-style:none;display:grid}.tutorials-process li{border-top:1px solid var(--line);min-height:42px;color:var(--ink);font-size:var(--mono-label-size);text-transform:uppercase;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:12px;font-weight:800;display:grid}.tutorials-process li span{aspect-ratio:1;background:var(--ink);width:32px;color:var(--paper);font-size:var(--mono-meta-size);place-items:center;display:grid}.tutorials-section{padding:34px 0 82px}.tutorials-layout{gap:18px;display:grid}.tutorial-card{border:1px solid var(--line);background:#ffffff29;transition:border-color .16s,background-color .16s,transform .16s;display:block;position:relative}.tutorial-card:hover,.tutorial-card:focus-visible{border-color:var(--red);background:#ffffff52;transform:translateY(-2px)}.tutorial-card article{grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);min-height:220px;display:grid}.tutorial-card-featured article{grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);min-height:420px}.tutorial-card-media{border-right:1px solid var(--line);min-height:100%;position:relative;overflow:hidden}.tutorial-card-media img,.tutorial-card-placeholder{object-fit:cover;filter:saturate(.78)contrast(1.06);width:100%;height:100%;min-height:220px;display:block}.tutorial-card-featured .tutorial-card-media img,.tutorial-card-featured .tutorial-card-placeholder{min-height:420px}.tutorial-card-placeholder{background:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px), #10100f0d;background-size:34px 34px}.tutorial-card-placeholder:before{content:"";border:1px solid var(--line-strong);border-radius:50%;position:absolute;inset:28%}.tutorial-card-placeholder:after{content:"";background:var(--line-strong);height:1px;position:absolute;inset:50% 18%}.tutorial-card-media>span{color:var(--paper);font-family:var(--display);text-shadow:0 2px 18px #10100f75;font-size:clamp(3.2rem,6vw,5.8rem);font-weight:900;line-height:.8;position:absolute;bottom:14px;left:16px}.tutorial-card-content{font-family:var(--mono);align-content:center;gap:18px;padding:clamp(22px,4vw,44px);display:grid}.tutorial-card-meta{color:var(--muted);font-size:var(--mono-meta-size);letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap;gap:10px 18px;font-weight:900;display:flex}.tutorial-card-meta span{color:var(--red)}.tutorial-card-meta small{color:var(--ink)}.tutorial-card h3{max-width:22ch;font-family:var(--display);letter-spacing:0;text-transform:uppercase;margin:0;font-size:clamp(2.1rem,3.4vw,4.4rem);font-weight:900;line-height:.92}.tutorial-card:not(.tutorial-card-featured) h3{font-family:var(--mono);font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.3}.tutorial-card-content>p{max-width:60ch;color:var(--muted);font-size:var(--mono-copy-size);font-weight:500;line-height:1.75}.tutorial-card-link{border:1px solid var(--line-strong);width:fit-content;min-height:42px;color:var(--ink);font-size:var(--mono-label-size);text-transform:uppercase;align-items:center;gap:24px;padding:0 14px;font-weight:900;display:inline-flex}.tutorial-card-link span{color:var(--red);font-size:1.24rem}.tutorials-state{border:1px solid var(--line-strong);background:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px), #dbd9d761;text-align:center;background-size:42px 42px;align-content:center;justify-items:center;gap:10px;min-height:260px;display:grid}.tutorials-state p{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,5vw,4.2rem);font-weight:900;line-height:.92}.tutorials-state span{max-width:44ch;color:var(--muted);font-family:var(--mono);font-size:var(--mono-copy-size);line-height:1.65}.tutorials-pagination{font-family:var(--mono);font-size:var(--mono-meta-size);justify-content:center;align-items:center;gap:12px;margin-top:34px;font-weight:800;display:flex}.pagination-page,.pagination-arrow{aspect-ratio:1;border:1px solid var(--line);background:#ffffff29;place-items:center;width:34px;display:grid}.pagination-page.is-current{border-color:var(--red);color:var(--red)}.pagination-arrow.is-disabled{opacity:.38;pointer-events:none}@media (width<=920px){.tutorials-hero{grid-template-columns:1fr}.tutorials-process{align-self:start;width:min(100%,460px)}.tutorial-card article,.tutorial-card-featured article{grid-template-columns:1fr;min-height:0}.tutorial-card-media{border-right:0;border-bottom:1px solid var(--line)}.tutorial-card-media img,.tutorial-card-placeholder,.tutorial-card-featured .tutorial-card-media img,.tutorial-card-featured .tutorial-card-placeholder{aspect-ratio:1.78;height:auto;min-height:0}}@media (width<=640px){.tutorials-hero{min-height:auto}.tutorials-hero-copy{padding:42px 0 28px}.tutorials-hero h1{--poster-heading-size:clamp(3.8rem, 17vw, 5.6rem)}.tutorials-section{padding-bottom:58px}.tutorial-card-content{padding:22px 18px}.tutorial-card h3,.tutorial-card:not(.tutorial-card-featured) h3{font-size:clamp(1.55rem,8vw,2.4rem);line-height:1}.tutorial-card-link{justify-content:space-between;width:100%}}