/* Oxalosuccinate public flashcard deck. Kept isolated from the shared atlas shell. */

.flashcards-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(340px, .72fr);
  min-height: min(820px, calc(100svh - 74px));
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  width: min(100%, var(--max));
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 6vw, 6rem);
  margin: auto;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.flashcards-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(620px 440px at 86% 46%, rgba(115, 230, 174, .075), transparent 72%),
    linear-gradient(118deg, rgba(255, 23, 69, .045), transparent 44%);
}
.flashcards-hero-copy { position: relative; z-index: 2; }
.flashcards-hero h1 {
  max-width: 950px;
  margin: 1rem 0 1.35rem;
  font-size: clamp(3.7rem, 8.2vw, 8.2rem);
  font-weight: 280;
  line-height: .88;
  letter-spacing: -.078em;
}
.flashcards-hero-copy > p:not(.flashcards-open-note) {
  max-width: 760px;
  margin: 0;
  color: #c2c5cc;
  font-size: clamp(1.04rem, 1.7vw, 1.3rem);
  line-height: 1.6;
}
.flashcards-domain-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.flashcards-domain-line li {
  position: relative;
  padding: .78rem 1.1rem .78rem 1.55rem;
  color: var(--bio);
  font: 700 .65rem var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.flashcards-domain-line li:first-child { padding-left: .55rem; }
.flashcards-domain-line li:not(:first-child)::before {
  position: absolute;
  left: .25rem;
  top: 50%;
  color: var(--brand);
  content: "/";
  transform: translateY(-50%);
}
.flashcards-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.flashcards-open-note {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.2rem 0 0;
  color: var(--dim);
  font: .68rem/1.55 var(--mono);
}
.flashcards-open-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: .28rem;
  border-radius: 50%;
  background: var(--bio);
  box-shadow: 0 0 14px rgba(115, 230, 174, .55);
}
.flashcards-open-copy { min-width: 0; }
.flashcards-open-note strong { color: #c9e8d9; }

.flashcards-hero-field {
  position: relative;
  z-index: 1;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(85, 216, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 216, 255, .04) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(115, 230, 174, .06), transparent 43%),
    #030305;
  background-size: 36px 36px, 36px 36px, auto, auto;
  box-shadow: 0 28px 100px rgba(0, 0, 0, .5);
}
.flashcards-hero-field::before,
.flashcards-hero-field::after {
  position: absolute;
  width: 24px;
  height: 24px;
  content: "";
  border-color: var(--brand);
}
.flashcards-hero-field::before { left: -1px; top: -1px; border-left: 1px solid; border-top: 1px solid; }
.flashcards-hero-field::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.flashcards-field-label,
.flashcards-field-release {
  position: absolute;
  left: 1rem;
  right: 1rem;
  color: var(--dim);
  font: 650 .58rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.flashcards-field-label { top: 1rem; }
.flashcards-field-release { bottom: 1rem; text-align: right; }
.flashcards-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(115, 230, 174, .22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: flashcard-orbit 24s linear infinite;
}
.flashcards-orbit-outer { width: 72%; aspect-ratio: 1; }
.flashcards-orbit-inner {
  width: 47%;
  aspect-ratio: 1;
  border-color: rgba(255, 23, 69, .28);
  animation-direction: reverse;
  animation-duration: 17s;
}
.flashcards-orbit::before,
.flashcards-orbit::after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  background: currentColor;
  opacity: .3;
  transform: translate(-50%, -50%);
}
.flashcards-orbit::before { width: 138%; height: 1px; }
.flashcards-orbit::after { width: 1px; height: 138%; }
.flashcards-orbit i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--bio);
  border-radius: 50%;
  background: #030305;
  box-shadow: 0 0 14px rgba(115, 230, 174, .34);
}
.flashcards-orbit i:nth-child(1) { left: -5px; top: 50%; }
.flashcards-orbit i:nth-child(2) { right: -5px; top: 50%; }
.flashcards-orbit i:nth-child(3) { left: 50%; top: -5px; }
.flashcards-orbit i:nth-child(4) { left: 50%; bottom: -5px; }
.flashcards-orbit-inner i { border-color: var(--brand-bright); box-shadow: 0 0 14px rgba(255, 23, 69, .3); }
.flashcards-field-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 112px;
  aspect-ratio: 1;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(85, 216, 255, .4);
  background: rgba(0, 0, 0, .92);
  box-shadow: 0 0 55px rgba(85, 216, 255, .09);
  transform: translate(-50%, -50%) rotate(45deg);
}
.flashcards-field-core strong,
.flashcards-field-core span { transform: rotate(-45deg); }
.flashcards-field-core strong { color: var(--brand); font: 800 1.1rem var(--mono); letter-spacing: .12em; }
.flashcards-field-core span { margin-top: .25rem; color: var(--muted); font: .52rem var(--mono); text-transform: uppercase; }
.flashcards-field-word {
  position: absolute;
  padding: .28rem .42rem;
  border: 1px solid var(--line);
  background: #000;
  color: #b8bbc3;
  font: 650 .57rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.field-word-a { left: 8%; top: 28%; }
.field-word-b { right: 7%; top: 36%; }
.field-word-c { left: 15%; bottom: 22%; }
@keyframes flashcard-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

.flashcards-shell {
  width: min(100%, var(--max));
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1rem, 5vw, 5rem);
  margin: auto;
}
.flashcards-shell [hidden] { display: none !important; }
.flashcards-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
}
.flashcards-heading h2 {
  max-width: 850px;
  margin: .65rem 0 0;
  font-size: clamp(2.7rem, 5.6vw, 5.6rem);
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.06em;
}
.flashcards-heading > p { margin: 0; padding-left: 1.2rem; border-left: 1px solid var(--brand); color: var(--muted); }

