/* Pixel-art dashboard, from "Dashboard Biomes" design handoff.
   One class per biome on .biome-dash sets the palette; layout below is shared. */

.biome-dash {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  font-family: "VT323", monospace;
  image-rendering: pixelated;
  color: var(--ink);
}
.biome-dash [x-cloak] { display: none !important; }
.biome-dash a { text-decoration: none; }

/* ---------- palettes ---------- */

.biome-desert {
  --scene: #241a3a url("/static/biomes/desert.jpg") center / cover no-repeat;
  --edge: #0a0710;
  --panel-bg: #241a3af2;
  --panel-shadow: #00000073;
  --accent: #e8913f;
  --ink: #f4e9d0;
  --muted: #c9b48f;
  --today-hi: #ffffff59;
  --today-lo: #0000003d;
  --today-label: #3a2410;
  --today-num: #241205;
  --today-sub: #5a3410;
  --today-ok: #2f4a12;
  --cta-bg: #241a3a;
  --cta-border: #0a0710;
  --cta-hi: #ffffff21;
  --cta-lo: #00000059;
  --cta-ink: #f4e9d0;
  --tile-bg: #1d1526;
  --nav-hi: #ffffff14;
  --tile-lo: #00000077;
  --tile-hi: #ffffff14;
  --icon-level: #e8913f;
  --icon-streak: #ff6a3f;
  --icon-days: #6aa0e8;
  --icon-xp: #8fd06a;
  --grid-bg: #1d1526;
  --grid-line: #00000040;
  --cell-1: #2f5d2a;
  --cell-2: #4f8a35;
  --cell-3: #6fb845;
  --cell-4: #8fd06a;
  --badge-bg: #241a3ae6;
  --badge-hi: #ffffff1f;
  --fab-bg: #7a7a7a;
  --fab-border: #0a0710;
  --fab-hi: #ffffff4d;
  --fab-lo: #00000066;
  --fab-ink: #1a1a1a;
  --field-bg: #171021;
  --field-hi: #00000059;
}

.biome-nether {
  /* no image in the handoff for Nether: dithered lava gradient from the design */
  --scene: repeating-conic-gradient(#00000018 0 25%, #ffffff10 0 50%) 0 0 / 3px 3px,
    linear-gradient(
      to bottom,
      #150404 0 20%, #280808 20% 38%, #3d0c0a 38% 54%, #5a1410 54% 68%,
      #8a2313 68% 80%, #c9451a 80% 90%, #ff7a22 90% 100%
    );
  --edge: #080202;
  --panel-bg: #2a0f0ff2;
  --panel-shadow: #00000080;
  --accent: #ff6a1f;
  --ink: #ffd9c2;
  --muted: #d99a86;
  --today-hi: #ffffff59;
  --today-lo: #0000003d;
  --today-label: #3a1206;
  --today-num: #2a0a04;
  --today-sub: #5a1a08;
  --today-ok: #1f4a10;
  --cta-bg: #1a0808;
  --cta-border: #080202;
  --cta-hi: #ffffff17;
  --cta-lo: #00000059;
  --cta-ink: #ffd9c2;
  --tile-bg: #1a0808;
  --nav-hi: #ffffff12;
  --tile-lo: #00000088;
  --tile-hi: #ffffff12;
  --icon-level: #ff6a1f;
  --icon-streak: #ffb02e;
  --icon-days: #c9451a;
  --icon-xp: #8fd06a;
  --grid-bg: #1a0808;
  --grid-line: #00000047;
  --cell-1: #7a2a10;
  --cell-2: #c9451a;
  --cell-3: #ff7a1f;
  --cell-4: #ffb02e;
  --badge-bg: #2a0f0fe6;
  --badge-hi: #ffffff17;
  --fab-bg: #7a7a7a;
  --fab-border: #080202;
  --fab-hi: #ffffff4d;
  --fab-lo: #00000066;
  --fab-ink: #1a1a1a;
  --field-bg: #120404;
  --field-hi: #00000066;
}

.biome-tundra {
  --scene: #cfe6f5 url("/static/biomes/tundra.jpg") center / cover no-repeat;
  --edge: #7fa6c2;
  --panel-bg: #e8f2f9f2;
  --panel-shadow: #0000001c;
  --accent: #2f7fbf;
  --ink: #23384a;
  --muted: #5f7d92;
  --today-hi: #ffffff40;
  --today-lo: #00000040;
  --today-label: #cfe6f5;
  --today-num: #fbfdff;
  --today-sub: #cfe6f5;
  --today-ok: #bfe6cc;
  --cta-bg: #fbfdff;
  --cta-border: #1a4f78;
  --cta-hi: #ffffff;
  --cta-lo: #b9d0e0;
  --cta-ink: #1a4f78;
  --tile-bg: #dcebf4;
  --nav-hi: #ffffffb3;
  --tile-lo: #0000001f;
  --tile-hi: #ffffffb3;
  --icon-level: #4a9fd6;
  --icon-streak: #e88a3f;
  --icon-days: #4a9fd6;
  --icon-xp: #5fbf6f;
  --grid-bg: #cfe0ec;
  --grid-line: #00000017;
  --cell-1: #a9d0e6;
  --cell-2: #6fb0d6;
  --cell-3: #3f8fc6;
  --cell-4: #2f7fbf;
  --badge-bg: #e8f2f9e6;
  --badge-hi: #ffffffd9;
  --fab-bg: #8a8a8a;
  --fab-border: #20323f;
  --fab-hi: #ffffff66;
  --fab-lo: #0000004d;
  --fab-ink: #20323f;
  --field-bg: #fbfdff;
  --field-hi: #dfeaf2;
}

.biome-cherry {
  --scene: #e7cdec url("/static/biomes/cherry.jpg") center / cover no-repeat;
  --edge: #d29ec0;
  --panel-bg: #f7e2eef2;
  --panel-shadow: #00000017;
  --accent: #d94f92;
  --ink: #5a2942;
  --muted: #9a6a82;
  --today-hi: #ffffff59;
  --today-lo: #0000002e;
  --today-label: #fce4f0;
  --today-num: #fff4f9;
  --today-sub: #fce4f0;
  --today-ok: #eafbe4;
  --cta-bg: #fff4f9;
  --cta-border: #a03068;
  --cta-hi: #ffffff;
  --cta-lo: #e6b8ce;
  --cta-ink: #a03068;
  --tile-bg: #f4d8e8;
  --nav-hi: #ffffffb3;
  --tile-lo: #00000017;
  --tile-hi: #ffffffb3;
  --icon-level: #e86fa8;
  --icon-streak: #e88a3f;
  --icon-days: #c8a0d8;
  --icon-xp: #7fbf5f;
  --grid-bg: #f0d2e2;
  --grid-line: #00000012;
  --cell-1: #f2b8d4;
  --cell-2: #e88ab8;
  --cell-3: #d94f92;
  --cell-4: #c23578;
  --badge-bg: #f7e2eee6;
  --badge-hi: #ffffffd9;
  --fab-bg: #8a8a8a;
  --fab-border: #5a2942;
  --fab-hi: #ffffff66;
  --fab-lo: #0000004d;
  --fab-ink: #3a1a2a;
  --field-bg: #fff4f9;
  --field-hi: #f2dce8;
}

/* ---------- scene ---------- */

.biome-scene {
  position: absolute;
  inset: 0;
  background: var(--scene);
  image-rendering: pixelated;
}

.biome-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 20;
  padding: 9px 17px;
  background: var(--badge-bg);
  border: 3px solid var(--edge);
  box-shadow: inset 3px 3px 0 var(--badge-hi);
  font: 700 17px "Silkscreen", monospace;
  color: var(--accent);
  text-transform: uppercase;
}

