@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap");
:root {
  --primary: #5146df;
  --primary-dark: #3f35be;
  --ink: #202439;
  --muted: #6c7285;
  --line: #e7e9f1;
  --paper: #f8f9fc;
  --mint: #087d5c;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sidebar: 220px;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  background: var(--paper);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
button,
select,
input,
textarea {
  border: 1px solid var(--line);
}
button {
  background: white;
  color: inherit;
}
a,
button,
input,
select,
textarea,
summary {
  outline-offset: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #837afa;
}
button:hover:not(:disabled) {
  border-color: #b8b4e8;
}
h1,
h2,
h3,
h4 {
  font-family: Manrope, system-ui, sans-serif;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.035em;
}
h1 {
  font-size: 2.4rem;
  font-weight: 800;
}
h2 {
  font-size: 1.45rem;
  font-weight: 800;
}
h3 {
  font-size: 1rem;
  font-weight: 750;
}
p {
  margin: 0 0 1rem;
}
svg {
  flex-shrink: 0;
  vertical-align: middle;
}
small {
  font-size: 0.875rem;
}
.muted {
  color: var(--muted);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -70px;
  left: 20px;
  padding: 10px;
  background: white;
  z-index: 100;
}
.skip-link:focus {
  top: 10px;
}
.loading {
  padding: 3rem;
}
.eyebrow {
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  font-weight: 750;
  color: var(--primary);
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  padding: 10px 16px;
  font-weight: 650;
  font-size: 0.875rem;
  background: #fff;
  transition:
    background 0.16s,
    transform 0.16s;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn.primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 3px 8px #5146df18;
}
.btn.primary:hover {
  background: var(--primary-dark);
}
.btn.secondary {
  background: white;
  color: #4e4d6c;
}
.text-button {
  border: 0;
  background: none;
  font-size: 0.875rem;
  color: var(--muted);
  padding: 8px;
}
.text-link {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.icon-button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
}
.icon-button:hover {
  background: #f1f0fc;
}
.icon-button.saved {
  color: var(--primary);
}
.icon-button.saved svg {
  fill: #dedafd;
}
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar);
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 29px 20px 22px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.04em;
}
.brand-mark {
  height: 35px;
  width: 35px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--primary);
  box-shadow: 0 4px 10px #5146df24;
}
.brand em {
  font-style: normal;
  color: var(--primary);
}
.brand-sub {
  margin: 7px 0 35px 45px;
  font-size: 0.875rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.nav-heading {
  font-size: 0.875rem;
  letter-spacing: 0.13em;
  font-weight: 650;
  color: #9197a7;
  padding: 0 12px;
  margin: 24px 0 12px;
}
.nav-links {
  display: grid;
  gap: 7px;
}
.nav-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  font-size: 0.875rem;
  color: #727789;
  border-radius: 8px;
  font-weight: 500;
}
.nav-links a:hover {
  background: #f6f6fc;
}
.nav-links a.active {
  background: #efedff;
  color: var(--primary);
  font-weight: 700;
}
.nav-count {
  margin-left: auto;
  font-size: 0.875rem;
  min-width: 24px;
  background: #e4e0ff;
  text-align: center;
  border-radius: 5px;
  color: var(--primary);
}
.topic-nav a {
  font-size: 0.875rem;
  padding: 7px 12px;
}
.topic-nav i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #8c83f1;
  margin: 0 7px;
}
.topic-nav a:nth-child(2) i {
  background: #39b9b1;
}
.topic-nav a:nth-child(3) i {
  background: #e9b458;
}
.topic-nav a:nth-child(4) i {
  background: #8ba6ed;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 30px;
}
.local-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 20px 6px 0;
}
.local-badge i {
  width: 6px;
  height: 6px;
  background: #2caa85;
  border-radius: 50%;
}
.sidebar-bottom p {
  font-size: 0.875rem;
  color: #9197a7;
  padding: 6px;
  margin: 0;
}
.app-body {
  margin-left: var(--sidebar);
}
.topbar {
  height: 76px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
  background: #ffffffbc;
  gap: 16px;
}
.breadcrumb {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.breadcrumb strong {
  color: #45485d;
  font-weight: 550;
}
.topbar-right {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 0.875rem;
  color: var(--muted);
}
.keyboard-tag {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.875rem;
}
.avatar {
  background: #eeecfc;
  border: 3px solid white;
  box-shadow: 0 0 0 1px var(--line);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.875rem;
}
.main {
  max-width: 1540px;
  padding: 32px 42px 40px;
  margin: 0 auto;
}
.hero {
  background: linear-gradient(108deg, #f0edff 0%, #f2f3fd 61%, #e9f6f6 100%);
  border: 1px solid #e3e0f5;
  border-radius: 14px;
  padding: 29px 32px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  position: relative;
  overflow: hidden;
  align-items: center;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  letter-spacing: 0.11em;
}
.hero h1 {
  margin: 12px 0 13px;
  font-size: clamp(1.8rem, 2.7vw, 2.7rem);
  line-height: 1.2;
  max-width: 550px;
}
.hero h1 span {
  color: var(--primary);
}
.hero p {
  color: #72738b;
  font-size: 0.875rem;
  max-width: 360px;
  margin-bottom: 20px;
}
.hero-actions {
  display: flex;
  gap: 10px;
}
.hero .btn {
  font-size: 0.875rem;
  min-height: 40px;
  padding: 9px 14px;
}
.hero-demo {
  background: #fff;
  border: 1px solid #e1e2ee;
  box-shadow: 0 8px 30px #44377808;
  border-radius: 12px;
  transform: rotate(-2deg);
  padding: 19px 20px;
  max-width: 400px;
  margin-left: auto;
  width: 100%;
}
.demo-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
  align-items: center;
}
.demo-header span {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: #7b758f;
  background: #f7f6fc;
  padding: 3px 8px;
  border-radius: 5px;
}
.demo-array {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 29px 0 20px;
}
.demo-cell {
  width: 51px;
  text-align: center;
  font-family: var(--mono);
  position: relative;
}
.demo-cell b {
  height: 49px;
  display: grid;
  place-items: center;
  border: 1px solid #e3e4ed;
  border-radius: 7px;
  font-size: 1.15rem;
  font-weight: 500;
  background: #fafafe;
}
.demo-cell.active b {
  border-color: #9990f2;
  color: var(--primary);
  background: #f0edff;
}
.demo-cell.found b {
  border-color: #6ac3a7;
  background: #e5f8ef;
  color: #158261;
}
.demo-cell small {
  color: #9397a8;
  font-size: 0.875rem;
  display: block;
  margin-top: 4px;
}
.demo-cell.active:before {
  content: "i";
  position: absolute;
  font-size: 0.875rem;
  top: -20px;
  left: 23px;
  color: var(--primary);
}
.demo-terminal {
  background: #24233d;
  color: #e8e5ff;
  font-family: var(--mono);
  font-size: 0.875rem;
  border-radius: 7px;
  padding: 11px 13px;
  line-height: 1.9;
}
.demo-terminal span {
  color: #a3a0c1;
}
.demo-terminal b {
  font-weight: 500;
  color: #89d9c4;
}
.demo-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: #77738a;
  margin-top: 12px;
}
.demo-footer i {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #64bca1;
}
.demo-footer a {
  margin-left: auto;
  color: var(--primary);
  font-weight: 600;
}
.stats-strip {
  display: flex;
  gap: 35px;
  margin: 21px 0 33px;
  padding: 0 2px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.875rem;
}
.stat strong {
  font-size: 1.02rem;
  color: var(--ink);
}
.stat svg {
  color: #8b81d7;
}
.stat:not(:last-child) {
  border-right: 1px solid var(--line);
  padding-right: 35px;
}
.section-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.section-subtitle {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 6px 0 20px;
}
.section-line h2 {
  font-size: 1.4rem;
}
.section-line .text-link {
  font-size: 0.875rem;
}
.filter-bar {
  margin: 0 0 21px;
}
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  margin-bottom: 12px;
  color: #969bad;
}
.search-wrap input {
  border: 0;
  padding: 12px 11px;
  min-width: 0;
  width: 100%;
  background: transparent;
  font-size: 0.875rem;
  color: var(--ink);
  outline-offset: -2px;
}
.search-wrap input::placeholder {
  color: #979bad;
}
.search-hint {
  white-space: nowrap;
  font-size: 0.875rem;
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
  color: #999dad;
}
.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.segmented {
  display: flex;
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 7px;
  background: #fff;
  gap: 1px;
}
.segmented button {
  border: 0;
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--muted);
  padding: 5px 12px;
  background: transparent;
}
.segmented button.selected {
  background: #eeebff;
  color: var(--primary);
  font-weight: 650;
}
.filter-row select,
.topic-picker summary,
.filter-bookmark {
  height: 35px;
  font-size: 0.875rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #686e82;
  padding: 7px 10px;
}
.filter-row select {
  max-width: 175px;
}
.topic-picker {
  position: relative;
}
.topic-picker summary {
  list-style: none;
  cursor: pointer;
  min-width: 91px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.topic-picker summary::-webkit-details-marker {
  display: none;
}
.topic-menu {
  position: absolute;
  top: 42px;
  left: 0;
  min-width: 210px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 12px 30px #22243c20;
  z-index: 10;
}
.topic-menu small {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 8px;
}
.topic-menu label {
  display: flex;
  gap: 9px;
  padding: 5px;
  font-size: 0.875rem;
  align-items: center;
}
.topic-menu input {
  accent-color: var(--primary);
}
.filter-bookmark {
  display: flex;
  align-items: center;
  gap: 5px;
}
.filter-bookmark.selected {
  color: var(--primary);
  background: #efedff;
}
.filter-row .text-button {
  font-size: 0.875rem;
  padding: 6px;
  margin-left: auto;
}
.library-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 235px;
  gap: 24px;
}
.results-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  min-height: 32px;
}
.result-count {
  font-size: 0.875rem;
  color: var(--muted);
  margin-right: auto;
}
.result-count b {
  color: var(--ink);
}
.sort-label {
  font-size: 0.875rem;
  color: var(--muted);
}
#sort {
  font-size: 0.875rem;
  color: #45495f;
  background: transparent;
  border: 0;
  max-width: 147px;
  padding: 5px 0;
}
.view-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px;
  background: white;
}
.view-toggle button {
  width: 29px;
  height: 27px;
  border: 0;
  padding: 4px;
  background: transparent;
  border-radius: 4px;
  color: #9799aa;
}
.view-toggle button.selected {
  color: var(--primary);
  background: #f0edff;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.problem-card {
  background: #fff;
  border: 1px solid #e5e7f0;
  border-radius: 11px;
  padding: 15px 17px 0;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
  min-width: 0;
}
.problem-card:hover {
  border-color: #beb6f5;
  box-shadow: 0 5px 22px #5146df0b;
  transform: translateY(-2px);
}
.card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.problem-number {
  font-size: 0.875rem;
  color: #8c90a0;
  font-family: var(--mono);
}
.badge {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.badge.easy {
  color: #168160;
  background: #eaf8ef;
}
.badge.medium {
  color: #a26d12;
  background: #fff5df;
}
.badge.hard {
  color: #bd4351;
  background: #ffebef;
}
.card-top .bookmark {
  margin-left: auto;
  width: 25px;
  height: 25px;
}
.card-title {
  font-family: Manrope, sans-serif;
  font-size: 0.93rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  line-height: 1.4;
}
.card-title:hover {
  color: var(--primary);
}
.card-description {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #818596;
  margin-bottom: 14px;
  flex: 1;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tags span {
  padding: 3px 7px;
  color: #777b8c;
  background: #f5f6fa;
  border: 1px solid #eef0f5;
  border-radius: 4px;
  font-size: 0.875rem;
  white-space: nowrap;
}
.card-pattern {
  display: flex;
  gap: 6px;
  color: #8b86a6;
  align-items: center;
  margin-top: 13px;
  font-size: 0.875rem;
}
.viz-type {
  display: none;
}
.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  margin: 15px 0 13px;
  color: #8a8e9e;
  font-size: 0.875rem;
}
.card-meta > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.status {
  display: flex;
  align-items: center;
  gap: 5px;
}
.status i {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #c6c9d4;
}
.status.in-progress {
  color: #a57716;
}
.status.in-progress i {
  background: #e6b345;
}
.status.completed {
  color: var(--mint);
}
.card-open {
  border-top: 1px solid #eeeff5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  font-size: 0.875rem;
  color: var(--primary);
  font-weight: 600;
}
.card-open:hover {
  color: #302596;
}
.progress-panel {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
  padding: 19px 18px;
  margin-top: 48px;
}
.progress-panel .section-line {
  color: #9692b1;
}
.progress-panel h3 {
  font-size: 0.88rem;
  color: var(--ink);
}
.progress-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 14px;
}
.progress-summary strong {
  font-size: 2rem;
  line-height: 1;
  font-family: Manrope, sans-serif;
  font-weight: 800;
  letter-spacing: -0.05em;
}
.progress-summary strong small {
  font-size: 1rem;
  color: #8b8b9f;
}
.progress-summary > span {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
}
.progress-track {
  height: 6px;
  background: #eeeef7;
  border-radius: 8px;
  overflow: hidden;
}
.progress-track span {
  height: 100%;
  background: var(--primary);
  display: block;
}
.difficulty-progress {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
.difficulty-progress > div {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
.difficulty-label:before {
  content: "";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  margin-right: 8px;
  background: currentColor;
}
.difficulty-label.easy {
  color: #22a780;
}
.difficulty-label.medium {
  color: #dda13c;
}
.difficulty-label.hard {
  color: #da7d87;
}
.progress-panel .text-link {
  font-size: 0.875rem;
  border-top: 1px solid var(--line);
  width: 100%;
  padding-top: 14px;
  justify-content: space-between;
}
.continue-card {
  background: linear-gradient(130deg, #efedff, #f5f2fe);
  border: 1px solid #e4e0fb;
  border-radius: 11px;
  margin-top: 16px;
  padding: 20px 18px;
}
.continue-card .eyebrow {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}
.continue-icon {
  height: 34px;
  width: 34px;
  border: 1px solid #dcd5ff;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: #fff8;
  margin: 17px 0 13px;
}
.continue-card h3 {
  font-size: 0.94rem;
  line-height: 1.4;
}
.continue-card p {
  font-size: 0.875rem;
  color: #84809b;
  margin: 8px 0 16px;
}
.continue-card .btn {
  width: 100%;
  font-size: 0.875rem;
  min-height: 36px;
  padding: 8px;
}
.side-note {
  padding: 23px 10px;
  color: #ada5cf;
}
.side-note h3 {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #595b72;
  margin: 12px 0 10px;
}
.side-note p {
  font-size: 0.875rem;
  color: #9697a7;
  line-height: 1.7;
}
.side-note .text-link {
  font-size: 0.875rem;
}
.footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  color: #a2a4b3;
}
.empty-state {
  background: #fff;
  border: 1px dashed #d9d5ed;
  border-radius: 12px;
  padding: 50px 24px;
  text-align: center;
  grid-column: 1/-1;
}
.empty-state > svg {
  color: #a498e5;
  margin-bottom: 15px;
}
.empty-state h3 {
  font-size: 1.1rem;
}
.empty-state p {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 10px 0 20px;
}
.problem-grid.list-view {
  grid-template-columns: 1fr;
}
.list-view .problem-card {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 15px 19px;
  gap: 8px 20px;
}
.list-view .card-top {
  grid-column: 1/-1;
  margin: 0;
}
.list-view .card-title {
  margin: 0;
}
.list-view .card-description {
  grid-column: 1/2;
  margin: 0;
}
.list-view .tags {
  grid-column: 1/2;
}
.list-view .card-pattern {
  margin: 0;
  grid-column: 1/2;
}
.list-view .card-meta {
  grid-column: 2;
  grid-row: 2;
  gap: 20px;
  margin: 0;
}
.list-view .card-open {
  grid-column: 2;
  grid-row: 3/6;
  border: 0;
  gap: 15px;
}
.page-heading {
  margin: 9px 0 30px;
}
.page-heading h1 {
  font-size: 2rem;
  margin: 10px 0;
}
.page-heading p {
  color: var(--muted);
  font-size: 0.9rem;
}
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pattern-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.pattern-card > svg {
  color: var(--primary);
  margin-bottom: 18px;
}
.pattern-card h3 {
  font-size: 1.03rem;
  margin-bottom: 10px;
}
.pattern-card p {
  color: var(--muted);
  font-size: 0.875rem;
}
.pattern-card .text-link {
  font-size: 0.875rem;
}
.roadmap-list {
  max-width: 850px;
  display: grid;
  gap: 13px;
}
.roadmap-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: white;
  border: 1px solid var(--line);
  padding: 20px 24px;
  border-radius: 10px;
}
.roadmap-item:hover {
  border-color: #b8b0f1;
}
.roadmap-index {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0edff;
  color: var(--primary);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.875rem;
  flex-shrink: 0;
}
.roadmap-item.completed .roadmap-index {
  background: #e9f7f0;
  color: var(--mint);
}
.roadmap-item h3 {
  font-size: 0.93rem;
}
.roadmap-item p {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 4px 0 0;
}
.roadmap-item > .badge {
  margin-left: auto;
}
.progress-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}
.progress-page > * {
  margin: 0;
}
.panel {
  padding: 24px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}
