@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-tracking:initial;--tw-border-style:solid;--tw-leading:initial}}}.tutorials-page{max-width:var(--site-max-width);padding-inline:calc(var(--spacing,.25rem)*8);padding-top:calc(var(--spacing,.25rem)*32);padding-bottom:calc(var(--spacing,.25rem)*24);margin-inline:auto}@media (max-width:767px){.tutorials-page{padding-inline:calc(var(--spacing,.25rem)*4);padding-top:calc(var(--spacing,.25rem)*24);padding-bottom:calc(var(--spacing,.25rem)*16)}}.tutorials-empty{padding-block:calc(var(--spacing,.25rem)*32);text-align:center}.tutorials-empty h1{margin-bottom:calc(var(--spacing,.25rem)*4);font-size:var(--text-5xl,3rem);line-height:var(--tw-leading,var(--text-5xl--line-height,1));--tw-font-weight:500;font-weight:500}.tutorials-empty p{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));opacity:.6}.tutorials-header{margin-bottom:calc(var(--spacing,.25rem)*10)}.tutorials-header .subheading{margin-bottom:calc(var(--spacing,.25rem)*2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:500;--tw-tracking:.15em;letter-spacing:.15em;text-transform:uppercase;opacity:.5;font-weight:500;display:block}.tutorials-header h1{font-size:var(--text-5xl,3rem);line-height:var(--tw-leading,var(--text-5xl--line-height,1));--tw-font-weight:500;font-weight:500}@media (max-width:767px){.tutorials-header h1{font-size:var(--text-3xl,1.875rem);line-height:var(--tw-leading,var(--text-3xl--line-height,calc(2.25/1.875)))}}.tutorials-layout{gap:calc(var(--spacing,.25rem)*8);display:flex}@media (max-width:1023px){.tutorials-layout{flex-direction:column}}.tutorials-player{min-width:calc(var(--spacing,.25rem)*0);flex:1}.tutorials-player .video-wrapper{border-radius:var(--radius-2xl,1rem);aspect-ratio:16/9;background:var(--color-base-black);width:100%;position:relative;overflow:hidden}.tutorials-player .video-wrapper iframe{inset:calc(var(--spacing,.25rem)*0);border-style:var(--tw-border-style);border-width:0;width:100%;height:100%;position:absolute}.tutorials-player .video-info{padding-top:calc(var(--spacing,.25rem)*6)}.tutorials-player .video-info h2{margin-bottom:calc(var(--spacing,.25rem)*2);font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2/1.5)));--tw-font-weight:500;font-weight:500}@media (max-width:767px){.tutorials-player .video-info h2{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)))}}.tutorials-player .video-info p{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5/1)));--tw-leading:var(--leading-relaxed,1.625);line-height:var(--leading-relaxed,1.625);opacity:.7;white-space:pre-line}.tutorials-playlist{flex-shrink:0;width:380px}@media (max-width:1023px){.tutorials-playlist{width:100%}}.tutorials-playlist .playlist-header{margin-bottom:calc(var(--spacing,.25rem)*4);justify-content:space-between;align-items:baseline;display:flex}.tutorials-playlist .playlist-header h3{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75/1.125)));--tw-font-weight:500;font-weight:500}.tutorials-playlist .playlist-header .video-count{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));opacity:.5}.tutorials-playlist .playlist-list{margin:calc(var(--spacing,.25rem)*0);gap:calc(var(--spacing,.25rem)*1);padding:calc(var(--spacing,.25rem)*0);flex-direction:column;max-height:70vh;list-style-type:none;display:flex;overflow-y:auto}@media (max-width:1023px){.tutorials-playlist .playlist-list{max-height:none}}.tutorials-playlist .playlist-list li{list-style:none}.playlist-item{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem)*3);border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);width:100%;padding:calc(var(--spacing,.25rem)*2);text-align:left;background:0 0;border-width:0;transition:background .15s;display:flex}.playlist-item:hover{background:#0000000d}.playlist-item.active{background:#00000014}.playlist-item .playlist-index{width:calc(var(--spacing,.25rem)*6);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:500;opacity:.4;flex-shrink:0;font-weight:500}.playlist-item .playlist-thumb{border-radius:var(--radius-lg,.5rem);aspect-ratio:16/9;background:#00000014;flex-shrink:0;width:120px;position:relative;overflow:hidden}.playlist-item .playlist-thumb img{object-fit:cover;width:100%;height:100%}.playlist-item .playlist-thumb .thumb-placeholder{background:#0000000f;width:100%;height:100%}.playlist-item .playlist-thumb .playlist-duration{right:calc(var(--spacing,.25rem)*1);bottom:calc(var(--spacing,.25rem)*1);padding-inline:calc(var(--spacing,.25rem)*1.5);padding-block:calc(var(--spacing,.25rem)*.5);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-font-weight:500;color:#fff;background:#000000bf;border-radius:.25rem;font-weight:500;position:absolute}.playlist-item .playlist-meta{min-width:calc(var(--spacing,.25rem)*0);flex:1}.playlist-item .playlist-meta .playlist-title{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-leading:var(--leading-snug,1.375);line-height:var(--leading-snug,1.375);--tw-font-weight:500;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:500;display:-webkit-box;overflow:hidden}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}