.biome-fab {
  position: fixed;
  bottom: 28px;
  right: 30px;
  z-index: 20;
  width: 78px;
  height: 78px;
  background: var(--fab-bg);
  border: 5px solid var(--fab-border);
  box-shadow: inset 5px 5px 0 var(--fab-hi), inset -6px -6px 0 var(--fab-lo);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 33px "Silkscreen", monospace;
  color: var(--fab-ink);
}

/* ---------- side panel ---------- */

:root {
  --bp-width: 336px; /* layout width; visual ≈ 420px with zoom 1.25 */
  --bp-width-visual: 420px;
  --bp-width-collapsed: 52px; /* layout; visual ≈ 65px */
  --bp-width-collapsed-visual: 65px;
}

/* Avoid FOUC: no transitions until pixel.js marks the rail hydrated. */
html:not(.bp-hydrated) .bp,
html:not(.bp-hydrated) .bp-today,
html:not(.bp-hydrated) .bp-activity,
html:not(.bp-hydrated) .bp-chevron,
html:not(.bp-hydrated) .px-scrim {
  transition: none !important;
}

.bp {
  position: relative;
  z-index: 3;
  width: var(--bp-width);
  min-height: calc(100dvh / 1.25);
  height: calc(100dvh / 1.25);
  box-sizing: border-box;
  padding: 20px;
  background: var(--panel-bg);
  border-right: 4px solid var(--edge);
  box-shadow: inset -3px 0 0 var(--panel-shadow);
  display: flex;
  flex-direction: column;
  gap: 13px;
  zoom: 1.25;
  overflow-x: hidden;
  overflow-y: auto;
  transition:
    width 0.22s ease,
    padding 0.22s ease,
    gap 0.22s ease;
}
html.bp-collapsed .bp {
  width: var(--bp-width-collapsed);
  padding: 12px 8px;
  align-items: center;
  gap: 10px;
}

.bp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
}
html.bp-collapsed .bp-head {
  justify-content: center;
  width: 100%;
}
.bp-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font: 700 15px "Silkscreen", monospace;
  color: var(--ink);
}
html.bp-collapsed .bp-brand { display: none; }
.bp-brand-cube {
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--accent);
  box-shadow: 3px 3px 0 var(--edge);
}
.bp-brand-text {
  overflow: hidden;
  white-space: nowrap;
}

.bp-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  background: var(--tile-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--nav-hi);
  color: var(--ink);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.bp-toggle:hover {
  background: color-mix(in srgb, var(--accent) 28%, var(--tile-bg));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--edge));
}
.bp-toggle:active { transform: translate(1px, 1px); }
.bp-chevron {
  display: block;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.22s ease;
}
html.bp-collapsed .bp-chevron {
  margin-left: 0;
  margin-right: 2px;
  transform: rotate(-135deg);
}