.panel h3 {
  margin-bottom: 15px;
}
.panel p {
  color: var(--muted);
  font-size: 0.875rem;
}
.topic-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-top: 15px;
  font-size: 0.875rem;
}
.topic-progress progress {
  grid-column: 1/-1;
  width: 100%;
  height: 6px;
  accent-color: var(--primary);
}
.recent-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.recent-link:hover {
  color: var(--primary);
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translate(-50%, 30px);
  opacity: 0;
  background: #242139;
  color: white;
  font-size: 0.875rem;
  padding: 12px 20px;
  border-radius: 9px;
  box-shadow: 0 6px 24px #1112;
  pointer-events: none;
  transition: 0.2s;
  z-index: 100;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Lesson workspace */
.problem-back {
  font-size: 0.875rem;
  color: var(--muted);
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 23px;
}
.problem-heading {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.problem-heading h1 {
  font-size: 2rem;
  margin: 8px 0 12px;
}
.problem-heading p {
  font-size: 0.875rem;
  max-width: 740px;
  color: var(--muted);
  margin-bottom: 13px;
}
.heading-meta {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 0.875rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.heading-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 10px;
}
.heading-actions .btn {
  font-size: 0.875rem;
}
.objective-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: 14px 0 22px;
  font-size: 0.875rem;
  color: var(--muted);
}
.objective-row strong {
  color: #68617f;
}
.objective-row span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.objective-row svg {
  color: #3ea785;
}
.lab {
  border: 1px solid #e1dfef;
  border-radius: 13px;
  background: white;
  overflow: hidden;
}
.lab-header {
  padding: 20px 24px 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fbfaff;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.lab-header h2 {
  font-size: 1rem;
  display: flex;
  gap: 8px;
  align-items: center;
}
.lab-header h2 svg {
  color: var(--primary);
}
.lab-header > span {
  color: var(--muted);
  font-size: 0.875rem;
}
.input-form {
  display: flex;
  gap: 12px;
  align-items: end;
  padding: 19px 24px 10px;
}
.input-form label {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}
.input-form .main-input {
  flex: 1;
  min-width: 0;
}
.input-form input {
  height: 40px;
  border-radius: 6px;
  padding: 8px 11px;
  background: #fdfdff;
  width: 100%;
  font-family: var(--mono);
  font-size: 0.875rem;
  min-width: 0;
}
.target-input {
  max-width: 110px;
}
.input-form .btn {
  min-height: 40px;
  font-size: 0.875rem;
}
.input-error {
  color: #b43c53;
  min-height: 20px;
  margin: 0 24px 10px;
  font-size: 0.875rem;
}
.mode-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px 17px;
  flex-wrap: wrap;
}
.mode-row > span {
  font-size: 0.875rem;
  color: var(--muted);
  margin-right: 5px;
}
.mode-button {
  padding: 6px 11px;
  background: #f8f8fc;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--muted);
}
.mode-button.selected {
  color: var(--primary);
  background: #efedff;
  border-color: #d6cff9;
}
.lab-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  border-top: 1px solid var(--line);
}
.stage-container {
  padding: 20px;
  min-width: 0;
}
.stage-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #818299;
  margin-bottom: 15px;
}
.stage-top b {
  font-weight: 550;
  color: #5d5978;
}
.visual-stage {
  background-color: #fafbfe;
  background-image: radial-gradient(#d6daeb 1px, transparent 1px);
  background-size: 17px 17px;
  min-height: 290px;
  border-radius: 9px;
  border: 1px solid #e9eaf4;
  padding: 28px 22px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.stage-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a86a1;
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}
.stage-label small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 7px;
}
.array-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.array-item {
  min-width: 41px;
  text-align: center;
  position: relative;
}
.array-cell {
  height: 48px;
  min-width: 45px;
  padding: 8px;
  display: grid;
  place-items: center;
  border: 1px solid #d9ddea;
  border-radius: 7px;
  background: white;
  font: 500 0.98rem var(--mono);
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.array-index {
  display: block;
  font: 0.6rem var(--mono);
  color: #9a9daf;
  margin-top: 7px;
}
.pointer-label {
  display: block;
  height: 20px;
  font-size: 0.875rem;
  color: var(--primary);
  white-space: nowrap;
}
.array-cell.current,
.grid-cell.current {
  background: #ebe7ff !important;
  border-color: #8174e9 !important;
  box-shadow: 0 0 0 2px #8174e92b;
  color: #4e3dcb;
}
.array-cell.resolved {
  background: #e1f5eb;
  border-color: #86c9ae;
  color: #157a55;
}
.array-cell.string-selected {
  background: #fff2cf;
  border-color: #dbb65f;
  color: #76551a;
}
.string-lab {
  display: grid;
  gap: 24px;
  width: 100%;
}
.string-readouts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.string-range {
  min-width: 150px;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  text-align: center;
}
.string-range .stage-label { margin-bottom: 6px; }
.string-range code { font: 600 1rem var(--mono); overflow-wrap: anywhere; }
.array-cell.discarded {
  opacity: 0.3;
  background: #eff0f5;
}
.memory-tray {
  border: 1px solid #e5e2f1;
  border-radius: 8px;
  background: #ffffffab;
  padding: 13px 15px;
}
.map-entries {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  min-height: 26px;
  align-items: center;
}
.map-entry {
  font-family: var(--mono);
  font-size: 0.875rem;
  padding: 5px 10px;
  border: 1px solid #dce8e5;
  background: #effaf6;
  border-radius: 5px;
  color: #438773;
}
.map-entry b {
  font-weight: 400;
  color: #95ac9f;
  margin: 0 5px;
}
.empty-array {
  font-size: 0.875rem;
  color: #9995a9;
}
.legend {
  display: flex;
  gap: 16px;
  font-size: 0.875rem;
  margin-top: 14px;
  color: #8b8b9c;
  flex-wrap: wrap;
}
.legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #c2b9f9;
}
.legend .green {
  background: #9ad8bb;
}
.legend .grey {
  background: #d9dce6;
}
.inspector {
  padding: 24px 21px;
  background: #fdfcfe;
  border-left: 1px solid var(--line);
}
.inspector-label {
  font-size: 0.875rem;
  color: #9b96b1;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 13px;
}
.state-terminal {
  background: #26243d;
  color: #e4dffd;
  border-radius: 8px;
  padding: 14px 15px;
  font-size: 0.875rem;
  min-height: 90px;
}
.terminal-dots {
  display: flex !important;
  gap: 4px;
  margin-bottom: 14px;
}
.terminal-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6a647e;
}
.state-terminal > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 5px;
}
.state-terminal span {
  color: #a6a0ba;
}
.state-terminal code {
  color: #9bddc7;
  overflow-wrap: anywhere;
  min-width: 0;
}
.step-explanation {
  margin-top: 24px;
}
.step-explanation .eyebrow {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}
.step-explanation p {
  margin-top: 9px;
  font-size: 0.875rem;
  color: #78748c;
  line-height: 1.75;
}
.result-box {
  border: 1px solid #bde4d0;
  background: #ecf9f2;
  padding: 12px;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  color: #187856;
}
.result-box span {
  font-size: 0.875rem;
}
.result-box strong {
  font: 600 0.86rem var(--mono);
  overflow-wrap: anywhere;
}
.animation-controls {
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 22px;
  background: #fff;
  flex-wrap: wrap;
}
.playback-buttons {
  display: flex;
  gap: 4px;
  align-items: center;
}
.play-button {
  min-width: 88px;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 0.875rem;
}
.timeline-label {
  flex: 1;
  min-width: 85px;
  display: flex;
}
.timeline-label input {
  width: 100%;
  accent-color: var(--primary);
  height: 4px;
}
.step-count {
  font: 0.67rem var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.speed-label {
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.speed-label select {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px;
  font-size: 0.875rem;
  background: #fff;
}
.lesson-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 27px;
  align-items: start;
}
.lesson-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 24px;
  margin-bottom: 20px;
  min-width: 0;
}
.lesson-card h2 {
  font-size: 1.08rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.lesson-card h2 svg {
  color: var(--primary);
}
.lesson-card h3 {
  font-size: 0.88rem;
  margin: 22px 0 10px;
}
.lesson-card p,
.lesson-card li {
  font-size: 0.875rem;
  color: #73798c;
  line-height: 1.85;
}
.lesson-card ol,
.lesson-card ul {
  padding-left: 21px;
  margin: 0;
}
.lesson-card li {
  margin-bottom: 8px;
  padding-left: 3px;
}
.lesson-card p:last-child {
  margin-bottom: 0;
}
.complexities {
  display: flex;
  gap: 12px;
  margin-bottom: 17px;
}
.complexity-box {
  background: #f5f4fc;
  border: 1px solid #eae7f8;
  border-radius: 8px;
  padding: 12px;
  flex: 1;
  min-width: 0;
}
.complexity-box span {
  display: block;
  font-size: 0.875rem;
  color: #8f89a5;
  margin-bottom: 6px;
}
.complexity-box strong {
  font: 600 0.85rem var(--mono);
  color: var(--primary);
  overflow-wrap: anywhere;
}
.code-panel {
  background: #242239;
  border-radius: 11px;
  overflow: hidden;
  margin-bottom: 20px;
  color: #e3defa;
  min-width: 0;
}
.code-top {
  padding: 16px 20px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  border-bottom: 1px solid #3b3652;
}
.code-top strong {
  margin-right: auto;
  font-weight: 550;
}
.code-top .icon-button {
  color: #a8a0c6;
}
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #67617e;
  border-radius: 6px;
  padding: 7px 10px;
  background: #302b43;
  color: #f0eafd;
  font: inherit;
  cursor: pointer;
}
.code-copy:hover,
.code-copy:focus-visible {
  background: #453c62;
  outline-color: #c4b5fd;
}
.code-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 13px 0;
  align-items: center;
}
.code-tabs button {
  border: 0;
  border-radius: 5px;
  background: none;
  color: #a8a3bf;
  padding: 7px 10px;
  font-size: 0.875rem;
}
.code-tabs button.selected {
  background: #3c355c;
  color: #d9cdfd;
}
.code-mode-caption {
  font-size: 0.875rem;
  color: #9990b4;
  margin: 10px 22px 0;
}
.code-panel pre {
  margin: 0;
  padding: 18px 22px 25px;
  overflow: auto;
  white-space: pre;
  overflow-wrap: normal;
  font: 0.76rem/1.9 var(--mono);
  tab-size: 2;
  max-height: 510px;
}
.pseudocode {
  white-space: pre-wrap;
  background: #f7f6fc;
  border: 1px solid #e9e6f4;
  padding: 15px;
  border-radius: 8px;
  font: 0.76rem/1.8 var(--mono);
  color: #67617e;
  overflow-wrap: anywhere;
}
.quiz-options {
  display: grid;
  gap: 9px;
}
.quiz-option {
  display: flex;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 11px;
  font-size: 0.875rem;
  align-items: center;
  cursor: pointer;
  color: #777488;
}
.quiz-option input {
  accent-color: var(--primary);
}
.quiz-feedback {
  font-size: 0.875rem;
  margin-top: 12px;
  color: var(--mint);
  line-height: 1.7;
}
.quiz-feedback.incorrect {
  color: #a27026;
}
.lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
}
.lesson-nav a {
  background: white;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 16px 20px;
  font-size: 0.875rem;
  max-width: 48%;
}
.lesson-nav span {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  margin-bottom: 5px;
}
.tree-svg {
  width: 100%;
  min-width: 280px;
  max-height: 340px;
}
.tree-node circle,
.tree-node rect {
  fill: white;
  stroke: #c9cbdb;
  stroke-width: 1.5;
  transition:
    fill 0.2s,
    stroke 0.2s;
}
.tree-node.current circle,
.tree-node.current rect {
  fill: #e7e0ff;
  stroke: #7b66e5;
  stroke-width: 3;
}
.tree-node.resolved circle,
.tree-node.resolved rect {
  fill: #e0f6eb;
  stroke: #73bd9c;
}
.tree-node text {
  fill: #55516f;
  font: 500 16px var(--mono);
}
.tree-node text.depth-label {
  fill: #9690a7;
  font: 11px var(--mono);
}
.linked-diagram {
  min-width: 400px;
}
.linked-diagram svg {
  display: block;
  width: 100%;
}
.grid-visual {
  display: grid;
  grid-template-columns: repeat(var(--cols), 40px);
  gap: 6px;
  justify-content: center;
}
.grid-cell {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font: 0.85rem var(--mono);
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.2s;
}
.grid-cell.water {
  background: #edf2fa;
  color: #a4b9d6;
}
.grid-cell.land {
  background: #e4e8dc;
  border-color: #d2d8c6;
  color: #909b7e;
}
.grid-cell.visited {
  background: #c8ecdc;
  color: #34836b;
  border-color: #8ec9af;
}
.grid-cell.island-1 {
  background: #ece0ff;
  color: #9a67b4;
  border-color: #c8afe3;
}
.grid-cell.island-2 {
  background: #fae7c6;
  color: #9c7c3d;
  border-color: #e5c685;
}
.grid-cell.island-3 {
  background: #d0e8f9;
  color: #4c8bac;
  border-color: #a7d5ec;
}
.stack-tray {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 25px;
}
.stack-items {
  border: 2px solid #c8c0e7;
  border-top: 0;
  border-radius: 0 0 7px 7px;
  padding: 8px;
  min-width: 95px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 50px;
}
.stack-items > div {
  background: #e8e2ff;
  border: 1px solid #c4b7ee;
  text-align: center;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 5px;
  color: #7961b9;
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
  min-height: 215px;
}
.bar-column {
  text-align: center;
  font-size: 0.875rem;
  color: #8f88a5;
  min-width: 27px;
}
.price-bar {
  width: 35px;
  max-width: 100%;
  border-radius: 5px 5px 0 0;
  background: #d7d2f4;
  margin: 7px auto;
  transition: background 0.2s;
}
.price-bar.current {
  background: #7c6bdf;
}
.price-bar.resolved {
  background: #7dc9ac;
}
.bar-column small {
  font-size: 0.875rem;
  white-space: nowrap;
}
.storage-warning {
  padding: 9px 20px;
  background: #fff4da;
  color: #9a641b;
  font-size: 0.875rem;
  text-align: center;
}
@media (min-width: 1600px) {
  .problem-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero {
    grid-template-columns: 1.4fr 1fr;
  }
  .hero-demo {
    margin-right: 30px;
  }
  .viz-type {
    display: inline;
    margin-left: auto;
    font-size: 0.875rem;
  }
}
@media (max-width: 1200px) {
  :root {
    --sidebar: 195px;
  }
  .sidebar {
    padding: 25px 13px;
  }
  .topbar {
    padding: 0 27px;
  }
  .main {
    padding: 27px;
  }
  .hero {
    padding: 25px;
    gap: 20px;
  }
  .hero-demo {
    padding: 14px;
  }
  .library-layout {
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 18px;
  }
  .problem-card {
    padding: 13px 13px 0;
  }
  .card-meta {
    font-size: 0.875rem;
  }
  .heading-actions {
    flex-direction: column;
  }
  .lab-workspace {
    grid-template-columns: minmax(0, 1fr) 250px;
  }
  .hero h1 {
    font-size: 2.1rem;
  }
  .pattern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .progress-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lesson-grid {
    gap: 18px;
  }
  .lab-header {
    padding: 16px 20px;
  }
  .input-form {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 1020px) {
  :root {
    --sidebar: 180px;
  }
  .brand {
    font-size: 1rem;
  }
  .brand-mark {
    width: 30px;
    height: 30px;
  }
  .brand-sub {
    margin-left: 40px;
  }
  .main {
    padding: 24px;
  }
  .library-layout {
    grid-template-columns: 1fr;
  }
  .library-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .library-aside .progress-panel,
  .library-aside .continue-card {
    margin: 0;
  }
  .library-aside .side-note {
    display: none;
  }
  .hero h1 {
    font-size: 1.9rem;
  }
  .hero p {
    font-size: 0.875rem;
  }
  .demo-cell {
    width: 37px;
  }
  .demo-cell b {
    height: 39px;
  }
  .hero-actions .btn {
    font-size: 0.875rem;
    padding: 8px 11px;
  }
  .lab-workspace {
    grid-template-columns: 1fr;
  }
  .inspector {
    border-left: 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 18px 20px;
  }
  .inspector-label {
    grid-column: 1/-1;
    margin: 0;
  }
  .step-explanation {
    margin: 0;
  }
  .result-box {
    grid-column: 1/-1;
  }
  .lesson-grid {
    grid-template-columns: 1fr;
  }
  .problem-heading {
    flex-wrap: wrap;
  }
  .heading-actions {
    flex-direction: row;
    margin: 0;
  }
  .main .card-title {
    font-size: 1rem;
  }
  .main .card-description {
    font-size: 0.875rem;
  }
  .main .tags span {
    font-size: 0.875rem;
  }
  .card-meta {
    font-size: 0.875rem;
  }
  .card-open {
    font-size: 0.875rem;
  }
  .stats-strip {
    gap: 20px;
  }
  .stat:not(:last-child) {
    padding-right: 20px;
  }
  .filter-row .text-button {
    margin-left: 0;
  }
}
@media (max-width: 760px) {
  :root {
    --sidebar: 0px;
  }
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    padding: 16px 20px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .brand {
    font-size: 1.14rem;
  }
  .brand-sub,
  .nav-heading,
  .topic-nav,
  .sidebar-bottom {
    display: none;
  }
  .nav-links {
    display: flex;
    margin-top: 16px;
    gap: 4px;
    overflow: auto;
  }
  .nav-links a {
    font-size: 0.875rem;
    padding: 8px 10px;
    gap: 6px;
    white-space: nowrap;
  }
  .nav-links a svg {
    width: 16px;
  }
  .nav-count {
    display: none;
  }
  .topbar {
    height: 50px;
    padding: 0 20px;
  }
  .topbar-right > span,
  .keyboard-tag {
    display: none;
  }
  .topbar-right .avatar {
    width: 26px;
    height: 26px;
    font-size: 0.875rem;
  }
  .breadcrumb {
    font-size: 0.875rem;
  }
  .main {
    padding: 22px 20px;
  }
  .hero {
    padding: 23px;
    grid-template-columns: 1.15fr 1fr;
    gap: 18px;
  }
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero p {
    font-size: 0.875rem;
  }
  .hero .eyebrow {
    font-size: 0.875rem;
  }
  .hero-demo {
    padding: 12px;
    transform: rotate(-1deg);
  }
  .demo-header {
    font-size: 0.875rem;
  }
  .demo-header span {
    font-size: 0.875rem;
  }
  .demo-array {
    gap: 6px;
    padding: 25px 0 15px;
  }
  .demo-cell {
    width: 31px;
  }
  .demo-cell b {
    height: 34px;
    font-size: 0.9rem;
  }
  .demo-terminal {
    font-size: 0.875rem;
    padding: 9px;
  }
  .demo-footer {
    font-size: 0.875rem;
  }
  .demo-cell.active:before {
    left: 15px;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 7px;
  }
  .hero .btn {
    font-size: 0.875rem;
    padding: 8px 10px;
    min-height: 35px;
  }
  .stat {
    font-size: 0.875rem;
  }
  .stat strong {
    font-size: 0.9rem;
  }
  .stats-strip {
    margin: 18px 0 28px;
    gap: 15px;
  }
  .stat:not(:last-child) {
    padding-right: 15px;
  }
  .stat svg {
    width: 16px;
  }
  .filter-row {
    gap: 7px;
  }
  .filter-row select {
    max-width: 160px;
  }
  .filter-row .text-button {
    margin-left: auto;
  }
  .problem-grid {
    gap: 13px;
  }
  .problem-card {
    padding: 14px 15px 0;
  }
  .page-heading h1 {
    font-size: 1.8rem;
  }
  .input-form {
    flex-wrap: wrap;
  }
  .input-form .main-input {
    flex-basis: 65%;
  }
  .problem-heading h1 {
    font-size: 1.8rem;
  }
  .objective-row {
    font-size: 0.875rem;
    gap: 8px;
  }
  .lab-header > span {
    display: none;
  }
  .stage-container {
    padding: 15px;
  }
  .visual-stage {
    padding: 20px 12px;
  }
  .animation-controls {
    padding: 13px;
    gap: 10px;
  }
  .timeline-label {
    order: 5;
    flex-basis: 100%;
    margin: 7px 0;
  }
  .step-count {
    margin-left: auto;
  }
  .speed-label {
    margin-left: auto;
  }
  .lesson-nav a {
    padding: 13px;
    font-size: 0.875rem;
  }
  .lesson-card {
    padding: 20px;
  }
  .roadmap-item {
    padding: 17px;
    gap: 14px;
  }
  .list-view .problem-card {
    display: flex;
  }
  .list-view .card-open {
    border-top: 1px solid var(--line);
  }
  .list-view .card-meta {
    justify-content: flex-start;
    margin: 10px 0;
    gap: 30px;
  }
  .footer {
    font-size: 0.875rem;
    gap: 15px;
  }
  .pattern-card {
    padding: 21px;
  }
}
@media (max-width: 520px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .hero h1 {
    font-size: 2.05rem;
    max-width: 300px;
  }
  .hero p {
    font-size: 0.875rem;
  }
  .hero-demo {
    display: none;
  }
  .hero .eyebrow {
    font-size: 0.875rem;
  }
  .hero .btn {
    font-size: 0.875rem;
    min-height: 40px;
  }
  .main {
    padding: 20px 16px;
  }
  .stats-strip {
    gap: 12px;
    justify-content: space-between;
  }
  .stat {
    gap: 5px;
    font-size: 0.875rem;
  }
  .stat:not(:last-child) {
    padding-right: 12px;
  }
  .stat svg {
    display: none;
  }
  .section-line h2 {
    font-size: 1.2rem;
  }
  .section-line .text-link {
    font-size: 0.875rem;
  }
  .section-subtitle {
    font-size: 0.875rem;
  }
  .search-hint {
    display: none;
  }
  .filter-row .segmented {
    flex-basis: 100%;
  }
  .segmented button {
    flex: 1;
    font-size: 0.875rem;
    padding: 7px 12px;
  }
  .filter-row select,
  .topic-picker summary,
  .filter-bookmark {
    font-size: 0.875rem;
    max-width: 145px;
  }
  .filter-row .text-button {
    font-size: 0.875rem;
  }
  .problem-grid {
    grid-template-columns: 1fr;
  }
  .problem-card {
    padding: 17px 20px 0;
  }
  .card-title {
    font-size: 1.05rem !important;
  }
  .card-description {
    font-size: 0.875rem !important;
  }
  .card-meta {
    font-size: 0.875rem;
  }
  .card-pattern {
    font-size: 0.875rem;
  }
  .card-open {
    font-size: 0.875rem;
    padding: 13px 0;
  }
  .library-aside {
    grid-template-columns: 1fr;
  }
  .sort-label {
    display: none;
  }
  .results-toolbar {
    gap: 7px;
  }
  .result-count {
    font-size: 0.875rem;
  }
  .progress-page,
  .pattern-grid {
    grid-template-columns: 1fr;
  }
  .problem-heading h1 {
    font-size: 1.6rem;
  }
  .heading-actions {
    width: 100%;
  }
  .heading-actions .btn {
    flex: 1;
  }
  .input-form .main-input {
    flex-basis: 100%;
  }
  .target-input {
    max-width: none;
    flex: 1;
  }
  .input-form .btn {
    flex: 1;
  }
  .mode-row {
    padding-left: 20px;
    padding-right: 20px;
  }
  .inspector {
    grid-template-columns: 1fr;
  }
  .array-row {
    gap: 6px;
  }
  .array-cell {
    min-width: 38px;
    height: 42px;
    font-size: 0.875rem;
  }
  .array-item {
    min-width: 38px;
  }
  .grid-visual {
    grid-template-columns: repeat(var(--cols), minmax(20px, 33px));
    gap: 4px;
  }
  .grid-cell {
    width: 100%;
    height: 32px;
    font-size: 0.875rem;
  }
  .bar-chart {
    gap: 8px;
  }
  .bar-column {
    min-width: 24px;
  }
  .step-count {
    font-size: 0.875rem;
  }
  .playback-buttons .icon-button {
    width: 30px;
  }
  .speed-label {
    font-size: 0.875rem;
    gap: 2px;
  }
  .footer {
    flex-direction: column;
    gap: 5px;
  }
  .roadmap-item h3 {
    font-size: 0.875rem;
  }
  .roadmap-item .badge {
    font-size: 0.875rem;
  }
  .roadmap-item > svg {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Readable teaching content and compact, high-contrast controls. */
.card-description {
  color: #687084;
  font-size: 0.875rem;
}
.card-meta,
.card-pattern,
.tags span,
.problem-number {
  color: #6c7185;
  font-size: 0.875rem;
}
.card-open {
  font-size: 0.875rem;
}
.card-title {
  font-size: 1rem;
}
.nav-links a {
  font-size: 0.875rem;
}
.topic-nav a {
  font-size: 0.875rem;
}
.hero p,
.problem-heading p,
.lesson-card p,
.lesson-card li {
  font-size: 1rem;
  color: #657086;
}
.hero .eyebrow {
  font-size: 0.875rem;
}
.lesson-card h3 {
  font-size: 1rem;
}
.lesson-card .complexity-disclaimer {
  font-size: 0.875rem;
}
.step-explanation p {
  font-size: 0.94rem;
  color: #666379;
}
.filter-row select,
.topic-picker summary,
.filter-bookmark,
.segmented button,
.filter-row .text-button,
.search-wrap input {
  font-size: 0.875rem;
}
.filter-row select {
  max-width: 185px;
}
.filter-row select,
.topic-picker summary,
.filter-bookmark {
  height: 39px;
}
.sort-label,
#sort,
.result-count {
  font-size: 0.875rem;
}
.input-form label,
.mode-button,
.input-form .btn,
.speed-label,
.play-button,
.quiz-option {
  font-size: 0.875rem;
}
.card-pattern {
  flex-wrap: wrap;
}
.viz-type {
  display: inline;
  color: #727184;
  border-left: 1px solid #dedbe9;
  padding-left: 7px;
  margin-left: auto;
  font-size: 0.875rem;
}
.stage-label,
.legend,
.inspector-label,
.array-index,
.pointer-label {
  font-size: 0.875rem;
}
.pointer-label {
  height: 23px;
}
.state-terminal {
  font-size: 0.875rem;
}
.code-panel pre {
  font-size: 0.875rem;
}
.code-tabs button {
  font-size: 0.875rem;
}
.code-mode-caption {
  font-size: 0.875rem;
}
.stage-top,
.lab-header > span {
  font-size: 0.875rem;
}
.demo-terminal {
  font-size: 0.875rem;
}
.demo-cell small {
  font-size: 0.875rem;
}
.demo-footer {
  font-size: 0.875rem;
  flex-wrap: wrap;
}
.demo-header,
.demo-header span {
  font-size: 0.875rem;
}
.stat {
  font-size: 0.875rem;
}
.stats-strip {
  flex-wrap: wrap;
  row-gap: 12px;
}
.tags span {
  color: #687085;
}
.section-subtitle,
.side-note p,
.continue-card p {
  color: #697085;
}
.footer {
  color: #72778a;
}
.main .card-description {
  font-size: 0.875rem;
}
.progress-panel .text-link,
.continue-card .btn,
.recent-link,
.text-link {
  font-size: 0.875rem;
}
.progress-summary > span,
.difficulty-progress > div {
  font-size: 0.875rem;
}
.continue-card .eyebrow {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}
.input-error {
  font-size: 0.875rem;
}
.nav-heading {
  color: #727b8e;
}
.array-item {
  min-width: 45px;
}
.terminal-dots {
  justify-content: flex-start !important;
}
.main .card-title {
  font-size: 1rem;
}
.progress-panel {
  margin-top: 51px;
}
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-demo {
    display: none;
  }
  .hero p {
    max-width: 560px;
  }
  .hero h1 {
    font-size: 2.3rem;
  }
  .hero .btn {
    font-size: 0.875rem;
  }
  .hero {
    padding: 28px;
  }
  .progress-panel {
    margin-top: 51px;
  }
  .viz-type {
    margin-left: 0;
  }
  .heading-actions {
    flex-wrap: wrap;
  }
}
@media (max-width: 1020px) {
  .library-aside .progress-panel {
    margin-top: 0;
  }
}
@media (max-width: 760px) {
  .nav-links.topic-nav {
    display: none;
  }
  .nav-links a {
    font-size: 0.875rem;
  }
  .hero h1 {
    font-size: 2.1rem;
  }
  .hero p {
    font-size: 0.94rem;
  }
  .stat {
    font-size: 0.875rem;
  }
  .stats-strip {
    gap: 12px;
  }
  .stat:not(:last-child) {
    padding-right: 12px;
  }
  .filter-row select,
  .topic-picker summary,
  .filter-bookmark {
    font-size: 0.875rem;
  }
  .filter-row .text-button {
    font-size: 0.875rem;
  }
  .mode-row > span {
    font-size: 0.875rem;
  }
  .progress-page .progress-panel {
    margin-top: 0;
  }
  .demo-terminal {
    font-size: 0.875rem;
  }
}
@media (max-width: 520px) {
  .main .card-description {
    font-size: 0.94rem !important;
  }
  .hero h1 {
    font-size: 1.95rem;
  }
  .nav-links {
    gap: 0;
  }
  .nav-links a {
    padding: 8px 7px;
    font-size: 0.875rem;
  }
  .stat {
    font-size: 0.875rem;
  }
  .stat:not(:last-child) {
    padding-right: 8px;
  }
  .stats-strip {
    gap: 8px;
  }
  .filter-row select {
    max-width: 150px;
  }
  .speed-label,
  .speed-label select {
    font-size: 0.875rem;
  }
  .play-button {
    font-size: 0.875rem;
    min-width: 79px;
  }
  .animation-controls {
    gap: 7px;
  }
  .step-count {
    font-size: 0.875rem;
  }
  .legend {
    gap: 10px;
  }
  .stage-label {
    font-size: 0.875rem;
  }
  .array-item {
    min-width: 40px;
  }
  .array-index {
    font-size: 0.875rem;
  }
  .pointer-label {
    font-size: 0.875rem;
  }
  .lab-header {
    padding: 16px;
  }
  .objective-row {
    display: grid;
    gap: 8px;
  }
  .heading-actions .btn {
    font-size: 0.875rem;
  }
  .problem-heading .btn {
    padding: 8px 10px;
  }
  .sort-label,
  #sort,
  .result-count {
    font-size: 0.875rem;
  }
  .filter-row .segmented {
    flex-basis: 100%;
  }
  .main .progress-panel {
    margin-top: 0;
  }
}

/* Allow lesson columns to shrink around scrollable code on narrow screens. */
.lesson-grid > div {
  min-width: 0;
}
@media (max-width: 1020px) {
  .lesson-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.progress-page .progress-panel {
  margin: 0;
}

/* LeeVis accessibility preferences and theme. */
:root {
  color-scheme: light;
  --surface: #ffffff;
  --soft: #f1f3fa;
}
:root[data-text-size="large"] {
  font-size: 19px;
}
.text-size-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: var(--muted);
}
.text-size-label select {
  background: var(--surface);
  color: var(--ink);
  border-radius: 7px;
  padding: 7px;
  font-size: 0.875rem;
  max-width: 145px;
}
.theme-toggle {
  font-size: 0.875rem;
  min-height: 38px;
  white-space: nowrap;
  padding: 7px 12px;
}
.topbar-right {
  gap: 12px;
}
.topbar-right > span {
  display: none;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ededed;
  --muted: #b0b0b0;
  --line: #303030;
  --paper: #0b0b0b;
  --surface: #151515;
  --soft: #222222;
  --primary: #b0a5ff;
  --primary-dark: #c6bdff;
  --mint: #8cddbd;
  background: var(--paper);
}
[data-theme="dark"] body {
  background: var(--paper);
}
[data-theme="dark"]
  :is(
    .sidebar,
    .topbar,
    .problem-card,
    .panel,
    .progress-panel,
    .lab,
    .animation-controls,
    .lesson-card,
    .pattern-card,
    .roadmap-item,
    .lesson-nav a,
    .topic-menu,
    .search-wrap,
    .segmented,
    .view-toggle,
    .empty-state
  ) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"]
  :is(
    button,
    input,
    select,
    .btn,
    .input-form input,
    .filter-row select,
    .topic-picker summary,
    .filter-bookmark,
    .text-size-label select
  ) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
[data-theme="dark"] :is(.btn.primary, .brand-mark) {
  background: #7b6bee;
  color: white;
  border-color: #8a7af5;
}
[data-theme="dark"] .btn.primary:hover {
  background: #8a7af5;
}
[data-theme="dark"]
  :is(
    .btn.secondary,
    .pseudocode,
    .complexity-box,
    .mode-button,
    .tags span,
    .demo-header span
  ) {
  background: var(--soft);
  color: #cccccc;
  border-color: var(--line);
}
[data-theme="dark"] :is(.hero, .continue-card) {
  background: linear-gradient(125deg, #202020, #151515);
  border-color: #333333;
}
[data-theme="dark"] .hero-demo {
  background: #151515;
  border-color: #3a3a3a;
}
[data-theme="dark"] :is(.lab-header, .inspector) {
  background: #111111;
  border-color: var(--line);
}
[data-theme="dark"] .visual-stage {
  background-color: #101010;
  background-image: radial-gradient(#2a2a2a 1px, transparent 1px);
  border-color: var(--line);
}
[data-theme="dark"]
  :is(.array-cell, .demo-cell b, .tree-node circle, .tree-node rect) {
  background: #262626;
  fill: #262626;
  border-color: #555555;
  stroke: #555555;
  color: #eeeeee;
}
[data-theme="dark"] :is(.array-cell.current, .demo-cell.active b) {
  background: #443771 !important;
  border-color: #a691ff !important;
  color: #e7ddff !important;
}
[data-theme="dark"] .array-cell.string-selected {
  background: #55421c;
  border-color: #c7a65a;
  color: #f4e4b9;
}
[data-theme="dark"] .string-range {
  background: #181818;
  border-color: var(--line);
}
[data-theme="dark"]
  :is(.array-cell.resolved, .demo-cell.found b, .map-entry, .result-box) {
  background: #143c35;
  border-color: #3f917a;
  color: #9de4c7;
}
[data-theme="dark"] :is(.tree-node.current circle, .tree-node.current rect) {
  fill: #443771;
  stroke: #b6a0ff;
}
[data-theme="dark"] :is(.tree-node.resolved circle, .tree-node.resolved rect) {
  fill: #184637;
  stroke: #7ac8a7;
}
[data-theme="dark"] .tree-node text {
  fill: #e6e6e6;
}
[data-theme="dark"] :is(.memory-tray, .stack-tray) {
  background: #181818;
  border-color: var(--line);
}
[data-theme="dark"] .stack-items > div {
  background: #443771;
  border-color: #9c89da;
  color: #e9e0ff;
}
[data-theme="dark"]
  :is(
    .nav-links a.active,
    .nav-links a:hover,
    .segmented button.selected,
    .mode-button.selected,
    .view-toggle button.selected,
    .filter-bookmark.selected
  ) {
  background: #383052;
  color: #d5caff;
}
[data-theme="dark"] :is(.progress-track, .nav-count, .avatar) {
  background: #37314e;
  color: #c7baff;
}
[data-theme="dark"]
  :is(
    .hero p,
    .card-description,
    .card-meta,
    .card-pattern,
    .tags span,
    .problem-number,
    .nav-links a,
    .problem-heading p,
    .lesson-card p,
    .lesson-card li,
    .step-explanation p,
    .footer,
    .legend,
    .stage-label,
    .stage-top,
    .section-subtitle,
    .side-note p,
    .side-note h3,
    .continue-card p,
    .progress-summary > span,
    .result-count,
    .sort-label,
    .topic-menu small,
    .objective-row,
    .heading-meta,
    .breadcrumb,
    .input-form label,
    .mode-row > span,
    .empty-array,
    .inspector-label,
    .array-index,
    .pointer-label,
    .demo-footer,
    .demo-cell small,
    .brand-sub,
    .sidebar-bottom p,
    .progress-panel h3,
    .breadcrumb strong,
    .quiz-option,
    .stage-top b,
    .objective-row strong,
    .lab-header > span,
    .speed-label,
    .input-error:empty,
    .continue-card .eyebrow
  ) {
  color: #bdbdbd;
}
[data-theme="dark"]
  :is(
    .card-title,
    .stat strong,
    .page-heading h1,
    .lesson-card h2,
    .progress-summary strong
  ) {
  color: #eeeeee;
}
[data-theme="dark"] :is(.badge.easy, .roadmap-item.completed .roadmap-index) {
  background: #1b3c33;
  color: #9dddc3;
}
[data-theme="dark"] .badge.medium {
  background: #46391d;
  color: #f2d594;
}
[data-theme="dark"] .badge.hard {
  background: #462936;
  color: #f2b0c2;
}
[data-theme="dark"] .input-error {
  color: #ffb7bc;
}
[data-theme="dark"] .grid-cell.water {
  background: #1b2b44;
  color: #8ca6c7;
}
[data-theme="dark"] .grid-cell.land {
  background: #303b34;
  color: #c5d5b8;
  border-color: #65735c;
}
[data-theme="dark"] .grid-cell.current {
  background: #58417f !important;
  color: #fff !important;
}
[data-theme="dark"] .array-cell.discarded {
  opacity: 0.5;
  background: #161616;
}
[data-theme="dark"] .card-open {
  border-color: var(--line);
}
[data-theme="dark"] .text-size-label {
  color: var(--muted);
}

/* The call tree never shrinks its text to fit; the stage scrolls instead. */
.visual-stage {
  max-height: 520px;
  justify-content: flex-start;
  scroll-behavior: auto;
}
.call-tree-wrap {
  width: max-content;
  min-width: 100%;
}
.trace-help {
  font-size: 0.875rem;
  max-width: 550px;
  color: var(--muted);
  white-space: normal;
}
.call-tree {
  display: block;
  max-width: none;
}
.call-edge {
  fill: none;
  stroke: #a5adc4;
  stroke-width: 1.5;
}
.call-edge-label {
  font: 12px var(--mono);
  fill: #626a81;
}
.call-node rect {
  fill: var(--surface);
  stroke: #abb1c5;
  stroke-width: 1.5;
}
.call-node text {
  fill: var(--ink);
  font: 13px var(--mono);
}
.call-node .call-return {
  font-size: 12px;
  fill: var(--muted);
}
.call-node.returned rect {
  fill: #e0f5ea;
  stroke: #5ca482;
}
.call-node.cached rect {
  fill: #fff0ce;
  stroke: #cc9a39;
}
.call-node.current rect {
  fill: #e8e0ff;
  stroke: #8668e3;
  stroke-width: 3;
}
.memo-panel {
  margin-top: 18px;
}
.memo-panel h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}
.memo-entries {
  display: grid;
  gap: 7px;
  max-height: 230px;
  overflow: auto;
}
.memo-entry {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  font-size: 0.875rem;
}
.memo-entry.current {
  border: 2px solid #b59134;
}
.memo-entry strong {
  color: var(--mint);
}
.dp-matrix {
  border-collapse: collapse;
  background: var(--surface);
  font: 0.94rem var(--mono);
  min-width: 310px;
  width: 100%;
}
.dp-matrix caption {
  font:
    0.875rem/1.5 "DM Sans",
    sans-serif;
  padding: 10px;
  color: var(--muted);
}
.dp-matrix th,
.dp-matrix td {
  padding: 12px;
  border: 1px solid var(--line);
  text-align: center;
}
.dp-matrix td.current {
  background: #e8e0ff;
  outline: 2px solid #8a75cf;
  outline-offset: -2px;
  color: #4a3588;
}
.dp-matrix td.source {
  box-shadow: inset 0 0 0 2px #32a394;
  background: #dff6ed;
  color: #236657;
}
[data-theme="dark"] .call-node.returned rect {
  fill: #234f3f;
  stroke: #83ba9d;
}
[data-theme="dark"] .call-node.cached rect {
  fill: #514123;
  stroke: #d7b465;
}
[data-theme="dark"] .call-node.current rect {
  fill: #4c3976;
  stroke: #c1a7ff;
}
[data-theme="dark"] .call-edge-label {
  fill: #c0c9df;
}
[data-theme="dark"] .dp-matrix td.current {
  background: #4c3976;
  color: #eee4ff;
}
[data-theme="dark"] .dp-matrix td.source {
  background: #1e443c;
  color: #b4ebd7;
}
.legend .amber {
  background: #d5a94d;
}
.legend .cyan {
  background: #30a599;
}
@media (max-width: 760px) {
  .topbar {
    height: auto;
    min-height: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
  }
  .topbar-right {
    margin-left: auto;
  }
  .topbar-right .avatar {
    display: none;
  }
  .text-size-label {
    font-size: 0.875rem;
  }
  .text-size-label select {
    max-width: 135px;
  }
  .theme-toggle {
    font-size: 0.875rem;
  }
  .visual-stage {
    max-height: 440px;
  }
  .trace-help {
    max-width: 280px;
  }
  .main {
    min-width: 0;
  }
}

/* Focused recursive playback: bounded layout, explicit values and child results. */
.call-view-controls[hidden] {
  display: none;
}
.call-view-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.call-view-controls > span {
  font-size: 0.875rem;
  color: var(--muted);
}
.visual-stage.focus-stage {
  max-height: none;
  overflow: visible;
  padding: 20px;
  background-size: 20px 20px;
}
.call-focus {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 17px;
}
.focus-input-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.focus-value {
  display: grid;
  gap: 4px;
  min-width: 43px;
  text-align: center;
  color: var(--muted);
}
.focus-value strong {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  color: var(--ink);
  font: 500 1rem var(--mono);
  transition:
    background 0.25s,
    border-color 0.25s;
}
.focus-value small {
  font: 0.875rem var(--mono);
}
.focus-value.current strong {
  background: #eee6ff;
  border-color: #9677e0;
  color: #51348c;
}
.focus-path {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}
.path-call {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 5px 8px;
  border-radius: 6px;
  font: 0.875rem var(--mono);
  color: var(--muted);
}
.path-call small {
  font-size: 0.75rem;
  opacity: 0.8;
}
.path-call.current {
  border-color: #9c84dc;
  color: var(--primary);
}
.path-arrow {
  color: var(--muted);
}
.focus-current {
  border: 1px solid #b1a0dd;
  background: #f4efff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 5px 18px #6650990a;
}
.focus-call-top {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #766197;
}
.focus-call-top > span:first-child {
  font-weight: 650;
  letter-spacing: 0.08em;
}
.focus-equation {
  display: flex;
  gap: 17px;
  align-items: center;
  margin: 12px 0;
  font: 500 1.7rem var(--mono);
  color: #62499b;
}
.focus-equation strong {
  font-weight: 600;
}
.focus-current p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #6c647c;
  margin-bottom: 0;
}
.focus-current.returned {
  background: #edf8f3;
  border-color: #8fc9af;
}
.focus-current.returned .focus-equation {
  color: #24714f;
}
.focus-current.cached {
  background: #fff6df;
  border-color: #d5b86d;
}
.focus-current.cached .focus-equation {
  color: #8b6b25;
}
.combine-equation,
.cache-reuse {
  border-top: 1px solid #b4a8c655;
  padding-top: 12px;
  margin-top: 12px;
  font-size: 0.94rem;
  color: var(--ink);
  line-height: 1.6;
}
.focus-children-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--muted);
}
.focus-children-header strong {
  color: var(--ink);
  font-weight: 600;
}
.focus-children {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.child-call {
  border: 1px solid var(--line);
  border-top: 3px solid #a69bd0;
  background: var(--surface);
  border-radius: 8px;
  padding: 11px 13px;
  min-width: 0;
}
.child-call > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 0;
  font: 0.94rem var(--mono);
  color: var(--ink);
}
.child-call b {
  font-size: 1.15rem;
}
.child-call small,
.child-edge {
  font-size: 0.8rem;
  color: var(--muted);
}
.child-call.returned {
  border-top-color: #50a283;
}
.child-call.cached {
  border-top-color: #d6ac4d;
}
.no-children {
  grid-column: 1/-1;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 15px;
  color: var(--muted);
  font-size: 0.875rem;
}
.trace-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.8rem;
  color: var(--muted);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
