/* BASIC displays: separate C64 and VIC-20 palettes and character ROMs. */
@font-face {
  font-family: 'Pet Me 64';
  src: url('/images/fonts/PetMe64.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pet Me 2X';
  src: url('/images/fonts/PetMe2X.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html[data-theme='c64'] {
  --cbm-screen: #40318d;
  --cbm-ink: #a6a0ff;
  --cbm-border: #8b7ee0;
  --cbm-font: 'Pet Me 64', monospace;
  --cbm-size: 16px;
  background: var(--cbm-border);
  color-scheme: dark;
}
html[data-theme='vic20'] {
  --cbm-screen: #fff;
  --cbm-ink: #203bb5;
  --cbm-border: #75cec8;
  --cbm-font: 'Pet Me 2X', monospace;
  --cbm-size: 12px;
  background: var(--cbm-border);
  color-scheme: light;
}
html:is([data-theme='c64'], [data-theme='vic20']) body {
  --bg: var(--cbm-screen);
  --bg-secondary: var(--cbm-screen);
  --text: var(--cbm-ink);
  --text-muted: var(--cbm-ink);
  --accent: var(--cbm-ink);
  --accent-hover: var(--cbm-screen);
  --border: var(--cbm-ink);
  --body-font: var(--cbm-font);
  --heading-font: var(--cbm-font);
  background: var(--cbm-screen);
  color: var(--cbm-ink);
  border: 32px solid var(--cbm-border);
  font: var(--cbm-size)/1.65 var(--cbm-font);
  font-synthesis: none;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: none;
}
html:is([data-theme='c64'], [data-theme='vic20']) .commodore-only { display: inline; }
html[data-theme='c64'] .c64-only,
html[data-theme='vic20'] .vic20-only { display: block; }
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-only,
html:is([data-theme='c64'], [data-theme='vic20']) .amiga-only,
html:is([data-theme='c64'], [data-theme='vic20']) .surface::after,
html:is([data-theme='c64'], [data-theme='vic20']) .rack::before,
html:is([data-theme='c64'], [data-theme='vic20']) .rack::after,
html:is([data-theme='c64'], [data-theme='vic20']) .identity-heading::before,
html:is([data-theme='c64'], [data-theme='vic20']) .monitor::after,
html:is([data-theme='c64'], [data-theme='vic20']) .monitor .terminal-art,
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-comment,
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-status,
html:is([data-theme='c64'], [data-theme='vic20']) .patches,
html:is([data-theme='c64'], [data-theme='vic20']) .rail { display: none; }
html:is([data-theme='c64'], [data-theme='vic20']) .surface { min-height: 0; overflow: visible; }
html:is([data-theme='c64'], [data-theme='vic20']) .shell { max-width: 880px; padding: 0 24px; }
html:is([data-theme='c64'], [data-theme='vic20']) header nav {
  padding: 22px 0;
  gap: 16px;
  border: 0;
  flex-direction: row;
  align-items: center;
}
html:is([data-theme='c64'], [data-theme='vic20']) header nav > a,
html:is([data-theme='c64'], [data-theme='vic20']) .nav-categories a {
  color: var(--cbm-ink);
  font: var(--cbm-size)/1.5 var(--cbm-font);
  letter-spacing: 0;
  padding: 0;
}
html:is([data-theme='c64'], [data-theme='vic20']) .nav-categories { gap: 24px; flex-wrap: wrap; width: auto; }
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-main { padding: 22px 0 28px; }
html:is([data-theme='c64'], [data-theme='vic20']) .rack { border: 0; padding: 0; box-shadow: none; background: var(--cbm-screen); }
html:is([data-theme='c64'], [data-theme='vic20']) .identity-heading { gap: 4px; margin: 0 0 32px; padding: 0; }
html:is([data-theme='c64'], [data-theme='vic20']) .heading-logo { width: 64px; border-radius: 0; mix-blend-mode: normal; image-rendering: pixelated; }
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-main .identity-heading h1 {
  color: var(--cbm-ink);
  font: 24px/1.4 var(--cbm-font);
  text-shadow: none;
  letter-spacing: 0;
}
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-main h1 > span { display: inline; }
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-main h1 .title-rest { color: var(--cbm-ink); }
html[data-theme='vic20'] .terminal-main .identity-heading h1 { font-size: 16px; }
html:is([data-theme='c64'], [data-theme='vic20']) .monitor {
  border: 0;
  border-radius: 0;
  background: var(--cbm-screen);
  box-shadow: none;
  color: var(--cbm-ink);
  font-family: var(--cbm-font);
  overflow: visible;
}
/* Keep the section's accessible name, without drawing a modern window. */
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-titlebar {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-session { padding: 0; }
html:is([data-theme='c64'], [data-theme='vic20']) .commodore-boot { display: block; margin-bottom: 24px; }
html:is([data-theme='c64'], [data-theme='vic20']) .commodore-boot > p { margin: 0 0 24px; }
html:is([data-theme='c64'], [data-theme='vic20']) .commodore-boot > p:not(:last-child) { text-align: center; }
html:is([data-theme='c64'], [data-theme='vic20']) .monitor-prompt,
html:is([data-theme='c64'], [data-theme='vic20']) .workbench-intro,
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-tree {
  color: var(--cbm-ink);
  font: var(--cbm-size)/1.65 var(--cbm-font);
  letter-spacing: 0;
  text-shadow: none;
}
html:is([data-theme='c64'], [data-theme='vic20']) .read-command { margin-top: 24px; }
html:is([data-theme='c64'], [data-theme='vic20']) .workbench-intro { margin: 12px 0 28px; }
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-menu { margin: 28px 0; }
html:is([data-theme='c64'], [data-theme='vic20']) .tree-root,
html:is([data-theme='c64'], [data-theme='vic20']) .tree-branch,
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-tree a { color: var(--cbm-ink); }
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-tree a > span:last-child { text-decoration-color: currentColor; }
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-tree a { white-space: normal; }
html:is([data-theme='c64'], [data-theme='vic20']) .tree-branch { white-space: pre; }
html[data-theme='vic20'] .terminal-tree a { display: flex; align-items: baseline; max-width: 100%; }
html[data-theme='vic20'] .terminal-tree a > span:last-child { min-width: 0; overflow-wrap: anywhere; }
html[data-theme='vic20'] .tree-branch { font-size: 0; flex: 0 0 auto; }
html[data-theme='vic20'] .tree-branch::before { content: '├ '; font-size: var(--cbm-size); }
html[data-theme='vic20'] a[data-theme-choice] .tree-branch::before { content: ' ├ '; }
html[data-theme='vic20'] .terminal-tree a:last-child .tree-branch::before { content: ' └ '; }
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-cursor { color: var(--cbm-ink); font: inherit; animation: cbm-cursor 1s steps(1, end) infinite; }
@keyframes cbm-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html:is([data-theme='c64'], [data-theme='vic20']) .terminal-cursor { animation: none; }
}
html:is([data-theme='c64'], [data-theme='vic20']) a { color: var(--cbm-ink); }
html:is([data-theme='c64'], [data-theme='vic20']) a:hover,
html:is([data-theme='c64'], [data-theme='vic20']) .terminal-tree a[data-theme-choice][aria-current],
html:is([data-theme='c64'], [data-theme='vic20']) .theme-option[aria-current] { color: var(--cbm-screen); background: var(--cbm-ink); }
html:is([data-theme='c64'], [data-theme='vic20']) a:focus-visible { outline: 2px solid var(--cbm-ink); outline-offset: 3px; }
html:is([data-theme='c64'], [data-theme='vic20']) .site-footer,
html:is([data-theme='c64'], [data-theme='vic20']) body > footer { border: 0; color: var(--cbm-ink); font: 10px/1.7 var(--cbm-font); letter-spacing: 0; padding: 24px 0; }
html:is([data-theme='c64'], [data-theme='vic20']) body > header { max-width: 880px; padding: 0 24px; }
html:is([data-theme='c64'], [data-theme='vic20']) body > main { width: calc(100% - 48px); max-width: 832px; margin: 24px auto; padding: 0; }
html:is([data-theme='c64'], [data-theme='vic20']) body > footer { max-width: 880px; padding-inline: 24px; }
html:is([data-theme='c64'], [data-theme='vic20']) h1,
html:is([data-theme='c64'], [data-theme='vic20']) h2,
html:is([data-theme='c64'], [data-theme='vic20']) h3 { color: var(--cbm-ink); font-family: var(--cbm-font); font-weight: 400; }
html:is([data-theme='c64'], [data-theme='vic20']) body > main h1 { font-size: 24px; }
html:is([data-theme='c64'], [data-theme='vic20']) body > main h2,
html:is([data-theme='c64'], [data-theme='vic20']) body > main h3 { font-size: var(--cbm-size); overflow-wrap: anywhere; }
html:is([data-theme='c64'], [data-theme='vic20']) .theme-option { padding: 20px 16px; border: 2px solid var(--cbm-ink); background: var(--cbm-screen); font-family: var(--cbm-font); }
html:is([data-theme='c64'], [data-theme='vic20']) .theme-option strong { font-size: var(--cbm-size); font-weight: 400; }
html:is([data-theme='c64'], [data-theme='vic20']) .theme-option span { color: inherit; font-size: var(--cbm-size); }
html:is([data-theme='c64'], [data-theme='vic20']) .theme-option strong::after { font-size: 10px; }

@media (max-width: 600px) {
  html[data-theme='c64'] { --cbm-size: 12px; }
  html[data-theme='vic20'] { --cbm-size: 8px; }
  html:is([data-theme='c64'], [data-theme='vic20']) body { border-width: 14px; }
  html:is([data-theme='c64'], [data-theme='vic20']) .shell { padding: 0 12px; }
  html:is([data-theme='c64'], [data-theme='vic20']) header nav { padding: 18px 0; gap: 16px; }
  html:is([data-theme='c64'], [data-theme='vic20']) .nav-categories { gap: 20px; }
  html:is([data-theme='c64'], [data-theme='vic20']) .heading-logo { width: 48px; }
  html:is([data-theme='c64'], [data-theme='vic20']) .terminal-main .identity-heading h1 { font-size: 16px; }
  html[data-theme='vic20'] .terminal-main .identity-heading h1 { font-size: 12px; }
  html:is([data-theme='c64'], [data-theme='vic20']) .identity-heading { margin-bottom: 24px; }
  html:is([data-theme='c64'], [data-theme='vic20']) .site-footer { font-size: 8px; gap: 12px; flex-wrap: wrap; }
  html:is([data-theme='c64'], [data-theme='vic20']) body > header { padding: 0 12px; }
  html:is([data-theme='c64'], [data-theme='vic20']) body > main { width: calc(100% - 24px); }
  html:is([data-theme='c64'], [data-theme='vic20']) body > main h1 { font-size: 16px; }
  html:is([data-theme='c64'], [data-theme='vic20']) body > footer { padding-inline: 12px; font-size: 8px; }
}