.ibibio-page {
  --ib-line: #d6d6d6;
  --ib-fill: #dddddd;
  --ib-hover: #e6e6e6;
  --ib-muted: #666666;
  --ib-success: #177746;
  --ib-error: #a62c2c;
  width: min(100%, 74rem);
  margin: 0 auto;
  padding: calc(7rem + var(--safe-top)) 3rem 4rem;
  color: var(--text-body);
}
[data-theme="dark"] .ibibio-page {
  --ib-line: #393939;
  --ib-fill: #222222;
  --ib-hover: #292929;
  --ib-muted: #aaaaaa;
  --ib-success: #78e4a0;
  --ib-error: #ff9e9e;
}
.ibibio-page :is(h1, h2, h3, p, button, input, select) { letter-spacing: 0; }
.ibibio-page :is(h1, h2, h3) { color: var(--text-heading); line-height: 1.4; }
.ibibio-page h1 { margin: .25rem 0; font-size: 2.25rem; font-weight: 600; }
.ibibio-page h2 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.ibibio-page h3 { margin: 0; font-size: 1.125rem; font-weight: 500; }
.ib-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.ib-kicker { margin: 0; font-size: .75rem; font-weight: 500; color: var(--ib-muted); }
.ib-subtitle { margin: 0; font-size: 1rem; color: var(--ib-muted); }
.ib-button, .ib-icon-button {
  display: inline-flex; justify-content: center; align-items: center; gap: .625rem;
  min-height: 2.75rem; border: .0625rem solid var(--ib-line); border-radius: .375rem;
  padding: .625rem 1rem; background: transparent; color: var(--text-heading);
  font: inherit; font-size: .875rem; font-weight: 500; line-height: 1.5;
  cursor: pointer; touch-action: manipulation;
}
.ib-button { overflow-wrap: anywhere; }
.ib-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ib-icon-button { padding: 0; width: 2.75rem; min-width: 2.75rem; }
.ib-quiet { border-color: transparent; }
.ib-quiet[aria-pressed="true"] { background: var(--ib-fill); }
.ib-tabs { display: flex; gap: .375rem; overflow-x: auto; padding: .25rem 0 1rem; border-bottom: .0625rem solid var(--ib-line); margin-bottom: 1.5rem; scrollbar-width: thin; }
.ib-tabs > button {
  flex-shrink: 0; min-height: 2.75rem; padding: .625rem 1rem;
  font: inherit; font-size: .875rem; color: var(--ib-muted); background: transparent;
  border: 0; border-radius: .375rem; cursor: pointer;
}
.ib-tabs > button[aria-selected="true"] { color: var(--text-heading); background: var(--ib-fill); font-weight: 500; }
.ib-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 3rem; align-items: start; }
.ib-main { min-width: 0; }
.ib-toolbar { display: flex; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: .0625rem solid var(--ib-line); margin-bottom: 1.5rem; }
.ib-toolbar[hidden] { display: none; }
.ib-toolbar > .ib-field { display: grid; gap: .375rem; min-width: 0; font-size: .75rem; color: var(--ib-muted); }
.ib-toolbar select {
  width: 100%; max-width: 100%; min-height: 2.75rem; padding: .5rem 2rem .5rem .75rem;
  border: .0625rem solid var(--ib-line); border-radius: .375rem; background: var(--paper);
  color: var(--text-heading); font: inherit; font-size: .875rem; cursor: pointer;
}
.ib-round-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--ib-muted); font-size: .8125rem; }
.ib-round-meta > span:first-child { font-weight: 500; }
.ib-round-progress { appearance: none; display: block; border: 0; border-radius: .25rem; width: 100%; height: .25rem; margin: 1rem 0 1.75rem; overflow: hidden; background: var(--ib-fill); color: var(--text-heading); }
.ib-round-progress::-webkit-progress-bar { background: var(--ib-fill); }
.ib-round-progress::-webkit-progress-value { background: var(--text-heading); }
.ib-round-progress::-moz-progress-bar { background: var(--text-heading); }
.ib-prompt { margin: 0 0 .5rem; font-size: .9375rem; color: var(--ib-muted); }
.ibibio-page .ib-word { margin: 0; font-size: 2rem; font-weight: 500; overflow-wrap: anywhere; }
.ib-topic-label { margin: .5rem 0 1.5rem; font-size: .8125rem; color: var(--ib-muted); }
.ib-options { display: grid; gap: .75rem; }
.ib-option {
  display: flex; align-items: center; gap: .875rem; width: 100%; min-height: 3.5rem;
  padding: .75rem 1rem; border: .0625rem solid var(--ib-line); border-radius: .5rem;
  background: transparent; color: var(--text-heading); font: inherit; font-size: .9375rem;
  line-height: 1.6; text-align: left; cursor: pointer; touch-action: manipulation;
}
.ib-option > [lang] { min-width: 0; overflow-wrap: anywhere; }
.ib-letter { flex-shrink: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .25rem; background: color-mix(in srgb, var(--paper) 92%, var(--ink)); color: var(--ib-muted); font-size: .75rem; }
.ib-option:disabled { cursor: default; opacity: 1; }
.ib-option.ib-correct { color: var(--ib-success); border-color: var(--ib-success); background: color-mix(in srgb, var(--ib-success) 8%, var(--paper)); }
.ib-option.ib-wrong { color: var(--ib-error); border-color: var(--ib-error); background: color-mix(in srgb, var(--ib-error) 8%, var(--paper)); }
.ib-answer-result { flex-shrink: 0; display: inline-flex; margin-left: auto; }
.ib-feedback { display: flex; align-items: flex-start; gap: .625rem; margin-top: 1rem; font-size: .875rem; }
.ib-feedback > .ib-icon { margin-top: .125rem; }
.ib-feedback > p { margin: 0; }
.ib-success { color: var(--ib-success); }
.ib-error { color: var(--ib-error); }
.ib-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.ib-progress { border-left: .0625rem solid var(--ib-line); padding-left: 2rem; }
.ib-progress h2 { font-size: 1rem; }
.ib-stats { margin: 1rem 0; }
.ib-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .75rem 0; border-bottom: .0625rem solid var(--ib-line); }
.ib-stats dt { font-size: .8125rem; }
.ib-stats dd { margin: 0; color: var(--text-heading); font-size: 1.25rem; font-weight: 500; }
.ib-storage-note, .ib-source p { font-size: .75rem; line-height: 1.8; color: var(--ib-muted); }
.ib-source { margin-top: 1.5rem; }
.ib-source summary { font-size: .8125rem; font-weight: 500; color: var(--text-heading); cursor: pointer; }
.ib-entry-count { font-size: .75rem; color: var(--ib-muted); margin: 1.5rem 0 0; }
.ib-empty, .ib-results { padding: 2rem 0; }
.ib-empty .ib-button { margin-top: 1.5rem; }
.ib-score { font-size: 3.5rem; line-height: 1.2; color: var(--text-heading); margin: 1.5rem 0; }
.ib-score > span { font-size: 1.25rem; color: var(--ib-muted); }
.ib-score.ib-perfect { color: var(--ib-success); }
.ib-flashcard {
  width: 100%; min-height: 18rem; margin: 1.25rem 0 1rem; padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem;
  border: .0625rem solid var(--ib-line); border-radius: .5rem; background: color-mix(in srgb, var(--paper) 96%, var(--ink));
  color: var(--text-heading); font: inherit; cursor: pointer; text-align: center;
}
.ib-flashcard .ib-topic-label { margin: 0; }
.ib-flashcard strong { font-size: 1.75rem; font-weight: 500; overflow-wrap: anywhere; max-width: 100%; }
.ib-card-language { display: flex; align-items: center; gap: .625rem; color: var(--ib-muted); font-size: .8125rem; }
.ib-card-controls { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; align-items: start; gap: .75rem; }
.ib-search { display: flex; align-items: center; gap: .75rem; border: .0625rem solid var(--ib-line); border-radius: .375rem; padding: 0 .875rem; }
.ib-search input { width: 100%; min-width: 0; min-height: 3rem; padding: .625rem 0; border: 0; font: inherit; font-size: .9375rem; background: transparent; color: var(--text-heading); }
.ib-search input::placeholder { color: var(--ib-muted); opacity: 1; }
.ib-matches { font-size: .8125rem; color: var(--ib-muted); margin: 1rem 0 .25rem; }
.ib-entry { padding: 1.25rem 0; border-bottom: .0625rem solid var(--ib-line); }
.ib-entry > div { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.ib-entry h2 { font-size: 1.125rem; font-weight: 500; overflow-wrap: anywhere; }
.ib-entry > p { font-size: .9375rem; margin: .375rem 0; overflow-wrap: anywhere; }
.ib-entry > small { font-size: .75rem; color: var(--ib-muted); }
.ib-check { padding: .125rem .375rem; border: .0625rem solid var(--ib-line); border-radius: .25rem; font-size: .6875rem; color: var(--ib-muted); }
.ib-pairs-heading > p, .ib-pair-note { font-size: .8125rem; line-height: 1.8; color: var(--ib-muted); }
.ib-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem 0; border-bottom: .0625rem solid var(--ib-line); }
.ib-pair p { margin: .375rem 0 0; font-size: .875rem; overflow-wrap: anywhere; }
.ib-pair h3 { overflow-wrap: anywhere; }
.ib-pair-note { margin-top: 1.5rem; }
.ibibio-page [tabindex="-1"]:focus { outline: none; }
.ibibio-page :is(input, select, summary):focus-visible { outline: .125rem solid var(--focus-ring); outline-offset: .25rem; }
html[data-focus-input="pointer"] .ibibio-page select:focus { outline: none; }
.ib-icon { display: inline-block; flex-shrink: 0; width: 1.125rem; height: 1.125rem; background: currentColor; -webkit-mask: var(--ib-icon) center / contain no-repeat; mask: var(--ib-icon) center / contain no-repeat; }
.ib-icon-check { --ib-icon: url('/assets/images/ibibio-check.svg'); }
.ib-icon-x { --ib-icon: url('/assets/images/ibibio-x.svg'); }
.ib-icon-arrow-left { --ib-icon: url('/assets/images/ibibio-arrow-left.svg'); }
.ib-icon-arrow-right { --ib-icon: url('/assets/images/ibibio-arrow-right.svg'); }
.ib-icon-bookmark { --ib-icon: url('/assets/images/ibibio-bookmark.svg'); }
.ib-icon-bookmark-check { --ib-icon: url('/assets/images/ibibio-bookmark-check.svg'); }
.ib-icon-rotate-ccw { --ib-icon: url('/assets/images/ibibio-rotate-ccw.svg'); }
.ib-icon-search { --ib-icon: url('/assets/images/ibibio-search.svg'); }
@media (hover: hover) {
  .ib-option:not(:disabled):hover, .ib-secondary:hover, .ib-quiet:hover, .ib-icon-button:hover, .ib-tabs > button:hover { background: var(--ib-hover); }
  .ib-primary:hover { opacity: .85; }
}
@media (max-width: 56rem) {
  .ibibio-page { padding-right: 2rem; padding-left: 2rem; }
  .ib-workspace { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .ib-progress { border-left: 0; border-top: .0625rem solid var(--ib-line); padding: 1.5rem 0 0; }
  .ib-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .ib-stats > div { display: flex; flex-direction: column-reverse; align-items: flex-start; }
}
@media (max-width: 35rem) {
  .ibibio-page { padding: calc(6rem + var(--safe-top)) 1.25rem 3rem; }
  .ib-heading { align-items: flex-start; gap: 1rem; }
  .ib-heading > .ib-button { font-size: .75rem; padding: .5rem .625rem; gap: .375rem; max-width: 50%; }
  .ibibio-page h1 { font-size: 2rem; }
  .ib-heading .ib-icon { display: none; }
  .ib-tabs > button { padding: .625rem .75rem; }
  .ib-toolbar { gap: .75rem; }
  .ib-toolbar > .ib-field { flex: 1 1 9rem; }
  .ibibio-page .ib-word { font-size: 1.75rem; }
  .ib-option { padding: .75rem; gap: .625rem; }
  .ib-stats dt { font-size: .75rem; }
  .ib-flashcard strong { font-size: 1.5rem; }
  .ib-card-controls { gap: .375rem; }
  .ib-card-controls .ib-button { padding: .625rem .375rem; font-size: .8125rem; gap: .375rem; }
}