#bpe-guided-lab {
  --bpe-green: #57d39b;
  --bpe-green-soft: #102d28;
  --bpe-yellow: #f2c66d;
  --bpe-yellow-soft: #302711;
  margin-top: 2rem;
  color: var(--ink);
}

#bpe-guided-lab * {
  box-sizing: border-box;
}

#bpe-guided-lab .bpe-kicker {
  margin: 0 0 0.4rem;
  color: var(--bpe-green);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

#bpe-guided-lab .bpe-title {
  margin: 0;
  padding-left: 0.75rem;
  border-left: 4px solid var(--bpe-green);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.35;
}

#bpe-guided-lab .bpe-intro {
  margin: 0.75rem 0 1.25rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

#bpe-guided-lab .bpe-stage-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

#bpe-guided-lab .bpe-stage {
  min-height: 3.2rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

#bpe-guided-lab .bpe-stage:last-child {
  border-right: 0;
}

#bpe-guided-lab .bpe-stage strong,
#bpe-guided-lab .bpe-stage span {
  display: block;
}

#bpe-guided-lab .bpe-stage strong {
  color: var(--ink);
  font-size: 0.82rem;
}

#bpe-guided-lab .bpe-stage span {
  margin-top: 0.15rem;
  font-size: 0.72rem;
}

#bpe-guided-lab .bpe-stage[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

#bpe-guided-lab .bpe-panel {
  display: none;
  padding: 1.25rem 0;
}

#bpe-guided-lab .bpe-panel.is-active {
  display: block;
}

#bpe-guided-lab .bpe-section-heading {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}

#bpe-guided-lab .bpe-section-copy {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.55;
}

#bpe-guided-lab .bpe-why {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

#bpe-guided-lab .bpe-tradeoffs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

#bpe-guided-lab .bpe-tradeoffs > div {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem;
  border-top: 3px solid var(--border);
  background: var(--surface);
}

#bpe-guided-lab .bpe-tradeoffs > div.is-answer {
  border-top-color: var(--bpe-green);
  background: var(--bpe-green-soft);
}

#bpe-guided-lab .bpe-tradeoffs strong {
  font-size: 0.82rem;
}

#bpe-guided-lab .bpe-tradeoffs code {
  overflow-wrap: anywhere;
  color: var(--code-ink);
  font-size: 0.76rem;
}

#bpe-guided-lab .bpe-tradeoffs span {
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.45;
}

#bpe-guided-lab .bpe-walkthrough {
  padding-top: 1.25rem;
}

#bpe-guided-lab .bpe-walk-header {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1rem;
}

#bpe-guided-lab .bpe-walk-header .bpe-kicker {
  margin-bottom: 0.3rem;
}

#bpe-guided-lab #bpe-walk-progress {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font: 0.76rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

#bpe-guided-lab .bpe-walk-step {
  display: none;
  min-height: 20rem;
}

#bpe-guided-lab .bpe-walk-step.is-active {
  display: block;
}

#bpe-guided-lab .bpe-walk-step > p {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.6;
}

#bpe-guided-lab .bpe-walk-step .bpe-walk-question {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

#bpe-guided-lab .bpe-demo-rows {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0;
}

#bpe-guided-lab .bpe-demo-rows > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

#bpe-guided-lab .bpe-demo-rows strong {
  color: var(--ink-soft);
  font: 0.76rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

#bpe-guided-lab .bpe-demo-rows i {
  display: inline-flex;
  min-width: 1.8rem;
  min-height: 1.8rem;
  padding: 0.25rem 0.42rem;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--code-bg);
  color: var(--code-ink);
  font: normal 0.76rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

#bpe-guided-lab .bpe-takeaway {
  padding: 0.75rem;
  border-left: 3px solid var(--bpe-yellow);
  background: var(--bpe-yellow-soft);
  color: var(--ink) !important;
}

#bpe-guided-lab .bpe-count-table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  font-size: 0.78rem;
}

