/* Seven famous programs. Builds on ../chess/chess.css (the night colours,
   the picker, one story at a time) and adds the screen: the code on a
   CRT in each program's own colours, and 10 PRINT's maze. */
.cd-picker { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1180px) { .cd-picker { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } }

.og-story code { font-family: "Company31 Mono", "Spline Sans Mono", monospace; font-size: .9em; color: var(--og-gold); }

.cd-viewer { max-width: 60rem; }
.cd-crt {
  --cd-bg: #0d1330; --cd-text: #c0caf5; --cd-note: #7480b8; --cd-str: #e0af68; --cd-num: #ff9e64; --cd-tab: #151c40;
  position: relative; border-radius: 18px; padding: 14px; background: #a89d80;
  box-shadow: inset 0 2px 0 #c4b999, inset 0 -3px 0 #6c644f, 0 18px 40px rgba(0, 0, 0, .5);
}
.cd-listing, .cd-maze pre {
  margin: 0; padding: 1.1rem 1.2rem; border-radius: 12px; overflow: auto; max-height: 34rem;
  background: var(--cd-bg); color: var(--cd-text); border-top: 6px solid var(--cd-tab);
  font: 500 .86rem/1.55 "Company31 Mono", "Spline Sans Mono", ui-monospace, monospace; tab-size: 4;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, rgba(255, 255, 255, .04), rgba(0, 0, 0, .35));
  box-shadow: inset 0 0 0 3px #3a3630;
}
.cd-listing:focus-visible { outline: 2px solid #ffb347; outline-offset: 2px; }
.cd-c { color: var(--cd-note); } .cd-s { color: var(--cd-str); } .cd-n { color: var(--cd-num); }
.cd-maze { margin-top: .8rem; display: grid; gap: .6rem; justify-items: start; }
.cd-maze[hidden] { display: none; }
.cd-maze pre { width: 100%; box-sizing: border-box; line-height: 1.15; font-size: 1.05rem; letter-spacing: 0; min-height: 14.5em; }
.cd-maze button {
  font: 600 .85rem/1 "Company31 Mono", monospace; letter-spacing: .08em; padding: .6rem 1.1rem; min-height: 44px; border-radius: 8px;
  border: 0; background: var(--cd-bg); color: var(--cd-text); cursor: pointer;
}
.cd-maze button:focus-visible { outline: 2px solid #ffb347; outline-offset: 2px; }
.cd-source { margin: 1rem 0 0; display: grid; gap: .3rem; }
.cd-source a { color: var(--og-gold); font-weight: 600; }
.cd-credit { color: var(--faint); font-size: .85rem; }