.tutorials-body{background:radial-gradient(circle at 85% 8%,rgba(167,25,36,.13),transparent 27%),var(--night)}
.tutorials-main{max-width:var(--max);margin:0 auto;padding:0 24px}
.tutorials-hero{max-width:900px;padding:105px 0 80px}
.tutorials-hero h1{margin-bottom:28px;font-size:clamp(3.7rem,7.2vw,7.2rem)}
.tutorials-hero h1 span{color:var(--bright);font-style:italic}
.tutorials-hero>p:last-child{max-width:720px;margin:0;color:var(--muted);font-size:1.06rem}
.tutorial-language{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:-30px 0 60px;padding:24px 28px;border:1px solid rgba(198,167,102,.28);background:rgba(198,167,102,.055)}
.tutorial-language .eyebrow{margin:0 0 5px}.tutorial-language p:last-child{margin:0;color:var(--muted);font-size:.9rem}
.language-switcher{display:flex;flex-wrap:wrap;gap:8px}.language-option{min-height:42px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:#d7cec5;font:700 .76rem/1 inherit;letter-spacing:.035em;cursor:pointer;transition:border-color .2s,background .2s,color .2s}.language-option:hover{border-color:rgba(198,167,102,.65);color:var(--bright)}.language-option.is-active{border-color:var(--gold);background:var(--gold);color:#171315}
.tutorial-list{display:grid;gap:84px;padding-bottom:105px}
.tutorial-card{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:clamp(38px,6vw,78px);align-items:center;padding:46px;border:1px solid var(--line);background:rgba(23,21,25,.82);box-shadow:0 30px 80px rgba(0,0,0,.3)}
.tutorial-card.elder-tutorial{background:rgba(27,24,28,.9)}
.tutorial-copy>div:first-child{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.tutorial-copy .eyebrow{margin:0}
.tutorial-number{color:#766d68;font-family:Georgia,"Times New Roman",serif;font-size:1.2rem}
.tutorial-copy h2{margin-bottom:20px;font-size:clamp(2.25rem,4vw,3.65rem)}
.tutorial-copy>p{color:var(--muted)}
.tutorial-copy ul{display:grid;gap:8px;margin:25px 0 28px;padding:20px 0 20px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#d4ccc3;font-size:.84rem}
.tutorial-copy li::marker{color:var(--gold)}
.video-frame{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(198,167,102,.4);background:#080708;box-shadow:0 22px 55px rgba(0,0,0,.48)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tutorials-cta{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:100px;padding:60px;border-top:1px solid rgba(198,167,102,.45);border-bottom:1px solid rgba(198,167,102,.18);background:linear-gradient(100deg,rgba(167,25,36,.14),rgba(198,167,102,.04))}
.tutorials-cta h2{margin:0;font-size:clamp(2.3rem,4vw,3.6rem)}
.tutorials-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:900px){.tutorial-language{align-items:flex-start;flex-direction:column}.tutorial-card{grid-template-columns:1fr;padding:32px}.tutorial-copy{max-width:690px}.tutorials-cta{align-items:flex-start;flex-direction:column;padding:42px}}
@media(max-width:560px){.tutorials-main{padding:0 20px}.tutorials-hero{padding:75px 0 58px}.tutorials-hero h1{font-size:3.35rem}.tutorial-language{margin-top:-20px;padding:22px}.language-switcher{width:100%}.language-option{flex:1;padding:0 11px}.tutorial-list{gap:45px;padding-bottom:72px}.tutorial-card{padding:22px}.tutorial-copy h2{font-size:2.25rem}.tutorials-cta{margin-bottom:72px;padding:34px 22px}.tutorials-actions{width:100%}}