#bpe-guided-lab .bpe-count-table th,
#bpe-guided-lab .bpe-count-table td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

#bpe-guided-lab .bpe-count-table th {
  color: var(--ink-soft);
  font-weight: 600;
}

#bpe-guided-lab .bpe-count-table .is-winner {
  background: var(--bpe-green-soft);
}

#bpe-guided-lab .bpe-demo-transition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  margin: 1rem 0;
}

#bpe-guided-lab .bpe-demo-transition > div {
  display: grid;
  gap: 0.35rem;
  min-height: 4.5rem;
  padding: 0.7rem;
  align-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
}

#bpe-guided-lab .bpe-demo-transition span {
  color: var(--ink-soft);
  font-size: 0.68rem;
}

#bpe-guided-lab .bpe-demo-transition code {
  overflow-wrap: anywhere;
  color: var(--code-ink);
  font-size: 0.76rem;
}

#bpe-guided-lab .bpe-demo-transition code.is-highlight {
  color: var(--bpe-green);
}

#bpe-guided-lab .bpe-demo-transition b {
  color: var(--ink-soft);
  font-size: 1rem;
}

#bpe-guided-lab .bpe-job-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

#bpe-guided-lab .bpe-job-split p {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 2px solid var(--border);
}

#bpe-guided-lab .bpe-job-split strong,
#bpe-guided-lab .bpe-job-split span {
  display: block;
}

#bpe-guided-lab .bpe-job-split strong {
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
}

#bpe-guided-lab .bpe-job-split span {
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.45;
}

#bpe-guided-lab .bpe-walk-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

#bpe-guided-lab .bpe-advanced {
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

#bpe-guided-lab .bpe-advanced summary {
  padding: 0.7rem 0.8rem;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
}

#bpe-guided-lab .bpe-advanced .bpe-setup {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

#bpe-guided-lab .bpe-setup {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(13rem, 0.8fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

#bpe-guided-lab label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

#bpe-guided-lab textarea,
#bpe-guided-lab input[type="text"] {
  width: 100%;
  margin-top: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: 0;
  background: var(--code-bg);
  color: var(--code-ink);
  font: 0.84rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}

#bpe-guided-lab textarea {
  min-height: 7.2rem;
  padding: 0.7rem;
  resize: vertical;
}

#bpe-guided-lab input[type="text"] {
  height: 2.4rem;
  padding: 0 0.65rem;
}

#bpe-guided-lab textarea:focus,
#bpe-guided-lab input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

#bpe-guided-lab .bpe-options {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

#bpe-guided-lab .bpe-check {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
}

#bpe-guided-lab .bpe-check input {
  width: 1rem;
  height: 1rem;
  margin: 0.1rem 0 0;
  accent-color: var(--accent);
}

#bpe-guided-lab .bpe-option-note {
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.45;
}

#bpe-guided-lab .bpe-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0;
}

#bpe-guided-lab button {
  font: inherit;
}

#bpe-guided-lab .bpe-button {
  min-height: 2.35rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
}

#bpe-guided-lab .bpe-button:hover:not(:disabled) {
  border-color: var(--accent);
}

#bpe-guided-lab .bpe-button.is-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #06101f;
}

#bpe-guided-lab .bpe-button.is-quiet {
  background: transparent;
}

#bpe-guided-lab .bpe-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#bpe-guided-lab .bpe-round {
  margin-left: auto;
  color: var(--ink-soft);
  font: 0.78rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

#bpe-guided-lab .bpe-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(15rem, 0.85fr);
  gap: 1rem;
  align-items: start;
}

#bpe-guided-lab .bpe-band {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
}

#bpe-guided-lab .bpe-band:first-child {
  border-top: 0;
  padding-top: 0;
}

#bpe-guided-lab .bpe-band-title {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.65rem;
}

#bpe-guided-lab .bpe-band-title strong {
  font-size: 0.82rem;
}

#bpe-guided-lab .bpe-band-title span {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

