.learning-hub-intro,
.lab-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.learning-hub-intro h2,
.lab-intro h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1.15;
}
.learning-hub-intro p,
.lab-intro p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.learning-hub-intro aside,
.lab-intro aside {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--yellow);
  color: #171319;
  line-height: 1.5;
}
.video-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin: 20px 0;
}
.video-language,
.lab-track-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.video-language button,
.lab-track-picker button {
  border: 2px solid var(--line);
  border-radius: 9px;
  padding: 10px 14px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.video-language button.active,
.lab-track-picker button.active {
  background: var(--yellow);
  color: #171319;
  box-shadow: 3px 3px 0 var(--line);
}
.video-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 240px;
  font-size: .78rem;
  font-weight: 700;
}
.video-toolbar select {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.video-learning-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.video-topic-list {
  display: grid;
  gap: 8px;
}
.video-topic-list button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  text-align: left;
  align-items: start;
  padding: 13px 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.video-topic-list button.active {
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--line);
}
.video-topic-list button > span {
  font: 700 .72rem 'DM Mono', monospace;
}
.video-topic-list b,
.video-topic-list small {
  display: block;
}
.video-topic-list b {
  font-size: .86rem;
  line-height: 1.35;
}
.video-topic-list small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .67rem;
  line-height: 1.4;
}
.video-focus-card,
.lab-task-card {
  min-width: 0;
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.video-focus-card h3,
.lab-task-card h3 {
  margin: 8px 0 10px;
  font-size: 1.45rem;
}
.video-summary {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.65;
}
.video-resource-card {
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: 11px;
  background: var(--cream);
}
.video-resource-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.video-resource-card > div:first-child span {
  color: var(--muted);
  font-size: .76rem;
}
.video-resource-card > p {
  line-height: 1.65;
  font-size: .86rem;
}
.video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.video-actions a {
  text-decoration: none;
}
.video-embed-slot {
  margin-top: 14px;
}
.video-embed-slot:empty {
  display: none;
}
.video-embed-slot iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #111;
}
.after-video {
  margin-top: 18px;
  padding: 16px;
  border-left: 4px solid var(--coral);
  background: var(--cream);
}
.after-video > span {
  font: 700 .62rem 'DM Mono', monospace;
  letter-spacing: .09em;
}
.after-video p {
  line-height: 1.6;
}
.after-video label {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: .83rem;
  line-height: 1.5;
}
.lab-track-picker {
  margin: 20px 0;
}
.lab-task-card {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.lab-task-card h3 {
  margin-bottom: 5px;
}
.lab-task-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.lab-hint {
  padding: 12px 14px;
  border-left: 4px solid var(--blue);
  background: var(--cream);
  color: var(--ink) !important;
}
.web-lab-grid,
.local-lab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
  gap: 16px;
  align-items: start;
}
.web-editors {
  display: grid;
  gap: 10px;
}
.lab-editor {
  display: grid;
  gap: 7px;
}
.lab-editor > span {
  font: 700 .7rem 'DM Mono', monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.lab-editor textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #1d1a20;
  color: #fff5dc;
  font: .78rem/1.65 'DM Mono', monospace;
  tab-size: 2;
}
.web-editors .lab-editor:first-child textarea {
  min-height: 260px;
}
.lab-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.preview-panel {
  position: sticky;
  top: 18px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.preview-panel > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
  background: var(--cream);
  font-size: .7rem;
}
.preview-panel > div:first-child span {
  color: var(--muted);
}
.preview-panel iframe {
  width: 100%;
  min-height: 480px;
  border: 0;
  background: white;
}
.preview-panel details {
  padding: 12px 14px;
  border-top: 2px solid var(--line);
}
.preview-panel summary {
  cursor: pointer;
  font-weight: 700;
}
.preview-panel li {
  margin: 8px 0;
  line-height: 1.5;
}
.local-lab-side {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
}
.local-lab-side > div {
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.local-lab-side pre {
  white-space: pre-wrap;
  margin: 10px 0 0;
  font: .82rem/1.5 'DM Mono', monospace;
}
.local-lab-side p {
  line-height: 1.6;
}
.lab-feedback {
  margin: 0;
  padding: 12px 14px;
  line-height: 1.6;
}
.lab-feedback:empty {
  display: none;
}
.lab-feedback[data-result="correct"] {
  border-left: 4px solid #59a857;
  background: var(--cream);
}
.lab-feedback[data-result="retry"] {
  border-left: 4px solid var(--coral);
  background: var(--cream);
}
@media (max-width: 900px) {
  .learning-hub-intro,
  .lab-intro,
  .video-learning-layout,
  .web-lab-grid,
  .local-lab {
    grid-template-columns: 1fr;
  }
  .video-topic-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .preview-panel,
  .local-lab-side {
    position: static;
  }
}
@media (max-width: 620px) {
  .learning-hub-intro,
  .lab-intro,
  .video-focus-card,
  .lab-task-card {
    padding: 16px;
  }
  .video-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .video-toolbar label {
    min-width: 0;
  }
  .video-topic-list {
    grid-template-columns: 1fr;
  }
  .video-resource-card > div:first-child,
  .preview-panel > div:first-child {
    flex-direction: column;
  }
  .lab-track-picker button,
  .video-language button {
    flex: 1 1 auto;
  }
  .lab-editor textarea {
    min-height: 210px;
    font-size: .73rem;
  }
  .preview-panel iframe {
    min-height: 390px;
  }
}

.beginner-next-actions {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) repeat(4, minmax(145px, 1fr));
  gap: 10px;
  align-items: stretch;
  margin: 0 0 22px;
}
.beginner-next-actions > div,
.beginner-next-actions > button {
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: 11px;
  padding: 14px;
  background: var(--panel);
  color: var(--ink);
}
.beginner-next-actions > div {
  display: grid;
  gap: 7px;
  align-content: center;
  background: var(--cream);
}
.beginner-next-actions > div > b {
  font-size: .84rem;
  line-height: 1.4;
}
.beginner-next-actions > button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 9px;
  text-align: left;
  cursor: pointer;
}
.beginner-next-actions > button:hover,
.beginner-next-actions > button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 3px 3px 0 var(--line);
}
.beginner-next-actions > button > span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--yellow);
  color: #171319;
  font: 700 .68rem 'DM Mono', monospace;
}
.beginner-next-actions > button > b {
  font-size: .8rem;
  line-height: 1.35;
}
.beginner-next-actions > button > small {
  color: var(--muted);
  font-size: .67rem;
}
@media (max-width: 1050px) {
  .beginner-next-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .beginner-next-actions > div {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .beginner-next-actions {
    grid-template-columns: 1fr;
  }
}


/* Beginner calm mode: show the next useful action, not the whole syllabus. */
.beginner-start-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
}
.beginner-start-card > div {
  flex: 1 1 260px;
}
.beginner-start-card h2 {
  margin: 5px 0 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
}
.beginner-start-card button {
  flex: 0 0 auto;
}
.compact-learning-intro {
  grid-template-columns: 1fr;
  padding: 18px 20px;
}
.compact-learning-intro h2 {
  margin-bottom: 0;
}
.video-more {
  margin: 12px 0;
}
.video-more summary,
.lab-run-help summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .8rem;
}
.video-more p,
.lab-run-help p {
  margin: 10px 0 0;
  line-height: 1.55;
  color: var(--muted);
  font-size: .82rem;
}
.lab-run-help {
  max-width: 680px;
}
.compact-intro {
  margin-bottom: 14px;
}
.compact-intro h2 {
  margin-bottom: 0;
}
.compact-teacher-note {
  align-items: center;
}
.compact-teacher-note p {
  max-width: 320px;
}