.bp-today {
  padding: 14px;
  background: var(--accent);
  border: 3px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--today-hi), inset -3px -3px 0 var(--today-lo);
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  max-height: 220px;
  opacity: 1;
  transition:
    opacity 0.2s ease,
    max-height 0.22s ease,
    padding 0.22s ease,
    margin 0.22s ease,
    border-width 0.22s ease;
}
html.bp-collapsed .bp-today {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border-width: 0;
  pointer-events: none;
}
.bp-today-label { font: 700 10px "Silkscreen", monospace; color: var(--today-label); }
.bp-today-row { display: flex; align-items: baseline; gap: 9px; }
.bp-today-num { font: 400 44px "VT323", monospace; line-height: 0.7; color: var(--today-num); }
.bp-today-sub { font: 400 21px "VT323", monospace; color: var(--today-sub); }
.bp-today-ok { font: 400 18px "VT323", monospace; color: var(--today-ok); }
.bp-cta {
  margin-top: 2px;
  padding: 11px;
  text-align: center;
  background: var(--cta-bg);
  border: 3px solid var(--cta-border);
  box-shadow: inset 2px 2px 0 var(--cta-hi), inset -3px -3px 0 var(--cta-lo);
  font: 700 13px "Silkscreen", monospace;
  color: var(--cta-ink);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.bp-cta:hover {
  background: var(--accent);
  color: var(--today-num);
  box-shadow: inset 2px 2px 0 var(--today-hi), inset -3px -3px 0 var(--today-lo);
  transform: translateY(-1px);
}
.bp-cta:active { transform: translate(1px, 1px); }

.bp-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  flex: none;
}
.bp-nav-foot {
  margin-top: auto;
}
.bp-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: var(--tile-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--nav-hi);
  font: 400 19px "VT323", monospace;
  color: var(--muted);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    padding 0.18s ease;
}
html.bp-collapsed .bp-nav a {
  justify-content: center;
  padding: 8px;
  gap: 0;
  transform: none;
}
.bp-nav a:hover {
  background: color-mix(in srgb, var(--accent) 28%, var(--tile-bg));
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--edge));
  box-shadow: inset 2px 2px 0 color-mix(in srgb, var(--accent) 35%, var(--nav-hi)),
              0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateX(3px);
}
html.bp-collapsed .bp-nav a:hover { transform: none; }
.bp-nav a:hover .bp-nav-icon.sets {
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 5px 5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 7px 0 / 5px 5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 7px / 5px 5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 7px 7px / 5px 5px no-repeat;
}
.bp-nav a:hover .bp-nav-icon.settings {
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.bp-nav a:hover .bp-nav-icon.logout {
  border-color: var(--accent);
  background:
    linear-gradient(var(--accent), var(--accent)) 2px 5px / 5px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 6px 3px / 2px 6px no-repeat;
}
.bp-nav a:active { transform: translateX(1px); }
html.bp-collapsed .bp-nav a:active { transform: none; }

.bp-nav-label {
  overflow: hidden;
  white-space: nowrap;
}
html.bp-collapsed .bp-nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bp-nav-icon {
  flex: none;
  width: 12px;
  height: 12px;
  transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.bp-nav-icon.sets {
  background:
    linear-gradient(var(--muted), var(--muted)) 0 0 / 5px 5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) 7px 0 / 5px 5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) 0 7px / 5px 5px no-repeat,
    linear-gradient(var(--muted), var(--muted)) 7px 7px / 5px 5px no-repeat;
}
.bp-nav-icon.settings {
  border-radius: 50%;
  background: var(--muted);
}
.bp-nav-icon.logout {
  box-sizing: border-box;
  border: 2px solid var(--muted);
  background:
    linear-gradient(var(--muted), var(--muted)) 2px 5px / 5px 2px no-repeat,
    linear-gradient(var(--muted), var(--muted)) 6px 3px / 2px 6px no-repeat;
}

