@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");:root{--bg:#0f0f0f;--bg-elevated:#212121;--bg-hover:#272727;--text:#f1f1f1;--text-muted:#aaaaaa;--border:#303030;--accent:#3ea6ff;--badge-bg:rgba(0,0,0,0.8);--rgb-white:255,255,255;--card-hover:rgba(var(--rgb-white),0.10);--font:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--page-max-width:1904px;--page-gutter:27px}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{color-scheme:dark}body{font-family:var(--font);background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}button{font-family:var(--font)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.pageWrapper{display:flex;flex-direction:column;min-height:100vh;flex:1 1}.pageContent{width:min(var(--page-max-width),95vw);margin:0 auto;padding:0 var(--page-gutter);flex:1 1}.controls{padding:24px 0 0;justify-content:space-between;gap:20px;flex-wrap:wrap}.controls,.controlsLeft{display:flex;align-items:center}.controlsLeft{gap:17px}.filterButton{display:flex;align-items:center;gap:10px;background-color:var(--bg-elevated);border:none;border-radius:34px;color:var(--text);font-size:22px;padding:14px 27px;cursor:pointer;font-family:var(--font);transition:background-color .15s}.filterButton svg{width:27px;height:27px;flex-shrink:0}.filterButton:hover{background-color:var(--bg-hover)}.filterBadge{background-color:var(--accent);color:#000;font-size:19px;font-weight:600;border-radius:17px;padding:2px 10px;min-width:31px;text-align:center}.activeFiltersRow{padding:14px 0 0}.homepage{flex:1 1;padding:102px 0 68px}.homepageSubtitle{font-size:24px;color:var(--text-muted);margin-bottom:68px;line-height:1.5;text-align:center}.tutorialGrid{display:grid;grid-template-columns:1fr;grid-column-gap:27px;column-gap:27px;grid-row-gap:54px;row-gap:54px}@media (min-width:720px){.tutorialGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1100px){.tutorialGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}.tutorialCard{cursor:default;border-radius:8px;padding:20px;background-color:var(--card-hover);border:2px solid var(--border)}.tutorialThumbnail{width:100%;aspect-ratio:16/9;border-radius:8px;background-color:#1a1a1a;overflow:hidden;border:3px solid var(--border)}.tutorialImage{width:100%;height:100%;object-fit:cover;display:block}.tutorialDetails{padding:20px 0 0}.tutorialDesc{font-size:24px;color:#ccc;line-height:31px;text-align:center}