style.css

/* ============================================================
   Python v2 — style.css
   A faithful re-skin of the classic python.org homepage look:
   dark utility bar, steel-blue shell, light-blue nav, dark REPL
   panel with yellow accents — plus the parts python.org doesn't
   have (runnable playground, CPU-rendered game).
   ============================================================ */

:root {
  --shell: #2b5278;            /* the big blue field */
  --shell-deep: #24466a;
  --topbar: #1e2833;
  --topbar-cell: #2a3542;
  --nav: #3d6b96;
  --nav-hover: #4b8bbe;
  --panel: #25313d;            /* code panel */
  --panel-deep: #1d2731;
  --yellow: #ffd343;
  --yellow-deep: #e6b800;
  --blue-btn: #4b8bbe;
  --blue-ink: #2b5278;
  --blue-link: #2a6496;
  --ink: #25313d;
  --muted: #5c6b79;
  --line: #d5dde5;
  --paper: #ffffff;
  --paper-2: #f2f5f8;
  --code-str: #e3a86a;
  --code-key: #5fc4dc;
  --code-num: #86b8dd;
  --code-com: #8fa3ad;
  --code-txt: #e8eef2;
  --code-punct: #b9c6d0;
  --danger: #ff7b72;
  --ok: #f3f7fa;
  --font: "Open Sans", "Segoe UI", Verdana, Arial, sans-serif;
  --mono: Consolas, Menlo, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 15px;
}

