/* BuildAI beginner learning area. All practice interactions are on-device only. */
.learn-page{padding-top:38px;padding-bottom:55px}.learn-top{display:grid;grid-template-columns:1fr 230px;gap:30px;align-items:center;margin-bottom:25px}.learn-top .eyebrow{margin-bottom:9px}.learn-h1{font-size:clamp(2.4rem,4.2vw,4.5rem);line-height:1.06;margin-bottom:12px;max-width:14ch}.learn-intro{max-width:700px;color:var(--muted);line-height:1.8;margin:0}.learn-summary{background:var(--paper);border:1px solid var(--line);padding:19px;border-radius:15px;display:grid;gap:6px}.learn-summary strong{font-size:1.9rem;line-height:1.2}.learn-summary span{font-size:.8rem;color:var(--muted)}.learn-notice{padding:17px 20px;border:1px solid #bd9a4d;background:var(--soft);border-radius:11px;margin-bottom:25px;line-height:1.65}.learn-grid{display:grid;grid-template-columns:minmax(240px,295px) minmax(0,1fr);gap:20px;align-items:start;scroll-margin-top:20px}.learn-side,.learn-main{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:23px;min-width:0}.learn-side{position:sticky;top:15px}.learn-side h2{font-size:1.27rem;letter-spacing:-.025em;margin:0 0 7px}.learn-side h3{font-size:1rem;letter-spacing:0;margin:25px 0 12px}.muted-sm{font-size:.87rem;color:var(--muted);line-height:1.6}.learn-track-links,.learn-lesson-links{display:grid;gap:6px}.learn-track-links button,.learn-lesson-links button{border-radius:9px;min-height:47px;border:1px solid var(--line);color:var(--ink);background:var(--bg);text-align:left;padding:10px 12px;line-height:1.4;font:700 .86rem/1.4 system-ui}.learn-track-links button[aria-current=true],.learn-lesson-links button[aria-current=true]{background:var(--soft);border-color:#b28d27;box-shadow:inset 4px 0 #b58a25}.learn-lesson-links button{font-weight:550}.learn-lesson-links .is-practiced::after{content:' ✓';color:#297348;font-weight:800}.learn-small{min-height:43px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:9px;padding:10px 12px;font-size:.79rem;font-weight:750;cursor:pointer;margin-top:8px}.learn-small:hover,.learn-lesson-links button:hover,.learn-track-links button:hover{border-color:#b88920}.lesson-eyebrow{font-size:.72rem;font-weight:800;color:#886514;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}.lesson-title{font-size:clamp(1.7rem,3vw,2.55rem);line-height:1.16;letter-spacing:-.045em;margin-bottom:10px}.lesson-goal{font-size:1.05rem;margin:0 0 22px;color:var(--muted)}.lesson-rule{height:1px;background:var(--line);margin:18px 0}.lesson-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 22px}.lesson-controls button,.explain-choice{border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:10px 12px;min-height:43px;border-radius:8px;font-weight:700}.lesson-controls button[aria-pressed=true]{background:var(--soft);border-color:#b18a26}.lesson-card{padding:22px;background:var(--bg);border:1px solid var(--line);border-radius:13px;margin:17px 0}.lesson-card h3{font-size:1.1rem;letter-spacing:-.025em;margin-bottom:10px}.lesson-card p{line-height:1.85;margin-bottom:0}.lesson-card pre{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line);background:var(--paper);padding:15px;border-radius:9px;font:500 .91rem/1.55 ui-monospace,Consolas,monospace}.lesson-card ol{padding-left:24px;line-height:1.8}.lesson-card li{margin-bottom:7px}.lesson-try{border-left:5px solid #c79c2f}.lesson-feedback{border:1px solid #d6b76e;background:var(--soft);padding:14px;border-radius:9px;margin:12px 0;font-size:.91rem;line-height:1.6}.lesson-feedback[hidden]{display:none}.lesson-check{padding:19px;border:1px solid var(--line);border-radius:12px;margin:16px 0}.lesson-check h3{font-size:1.05rem;letter-spacing:-.02em;margin:0 0 13px}.check-choices{display:grid;gap:8px}.check-choices button{display:block;text-align:left;background:var(--bg);color:var(--ink);border:1px solid var(--line);min-height:48px;border-radius:9px;padding:10px 13px;font-size:.93rem}.check-choices button:hover{border-color:#b3892d}.check-choices button[aria-pressed=true]{background:var(--soft);border-color:#ae8223}.check-choices button:disabled{opacity:.82;cursor:default}.check-hint{margin-top:9px}.lesson-buttons{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:space-between;margin-top:25px}.lesson-buttons button{padding:12px 17px;min-height:47px;font-size:.91rem;border-radius:9px;font-weight:800;border:1px solid #b58b23;background:var(--yellow);color:#171717}.lesson-buttons .neutral{background:var(--bg);color:var(--ink);border-color:var(--line)}.lesson-status{font-size:.88rem;font-weight:700;color:var(--muted);margin:16px 0 0}.lesson-selfcheck{margin-top:15px;padding:17px;background:var(--bg);border-radius:11px;border:1px solid var(--line)}.lesson-selfcheck label{display:flex;align-items:flex-start;gap:9px;line-height:1.6;font-size:.89rem}.lesson-selfcheck input{width:18px;height:18px;flex-shrink:0;margin-top:4px;accent-color:#a77c1b}.lab-section{padding:70px 0 25px;scroll-margin-top:15px}.lab-section .section-intro{margin-bottom:22px}.lab-section h2{font-size:clamp(2rem,4vw,3rem)}.lab-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.lab-tabs button{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:13px 15px;color:var(--ink);font:750 .86rem system-ui;min-height:47px}.lab-tabs button[aria-pressed=true]{background:#1a1a1a;color:#ffda70;border-color:#b28a23}.lab-space{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:25px;min-height:240px}.lab-space h3{font-size:1.5rem}.lab-desc{color:var(--muted);max-width:750px}.lab-row{display:flex;gap:9px;flex-wrap:wrap;margin:13px 0}.lab-row button{padding:11px 14px;border-radius:9px;border:1px solid #b58b23;background:var(--soft);color:var(--ink);min-height:44px;font-weight:750}.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.lab-field{display:block;margin:12px 0;font-weight:750}.lab-field span{display:block;margin-bottom:6px}.lab-field input,.lab-field textarea{width:100%;min-height:44px;padding:12px;font:500 1rem/1.5 system-ui;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px}.lab-field textarea{min-height:110px;resize:vertical}.lab-code{background:#1c1c1c;color:#f6db93;padding:18px;border-radius:9px;white-space:pre-wrap;overflow-wrap:anywhere;font:500 .88rem/1.55 ui-monospace,Consolas,monospace}.lab-preview{border:2px dashed #bbae8d;border-radius:11px;padding:20px;min-height:135px;background:white;color:#191919}.lab-box{padding:15px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}.lab-space .lab-note{font-size:.81rem;color:var(--muted);margin-top:13px}.learn-end{padding:32px;margin:38px 0 0;background:var(--soft);border:1px solid var(--line);border-radius:14px}.learn-end h2{font-size:1.5rem}.learn-end p{max-width:850px;line-height:1.85}.learn-main p,.learn-main li{overflow-wrap:anywhere}.readable-text{font-size:1.13rem!important}.learn-main.readable-text .lesson-card p,.learn-main.readable-text .lesson-card li{line-height:2}.learn-note-green{color:#287048}[data-theme=dark] .learn-note-green{color:#9ed7ac}[data-theme=dark] .lesson-eyebrow{color:#f1c967}[data-theme=dark] .lab-tabs button[aria-pressed=true]{background:#f4be35;color:#151515}[data-theme=dark] .learn-notice{border-color:#9a7830}[data-theme=dark] .learn-track-links button[aria-current=true],[data-theme=dark] .learn-lesson-links button[aria-current=true]{border-color:#ddb43c}[data-theme=dark] .learn-side .learn-small,[data-theme=dark] .lesson-controls button{color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #d39912;outline-offset:3px}
@media(max-width:850px){.learn-top{grid-template-columns:1fr}.learn-grid{grid-template-columns:1fr}.learn-side{position:static}.learn-track-links{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-grid{grid-template-columns:1fr}}
@media(max-width:520px){.learn-track-links{grid-template-columns:1fr}.learn-side,.learn-main,.lab-space{padding:17px}.lesson-card{padding:17px}.learn-end{padding:20px}.lesson-controls button{flex:1 1 40%}}

/* On narrow screens let the lesson, not the course selector, greet the student. */
@media(max-width:850px){.learn-grid{display:flex;flex-direction:column}.learn-main{order:0;width:100%}.learn-side{order:1;width:100%}}