.resources-page { color: var(--guide-text); }
.resources-page [hidden] { display: none !important; }
.resources-shell { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.resources-hero { padding: 82px 0 70px; border-bottom: 1px solid var(--guide-border); background: radial-gradient(circle at 82% -20%, rgba(47,143,255,.2), transparent 32rem), linear-gradient(135deg, rgba(47,143,255,.1), transparent 58%); }
.resources-eyebrow, .resources-section-label { margin: 0 0 12px; color: var(--guide-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.resources-hero h1 { max-width: 850px; margin: 0; color: #fff; font-size: clamp(42px, 6vw, 64px); line-height: 1.05; letter-spacing: -.04em; }
.tutorial-page-content .resources-lead { max-width: 760px; margin: 18px 0 30px; color: #c5cfdd; font-size: 20px; line-height: 1.6; }
.resources-search { display: flex; max-width: 720px; min-height: 54px; align-items: center; gap: 12px; padding: 0 17px; border: 1px solid rgba(94,168,255,.34); border-radius: 12px; background: var(--guide-surface); box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.resources-search i { color: var(--guide-accent); font-size: 17px; }
.resources-search input { width: 100%; margin: 0; border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--guide-text); font: 500 15px/1.3 "Roboto", Arial, sans-serif; }
.resources-search input::placeholder { color: #8794a7; }
.resources-content { padding-top: 34px; padding-bottom: 80px; }
.resources-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 52px; }
.tutorial-page-content .resources-filter { min-height: 38px; margin: 0; padding: 0 14px; border: 1px solid var(--guide-border); border-radius: 999px; background: var(--guide-surface); color: var(--guide-muted); font: 700 13px/1 "Roboto", Arial, sans-serif; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.tutorial-page-content .resources-filter:hover, .tutorial-page-content .resources-filter:focus { border-color: rgba(94,168,255,.5); background: var(--guide-surface); color: var(--guide-text); }
.tutorial-page-content .resources-filter:focus-visible { outline: 2px solid rgba(94,168,255,.72); outline-offset: 2px; }
.tutorial-page-content .resources-filter.is-active { border-color: rgba(94,168,255,.55); background: var(--guide-accent-soft); color: var(--guide-accent); }
.resources-section { --resource-section-accent: #5ea8ff; --resource-section-accent-rgb: 94, 168, 255; }
.resources-community-section { --resource-section-accent: #ff8752; --resource-section-accent-rgb: 255, 135, 82; }
.resources-tutorials-section { --resource-section-accent: #5ea8ff; --resource-section-accent-rgb: 94, 168, 255; }
.resources-investigations-section { --resource-section-accent: #f2c14e; --resource-section-accent-rgb: 242, 193, 78; }
.resources-tools-section { --resource-section-accent: #62d9aa; --resource-section-accent-rgb: 98, 217, 170; }
.resources-section + .resources-section { position: relative; margin-top: 64px; padding-top: 62px; }
.resources-section + .resources-section::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--resource-section-accent-rgb), .62), rgba(var(--resource-section-accent-rgb), .08) 46%, transparent 82%); content: ""; }
.resources-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 25px; }
.resources-section-title { display: flex; min-width: 0; align-items: center; gap: 18px; }
.resources-section-visual { display: grid; width: 104px; height: 104px; flex: 0 0 104px; place-items: center; border: 1px solid rgba(var(--resource-section-accent-rgb), .27); border-radius: 22px; background: radial-gradient(circle at 50% 45%, rgba(var(--resource-section-accent-rgb), .17), transparent 68%), rgba(255,255,255,.018); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 38px rgba(0,0,0,.14); }
.resources-section-illustration { display: block; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.2)); }
.resources-section-title .resources-section-label { margin-bottom: 9px; color: var(--resource-section-accent); }
.resources-section-heading h2 { margin: 0; color: #fff; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; letter-spacing: -.025em; }
.resources-section-heading h2::after { display: block; width: 54px; height: 3px; margin-top: 12px; border-radius: 999px; background: var(--resource-section-accent); box-shadow: 0 0 18px rgba(var(--resource-section-accent-rgb), .32); content: ""; }
.resources-section-heading > p { max-width: 450px; margin: 0; color: var(--guide-muted); font-size: 15px; line-height: 1.55; }
.resources-card-grid, .resources-tools-grid { display: grid; gap: 16px; }
.resources-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resources-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-page-content .resource-card, .tutorial-page-content .resource-card:visited { display: flex; min-height: 350px; flex-direction: column; padding: 25px; border: 1px solid var(--guide-border); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%), var(--guide-surface); color: var(--guide-text); text-decoration: none; transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.tutorial-page-content .resource-card:hover, .tutorial-page-content .resource-card:focus { transform: translateY(-2px); border-color: rgba(94,168,255,.52); background-color: var(--guide-raised); color: var(--guide-text); }
.tutorial-page-content .resource-card-tool { border-color: rgba(94,168,255,.27); background: linear-gradient(145deg, rgba(47,143,255,.1), transparent 56%), var(--guide-surface); }
.resource-card h3 { margin: 18px 0 11px; color: #fff; font-size: 22px; line-height: 1.25; letter-spacing: -.018em; }
.resource-card p { margin: 0; color: var(--guide-muted); font-size: 14px; line-height: 1.65; }
.resource-card-tags { display: flex; min-height: 54px; align-content: flex-start; flex-wrap: wrap; gap: 6px; }
.resource-card-tag { display: inline-flex; min-height: 24px; align-items: center; padding: 4px 8px; border: 1px solid rgba(139,157,181,.2); border-radius: 999px; background: rgba(139,157,181,.07); color: #aebac9; font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; }
.resource-card-meta { margin-top: auto; padding-top: 18px; color: #8896a8; font-size: 12px; font-weight: 600; }
.resource-card-action { margin-top: 10px; color: var(--guide-accent); font-size: 13px; font-weight: 800; }
.tutorial-page-content .resources-section .resource-card, .tutorial-page-content .resources-section .resource-card:visited { border-color: rgba(var(--resource-section-accent-rgb), .23); background: linear-gradient(145deg, rgba(var(--resource-section-accent-rgb), .085), transparent 48%), var(--guide-surface); box-shadow: inset 0 2px 0 rgba(var(--resource-section-accent-rgb), .08); }
.tutorial-page-content .resources-section .resource-card:hover, .tutorial-page-content .resources-section .resource-card:focus { border-color: rgba(var(--resource-section-accent-rgb), .58); background-color: var(--guide-raised); box-shadow: inset 0 2px 0 rgba(var(--resource-section-accent-rgb), .2), 0 16px 36px rgba(0,0,0,.16); }
.resources-section .resource-card-tag { border-color: rgba(var(--resource-section-accent-rgb), .25); background: rgba(var(--resource-section-accent-rgb), .075); color: var(--resource-section-accent); }
.resources-section .resource-card-action { color: var(--resource-section-accent); }
.resources-community-heading { align-items: center; }
.tutorial-page-content .resources-community-link, .tutorial-page-content .resources-community-link:visited { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid var(--guide-border); border-radius: 9px; background: rgba(255,255,255,.025); color: var(--guide-text); font-size: 13px; font-weight: 800; text-decoration: none; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.tutorial-page-content .resources-community-link:hover, .tutorial-page-content .resources-community-link:focus { border-color: rgba(255,87,0,.5); background: rgba(255,87,0,.08); color: #ff8752; }
.resources-reddit-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.resources-reddit-loading, .resources-reddit-unavailable { grid-column: 1 / -1; margin: 0; padding: 24px; border: 1px solid var(--guide-border); border-radius: 14px; background: var(--guide-surface); color: var(--guide-muted); font-size: 14px; line-height: 1.55; }
.resources-reddit-stale { grid-column: 1 / -1; margin: 0; padding: 11px 14px; border: 1px solid rgba(255,193,7,.25); border-radius: 9px; background: rgba(255,193,7,.07); color: #c9b77f; font-size: 12px; line-height: 1.5; }
.resources-reddit-loading { display: flex; align-items: center; gap: 11px; }
.resources-reddit-mark { display: inline-grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255,87,0,.14); color: #ff8752; font-size: 13px; font-weight: 900; }
.tutorial-page-content .resources-reddit-unavailable a { color: var(--guide-accent); font-weight: 700; }
.resources-reddit-card { min-width: 0; }
.tutorial-page-content .resources-reddit-card-link, .tutorial-page-content .resources-reddit-card-link:visited { display: flex; min-height: 245px; height: 100%; flex-direction: column; padding: 23px; border: 1px solid var(--guide-border); border-radius: 16px; background: linear-gradient(145deg, rgba(255,87,0,.055), transparent 48%), var(--guide-surface); color: var(--guide-text); text-decoration: none; transition: transform .18s ease, border-color .18s ease, background-color .18s ease; }
.tutorial-page-content .resources-reddit-card-link:hover, .tutorial-page-content .resources-reddit-card-link:focus { transform: translateY(-2px); border-color: rgba(255,87,0,.42); background-color: var(--guide-raised); color: var(--guide-text); }
.resources-reddit-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resources-reddit-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.resources-reddit-badge { display: inline-flex; align-items: center; gap: 7px; color: #ff8752; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.resources-reddit-badge::before { width: 7px; height: 7px; border-radius: 50%; background: #ff5700; content: ""; box-shadow: 0 0 0 4px rgba(255,87,0,.11); }
.resources-reddit-date { color: #7f8da0; font-size: 11px; font-weight: 600; }
.resources-reddit-card h3 { margin: 20px 0 11px; color: #fff; font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
.resources-reddit-excerpt { display: -webkit-box; overflow: hidden; margin: 0; color: var(--guide-muted); font-size: 13px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.resources-reddit-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 21px; color: #8794a7; font-size: 12px; font-weight: 600; }
.resources-reddit-card-action { color: #ff8752; font-weight: 800; white-space: nowrap; }
.resources-empty { margin-top: 64px; padding: 55px 24px; border: 1px dashed rgba(94,168,255,.3); border-radius: 16px; background: var(--guide-surface); text-align: center; }
.resources-empty i { color: var(--guide-accent); font-size: 25px; }
.resources-empty h2 { margin: 13px 0 7px; color: #fff; font-size: 24px; }
.resources-empty p { margin: 0 0 18px; color: var(--guide-muted); }
.resources-empty button { min-height: 40px; padding: 0 15px; border: 1px solid rgba(94,168,255,.45); border-radius: 8px; background: var(--guide-accent-soft); color: var(--guide-accent); font: 800 13px "Roboto", Arial, sans-serif; cursor: pointer; }
.resources-page + script { display: none; }
@media (max-width: 920px) { .resources-card-grid, .resources-tools-grid, .resources-reddit-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .resources-section-heading { align-items: flex-start; flex-direction: column; gap: 11px; } }
@media (max-width: 600px) { .resources-shell { width: min(100% - 30px, 1080px); } .resources-hero { padding: 60px 0 52px; } .resources-content { padding-top: 25px; } .resources-filters { margin-bottom: 42px; } .resources-section-title { gap: 14px; } .resources-section-visual { width: 78px; height: 78px; flex-basis: 78px; border-radius: 18px; } .resources-section-illustration { width: 72px; height: 72px; } .resources-card-grid, .resources-tools-grid, .resources-reddit-feed { grid-template-columns: 1fr; } .tutorial-page-content .resource-card, .tutorial-page-content .resources-reddit-card-link { min-height: 0; } .resource-card-tags { min-height: 0; } .resources-reddit-card-bottom { align-items: flex-start; flex-direction: column; gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .tutorial-page-content .resource-card, .tutorial-page-content .resources-reddit-card-link { transition: none; } }