.expressions-page {
  --algebra: #3b9dff;
  --algebra-bright: #52c7ff;
  --algebra-soft: #a9ddff;
  --algebra-surface: #06192c;
  background:
    radial-gradient(circle at 78% 9%, rgba(33, 105, 190, 0.13), transparent 31%),
    radial-gradient(circle at 31% 32%, rgba(22, 93, 155, 0.06), transparent 35%),
    var(--page);
  overflow-x: hidden;
}

.expressions-page .workspace,
.expressions-page main {
  background: transparent;
}

.expressions-page .navigation-item.is-current {
  background: linear-gradient(90deg, rgba(21, 99, 160, 0.68), rgba(12, 66, 111, 0.5));
  color: var(--algebra-soft);
}

.expressions-page .navigation-item.is-current .navigation-icon {
  filter: drop-shadow(0 0 5px rgba(59, 157, 255, 0.58));
}

.directory-top-bar {
  min-height: 118px;
  border-bottom-color: rgba(49, 104, 146, 0.3);
}

.directory-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
}

.directory-back {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid rgba(54, 98, 129, 0.48);
  border-radius: 8px;
  color: var(--text-soft);
  font-size: 12px;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.directory-back:hover {
  border-color: rgba(82, 199, 255, 0.5);
  background: rgba(25, 82, 126, 0.22);
  color: var(--text);
}

.directory-search {
  width: min(100%, 690px);
}

.directory-search:focus-within {
  border-color: rgba(82, 199, 255, 0.52);
  box-shadow: 0 0 0 1px rgba(59, 157, 255, 0.08);
}

.directory-main {
  width: 100%;
  max-width: 1320px;
  margin: 0;
  padding: 28px 38px 80px;
}

.directory-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  color: #748b9c;
  font-size: 12px;
}

.directory-breadcrumbs a {
  color: #8ea4b4;
  text-decoration: none;
}

.directory-breadcrumbs a:hover {
  color: var(--algebra-soft);
}

.expressions-hero {
  position: relative;
  display: grid;
  min-height: 326px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: stretch;
  gap: 28px;
  padding: 38px;
  border: 1px solid rgba(62, 118, 159, 0.42);
  border-radius: 18px;
  background:
    linear-gradient(120deg, rgba(7, 29, 51, 0.97), rgba(4, 19, 35, 0.9) 62%, rgba(7, 30, 53, 0.93)),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(167, 220, 255, 0.035),
    0 24px 60px rgba(0, 0, 0, 0.14);
  isolation: isolate;
}

.expressions-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 78% 23%, rgba(82, 199, 255, 0.1) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 34%, rgba(59, 157, 255, 0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 63%, rgba(169, 221, 255, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 78%, rgba(59, 157, 255, 0.1) 0 1px, transparent 2px),
    linear-gradient(135deg, transparent 65%, rgba(67, 157, 219, 0.04));
  content: "";
}

.expressions-hero::after {
  position: absolute;
  z-index: -1;
  top: -155px;
  right: -100px;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(67, 154, 219, 0.08);
  border-radius: 50%;
  box-shadow:
    -78px 73px 0 -77px rgba(82, 199, 255, 0.15),
    -142px 145px 0 -141px rgba(82, 199, 255, 0.1);
  content: "";
}

.expressions-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 730px;
}

.expressions-eyebrow,
.progress-kicker {
  margin: 0;
  color: var(--algebra-bright);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.095em;
  line-height: 1.3;
}

.expressions-hero h1 {
  margin: 8px 0 12px;
  color: var(--text);
  font-family: var(--display-font);
  font-size: clamp(47px, 6vw, 76px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.expressions-lede {
  max-width: 690px;
  margin: 0;
  color: #bfced5;
  font-size: 16px;
  line-height: 1.62;
}

.topic-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 21px 0;
}

.topic-facts span {
  padding: 6px 10px;
  border: 1px solid rgba(68, 125, 165, 0.38);
  border-radius: 999px;
  background: rgba(5, 20, 37, 0.48);
  color: #93aabd;
  font-size: 11px;
}

.topic-facts strong {
  color: var(--algebra-soft);
  font-weight: 650;
}

.directory-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 16px;
  border: 1px solid rgba(82, 199, 255, 0.42);
  border-radius: 9px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.directory-button.is-primary {
  background: linear-gradient(135deg, #1977a9, #2469a4);
  box-shadow: inset 0 1px 0 rgba(202, 238, 255, 0.14);
}

.directory-button:hover {
  transform: translateY(-1px);
  border-color: rgba(169, 221, 255, 0.7);
  background-color: rgba(41, 117, 168, 0.25);
}

.topic-progress-card {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(66, 126, 169, 0.44);
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% 18%, rgba(59, 157, 255, 0.1), transparent 34%),
    rgba(3, 16, 30, 0.74);
}

.topic-progress-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topic-progress-heading-row > div {
  display: grid;
  gap: 1px;
}

.topic-progress-heading-row strong {
  color: var(--text);
  font-family: var(--display-font);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.topic-progress-heading-row span:not(.algebra-token) {
  color: var(--muted);
  font-size: 11px;
}

.algebra-token {
  display: grid;
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(82, 199, 255, 0.42);
  border-radius: 50%;
  background: rgba(21, 75, 116, 0.22);
  color: var(--algebra-soft);
  font-family: var(--math-font);
  font-size: 17px;
  box-shadow: 0 0 24px rgba(59, 157, 255, 0.07);
}

.topic-progress-card progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #102b3d;
  accent-color: var(--algebra-bright);
}

.topic-progress-card progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #102b3d;
}

.topic-progress-card progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #328ad5, var(--algebra-bright));
}

.topic-progress-card progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #328ad5, var(--algebra-bright));
}

.topic-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.topic-progress-stats div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(56, 104, 138, 0.26);
  border-radius: 8px;
  background: rgba(5, 20, 34, 0.46);
}

.topic-progress-stats dt {
  color: #7f96a5;
  font-size: 9px;
}

.topic-progress-stats dd {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 650;
}

.directory-path {
  margin-top: 42px;
}

.directory-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
}

.directory-section-heading h2 {
  margin: 6px 0 2px;
  color: var(--text);
  font-family: var(--display-font);
  font-size: clamp(28px, 3.5vw, 39px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.directory-section-heading > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.directory-result-count {
  margin: 0 0 6px;
  color: #89a2b4;
  font-size: 11px;
  white-space: nowrap;
}

.family-list {
  display: grid;
  gap: 12px;
}

.family-card {
  --family-accent: #3b9dff;
  overflow: hidden;
  border: 1px solid rgba(57, 105, 140, 0.42);
  border-radius: 13px;
  background: linear-gradient(120deg, rgba(6, 23, 40, 0.9), rgba(3, 16, 29, 0.86));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--family-accent) 78%, transparent);
}

.family-card[data-family-index="1"] { --family-accent: #52b8ff; }
.family-card[data-family-index="2"] { --family-accent: #5ca6ff; }
.family-card[data-family-index="3"] { --family-accent: #778fff; }
.family-card[data-family-index="4"] { --family-accent: #4abfe8; }
.family-card[data-family-index="5"] { --family-accent: #4fd3d0; }
.family-card[data-family-index="6"] { --family-accent: #9d83ff; }

.family-card[open] {
  border-color: color-mix(in srgb, var(--family-accent) 46%, rgba(57, 105, 140, 0.42));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--family-accent) 88%, transparent),
    0 12px 38px rgba(0, 0, 0, 0.12);
}

.family-summary {
  display: grid;
  min-height: 88px;
  grid-template-columns: 48px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

.family-summary::-webkit-details-marker {
  display: none;
}

.family-summary:hover {
  background: color-mix(in srgb, var(--family-accent) 5%, transparent);
}

.family-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--family-accent) 58%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--family-accent) 9%, transparent);
  color: color-mix(in srgb, var(--family-accent) 80%, white);
  font-family: var(--math-font);
  font-size: 14px;
}

.family-summary-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.family-summary-copy strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
}

.family-summary-copy span {
  overflow: hidden;
  color: #8da2af;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-summary-progress {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: #93a7b4;
  font-size: 10px;
}

.family-summary-progress strong {
  color: color-mix(in srgb, var(--family-accent) 76%, white);
  font-size: 12px;
  font-weight: 650;
}

.family-chevron {
  color: color-mix(in srgb, var(--family-accent) 72%, white);
  font-size: 19px;
  transform: rotate(0deg);
  transition: transform 160ms ease;
}

.family-card[open] .family-chevron {
  transform: rotate(90deg);
}

.family-rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 16px 17px 19px;
  border-top: 1px solid rgba(52, 96, 128, 0.25);
}

