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