body.VideoTutorials,
body.VideoTutorials button,
body.VideoTutorials input { font-family: "Montserrat", sans-serif; }
body.VideoTutorials .app-page-content { padding: 0 !important; }
body.VideoTutorials .video-tutorials-page { color: #25153c; background: #fff; }
body.VideoTutorials .video-tutorials-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
body.VideoTutorials .video-tutorials-hero { padding: 104px 0 72px; text-align: center; background: radial-gradient(circle at 18% 10%, rgba(216,180,254,.42), transparent 28%), radial-gradient(circle at 86% 24%, rgba(254,215,170,.52), transparent 29%), linear-gradient(135deg,#fff,#faf5ff 55%,#fff7ed); }
body.VideoTutorials .video-tutorials-hero > .video-tutorials-shell { max-width: 780px; }
body.VideoTutorials .video-tutorials-kicker { display: inline-block; padding: 8px 15px; border-radius: 999px; color: #7e22ce; background: #f3e8ff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
body.VideoTutorials .video-tutorials-hero h1 { margin: 22px 0 16px; font-size: clamp(42px,6vw,64px); line-height: 1.05; font-weight: 800; letter-spacing: -.045em; }
body.VideoTutorials .video-tutorials-hero h1 span { background: linear-gradient(90deg,#9333ea,#f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.VideoTutorials .video-tutorials-hero p { max-width: 650px; margin: 0 auto 26px !important; color: #6c5393; font-size: 18px; line-height: 1.65; }
body.VideoTutorials .video-tutorials-search { display: flex; max-width: 540px; margin: auto; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid #e3d8ed; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(62,31,95,.08); }
body.VideoTutorials .video-tutorials-search span { color: #7e22ce; font-size: 24px; }
body.VideoTutorials .video-tutorials-search input { width: 100%; height: 52px; border: 0 !important; outline: 0; background: transparent; font-size: 15px; }
body.VideoTutorials .video-tutorials-library { padding: 72px 0 96px; }
body.VideoTutorials .video-tutorials-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 48px; }
body.VideoTutorials .video-tutorials-nav { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 5px; }
body.VideoTutorials .video-tutorials-nav button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; color: #705884; background: transparent; cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; }
body.VideoTutorials .video-tutorials-nav button:hover, body.VideoTutorials .video-tutorials-nav button.is-active { color: #6b21a8; background: #f3e8ff; }
body.VideoTutorials .video-tutorials-nav button span { min-width: 20px; padding: 2px 6px; border-radius: 99px; background: rgba(255,255,255,.7); color: #806a91; font-size: 11px; text-align: center; }
body.VideoTutorials .tutorial-category { margin-bottom: 56px; }
body.VideoTutorials .tutorial-category[hidden] { display: none; }
body.VideoTutorials .tutorial-category__heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
body.VideoTutorials .tutorial-category__heading h2 { margin: 0; color: #25153c; font-size: 25px; letter-spacing: -.025em; }
body.VideoTutorials .tutorial-category__heading span { color: #806a91; font-size: 13px; }
body.VideoTutorials .tutorial-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
body.VideoTutorials .tutorial-card { overflow: hidden; border: 1px solid #eee7f4; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(65,29,105,.07); transition: transform .18s ease, box-shadow .18s ease; }
body.VideoTutorials .tutorial-card:hover { transform: translateY(-3px); box-shadow: 0 16px 33px rgba(65,29,105,.13); }
body.VideoTutorials .tutorial-card[hidden] { display: none; }
body.VideoTutorials .tutorial-card__media { position: relative; display: grid; width: 100%; aspect-ratio: 16/9; place-items: center; border: 0; color: #fff; background: linear-gradient(135deg,#552083,#ef6d22); cursor: pointer; }
body.VideoTutorials .tutorial-card__media::before { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%,rgba(255,255,255,.28),transparent 38%); content:""; }
body.VideoTutorials .tutorial-card__play { position: relative; display: grid; width: 58px; height: 58px; place-items: center; padding-left: 3px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(255,255,255,.18); font-size: 21px; transition: transform .18s ease; }
body.VideoTutorials .tutorial-card__media:hover .tutorial-card__play { transform: scale(1.1); }
body.VideoTutorials .tutorial-card__duration { position: absolute; right: 10px; bottom: 10px; padding: 4px 7px; border-radius: 5px; background: rgba(23,16,31,.78); font-size: 11px; font-weight: 700; }
body.VideoTutorials .tutorial-card__body { padding: 18px; }
body.VideoTutorials .tutorial-card__body h3 { margin: 0 0 8px; color: #25153c; font-size: 16px; line-height: 1.3; }
body.VideoTutorials .tutorial-card__body p { min-height: 42px; margin: 0 0 15px !important; color: #806a91; font-size: 13px; line-height: 1.55; }
body.VideoTutorials .tutorial-card__watch { padding: 0; border: 0; color: #7e22ce; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; }
body.VideoTutorials .tutorial-card__watch:hover { color: #ea6d1e; }
body.VideoTutorials .video-tutorials-no-results { margin: 30px 0; color: #806a91; text-align: center; }
body.VideoTutorials .video-tutorials-empty { padding: 100px 0; text-align: center; }
body.VideoTutorials .video-tutorials-empty h2 { margin: 0; font-size: 28px; }
@media (max-width: 980px) { body.VideoTutorials .video-tutorials-layout { grid-template-columns: 1fr; gap: 28px; } body.VideoTutorials .video-tutorials-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; } body.VideoTutorials .video-tutorials-nav button { width: auto; flex: 0 0 auto; } body.VideoTutorials .tutorial-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { body.VideoTutorials .video-tutorials-hero { padding: 78px 0 54px; } body.VideoTutorials .video-tutorials-hero p { font-size: 16px; } body.VideoTutorials .video-tutorials-library { padding: 52px 0 70px; } body.VideoTutorials .tutorial-grid { grid-template-columns: 1fr; } }