@property --guide-flow-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.guide-page{position:relative;z-index:2;width:min(1160px,100% - 48px);margin:0 auto;padding:7.4rem 0 2.5rem}.guide-backdrop{position:fixed;inset:-12px;z-index:0;background:url(/images/guide-video-poster.webp) center / cover no-repeat;filter:saturate(.9) brightness(.52);transform:translate(var(--backdrop-x, 0),var(--backdrop-y, 0));transition:transform .6s var(--ease);pointer-events:none}.guide-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(#0a0f106b,#0a0f109e 60%,#0a0f10d1)}.guide-page .page-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4rem;min-height:270px;max-width:none;padding:0 0 2.4rem;animation:guide-heading-in .72s var(--ease) both}.guide-page .heading-kicker{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 1rem;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#d5e5e8;opacity:1}.guide-page .heading-kicker svg{width:14px;height:14px;color:var(--coral)}.guide-page .page-heading h1{margin:0;font-size:4.7rem;font-weight:360;line-height:1;letter-spacing:0}.guide-page .heading-copy{margin:1.15rem 0 0;font-size:.92rem;line-height:1.8}.heading-meta{display:flex;align-items:flex-end;gap:.95rem}.heading-meta>span{font-family:var(--font-mono);font-size:2.5rem;font-weight:300;line-height:.9}.heading-meta p{font-size:.67rem;line-height:1.65;color:#d0dfe2}.directory-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0}.category-tabs{display:flex;align-items:center;gap:.15rem}.category-tabs button{display:inline-flex;align-items:center;gap:.4rem;flex:none;min-height:38px;padding:0 .68rem;font-size:.76rem;white-space:nowrap;color:#ffffff94;background:0 0;border:1px solid transparent;border-radius:7px;transition:border-color .18s,background .18s,color .18s,transform .18s}.category-tabs button svg{width:16px;height:16px}.category-tabs button:hover,.category-tabs button:focus-visible{color:#fff;transform:translateY(-1px)}.category-tabs button[aria-pressed=true]{color:#fff;background:#ffffff1c;border-color:#ffffff38;backdrop-filter:blur(10px);box-shadow:inset 0 1px #ffffff1a}.category-tabs small{font-family:var(--font-mono);font-size:.58rem;color:inherit;opacity:.52}.search-field{display:flex;align-items:center;gap:.52rem;flex:0 0 220px;width:220px;min-height:40px;padding:0 .72rem;color:#ffffff8f;background:#ffffff14;border:1px solid rgba(255,255,255,.21);border-radius:7px;backdrop-filter:blur(14px);transition:border-color .18s,background .18s,box-shadow .18s}.search-field:focus-within{color:#fff;background:#ffffff21;border-color:#ffffff70;box-shadow:0 0 24px #83c8e91a}.search-field svg{width:17px;height:17px;flex:none}.search-field input{width:100%;min-width:0;padding:0;font-size:.76rem;color:#fff;background:0 0;border:0;outline:0}.search-field input::placeholder{color:#ffffff6b}.directory-status{display:flex;justify-content:space-between;gap:1rem;padding-bottom:1rem;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:#ffffff75}.directory-status strong{font-family:var(--font-mono);font-weight:600;color:#ffffffd1}.resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}.resource-card{--card-accent: #ffd08a;position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1.25;padding:1rem;overflow:hidden;background:linear-gradient(135deg,#ffffff1c,#0b10141a);border:1px solid rgba(255,255,255,.28);border-radius:30px;backdrop-filter:blur(14px) saturate(132%);box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #ffffff0d,0 18px 42px #00000021;transition:border-color .22s,background .22s,box-shadow .22s,transform .22s var(--ease);animation:guide-card-in .56s var(--ease) var(--delay, 0ms) both}.resource-card[hidden]{display:none}.resource-card--tools{--card-accent: #82cfff}.resource-card--self{--card-accent: #ffcb76}.resource-card--discovery{--card-accent: #9ee0bd}.resource-card--leisure{--card-accent: #ff9eb1}.resource-card--extension{--card-accent: #d0b8ff}.resource-card--work{--card-accent: #a9d8d1}.resource-card:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.13) 42%,rgba(255,255,255,.03) 56%,transparent 78%);transform:translate(-120%);animation:guide-glass-current 9s var(--ease) infinite;pointer-events:none}.resource-card:hover,.resource-card:focus-visible{border-color:color-mix(in srgb,var(--card-accent) 65%,transparent);box-shadow:inset 0 1px #ffffff2e,0 20px 48px #0000003b,0 0 24px color-mix(in srgb,var(--card-accent) 18%,transparent);transform:translateY(-5px)}.resource-card:focus-visible{outline:1px solid var(--card-accent);outline-offset:3px}.card-glow{position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;background:conic-gradient(from var(--guide-flow-angle),var(--card-accent),transparent 30%,transparent 70%,var(--card-accent));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;transition:opacity .3s;pointer-events:none}.resource-card:hover .card-glow{opacity:.9;animation:guide-rainbow-edge 2.2s linear infinite}.card-topline{display:flex;justify-content:space-between;align-items:flex-start}.resource-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;color:var(--brand-color);background:color-mix(in srgb,var(--brand-color) 13%,rgba(255,255,255,.08));border:1px solid color-mix(in srgb,var(--brand-color) 48%,rgba(255,255,255,.14));box-shadow:inset 0 1px #ffffff21;transition:transform .22s var(--ease),box-shadow .22s}.resource-mark svg{width:23px;height:23px;fill:none}.resource-card:hover .resource-mark{transform:translateY(-2px) scale(1.04);box-shadow:0 0 18px color-mix(in srgb,var(--brand-color) 30%,transparent)}.card-go{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-mono);font-size:.62rem;color:#ffffff9e;transition:color .2s,transform .2s var(--ease)}.card-go svg{width:17px;height:17px}.resource-card:hover .card-go{color:#fff;transform:translate(2px,-2px)}.resource-copy{margin-top:.95rem;padding-right:.7rem}.resource-copy h2{margin:0;font-size:.98rem;font-weight:620;line-height:1.4;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}.resource-copy p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:.34rem 0 0;font-size:.73rem;line-height:1.55;color:#ffffff96}.resource-card footer{display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-width:0;margin-top:.85rem;font-size:.61rem;color:#ffffff6e}.category-label{display:inline-flex;align-items:center;gap:.28rem;flex:none;color:var(--card-accent)}.category-label svg{width:14px;height:14px}.resource-card footer small{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit}.empty-state{display:grid;place-items:center;gap:.8rem;min-height:240px;text-align:center;font-size:.85rem;color:#ffffff8c}.empty-state[hidden]{display:none}.empty-state svg{width:28px;height:28px}.guide-page .page-footer{display:flex;justify-content:space-between;max-width:none;margin-top:4.5rem;padding:1.3rem 0 0;border-top:1px solid rgba(255,255,255,.14);font-family:var(--font-sans);font-size:.66rem;letter-spacing:normal;text-transform:none;color:#fff6;opacity:1}@keyframes guide-card-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes guide-heading-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes guide-glass-current{0%,62%{transform:translate(-120%)}to{transform:translate(120%)}}@keyframes guide-rainbow-edge{to{--guide-flow-angle: 360deg}}@media (width <= 920px){.resource-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-tabs{overflow-x:auto;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.search-field{flex:0 0 auto;width:min(100%,320px)}}@media (width <= 760px){.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width <= 620px){.guide-page{padding:6.5rem 0 2.5rem}.guide-page .page-heading{grid-template-columns:1fr;gap:1.8rem;min-height:auto}.guide-page .page-heading h1{font-size:3.7rem}.resource-grid{grid-template-columns:1fr}.resource-card{aspect-ratio:1.4}.search-field{width:100%}.guide-page .page-footer{margin-top:3.5rem}}@media (prefers-reduced-motion: reduce){.resource-card,.resource-card:before,.card-glow{animation:none}.guide-backdrop{transform:none}}