/* Market library: local components, inheriting the design-v3 theme. */
.domain-directory,
.domain-hero,
.domain-layout,
.domain-next,
.bookmark-grid {
  --market-radius: 16px;
  --market-tint: color-mix(in srgb, var(--accent) 7%, var(--panel));
  --market-line: color-mix(in srgb, var(--accent) 24%, var(--line));
}

/* Each subject has its own line drawing. Masks inherit both color themes. */
[data-domain="crypto"] {
  --domain-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='m146 21 30 17v35l-30 17-30-17V38zM176 73l30 17v35l-30 17-30-17V90M116 73 86 90v35l30 17 30-17M206 90l30-17V38l-30-17-30 17M86 90 56 73V38l30-17 30 17M146 21V3M236 73l30 17v35l-30 17-30-17M56 73 26 90v35l30 17 30-17'/%3E%3Ccircle cx='146' cy='55' r='11'/%3E%3Ccircle cx='206' cy='55' r='4'/%3E%3Ccircle cx='176' cy='108' r='4'/%3E%3Ccircle cx='86' cy='55' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
[data-domain="forex"] {
  --domain-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M7 119c44 0 48-80 95-80s62 84 110 84 57-78 101-78M7 41c42 0 59 80 105 80s59-84 105-84 53 83 96 83M7 80h306M45 12v136M122 12v136M199 12v136M276 12v136M303 35l10 10-10 10M303 110l10 10-10 10'/%3E%3Ccircle cx='81' cy='50' r='4'/%3E%3Ccircle cx='238' cy='51' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
[data-domain="stocks"] {
  --domain-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M18 139h285M40 139V99h29v40M91 139V79h29v60M142 139V92h29v47M193 139V50h29v89M244 139V24h29v115M25 83l51-25 45 7 45-30 45 7 69-30M264 12h16v16M18 107h285M18 74h285M18 41h285'/%3E%3Ccircle cx='166' cy='35' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
[data-domain="futures"] {
  --domain-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Crect x='31' y='31' width='97' height='94' rx='5'/%3E%3Crect x='191' y='31' width='97' height='94' rx='5'/%3E%3Cpath d='M31 57h97M191 57h97M53 20v23M106 20v23M213 20v23M265 20v23M51 78h16m14 0h27M51 96h41M211 78h16m14 0h27M211 96h41M139 79h40m-9-9 9 9-9 9M59 137h202'/%3E%3Ccircle cx='79' cy='137' r='4'/%3E%3Ccircle cx='239' cy='137' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
[data-domain="options"] {
  --domain-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M28 13v133h278M28 79h278M164 13v133M28 112h134L279 20M28 31l134 81h132M28 46h278M28 112h278M73 13v133M119 13v133M210 13v133M256 13v133'/%3E%3Ccircle cx='164' cy='112' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
[data-domain="macro"] {
  --domain-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Ccircle cx='160' cy='80' r='67'/%3E%3Cellipse cx='160' cy='80' rx='32' ry='67'/%3E%3Cellipse cx='160' cy='80' rx='67' ry='29'/%3E%3Cpath d='M93 80h134M160 13v134M108 39h104M108 121h104M18 80h53M249 80h53M35 46h37M248 114h37M39 114h26M255 46h26'/%3E%3Ccircle cx='78' cy='80' r='4'/%3E%3Ccircle cx='242' cy='80' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
[data-domain="trading"] {
  --domain-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M13 132h294M13 86h294M13 40h294M39 74v68M87 56v69M135 49v73M183 26v62M231 11v57M279 26v71'/%3E%3Crect x='30' y='95' width='18' height='28'/%3E%3Crect x='78' y='70' width='18' height='35'/%3E%3Crect x='126' y='66' width='18' height='35'/%3E%3Crect x='174' y='42' width='18' height='30'/%3E%3Crect x='222' y='26' width='18' height='18'/%3E%3Crect x='270' y='40' width='18' height='19'/%3E%3C/g%3E%3C/svg%3E");
}
[data-domain="algo"] {
  --domain-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 160'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Crect x='16' y='60' width='53' height='39' rx='4'/%3E%3Crect x='137' y='12' width='53' height='39' rx='4'/%3E%3Crect x='137' y='109' width='53' height='39' rx='4'/%3E%3Crect x='253' y='60' width='53' height='39' rx='4'/%3E%3Cpath d='M69 79h32V31h36M101 79v50h36M190 31h31v48h32M190 129h31V79M28 79h27M149 31h27M149 129h27M265 79h27M163 51v58'/%3E%3Ccircle cx='101' cy='79' r='4'/%3E%3Ccircle cx='221' cy='79' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

.domain-directory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
}
.domain-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--market-radius, 16px);
  background: var(--panel);
  overflow: hidden;
}
.domain-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 120px;
  padding: 18px 20px;
  isolation: isolate;
  color: var(--accent);
  background: var(--soft);
  overflow: hidden;
}
.domain-art::before,
.domain-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--accent);
  mask: var(--domain-motif) 100% 50% / auto 100% no-repeat;
  opacity: .18;
}
.domain-art > svg {
  width: 31px;
  height: 31px;
  stroke-width: 1.5;
}
.domain-art > span,
.domain-art > small {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
}
.domain-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
}
.domain-card-copy h3 {
  font-size: 23px;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.domain-card-copy > .eyebrow { margin-bottom: 9px; font-size: 8px; }
.domain-card-copy p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.domain-card-copy > small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 12px;
}
.domain-card-copy .meta,
.domain-card-copy .track-foot {
  margin-top: auto;
  padding-top: 20px;
  font-size: 10px;
}
.domain-card-copy > svg {
  width: 16px;
  height: 16px;
  margin-top: 17px;
  align-self: flex-end;
  color: var(--accent);
}
.domain-card > svg {
  position: absolute;
  top: 20px;
  right: 18px;
  width: 17px;
  height: 17px;
  color: var(--accent);
}
.domain-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.domain-card:hover h3 { color: var(--accent); }

