:root{--color-brand: #c92a2a;--color-brand-soft: rgba(201, 42, 42, 0.08);--color-brand-hover: rgba(201, 42, 42, 0.12);--color-bg: #ffffff;--color-surface: #ffffff;--color-border: #e5e5e5;--color-border-strong: #d4d4d4;--color-text: #111111;--color-text-muted: #6b6b6b;--space-3xs: 0.25rem;--space-2xs: 0.5rem;--space-xs: 0.75rem;--space-s: 1rem;--space-m: 1.5rem;--space-l: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--radius-s: 6px;--radius-m: 10px;--radius-l: 16px;--max-width: 1200px;--header-height: 72px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);--shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.08);--transition-fast: 150ms ease;--transition-medium: 250ms ease}*,*::before,*::after{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);line-height:1.6;padding-top:var(--header-height)}body.no-scroll{overflow:hidden}img{max-width:100%;display:block}a{color:var(--color-brand);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{margin:0;line-height:1.2;color:var(--color-text)}p{margin:0}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-l)}@media(max-width: 767.98px){.container{padding:0 var(--space-s)}}.main{padding:var(--space-xl) 0 var(--space-2xl)}.footer{border-top:1px solid var(--color-border);padding:var(--space-l) 0;color:var(--color-text-muted);font-size:.875rem}.footer p{margin:0}.social{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--space-2xs)}.social__link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-s);color:var(--color-text-muted);transition:color var(--transition-fast),background var(--transition-fast)}.social__link svg{width:22px;height:22px}.social__link:hover{color:var(--color-brand);background:var(--color-brand-soft);text-decoration:none}.social--drawer{justify-content:flex-start;gap:var(--space-xs)}.header{position:fixed;inset:0 0 auto 0;height:var(--header-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:1000}.header__inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-l);height:100%;display:flex;align-items:center;gap:var(--space-l)}@media(max-width: 767.98px){.header__inner{padding:0 var(--space-s);gap:var(--space-s)}}.header__logo{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none}.header__logo img{height:40px;width:auto;object-fit:contain}.header__nav{flex:1;display:flex;justify-content:flex-end}@media(max-width: 767.98px){.header__nav{display:none}}.header__nav-list{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-m)}.header__nav-link{display:inline-block;padding:var(--space-2xs) 0;color:var(--color-text);font-size:.95rem;font-weight:500;text-decoration:none;border-bottom:2px solid rgba(0,0,0,0);transition:color var(--transition-fast),border-color var(--transition-fast)}.header__nav-link:hover{color:var(--color-brand);text-decoration:none;border-bottom-color:var(--color-brand-hover)}.header__nav-link.is-active{color:var(--color-brand);border-bottom-color:var(--color-brand)}.header__social{display:flex;align-items:center}@media(max-width: 767.98px){.header__social{display:none}}.hamburger{display:none;margin-left:auto;width:40px;height:40px;padding:0;background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);border-radius:var(--radius-s);cursor:pointer;position:relative}@media(max-width: 767.98px){.hamburger{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}}.hamburger:hover{background:var(--color-brand-soft)}.hamburger:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}.hamburger__bar{display:block;width:22px;height:2px;background:var(--color-text);border-radius:1px;transition:transform var(--transition-medium),opacity var(--transition-fast)}.hamburger.is-open .hamburger__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.is-open .hamburger__bar:nth-child(2){opacity:0}.hamburger.is-open .hamburger__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.drawer{position:fixed;inset:var(--header-height) 0 auto 0;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-10px);opacity:0;pointer-events:none;transition:transform var(--transition-medium),opacity var(--transition-medium);z-index:999}@media(min-width: 768px){.drawer{display:none}}.drawer[hidden]{display:block}.drawer.is-open{transform:translateY(0);opacity:1;pointer-events:auto}.drawer__nav-list{list-style:none;margin:0;padding:var(--space-s) 0;display:flex;flex-direction:column}.drawer__nav-link{display:block;padding:var(--space-s) var(--space-l);color:var(--color-text);font-size:1.1rem;font-weight:500;text-decoration:none;border-left:3px solid rgba(0,0,0,0);transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.drawer__nav-link:hover{background:var(--color-brand-soft);color:var(--color-brand);text-decoration:none}.drawer__nav-link.is-active{background:var(--color-brand-soft);color:var(--color-brand);border-left-color:var(--color-brand)}.drawer__social{padding:var(--space-m) var(--space-l) var(--space-l);border-top:1px solid var(--color-border)}.listing__header{margin-bottom:var(--space-xl)}.listing__title{font-size:2.25rem;font-weight:700;margin-bottom:var(--space-xs)}.listing__lede{color:var(--color-text-muted);font-size:1.05rem;max-width:60ch}.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:var(--space-m)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-m);box-shadow:var(--shadow-card);overflow:hidden;transition:transform var(--transition-medium),box-shadow var(--transition-medium),border-color var(--transition-medium)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--color-border-strong)}.card__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}.card__link:hover{text-decoration:none}.card__cover{position:relative;aspect-ratio:16/9;background:var(--color-surface);overflow:hidden}.card__cover img{width:100%;height:100%;object-fit:contain;transition:transform var(--transition-medium)}.card:hover .card__cover img{transform:scale(1.03)}.cards--videos .card__cover img{object-fit:cover}.card__body{padding:var(--space-m);display:flex;flex-direction:column;flex:1}.card__meta{display:block;color:var(--color-text-muted);font-size:.8125rem;letter-spacing:.02em;margin-bottom:var(--space-2xs);text-transform:uppercase}.card__title{font-size:1.125rem;font-weight:600;line-height:1.35;color:var(--color-text);margin-bottom:var(--space-s)}.card__desc{color:var(--color-text-muted);font-size:.95rem;margin-bottom:var(--space-s)}.card__cta{margin-top:auto;color:var(--color-brand);font-size:.9rem;font-weight:500}.cards--videos{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}.card__actions{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-2xs)}.card__action{color:var(--color-brand);font-size:.9rem;font-weight:500}.filter-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-s);margin-bottom:var(--space-s)}.filter-row:last-of-type{margin-bottom:var(--space-l)}.filter-row__label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);min-width:44px}.tag-filter{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}.tag-chip{--chip-color: var(--color-brand);--chip-color-text: var(--color-brand);--chip-color-soft: var(--color-brand-soft);--chip-color-hover: var(--color-brand-hover);--chip-color-fg-on: #fff;display:inline-flex;align-items:center;padding:var(--space-3xs) var(--space-s);border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text-muted);font-size:.85rem;font-weight:500;line-height:1.4;text-decoration:none;text-transform:capitalize;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.tag-chip:hover{background:var(--chip-color-hover);color:var(--chip-color-text);border-color:var(--chip-color-hover);text-decoration:none}.tag-chip.is-active{background:var(--chip-color);border-color:var(--chip-color);color:var(--chip-color-fg-on)}.tag-chip.is-active:hover{background:var(--chip-color);color:var(--chip-color-fg-on)}.card__tags{display:flex;flex-wrap:wrap;gap:var(--space-3xs);margin:0 0 var(--space-s)}.card__tag{--chip-color-text: var(--color-brand);--chip-color-soft: var(--color-brand-soft);display:inline-block;padding:2px var(--space-2xs);background:var(--chip-color-soft);color:var(--chip-color-text);border-radius:var(--radius-s);font-size:.75rem;font-weight:500;text-transform:capitalize;letter-spacing:.01em}[data-tag=javascript],[data-tag=components]{--chip-color: #f5cc18;--chip-color-text: #8a6d00;--chip-color-soft: rgba(247, 223, 30, 0.25);--chip-color-hover: rgba(247, 223, 30, 0.55);--chip-color-fg-on: #111}[data-tag=css],[data-tag=responsive]{--chip-color: #1572b6;--chip-color-text: #1572b6;--chip-color-soft: rgba(21, 114, 182, 0.12);--chip-color-hover: rgba(21, 114, 182, 0.35);--chip-color-fg-on: #fff}[data-tag=architecture],[data-tag=ai]{--chip-color: #7c3aed;--chip-color-text: #7c3aed;--chip-color-soft: rgba(124, 58, 237, 0.12);--chip-color-hover: rgba(124, 58, 237, 0.35);--chip-color-fg-on: #fff}.tag-chip[data-tag=javascript]:not(.is-active),.tag-chip[data-tag=components]:not(.is-active),.tag-chip[data-tag=css]:not(.is-active),.tag-chip[data-tag=responsive]:not(.is-active),.tag-chip[data-tag=architecture]:not(.is-active),.tag-chip[data-tag=ai]:not(.is-active){background:var(--chip-color-soft);color:var(--chip-color-text);border-color:var(--chip-color-hover)}[data-tag=css],[data-tag=ai]{text-transform:uppercase}[data-tag=i18n],[data-tag=javascript]{text-transform:none}.listing__eyebrow{display:block;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-2xs)}.empty{color:var(--color-text-muted);font-size:1rem;padding:var(--space-l) 0}.listing__count{color:var(--color-text-muted);font-size:.85rem;margin:0 0 var(--space-m)}.page{max-width:720px}.page__title{font-size:2.25rem;font-weight:700;margin-bottom:var(--space-l);color:var(--color-brand)}.page__profile{width:200px;height:200px;border-radius:50%;object-fit:cover;margin:0 auto var(--space-m)}@media(min-width: 768px){.page__profile{float:right;width:220px;height:220px;margin:0 0 var(--space-m) var(--space-l);shape-outside:circle()}}.page__cta{clear:both;margin-top:var(--space-xl);padding:var(--space-m) var(--space-l);background:var(--color-brand-soft);border-left:3px solid var(--color-brand);border-radius:var(--radius-m);font-size:1.1rem;font-weight:500}.page__body{font-size:1.05rem;line-height:1.7}.page__body h2{font-size:1.5rem;font-weight:600;margin-top:var(--space-l);margin-bottom:var(--space-s)}.page__body h3{font-size:1.2rem;font-weight:600;margin-top:var(--space-m);margin-bottom:var(--space-xs)}.page__body p{margin-bottom:var(--space-m)}.page__body ul,.page__body ol{margin:0 0 var(--space-m);padding-left:var(--space-m)}.page__body li{margin-bottom:var(--space-2xs)}.page__body .page__profile~h2{clear:right}