/* The playground and the player, drawn after base.css, which they share
   with the documentation: the four symbol colors are kept for the buttons
   that carry them, and the code editor's tokens carry their own pair,
   light and dark, as base.css's do. */

:root {
  --screen: #000;

  /* The playground's editor. */
  --code-bg: light-dark(#f7f6f2, #161618);
  --gutter: light-dark(#9a9994, #5d5d64);
  --sel: light-dark(rgba(59, 99, 201, 0.22), rgba(143, 168, 255, 0.28));
  --t-kw: light-dark(#a2318f, #e48ad8);
  --t-type: light-dark(#13708a, #6ccbe0);
  --t-fn: light-dark(#2f55b3, #93aeff);
  --t-builtin: light-dark(#b23a48, #f2899a);
  --t-str: light-dark(#2c7a39, #9ad48c);
  --t-num: light-dark(#a8590a, #f0b46e);
  --t-const: light-dark(#8a5a00, #e8c070);
  --t-pkg: light-dark(#6a4bb8, #c2a6ff);
  --t-com: light-dark(#8a8984, #74747c);
  --error: light-dark(#c62f3c, #ff6f7b);

  /* The controller. */
  --plastic: light-dark(#cfcec8, #2a2a2e);
  --plastic-deep: light-dark(#bcbbb4, #202023);
  --key: light-dark(#e7e6e1, #3a3a40);
  --key-edge: light-dark(#9d9c96, #141416);
  --key-on: light-dark(#b8b7b0, #4e4e56);
  --legend: light-dark(#4e4e53, #c4c4ca);
  --triangle: light-dark(#1aa58a, #39c8a6);
  --circle: light-dark(#dd4650, #f26670);
  --cross: light-dark(#4b74d8, #80a0f5);
  --square: light-dark(#cf5fa5, #e789c6);
}

body {
  margin: 0;
  padding: 20px 16px 48px;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1 {
  margin: 0;
  font: 600 2.125rem/1 "Barlow Condensed", Barlow, system-ui, sans-serif;
  letter-spacing: 0.005em;
}
/* The player. */
.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--screen);
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* At under twice the picture's size, as on a phone, pixelated scaling is uneven. */
.touch canvas { image-rendering: auto; }

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  color: #dcdcd8;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.55);
}
.overlay[hidden] { display: none; }

.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
}

button, .file {
  display: inline-block;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
button:hover:not(:disabled), .file:hover { background: var(--surface-2); }
button:disabled { opacity: 0.45; cursor: default; }
.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }

button:focus-visible, .file:focus-within, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.status {
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}


.panel {
  margin-top: 12px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line);
}
.panel + .panel { margin-top: 10px; }
.panel summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  font-weight: 500;
  cursor: pointer;
}
.panel summary::-webkit-details-marker { display: none; }
.panel summary::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.panel[open] summary::before { transform: translateY(-2px) rotate(45deg); }
.panel p { margin: 10px 0; }

.keys { margin-top: 10px; border-collapse: collapse; }
.keys th, .keys td { padding: 3px 20px 3px 0; text-align: left; vertical-align: baseline; }
.keys th { font-weight: 400; color: var(--muted); }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px 2px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  font: 500 0.8125rem/1.4 Barlow, system-ui, sans-serif;
  text-align: center;
}

.tty {
  max-height: 240px;
  overflow: auto;
  margin: 10px 0 0;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
}

/* The controller: one body under the picture, drawn after the original
   pad. It appears on a touchscreen. */
.controller { display: none; }
.exit-full { display: none; }

.touch .controller {
  --u: clamp(2.5rem, 12vw, 3.25rem); /* a face button's size */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "left right" "mid mid";
  margin-top: 10px;
  padding: 8px 12px 10px;
  border-radius: 30px 30px 24px 24px;
  background: var(--plastic);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 var(--plastic-deep);
}

.pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.pad-left { grid-area: left; }
.pad-right { grid-area: right; }
.pad-mid {
  grid-area: mid;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  padding: 4px 0 0;
}
.shoulders { display: flex; gap: 8px; }
.pad-left .shoulders { align-self: flex-start; }
.pad-right .shoulders { align-self: flex-end; }

.shoulder, .small, .face-button {
  display: grid;
  place-items: center;
  border: 1px solid var(--key-edge);
  background: var(--key);
  color: var(--legend);
  box-shadow: 0 2px 0 var(--key-edge);
}
.shoulder {
  width: calc(var(--u) * 1.35);
  height: calc(var(--u) * 0.68);
  border-radius: 12px 12px 7px 7px;
  font-size: 0.875rem;
  font-weight: 600;
}
.small {
  height: calc(var(--u) * 0.5);
  padding: 0 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.shoulder.on, .small.on, .face-button.on {
  background: var(--key-on);
  box-shadow: none;
  transform: translateY(2px);
}

/* The dishes the D-pad and the face buttons sit in. */
.dish {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--plastic-deep), var(--plastic) 74%);
}

.dpad {
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  overflow: visible;
}
.dpad path {
  fill: var(--key);
  stroke: var(--key-edge);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 0 var(--key-edge));
}
.dpad path.on {
  fill: var(--key-on);
  filter: none;
  transform: translateY(1.5px);
}
.dpad .pivot { fill: var(--plastic-deep); }

.face {
  grid-template-columns: repeat(3, var(--u));
  grid-template-rows: repeat(3, var(--u));
  grid-template-areas: ". triangle ." "square . circle" ". cross .";
}
.face-button { width: var(--u); height: var(--u); border-radius: 50%; }
.face-button svg {
  width: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.face-button.triangle { grid-area: triangle; color: var(--triangle); }
.face-button.circle { grid-area: circle; color: var(--circle); }
.face-button.cross { grid-area: cross; color: var(--cross); }
.face-button.square { grid-area: square; color: var(--square); }
.face-button.on { background: color-mix(in srgb, currentColor 24%, var(--key)); }

/* Leaving fullscreen, on a touchscreen, where there is no Escape key. */
.exit-full {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.exit-full svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.touch .stage.full .exit-full { display: grid; place-items: center; }

/* Fullscreen, or as close as the browser allows: the stage covers the
   viewport, clear of notches and the home indicator. */
.stage.full {
  --pad-x: calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 24px);
  --pad-y: calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 24px);
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) calc(env(safe-area-inset-right, 0px) + 12px)
    calc(env(safe-area-inset-bottom, 0px) + 12px) calc(env(safe-area-inset-left, 0px) + 12px);
  background: var(--bg);
}
.stage.full .screen {
  width: min(calc(100vw - var(--pad-x)), calc((100dvh - var(--pad-y)) * 4 / 3));
  border-radius: 0;
}
body.has-full { overflow: hidden; }

/* Portrait fullscreen on a touchscreen: the picture at the top, the
   controller at the bottom, within reach. */
.touch .stage.full {
  place-content: stretch;
  grid-template-rows: auto minmax(0, 1fr);
}
.touch .stage.full .screen { width: 100%; }
.touch .stage.full .controller { align-self: end; }

/* Landscape on a short screen, as a phone turned sideways, fullscreen or
   not: the controller splits around the picture, with Select and Start
   under it. */
@media (orientation: landscape) and (max-height: 560px) {
  .touch .stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "left screen right" "left mid right";
    gap: 6px 12px;
    align-items: center;
    --u: min(3.25rem, 12dvh);
  }
  .touch .controller {
    display: contents;
  }
  .touch .screen {
    grid-area: screen;
    width: min(100%, calc((100dvh - 150px) * 4 / 3));
    margin: 0 auto;
  }
  .touch .pad {
    align-self: stretch;
    padding: 10px;
    border-radius: 26px;
    background: var(--plastic);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 var(--plastic-deep);
  }
  .touch .pad .dish { margin: auto 0; }
  .touch .pad-mid {
    padding: 2px 0 4px;
    background: none;
    box-shadow: none;
  }
  .touch .stage.full {
    place-content: stretch;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .touch .stage.full .screen {
    width: min(100%, calc((100dvh - var(--pad-y) - 40px) * 4 / 3));
  }
}

/* Narrow screens, and short ones such as a phone turned sideways. */
@media (max-width: 759px), (orientation: landscape) and (max-height: 560px) {
  .bar button { padding: 6px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .shoulder.on, .small.on, .face-button.on, .dpad path.on { transform: none; }
  .panel summary::before { transition: none; }
}

/* The player (player.html), framed in an example's page, which sizes the
   frame to what is here, so nothing may scroll. */
#player-page { padding: 8px; overflow: hidden; }
html:has(#player-page) { overflow: hidden; }

/* The playground (index.html): the sidebar on the left, the main panel
   beside it, the emulator on the right with the compiler's and the
   emulator's output under it, filling the window, with the divider before
   the emulator dragged to share the width. */
body.playground {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
}
body.resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.resizing-rows { cursor: row-resize; user-select: none; -webkit-user-select: none; }

.pg-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.pg-top h1 { margin-right: 14px; font-size: 1.625rem; }
.pg-hot { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; color: var(--muted); cursor: pointer; }
.pg-hot:has(:checked) { color: var(--ink); }
.pg-hint { margin-left: 6px; font-size: 0.875rem; }
.pg-hint kbd { min-width: 0; font-size: 0.75rem; }
/* The links to the rest of the site, the GitHub mark and the theme
   switch, drawn as one row of quiet buttons. */
.pg-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pg-links a {
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}
.pg-links a:hover, .pg-links a:focus-visible { background: var(--surface-2); color: var(--ink); }
.pg-links .pg-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; }
.pg-links a.pg-icon { color: var(--ink); }
.pg-links .pg-icon svg { width: 20px; height: 20px; }
#theme { margin-left: 4px; border: 0; background: none; color: var(--muted); }
#theme:hover:not(:disabled), #theme:focus-visible { background: var(--surface-2); color: var(--ink); }
button.primary { border-color: var(--accent); background: var(--accent); color: var(--bg); }
button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }

.pg {
  --side: min(520px, 42vw);
  --bar: 272px;
  max-width: none;
  margin: 0;
  gap: 0;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--bar) minmax(0, 1fr) 7px var(--side);
}

.pg-code { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--code-bg); }
.pg-code.dropping { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* The tabs over the main panel, one for everything opened from the
   sidebar, each closed with its cross; the panes are laid over one another
   with the open one shown. */
.tabs.pg-files { flex: none; background: var(--surface); }
.pg-files [role="tablist"] { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pg-files [role="tablist"]::-webkit-scrollbar { display: none; }
.pg-files .status { flex: none; font-size: 0.8125rem; }
.file-tab { display: inline-flex; flex: 0 1 auto; align-items: center; align-self: stretch; min-width: 84px; }
.file-tab [role="tab"] { min-width: 0; max-width: 180px; padding-right: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tab-close {
  align-self: center;
  min-height: 0;
  margin-right: 6px;
  padding: 0 4px 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: transparent;
  font-size: 1rem;
  line-height: 1;
}
.file-tab:hover .tab-close, .file-tab:focus-within .tab-close, .file-tab [aria-selected="true"] + .tab-close { color: var(--muted); }
.tab-close:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.pg-editors { position: relative; flex: 1; min-height: 0; }
.pg-editors .editor { position: absolute; inset: 0; }
.pg-editors .editor[hidden] { display: none; }
.pg-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; }
.pg-empty[hidden] { display: none; }

/* A small menu of actions, under the button that opened it. */
.pg-popup {
  position: fixed;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font-size: 0.875rem;
}
.pg-popup button, .pg-projects button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  text-align: left;
  font-weight: 400;
}
.pg-popup button:hover:not(:disabled), .pg-projects button:hover { background: var(--surface-2); }

/* The project menu in the top bar: the open project's name, opening the
   list of those kept in this browser and what can be done with them. */
.pg-project { position: relative; }
.pg-project summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  max-width: min(320px, 40vw);
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.pg-project summary::-webkit-details-marker { display: none; }
.pg-project summary:hover { background: var(--surface-2); }
.pg-project summary > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pg-project summary::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: -3px 1px 0;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
.pg-project[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.pg-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: min(400px, calc(100vw - 32px));
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.pg-projects {
  max-height: 40vh;
  margin: 0;
  padding: 4px;
  overflow: auto;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.pg-projects button[aria-current] { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 500; }
.pg-projects .muted { flex: none; font-size: 0.8125rem; font-weight: 400; }
.pg-project-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pg-menu-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
.pg-menu-actions button { min-height: 0; padding: 4px 10px; font-size: 0.875rem; }
.pg-menu-actions .danger { margin-left: auto; color: var(--error); }

/* The sidebar: the scenes above, the files below, with the divider between
   them dragged to share the height. */
.pg-bar { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.pg-bar.dropping { outline: 2px dashed var(--accent); outline-offset: -4px; }
.side-sect { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#side-scenes { flex: none; height: var(--scenes, 28%); }
#side-files { flex: 1; }
.side-head { display: flex; flex: none; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.side-head h2 { display: flex; flex: 1; align-items: center; gap: 7px; margin: 0; color: var(--muted); font: 600 0.75rem/1.4 Barlow, system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.side-head svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-add { display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; }
.side-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.side-list { flex: 1; min-height: 0; margin: 0; padding: 4px 0; overflow-x: hidden; overflow-y: auto; list-style: none; font-size: 0.875rem; }
.side-split { flex: none; height: 7px; border-top: 3px solid var(--surface); border-bottom: 3px solid var(--surface); background: var(--line); cursor: row-resize; touch-action: none; }
.side-split:hover, .side-split:focus-visible, .resizing-rows .side-split { background: var(--accent); outline: none; }
.side-foot { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); }
/* The rows of both lists, laid out as a code editor's explorer lays its
   tree: a guide line for each level, a chevron on a folder, the icon of
   the file's kind, its name, and what is known of it at the right. */
.files-group { padding: 8px 12px 2px; color: var(--muted); font-size: 0.75rem; }
.files-row { display: flex; align-items: center; height: 24px; padding: 0 10px 0 6px; font-size: 0.8125rem; cursor: default; user-select: none; -webkit-user-select: none; }
.files-row:hover { background: var(--surface-2); }
.files-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.files-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.files-row.drop-target { background: color-mix(in srgb, var(--accent) 22%, transparent); outline: 1px solid var(--accent); outline-offset: -1px; }
.tree-guide { flex: none; align-self: stretch; width: 16px; background: linear-gradient(var(--line), var(--line)) 7px 0 / 1px 100% no-repeat; }
.tree-arrow { display: grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--muted); }
.tree-arrow svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.12s; }
.files-row[aria-expanded="true"] .tree-arrow svg { transform: rotate(90deg); }
.tree-arrow.none { visibility: hidden; }
.tree-icon { display: grid; flex: none; place-items: center; width: 16px; height: 16px; margin: 0 6px 0 2px; }
.tree-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.icon-folder, .icon-open, .icon-data, .icon-json { color: var(--muted); }
.icon-go { color: var(--t-type); }
.icon-image { color: var(--t-pkg); }
.icon-texture { color: var(--t-str); }
.icon-model { color: var(--t-fn); }
.icon-sound { color: var(--t-num); }
.icon-music, .icon-archive { color: var(--t-const); }
.icon-scene { color: var(--t-kw); }
.files-name { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 64px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.files-row.folder .files-name { font-weight: 500; }
.files-meta { flex: 1 1 0; min-width: 0; margin-left: auto; padding-left: 8px; overflow: hidden; font-size: 0.6875rem; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
#scene-list .files-row { padding-left: 14px; }
@media (prefers-reduced-motion: reduce) { .tree-arrow svg { transition: none; } }
.files-status { margin: 0; font-size: 0.8125rem; overflow-wrap: anywhere; }

/* Video memory: the map drawn small under the files, opening large over
   the page. */
#side-vram { flex: none; }
.vram-thumb { display: block; width: 100%; min-height: 0; margin: 0; padding: 8px 12px 10px; border: 0; border-radius: 0; background: none; }
.vram-thumb:hover:not(:disabled) { background: var(--surface-2); }
.vram-thumb canvas { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; image-rendering: pixelated; }
.vram-thumb:hover canvas, .vram-thumb:focus-visible canvas { border-color: var(--accent); }
.vram-dialog {
  width: min(1072px, calc(100vw - 32px));
  max-width: none;
  padding: 14px 20px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}
.vram-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.vram-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vram-head h2 { flex: 1; margin: 0; font: 600 1.125rem/1.3 Barlow, system-ui, sans-serif; }
.vram-head button { display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; background: none; color: var(--muted); }
.vram-head button:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.vram-head svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#vram-canvas { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--screen); image-rendering: pixelated; touch-action: none; }
/* Two lines are kept for the text, so the dialog holds still as it changes. */
.vram-dialog p { min-height: 2.8em; margin: 10px 0 0; font-size: 0.875rem; line-height: 1.4; }

/* The viewer: a file with something to show, or video memory. */
.view { position: absolute; inset: 0; padding: 10px 14px 16px; overflow: auto; background: var(--surface); }
.view[hidden] { display: none; }
.view .pg-preview-head { font-size: 0.9375rem; }
.view p { margin: 8px 0 0; font-size: 0.875rem; }

/* The preview of a file, or of video memory. */
.pg-preview-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; }
.pg-preview-head select { padding: 2px 4px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 400; }
.pg-preview-head select[hidden], .pg-preview-head button[hidden] { display: none; }
#preview-canvas {
  height: auto;
  display: block;
  max-width: 100%;
  border: 1px solid var(--line);
  background: var(--screen);
  image-rendering: pixelated;
  touch-action: none;
}
#preview-canvas.tim { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; }
#preview-canvas.tmd { width: min(100%, 320px); cursor: grab; }

/* A source's options: the flags of its go:generate line. */
.pg-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; }
.pg-options[hidden] { display: none; }
.preview-table { margin: 8px 0 0; border-collapse: collapse; font-size: 0.8125rem; }
.preview-table th, .preview-table td { padding: 2px 12px 2px 0; text-align: left; border-bottom: 1px solid var(--line); }
.preview-table th { font-weight: 600; color: var(--muted); }
.preview-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.preview-table[hidden] { display: none; }
.pg-options label { display: inline-flex; align-items: center; gap: 6px; }
.pg-options input[type="text"], .pg-options input[type="number"], .pg-options select {
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.pg-options input[type="number"] { width: 6em; }
.pg-options .pg-line { flex-basis: 100%; overflow-wrap: anywhere; color: var(--muted); font-size: 0.75rem; }
#preview-canvas[hidden] { display: none; }

/* The Scene tab: the picture at the console's size, doubled where there is
   room, with what is picked under it and the camera and lights folded
   away below. */
.scene { position: absolute; inset: 0; overflow: auto; padding: 10px 12px 16px; background: var(--surface); }
.scene[hidden] { display: none; }
.scene-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.scene-bar select { padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; }
.scene-main { display: grid; grid-template-columns: minmax(160px, 200px) minmax(0, 1fr); gap: 12px; }
.scene-outline { margin: 0; padding: 0; overflow: auto; max-height: 480px; list-style: none; border: 1px solid var(--line); border-radius: 6px; font-size: 0.8125rem; }
.outline-group { padding: 8px 10px 2px; color: var(--muted); font-size: 0.75rem; }
.outline-row { display: flex; align-items: baseline; gap: 6px; padding: 3px 10px; cursor: default; }
.outline-row:hover { background: var(--surface-2); }
.outline-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.outline-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.outline-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.outline-meta { margin-left: auto; font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.scene-view { min-width: 0; }
.scene-view.live #scene-canvas { border-color: var(--triangle); box-shadow: 0 0 0 2px color-mix(in srgb, var(--triangle) 35%, transparent); }
.scene-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
#scene-search { padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--code-bg); color: var(--ink); font: inherit; font-size: 0.8125rem; }
.scene-modes { display: inline-flex; gap: 2px; }
.scene-modes button[aria-pressed="true"], #scene-snap[aria-pressed="true"], #scene-console[aria-pressed="true"], .scene-presets button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.outline-warn { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #e040c0; color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 14px; text-align: center; }
.outline-eye { flex: none; margin-left: 4px; padding: 0 2px; border: 0; background: none; color: var(--muted); font-size: 0.75rem; line-height: 1; cursor: pointer; }
.outline-eye[aria-pressed="false"] { color: var(--line-strong); }
.outline-row.hidden-row .outline-name { color: var(--muted); text-decoration: line-through; }
.scene-fov { align-self: center; font-size: 0.8125rem; }
.scene-sep { width: 1px; height: 20px; background: var(--line); }
.scene-fields .scrub { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.scene-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.scene-tabs { margin-top: 12px; padding: 0; }
.scene-map-scroll { max-height: 440px; overflow: auto; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 0.8125rem; font-weight: 500; }
.live-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.live-pill.on { color: var(--ink); border-color: var(--triangle); }
.live-pill.on::before { background: var(--triangle); }
.live-pill[hidden] { display: none; }
#scene-canvas {
  display: block;
  width: min(100%, 640px);
  height: auto;
  border: 1px solid var(--line);
  background: var(--screen);
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}
#scene-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#scene-status { margin: 8px 0; font-size: 0.875rem; }
.scene-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; font-size: 0.875rem; }
.scene-fields label { display: inline-flex; flex-direction: column; gap: 2px; }
.scene-fields label > span { color: var(--muted); font-size: 0.75rem; }
.scene-fields input[type="text"], .scene-fields input[type="number"], .scene-fields select {
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.scene-fields input[type="number"] { width: 5.5em; }
.scene-fields input[type="text"] { width: 9em; }
.scene-fields input[type="color"] { width: 3em; height: 1.9em; padding: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: none; }
.scene-fields fieldset { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 4px 8px 6px; border: 1px solid var(--line); border-radius: 6px; }
.scene-fields legend { padding: 0 4px; color: var(--muted); font-size: 0.75rem; }
.scene-panel { padding-top: 10px; }
.scene-panel[hidden] { display: none; }
.scene-panel p { margin: 8px 0; font-size: 0.875rem; }
@media (max-width: 899px) {
  .scene-main { grid-template-columns: 1fr; }
  .scene-outline { max-height: 160px; }
}
.scene-tiles {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px;
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}
.scene-tiles[hidden] { display: none; }

.pg-split {
  cursor: col-resize;
  touch-action: none;
  background: var(--line);
  border-left: 3px solid var(--bg);
  border-right: 3px solid var(--bg);
}
.pg-split:hover, .pg-split:focus-visible, .resizing .pg-split { background: var(--accent); outline: none; }

.pg-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px 12px 10px;
}
.pg-side .bar { margin-top: 0; }
.pg-side .screen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pg-out { flex: 1; min-height: 0; }
.out {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

/* The output's tabs, the compiler's and the emulator's, with the status
   and the emulator's log level beside them. */
.tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.tabs [role="tablist"] { display: flex; align-self: stretch; }
.tabs [role="tab"] {
  position: relative;
  min-height: 0;
  padding: 7px 10px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-weight: 600;
}
.tabs [role="tab"]:hover:not(:disabled) { background: none; color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.tabs [role="tab"].unread::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.tabs [role="tab"].unread.has-error::after { background: var(--error); }
.tabs .status { min-width: 0; margin-left: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tabs .level { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); }
.tabs .level[hidden], .tabs [hidden] { display: none; }
.tabs select {
  padding: 2px 4px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.small-button { min-height: 0; padding: 2px 10px; font-size: 0.8125rem; }
.log[hidden] { display: none; }
.log .lv-ERROR { color: var(--error); font-weight: 600; }
.log .lv-attrs { color: var(--muted); font-weight: 400; }
.log .lv-WARN { color: var(--t-num); }
.log .lv-INFO { color: var(--t-type); }
.log .lv-DEBUG, .log .lv-REPEAT { color: var(--muted); }
.log .lv-TRACE { color: var(--gutter); }
.log {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log a { color: var(--error); }

/* The editor (editor.js). The highlighted copy and the textarea over it
   must set their text identically: the same font, line height, padding
   and tab size, and no wrapping. */
.editor { position: relative; overflow: hidden; }
.ed-scroll { position: absolute; inset: 0; overflow: auto; }
.ed-sizer { display: flex; width: max-content; min-width: 100%; min-height: 100%; }
.ed-gutter, .ed-hl, .editor textarea {
  margin: 0;
  font: 13px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-ligatures: none;
  tab-size: 4;
  -moz-tab-size: 4;
  white-space: pre;
}
.ed-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 3.5em;
  padding: 12px 12px 12px 8px;
  text-align: right;
  color: var(--gutter);
  background: var(--code-bg);
  user-select: none;
  -webkit-user-select: none;
}
.ed-gutter .err {
  display: inline-block;
  margin-right: -4px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--error);
  color: var(--code-bg);
}
.ed-code { position: relative; flex: 1; }
.ed-hl, .editor textarea { padding: 12px 32px 12px 6px; }
.ed-hl { min-height: 100%; color: var(--ink); }
.editor textarea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
}
.editor textarea::selection { background: var(--sel); color: transparent; }

.t-kw { color: var(--t-kw); }
.t-type { color: var(--t-type); }
.t-fn { color: var(--t-fn); }
.t-builtin { color: var(--t-builtin); }
.t-str { color: var(--t-str); }
.t-num { color: var(--t-num); }
.t-const { color: var(--t-const); }
.t-pkg { color: var(--t-pkg); }
.t-com { color: var(--t-com); font-style: italic; }

.ed-complete {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ed-complete[hidden] { display: none; }
.ed-complete ul { max-height: 200px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; }
.ed-complete li { display: flex; gap: 8px; align-items: center; padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.ed-complete li[aria-selected="true"] { background: var(--sel); }
.ed-kind {
  flex: none;
  width: 1.4em;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--code-bg);
  background: var(--muted);
}
.k-func { background: var(--t-fn); }
.k-type { background: var(--t-type); }
.k-const, .k-var { background: var(--t-const); }
.k-field { background: var(--t-pkg); }
/* The reference for the word under the pointer, after a pause. */
.ed-hover {
  position: absolute;
  z-index: 5;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: none;
}
.ed-hover[hidden] { display: none; }
.ed-hover p { max-height: 200px; overflow: hidden; }
.ed-hover p[hidden] { display: none; }
.ed-doc { max-height: 160px; overflow-y: auto; padding: 8px 10px; border-top: 1px solid var(--line); }
.ed-doc code, .ed-hover code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.ed-doc p, .ed-hover p {
  margin: 6px 0 0;
  font: 400 0.875rem/1.4 Barlow, system-ui, sans-serif;
  color: var(--muted);
  white-space: pre-line;
}

/* On a narrow screen the sides stack, the emulator first, and the page
   scrolls. */
@media (max-width: 899px) {
  body.playground { display: block; height: auto; overflow: visible; }
  .pg-top h1 { width: 100%; font-size: 1.5rem; }
  .pg-hint { display: none; }
  .pg-links { margin-left: 0; width: 100%; }
  .pg-links a:first-child { margin-left: -10px; }
  .pg { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 24px; }
  .pg-split { display: none; }
  .pg-side { display: contents; }
  .pg-side .stage { order: -2; }
  .pg-side .bar { order: -1; }
  .pg-bar { flex-direction: row; max-height: 32vh; border: 1px solid var(--line); border-radius: 6px; }
  .side-sect, #side-scenes, #side-vram { flex: 1; height: auto; }
  #side-scenes, #side-files { border-right: 1px solid var(--line); }
  .side-split { display: none; }
  .pg-code { height: 65vh; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .pg-out { flex: none; height: 340px; }
  .tabs { flex-wrap: wrap; }
  .tabs .status { order: 3; flex-basis: 100%; margin: 0 0 6px 10px; }
}

/* On a phone the sidebar's sections are too narrow side by side, so they
   stack, each as wide as the page, the lists scrolling within a height of
   their own, and the video memory is left out. */
@media (max-width: 599px) {
  .pg-bar { flex-direction: column; max-height: none; }
  .side-sect, #side-scenes { flex: none; }
  #side-vram { display: none; }
  #side-scenes { border-right: 0; border-bottom: 1px solid var(--line); }
  #side-files { border-right: 0; }
  #scene-list { max-height: 128px; }
  #file-tree { max-height: 40vh; }
}