:root{--tutorials-bg: #000000;--tutorials-text-primary: #ffffff;--tutorials-text-secondary: #d1d5db;--tutorials-text-muted: #9ca3af;--tutorials-text-subtle: #6b7280;--tutorials-accent: #60a5fa;--tutorials-accent-hover: #93c5fd;--tutorials-border: #6b7280;--tutorials-border-hover: #9ca3af;--tutorials-overlay: rgba(255, 255, 255, .1);--tutorials-bg-overlay: rgba(255, 255, 255, .1);--tutorials-bg-overlay-hover: rgba(59, 130, 246, .2);--tutorials-border-color: rgba(255, 255, 255, .2);--tutorials-border-hover-color: rgba(59, 130, 246, .4);--tutorials-shadow: rgba(0, 0, 0, .3);--tutorials-shadow-hover: rgba(59, 130, 246, .15);--tutorials-gradient: linear-gradient(135deg, #2563eb, #1d4ed8);--tutorials-disabled-text: rgba(229, 231, 235, .3);--tutorials-disabled-bg: rgba(255, 255, 255, .05);--tutorials-disabled-border: rgba(255, 255, 255, .1)}@keyframes tutorials-fade-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.tutorials{background:var(--tutorials-bg);min-height:100vh}.tutorials__header,.tutorials__header-container,.tutorials__header-content,.tutorials__header-title{position:relative}.tutorials__header-title::selection{background:#60a5fa33;color:inherit}.tutorials__header-title::-moz-selection{background:#60a5fa33;color:inherit}.tutorials__header-text{position:relative;display:inline-block;color:var(--color-link, #60a5fa)}:root[data-theme=light] #tutorials-page .tutorials__header-text{color:var(--color-primary)}.tutorials__header-text::selection{background:#60a5fa33;color:inherit}.tutorials__header-text::-moz-selection{background:#60a5fa33;color:inherit}.tutorials__header-subtitle{position:relative}.tutorials__header-subtitle::selection{background:#60a5fa33;color:inherit}.tutorials__header-subtitle::-moz-selection{background:#60a5fa33;color:inherit}.tutorials__content{padding:1rem 0;background:var(--tutorials-bg)}.tutorials__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-bottom:3rem}.tutorials__grid::-webkit-scrollbar{width:8px}.tutorials__grid::-webkit-scrollbar-track{background:#3741514d;border-radius:4px}.tutorials__grid::-webkit-scrollbar-thumb{background:#3b82f680;border-radius:4px;transition:background .3s ease}.tutorials__grid::-webkit-scrollbar-thumb:hover{background:#3b82f6b3}.tutorials__card{background:transparent;border:none;box-shadow:none;border-radius:0;transition:transform .3s ease,box-shadow .3s ease;overflow:visible;-webkit-tap-highlight-color:transparent}.tutorials__card:hover{transform:translateY(-8px);box-shadow:none}.tutorials__card:nth-child(1){animation:tutorials-fade-up .6s ease-out}.tutorials__card:nth-child(2){animation:tutorials-fade-up .6s ease-out .1s}.tutorials__card:nth-child(3){animation:tutorials-fade-up .6s ease-out .2s}.tutorials__card:nth-child(4){animation:tutorials-fade-up .6s ease-out .3s}.tutorials__thumbnail{position:relative;overflow:hidden;aspect-ratio:16 / 9;box-sizing:border-box;border-radius:10px;border:0;background:transparent;box-shadow:0 2px 8px #94a3b81f,0 6px 14px #00000061}.tutorials__thumbnail>a{display:block;position:absolute;inset:0}:root[data-theme=light] #tutorials-page .tutorials__thumbnail{box-shadow:0 2px 6px #0f172a14,0 6px 14px #0f172a1f}.tutorials__thumbnail>a:focus-visible{outline:2px solid var(--color-focus-ring, #60a5fa);outline-offset:-4px}.tutorials__thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.tutorials__thumbnail:hover img{transform:none}.tutorials__card-content{padding:1.5rem 0;background:transparent;text-align:left}.tutorials__categories{margin-bottom:1rem}.tutorials__category{display:inline-block;font-size:.75rem;font-weight:500;padding:.25rem .75rem;margin-right:.5rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em;border:0;border-radius:6px;color:var(--color-on-primary, #fff);background:#2463eb}.tutorials__title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;line-height:1.3;color:var(--tutorials-text-primary);transition:color .3s ease}.tutorials__title-link{color:inherit;text-decoration:none;transition:all .3s ease;outline:none;-webkit-tap-highlight-color:transparent}.tutorials__title-link:hover{color:var(--tutorials-accent);text-decoration:underline}.tutorials__title-link:focus{outline:none;box-shadow:none}.tutorials__title-link:active{outline:none;box-shadow:none}.tutorials__title::selection,.tutorials__title-link::selection{background:#60a5fa33;color:inherit}.tutorials__title::-moz-selection,.tutorials__title-link::-moz-selection{background:#60a5fa33;color:inherit}.tutorials__meta{display:flex;align-items:center;font-size:.875rem;margin-bottom:1.5rem;opacity:.8;transition:opacity .3s ease}.tutorials__meta:hover{opacity:1}.tutorials__date{color:var(--tutorials-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.tutorials__meta-separator{margin:0 .75rem;color:var(--tutorials-text-subtle)}.tutorials__author{display:flex;align-items:center}.tutorials__author-avatar{border-radius:50%;margin-right:.5rem}.tutorials__author-name{color:var(--tutorials-text-secondary);font-weight:500}.tutorials__btn{display:inline-flex;align-items:center;font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tutorials-text-primary);text-decoration:none;transition:all .3s ease;position:relative;overflow:hidden}.tutorials__btn--read-more:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.tutorials__btn--read-more:hover{color:var(--tutorials-accent)}.tutorials__btn--read-more:hover:before{left:100%}.tutorials__pagination-container,.pagination-container{margin-top:4rem;padding:2rem 0}.tutorials__pagination-wrapper,.pagination-wrapper{display:flex;justify-content:center;align-items:center;gap:.5rem}.tutorials__pagination .page-numbers,.pagination-wrapper .page-numbers,.pagination-wrapper .current{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:.75rem 1rem;margin:0 .25rem;background:var(--tutorials-bg-overlay);border:1px solid var(--tutorials-border-color);border-radius:12px;color:var(--tutorials-text-secondary);text-decoration:none;font-weight:500;transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease;backdrop-filter:blur(10px);box-sizing:border-box}.tutorials__pagination .prev,.tutorials__pagination .next,.pagination-wrapper .prev,.pagination-wrapper .next{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:.75rem;margin:0 .25rem;background:var(--tutorials-bg-overlay);border:1px solid var(--tutorials-border-color);border-radius:12px;color:var(--tutorials-text-secondary);text-decoration:none;font-weight:600;transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease;backdrop-filter:blur(10px);box-sizing:border-box}.tutorials__pagination .page-numbers:hover,.tutorials__pagination .prev:hover,.tutorials__pagination .next:hover,.pagination-wrapper .page-numbers:hover,.pagination-wrapper .prev:hover,.pagination-wrapper .next:hover{background:var(--tutorials-bg-overlay-hover);border-color:var(--tutorials-border-hover-color);color:var(--tutorials-accent-hover);transform:translateY(-2px);box-shadow:0 8px 25px var(--tutorials-shadow-hover)}.tutorials__pagination .current,.pagination-wrapper .current{background:var(--tutorials-gradient);border-color:var(--tutorials-accent);color:#fff;box-shadow:0 4px 15px #2563eb4d}.tutorials__pagination .prev.disabled,.tutorials__pagination .next.disabled,.pagination-wrapper .prev.disabled,.pagination-wrapper .next.disabled{background:var(--tutorials-disabled-bg);border-color:var(--tutorials-disabled-border);color:var(--tutorials-disabled-text);cursor:not-allowed;pointer-events:none}.tutorials__pagination .prev.disabled:hover,.tutorials__pagination .next.disabled:hover,.pagination-wrapper .prev.disabled:hover,.pagination-wrapper .next.disabled:hover{background:var(--tutorials-disabled-bg);border-color:var(--tutorials-disabled-border);color:var(--tutorials-disabled-text);transform:none;box-shadow:none}.tutorials__pagination .material-icons,.pagination-wrapper .material-icons{font-size:18px}.tutorials__pagination .prev .material-icons,.tutorials__pagination .next .material-icons,.pagination-wrapper .prev .material-icons,.pagination-wrapper .next .material-icons{font-size:20px}#tutorials-page .tutorials__pagination .page-numbers:is(:focus,:active){outline:none!important;box-shadow:none}.tutorials__pagination .page-numbers:focus-visible,.tutorials__pagination .prev:focus-visible,.tutorials__pagination .next:focus-visible,.pagination-wrapper .page-numbers:focus-visible,.pagination-wrapper .prev:focus-visible,.pagination-wrapper .next:focus-visible{border:2px solid var(--tutorials-accent);outline:none;box-shadow:none}.tutorials__pagination .page-numbers:focus:not(:focus-visible),.tutorials__pagination .prev:focus:not(:focus-visible),.tutorials__pagination .next:focus:not(:focus-visible),.pagination-wrapper .page-numbers:focus:not(:focus-visible),.pagination-wrapper .prev:focus:not(:focus-visible),.pagination-wrapper .next:focus:not(:focus-visible){outline:none;box-shadow:none}.tutorials__empty-state{text-align:center;padding:4rem 0;color:var(--tutorials-text-secondary)}.tutorials__empty-icon{width:6rem;height:6rem;background:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}.tutorials__empty-title{font-size:1.5rem;font-weight:600;color:var(--tutorials-text-primary);margin-bottom:1rem}.tutorials__empty-text{color:var(--tutorials-text-muted);margin-bottom:1.5rem}.tutorials__title-link:focus-visible,.tutorials__btn:focus-visible,.tutorials__page-number:focus-visible{outline:2px solid var(--tutorials-accent);outline-offset:2px;box-shadow:0 0 0 4px #60a5fa33}.tutorials__title-link:focus:not(:focus-visible),.tutorials__btn:focus:not(:focus-visible),.tutorials__page-number:focus:not(:focus-visible){outline:none;box-shadow:none}@media(prefers-reduced-motion:reduce){.tutorials__card{animation:none}.tutorials__btn--read-more:before{transition:none}.tutorials__meta,.tutorials__card,.tutorials__category,.tutorials__btn,.tutorials__page-number,.tutorials__page-nav .page-numbers,.tutorials__header-text{transition:none}.tutorials__card:hover,.tutorials__category:hover,.tutorials__page-number:hover,.tutorials__page-nav .page-numbers:hover{transform:none}}@media print{.tutorials__card{animation:none;transform:none;box-shadow:none;break-inside:avoid;page-break-inside:avoid}.tutorials__btn--read-more:before{display:none}.tutorials__header{break-after:avoid;page-break-after:avoid}.tutorials__header-text{-webkit-print-color-adjust:exact;print-color-adjust:exact}}@media(prefers-contrast:high){.tutorials__title-link,.tutorials__btn,.tutorials__header-title,.tutorials__header-text{text-shadow:1px 1px 1px rgba(0,0,0,.5)}.tutorials__category{border-width:2px}.tutorials__header-subtitle{color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.8)}}@media(min-width:769px)and (max-width:1023px){.tutorials__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:768px){.tutorials{padding-top:5rem}.tutorials__header{padding-top:2rem;padding-bottom:2rem}.tutorials__header-container{padding-left:1rem;padding-right:1rem}.tutorials__header-title{font-size:2rem;line-height:1.2;margin-bottom:1.5rem}.tutorials__header-subtitle{font-size:1rem;line-height:1.5;margin-bottom:1rem}.tutorials__content{padding-top:0rem;padding-bottom:1.5rem}.tutorials__grid{grid-template-columns:1fr;gap:20px;margin-bottom:0rem}.tutorials__card{transition:none;animation:none}.tutorials__card:hover{transform:none;box-shadow:none}.tutorials__card:nth-child(1),.tutorials__card:nth-child(2),.tutorials__card:nth-child(3),.tutorials__card:nth-child(4){animation:none}.tutorials__thumbnail img{transition:none}.tutorials__thumbnail:hover img{transform:none}.tutorials__card-content{padding:1rem 0}.tutorials__category{transition:none;font-size:.625rem;padding:.25rem .5rem;margin-right:.375rem;margin-bottom:.375rem}.tutorials__title{font-size:1rem;line-height:1.3;margin-bottom:1rem}.tutorials__title-link{transition:none}.tutorials__title-link:hover{color:var(--tutorials-text-primary);text-decoration:none}.tutorials__meta{font-size:.75rem;margin-bottom:1rem;flex-direction:row;align-items:center;gap:.5rem;justify-content:flex-start;transition:none;opacity:1}.tutorials__meta:hover{opacity:1}.tutorials__date{font-size:.75rem}.tutorials__author{display:flex;align-items:center}.tutorials__author-name{font-size:.75rem}.tutorials__meta-separator{display:inline}.tutorials__btn--read-more{display:none}.tutorials__card{cursor:pointer;-webkit-tap-highlight-color:rgba(96,165,250,.1)}.tutorials__pagination-container,.pagination-container{margin-top:0rem;padding:1rem 0}.tutorials__pagination-wrapper,.pagination-wrapper{gap:.25rem;flex-wrap:wrap;justify-content:center}.tutorials__pagination .page-numbers,.pagination-wrapper .page-numbers,.pagination-wrapper .current{min-width:40px;height:40px;padding:.5rem .75rem;margin:.125rem;font-size:.875rem;border-radius:8px}.tutorials__pagination .prev,.tutorials__pagination .next,.pagination-wrapper .prev,.pagination-wrapper .next{min-width:40px;height:40px;padding:.5rem;margin:.125rem;border-radius:8px}.tutorials__pagination .page-numbers:hover,.tutorials__pagination .prev:hover,.tutorials__pagination .next:hover,.pagination-wrapper .page-numbers:hover,.pagination-wrapper .prev:hover,.pagination-wrapper .next:hover{transform:none;box-shadow:0 4px 15px #2563eb33}.tutorials__pagination .material-icons,.pagination-wrapper .material-icons{font-size:16px}.tutorials__pagination .prev .material-icons,.tutorials__pagination .next .material-icons,.pagination-wrapper .prev .material-icons,.pagination-wrapper .next .material-icons{font-size:18px}.tutorials__empty-state{padding:2rem 1rem}.tutorials__empty-icon{width:4rem;height:4rem;margin-bottom:1rem}.tutorials__empty-title{font-size:1.5rem;margin-bottom:1rem}.tutorials__empty-text{font-size:.875rem;margin-bottom:1.5rem}}