:root { color-scheme: dark; --ink:#15131b; --panel:#201d26; --line:#4a4254; --paper:#f3e9c9; --dim:#b8acc2; --gold:#e0ad1c; --gold-soft:#f4d978; --green:#76c982; --shadow:#08070a; --mono:"SFMono-Regular","Cascadia Mono","Roboto Mono",Menlo,monospace; --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body { margin: 0; background: linear-gradient(180deg,#17151d,#100f14); color: var(--paper); font-family: var(--sans); }
body::before { position: fixed; inset: 0; z-index: -1; content:""; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:20px 20px; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 4px; }
.topbar { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px max(18px,calc((100vw - 1160px)/2)); border-bottom:3px solid #342f3d; background:#121117; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand span { width:40px; height:40px; display:grid; place-items:center; border:2px solid var(--gold); border-radius:4px; background:#302719; box-shadow:3px 3px 0 #000; }
.brand b { font-family:var(--mono); font-size:12px; letter-spacing:.12em; }
.play-now { min-height:40px; display:inline-flex; align-items:center; padding:8px 14px; border:2px solid #7a6320; border-radius:4px; background:#3b301b; color:var(--gold-soft); font-family:var(--mono); font-size:9px; font-weight:900; text-decoration:none; box-shadow:3px 3px 0 #000; }
.play-now:hover { border-color:var(--gold); transform:translate(-1px,-1px); }
main { width:min(1160px,calc(100% - 32px)); margin:0 auto; }
.hero { padding:72px 0 48px; border-bottom:1px solid #302b38; }
.eyebrow { margin:0 0 9px; color:var(--gold); font-family:var(--mono); font-size:9px; font-weight:900; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(50px,8vw,92px); line-height:.89; letter-spacing:-.07em; text-transform:uppercase; }
h1 span { color:var(--gold); }
.hero > p:last-child { max-width:700px; margin:22px 0 0; color:#c9bed0; font-size:15px; line-height:1.6; }
.directory-section { padding:42px 0 12px; }
.directory-section > header { display:flex; align-items:end; gap:18px; margin-bottom:16px; }
.directory-section > header > span { color:#73687d; font-family:var(--mono); font-size:32px; font-weight:900; }
.directory-section h2 { margin:0; font-size:32px; letter-spacing:-.04em; text-transform:uppercase; }
.link-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.link-card { position:relative; min-height:245px; display:flex; flex-direction:column; padding:18px; border:2px solid var(--line); border-radius:6px; background:var(--panel); text-decoration:none; box-shadow:5px 5px 0 var(--shadow); }
.link-card:hover { border-color:var(--gold); transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--shadow); }
.link-card.recommended { border-color:#8a6e19; background:linear-gradient(145deg,#302719,#1e1b22); }
.link-card.current { border-color:#655b70; background:#1a181f; }
.tag { align-self:flex-start; padding:4px 6px; border:1px solid #625970; color:var(--dim); font-family:var(--mono); font-size:7px; font-weight:900; letter-spacing:.08em; }
.recommended .tag { border-color:var(--gold); color:var(--gold-soft); }
.link-card > b { display:block; margin-top:19px; color:var(--paper); font-size:22px; letter-spacing:-.03em; }
.link-card code { display:block; margin-top:6px; color:var(--gold-soft); font-family:var(--mono); font-size:8px; overflow-wrap:anywhere; }
.link-card p { margin:17px 0; color:#c1b5c8; font-size:10px; line-height:1.55; }
.link-card em { margin-top:auto; color:#8f8498; font-family:var(--mono); font-size:8px; font-style:normal; letter-spacing:.06em; text-transform:uppercase; }
.safety-note { display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:center; margin:38px 0 60px; padding:20px; border:2px solid #5d512a; border-left:7px solid var(--gold); background:#211d1a; box-shadow:5px 5px 0 var(--shadow); }
.safety-note b { color:var(--gold-soft); font-family:var(--mono); font-size:12px; text-transform:uppercase; }
.safety-note p { margin:0; color:#c8bdcd; font-size:11px; line-height:1.6; }
.safety-note code { color:var(--paper); }
footer { min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px max(18px,calc((100vw - 1160px)/2)); border-top:2px solid #342f3d; background:#111015; color:var(--dim); font-family:var(--mono); font-size:9px; }
footer a { color:var(--gold-soft); }
@media (max-width:960px) { .link-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) {
  .topbar { padding-inline:10px; }
  .brand b { font-size:9px; }
  .play-now { padding-inline:8px; font-size:7px; }
  main { width:min(100% - 20px,1160px); }
  .hero { padding-top:48px; }
  .hero > p:last-child { font-size:13px; }
  .directory-section > header > span { font-size:24px; }
  .directory-section h2 { font-size:27px; }
  .link-grid { grid-template-columns:1fr; }
  .link-card { min-height:210px; }
  .safety-note { grid-template-columns:1fr; }
  footer { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }