/* Retro Launcher guides: the website's neon look, for reading. */
:root {
  --bg: #05060f; --panel: #0d1024; --line: #1d2550; --text: #eef2ff; --dim: #a3acd0;
  --blue: #1e8bff; --cyan: #3fd8ff; --gold: #ffd23f; --orange: #ff7a1a; --red: #ff3b3b; --rose: #ff5c7a; --green: #3fe0a0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 "Noto Sans", system-ui, sans-serif; }
a { color: var(--cyan); }
a:hover { color: #8ae9ff; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 10; background: rgba(5,6,15,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .in { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: "Bebas Neue", sans-serif; font-size: 26px; letter-spacing: 1px; }
.brand img { width: 30px; height: 45px; object-fit: cover; border-radius: 5px; box-shadow: 0 0 0 1px #0b3d91; }
.brand span { background: linear-gradient(180deg, var(--gold), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top nav { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
.top nav a { color: var(--dim); text-decoration: none; font-weight: 600; font-size: 15px; }
.top nav a:hover, .top nav a.here { color: var(--cyan); }
.top nav a.dl { color: #1a0f00; background: linear-gradient(180deg, var(--gold), var(--orange)); padding: 4px 12px; border-radius: 8px; }

/* Layout: guide list beside the page */
.page { max-width: 1180px; margin: 0 auto; padding: 32px 20px 60px; display: grid; grid-template-columns: 230px 1fr; gap: 40px; }
.side { position: sticky; top: 86px; align-self: start; }
.side h4 { font-family: "Press Start 2P", monospace; font-size: 10px; color: var(--gold); margin: 0 0 12px; letter-spacing: 1px; }
.side ul { list-style: none; margin: 0 0 22px; padding: 0; }
.side li a { display: block; padding: 7px 12px; border-radius: 8px; color: var(--dim); text-decoration: none; font-size: 15px; }
.side li a:hover { background: var(--panel); color: var(--text); }
.side li a.here { background: var(--panel); color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); }
.toc a { font-size: 14px !important; padding: 4px 12px !important; }

/* Content */
main { min-width: 0; }
.crumb { font-family: "Press Start 2P", monospace; font-size: 10px; color: var(--cyan); letter-spacing: 1px; }
main h1 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 64px; line-height: 1; margin: 10px 0 12px;
  background: linear-gradient(180deg, var(--gold), var(--orange) 75%, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
main .lede { font-size: 19px; color: var(--dim); margin: 0 0 30px; max-width: 40em; }
main h2 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 38px; letter-spacing: .5px; margin: 46px 0 10px; color: var(--text);
  padding-top: 18px; border-top: 1px solid var(--line); }
main h2:first-of-type { border-top: 0; padding-top: 0; }
main h3 { font-size: 19px; margin: 28px 0 8px; color: var(--cyan); }
main p, main li { color: #d6dcf5; }
main ul, main ol { padding-left: 22px; }
main li { margin: 4px 0; }
code { background: #12163a; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 14.5px; color: #e9edff; }
pre { background: #0a0d22; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 14px; line-height: 1.5; }
pre code { background: none; border: 0; padding: 0; }
kbd { font-family: "Press Start 2P", monospace; font-size: 10px; background: #1a1f45; border: 1px solid #2f3a7a; border-bottom-width: 3px;
  border-radius: 6px; padding: 3px 6px; color: var(--gold); white-space: nowrap; }
table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 15px; display: block; overflow-x: auto; }
th { text-align: left; color: var(--gold); font-weight: 600; border-bottom: 2px solid var(--line); padding: 8px 10px; white-space: nowrap; }
td { border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: top; color: #d6dcf5; }
.callout { border-left: 3px solid var(--cyan); background: linear-gradient(90deg, rgba(63,216,255,.08), transparent); padding: 12px 16px; border-radius: 6px; margin: 16px 0; }
.callout.warn { border-color: var(--gold); background: linear-gradient(90deg, rgba(255,210,63,.08), transparent); }
.callout p { margin: 0; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; vertical-align: 2px; }
.tag.req { background: rgba(255,92,122,.18); color: var(--rose); }
.tag.opt { background: rgba(63,224,160,.15); color: var(--green); }
.tag.gpu { background: rgba(30,139,255,.2); color: #8cc4ff; }

/* Guide hub cards */
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 10px; }
.hub a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-decoration: none; }
.hub a:hover { border-color: var(--blue); box-shadow: 0 0 24px rgba(30,139,255,.2); }
.hub b { display: block; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px; color: var(--text); letter-spacing: .5px; }
.hub span { color: var(--dim); font-size: 15px; }

/* System sections */
.sys { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px 20px 14px; margin: 18px 0; }
.sys h3 { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 30px; color: var(--text); margin: 14px 0 6px; letter-spacing: .5px; }
.sys dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 8px 0; }
.sys dt { color: var(--gold); font-weight: 600; font-size: 14px; }
.sys dd { margin: 0; color: #d6dcf5; font-size: 15px; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.keys span { font-size: 14px; color: #d6dcf5; white-space: nowrap; }

/* Prev / next */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); }
.pager a { text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; max-width: 48%; }
.pager small { display: block; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
footer { border-top: 1px solid var(--line); padding: 30px 20px 46px; color: var(--dim); font-size: 14px; text-align: center; }
footer a { color: var(--dim); }

@media (max-width: 860px) {
  .page { grid-template-columns: 1fr; gap: 10px; }
  .side { position: static; }
  .side ul.guides { display: flex; flex-wrap: wrap; gap: 6px; }
  .side ul.guides li a { padding: 5px 10px; background: var(--panel); }
  .side .toc-wrap { display: none; }
  main h1 { font-size: 48px; }
  .sys dl { grid-template-columns: 1fr; gap: 2px; }
  .sys dd { margin-bottom: 8px; }
  .top nav a:not(.dl):not(.here) { display: none; }
}