/* Open tutorial video library */
.tutorial-hero { min-height:46svh; display:grid; grid-template-columns:1.25fr .75fr; align-items:end; gap:8vw; padding:clamp(90px,11vw,160px) clamp(24px,7vw,130px) clamp(64px,7vw,100px); border-bottom:1px solid var(--inner-line); }
.tutorial-hero h1 { margin:0; font-size:clamp(3.4rem,7.5vw,8.5rem); line-height:.9; letter-spacing:-.07em; font-weight:400; }
.tutorial-hero>p { max-width:520px; margin:0 0 8px; color:#5f5a52; font-size:clamp(14px,1.3vw,19px); line-height:1.75; }
.tutorial-controls { position:sticky; z-index:20; top:82px; display:grid; grid-template-columns:minmax(300px,.8fr) 1.2fr; align-items:center; gap:30px; padding:17px clamp(20px,4vw,60px); border-bottom:1px solid var(--inner-line); background:rgba(243,240,232,.96); backdrop-filter:blur(16px); }
.tutorial-search { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:0 14px 0 0; border-bottom:1px solid var(--inner-ink); }
.tutorial-search span { font-size:9px; letter-spacing:.16em; }.tutorial-search input { width:100%; padding:12px 0; border:0; outline:0; color:var(--inner-ink); background:transparent; font:13px inherit; }.tutorial-search input::placeholder { color:#918c83; }.tutorial-search kbd { font:18px serif; }
.tutorial-filters { display:flex; justify-content:flex-end; gap:4px; overflow:auto; scrollbar-width:none; }.tutorial-filters::-webkit-scrollbar{display:none}.tutorial-filters .filter-button { padding:9px 12px; }
.tutorial-featured { padding:clamp(58px,7vw,110px) clamp(20px,5vw,84px) 0; }
.featured-video-card { width:100%; display:grid; grid-template-columns:1.55fr .8fr; gap:0; padding:0; border:0; color:inherit; background:transparent; text-align:left; cursor:pointer; }
.featured-video-card__visual { position:relative; overflow:hidden; aspect-ratio:16/8.2; }.featured-video-card__copy { display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(30px,5vw,76px); color:#eeeae2; background:#171716; }.featured-video-card__copy small { margin-bottom:auto; color:#aaa49a; font-size:9px; letter-spacing:.16em; }.featured-video-card__copy strong { font-size:clamp(2rem,4vw,4.8rem); line-height:1; letter-spacing:-.055em; font-weight:400; }.featured-video-card__copy>span { max-width:430px; margin-top:22px; color:#aaa59c; font-size:13px; line-height:1.7; }.featured-video-card__copy em { width:max-content; margin-top:28px; padding-bottom:4px; border-bottom:1px solid; font-size:10px; font-style:normal; letter-spacing:.12em; }
.tutorial-art { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; color:#736c60; background:radial-gradient(circle at 72% 32%,#fffdf7,transparent 23%),linear-gradient(130deg,#e9e4d8,#c9bdab); }.tutorial-art small{font-size:8px;letter-spacing:.2em}.tutorial-art b{font-size:clamp(2rem,6vw,6.5rem);font-weight:400;letter-spacing:-.06em;opacity:.48}.tutorial-art--02{background:linear-gradient(145deg,#e7e1d5,#c9bdab)}.tutorial-art--03{background:radial-gradient(circle at 60% 35%,#f8f5ed,transparent 27%),linear-gradient(145deg,#ddd5c8,#b8aa97)}.tutorial-art--04{background:linear-gradient(135deg,#d8d1c5,#eee9df 48%,#b9ad9d)}.tutorial-art--05{background:radial-gradient(circle at 30% 68%,#fff,transparent 22%),linear-gradient(145deg,#e8e0d1,#c5b7a3)}.tutorial-art--06{background:linear-gradient(145deg,#f0ece3,#cfc7bb)}.tutorial-art--07{background:radial-gradient(circle at 75% 25%,#fffdf6,transparent 22%),linear-gradient(145deg,#ded6c8,#b7aa98)}
.play-disc,.play-button { position:absolute; display:grid; place-items:center; border-radius:50%; color:#141414; background:rgba(247,244,236,.94); transition:transform .35s,background .35s; }.play-disc { top:50%; left:50%; width:76px; height:76px; transform:translate(-50%,-50%); font-size:16px; padding-left:4px; }.play-button { right:18px; bottom:18px; width:46px; height:46px; font-size:11px; padding-left:3px; }.featured-video-card:hover .play-disc{transform:translate(-50%,-50%) scale(1.08)}.tutorial-card__media:hover .play-button{transform:scale(1.08)}.duration { position:absolute; right:16px; top:16px; padding:7px 9px; color:#fff; background:rgba(15,15,15,.68); font-size:9px; letter-spacing:.08em; }
.tutorial-library { padding:clamp(90px,10vw,160px) clamp(20px,5vw,84px); }.tutorial-library__head { display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; padding-bottom:22px; border-bottom:1px solid var(--inner-line); }.tutorial-library__head h2 { margin:0; font-size:clamp(2.4rem,5vw,5.5rem); line-height:.9; letter-spacing:-.06em; font-weight:400; }.tutorial-library__head>span { color:var(--inner-muted); font-size:10px; letter-spacing:.12em; }
.tutorial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(40px,5vw,76px) clamp(18px,2.5vw,38px); }.tutorial-card[hidden]{display:none}.tutorial-card__media { position:relative; width:100%; overflow:hidden; aspect-ratio:16/10; padding:0; border:0; background:#ddd5c8; cursor:pointer; }.tutorial-card__meta { display:flex; justify-content:space-between; margin-top:15px; color:#817b72; font-size:9px; letter-spacing:.13em; }.tutorial-card h3 { margin:11px 0 8px; font-size:clamp(1.25rem,2vw,2.05rem); line-height:1.12; letter-spacing:-.035em; font-weight:400; }.tutorial-card p { margin:0; color:#6c675f; font-size:12px; line-height:1.65; }.tutorial-empty { padding:70px 0; border-top:1px solid var(--inner-line); color:var(--inner-muted); font-size:14px; text-align:center; }
.video-modal { position:fixed; z-index:400; inset:0; display:none; }.video-modal.is-open{display:block}.video-modal__backdrop{position:absolute;inset:0;background:rgba(12,12,12,.78);backdrop-filter:blur(10px)}.video-modal__panel{position:absolute;top:50%;left:50%;width:min(1080px,92vw);max-height:90vh;overflow:auto;transform:translate(-50%,-50%);color:#eeeae2;background:#141414}.video-modal__top{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:22px 26px}.video-modal__top small{color:#918c83;font-size:8px;letter-spacing:.18em}.video-modal__top h2{margin:7px 0 0;font-size:clamp(1.25rem,2.4vw,2.5rem);font-weight:400;letter-spacing:-.035em}.video-modal__top button{border:0;color:inherit;background:transparent;font-size:34px;font-weight:200;cursor:pointer}.video-shell{position:relative;aspect-ratio:16/9;background:#080808}.video-shell video{position:absolute;inset:0;z-index:2;width:100%;height:100%;background:#080808}.video-fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:#777;background:linear-gradient(135deg,#1d1d1d,#0a0a0a)}
.video-shell.has-error video{display:none}.video-fallback[hidden]{display:none}.video-fallback b{font-size:clamp(3rem,10vw,8rem);font-weight:400;opacity:.28}.video-fallback span{font-size:11px;letter-spacing:.1em}.video-modal__foot{display:flex;justify-content:space-between;gap:20px;padding:17px 26px;color:#8c877e;font-size:9px;letter-spacing:.12em}body.video-open{overflow:hidden}
@media(max-width:980px){.tutorial-controls{grid-template-columns:1fr}.tutorial-filters{justify-content:flex-start}.featured-video-card{grid-template-columns:1fr}.featured-video-card__copy{min-height:390px}.tutorial-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.tutorial-hero{grid-template-columns:1fr;min-height:48svh;padding:90px 24px 58px}.tutorial-hero h1{font-size:clamp(3rem,16vw,5rem)}.tutorial-hero>p{margin-top:26px}.tutorial-controls{top:72px;padding:14px 20px;gap:14px}.tutorial-featured{padding:42px 20px 0}.featured-video-card__visual{aspect-ratio:16/10}.featured-video-card__copy{min-height:320px;padding:30px 24px}.tutorial-library{padding:80px 20px}.tutorial-grid{grid-template-columns:1fr}.tutorial-library__head{align-items:end}.play-disc{width:60px;height:60px}.video-modal__panel{width:96vw}.video-modal__foot{display:block}.video-modal__foot span{display:block;margin-top:6px}}