.bp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  width: 100%;
  flex: none;
}
html.bp-collapsed .bp-stats {
  grid-template-columns: 1fr;
  gap: 6px;
}
.bp-stat {
  padding: 10px;
  background: var(--tile-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 3px 3px 0 var(--tile-lo), inset -2px -2px 0 var(--tile-hi);
}
html.bp-collapsed .bp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
}
.bp-stat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font: 700 9px "Silkscreen", monospace;
  color: var(--muted);
}
html.bp-collapsed .bp-stat-head {
  margin-bottom: 0;
  justify-content: center;
}
.bp-stat-label { white-space: nowrap; }
html.bp-collapsed .bp-stat-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.bp-stat-icon { width: 10px; height: 10px; flex: none; }
.bp-stat-icon.diamond { transform: rotate(45deg); }
.bp-stat-icon.level { background: var(--icon-level); }
.bp-stat-icon.streak { background: var(--icon-streak); }
.bp-stat-icon.days { background: var(--icon-days); }
.bp-stat-icon.xp { background: var(--icon-xp); }
.bp-stat-val { font: 400 28px "VT323", monospace; line-height: 0.8; color: var(--ink); }
html.bp-collapsed .bp-stat-val {
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.bp-activity {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  opacity: 1;
  max-height: 480px;
  overflow: hidden;
  transition:
    opacity 0.22s ease,
    max-height 0.28s ease,
    margin 0.22s ease;
}
html.bp-collapsed .bp-activity {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
  flex: none;
}
.bp-activity-label { font: 700 11px "Silkscreen", monospace; color: var(--muted); }

/* GitHub-style contrib: X = weeks (months labelled), Y = 7 weekdays */
.bp-contrib {
  box-sizing: border-box;
  padding: 6px 4px 8px;
  background: var(--grid-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 3px 3px 0 var(--tile-lo), inset -2px -2px 0 var(--tile-hi);
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  min-height: 0;
}
.bp-months {
  display: flex;
  align-items: flex-end;
  height: 14px;
  flex: none;
}
.bp-corner { flex: none; width: 14px; }
.bp-months-row {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end; /* clip oldest weeks with the day cols */
  overflow: hidden;
}
.bp-month {
  position: relative;
  flex: none;
  width: 11px;
  height: 14px;
}
.bp-month > span {
  position: absolute;
  left: 0;
  bottom: 0;
  font: 400 12px "VT323", monospace;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}
.bp-board {
  display: flex;
  gap: 3px;
  align-items: flex-start;
  min-width: 0;
}
.bp-dows {
  flex: none;
  width: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 400 11px "VT323", monospace;
  color: var(--muted);
  line-height: 11px;
  text-align: right;
}
.bp-dows span {
  display: block;
  width: 11px;
  height: 11px;
  overflow: hidden;
}
.bp-grid {
  display: flex;
  gap: 2px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end; /* keep recent weeks visible */
  overflow: hidden;
  height: calc(7 * 11px + 6 * 2px); /* exactly 7 day rows */
}
.bp-week {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
  width: 11px;
  height: calc(7 * 11px + 6 * 2px);
}
.bp-day {
  width: 11px;
  height: 11px;
  flex: none;
  background: color-mix(in srgb, var(--muted) 18%, var(--grid-bg));
}
.bp-day.level-0 { background: color-mix(in srgb, var(--muted) 18%, var(--grid-bg)); }
.bp-day.level-1 { background: var(--cell-1); }
.bp-day.level-2 { background: var(--cell-2); }
.bp-day.level-3 { background: var(--cell-3); }
.bp-day.level-4 { background: var(--cell-4); }
.bp-day.future { opacity: 0.25; }

/* ---------- sub-pages: nav rail + scene content ----------
   From the "Snowy Tundra App" handoff, option 3a: every screen keeps the
   side panel; the page content lives in the scene area as pixel windows. */

.biome-dash { display: flex; }

.biome-main {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.biome-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #00000042, #00000012);
  pointer-events: none;
}

/* review open/close — only the card/session content, not the scene */
#review-root.px-enter,
.biome-main.is-review > .px-win.px-enter {
  animation: px-review-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#review-root.leaving,
.biome-main.is-review > .px-win.leaving {
  animation: px-review-leave 0.32s ease forwards !important;
  pointer-events: none;
}
#review-root.px-dismissed,
.biome-main.is-review > .px-win.px-dismissed,
.px-done.px-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes px-review-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes px-review-leave {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}

/* page nav in the panel (Home / Add card / Settings / Logout) */

.bp-pagenav { display: flex; flex-direction: column; gap: 6px; }
.bp-pagenav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--tile-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--nav-hi);
  font: 400 19px "VT323", monospace;
  color: var(--muted);
}
.bp-pagenav a.active {
  background: var(--accent);
  box-shadow: inset 2px 2px 0 var(--today-hi), inset -2px -2px 0 var(--today-lo);
  font: 700 12px "Silkscreen", monospace;
  color: var(--today-num);
  text-transform: uppercase;
}
.bp-ni { width: 13px; height: 13px; flex: none; background: var(--muted); }
.bp-pagenav a.active .bp-ni { background: var(--today-num); }
.bp-ni.home { transform: rotate(45deg); }
.bp-ni.add {
  clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%,
    58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%);
}
.bp-ni.settings { border-radius: 50%; }

/* small panel tiles (session progress, tips) and footer note */

.bp-tile {
  padding: 12px;
  background: var(--tile-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 3px 3px 0 var(--tile-lo), inset -2px -2px 0 var(--tile-hi);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 400 18px "VT323", monospace;
  color: var(--muted);
}
.bp-tile-label { font: 700 9px "Silkscreen", monospace; color: var(--muted); }
.bp-tile-row { display: flex; align-items: baseline; gap: 8px; }
.bp-tile-num { font: 400 30px "VT323", monospace; line-height: 0.8; color: var(--ink); }
.bp-spacer { flex: 1; }
.bp-foot { font: 400 16px "VT323", monospace; color: var(--muted); }

/* pixel window */

.px-win {
  width: min(470px, 100%);
  box-sizing: border-box;
  padding: 20px;
  background: var(--panel-bg);
  border: 3px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--badge-hi), inset -3px -3px 0 var(--panel-shadow);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.px-win-title { font: 700 13px "Silkscreen", monospace; color: var(--ink); }
.px-help { margin: 0; font: 400 18px "VT323", monospace; color: var(--muted); }
.px-row-label { font: 400 22px "VT323", monospace; color: var(--ink); }

/* form fields */

.px-field { display: flex; flex-direction: column; gap: 5px; }
.px-label { font: 700 9px "Silkscreen", monospace; color: var(--muted); }
.biome-dash input.px-input,
.biome-dash textarea.px-input {
  appearance: none;
  border-radius: 0;
  padding: 8px 10px;
  background: var(--field-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--field-hi);
  font: 400 21px "VT323", monospace;
  color: var(--ink);
}
.biome-dash input.px-input:focus,
.biome-dash textarea.px-input:focus {
  outline: 2px solid var(--accent);
  border-color: var(--edge);
}
.biome-dash textarea.px-input { min-height: 88px; resize: vertical; }
.px-input::placeholder { color: var(--muted); opacity: 0.7; }

/* buttons */

.px-btn {
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  padding: 12px 18px;
  text-align: center;
  background: var(--tile-bg);
  border: 3px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--nav-hi);
  font: 700 12px "Silkscreen", monospace;
  color: var(--muted);
  text-decoration: none;
}
.px-btn.primary {
  flex: 1;
  background: var(--accent);
  box-shadow: inset 2px 2px 0 var(--today-hi), inset -3px -3px 0 var(--today-lo);
  color: var(--today-num);
}
.px-btn.danger {
  padding: 6px 9px;
  font-size: 9px;
  background: #e05a4a;
  border: 2px solid #8f2f24;
  box-shadow: inset 2px 2px 0 #f2a096, inset -2px -2px 0 #7a271d;
  color: #fff;
}
.px-btn:active { transform: translate(2px, 2px); }
.px-btn-row { display: flex; gap: 11px; margin-top: 2px; }

/* biome swatches (settings) */

