.tutorials-page{min-height:100vh;background:linear-gradient(135deg,var(--background-color) 0%,var(--section-bg) 100%)}.tutorials-filter-section{padding:var(--spacing-lg) 0 var(--spacing-md)}.tutorials-filter{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-sm) 0}.tutorials-filter-pill{padding:var(--spacing-xs) var(--spacing-md);border-radius:999px;font-size:.9rem;font-weight:600;background:var(--card-bg);color:var(--text-color);border:1px solid var(--border-color);cursor:pointer;transition:all var(--transition-normal)}.tutorials-filter-pill:hover{background:var(--section-bg);border-color:var(--accent-color);color:var(--accent-color)}.tutorials-filter-pill.active{background:linear-gradient(135deg,var(--accent-color),var(--accent-hover));color:#fff;border-color:transparent}.tutorials-grid-section{padding:var(--spacing-lg) 0 var(--spacing-xl)}.tutorials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg)}.tutorial-card{background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-color);transition:transform var(--transition-normal),box-shadow var(--transition-normal);cursor:pointer;display:flex;flex-direction:column;animation:tutorialFadeIn .5s ease-out}.tutorial-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px var(--card-shadow)}.tutorial-card:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.tutorial-card-thumbnail-wrap{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--section-bg)}.tutorial-card-thumbnail{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.tutorial-card:hover .tutorial-card-thumbnail{transform:scale(1.05)}.tutorial-card-play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;transition:background var(--transition-normal)}.tutorial-card:hover .tutorial-card-play-overlay{background:#0000004d}.tutorial-card-play-icon{width:64px;height:64px;border-radius:50%;background:#fffffff2;display:flex;align-items:center;justify-content:center;color:var(--accent-color);font-size:1.5rem;padding-left:4px;transition:transform var(--transition-normal)}.tutorial-card:hover .tutorial-card-play-icon{transform:scale(1.1)}.tutorial-card-duration{position:absolute;bottom:var(--spacing-xs);right:var(--spacing-xs);padding:2px 8px;background:#000000bf;color:#fff;font-size:.75rem;font-weight:600;border-radius:var(--radius-sm)}.tutorial-card-body{padding:var(--spacing-md);flex:1;display:flex;flex-direction:column}.tutorial-card-feature{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-color);font-weight:600;margin-bottom:var(--spacing-xs)}.tutorial-card-title{font-size:1.1rem;font-weight:700;color:var(--text-color);margin-bottom:var(--spacing-xs);line-height:1.3}.tutorial-card-description{font-size:.9rem;color:var(--text-color);opacity:.85;line-height:1.5}@keyframes tutorialFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.video-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);opacity:0;visibility:hidden;transition:opacity var(--transition-normal),visibility var(--transition-normal)}.video-modal[data-open=true]{opacity:1;visibility:visible}.video-modal[data-open=true] .modal-content{transform:scale(1)}.video-modal:not([hidden]){display:flex}.modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;cursor:pointer}.modal-content{position:relative;width:100%;max-width:900px;background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 48px #0006;transform:scale(.95);transition:transform var(--transition-normal)}.modal-close{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:40px;height:40px;border-radius:50%;border:none;background:#0009;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;padding:0;transition:background var(--transition-fast)}.modal-close:hover{background:#000c}.video-embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-embed-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}@media (max-width: 1024px){.tutorials-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.tutorials-filter-section{padding:var(--spacing-md) 0}.tutorials-filter{gap:var(--spacing-xs);justify-content:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;padding:var(--spacing-xs) 0;margin:0 calc(-1 * var(--spacing-sm));padding-left:var(--spacing-sm);padding-right:var(--spacing-sm)}.tutorials-filter::-webkit-scrollbar{display:none}.tutorials-filter-pill{font-size:.85rem;padding:var(--spacing-sm) var(--spacing-md);min-height:44px;flex-shrink:0}.tutorials-grid-section{padding:var(--spacing-md) 0 var(--spacing-xl)}.tutorials-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.tutorial-card{min-height:0}.tutorial-card-play-icon{width:56px;height:56px;font-size:1.25rem}.video-modal{padding:0;align-items:stretch}.modal-content{width:100%;max-width:none;height:100%;min-height:100vh;min-height:100dvh;margin:0;border-radius:0;display:flex;flex-direction:column}.video-embed-container{position:relative;flex:1;padding-bottom:0;height:100%;min-height:0}.video-embed-container iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.modal-close{width:44px;height:44px;top:env(safe-area-inset-top,var(--spacing-xs));right:var(--spacing-xs)}}@media (max-width: 480px){.tutorials-page .container{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm)}.tutorials-filter-pill{font-size:.8rem;padding:var(--spacing-xs) var(--spacing-sm);min-height:40px}.tutorial-card-body{padding:var(--spacing-sm)}.tutorial-card-title{font-size:1rem}.tutorial-card-description{font-size:.85rem}.tutorial-card-feature{font-size:.65rem}.modal-close{width:48px;height:48px;top:env(safe-area-inset-top,var(--spacing-xs));right:var(--spacing-xs)}}@media (hover: none){.tutorial-card:active{transform:scale(.98)}.tutorials-filter-pill:active{opacity:.8}}body.dark-theme .tutorials-page{background:linear-gradient(135deg,var(--bg-color, #1a1a1a) 0%,var(--section-bg) 100%)}body.dark-theme .tutorial-card,body.dark-theme .tutorials-filter-pill{background:var(--card-bg);border-color:var(--border-color)}