/* One continuous app exercise. Keep the code and canonical Vinci side by side,
   then stack them at phone widths without changing the teaching sequence. */
.academy-visual-builder{--avb-line:#e5ded1;--avb-muted:#6d655a;--avb-accent:#a76b15;background:#fcfaf6;color:#30281d;min-height:100vh}
.academy-visual-builder .avb-main{box-sizing:border-box;max-width:1260px;margin:auto;padding:36px 28px 90px}
.academy-visual-builder .avb-head h1{max-width:none;margin:0;font-size:clamp(30px,3.5vw,43px);line-height:1.15}
.academy-visual-builder .avb-head>p:last-of-type{max-width:70ch;font-size:16px;line-height:1.6;color:var(--avb-muted)}
.academy-visual-builder :is(p,h2,legend){overflow-wrap:anywhere}
.academy-visual-builder .avb-checklist{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 18px;padding:0;list-style:none}
.academy-visual-builder .avb-checklist li{padding:8px 12px;border:1px solid var(--avb-line);border-radius:999px;font-size:12px;background:#fff}
.academy-visual-builder .avb-workbench{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;align-items:start}
.academy-visual-builder :is(.avb-code,.avb-stage,.avb-actions,.avb-preview,.avb-check){min-width:0;box-sizing:border-box;border:1px solid var(--avb-line);border-radius:18px;background:#fff;padding:18px}
.academy-visual-builder h2{margin:0;font-size:15px;font-weight:650}
.academy-visual-builder .avb-code>p,.academy-visual-builder .avb-stage-head p{margin:8px 0 15px;color:var(--avb-muted);font-size:13px;line-height:1.5}
.academy-visual-builder .avb-code{background:#f6f2eb}
.academy-visual-builder .ed-code-panel{margin-top:12px;min-width:0;box-shadow:none;border-color:#ded7cb}
.academy-visual-builder .ed-editor{box-sizing:border-box;width:100%;min-height:265px;white-space:pre-wrap;overflow-wrap:anywhere;resize:vertical;font-size:14px;line-height:1.6}
/* The original clipped assistive status is absolutely positioned inside its
   shadow mount; keep its containing block inside this lesson scroll owner. */
.academy-visual-builder .avb-vinci-host{position:relative;display:block;min-width:0;min-height:160px;max-width:100%;overflow-x:auto}
.academy-visual-builder .avb-actions{margin-top:16px}
.academy-visual-builder .avb-prediction{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;font-size:14px;font-weight:600}
.academy-visual-builder .avb-prediction input{box-sizing:border-box;width:170px;max-width:100%;min-height:44px;padding:8px 12px;border:1px solid #cdc2ad;border-radius:10px;font:15px var(--fs-ui)}
.academy-visual-builder .avb-action-row{display:flex;flex-wrap:wrap;gap:8px}
.academy-visual-builder :is(.avb-action-row,.avb-finish)>button{min-height:44px;padding:9px 16px;border:1px solid #cbb68b;border-radius:999px;background:white;color:#48381d;font:600 14px/1.3 var(--fs-ui);cursor:pointer}
.academy-visual-builder .avb-action-row>button:first-child,.academy-visual-builder .avb-finish>button{background:#f0ac43;border-color:#d99329;color:#30200b}
.academy-visual-builder button:disabled{opacity:.48;cursor:not-allowed}
.academy-visual-builder .avb-status{min-height:22px;margin:13px 0 0;color:var(--avb-muted);font-size:14px;line-height:1.5}
.academy-visual-builder .avb-status[data-kind="error"]{color:#974638}
.academy-visual-builder .avb-status[data-kind="ok"]{color:#775014}
.academy-visual-builder .avb-preview{max-width:560px;margin-top:16px;padding:0;overflow:hidden}
.academy-visual-builder .avb-preview-head{display:grid;gap:4px;padding:14px 18px;border-bottom:1px solid var(--avb-line);background:#fbf6eb}
.academy-visual-builder .avb-preview-head span{font-size:10px;letter-spacing:.1em;color:#866b41}
.academy-visual-builder .avb-preview-head strong{font-size:17px}
.academy-visual-builder .avb-preview-body{min-height:65px;padding:18px}
.academy-visual-builder .avb-preview-body p{margin:0;font-size:23px;line-height:1.4;font-weight:650}
.academy-visual-builder .avb-result-caption{margin:0;padding:0 18px 15px;color:var(--avb-muted);font-size:12px;line-height:1.5}
.academy-visual-builder .avb-check{max-width:560px;margin-top:16px}
.academy-visual-builder .avb-check[hidden]{display:none}
.academy-visual-builder .avb-check fieldset{border:0;margin:14px 0 0;padding:0}
.academy-visual-builder .avb-check legend{font-weight:600;font-size:16px;line-height:1.5;margin-bottom:10px}
.academy-visual-builder .avb-check label{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:8px;padding:8px 10px;border:1px solid var(--avb-line);border-radius:12px;font-size:14px;line-height:1.5;cursor:pointer}
.academy-visual-builder .avb-check input{width:18px;height:18px;flex:none;accent-color:var(--avb-accent)}
.academy-visual-builder .avb-check-feedback{font-size:13px;color:var(--avb-muted)}
.academy-visual-builder .avb-finish{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.academy-visual-builder :is(.avb-finish p,.avb-storage){max-width:70ch;font-size:13px;line-height:1.6;color:var(--avb-muted)}
.academy-visual-builder .steps-ask{font:650 14px var(--fs-ui)}
.academy-visual-builder .steps-ask[hidden]{display:none}
@media(max-width:700px){.academy-visual-builder .avb-main{padding:24px 16px 95px}.academy-visual-builder .avb-workbench{grid-template-columns:minmax(0,1fr)}.academy-visual-builder .avb-head>p:last-of-type{font-size:15px}.academy-visual-builder .avb-action-row>button{flex:1 1 135px}.academy-visual-builder .avb-code,.academy-visual-builder .avb-stage{padding:14px}}