/* V3.4.6: concise teaching and an unobstructed phone picture. */
.browser-intro{max-width:650px}.intro .skill-journey{color:var(--text);margin-top:12px}.intro>div:first-child{min-width:0}
.workspace .learn-at-a-glance{max-width:800px;display:grid;gap:6px;margin:16px 0}.workspace .learn-at-a-glance h3{font-size:13px;color:var(--lime);margin:8px 0 0}.workspace .learn-at-a-glance p{font-size:14px;line-height:1.65;margin:0}.workspace #learn-key-idea{font-weight:600;color:var(--text)}
.workspace .lesson-reading{max-width:800px;margin:12px 0 18px;font-size:13px;line-height:1.65}.workspace .lesson-reading summary{cursor:pointer;color:var(--lime);min-height:44px;display:list-item;padding:12px 0}.workspace #learn-demonstration-intro{max-width:800px}.workspace #learn-demonstration-intro h3{font-size:16px;margin-bottom:8px}.workspace #learn-demo-prompt{line-height:1.65;margin-top:0}
.workspace .beginner-recommendation{font-size:14px;font-weight:750;color:var(--lime);line-height:1.5}.workspace .guidance-mode{display:flex;flex-wrap:wrap;gap:8px}.workspace .guidance-mode #mode-follow[aria-pressed=true]{box-shadow:0 0 0 2px #d5f47744;font-weight:750}.workspace .beginner-start{font-size:13px;line-height:1.6;background:#34492c;border-left:3px solid var(--lime);padding:10px;margin:8px 0 12px}.workspace .beginner-start strong{display:block;font-size:13px;font-weight:700;margin-bottom:3px}
@media(max-width:650px){
 .intro{display:block}.intro h1{font-size:36px;line-height:1.12;letter-spacing:-1.3px}.intro .course-meta{width:100%;min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 16px;margin-top:24px}.intro .course-meta strong{margin:0;grid-column:1}.intro .course-meta .pill{grid-column:1/-1;width:max-content}.intro .course-meta .course-progress{grid-column:1/-1;margin:3px 0}.intro .course-meta #course-reward{grid-column:1/-1}
 /* The canvas retains its full 16:9 picture. Text gets its own rows, never overlays it. */
 .workspace .viewer,.workspace .coach-viewer{display:flex;flex-direction:column;aspect-ratio:auto;max-height:none;height:auto;width:100%;background:#14211b}
 .workspace .viewer canvas,.workspace .coach-viewer canvas{width:100%;height:auto;aspect-ratio:16/9;flex:none;object-fit:contain}
 .workspace .viewer .viewer-badge,.workspace .coach-viewer .viewer-badge{position:static;inset:auto;display:block;max-width:100%;align-self:stretch;margin:0;padding:8px 10px;font-size:9px;line-height:1.5;letter-spacing:.6px;background:#1e3025;white-space:normal}
 .workspace .viewer #preview-caption,.workspace .coach-viewer #coach-phase{position:static;inset:auto;display:block;max-width:100%;margin:0;padding:8px 10px;font-size:12px;line-height:1.6;letter-spacing:0;border-radius:0;background:#14211b;color:#edf1e8;overflow-wrap:anywhere}
 .workspace .coach-viewer .badge-detail{display:none}
 .workspace .learn-at-a-glance p{font-size:13px}.workspace .guidance-mode button{flex:1 1 auto;white-space:normal;min-height:44px}.workspace .beginner-start{padding:9px}
}

.workspace .guide-reference{grid-column:1/-1;font-size:12px;line-height:1.5}.workspace .guide-reference #all-steps{margin:0}.workspace .guide-reference #walkthrough{margin:0;padding:0}.workspace .guide-reference summary{min-height:44px;cursor:pointer;color:#c4d2bc;padding:10px 0}
@media(max-width:650px){.workspace .control-guidance .guidance-mode #mode-follow{flex:2 1 0;min-width:0;line-height:1.4}.workspace .control-guidance .guidance-mode #mode-edit{flex:1 1 0;min-width:0;line-height:1.4}.workspace .beginner-start{font-size:12px;line-height:1.5}}