.we-page {
  background: var(--background);
  --we-info-surface: var(--info-surface, color-mix(in srgb, var(--primary) 10%, var(--background)));
  --we-warning-surface: var(--warning-surface, color-mix(in srgb, var(--warning) 10%, var(--background)));
  --we-destructive-surface: var(--destructive-surface, color-mix(in srgb, var(--destructive) 10%, var(--background)));
}
.we-content { display: flex; flex-direction: column; gap: var(--space-6); }
.learn-page.we-page, .we-page .learn-page { --content-max: 1200px; }
.we-heading { display: flex; flex-direction: column; gap: var(--space-2); }
.we-intro { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.we-controls { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.we-commands { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.we-commands button { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; }
.we-commands button code { color: inherit; background: transparent; padding: 0; font-family: var(--font-mono); font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.we-lesson-nav { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; }
.we-lesson-nav a { color: var(--muted-foreground); font-size: var(--fs-sm); }
.we-grass_block { background: var(--success-surface, var(--muted)); color: var(--foreground); }
.we-selected-cell { fill: none; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 4 2; }
.we-direction { fill: var(--muted-foreground); font: 500 var(--fs-2xs) var(--font-family); text-anchor: middle; }
.we-click-point circle { fill: var(--primary); stroke: var(--primary-foreground); stroke-width: 1; }
.we-click-point text { fill: var(--primary-foreground); font: 500 var(--fs-2xs) var(--font-family); text-anchor: middle; }
#weSelectionInfo { margin: 0; }
.we-practice { border-top: 1px solid var(--border); padding-top: var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.we-practice-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; width: 100%; }
.we-practice-actions > a { margin-inline-start: auto; }
#weFeedback:empty, #weStorageStatus:empty { display: none; }
#weFeedback[data-result="success"] { color: var(--success-text, var(--foreground)); }
.we-commands button span { font-size: var(--fs-xs); color: var(--muted-foreground); }
.we-commands [aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.we-commands [aria-pressed="true"] span { color: inherit; }
.we-command-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.we-command-bar code { padding: 0; background: transparent; font: var(--fs-sm) var(--font-mono); overflow-wrap: anywhere; }
.we-command-bar .btn { flex-shrink: 0; min-height: var(--control-h-l); }
.we-command-bar[hidden], #weWandAction[hidden] { display: none; }
.we-start-help { margin: 0; line-height: var(--lh-body); }
.we-start-help a { white-space: nowrap; }
.we-click-details summary { cursor: pointer; padding: var(--space-2) 0; font-size: var(--fs-sm); }
.we-click-details p { margin-top: var(--space-3); }
.we-mode-steps { margin: 0; padding-inline-start: var(--space-6); font-size: var(--fs-sm); line-height: var(--lh-body); }
.we-mode-steps li + li { margin-top: var(--space-1); }
.we-slice-controls { display: flex; align-items: center; gap: var(--space-3); }
.we-slice-controls[hidden], #weClickInfo[hidden] { display: none; }
.we-slice-controls .btn { min-width: var(--control-h-l); min-height: var(--control-h-l); }
#weClickInfo { margin: 0; line-height: var(--lh-body); }
.we-workspace { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.we-source[hidden] { display: none; }
.we-source h2 { margin-bottom: var(--space-3); }
.we-source-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); width: 100%; max-width: 12rem; }
.we-source-cell { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--border); font-size: var(--fs-xs); }
.we-stone { background: var(--muted); color: var(--foreground); }
.we-oak_planks { background: var(--we-warning-surface); color: var(--foreground); }
.we-air { background: var(--background); color: var(--foreground); border-style: dashed; }
.we-structure_void { background: var(--we-info-surface); color: var(--foreground); border: 1px dashed var(--primary); }
.we-preview { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.we-before-toggle, .we-before-toggle[hidden] { display: none; }
.we-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.we-scene { min-width: 0; margin: 0; background: var(--background-subtle); }
.we-scene + .we-scene { border-left: 1px solid var(--border); }
.we-scene-current { background: var(--background); }
.we-scene figcaption { padding: var(--space-4) var(--space-4) 0; font-size: var(--fs-sm); font-weight: 500; }
.we-canvas { aspect-ratio: 1.6; min-width: 0; }
.we-canvas svg { display: block; width: 100%; height: 100%; }
.we-tile { fill: var(--background-subtle); stroke: var(--border); stroke-width: 0.5; }
.we-block-stone { fill: color-mix(in srgb, var(--muted-foreground) 40%, var(--background)); }
.we-block-oak_planks { fill: var(--we-warning-surface); }
.we-block-grass_block { fill: color-mix(in srgb, var(--success) 42%, var(--background)); }
.we-block-structure_void { fill: var(--we-info-surface); stroke: var(--primary); stroke-dasharray: 3 2; }
.we-block-side { fill: var(--muted); stroke: var(--border); stroke-width: 0.5; }
.we-block-top { stroke: var(--border); stroke-width: 0.5; }
.we-block-label { fill: var(--foreground); font: 500 var(--fs-2xs) var(--font-family); text-anchor: middle; pointer-events: none; }
.we-cleared { fill: var(--we-destructive-surface); stroke: var(--destructive); stroke-width: 1.5; stroke-dasharray: 3 2; }
.we-pin rect { fill: var(--foreground); }
.we-pin path { stroke: var(--foreground); stroke-width: 1.5; }
.we-pin text { fill: var(--background); font: 500 var(--fs-xs) var(--font-family); text-anchor: middle; }
.we-result { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
#weExplanation { font-size: var(--fs-sm); line-height: var(--lh-body); }
.we-result .btn { flex-shrink: 0; }
#weCopyStatus { margin: 0; }
#weCopyStatus:empty { display: none; }
.we-note { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.we-reference { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.we-reference summary { cursor: pointer; padding: var(--space-2) 0; font-size: var(--fs-sm); font-weight: 500; }
.we-reference > p { margin-top: var(--space-3); }
.we-reference dl { margin: var(--space-3) 0 0; }
.we-reference dl > div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; }
.we-reference dl > div + div { border-top: 1px solid var(--border); }
.we-reference dt { display: flex; flex-direction: column; gap: var(--space-1); }
.we-reference dt code { font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.we-reference dd { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); }
@media (max-width: 1024px) {
  .we-workspace { grid-template-columns: 1fr; }
  .we-controls { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: var(--space-5); align-items: start; }
  .we-controls > #weGoal { grid-column: 1 / -1; }
  .we-controls:has(.we-source[hidden]) { grid-template-columns: 1fr; }
  .we-controls:has(.we-source[hidden]) .we-commands { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
@media (max-width: 767px) {
  .we-controls { display: flex; align-items: stretch; }
  .we-source { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: var(--space-4); align-items: center; }
  .we-source h2 { margin: 0; }
  .we-reference dl > div { grid-template-columns: 1fr; gap: var(--space-2); }
  .we-commands, .we-controls:has(.we-source[hidden]) .we-commands { grid-template-columns: 1fr; }
  .we-commands button { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-3); min-height: var(--control-h-l); }
  .we-commands button code { min-width: 0; }
  .we-commands button span { min-width: 0; text-align: right; word-break: keep-all; overflow-wrap: anywhere; }
  .we-scenes { display: contents; }
  .we-scene { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
  .we-scene-current { order: 0; }
  .we-slice-controls { order: -1; }
  .we-scene-before { display: none; order: 4; }
  .we-preview:has(.we-before-toggle[aria-expanded="true"]) .we-scene-before { display: block; }
  #weSelectionInfo, #weClickInfo, .we-result { order: 1; }
  #weCopyStatus { order: 2; }
  .we-before-toggle:not([hidden]) { display: inline-flex; order: 3; align-self: flex-start; min-height: var(--control-h-l); }
  .we-practice { order: 5; }
  .we-result { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* All nine modes stay visible while the selected area is the main scene. */
.we-page[data-we-lesson="selection-modes"] .we-commands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.we-page[data-we-lesson="selection-modes"] .we-commands button { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-height: var(--control-h-l); padding: var(--space-2); text-align: center; }
.we-page[data-we-lesson="selection-modes"] .we-commands button code { order: 1; font-size: var(--fs-xs); white-space: nowrap; }
.we-page[data-we-lesson="selection-modes"] .we-commands button span { font-size: var(--fs-xs); font-weight: 500; text-align: center; white-space: nowrap; }
.we-page[data-we-lesson="selection-modes"] .we-scenes { display: contents; }
.we-page[data-we-lesson="selection-modes"] .we-scene { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.we-page[data-we-lesson="selection-modes"] .we-canvas { aspect-ratio: 2.4; }
.we-page[data-we-lesson="selection-modes"] .we-command-bar { order: -3; }
.we-page[data-we-lesson="selection-modes"] #weCopyStatus { order: -2; }
.we-page[data-we-lesson="selection-modes"] .we-slice-controls { order: -1; }
.we-page[data-we-lesson="selection-modes"] .we-scene-current { order: 0; }
.we-page[data-we-lesson="selection-modes"] .we-result { order: -2; }
.we-page[data-we-lesson="selection-modes"] #weExplanation { margin: 0; }
.we-page[data-we-lesson="selection-modes"] .we-mode-steps { order: 1; }
.we-page[data-we-lesson="selection-modes"] #weSelectionInfo { order: 2; }
.we-page[data-we-lesson="selection-modes"] .we-click-details { order: 2; }
.we-page[data-we-lesson="selection-modes"] .we-before-toggle:not([hidden]) { display: inline-flex; order: 3; align-self: flex-start; min-height: var(--control-h-l); }
.we-page[data-we-lesson="selection-modes"] .we-scene-before { display: none; order: 4; }
.we-page[data-we-lesson="selection-modes"] .we-preview:has(.we-before-toggle[aria-expanded="true"]) .we-scene-before { display: block; }
.we-page[data-we-lesson="selection-modes"] .we-practice { order: 5; }
@media (max-width: 1024px) {
  .we-page[data-we-lesson="selection-modes"] .we-controls .we-commands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .we-page[data-we-lesson="selection-modes"] .we-canvas { aspect-ratio: 1.6; }
}

.we-page[data-we-lesson="first-steps"] .we-content { max-width: 40rem; margin-inline: auto; }
.we-wand-practice { display: flex; flex-direction: column; gap: var(--space-4); }
.we-wand-practice p, .we-wand-practice h2 { margin: 0; }
.we-wand-practice h2 { order: -3; }
#weWandInstruction { order: -2; }
.we-wand-practice:has(.we-wand-grid[data-stage="0"]) .we-command-bar,
.we-wand-practice:has(.we-wand-grid[data-stage="0"]) .we-wand-actions { order: -1; }
.we-wand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); width: 100%; max-width: 22rem; align-self: center; }
.we-wand-grid button { aspect-ratio: 1; min-height: var(--control-h-l); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--success) 42%, var(--background)); color: var(--foreground); font: 500 var(--fs-sm) var(--font-family); cursor: pointer; }
.we-wand-grid button[data-block="stone"] { background: var(--muted); }
.we-wand-grid button[data-selected="true"] { border: 2px dashed var(--primary); }
.we-wand-grid button:disabled { opacity: 1; cursor: default; }
.we-wand-grid button:not(:disabled):hover { border-color: var(--primary); }
.we-wand-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.we-wand-actions .btn { min-height: var(--control-h-l); }
.we-point-practice { display: flex; flex-direction: column; gap: var(--space-3); }
.we-point-practice p, .we-point-practice h2 { margin: 0; }
.we-point-toolbar { order: -1; display: flex; justify-content: flex-end; }
.we-point-practice[hidden], .we-point-toolbar[hidden] { display: none; }
.we-point-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.we-point-actions .btn { min-height: var(--control-h-l); }
.we-point-actions [aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.we-preview[data-point-view="true"] .we-point-toolbar { order: 3; }
.we-page[data-we-lesson="selection"] .we-commands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.we-page[data-we-lesson="selection"] .we-commands button { padding: var(--space-2); min-height: var(--control-h-l); }
.we-page[data-we-lesson="selection"] .we-command-bar { order: -3; }
.we-preview[data-point-view="true"] .we-scenes,
.we-preview[data-point-view="true"] .we-scene,
.we-preview[data-point-view="true"] #weModeSteps,
.we-preview[data-point-view="true"] #weSelectionInfo,
.we-preview[data-point-view="true"] #weClickDetails,
.we-preview[data-point-view="true"] .we-result,
.we-preview[data-point-view="true"] #weBeforeToggle { display: none; }
.we-page:has(.we-preview[data-point-view="true"]) .we-heading #weSetup { display: none; }