.flashcards-state {
  display: flex;
  min-height: 180px;
  align-items: center;
  gap: 1.15rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  background: var(--surface);
}
.flashcards-state-mark {
  display: grid;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(115, 230, 174, .34);
  color: var(--bio);
  font: 750 .76rem var(--mono);
}
.flashcards-state strong { font-size: 1.05rem; }
.flashcards-state p { max-width: 650px; margin: .22rem 0 0; color: var(--muted); font-size: .86rem; }
.flashcards-state .button { margin-left: auto; }
.flashcards-error { border-color: rgba(255, 103, 128, .38); background: rgba(255, 103, 128, .035); }
.flashcards-error .flashcards-state-mark { border-color: rgba(255, 103, 128, .46); color: var(--danger); }
.flashcards-noscript { margin-top: 1.5rem; }

.flashcards-filter {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(170px, .72fr) auto auto;
  gap: .8rem;
  align-items: end;
  padding: 1rem;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(115, 230, 174, .028), transparent 34%), var(--surface);
}
.flashcards-filter label { display: grid; gap: .4rem; }
.flashcards-filter label > span {
  color: var(--brand-bright);
  font: 700 .61rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.flashcards-filter select {
  width: 100%;
  min-height: 46px;
  padding: .68rem 2.1rem .68rem .78rem;
  border: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  background: #020204;
  color: var(--ink);
  font: .82rem var(--sans);
}
.flashcards-filter select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 23, 69, .07); }
.flashcards-filter select:focus-visible { outline: 3px solid var(--brand-bright); outline-offset: 2px; }
.flashcards-filter-actions { display: flex; align-items: center; gap: .65rem; }
.flashcards-filter-actions .button { white-space: nowrap; }
.flashcards-order-reset,
.flashcards-filter-reset,
.flashcards-reset-progress {
  min-height: 44px;
  padding: .45rem .35rem;
  border: 0;
  background: transparent;
  color: var(--brand-bright);
  font: 700 .65rem var(--mono);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.flashcards-order-reset { color: var(--bio); }
.flashcards-result-bar {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .2rem;
  border-bottom: 1px solid var(--line);
}
.flashcards-result-bar p { margin: 0; color: #c8cbd1; font: .7rem var(--mono); }
.flashcards-result-bar span { color: var(--dim); font: 650 .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.flashcards-empty {
  min-height: 380px;
  padding: clamp(2rem, 7vw, 5rem);
  margin-top: 1.25rem;
  border: 1px solid var(--line);
  background: radial-gradient(520px 260px at 50% 0, rgba(255, 23, 69, .06), transparent), var(--surface);
  text-align: center;
}
.flashcards-empty > span { color: var(--brand); font: 300 clamp(3rem, 10vw, 7rem)/1 var(--mono); }
.flashcards-empty h3 { margin: .8rem 0 .45rem; font-size: clamp(1.7rem, 4vw, 3.1rem); font-weight: 350; letter-spacing: -.045em; }
.flashcards-empty p { max-width: 620px; margin: 0 auto 1.5rem; color: var(--muted); }

.flashcards-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: clamp(1.7rem, 4vw, 3rem);
}
.flashcards-card-register {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #030305;
}
.flashcards-card-register > div { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.flashcards-card-register > div:last-child { justify-content: flex-end; text-align: right; }
.flashcards-card-register span { color: var(--dim); font: 650 .58rem var(--mono); letter-spacing: .055em; text-transform: uppercase; }
.flashcards-card-register strong {
  padding: .18rem .4rem;
  border: 1px solid var(--line);
  color: var(--cyan);
  font: 700 .57rem var(--mono);
  letter-spacing: .045em;
  text-transform: uppercase;
}
.flashcards-card-register > div:last-child strong { color: var(--muted); }
.flashcards-stage[data-card-status="mastered"] [data-flashcard-card-status] { border-color: rgba(115, 230, 174, .38); color: var(--bio); }
.flashcards-stage[data-card-status="review"] [data-flashcard-card-status] { border-color: rgba(255, 198, 103, .42); color: var(--amber); }

.flashcards-card {
  display: block;
  width: 100%;
  min-height: clamp(430px, 52vw, 590px);
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  perspective: 1500px;
}
.flashcards-card:focus-visible { outline: 3px solid var(--brand-bright); outline-offset: 5px; }
.flashcards-card-inner {
  position: relative;
  display: grid;
  width: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.2, .75, .25, 1);
}
.flashcards-card.is-flipped .flashcards-card-inner { transform: rotateY(180deg); }
.flashcards-face {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  min-height: inherit;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.6rem, 5vw, 4.5rem);
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(rgba(85, 216, 255, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 216, 255, .027) 1px, transparent 1px),
    radial-gradient(560px 300px at 92% 5%, rgba(115, 230, 174, .07), transparent),
    #060609;
  background-size: 42px 42px, 42px 42px, auto, auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flashcards-face::before,
.flashcards-face::after {
  position: absolute;
  width: 28px;
  height: 28px;
  content: "";
  border-color: var(--brand);
}
.flashcards-face::before { left: -1px; top: -1px; border-left: 2px solid; border-top: 2px solid; }
.flashcards-face::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }
.flashcards-card:hover .flashcards-face { border-color: rgba(115, 230, 174, .34); }
.flashcards-back {
  border-color: rgba(115, 230, 174, .28);
  background:
    linear-gradient(rgba(115, 230, 174, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 230, 174, .027) 1px, transparent 1px),
    radial-gradient(620px 360px at 6% 100%, rgba(255, 23, 69, .07), transparent),
    #060609;
  background-size: 42px 42px, 42px 42px, auto, auto;
  transform: rotateY(180deg);
}
.flashcards-back::before,
.flashcards-back::after { border-color: var(--bio); }
.flashcards-face-kicker {
  color: var(--brand-bright);
  font: 750 .63rem var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.flashcards-back .flashcards-face-kicker { color: var(--bio); }
.flashcards-front > strong {
  max-width: 970px;
  margin: auto 0;
  color: #f4f5f7;
  font-size: clamp(1.65rem, 4vw, 3.75rem);
  font-weight: 390;
  line-height: 1.15;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.flashcards-back > strong {
  max-width: 980px;
  margin: clamp(1.8rem, 5vw, 4rem) 0 1.35rem;
  color: #f0f4f2;
  font-size: clamp(1.22rem, 2.65vw, 2.25rem);
  font-weight: 430;
  line-height: 1.35;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.flashcards-why {
  display: grid;
  max-width: 900px;
  gap: .35rem;
  padding: 1rem 1.1rem;
  margin: 0 0 1.6rem;
  border-left: 2px solid var(--amber);
  background: rgba(255, 198, 103, .04);
}
.flashcards-why b { color: var(--amber); font: 750 .61rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.flashcards-why span { color: #c8c7c1; font-size: clamp(.85rem, 1.4vw, 1rem); line-height: 1.65; overflow-wrap: anywhere; white-space: pre-line; }
.flashcards-face-cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font: 650 .61rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.flashcards-face-cue i { color: var(--brand); font: normal 1.1rem var(--mono); }
.flashcards-back .flashcards-face-cue i { color: var(--bio); }
.flashcards-card[data-status="mastered"] .flashcards-front { box-shadow: inset 0 0 0 1px rgba(115, 230, 174, .17); }
.flashcards-card[data-status="review"] .flashcards-front { box-shadow: inset 0 0 0 1px rgba(255, 198, 103, .19); }

.flashcards-source-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-top: 0;
  background: #030305;
}
.flashcards-source-row span { color: var(--dim); font: 650 .57rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.flashcards-source-row a { color: var(--bio); font: 700 .65rem var(--mono); }
.flashcards-navigation {
  display: grid;
  grid-template-columns: 1fr minmax(150px, .8fr) 1fr;
  gap: .65rem;
  margin-top: .75rem;
}
.flashcards-navigation .button { width: 100%; gap: .5rem; }
.flashcards-navigation .button:disabled,
.flashcards-marking button:disabled { cursor: not-allowed; opacity: .38; }
.flashcards-flip-control { border-color: rgba(115, 230, 174, .36); color: var(--bio); }
.flashcards-marking {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .65rem;
}
.flashcards-marking button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .08rem .7rem;
  min-height: 70px;
  align-content: center;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, .012);
  color: var(--ink);
  text-align: left;
}
.flashcards-marking button > span { grid-row: 1 / 3; align-self: center; color: var(--dim); font: 500 1.25rem var(--mono); }
.flashcards-marking button strong { font: 700 .68rem var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.flashcards-marking button small { color: var(--dim); font-size: .68rem; }
.flashcards-marking button:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .025); }
.flashcards-marking [data-flashcard-mastered][aria-pressed="true"] { border-color: rgba(115, 230, 174, .46); background: rgba(115, 230, 174, .06); }
.flashcards-marking [data-flashcard-mastered][aria-pressed="true"] > span,
.flashcards-marking [data-flashcard-mastered][aria-pressed="true"] strong { color: var(--bio); }
.flashcards-marking [data-flashcard-review][aria-pressed="true"] { border-color: rgba(255, 198, 103, .48); background: rgba(255, 198, 103, .055); }
.flashcards-marking [data-flashcard-review][aria-pressed="true"] > span,
.flashcards-marking [data-flashcard-review][aria-pressed="true"] strong { color: var(--amber); }

.flashcards-progress-panel {
  position: sticky;
  top: 96px;
  padding: 1.35rem;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(115, 230, 174, .03), transparent 45%), var(--surface);
}
.flashcards-progress-panel h3 { margin: .55rem 0 1.3rem; font-size: 1.55rem; font-weight: 450; letter-spacing: -.035em; }
.flashcards-progress-ring {
  position: relative;
  display: grid;
  width: 142px;
  aspect-ratio: 1;
  place-content: center;
  margin: 0 auto 1rem;
  border-radius: 50%;
  text-align: center;
}
.flashcards-progress-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}
.flashcards-progress-ring circle {
  fill: none;
  stroke-width: 7;
}
.flashcards-progress-track { stroke: rgba(203, 207, 218, .12); }
.flashcards-progress-value {
  stroke: var(--bio);
  stroke-linecap: square;
  transition: stroke-dasharray .28s ease;
}
.flashcards-progress-ring strong,
.flashcards-progress-ring span { position: relative; z-index: 1; }
.flashcards-progress-ring strong { color: var(--bio); font: 750 1.45rem var(--mono); }
.flashcards-progress-ring span { color: var(--dim); font: 650 .54rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.flashcards-progress-panel progress {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(203, 207, 218, .12);
  color: var(--bio);
}
.flashcards-progress-panel progress::-webkit-progress-bar { background: rgba(203, 207, 218, .12); }
.flashcards-progress-panel progress::-webkit-progress-value { background: var(--bio); }
.flashcards-progress-panel progress::-moz-progress-bar { background: var(--bio); }
.flashcards-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.2rem 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.flashcards-stats div { padding: .72rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.flashcards-stats dt { color: var(--dim); font: 650 .55rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.flashcards-stats dd { margin: .22rem 0 0; color: #d4d6db; font: 700 .88rem var(--mono); }
.flashcards-storage-note { margin: .9rem 0; color: var(--dim); font-size: .72rem; }
.flashcards-storage-note.is-warning { color: var(--amber); }
.flashcards-data-actions { display: grid; gap: .4rem; }
.flashcards-data-actions .button { width: 100%; }
.flashcards-reset-progress { width: 100%; color: var(--danger); }
.flashcards-keyboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .7rem;
  padding-top: 1rem;
  margin-top: .7rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font: .58rem var(--mono);
}
.flashcards-keyboard > strong { grid-column: 1 / -1; color: #b9bbc2; letter-spacing: .07em; text-transform: uppercase; }
.flashcards-keyboard span { white-space: nowrap; }
.flashcards-keyboard kbd { display: inline-block; min-width: 21px; padding: .1rem .25rem; margin-right: .2rem; border: 1px solid var(--line-strong); background: #020204; color: #c8cad0; font: inherit; text-align: center; }
.flashcards-release { margin: 1rem 0 0; color: var(--dim); font: .58rem var(--mono); }
.flashcards-release code { color: var(--cyan); }

.flashcards-connections {
  display: grid;
  grid-template-columns: auto minmax(220px, .72fr) minmax(300px, 1fr) auto;
  gap: clamp(1.3rem, 4vw, 3.5rem);
  align-items: center;
  width: min(calc(100% - 2rem), calc(var(--max) - 2rem));
  padding: clamp(1.6rem, 4vw, 2.5rem);
  margin: 0 auto clamp(4rem, 8vw, 7rem);
  border: 1px solid rgba(85, 216, 255, .22);
  background: linear-gradient(110deg, rgba(85, 216, 255, .038), transparent 55%), var(--surface);
}
.flashcards-connections-index { color: var(--cyan); font: 300 clamp(2rem, 5vw, 4rem)/1 var(--mono); }
.flashcards-connections h2 { margin: .35rem 0 0; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 360; letter-spacing: -.045em; }
.flashcards-connections p { margin: 0; color: var(--muted); font-size: .9rem; }
.flashcards-connections > a { color: var(--cyan); font: 700 .66rem var(--mono); white-space: nowrap; }

@media (max-width: 1120px) {
  .flashcards-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr); gap: 3rem; }
  .flashcards-filter { grid-template-columns: minmax(180px, 1fr) minmax(160px, .8fr) auto; }
  .flashcards-filter-reset { grid-column: 1 / -1; justify-self: end; min-height: 30px; }
  .flashcards-connections { grid-template-columns: auto minmax(200px, .6fr) 1fr; }
  .flashcards-connections > a { grid-column: 3; }
}

@media (max-width: 900px) {
  .flashcards-hero { grid-template-columns: 1fr; min-height: auto; }
  .flashcards-hero-field { width: min(100%, 590px); min-height: 410px; }
  .flashcards-heading { grid-template-columns: 1fr; }
  .flashcards-heading > p { max-width: 720px; }
  .flashcards-workspace { grid-template-columns: 1fr; }
  .flashcards-progress-panel { position: static; display: grid; grid-template-columns: minmax(150px, .55fr) minmax(230px, 1fr); gap: .7rem 1.5rem; }
  .flashcards-progress-panel > .eyebrow,
  .flashcards-progress-panel > h3 { grid-column: 1 / -1; }
  .flashcards-progress-panel h3 { margin-bottom: .4rem; }
  .flashcards-progress-ring { grid-column: 1; grid-row: 3 / 7; align-self: center; }
  .flashcards-progress-panel progress,
  .flashcards-stats,
  .flashcards-storage-note,
  .flashcards-data-actions { grid-column: 2; }
  .flashcards-progress-panel progress { align-self: end; }
  .flashcards-stats { margin-top: 0; }
  .flashcards-keyboard,
  .flashcards-release { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .flashcards-hero { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .flashcards-hero h1 { font-size: clamp(3.25rem, 15vw, 5.6rem); }
  .flashcards-domain-line li { flex: 1 1 50%; padding-left: 1.2rem; }
  .flashcards-domain-line li:first-child { padding-left: 1.2rem; }
  .flashcards-domain-line li:nth-child(odd)::before { content: none; }
  .flashcards-domain-line li:nth-child(even)::before { left: 0; }
  .flashcards-hero-field { min-height: 360px; }
  .flashcards-state { align-items: flex-start; flex-direction: column; }
  .flashcards-state .button { margin-left: 0; }
  .flashcards-filter { grid-template-columns: 1fr; }
  .flashcards-filter-actions { align-items: stretch; flex-direction: column; }
  .flashcards-filter-actions .button { width: 100%; }
  .flashcards-filter-reset { grid-column: auto; justify-self: center; }
  .flashcards-card-register { align-items: flex-start; flex-direction: column; }
  .flashcards-card-register > div:last-child { justify-content: flex-start; text-align: left; }
  .flashcards-card { min-height: 500px; }
  .flashcards-progress-panel { display: block; }
  .flashcards-progress-ring { margin-top: .7rem; }
  .flashcards-progress-panel progress { margin-bottom: 1rem; }
  .flashcards-connections { grid-template-columns: auto 1fr; }
  .flashcards-connections p,
  .flashcards-connections > a { grid-column: 2; }
}

@media (max-width: 480px) {
  .flashcards-hero-actions .button { width: 100%; }
  .flashcards-open-note { align-items: flex-start; }
  .flashcards-hero-field { min-height: 315px; }
  .flashcards-field-word { display: none; }
  .flashcards-orbit-outer { width: 78%; }
  .flashcards-shell { padding-left: 1rem; padding-right: 1rem; }
  .flashcards-heading h2 { font-size: clamp(2.45rem, 13vw, 4rem); }
  .flashcards-result-bar { align-items: flex-start; flex-direction: column; justify-content: center; gap: .22rem; }
  .flashcards-face { padding: 1.35rem; }
  .flashcards-front > strong { font-size: clamp(1.45rem, 8.4vw, 2.2rem); }
  .flashcards-back > strong { font-size: 1.15rem; }
  .flashcards-why { padding: .8rem; }
  .flashcards-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flashcards-flip-control { grid-column: 1 / -1; grid-row: 1; }
  .flashcards-marking { grid-template-columns: 1fr; }
  .flashcards-source-row { align-items: flex-start; flex-direction: column; }
  .flashcards-connections { width: calc(100% - 2rem); padding: 1.25rem; }
  .flashcards-connections-index { display: none; }
  .flashcards-connections > div,
  .flashcards-connections p,
  .flashcards-connections > a { grid-column: 1 / -1; }
}

@media (max-width: 340px) {
  .flashcards-hero { padding-left: 1rem; padding-right: 1rem; }
  .flashcards-hero h1 { font-size: 3rem; }
  .flashcards-domain-line li { flex-basis: 100%; padding-left: .55rem; }
  .flashcards-domain-line li::before { content: none !important; }
  .flashcards-card { min-height: 520px; }
  .flashcards-face { padding: 1.1rem; }
  .flashcards-navigation .button { padding-left: .45rem; padding-right: .45rem; font-size: .6rem; }
  .flashcards-keyboard { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .flashcards-orbit { animation: none; }
  .flashcards-card-inner,
  .flashcards-progress-value { transition: none; }
}

@media (forced-colors: active) {
  .flashcards-face,
  .flashcards-filter,
  .flashcards-progress-panel,
  .flashcards-connections,
  .flashcards-marking button { border-color: CanvasText; }
  .flashcards-progress-ring { forced-color-adjust: none; }
  .flashcards-progress-track { stroke: GrayText; }
  .flashcards-progress-value { stroke: Highlight; }
}