#bpe-guided-lab .bpe-word-list {
  display: grid;
  gap: 0.45rem;
  min-height: 8.5rem;
}

#bpe-guided-lab .bpe-word-row {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}

#bpe-guided-lab .bpe-word-label {
  overflow: hidden;
  color: var(--ink-soft);
  font: 0.74rem ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bpe-guided-lab .bpe-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 1.8rem;
}

#bpe-guided-lab .bpe-token {
  display: inline-flex;
  min-height: 1.7rem;
  padding: 0.25rem 0.42rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--code-bg);
  color: var(--code-ink);
  font: 0.74rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

#bpe-guided-lab .bpe-token.is-new {
  border-color: var(--bpe-green);
  background: var(--bpe-green-soft);
  color: var(--bpe-green);
}

#bpe-guided-lab .bpe-token.is-boundary {
  color: var(--ink-soft);
}

#bpe-guided-lab .bpe-pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

#bpe-guided-lab .bpe-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.55rem 0.65rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

#bpe-guided-lab .bpe-pair:hover {
  border-color: var(--accent);
}

#bpe-guided-lab .bpe-pair code {
  overflow: hidden;
  color: var(--code-ink);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bpe-guided-lab .bpe-pair span {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

#bpe-guided-lab .bpe-pair.is-correct {
  border-color: var(--bpe-green);
  background: var(--bpe-green-soft);
}

#bpe-guided-lab .bpe-pair.is-wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
}

#bpe-guided-lab .bpe-feedback {
  min-height: 4.2rem;
  padding: 0.8rem;
  border-left: 3px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}

#bpe-guided-lab .bpe-feedback.is-correct {
  border-left-color: var(--bpe-green);
  background: var(--bpe-green-soft);
  color: var(--ink);
}

#bpe-guided-lab .bpe-feedback.is-wrong {
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--ink);
}

#bpe-guided-lab .bpe-merge-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

#bpe-guided-lab .bpe-merge-list th,
#bpe-guided-lab .bpe-merge-list td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

#bpe-guided-lab .bpe-merge-list th {
  color: var(--ink-soft);
  font-weight: 600;
}

#bpe-guided-lab .bpe-empty {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

#bpe-guided-lab .bpe-experiment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

#bpe-guided-lab .bpe-output {
  min-height: 5.8rem;
  margin-top: 0.75rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--code-bg);
}

#bpe-guided-lab .bpe-output-line {
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
}

#bpe-guided-lab .bpe-segmented {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

#bpe-guided-lab .bpe-segmented button {
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.74rem;
}

#bpe-guided-lab .bpe-segmented button:last-child {
  border-right: 0;
}

#bpe-guided-lab .bpe-segmented button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

#bpe-guided-lab .bpe-code-step {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}

#bpe-guided-lab .bpe-code-step:first-of-type {
  border-top: 0;
}

#bpe-guided-lab .bpe-code-step h4 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

#bpe-guided-lab .bpe-code-step p {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}

#bpe-guided-lab .bpe-code {
  margin: 0;
  padding: 0.85rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--code-bg);
  color: var(--code-ink);
  font: 0.76rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
}

#bpe-guided-lab .bpe-blank {
  color: var(--bpe-yellow);
}

#bpe-guided-lab .bpe-answer {
  display: none;
  margin-top: 0.65rem;
  padding: 0.65rem;
  border-left: 3px solid var(--bpe-green);
  background: var(--bpe-green-soft);
  color: var(--ink);
  font: 0.76rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

#bpe-guided-lab .bpe-answer.is-visible {
  display: block;
}

#bpe-guided-lab .bpe-checkpoint {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}

#bpe-guided-lab .bpe-checkpoint:first-of-type {
  border-top: 0;
}

#bpe-guided-lab .bpe-checkpoint p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  font-weight: 700;
}

#bpe-guided-lab .bpe-choices {
  display: grid;
  gap: 0.45rem;
}

#bpe-guided-lab .bpe-choice {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.8rem;
  text-align: left;
}

#bpe-guided-lab .bpe-choice.is-correct {
  border-color: var(--bpe-green);
  background: var(--bpe-green-soft);
}

#bpe-guided-lab .bpe-choice.is-wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
}

#bpe-guided-lab .bpe-summary {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--bpe-green);
  border-radius: 8px;
  background: var(--bpe-green-soft);
}

#bpe-guided-lab .bpe-summary strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--bpe-green);
}

#bpe-guided-lab .bpe-summary p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
}

.bpe-guided-replaced {
  display: none !important;
}

.bpe-reference-note {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

#subtokenizer-guide {
  --subtok-green: #57d39b;
  --subtok-green-soft: #102d28;
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}

#subtokenizer-guide * {
  box-sizing: border-box;
}

#subtokenizer-guide .subtok-kicker {
  margin: 0 0 0.35rem;
  color: var(--subtok-green);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

#subtokenizer-guide h2 {
  margin: 0;
  padding-left: 0.75rem;
  border-left: 4px solid var(--subtok-green);
  font-size: 1.3rem;
  line-height: 1.35;
}

#subtokenizer-guide .subtok-intro {
  margin: 0.75rem 0 1rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.6;
}

#subtokenizer-guide .subtok-common {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

#subtokenizer-guide .subtok-common > div {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.65rem;
  border-top: 2px solid var(--border);
}

#subtokenizer-guide .subtok-common strong {
  font-size: 0.8rem;
}

#subtokenizer-guide .subtok-common span {
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.4;
}

#subtokenizer-guide .subtok-pipeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  background: var(--code-bg);
}

#subtokenizer-guide .subtok-pipeline > div {
  display: grid;
  gap: 0.25rem;
}

#subtokenizer-guide .subtok-pipeline span {
  color: var(--ink-soft);
  font-size: 0.65rem;
}

#subtokenizer-guide .subtok-pipeline code {
  overflow-wrap: anywhere;
  color: var(--code-ink);
  font-size: 0.72rem;
}

#subtokenizer-guide .subtok-pipeline b {
  color: var(--subtok-green);
}

#subtokenizer-guide .subtok-id-note {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.5;
}

#subtokenizer-guide .subtok-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

#subtokenizer-guide .subtok-tabs button {
  min-height: 2.6rem;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}

#subtokenizer-guide .subtok-tabs button:last-child {
  border-right: 0;
}

#subtokenizer-guide .subtok-tabs button[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

#subtokenizer-guide .subtok-panel {
  display: none;
  padding: 1rem;
  border: 1px solid var(--border);
  border-top: 0;
  background: var(--surface);
}

#subtokenizer-guide .subtok-panel.is-active {
  display: block;
}

#subtokenizer-guide .subtok-rule {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

#subtokenizer-guide .subtok-direction {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--code-bg);
}

#subtokenizer-guide .subtok-direction code {
  color: var(--code-ink);
  font-size: 0.76rem;
}

#subtokenizer-guide .subtok-direction b {
  color: var(--subtok-green);
}

#subtokenizer-guide dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

#subtokenizer-guide dl > div {
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

#subtokenizer-guide dt {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

#subtokenizer-guide dd {
  margin: 0.25rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
}

#subtokenizer-guide .subtok-encode-demo {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

#subtokenizer-guide .subtok-encode-demo h3 {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
}

#subtokenizer-guide .subtok-encode-demo > p {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.55;
}

#subtokenizer-guide .subtok-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

#subtokenizer-guide .subtok-rules li {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--code-bg);
  font-size: 0.72rem;
}

#subtokenizer-guide .subtok-replay {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

#subtokenizer-guide .subtok-replay > div {
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.3fr);
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-left: 2px solid var(--border);
  background: var(--code-bg);
}

#subtokenizer-guide .subtok-replay > div.is-result {
  border-left-color: var(--subtok-green);
  background: var(--subtok-green-soft);
}

#subtokenizer-guide .subtok-replay span {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