.domain-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: 43px 38px;
}
.domain-intro { min-width: 0; }
.domain-intro h1 {
  margin: 15px 0 19px;
  font-size: clamp(39px, 4.8vw, 66px);
  font-weight: 550;
  letter-spacing: -.065em;
  line-height: 1.06;
  overflow-wrap: anywhere;
}
.domain-intro > p {
  max-width: 49ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.domain-intro .actions { margin-top: 24px; }
.domain-intro .fine { margin-top: 15px; font-size: 11px; }
.domain-map {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 29px;
  border: 1px solid var(--market-line, var(--line));
  border-radius: var(--market-radius, 16px);
  background: var(--market-tint, var(--soft));
  overflow: hidden;
}
.domain-map::before {
  inset: -32px -40px;
  mask-position: center;
  mask-size: auto 100%;
  opacity: .1;
}
.domain-map > .eyebrow,
.domain-map > h2,
.domain-map > h3,
.domain-map > p,
.domain-map > small,
.domain-map > .fine {
  grid-column: 1 / -1;
}
.domain-map > .eyebrow { margin-bottom: 11px; }
.domain-map > .eyebrow > svg { width: 19px; height: 19px; margin-right: 7px; }
.domain-map > h2,
.domain-map > h3 { font-size: 23px; margin-bottom: 13px; }
.domain-map > p,
.domain-map > .fine,
.domain-map > small { color: var(--muted); font-size: 11px; }
.domain-map > p:last-child,
.domain-map > small:last-child { margin-top: 9px; }
.domain-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
  min-height: 54px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.domain-node > svg { width: 18px; height: 18px; color: var(--accent); }
.domain-node > span { min-width: 0; }
.domain-node b { display: block; font-weight: 550; }
.domain-node small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.domain-node:hover { border-color: var(--accent); color: var(--accent); }

.domain-tabs {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 34px;
  padding: 0 1px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.domain-tabs a {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 49px;
  border-bottom: 2px solid transparent;
  padding: 12px 0 13px;
  font-size: 12px;
  font-weight: 550;
  color: var(--muted);
  white-space: nowrap;
}
.domain-tabs a svg { width: 15px; height: 15px; }
.domain-tabs a:hover { color: var(--accent); }
.domain-tabs a.selected,
.domain-tabs a.active,
.domain-tabs a[aria-current="page"],
.domain-tabs a[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.domain-tabs a:focus-visible { outline-offset: -4px; border-radius: 4px; }

.domain-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
  align-items: start;
  gap: clamp(24px, 3vw, 42px);
}
.domain-main,
.domain-aside { min-width: 0; }
.domain-main > .section:first-child { margin-top: 0; }
.domain-main > .section-head:first-child { margin-top: 0; }
.domain-main .section-head h2 { font-size: clamp(26px, 2.8vw, 35px); }
.domain-main > p { color: var(--muted); }
.domain-aside {
  display: grid;
  gap: 16px;
}
.domain-aside > section,
.domain-aside > article,
.domain-aside > .aside-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.domain-aside h2,
.domain-aside h3 { font-size: 22px; margin: 10px 0; }
.domain-aside p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.domain-aside .btn { width: 100%; margin-top: 17px; }
.domain-aside .text-link { display: inline-block; margin-top: 12px; white-space: normal; }
.domain-aside ul,
.domain-aside ol { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.domain-aside li + li { margin-top: 8px; }
.domain-aside nav { display: grid; gap: 3px; margin-top: 12px; }
.domain-aside nav a { padding-block: 9px; font-size: 12px; border-bottom: 1px solid var(--line); }
.domain-aside nav a:last-child { border-bottom: 0; padding-bottom: 0; }
.domain-aside nav a:hover { color: var(--accent); }

.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 195px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.topic-card > svg:first-child,
.topic-card > .topic-icon,
.topic-card > .icon {
  width: 24px;
  height: 24px;
  margin-bottom: 20px;
  color: var(--accent);
  stroke-width: 1.5;
}
.topic-card h3 { max-width: 23ch; padding-right: 12px; font-size: 21px; line-height: 1.18; }
.topic-card > .eyebrow { margin-bottom: 14px; font-size: 8px; }
.topic-card p { margin-top: 9px; padding-right: 9px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.topic-card .topic-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 21px; color: var(--accent); font-size: 11px; font-weight: 550; }
.topic-card .topic-link > svg { width: 16px; height: 16px; }
.topic-card > small,
.topic-card .meta { margin-top: auto; padding-top: 18px; font-size: 10px; color: var(--muted); }
.topic-card > svg:last-child:not(:first-child),
.topic-card > .topic-arrow,
.topic-card > .card-arrow {
  position: absolute;
  right: 19px;
  top: 24px;
  bottom: auto;
  width: 17px;
  height: 17px;
  color: var(--muted);
}
.topic-card:hover { border-color: var(--accent); background: var(--market-tint, var(--panel)); }
.topic-card:hover h3,
.topic-card:hover > svg:last-child { color: var(--accent); }

.domain-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  overflow: hidden;
}
.domain-next > :is(a, article, div, section) {
  position: relative;
  min-width: 0;
  padding: 23px;
  border-right: 1px solid var(--line);
}
.domain-next > :last-child { border-right: 0; }
.domain-next > a:hover { background: var(--market-tint, var(--soft)); }
.domain-next h3 { margin: 11px 0 9px; font-size: 20px; line-height: 1.2; }
.domain-next .eyebrow { font-size: 8px; }
.domain-next .eyebrow > svg { width: 16px; height: 16px; margin-right: 4px; }
.domain-next p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.domain-next .text-link { display: inline-block; margin-top: 18px; white-space: normal; }
.domain-next > :is(a, article, div, section) > svg { width: 19px; height: 19px; color: var(--accent); }
.domain-next > :is(a, article, div, section) > svg:last-child { display: block; margin-top: 18px; }
.domain-note {
  padding: 19px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}
.domain-note h3,
.domain-note h4 { margin-bottom: 8px; color: var(--text); font-size: 18px; }
.domain-note b,
.domain-note strong { color: var(--text); font-weight: 600; }
.domain-note p + p { margin-top: 9px; }
.domain-note > .eyebrow + p { margin-top: 8px; }
.domain-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.domain-note .text-link { display: block; }
.domain-note + .chips { margin-top: 22px; }

.topic-reader {
  max-width: 920px;
  margin-inline: auto;
}
.topic-reader .page-title { padding-block: 32px 24px; }
.topic-reader .page-title h1 {
  max-width: 20ch;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.09;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.topic-reader .page-title p { max-width: 62ch; font-size: 16px; line-height: 1.75; }
.topic-reader .prose {
  max-width: 70ch;
  margin-top: 25px;
  font-size: 16px;
  line-height: 1.85;
}
.topic-reader .prose h2 { margin: 34px 0 14px; font-size: 28px; line-height: 1.25; }
.topic-reader .prose h3 { margin: 26px 0 10px; font-size: 22px; line-height: 1.3; }
.topic-reader .prose p { margin: 0 0 18px; }
.topic-reader .prose ul,
.topic-reader .prose ol { padding-left: 22px; margin: 14px 0 23px; color: var(--muted); }
.topic-reader .prose li + li { margin-top: 9px; }
.topic-reader .prose strong { color: var(--text); font-weight: 600; }
.topic-reader .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.topic-reader .prose code { padding: 3px 5px; border-radius: 4px; background: var(--soft); font-size: .9em; overflow-wrap: anywhere; }
.topic-reader > .actions { margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--line); }
.topic-example {
  margin-block: 28px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}
.topic-example h2,
.topic-example h3 { margin: 9px 0 13px; font-size: 24px; }
.topic-example p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.topic-example p + p { margin-top: 12px; }
.topic-example b,
.topic-example strong { color: var(--text); }
.topic-example .fine { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 11px; }
.topic-example > svg { width: 25px; height: 25px; color: var(--accent); }
.selfcheck {
  margin-top: 28px;
  padding: 26px;
  border: 1px solid var(--market-line, var(--line));
  border-radius: 13px;
  background: var(--soft);
}
.selfcheck h2,
.selfcheck h3 { margin: 10px 0 13px; font-size: 25px; }
.selfcheck > p { color: var(--text); font-size: 14px; line-height: 1.75; }
.answer-reveal { margin-top: 20px; border-top: 1px solid var(--line); }
.answer-reveal summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding-block: 14px 6px;
  font-size: 12px;
  font-weight: 600;
  list-style: none;
}
.answer-reveal summary::-webkit-details-marker { display: none; }
.answer-reveal summary::after { content: "+"; font-size: 20px; line-height: 1; font-weight: 400; }
.answer-reveal[open] summary::after { content: "−"; }
.answer-reveal > p,
.answer-reveal > div { padding-top: 11px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.answer-reveal > p:last-child { margin-bottom: 0; }

.bookmark-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 43px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.4;
}
.bookmark-button svg { width: 16px; height: 16px; }
.bookmark-button:hover { color: var(--accent); border-color: var(--accent); }
.bookmark-button[aria-pressed="true"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.bookmark-button[aria-pressed="true"] svg { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
.hub-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-block: 20px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 12px;
  color: var(--muted);
}
.domain-aside > .hub-progress { margin: 0; padding: 20px 22px; }
.hub-progress > .eyebrow { grid-column: 1 / -1; font-size: 8px; }
.hub-progress > p { grid-column: 1 / -1; color: var(--text); font-size: 14px; font-weight: 550; }
.hub-progress > svg { width: 22px; height: 22px; color: var(--accent); }
.hub-progress strong,
.hub-progress b { color: var(--text); font-weight: 600; }
.hub-progress > div { min-width: 0; flex: 1; }
.hub-progress small { display: block; margin-top: 3px; font-size: 10px; }
.hub-progress .text-link { grid-column: 1 / -1; margin: 2px 0 0; white-space: normal; font-size: 11px; }
.hub-progress progress {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 0;
  border: 0;
  border-radius: 3px;
  background: var(--line);
  color: var(--accent);
  appearance: none;
  overflow: hidden;
}
.hub-progress progress::-webkit-progress-bar { background: var(--line); }
.hub-progress progress::-webkit-progress-value { background: var(--accent); border-radius: 3px; }
.hub-progress progress::-moz-progress-bar { background: var(--accent); border-radius: 3px; }
.hub-progress .progress-track { height: 4px; margin-top: 9px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hub-progress .progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.toast {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(480px, calc(100vw - 32px));
  padding: 13px 18px;
  border: 1px solid var(--action);
  border-radius: 10px;
  background: var(--action);
  color: var(--action-text);
  box-shadow: var(--shadow);
  font-size: 12px;
  line-height: 1.5;
  transform: translateX(-50%);
  overflow-wrap: anywhere;
}
.toast > svg { width: 18px; height: 18px; }
.toast a { text-decoration: underline; text-underline-offset: 3px; }
.toast button { flex-shrink: 0; margin: -5px -5px -5px 6px; padding: 7px; border: 0; border-radius: 5px; background: transparent; color: inherit; }
.toast[hidden],
.toast.is-hidden { display: none; }
.bookmark-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.saved-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
}
.saved-card > a { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.saved-card > a > svg:first-child { width: 26px; height: 26px; margin-bottom: 18px; color: var(--accent); }
.saved-card h3 { margin: 9px 0 11px; font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
.saved-card p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.saved-card .meta { width: 100%; margin-top: auto; padding-top: 20px; }
.saved-card > .bookmark-button { align-self: flex-start; margin-top: 20px; font-size: 11px; }
.saved-card .actions { margin-top: auto; padding-top: 20px; }
.saved-card > a:hover h3 { color: var(--accent); }
.bookmark-grid > .empty-state { grid-column: 1 / -1; }
.bookmark-grid .empty-state .btn { margin-top: 20px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .domain-card:hover { transform: translateY(-3px); }
  .domain-node:hover { transform: translateY(-2px); }
  .domain-card,
  .topic-card { transition: border-color .18s, background .18s, box-shadow .18s, transform .18s; }
}
@media (max-width: 1120px) {
  .domain-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .domain-art { height: 127px; }
  .domain-map { padding: 23px; }
  .domain-hero { gap: 30px; }
  .domain-layout { grid-template-columns: minmax(0, 1fr) 235px; gap: 24px; }
  .domain-next > :is(a, article, div, section) { padding: 18px; }
}
@media (max-width: 850px) {
  .domain-hero { grid-template-columns: 1fr; gap: 27px; padding-block: 32px; }
  .domain-intro h1 { max-width: 18ch; font-size: clamp(42px, 7vw, 58px); }
  .domain-intro > p { max-width: 60ch; }
  .domain-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .domain-map::before { mask-position: right center; mask-size: auto 190%; }
  .domain-layout { grid-template-columns: 1fr; gap: 28px; }
  .domain-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .domain-aside > :only-child { grid-column: 1 / -1; }
  .bookmark-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { bottom: calc(73px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
  .domain-directory { grid-template-columns: 1fr; gap: 11px; }
  .domain-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); border-radius: 12px; }
  .domain-art { align-items: center; justify-content: center; height: 100%; min-height: 137px; padding: 15px; }
  .domain-art::before { inset: 0 -100px; opacity: .15; mask-position: center; mask-size: auto 100%; }
  .domain-art > svg { width: 29px; height: 29px; }
  .domain-art > span,
  .domain-art > small { display: none; }
  .domain-card-copy { padding: 17px 18px; }
  .domain-card-copy h3 { font-size: 22px; }
  .domain-card-copy p { margin-top: 7px; font-size: 11px; }
  .domain-card-copy .meta,
  .domain-card-copy .track-foot { padding-top: 12px; font-size: 9px; }
  .domain-card-copy > svg { margin-top: 10px; width: 14px; height: 14px; }
  .domain-card > svg { top: 12px; right: auto; left: 12px; width: 12px; height: 12px; opacity: .6; }
  .domain-hero { padding-block: 27px 25px; gap: 25px; }
  .domain-intro h1 { font-size: clamp(36px, 10vw, 47px); margin-block: 12px 16px; }
  .domain-intro > p { font-size: 14px; line-height: 1.75; }
  .domain-intro .actions { margin-top: 20px; gap: 8px; }
  .domain-intro .btn { min-height: 44px; padding-inline: 12px; font-size: 11px; }
  .domain-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 18px; border-radius: 13px; }
  .domain-map > .eyebrow { font-size: 9px; margin-bottom: 7px; }
  .domain-map > h2,
  .domain-map > h3 { font-size: 22px; margin-bottom: 8px; }
  .domain-node { min-height: 53px; gap: 7px; padding: 10px; font-size: 11px; }
  .domain-node > svg { width: 16px; height: 16px; }
  .domain-tabs { gap: 23px; margin-bottom: 27px; }
  .domain-tabs a { min-height: 46px; font-size: 11px; }
  .domain-main .section-head { align-items: flex-start; }
  .domain-main .section-head h2 { font-size: 28px; }
  .domain-aside { grid-template-columns: 1fr; gap: 13px; }
  .domain-aside > section,
  .domain-aside > article,
  .domain-aside > .aside-card { padding: 21px; }
  .topic-grid { grid-template-columns: 1fr; gap: 11px; }
  .topic-card { min-height: 0; padding: 21px; }
  .topic-card > svg:first-child,
  .topic-card > .topic-icon,
  .topic-card > .icon { margin-bottom: 16px; }
  .topic-card h3 { max-width: none; font-size: 22px; }
  .topic-card p { font-size: 12px; }
  .domain-next { grid-template-columns: 1fr; margin-top: 20px; }
  .domain-next > :is(a, article, div, section) { padding: 22px; border-right: 0; border-bottom: 1px solid var(--line); }
  .domain-next > :last-child { border-bottom: 0; }
  .domain-next h3 { font-size: 22px; }
  .domain-next .text-link { margin-top: 13px; }
  .domain-note { padding: 17px 19px; font-size: 11px; }
  .topic-reader .page-title { padding-block: 24px 18px; }
  .topic-reader .page-title h1 { font-size: clamp(32px, 8.4vw, 42px); }
  .topic-reader .page-title p { font-size: 14px; }
  .topic-reader .prose { font-size: 15px; line-height: 1.85; margin-top: 20px; }
  .topic-reader .prose h2 { font-size: 25px; margin-top: 28px; }
  .topic-reader .prose h3 { font-size: 21px; }
  .topic-example,
  .selfcheck { margin-top: 22px; padding: 21px; }
  .topic-example h2,
  .topic-example h3,
  .selfcheck h2,
  .selfcheck h3 { font-size: 23px; }
  .topic-example p,
  .selfcheck > p { font-size: 13px; }
  .hub-progress { gap: 12px; padding: 14px 16px; font-size: 11px; }
  .hub-progress .text-link { margin-left: 0; font-size: 11px; }
  .bookmark-grid { grid-template-columns: 1fr; gap: 12px; }
  .saved-card { padding: 22px; }
  .saved-card h3 { font-size: 23px; }
  .toast { padding: 12px 15px; font-size: 11px; }
}
@media (max-width: 350px) {
  .domain-card { grid-template-columns: 66px minmax(0, 1fr); }
  .domain-card-copy { padding: 16px 14px; }
  .domain-card-copy h3 { font-size: 20px; }
  .domain-art { padding: 12px; }
  .domain-map { padding: 14px; gap: 7px; }
  .domain-node { padding: 9px; gap: 6px; font-size: 10px; }
  .domain-node > svg { width: 14px; height: 14px; }
  .domain-intro .actions > .btn { flex: 1 1 auto; }
}