.px-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.px-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.px-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.px-swatch-chip { width: 46px; height: 36px; box-sizing: border-box; }
.px-swatch-chip.desert { background: #d97b4a; border: 2px solid #7a3f24; box-shadow: inset 3px 3px 0 #f0b078; }
.px-swatch-chip.nether { background: #c9451a; border: 2px solid #5a1410; box-shadow: inset 3px 3px 0 #ff7a3f; }
.px-swatch-chip.tundra { background: #4a9fd6; border: 2px solid #17384f; box-shadow: inset 3px 3px 0 #a6d6f0; }
.px-swatch-chip.cherry { background: #e86fa8; border: 2px solid #8f3560; box-shadow: inset 3px 3px 0 #f7b0d0; }
.px-swatch input:checked + .px-swatch-chip { outline: 2px solid var(--ink); outline-offset: 2px; }
.px-swatch-name { font: 400 16px "VT323", monospace; color: var(--muted); }
.px-swatch input:checked ~ .px-swatch-name { color: var(--ink); font-weight: 700; }

/* pixel range slider (new cards / day) */

.px-slider-row { display: flex; justify-content: space-between; font: 400 22px "VT323", monospace; color: var(--ink); }
.px-slider-row output { color: var(--accent); }
.biome-dash input[type="range"].px-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 18px;
  box-sizing: border-box;
  padding: 2px;
  margin: 0;
  background: var(--field-bg);
  border: 2px solid var(--edge);
  border-radius: 0;
}
.px-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 20px;
  background: #fbfdff;
  border: 2px solid var(--fab-border);
  border-radius: 0;
  cursor: pointer;
}
.px-range::-moz-range-thumb {
  width: 14px;
  height: 20px;
  background: #fbfdff;
  border: 2px solid var(--fab-border);
  border-radius: 0;
  cursor: pointer;
}
.px-range::-moz-range-progress {
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, var(--edge) 6px 8px);
}

/* API tokens */

.px-tokens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.px-tokens li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: var(--tile-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--nav-hi);
  font: 400 19px "VT323", monospace;
  color: var(--ink);
}
.px-tokens li.empty { color: var(--muted); }
.px-tokens form { margin-left: auto; display: flex; }
.px-token-date { color: var(--muted); font-size: 16px; }
.px-notice {
  padding: 10px;
  background: var(--field-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--field-hi);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.px-notice-label { font: 700 9px "Silkscreen", monospace; color: var(--accent); }
.px-notice code { font: 400 18px "VT323", monospace; color: var(--icon-xp); word-break: break-all; }

/* review: flashcard flip + grade buttons */

.px-review {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 590px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.px-review.leaving {
  transform: translateX(-56px);
  opacity: 0;
}
#review-root.htmx-settling > .px-review,
#review-root.htmx-settling > .px-win {
  animation: px-card-enter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes px-card-enter {
  from { opacity: 0; transform: translateX(48px); }
  to { opacity: 1; transform: translateX(0); }
}

.px-stack {
  position: relative;
  width: min(1050px, calc(100vw - 444px));
  max-width: 100%;
  height: 590px; /* grades sit absolute below — card Y never shifts */
}
.px-flash {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 590px;
  cursor: pointer;
  perspective: 2400px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: filter 0.4s ease;
}
.px-flash.flipped {
  filter: drop-shadow(0 18px 22px #00000055);
}
.px-face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #fbfdff;
  border: 8px solid var(--fab-border);
  box-shadow: inset 6px 6px 0 #ffffff, inset -8px -8px 0 #b9d0e0, 12px 12px 0 #00000059;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.px-face.front { transform: rotateY(0deg); z-index: 2; }
.px-face.back { transform: rotateY(180deg); z-index: 1; }
.px-flash.flipped .px-face.front { transform: rotateY(180deg); z-index: 1; }
.px-flash.flipped .px-face.back { transform: rotateY(360deg); z-index: 2; }
.px-face-tag {
  position: absolute;
  top: 22px;
  left: 28px;
  z-index: 2;
  font: 700 18px "Silkscreen", monospace;
  color: #7fa6c2;
  pointer-events: none;
}
.px-face-tag.back { color: #5fbf6f; }
.px-face-body {
  position: absolute;
  top: 56px;
  right: 40px;
  bottom: 40px;
  left: 40px;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 22px;
  padding: 16px 12px 24px;
  min-width: 0;
}
.px-term,
.px-def {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  color: #17384f;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.px-term {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-size: var(--px-fit-size, 110px);
  line-height: 0.95;
}
.px-def {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-size: var(--px-fit-size, 75px);
  line-height: 1.05;
  white-space: pre-line;
}
.px-hint { margin: 0; font: 400 48px "VT323", monospace; color: #5f7d92; flex-shrink: 0; }

/* grades clip under card — absolute so card Y stays fixed */
.px-under-clip {
  position: absolute;
  top: 590px;
  left: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
  pointer-events: none;
}
.px-under-clip.show {
  max-height: 280px;
  opacity: 1;
  pointer-events: auto;
}
.px-under {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  transform: translateY(-110%) scale(0.94);
  opacity: 0;
  filter: blur(3px);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease,
    filter 0.32s ease;
}
.px-under.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: blur(0);
}

.px-grades { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.px-grades form { display: flex; }
.px-grade {
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  padding: 24px 40px;
  font: 700 22px "Silkscreen", monospace;
  color: #fff;
  text-align: center;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.18s ease,
    box-shadow 0.18s ease;
}
.px-under.show .px-grade {
  animation: px-grade-pop 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.px-under.show .px-grades form:nth-child(1) .px-grade { animation-delay: 0.02s; }
.px-under.show .px-grades form:nth-child(2) .px-grade { animation-delay: 0.06s; }
.px-under.show .px-grades form:nth-child(3) .px-grade { animation-delay: 0.1s; }
.px-under.show .px-grades form:nth-child(4) .px-grade { animation-delay: 0.14s; }
.px-under.show .px-queue {
  animation: px-grade-pop 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
@keyframes px-grade-pop {
  from { opacity: 0; transform: translateY(-10px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.px-grade:active { transform: translate(4px, 4px); }
.px-grade.px-grade-flash {
  transform: scale(1.08);
  filter: brightness(1.25);
}
.px-grade.again { background: #e05a4a; border: 6px solid #8f2f24; box-shadow: inset 4px 4px 0 #f2a096, inset -6px -6px 0 #7a271d; }
.px-grade.hard { background: #e88a3f; border: 6px solid #b3652a; box-shadow: inset 4px 4px 0 #f4c08a, inset -6px -6px 0 #8f4f1d; }
.px-grade.good { background: #5fbf6f; border: 6px solid #3f9a4f; box-shadow: inset 4px 4px 0 #a6e6b0, inset -6px -6px 0 #2f7a3c; }
.px-grade.easy { background: #2f7fbf; border: 6px solid #1a4f78; box-shadow: inset 4px 4px 0 #7fb8e0, inset -6px -6px 0 #14456b; }

.px-queue { margin: 0; font: 400 40px "VT323", monospace; color: #fbfdff; text-shadow: 3px 3px 0 #00000080; }
.px-xp-toast {
  position: absolute;
  top: -40px;
  font: 700 26px "Silkscreen", monospace;
  color: #9ce070;
  text-shadow: 3px 3px 0 #00000080;
  animation: px-fadeup 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}
@keyframes px-fadeup {
  from { opacity: 0; transform: translateY(8px) scale(0.85); }
  18% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  32% { transform: translateY(-4px) scale(1); }
  to { opacity: 0; transform: translateY(-14px) scale(1); }
}

.px-done { align-items: flex-start; text-align: left; }
.px-done p { margin: 0; font: 400 21px "VT323", monospace; color: var(--ink); }
.px-done .muted { color: var(--muted); }

/* overlay dialog — center in main content (right of side panel), same as review card */
.px-scrim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* cover + blur sidebar as well */
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  /* center panel in main content area (right of sidebar) */
  padding-left: calc(var(--bp-width-visual) + 32px);
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: padding-left 0.22s ease;
}
html.bp-collapsed .px-scrim {
  padding-left: calc(var(--bp-width-collapsed-visual) + 32px);
}
.px-modal-panel {
  position: relative;
  width: min(470px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  transform-origin: center center;
}
.px-modal-panel .px-win { width: 100%; }
.px-modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  appearance: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--edge);
  background: var(--tile-bg);
  box-shadow: inset 2px 2px 0 var(--nav-hi);
  font: 700 18px "Silkscreen", monospace;
  line-height: 1;
  color: var(--ink);
}
.px-modal-x:active { transform: translate(1px, 1px); }

html.px-modal-open { overflow: hidden; }

/* login gate — hard-blocked dialog over a decorative dashboard preview */
html.px-login-open { overflow: hidden; }
.px-login-scrim {
  display: flex;
  pointer-events: auto;
}
.px-login-panel {
  width: min(420px, 100%);
}
.px-login-win {
  gap: 16px;
}
.px-login-blurb {
  margin: 0;
  font: 400 22px "VT323", monospace;
  color: var(--ink);
  line-height: 1.25;
}
.px-login-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: var(--ink);
}
.px-login-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* alpine transition classes */
.px-fade { transition: opacity 0.28s ease; }
.px-fade-from { opacity: 0; }
.px-fade-to { opacity: 1; }
.px-scale {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}
.px-scale-from { transform: scale(0.88); opacity: 0; }
.px-scale-to { transform: scale(1); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .px-fade,
  .px-scale,
  .px-review,
  .px-under,
  .px-under-clip,
  .px-grade,
  .px-face,
  .px-flash,
  .bp-nav a,
  .bp-nav-icon,
  .bp-cta,
  .bp-nav a:hover,
  .bp-cta:hover,
  .bp,
  .bp-today,
  .bp-activity,
  .bp-chevron,
  .px-scrim {
    transition: none !important;
  }
  .bp-nav a,
  .bp-cta,
  .bp-nav a:hover,
  .bp-cta:hover {
    transform: none;
  }
  .px-xp-toast,
  .px-under.show .px-grade,
  .px-under.show .px-queue,
  #review-root.htmx-settling > .px-review,
  #review-root.px-enter,
  .biome-main.is-review > .px-win.px-enter,
  #review-root.leaving,
  .biome-main.is-review > .px-win.leaving {
    animation: none !important;
  }
  .px-scale-from,
  .px-scale-to { transform: none; opacity: 1; }
  .px-under { transform: none; }
  .px-under-clip { max-height: none; }
  .px-under-clip:not(.show) { max-height: 0; visibility: hidden; }
  .px-scrim {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* set manager — wider modal */
.px-modal-panel:has(.px-sets) {
  width: min(860px, 100%);
  max-height: min(96vh, 1100px);
}

.px-sets {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: min(88vh, 980px);
}
.px-sets-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-height: min(78vh, 860px);
  flex: 1;
}
.px-sets-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--field-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--field-hi);
  min-height: min(74vh, 820px);
}
.px-sets-col.is-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}
.px-sets-col-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 2px solid var(--edge);
  padding-bottom: 6px;
}
.px-sets-col-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.px-sets-hint {
  font: 400 20px "VT323", monospace;
  color: var(--muted);
}
.px-sets-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow: auto;
  max-height: 360px;
  min-height: 0;
}
.px-sets-available {
  min-height: min(74vh, 820px);
}
.px-sets-list-available {
  max-height: none;
  flex: 1;
}
.px-sets-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
  border-top: 2px solid var(--edge);
}
.px-sets-footer-left {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.px-sets-pop-scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}
.px-sets-pop {
  width: min(320px, 100%);
  box-sizing: border-box;
  padding: 16px;
  background: var(--panel-bg);
  border: 3px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--badge-hi), inset -3px -3px 0 var(--panel-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[x-cloak] { display: none !important; }
.px-set-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--panel-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 1px 1px 0 var(--badge-hi);
  cursor: grab;
}
.px-set-row:active { cursor: grabbing; }
.px-set-row.premade { cursor: default; opacity: 0.98; }
.px-set-row.dragging { opacity: 0.45; }
.px-set-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.px-set-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}
.px-set-name {
  font: 400 24px "VT323", monospace;
  color: var(--ink);
  word-break: break-word;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.px-set-author {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid var(--edge);
  background: color-mix(in srgb, var(--muted) 14%, var(--panel-bg));
  font: 700 10px "Silkscreen", monospace;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
}
.px-set-meta {
  font: 400 20px "VT323", monospace;
  color: var(--ink);
  opacity: 0.78;
}
.px-set-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  flex: 0 0 auto;
  align-self: center;
}
.px-sets .px-btn.px-set-swap {
  font: 400 20px "VT323", monospace;
  padding: 6px 10px;
  min-width: 36px;
  line-height: 1;
  letter-spacing: 0;
}
.px-set-empty {
  font: 400 22px "VT323", monospace;
  color: var(--ink);
  opacity: 0.72;
  padding: 8px 4px;
  line-height: 1.25;
}
.px-set-open {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-style: dotted;
}
.px-set-open:hover,
.px-set-open:focus-visible {
  color: var(--accent);
}

/* --- set detail: the cards inside one set --- */
.px-modal-panel:has(.px-cards) {
  width: min(900px, 100%);
  max-height: min(96vh, 1100px);
}
.px-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: min(70vh, 820px);
}
.px-cards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--edge);
  padding-bottom: 8px;
}
.px-cards-head-left,
.px-cards-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.px-cards-meta {
  font: 400 20px "VT323", monospace;
  color: var(--ink);
  opacity: 0.78;
}
.px-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}
.px-cards-grid:empty::after {
  content: "No cards here yet — + Card to add one";
  grid-column: 1 / -1;
  font: 400 22px "VT323", monospace;
  color: var(--ink);
  opacity: 0.72;
  padding: 8px 4px;
}
.px-card-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 130px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  background: var(--panel-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 1px 1px 0 var(--badge-hi), inset -2px -2px 0 var(--panel-shadow);
  color: var(--ink);
}
.px-card-tile[hidden] { display: none; }
.px-card-tile:hover,
.px-card-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
.px-card-tile:active { transform: translate(1px, 1px); }
.px-card-tile-term {
  font: 400 24px "VT323", monospace;
  line-height: 1.15;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.px-card-tile-def {
  font: 400 19px "VT323", monospace;
  opacity: 0.7;
  line-height: 1.2;
  overflow-wrap: anywhere;
  border-top: 2px dashed var(--edge);
  padding-top: 4px;
  margin-top: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- card editor: the popup layered over the grid --- */
.px-scrim-2 {
  z-index: 90;
  background: rgba(0, 0, 0, 0.45);
}
.px-modal-panel:has(.px-card-editor) {
  width: min(560px, 100%);
}
.px-card-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.px-card-editor-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.px-card-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 2px solid var(--edge);
}
.px-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 8px 10px;
  font: 400 22px "VT323", monospace;
  line-height: 1.25;
  color: var(--ink);
  background: var(--field-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--field-hi);
  outline: none;
}
.px-textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
/* native select renders unstyled chrome — rebuild it in the pixel idiom */
.px-select-wrap {
  position: relative;
  display: block;
}
.px-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 36px 8px 10px;
  cursor: pointer;
  font: 400 22px "VT323", monospace;
  line-height: 1.2;
  color: var(--ink);
  background: var(--field-bg);
  border: 2px solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--field-hi);
  outline: none;
}
.px-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
.px-select-arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 10px;
  color: var(--ink);
  opacity: 0.75;
}
.px-cards .px-btn-sm,
.px-card-editor .px-btn-sm {
  font-size: 10px;
  padding: 8px 10px;
}
@media (max-width: 900px) {
  .px-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .px-cards-grid { grid-template-columns: minmax(0, 1fr); }
}
.px-cards .px-notice,
.px-card-editor .px-notice {
  font: 400 20px "VT323", monospace;
}