#subtokenizer-guide .subtok-replay code {
  overflow-wrap: anywhere;
  color: var(--code-ink);
  font-size: 0.73rem;
}

#subtokenizer-guide .subtok-paths {
  width: 100%;
  margin: 0 0 0.75rem;
  border-collapse: collapse;
  font-size: 0.73rem;
}

#subtokenizer-guide .subtok-paths th,
#subtokenizer-guide .subtok-paths td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

#subtokenizer-guide .subtok-paths th {
  color: var(--ink-soft);
  font-weight: 600;
}

#subtokenizer-guide .subtok-paths .is-winner {
  background: var(--subtok-green-soft);
}

#subtokenizer-guide .subtok-memory {
  margin: 1rem 0 0;
  padding: 0.7rem;
  border-left: 3px solid var(--subtok-green);
  background: var(--subtok-green-soft);
  font-size: 0.8rem;
}

#subtokenizer-guide .subtok-lab-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

#subtokenizer-guide .subtok-compare {
  margin-top: 1rem;
}

#subtokenizer-guide .subtok-compare h3 {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
}

#subtokenizer-guide .subtok-compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

#subtokenizer-guide .subtok-compare th,
#subtokenizer-guide .subtok-compare td {
  padding: 0.55rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

#subtokenizer-guide .subtok-compare th {
  color: var(--ink-soft);
  font-weight: 600;
}

#subtokenizer-guide .subtok-check {
  margin-top: 1rem;
  padding: 0.85rem;
  border-top: 3px solid var(--accent);
  background: var(--surface);
}

#subtokenizer-guide .subtok-check > p {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
}

#subtokenizer-guide .subtok-check > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#subtokenizer-guide .subtok-check button {
  min-height: 2.2rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
}

#subtokenizer-guide .subtok-check button.is-correct {
  border-color: var(--subtok-green);
  background: var(--subtok-green-soft);
}

#subtokenizer-guide .subtok-check button.is-wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
}

#subtokenizer-guide .subtok-check .subtok-feedback {
  margin: 0.65rem 0 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.subtok-reference-note {
  margin: 0.5rem 0 0.9rem;
  padding: 0.65rem;
  border-left: 3px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.78rem;
}

@media (max-width: 760px) {
  #bpe-guided-lab .bpe-stage-nav,
  #bpe-guided-lab .bpe-tradeoffs,
  #bpe-guided-lab .bpe-setup,
  #bpe-guided-lab .bpe-workbench,
  #bpe-guided-lab .bpe-experiment,
  #bpe-guided-lab .bpe-job-split,
  #bpe-guided-lab .bpe-demo-transition {
    grid-template-columns: 1fr;
  }

  #bpe-guided-lab .bpe-demo-transition b {
    transform: rotate(90deg);
    justify-self: center;
  }

  #bpe-guided-lab .bpe-walk-step {
    min-height: 0;
  }

  #bpe-guided-lab .bpe-count-table {
    display: block;
    overflow-x: auto;
  }

  #subtokenizer-guide .subtok-common,
  #subtokenizer-guide dl,
  #subtokenizer-guide .subtok-pipeline {
    grid-template-columns: 1fr;
  }

  #subtokenizer-guide .subtok-pipeline b {
    transform: rotate(90deg);
    justify-self: center;
  }

  #subtokenizer-guide .subtok-replay > div {
    grid-template-columns: 1fr;
  }

  #subtokenizer-guide .subtok-compare {
    overflow-x: auto;
  }

  #subtokenizer-guide .subtok-paths {
    display: block;
    overflow-x: auto;
  }

  #bpe-guided-lab .bpe-stage {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  #bpe-guided-lab .bpe-stage:last-child {
    border-bottom: 0;
  }

  #bpe-guided-lab .bpe-pairs {
    grid-template-columns: 1fr;
  }

  #bpe-guided-lab .bpe-round {
    width: 100%;
    margin-left: 0;
  }

  #bpe-guided-lab .bpe-word-row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }
}