body[data-level="Beginner"] .learn-sections [data-learn-section="course"],
body[data-level="Beginner"] .learn-sections [data-learn-section="reference"] {
  display: none;
}
body[data-level="Beginner"] #learn-localhost .localhost-explainer,
body[data-level="Beginner"] #learn-localhost .teacher-warning,
body[data-level="Beginner"] #learn-localhost .sequence-head,
body[data-level="Beginner"] #learn-localhost .milestone-next {
  display: none;
}
body[data-level="Beginner"] #learn-videos .video-topic-list {
  display: none;
}
body[data-level="Beginner"] #learn-videos .video-learning-layout {
  grid-template-columns: 1fr;
}
body[data-level="Beginner"] #learn-videos .video-focus-card,
body[data-level="Beginner"] #learn-lab .lab-task-card {
  padding: 18px;
}
body[data-level="Beginner"] #learn-videos .video-summary {
  margin-bottom: 12px;
}
body[data-level="Beginner"] #learn-localhost .teacher-sequence {
  margin-top: 14px;
}
body[data-level="Beginner"] #learn-localhost .milestone-current {
  margin-top: 0;
}
@media (max-width: 620px) {
  .beginner-start-card {
    align-items: stretch;
  }
  .beginner-start-card button {
    flex: 1 1 100%;
  }
}


