#retroskin-guide {
  --rs-cyan: #00FFFF;
  --rs-magenta: #FF00FF;
  --rs-black: #0A0A0A;
  --rs-panel: #141414;
  --rs-text: #E6FFFF;
  --rs-dim: #8FA3A3;
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: auto;
  background:
    radial-gradient(120% 80% at 50% 118%, color-mix(in srgb, var(--rs-magenta) 26%, transparent), transparent 62%),
    radial-gradient(90% 60% at 50% -12%, color-mix(in srgb, var(--rs-cyan) 18%, transparent), transparent 60%),
    rgba(3, 3, 5, .84);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-family: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  color: var(--rs-text);
}
#retroskin-guide * { box-sizing: border-box; }
#retroskin-guide .rs-guide-card {
  position: relative; width: min(780px, 100%); max-height: min(88vh, 940px);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #13181D 0%, var(--rs-black) 58%);
  border: 1px solid color-mix(in srgb, var(--rs-cyan) 55%, transparent);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rs-cyan) 14%, transparent),
    0 0 46px color-mix(in srgb, var(--rs-cyan) 24%, transparent),
    0 30px 80px rgba(0, 0, 0, .72);
  animation: rs-guide-in .26s ease-out;
}
#retroskin-guide .rs-guide-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
    color-mix(in srgb, var(--rs-cyan) 4%, transparent) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: screen; opacity: .7;
}
#retroskin-guide header {
  position: relative; overflow: hidden; flex: 0 0 auto;
  padding: 20px 26px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--rs-cyan) 26%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,0));
}
#retroskin-guide header::before {
  content: ""; position: absolute; right: -34px; top: -46px; width: 190px; height: 190px;
  border-radius: 50%; pointer-events: none;
  background: linear-gradient(180deg, var(--rs-magenta), color-mix(in srgb, var(--rs-cyan) 70%, var(--rs-magenta)));
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 7px, transparent 7px 11px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 7px, transparent 7px 11px);
  opacity: .34; filter: blur(.4px);
}
#retroskin-guide .rs-guide-eyebrow {
  position: relative; margin: 0 0 6px; font-size: 10.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--rs-dim);
}
#retroskin-guide .rs-guide-eyebrow b { color: var(--rs-cyan); font-weight: 600; }
#retroskin-guide h1 {
  position: relative; margin: 0; padding-right: 130px;
  font-size: 21px; line-height: 1.25; letter-spacing: .06em;
  color: #FFFFFF; text-shadow: 0 0 14px color-mix(in srgb, var(--rs-cyan) 55%, transparent);
}
#retroskin-guide .rs-guide-close {
  position: absolute; top: 16px; right: 18px; z-index: 4;
  padding: 6px 11px; background: rgba(0,0,0,.5); color: var(--rs-cyan);
  border: 1px solid color-mix(in srgb, var(--rs-cyan) 55%, transparent); border-radius: 999px;
  font: inherit; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
#retroskin-guide .rs-guide-close:hover,
#retroskin-guide .rs-guide-close:focus-visible {
  background: color-mix(in srgb, var(--rs-cyan) 20%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rs-cyan) 45%, transparent);
  outline: none;
}
#retroskin-guide .rs-guide-body {
  flex: 1 1 auto; overflow-y: auto; padding: 6px 26px 22px;
  font-size: 13.5px; line-height: 1.62;
}
#retroskin-guide .rs-guide-body h2 {
  margin: 24px 0 10px; padding-bottom: 5px; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--rs-cyan);
  text-shadow: 0 0 12px color-mix(in srgb, var(--rs-cyan) 60%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--rs-cyan) 30%, transparent);
}
#retroskin-guide .rs-guide-body h2:first-child { margin-top: 10px; }
#retroskin-guide .rs-guide-body h3 {
  margin: 18px 0 6px; font-size: 12.5px; color: var(--rs-magenta); letter-spacing: .1em;
}
#retroskin-guide .rs-guide-body p { margin: 10px 0; }
#retroskin-guide .rs-guide-body ul { margin: 10px 0; padding: 0; list-style: none; }
#retroskin-guide .rs-guide-body li { position: relative; margin: 6px 0 6px 18px; }
#retroskin-guide .rs-guide-body li::before {
  content: "\25B8"; position: absolute; left: -17px; color: var(--rs-cyan);
  text-shadow: 0 0 8px color-mix(in srgb, var(--rs-cyan) 70%, transparent);
}
#retroskin-guide .rs-guide-body strong { color: #FFFFFF; }
#retroskin-guide .rs-guide-body code {
  padding: 1px 5px; margin: 0 1px; border-radius: 4px; font-size: 12.5px;
  color: #CFFAFF; background: color-mix(in srgb, var(--rs-cyan) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rs-cyan) 24%, transparent);
}
#retroskin-guide .rs-guide-tablewrap { overflow-x: auto; margin: 12px 0; }
#retroskin-guide table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#retroskin-guide th {
  padding: 5px 10px; text-align: left; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rs-dim); font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--rs-cyan) 34%, transparent);
}
#retroskin-guide td {
  padding: 6px 10px; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--rs-cyan) 13%, transparent);
}
#retroskin-guide tr:last-child td { border-bottom: none; }
#retroskin-guide td:first-child { white-space: nowrap; color: #FFFFFF; }
#retroskin-guide table.rs-guide-keys td:first-child {
  display: inline-block; margin: 4px 0; padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--rs-cyan) 45%, transparent);
  border-radius: 5px; color: var(--rs-cyan);
  background: color-mix(in srgb, var(--rs-cyan) 8%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--rs-cyan) 22%, transparent);
}
#retroskin-guide footer {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 12px 26px;
  border-top: 1px solid color-mix(in srgb, var(--rs-cyan) 22%, transparent);
  background: rgba(0, 0, 0, .42); font-size: 11.5px; color: var(--rs-dim);
}
#retroskin-guide footer label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
#retroskin-guide footer input { accent-color: #00FFFF; width: 14px; height: 14px; }
#retroskin-guide kbd {
  padding: 0 5px; border-radius: 4px; font: inherit;
  border: 1px solid color-mix(in srgb, var(--rs-cyan) 40%, transparent);
}
@keyframes rs-guide-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) {
  #retroskin-guide { padding: 10px; }
  #retroskin-guide header { padding: 16px 16px 12px; }
  #retroskin-guide h1 { font-size: 17px; padding-right: 0; }
  #retroskin-guide .rs-guide-body { padding: 4px 16px 16px; }
  #retroskin-guide footer { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #retroskin-guide .rs-guide-card { animation: none; }
}