@keyframes call-arrive {
  from {
    transform: translateY(6px);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.call-arrival {
  animation: call-arrive 0.25s ease-out;
}
[data-theme="dark"] .focus-value.current strong {
  background: #42315f;
  color: #dfcbff;
  border-color: #a990df;
}
[data-theme="dark"] .focus-current {
  background: #2c2542;
  border-color: #78649e;
}
[data-theme="dark"] .focus-equation {
  color: #d6bdff;
}
[data-theme="dark"] .focus-call-top,
[data-theme="dark"] .focus-current p {
  color: #c8bfd9;
}
[data-theme="dark"] .focus-current.returned {
  background: #193c34;
  border-color: #4b8e78;
}
[data-theme="dark"] .focus-current.returned .focus-equation {
  color: #9bd7bd;
}
[data-theme="dark"] .focus-current.cached {
  background: #40361f;
  border-color: #a28a4a;
}
[data-theme="dark"] .focus-current.cached .focus-equation {
  color: #efd295;
}
@media (max-width: 760px) {
  .call-view-controls {
    align-items: flex-start;
    flex-direction: column;
  }
  .call-view-controls > span {
    display: none;
  }
  .visual-stage.focus-stage {
    padding: 14px;
  }
  .focus-current {
    padding: 14px;
  }
  .focus-equation {
    font-size: 1.4rem;
  }
  .focus-children {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .call-arrival {
    animation: none;
  }
}
/* Keep replay controls visible while reading a tall visualization. */
.lab {
  overflow: clip;
}
.animation-controls {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -4px 16px #0b0b0b0b;
}
/* Neutral charcoal surfaces, with semantic colors reserved for algorithm state. */
[data-theme="dark"] :is(.state-terminal, .code-panel) {
  background: #101010;
  border-color: #303030;
  color: #e8e8e8;
}
[data-theme="dark"] :is(.code-top, .code-tabs) {
  border-color: #303030;
}
[data-theme="dark"] :is(.code-mode-caption, .state-terminal span) {
  color: #aaa;
}
[data-theme="dark"] .code-tabs button {
  background: #171717;
}
[data-theme="dark"] .code-tabs button.selected {
  background: #30273d;
  color: #e0d1ff;
}
.sorting-view {
  min-width: 0;
}
.sort-caption {
  font-weight: 700;
  margin: 0 0 8px;
  font-size: 1rem;
}
.sort-range,
.sort-scale {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.sort-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 2px;
  min-height: 210px;
}
.sort-column {
  flex: 1 0 44px;
  max-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.sort-marker {
  min-height: 20px;
  color: var(--primary);
  font: 600 0.875rem var(--mono);
}
.sort-column strong {
  font: 600 1rem var(--mono);
}
.sort-column small {
  font: 0.875rem var(--mono);
  color: var(--muted);
}
.sort-bar {
  width: 100%;
  border: 1px solid #b8b2d4;
  border-radius: 6px 6px 2px 2px;
  background: #dcd7f0;
  transition:
    height 0.2s ease,
    background 0.2s ease;
}
.sort-column.fixed .sort-bar {
  background: #a5dec8;
  border-color: #438d70;
}
.sort-column.comparing .sort-bar {
  background: #957ce7;
  border-color: #7158c2;
  box-shadow: 0 0 0 2px #957ce72a;
}
.sort-column.outside {
  opacity: 0.45;
}
.sort-held,
.sort-buffer,
.sort-stack {
  padding: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 14px;
  font-size: 0.9rem;
}
.sort-held {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.sort-held strong,
.sort-buffer strong {
  border: 1px solid var(--primary);
  border-radius: 5px;
  padding: 7px 10px;
  font-family: var(--mono);
}
.sort-buffer > div {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sort-stack > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sort-stack code {
  overflow-wrap: anywhere;
}
.sort-step {
  line-height: 1.65;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
[data-theme="dark"] .sort-bar {
  background: #343434;
  border-color: #666;
}
[data-theme="dark"] .sort-column.fixed .sort-bar {
  background: #285440;
  border-color: #72b694;
}
[data-theme="dark"] .sort-column.comparing .sort-bar {
  background: #67518d;
  border-color: #bc9fee;
}
@media (prefers-reduced-motion: reduce) {
  .sort-bar {
    transition: none;
  }
}
.sort-column.comparing .sort-bar {
  animation: sort-emphasis 0.3s ease-out;
}
@keyframes sort-emphasis {
  from {
    filter: brightness(1.45);
  }
  to {
    filter: brightness(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sort-column.comparing .sort-bar {
    animation: none;
  }
}
.array-lab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 20px;
}
.array-lab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.array-lab-item small {
  min-height: 18px;
  font: 0.8rem var(--mono);
  color: var(--muted);
}
.array-lab-item strong {
  min-width: 46px;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 600 1rem var(--mono);
}
.array-lab-item strong.current {
  background: #e7dffc;
  border-color: #956dd4;
  color: #4b2c78;
  animation: sort-emphasis 0.3s ease-out;
}
.array-lab-item strong.kept {
  background: #d7efe3;
  border-color: #62a184;
  color: #24513e;
}
.array-lab-item strong.window {
  background: #e1f0ed;
  border-color: #52978a;
  color: #24564b;
}
.array-prefix,
.array-held {
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 14px;
  border-radius: 9px;
  margin: 16px 0;
  font-size: 0.9rem;
}
.array-prefix > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.array-prefix code {
  padding: 7px;
  background: var(--surface);
  border-radius: 6px;
}
.array-step,
.array-lab-note {
  line-height: 1.65;
}
.array-step {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
[data-theme="dark"] .array-lab-item strong.current {
  background: #392b4c;
  color: #e3ccff;
  border-color: #a887d3;
}
[data-theme="dark"] .array-lab-item strong.kept {
  background: #203b2e;
  color: #b7e2c9;
  border-color: #638c76;
}
[data-theme="dark"] .array-lab-item strong.window {
  background: #203632;
  color: #b6ded5;
  border-color: #5e8c80;
}
@media (prefers-reduced-motion: reduce) {
  .array-lab-item strong.current {
    animation: none;
  }
}
.matrix-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.matrix-lab table {
  border-collapse: separate;
  border-spacing: 6px;
  margin: 12px auto;
}
.matrix-lab caption {
  text-align: left;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.matrix-lab th {
  font: 0.875rem var(--mono);
  color: var(--muted);
  padding: 5px;
}
.matrix-lab td {
  min-width: 48px;
  height: 48px;
  text-align: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  font: 600 1rem var(--mono);
}
.matrix-lab td.current {
  background: #e7dffc;
  border-color: #956dd4;
  color: #4b2c78;
}
.matrix-lab td.visited {
  background: #d7efe3;
  border-color: #62a184;
  color: #24513e;
}
[data-theme="dark"] .matrix-lab td.current {
  background: #392b4c;
  color: #e3ccff;
  border-color: #a887d3;
}
[data-theme="dark"] .matrix-lab td.visited {
  background: #203b2e;
  color: #b7e2c9;
  border-color: #638c76;
}
/* Recursion lessons: keep the active decision visible without a sprawling call tree. */
.backtrack-layout {
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 16px;
  align-content: start;
  font-size: 1rem;
}
.backtrack-section {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffffec;
}
.backtrack-section .stage-label { margin-bottom: 7px; }
.backtrack-cells, .backtrack-pills, .backtrack-frames {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  overflow-wrap: anywhere;
}
.backtrack-cell {
  min-width: 48px;
  min-height: 50px;
  display: grid;
  place-items: center;
  padding: 5px 8px;
  border: 1px solid #c8cbd9;
  border-radius: 8px;
  background: var(--paper);
  font: 600 1rem var(--mono);
}
.backtrack-cell small { color: var(--muted); font-size: .75rem; }
.backtrack-cell.current, .backtrack-tile.current, .backtrack-frames .current {
  border-color: #8975d4;
  background: #ebe5fc;
  color: #392271;
}
.backtrack-board { overflow-x: auto; width: max-content; max-width: 100%; }
.backtrack-board-row { display: flex; gap: 3px; margin-bottom: 3px; }
.backtrack-tile {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d9dbe7;
  border-radius: 5px;
  background: var(--paper);
  font: 600 .875rem var(--mono);
}
.backtrack-tile.visited { background: #dff4eb; color: #176c4e; }
.backtrack-choice {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--paper);
  font: .9375rem/1.5 var(--mono);
  overflow-wrap: anywhere;
}
.backtrack-frames > span, .backtrack-pills > span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  font: .875rem/1.4 var(--mono);
}
.backtrack-frames > b { color: var(--muted); font-weight: 400; }
[data-theme="dark"] .backtrack-section { background: #1c1c1c; }
[data-theme="dark"] :is(.backtrack-cell, .backtrack-tile, .backtrack-choice, .backtrack-frames > span, .backtrack-pills > span) {
  background: #242424;
  border-color: #444;
  color: #ededed;
}
[data-theme="dark"] :is(.backtrack-cell.current, .backtrack-tile.current, .backtrack-frames .current) {
  background: #3f315d;
  border-color: #aa90e8;
  color: #f0e8ff;
}
[data-theme="dark"] .backtrack-tile.visited { background: #234333; color: #c0efd3; }
@media (max-width: 520px) {
  .backtrack-layout { gap: 10px; }
  .backtrack-section { padding: 10px; }
  .backtrack-tile { width: 28px; height: 28px; font-size: .8rem; }
}

/* Shared replay motion keeps the original dark canvas and problem-specific views. */
.call-graph-panel { min-width: 0; width: 100%; }
.call-graph-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--ink); }
.call-graph-heading > span { font: 600 .72rem var(--mono); color: var(--primary); letter-spacing: .06em; }
.call-graph-scroll { overflow: auto; max-width: 100%; max-height: 420px; padding: 8px 0; }
.call-graph { display: block; max-width: none; margin: auto; }
.call-graph-empty { min-height: 110px; display: grid; place-content: center; color: var(--muted); text-align: center; }
.call-breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; font: .78rem var(--mono); }
.call-breadcrumb > span { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--surface); }
.call-breadcrumb .current { border-color: var(--primary); color: var(--primary); }
.call-breadcrumb small, .call-breadcrumb b { color: var(--muted); }
.call-node .call-local { font-size: 11px; fill: var(--muted); }
.call-node.on-path:not(.current) rect { stroke: var(--primary); stroke-width: 2; }
.call-edge.active-flow { stroke: var(--primary); stroke-width: 2.5; stroke-dasharray: 8 4; animation: signal-flow 1s linear infinite; }
.call-edge.return-flow { stroke: #4da681; stroke-width: 3; stroke-dasharray: 8 4; animation: signal-flow 1s linear infinite reverse; }
.call-node.current text { font-weight: 650; }
.call-graph-scroll:focus-visible, .visual-stage:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@keyframes signal-flow { to { stroke-dashoffset: -24; } }
.backtrack-graph { width: min(100%, 500px); display: block; margin: auto; }
.backtrack-graph line { stroke: var(--muted); stroke-width: 2; }
.backtrack-graph .conflict { stroke: #dc7067; stroke-width: 4; }
.backtrack-graph text { fill: var(--ink); font: 600 14px var(--mono); }
.backtrack-graph circle { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.backtrack-graph .current circle { stroke: var(--primary); stroke-width: 4; }
.choice-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.choice-chips > .choice-chip { border: 1px solid var(--primary); padding: 7px 10px; border-radius: 7px; background: var(--primary-soft); color: var(--primary); }
.backtrack-board.queens .backtrack-tile { width: 38px; height: 38px; font-size: 1.25rem; }
.queens .backtrack-board-row:nth-child(odd) .backtrack-tile:nth-child(even), .queens .backtrack-board-row:nth-child(even) .backtrack-tile:nth-child(odd) { background: var(--line); }
.sudoku .backtrack-tile:nth-child(3n) { border-right: 3px solid var(--muted); }
.sudoku .backtrack-board-row:nth-child(3n) { padding-bottom: 3px; border-bottom: 2px solid var(--muted); }
.backtrack-tile.blocked { background: var(--line); color: var(--muted); }
.backtrack-tile.current { outline: 2px solid var(--primary); outline-offset: -2px; }
.recursive-value-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font: 600 .95rem var(--mono); padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.recursive-value-panel strong { color: var(--primary); }
.visual-stage .array-row, .visual-stage .array-lab-row { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 600px) {
  .call-graph-scroll { max-height: 320px; }
  .call-graph-heading { font-size: .85rem; }
  .backtrack-board.queens .backtrack-tile { width: 30px; height: 30px; }
  .backtrack-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .call-edge.active-flow, .call-edge.return-flow { animation: none; stroke-dasharray: none; }
}
.vertical-stack { flex-direction:column; align-items:center; }
.vertical-stack .backtrack-cell { width:120px; }
.graph-color-label { fill:var(--muted); font-size:12px; }
.backtrack-graph g.current circle { stroke:var(--primary); stroke-width:5; }
.choice-chip small { display:block; font-size:11px; color:var(--muted); }
.balance-meter { display:flex; gap:6px; }
.balance-meter i { height:14px; width:28px; border:1px solid var(--line); border-radius:4px; }
.balance-meter i.filled { background:var(--primary); }
.search-visual, .partition-visual, .pascal-visual, .vote-visual, .xor-visual, .sequence-visual { margin:12px 0 24px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.search-axis { display:flex; align-items:center; gap:24px; padding:35px 12px 8px; font-family:var(--font-mono,monospace); }
.search-track { flex:1; height:7px; background:var(--line); position:relative; border-radius:4px; }
.search-track i { position:absolute; width:14px; height:14px; border-radius:50%; background:var(--primary); top:-4px; transform:translateX(-50%); }
.search-track b { position:absolute; bottom:23px; left:50%; transform:translateX(-50%); font-size:15px; color:var(--primary); font-style:normal; }
.search-verdict { margin-top:18px; overflow-wrap:anywhere; }.search-verdict.yes { color:var(--mint); }.search-verdict.no { color:#d77b47; }
.feasibility-items,.feasibility-groups,.stall-line,.flower-line,.prefix-link { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; align-items:center; }
.feasibility-items>span,.feasibility-groups>div,.insight-value { padding:10px 14px; border:1px solid var(--line); border-radius:8px; }
.feasibility-items b,.feasibility-groups small,.insight-value span { display:block; font-size:13px; color:var(--muted); }
.feasibility-groups span { display:inline-block; padding:8px; background:var(--primary-soft); margin:5px 3px 0; border-radius:5px; }
.stall-line>span,.flower-line>span { display:grid; text-align:center; padding:8px; color:var(--muted); }.stall-line b,.flower-line>span { font-size:24px; }.flower-line small { font-size:12px; }.stall-line .placed,.flower-line .bloomed { color:var(--mint); }
.partition-row { display:flex; align-items:center; gap:12px; padding:12px 0; }.partition-row>div { display:flex; gap:5px; flex-wrap:wrap; flex:1; }.partition-left { justify-content:flex-end; }.partition-row span { padding:8px 12px; border-radius:6px; border:1px solid var(--line); }.partition-left span { background:var(--primary-soft); }.partition-row i { height:52px; width:3px; background:var(--primary); }
.insight-value strong { display:block; font-size:22px; font-family:monospace; margin-top:7px; }
.vote-row { display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }.vote-row div { display:flex; gap:5px; flex-wrap:wrap; }.vote-row i { height:24px; width:13px; background:var(--primary); border-radius:4px; }.vote-row progress { accent-color:var(--primary); }
.bit-row { display:flex; gap:3px; overflow-x:auto; margin-top:16px; }.bit-row span { padding:7px; border:1px solid var(--line); border-radius:4px; font-family:monospace; }.bit-row .set { background:var(--primary-soft); color:var(--primary); }
.sequence-visual>div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:16px; }.sequence-visual span { padding:10px; border:1px solid var(--line); border-radius:6px; }.sequence-gap { color:var(--muted); }
.pascal-scroll { overflow-x:auto; padding:18px 0; }.pascal-row { display:flex; justify-content:center; gap:8px; position:relative; margin:8px 0; }.pascal-row>span { min-width:44px; padding:9px 5px; text-align:center; border:1px solid var(--line); border-radius:8px; font-family:monospace; }.pascal-row>small { position:absolute; left:0; color:var(--muted); }.pascal-row .current,.sequence-visual .current { background:var(--primary-soft); border-color:var(--primary); }.pascal-row .source { background:var(--cyan-soft); border-color:#44999d; }.pascal-equation { font-size:20px; text-align:center; }.matrix-lab .discarded,.array-lab-item>strong.discarded { opacity:.3; }
@media(max-width:600px) { .search-visual,.pascal-visual,.partition-visual { padding:12px; }.partition-row { gap:6px; }.partition-row span { padding:7px; }.prefix-link { gap:6px; }.insight-value { padding:8px; }.search-axis { gap:12px; } }
.tree-node.on-path circle { stroke:var(--primary); stroke-width:3px; }
.frequency-visual { margin:24px 0; }.frequency-visual>div { display:flex; align-items:flex-end; gap:16px; padding:12px; border-bottom:1px solid var(--line); overflow-x:auto; }.frequency-column { display:grid; text-align:center; gap:6px; min-width:35px; }.frequency-column i { width:30px; margin:auto; background:var(--primary); border-radius:5px 5px 0 0; transition:height .35s; }.frequency-column span { font-family:monospace; }
.nesting-visual { margin:16px 0; }.nesting-levels { padding:12px; border-left:2px solid var(--line); }.nesting-levels div { border:1px solid var(--line); border-radius:6px; margin:5px; padding:8px 12px; opacity:.4; }.nesting-levels .open { opacity:1; background:var(--primary-soft); border-color:var(--primary); }
.dependency-svg { max-height:150px; min-width:320px; width:100%; margin:18px 0; }.dependency-svg text { fill:var(--ink); font-size:14px; }.dependency-svg rect { fill:var(--surface); stroke:var(--line); }.dependency-svg .current { fill:var(--primary-soft); stroke:var(--primary); }.dependency-svg .source { fill:var(--cyan-soft); stroke:#44999d; }
.call-node text { font-size:14px; }.call-node .call-local,.call-node .call-return { font-size:12px; }

:root { --primary-soft:color-mix(in srgb,var(--primary) 15%,var(--surface)); --cyan-soft:color-mix(in srgb,#44999d 15%,var(--surface)); }
.sudoku .given { font-weight:800; color:var(--ink); background:var(--soft); }
.queens .dark-square { background:var(--soft); }
.queens .backtrack-tile { background:var(--surface); }
.queens .backtrack-tile.dark-square { background:var(--line); }

.linked-lab { width:100%; overflow-x:auto; padding:16px 8px; }
.linked-summary { display:flex; flex-wrap:wrap; gap:8px 15px; align-items:center; margin-bottom:18px; color:var(--ink); }
.linked-summary span { font-family:ui-monospace,monospace; overflow-wrap:anywhere; }
.linked-network { display:block; max-width:none; }
.linked-node rect { fill:var(--surface); stroke:var(--line); stroke-width:2; }
.linked-node.current rect { fill:var(--primary-soft); stroke:var(--primary); stroke-width:3; }
.linked-node.removed { opacity:.55; }
.linked-node text { fill:var(--ink); font-family:ui-monospace,monospace; }
.linked-node .linked-value { font-size:22px; font-weight:700; }
.linked-node .linked-id { font-size:11px; fill:var(--muted); }
.linked-node .linked-pointer { font-size:12px; font-weight:700; fill:var(--primary); }
.linked-hard .linked-node .linked-value { font-size:1.35rem; }
.linked-hard .linked-node .linked-id { font-size:.75rem; }
.linked-hard .linked-node .linked-pointer { font-size:.8rem; }
.linked-hard .linked-scroll-hint { font-size:.86rem; }
.bit-lab { width:100%; min-width:0; overflow:auto; }
.bit-network { display:block; max-width:none; margin:12px 0; }
.bit-caption { color:var(--muted); font-size:.86rem; max-width:650px; }
.bit-network text { font-family:var(--mono); fill:var(--ink); font-size:.9rem; }
.bit-network .bit-name { font-size:.8rem; font-weight:600; }
.bit-network .bit-decimal,.bit-network .bit-indices text { fill:var(--muted); font-size:.7rem; }
.bit-cell rect { fill:var(--surface); stroke:var(--line); stroke-width:1.5; transition:fill .24s,stroke .24s; }
.bit-cell.bit-one rect { fill:#e0f5ea; stroke:var(--mint); }
[data-theme="dark"] .bit-cell.bit-one rect { fill:#18382b; }
.bit-cell.bit-focus rect { stroke:var(--primary); stroke-width:3; }
.bit-cell.bit-focus text { font-weight:800; }
.bit-subset { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.bit-results { margin:12px 0; }
.bit-results > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.bit-results code { display:inline-block; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:6px; }
.bit-prefix-table { font-size:.85rem; }
.bit-prefix-table > div { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.bit-prefix-table span { padding:8px; border:1px solid var(--line); border-radius:7px; }
.bit-prefix-table .current { background:var(--primary-soft); border-color:var(--primary); }
@media (prefers-reduced-motion:reduce) { .bit-cell rect { transition:none!important; } }
.linked-lane { fill:var(--muted); font-size:12px; }
.linked-scroll-hint { margin:-7px 0 10px; color:var(--muted); font-size:.78rem; }
.dll-legend { display:flex; gap:16px; font-size:12px; font-weight:700; margin:-9px 0 8px; }
.dll-legend span:first-child { color:var(--primary); }
.dll-legend span:nth-child(2) { color:var(--mint); }
.dll-legend span:nth-child(3) { color:var(--muted); font-weight:400; }
.dll-node rect { fill:var(--surface); stroke:var(--line); stroke-width:2; }
.dll-node.current rect { fill:var(--primary-soft); stroke:var(--primary); stroke-width:3; }
.dll-node.removed { opacity:.55; }
.dll-node text { fill:var(--ink); font-family:ui-monospace,monospace; }
.dll-node .dll-value { font-size:21px; font-weight:700; }
.dll-node .dll-id { font-size:11px; fill:var(--muted); }
.dll-node .dll-link-label { font-size:11px; fill:var(--muted); }
.dll-node .dll-pointer { font-size:12px; font-weight:700; fill:var(--primary); }
.dll-edge { fill:none; stroke-width:2.5; }
.dll-edge.next { stroke:var(--primary); }
.dll-edge.prev { stroke:var(--mint); }
.dll-edge.active { stroke-width:3.5; }
#dll-next-arrow path { fill:var(--primary); }
#dll-prev-arrow path { fill:var(--mint); }
@media (prefers-reduced-motion:reduce) { .linked-node,.linked-network path { transition:none!important; animation:none!important; } }
@media (prefers-reduced-motion:reduce) { .dll-node,.dll-edge { transition:none!important; animation:none!important; } }
/* Greedy decisions: exact states, stable SVG identities, and scroll-contained diagrams. */
.greedy-lab {width:100%;min-width:0;display:grid;gap:20px}
.greedy-lane,.greedy-timeline,.greedy-band {min-width:0}
.greedy-scroll {overflow:auto;max-width:100%;padding-bottom:5px}
.greedy-scroll svg {display:block;width:100%}
.greedy-lab svg text {fill:var(--ink);font-size:.78rem}
.greedy-item rect {fill:var(--surface);stroke:var(--line);stroke-width:2}
.greedy-item.active rect {fill:#ede9fe;stroke:#8062d9}
.greedy-item.kept rect {fill:#ddf5e7;stroke:#509e74}
.greedy-item.rejected rect {stroke-dasharray:5 4;fill:var(--surface);opacity:.55}
.greedy-item.rejected text {opacity:.7}
.greedy-lab svg .greedy-index,.greedy-lab svg .greedy-endpoint {font-size:.65rem;fill:var(--muted)}
.greedy-lab svg .greedy-pointer {fill:#8062d9;font-weight:700}
.greedy-fill,.greedy-band rect {fill:#81bfa4!important;stroke:none!important}
.greedy-band svg {width:100%;display:block;min-height:90px}
.greedy-band line {stroke:var(--line);stroke-width:3}
.greedy-band circle {fill:#8062d9}
.greedy-band .greedy-boundary {stroke:#d79a3c;stroke-width:3;stroke-dasharray:4 3}
.greedy-metrics,.greedy-slots,.greedy-till {display:flex;gap:12px;flex-wrap:wrap}
.greedy-metrics>span,.greedy-slots>span,.greedy-till>div {padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:grid;gap:6px;min-width:90px}
.greedy-metrics small,.greedy-slots small {color:var(--muted)}
.greedy-coins {display:flex;flex-wrap:wrap;gap:5px;max-width:330px}
.greedy-coins span {padding:7px;background:#ddf5e7;color:#245b3d;border-radius:6px}
.greedy-slots>.active {outline:2px solid #8062d9}
.greedy-result {border:1px solid var(--line);padding:14px;border-radius:10px;overflow-wrap:anywhere}
.greedy-result code {white-space:normal}
[data-theme="dark"] .greedy-item.active rect {fill:#332b48;stroke:#b39cef}
[data-theme="dark"] .greedy-item.kept rect {fill:#213a2e;stroke:#81bfa4}
[data-theme="dark"] .greedy-lab svg .greedy-pointer {fill:#b39cef}
[data-theme="dark"] .greedy-coins span {background:#213a2e;color:#b7ebce}
@media (prefers-reduced-motion:reduce) {.greedy-lab * {animation:none!important;transition:none!important}}

.greedy-output {display:grid;gap:7px;overflow-wrap:anywhere;border-left:3px solid #81bfa4;padding-left:12px}
.greedy-output code {white-space:normal}
.greedy-dependency {fill:none;stroke:#d79a3c;stroke-width:2.5}

.greedy-lab > div {min-width:0}
.greedy-lab .stage-label {white-space:normal;overflow-wrap:anywhere}

.greedy-event {stroke:#d79a3c;stroke-width:2;stroke-dasharray:4 3}