a { color: var(--blue-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: rgba(43, 82, 120, 0.09);
  border-radius: 4px;
  padding: 0.05em 0.32em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================== top utility bar ============================== */
.topbar {
  background: linear-gradient(180deg, #232d39 0%, var(--topbar) 100%);
  border-bottom: 1px solid #38434f;
}
.topbar-inner {
  display: flex; justify-content: center; align-items: stretch;
  max-width: 1400px; margin: 0 auto;
}
.topbar a {
  color: #b9c4cf;
  font-size: 15px;
  padding: 13px 34px;
  border-left: 1px solid #333e4a;
}
.topbar a:last-child { border-right: 1px solid #333e4a; }
.topbar a:hover { color: #fff; background: var(--topbar-cell); text-decoration: none; }
.topbar a.active {
  color: #fff;
  background: var(--topbar-cell);
  box-shadow: inset 0 2px 0 var(--yellow);
}

/* ============================== masthead ============================== */
.masthead { background: var(--shell); }
.masthead-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 22px 24px 18px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { display: block; }
.brand-word {
  color: #fff;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}
.brand-word sup { font-size: 0.32em; font-weight: 600; margin-left: 0.15em; }
.brand-word em {
  font-style: normal;
  font-size: 0.36em;
  font-weight: 800;
  color: var(--yellow);
  letter-spacing: 0.08em;
  vertical-align: 0.75em;
  margin-left: 0.35em;
}

.masthead-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn-donate {
  background: var(--yellow);
  color: var(--topbar);
  font-weight: 700;
  font-size: 16px;
  padding: 11px 22px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
}
.btn-donate:hover { background: #ffdf70; text-decoration: none; }

.searchbox {
  display: flex; align-items: center;
  background: var(--topbar);
  border-radius: 10px;
  padding: 8px;
  gap: 8px;
}
.search-mag {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-btn);
  font-size: 22px;
  border-radius: 50%;
}
.searchbox input {
  border: 0; border-radius: 6px;
  background: #fff;
  padding: 10px 14px;
  width: 230px;
  font-size: 15px;
  font-family: var(--font);
}
.searchbox input:focus { outline: 2px solid var(--yellow); }
.btn-go {
  background: var(--blue-btn);
  color: #fff;
  font-weight: 700;
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 15px;
}
.btn-go:hover { background: #5c9ad0; }

.btn-social {
  background: var(--topbar);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid #46525f;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
}
.btn-social:hover { background: var(--topbar-cell); }

/* ============================== main nav ============================== */
.mainnav { background: var(--shell); padding: 6px 18px 0; }
.mainnav-inner {
  max-width: 1200px; margin: 0 auto;
  background: linear-gradient(180deg, #4479a8 0%, var(--nav) 100%);
  border-radius: 8px 8px 0 0;
  display: flex; justify-content: center; flex-wrap: wrap;
}
.mainnav a {
  color: #fff;
  font-size: 16px;
  padding: 15px 28px;
}
.mainnav a:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }

/* ============================== hero ============================== */
.hero {
  background: linear-gradient(180deg, var(--shell) 0%, var(--shell-deep) 100%);
  padding: 18px 24px 10px;
}
.hero-panel {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 34px;
  align-items: stretch;
}

.hero-code {
  position: relative;
  background: var(--panel);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  display: flex; flex-direction: column;
  min-height: 335px;
}

.run-badge {
  position: absolute;
  top: 16px; right: 16px;
  width: 52px; height: 44px;
  background: var(--yellow);
  border: 0; border-radius: 10px;
  color: var(--topbar);
  font-family: var(--mono);
  font-size: 20px; font-weight: 700;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.run-badge:hover { background: #ffdf70; }

/* syntax-highlighted editor: highlight layer under a transparent textarea */
.editor {
  position: relative;
  flex: 1;
  margin: 26px 22px 0;
  min-height: 235px;
}
.editor pre,
.editor textarea {
  margin: 0;
  font-family: var(--mono);
  font-size: 15.5px;
  line-height: 1.72;
  tab-size: 4;
  white-space: pre-wrap;
  word-break: break-word;
}
.editor pre {
  position: absolute; inset: 0;
  pointer-events: none;
  color: var(--code-txt);
  overflow: hidden;
}
.editor textarea {
  position: relative;
  width: 100%; height: 100%;
  background: transparent;
  color: transparent;
  caret-color: var(--yellow);
  border: 0; resize: none;
  outline: none;
  overflow: hidden;
  padding: 0;
  display: block;
}
.editor:focus-within { outline: 2px solid rgba(255, 211, 67, 0.35); outline-offset: 6px; border-radius: 4px; }

.tok-com  { color: var(--code-com); }
.tok-str  { color: var(--code-str); }
.tok-key  { color: var(--code-key); }
.tok-num  { color: var(--code-num); }
.tok-pun  { color: var(--code-punct); }

.hero-out {
  margin: 14px 22px 22px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  font-family: var(--mono);
  font-size: 15.5px;
  color: var(--ok);
  white-space: pre-wrap;
  min-height: 22px;
}
.hero-out.error { color: var(--danger); }

.hero-copy {
  display: flex; flex-direction: column;
  padding: 26px 4px 18px;
  color: #eaf1f8;
}
.hero-copy h2 {
  color: var(--yellow);
  font-size: 27px;
  margin: 4px 0 18px;
  letter-spacing: 0.01em;
}
.hero-copy p {
  font-size: 16.5px;
  margin: 0 0 22px;
  color: #f2f6fa;
}
.hero-copy code {
  background: rgba(13, 27, 42, 0.5);
  color: var(--code-txt);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero-link:hover { color: var(--yellow); }

.pager {
  display: flex; gap: 10px;
  justify-content: center;
  margin-top: auto;
  padding-top: 34px;
}
.pager button {
  width: 38px; height: 36px;
  border: 0;
  border-radius: 6px;
  background: var(--blue-btn);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.pager button:hover { background: #5c9ad0; }
.pager button[aria-selected="true"] {
  background: var(--yellow);
  color: var(--topbar);
  font-weight: 700;
}

.hero-tagline {
  max-width: 1180px;
  margin: 34px auto 30px;
  text-align: center;
  color: #e2e9f0;
  font-size: 24px;
  line-height: 1.45;
}
.hero-tagline a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.hero-tagline a:hover { color: var(--yellow); }
.hero-tagline .prompt { color: var(--yellow); font-family: var(--mono); }

/* ============================== yellow band ============================== */
.band {
  background: var(--paper);
  padding: 0 24px;
}
.band-inner {
  max-width: 1180px; margin: 0 auto;
  position: relative;
  padding-bottom: 64px;
}
.band-yellow {
  background: var(--yellow);
  border-radius: 12px;
  padding: 34px 40px 46px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.band-yellow h2 {
  margin: 0 0 6px;
  color: var(--topbar);
  font-size: 24px;
}
.band-yellow p { margin: 0; color: #4a3c12; font-size: 16px; max-width: 46rem; }
.band-card {
  position: absolute;
  left: 40px; right: 40px;
  bottom: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 30px;
  box-shadow: 0 16px 32px rgba(30, 40, 51, 0.12);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.band-card strong { color: var(--blue-ink); font-size: 17px; }
.band-card span { color: var(--muted); }

/* ============================== sections ============================== */
.section { padding: 58px 24px; }
.section-inner { max-width: 1180px; margin: 0 auto; }
.section h2 {
  color: var(--blue-ink);
  font-size: 30px;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.section h2 .prompt {
  color: var(--yellow-deep);
  font-family: var(--mono);
  margin-right: 8px;
}
.lede { font-size: 17px; color: var(--muted); max-width: 46rem; margin: 0 0 28px; }

/* feature / story cards */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(30, 40, 51, 0.12);
}
.card-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow);
  color: var(--topbar);
  font-size: 20px; font-weight: 800;
  border-radius: 9px;
  margin-bottom: 14px;
}
.card h3 { margin: 0 0 8px; font-size: 17.5px; color: var(--blue-ink); }
.card p { margin: 0; color: var(--muted); }

.features { background: var(--paper-2); }

/* ============================== game ============================== */
.game-section {
  background:
    radial-gradient(900px 400px at 12% 0%, rgba(75, 139, 190, 0.18), transparent 55%),
    var(--topbar);
}
.game-section h2 { color: var(--yellow); }
.game-section .lede { color: #b8c7d4; }
.game-section .lede code { background: rgba(255, 211, 67, 0.12); color: var(--yellow); }
.game-section a { color: var(--blue-btn); }

.game-wrap {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 30px; align-items: start;
}
.game-frame {
  background: #000;
  border: 2px solid rgba(255, 211, 67, 0.35);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
#game-canvas {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated; image-rendering: crisp-edges;
  cursor: crosshair; outline: none;
}
#game-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--yellow); }
.game-hud {
  display: flex; justify-content: space-between; gap: 1rem;
  background: rgba(13, 22, 32, 0.95);
  color: var(--blue-btn);
  font-family: var(--mono); font-size: 0.82rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.game-hud #hud-fps { color: var(--yellow); font-weight: 700; }

.game-side h3 { color: #fff; margin: 0.2rem 0 0.8rem; }
.game-side p { color: #b8c7d4; }
.game-side code { background: rgba(255, 211, 67, 0.12); color: var(--yellow); }
.key-list { list-style: none; padding: 0; margin: 0 0 1.1rem; color: #dce8f2; }
.key-list li { margin-bottom: 0.55rem; }
kbd {
  display: inline-block;
  background: #22384e;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 0.1rem 0.55rem;
  margin-right: 0.3rem;
  font-family: var(--mono); font-size: 0.85rem;
  color: #fff;
}
.stat-row { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0.85rem 1.15rem;
  color: var(--blue-btn);
  display: flex; flex-direction: column;
}
.stat strong { color: var(--yellow); font-size: 1.55rem; line-height: 1.15; }
.stat span { font-size: 0.85rem; }

/* ============================== start / compare ============================== */
.start-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; margin-bottom: 44px;
}
.start-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 26px;
}
.start-box h3 { margin: 18px 0 10px; color: var(--blue-ink); font-size: 17px; }
.start-box h3:first-child { margin-top: 0; }

.terminal {
  background: var(--panel-deep);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0;
}
.terminal code {
  background: transparent; padding: 0; border-radius: 0;
  color: #d7e3ee;
  font-family: var(--mono);
  font-size: 14px; line-height: 1.7;
  white-space: pre;
}

.compare-title { margin-top: 8px; }
.compare {
  width: 100%; border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.compare th {
  text-align: left; padding: 13px 20px;
  background: var(--blue-ink); color: #fff; font-size: 15.5px;
}
.compare th:last-child { background: var(--nav); }
.compare td {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.compare tr:hover td { background: rgba(75, 139, 190, 0.06); }
.compare td:last-child { color: var(--ink); font-weight: 600; }

.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  border: 0;
  border-radius: 8px;
  padding: 11px 22px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); text-decoration: none; }
.btn-blue { background: var(--blue-btn); color: #fff; }
.btn-inline { margin-top: 16px; }

/* ============================== docs teaser ============================== */
.docs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.doc-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  background: var(--paper);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.doc-card:hover { border-color: var(--blue-btn); transform: translateY(-2px); }
.doc-card.hidden { display: none; }
.doc-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--blue-ink); }
.doc-card p { margin: 0 0 10px; color: var(--muted); font-size: 14.5px; }
.snippet {
  display: inline-block;
  background: var(--panel);
  color: var(--yellow);
  font-family: var(--mono); font-size: 13px;
  padding: 6px 10px; border-radius: 6px;
}
.docs-foot { margin-top: 24px; color: var(--muted); }

/* ============================== news ============================== */
.news-section { background: var(--paper-2); }
.news-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.news-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px; padding: 24px;
}
.news-date {
  color: var(--blue-link); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.news-card h3 { margin: 8px 0 10px; color: var(--blue-ink); font-size: 18px; }
.news-card p { margin: 0 0 14px; color: var(--muted); }
.news-card a { font-weight: 700; }

/* ============================== community ============================== */
.community-section {
  background: linear-gradient(180deg, var(--shell) 0%, var(--shell-deep) 100%);
  color: #eaf1f8;
}
.community-section h2 { color: var(--yellow); }
.community-section .lede { color: #c9d6e2; }
.stat-row-big { justify-content: center; margin: 28px 0; }
.stat-row-big .stat { min-width: 150px; align-items: center; text-align: center; }
.community-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================== footer ============================== */
.footer {
  background: var(--topbar);
  color: #9db0c0;
  padding: 46px 24px 24px;
}
.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.footer-col h4 {
  color: var(--blue-btn); margin: 0 0 12px;
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.footer-col a { display: block; color: #9db0c0; padding: 3px 0; font-size: 14.5px; }
.footer-col a:hover { color: var(--yellow); }
.footer-legal {
  max-width: 1180px; margin: 34px auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
  font-size: 13.5px;
}
.footer-legal img { vertical-align: -0.35em; margin-right: 6px; }
.footer-legal a { color: #9db0c0; }
.footer-meta { color: #6c8095; }

/* ============================== docs.html ============================== */
.page-head {
  background: linear-gradient(180deg, var(--shell) 0%, var(--shell-deep) 100%);
  padding: 34px 24px 30px;
}
.page-head-inner { max-width: 1180px; margin: 0 auto; }
.page-head h1 {
  color: var(--yellow);
  font-size: 34px;
  margin: 0 0 10px;
}
.page-head p { color: #e2e9f0; font-size: 17px; max-width: 48rem; margin: 0; }

.doc-section { padding: 46px 24px 10px; }
.doc-section-inner { max-width: 1180px; margin: 0 auto; }
.doc-section h2 {
  color: var(--blue-ink);
  font-size: 26px;
  margin: 26px 0 14px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--yellow);
  display: flex; align-items: center; gap: 10px;
}
.doc-section h2 .badge {
  background: var(--yellow);
  color: var(--topbar);
  font-size: 13px;
  border-radius: 6px;
  padding: 3px 10px;
  letter-spacing: 0.04em;
}
.doc-section h3 {
  color: var(--blue-ink);
  font-size: 18px;
  margin: 24px 0 10px;
}
.doc-section p { color: var(--muted); max-width: 52rem; }
.doc-section ol, .doc-section ul { color: var(--muted); max-width: 52rem; }
.doc-section li { margin-bottom: 8px; }

.steps {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 5px solid var(--yellow);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 16px 0;
  max-width: 52rem;
}
.steps strong { color: var(--blue-ink); }
.callout {
  max-width: 52rem;
  margin: 18px 0;
  padding: 17px 20px;
  border: 1px solid #b9cee0;
  border-left: 5px solid var(--blue-light);
  border-radius: 10px;
  color: #31516a;
  background: #edf6fc;
}
.callout strong { color: var(--blue-ink); }

.checklist {
  list-style: none; padding: 0; max-width: 52rem;
}
.checklist li {
  padding-left: 30px;
  position: relative;
  margin-bottom: 10px;
}
.checklist li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--yellow-deep);
  font-weight: 800;
}

table.ref-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
  margin: 14px 0 26px;
}
.ref-table th {
  text-align: left;
  background: var(--blue-ink); color: #fff;
  padding: 11px 16px; font-size: 14.5px;
}
.ref-table td {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
}
.ref-table tr:hover td { background: rgba(75, 139, 190, 0.06); }
.ref-table td:first-child { white-space: nowrap; }

.try-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 22px; margin: 22px 0 10px;
}
.try-editor { display: flex; flex-direction: column; }
.try-editor textarea {
  width: 100%; min-height: 190px;
  background: var(--panel-deep);
  color: var(--code-txt);
  border: 0; border-radius: 10px;
  padding: 16px 18px;
  font-family: var(--mono); font-size: 14px; line-height: 1.65;
  resize: vertical;
}
.try-out {
  background: var(--panel-deep);
  border-radius: 10px;
  padding: 16px 18px;
  font-family: var(--mono); font-size: 14px;
  color: var(--ok);
  white-space: pre-wrap;
  min-height: 190px;
}
.try-out.error { color: var(--danger); }

/* ============================== responsive ============================== */
@media (max-width: 1000px) {
  .hero-panel, .game-wrap, .start-grid, .try-grid { grid-template-columns: 1fr; }
  .grid, .docs-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: repeat(3, 1fr); }
  .band-card { position: static; margin-top: -28px; }
}
@media (max-width: 640px) {
  .grid, .docs-grid, .news-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .topbar a { padding: 10px 16px; font-size: 13.5px; }
  .mainnav a { padding: 12px 16px; font-size: 14px; }
  .brand-word { font-size: 32px; }
  .searchbox input { width: 150px; }
  .hero-copy h2 { font-size: 23px; }
  .hero-tagline { font-size: 19px; }
}

/* ============================================================
   Python v2 1.1 — motion, YouTube campaign, Games + PyHope
   ============================================================ */

/* --- shared motion layer --- */
.scroll-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  background: linear-gradient(90deg, #d64541 0 35%, var(--yellow) 55%, #2f6fbd 100%);
  box-shadow: 0 0 16px rgba(255, 211, 67, .55);
}
.back-to-top {
  position: fixed;
  z-index: 999;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: var(--topbar);
  color: var(--yellow);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-to-top:hover { transform: translateY(-3px) scale(1.04); }
.has-reveal .reveal-item {
  opacity: 0;
  transform: translateY(32px) scale(.985);
  filter: blur(3px);
  transition:
    opacity .72s cubic-bezier(.2,.75,.2,1),
    transform .72s cubic-bezier(.2,.75,.2,1),
    filter .72s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.has-reveal .reveal-item.revealed {
  opacity: 1;
  transform: none;
  filter: none;
}
.mainnav { position: relative; z-index: 50; transition: filter .2s ease; }
.mainnav.nav-scrolled { filter: drop-shadow(0 8px 12px rgba(8,18,28,.24)); }
.mainnav a.nav-current { background: rgba(255,255,255,.16); box-shadow: inset 0 -3px 0 var(--yellow); }
.card, .doc-card, .sprite-card, .game-stage {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.card:hover, .doc-card:hover, .sprite-card:hover { box-shadow: 0 18px 42px rgba(30,40,51,.14); }

/* --- YouTube campaign --- */
.btn-youtube {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 11px 18px;
  color: #fff;
  background: #ff0033;
  border: 1px solid #ff315b;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(255,0,51,.22);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-youtube:hover {
  color: #fff;
  background: #e5002e;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,0,51,.32);
}
.btn-youtube-big { padding: 14px 24px; font-size: 16px; white-space: nowrap; }
.youtube-callout,
.youtube-bottom {
  max-width: 1180px;
  margin: 34px auto;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(500px 200px at 0% 0%, rgba(255,0,51,.23), transparent 70%),
    linear-gradient(135deg, #171f29, #252f3b);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(25,38,51,.24);
}
.youtube-callout h2,
.youtube-bottom h2 { margin: 3px 0 5px; color: #fff; font-size: 25px; }
.youtube-callout p,
.youtube-bottom p { margin: 0; color: #cbd7e2; max-width: 46rem; }
.youtube-play {
  display: grid;
  place-items: center;
  width: 66px;
  height: 48px;
  padding-left: 4px;
  border-radius: 14px;
  background: #ff0033;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 28px rgba(255,0,51,.32);
}
.youtube-bottom { max-width: none; margin: 0; border-radius: 0; padding: 42px max(24px, calc((100vw - 1180px) / 2)); }
.youtube-bottom > div { max-width: 48rem; }
.eyebrow {
  margin: 0 0 5px !important;
  color: var(--yellow) !important;
  font-size: 12px !important;
  line-height: 1.3;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* --- common upgraded buttons --- */
.btn-yellow { color: var(--topbar); background: var(--yellow); }
.btn-yellow:hover { color: var(--topbar); }
.btn-ghost {
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.3);
}
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.13); }
.btn-ghost-dark {
  color: var(--blue-ink);
  background: transparent;
  border: 1px solid var(--line);
  margin-left: 8px;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.game-page-head {
  min-height: 300px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(600px 300px at 86% 10%, rgba(95,196,220,.24), transparent 60%),
    radial-gradient(500px 260px at 10% 100%, rgba(214,69,65,.17), transparent 65%),
    linear-gradient(145deg, #162635, var(--shell));
}
.game-page-head h1 { font-size: clamp(38px, 6vw, 67px); line-height: 1; letter-spacing: -.035em; }
.game-page-head p { font-size: 18px; max-width: 62rem; }

/* --- games page --- */
.games-main { max-width: 1180px; margin: 0 auto; padding: 18px 24px 70px; }
.game-tabs {
  position: sticky;
  z-index: 45;
  top: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 26px auto 38px;
  padding: 7px;
  overflow-x: auto;
  border-radius: 13px;
  background: rgba(30,40,51,.94);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 14px 35px rgba(20,32,44,.24);
  backdrop-filter: blur(12px);
}
.game-tabs button {
  border: 0;
  border-radius: 9px;
  padding: 11px 18px;
  color: #b8c7d4;
  background: transparent;
  font: 700 14px var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.game-tabs button:hover { color: #fff; background: rgba(255,255,255,.07); }
.game-tabs button[aria-selected="true"] { color: var(--topbar); background: var(--yellow); }
.game-panel[hidden] { display: none !important; }
.game-panel { animation: game-panel-in .35s ease both; }
@keyframes game-panel-in { from { opacity: 0; transform: translateY(12px); } }
.game-panel > h2 { margin: 0 0 12px; color: var(--blue-ink); font-size: 32px; }
.panel-lede { max-width: 55rem; color: var(--muted); font-size: 17px; }
.game-title-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;
  margin: 0 0 18px;
}
.game-title-row h2 { margin: 3px 0 8px; font-size: clamp(26px,4vw,38px); color: var(--blue-ink); }
.game-title-row p { margin: 0; max-width: 49rem; color: var(--muted); font-size: 16px; }
.engine-pill {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 999px;
  background: #25313d;
  color: var(--yellow);
  font: 800 12px var(--mono);
  letter-spacing: .04em;
}
.engine-pill-blue { color: #d8f7ff; background: var(--blue-btn); }
.engine-pill-gpu { color: #16232f; background: linear-gradient(90deg, #5fc4dc, var(--yellow)); }
.game-stage {
  position: relative;
  overflow: hidden;
  border: 2px solid #25313d;
  border-radius: 15px;
  background: #000;
  box-shadow: 0 26px 66px rgba(23,36,48,.27);
}
.game-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  outline: none;
  cursor: crosshair;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.game-stage canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--yellow); }
.game-stage-arena { max-width: 100%; }
.game-stage-arena canvas { aspect-ratio: 16 / 9; }
.game-hud-rich { flex-wrap: wrap; }
.game-hud-rich #arena-fps { color: var(--yellow); font-weight: 800; }
#arena-kills { color: #fff; }
#arena-pixels { color: #5fc4dc; }
.game-hud button {
  margin-left: auto;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  background: #344a5f;
  color: #fff;
  cursor: pointer;
}
.control-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 25px;
  margin: 14px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--muted);
  font-size: 13px;
}
.control-strip kbd { background: #2a3b4b; }
.game-divider { height: 1px; margin: 65px 0; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.platform-stage { background: #152338; }
.gpu-stage canvas { aspect-ratio: 16 / 9; image-rendering: auto; }
.gpu-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.benchmark-note {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-left: 5px solid var(--yellow);
  border-radius: 8px;
  background: #fff9df;
  color: #5f5120;
}
.source-split { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 25px; }
.source-split .terminal { min-height: 420px; }
.api-list {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}
.api-list h3 { margin-top: 0; color: var(--blue-ink); }

/* --- sprite gallery --- */
.sprite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 25px; }
.sprite-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sprite-card:hover { transform: translateY(-5px); border-color: var(--blue-btn); }
.sprite-preview {
  display: grid;
  place-items: center;
  min-height: 150px;
  border-radius: 9px;
  background-color: #1b2733;
  background-image:
    linear-gradient(45deg, #223341 25%, transparent 25%),
    linear-gradient(-45deg, #223341 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #223341 75%),
    linear-gradient(-45deg, transparent 75%, #223341 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.sprite-preview img { width: 104px; height: 104px; image-rendering: pixelated; }
.sprite-preview-wide img { width: 160px; }
.sprite-preview span { color: var(--yellow); font: 900 37px var(--mono); }
.sprite-card h3 { margin: 15px 0 4px; color: var(--blue-ink); }
.sprite-card p { margin: 0 0 8px; color: var(--muted); }
.sprite-card a { font-weight: 800; }
.sprite-license-card { background: #fff9df; }

/* --- PyHope install area --- */
.install-downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0 25px;
}
.install-download {
  display: flex;
  flex-direction: column;
  min-height: 170px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.install-download h3 { margin: 0 0 7px; }
.install-download p { margin: 0 0 14px; }
.install-download .btn { margin-top: auto; text-align: center; }

@media (max-width: 900px) {
  .youtube-callout, .youtube-bottom { grid-template-columns: auto 1fr; }
  .youtube-callout .btn-youtube, .youtube-bottom .btn-youtube { grid-column: 1 / -1; width: fit-content; }
  .sprite-grid { grid-template-columns: repeat(2, 1fr); }
  .source-split, .install-downloads { grid-template-columns: 1fr; }
  .game-title-row { flex-direction: column; gap: 12px; }
}
@media (max-width: 600px) {
  .youtube-callout { margin: 20px 12px; padding: 22px 18px; grid-template-columns: 1fr; }
  .youtube-play { width: 55px; }
  .youtube-bottom { grid-template-columns: 1fr; }
  .games-main { padding-inline: 12px; }
  .game-tabs { justify-content: flex-start; margin-inline: 0; width: 100%; }
  .sprite-grid { grid-template-columns: 1fr; }
  .game-hud { flex-wrap: wrap; font-size: 11px; }
  .game-page-head h1 { font-size: 38px; }
  .hero-actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .has-reveal .reveal-item { opacity: 1; transform: none; filter: none; }
}

/* ============================== 50-topic field guide ============================== */
.guide-head {
  background:
    radial-gradient(600px 250px at 85% 20%, rgba(255,211,67,.19), transparent 62%),
    radial-gradient(500px 250px at 10% 100%, rgba(95,196,220,.18), transparent 62%),
    linear-gradient(135deg, #1a2d40, #2b5278);
}
.guide-head h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1; letter-spacing: -.03em; }
.guide-main { max-width: 1240px; margin: 0 auto; padding: 36px 24px 75px; }
.guide-toolbar {
  position: relative;
  margin-bottom: 28px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
}
.guide-toolbar label { display: block; margin: 0 0 7px; font-weight: 800; color: var(--blue-ink); }
.guide-toolbar input {
  width: 100%;
  padding: 13px 15px;
  border: 2px solid #cbd7e2;
  border-radius: 9px;
  color: var(--ink);
  background: #fff;
  font: 16px var(--font);
}
.guide-toolbar input:focus { border-color: var(--blue-btn); outline: 3px solid rgba(75,139,190,.13); }
.guide-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 13px 0 0; }
.guide-filters button {
  padding: 7px 12px;
  border: 1px solid #c7d2dc;
  border-radius: 999px;
  color: var(--blue-ink);
  background: #fff;
  font: 700 13px var(--font);
  cursor: pointer;
}
.guide-filters button:hover, .guide-filters button.active { color: #fff; border-color: var(--blue-btn); background: var(--blue-btn); }
#guide-count { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.guide-card {
  position: relative;
  min-width: 0;
  padding: 22px 22px 20px 76px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.guide-card:hover { transform: translateY(-3px); border-color: var(--blue-btn); box-shadow: 0 16px 35px rgba(30,40,51,.1); }
.guide-card[hidden] { display: none; }
.guide-number {
  position: absolute;
  top: 20px;
  left: 19px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  color: var(--topbar);
  background: var(--yellow);
  font: 900 15px var(--mono);
}
.guide-category { color: var(--blue-btn); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.guide-card h3 { margin: 3px 0 6px; color: var(--blue-ink); font-size: 19px; }
.guide-card p { margin: 0 0 11px; color: var(--muted); }
.guide-card pre { max-width: 100%; margin: 0; overflow-x: auto; border-radius: 7px; background: var(--panel); }
.guide-card pre code { display: block; width: max-content; min-width: 100%; padding: 10px 12px; color: #dbe8f1; background: transparent; font-size: 12.5px; white-space: pre; }
@media (max-width: 760px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-main { padding-inline: 12px; }
  .guide-card { padding-left: 66px; }
  .guide-number { left: 13px; }
}

/* ============================== Sudbury desktop Launcher ============================== */
.launcher-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 28px;
  align-items: center;
  margin: 20px 0 45px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #324d65;
  border-radius: 18px;
  background:
    radial-gradient(500px 220px at 15% 0%, rgba(75,139,190,.25), transparent 70%),
    #111c27;
  box-shadow: 0 28px 75px rgba(20,34,47,.24);
}
.launcher-mock {
  overflow: hidden;
  min-height: 390px;
  border: 1px solid #496278;
  border-radius: 13px;
  background: #111c27;
  box-shadow: 0 24px 55px rgba(0,0,0,.35);
  transform: perspective(1100px) rotateY(3deg) rotateX(1deg);
}
.launcher-mock-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  color: #edf5fb;
  background: #182838;
  border-bottom: 1px solid #2e4559;
}
.launcher-mock-top img { width: 34px; height: 34px; }
.launcher-mock-top strong { font-size: 14px; letter-spacing: .04em; }
.launcher-mock-top span { margin-left: auto; color: var(--yellow); font: 800 10px var(--mono); }
.launcher-mock-body { display: grid; grid-template-columns: 145px 1fr; min-height: 335px; }
.launcher-mock-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 10px;
  color: #91a8bb;
  background: #0d1720;
  font-size: 11px;
}
.launcher-mock-nav span, .launcher-mock-nav b { padding: 10px 9px; border-radius: 5px; }
.launcher-mock-nav b { color: var(--yellow); background: #20364a; }
.launcher-mock-main { padding: 32px 25px; color: #edf5fb; }
.launcher-mock-main small { color: var(--yellow); font: 800 9px var(--mono); letter-spacing: .12em; }
.launcher-mock-main h3 { max-width: 410px; margin: 10px 0 25px; color: #fff; font-size: clamp(20px,3vw,30px); line-height: 1.2; }
.launcher-mock-main > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.launcher-mock-main i {
  min-height: 85px;
  padding: 12px 8px;
  border-top: 4px solid var(--blue-btn);
  border-radius: 6px;
  color: #bdd0df;
  background: #182838;
  font: normal 800 9px var(--mono);
}
.launcher-mock-main i:nth-child(2) { border-color: var(--danger); }
.launcher-mock-main i:nth-child(3) { border-color: #44a36f; }
.launcher-copy h3 { margin: 4px 0 13px; color: #fff; font-size: 25px; }
.launcher-copy .checklist { color: #c4d3df; }
.download-button-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.download-note { color: #91a8bb !important; font-size: 13px; }
.download-note code { color: var(--yellow); background: rgba(255,211,67,.1); }
.donation-coming-soon {
  cursor: not-allowed;
  opacity: .82;
}
.game-more { margin-top: 25px; }
@media (max-width: 920px) {
  .launcher-showcase { grid-template-columns: 1fr; }
  .launcher-mock { transform: none; }
}
@media (max-width: 570px) {
  .launcher-showcase { padding: 14px; }
  .launcher-mock-body { grid-template-columns: 92px 1fr; }
  .launcher-mock-nav { padding: 10px 5px; }
  .launcher-mock-nav span, .launcher-mock-nav b { padding: 8px 5px; font-size: 9px; }
  .launcher-mock-main { padding: 20px 12px; }
  .launcher-mock-main > div { grid-template-columns: 1fr; }
  .launcher-mock-main i { min-height: 45px; }
}

/* ============================== Comet Circuit racing ============================== */
.engine-pill-racing {
  color: #fff;
  background: linear-gradient(90deg, #d64541, #8f2c52);
}
.racing-stage {
  background: #34764f;
  border-color: #d64541;
}
.racing-stage canvas {
  aspect-ratio: 16 / 9;
  image-rendering: auto;
}

/* ============================== Python v2 Arcade 2.0 ============================== */
html { scroll-behavior: smooth; }
.game-page-head { position: relative; }
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--pointer-x, 78%) var(--pointer-y, 18%), rgba(95,196,220,.08), transparent 68%);
}
.brand img {
  filter: drop-shadow(0 7px 10px rgba(5,16,28,.35));
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
.brand:hover img { transform: rotate(-7deg) scale(1.09); filter: drop-shadow(0 10px 16px rgba(255,211,67,.27)); }
.game-page-head::after {
  content: "";
  position: absolute;
  right: max(5vw, 30px);
  top: calc(22px + var(--page-parallax, 0px));
  width: 230px;
  height: 230px;
  opacity: .13;
  background: url("logo-v2.svg") center / contain no-repeat;
  filter: drop-shadow(0 20px 35px #000);
  pointer-events: none;
}
.game-page-head .page-head-inner { position: relative; z-index: 2; }

.arcade-library { margin-bottom: 22px; }
.arcade-library-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}
.arcade-library-head h2 { margin: 4px 0 8px; color: var(--blue-ink); font-size: clamp(29px, 4vw, 43px); line-height: 1.08; }
.arcade-library-head p:not(.eyebrow) { max-width: 52rem; margin: 0; color: var(--muted); font-size: 16px; }
.arcade-live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid #b9dec8;
  border-radius: 999px;
  color: #226843;
  background: #edf9f2;
  font: 800 12px var(--mono);
}
.arcade-live i, .live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34b76b;
  box-shadow: 0 0 0 0 rgba(52,183,107,.5);
  animation: arcade-pulse 1.8s infinite;
}
@keyframes arcade-pulse { 60% { box-shadow: 0 0 0 8px rgba(52,183,107,0); } 100% { box-shadow: 0 0 0 0 rgba(52,183,107,0); } }
.arcade-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
}
.arcade-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cbd5de;
  border-radius: 15px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 8px 21px rgba(21,39,56,.08);
  transform: translateY(0);
  transition: transform .24s cubic-bezier(.2,.75,.2,1), border-color .24s ease, box-shadow .24s ease;
}
.arcade-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(180px circle at var(--mx) var(--my), rgba(255,255,255,.28), transparent 66%);
  transition: opacity .2s ease;
}
.arcade-card:hover, .arcade-card:focus-visible {
  color: var(--ink);
  text-decoration: none;
  border-color: #5d9bd0;
  transform: translateY(-7px) rotateX(1deg);
  box-shadow: 0 18px 42px rgba(23,44,63,.2);
}
.arcade-card:hover::after, .arcade-card:focus-visible::after { opacity: 1; }
.arcade-card-art {
  position: relative;
  display: block;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: #111d2a;
}
.arcade-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px 13px 0 0;
  box-shadow: inset 0 0 35px rgba(0,0,0,.12);
}
.arcade-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s; }
.arcade-card:hover .arcade-card-art img { transform: scale(1.075); filter: saturate(1.16) contrast(1.04); }
.arcade-card-copy { display: block; padding: 13px 13px 15px; }
.arcade-card-copy b { display: block; overflow: hidden; color: var(--blue-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.arcade-card-copy b i { color: #fff; background: var(--blue-btn); margin-right: 5px; padding: 2px 4px; border-radius: 4px; font: normal 800 9px var(--mono); }
.arcade-card-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.arcade-play-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding-left: 2px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  color: #172332;
  background: var(--yellow);
  box-shadow: 0 5px 13px rgba(0,0,0,.28);
  font-size: 11px;
  transform: scale(.9);
  transition: transform .2s ease;
}
.arcade-card:hover .arcade-play-icon { transform: scale(1.08); }
.arcade-card.active { outline: 3px solid rgba(255,211,67,.55); border-color: #d3a900; }
.arcade-divider { margin-top: 55px; }
#byte-beast, #comet-hopper, #comet-circuit, #pocket-arcade { scroll-margin-top: 95px; }

.pocket-arcade {
  position: relative;
  padding: 26px;
  border: 1px solid #c5d1dc;
  border-radius: 20px;
  background: linear-gradient(145deg, #f9fbfd, #edf3f8);
  box-shadow: 0 24px 60px rgba(24,42,57,.11);
}
.pocket-title-row { margin-bottom: 17px; }
.engine-pill-pocket { color: #fff; background: linear-gradient(100deg, #2f6fbd, #8f2c52); }
.pocket-picker {
  display: flex;
  gap: 7px;
  margin-bottom: 14px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pocket-picker button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid #c7d3dd;
  border-radius: 999px;
  color: #355069;
  background: #fff;
  font: 800 11px var(--mono);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.pocket-picker button:hover { transform: translateY(-2px); border-color: #2f6fbd; }
.pocket-picker button.active { color: #172332; border-color: var(--yellow); background: var(--yellow); }
.pocket-stage { border-color: #344f68; background: #08101c; }
.pocket-stage canvas { aspect-ratio: 16 / 9; image-rendering: auto; }
.arcade-control-strip { align-items: center; }
.arcade-control-strip strong { color: var(--blue-ink); }

.sprite-animation-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 8px;
  padding: 12px 16px;
  border: 1px solid #bdd8ec;
  border-radius: 10px;
  color: #294d6d;
  background: #eef8ff;
}
.sprite-animation-note span { color: #d6a900; font-size: 22px; animation: twinkle 1.5s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(25deg) scale(1.25); filter: drop-shadow(0 0 8px #ffd343); } }
.sprite-card:focus-visible { outline: 3px solid rgba(75,139,190,.3); outline-offset: 2px; }
.sprite-card .sprite-preview { overflow: hidden; perspective: 500px; }
.sprite-card .sprite-preview img { transform-origin: 50% 85%; will-change: transform; }
.motion-run:hover img, .motion-run:focus img { animation: sprite-run .45s steps(2,end) infinite; }
.motion-float:hover img, .motion-float:focus img { animation: sprite-float 1.1s ease-in-out infinite; }
.motion-squash:hover img, .motion-squash:focus img { animation: sprite-squash .65s ease-in-out infinite; }
.motion-blast:hover img, .motion-blast:focus img { animation: sprite-blast .4s ease-out infinite; }
.motion-spin:hover img, .motion-spin:focus img { animation: sprite-spin .7s ease-in-out infinite; }
.motion-drive:hover img, .motion-drive:focus img { animation: sprite-drive .45s ease-in-out infinite; }
@keyframes sprite-run { 0% { transform: translate(-8px,1px) rotate(-3deg); } 100% { transform: translate(8px,-4px) rotate(3deg); } }
@keyframes sprite-float { 50% { transform: translateY(-13px) rotate(3deg); filter: drop-shadow(0 13px 8px rgba(0,0,0,.32)); } }
@keyframes sprite-squash { 40% { transform: translateY(13px) scale(1.16,.72); } 75% { transform: translateY(-13px) scale(.88,1.13); } }
@keyframes sprite-blast { 45% { transform: translateX(-12px) rotate(-3deg); filter: drop-shadow(20px 0 8px #ffd343); } }
@keyframes sprite-spin { 50% { transform: rotateY(90deg) scale(.8,1.1); filter: brightness(1.35); } }
@keyframes sprite-drive { 25% { transform: translate(-7px,-2px) rotate(-2deg); } 75% { transform: translate(8px,2px) rotate(2deg); } }

.python-game-code {
  display: grid;
  grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr);
  gap: 25px;
  align-items: center;
  margin-top: 32px;
  padding: 28px;
  border: 1px solid #314b62;
  border-radius: 16px;
  color: #d9e6f0;
  background: radial-gradient(500px 240px at 0 0, rgba(47,111,189,.23), transparent 70%), #111d29;
}
.python-game-code h3 { margin: 4px 0 9px; color: #fff; font-size: 26px; }
.python-game-code p:not(.eyebrow) { color: #b7c9d7; }
.python-game-code .terminal { margin: 0; max-height: 460px; overflow: auto; }
.source-downloads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.python-game-code .btn-ghost-dark { color: #fff; border-color: #597086; }

@media (max-width: 1050px) {
  .arcade-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 750px) {
  .arcade-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .arcade-library-head { align-items: flex-start; flex-direction: column; }
  .pocket-arcade { padding: 15px; }
  .python-game-code { grid-template-columns: 1fr; padding: 20px; }
  .game-page-head::after { width: 150px; height: 150px; right: -30px; opacity: .09; }
}
@media (max-width: 430px) {
  .arcade-grid { grid-template-columns: 1fr; }
  .arcade-card { display: grid; grid-template-columns: 122px 1fr; }
  .arcade-card-art { aspect-ratio: 1.35; }
  .arcade-card-copy { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .arcade-live i, .live-dot, .sprite-animation-note span,
  .motion-run:hover img, .motion-run:focus img,
  .motion-float:hover img, .motion-float:focus img,
  .motion-squash:hover img, .motion-squash:focus img,
  .motion-blast:hover img, .motion-blast:focus img,
  .motion-spin:hover img, .motion-spin:focus img,
  .motion-drive:hover img, .motion-drive:focus img { animation: none !important; }
  .arcade-card:hover { transform: none; }
}

/* ============================== Dual-runtime Playground ============================== */
.runtime-ready { display:inline-flex;align-items:center;gap:8px;color:#d5e5f0;font:800 11px var(--mono); }
.runtime-ready i,.terminal-led { width:8px;height:8px;border-radius:50%;background:#48d17c;box-shadow:0 0 12px #48d17c; }
.playground-head { position:relative;overflow:hidden;background:radial-gradient(700px 330px at 82% 12%,rgba(112,214,255,.22),transparent 65%),radial-gradient(500px 270px at 7% 100%,rgba(214,69,65,.2),transparent 68%),linear-gradient(140deg,#132538,#254d75); }
.playground-head::after { content:">_";position:absolute;right:7%;top:20px;color:rgba(255,211,67,.1);font:900 clamp(130px,22vw,280px)/1 var(--mono);transform:translateY(var(--page-parallax,0));pointer-events:none; }
.playground-head .page-head-inner { position:relative;z-index:2; }
.playground-head h1 { max-width:900px;font-size:clamp(40px,6.8vw,72px);line-height:.98;letter-spacing:-.04em; }
.playground-head p { max-width:760px;font-size:18px; }
.playground-main { max-width:1240px;margin:0 auto;padding:42px 24px 78px; }
.play-workspace { scroll-margin-top:90px;border:1px solid #273f53;border-radius:20px;overflow:hidden;background:#111c27;box-shadow:0 30px 80px rgba(15,31,44,.28); }
.play-toolbar { display:flex;align-items:flex-end;justify-content:space-between;gap:25px;padding:27px 30px 20px;background:linear-gradient(110deg,#182b3c,#203b54);border-bottom:1px solid #324b60; }
.play-toolbar h2 { margin:3px 0 0;color:#fff;font-size:clamp(27px,4vw,38px); }
.runtime-switch { display:flex;gap:5px;padding:5px;border:1px solid #3c566d;border-radius:12px;background:#0f1c27; }
.runtime-switch button { display:flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:8px;color:#a9bece;background:transparent;font:800 13px var(--font);cursor:pointer; }
.runtime-switch button span { display:grid;place-items:center;width:27px;height:23px;border-radius:5px;color:#dceaf5;background:#294156;font:800 9px var(--mono); }
.runtime-switch button.active { color:#162431;background:var(--yellow);box-shadow:0 5px 15px rgba(255,211,67,.18); }
.runtime-switch button.active span { color:#fff;background:#2f6fbd; }
.compat-notice { padding:13px 30px;color:#f4e5b0;background:#4d401c;border-bottom:1px solid #776326;font-size:13px; }
.play-controls { display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:13px 18px;background:#0b141d;border-bottom:1px solid #2a4153; }
.play-controls label { color:#8da5b8;font:800 11px var(--mono);text-transform:uppercase;letter-spacing:.08em; }
.play-controls select,.play-controls button { min-height:36px;padding:7px 11px;border:1px solid #354e62;border-radius:7px;color:#dce9f2;background:#1a2b39;font:700 12px var(--font); }
.play-controls button { cursor:pointer; }
.play-controls button:hover { border-color:#70d6ff;background:#203b50; }
.play-controls .play-run { margin-left:auto;color:#172431;border-color:#e0b916;background:var(--yellow);font-weight:900; }
.play-controls .play-run:hover { background:#ffe169; }
.play-controls kbd { padding:1px 4px;color:inherit;background:rgba(0,0,0,.12); }
.play-file { padding:6px 9px;border-radius:6px;color:#70d6ff;background:#112231;font:12px var(--mono); }
.play-editor-shell { background:#0e1822; }
.editor-chrome { display:flex;align-items:center;gap:7px;height:42px;padding:0 18px;color:#8ea5b8;background:#182632;border-bottom:1px solid #273c4e;font:10px var(--mono);letter-spacing:.07em; }
.editor-chrome .traffic { width:11px;height:11px;border-radius:50%; }.traffic.red{background:#ff6d68}.traffic.yellow{background:#ffd343}.traffic.green{background:#48c77a}
.editor-chrome strong { margin-left:8px;color:#c8d8e4; }.editor-chrome #editor-position { margin-left:auto; }
.play-editor-area { display:grid;grid-template-columns:58px minmax(0,1fr);height:430px; }
#play-lines { margin:0;padding:17px 13px;overflow:hidden;color:#536d81;background:#0a131b;border-right:1px solid #263b4d;text-align:right;font:14px/1.65 var(--mono);user-select:none; }
#play-code { width:100%;height:100%;padding:17px 20px;resize:none;overflow:auto;border:0;outline:0;color:#dce9f2;background:#0e1822;caret-color:var(--yellow);font:14px/1.65 var(--mono);tab-size:4;white-space:pre; }
#play-code:focus { box-shadow:inset 0 0 0 2px rgba(112,214,255,.24); }
.editor-help { margin:0;padding:8px 18px;color:#718a9d;background:#0a131b;border-top:1px solid #213445;font-size:11px; }
.terminal-heading { display:flex;align-items:center;justify-content:space-between;padding:13px 18px;color:#dce8f1;background:#182834;border-top:1px solid #31485b; }
.terminal-heading>div { display:flex;align-items:center;gap:9px; }.terminal-heading button { border:0;color:#9eb4c4;background:transparent;cursor:pointer;font-size:12px; }
.play-terminal-grid { display:grid;grid-template-columns:1fr 1fr;background:#080f16;border-top:1px solid #263b4c; }
.play-terminal { min-width:0; }.play-terminal+ .play-terminal{border-left:1px solid #2a3d4c}.play-terminal header{display:flex;justify-content:space-between;padding:9px 14px;color:#8fa8bb;background:#101b24;font:800 10px var(--mono);letter-spacing:.1em}.error-terminal header span{color:#ff8d87}.output-terminal header span{color:#9fe3b9}
.play-terminal pre { min-height:150px;max-height:240px;margin:0;padding:15px 17px;overflow:auto;color:#aee6c1;background:#080f16;font:13px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word; }
.error-terminal pre { color:#8096a6; }.error-terminal pre.has-error{color:#ff958f;background:#160e11;}
.command-line { display:grid;grid-template-columns:auto 1fr auto;align-items:center;border-top:1px solid #2a4051;background:#0a131b; }
.command-line span { padding-left:18px;color:var(--yellow);font:800 13px var(--mono); }
.command-line input { min-width:0;padding:14px 12px;border:0;outline:0;color:#e7f0f6;background:transparent;font:13px var(--mono); }
.command-line button { align-self:stretch;padding:0 18px;border:0;color:#fff;background:#2f6fbd;font-weight:800;cursor:pointer; }
.command-help { margin:0;padding:8px 18px 13px;color:#667f92;background:#0a131b;font-size:11px; }.command-help code{color:#9db8cc;background:#142431;}
.website-workshop { scroll-margin-top:85px;display:grid;grid-template-columns:minmax(300px,.85fr) minmax(400px,1.15fr);gap:35px;align-items:center;margin-top:58px;padding:35px;border:1px solid #c8d5df;border-radius:20px;background:radial-gradient(500px 260px at 0 0,rgba(47,111,189,.09),transparent 70%),#f7fafc;box-shadow:0 25px 60px rgba(26,46,63,.1); }
.workshop-copy h2,.play-tutorial h2 { margin:4px 0 12px;color:var(--blue-ink);font-size:clamp(29px,4vw,42px);line-height:1.08; }.workshop-copy>p:not(.eyebrow){color:var(--muted);font-size:16px}.workshop-steps{list-style:none;margin:23px 0;padding:0}.workshop-steps li{display:flex;gap:13px;margin:13px 0}.workshop-steps li>span{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#172431;background:var(--yellow);font:900 12px var(--mono)}.workshop-steps strong{color:var(--blue-ink)}.workshop-steps p{margin:2px 0;color:var(--muted);font-size:13px}
.site-preview-window { overflow:hidden;border:1px solid #8395a4;border-radius:14px;background:#fff;box-shadow:0 25px 55px rgba(15,31,46,.25);transform:perspective(1100px) rotateY(-2deg); }.preview-browser{display:flex;align-items:center;gap:6px;height:42px;padding:0 13px;background:#e7edf2}.preview-browser span{width:10px;height:10px;border-radius:50%;background:#d64541}.preview-browser span:nth-child(2){background:#e7b72a}.preview-browser span:nth-child(3){background:#44a36f}.preview-browser div{flex:1;margin-left:8px;padding:6px 10px;border-radius:6px;color:#6b7c89;background:#fff;font:11px var(--mono)}#site-preview{display:block;width:100%;height:440px;border:0;background:#132538}
.play-tutorial { margin-top:58px; }.play-tutorial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:24px}.play-tutorial-grid article{position:relative;padding:22px;border:1px solid var(--line);border-radius:13px;background:#fff;transition:transform .2s,box-shadow .2s}.play-tutorial-grid article:hover{transform:translateY(-5px);box-shadow:0 17px 35px rgba(25,44,60,.12)}.play-tutorial-grid article>span{color:#2f6fbd;font:900 12px var(--mono)}.play-tutorial-grid h3{margin:7px 0;color:var(--blue-ink)}.play-tutorial-grid p{margin:0;color:var(--muted);font-size:14px}.tutorial-next{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px;padding:17px 20px;border-left:5px solid var(--yellow);background:#fff8dc}.tutorial-next strong{color:var(--blue-ink)}.tutorial-next a{font-weight:800}
@media(max-width:920px){.website-workshop{grid-template-columns:1fr}.site-preview-window{transform:none}.play-tutorial-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.playground-main{padding-inline:10px}.play-toolbar{align-items:flex-start;flex-direction:column;padding:22px 17px}.runtime-switch{width:100%}.runtime-switch button{flex:1;justify-content:center}.play-controls .play-run{margin-left:0;width:100%}.play-editor-area{grid-template-columns:42px;height:390px}.play-terminal-grid{grid-template-columns:1fr}.play-terminal+.play-terminal{border-left:0;border-top:1px solid #2a3d4c}.website-workshop{padding:21px 15px}.play-tutorial-grid{grid-template-columns:1fr}#site-preview{height:390px}}
@media(prefers-reduced-motion:reduce){.site-preview-window{transform:none}.play-tutorial-grid article:hover{transform:none}}

/* ============================== Portfolio website studio ============================== */
.template-features {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 3px;
}
.template-features span {
  padding: 6px 10px;
  border: 1px solid #c7d7e3;
  border-radius: 999px;
  color: #315572;
  background: #fff;
  font: 800 11px var(--mono);
}
.workshop-actions { gap: 8px; }
.workshop-actions .btn-ghost-dark { margin-left: 0; }
.template-sync-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0 !important;
  color: #527086 !important;
  font: 800 11px var(--mono) !important;
}
.template-sync-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #41b870;
  box-shadow: 0 0 10px rgba(65,184,112,.55);
}
.template-sync-status i.sync-error { background: #d64541; box-shadow: 0 0 10px rgba(214,69,65,.5); }
.site-view-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  overflow-x: auto;
  border-bottom: 1px solid #ced8df;
  background: #f5f7f9;
}
.site-view-toolbar > span { flex: 1; min-width: 8px; }
.site-view-toolbar button {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #607486;
  background: transparent;
  font: 800 10px var(--mono);
  cursor: pointer;
}
.site-view-toolbar button:hover { color: #254d70; background: #e7edf2; }
.site-view-toolbar button.active { color: #fff; border-color: #2f6fbd; background: #2f6fbd; }
.site-render-pane {
  width: 100%;
  margin: 0 auto;
  background: #dce4e9;
  transition: width .3s ease, padding .3s ease;
}
.site-render-pane.preview-mobile { width: min(390px, 100%); padding: 12px 0; }
.site-render-pane.preview-tablet { width: min(700px, 100%); padding: 8px 0; }
.site-render-pane.preview-desktop { width: 100%; }
#site-preview { height: 610px; background: #f7f8f5; }
.site-html-source {
  height: 610px;
  margin: 0;
  padding: 20px;
  overflow: auto;
  color: #d9e8f2;
  background: #0d1720;
  font: 12px/1.55 var(--mono);
  white-space: pre;
  tab-size: 2;
}
.site-html-source code { color: inherit; background: transparent; }
@media (max-width: 700px) {
  #site-preview, .site-html-source { height: 520px; }
  .site-view-toolbar > span { display: none; }
  .site-view-toolbar button { font-size: 9px; }
}

/* Games-to-portfolio bridge */
.game-portfolio-callout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #314d65;
  border-radius: 15px;
  color: #d7e4ed;
  background: radial-gradient(350px 150px at 0 0, rgba(112,214,255,.16), transparent 70%), #142432;
  box-shadow: 0 18px 45px rgba(18,36,50,.14);
}
.game-portfolio-callout h3 { margin: 2px 0 4px; color: #fff; font-size: 20px; }
.game-portfolio-callout p:not(.eyebrow) { max-width: 680px; margin: 0; color: #aebfcb; font-size: 13px; }
.game-portfolio-callout .btn { white-space: nowrap; }
.portfolio-mini-preview {
  display: grid;
  grid-template-columns: repeat(3, 16px);
  gap: 5px;
  width: 82px;
  height: 72px;
  padding: 10px;
  border: 1px solid #ffffff25;
  border-radius: 10px;
  background: #0d1821;
}
.portfolio-mini-preview span { grid-column: 1 / -1; color: #ffd343; font: 900 20px var(--mono); }
.portfolio-mini-preview i { height: 18px; border-radius: 3px; background: #2f6fbd; }
.portfolio-mini-preview i:nth-of-type(2) { background: #d64541; }
.portfolio-mini-preview i:nth-of-type(3) { background: #44a36f; }
@media (max-width: 780px) {
  .game-portfolio-callout { grid-template-columns: auto 1fr; }
  .game-portfolio-callout .btn { grid-column: 1 / -1; width: fit-content; }
}

/* ============================================================
   Python.org-inspired homepage information architecture
   ============================================================ */
.skip-link {
  position: fixed;
  z-index: 10000;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  color: var(--topbar);
  background: var(--yellow);
  font-weight: 800;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

.python-quicklinks {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.python-quicklinks-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 42px 24px 38px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.python-quicklinks article {
  position: relative;
  min-width: 0;
  padding: 2px 30px 2px 74px;
  border-right: 1px solid var(--line);
}
.python-quicklinks article:first-child { padding-left: 58px; }
.python-quicklinks article:last-child { padding-right: 0; border-right: 0; }
.quick-icon {
  position: absolute;
  top: 3px;
  left: 22px;
  color: var(--blue-btn);
  font-family: var(--mono);
  font-size: 32px;
  line-height: 1;
  font-weight: 800;
}
.python-quicklinks article:first-child .quick-icon { left: 5px; }
.python-quicklinks h2 {
  margin: 0 0 8px;
  color: var(--blue-ink);
  font-size: 21px;
  font-weight: 500;
}
.python-quicklinks p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.python-quicklinks a { font-weight: 700; }

.success-quote {
  position: relative;
  margin: 0 0 28px;
  padding: 25px 34px 24px 66px;
  border-left: 6px solid var(--yellow);
  border-radius: 4px 10px 10px 4px;
  color: #fff;
  background: linear-gradient(135deg, var(--shell-deep), var(--shell));
  box-shadow: 0 12px 28px rgba(31, 60, 88, .18);
}
.success-quote::before {
  content: "“";
  position: absolute;
  top: 0;
  left: 20px;
  color: var(--yellow);
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
}
.success-quote blockquote { margin: 0; font-size: 20px; line-height: 1.5; }
.success-quote figcaption { margin-top: 9px; color: #cad9e6; font-size: 13px; font-weight: 700; }

.news-events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.feed-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--yellow);
}
.feed-heading h2 { margin: 0; font-size: 26px; }
.feed-heading > a { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.feed-list { margin: 0; padding: 0; list-style: none; }
.feed-list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}
.feed-list time {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
}
.feed-list a { font-size: 16px; font-weight: 700; }
.feed-list p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.event-list time {
  display: inline-block;
  align-self: start;
  padding: 3px 8px;
  border-radius: 4px;
  color: #5d4800;
  background: #ffe995;
  font-family: var(--font);
  font-weight: 800;
  text-align: center;
}

.nav-toggle {
  display: none;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  color: #fff;
  background: transparent;
  font: 700 15px var(--font);
  cursor: pointer;
  text-align: left;
}
.nav-toggle span { float: right; color: var(--yellow); font-family: var(--mono); }

/* Fit the expanded, python.org-like primary navigation on one row when possible. */
@media (min-width: 1001px) {
  .mainnav a { padding-inline: clamp(14px, 1.65vw, 24px); }
}
@media (max-width: 900px) {
  .python-quicklinks-inner { grid-template-columns: 1fr 1fr; padding-block: 28px; }
  .python-quicklinks article { padding: 18px 26px 22px 68px; border-bottom: 1px solid var(--line); }
  .python-quicklinks article:nth-child(2) { border-right: 0; }
  .python-quicklinks article:nth-child(3),
  .python-quicklinks article:nth-child(4) { border-bottom: 0; padding-top: 24px; }
  .python-quicklinks article:first-child { padding-left: 68px; }
  .quick-icon, .python-quicklinks article:first-child .quick-icon { top: 20px; left: 20px; }
  .python-quicklinks article:nth-child(n+3) .quick-icon { top: 26px; }
  .news-events-grid { grid-template-columns: 1fr; gap: 42px; }

  .mainnav.nav-enhanced { padding-inline: 18px; padding-bottom: 8px; }
  .mainnav.nav-enhanced .mainnav-inner { display: block; overflow: hidden; }
  .mainnav.nav-enhanced .nav-toggle { display: block; }
  .mainnav.nav-enhanced .mainnav-inner > a { display: none; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.12); }
  .mainnav.nav-enhanced.nav-open .mainnav-inner > a { display: block; }
}
@media (max-width: 640px) {
  .topbar { overflow-x: auto; scrollbar-width: thin; }
  .topbar-inner { width: max-content; min-width: 100%; justify-content: flex-start; }
  .masthead-inner { display: grid; grid-template-columns: 1fr; padding-inline: 18px; }
  .masthead-tools { width: 100%; }
  .masthead-tools .searchbox { order: -1; width: 100%; }
  .searchbox input { width: auto; min-width: 0; flex: 1; }
  .btn-youtube, .masthead-tools > .btn-donate, .masthead-tools > .btn-social { flex: 1; }

  .python-quicklinks-inner { grid-template-columns: 1fr; padding-inline: 18px; }
  .python-quicklinks article,
  .python-quicklinks article:first-child,
  .python-quicklinks article:nth-child(3),
  .python-quicklinks article:nth-child(4) {
    padding: 22px 8px 22px 62px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .python-quicklinks article:last-child { border-bottom: 0; }
  .quick-icon,
  .python-quicklinks article:first-child .quick-icon,
  .python-quicklinks article:nth-child(n+3) .quick-icon { top: 24px; left: 14px; }
  .success-quote { padding: 23px 22px 22px 48px; }
  .success-quote::before { left: 12px; font-size: 52px; }
  .success-quote blockquote { font-size: 17px; }
  .feed-list li { grid-template-columns: 1fr; gap: 6px; }
  .feed-heading h2 { font-size: 23px; }
}