.app-shell { display: grid; grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr); width: 100%; min-height: 100vh; }
.app-main, .main-content { min-width: 0; }
.site-header { display: flex; min-height: var(--layout-header-height); align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--shell-padding); color: var(--color-text-muted); font-size: 0.8125rem; }
.site-header__context { color: var(--color-text-muted); font-size: 0.75rem; }
.main-content { padding: 16px var(--shell-padding) 40px; }
.lesson-intro, .view-intro { margin-bottom: 32px; }
.lesson-intro h1, .view-intro h1 { font-size: 1.75rem; line-height: 1.3; letter-spacing: -0.025em; word-break: keep-all; overflow-wrap: anywhere; }
.lesson-heading-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lesson-objective, .view-intro > p { max-width: 70ch; margin-top: 8px; color: var(--color-text-muted); word-break: keep-all; }
.lesson-guide { margin-top: 16px; color: var(--color-text-muted); }
.lesson-guide > summary { display: inline-flex; min-height: 44px; align-items: center; cursor: pointer; font-size: 0.8125rem; }
.lesson-guide > summary::after { content: "+"; margin-left: 12px; }
.lesson-guide[open] > summary::after { content: "−"; }
.lesson-guide > summary::-webkit-details-marker { display: none; }
.lesson-steps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 8px; padding-left: 20px; font-size: 0.8125rem; }
.lesson-level { color: var(--color-text-muted); font-size: 0.75rem; white-space: nowrap; }
.workspace { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--workspace-gap); align-items: start; }
.panel { min-width: 0; border: 0; background: var(--color-surface); padding: var(--panel-padding); }
.control-panel { grid-column: 1; grid-row: 1; }
.workspace-results { display: grid; grid-column: 2; grid-row: 1; align-content: start; gap: var(--workspace-gap); min-width: 0; }
.workspace-footer { min-width: 0; }
.lesson-note p:last-child { max-width: 70ch; margin-top: 8px; color: var(--color-text-muted); }
@media (min-width: 1200px) {
  :root { --layout-sidebar-width: 220px; --shell-padding: 40px; --workspace-gap: 36px; }
  .workspace { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 1060px) and (min-width: 821px) {
  :root { --layout-sidebar-width: 188px; --shell-padding: 24px; --workspace-gap: 24px; }
}
@media (max-width: 820px) {
  :root { --shell-padding: 20px; --workspace-gap: 24px; }
  .app-shell { display: block; }
  .site-header { min-height: 44px; }
  .main-content { padding-top: 16px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .control-panel, .workspace-results { grid-column: 1; grid-row: auto; }
  .lesson-intro h1, .view-intro h1 { font-size: 1.625rem; }
  .lesson-intro, .view-intro { margin-bottom: 20px; }
}
@media (max-width: 560px) {
  :root { --shell-padding: 16px; }
  .site-header__note { display: none; }
  .lesson-heading-row { gap: 8px 12px; }
}