.room-link {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 112px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(58, 103, 134, 0.34);
  border-radius: 10px;
  background: rgba(4, 18, 32, 0.72);
  color: inherit;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.room-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--family-accent) 54%, transparent);
  background: color-mix(in srgb, var(--family-accent) 5%, rgba(4, 18, 32, 0.78));
}

.room-link.is-studied {
  border-color: rgba(98, 220, 132, 0.32);
}

.room-link.is-active {
  border-color: rgba(82, 199, 255, 0.35);
}

.room-number {
  color: color-mix(in srgb, var(--family-accent) 70%, white);
  font-family: var(--math-font);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.room-link-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.room-link-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.room-example {
  display: -webkit-box;
  overflow: hidden;
  color: #879daa;
  font-family: var(--math-font);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.room-output {
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  color: #6f8b9d;
  font-size: 9px;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.room-status {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(62, 105, 134, 0.34);
  border-radius: 999px;
  color: #7f98a7;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.room-link.is-studied .room-status {
  border-color: rgba(98, 220, 132, 0.32);
  color: #7ee69a;
}

.room-link.is-active .room-status {
  border-color: rgba(82, 199, 255, 0.32);
  color: var(--algebra-soft);
}

.no-directory-results {
  padding: 48px 24px;
  border: 1px dashed rgba(75, 120, 151, 0.42);
  border-radius: 13px;
  text-align: center;
}

.no-directory-results h2 {
  margin: 0 0 5px;
  font-family: var(--display-font);
  font-size: 26px;
  font-weight: 400;
}

.no-directory-results p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.next-topic-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid rgba(54, 95, 124, 0.34);
  border-radius: 13px;
  background: rgba(4, 17, 30, 0.54);
}

.next-topic-number {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(109, 134, 154, 0.32);
  border-radius: 50%;
  color: #718897;
  font-family: var(--math-font);
}

.next-topic-card h2 {
  margin: 3px 0 2px;
  color: #d7e1e2;
  font-size: 16px;
  font-weight: 650;
}

.next-topic-card p:last-child {
  margin: 0;
  color: #778c99;
  font-size: 11px;
}

.next-topic-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(89, 113, 132, 0.28);
  border-radius: 8px;
  color: #6f8593;
  font-size: 9px;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .expressions-hero {
    grid-template-columns: minmax(0, 1fr) 275px;
    padding: 30px;
  }

  .family-rooms {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .directory-main {
    padding: 24px 24px 70px;
  }

  .expressions-hero {
    grid-template-columns: 1fr;
  }

  .topic-progress-card {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
    align-items: center;
  }

  .topic-progress-card .progress-kicker,
  .topic-progress-card progress {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .directory-top-bar {
    min-height: auto;
  }

  .directory-main {
    padding: 20px 16px 88px;
  }

  .directory-heading {
    gap: 11px;
  }

  .directory-back {
    min-height: 32px;
    padding: 5px 8px;
  }

  .expressions-hero {
    min-height: 0;
    gap: 24px;
    padding: 24px 20px;
    border-radius: 14px;
  }

  .expressions-hero h1 {
    font-size: clamp(43px, 15vw, 60px);
  }

  .expressions-lede {
    font-size: 14px;
  }

  .topic-progress-card {
    display: grid;
    grid-template-columns: 1fr;
  }

  .topic-progress-card .progress-kicker,
  .topic-progress-card progress {
    grid-column: auto;
  }

  .directory-section-heading {
    display: grid;
    align-items: start;
    gap: 7px;
  }

  .directory-result-count {
    margin: 0;
  }

  .family-summary {
    min-height: 96px;
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 14px;
  }

  .family-number {
    width: 36px;
    height: 36px;
  }

  .family-summary-copy span {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .family-summary-progress {
    grid-column: 2;
    grid-row: 2;
    justify-items: start;
  }

  .family-chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .family-rooms {
    padding: 4px 12px 13px 15px;
  }

  .room-link {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .room-status {
    grid-column: 2;
    width: max-content;
  }

  .next-topic-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .next-topic-status {
    grid-column: 2;
    width: max-content;
  }
}

@media (max-width: 430px) {
  .directory-main {
    padding-inline: 12px;
  }

  .expressions-hero {
    padding: 21px 17px;
  }

  .topic-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topic-facts span {
    text-align: center;
  }

  .directory-button {
    width: 100%;
  }

  .topic-progress-stats {
    grid-template-columns: 1fr;
  }

  .topic-progress-stats div {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .room-link {
    min-height: 120px;
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .directory-button,
  .family-chevron,
  .room-link {
    transition: none;
  }
}