/* Learning surfaces lean blue, with coral used for action and correction */
.learning-hub-intro,
.lab-intro{
  border-top:5px solid var(--blue);
  background:linear-gradient(120deg,var(--blue-soft),var(--panel) 76%);
}
.learning-hub-intro aside,
.lab-intro aside{
  background:var(--yellow-soft);
}
.video-language button.active,
.lab-track-picker button.active{
  background:var(--blue);
  color:#fff;
}
.video-topic-list button:nth-child(4n+1){border-left:4px solid var(--blue)}
.video-topic-list button:nth-child(4n+2){border-left:4px solid var(--coral)}
.video-topic-list button:nth-child(4n+3){border-left:4px solid var(--yellow)}
.video-topic-list button:nth-child(4n){border-left:4px solid var(--green)}
.video-topic-list button.active{
  background:var(--blue-soft);
}
.video-focus-card{border-top:5px solid var(--blue)}
.video-resource-card{
  background:var(--blue-soft);
  border-left:4px solid var(--blue);
}
.after-video{
  background:var(--red-soft);
  border-left-color:var(--coral);
}
.lab-task-card{border-top:5px solid var(--coral)}
.lab-hint{
  background:var(--blue-soft);
}
.preview-panel{
  border-top:5px solid var(--green);
}
.local-lab-side>div:nth-child(odd){border-left:4px solid var(--blue)}
.local-lab-side>div:nth-child(even){border-left:4px solid var(--coral)}
.lab-feedback[data-result="correct"]{
  background:var(--green-soft);
}
.lab-feedback[data-result="retry"]{
  background:var(--red-soft);
}


.dark .learning-hub-intro aside,
.dark .lab-intro aside{
  color:var(--ink);
}
.dark .learning-hub-intro aside *,
.dark .lab-intro aside *{
  color:var(--ink);
}


/* Compact Code Lab type selector */
.lab-track-select-wrap{
  position:relative;
  width:min(100%,300px);
  margin:20px 0;
  display:grid;
  gap:6px;
}
.lab-track-select-wrap label{
  color:var(--muted);
  font:800 .68rem "DM Mono",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lab-track-select-wrap:after{
  content:'▾';
  position:absolute;
  right:7px;
  bottom:7px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1.5px solid var(--line);
  border-radius:7px;
  background:var(--blue-soft);
  color:var(--ink);
  box-shadow:1px 1px 0 var(--line);
  pointer-events:none;
  font-weight:900;
}
#labTrackSelect{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:44px;
  padding:10px 44px 10px 12px;
  border:2px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--line);
  cursor:pointer;
  font-weight:800;
}
#labTrackSelect:hover,
#labTrackSelect:focus{
  outline:0;
  background:var(--blue-soft);
  box-shadow:4px 4px 0 var(--line);
}
#labTrackSelect option{
  background:var(--panel);
  color:var(--ink);
}