.tutorials-body,.tutorials-page{background:#000}.tutorials-page{padding-top:72px;min-height:100vh}.tutorials-hero{position:relative;overflow:hidden;padding:78px max(5vw,30px) 40px;background:radial-gradient(circle at 72% 14%,rgba(171,73,25,.09),transparent 35%),#000}.tutorials-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(184,103,44,.035) 1px,transparent 1px),linear-gradient(rgba(184,103,44,.025) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 78%);pointer-events:none}.tutorials-hero>div,.tutorial-results{position:relative;width:min(1450px,90vw);margin:auto}.tutorials-kicker{display:flex;align-items:center;gap:10px;color:#e18542;font-size:12px;font-weight:800;letter-spacing:.18em}.tutorials-kicker b{font-size:18px;color:#d9944e}.tutorials-title-row{display:grid;grid-template-columns:1fr minmax(340px,420px);align-items:end;gap:50px;margin:20px 0 36px}.tutorials-title-row h1{font:700 clamp(42px,5vw,70px) Inter,sans-serif;letter-spacing:-.045em;line-height:1;margin:0 0 16px;color:#f7f4f1}.tutorials-title-row p{margin:0;color:#aaa39d;font-size:16px;line-height:1.65}.tutorials-search{position:relative;height:50px;display:flex;align-items:center;border:1px solid #30251e;border-radius:7px;background:#070706;color:#937963}.tutorials-search:focus-within{border-color:#92502a;box-shadow:0 0 0 3px rgba(184,103,44,.08)}.tutorials-search>span{position:absolute;left:16px;font-size:22px}.tutorials-search input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#eee4dc;padding:0 45px 0 48px;font:14px Inter,sans-serif}.tutorials-search button{position:absolute;right:9px;width:30px;height:30px;border:0;border-radius:4px;background:transparent;color:#86766b;font-size:21px;opacity:0;pointer-events:none;cursor:pointer}.tutorials-search button.visible{opacity:1;pointer-events:auto}.tutorial-category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.tutorial-category-card{position:relative;isolation:isolate;overflow:hidden;min-height:210px;padding:24px 20px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#0b0908;color:#fff;text-align:left;cursor:pointer;transition:.22s}.tutorial-category-card:before{content:"";position:absolute;z-index:-2;inset:0;background-image:var(--category-cover);background-size:cover;background-position:center;filter:saturate(.6);opacity:.23;transition:.25s}.tutorial-category-card:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(5,5,4,.97),rgba(5,5,4,.7)),linear-gradient(0deg,#070706,transparent)}.tutorial-category-card:nth-child(-n+3){grid-column:span 2}.tutorial-category-card:nth-child(n+4){grid-column:span 3;min-height:190px}.tutorial-category-card:hover,.tutorial-category-card.active{transform:translateY(-3px);border-color:color-mix(in srgb,var(--category-accent) 70%,transparent);box-shadow:0 18px 36px rgba(0,0,0,.35)}.tutorial-category-card:hover:before,.tutorial-category-card.active:before{opacity:.34;transform:scale(1.025)}.tutorial-count{display:inline-flex;margin-bottom:18px;padding:7px 11px;border:1px solid var(--category-accent);border-radius:999px;background:rgba(0,0,0,.45);color:var(--category-accent);font-size:12px;font-weight:800}.tutorial-category-card strong{display:block;font-size:27px;line-height:1.1}.tutorial-category-card p{min-height:44px;margin:9px 0 16px;color:#aea7a1;font-size:13px;line-height:1.55}.tutorial-category-link{color:var(--category-accent);font-size:13px;font-weight:800}.tutorial-results{padding:64px 0 100px}.tutorial-results-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(184,103,44,.16)}.tutorial-results-head h2{font:600 clamp(27px,3vw,40px) Cinzel,serif;margin:8px 0 0}.tutorial-results-head>span{color:#947a68;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.tutorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tutorial-card{overflow:hidden;border:1px solid rgba(184,103,44,.2);border-radius:7px;background:linear-gradient(145deg,#15100c,#0b0806);transition:.22s}.tutorial-card:hover{transform:translateY(-4px);border-color:rgba(218,129,66,.52);box-shadow:0 18px 40px rgba(0,0,0,.28)}.tutorial-card-image{position:relative;height:205px;overflow:hidden;background:#080604}.tutorial-card-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:.3s}.tutorial-card:hover img{transform:scale(1.025);filter:saturate(.95)}.tutorial-card-image span{position:absolute;left:15px;bottom:15px;padding:7px 10px;border:1px solid rgba(226,138,66,.5);background:rgba(8,5,3,.8);color:#efb47c;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.tutorial-card-copy{padding:20px}.tutorial-card-copy small{color:#a06c48;font-size:11px;letter-spacing:.1em}.tutorial-card-copy h3{font:600 20px Cinzel,serif;line-height:1.35;margin:9px 0}.tutorial-card-copy p{color:#9c8e84;font-size:14px;line-height:1.6}.tutorial-card-copy b{display:block;margin-top:17px;color:#d4864e;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.tutorial-empty{grid-column:1/-1;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:1px dashed rgba(184,103,44,.22);color:#8d8179}.tutorial-empty-categories{grid-column:1/-1}.tutorial-empty strong{font:600 19px Cinzel,serif;color:#c9b2a1}@media(max-width:1100px){.tutorial-category-grid{grid-template-columns:repeat(2,1fr)}.tutorial-category-card,.tutorial-category-card:nth-child(n){grid-column:span 1}.tutorial-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.tutorials-page{padding-top:62px}.tutorials-hero{padding:55px 0 25px}.tutorials-title-row{grid-template-columns:1fr;gap:25px}.tutorials-search{width:100%}.tutorial-category-grid,.tutorial-grid{grid-template-columns:1fr}.tutorial-category-card,.tutorial-category-card:nth-child(n){min-height:180px}.tutorial-results{padding:48px 0 75px}.tutorial-results-head{align-items:flex-start;flex-direction:column}.tutorial-card-image{height:190px}}