.px-btn-sm {
  font-size: 10px;
  padding: 8px 10px;
}
.px-cards .px-notice {
  font: 400 20px "VT323", monospace;
}
.px-sets-col-head .px-row-label {
  font: 400 26px "VT323", monospace;
  color: var(--ink);
}
.px-sets .px-win-title {
  font-size: 16px;
  letter-spacing: 0.06em;
}
.px-sets .px-btn-sm {
  font-size: 10px;
  padding: 8px 10px;
}
.px-sets .px-notice {
  font: 400 20px "VT323", monospace;
}
.px-btn-sm {
  padding: 6px 8px;
  font-size: 9px;
}
.px-btn.primary.px-btn-sm { flex: 0 0 auto; }
.px-import-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.px-code {
  margin: 0;
  padding: 10px;
  background: var(--field-bg);
  border: 2px solid var(--edge);
  font: 400 15px "VT323", monospace;
  color: var(--ink);
  white-space: pre-wrap;
  overflow: auto;
}
.px-export-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
}
.px-export-group {
  margin: 0;
  padding: 8px;
  border: 2px solid var(--edge);
  background: var(--field-bg);
}
.px-export-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 18px "VT323", monospace;
  color: var(--ink);
  cursor: pointer;
  padding: 3px 0;
}

@media (max-width: 720px) {
  .biome-dash { flex-direction: column; }
  .bp,
  html.bp-collapsed .bp {
    width: 100%;
    min-height: auto;
    height: auto;
    zoom: 1;
    padding: 20px;
    align-items: stretch;
    gap: 13px;
    border-right: none;
    border-bottom: 4px solid var(--edge);
  }
  .bp-toggle { display: none; }
  html.bp-collapsed .bp-brand { display: flex; }
  html.bp-collapsed .bp-brand-text,
  html.bp-collapsed .bp-nav-label,
  html.bp-collapsed .bp-stat-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
  html.bp-collapsed .bp-today {
    opacity: 1;
    max-height: none;
    padding: 14px;
    border-width: 3px;
    pointer-events: auto;
  }
  html.bp-collapsed .bp-nav a {
    justify-content: flex-start;
    padding: 7px 10px;
    gap: 9px;
  }
  html.bp-collapsed .bp-stats {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  html.bp-collapsed .bp-stat {
    display: block;
    padding: 10px;
  }
  html.bp-collapsed .bp-stat-head {
    margin-bottom: 3px;
    justify-content: flex-start;
  }
  html.bp-collapsed .bp-stat-val {
    font-size: 28px;
    line-height: 0.8;
    text-align: left;
  }
  html.bp-collapsed .bp-activity {
    opacity: 1;
    max-height: none;
    pointer-events: auto;
    flex: 1;
  }
  .biome-badge { display: none; }
  .biome-main { min-height: auto; padding: 28px 16px; }
  .px-stack { width: min(1050px, calc(100vw - 32px)); height: min(590px, 70vh); }
  .px-flash { height: min(590px, 70vh); }
  .px-review { min-height: min(590px, 70vh); }
  .px-under-clip { top: min(590px, 70vh); }
  .px-term { --px-fit-size: 72px; }
  .px-def { --px-fit-size: 52px; }
  .px-hint { font-size: 32px; }
  .px-scrim,
  html.bp-collapsed .px-scrim {
    left: 0;
    padding: 28px 16px;
    padding-left: 16px;
  }
  .px-sets-cols { grid-template-columns: 1fr; }
}