.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); }
.we-intro { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.we-commands { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 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; cursor: pointer; }
.we-commands button code { color: inherit; background: transparent; padding: 0; 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-practice { border-top: 1px solid var(--border); padding-top: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.we-practice-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
#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-workspace { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-6); }
.we-workspace-single { grid-template-columns: 1fr; }
.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); }
.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(--destructive); border-style: dashed; }
.we-structure_void { background: var(--we-info-surface); color: var(--foreground); border: 1px dashed var(--primary); }
.we-preview { min-width: 0; }
.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: color-mix(in srgb, var(--warning) 55%, var(--background)); }
.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); padding-top: var(--space-4); }
#weExplanation { font-size: var(--fs-sm); line-height: var(--lh-body); }
.we-result .btn { flex-shrink: 0; }
#weCopyStatus { margin-top: var(--space-2); }
#weCopyStatus:empty { display: none; }
.we-note { border-top: 1px solid var(--border); padding-top: var(--space-4); }
@media (max-width: 1024px) {
  .we-workspace { grid-template-columns: 1fr; }
  .we-source { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: var(--space-4); align-items: center; }
  .we-source h2 { margin: 0; }
}
@media (max-width: 640px) {
  .we-commands { grid-template-columns: 1fr; }
  .we-commands button { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-h-l); }
  .we-commands button code { flex-shrink: 0; }
  .we-commands button span { text-align: right; }
  .we-scenes { grid-template-columns: 1fr; }
  .we-scene + .we-scene { border-left: 0; border-top: 1px solid var(--border); }
  .we-scene-current { order: -1; }
  .we-scene-current + .we-scene { border-top: 0; }
  .we-scene:first-child { border-top: 1px solid var(--border); }
  .we-result { flex-direction: column; align-items: flex-start; }
}