:root{--bg:#f6f7fb;--white:#fff;--ink:#202941;--muted:#758096;--line:#e6e9f0;--purple:#7160be;--plight:#f0edfc;--teal:#238d87;--mint:#e8f8f4;--amber:#b58337;--amberlight:#fff7e8;--blue:#497ba9;--shadow:0 13px 35px #3440620b}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ac9ae9;outline-offset:2px}button:disabled{opacity:.43;cursor:not-allowed}.shell{min-height:100vh;height:100vh;display:flex;flex-direction:column}.top{height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 23px;background:white;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center}.logo{width:38px;height:38px;background:#7767be;color:#fff;display:grid;place-items:center;border-radius:11px;font-weight:850;letter-spacing:-1px;box-shadow:0 7px 18px #6e54bb2c}.brand b{font-size:calc(18px * var(--ol-font-scale, 1));letter-spacing:-.7px}.brand b em{font-style:normal;color:#7767be}.brand small{display:block;color:#98a0ac;font-size:calc(9px * var(--ol-font-scale, 1));letter-spacing:1.8px;font-weight:800;margin-top:2px}.headRight{display:flex;gap:12px;align-items:center;font-size:calc(11px * var(--ol-font-scale, 1));color:#8e95a5}.pill{border:1px solid #e7e2f5;background:#f9f7ff;color:#7865bc;padding:7px 10px;border-radius:7px;font-size:calc(10px * var(--ol-font-scale, 1));font-weight:800;letter-spacing:.6px}.layout{min-height:0;flex:1;display:grid;grid-template-columns:247px minmax(460px,1fr) 359px}.side{background:white;border-right:1px solid var(--line);padding:20px 15px 13px;display:flex;flex-direction:column;min-height:0;overflow:auto}.overline{font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:1.6px;color:#9285ce;font-weight:850}.side h2{font-size:calc(21px * var(--ol-font-scale, 1));margin:6px 0 7px;letter-spacing:-.75px;line-height:1.15}.minor{font-size:calc(11.8px * var(--ol-font-scale, 1));color:#8992a4;line-height:1.55}.mode{margin:19px 0 16px;background:#f2f3f8;padding:4px;display:flex;border-radius:11px;gap:4px}.mode button{border:0;background:transparent;flex:1;color:#848ca0;border-radius:8px;font-weight:780;font-size:calc(11px * var(--ol-font-scale, 1));padding:10px 2px}.mode .chosen{background:#fff;color:#6a55b2;box-shadow:0 2px 9px #33334510}.sideTitle{font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:1.6px;font-weight:800;color:#949caa;margin:0 0 10px 6px}.lessonList{display:grid;gap:3px}.lessonItem{width:100%;display:flex;gap:9px;text-align:left;align-items:center;border:1px solid transparent;background:none;border-radius:9px;padding:8px;color:#687489;font-size:calc(11.4px * var(--ol-font-scale, 1));font-weight:660}.lessonItem:hover{background:#f5f3fc}.lessonItem.active{color:#6954af;background:var(--plight);border-color:#e9e2fa}.lessonNumber{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;background:#f7f8fc;border:1px solid #edf0f5;color:#a2a8b5;border-radius:8px;font:800 10px system-ui}.lessonItem.active .lessonNumber{background:#7d6ac9;color:white;border-color:#7d6ac9}.sideBottom{margin-top:auto;border-top:1px solid #eceef4;padding:13px 6px 0;font-size:calc(10px * var(--ol-font-scale, 1));color:#98a0ad;line-height:1.6}.sideBottom strong{color:#7766b8}.workshop{display:none}.workshop.visible{display:block}.side .smallForm{display:grid;gap:9px;margin:7px 1px 14px}.field{display:grid;gap:4px}.field label{font-size:calc(10.5px * var(--ol-font-scale, 1));font-weight:750;color:#67738b}.field input,.field select{width:100%;border:1px solid #dde2ee;background:#fff;color:#263349;border-radius:8px;padding:9px 10px;font-size:calc(12px * var(--ol-font-scale, 1));min-height:35px}.field input:focus,.field select:focus{border-color:#9885d6}.side .miniDivider{height:1px;background:#eef0f5;margin:15px 0}.minorHead{font-size:calc(11px * var(--ol-font-scale, 1));font-weight:850;color:#323d54;margin:0 0 9px}.cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--purple);color:#fff;border:1px solid var(--purple);border-radius:9px;padding:10px 12px;font-size:calc(11.5px * var(--ol-font-scale, 1));font-weight:800}.cta:hover{background:#604aa9}.cta.secondary{background:#fff;color:#7463b4;border:1px solid #dad4ef}.cta.secondary:hover{background:#f8f6ff}.hint{color:#8792a6;font-size:calc(10.5px * var(--ol-font-scale, 1));line-height:1.5}.status{font-size:calc(10.5px * var(--ol-font-scale, 1));color:#39827b;min-height:14px}.main{min-width:0;min-height:0;padding:20px 21px 16px;display:flex;flex-direction:column;gap:12px}.mainHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.mainHead h1{margin:5px 0 5px;font-size:clamp(20px,2.35vw,29px);line-height:1.12;letter-spacing:-1.15px}.mainHead p{margin:0;font-size:calc(12px * var(--ol-font-scale, 1));color:#8590a3}.headButtons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.outline{background:#fff;color:#717b91;border:1px solid #e2e5ee;border-radius:8px;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:750;padding:9px 10px;white-space:nowrap}.outline:hover{border-color:#ab9bda;color:#6f5db7}.scene{position:relative;flex:1;min-height:270px;isolation:isolate;background:radial-gradient(circle at 52% 32%,#fff 1%,#fafbff 53%,#f0f3fa 100%);border:1px solid #e3e7f1;border-radius:17px;overflow:hidden;box-shadow:var(--shadow)}#c{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#c:active{cursor:grabbing}.sceneCorner{position:absolute;top:15px;left:17px;pointer-events:none;font-size:calc(9.5px * var(--ol-font-scale, 1));letter-spacing:1.2px;font-weight:850;color:#929bb0;display:flex;align-items:center;gap:8px}.live{width:7px;height:7px;background:#43b2a7;border-radius:50%;box-shadow:0 0 0 4px #41baa419}.zoom{position:absolute;top:15px;right:15px;display:grid;gap:6px}.zoom button{width:31px;height:31px;background:#fff;border:1px solid #e1e6ee;border-radius:8px;color:#71809b;font-size:calc(18px * var(--ol-font-scale, 1))}.sceneFooter{position:absolute;bottom:13px;left:13px;right:13px;display:flex;justify-content:space-between;align-items:end;pointer-events:none;gap:8px}.legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#ffffffec;border:1px solid #e8eaf2;border-radius:9px;padding:9px 11px}.legend span{display:inline-flex;align-items:center;gap:6px;font-size:calc(10px * var(--ol-font-scale, 1));font-weight:730;color:#6f7d90}.legend i{width:9px;height:9px;border-radius:3px}.sceneFooter small{font-size:calc(9.5px * var(--ol-font-scale, 1));color:#9ba4b4;text-align:right}.nodeLabel{position:absolute;pointer-events:none;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;display:flex;flex-direction:column;gap:3px;align-items:center;text-shadow:0 1px 0 #fff}.nodeLabel .k{font-size:calc(9px * var(--ol-font-scale, 1));color:#657187;font-weight:820;letter-spacing:.6px;background:#ffffffd9;border:1px solid #eef0f6;padding:2px 5px;border-radius:5px}.nodeLabel .n{font-size:calc(12.5px * var(--ol-font-scale, 1));font-weight:870;color:#2d3950;letter-spacing:-.3px}.nodeLabel .v{font-size:calc(10px * var(--ol-font-scale, 1));font-weight:720;color:#69768e;background:#ffffffc4;border-radius:4px;padding:2px 4px}.nodeLabel.sel .n{color:#6e55bf}.pulseNotice{position:absolute;z-index:3;top:13%;left:50%;transform:translateX(-50%);border:1px solid #ab9ce1;background:#282a4bee;color:#fff;border-radius:10px;padding:10px 14px;white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis;font:750 12px Consolas,monospace;box-shadow:0 12px 20px #1b24572f;opacity:0;transition:opacity .2s;pointer-events:none}.pulseNotice.on{opacity:1}.callFlow{display:grid;gap:8px}.flowStep{border:1px solid #e6e9f3;border-radius:10px;background:#fbfcff;padding:10px 11px;transition:all .2s}.flowStep .num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#eef1f8;color:#5f6b80;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:850;margin-right:7px}.flowStep strong{font-size:calc(11.4px * var(--ol-font-scale, 1));color:#33405a}.flowStep p{margin:6px 0 0;color:#6e7a90;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.5}.flowStep.active{border-color:#dbcff6;background:#f7f4ff;box-shadow:0 8px 18px #6d55b40f}.flowStep.active .num{background:#7a67c4;color:#fff}.flowStep.done{border-color:#ccebe3;background:#f2fbf8}.flowStep.done .num{background:#2f9e8f;color:#fff}.flowResult{margin-top:9px;padding:9px 10px;border-radius:9px;background:#f7fbff;border:1px solid #dde9f6;font-size:calc(11px * var(--ol-font-scale, 1));color:#4f627e;line-height:1.55}.legend span.obj i{border-radius:50%;box-shadow:inset -2px -2px 0 #ffffff55}.stageMain p b{color:#50428f}.stageRow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 14px;border-radius:12px;border:1px solid #e6e9f1;background:white;box-shadow:var(--shadow)}.stageMain .overline{font-size:calc(9px * var(--ol-font-scale, 1))}.stageMain strong{display:block;font-size:calc(12px * var(--ol-font-scale, 1));margin:5px 0 3px}.stageMain p{font-size:calc(11px * var(--ol-font-scale, 1));color:#838da1;margin:0;line-height:1.45}.stageButtons{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.stageButtons button{padding:9px 11px;border:1px solid #e1e3ee;border-radius:8px;background:white;font-size:calc(11px * var(--ol-font-scale, 1));color:#667184;font-weight:750}.stageButtons .primary{border-color:#7562bd;background:#7562bd;color:#fff}.stageButtons button:hover:not(:disabled){filter:brightness(.96)}.bottomCards{display:grid;grid-template-columns:1fr 1fr;gap:11px}.microCard{background:#fff;border:1px solid #e6e8f0;border-radius:12px;padding:12px 14px;min-height:81px}.microCard strong{font-size:calc(10.5px * var(--ol-font-scale, 1));color:#584999;display:block;margin-bottom:5px}.microCard p{margin:0;color:#657086;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.52}.microCard.action{background:#fcfbff}.right{background:#fff;border-left:1px solid var(--line);min-height:0;overflow:auto;display:flex;flex-direction:column}.right section{padding:17px 19px;border-bottom:1px solid #edeef3}.right h2{font-size:calc(19px * var(--ol-font-scale, 1));line-height:1.22;letter-spacing:-.6px;margin:7px 0}.right p{font-size:calc(11.5px * var(--ol-font-scale, 1));line-height:1.65;color:#778197;margin:5px 0}.banner{background:#f5f1ff;border:1px solid #ebe4fc;border-radius:9px;padding:10px 12px;color:#6a56ac;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.55;font-weight:690;margin-top:12px}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:9px}.sectionHead strong{font-size:calc(11.5px * var(--ol-font-scale, 1))}.lang{font-size:calc(10px * var(--ol-font-scale, 1));padding:4px 6px;color:#8775be;border:1px solid #e8e2f3;border-radius:6px;font-weight:790}.code{background:#222a3e;border-radius:11px;padding:11px 0;color:#e6e9f3;overflow:auto;font:11.2px/1.75 Consolas,"Cascadia Code",monospace}.codeLine{display:flex;white-space:pre;min-width:max-content;border-left:3px solid transparent;padding-right:12px}.codeLine.active{background:#8d79ca2b;border-left-color:#bbacff}.lineNo{display:inline-block;min-width:31px;text-align:right;padding-right:9px;color:#798398;user-select:none}.kw{color:#bca9ff}.ty{color:#89d4d0}.st{color:#f9c78e}.cm{color:#a4b0c2}.inspect{border:1px solid #e8e8f3;border-radius:10px;background:#fbfbfe;padding:12px;font-size:calc(11px * var(--ol-font-scale, 1));color:#657388;line-height:1.6}.inspect b{display:block;color:#364159;font-size:calc(13px * var(--ol-font-scale, 1));margin-bottom:3px}.inspect .kv{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid #edecf4}.inspect .kv span:last-child{color:#7360b0;font-weight:750}.inspect .field{margin-top:8px}.inspect button{margin-top:9px}.console{background:#f9fafc;border:1px solid #e9ecf3;border-radius:9px;padding:10px 11px;max-height:125px;min-height:65px;overflow:auto;font:10.5px/1.6 Consolas,monospace;color:#627087}.console .out{color:#438b77}.console .err{color:#c06c4c}.stack{font-size:calc(10px * var(--ol-font-scale, 1));color:#8a92a1;margin-top:8px}.rightFooter{margin-top:auto;padding:14px 19px!important;font-size:calc(10px * var(--ol-font-scale, 1));color:#9aa1af}.teachNote{font-size:calc(10.9px * var(--ol-font-scale, 1));color:#8794a6;margin-top:8px;line-height:1.55}.hidden{display:none!important}
a{color:#6f59bd;text-decoration:none}a:hover{text-decoration:underline}.creditLink{font-weight:800;color:#6c55bb}.scene{background:linear-gradient(180deg,#ffffff 0%,#fbfcff 58%,#f1f4fa 100%);border:1px solid #e4e8f1;box-shadow:0 22px 50px #32456a14,inset 0 1px 0 #ffffff;border-radius:20px}.mainHead,.stageRow,.microCard,.guideTop,.inspect,.banner,.code,.console{box-shadow:0 12px 34px #32456a0c}.guideTop{background:linear-gradient(180deg,#ffffff 0%,#f7f4ff 100%);border:1px solid #ebe5fb}.nodeLabel .n{font-size:calc(13px * var(--ol-font-scale, 1))}.nodeLabel .v{font-size:calc(10.4px * var(--ol-font-scale, 1))}.legend{background:#ffffffd9;border:1px solid #eceff5;box-shadow:0 10px 22px #2f3f5b10}.sceneCorner{background:#ffffffd7;border:1px solid #ebeef5;color:#67748a}.zoom button,.outline,.stageButtons button,.cta{box-shadow:0 8px 16px #2b3a560a}.rightFooter .creditWrap{display:block;margin-top:6px;line-height:1.6}
body{background:radial-gradient(circle at top,#fefeff 0%,#f3f6fc 55%,#edf1f8 100%)}
.top{background:linear-gradient(180deg,#ffffff 0%,#f8f9fe 100%);box-shadow:0 10px 30px #31425e10}
.logo{background:linear-gradient(135deg,#8471d3 0%,#6550b0 100%);box-shadow:0 12px 28px #6e54bb33}
.brand b{font-size:calc(19px * var(--ol-font-scale, 1))}.brand small{font-size:calc(9.5px * var(--ol-font-scale, 1));color:#8b92a3}
.pill{background:linear-gradient(180deg,#fbfaff 0%,#f2eeff 100%);box-shadow:0 6px 16px #6f5ab20e}
.side,.right{background:linear-gradient(180deg,#ffffff 0%,#fcfcff 100%)}
.main{background:transparent}
.mainHead{padding:16px 18px;border-radius:18px;border:1px solid #e6eaf2;background:linear-gradient(180deg,#ffffff 0%,#f8fafe 100%);box-shadow:0 18px 42px #30405f0f}
.mainHead h1{font-size:calc(28px * var(--ol-font-scale, 1));letter-spacing:-1px}.mainHead p{color:#73809a}
.outline,.stageButtons button,.cta,.zoom button{border-color:#dde3ef;background:linear-gradient(180deg,#ffffff 0%,#f6f8fd 100%);box-shadow:0 10px 20px #31425f0f}
.outline:hover,.stageButtons button:hover:not(:disabled),.cta:hover,.zoom button:hover{transform:translateY(-1px);filter:brightness(.995)}
.stageButtons .primary,.cta:not(.secondary){background:linear-gradient(180deg,#7d6ac9 0%,#6956b8 100%);border-color:#6c58bb;color:#fff;box-shadow:0 12px 24px #6f5ab22b}
.scene{background:radial-gradient(circle at 50% 18%,#ffffff 0%,#fbfcff 35%,#f2f5fb 72%,#edf2f8 100%);border:1px solid #e3e7f0;border-radius:22px;box-shadow:0 28px 70px #31425d12,inset 0 1px 0 #ffffff;overflow:hidden}
.scene:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 24%);pointer-events:none}
.sceneCorner{top:12px;left:12px;background:#ffffffdf;border:1px solid #e7ecf4;color:#6a768e;backdrop-filter:blur(8px);box-shadow:0 10px 22px #32425f10}
.sceneFooter{left:14px;right:14px;bottom:12px;background:#ffffffd9;border:1px solid #e7ecf4;border-radius:14px;padding:10px 12px;backdrop-filter:blur(8px);box-shadow:0 10px 24px #33425f14}
.legend{gap:12px;flex-wrap:wrap}.legend span{font-size:calc(10.5px * var(--ol-font-scale, 1));color:#516077;font-weight:780}.legend i{width:11px;height:11px;border-radius:4px;box-shadow:inset 0 -1px 0 #0000001c,0 1px 2px #00000012}.legend span.obj i{border-radius:50%}
.nodeLabel .k{background:#ffffffe3;border:1px solid #eaedf5;color:#647188;box-shadow:0 6px 14px #3645630e}.nodeLabel .n{font-size:calc(13.5px * var(--ol-font-scale, 1));color:#263248;text-shadow:0 1px 0 #fff}.nodeLabel .v{background:#ffffffd6;border:1px solid #eef2f7;color:#6a768d;box-shadow:0 6px 14px #34425e0d}
.guideTop{padding:16px 18px;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#f6f4ff 100%);border:1px solid #ebe5fb;box-shadow:0 18px 38px #6e55b40c}
.guideHeading h2{font-size:calc(22px * var(--ol-font-scale, 1));letter-spacing:-.5px}.guideHeading p{color:#74819a}
.guideProgress{height:10px;background:#eceff6;border-radius:999px;box-shadow:inset 0 1px 2px #00000010}.guideProgress span{background:linear-gradient(90deg,#8a76d8 0%,#5fc9bf 100%);box-shadow:0 4px 14px #7566c037}
.stageRow,.microCard,.inspect,.banner,.code,.console{border-radius:16px;border:1px solid #e7ebf3;box-shadow:0 16px 36px #32425e0c}
.banner{background:linear-gradient(180deg,#f8f5ff 0%,#f4f0ff 100%);color:#654fad}
.microCard strong,.sectionHead strong{letter-spacing:.2px}
.code{background:linear-gradient(180deg,#20283c 0%,#1b2234 100%)}
.console{background:linear-gradient(180deg,#fbfcff 0%,#f6f8fc 100%)}
.rightFooter{font-size:calc(10.4px * var(--ol-font-scale, 1));color:#8992a4}
.creditLink{font-weight:820;color:#674eb3}
.live{box-shadow:0 0 0 4px #34d39922,0 0 12px #34d39955}

@media(max-width:1170px){.layout{grid-template-columns:210px minmax(360px,1fr) 330px}.side{padding:15px 11px}.main{padding:14px;gap:9px}.right section{padding:13px}.top{height:61px}.bottomCards{grid-template-columns:1fr}.microCard{min-height:0}}
@media(max-width:930px){.shell{height:auto;min-height:100vh}.layout{display:grid;grid-template-columns:215px minmax(0,1fr)}.side{grid-row:1/3}.main{min-height:620px}.right{grid-column:2;border-top:1px solid var(--line);border-left:0;overflow:visible}.scene{min-height:355px}.headRight span:first-child{display:none}}
@media(max-width:630px){.top{padding:0 13px}.brand b{font-size:calc(16px * var(--ol-font-scale, 1))}.headRight{display:none}.layout{display:flex;flex-direction:column}.side{order:1;border-right:0;border-bottom:1px solid var(--line);max-height:none}.side h2{font-size:calc(18px * var(--ol-font-scale, 1))}.lessonList{display:grid;grid-template-columns:1fr 1fr}.sideBottom{display:none}.main{order:2;min-height:660px}.right{order:3}.scene{min-height:350px}.mainHead{display:block}.headButtons{justify-content:flex-start;margin-top:8px}.stageRow{display:block}.stageButtons{justify-content:space-between;margin-top:12px}.bottomCards{grid-template-columns:1fr}.sceneFooter small{display:none}.legend{gap:6px;padding:7px}.legend span{font-size:calc(9px * var(--ol-font-scale, 1))}}

/* v7.8 — apariencia y usabilidad */
.top{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(248,249,254,.92) 100%)}
.layout{gap:14px}
.side,.right{border-radius:18px;box-shadow:0 18px 42px #33425f0f}
.side{padding:16px 15px 14px}.right{padding:16px 15px}.main{gap:12px}
.mode button,.quickPath button,.lessonItem,.outline,.stageButtons button,.cta,.guideActions button,.zoom button,.experienceSwitch button{transition:all .18s ease}
.mode button:hover,.quickPath button:hover,.lessonItem:hover,.outline:hover,.stageButtons button:hover:not(:disabled),.cta:hover,.guideActions button:hover:not(:disabled),.zoom button:hover,.experienceSwitch button:hover{transform:translateY(-1px)}
.lessonItem{padding:10px 11px;font-size:calc(12px * var(--ol-font-scale, 1));border-radius:11px}.lessonItem.active{box-shadow:0 6px 14px #7661bc10}
.quickPath{border-radius:14px;padding:12px;background:linear-gradient(180deg,#fbf9ff 0%,#f7f5ff 100%)}
.quickPath button{padding:8px 10px;border-radius:9px;font-size:calc(10.6px * var(--ol-font-scale, 1))}
.mode{background:#f5f7fb;border:1px solid #eaedf4;border-radius:13px;padding:4px}.mode button{border-radius:10px;padding:9px 10px}
.mainHead,.stageRow,.memoryLab,.bottomCards .microCard,.guideTop,.guideBottom,.inspect,.banner,.code,.console{box-shadow:0 16px 38px #32425e0c}
.scene{border-radius:22px;box-shadow:0 26px 56px #31425d12,inset 0 1px 0 #ffffff}
.sceneFooter .legend{border-radius:13px;padding:10px 12px}.sceneFooter .legend span{font-size:calc(10.6px * var(--ol-font-scale, 1))}.sceneCorner{border-radius:999px;padding:8px 11px}
.zoom{top:14px;right:14px;gap:7px;padding:6px;border-radius:14px;background:#ffffffe8;border:1px solid #e7ecf4;box-shadow:0 10px 22px #30415d12;backdrop-filter:blur(10px)}
.zoom button{width:38px;height:38px;border-radius:11px;font-size:calc(16px * var(--ol-font-scale, 1));box-shadow:none}
.guideTop{border-radius:18px;padding:17px 20px}
.guideMeta{font-size:calc(11.5px * var(--ol-font-scale, 1))}.guideProgress{height:11px}.guideHeading h2{font-size:clamp(22px,2vw,30px)}.guideHeading p{font-size:calc(14px * var(--ol-font-scale, 1));line-height:1.55}
.guideTip{font-size:calc(13px * var(--ol-font-scale, 1));line-height:1.55;background:#f8fbff;border:1px solid #e6edf8;border-radius:12px;padding:10px 12px;color:#51637f}
.guideCredit{font-size:calc(11px * var(--ol-font-scale, 1));color:#7b8396}
.guideMicroHelp{font-size:calc(11.5px * var(--ol-font-scale, 1));color:#6f7b90;background:#fbfbfe;border:1px dashed #dfe5f0;border-radius:11px;padding:9px 11px}
.guideBottom{border-radius:18px;padding:14px 18px}
.guideActions button{padding:12px 18px;border-radius:11px}.guideActions .guidePrimary{box-shadow:0 10px 20px #7661bc2a}.guideActions .guidePlay{box-shadow:0 8px 18px #2e9a8f1a}
.guideStatus{font-size:calc(11.5px * var(--ol-font-scale, 1))}.guideBottomInfo{gap:16px}.guideTakeaway{font-size:calc(12.8px * var(--ol-font-scale, 1));line-height:1.65;max-width:760px}.guideCode{flex:1 1 280px}.guideCode summary{padding:6px 0}.guideCode pre{max-height:240px}
.conceptReadout{gap:10px;padding:6px 8px}.conceptReadout .conceptPill{padding:6px 11px;border-radius:10px}
.memoryLab summary,.microCard,.inspect,.banner,.code,.console{border-radius:16px}
body.easyMode .main{max-width:1240px;padding:14px 20px 18px}
body.easyMode .guideTop{position:sticky;top:82px;z-index:18}
body.easyMode .scene{min-height:clamp(380px,58vh,700px)}
body.easyMode .zoom #qualityBtn,body.easyMode .qualityBadge{display:none!important}
body.easyMode .guideBottom{position:sticky;bottom:0;z-index:19;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border:1px solid #e8edf5}
body.easyMode .guideBottomInfo{align-items:flex-start}
body.easyMode .sceneFooter{bottom:14px;left:14px;right:14px}
body.easyMode .sceneFooter .legend{max-width:min(860px,100%)}
body.easyMode .guideActions{gap:10px}.guideNextGroup{margin-left:auto}
body.easyMode .guideStatus:not(:empty){padding:7px 10px;border-radius:10px;background:#f3faf7;border:1px solid #d8ede6}
body.easyMode .guideStatus.warningState{background:#fff8ee;border-color:#f1dfba;color:#9a6719}
body.easyMode .main:focus{outline:none}
@media(max-width:950px){body.easyMode .guideTop{top:76px}body.easyMode .main{padding:10px 12px 16px}.quickPath button{font-size:calc(10px * var(--ol-font-scale, 1));padding:7px 8px}}
@media(max-width:630px){.top{padding:8px 11px}.top .brand{min-width:0}.headRight{width:100%;justify-content:space-between}.pill{font-size:calc(9px * var(--ol-font-scale, 1))}.side,.right{border-radius:16px}.quickPath{padding:10px}.quickPath>div{gap:6px}.lessonItem{padding:9px 9px}.zoom{top:10px;right:10px}.zoom button{width:36px;height:36px}body.easyMode .main{padding:8px 8px 14px}body.easyMode .guideTop{top:8px;padding:13px}body.easyMode .scene{flex:0 0 360px;min-height:360px;border-radius:18px}body.easyMode .guideBottom{padding:12px 12px 13px;border-radius:16px}.guideActions{align-items:stretch;gap:9px}.guideActions button{padding:12px}.guideNextGroup{width:100%;margin-left:0}.guideNextGroup button{flex:1}.guideActions #guidePrev{flex:1}.guideStatus{order:3;width:100%;min-height:0}.guideBottomInfo{gap:10px}.guideCode{width:100%}.guideCode pre{font-size:calc(11.4px * var(--ol-font-scale, 1));max-height:180px}.sceneFooter .legend{max-width:100%;gap:6px;padding:9px 10px}.sceneFooter .legend span{font-size:calc(9.8px * var(--ol-font-scale, 1))}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* v4: enseñanza visible, sin dependencias externas */
.quickPath{margin:13px 0 10px;padding:11px;background:#f9f8ff;border:1px solid #e8e3f4;border-radius:12px}.quickPath>span{font-size:calc(9px * var(--ol-font-scale, 1));font-weight:850;letter-spacing:1.1px;color:#8a7cad}.quickPath>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.quickPath button{border:1px solid #e1daf7;color:#715ead;background:#fff;border-radius:7px;padding:6px 7px;font-size:calc(10px * var(--ol-font-scale, 1));font-weight:760}.quickPath button:hover{background:#efeafd}.fullSceneToggle{display:flex;gap:9px;align-items:flex-start;padding:9px;margin-bottom:9px;border-radius:8px;background:#f0f8f6;border:1px solid #cee8e1;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:700;color:#287f73;line-height:1.5;cursor:pointer}.fullSceneToggle input{width:15px;height:15px;accent-color:#388f83;flex-shrink:0}.zoneGuide{pointer-events:none;position:absolute;top:38px;left:14px;right:53px;display:flex;flex-wrap:wrap;gap:7px;z-index:2}.zoneGuide span{font-size:calc(9px * var(--ol-font-scale, 1));letter-spacing:.25px;color:#728097;font-weight:750;background:#ffffffd4;border:1px solid #edf0f7;border-radius:6px;padding:5px 7px}.zoneGuide b{color:#7964bf}.stageButtons #callStepBtn{border-color:#d8d1f1;background:#faf9ff;color:#6d58af}.stageButtons #callStepBtn:disabled{opacity:.38}.compareArea{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.compareItem{background:linear-gradient(155deg,#f3fbf8,#fff);border:1px solid #d9eee9;border-radius:11px;padding:10px;min-width:0}.compareItem b{color:#258478;display:block;font-size:calc(12px * var(--ol-font-scale, 1));overflow-wrap:anywhere}.compareItem .chip{display:inline-block;font-size:calc(9px * var(--ol-font-scale, 1));font-weight:800;color:#696091;background:#f4f0ff;padding:3px 5px;border-radius:5px;margin:4px 0}.compareItem .val{display:block;font:10px/1.55 Consolas,monospace;color:#44536d;overflow-wrap:anywhere}.compareCaption{grid-column:1/-1;color:#748198;font-size:calc(10.6px * var(--ol-font-scale, 1));line-height:1.6}.compareBlank{grid-column:1/-1;padding:12px;background:#fbfaf8;border:1px dashed #d9d4e8;border-radius:9px;color:#7a7386;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.6}.newPulse{color:#258478;font-weight:800}.flowStep.active{border-color:#9680de!important;background:#f3f0ff!important}.flowStep.done{background:#effaf6!important;border-color:#b5e3d9!important}.flowStep.active .num{background:#7861bf!important;color:white!important}.flowStep.done .num{background:#2f9c85!important;color:white!important}.flowResult code{display:block;margin-top:7px;padding:8px 9px;border-radius:6px;background:#273048;color:#b7f0e5;font:10.5px Consolas,monospace;white-space:normal;overflow-wrap:anywhere}.flowResult small{display:block;margin-top:7px;color:#71809a;font-size:calc(10px * var(--ol-font-scale, 1));line-height:1.5}.nodeLabel .k{font-size:calc(8.5px * var(--ol-font-scale, 1))}.nodeLabel .v{font-size:calc(9.4px * var(--ol-font-scale, 1));max-width:160px;white-space:normal;line-height:1.25}
@media(max-width:630px){.zoneGuide{display:none}.quickPath{margin:10px 0}.compareArea{grid-template-columns:1fr 1fr}}

/* v6 · mayor contraste docente, personaje original sin modificar */
.mentorMini{display:flex;align-items:center;gap:11px;border:1px solid #e6e5f0;border-radius:13px;background:linear-gradient(110deg,#fdfcff,#f7f9fc);margin-top:12px;padding:5px 9px 4px 4px;min-height:95px}
.mentorMini img{width:66px;height:88px;object-fit:contain;object-position:center bottom;flex-shrink:0}
.mentorMini strong{display:block;color:#6950ad;font-size:calc(11px * var(--ol-font-scale, 1))}.mentorMini p{color:#495670;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:650;line-height:1.44;margin:5px 0}.mentorMini small{color:#9ba1ae;font-size:calc(9px * var(--ol-font-scale, 1))}
.outcomeGrid{display:grid;grid-template-columns:1fr;gap:6px}.outcome{display:grid;grid-template-columns:115px 1fr;align-items:baseline;gap:8px;padding:8px 9px;background:#f8faff;border:1px solid #e8ecf5;border-radius:8px;font-size:calc(11px * var(--ol-font-scale, 1))}.outcome b{color:#57658a;font-size:calc(10px * var(--ol-font-scale, 1))}.outcome span{color:#253750;word-break:break-word}.outcome.changed{border-color:#c3eadb;background:#f1fbf7}.outcome.changed span{font-weight:750;color:#1c7569}
.quiz{display:grid;gap:9px}.quiz .qPrompt{font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.5;color:#303b58;font-weight:800}.quiz .qChoices{display:grid;gap:6px}.quiz .qOption{display:block;cursor:pointer;border:1px solid #e5e7ef;border-radius:9px;padding:9px 10px;color:#45536b;background:#fdfdff;font-size:calc(11px * var(--ol-font-scale, 1))}.quiz .qOption:has(input:checked){background:#f4f0ff;border-color:#917bc9}.quiz .qOption input{accent-color:#7864bc;margin-right:5px}.quiz button{padding:9px 12px;font-weight:800;font-size:calc(11px * var(--ol-font-scale, 1));border-radius:8px;background:#7562bd;color:white;border:0}.quiz .qFeedback{font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.52;padding:9px;border-radius:7px;background:#f0faf5;color:#286b58}.quiz .qFeedback.error{background:#fff7e8;color:#866331}
.scene .legend{flex-wrap:wrap}.legend span:last-child{white-space:nowrap}
/* the reference card has a different semantic meaning than a sphere */
.zoneGuide{pointer-events:none}


/* ObjectLab v6: mapa de memoria e identidad */
.main{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d7dced transparent}
.scene{flex:1 0 315px;min-height:315px}
.memoryLab{border:1px solid #e0e5f0;border-radius:14px;background:#fff;box-shadow:0 8px 22px #34406208;flex:0 0 auto;overflow:hidden}
.memoryLab>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:11px 13px;color:#34405a}
.memoryLab>summary::-webkit-details-marker{display:none}
.memoryLab>summary strong{display:block;font-size:calc(12px * var(--ol-font-scale, 1));letter-spacing:-.1px}
.memoryLab>summary small{display:block;color:#8792a4;font-size:calc(10px * var(--ol-font-scale, 1));margin-top:2px}
.memoryLab>summary .memSummaryIcon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;color:#6853b6;background:#f3effc;font-size:calc(20px * var(--ol-font-scale, 1))}
.memToggleText{margin-left:auto;color:#9188ac;font-size:calc(9.5px * var(--ol-font-scale, 1));font-weight:750;white-space:nowrap}
.memoryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 12px 10px}
.memoryCell{min-width:0;padding:10px;background:#fbfcff;border:1px solid #e6eaf4;border-radius:10px}
.memoryCell.type{border-top:3px solid #8572d0}.memoryCell.stack{border-top:3px solid #7294be}.memoryCell.heap{border-top:3px solid #45ab9e}
.memoryCell>strong{font-size:calc(9.6px * var(--ol-font-scale, 1));font-weight:850;letter-spacing:.3px;display:block;color:#4e5b70;margin-bottom:3px}
.memoryCell>small{display:block;color:#96a0af;font-size:calc(9.5px * var(--ol-font-scale, 1));line-height:1.4;margin-bottom:7px}
.memoryItem{display:flex;align-items:center;gap:5px;text-align:left;width:100%;margin:4px 0;padding:7px 8px;border-radius:7px;border:1px solid #e7eaf2;background:#fff;font-size:calc(10px * var(--ol-font-scale, 1));color:#556278;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.memoryItem b{color:#35445e;font-size:calc(10px * var(--ol-font-scale, 1))}.memoryItem em{color:#7d879b;font-size:calc(9px * var(--ol-font-scale, 1));font-style:normal}
.memoryItem[aria-pressed="true"]{border-color:#a18dd7;background:#f4f0ff;color:#5b479e}
.memoryItem:not(:disabled):hover{border-color:#a69bce}
.memoryEmpty{padding:9px 4px;font-size:calc(10px * var(--ol-font-scale, 1));color:#9aa4b5;line-height:1.45}
.memoryRunning{margin-top:6px;padding:8px;border:1px solid #e6d8c9;background:#fff8f1;color:#a26835;border-radius:8px;font-size:calc(10px * var(--ol-font-scale, 1));line-height:1.5}
.memoryDisclaimer{margin:0;padding:0 13px 10px;color:#9da4b1;font-size:calc(9.2px * var(--ol-font-scale, 1));line-height:1.45}
@media(max-width:1120px){.memoryGrid{grid-template-columns:1fr 1fr}.memoryCell.type{grid-column:1/-1}}
@media(max-width:640px){.memoryGrid{grid-template-columns:1fr}.memoryCell.type{grid-column:auto}.scene{min-height:340px;flex-basis:340px}.memoryLab>summary{align-items:flex-start}.memToggleText{display:none}}


/* VISUAL REFINEMENT v7 · Trazo arquitectónico / cristal */
:root{--ink:#223047;--muted:#62738d;--line:#e4e9f3;--shadow:0 14px 40px #283b5a11}
body{background:#f6f8fd;color:#25314b;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.top{border-bottom:1px solid #e2e8f2;box-shadow:0 2px 14px #24365008;z-index:4}
.logo{background:linear-gradient(145deg,#8e78d4,#6046ad);box-shadow:0 7px 18px #7864ba36}
.headRight .pill{color:#6953aa;background:#f6f2ff}
.main{gap:13px;padding:18px 18px 20px;overflow-y:auto;scrollbar-color:#c6cce0 transparent}
.mainHead h1{font-size:clamp(23px,2.5vw,31px);font-weight:860;color:#1f2d47;letter-spacing:-1.1px}
.mainHead p{color:#64718c;font-size:calc(12.8px * var(--ol-font-scale, 1))}
.overline{color:#7c65b6;font-size:calc(10.3px * var(--ol-font-scale, 1))}
.scene{flex:none;height:clamp(420px,51vh,560px);min-height:420px;border:1px solid #dce4f1;border-radius:20px;background:radial-gradient(ellipse at 53% 38%,#fff 0%,#fafcff 48%,#eef3fd 100%);box-shadow:0 20px 44px #2e467112,0 2px 7px #3d588109,inset 0 1px 0 #fff}
.scene::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(146deg,#ffffff90 0%,transparent 28%,transparent 78%,#dee8fc36 100%);z-index:0}
#c{position:relative;z-index:1}
#labels{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.sceneCorner{z-index:4;top:17px;left:18px;font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:1.25px;color:#576a85;background:#ffffffdb;border:1px solid #e7edf6;padding:8px 10px;border-radius:11px;box-shadow:0 5px 12px #263f6810;backdrop-filter:blur(8px)}
.live{background:#27a48a;box-shadow:0 0 0 4px #2dc1a922}
.zoneGuide{top:61px;left:18px;right:72px;gap:7px;z-index:3}
.zoneGuide span{font-size:calc(9.6px * var(--ol-font-scale, 1));padding:6px 9px;background:#ffffffde;border-color:#dfe7f4;color:#60728c;box-shadow:0 4px 11px #2636550b;border-radius:9px}
.zoneGuide b{color:#6c50b6}
.zoom{z-index:5;top:16px;right:16px;gap:7px}
.zoom button{width:37px;height:37px;font-size:calc(18px * var(--ol-font-scale, 1));color:#405275;border:1px solid #d9e2f0;background:#ffffffec;border-radius:11px;box-shadow:0 7px 15px #2c436313}
.zoom button:hover{background:#f3f0ff;border-color:#a999d2;color:#664daf}
.zoom .miniAction{font:800 10px system-ui, sans-serif;letter-spacing:.15px}
.zoom button[data-selected=true]{color:#6550ae;border-color:#a596d6;background:#f3efff}
.sceneFooter{z-index:3;bottom:14px;left:14px;right:14px}
.legend{border:1px solid #dde6f1;box-shadow:0 8px 20px #253a5c16;border-radius:11px;padding:10px 13px;gap:12px;background:#fffffff0;backdrop-filter:blur(9px)}
.legend span{font-size:calc(10.4px * var(--ol-font-scale, 1));color:#43516e;font-weight:760}
.legend i{width:11px;height:11px}
.sceneFooter small{color:#657591;font-size:calc(10px * var(--ol-font-scale, 1));font-weight:600;text-shadow:0 1px 0 #fff}
.nodeLabel{z-index:2;gap:4px;filter:drop-shadow(0 5px 9px #3147671c);transition:opacity .16s;text-shadow:none}
.nodeLabel .k{font-size:calc(10px * var(--ol-font-scale, 1));color:#425575;letter-spacing:.37px;font-weight:900;background:#fffffff1;border:1px solid #dce6f3;padding:5px 9px;border-radius:8px;box-shadow:0 1px 2px #34516b11}
.nodeLabel .v{font-size:calc(10.4px * var(--ol-font-scale, 1));color:#43566f;font-weight:700;background:#ffffffed;border:1px solid #e1eaf3;border-radius:7px;padding:5px 9px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.nodeLabel.object .k{background:#edfbf7;border-color:#b6e5d8;color:#176f62}
.nodeLabel.interface .k{background:#fff8e8;border-color:#f0dfb5;color:#976c20}
.nodeLabel.static .k{background:#eff7ff;border-color:#c9dff6;color:#32679f}
.nodeLabel.variable .k{background:#f1f4fb;border-color:#d4deee;color:#526789}
.nodeLabel.sel .k{border-color:#a596db;box-shadow:0 0 0 3px #9d8bda24;background:#f7f2ff}
.nodeLabel.sel .v{color:#483a84}
.pulseNotice{z-index:6;top:121px;box-shadow:0 12px 26px #253b6070}
.right{background:#fff}
.right h2{font-size:calc(20px * var(--ol-font-scale, 1))}
.right p{font-size:calc(12.2px * var(--ol-font-scale, 1));color:#65748c;line-height:1.65}
.right .banner{font-size:calc(12.4px * var(--ol-font-scale, 1));font-weight:750}
.right .sectionHead strong{font-size:calc(12.4px * var(--ol-font-scale, 1))}
.right .code{font-size:calc(12.2px * var(--ol-font-scale, 1));line-height:1.9;background:#1d263c;color:#eaf0ff;border:1px solid #2b3957;box-shadow:inset 0 1px 0 #ffffff0a}
.right .codeLine.active{background:#6e63bd50;border-left-color:#c4b5ff}
.right .inspect{font-size:calc(12.2px * var(--ol-font-scale, 1))}
.stageMain strong{font-size:calc(13.1px * var(--ol-font-scale, 1))}
.stageMain p{font-size:calc(12px * var(--ol-font-scale, 1));color:#63718b}
.stageRow{border-color:#dfe6f1;box-shadow:0 9px 22px #2f4a6810}
.bottomCards .microCard p{font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.65}
.lessonItem{font-size:calc(12.2px * var(--ol-font-scale, 1));padding:9px}
.legend span.obj i{border-radius:50%;box-shadow:inset -2px -2px 1px #ffffffa0}
.qualityBadge{position:absolute;z-index:4;top:18px;left:50%;transform:translateX(-50%);border-radius:8px;border:1px solid #e0e6f1;background:#ffffffd9;color:#5d6e85;font:800 9px/1.2 system-ui,sans-serif;padding:6px 9px;letter-spacing:.7px;pointer-events:none}
.scene:fullscreen{border-radius:0;height:100vh!important;width:100vw!important;background:radial-gradient(ellipse at 53% 35%,#fff,#edf2fd)!important}
.scene:fullscreen .zoneGuide{top:67px}
.scene:fullscreen .sceneFooter{bottom:24px}
a{color:#6f59bd;text-decoration:none}a:hover{text-decoration:underline}.creditLink{font-weight:800;color:#6c55bb}.scene{background:linear-gradient(180deg,#ffffff 0%,#fbfcff 58%,#f1f4fa 100%);border:1px solid #e4e8f1;box-shadow:0 22px 50px #32456a14,inset 0 1px 0 #ffffff;border-radius:20px}.mainHead,.stageRow,.microCard,.guideTop,.inspect,.banner,.code,.console{box-shadow:0 12px 34px #32456a0c}.guideTop{background:linear-gradient(180deg,#ffffff 0%,#f7f4ff 100%);border:1px solid #ebe5fb}.nodeLabel .n{font-size:calc(13px * var(--ol-font-scale, 1))}.nodeLabel .v{font-size:calc(10.4px * var(--ol-font-scale, 1))}.legend{background:#ffffffd9;border:1px solid #eceff5;box-shadow:0 10px 22px #2f3f5b10}.sceneCorner{background:#ffffffd7;border:1px solid #ebeef5;color:#67748a}.zoom button,.outline,.stageButtons button,.cta{box-shadow:0 8px 16px #2b3a560a}.rightFooter .creditWrap{display:block;margin-top:6px;line-height:1.6}@media(max-width:1170px){.scene{min-height:420px;height:460px}.main{overflow-y:visible}.zoneGuide{right:64px}.qualityBadge{display:none}}
@media(max-width:630px){.scene{height:400px;min-height:400px;border-radius:15px}.sceneCorner{left:10px;top:12px;padding:6px 8px;font-size:calc(8.4px * var(--ol-font-scale, 1))}.zoneGuide{left:10px;right:53px;top:52px;gap:4px}.zoneGuide span{font-size:calc(8px * var(--ol-font-scale, 1));padding:4px 5px}.zoom{right:9px;top:10px;gap:5px}.zoom button{width:33px;height:33px}.legend{gap:7px;padding:8px 9px;max-width:100%}.legend span{font-size:calc(8.6px * var(--ol-font-scale, 1))}.nodeLabel .k{font-size:calc(8.9px * var(--ol-font-scale, 1));padding:4px 6px}.nodeLabel .v{font-size:calc(8.7px * var(--ol-font-scale, 1));padding:4px 6px;max-width:115px}.main{padding:14px 12px;overflow:visible}.pulseNotice{top:108px}}


/* MODO FACIL: el alumno solo ve una idea, un gráfico y una acción. */
.experienceSwitch{display:flex;align-items:center;gap:4px;border:1px solid #e7e7ef;border-radius:13px;padding:5px;background:#f5f6fb}
.experienceSwitch button{border:0;background:transparent;border-radius:9px;padding:9px 14px;color:#657186;font-weight:780;font-size:calc(12px * var(--ol-font-scale, 1));cursor:pointer}
.experienceSwitch button.active{color:#fff;background:#7661bc;box-shadow:0 5px 14px #7661bc26}
.guideTop{display:none;flex-direction:column;gap:9px;background:#fff;border:1px solid #e7e7ef;box-shadow:0 6px 22px #34406209;border-radius:16px;padding:16px 21px}
.guideMeta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:calc(11px * var(--ol-font-scale, 1));color:#7362b0;font-weight:800;letter-spacing:.3px}
.guideProgress{height:5px;background:#efedf6;border-radius:99px;overflow:hidden}
.guideProgress span{display:block;height:100%;width:6%;background:linear-gradient(90deg,#7661bc,#35a79c);border-radius:99px;transition:width .35s}
.guideHeading{display:flex;align-items:center;gap:12px}
.guideHeading h2{font-size:clamp(19px,2.2vw,28px);letter-spacing:-.7px;color:#25304a;margin:1px 0 6px;line-height:1.18}
.guideHeading p{color:#566478;font-size:clamp(12px,1.35vw,15px);line-height:1.5;margin:0;max-width:900px}
.guideTip{display:flex;align-items:center;gap:9px;background:#f4f9f8;border:1px solid #dfeeea;color:#28675f;border-radius:10px;padding:9px 12px;font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.5;font-weight:680}
.guideTip::before{content:'👁';font-size:calc(16px * var(--ol-font-scale, 1));flex-shrink:0}
.guideBottom{display:none;flex-direction:column;gap:9px;background:#fff;border:1px solid #e7e7ef;border-radius:15px;padding:13px 18px}
.guideActions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.guideActions button{font-size:calc(13px * var(--ol-font-scale, 1));border-radius:10px;padding:11px 18px;font-weight:850;border:1px solid #e3e5ef;background:#fff;color:#566377}
.guideActions .guidePrimary{background:#7661bc;color:#fff;border-color:#7661bc;min-width:165px}
.guideActions .guidePlay{background:#f2faf7;color:#247e73;border-color:#cfebe2}
.guideActions button:disabled{opacity:.4}
.guideNextGroup{display:flex;gap:8px;align-items:center}
.guideBottomInfo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #ecedf4;padding-top:9px}
.guideTakeaway{font-size:calc(12px * var(--ol-font-scale, 1));font-weight:730;line-height:1.5;color:#4b5970;max-width:740px}
.guideTakeaway b{color:#2b776e}
.guideCode{font-size:calc(12px * var(--ol-font-scale, 1));color:#67758c;min-width:210px}
.guideCode summary{cursor:pointer;font-weight:780;color:#6c58b3;user-select:none;text-align:right}
.guideCode pre{background:#20283a;color:#eef0f8;border-radius:9px;padding:11px 13px;font:12px/1.65 Consolas,monospace;white-space:pre-wrap;max-width:660px;overflow:auto; margin:9px 0 0}
.guideStatus{color:#337c70;font-size:calc(11px * var(--ol-font-scale, 1));min-height:16px;font-weight:730}
body.easyMode .layout{display:grid;grid-template-columns:minmax(0,1fr)}
body.easyMode .side,body.easyMode .right,body.easyMode .mainHead,body.easyMode .stageRow,body.easyMode .bottomCards,body.easyMode .memoryLab{display:none!important}
body.easyMode .main{max-width:1380px;margin:0 auto;width:100%;padding:12px 24px;gap:10px;min-height:0;overflow:auto}
body.easyMode .guideTop,body.easyMode .guideBottom{display:flex}
body.easyMode .scene{flex:1 1 auto;min-height:300px}
body.easyMode .sceneCorner{font-size:calc(10px * var(--ol-font-scale, 1))}
body.easyMode .sceneFooter small{display:none}
body.easyMode .zoneGuide{display:none}
body.easyMode .scene .legend{box-shadow:0 3px 12px #3940620b}
body.easyMode .scene #labels .nodeLabel .n{font-size:calc(14px * var(--ol-font-scale, 1))}
body.easyMode .guideStatus:not(:empty){display:block}
@media(max-width:950px){.experienceSwitch{margin-left:auto}.experienceSwitch button{padding:8px 10px;font-size:calc(11px * var(--ol-font-scale, 1))}body.easyMode .main{padding:10px 12px}body.easyMode .scene{min-height:300px}.guideTop{padding:14px 15px}}
@media(max-width:630px){.top{height:auto;min-height:65px;gap:5px;flex-wrap:wrap;padding:7px 12px}.experienceSwitch{width:100%;justify-content:stretch}.experienceSwitch button{flex:1}body.easyMode .main{padding:8px;min-height:0}body.easyMode .scene{flex:0 0 355px;min-height:355px}.guideTop{padding:13px;gap:8px}.guideHeading h2{font-size:calc(20px * var(--ol-font-scale, 1))}.guideHeading p{font-size:calc(13px * var(--ol-font-scale, 1))}.guideMeta{font-size:calc(10px * var(--ol-font-scale, 1))}.guideActions{flex-wrap:wrap}.guideActions button{padding:11px 13px}.guideNextGroup{margin-left:auto}.guideActions .guidePrimary{min-width:125px}.guideBottom{padding:12px}.guideCode summary{text-align:left}.guideTakeaway{font-size:calc(12px * var(--ol-font-scale, 1))}.sceneFooter .legend{max-width:94%;flex-wrap:wrap;gap:5px}.guideBottomInfo{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.guideProgress span{transition:none}}


/* v7.4 — acabado del propio escenario sin añadir controles */
.scene{background:radial-gradient(ellipse at 51% 33%,#fff 0%,#fcfdff 35%,#f1f5fb 75%,#edf2fa 100%);box-shadow:0 27px 62px #33466615,inset 0 1px 0 #fff}
.scene:after{content:"";position:absolute;inset:0;border:1px solid #ffffffb8;border-radius:inherit;pointer-events:none}
.sceneFooter{background:#ffffffed;border:1px solid #e8edf5;box-shadow:0 12px 26px #364a6710;backdrop-filter:blur(10px)}
.nodeLabel .k{color:#586782;letter-spacing:.55px;border-color:#e8ecf4;background:#fffefc;box-shadow:0 6px 13px #1c324912}
.nodeLabel.object .k{color:#12796f;border-color:#d8eee7;background:#f2fcf8}
.easyMode .nodeLabel.object .k{display:none}
.easyMode .nodeLabel.object .v{font-size:calc(11px * var(--ol-font-scale, 1));font-weight:850;color:#1c7369;background:#f8fffd;border:1px solid #cfece4;padding:5px 9px}
.nodeLabel .v{color:#57667d;font-weight:780;border-color:#e5eaf3}
.sceneCorner{letter-spacing:1.1px;color:#60718d}
@media(max-width:630px){.sceneFooter{background:#ffffffed}.nodeLabel .k{font-size:calc(8.6px * var(--ol-font-scale, 1))}.nodeLabel .v{font-size:calc(9px * var(--ol-font-scale, 1))}}

/* ObjectLab v7.5 · Pulido gráfico y accesibilidad sin añadir complejidad de uso */
:root{--purple:#7865c6;--mint:#36a998;--ink:#243049;--line:#e5eaf3;--shadow:0 14px 40px #2d436012}
body{background:#f5f7fc;color:#253149;-webkit-font-smoothing:antialiased}
.top{background:#fff;border-bottom-color:#e9edf4;box-shadow:0 5px 20px #2d426409}
.brand b{letter-spacing:-.8px}.logo{box-shadow:0 8px 19px #6851b22d}
.scene{background:radial-gradient(ellipse at 48% 30%,#fff 0%,#fcfdff 40%,#f3f6fc 78%,#eaf0f9 100%);border-radius:22px;border-color:#e3e9f3;box-shadow:0 22px 64px #33486713,inset 0 1px 0 #fff;isolation:isolate}
.scene:before{background:radial-gradient(ellipse at 48% 78%,rgba(92,130,182,.065),transparent 65%)}
.scene:after{box-shadow:inset 0 0 0 1px #ffffffb5;pointer-events:none}
.sceneCorner{background:#ffffffed;color:#536786;box-shadow:0 8px 24px #344c6e10;letter-spacing:.85px;border:1px solid #e5ebf5}
.sceneFooter{background:#ffffffec;box-shadow:0 12px 28px #354a6910;border-color:#e7ecf3;backdrop-filter:blur(10px)}
.legend span{font-weight:790;font-size:calc(10.5px * var(--ol-font-scale, 1));color:#4f5f7c}.legend i{height:10px;width:10px;border-radius:3px}
.legend span.obj i{border-radius:50%}
.zoom{box-shadow:0 8px 20px #2e435a11;border-radius:14px}.zoom button{border-color:#e2e8f2}
.guideTop{background:linear-gradient(135deg,#ffffff 5%,#faf9ff 100%);border:1px solid #e8e6f4;box-shadow:0 8px 32px #4d4c7210;border-radius:20px}
.guideHeading h2{font-weight:850;letter-spacing:-.75px}.guideHeading p{color:#56657e}
.guideProgress{background:#e8edf5;overflow:hidden}
.guideProgress span{background:linear-gradient(90deg,#7565c3 0%,#43b2a3 100%);box-shadow:none}
.guideTip{background:#f0f9f7;border:1px solid #d5ede8;color:#1e786e}
.guideCredit{font-size:calc(10px * var(--ol-font-scale, 1));color:#929eb0;margin-top:8px;padding-left:2px;line-height:1.45;font-weight:650}
.guideCredit a{color:#7662b7;font-weight:760}
.guideTakeaway{color:#384a66}.guideTakeaway b{color:#6756ad}
.nodeLabel{z-index:2;max-width:260px}
.nodeLabel .k{background:#ffffffed;border:1px solid #e3e8f2;box-shadow:0 8px 22px #27425d10;padding:4px 9px;font-weight:850;letter-spacing:.7px}
.nodeLabel .v{font-size:calc(11.2px * var(--ol-font-scale, 1));line-height:1.25;color:#435775;background:#ffffffed;border:1px solid #e7edf5;padding:6px 10px;border-radius:8px;box-shadow:0 9px 24px #2e496414}
.easyMode .nodeLabel.object .v{background:#f5fffb;color:#1b6e66;border:1px solid #c8e8df;padding:7px 11px;font-size:calc(11.3px * var(--ol-font-scale, 1))}
.nodeLabel.sel .v{border-color:#927acb;box-shadow:0 0 0 3px #9e89dc1f,0 8px 20px #2d4d6210}
.mainHead h1{font-size:calc(26px * var(--ol-font-scale, 1));letter-spacing:-.8px}.mainHead p{color:#60708d}
.stageRow{border-color:#e3e7f0;box-shadow:0 11px 29px #2e42650b}.stageButtons .primary{box-shadow:0 9px 21px #6d56ad1e}
.stageButtons button:focus-visible,.guideControls button:focus-visible{outline:3px solid #b8a6ed;outline-offset:2px}
@media(max-width:760px){.guideTop{border-radius:16px}.guideCredit{font-size:calc(9.5px * var(--ol-font-scale, 1))}.scene{border-radius:16px}.legend span{font-size:calc(9.3px * var(--ol-font-scale, 1))}.sceneFooter{padding:8px 9px}.nodeLabel .v{font-size:calc(10px * var(--ol-font-scale, 1))}.easyMode .nodeLabel.object .v{font-size:calc(10px * var(--ol-font-scale, 1))}}
@media(prefers-reduced-motion:reduce){.scene .nodeLabel,.guideProgress span{transition:none!important}}


/* El nombre del método se muestra en la cabecera de la escena, nunca sobre la flecha. */
#pulseNotice{top:14px;left:50%;transform:translateX(-50%);z-index:15;max-width:min(48%,390px);text-align:center;font-size:calc(11px * var(--ol-font-scale, 1));box-shadow:0 8px 20px #202a4c28}
.easyMode .qualityBadge{display:none}
@media(max-width:630px){#pulseNotice{top:59px;max-width:80%;font-size:calc(10.6px * var(--ol-font-scale, 1));padding:8px 10px}}

/* v7.6 · Relaciones semánticas, sin añadir controles permanentes */
.scene{background:radial-gradient(ellipse at 49% 38%,#ffffff 0%,#f9fbff 44%,#edf2fa 100%)}
.sceneCorner{letter-spacing:1.05px}
.easyMode .sceneFooter{backdrop-filter:blur(9px);box-shadow:0 10px 25px #25385613}
.easyMode .nodeLabel{gap:4px}
.easyMode .nodeLabel .v{font-weight:800}
.guideTop .guideTip{border-left:3px solid #39a99b}
.guideBottomInfo{align-items:center}
.conceptReadout{display:none;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;min-height:32px;padding:4px 8px;font-size:calc(12px * var(--ol-font-scale, 1));color:#465773}
body.easyMode .conceptReadout.show{display:flex}
.conceptReadout .conceptPill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;border:1px solid #e5e9f3;background:#f9faff;font-weight:800}
.conceptReadout .conceptPill b{font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:.55px;font-weight:850;color:#7864b4}
.conceptReadout .conceptArrow{font-weight:900;color:#9989c6}
.conceptReadout .conceptOutcome{font-size:calc(11.5px * var(--ol-font-scale, 1));font-weight:750;color:#566680}
.conceptReadout .conceptPill.interface{border-color:#eddfb7;background:#fffaec}
.conceptReadout .conceptPill.interface b{color:#a87b2c}
.conceptReadout .conceptPill.object{border-color:#ccece3;background:#f3fcf9}
.conceptReadout .conceptPill.object b{color:#178679}
.conceptReadout .conceptPill.variable{border-color:#d6e0f0;background:#f5f8fc}
.conceptReadout .conceptPill.variable b{color:#5c7296}
@media(max-width:630px){.conceptReadout{gap:5px;font-size:calc(11px * var(--ol-font-scale, 1));padding:1px 3px}.conceptReadout .conceptPill{padding:4px 6px}.conceptReadout .conceptOutcome{font-size:calc(10px * var(--ol-font-scale, 1))}}


body.easyMode .scene.semanticMode .nodeLabel.variable .v{display:none}
body.easyMode .scene.semanticMode .nodeLabel.variable .k{font-size:calc(10px * var(--ol-font-scale, 1));background:#f4f8ff;border-color:#d9e3f2;color:#506a91}

@media(max-width:630px){
 body.easyMode .scene.semanticMode{min-height:500px!important}
 body.easyMode .scene.semanticMode .nodeLabel.object,
 body.easyMode .scene.semanticMode .nodeLabel.variable{display:none!important}
 body.easyMode .scene.semanticMode .nodeLabel.class,
 body.easyMode .scene.semanticMode .nodeLabel.abstract,
 body.easyMode .scene.semanticMode .nodeLabel.interface{display:none!important}
 body.easyMode .scene.semanticMode .nodeLabel .k{font-size:calc(9px * var(--ol-font-scale, 1))}
 body.easyMode .scene.semanticMode .sceneFooter{padding:6px}
}

/* ObjectLab v7.7 · lecturas visuales compactas para constructores, memoria,
   encapsulación y composición. No se añaden menús ni controles permanentes. */
.journeyBar{width:min(100%,780px);padding:10px 12px 11px;background:linear-gradient(135deg,#fff,#f8f6ff);border:1px solid #e7e3f1;border-radius:14px;box-shadow:0 10px 26px #42547e0d}
.journeyTitle{font-size:calc(10px * var(--ol-font-scale, 1));color:#7968a9;font-weight:900;letter-spacing:1.1px;text-align:center;margin-bottom:9px}
.journeySteps{display:flex;gap:7px;align-items:center;justify-content:center}
.journeyStep{min-width:0;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:8px 6px;background:#fff;border:1px solid #e6eaf3;border-radius:10px;text-align:center;box-shadow:0 3px 10px #49557f0b}
.journeyStep strong{font-size:calc(12px * var(--ol-font-scale, 1));font-weight:850;color:#354260;max-width:100%;overflow-wrap:anywhere}
.journeyStep small{font-size:calc(10.2px * var(--ol-font-scale, 1));color:#737f95;line-height:1.3}
.journeyStepIndex{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#ece6fb;color:#735fc1;font-size:calc(9px * var(--ol-font-scale, 1));font-weight:900}
.journeyChevron{font-size:calc(17px * var(--ol-font-scale, 1));font-weight:900;color:#a79ace}
.journeyHint{text-align:center;color:#62718a;font-size:calc(11px * var(--ol-font-scale, 1));margin-top:9px;line-height:1.35;font-weight:650}
.guideStatus.warningState{color:#9c5148;font-weight:780}
body.easyMode .scene.semanticMode .nodeLabel.variable{display:none!important}
@media(max-width:630px){.journeyBar{padding:8px 7px}.journeySteps{gap:3px}.journeyStep{padding:7px 3px}.journeyStep strong{font-size:calc(10px * var(--ol-font-scale, 1))}.journeyStep small{font-size:calc(9px * var(--ol-font-scale, 1))}.journeyStepIndex{width:16px;height:16px;font-size:calc(9px * var(--ol-font-scale, 1))}.journeyChevron{font-size:calc(11px * var(--ol-font-scale, 1))}.journeyHint{font-size:calc(9.5px * var(--ol-font-scale, 1))}.conceptReadout{margin:1px 0 4px}}

/* v8.0 – autoría, propósito formativo y mascota originales */
.top{min-height:77px;height:auto;padding-top:9px;padding-bottom:9px;gap:16px}
.brand{flex-shrink:0;gap:10px}
.brand b{font-size:calc(20px * var(--ol-font-scale, 1));white-space:nowrap}
.brand small{letter-spacing:.7px;font-size:calc(8.5px * var(--ol-font-scale, 1));white-space:nowrap}
.experienceSwitch{flex-shrink:0}
.headRight{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;min-width:240px;font-size:calc(11px * var(--ol-font-scale, 1))}
.authorVersion{display:flex;gap:8px;align-items:center;white-space:nowrap;color:#53627c;font-weight:700}
.versionMark{padding:5px 8px;border-radius:8px;color:#6552ac;background:#f2effb;border:1px solid #e6def9;font-weight:900;letter-spacing:.25px}
.authorBy a{font-weight:850;color:#6552ac;text-decoration:none}
.authorBy a:hover,.authorLinks a:hover{color:#42348b;text-decoration:underline}
.authorLinks{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.authorLinks a{font-weight:800;text-decoration:none;color:#566680;background:#fff;border:1px solid #e5e9f2;border-radius:8px;padding:5px 10px;transition:background .18s,border-color .18s}
.authorLinks a:hover{background:#f7f5ff;border-color:#d8cfed}
.appMission{display:flex;align-items:center;gap:15px;flex:0 0 auto;padding:13px 18px;min-height:110px;background:linear-gradient(112deg,#fff 0%,#fcfbff 62%,#f5f2ff 100%);border:1px solid #e5e5f0;border-radius:18px;box-shadow:0 14px 30px #3341600c;isolation:isolate}
.missionMascot{width:70px;height:90px;object-fit:contain;object-position:center;background:white;flex:0 0 70px;border-radius:13px;filter:drop-shadow(0 4px 6px #27364c24)}
.missionBody{min-width:0;display:flex;flex-direction:column;gap:4px}
.missionEyebrow{font-size:calc(9.8px * var(--ol-font-scale, 1));letter-spacing:.8px;color:#7962b7;font-weight:900}
.appMission h2{margin:0;font-size:clamp(16px,1.65vw,23px);font-weight:900;letter-spacing:-.5px;color:#27334e;line-height:1.18}
.appMission p{margin:1px 0;font-size:calc(11.5px * var(--ol-font-scale, 1));line-height:1.52;color:#5d6a80;max-width:900px}
.appMission strong{color:#4b3d8e}
.missionFoot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:3px}
.audienceTag{padding:3px 8px;border-radius:999px;background:#f4f1fe;border:1px solid #e5dff8;color:#6956a5;font-size:calc(9.6px * var(--ol-font-scale, 1));font-weight:850}
.missionNote{font-size:calc(10px * var(--ol-font-scale, 1));color:#8c96a8;margin-left:5px}
.guideCredit a{text-decoration:underline;text-decoration-color:#e6dff5;text-underline-offset:2px}
.rightFooter a{font-weight:800}
body.easyMode .main{max-width:1240px}
body.easyMode .appMission{margin-bottom:1px}
body.easyMode .scene{min-height:clamp(350px,49vh,610px)}
body.easyMode .guideTop{top:90px}
@media(max-width:1230px){.top{gap:9px}.brand b{font-size:calc(18px * var(--ol-font-scale, 1))}.brand small{font-size:calc(8px * var(--ol-font-scale, 1))}.experienceSwitch button{font-size:calc(10.4px * var(--ol-font-scale, 1));padding:8px 9px}.headRight{min-width:215px}.authorBy{font-size:calc(10px * var(--ol-font-scale, 1))}.authorLinks a{padding:4px 8px;font-size:calc(10px * var(--ol-font-scale, 1))}}
@media(max-width:1000px){.top{flex-wrap:wrap}.experienceSwitch{margin-left:auto}.headRight{width:100%;min-width:0;flex-direction:row;justify-content:space-between;align-items:center}.authorLinks{justify-content:flex-end}}
@media(max-width:630px){.top{padding:8px 11px;gap:8px}.brand small{font-size:calc(7.9px * var(--ol-font-scale, 1))}.headRight{flex-direction:column;align-items:stretch;gap:7px}.authorVersion{justify-content:center}.authorLinks{justify-content:center}.authorLinks a{font-size:calc(10.5px * var(--ol-font-scale, 1));flex:1;text-align:center}.appMission{padding:10px 12px;gap:10px;min-height:0;border-radius:15px}.missionMascot{width:51px;height:73px;flex:0 0 51px}.missionEyebrow{font-size:calc(8.7px * var(--ol-font-scale, 1));letter-spacing:.35px}.appMission h2{font-size:calc(16px * var(--ol-font-scale, 1))}.appMission p{font-size:calc(10.7px * var(--ol-font-scale, 1));line-height:1.42}.audienceTag{font-size:calc(8.8px * var(--ol-font-scale, 1));padding:3px 6px}.missionNote{font-size:calc(9px * var(--ol-font-scale, 1));margin-left:0}.guideCredit{font-size:calc(10px * var(--ol-font-scale, 1))}body.easyMode .guideTop{top:8px}body.easyMode .scene{flex:0 0 320px;min-height:320px}}
@media(max-width:370px){.missionNote{display:none}.brand b{font-size:calc(17px * var(--ol-font-scale, 1))}}

.headRight .authorVersion .versionMark{display:inline-flex!important;align-items:center;justify-content:center}

/* v8.0 identidad, cabecera y pie */
.logo{width:64px;height:64px;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#eef2fb 100%);display:grid;place-items:center;padding:4px;overflow:hidden;border:1px solid #dbe3f1;box-shadow:0 12px 24px #6e54bb20}
.logo img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:translateY(2px)}
.top{align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid #e7ebf3;box-shadow:0 12px 30px #31425e10, inset 0 1px 0 #fff}
.brand{display:flex;align-items:center;gap:12px;min-width:260px}
.brand b{font-size:calc(20px * var(--ol-font-scale, 1));display:block;letter-spacing:-.4px}
.brand small{display:block;margin-top:2px;font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:.3px;color:#7d8698}
.headRight{display:grid;gap:8px;justify-items:end}
.authorVersion{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.versionMark{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:linear-gradient(180deg,#7f6bcc 0%,#6957b7 100%);color:#fff;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:850;box-shadow:0 8px 18px #6f5ab22d}
.authorBy{font-size:calc(12px * var(--ol-font-scale, 1));color:#63718a;font-weight:720}
.authorLinks{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.authorLinks a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:#fff;border:1px solid #e5eaf3;box-shadow:0 8px 18px #32425e0c;color:#5a6780;font-weight:780;font-size:calc(11px * var(--ol-font-scale, 1))}
.authorLinks a:hover{background:#f7f9fd;text-decoration:none}
.guideTop{background:linear-gradient(180deg,#ffffff 0%,#f8f5ff 100%);border:1px solid #e9e3fa;box-shadow:0 18px 42px #6d55b40e}
.guideHeading p{max-width:920px}
.banner{background:linear-gradient(180deg,#f8f5ff 0%,#f1edff 100%);border-color:#e5def8}
.sceneCorner{font-weight:800;letter-spacing:.2px}
.rightFooter{margin-top:auto;padding:0!important;background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);border:1px solid #e4e9f2;border-radius:18px;box-shadow:0 16px 34px #34405f0d;color:#637089;overflow:hidden}
.rightFooter .footerTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:14px 16px 10px;border-bottom:1px solid #ebeff6;background:linear-gradient(180deg,#fcfcff 0%,#f5f7fc 100%)}
.rightFooter .footerTop strong{font-size:calc(13px * var(--ol-font-scale, 1));color:#394866;letter-spacing:-.2px}
.rightFooter .footerTop span{font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.5;text-align:right}
.rightFooter .footerLinks{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 6px}
.rightFooter .footerLinks a{display:inline-flex;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid #e6ebf3;background:#fff;color:#6653b2;font-weight:800;font-size:calc(11px * var(--ol-font-scale, 1));box-shadow:0 8px 14px #32425e09}
.rightFooter .footerUseful{display:grid;gap:10px;padding:10px 16px 14px;grid-template-columns:1fr}
.rightFooter .footerUseful div{display:grid;gap:4px;padding:10px 11px;border-radius:12px;background:#fbfcff;border:1px solid #eaedf4}
.rightFooter .footerUseful b{font-size:calc(11px * var(--ol-font-scale, 1));color:#455470}
.rightFooter .footerUseful span{font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.55;color:#6d7a91}
.rightFooter .footerNote{padding:12px 16px;border-top:1px solid #ebeff6;font-size:calc(10.6px * var(--ol-font-scale, 1));line-height:1.55;background:#f9fbfd;color:#8a94a6}
@media(max-width:1120px){.top{grid-template-columns:1fr;justify-items:stretch}.headRight{justify-items:start}.authorVersion,.authorLinks{justify-content:flex-start}}
@media(max-width:700px){.brand{min-width:0}.logo{width:56px;height:56px;border-radius:15px}.authorLinks a{padding:7px 9px;font-size:calc(10.6px * var(--ol-font-scale, 1))}.rightFooter .footerTop{flex-direction:column}.rightFooter .footerTop span{text-align:left}}

/* ObjectLab 8.1 · Cámara 3D + esquema semántico */
.sceneToolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 12px;border:1px solid #e4e9f2;border-radius:16px;background:linear-gradient(180deg,#fff,#f7f9fd);box-shadow:0 14px 32px #30425e0d}
.viewModes{display:flex;gap:4px;align-items:center;padding:4px;border-radius:12px;border:1px solid #e7eaf4;background:#f1f4fa;flex-shrink:0}
.viewModes button{min-height:37px;border:0;border-radius:9px;background:transparent;color:#67748d;font-size:calc(12px * var(--ol-font-scale, 1));font-weight:780;padding:8px 13px;cursor:pointer}
.viewModes button.active{background:linear-gradient(180deg,#7e6ccc,#6b57b5);color:#fff;box-shadow:0 6px 14px #6e59b72a}
.viewModes button:focus-visible,.cameraTools button:focus-visible,.cameraTools select:focus-visible{outline:3px solid #9985dc;outline-offset:2px}
.sceneToolbarHint{color:#7b879a;font-size:calc(11.5px * var(--ol-font-scale, 1));line-height:1.4;flex:1 1 145px}
.cameraTools{display:flex;align-items:center;gap:7px;margin-left:auto;flex-wrap:wrap}
.cameraTools[hidden]{display:none}
.cameraLabel{font-size:calc(11px * var(--ol-font-scale, 1));font-weight:800;color:#64728a}
.cameraTools select,.cameraTools button{min-height:37px;padding:8px 10px;font-size:calc(11.5px * var(--ol-font-scale, 1));font-weight:770;border:1px solid #dfe5f0;border-radius:10px;background:#fff;color:#50617c;box-shadow:0 6px 12px #30425e0b;cursor:pointer}
.cameraTools button:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.cameraTools button:hover:not(:disabled),.viewModes button:hover:not(.active){background:#f3f1fc;color:#6653ad}
.diagramPanel{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 50% 8%,#fff 0%,#f5f8fd 68%,#eff3f9 100%)}
.diagramPanel[hidden]{display:none!important}
.diagramIntro{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:14px 18px 10px;border-bottom:1px solid #e8edf5;background:#ffffffb8}
.diagramIntro strong{font-size:calc(13px * var(--ol-font-scale, 1));color:#394b69}
.diagramIntro span{font-size:calc(11px * var(--ol-font-scale, 1));color:#748299}
.diagramScroll{flex:1;min-height:0;padding:8px 12px 18px;overflow:auto}
#relationshipDiagram{width:100%;display:block;overflow:visible}
.diagramEdge{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s}
.diagramEdge.flow{stroke-dasharray:8 7;animation:diagram-flow .75s linear infinite}
@keyframes diagram-flow{to{stroke-dashoffset:-30}}
.diagramNode{cursor:pointer;outline:none}
.diagramNode .nodeBack{filter:drop-shadow(0 8px 9px #31435d14)}
.diagramNode:hover .nodeBack,.diagramNode:focus .nodeBack{filter:drop-shadow(0 10px 12px #6c56ba35)}
.diagramNode .nodeMain{font-family:Inter,system-ui,Arial,sans-serif;font-weight:850;font-size:calc(14px * var(--ol-font-scale, 1));fill:#2e3d57;text-anchor:middle;pointer-events:none}
.diagramNode .nodeSub{font-family:Inter,system-ui,Arial,sans-serif;font-weight:620;font-size:calc(11px * var(--ol-font-scale, 1));fill:#6e7a90;text-anchor:middle;pointer-events:none}
.diagramNode .nodeKind{font-family:Inter,system-ui,Arial,sans-serif;font-weight:800;font-size:calc(9px * var(--ol-font-scale, 1));letter-spacing:.5px;fill:#76839a;text-anchor:middle;pointer-events:none}
.diagramNode.selected .nodeBack{stroke:#6651ac;stroke-width:3.4}
.diagramEdgeLabel{font-family:Inter,system-ui,Arial,sans-serif;fill:#53627b;font-weight:820;font-size:calc(10px * var(--ol-font-scale, 1));text-anchor:middle;pointer-events:none}
.scene.diagramMode canvas,.scene.diagramMode #labels,.scene.diagramMode .zoom,.scene.diagramMode .qualityBadge,.scene.diagramMode .zoneGuide,.scene.diagramMode .sceneCorner,.scene.diagramMode #pulseNotice{display:none!important}
.scene.diagramMode .sceneFooter{z-index:6;pointer-events:none}
.selectionInfo{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #d8e7f4;border-radius:13px;background:linear-gradient(110deg,#f8fbff,#f1f7fc);padding:9px 12px;color:#56647d;font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.55;box-shadow:0 10px 24px #32425e0b}
.selectionInfo[hidden]{display:none!important}
.selectionInfo strong{color:#364965}
.selectionInfo button{border:1px solid #d8e1ee;border-radius:9px;background:#fff;color:#64718b;min-width:32px;min-height:32px;cursor:pointer}
body.easyMode .sceneToolbar{padding:8px 11px;border-radius:13px}
body.easyMode .sceneToolbarHint{font-size:calc(11px * var(--ol-font-scale, 1))}
body.easyMode .cameraTools{gap:5px}
body.easyMode .scene{min-height:clamp(360px,54vh,650px)}
@media(max-width:960px){.sceneToolbar{gap:8px}.sceneToolbarHint{order:3;flex:1 1 100%;text-align:left}.cameraTools{margin-left:auto}.cameraLabel{display:none}}
@media(max-width:650px){.sceneToolbar{padding:8px;gap:7px}.viewModes{flex:1 1 100%;justify-content:center}.viewModes button{flex:1;min-height:39px}.cameraTools{flex:1 1 100%;justify-content:space-between}.cameraTools select{flex:1}.cameraTools button{padding:8px 9px}.sceneToolbarHint{display:none}.diagramIntro{padding:10px 12px 9px}.diagramIntro span{font-size:calc(10.5px * var(--ol-font-scale, 1))}.diagramScroll{padding:5px 5px 14px}body.easyMode .scene{min-height:400px;flex:0 0 400px}.selectionInfo{font-size:calc(11.4px * var(--ol-font-scale, 1))}.scene.diagramMode .sceneFooter{bottom:5px;left:6px;right:6px}.scene.diagramMode .legend span{font-size:calc(9px * var(--ol-font-scale, 1))}}
@media(prefers-reduced-motion:reduce){.diagramEdge.flow{animation:none}}


/* v8.8 — Pulido final del espacio de aprendizaje y adaptación móvil */
body.easyMode.learningStarted .appMission{display:none!important}
body.easyMode.learningStarted .guideCredit,body.easyMode.learningStarted .guideMicroHelp{display:none!important}
body.easyMode.learningStarted .guideTop{padding:12px 18px;gap:7px}
body.easyMode.learningStarted .guideHeading h2{font-size:clamp(21px,1.8vw,26px)}
body.easyMode.learningStarted .guideHeading p{font-size:calc(13px * var(--ol-font-scale, 1));line-height:1.4}
body.easyMode.learningStarted .guideTip{font-size:calc(12px * var(--ol-font-scale, 1));padding:9px 11px}
.scene.diagramMode .sceneFooter{display:none!important}
.diagramPanel:focus-within{outline:none}
@media(max-width:650px){.top{width:100%;min-width:0}.top .brand{width:100%;max-width:100%;min-width:0;flex:1 1 100%}.brand>div:last-child{min-width:0;flex:1 1 0}.brand small{font-size:calc(8.5px * var(--ol-font-scale, 1));letter-spacing:.1px;line-height:1.3;overflow-wrap:break-word;white-space:normal}.brand b{font-size:calc(19px * var(--ol-font-scale, 1))}.headRight,.authorVersion,.authorLinks{max-width:100%}body.easyMode.learningStarted .guideTop{padding:11px 13px}body.easyMode.learningStarted .guideHeading h2{font-size:calc(21px * var(--ol-font-scale, 1))}body.easyMode.learningStarted .guideTip{font-size:calc(11.5px * var(--ol-font-scale, 1))}}

/* La guía se desplaza con el contenido para no bloquear la barra de vistas 3D / 2D. */
body.easyMode .guideTop{position:relative!important;top:auto!important;z-index:auto!important}

/* ObjectLab 8.2 · pie editorial y atlas curricular */
html,body{height:auto;min-height:100%;overflow-x:hidden}
.shell{height:auto;min-height:100vh}
.layout{flex:1 1 auto;min-height:720px}
body.easyMode .layout{min-height:0;flex:1 0 auto}
body.easyMode .main{overflow:visible;min-height:0}
body.easyMode .scene{min-height:clamp(350px,49vh,610px)}
.authorLinks button.atlasHeaderBtn,.atlasInlineBtn{font:800 11px ui-sans-serif,system-ui,sans-serif;border:1px solid #7661bc;background:linear-gradient(180deg,#8070cd,#6754b5);color:#fff;border-radius:999px;padding:8px 13px;cursor:pointer;box-shadow:0 8px 18px #6955b329}
.atlasInlineBtn{align-self:center;flex:0 0 auto;border-color:#dcd5f5;background:#f7f4ff;color:#6753ae;box-shadow:none}
.authorLinks button.atlasHeaderBtn:hover,.atlasInlineBtn:hover{filter:brightness(.97);transform:translateY(-1px)}
.siteFooter{margin-top:auto;display:block;background:linear-gradient(160deg,#252c47 0%,#303455 60%,#3c3565 100%);color:#e9eaf7;padding:32px max(22px,calc((100vw - 1330px)/2)) 0;box-shadow:0 -10px 38px #1f2d4b13;border-top:3px solid #7664be}
.siteFooter a{color:#eae6ff;text-decoration:none;text-underline-offset:3px}.siteFooter a:hover{text-decoration:underline;color:#fff}
.footerLead{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:22px;border-bottom:1px solid #ffffff26}
.footerSignature{display:flex;align-items:center;gap:13px}.footerMonogram{display:grid;place-items:center;width:51px;height:51px;border:1px solid #b9abf4a0;background:#ffffff17;border-radius:15px;color:#fff;font-size:calc(21px * var(--ol-font-scale, 1));font-weight:850}
.footerSignature strong{font-size:calc(20px * var(--ol-font-scale, 1));letter-spacing:-.4px}.footerSignature strong span{font-size:calc(12px * var(--ol-font-scale, 1));color:#c3b7ef;margin-left:5px}.footerSignature p{font-size:calc(12px * var(--ol-font-scale, 1));color:#c9cee5;margin:6px 0 0;line-height:1.45}
.footerAudience{font-size:calc(12px * var(--ol-font-scale, 1));color:#c8cce1;line-height:1.6;text-align:right}.footerAudience b{color:#fff}
.footerColumns{display:grid;grid-template-columns:1.08fr 1.08fr 1fr 1.08fr;gap:32px;padding:25px 0 28px}
.footerColumns h3{font-size:calc(12px * var(--ol-font-scale, 1));color:#fff;letter-spacing:.2px;margin:0 0 12px;font-weight:850}.footerColumns p,.footerColumns nav{margin:0 0 11px;font-size:calc(11.7px * var(--ol-font-scale, 1));line-height:1.7;color:#cbd0e3}.footerColumns nav{display:grid;gap:8px}.footerColumns nav a{display:inline-block;padding:2px 0}
.footerColumns .footerControl{cursor:pointer;color:#fff;background:#ffffff1a;border:1px solid #b5aae56f;border-radius:10px;padding:9px 12px;font-size:calc(11.4px * var(--ol-font-scale, 1));font-weight:790;text-align:left}.footerControl:hover{background:#ffffff2d}
.footerBottom{border-top:1px solid #ffffff24;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 19px;color:#c0c5dc;font-size:calc(10.6px * var(--ol-font-scale, 1));line-height:1.6}
.oopAtlasDialog{padding:0;border:1px solid #e2e6f3;border-radius:20px;box-shadow:0 35px 110px #131a3480;width:min(1120px,96vw);max-width:none;max-height:min(90vh,920px);color:#29344b;background:#fff;overflow:hidden}
.oopAtlasDialog::backdrop{background:rgba(14,20,38,.56);backdrop-filter:blur(4px)}
.atlasHead{display:flex;justify-content:space-between;align-items:flex-start;padding:23px 25px 16px;gap:20px;background:linear-gradient(160deg,#fcfbff,#f4f5fd);border-bottom:1px solid #e8ebf5}
.atlasEyebrow{font-size:calc(10px * var(--ol-font-scale, 1));color:#7865bd;font-weight:860;letter-spacing:1px}.atlasHead h2{font-size:calc(27px * var(--ol-font-scale, 1));letter-spacing:-.75px;margin:7px 0 8px}.atlasHead p{font-size:calc(12.5px * var(--ol-font-scale, 1));line-height:1.6;color:#6b7790;margin:0;max-width:750px}
.atlasClose{background:white;border:1px solid #e1e6f0;border-radius:12px;width:40px;height:40px;font-size:calc(19px * var(--ol-font-scale, 1));cursor:pointer;color:#65728a;flex:0 0 auto}.atlasClose:hover{background:#f6f4ff;color:#6d56b9}
.atlasToolbar{display:grid;grid-template-columns:1.7fr 1fr .85fr;gap:12px;align-items:end;padding:15px 25px;background:#fff;border-bottom:1px solid #edf0f6}
.atlasToolbar label{display:grid;gap:6px;color:#607086;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:800}.atlasToolbar input,.atlasToolbar select{width:100%;min-width:0;max-width:100%;background:#fbfcff;border:1px solid #dfe5f0;border-radius:10px;color:#34425c;padding:10px 11px;font-size:calc(12.6px * var(--ol-font-scale, 1))}
.atlasBody{display:grid;grid-template-columns:minmax(240px,37%) 1fr;min-height:370px;height:min(51vh,550px);overflow:hidden}
.atlasList{overflow-y:auto;background:#fafbfe;border-right:1px solid #e9edf5;padding:12px;display:grid;gap:5px;align-content:start;scrollbar-width:thin}
.atlasConcept{display:grid;gap:5px;background:#fff;border:1px solid #e9edf5;border-radius:11px;padding:11px 12px;text-align:left;cursor:pointer;color:#35435d}
.atlasConcept:hover{border-color:#baaee4;background:#fcfaff}.atlasConcept.selected{border-color:#8974cd;background:#f6f3ff;box-shadow:0 5px 14px #705bb50a}.atlasConcept strong{font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.25}.atlasConcept span{font-size:calc(10px * var(--ol-font-scale, 1));color:#7e899d}.atlasConcept i{font-style:normal;color:#6d59bb;font-weight:760}
.atlasDetail{overflow-y:auto;padding:24px 27px 25px;background:white}.atlasPills{display:flex;gap:7px;flex-wrap:wrap}.atlasPills span{background:#f5f2ff;color:#6756ab;border:1px solid #e8e1fa;border-radius:999px;font-size:calc(10px * var(--ol-font-scale, 1));font-weight:820;padding:5px 9px}.atlasDetail h3{font-size:calc(25px * var(--ol-font-scale, 1));line-height:1.2;letter-spacing:-.6px;margin:14px 0 12px}.atlasDetail .explanation{font-size:calc(15px * var(--ol-font-scale, 1));line-height:1.7;color:#45536b}.atlasDetail .subhead{font-size:calc(11px * var(--ol-font-scale, 1));color:#7c6ab6;letter-spacing:1px;font-weight:850;margin:22px 0 8px}.atlasDetail pre{background:#20283e;color:#e8edf7;border-radius:12px;padding:15px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.65 Consolas,monospace}.atlasNote{padding:12px 14px;background:#fff9ed;border-left:3px solid #dcb26e;border-radius:7px;font-size:calc(12px * var(--ol-font-scale, 1));color:#735d3c;line-height:1.65;margin:12px 0}.atlasExercise{padding:11px 14px;background:#f3fbf8;border-left:3px solid #6bbfac;border-radius:7px;color:#2d695f;font-size:calc(12px * var(--ol-font-scale, 1));margin:12px 0}.atlasJump{border:0;background:linear-gradient(150deg,#8070ce,#6957b8);color:#fff;font-weight:820;padding:11px 14px;border-radius:10px;cursor:pointer;margin-top:12px}.atlasNotSimulated{display:block;font-size:calc(11px * var(--ol-font-scale, 1));color:#8994a5;margin-top:12px}
.atlasFoot{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:11px 25px;background:#f7f9fd;color:#77839a;font-size:calc(11px * var(--ol-font-scale, 1));border-top:1px solid #e9edf5}.atlasEmpty{padding:30px 15px;color:#7f889b;font-size:calc(13px * var(--ol-font-scale, 1));text-align:center}
@media(max-width:1100px){.footerColumns{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.siteFooter{padding-left:24px;padding-right:24px}}
@media(max-width:660px){.siteFooter{padding:24px 18px 0}.footerLead{align-items:flex-start;flex-direction:column;gap:11px}.footerAudience{text-align:left}.footerColumns{grid-template-columns:1fr 1fr;gap:20px 15px}.footerBottom{align-items:flex-start;flex-direction:column;gap:4px}.atlasHead{padding:16px}.atlasHead h2{font-size:calc(21px * var(--ol-font-scale, 1))}.atlasHead p{font-size:calc(11.5px * var(--ol-font-scale, 1))}.atlasToolbar{padding:12px 16px;grid-template-columns:1fr 1fr}.atlasSearchLabel{grid-column:1/-1}.atlasBody{grid-template-columns:1fr;height:min(63vh,620px);grid-template-rows:minmax(145px,35%) 1fr}.atlasList{grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid #e9edf5;gap:6px;padding:10px}.atlasConcept{padding:9px}.atlasConcept strong{font-size:calc(11px * var(--ol-font-scale, 1))}.atlasDetail{padding:16px}.atlasDetail h3{font-size:calc(20px * var(--ol-font-scale, 1))}.atlasDetail .explanation{font-size:calc(13px * var(--ol-font-scale, 1))}.atlasFoot{font-size:calc(10px * var(--ol-font-scale, 1));padding:10px 14px;align-items:flex-start;flex-direction:column;gap:2px}}
@media(max-width:400px){.footerColumns{grid-template-columns:1fr}.atlasList{grid-template-columns:1fr}}

/* v8.8: anatomía de clase y accesos */
.classAnatomy[hidden]{display:none!important}
.classAnatomy{background:linear-gradient(155deg,#fff,#fbfaff);border:1px solid #e5def7;border-radius:18px;padding:14px 16px;box-shadow:0 14px 34px #6f60aa10;flex:0 0 auto}
.anatomyHead{display:flex;justify-content:space-between;gap:14px;align-items:start;margin-bottom:10px}.anatomyOverline{color:#7c67ba;font-size:calc(9px * var(--ol-font-scale, 1));letter-spacing:1.2px;font-weight:900}.anatomyHead h3{font-size:calc(18px * var(--ol-font-scale, 1));margin:3px 0;color:#403462}.anatomyHead p{font-size:calc(12.5px * var(--ol-font-scale, 1));line-height:1.5;color:#66728a;margin:2px 0;max-width:720px}.anatomyHead code{font:800 17px Consolas,monospace}.anatomyTag{white-space:nowrap;color:#7661bc;background:#f0edfb;border:1px solid #e4dcf8;padding:6px 9px;border-radius:20px;font-size:calc(10px * var(--ol-font-scale, 1));font-weight:850}
.anatomyGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.anatomyPart{padding:12px 14px;border:1px solid #e4e7f1;border-radius:14px;background:#fff;display:grid;gap:6px}.anatomyProperties{border-top:3px solid #7e69c4}.anatomyMethods{border-top:3px solid #328f8c}.anatomyType{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:3px}.anatomyType strong{font-size:calc(12px * var(--ol-font-scale, 1));color:#2f3d5d;letter-spacing:.25px}.anatomyType>span:last-child{color:#788398;font-size:calc(10.5px * var(--ol-font-scale, 1))}.anatomyIcon{color:#6755a8;background:#f1edfa;font:800 14px Consolas,monospace;padding:4px 7px;border-radius:7px}.anatomyMethods .anatomyIcon{color:#227b72;background:#eaf7f4}.anatomyPart>code{display:block;font:11.5px/1.4 Consolas,monospace;color:#34415a;background:#f7f8fc;border:1px solid #e9edf5;border-radius:7px;padding:7px 9px;white-space:normal;overflow-wrap:anywhere}.anatomyPart p{font-size:calc(11.2px * var(--ol-font-scale, 1));line-height:1.45;color:#69768b;margin:4px 0 0}
.accessExplainer{margin-top:10px;border:1px solid #e5e9f2;border-radius:12px;background:#fafbff}.accessExplainer>summary{cursor:pointer;padding:11px 13px;color:#5e4e9a;font-size:calc(12px * var(--ol-font-scale, 1));font-weight:800;line-height:1.4}.accessExplainer[open]{padding-bottom:13px}.accessExplainer>p,.accessExplainer>small{display:block;margin:5px 14px 9px;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.6;color:#69768e}.accessExplainer>small{margin-top:10px}.accessExperiment{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 14px}.accessExperiment label{display:grid;gap:6px;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:780;color:#61718c}.accessExperiment select{background:#fff;color:#374563;border:1px solid #dfe5f2;border-radius:9px;padding:10px;font-size:calc(12px * var(--ol-font-scale, 1));max-width:100%}.accessAnswer{margin:10px 14px;padding:11px 12px;border-radius:10px;background:#fff;border:1px solid #e1e8f1;display:grid;gap:5px;font-size:calc(11.5px * var(--ol-font-scale, 1));line-height:1.5;color:#526079}.accessAnswer strong.allowed{color:#218269}.accessAnswer strong.denied{color:#ad674c}.accessQuick{margin:10px 14px;background:#f4f6fb;border-radius:10px;padding:11px 12px;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.6;color:#69748b}.accessQuick strong{display:block;color:#394964;margin-bottom:5px}.accessQuick span{display:block}.accessAtlas{margin:2px 14px;background:#6d59b3;color:#fff;border:0;border-radius:9px;padding:10px 13px;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:850;cursor:pointer}
.inspectGroup{margin:10px 0;padding:10px;border:1px solid #e7eaf2;border-radius:10px;background:#fff;display:grid;gap:5px}.inspectGroup>strong{font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:.4px;color:#6855ac}.inspectGroup>div{font-size:calc(11px * var(--ol-font-scale, 1));color:#33435c}.inspectGroup>small{font-size:calc(10px * var(--ol-font-scale, 1));line-height:1.45;color:#8390a5}.inspectAccess{margin:10px 0;line-height:1.5;font-size:calc(10.9px * var(--ol-font-scale, 1))}.inspectAccess button{border:0;background:transparent;color:#6752ae;font-size:calc(11px * var(--ol-font-scale, 1));text-decoration:underline;cursor:pointer;font-weight:850;padding:0}
.diagramNode .nodeSectionLabel{font-size:calc(9px * var(--ol-font-scale, 1));fill:#6d58a8;font-weight:850;letter-spacing:.5px;text-anchor:middle}.diagramNode .nodeSectionValue{font-size:calc(10px * var(--ol-font-scale, 1));fill:#314260;font-weight:750;text-anchor:middle}
body.easyMode .classAnatomy{display:block}body:not(.easyMode) .classAnatomy{display:none!important}
@media(max-width:720px){.anatomyGrid,.accessExperiment{grid-template-columns:1fr}.classAnatomy{padding:12px}.anatomyHead{gap:8px}.anatomyTag{font-size:calc(9px * var(--ol-font-scale, 1));padding:5px 7px}.anatomyPart{padding:10px}.anatomyHead h3{font-size:calc(16px * var(--ol-font-scale, 1))}.anatomyType>span:last-child{font-size:calc(10px * var(--ol-font-scale, 1))}}

/* v8.8: controles superiores y mapa visual de visibilidad */
.guideMetaRight{display:flex;align-items:center;gap:13px;flex-wrap:wrap;justify-content:flex-end}
.guideTopNav{display:flex;gap:6px;padding:3px;border:1px solid #e8e5f3;border-radius:11px;background:#faf9ff;box-shadow:0 4px 12px #695ca308}
.guideTopNav button{border:1px solid transparent;background:#fff;color:#665c8a;font:750 11px ui-sans-serif,system-ui,sans-serif;padding:7px 10px;border-radius:8px;cursor:pointer;transition:background .16s,transform .16s}
.guideTopNav button:last-child{background:#f1edfc;color:#604fa9}
.guideTopNav button:hover:not(:disabled){border-color:#d7cbef;background:#eee8ff;transform:translateY(-1px)}
.guideTopNav button:disabled{opacity:.34;cursor:not-allowed}
.guideTopNav button:focus-visible,.accessMapCase:focus-visible{outline:3px solid #b6a7e9;outline-offset:2px}
.accessVisual{margin:12px 14px 14px;border:1px solid #e5eaf2;border-radius:14px;background:linear-gradient(180deg,#fff,#f8faff);padding:12px 12px 14px}
.accessMapHeader{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.accessMapHeader>div{display:grid;gap:3px}
.accessMapHeader strong{color:#34415d;font-size:calc(12px * var(--ol-font-scale, 1))}
.accessMapHeader span{font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.5;color:#67758c}
.accessMapHeader code{color:#7661bb;font-size:calc(10.5px * var(--ol-font-scale, 1));font-weight:700}
.accessMapLegend{white-space:nowrap;font-size:calc(10px * var(--ol-font-scale, 1))!important;color:#617085}
.accessMapLegend b{color:#238e77;margin-left:4px}.accessMapLegend i{color:#c26766;margin-left:7px;font-style:normal}
.accessMapOwner{text-align:center;margin:13px 0 0;color:#5e4caa;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:750}
.accessMapOwner span{padding:7px 13px;border:1px solid #ded8f5;border-radius:11px;background:#f6f3ff;box-shadow:0 4px 10px #65539a0a}
.accessMapLines{display:block;width:100%;height:70px;margin-top:1px;overflow:visible}
.accessMapCases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.accessMapCase{min-width:0;padding:8px 5px 9px;text-align:center;background:#fff;border:1px solid #dde5f0;border-radius:11px;display:grid;gap:4px;justify-items:center;cursor:pointer;transition:border .15s,box-shadow .15s,transform .15s}
.accessMapCase:hover{transform:translateY(-2px)}
.accessMapCase.selected{outline:2px solid #8973cf;outline-offset:1px;box-shadow:0 7px 18px #6e5ca01a}
.accessMapCase.allowed{background:#f1fbf7;border-color:#bde8d9}
.accessMapCase.denied{background:#fff7f7;border-color:#f2d2d1}
.accessMapCase small{font-size:calc(8px * var(--ol-font-scale, 1));letter-spacing:.2px;font-weight:800;color:#738099}
.accessMapCase strong{font-size:calc(11px * var(--ol-font-scale, 1));color:#21856a}
.accessMapCase.denied strong{color:#b35e61}
.accessMapCase span{font-size:calc(9.5px * var(--ol-font-scale, 1));line-height:1.35;color:#63728b}
.accessMapCaveat{font-size:calc(10px * var(--ol-font-scale, 1));color:#78849a;line-height:1.55;margin:11px 0 0}
.atlasSolution{margin:8px 0 0;border-top:1px solid #cfe9df;padding-top:7px}
.atlasSolution summary{cursor:pointer;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:800;color:#2b7867}
.atlasSolution p{color:#435f58;font-size:calc(11.5px * var(--ol-font-scale, 1));line-height:1.55;margin:8px 0 0}
@media(max-width:730px){.guideMeta{align-items:flex-start;gap:5px}.guideMetaRight{gap:6px}.guideTopNav button{font-size:calc(10.5px * var(--ol-font-scale, 1));padding:6px 8px}.accessMapCases{grid-template-columns:repeat(2,minmax(0,1fr))}.accessMapCase:first-child{grid-column:1/-1}.accessMapLines{display:none}.accessMapHeader{flex-direction:column}.guideTopNav button span{display:none}}

/* v8.8 pedagogía visual: lectura sincronizada con cada estado de la escena */
.guideMeaning{display:none;flex-direction:column;gap:10px;flex:0 0 auto;padding:14px 17px;border-radius:16px;border:1px solid #e4e9f3;background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);box-shadow:0 14px 34px #2e415d0c}
body.easyMode .guideMeaning{display:flex}
.guideMeaningHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.guideMeaningEyebrow{font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:1px;font-weight:900;color:#7d6dbc}
.meaningStep{font-size:calc(10px * var(--ol-font-scale, 1));font-weight:800;color:#728099}
.guideStateRibbon{display:grid;grid-template-columns:1fr auto 1fr;gap:11px;align-items:stretch;padding:9px;border-radius:12px;border:1px solid #e8ebf2;background:#fbfcfe}
.guideStateRibbon>span:not(.ribbonArrow){display:grid;gap:4px;padding:8px 10px;border-radius:10px;min-width:0}
.guideStateRibbon small{font-size:calc(9.4px * var(--ol-font-scale, 1));font-weight:850;letter-spacing:.8px;color:#8894a7}
.guideStateRibbon b{font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.45;color:#495872;font-weight:800}
.guideStateRibbon .ribbonBefore{background:#f4f6fa}
.guideStateRibbon .ribbonAfter{background:#f1fbf8;border:1px solid #d9efe7}
.guideStateRibbon .ribbonAfter b{color:#28756a}
.guideStateRibbon .ribbonArrow{display:grid;place-items:center;font-size:calc(19px * var(--ol-font-scale, 1));font-weight:900;color:#8771c8}
.guideStateRibbon.newTopic .ribbonBefore{background:#f4f0ff}
.guideMeaningGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.meaningCard{display:flex;gap:10px;border-radius:12px;border:1px solid #e9edf4;background:#fff;padding:12px 12px 13px;min-width:0}
.meaningIcon{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:#f0edfc;color:#6c57b3;flex-shrink:0;font-size:calc(17px * var(--ol-font-scale, 1));font-weight:900}
.meaningCard:nth-child(2) .meaningIcon{background:#fff3e9;color:#bd784e}
.meaningCard:nth-child(3) .meaningIcon{background:#e8f8f3;color:#268775}
.meaningCard h3{font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.4;color:#3b4861;letter-spacing:0;margin:1px 0 6px;font-weight:870}
.meaningCard p{margin:0;font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.55;color:#627088}
.guideMeaning.changed{animation:meaningAppear .35s ease-out both}
@keyframes meaningAppear{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
body.easyMode .guideTop{position:relative;top:auto}
body.easyMode .guideBottom{position:sticky;bottom:0;z-index:20}
body.easyMode .scene{min-height:clamp(330px,48vh,610px)}
@media(max-width:860px){.guideMeaningGrid{grid-template-columns:1fr}.meaningCard{padding:10px}.meaningCard h3{margin-bottom:3px}.guideMeaning{padding:12px}.guideStateRibbon{gap:6px}}
@media(max-width:630px){.guideMeaning{gap:8px}.guideStateRibbon b{font-size:calc(11px * var(--ol-font-scale, 1))}.guideStateRibbon>span:not(.ribbonArrow){padding:7px}.guideStateRibbon .ribbonArrow{font-size:calc(15px * var(--ol-font-scale, 1))}.meaningCard p{font-size:calc(11.5px * var(--ol-font-scale, 1))}.meaningCard h3{font-size:calc(11.7px * var(--ol-font-scale, 1))}body.easyMode .scene{flex:0 0 360px;min-height:360px}}
@media(prefers-reduced-motion:reduce){.guideMeaning.changed{animation:none}}

/* Ajuste v8.8 — escena visible antes; flechas y cambios legibles en móviles */
.guideStateCue{display:flex;align-items:center;gap:13px;padding:10px 12px;border:1px solid #e3e2f5;border-radius:12px;background:#f7f5ff;font-size:calc(12.4px * var(--ol-font-scale, 1));line-height:1.45;color:#53627b}
.guideStateCue strong{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-size:calc(10.5px * var(--ol-font-scale, 1));letter-spacing:.35px;color:#7459b6}
.guideStateCue strong span{font-size:calc(18px * var(--ol-font-scale, 1))}
body.easyMode .guideTop{padding:13px 17px;gap:8px}
body.easyMode .guideMicroHelp{display:none!important}
body.easyMode .guideCredit{display:none!important} /* firma siempre visible en cabecera y pie */
body.easyMode .appMission{min-height:0;padding:9px 14px;gap:10px}
body.easyMode .appMission .missionMascot{height:62px;width:52px;flex-basis:52px}
body.easyMode .appMission .missionFoot{display:none}
body.easyMode .appMission h2{font-size:calc(17px * var(--ol-font-scale, 1))}
body.easyMode .appMission p{font-size:calc(10.9px * var(--ol-font-scale, 1))}
body.easyMode .scene{min-height:clamp(340px,52vh,640px)}
@media(max-width:700px){
 .top{padding:7px 9px;gap:6px;min-height:0;}
 .top .brand{gap:7px}.top .brand .logo{width:44px;height:44px;min-width:44px;min-height:44px;padding:2px}
 .top .brand b{font-size:calc(16px * var(--ol-font-scale, 1))}.top .brand small{font-size:calc(8px * var(--ol-font-scale, 1));line-height:1.2;letter-spacing:0}
 .top .experienceSwitch{margin:0;padding:3px}.top .experienceSwitch button{padding:7px 8px;font-size:calc(10.4px * var(--ol-font-scale, 1))}
 .top .headRight{gap:6px}
 .top .authorVersion{gap:7px}.top .authorBy{font-size:calc(10.3px * var(--ol-font-scale, 1))}.top .versionMark{padding:3px 8px;font-size:calc(10px * var(--ol-font-scale, 1))}
 .top .authorLinks{gap:5px}.top .authorLinks a{padding:5px 8px;font-size:calc(10px * var(--ol-font-scale, 1))}
 body.easyMode .appMission{display:none!important}
 body.easyMode .guideTop{padding:10px 12px;gap:7px}
 body.easyMode .guideHeading h2{font-size:calc(19px * var(--ol-font-scale, 1));line-height:1.22}
 body.easyMode .guideHeading p{font-size:calc(12.2px * var(--ol-font-scale, 1));line-height:1.38}
 body.easyMode .guideTip{display:none}
 .guideStateCue{display:grid;gap:4px;padding:7px 9px;font-size:calc(11.5px * var(--ol-font-scale, 1))}
 .guideStateCue strong{font-size:calc(9.6px * var(--ol-font-scale, 1))}
 body.easyMode .scene{flex:0 0 370px;min-height:370px}
 .guideMeaning{gap:7px}
}

/* ObjectLab v8.8 · precarga arquitectónica */
body.preloading{overflow:hidden}.appPreloader{position:fixed;inset:0;z-index:999999;display:flex;justify-content:center;align-items:center;padding:20px;background:radial-gradient(circle at 52% 34%,#fff 0%,#f5f5fc 48%,#e9ebf7 100%);color:#293450;isolation:isolate;transition:opacity .46s ease,visibility .46s ease}.appPreloader.leaving{opacity:0;visibility:hidden;pointer-events:none}.preloadGlow{position:absolute;inset:-30%;background:radial-gradient(ellipse at 48% 41%,#c7bcfa22,transparent 60%);pointer-events:none;animation:preBreath 4s ease-in-out infinite alternate}.preloadStage{position:relative;z-index:1;width:min(720px,100%);padding:clamp(22px,4vw,44px);border:1px solid #e2e4ef;border-radius:28px;background:#ffffffed;box-shadow:0 38px 100px #313b6733,0 1px #fff inset}.preloadBrand{display:flex;align-items:center;gap:23px}.preloadCharacter{width:94px;height:127px;object-fit:contain;object-position:bottom;flex:0 0 auto;filter:drop-shadow(0 14px 11px #293c6740);animation:preFloat 2.7s ease-in-out infinite}.preloadEyebrow{font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:2px;color:#7b69bc;font-weight:850}.preloadBrand h1{margin:9px 0 4px;font-size:clamp(32px,5vw,50px);letter-spacing:-2px;color:#222f49}.preloadBrand h1 em{font-style:normal;color:#775fc2}.preloadBrand p{margin:0;font-size:calc(14px * var(--ol-font-scale, 1));line-height:1.5;color:#74819a}.preloadLearning{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:32px 0 25px}.preloadNode{flex:1;min-width:0;min-height:115px;border-radius:16px;border:1px solid #e6e9f3;background:linear-gradient(170deg,#fff,#f7f9fe);padding:16px 13px;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:center;box-shadow:0 11px 25px #47577f10}.preloadNode>span{font-size:calc(9px * var(--ol-font-scale, 1));font-weight:870;color:#858da3;letter-spacing:1.1px}.preloadNode strong{font-size:calc(13px * var(--ol-font-scale, 1));color:#3d4e6b}.preloadNode small{font-size:calc(10px * var(--ol-font-scale, 1));color:#8995a8}.preloadClass{border-color:#d9cfef;box-shadow:inset 0 3px #8e79cd,0 11px 25px #6a56b010}.preloadObject{border-color:#cee9e1;box-shadow:inset 0 3px #48a99e,0 11px 25px #279d9410}.preloadMethod{border-color:#dbdef1;box-shadow:inset 0 3px #5b79ad,0 11px 25px #587da010}.preloadOrb{width:29px;height:29px;margin:0 auto;border-radius:50%;background:radial-gradient(circle at 31% 27%,#eafff7 2%,#68c5ae 37%,#1f9186 70%,#16605e 100%);box-shadow:inset -5px -5px 8px #16676244,0 6px 12px #2d908655;animation:preOrb 2.5s ease-in-out infinite}.preloadRoute{width:36px;min-width:20px;position:relative;height:20px;display:flex;align-items:center;justify-content:center;color:#9588ba}.preloadRoute:before{content:'';height:1px;position:absolute;left:0;right:0;background:#aa9acc}.preloadArrow{position:absolute;right:-1px;top:-3px;font-size:calc(16px * var(--ol-font-scale, 1))}.preloadTravel{position:absolute;z-index:1;left:0;width:8px;height:8px;border-radius:50%;background:#775ec1;box-shadow:0 0 0 4px #7d68c821;animation:preTravel 2s linear infinite}.preloadProgress{height:6px;border-radius:99px;background:#eef0f7;overflow:hidden}.preloadProgressFill{height:100%;display:block;width:38%;background:linear-gradient(90deg,#8873d0,#4caeaa,#8873d0);background-size:200% 100%;animation:preShimmer 1.5s linear infinite,preProgress 2.8s ease-in-out infinite;border-radius:99px}.preloadBottom{display:flex;justify-content:space-between;align-items:center;gap:13px;margin-top:19px}.preloadBottom>div{display:flex;flex-direction:column;gap:3px}.preloadBottom strong{font-size:calc(12px * var(--ol-font-scale, 1));color:#48556f}.preloadBottom small{font-size:calc(10px * var(--ol-font-scale, 1));color:#8f9bb0}.preloadBottom button{border:1px solid #dad2ef;border-radius:11px;color:#6654b2;background:#f7f4ff;padding:11px 15px;font-size:calc(12px * var(--ol-font-scale, 1));font-weight:820;cursor:pointer}.preloadBottom button:hover{background:#eee9ff}.preloadAuthor{margin-top:25px;font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:.3px;color:#98a0b1;text-align:center}.preloadAuthor b{color:#6c5aae}@keyframes preBreath{to{transform:scale(1.12) rotate(7deg)}}@keyframes preFloat{50%{transform:translateY(-5px)}}@keyframes preOrb{50%{transform:scale(1.08)}}@keyframes preTravel{from{left:0}to{left:calc(100% - 8px)}}@keyframes preShimmer{to{background-position:-200% 0}}@keyframes preProgress{50%{width:70%}}
/* Module: GoF design patterns */
.patternsHeaderBtn,.patternsInlineBtn{cursor:pointer;border:1px solid #d9cef4;background:#f4efff;color:#6550ad;border-radius:999px;padding:8px 13px;font-weight:850;font-size:calc(11px * var(--ol-font-scale, 1));white-space:nowrap}.patternsHeaderBtn:hover,.patternsInlineBtn:hover{background:#eae2ff}.patternsInlineBtn{border-radius:10px}.footerPatternBtn{border-color:#b1a6da!important;color:#fff!important;background:#ffffff16!important}.patternsDialog{padding:0;border:1px solid #dedeea;border-radius:24px;box-shadow:0 38px 110px #10162e85;width:min(1240px,97vw);max-width:none;max-height:min(94dvh,1000px);height:min(91dvh,920px);color:#283651;background:#fbfcff;overflow:hidden}.patternsDialog::backdrop{background:rgba(16,22,43,.62);backdrop-filter:blur(5px)}.patternsDialog[open]{display:flex;flex-direction:column}.patternsTop{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:21px 26px 15px;background:radial-gradient(circle at 85% -60%,#ded7fa 0%,transparent 48%),linear-gradient(180deg,#fff,#f7f7fc);border-bottom:1px solid #e5e6f0}.patternsKicker{font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:1.6px;color:#7d6cbd;font-weight:900}.patternsTop h2{font-size:clamp(23px,3vw,32px);line-height:1.15;letter-spacing:-1px;margin:7px 0;color:#26354d}.patternsTop h2 span{font-size:calc(12px * var(--ol-font-scale, 1));letter-spacing:0;color:#6957b5;background:#efeafd;border:1px solid #e0d8fa;padding:6px 9px;border-radius:999px;vertical-align:middle}.patternsTop p{max-width:860px;margin:0;font-size:calc(12.8px * var(--ol-font-scale, 1));line-height:1.6;color:#68758d}.patternsClose{border:1px solid #dfe3ed;background:#fff;color:#6c778b;cursor:pointer;border-radius:12px;width:42px;height:42px;flex-shrink:0;font-size:calc(17px * var(--ol-font-scale, 1))}.patternsClose:hover{background:#f2eefc;color:#6c58b7}.patternsIntro{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:12px 26px;background:#fff;border-bottom:1px solid #ebedf5}.patternsIntro>span:not(.patternsIntroHint){font-size:calc(11px * var(--ol-font-scale, 1));font-weight:790;color:#617088;background:#f8f9fd;border:1px solid #e8eaf4;padding:8px 11px;border-radius:10px}.patternsIntro b{color:#765fb9}.patternsIntro small{color:#a2abc0}.patternsIntroHint{margin-left:auto;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.45;color:#738198}.patternsFilters{display:flex;gap:13px;flex-wrap:wrap;align-items:end;padding:13px 24px;background:#fafbff;border-bottom:1px solid #e6e9f2}.patternsFilters label{display:grid;gap:5px;font-size:calc(10.5px * var(--ol-font-scale, 1));font-weight:830;color:#75819a}.patternsFilters label:first-child{min-width:240px;flex:1}.patternsFilters input,.patternsFilters select{width:100%;min-height:38px;border:1px solid #dfe3ef;border-radius:10px;background:#fff;padding:8px 10px;font-size:calc(12px * var(--ol-font-scale, 1));color:#3b4861}.patternsBody{display:grid;grid-template-columns:272px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}.patternsRail{overflow:auto;background:#f8f9fd;padding:13px 11px;border-right:1px solid #e4e8f1;scrollbar-width:thin}.patternListItem{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:none;border:1px solid transparent;border-radius:12px;padding:11px 12px;cursor:pointer;color:#61708b;margin-bottom:3px}.patternListItem b{font-size:calc(11.9px * var(--ol-font-scale, 1));line-height:1.35;display:block}.patternListItem small{font-size:calc(9.7px * var(--ol-font-scale, 1));display:block;margin-top:3px;color:#919bb0}.patternListItem i{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:#8e7ccb}.patternListItem[data-group="Estructurales"] i{background:#35a398}.patternListItem[data-group="Comportamiento"] i{background:#567fae}.patternListItem.selected{background:#efebfc;border-color:#ddd4f5;color:#5946a2;box-shadow:0 5px 12px #6c56b00b}.patternListItem:hover{background:#f1eefb}.patternsContent{overflow:auto;padding:20px 24px 27px;min-width:0;scrollbar-width:thin}.patternsEmpty{text-align:center;padding:32px 12px;color:#71819a;font-size:calc(13px * var(--ol-font-scale, 1))}.patternDetailHeader{display:flex;align-items:start;justify-content:space-between;gap:12px}.patternEyebrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:7px}.patternTag{font-size:calc(10px * var(--ol-font-scale, 1));font-weight:820;color:#6555aa;padding:5px 8px;border-radius:8px;background:#f0eaff;border:1px solid #e3dcf6}.patternTag.structure{background:#eafbfa;border-color:#d1eeea;color:#2b847e}.patternTag.behavior{background:#eef4fd;border-color:#dce7fa;color:#43719c}.patternTag.stepTag{background:#f8f9fb;border-color:#e9edf4;color:#8792a5}.patternDetailHeader h3{margin:0;font-size:clamp(24px,3vw,34px);letter-spacing:-1.1px;color:#263851}.patternDetailHeader .pSubtitle{font-size:calc(13px * var(--ol-font-scale, 1));color:#61708a;line-height:1.62;margin:9px 0 4px;max-width:780px}.patternAnalogy{font-size:calc(11.5px * var(--ol-font-scale, 1));color:#6f7c91;line-height:1.55;border-left:3px solid #b4a3e5;padding:7px 12px;background:#f9f7ff;margin:12px 0 15px;border-radius:0 10px 10px 0}.patternAdvice{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 17px}.patternAdvice article{padding:12px 13px;border-radius:12px;border:1px solid #e3eaf2;background:#fff}.patternAdvice article:first-child{border-color:#d4e8e0;background:#f7fbf9}.patternAdvice article:nth-child(2){border-color:#f0dfcf;background:#fffaf5}.patternAdvice strong{font-size:calc(11px * var(--ol-font-scale, 1));color:#455570}.patternAdvice p{font-size:calc(11.7px * var(--ol-font-scale, 1));color:#687990;line-height:1.6;margin:5px 0 0}.patternSectionHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 8px}.patternSectionHead h4{font-size:calc(11px * var(--ol-font-scale, 1));letter-spacing:1px;color:#72819c;margin:0;text-transform:uppercase}.patternSectionHead small{font-size:calc(10px * var(--ol-font-scale, 1));color:#9aa4b6}.patternFlow{display:flex;align-items:stretch;gap:4px;padding:14px 12px;border:1px solid #e3e7f1;border-radius:16px;background:radial-gradient(circle at 25% 0%,#fff 0%,#f6f8fc 100%);min-height:157px}.patternNode{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;align-items:center;gap:7px;text-align:center;padding:13px 8px;background:#fff;border:1px solid #e1e5ef;border-top:4px solid #9683cd;border-radius:13px;box-shadow:0 9px 24px #26345110;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease,background .2s ease}.patternNode strong{font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.4;overflow-wrap:anywhere;color:#3b4b67}.patternNode small{font-size:calc(10px * var(--ol-font-scale, 1));color:#8390a5;line-height:1.45;overflow-wrap:anywhere}.patternNode.active{background:#f6f2ff;border-color:#ac9bdc;box-shadow:0 12px 22px #6555b028,0 0 0 3px #8a71bd10;transform:translateY(-2px)}.patternEdge{flex:0 0 75px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-width:0}.patternEdge .edgeArrow{display:flex;align-items:center;width:100%;color:#a19ab8;font-size:calc(17px * var(--ol-font-scale, 1))}.patternEdge .edgeArrow:before{content:'';height:2px;flex:1;background:#b3bdd0}.patternEdge .edgeArrow:after{content:'➤';font-size:calc(13px * var(--ol-font-scale, 1));margin-left:-1px}.patternEdge small{color:#8794a9;font-size:calc(9px * var(--ol-font-scale, 1));text-align:center;line-height:1.35}.patternEdge.active .edgeArrow:before{height:3px;background:linear-gradient(90deg,#8a71cb,#48ab9c,#8a71cb);background-size:200% 100%;animation:pEdgeFlow .8s linear infinite}.patternEdge.active .edgeArrow{color:#705abc}.patternEdge.active small{color:#624eac;font-weight:850}@keyframes pEdgeFlow{to{background-position:-200% 0}}.patternTransport{display:grid;gap:9px;margin:10px 0 15px;border:1px solid #e3e8f1;background:#fff;border-radius:13px;padding:12px 14px}.patternTransportTop{display:flex;align-items:center;justify-content:space-between;gap:10px}.patternStepIndex{font-size:calc(10px * var(--ol-font-scale, 1));font-weight:860;color:#7867af}.patternTransport p{font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.6;color:#485972;margin:0;min-height:37px}.patternControls{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:flex-end}.patternControls button{border:1px solid #dcdfe9;border-radius:9px;background:#fff;color:#566884;padding:8px 10px;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:820;cursor:pointer}.patternControls button.primary{background:#7460bd;border-color:#7460bd;color:#fff}.patternControls button:disabled{opacity:.42;cursor:not-allowed}.patternControls button:hover:not(:disabled){transform:translateY(-1px)}.patternCode pre{background:#252b40;color:#f0f2fa;border-radius:14px;border:1px solid #333a55;padding:16px 18px;font:12px/1.64 'Cascadia Code',Consolas,'Courier New',monospace;white-space:pre-wrap;overflow:auto;max-height:360px;margin:8px 0 14px}.patternCodeToolbar{display:flex;justify-content:space-between;align-items:center;gap:10px}.patternCodeToolbar button{font-size:calc(10px * var(--ol-font-scale, 1));font-weight:850;border:1px solid #d8ddeb;background:#fff;color:#6b59b5;border-radius:8px;padding:7px 10px;cursor:pointer}.patternChallenge{border:1px solid #dfe8e8;background:#f7fbfa;border-radius:14px;padding:13px 15px;font-size:calc(12px * var(--ol-font-scale, 1));color:#3d5558;line-height:1.6}.patternChallenge>strong{display:block;font-size:calc(11px * var(--ol-font-scale, 1));letter-spacing:.6px;color:#4f827b;margin-bottom:5px}.patternChallenge details{margin-top:8px;color:#3e6a62}.patternChallenge summary{cursor:pointer;font-weight:830;color:#3c8376}.patternsFooter{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px 23px;border-top:1px solid #e4e8f1;background:#fff;color:#8791a4;font-size:calc(10.9px * var(--ol-font-scale, 1))}.patternsFooter button{border:1px solid #ded7f1;border-radius:9px;color:#6755ae;background:#f7f4ff;padding:8px 10px;font-weight:840;font-size:calc(10.9px * var(--ol-font-scale, 1));cursor:pointer}
@media(max-width:920px){.patternsBody{grid-template-columns:218px minmax(0,1fr)}.patternsContent{padding:18px}.patternEdge{flex-basis:48px}.patternNode{padding:11px 6px}.patternsIntroHint{width:100%;margin-left:0}}
@media(max-width:650px){.preloadStage{padding:18px;border-radius:20px}.preloadBrand{gap:12px}.preloadCharacter{width:69px;height:98px}.preloadBrand h1{letter-spacing:-1px;font-size:calc(32px * var(--ol-font-scale, 1))}.preloadEyebrow{font-size:calc(8px * var(--ol-font-scale, 1));letter-spacing:1.2px}.preloadBrand p{font-size:calc(11.7px * var(--ol-font-scale, 1))}.preloadLearning{gap:4px;margin:25px 0 19px}.preloadNode{min-height:103px;padding:9px 5px}.preloadNode>span{font-size:calc(7px * var(--ol-font-scale, 1));letter-spacing:.3px}.preloadNode strong{font-size:calc(10px * var(--ol-font-scale, 1))}.preloadNode small{font-size:calc(8px * var(--ol-font-scale, 1))}.preloadRoute{width:16px;min-width:9px}.preloadBottom{align-items:stretch}.preloadBottom button{font-size:calc(10px * var(--ol-font-scale, 1));padding:9px 10px}.patternsDialog{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}.patternsTop{padding:13px 16px 10px}.patternsTop h2{font-size:calc(24px * var(--ol-font-scale, 1))}.patternsTop p{font-size:calc(11px * var(--ol-font-scale, 1))}.patternsIntro{padding:8px 12px;gap:5px}.patternsIntro>span:not(.patternsIntroHint){font-size:calc(9.4px * var(--ol-font-scale, 1));padding:6px}.patternsIntroHint{font-size:calc(9.8px * var(--ol-font-scale, 1))}.patternsFilters{padding:9px 12px;gap:7px}.patternsFilters label{font-size:calc(9px * var(--ol-font-scale, 1))}.patternsFilters label:first-child{flex-basis:100%}.patternsFilters label:not(:first-child){flex:1}.patternsFilters input,.patternsFilters select{min-height:34px;font-size:calc(11px * var(--ol-font-scale, 1))}.patternsBody{display:flex;flex-direction:column}.patternsRail{display:flex;flex:0 0 auto;max-height:85px;overflow-x:auto;overflow-y:hidden;gap:6px;padding:8px 10px;border-right:0;border-bottom:1px solid #e4e8f1}.patternListItem{width:140px;flex:0 0 140px;padding:9px;margin:0}.patternListItem b{font-size:calc(10.5px * var(--ol-font-scale, 1))}.patternListItem small{font-size:calc(8.5px * var(--ol-font-scale, 1))}.patternsContent{flex:1;min-height:0;overflow:auto;padding:13px}.patternDetailHeader h3{font-size:calc(24px * var(--ol-font-scale, 1))}.patternDetailHeader .pSubtitle{font-size:calc(11.6px * var(--ol-font-scale, 1))}.patternAdvice{grid-template-columns:1fr;gap:6px}.patternAdvice article{padding:9px 11px}.patternAdvice p{font-size:calc(10.7px * var(--ol-font-scale, 1))}.patternFlow{gap:3px;padding:8px 6px;min-height:113px}.patternNode{border-radius:9px;border-top-width:3px;padding:8px 3px}.patternNode strong{font-size:calc(9.3px * var(--ol-font-scale, 1))}.patternNode small{font-size:calc(8px * var(--ol-font-scale, 1))}.patternEdge{flex-basis:21px}.patternEdge small{font-size:calc(7px * var(--ol-font-scale, 1))}.patternTransport p{font-size:calc(11px * var(--ol-font-scale, 1))}.patternControls button{font-size:calc(10px * var(--ol-font-scale, 1));padding:8px}.patternCode pre{font-size:calc(10.3px * var(--ol-font-scale, 1));max-height:260px}.patternsFooter{padding:8px 12px;font-size:calc(9px * var(--ol-font-scale, 1))}.patternsFooter span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){.preloadGlow,.preloadCharacter,.preloadOrb,.preloadProgressFill,.preloadTravel,.patternEdge.active .edgeArrow:before{animation:none!important}.patternNode,.appPreloader{transition:none!important}}

@media(max-width:650px){.patternEdge small{display:none}.patternNode strong{font-size:calc(10.3px * var(--ol-font-scale, 1))}.patternNode small{font-size:calc(8.7px * var(--ol-font-scale, 1))}}


/* ObjectLab 3D v8.8 · selector multilenguaje y comparador */
.top{flex-wrap:wrap;gap:8px 17px}.headRight{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}.authorVersion,.authorLinks{justify-content:flex-end}
.languageControl{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#fff 0%,#f6f4fc 100%);border:1px solid #e4dcf6;border-radius:14px;padding:6px 8px;box-shadow:0 8px 18px #5f4ea70e}
.languageControl label{font-size:calc(9px * var(--ol-font-scale, 1));letter-spacing:.6px;font-weight:850;color:#8574ad;white-space:nowrap}
.languageControl select{min-height:34px;min-width:124px;border:1px solid #dcd6ed;background:#fff;border-radius:9px;padding:6px 9px;font-weight:800;color:#4f427f;font-size:calc(12px * var(--ol-font-scale, 1));cursor:pointer}
.languageControl button{min-height:34px;border:1px solid #d7c9f2;background:#f6f2ff;color:#6452a8;border-radius:9px;padding:7px 11px;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:820;white-space:nowrap}
.languageControl button:hover{background:#ece5ff}
.accessLangContext{padding:10px 12px;background:#fff9ed;border:1px solid #f1dfb5;border-radius:10px;font-size:calc(11.5px * var(--ol-font-scale, 1));line-height:1.6;color:#7b6236;margin:9px 0}.guideLangNote{margin-top:5px;width:100%;flex-basis:100%;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.55;color:#6e708a;background:#f9f8fd;border:1px solid #eeeaf7;border-radius:9px;padding:7px 10px}
.compareDialog{position:fixed;inset:0;margin:auto;border:1px solid #ddd7f1;border-radius:22px;padding:0;width:min(1120px,95vw);max-width:95vw;max-height:93dvh;box-shadow:0 40px 100px #22284666;color:#26324e;background:#fdfdff;overflow:auto}
.compareDialog::backdrop{background:#111a32a0;backdrop-filter:blur(5px)}
.compareHead{display:flex;justify-content:space-between;gap:12px;padding:22px 26px 16px;background:linear-gradient(115deg,#fff,#f0ecff);border-bottom:1px solid #e6e2f2}
.compareEyebrow{color:#7762bd;font-weight:850;letter-spacing:1.2px;font-size:calc(10px * var(--ol-font-scale, 1))}.compareHead h2{margin:7px 0;font-size:clamp(21px,3vw,29px);line-height:1.18}.compareHead p{margin:0;color:#73809a;font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.55}
.compareHead button{border:1px solid #e0def0;border-radius:10px;background:#fff;color:#67728a;font-size:calc(22px * var(--ol-font-scale, 1));min-width:40px;height:40px;cursor:pointer}
.compareTools{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 26px;flex-wrap:wrap;border-bottom:1px solid #eaedf4}
.compareTools label{color:#68758c;font-size:calc(12px * var(--ol-font-scale, 1));font-weight:850;display:flex;align-items:center;gap:12px}.compareTools select{font-size:calc(12px * var(--ol-font-scale, 1));max-width:min(450px,70vw);border:1px solid #dce2ef;border-radius:10px;background:#fff;padding:10px 12px;color:#394562;font-weight:740}
.compareHint{font-size:calc(11px * var(--ol-font-scale, 1));color:#858da0}
.compareColumns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:17px 26px}
.compareColumns section{min-width:0;border:1px solid #e1e6ee;border-radius:15px;overflow:hidden;background:#20293b;box-shadow:0 12px 23px #26334e13}
.compareColHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:#f5f7fd;border-bottom:1px solid #e3e8f1;color:#39445e}
.compareColHead strong{font-size:calc(13px * var(--ol-font-scale, 1))}.compareColHead button{padding:7px 10px;background:#fff;color:#6e5bb5;border:1px solid #e0d9f4;border-radius:9px;font-size:calc(10px * var(--ol-font-scale, 1));font-weight:800;cursor:pointer}
.compareColumns pre{margin:0;padding:17px 16px;white-space:pre;overflow:auto;font:12px/1.65 Consolas,'SFMono-Regular',monospace;color:#ecf2ff;max-height:44dvh;min-height:255px;tab-size:4}
.compareExplanation{margin:0 26px 18px;padding:12px 14px;border-radius:12px;background:#f2f8f7;border:1px solid #d9eae6;color:#436b65;font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.6}
.compareBottom{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 26px 19px;color:#7d879a;font-size:calc(11px * var(--ol-font-scale, 1))}.compareBottom button{border:0;border-radius:10px;background:#7661bc;color:#fff;font-weight:830;padding:11px 14px;cursor:pointer}
@media(max-width:1120px){.languageControl{order:3}.headRight{order:4}}
@media(max-width:680px){.headRight{justify-content:flex-start;align-items:flex-start}.authorVersion,.authorLinks{justify-content:flex-start}.languageControl{order:2;width:100%;justify-content:space-between;padding:6px}.languageControl select{flex:1;min-width:0}.headRight{order:3}.compareDialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.compareHead{padding:16px}.compareTools{padding:12px 16px}.compareColumns{grid-template-columns:1fr;padding:12px 16px;gap:12px}.compareColumns pre{min-height:160px;max-height:26dvh;font-size:calc(11.5px * var(--ol-font-scale, 1))}.compareExplanation{margin:0 16px 12px}.compareBottom{padding:12px 16px;flex-wrap:wrap}.compareBottom button{width:100%}.guideLangNote{font-size:calc(10.4px * var(--ol-font-scale, 1))}}
@media(prefers-reduced-motion:reduce){.languageControl button,.compareDialog *{animation:none!important;transition:none!important}}

/* ObjectLab 3D v8.8 · protected PHP edition */
.secureExit{display:flex;align-items:center;margin:0}.secureExit input{display:none}.secureExit button{border:1px solid #e4dff3;background:#fff;color:#7262a4;border-radius:999px;padding:8px 11px;font-weight:800;font-size:calc(11px * var(--ol-font-scale, 1));cursor:pointer}.secureExit button:hover{background:#f1edfb}.secureExit button:focus-visible{outline:3px solid #8c79cb;outline-offset:3px}


/* ObjectLab 3D v8.9 · Anatomía visual y presentación para el aula */
.teacherModeBtn{order:20;margin-left:auto;border:1px solid #ded5f4;border-radius:11px;background:linear-gradient(180deg,#fefcff,#f4f0ff);color:#6755ac;font-weight:800;font-size:calc(12px * var(--ol-font-scale, 1));padding:10px 13px;white-space:nowrap;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.teacherModeBtn:hover{background:#eee8ff;transform:translateY(-1px)}.teacherModeBtn[aria-pressed="true"]{background:#6755ac;color:white;box-shadow:0 8px 18px #6155af35}
.sceneLearnCard{border:1px solid #e3e7f3;background:linear-gradient(130deg,#ffffff 0%,#fafbff 100%);border-radius:18px;padding:15px 18px;box-shadow:0 12px 28px #31425b0c;display:grid;gap:12px}
.sceneLearnHead{display:flex;gap:14px;align-items:center;justify-content:space-between}.sceneLearnEyebrow{display:block;font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:1.1px;font-weight:900;color:#8271b7}.sceneLearnHead h3{margin:5px 0 3px;font-size:calc(19px * var(--ol-font-scale, 1));letter-spacing:-.45px;color:#28334e}.sceneLearnHead p{margin:0;font-size:calc(12px * var(--ol-font-scale, 1));color:#65738b;line-height:1.5}
.sceneLearnChoices{display:flex;gap:5px;flex-shrink:0;background:#f2f4fa;border:1px solid #e8ebf3;border-radius:12px;padding:4px}.sceneLearnChoices button{border:0;background:transparent;color:#65728b;border-radius:9px;padding:8px 11px;font-weight:800;font-size:calc(11px * var(--ol-font-scale, 1));cursor:pointer}.sceneLearnChoices button[aria-pressed="true"]{background:#fff;color:#6453a8;box-shadow:0 3px 10px #343e5915}
.sceneLearnBody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.sceneLearnPart{border:1px solid #e3e8f2;border-radius:13px;background:#fff;padding:11px 13px;min-width:0;transition:border .2s,background .2s,opacity .2s}.sceneLearnPart.selected{border-color:#8d7bc6;background:#f8f5ff;box-shadow:0 4px 16px #7c67be13}.sceneLearnPart.dim{opacity:.44}.sceneLearnPart h4{margin:0 0 8px;font-size:calc(11px * var(--ol-font-scale, 1));letter-spacing:.45px;color:#6d5aa9;display:flex;align-items:center;justify-content:space-between}.sceneLearnPart h4 span{color:#8b95a9;font-weight:700}.sceneLearnPart ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}.sceneLearnPart li{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:calc(11.5px * var(--ol-font-scale, 1));color:#34445c;padding:6px 8px;background:#f6f8fc;border-radius:7px;overflow-wrap:anywhere}.sceneLearnPart p{margin:6px 0 0;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.55;color:#758197}
.sceneLearnNote{grid-column:1/-1;font-size:calc(11.5px * var(--ol-font-scale, 1));line-height:1.5;color:#63738a;background:#f4f8fa;border:1px solid #e3ecf1;padding:10px 12px;border-radius:11px}
.sceneLearnNote b{color:#397c73}.sceneLearnPart.single{grid-column:1/-1}
.teacherDeck{display:none;border:1px solid #dfe3f1;border-radius:19px;padding:18px 24px;background:linear-gradient(130deg,#fff,#f7f5ff);box-shadow:0 12px 30px #52468d13}
.teacherDeckTop,.teacherDeckBottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.teacherDeckTop h2{font-size:clamp(20px,2vw,32px);line-height:1.16;letter-spacing:-.7px;margin:6px 0}.teacherDeckTop span{font-size:calc(11px * var(--ol-font-scale, 1));color:#7862b7;font-weight:850;letter-spacing:.8px}
.teacherDeck button{border:1px solid #ddd9eb;border-radius:10px;padding:11px 14px;background:white;font-weight:800;color:#6958a4;cursor:pointer}.teacherDeck p{font-size:clamp(13px,1.25vw,17px);line-height:1.5;margin:9px 0 14px;color:#4e5f78}.teacherDeckBottom{border-top:1px solid #e8e6f1;padding-top:12px}.teacherWhy{display:grid;gap:3px}.teacherWhy b{color:#5a5398;font-size:calc(10px * var(--ol-font-scale, 1));text-transform:uppercase;letter-spacing:1px}.teacherWhy span{color:#374960;font-size:calc(12px * var(--ol-font-scale, 1))}.teacherDeckActions{display:flex;gap:7px}.teacherDeckActions button.teacherNext{color:#fff;background:#6e5bb7;border-color:#6e5bb7}.teacherDeckActions button:disabled{opacity:.40;cursor:default}
body.teacherMode .layout{display:block;max-width:none;margin:0}body.teacherMode .side,body.teacherMode .right,body.teacherMode .siteFooter,body.teacherMode .guideTop,body.teacherMode .guideBottom,body.teacherMode .guideMeaning,body.teacherMode .classAnatomy,body.teacherMode .sceneLearnCard,body.teacherMode .selectionInfo,body.teacherMode .conceptReadout,body.teacherMode .stageRow,body.teacherMode .memoryLab,body.teacherMode .bottomCards,body.teacherMode .mainHead,body.teacherMode #guideStateCue{display:none!important}
body.teacherMode .main,body.teacherMode.easyMode .main{max-width:none;min-width:0;margin:0;padding:14px clamp(14px,2vw,38px) 25px;gap:12px;overflow:visible;height:auto}
body.teacherMode .scene,body.teacherMode.easyMode .scene{flex:0 0 auto;min-height:clamp(380px,64vh,890px);height:64vh}
body.teacherMode .teacherDeck{display:block}
body.teacherMode .sceneToolbar{position:relative;z-index:2}body.teacherMode .top{position:relative;min-height:64px}
body.teacherMode .zoneGuide,body.teacherMode .sceneCorner,body.teacherMode .sceneFooter small,body.teacherMode .qualityBadge{display:none!important}
body.teacherMode .sceneFooter{bottom:10px}
body.teacherMode .sceneLearnChoices{display:none}
@media(max-width:980px){.sceneLearnHead{align-items:stretch;flex-direction:column}.sceneLearnChoices{align-self:flex-start}.teacherDeckTop,.teacherDeckBottom{align-items:flex-start}.teacherDeckBottom{flex-direction:column}.teacherDeckActions{width:100%}.teacherDeckActions button{flex:1}}
@media(max-width:630px){.sceneLearnCard{padding:12px}.sceneLearnBody{grid-template-columns:1fr}.sceneLearnNote{grid-column:auto}.sceneLearnChoices{width:100%;overflow:auto}.sceneLearnChoices button{flex:1;padding:9px 7px;font-size:calc(10.9px * var(--ol-font-scale, 1))}.teacherModeBtn{order:initial;margin-left:0;font-size:calc(11px * var(--ol-font-scale, 1));padding:9px 10px}.sceneToolbar{gap:8px}.teacherDeck{padding:14px}.teacherDeckTop{flex-direction:column;gap:8px}.teacherDeck button{padding:9px;font-size:calc(11px * var(--ol-font-scale, 1))}.teacherDeckActions{flex-wrap:wrap}body.teacherMode .scene,body.teacherMode.easyMode .scene{min-height:390px;height:57vh;flex:0 0 auto}body.teacherMode .scene .legend{gap:5px}}
@media(prefers-reduced-motion:reduce){.teacherModeBtn,.sceneLearnPart{transition:none!important}}

/* Ajuste de proyección v8.9: cabecera compacta, sin rótulos superpuestos en la proyección */
@media(min-width:900px){body.teacherMode .top{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;padding:6px 18px;min-height:70px;height:auto}body.teacherMode .headRight .authorLinks{display:none!important}body.teacherMode .brand .logo{width:46px;height:46px;min-height:46px}body.teacherMode .brand b{font-size:calc(18px * var(--ol-font-scale, 1))}body.teacherMode .brand small{display:none}body.teacherMode .headRight{min-width:245px}body.teacherMode .experienceSwitch{margin-left:auto;margin-right:auto}}
body.teacherMode #labels{display:none!important}
body.teacherMode .sceneCorner{display:none!important}

/* === ObjectLab v9.0: depurador didáctico sincronizado === */
.debugger90{width:100%;min-width:0;border:1px solid #dfe6f4;border-radius:20px;background:linear-gradient(160deg,#fff,#fbfbff 64%,#f6f6ff);box-shadow:0 16px 32px #2634540b;overflow:hidden;color:#2b3651}
.dbgHead{padding:16px 18px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.dbgBrand{display:flex;gap:12px;align-items:center;min-width:0}.dbgGlyph{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#eeeafd;color:#6e5ab7;font-size:calc(25px * var(--ol-font-scale, 1));font-weight:900;border:1px solid #e2dafa;flex-shrink:0}
.dbgOverline{display:block;font-size:calc(9px * var(--ol-font-scale, 1));letter-spacing:1.1px;color:#8673b7;font-weight:850;margin-bottom:4px}.dbgBrand h3{font-size:calc(16px * var(--ol-font-scale, 1));letter-spacing:-.3px;margin:0 0 4px;color:#26334a;font-weight:900}.dbgBrand p{font-size:calc(11.5px * var(--ol-font-scale, 1));color:#738096;line-height:1.5;margin:0}.dbgLabTag{font-size:calc(10px * var(--ol-font-scale, 1));padding:4px 7px;border:1px solid #d8e4f2;border-radius:99px;color:#53738b;background:#f8fbff;vertical-align:middle;white-space:nowrap}
.dbgToggle{border:1px solid #ded6f3;color:#6d56b1;background:#f7f4ff;border-radius:11px;padding:11px 15px;white-space:nowrap;font-weight:850;font-size:calc(11.6px * var(--ol-font-scale, 1));flex-shrink:0}.dbgToggle:hover{background:#f0eaff}.dbgToggle span{margin-left:8px}
.dbgBody{border-top:1px solid #e8eaf4;padding:16px;display:grid;gap:12px}.dbgBody[hidden]{display:none!important}
.dbgSelectorRow{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.dbgSelectorRow label{display:flex;flex:1 1 270px;gap:8px;align-items:center;font-size:calc(10px * var(--ol-font-scale, 1));font-weight:850;color:#66748c;min-width:0}.dbgSelectorRow select{min-width:0;flex:1;border:1px solid #dfe4ee;border-radius:10px;background:#fff;padding:10px 12px;font-size:calc(12px * var(--ol-font-scale, 1));color:#344258;font-weight:750}.dbgLangPill{border-radius:10px;background:#f2edff;color:#735bb2;padding:9px 11px;font-weight:880;font-size:calc(11px * var(--ol-font-scale, 1))}.dbgDisclaimer{color:#929bac;font-size:calc(10px * var(--ol-font-scale, 1));flex:1 1 260px;text-align:right}
.dbgTransport{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.dbgTransport button{border:1px solid #e1e5ee;background:#fff;color:#596884;border-radius:10px;padding:10px 12px;font-size:calc(11.2px * var(--ol-font-scale, 1));font-weight:780}.dbgTransport button:not(:disabled):hover{background:#f8f7ff;border-color:#baafe3}.dbgTransport button:disabled{opacity:.42}.dbgTransport .dbgNext{background:#725bc0;color:white;border-color:#725bc0}.dbgTransport .dbgPlay{background:#eaf7f4;color:#25766d;border-color:#cbe9e1}.dbgCounter{margin-left:auto;color:#6d5aaf;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:850;font-variant-numeric:tabular-nums}
.dbgTimeline{width:100%;height:8px;border-radius:999px;appearance:none;background:linear-gradient(to right,#7864c8 var(--progress,0%),#e9ecf4 var(--progress,0%));margin:4px 0 7px;cursor:pointer}.dbgTimeline::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #7864c8;box-shadow:0 2px 8px #7267a326}.dbgTimeline::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:4px solid #7864c8}
.dbgInfo{border:1px solid #ebe4fa;border-left:4px solid #8268c9;border-radius:12px;background:#faf8ff;padding:11px 14px}.dbgInfo strong{display:block;font-size:calc(13px * var(--ol-font-scale, 1));margin-top:4px;color:#33415e}.dbgPhase{font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:.7px;color:#8061b4;font-weight:900}.dbgInfo p{margin:6px 0 0;color:#6b7591;font-size:calc(11.7px * var(--ol-font-scale, 1));line-height:1.55}
.dbgColumns{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(180px,.8fr) minmax(170px,.8fr);gap:10px;align-items:stretch}.dbgCodePanel,.dbgSnapshot{border-radius:12px;background:#fff;border:1px solid #e4e8f2;min-width:0;overflow:hidden;display:flex;flex-direction:column}.dbgStatePanels{display:grid;gap:10px;min-width:0;grid-template-rows:minmax(110px,1fr) minmax(110px,1fr)}.dbgPanelTitle{padding:10px 12px;border-bottom:1px solid #eaedf5;display:flex;justify-content:space-between;gap:9px;align-items:center;color:#69758a;font-size:calc(9.5px * var(--ol-font-scale, 1));letter-spacing:.6px;font-weight:900}.dbgDot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8a70d2;margin-right:7px}
.dbgCode{background:#202840;color:#e8edfc;font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;flex:1;overflow:auto;min-height:190px;padding:10px 0}.dbgCodeLine{display:grid;grid-template-columns:30px minmax(0,1fr) 13px;gap:8px;padding:5px 10px 5px 6px;border-left:3px solid transparent;transition:background .2s}.dbgCodeLine code{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;color:inherit}.dbgCodeLine.is-active{background:#62529f77;border-left-color:#b7a1ff;color:#fff;font-weight:800}.dbgLineNum{color:#8d9ab5;text-align:right;user-select:none}.dbgPointer{color:#dbcbff}
.dbgVariables,.dbgHeap,.dbgStack{display:grid;align-content:start;gap:7px;padding:10px;max-height:210px;overflow-y:auto;min-height:100px}.dbgEmpty{color:#9aa5b6;font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.45;padding:10px 4px}.dbgVariable,.dbgObject,.dbgFrame{border:1px solid #e8edf5;border-radius:9px;padding:8px 9px;font-size:calc(11px * var(--ol-font-scale, 1));color:#52647e;background:#fbfcff}.dbgVariable{display:flex;gap:6px;align-items:center;justify-content:space-between;flex-wrap:wrap}.dbgVariable code{font:800 11px ui-monospace,monospace;color:#5b48a7}.dbgVariable span{font-size:calc(10.5px * var(--ol-font-scale, 1))}.dbgObjectTitle{color:#276b67;font-weight:850;margin-bottom:6px}.dbgObjectFields{display:grid;gap:3px}.dbgObjectFields span{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:calc(10.5px * var(--ol-font-scale, 1))}.dbgObjectFields b{color:#718095}.dbgObjectFields em{font-style:normal;color:#344458;font-weight:780;text-align:right}.dbgFrame{display:flex;align-items:center;gap:8px}.dbgFrame span{color:#9ba9ba;font-size:calc(10px * var(--ol-font-scale, 1))}.dbgFrame code{font-size:calc(10.9px * var(--ol-font-scale, 1));overflow-wrap:anywhere}.dbgFrame.active{border-color:#d7d0f2;background:#f6f3ff;color:#6452ab}
.dbgConsole{background:#222b3b;color:#d4f4e7;font:12px/1.5 ui-monospace,monospace;margin:0;flex:1;padding:12px;white-space:pre-wrap;overflow:auto;min-height:64px}.dbgFoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#8290a3;font-size:calc(10.7px * var(--ol-font-scale, 1));line-height:1.5}.dbgSceneFocus{color:#377f78;font-weight:790}
body.teacherMode .debugger90{max-width:1200px;margin:0 auto}body.teacherMode .debugger90:not(:has(.dbgBody:not([hidden]))){display:none}body.teacherMode .dbgColumns{grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,.9fr))}
@media(max-width:1100px){.dbgColumns{grid-template-columns:minmax(230px,1.25fr) minmax(200px,1fr)}.dbgColumns .dbgStatePanels:last-child{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:auto}.dbgDisclaimer{text-align:left}}
@media(max-width:720px){.dbgHead{align-items:flex-start;flex-direction:column;padding:13px}.dbgBrand{gap:10px}.dbgToggle{width:100%;text-align:center}.dbgBody{padding:12px}.dbgSelectorRow{gap:8px}.dbgSelectorRow label{align-items:stretch;flex-direction:column;flex-basis:100%}.dbgSelectorRow select{width:100%}.dbgColumns,body.teacherMode .dbgColumns{grid-template-columns:1fr}.dbgColumns .dbgStatePanels:last-child{grid-column:auto;grid-template-columns:1fr 1fr}.dbgTransport button{padding:10px;font-size:calc(10.9px * var(--ol-font-scale, 1))}.dbgCounter{width:100%;text-align:center}.dbgStatePanels{grid-template-rows:auto auto}.dbgCode{min-height:150px;max-height:240px}.dbgInfo{padding:10px 12px}}
@media(max-width:440px){.dbgColumns .dbgStatePanels:last-child{grid-template-columns:1fr}.dbgTransport{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.dbgTransport button{width:100%}.dbgCounter{grid-column:1/-1}.dbgCodeLine{font-size:calc(11px * var(--ol-font-scale, 1))}.dbgStatePanels{gap:8px}.dbgBrand h3{font-size:calc(15px * var(--ol-font-scale, 1))}}
@media(prefers-reduced-motion:reduce){.dbgCodeLine,.dbgToggle{transition:none!important}}

/* v9.0 puntos de interrupción */
.dbgCodeLine.has-break{box-shadow:inset 3px 0 #d06a77}
.dbgCodeLine.has-break .dbgLineNum{color:#ff9bab;font-weight:900}
.dbgCodeLine .dbgLineNum{font-family:inherit;font-size:inherit;text-align:right;background:none;border:0;padding:0;cursor:pointer;min-height:24px}
.dbgCodeLine .dbgLineNum:hover{color:#e4c6ff}
body.teacherMode #teacherDebugBtn{background:#f5f0ff;color:#6550a7;border-color:#ddd1f6}

/* ObjectLab 3D v9.1 · Ruta formativa de POO */
.learningHeaderBtn,.learningFooterBtn{border:1px solid #ded7f4;background:#f6f3ff;color:#6650ab;font-weight:800;border-radius:10px;cursor:pointer}
.learningHeaderBtn{padding:8px 11px;font-size:calc(11px * var(--ol-font-scale, 1));white-space:nowrap}.learningHeaderBtn:hover,.learningFooterBtn:hover{background:#eee8fc}
.learningRoadmapDialog{width:min(1100px,96vw);max-width:1100px;max-height:92dvh;padding:0;border:1px solid #dfe4ef;border-radius:23px;background:#fff;box-shadow:0 30px 100px #202c4b42;color:#293550;overflow:hidden}
.learningRoadmapDialog::backdrop{background:#1d254b8c;backdrop-filter:blur(3px)}
.learnHead{display:flex;justify-content:space-between;gap:18px;padding:22px 26px 16px;background:linear-gradient(112deg,#ffffff 0%,#f7f4fe 100%);border-bottom:1px solid #e6e2f0}
.learnEyebrow{font-size:calc(10px * var(--ol-font-scale, 1));color:#816ab7;letter-spacing:1.5px;font-weight:900}.learnHead h2{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.9px;margin:5px 0}.learnHead p{font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.65;color:#6f7a91;max-width:820px;margin:0}
.learnClose{align-self:flex-start;border:1px solid #e1e5ef;border-radius:11px;background:#fff;padding:9px 13px;cursor:pointer;font-weight:800;color:#647089}
.learnProgress{height:5px;background:#e9edf5}.learnProgress span{display:block;height:100%;width:0%;transition:width .3s;background:linear-gradient(90deg,#8572cf,#45aa9b)}
.learnLayout{display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr);height:min(63vh,690px);min-height:340px}
.learnStages{overflow-y:auto;padding:15px 10px;background:#fafbfe;border-right:1px solid #ebedf5;display:flex;flex-direction:column;gap:7px}
.learnStage{width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:13px;padding:12px 11px;display:grid;gap:5px;cursor:pointer;color:#4a5871}
.learnStage:hover{background:#f0edfa}.learnStage.active{background:#f1edfc;border-color:#dcd1f6;color:#604bb0;box-shadow:0 5px 15px #7765b510}
.learnStageHead{display:flex;justify-content:space-between;gap:7px;align-items:center}.learnStageHead strong{font-size:calc(12px * var(--ol-font-scale, 1))}.learnStageHead small{font-size:calc(10px * var(--ol-font-scale, 1));font-weight:800;color:#7d8ca5}
.learnStageDesc{font-size:calc(10.6px * var(--ol-font-scale, 1));line-height:1.45;color:#8591a4}
.learnMain{min-width:0;overflow-y:auto;padding:22px 26px 28px;scrollbar-width:thin}
.learnKicker{font-size:calc(10.5px * var(--ol-font-scale, 1));text-transform:uppercase;letter-spacing:1px;font-weight:850;color:#816ab7}.learnMain h3{font-size:calc(22px * var(--ol-font-scale, 1));line-height:1.25;letter-spacing:-.6px;margin:6px 0 10px}.learnLead{font-size:calc(13px * var(--ol-font-scale, 1));line-height:1.75;color:#5b6982;margin:0 0 14px}
.learnConcepts{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:17px}.learnConcepts button{border:1px solid #e2ddf1;background:#f9f7ff;color:#6a56af;border-radius:999px;padding:7px 11px;cursor:pointer;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:770}
.learnConcepts button:hover{background:#ede9f8}
.learnCase{border:1px solid #e3e9f3;border-radius:16px;padding:16px;margin-bottom:16px;background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)}
.learnCaseHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.learnCaseHeader strong{color:#364764;font-size:calc(13px * var(--ol-font-scale, 1))}.learnCaseHeader span{font-size:calc(10px * var(--ol-font-scale, 1));font-weight:800;color:#3a9387;background:#e7f8f2;padding:5px 9px;border-radius:99px}
.learnCase p{font-size:calc(12px * var(--ol-font-scale, 1));line-height:1.65;color:#63728c}.learnCase pre{font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;color:#dfe7ff;background:#1d2943;padding:14px;border-radius:11px;white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:220px}
.learnDiff{font-size:calc(11px * var(--ol-font-scale, 1));line-height:1.6;color:#647590;background:#f1f5fa;border:1px solid #e5eaf4;border-radius:10px;padding:10px 12px}
.learnQuestion{border-top:1px solid #e9ecf3;padding:14px 0 4px}.learnQuestion h4{font-size:calc(12.5px * var(--ol-font-scale, 1));color:#3d4b64;margin:0 0 10px;line-height:1.5}
.learnOptions{display:grid;gap:7px}.learnOption{border:1px solid #e0e6f0;background:#fff;color:#4b5873;border-radius:10px;text-align:left;padding:10px 12px;cursor:pointer;font-size:calc(11.6px * var(--ol-font-scale, 1));line-height:1.5}
.learnOption:hover{background:#f8f5ff;border-color:#cfc2ed}.learnOption[aria-pressed=true]{border-color:#836dc8;background:#f0ecfa;font-weight:750}
.learnFeedback{margin:9px 0 0;border-left:3px solid #3ca38c;padding:8px 11px;background:#f1faf7;border-radius:0 9px 9px 0;font-size:calc(11.5px * var(--ol-font-scale, 1));line-height:1.6;color:#286f62}.learnFeedback.wrong{border-left-color:#bf8a43;background:#fffaf0;color:#865c31}
.learnActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}.learnActions button{border:1px solid #dcd8ec;color:#6552a8;background:#f7f4ff;border-radius:10px;padding:10px 13px;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:820;cursor:pointer}
.learnActions button:hover{background:#ede7fa}.learnActions button:focus-visible,.learnOption:focus-visible,.learnStage:focus-visible{outline:3px solid #9c87dc;outline-offset:2px}
.learnFooter{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 22px;border-top:1px solid #e7ebf3;background:#fbfcff}
.learnFooter #learnTotals{font-size:calc(11.5px * var(--ol-font-scale, 1));color:#586a84;font-weight:750}.learnFooterActions{display:flex;gap:8px}.learnFooterActions button{border:1px solid #e1e5ef;background:#fff;color:#53637e;border-radius:9px;padding:9px 11px;cursor:pointer;font-weight:800;font-size:calc(11px * var(--ol-font-scale, 1))}
.learnFooterActions #learnCloseBottom{background:#7561bd;border-color:#7561bd;color:#fff}
@media(max-width:800px){.learningRoadmapDialog{width:min(100vw - 12px,820px);max-height:95dvh;border-radius:17px}.learnLayout{grid-template-columns:minmax(0,1fr);height:min(68vh,760px)}.learnStages{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid #ebedf5;padding:9px;flex-shrink:0}.learnStage{min-width:158px;max-width:195px;padding:9px}.learnStageDesc{display:none}.learnMain{padding:16px}.learnHead{padding:16px}.learnHead h2{font-size:calc(21px * var(--ol-font-scale, 1))}.learnFooter{padding:10px 14px}}
@media(max-width:480px){.learnMain{padding:13px}.learnCase{padding:11px}.learnCase pre{font-size:calc(10.5px * var(--ol-font-scale, 1));padding:11px}.learnStage{min-width:144px}.learnHead p{font-size:calc(11px * var(--ol-font-scale, 1))}.learnFooterActions{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.learnProgress span{transition:none}}

/* Ajuste final del diálogo: pie visible sin cortar la zona de ejercicios. */
.learningRoadmapDialog[open]{display:flex;flex-direction:column}
.learningRoadmapDialog .learnHead,.learningRoadmapDialog .learnProgress,.learningRoadmapDialog .learnFooter{flex:0 0 auto}
.learningRoadmapDialog .learnLayout{flex:1 1 auto;min-height:0;height:auto}
@media(max-width:800px){.learningRoadmapDialog{width:calc(100vw - 12px);max-width:820px;max-height:calc(100dvh - 12px)}.learningRoadmapDialog .learnStages{flex:0 0 auto}.learningRoadmapDialog .learnLayout{min-height:0;overflow:hidden}.learningRoadmapDialog .learnMain{min-height:0;overflow:auto}}


/* v9.2 - Aprender POO sin lenguaje predominante */
.guideLanguageBar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;border:1px solid #dfe9f5;border-radius:13px;background:linear-gradient(110deg,#f6f9ff,#f7f6ff);box-shadow:0 6px 14px rgba(50,65,100,.035)}
.guideLanguageCopy{display:flex;flex-direction:column;gap:4px;min-width:180px;flex:1 1 260px}.guideLanguageCopy strong{font-size:calc(12.4px * var(--ol-font-scale, 1));color:#4d3d8f;line-height:1.4}.guideLanguageCopy span{font-size:calc(11.5px * var(--ol-font-scale, 1));color:#64718a;line-height:1.5}
.guideLanguagePicker{display:flex;align-items:center;gap:9px;flex:0 1 auto;flex-wrap:wrap}.guideLanguagePicker label{font-size:calc(12px * var(--ol-font-scale, 1));font-weight:780;color:#56647e;white-space:nowrap}
.guideLanguagePicker select{min-width:150px;min-height:42px;padding:9px 35px 9px 12px;border:1.5px solid #ac9adf;background:#fff;color:#473884;border-radius:11px;font-size:calc(13.5px * var(--ol-font-scale, 1));font-weight:800;box-shadow:0 6px 14px #6853b317;cursor:pointer}
.guideLanguagePicker select:focus-visible{outline:3px solid #ac9adf;outline-offset:2px}
body.easyMode .guideLanguageBar{display:flex}
body:not(.easyMode) .guideLanguageBar{display:none}
@media(max-width:640px){.guideLanguageBar{padding:10px 11px;gap:9px}.guideLanguageCopy{flex-basis:100%}.guideLanguagePicker{width:100%;justify-content:space-between}.guideLanguagePicker select{flex:1;min-width:150px}}


/* v9.2.1 — Navegación superior legible para aprender fácil */
body.easyMode .guideMeta{align-items:center;gap:10px}
body.easyMode .guideMetaRight{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
body.easyMode .guideTopNav{display:flex;align-items:center;gap:6px;padding:4px;border-radius:12px;border:1px solid #ded9ef;background:#fff;box-shadow:0 5px 16px #433a7610}
body.easyMode .guideTopNav button{min-height:39px;min-width:103px;padding:9px 13px;border-radius:9px;font-size:calc(12px * var(--ol-font-scale, 1));font-weight:790;white-space:nowrap}
body.easyMode .guideTopNav button span{display:inline!important}
body.easyMode .guideTopNav #guideNextTop{background:linear-gradient(180deg,#806bca,#6a57b7);border-color:#6d58b9;color:#fff;box-shadow:0 5px 13px #6e5bbb25}
body.easyMode .guideTopNav #guideNextTop:hover{background:#614cad}
body.easyMode .guideTopNav #guidePrevTop{color:#594f83;background:#fbfaff}
body.easyMode .guideTopNav button:focus-visible{outline:3px solid #b7a5e7;outline-offset:2px}
@media(max-width:700px){
 body.easyMode .guideMeta{flex-wrap:wrap;justify-content:space-between;row-gap:8px}
 body.easyMode .guideMetaRight{width:100%;justify-content:space-between;gap:10px}
 body.easyMode .guideTopNav{margin-left:auto;flex:1;max-width:350px}
 body.easyMode .guideTopNav button{flex:1;min-width:0;min-height:42px;padding:10px 9px;font-size:calc(12px * var(--ol-font-scale, 1))}
 body.easyMode .guideTopNav button span{display:inline!important}
}
@media(max-width:390px){body.easyMode .guideTopNav button{font-size:calc(11.4px * var(--ol-font-scale, 1));padding:9px 6px}}


/* ObjectLab 3D v9.3 · Auditoría de usabilidad y cabecera compacta.
   Una fila de escritorio, dos filas en móvil, sin perder accesibilidad. */
.top.topCompact{
 display:grid!important;grid-template-columns:max-content max-content max-content minmax(0,1fr) max-content!important;
 align-items:center!important;column-gap:12px!important;row-gap:0!important;
 min-height:60px!important;height:60px!important;padding:6px 16px!important;
 position:sticky;top:0;z-index:900;flex-wrap:nowrap!important;
 border-bottom:1px solid #e4e8f1;background:rgba(255,255,255,.97);
 backdrop-filter:blur(14px);box-shadow:0 7px 23px #2f3d5a0b;
}
.topCompact .brand{min-width:0!important;width:auto!important;flex:0 0 auto!important;gap:9px!important;white-space:nowrap}
.topCompact .brand .logo{width:43px!important;height:43px!important;min-height:43px!important;min-width:43px!important;padding:2px!important;border-radius:13px!important}
.topCompact .brand b{font-size:calc(19px * var(--ol-font-scale, 1))!important;line-height:1.1;letter-spacing:-.6px}
.topCompact .brand small{display:none!important}
.topCompact .experienceSwitch{margin:0!important;flex:0 0 auto!important;width:auto!important;padding:3px!important;gap:2px!important;border-radius:12px}
.topCompact .experienceSwitch button{padding:8px 9px!important;font-size:calc(11px * var(--ol-font-scale, 1))!important;min-height:36px;white-space:nowrap}
.topCompact .languageControl{display:flex!important;order:initial!important;width:auto!important;min-width:0!important;flex:0 0 auto!important;padding:3px 5px!important;gap:5px!important;box-shadow:none;border-radius:12px!important}
.topCompact .languageControl label{font-size:calc(10px * var(--ol-font-scale, 1));letter-spacing:0!important;color:#655485;font-weight:800}
.topCompact .languageControl select{min-width:94px!important;width:auto!important;min-height:35px!important;padding:6px 8px!important;font-size:calc(12px * var(--ol-font-scale, 1))!important;border-radius:9px}
.topCompact .languageControl #compareOpen{min-height:35px;padding:7px 9px!important;font-size:calc(11px * var(--ol-font-scale, 1))!important;border-radius:9px}
.topCompact .headRight{display:flex!important;justify-content:flex-end!important;align-items:center!important;flex-direction:row!important;min-width:0!important;width:auto!important;max-width:100%;order:initial!important;gap:0!important}
.topCompact .authorVersion{display:flex!important;align-items:center;gap:7px;justify-content:flex-end!important;flex-wrap:nowrap!important;max-width:100%;min-width:0;white-space:nowrap}
.topCompact .authorBy{font-size:calc(11px * var(--ol-font-scale, 1));overflow:hidden;text-overflow:ellipsis;min-width:0;white-space:nowrap}
.topCompact .versionMark{font-size:calc(10px * var(--ol-font-scale, 1))!important;padding:5px 9px!important;white-space:nowrap}
.topCompact .headerMore{position:relative;display:block;z-index:901;flex:0 0 auto;order:initial!important}
.topCompact .headerMore>summary{list-style:none;display:flex;gap:7px;align-items:center;justify-content:center;min-height:36px;padding:7px 11px;background:#f8f6ff;border:1px solid #e4dcf6;border-radius:10px;cursor:pointer;color:#6250a9;font-size:calc(11px * var(--ol-font-scale, 1));font-weight:820;white-space:nowrap}
.topCompact .headerMore>summary::-webkit-details-marker{display:none}
.topCompact .headerMore>summary:hover,.topCompact .headerMore[open]>summary{background:#eee9fa;border-color:#ccbeea}
.topCompact .headerMore>summary:focus-visible{outline:3px solid #a999de;outline-offset:2px}
.topCompact .headerMore .menuGlyph{font-size:calc(15px * var(--ol-font-scale, 1));line-height:1}
.topCompact .headerMorePanel{position:absolute;right:0;top:calc(100% + 9px);width:min(305px,calc(100vw - 20px));padding:11px;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid #e1e5ef;border-radius:15px;box-shadow:0 22px 52px #2535552d;max-height:min(75vh,520px);overflow-y:auto}
.topCompact .headerMorePanel .menuSectionTitle{font-size:calc(9.5px * var(--ol-font-scale, 1));font-weight:860;color:#8c82ae;letter-spacing:1px;padding:10px 9px 4px}
.topCompact .headerMorePanel a,.topCompact .headerMorePanel button{box-sizing:border-box;display:flex;width:100%;min-height:37px;align-items:center;text-align:left;padding:10px 11px!important;border-radius:9px;border:0;background:transparent;color:#40506f;font-size:calc(12px * var(--ol-font-scale, 1));font-weight:735;text-decoration:none;box-shadow:none;cursor:pointer;white-space:normal}
.topCompact .headerMorePanel a:hover,.topCompact .headerMorePanel button:hover{background:#f3efff;color:#624caf;text-decoration:none}
.topCompact .headerMoreCredit{border-top:1px solid #e7eaf3;margin-top:6px;padding:10px 9px 2px;color:#8190a6;font-size:calc(10.5px * var(--ol-font-scale, 1))}
@media(max-width:1300px){.topCompact .authorBy{font-size:calc(10px * var(--ol-font-scale, 1))}.topCompact .brand b{font-size:calc(17px * var(--ol-font-scale, 1))!important}.top.topCompact{column-gap:8px!important}.topCompact .languageControl label{display:none}.topCompact .experienceSwitch button{font-size:calc(10.5px * var(--ol-font-scale, 1))!important;padding:8px!important}}
@media(max-width:1100px){.topCompact .authorBy{display:none}.topCompact .headRight .versionMark{display:inline-flex!important}}
@media(max-width:890px){
 .top.topCompact{grid-template-columns:minmax(0,1fr) max-content!important;grid-template-areas:"brand more" "mode language";min-height:99px!important;height:auto!important;row-gap:5px!important;padding:7px 12px!important;column-gap:8px!important}
 .topCompact .brand{grid-area:brand;max-width:100%;overflow:hidden}
 .topCompact .brand b{font-size:calc(17px * var(--ol-font-scale, 1))!important}
 .topCompact .headerMore{grid-area:more;justify-self:end}
 .topCompact .experienceSwitch{grid-area:mode;justify-self:start;min-width:0}
 .topCompact .languageControl{grid-area:language;justify-self:end}
 .topCompact .headRight{display:none!important}
 .topCompact .languageControl label{display:none!important}
 .topCompact .headerMore>summary{min-height:36px}
}
@media(max-width:520px){
 .top.topCompact{padding:6px 9px!important;min-height:91px!important;row-gap:4px!important}
 .topCompact .brand .logo{width:37px!important;height:37px!important;min-width:37px!important;min-height:37px!important;border-radius:11px!important}
 .topCompact .brand b{font-size:calc(17px * var(--ol-font-scale, 1))!important}
 .topCompact .headerMore>summary{padding:6px 9px;font-size:calc(10.5px * var(--ol-font-scale, 1));min-height:33px}
 .topCompact .experienceSwitch button{font-size:calc(10px * var(--ol-font-scale, 1))!important;padding:7px 7px!important;min-height:34px;line-height:1.1}
 .topCompact .experienceSwitch{max-width:100%}
 .topCompact .languageControl{gap:3px!important;padding:2px!important}
 .topCompact .languageControl select{min-width:76px!important;width:86px!important;padding:6px!important;min-height:33px!important;font-size:calc(11px * var(--ol-font-scale, 1))!important}
 .topCompact .languageControl #compareOpen{min-height:33px;padding:5px 8px!important;font-size:calc(14px * var(--ol-font-scale, 1))!important}
 .topCompact .languageControl .compareText{display:none}
}
@media(max-width:360px){.topCompact .brand b{font-size:calc(15px * var(--ol-font-scale, 1))!important}.topCompact .experienceSwitch button{font-size:calc(9.4px * var(--ol-font-scale, 1))!important;padding:6px!important}.topCompact .languageControl select{width:76px!important;min-width:72px!important}}
/* Reducir repetición en la guía sin suprimir el contenido didáctico. */
body.easyMode .guideLanguageBar{padding:7px 11px;gap:8px;border-radius:11px}
body.easyMode .guideLanguageCopy{flex-basis:200px;gap:2px}
body.easyMode .guideLanguageCopy strong{font-size:calc(11px * var(--ol-font-scale, 1))}
body.easyMode .guideLanguageCopy span{font-size:calc(10.5px * var(--ol-font-scale, 1))}
body.easyMode .guideLanguagePicker select{min-height:36px;padding:6px 29px 6px 10px}
body.easyMode .guideLanguagePicker label{font-size:calc(11px * var(--ol-font-scale, 1))}
body.easyMode .guideTop{padding:12px 16px;gap:7px}
body.easyMode .guideHeading h2{font-size:clamp(20px,2.15vw,27px);line-height:1.24}
body.easyMode .guideHeading p{font-size:calc(12.7px * var(--ol-font-scale, 1));line-height:1.5}
body.easyMode .guideStateCue{margin:0;padding:7px 10px}
body.easyMode .guideMeaning{gap:8px}
body.easyMode .appMission{padding:8px 12px;min-height:0;gap:10px}
body.easyMode .missionMascot{width:40px;height:54px;flex-basis:40px}
body.easyMode .appMission h2{font-size:calc(16px * var(--ol-font-scale, 1));line-height:1.15;margin:1px 0 4px}
body.easyMode .appMission p{font-size:calc(10.6px * var(--ol-font-scale, 1));line-height:1.35}
body.easyMode .missionNote{font-size:calc(9.6px * var(--ol-font-scale, 1))}
@media(max-width:640px){body.easyMode .guideTop{padding:10px 11px}body.easyMode .guideLanguageCopy span{display:none}body.easyMode .guideLanguageBar{flex-wrap:nowrap;gap:6px}body.easyMode .guideLanguageCopy{flex:1 1 0;min-width:0}body.easyMode .guideLanguagePicker{flex:0 0 auto;min-width:0}body.easyMode .guideLanguagePicker label{display:none}body.easyMode .guideLanguagePicker select{min-width:100px;font-size:calc(12px * var(--ol-font-scale, 1))}body.easyMode .guideHeading h2{font-size:calc(19px * var(--ol-font-scale, 1))}body.easyMode .guideMetaRight{gap:7px}body.easyMode .guideMeta{row-gap:6px}}


/* Evita que el selector tape o estreche el texto de la guía en 390 px. */
@media(max-width:640px){
 body.easyMode .guideLanguageBar{display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;align-items:center!important;column-gap:8px!important;row-gap:0!important;width:100%;min-width:0;padding:8px 9px!important}
 body.easyMode .guideLanguageCopy{width:auto!important;min-width:0!important;flex:none!important;display:block!important;overflow:visible!important}
 body.easyMode .guideLanguageCopy strong{font-size:calc(11.3px * var(--ol-font-scale, 1))!important;line-height:1.3;display:block;white-space:normal}
 body.easyMode .guideLanguagePicker{width:auto!important;min-width:0!important;flex:none!important;display:flex!important;align-items:center;justify-content:flex-end}
 body.easyMode .guideLanguagePicker select{width:111px!important;min-width:111px!important;max-width:111px!important;min-height:37px!important;font-size:calc(12px * var(--ol-font-scale, 1))!important;padding:5px 22px 5px 8px!important}
}
@media(max-width:350px){body.easyMode .guideLanguagePicker select{min-width:96px!important;width:96px!important;max-width:96px!important}}


/* v9.4 - Lectura ajustable y cinco paletas. Cabecera y diagramas no cambian de tamaño para no perder precisión. */
:root {--ol-font-scale:1;--ol-accent:#7360bc;--ol-soft:#f2efff;--ol-canvas:#f3f5fb;}
.top.topCompact,.scene,.appPreloader {--ol-font-scale:1}
:root[data-ol-theme="clasico"]{color-scheme:light}
:root[data-ol-theme="oceano"] {color-scheme:light;--bg:#edf7fa;--white:#fff;--ink:#18384c;--muted:#547184;--line:#d8e8ee;--purple:#247eae;--plight:#e5f3fa;--teal:#087e82;--ol-accent:#147aa9;--ol-soft:#e9f6fc;--ol-canvas:#eaf7fa}
:root[data-ol-theme="bosque"] {color-scheme:light;--bg:#f0f7f1;--white:#fff;--ink:#263f32;--muted:#647c6c;--line:#dce9de;--purple:#368c70;--plight:#e9f5ed;--teal:#21875d;--ol-accent:#317b5b;--ol-soft:#e9f5eb;--ol-canvas:#f2faf3}
:root[data-ol-theme="arena"] {color-scheme:light;--bg:#fbf7ef;--white:#fffefa;--ink:#514032;--muted:#8b7866;--line:#eee3d1;--purple:#a97942;--plight:#f8f0de;--teal:#8f7753;--ol-accent:#a16b36;--ol-soft:#f8f0df;--ol-canvas:#fff8ed}
:root[data-ol-theme="noche"] {color-scheme:dark;--bg:#101826;--white:#1b283b;--ink:#ecf3ff;--muted:#aabbd2;--line:#34435a;--purple:#b5a3f6;--plight:#2a294b;--teal:#54c6bb;--ol-accent:#b8a7ff;--ol-soft:#2e2c52;--ol-canvas:#142338}
:root[data-ol-theme="oceano"] body,:root[data-ol-theme="bosque"] body,:root[data-ol-theme="arena"] body {background:var(--bg);color:var(--ink)}
:root[data-ol-theme="oceano"] .top.topCompact,:root[data-ol-theme="bosque"] .top.topCompact,:root[data-ol-theme="arena"] .top.topCompact {background:var(--white);border-color:var(--line)}
:root[data-ol-theme="oceano"] .guideTop,:root[data-ol-theme="bosque"] .guideTop,:root[data-ol-theme="arena"] .guideTop{background:linear-gradient(135deg,var(--white),var(--ol-soft));border-color:var(--line)}
:root[data-ol-theme="oceano"] .guideTopNav #guideNextTop,:root[data-ol-theme="bosque"] .guideTopNav #guideNextTop,:root[data-ol-theme="arena"] .guideTopNav #guideNextTop,
:root[data-ol-theme="oceano"] .guidePrimary,:root[data-ol-theme="bosque"] .guidePrimary,:root[data-ol-theme="arena"] .guidePrimary{background:var(--ol-accent)!important;border-color:var(--ol-accent)!important;color:#fff!important}
:root[data-ol-theme="oceano"] .scene,:root[data-ol-theme="bosque"] .scene,:root[data-ol-theme="arena"] .scene{background:radial-gradient(circle at top,var(--white),var(--ol-canvas));border-color:var(--line)}
:root[data-ol-theme="oceano"] .brand em,:root[data-ol-theme="bosque"] .brand em,:root[data-ol-theme="arena"] .brand em{color:var(--ol-accent)!important}
:root[data-ol-theme="oceano"] .guideProgressFill,:root[data-ol-theme="bosque"] .guideProgressFill,:root[data-ol-theme="arena"] .guideProgressFill{background:var(--ol-accent)}
:root[data-ol-theme="oceano"] button:focus-visible,:root[data-ol-theme="bosque"] button:focus-visible,:root[data-ol-theme="arena"] button:focus-visible{outline-color:var(--ol-accent)}
/* Noche: fondos y controles del estudio, no un filtro de pantalla que altere la imagen del personaje. */
:root[data-ol-theme="noche"] body{background:#101826!important;color:#e9f2ff!important}
:root[data-ol-theme="noche"] .top.topCompact{background:#19253a!important;color:#edf4ff!important;border-color:#354660!important}
:root[data-ol-theme="noche"] .topCompact .headerMore>summary,:root[data-ol-theme="noche"] .experienceSwitch,:root[data-ol-theme="noche"] .languageControl {background:#24334b!important;border-color:#41516c!important;color:#edf4ff!important}
:root[data-ol-theme="noche"] .topCompact .headerMorePanel{background:#19263b!important;border-color:#40516c!important;color:#edf4ff!important}
:root[data-ol-theme="noche"] .topCompact .headerMorePanel a,:root[data-ol-theme="noche"] .topCompact .headerMorePanel button{color:#d5e4f7!important}
:root[data-ol-theme="noche"] .topCompact .headerMorePanel a:hover,:root[data-ol-theme="noche"] .topCompact .headerMorePanel button:hover{background:#2e3c56!important}
:root[data-ol-theme="noche"] .side,:root[data-ol-theme="noche"] .right,:root[data-ol-theme="noche"] .main,:root[data-ol-theme="noche"] .layout{background:#101826!important;color:#edf4ff!important;border-color:#36465f!important}
:root[data-ol-theme="noche"] .guideTop,:root[data-ol-theme="noche"] .guideBottom,:root[data-ol-theme="noche"] .appMission,:root[data-ol-theme="noche"] .stageRow,:root[data-ol-theme="noche"] .mainHead,:root[data-ol-theme="noche"] .microCard,:root[data-ol-theme="noche"] .bottomCards > div,:root[data-ol-theme="noche"] .memoryLab,:root[data-ol-theme="noche"] .inspect,:root[data-ol-theme="noche"] .legend,:root[data-ol-theme="noche"] .banner,:root[data-ol-theme="noche"] .conceptReadout,:root[data-ol-theme="noche"] .guideLanguageBar,:root[data-ol-theme="noche"] .guideStateCue,:root[data-ol-theme="noche"] .guideMeaning > div,:root[data-ol-theme="noche"] .guideTip,:root[data-ol-theme="noche"] .guideMicroHelp,:root[data-ol-theme="noche"] .guideBottomInfo,:root[data-ol-theme="noche"] .conceptPill {background:#1b293e!important;color:#ecf3ff!important;border-color:#374761!important;box-shadow:none!important}
:root[data-ol-theme="noche"] .scene{background:radial-gradient(circle at 50% 15%,#263956 0%,#142235 72%,#111c2e 100%)!important;border-color:#40516c!important}
:root[data-ol-theme="noche"] .scene canvas{filter:brightness(.68) contrast(1.06) saturate(.92)}
:root[data-ol-theme="noche"] .nodeLabel,:root[data-ol-theme="noche"] .nodeLabel .n,:root[data-ol-theme="noche"] .nodeLabel .v{color:#e9f4ff!important;text-shadow:0 1px 6px #020915}
:root[data-ol-theme="noche"] .sceneCorner,:root[data-ol-theme="noche"] .zoneGuide span,:root[data-ol-theme="noche"] .qualityBadge,:root[data-ol-theme="noche"] .zoom{background:#1d2d45e8!important;color:#dce9ff!important;border-color:#3b4e68!important}
:root[data-ol-theme="noche"] :is(h1,h2,h3,strong,legend,summary,.guideTakeaway,.lessonTitle,.guideHeading p,.guideDescription,.minor,.guideTip,.guideStateCue,.guideMeaning,.guideCredit,.guidePhase,.overline,.viewSubtitle,.lessonIntro,.guideMeta,.teachNote,.footerAudience,.footerTop,.footerLead,.footerColumns,.footerSignature){color:#e4eeff!important}
:root[data-ol-theme="noche"] :is(.side p,.right p,.guideTop p,.guideBottom p,.mainHead p,.minor,.guideMicroHelp,.guideCredit,.guideTakeaway,.guideStatus){color:#c4d3e9!important}
:root[data-ol-theme="noche"] :is(button:not(.guidePrimary):not(#guideNextTop),select,input,textarea,.outline,.guideTopNav,.lessonItem,.guideCode,.guideCode pre,.guideActions button,.zoom button,.atlasList,.atlasDetail,.atlasToolbar){background-color:#25344b!important;color:#ecf4ff!important;border-color:#4c5d77!important}
:root[data-ol-theme="noche"] :is(button:hover,.lessonItem:hover){border-color:#a997fa!important}
:root[data-ol-theme="noche"] .guidePrimary,:root[data-ol-theme="noche"] .guideTopNav #guideNextTop{background:#8067c5!important;color:white!important;border-color:#9b85ec!important}
:root[data-ol-theme="noche"] .appMission img,:root[data-ol-theme="noche"] .logo img,:root[data-ol-theme="noche"] .mentorMini img{filter:none!important}
:root[data-ol-theme="noche"] :is(.atlasDialog,.patternsDialog,.roadmapDialog,.learnDialog,.compareDialog,.debugDialog,.siteFooter,.rightFooter,dialog){background:#18263b!important;color:#edf4ff!important;border-color:#41516c!important}
:root[data-ol-theme="noche"] :is(dialog pre,.atlasExercise,.atlasNote,.atlasConcept,.atlasPills span,.atlasList,.atlasDetail,.patternsContent,.learnMain,.learnStage,.compareColumns section,.siteFooter section,.footerUseful div){background:#22324b!important;color:#ecf4ff!important;border-color:#435571!important}
:root[data-ol-theme="noche"] dialog :is(p,small,span,label,div){color:inherit}
:root[data-ol-theme="noche"] a{color:#c6b8ff!important}
:root[data-ol-theme="noche"] button:focus-visible{outline-color:#c9b9ff!important}
/* Controles en menú compacto */
.topCompact .headerMorePanel .olAppearance{border:1px solid #e2e7f0;border-radius:12px;margin:5px 0 10px;padding:9px 9px 7px;background:var(--ol-soft);min-width:0}
.topCompact .headerMorePanel .olAppearance legend{font-size:11px;font-weight:810;color:var(--ink);padding:0 5px}
.topCompact .headerMorePanel .olThemeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.topCompact .headerMorePanel .olThemeGrid button{display:flex;align-items:center;gap:6px;min-height:32px;padding:6px 7px!important;background:var(--white);border:1px solid var(--line);font-size:11px}
.topCompact .headerMorePanel .olThemeGrid button[aria-pressed="true"]{border:2px solid var(--ol-accent)!important;background:var(--ol-soft);font-weight:850}
.olSwatch{width:15px;height:15px;min-width:15px;border-radius:50%;display:inline-block;border:2px solid #ffffffb0;box-shadow:0 0 0 1px #6b749244}
.swatchClasico{background:#7360bc}.swatchOceano{background:#147aa9}.swatchBosque{background:#318060}.swatchArena{background:#b1834f}.swatchNoche{background:#101a2e}
.topCompact .headerMorePanel .olFontControl{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-weight:750;color:var(--ink);font-size:11px}
.topCompact .headerMorePanel .olFontControl>div{display:flex;align-items:center;justify-content:space-between;gap:6px}
.topCompact .headerMorePanel .olFontControl button{width:45px;min-height:34px;padding:7px!important;border-radius:8px;border:1px solid var(--line);background:var(--white);font-size:14px;justify-content:center}
.topCompact .headerMorePanel .olFontControl output{font-size:13px;min-width:58px;text-align:center;color:var(--ink);font-weight:850}
.topCompact .headerMorePanel .olAppearanceReset{min-height:28px!important;padding:5px 7px!important;margin-top:8px;color:var(--ol-accent)!important;border:1px dashed var(--line);text-align:center!important;justify-content:center}
.topCompact .headerMorePanel .olAppearanceNote{font-size:10.4px!important;line-height:1.5;margin:6px 2px 0;color:var(--muted)}
.olAtlasNote{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.6;padding:8px 15px;background:var(--ol-soft);border-bottom:1px solid var(--line);color:var(--ink);font-weight:630}
.olAtlasLearning{margin:12px 0;padding:12px;border:1px solid #dfdbe9;border-radius:12px;background:var(--ol-soft);color:var(--ink)}
.olAtlasLearning h4{font-size:calc(13px * var(--ol-font-scale,1));margin:0 0 7px;color:var(--ol-accent)}
.olAtlasLearning p{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.65;margin:0}
.olAtlasLearning b{font-weight:830}
.olAtlasLearning .olMistake{margin-top:9px;border-top:1px solid var(--line);padding-top:8px}
:root[data-ol-theme="noche"] .olAtlasLearning,:root[data-ol-theme="noche"] .olAtlasNote{background:#283754!important;color:#eff3ff!important;border-color:#425372!important}
/* El tamaño de texto afecta contenido didáctico, no elementos de diagramas 3D o la cabecera. */
:root[data-ol-theme="noche"] .guideCode pre,:root[data-ol-theme="noche"] .code pre{background:#0d172a!important;color:#e9f2ff!important}
@media(max-width:640px){.topCompact .headerMorePanel{max-width:calc(100vw - 16px)}.topCompact .headerMorePanel .olThemeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* Refinamientos de contraste y coherencia de paleta v9.4 */
:root[data-ol-theme="noche"] .sceneToolbar,
:root[data-ol-theme="noche"] .sceneToolbar .viewModes,
:root[data-ol-theme="noche"] .sceneToolbar .cameraTools,
:root[data-ol-theme="noche"] .sceneToolbar select,
:root[data-ol-theme="noche"] .sceneToolbar button{background:#213049!important;color:#e9f1ff!important;border-color:#40536e!important}
:root[data-ol-theme="noche"] .sceneToolbarHint,:root[data-ol-theme="noche"] .cameraLabel{color:#c5d5ed!important}
:root[data-ol-theme="noche"] .sceneToolbar button.active{background:#735cae!important;color:#fff!important}
:root[data-ol-theme="noche"] .appMission :is(h2,p,.missionNote,.missionTag),
:root[data-ol-theme="noche"] .guideLanguageCopy :is(strong,span),
:root[data-ol-theme="noche"] .guideStateCue :is(strong,span){color:#dce9fc!important}
:root[data-ol-theme="noche"] .guideProgress{background:#354560!important}
:root[data-ol-theme="noche"] .guideProgress span{background:#ad9af2!important}
:root[data-ol-theme="noche"] .guideLanguageBar,.guideLanguageCopy{color:#eaf2ff!important}
:root[data-ol-theme="noche"] .appMission p{opacity:1!important}
:root[data-ol-theme="noche"] .lessonItem.active{background:#354064!important;color:#f0edff!important}
:root[data-ol-theme="noche"] .siteFooter,.siteFooter *{border-color:var(--line)}
:root[data-ol-theme="oceano"] :is(.viewModes button.active,.experienceSwitch button.active,.topCompact .versionMark),
:root[data-ol-theme="bosque"] :is(.viewModes button.active,.experienceSwitch button.active,.topCompact .versionMark),
:root[data-ol-theme="arena"] :is(.viewModes button.active,.experienceSwitch button.active,.topCompact .versionMark){background:var(--ol-accent)!important;color:#fff!important;border-color:var(--ol-accent)!important}
:root[data-ol-theme="oceano"] :is(.topCompact .headerMore>summary,.guideStateCue,.guideTip,.guideLanguageBar),
:root[data-ol-theme="bosque"] :is(.topCompact .headerMore>summary,.guideStateCue,.guideTip,.guideLanguageBar),
:root[data-ol-theme="arena"] :is(.topCompact .headerMore>summary,.guideStateCue,.guideTip,.guideLanguageBar){background:var(--ol-soft)!important;border-color:var(--line)!important}
:root[data-ol-theme="oceano"] :is(.guideTip,.guideStateCue,.guideLanguageCopy strong,.topCompact .headerMore>summary),
:root[data-ol-theme="bosque"] :is(.guideTip,.guideStateCue,.guideLanguageCopy strong,.topCompact .headerMore>summary),
:root[data-ol-theme="arena"] :is(.guideTip,.guideStateCue,.guideLanguageCopy strong,.topCompact .headerMore>summary){color:var(--ol-accent)!important}
:root[data-ol-theme="oceano"] .guideProgress span,:root[data-ol-theme="bosque"] .guideProgress span,:root[data-ol-theme="arena"] .guideProgress span{background:var(--ol-accent)!important}
:root[data-ol-theme="oceano"] .guideTip,:root[data-ol-theme="bosque"] .guideTip,:root[data-ol-theme="arena"] .guideTip{font-weight:720}

/* v9.5 · Profundización formativa, colores heredados del tema. */
.learnDeep{border-top:1px solid currentColor;padding-top:10px;margin-top:15px}
.learnDeep h4,.learnPractice h4{font-size:calc(14px * var(--ol-font-scale,1));margin:10px 0 6px}
.learnDeep p,.learnPractice p,.learnPractice li{font-size:calc(13px * var(--ol-font-scale,1));line-height:1.75}
.learnPractice{border:1px solid currentColor;border-radius:14px;padding:16px;margin:18px 0}
.learnPractice summary{cursor:pointer;font-weight:700;padding:10px 0}
.learnPractice summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.learnPractice ul{padding-left:22px}

/* v9.6 · Contenido, diagramas y comparación adaptable al tema. */
.learnDiagram,.learnProject,.learnMistake,.learnComparison{margin:18px 0;padding:16px;border:1px solid #aa9bc655;border-radius:14px;color:inherit;background:transparent}
.learnDiagram figcaption,.learnProject h4,.learnComparison h4,.learnMistake h4{font-size:calc(14px * var(--ol-font-scale,1));font-weight:800;margin:0 0 12px}
.learnDiagramNodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.learnDiagramNodes div{min-width:0;border:1px solid #9c8bbb88;border-radius:12px;padding:14px 10px;background:#a68dc90b;box-shadow:0 4px 12px #33244709}
.learnDiagramNodes strong,.learnDiagramNodes span{display:block;font-size:calc(12px * var(--ol-font-scale,1));overflow-wrap:anywhere}
.learnDiagramNodes span{margin-top:8px;line-height:1.6}
.learnDiagram p,.learnProject p,.learnProject li,.learnMistake p{font-size:calc(13px * var(--ol-font-scale,1));line-height:1.8}
.learnProject{border-left:4px solid #8c73bd}
.learnProject summary,.learnProjectIndex summary{cursor:pointer;font-weight:750;padding:10px 0}
.learnProjectIndex{margin:14px 0;padding:0 12px;border:1px solid #aa9bc655;border-radius:10px}
.learnProjectIndex nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-bottom:12px}
.learnProjectIndex button{font:inherit;font-size:calc(12px * var(--ol-font-scale,1));text-align:left;line-height:1.5;padding:9px;border:1px solid #aa9bc655;border-radius:7px;color:inherit;background:transparent;cursor:pointer}
.learnProjectIndex button:hover{background:#a68dc91c}
.learnTableWrap{max-width:100%;overflow-x:auto}
.learnComparison table{border-collapse:collapse;width:100%;font-size:calc(12px * var(--ol-font-scale,1));line-height:1.65;table-layout:fixed}
.learnComparison th,.learnComparison td{vertical-align:top;text-align:left;padding:10px 8px;border-bottom:1px solid #aa9bc644;overflow-wrap:anywhere}
.learnComparison th{font-weight:800}
.learnProject summary:focus-visible,.learnProjectIndex summary:focus-visible,.learnProjectIndex button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:600px){.learnDiagramNodes{grid-template-columns:1fr}.learnProjectIndex nav{grid-template-columns:1fr}.learnComparison,.learnProject,.learnDiagram,.learnMistake{padding:11px}.learnComparison th,.learnComparison td{padding:7px 5px}}

/* v9.7 · Aprendizaje guiado y controles dentro del diálogo. */
.learnToolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 22px;border-top:1px solid #aa9bc633;flex:0 0 auto;font-size:calc(12px * var(--ol-font-scale,1));color:inherit}
.learnToolbar label{font-weight:750}.learnToolbar select{font:inherit;border:1px solid #aa9bc677;border-radius:8px;padding:7px 10px;color:inherit;background:transparent}.learnToolbar option{background:#fff;color:#24334b}.learnToolbar span{margin-left:auto;opacity:.8}
.learnGroup{font-weight:850;font-size:calc(10px * var(--ol-font-scale,1));text-transform:uppercase;letter-spacing:.6px;padding:12px 6px 3px;color:#786496}
.learnPlan,.learnTrace,.learnReview,.learnAssessment,.learnGlossary{border:1px solid #aa9bc655;border-radius:12px;padding:14px;margin:14px 0;background:transparent;color:inherit}
.learnPlan h4,.learnTrace h4,.learnReview h4,.learnAssessment h4{font-size:calc(14px * var(--ol-font-scale,1));margin:8px 0}
.learnPlan p,.learnPlan li,.learnTrace li,.learnTrace p,.learnReview p,.learnReview li,.learnAssessment>p{font-size:calc(12.5px * var(--ol-font-scale,1));line-height:1.8}
.learnTrace ol{padding-left:22px}.learnTrace li{margin:9px 0}.learnTraceCount{display:inline-block;font-size:calc(11px * var(--ol-font-scale,1));padding:8px}
.learnPrerequisites{display:flex;flex-wrap:wrap;gap:6px}
.learnPrerequisites button,.learnTrace button,.learnReview button{font:inherit;font-size:calc(12px * var(--ol-font-scale,1));color:inherit;line-height:1.6;border:1px solid #aa9bc677;border-radius:8px;padding:7px 10px;background:transparent;cursor:pointer}
.learnTrace button{margin:4px}.learnTrace button:disabled{opacity:.45;cursor:default}.learnReview{border-left:4px solid #9272bb}.learnReview li{margin:9px 0}
.learnGlossary summary{font-weight:750;cursor:pointer;font-size:calc(12px * var(--ol-font-scale,1))}.learnGlossary dt{font-weight:800;margin:12px 0 4px;font-size:calc(12px * var(--ol-font-scale,1))}.learnGlossary dd{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.8;margin-left:0}
.learnToolbar select:focus-visible,.learnTrace button:focus-visible,.learnReview button:focus-visible,.learnPrerequisites button:focus-visible,.learnGlossary summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.learnStageDesc{color:inherit;opacity:.8}
:root[data-ol-theme="noche"] :is(.learnLead,.learnKicker,.learnGroup,.learnCaseHeader strong,.learnCase p,.learnDeep h4,.learnMain h4,.learnQuestion h4){color:#e5e8f6}
:root[data-ol-theme="noche"] :is(.learnStages,.learnCase,.learnFooter,.learnDiff,.learnOption,.learnActions button,.learnConcepts button,.learnFooterActions button){background:#22324b;color:#e8efff;border-color:#4b5873}
:root[data-ol-theme="noche"] :is(.learnStage,.learnStageDesc,.learnStageHead small,.learnFooter #learnTotals){color:#dce5f6}
:root[data-ol-theme="noche"] .learnStage.active,:root[data-ol-theme="noche"] .learnOption[aria-pressed=true]{background:#403958;border-color:#b4a0df}
:root[data-ol-theme="noche"] .learnFeedback{background:#183e39;color:#d2f7eb}:root[data-ol-theme="noche"] .learnFeedback.wrong{background:#493a28;color:#ffe9c4}
@media(max-width:800px){.learnGroup{display:none}.learnToolbar{padding:8px 13px;gap:7px}.learnToolbar span{display:none}.learnFooterActions{flex-wrap:wrap}.learnFooter{padding:8px 13px}.learnHead p{margin-bottom:0}.learnHead h2{font-size:calc(19px * var(--ol-font-scale,1))}}

/* v9.8 · Aula editorial: jerarquía, lectura y práctica. */
.learningRoadmapDialog{
 --course-panel:var(--white,#fff);--course-paper:var(--bg,#f5f6fa);--course-ink:var(--ink,#293550);--course-muted:var(--muted,#65718a);--course-border:var(--line,#e1e5ef);--course-accent:var(--ol-accent,#7360bc);--course-soft:var(--ol-soft,#f2efff);
 width:min(1280px,calc(100vw - 36px));max-width:1280px;height:min(940px,calc(100dvh - 36px));max-height:calc(100dvh - 36px);border-radius:24px;border-color:var(--course-border);background:var(--course-panel);color:var(--course-ink);box-shadow:0 35px 110px #17233840
}
.learningRoadmapDialog::backdrop{background:#17233899;backdrop-filter:blur(6px)}
.learningRoadmapDialog .learnHead{padding:22px 28px 18px;background:var(--course-panel);border-bottom:0;gap:22px}
.learningRoadmapDialog .learnEyebrow{font-size:calc(10px * var(--ol-font-scale,1));letter-spacing:1.8px;color:var(--course-accent)}
.learningRoadmapDialog .learnHead h2{font-size:calc(24px * var(--ol-font-scale,1));font-weight:800;letter-spacing:-.7px;color:var(--course-ink);margin:7px 0 8px;line-height:1.2}
.learningRoadmapDialog .learnHead p{font-size:calc(12px * var(--ol-font-scale,1));color:var(--course-muted);line-height:1.6;max-width:850px}
.learningRoadmapDialog .learnClose{border-color:var(--course-border);color:var(--course-ink);background:var(--course-paper);width:40px;min-width:40px;height:40px;padding:0;border-radius:50%;font-size:17px}
.learningRoadmapDialog .learnToolbar{padding:11px 28px;border-top:1px solid var(--course-border);border-bottom:1px solid var(--course-border);background:var(--course-panel);gap:10px;color:var(--course-muted)}
.learningRoadmapDialog .learnToolbar label{color:var(--course-ink);font-size:calc(11px * var(--ol-font-scale,1))}
.learningRoadmapDialog .learnToolbar select{min-width:130px;border-color:var(--course-border);background:var(--course-paper);font-weight:700;color:var(--course-ink)}
.learningRoadmapDialog .learnToolbar span{font-size:calc(11px * var(--ol-font-scale,1));letter-spacing:.15px}
.learningRoadmapDialog .learnProgress{height:3px;background:var(--course-border)}
.learningRoadmapDialog .learnProgress span{background:var(--course-accent)}
.learningRoadmapDialog .learnLayout{grid-template-columns:260px minmax(0,1fr);min-height:0;overflow:hidden}
.learningRoadmapDialog .learnStages{padding:16px 13px 24px;background:var(--course-panel);border-color:var(--course-border);gap:5px;scrollbar-width:thin}
.learningRoadmapDialog .learnGroup{font-size:calc(9px * var(--ol-font-scale,1));line-height:1.6;letter-spacing:1px;color:var(--course-muted);padding:19px 9px 7px}
.learningRoadmapDialog .learnGroup:first-child{padding-top:3px}
.learningRoadmapDialog .learnStage{position:relative;padding:11px 12px;border-radius:10px;color:var(--course-ink);gap:4px;border:1px solid transparent;box-shadow:none}
.learningRoadmapDialog .learnStageHead strong{font-weight:700;font-size:calc(11px * var(--ol-font-scale,1));line-height:1.55;letter-spacing:-.1px}
.learningRoadmapDialog .learnStageHead small{color:var(--course-muted);font-size:calc(10px * var(--ol-font-scale,1));background:var(--course-paper);padding:2px 5px;border-radius:5px;font-variant-numeric:tabular-nums}
.learningRoadmapDialog .learnStageDesc{color:var(--course-muted);font-size:calc(10px * var(--ol-font-scale,1));line-height:1.5}
.learningRoadmapDialog .learnStage.active{background:var(--course-soft);border-color:var(--course-border);color:var(--course-accent)}
.learningRoadmapDialog .learnStage.active::before{content:'';position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--course-accent)}
.learningRoadmapDialog .learnStage:hover{background:var(--course-soft)}
.learningRoadmapDialog .learnMain{background:var(--course-paper);padding:28px 32px 36px;scrollbar-gutter:stable;scroll-padding-top:15px;color:var(--course-ink)}
.learnHero{display:grid;grid-template-columns:54px minmax(0,1fr);gap:18px;margin:0 0 19px;align-items:start}
.learnHeroNumber{border:1px solid var(--course-border);color:var(--course-accent);background:var(--course-panel);border-radius:16px;aspect-ratio:1;display:grid;place-items:center;font-size:23px;font-weight:750;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.learningRoadmapDialog .learnHero h3{font-size:calc(29px * var(--ol-font-scale,1));font-weight:800;letter-spacing:-.9px;line-height:1.15;margin:7px 0 12px;color:var(--course-ink)}
.learningRoadmapDialog .learnHero .learnKicker{font-size:calc(9px * var(--ol-font-scale,1));line-height:1.7;letter-spacing:1px;color:var(--course-accent)}
.learningRoadmapDialog .learnLead{font-size:calc(13px * var(--ol-font-scale,1));line-height:1.85;color:var(--course-muted);margin:0;max-width:78ch}
.learnJumpNav{display:flex;gap:5px;flex-wrap:wrap;padding:7px 0 14px;margin-bottom:5px;border-bottom:1px solid var(--course-border)}
.learnJumpNav button{background:transparent;border:1px solid var(--course-border);color:var(--course-ink);font:inherit;font-size:calc(11px * var(--ol-font-scale,1));font-weight:650;padding:7px 12px;border-radius:7px;cursor:pointer}
.learnJumpNav button:hover{background:var(--course-soft);color:var(--course-accent)}
.learnFoundationGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.75fr);gap:14px;align-items:start}
.learningRoadmapDialog :is(.learnPlan,.learnGlossary,.learnComparison,.learnPractice,.learnWorkshop,.learnAssessment,.learnProject,.learnMistake,.learnDiagram,.learnReview){background:var(--course-panel);border:1px solid var(--course-border);border-radius:15px;padding:21px;margin:16px 0;color:var(--course-ink);box-shadow:0 3px 12px #14233803}
.learningRoadmapDialog .learnFoundationGrid>.learnPlan,.learningRoadmapDialog .learnFoundationGrid>.learnGlossary{margin:12px 0 16px;padding:17px}
.learningRoadmapDialog .learnPlan h4{margin-top:4px;font-size:calc(13px * var(--ol-font-scale,1))}
.learningRoadmapDialog .learnPlan li{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.8}
.learningRoadmapDialog .learnPlan ul{padding-left:18px;margin:8px 0}
.learningRoadmapDialog .learnPlan>p{margin:9px 0;font-size:calc(11px * var(--ol-font-scale,1));color:var(--course-muted)}
.learningRoadmapDialog .learnPrerequisites button{font-size:calc(10px * var(--ol-font-scale,1));line-height:1.5;padding:5px 7px;border-color:var(--course-border);background:var(--course-paper);color:var(--course-accent)}
.learningRoadmapDialog .learnGlossary summary{font-size:calc(11px * var(--ol-font-scale,1));line-height:1.7;color:var(--course-ink)}
.learningRoadmapDialog .learnGlossary dd{color:var(--course-muted)}
.learningRoadmapDialog .learnCase{border:1px solid var(--course-border);border-radius:15px;background:var(--course-panel);padding:23px;margin:14px 0 20px;box-shadow:0 3px 12px #14233803;color:var(--course-ink)}
.learningRoadmapDialog .learnCaseHeader{padding-bottom:12px;border-bottom:1px solid var(--course-border);margin-bottom:12px;align-items:flex-start}
.learningRoadmapDialog .learnCaseHeader strong{font-size:calc(15px * var(--ol-font-scale,1));color:var(--course-ink);line-height:1.5;font-weight:750}
.learningRoadmapDialog .learnCaseHeader>span{font-size:calc(8px * var(--ol-font-scale,1));letter-spacing:.7px;white-space:nowrap;background:var(--course-soft);color:var(--course-accent);padding:5px 7px}
.learningRoadmapDialog .learnCase p{font-size:calc(13px * var(--ol-font-scale,1));color:var(--course-muted);line-height:1.85}
.learnCodeFrame{border:1px solid #25354f;border-radius:12px;overflow:hidden;background:#172338;margin:17px 0}
.learnCodeHeader{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #35425b;background:#1e2d45;color:#c7d4e9;font-size:calc(10px * var(--ol-font-scale,1));letter-spacing:.2px}
.learnCodeHeader button{font:inherit;border:1px solid #52617a;color:#eef2ff;background:#293a55;padding:5px 9px;border-radius:6px;cursor:pointer;white-space:nowrap}
.learnCodeBody{display:grid;grid-template-columns:max-content minmax(max-content,1fr);max-height:380px;overflow:auto;scrollbar-width:thin}
.learningRoadmapDialog .learnCodeBody pre{max-height:none;margin:0;border-radius:0;padding:16px 18px 16px 12px;white-space:pre;word-break:normal;overflow:visible;background:transparent;color:#e6edf8;font:calc(12px * var(--ol-font-scale,1))/1.85 ui-monospace,SFMono-Regular,Consolas,monospace}
.learnCodeGutter{list-style:none;margin:0;padding:16px 10px 16px 14px;text-align:right;border-right:1px solid #344159;color:#8a9ab6;background:#172338;font:calc(12px * var(--ol-font-scale,1))/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;user-select:none}
.learnCodeGutter li{margin:0;padding:0;line-height:inherit}
.learningRoadmapDialog .learnCopyStatus{margin:0;padding:0 14px;color:#c4efdf;font-size:calc(10px * var(--ol-font-scale,1));line-height:2}.learnCopyStatus:empty{display:none}
.learningRoadmapDialog .learnDiff{border:0;border-left:2px solid var(--course-border);border-radius:0;background:transparent;padding:6px 12px;font-size:calc(11px * var(--ol-font-scale,1));color:var(--course-muted)}
.learningRoadmapDialog .learnDeep{border-top:1px solid var(--course-border);margin-top:20px;padding-top:10px}
.learningRoadmapDialog .learnDeep h4{font-size:calc(13px * var(--ol-font-scale,1));color:var(--course-ink)}
.learnSectionLabel{font-size:calc(9px * var(--ol-font-scale,1));font-weight:800;letter-spacing:1.2px;line-height:1.7;color:var(--course-accent);margin-bottom:7px}
.learningRoadmapDialog :is(.learnPractice,.learnWorkshop,.learnAssessment,.learnProject)>h4{font-size:calc(18px * var(--ol-font-scale,1));line-height:1.4;letter-spacing:-.3px;margin:5px 0 12px;color:var(--course-ink)}
.learningRoadmapDialog .learnTrace{background:var(--course-paper);border:1px solid var(--course-border);border-radius:12px;padding:18px;margin-top:20px;color:var(--course-ink)}
.learningRoadmapDialog .learnTrace p,.learningRoadmapDialog .learnTrace li{color:var(--course-ink);font-size:calc(12px * var(--ol-font-scale,1));line-height:1.85}
.learningRoadmapDialog :is(.learnTrace button,.learnHintTools button){font:inherit;font-size:calc(11px * var(--ol-font-scale,1));color:var(--course-ink);background:var(--course-panel);border:1px solid var(--course-border);border-radius:7px;padding:8px 10px;cursor:pointer;line-height:1.5}
.learningRoadmapDialog :is(.learnTrace button,.learnHintTools button):disabled{opacity:.45;cursor:default}
.learningRoadmapDialog .learnPractice{border-top:3px solid var(--course-accent)}
.learnWorkshop{border-top:3px solid #b89a62!important}
.learningRoadmapDialog .learnWorkshop>p,.learnWorkshop details p{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.85;color:var(--course-muted)}
.learningRoadmapDialog .learnWorkshop>pre,.learningRoadmapDialog .learnMistake pre{padding:16px 18px;border-radius:10px;background:#172338;color:#e6edf8;font:calc(12px * var(--ol-font-scale,1))/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}
.learnWorkshopPrompt{font-weight:750;color:var(--course-ink)!important}
.learnNote{display:block;margin:15px 0;font-size:calc(12px * var(--ol-font-scale,1));line-height:1.7;color:var(--course-ink)}
.learnNote>span{display:block;font-weight:750;margin-bottom:7px}
.learnNote textarea{display:block;box-sizing:border-box;resize:vertical;min-height:95px;width:100%;max-width:100%;padding:12px 13px;border:1px solid var(--course-border);border-radius:9px;background:var(--course-panel);color:var(--course-ink);font:inherit;line-height:1.8}
.learnNote textarea::placeholder{color:var(--course-muted);opacity:.85}
.learnNote small{display:block;font-size:calc(10px * var(--ol-font-scale,1));line-height:1.7;color:var(--course-muted);margin-top:5px}
.learnNote textarea:focus-visible{outline:2px solid var(--course-accent);outline-offset:2px}
.learnHintTools{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:12px 0}
.learnHintTools span{font-size:calc(10px * var(--ol-font-scale,1));color:var(--course-muted)}
.learnHintList p{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.8;border-left:2px solid #b89a62;padding-left:12px}
.learningRoadmapDialog details>summary{cursor:pointer;line-height:1.7}
.learnWorkshop details{border-top:1px solid var(--course-border);padding-top:12px;font-size:calc(12px * var(--ol-font-scale,1))}
.learningRoadmapDialog .learnTransfer{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.85;border-top:1px solid var(--course-border);padding-top:12px;color:var(--course-muted)}
.learningRoadmapDialog .learnAssessment{padding-top:18px}
.learningRoadmapDialog .learnQuestion{border-top-color:var(--course-border);padding:17px 0 7px}
.learningRoadmapDialog .learnQuestion h4{font-size:calc(13px * var(--ol-font-scale,1));line-height:1.7;color:var(--course-ink)}
.learningRoadmapDialog .learnOption{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.7;padding:11px 13px;background:var(--course-panel);border-color:var(--course-border);color:var(--course-ink)}
.learningRoadmapDialog .learnOption:hover,.learningRoadmapDialog .learnOption[aria-pressed=true]{background:var(--course-soft);border-color:var(--course-accent);color:var(--course-ink)}
.learningRoadmapDialog .learnProject{border-left:3px solid var(--course-accent)}
.learningRoadmapDialog .learnProjectIndex{border-color:var(--course-border);padding:5px 14px;color:var(--course-ink)}
.learningRoadmapDialog .learnProjectIndex button{border-color:var(--course-border);color:var(--course-ink)}
.learningRoadmapDialog .learnActions{justify-content:flex-end;margin-top:24px;padding-top:18px;border-top:1px solid var(--course-border)}
.learningRoadmapDialog .learnActions button{padding:11px 14px;background:var(--course-panel);border-color:var(--course-border);color:var(--course-accent)}
.learningRoadmapDialog .learnActions [data-learn-next]{background:var(--course-accent);color:var(--course-panel);border-color:var(--course-accent)}
.learningRoadmapDialog .learnFooter{padding:13px 22px;background:var(--course-panel);border-color:var(--course-border);gap:10px}
.learningRoadmapDialog .learnFooter #learnTotals{font-size:calc(10px * var(--ol-font-scale,1));line-height:1.7;color:var(--course-muted);font-weight:600;flex:1 1 300px}
.learningRoadmapDialog .learnFooterActions button{font-size:calc(10px * var(--ol-font-scale,1));padding:8px 10px;color:var(--course-ink);background:var(--course-panel);border-color:var(--course-border)}
.learningRoadmapDialog .learnFooterActions #learnCloseBottom{background:var(--course-soft);color:var(--course-accent);border-color:var(--course-border)}
.learningRoadmapDialog :is(.learnJumpNav button,.learnHintTools button,.learnCodeHeader button):focus-visible{outline:2px solid var(--course-accent);outline-offset:3px}
:root[data-ol-theme="noche"] .learningRoadmapDialog .learnMain{background:#142033!important}
:root[data-ol-theme="noche"] .learningRoadmapDialog :is(.learnStages,.learnCase,.learnFooter){background:var(--course-panel)!important}
:root[data-ol-theme="noche"] .learningRoadmapDialog :is(.learnHero h3,.learnDeep h4,.learnQuestion h4,.learnCaseHeader strong){color:var(--course-ink)}
:root[data-ol-theme="noche"] .learningRoadmapDialog .learnDiagramNodes div{background:#ffffff05}
:root[data-ol-theme="noche"] .learningRoadmapDialog .learnStage.active{background:var(--course-soft)}
@media(min-width:1500px){.learningRoadmapDialog .learnMain{padding:32px 42px}}
@media(max-width:1000px){.learningRoadmapDialog .learnLayout{grid-template-columns:225px minmax(0,1fr)}.learningRoadmapDialog .learnMain{padding:23px}.learnFoundationGrid{grid-template-columns:1fr;gap:0}.learningRoadmapDialog .learnFoundationGrid>.learnGlossary{margin-top:0}.learningRoadmapDialog .learnHero h3{font-size:calc(25px * var(--ol-font-scale,1))}}
@media(max-width:800px){
 .learningRoadmapDialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);border-radius:16px}
 .learningRoadmapDialog .learnHead{padding:15px 17px 13px;gap:12px}.learningRoadmapDialog .learnHead h2{font-size:calc(19px * var(--ol-font-scale,1));letter-spacing:-.4px;line-height:1.2}.learningRoadmapDialog .learnHead p{font-size:calc(10px * var(--ol-font-scale,1));line-height:1.6}
 .learningRoadmapDialog .learnToolbar{padding:8px 16px}.learningRoadmapDialog .learnToolbar label{font-size:calc(10px * var(--ol-font-scale,1))}.learningRoadmapDialog .learnToolbar select{min-width:110px;font-size:calc(11px * var(--ol-font-scale,1));padding:6px 8px}
 .learningRoadmapDialog .learnLayout{display:flex;flex-direction:column;min-height:0}.learningRoadmapDialog .learnStages{flex:0 0 auto;flex-direction:row;border-right:0;border-bottom:1px solid var(--course-border);padding:8px 10px;gap:5px;overflow-y:hidden;overflow-x:auto}
 .learningRoadmapDialog .learnStage{min-width:155px;max-width:195px;padding:8px 10px}.learningRoadmapDialog .learnStageHead strong{font-size:calc(10px * var(--ol-font-scale,1))}.learningRoadmapDialog .learnStageHead small{font-size:calc(9px * var(--ol-font-scale,1))}.learningRoadmapDialog .learnStageDesc{display:none}
 .learningRoadmapDialog .learnMain{flex:1 1 auto;min-height:0;padding:19px 17px 28px}.learnHero{grid-template-columns:42px minmax(0,1fr);gap:11px}.learnHeroNumber{font-size:18px;border-radius:12px}.learningRoadmapDialog .learnHero h3{font-size:calc(23px * var(--ol-font-scale,1));letter-spacing:-.6px}.learningRoadmapDialog .learnLead{font-size:calc(12px * var(--ol-font-scale,1))}
 .learningRoadmapDialog :is(.learnCase,.learnPlan,.learnGlossary,.learnComparison,.learnPractice,.learnWorkshop,.learnAssessment,.learnProject,.learnMistake,.learnDiagram,.learnReview){padding:16px}.learningRoadmapDialog .learnCaseHeader{display:block}.learningRoadmapDialog .learnCaseHeader>span{display:inline-block;margin-top:7px}
 .learnJumpNav{gap:5px}.learnJumpNav button{font-size:calc(10px * var(--ol-font-scale,1));padding:6px 8px}.learnCodeHeader{padding:9px 10px}.learnCodeBody{max-height:310px}.learningRoadmapDialog .learnCodeBody pre,.learnCodeGutter{font-size:calc(11px * var(--ol-font-scale,1))}
 .learningRoadmapDialog .learnFooter{padding:9px 14px}.learningRoadmapDialog .learnFooter #learnTotals{flex-basis:100%;font-size:calc(9px * var(--ol-font-scale,1))}.learningRoadmapDialog .learnFooterActions{width:100%;justify-content:space-between;gap:5px}.learningRoadmapDialog .learnFooterActions button{font-size:calc(9px * var(--ol-font-scale,1));padding:7px 8px}
}
@media(max-width:480px){.learningRoadmapDialog .learnHead p{display:none}.learningRoadmapDialog .learnHead{padding:12px 14px}.learningRoadmapDialog .learnHead h2{font-size:calc(17px * var(--ol-font-scale,1));margin:5px 0 0}.learningRoadmapDialog .learnEyebrow{font-size:calc(8px * var(--ol-font-scale,1));letter-spacing:1px}.learningRoadmapDialog .learnClose{width:34px;min-width:34px;height:34px}.learningRoadmapDialog .learnMain{padding:16px 13px 24px}.learnHero{grid-template-columns:1fr;gap:8px}.learnHeroNumber{display:none}.learningRoadmapDialog .learnHero h3{font-size:calc(22px * var(--ol-font-scale,1))}.learningRoadmapDialog .learnHero .learnKicker{font-size:calc(8px * var(--ol-font-scale,1))}.learnCodeHeader{align-items:flex-start}.learnCodeHeader>span{max-width:60%}.learningRoadmapDialog .learnTrace{padding:13px}}
/* Coherencia del laboratorio con el aula, sin cambiar su distribución. */
.top.topCompact{border-bottom:1px solid var(--line,#e1e5ef);box-shadow:0 4px 24px #18243b08}
.mainHead{border-color:var(--line,#e1e5ef);background:var(--white,#fff);box-shadow:0 5px 20px #18243b05}
.scene{border-color:var(--line,#e1e5ef);box-shadow:0 12px 32px #18243b0b}
.guideTop,.microCard,.inspect{border-color:var(--line,#e1e5ef);box-shadow:0 3px 12px #18243b04}
.stageButtons button,.outline,.zoom button{border-color:var(--line,#e1e5ef);box-shadow:0 3px 8px #18243b05}
.siteFooter{border-color:var(--line,#e1e5ef);box-shadow:0 8px 30px #18243b06}
.learningRoadmapDialog .learnCodeFrame .learnCopyStatus{margin:0;padding:0 14px;color:#c4efdf;font-size:calc(10px * var(--ol-font-scale,1));line-height:2}

/* Contraste de texto secundario específico del aula. */
.learningRoadmapDialog{--course-muted:#5e6b81}
:root[data-ol-theme="oceano"] .learningRoadmapDialog{--course-muted:#4d697b}
:root[data-ol-theme="bosque"] .learningRoadmapDialog{--course-muted:#546e5f}
:root[data-ol-theme="arena"] .learningRoadmapDialog{--course-muted:#78614d}
:root[data-ol-theme="noche"] .learningRoadmapDialog{--course-muted:#b4c0d5}

/* v9.9 · Claridad conceptual, lectura progresiva y navegación móvil. */
.learnEssential,.learnThread{padding:19px 21px;margin:15px 0;border:1px solid var(--course-border);border-radius:13px;background:var(--course-panel);color:var(--course-ink)}
.learnEssential{border-left:3px solid var(--course-accent)}
.learnEssential h4,.learnEssential h5{font-size:calc(12px * var(--ol-font-scale,1));margin:0 0 6px;font-weight:800;color:var(--course-accent)}
.learnEssential h5{margin-top:13px;font-size:calc(11px * var(--ol-font-scale,1))}
.learnEssential p,.learnThread p{font-size:calc(13px * var(--ol-font-scale,1));line-height:1.85;margin:5px 0;color:var(--course-ink)}
.learnThread .learnContinuity{font-size:calc(12px * var(--ol-font-scale,1));color:var(--course-muted);margin-top:10px}
.learnFold{border:1px solid var(--course-border);background:var(--course-panel);border-radius:12px;margin:14px 0;overflow:hidden;color:var(--course-ink)}
.learnFold>summary{padding:14px 17px;font-size:calc(12px * var(--ol-font-scale,1));font-weight:750;line-height:1.7;cursor:pointer}
.learnFold[open]>summary{border-bottom:1px solid var(--course-border);color:var(--course-accent);background:var(--course-soft)}
.learnFoldBody{min-width:0;padding:1px 14px 12px}
.learningRoadmapDialog .learnFoldBody>:is(.learnWorkshop,.learnAssessment,.learnProject,.learnComparison,.learnMistake){border:0;border-radius:0;box-shadow:none;padding:13px 4px;margin:8px 0}
.learningRoadmapDialog .learnFoldBody>.learnWorkshop{border-top:0!important}
.learningRoadmapDialog .learnFoldBody>.learnTrace{margin:12px 0 2px}
.learnFold>summary:focus-visible{outline:2px solid var(--course-accent);outline-offset:-3px}
.learningRoadmapDialog .learnDiagramNodes .learnSemanticBadge{display:flex;align-items:center;gap:7px;font-size:calc(9px * var(--ol-font-scale,1));font-weight:800;letter-spacing:.2px;line-height:1.5;color:var(--course-muted);margin:0 0 12px}
.learnSemanticBadge i{display:inline-block;width:11px;height:11px;border:1.5px solid currentColor;flex:0 0 11px;border-radius:2px}
[data-semantic-role="instance"] .learnSemanticBadge i{border-radius:50%;background:var(--course-soft)}
[data-semantic-role="reference"] .learnSemanticBadge i{width:14px;height:7px;border-radius:6px;flex-basis:14px}
[data-semantic-role="contract"] .learnSemanticBadge i{transform:rotate(45deg);border-radius:0}
[data-semantic-role="role"] .learnSemanticBadge i{border-style:dashed}
[data-semantic-role="action"] .learnSemanticBadge i{border-radius:50%;border-width:3px}
[data-semantic-role="state"] .learnSemanticBadge i{border-bottom-width:4px}
.learningRoadmapDialog .learnDiagramNodes>div{background:var(--course-paper);border-color:var(--course-border);box-shadow:none;padding:16px;border-radius:11px}
.learningRoadmapDialog .learnDiagramNodes strong{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.6;color:var(--course-ink)}
.learningRoadmapDialog .learnDiagramNodes>div>span:not(.learnSemanticBadge){font-size:calc(12px * var(--ol-font-scale,1));line-height:1.8;color:var(--course-muted)}
.learnRelationTable{border-collapse:collapse;width:100%;table-layout:fixed;margin:17px 0 8px;font-size:calc(11px * var(--ol-font-scale,1));line-height:1.7}
.learnRelationTable caption{text-align:left;font-weight:750;padding:0 0 8px;color:var(--course-ink)}
.learnRelationTable td,.learnRelationTable th{text-align:left;vertical-align:top;padding:8px 7px;border-bottom:1px solid var(--course-border);overflow-wrap:anywhere}
.learningRoadmapDialog .learnDiagram .learnDiagramHint{font-size:calc(11px * var(--ol-font-scale,1));line-height:1.75;border-top:1px solid var(--course-border);padding-top:10px;color:var(--course-muted)}
.learnSceneReturn{border:1px solid var(--line,#e1e5ef);border-left:3px solid var(--ol-accent,#7360bc);border-radius:13px;background:var(--white,#fff);color:var(--ink,#293550);padding:16px 18px;margin-bottom:15px;scroll-margin-top:16px}
.learnSceneReturn[hidden]{display:none!important}
.learnSceneReturnHead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.learnSceneReturnHead strong{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.6;margin-right:auto}
.learnSceneReturnHead button,#learnAtlasReturn{font:inherit;font-size:calc(11px * var(--ol-font-scale,1));line-height:1.6;padding:8px 11px;border:1px solid var(--line,#e1e5ef);border-radius:8px;background:var(--ol-soft,#f2efff);color:var(--ol-accent,#7360bc);cursor:pointer;min-height:36px}
.learnSceneLens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.learnSceneLens b{font-size:calc(11px * var(--ol-font-scale,1));color:var(--ol-accent,#7360bc)}
.learnSceneLens p{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.85;margin:5px 0;color:var(--ink,#293550)}
.learnAtlasReturnBar{padding:0 22px}
.learnAtlasReturnBar:has(button:not([hidden])){padding:11px 22px;border-bottom:1px solid var(--line,#e1e5ef)}
.learnStagePickerGroup{display:none}
.learningRoadmapDialog .learnStagePickerGroup select{min-width:0;max-width:100%;width:100%}
@media(max-width:800px){
 .learningRoadmapDialog .learnStages{display:none}
 .learningRoadmapDialog .learnStagePickerGroup{display:flex;align-items:center;gap:9px;flex:1 0 100%;width:100%;font-size:calc(11px * var(--ol-font-scale,1))}
 .learningRoadmapDialog .learnStagePickerGroup select{flex:1;min-height:38px;font-size:calc(12px * var(--ol-font-scale,1))}
 .learningRoadmapDialog .learnToolbar{gap:7px 9px}
 .learningRoadmapDialog .learnToolbar>select{min-height:36px}
 .learnEssential,.learnThread{padding:16px;border-radius:11px}
 .learnFold>summary{padding:13px;font-size:calc(12px * var(--ol-font-scale,1));min-height:42px;box-sizing:border-box}
 .learnFoldBody{padding:1px 10px 10px}
 .learningRoadmapDialog :is(.learnLead,.learnEssential p,.learnThread p,.learnWorkshop>p,.learnPractice>p,.learnCase>p,.learnQuestion h4,.learnOption){font-size:calc(13px * var(--ol-font-scale,1));line-height:1.85}
 .learningRoadmapDialog .learnFooterActions button{min-height:36px;font-size:calc(10px * var(--ol-font-scale,1))}
 .learningRoadmapDialog .learnCodeBody pre,.learnCodeGutter{font-size:calc(12px * var(--ol-font-scale,1))}
 .learnSceneLens{grid-template-columns:1fr;gap:10px}
 .learnSceneReturn{padding:14px}.learnSceneReturnHead strong{flex-basis:100%}
}
@media(max-width:480px){.learnRelationTable{font-size:calc(10px * var(--ol-font-scale,1))}.learnRelationTable td,.learnRelationTable th{padding:7px 4px}.learningRoadmapDialog .learnDiagramNodes{gap:8px}.learningRoadmapDialog .learnDiagramNodes>div{padding:13px}.learnAtlasReturnBar{padding:0 13px}}

.learnSceneLegend{margin-top:12px;font-size:calc(12px * var(--ol-font-scale,1));line-height:1.8}.learnSceneLegend summary{font-weight:750;cursor:pointer}.learnSceneLegend ul{padding-left:20px}.learningRoadmapDialog .learnOriginalContext{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.85;color:var(--course-muted)}

.learnSceneReturn{flex:0 0 auto}

/* v9.9.1 · Cabecera fija incluso al llegar al pie de la página. */
:root{--ol-header-height:60px}
@media(max-width:890px){:root{--ol-header-height:99px}}
@media(max-width:520px){:root{--ol-header-height:91px}}
.top.topCompact{position:fixed!important;top:0;left:0;right:0;width:auto;z-index:900;background:var(--white,#fff)}
.shell{padding-top:var(--ol-header-height)}
html{scroll-padding-top:calc(var(--ol-header-height) + 12px)}
#scene,.guideTop,#learnSceneReturn,.siteFooter{scroll-margin-top:12px}
.topCompact .headerMorePanel{max-height:min(520px,calc(100vh - var(--ol-header-height) - 18px));max-height:min(520px,calc(100dvh - var(--ol-header-height) - 18px));overscroll-behavior:contain}
@media print{.top.topCompact{position:static!important}.shell{padding-top:0}html{scroll-padding-top:0}}

/* v9.9.2 · Selector de representación dentro de la guía rápida. */
.guideViewBar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:5px 0;padding:9px 11px;border:1px solid var(--line,#e1e5ef);border-radius:11px;background:var(--white,#fff)}
.guideViewBar .viewModes{background:var(--ol-soft,#f2efff);border-color:var(--line,#e1e5ef)}
.guideViewBar .viewModes button{font-size:calc(12px * var(--ol-font-scale,1));min-height:38px;color:var(--ink,#293550)}
.guideViewBar .viewModes button.active{background:var(--ol-accent,#7360bc);color:var(--white,#fff);box-shadow:none}
.guideViewBar p{font-size:calc(11px * var(--ol-font-scale,1));line-height:1.7;color:var(--muted,#65718a);flex:1 1 230px;margin:0}
@media(max-width:650px){.guideViewBar{padding:8px;gap:7px}.guideViewBar .viewModes{width:100%;flex-basis:100%}.guideViewBar .viewModes button{flex:1;min-height:40px}.guideViewBar p{font-size:calc(11px * var(--ol-font-scale,1))}}

/* v10.12 · Idioma humano separado del lenguaje de programación. */
.uiLocaleControl{display:flex;flex-direction:column;gap:7px;padding:7px 4px;font-size:12px;font-weight:750;color:var(--ink,#293550)}
.uiLocaleControl select{width:100%;min-height:38px;padding:7px 9px;background:var(--white,#fff);color:var(--ink,#293550);border:1px solid var(--line,#e1e5ef);border-radius:8px}
.topCompact .headerMorePanel .uiLocaleScope{font-size:11px;line-height:1.6;padding:0 4px;color:var(--muted,#65718a);margin:4px 0 11px}
.learnLocaleNote{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.85;padding:14px 16px;border:1px solid var(--course-border);border-left:3px solid var(--course-accent);border-radius:10px;background:var(--course-panel);margin-bottom:20px;color:var(--course-muted)}
.learnTranslatedLesson .learnCodeBody{display:block}.learnTranslatedLesson h3{overflow-wrap:anywhere}
:root:not([data-ui-locale="es"]) .topCompact .experienceSwitch button{white-space:normal!important;line-height:1.3}
@media(max-width:520px){:root:not([data-ui-locale="es"]) .topCompact .experienceSwitch button{max-width:115px}:root:not([data-ui-locale="es"]) .top.topCompact{min-height:104px!important}}

/* Brief learning-direction cue; preserves the heading layout. */
.didacticHeading{display:flex;align-items:center;gap:7px;min-height:24px}
.didacticCue{display:inline-flex;align-items:center;justify-content:center;flex:0 0 23px;font:700 23px/1 system-ui,sans-serif;color:var(--purple);pointer-events:none}
.didacticCue[hidden]{display:inline-flex;visibility:hidden}
.didacticAttention .didacticCue{animation:didacticBlink 1.2s ease-in-out 4}
.didacticAttention .didacticHeading{color:var(--purple)}
@keyframes didacticBlink{0%,100%{opacity:.4;transform:translateX(-2px)}50%{opacity:1;transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.didacticAttention .didacticCue{animation:none;opacity:1;transform:none}}

.objectWorldLaunch{display:block;padding:12px 14px;margin:10px 0;border:1px solid var(--purple);border-radius:12px;color:var(--purple);background:var(--plight);font-size:12px;font-weight:750;text-decoration:none;line-height:1.5}.objectWorldLaunch:hover{filter:brightness(.97)}
.callsPrimer{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--white);line-height:1.75;color:var(--ink);font-size:calc(13px * var(--ol-font-scale,1))}.callsPrimer h3{font-size:1.25em;line-height:1.45;margin:0 0 12px}.callsPrimer h4{font-size:1em;margin:22px 0 6px;color:var(--purple)}.callsPrimer p{font-size:inherit!important;line-height:inherit!important}.callsPrimer details{margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:10px}.callsPrimer summary{cursor:pointer;font-weight:700}.callsTableWrap{overflow:auto}.callsPrimer table{border-collapse:collapse;width:100%;min-width:400px;font-size:.9em}.callsPrimer th,.callsPrimer td{padding:9px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.callsPrimer th{color:var(--purple)}.callsPrimer pre{overflow:auto;white-space:pre;font-size:12px}.callsTask{padding:12px;border-left:3px solid var(--purple);background:var(--plight)}

/* Entry presentation: large initially, compact only after intentional navigation. */
.appMission,body.easyMode .appMission,body.easyMode.learningStarted .appMission{display:grid!important;grid-template-columns:minmax(0,1.65fr) minmax(220px,1fr);position:relative;align-items:center;gap:30px;padding:30px 34px;min-height:280px;flex:0 0 auto;border:1px solid var(--line);border-radius:24px;background:linear-gradient(120deg,var(--white),var(--plight));box-shadow:0 18px 44px #5140770b;isolation:isolate;overflow:hidden}
.appMission .missionBody{display:flex;flex-direction:column;gap:12px;min-width:0}.missionBrand{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px}.missionBrand strong{font-size:22px;letter-spacing:-.6px;color:var(--ink)}.missionBrand em{font-style:normal;color:var(--purple)}.missionFree{font-size:11px;font-weight:750;letter-spacing:.03em;color:var(--purple);border-left:1px solid var(--line);padding-left:14px}
.appMission h2,body.easyMode .appMission h2{font-size:clamp(30px,3.5vw,46px);font-weight:850;line-height:1.12;letter-spacing:-1.1px;margin:0;color:var(--ink);text-wrap:balance}.appMission h2>span{display:block}.appMission h2 .missionAccent{color:var(--purple)}.appMission .missionDescription,body.easyMode .appMission .missionDescription{font-size:calc(15px * var(--ol-font-scale,1));line-height:1.65;max-width:650px;margin:0;color:var(--muted)}.appMission .missionMeta p{font-size:calc(12px * var(--ol-font-scale,1));margin:0 0 7px;color:var(--muted)}.missionLanguages{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.missionLanguages b{font-size:11px;padding:3px 8px;border-radius:7px;border:1px solid var(--line);background:var(--white);color:var(--ink)}.missionActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.missionActions button{border:0;background:#7051aa;color:white;font-size:14px;font-weight:750;border-radius:10px;padding:12px 18px;cursor:pointer}.missionActions>span{font-size:11px;line-height:1.5;color:var(--muted);max-width:290px}.missionVisual{position:relative;min-width:0;align-self:center;padding:8px 8px 28px}.missionVisual svg{display:block;width:100%;max-width:340px;margin:auto;overflow:visible}.appMission .missionVisual p{font-size:12px;font-weight:700;color:var(--purple);text-align:center;line-height:1.5;margin:6px 0 0}.appMission .missionVisual .missionMascot,body.easyMode .appMission .missionMascot{position:absolute;bottom:-7px;right:-14px;width:56px;height:86px;object-fit:contain;background:none;border:0;border-radius:0;filter:drop-shadow(0 3px 3px #51407719)}
.missionExpand,.missionCompactLabel{display:none}.appMission[data-compact="true"],body.easyMode .appMission[data-compact="true"],body.easyMode.learningStarted .appMission[data-compact="true"]{display:flex!important;padding:12px 18px;min-height:0;gap:15px;border-radius:15px}.appMission[data-compact="true"] .missionBody{gap:3px;flex:1}.appMission[data-compact="true"] .missionBrand strong{font-size:17px}.appMission[data-compact="true"] .missionFree{font-size:10px}.appMission[data-compact="true"] :is(h2,.missionDescription,.missionMeta,.missionActions,.missionVisual){display:none}.appMission[data-compact="true"] .missionCompactLabel{display:block;font-size:11px;color:var(--muted)}.appMission[data-compact="true"] .missionExpand{display:block;flex-shrink:0;font-size:11px;font-weight:750;padding:8px 11px;border:1px solid var(--line);border-radius:9px;color:var(--purple);background:var(--white);cursor:pointer}
@media(max-width:900px){.appMission,body.easyMode .appMission{grid-template-columns:minmax(0,1fr) 220px;padding:25px;gap:15px}.appMission h2,body.easyMode .appMission h2{font-size:34px}}
@media(max-width:630px){.appMission,body.easyMode .appMission{grid-template-columns:1fr;min-height:0;padding:24px 21px;gap:18px}.appMission h2,body.easyMode .appMission h2{font-size:30px;line-height:1.16;letter-spacing:-.7px}.appMission .missionDescription,body.easyMode .appMission .missionDescription{font-size:14px}.missionVisual{max-width:260px;width:100%;justify-self:center;padding-bottom:16px}.missionVisual svg{max-height:150px}.missionBrand strong{font-size:21px}.missionFree{font-size:10px}.appMission[data-compact="true"] .missionFree{display:none}.appMission[data-compact="true"] .missionCompactLabel{font-size:10px}.appMission[data-compact="true"] .missionExpand{font-size:10px}.appMission[data-compact="true"]{padding:11px 13px}}

@media(max-width:630px){.missionBrand{flex-direction:column;align-items:flex-start;gap:5px}.missionFree{border:0;padding:0}.appMission[data-compact="true"] .missionBrand{display:block}}
.appMission .missionVisual{background:#fff;border:1px solid #e6e1ef;border-radius:18px;box-shadow:0 12px 30px #46336508}
:root[data-ol-theme="noche"] .appMission .missionVisual p{color:#705598!important}
:root[data-ol-theme="noche"] .appMission .missionBrand strong{color:#ecf3ff}
:root[data-ol-theme="noche"] .appMission :is(.missionFree,.missionCompactLabel){color:#bdc8dd}

/* Navigation belongs to the scene frame, with its own space below the drawing. */
.scene.hasSceneNavigation{display:flex;flex-direction:column;min-height:390px}.sceneViewport{position:relative;flex:1 1 auto;min-height:0;width:100%;overflow:hidden}.sceneViewport #c{height:100%;width:100%}.sceneNavigation{display:flex;flex:0 0 auto;align-items:center;gap:12px;padding:9px 12px;background:var(--white,#fff);border-top:1px solid var(--line,#e1e5ef);z-index:8;min-height:61px}.sceneNavigation[hidden]{display:none!important}.sceneNavigation button{flex:0 0 auto;min-height:40px;padding:9px 15px;border:1px solid var(--line,#d9dce9);border-radius:10px;background:var(--white,#fff);color:var(--ink,#34415c);font-size:12px;font-weight:750;cursor:pointer}.sceneNavigation button:last-child{background:#7051aa;color:white;border-color:#7051aa}.sceneNavigation button:disabled{opacity:.4;cursor:default}.sceneNavContext{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:center}.sceneNavContext strong{font-size:10px;color:var(--purple,#7051aa)}.sceneNavContext span{font-size:11px;color:var(--muted,#758096);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sceneNavContext progress{width:min(180px,100%);height:3px;align-self:center;accent-color:#8062b5;border:0}.sceneNavigation button:focus-visible{outline:3px solid #b39bdc;outline-offset:2px}:root[data-ol-theme="noche"] .sceneNavigation{background:#1b293e;border-color:#3b4b61}
@media(max-width:630px){.sceneNavigation{padding:7px 8px;gap:7px;min-height:58px}.sceneNavigation button{padding:8px 10px;font-size:11px;min-height:40px}.sceneNavContext span{font-size:10px}.sceneNavContext strong{font-size:9px}.scene.hasSceneNavigation{min-height:390px}}

/* Contextual scene controls and anchored inspector. */
.olContextTools{display:flex;align-items:center;gap:7px;padding:8px 11px;background:var(--white,#fff);border-bottom:1px solid var(--line,#e6e1ed);flex:0 0 auto;min-height:49px;z-index:9}.olContextTools[hidden]{display:none!important}.olContextTools label{display:flex;align-items:center;gap:7px;flex:1;min-width:0;font-size:11px;font-weight:750;color:var(--ink,#504365)}.olContextTools select{min-width:0;width:100%;max-width:230px;padding:7px;border:1px solid #d9d1e7;border-radius:8px;background:var(--white,#fff);color:var(--ink,#36415a);font:600 11px system-ui}.olContextTools button{padding:7px 9px;min-height:34px;background:var(--white,#fff);color:var(--ink,#594c6c);border:1px solid #dcd4e8;border-radius:8px;font:650 11px system-ui;cursor:pointer}.olContextTools button[aria-pressed=true]{background:#f0eafa;color:#644493;border-color:#c9b7e0}.olContext{position:absolute;inset:0;z-index:5;pointer-events:none;font:12px/1.45 system-ui,sans-serif;color:#34415a}.olContext[hidden],.olContext [hidden]{display:none!important}.olContextLines{position:absolute;width:100%;height:100%;inset:0;overflow:hidden}.olLeader{stroke:#9674c2;stroke-width:1.5;stroke-dasharray:4 3;fill:none}.olAnchor{stroke:#fff;stroke-width:2;fill:#8663b7}.olActivePath{fill:none;stroke-width:3;stroke-linejoin:round;opacity:.65}.olPacket{stroke:#fff;stroke-width:2}.olFlowBanner{position:absolute;top:10px;left:12px;right:52px;max-width:max-content;padding:6px 11px;border:1px solid #edcbaa;background:#fff7eeef;color:#984d1b;border-radius:9px;font-size:11px;font-weight:750;overflow-wrap:anywhere;box-shadow:0 3px 12px #26324b12}.olFlowBanner[data-phase=return]{background:#eff6ffef;border-color:#bdd2ef;color:#315f9d}.olContextCard{position:absolute;background:#fffffffa;color:#34415a;border:1px solid #cdbbe3;border-radius:13px;box-shadow:0 8px 24px #3c2c5b20;pointer-events:auto;display:flex;flex-direction:column;overflow:hidden;margin:0;box-sizing:border-box}.olContextCard header{padding:9px 11px 7px;background:#f7f3fc;border-bottom:1px solid #e9e0f3;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.olContextCard small{color:#775792;font-size:9px;font-weight:800;letter-spacing:.03em}.olContextCard h3{font:750 13px/1.35 system-ui;margin:2px 0 0;overflow-wrap:anywhere}.olContextCard header button{width:28px;height:28px;flex-shrink:0;padding:0;font:20px/1 system-ui;border:0;border-radius:7px;background:#ede6f5;color:#674681;cursor:pointer}.olCardBody{padding:8px 11px;overflow:auto;min-height:0;overscroll-behavior:contain}.olContextCard dl{display:grid;gap:5px;margin:0}.olContextCard dl>div{display:grid;grid-template-columns:85px 1fr;gap:7px}.olContextCard dt{font-size:10px;color:#798297}.olContextCard dd{font:650 11px/1.4 ui-monospace,monospace;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.olContextCard p{font-size:10px;color:#69738a;margin:8px 0 0}.olContextCard footer{display:flex;gap:7px;padding:7px 10px;border-top:1px solid #ece6f3;background:#fcfaff;margin:0;max-width:none}.olContextCard footer button,.olConnections button{font:650 10px system-ui;padding:6px 8px;border-radius:7px;border:1px solid #d9cce7;background:#fff;color:#6f4b9d;cursor:pointer}.olContextCard footer button:last-child:not(:first-child){background:#7250a6;color:#fff;border-color:#7250a6}.olConnections{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.olConnections b{display:block;width:100%;font-size:9px;color:#7a6b8b}.olEdgeLabels button{position:absolute;pointer-events:auto;border:1px solid var(--edge-color);border-left:3px solid var(--edge-color);border-radius:7px;background:#fffffff2;color:var(--edge-color);padding:4px 8px;font:750 10px/1.25 system-ui;max-width:220px;overflow-wrap:anywhere;cursor:pointer;box-shadow:0 3px 9px #23324a12;min-height:27px}.olContext button:focus-visible,.olContextTools :focus-visible{outline:3px solid #a580d5;outline-offset:2px}.olContextHint{position:absolute;bottom:60px;left:15px;right:15px;text-align:center;font-size:11px;color:#6e6480;margin:0}.hasObjectContext>.sceneCorner{display:none}.hasObjectContext>.nodeLabel{pointer-events:none}.contextWorldStage{position:relative;overflow:hidden}.contextWorldStage canvas{touch-action:pan-y}.scene.hasSceneNavigation{min-height:550px}.sceneViewport.hasObjectContext{min-height:420px}.scene.hasSceneNavigation:fullscreen{height:100vh;min-height:0}.scene:fullscreen .sceneViewport{min-height:0}.olContextTools select option{background:var(--white,#fff)}
:root[data-ol-theme=noche] .olContextCard{background:#1d2c42;color:#ecf2ff;border-color:#79609f}:root[data-ol-theme=noche] .olContextCard header,:root[data-ol-theme=noche] .olContextCard footer{background:#25334a;border-color:#43516a}:root[data-ol-theme=noche] .olContextCard p,:root[data-ol-theme=noche] .olContextCard dt{color:#bcc9dc}:root[data-ol-theme=noche] .olEdgeLabels button{background:#17263c;color:#e0d4f3}:root[data-ol-theme=noche] .olContextHint{color:#c5b6de}
@media(max-width:630px){.olContextTools{padding:7px 8px;gap:5px}.olContextTools label>span{display:none}.olContextTools button{padding:7px 8px;font-size:10px}.olContextCard dl>div{grid-template-columns:70px 1fr}.olContextCard h3{font-size:12px}.olContextCard header{padding:7px 9px}.olCardBody{padding:7px 9px}.olContextCard footer{padding:6px 8px}.olContextHint{font-size:10px}.scene.hasSceneNavigation,body.easyMode .scene.hasSceneNavigation{min-height:580px;flex:0 0 580px}.sceneViewport.hasObjectContext{min-height:450px}.contextWorldStage canvas{height:540px}.olEdgeLabels button{font-size:9px;max-width:165px}.olFlowBanner{font-size:10px;right:45px}}

/* Reserve the full height of both control bars, including in easy/teacher modes. */
body .scene.hasSceneNavigation,body.easyMode .scene.hasSceneNavigation{height:560px;min-height:560px;flex:0 0 560px}
body.teacherMode .scene.hasSceneNavigation{height:70vh;min-height:560px;flex:0 0 auto}
body .scene.hasSceneNavigation:fullscreen,body.easyMode .scene.hasSceneNavigation:fullscreen{height:100vh;min-height:0;flex:0 0 auto}
@media(max-width:630px){body .scene.hasSceneNavigation,body.easyMode .scene.hasSceneNavigation{height:590px;min-height:590px;flex:0 0 590px}}
.hasActiveContextCard .nodeLabel.sel{visibility:hidden}@media(max-width:630px){.hasActiveContextCard .nodeLabel{visibility:hidden}}
.olFlowBanner[data-phase=result]{background:#edf9f3ef;border-color:#abd9c5;color:#25714f}
/* v10.12 · Small learning steps, using the current theme and text size. */
.teaching105{color:var(--ink);font-size:calc(13px * var(--ol-font-scale,1));line-height:1.7;overflow-wrap:anywhere}
.teaching105 [hidden]{display:none!important}
.teaching105Head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:3px 0 16px}
.teaching105Head strong{font-size:calc(12px * var(--ol-font-scale,1));font-weight:800;color:var(--purple)}
.teaching105Head span{border:1px solid var(--line);border-radius:99px;background:var(--plight);color:var(--ink);padding:4px 12px;font-size:calc(12px * var(--ol-font-scale,1));font-weight:750}
.teaching105 h3{font-size:calc(14px * var(--ol-font-scale,1));margin:0 0 5px;color:var(--ink)}
.teaching105 p{margin:0;max-width:80ch;line-height:1.75}
.teaching105Question{padding:0 0 14px}
.teaching105Error{margin:14px 0;padding:12px 15px;border-left:3px solid var(--amber);border-radius:0 9px 9px 0;background:var(--bg);color:var(--ink)}
.teaching105Error strong{font-size:calc(12px * var(--ol-font-scale,1));display:block;margin-bottom:3px}
#teachingAnswer105{border:1px solid var(--line);border-radius:12px;background:var(--ol-soft);margin:0 0 15px;padding:0;color:var(--ink)}
#teachingAnswer105 summary,.teaching105Deep summary{cursor:pointer;min-height:44px;padding:12px 15px;font-size:calc(13px * var(--ol-font-scale,1));font-weight:750;line-height:1.5}
#teachingAnswer105 p{padding:0 15px 15px}
.teaching105Deep{margin-top:17px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink)}
.teaching105Deep[open]{padding-bottom:13px}
.teaching105Deep .guideStateRibbon,.teaching105Deep .guideMeaningGrid{margin-left:13px;margin-right:13px}
.teaching105 summary:focus-visible,.teaching105Deep summary:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:8px}
.teaching105Jump{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding-top:14px;border-top:1px solid var(--line);font-size:calc(12px * var(--ol-font-scale,1));font-weight:700}
.teaching105Jump select{width:100%;min-width:0;max-width:100%;min-height:44px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink)}
.teaching105Route{padding:15px;border:1px solid var(--line);border-radius:12px;margin-bottom:15px;background:var(--white)}
.teaching105Route ol{margin:10px 0;padding-left:24px;max-width:80ch}
.teaching105Route li{padding-left:5px;margin:8px 0}
.teaching105Route li::marker{font-weight:800;color:var(--purple)}
.teaching105Route>p{color:var(--muted);font-size:calc(12px * var(--ol-font-scale,1))}
.teaching105Route a{display:inline-block;color:var(--purple);font-weight:750;margin-top:10px;padding:8px 0;text-underline-offset:3px}
.teaching105Scope{font-size:calc(12px * var(--ol-font-scale,1));padding-bottom:15px;color:var(--muted)}
@media(max-width:630px){.teaching105Jump{grid-template-columns:minmax(0,1fr);gap:5px}.teaching105Error,.teaching105Route{padding:11px}.guideTopNav button{max-width:100%;white-space:normal}.guideMetaRight{flex-wrap:wrap}.guideActions{flex-wrap:wrap}.guideNextGroup{flex-wrap:wrap;max-width:100%}}

/* Context cards: a short explanation first, optional facts below. Shared by both viewers. */
.olContextCard .olCardSummary{font:500 12px/1.55 system-ui,sans-serif;color:var(--ink,#34415a);margin:0 0 12px}
.olCardSection{margin:9px 0 0;border:1px solid var(--line,#e5deee);border-radius:8px;background:var(--white,#fff);color:var(--ink,#34415a)}
.olCardSection>summary{padding:10px 8px;font:750 11px/1.5 system-ui,sans-serif;cursor:pointer;min-height:40px}
.olCardSection>div{padding:2px 8px 10px}
.olCardSection>summary:focus-visible{outline:3px solid #a580d5;outline-offset:2px;border-radius:6px}
.olCardSection .olConnections{margin-top:0}
.olConnections button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:3px;min-height:40px;max-width:100%;overflow-wrap:anywhere}
.olConnections button small{font:500 9px/1.4 system-ui,sans-serif;color:var(--muted,#6a7388);letter-spacing:0}
.olConnections button span{font:700 11px/1.4 system-ui,sans-serif}
.olContextCard header button{min-width:34px;min-height:34px}
.olContextCard footer button{min-height:40px;overflow-wrap:anywhere;flex:1}
.olContextCard dl>div{grid-template-columns:minmax(65px,35%) minmax(0,1fr)}
.olContextCard dt{overflow-wrap:anywhere}
.olContextCard{scrollbar-width:thin}
.olContext[data-layout=diagram] .olEdgeLabels{display:none}
.diagramContextEdge{cursor:pointer}
.diagramContextEdge:focus-visible{outline:none}
.diagramContextEdge:focus-visible path{stroke:#9b67ce;stroke-width:5px}
:root[data-ol-theme=noche] .olCardSection{background:#1b283b;border-color:#43516a;color:#ecf2ff}
:root[data-ol-theme=noche] .olContextCard .olCardSummary{color:#ecf2ff}
:root[data-ol-theme=noche] .olConnections button{background:#26374f;border-color:#5d4e76;color:#e5d8f8}
:root[data-ol-theme=noche] .olConnections button small{color:#bcc9dc}
@media(max-width:630px){.olContextCard .olCardSummary{font-size:11px}.olCardSection>summary{min-height:42px}.olContextCard footer button{font-size:10px;padding:6px}.olContextCard dd{font-size:10px}}

/* v10.12: the 2D inspector owns layout space instead of covering the diagram. */
.olContextCard>header,.olContextCard>footer{flex:0 0 auto}
.olContextCard>.olCardBody{flex:1 1 auto;min-height:0;overflow-y:auto}
.sceneViewport[data-context-dock]{display:grid;gap:0;align-items:stretch}
.sceneViewport[data-context-dock=side]{grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:minmax(0,1fr)}
.sceneViewport[data-context-dock]>.diagramPanel{position:relative;inset:auto;grid-column:1;grid-row:1;min-width:0;min-height:0;height:100%}
.sceneViewport[data-context-dock]>.olContext{position:static;inset:auto;display:flex;flex-direction:column;min-height:0;min-width:0;padding:12px;box-sizing:border-box}
.sceneViewport[data-context-dock=side]>.olContext{grid-column:2;grid-row:1;border-left:1px solid var(--line,#e6dfef);background:var(--bg,#f6f7fb)}
.sceneViewport[data-context-dock] .olContextCard{position:relative;inset:auto;width:100%;height:100%;max-height:none;min-height:0;flex:1 1 auto}
.sceneViewport[data-context-dock] .olCardBody{padding:12px 13px}
.sceneViewport[data-context-dock] .olContextCard .olCardSummary{font-size:12px;line-height:1.65}
.sceneViewport[data-context-dock] .olContextCard dd{font-size:11px}
.sceneViewport[data-context-dock=side] .olFlowBanner{right:352px}
.sceneViewport[data-context-dock] .olFlowBanner{top:48px}
.sceneViewport[data-context-dock=stack]{height:740px;min-height:740px;flex:0 0 740px;grid-template-columns:minmax(0,1fr);grid-template-rows:380px 360px}
.sceneViewport[data-context-dock=stack]>.olContext{grid-column:1;grid-row:2;border-top:1px solid var(--line,#e6dfef);background:var(--bg,#f6f7fb)}
body .scene.hasSceneNavigation.contextStacked,body.easyMode .scene.hasSceneNavigation.contextStacked{height:auto!important;min-height:850px!important;flex:0 0 auto!important}
body .scene.hasSceneNavigation.contextStacked:fullscreen,body.easyMode .scene.hasSceneNavigation.contextStacked:fullscreen{height:100vh!important;min-height:0!important;overflow:auto}

.appPreloader[hidden]{display:none!important}
.boot107{background:#f6f7fb;color:#263049;padding:clamp(12px,3vw,42px);overflow:auto;transition:opacity .32s ease,visibility .32s ease}
.boot107Grid{position:absolute;inset:0;background-image:linear-gradient(#9295b00a 1px,transparent 1px),linear-gradient(90deg,#9295b00a 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse,#000,transparent 80%)}
.boot107Stage{width:min(960px,100%);position:relative;background:#fff;border:1px solid #e1deeb;box-shadow:0 30px 100px #433d6415;border-radius:8px;padding:25px 36px;overflow:hidden;animation:boot107Arrive .6s ease both}
.boot107Stage:before,.boot107Stage:after{content:"";position:absolute;pointer-events:none;width:30px;height:30px;border-color:#9c8bb8;border-style:solid}
.boot107Stage:before{left:8px;top:8px;border-width:1px 0 0 1px}.boot107Stage:after{right:8px;bottom:8px;border-width:0 1px 1px 0}
.boot107Top{display:flex;justify-content:space-between;gap:10px;padding-bottom:18px;border-bottom:1px solid #eeebf3;font:700 9px/1.4 ui-monospace,monospace;letter-spacing:1.4px;color:#827695}
.boot107Heading{display:flex;justify-content:space-between;align-items:center;padding-top:25px;gap:10px}
.boot107Eyebrow{font:700 10px/1.5 system-ui;letter-spacing:2.4px;color:#8f7aa8;margin:0 0 6px}
.boot107Heading h1{font:750 clamp(42px,6.7vw,78px)/1.06 system-ui;letter-spacing:-4px;margin:0;color:#29314a}
.boot107Heading h1 span{color:#8b72b6;font-size:.47em;letter-spacing:-1px;margin-left:13px;vertical-align:top;display:inline-block;padding-top:10px}
.boot107Lead{margin:12px 0 0;font:450 clamp(13px,1.7vw,17px)/1.5 system-ui;color:#788196}
.boot107Seal{width:82px;height:82px;border:1px solid #d7cfe4;transform:rotate(-8deg);border-radius:14px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#9b84b8;flex:0 0 auto;box-shadow:5px 5px 0 #f5f1fa}
.boot107Seal span{font:400 29px ui-monospace,monospace}.boot107Seal small{font:700 8px system-ui;letter-spacing:1px;margin-top:4px}
.boot107Scene{display:block;width:100%;height:auto;max-height:37vh;margin:24px 0 16px;overflow:visible}
.boot107Code{font:600 17px ui-monospace,monospace;fill:#70598f}.boot107Label{font:600 13px ui-monospace,monospace;fill:#897596}
.boot107Initial{font:600 32px system-ui;fill:#398c7a}.boot107Name{font:650 15px ui-monospace,monospace;fill:#3e7269}.boot107Value{font:400 12px ui-monospace,monospace;fill:#7e9894}.boot107Measure{font:700 10px system-ui;letter-spacing:1.8px;fill:#9785ab}
.boot107Trace{stroke-dasharray:1300;animation:boot107Draw 1.3s ease both}.boot107Create{stroke-dasharray:340;animation:boot107Draw 1.2s .2s ease both}.boot107Create.second{animation-delay:.4s}
.boot107Object{transform-box:fill-box;transform-origin:center;animation:boot107Appear .8s .25s ease both}.boot107Object.second{animation-delay:.55s}.boot107Call{animation:boot107Flow 2.5s linear infinite}.boot107Construction{animation:boot107Appear 1.2s ease both}
.boot107Bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #ece8f3;padding-top:17px}
.boot107Bottom p{font:600 13px/1.5 system-ui;margin:0 0 8px;color:#514569}
.boot107Bottom button{border:1px solid #78609e;border-radius:9px;background:#79639e;color:#fff;min-height:44px;padding:11px 19px;font:700 12px system-ui;cursor:pointer;white-space:nowrap;box-shadow:0 5px 14px #8169a527}
.boot107Bottom button:focus-visible{outline:3px solid #ab94c9;outline-offset:4px}
.boot107Milestones{display:flex;gap:15px;font:500 10px system-ui;color:#a3a2b0}.boot107Milestones span:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#d2ccd9;margin-right:5px;vertical-align:2px}.boot107Milestones span[data-ready=true]{color:#5c8b7d}.boot107Milestones span[data-ready=true]:before{background:#60a28e}
.boot107Footer{display:flex;justify-content:space-between;gap:10px;font:500 9px/1.6 system-ui;color:#9b97a7;margin-top:21px;flex-wrap:wrap}
@keyframes boot107Arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes boot107Draw{from{stroke-dashoffset:1300;opacity:.15}to{stroke-dashoffset:0;opacity:1}}
@keyframes boot107Appear{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes boot107Flow{to{stroke-dashoffset:-44}}
@media(max-width:600px){.boot107Stage{padding:20px 17px}.boot107Top span:nth-child(2){display:none}.boot107Heading h1{letter-spacing:-2.5px}.boot107Seal{width:50px;height:55px;border-radius:10px}.boot107Seal span{font-size:22px}.boot107Seal small{font-size:6px}.boot107Eyebrow{font-size:8px;letter-spacing:1.3px}.boot107Scene{margin:24px 0;min-height:145px;max-height:32vh}.boot107Bottom{align-items:flex-start;gap:10px}.boot107Bottom button{padding:10px 12px}.boot107Milestones{gap:8px;font-size:9px}.boot107Footer{font-size:8px}.boot107Bottom p{font-size:11px}}
@media(max-height:580px){.boot107{align-items:flex-start}.boot107Stage{margin:auto}.boot107Scene{max-height:27vh;min-height:100px;margin:12px 0}.boot107Heading{padding-top:12px}.boot107Heading h1{font-size:42px}.boot107Top{padding-bottom:10px}.boot107Footer{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.boot107 *{animation:none!important;transition:none!important}.boot107Packet{display:none}.boot107{transition:none!important}}

.study107{margin:15px 0;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink)}
.study107 [hidden],.study107Resume[hidden]{display:none!important}
.study107Head,.study107Buttons,.study107Resume{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.study107Head{justify-content:space-between;margin-bottom:10px}.study107Head span{color:var(--muted);font-size:11px}
.study107 button,.study107Resume button{min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);padding:8px 11px;font:650 12px/1.4 system-ui;cursor:pointer}
.study107 button[aria-pressed=true]{background:var(--plight);color:var(--purple);border-color:var(--purple)}
.study107 p,.study107 details{font-size:11px;line-height:1.65;color:var(--muted);margin:8px 0 0}.study107 details summary{cursor:pointer;padding:5px 0}.study107 details button{margin-top:8px}.study107 [role=status]{margin-left:8px}
.study107Resume{padding:12px 15px;background:var(--ol-soft);border:1px solid var(--line);border-radius:11px;margin-bottom:12px;justify-content:space-between;color:var(--ink);font-size:12px}
.study107Resume button{background:var(--purple);color:var(--white);border-color:var(--purple)}
:root[data-ol-theme=noche] .study107Resume button{color:#172238}
.study107 button:focus-visible,.study107Resume button:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

.experienceSwitch .oopCheatLink107{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:38px;padding:9px 12px;color:var(--purple,#786297);border:1px solid var(--line,#dfd6e9);border-radius:8px;background:var(--white,#fff);font:750 11px/1.4 system-ui;text-decoration:none;white-space:nowrap}
.experienceSwitch .oopCheatLink107:focus-visible{outline:3px solid #b39bc9;outline-offset:3px}
@media(max-width:700px){.experienceSwitch{flex-wrap:wrap}.experienceSwitch .oopCheatLink107{flex:1 1 auto}}

:root[data-ol-theme=noche] .boot107 h1{color:#29314a!important}
:root[data-ol-theme=noche] .boot107 #preloadSkip{background:#79639e!important;color:#fff!important;border-color:#79639e!important}
:root[data-ol-theme=noche] .study107 button[aria-pressed=true]{background:#3b315b!important;border-color:#b5a3f6!important;color:#e8ddff!important}

/* The study sheet uses ObjectLab's theme variables and typography. */
.cheatPage{background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--accent:var(--purple)}
.cheatAppHeader{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 25px;min-height:65px;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 4px 20px #23304a08}
.cheatAppBrand{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink);text-decoration:none;font-size:19px;font-weight:800;white-space:nowrap}.cheatAppBrand img{width:38px;height:43px;object-fit:contain}.cheatAppBrand em{color:var(--purple);font-style:normal}.cheatAppNav{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.cheatAppNav>a{border:1px solid var(--line);border-radius:9px;padding:8px 12px;min-height:38px;text-decoration:none;font-size:11px;font-weight:750;color:var(--muted);background:var(--white)}.cheatAppNav>a[aria-current=page]{background:var(--plight);border-color:var(--purple);color:var(--purple)}
.cheatVersion{font-size:10px;color:var(--purple);font-weight:800;white-space:nowrap}.cheatAppearance{position:relative}.cheatAppearance>summary{font-size:17px;cursor:pointer;list-style:none;min-height:40px;min-width:40px;display:grid;place-items:center;background:var(--white);border:1px solid var(--line);border-radius:9px;color:var(--purple)}.cheatAppearance>div{position:absolute;right:0;top:calc(100% + 9px);width:245px;padding:17px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 15px 40px #1f294b20;display:grid;gap:13px}.cheatAppearance label{font-size:12px;display:grid;gap:6px;font-weight:650}.cheatAppearance select{padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--white);color:var(--ink);min-height:40px}.cheatAppearance input{width:100%;accent-color:var(--purple)}
.cheatPage .cheatTools{top:var(--cheat-header-h,65px);background:var(--white);border-color:var(--line);padding:9px 25px}.cheatPage .cheatHeader{padding-top:23px}.cheatPage .cheatHeader h1{color:var(--ink);font-size:clamp(27px,3vw,40px)}.cheatPage .cheatHeader p{max-width:85ch}.cheatPage .cheatTop{justify-content:flex-start}.cheatPage .cheatTop>label{margin-left:auto}
.cheatPage .cheatTools button,.cheatPage .cheatTools>a,.cheatPage .cheatSearch input,.cheatPage .cheatTop select{background:var(--white);color:var(--ink);border-color:var(--line)}.cheatPage .cheatTools [aria-pressed=true]{background:var(--plight);color:var(--purple);border-color:var(--purple)}.cheatPage .cheatTools .cheatDownload{background:var(--purple);color:#fff}.cheatPage .cheatCanvas{background:var(--ol-soft);border-color:var(--line)}
.cheatTopic{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.cheatTopic select{min-height:40px;max-width:240px;width:100%;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);padding:7px}
.cheatPage .cheatReading article,.cheatPage .cheatExtra,.cheatPage .cheatFooter{background:var(--white);border-color:var(--line);color:var(--ink)}.cheatPage .cheatReading dd,.cheatPage .cheatExtra td,.cheatPage .cheatPatternFamilies ul{color:var(--ink)}.cheatPage .cheatReading dt{color:var(--teal)}.cheatPage .cheatReading h2,.cheatPage .cheatExtra h2{color:var(--purple)}.cheatPage .cheatReading dd{font-size:calc(14px * var(--ol-font-scale,1))}.cheatPage .cheatReading article{scroll-margin-top:calc(var(--cheat-header-h,65px) + var(--cheat-tools-h,70px) + 16px)}.cheatPage .cheatReading article[data-selected=true]{border-color:var(--purple);box-shadow:0 0 0 2px var(--plight)}
.cheatVisualMap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cheatMapCard{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:14px;overflow:hidden}.cheatMapCard>div{padding:18px 20px 5px}.cheatMapCard h2{font-size:19px;line-height:1.3;letter-spacing:-.2px;color:var(--purple);margin:0 0 9px}.cheatMapCard p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}.cheatMapCard img{width:100%;display:block;aspect-ratio:450/230;object-fit:contain;background:white;border-block:1px solid var(--line);margin-top:12px}.cheatMapLinks{display:flex;flex-direction:column;gap:6px;padding:14px 18px 18px}.cheatMapLinks button{width:100%;text-align:left;padding:9px 10px;border:1px solid var(--line);background:var(--white);color:var(--ink);font:650 12px/1.45 system-ui;min-height:41px;border-radius:8px;cursor:pointer}.cheatMapLinks button:hover{border-color:var(--purple);background:var(--plight)}.cheatMapLinks button span{font-size:10px;font-weight:800;color:var(--purple);margin-right:7px}
.cheatInlineVisual{width:100%;height:auto;display:block;background:white;margin:15px 0 4px;border:1px solid var(--line);border-radius:8px}.cheatInlineCaption{font-size:11px;line-height:1.7;color:var(--muted);margin:6px 0 15px}.cheatSequenceGraphic{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:white;margin-top:16px}.cheatPage .cheatFooter{background:var(--white)}
.miniLinkedin108{display:inline-flex;align-items:center;justify-content:center;gap:5px;color:#41688d!important;background:#edf3f9;border:1px solid #d8e4f0;border-radius:7px;padding:5px 7px;min-height:29px;font:700 10px/1 system-ui;text-decoration:none;white-space:nowrap;flex-shrink:0}.miniLinkedin108 svg{width:14px;height:14px;fill:currentColor}.miniLinkedin108:focus-visible{outline:3px solid #a8bbd2;outline-offset:3px}.liMobile108{display:none}.cheatAppHeader .miniLinkedin108{margin-left:5px}
:root[data-ol-theme=noche] .miniLinkedin108{color:#bdd7ef!important;background:#22364d;border-color:#405a74}:root[data-ol-theme=noche] .cheatPage .cheatTools [aria-pressed=true]{background:#3d345c!important;border-color:#b5a3f6!important;color:#ecddff!important}
@media(max-width:1100px){.cheatAppHeader{padding-inline:16px;gap:10px}.cheatVisualMap{grid-template-columns:repeat(2,minmax(0,1fr))}.cheatAppNav>a{padding:8px;font-size:10px}}
@media(max-width:890px){.liDesktop108{display:none}.liMobile108{display:inline-flex}.liMobile108 span{display:none}.cheatAppHeader .miniLinkedin108 span{display:none}}
@media(max-width:700px){.cheatAppHeader{display:grid;grid-template-columns:1fr auto;gap:7px;padding:8px 13px}.cheatAppNav{grid-column:1/-1;grid-row:2}.cheatAppearance{grid-row:1;grid-column:2;justify-self:end}.cheatVersion{display:none}.cheatVisualMap{grid-template-columns:minmax(0,1fr)}.cheatPage .cheatTools{padding-inline:12px}.cheatTopic{width:100%}.cheatTopic select{max-width:none;flex:1}.cheatMapCard h2{font-size:19px}.cheatAppBrand{font-size:18px}}
@media print{.cheatAppHeader,.cheatVisualMap{display:none!important}.cheatPage{background:#fff;color:#263049}.cheatPage .cheatReading article,.cheatPage .cheatExtra{background:#fff;color:#263049}.cheatPage .cheatReading dd,.cheatPage .cheatExtra td{color:#38465a}.cheatInlineVisual{max-height:40mm;object-fit:contain}.cheatSequenceGraphic{max-height:120mm;object-fit:contain}.cheatPage .cheatReading article[data-selected=true]{box-shadow:none}}

.cheatBrandGroup{display:flex;align-items:center;gap:8px;min-width:0}
.cheatPage .cheatMapCard p{font-size:calc(12px * var(--ol-font-scale,1))}.cheatPage .cheatReading dt{font-size:calc(13px * var(--ol-font-scale,1))}.cheatPage .cheatExtra td,.cheatPage .cheatExtra th{font-size:calc(14px * var(--ol-font-scale,1))}
:root[data-ol-theme=noche] .cheatPage .cheatTools :is(#cheatMap,#cheatPoster,#cheatRead)[aria-pressed=true]{background:#3d345c!important;border-color:#b5a3f6!important;color:#ecddff!important}
@media(max-width:700px){.cheatBrandGroup{grid-column:1;grid-row:1}}

/* The extra sheet and LinkedIn controls need the compact two-row header sooner. */
@media(max-width:1100px){
 .top.topCompact{grid-template-columns:minmax(0,1fr) max-content!important;grid-template-areas:"brand more" "mode language";min-height:99px!important;height:auto!important;row-gap:5px!important;padding:7px 12px!important;column-gap:8px!important}
 .topCompact .brand{grid-area:brand;max-width:100%;overflow:hidden}.topCompact .headerMore{grid-area:more;justify-self:end}.topCompact .experienceSwitch{grid-area:mode;justify-self:start;min-width:0}.topCompact .languageControl{grid-area:language;justify-self:end}.topCompact .headRight{display:none!important}
 .liDesktop108{display:none}.liMobile108{display:inline-flex}.liMobile108 span{display:none}
}

/* v10.12: one concept per step; optional study tools stay closed. */
.srOnly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.easyMode .guideTop{gap:10px;padding:17px 20px}
body.easyMode .guideViewBar{margin:0;justify-content:flex-start}
body.easyMode .sceneToolbar>.viewModes,body.easyMode .sceneToolbar>.cameraTools{display:none}
.sceneToolbar>.guideViewBar{display:none}
body.easyMode .sceneToolbar>.guideViewBar{display:flex;flex:0 0 auto}
body.easyMode #guideViewHint{display:none}
body.easyMode .guideHeading p{max-width:82ch;font-size:calc(15px * var(--ol-font-scale,1));line-height:1.7}
body.easyMode .guideTip,body.easyMode.learningStarted .guideTip{display:block;background:var(--ol-soft);border:0;border-left:3px solid var(--teal);font-size:calc(13px * var(--ol-font-scale,1));line-height:1.6}
.guideObserve109{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.guideObserve109:has(#guideAction[hidden]):has(#guideStatus:empty){display:none}
.guideObserve109 #guideAction{padding:10px 15px;min-height:44px;border:1px solid var(--purple);background:var(--plight);color:var(--purple);border-radius:9px;font:750 calc(13px * var(--ol-font-scale,1))/1.4 system-ui;cursor:pointer}
.guideObserve109 #guideAction[hidden]{display:none}
.guideObserve109 #guideStatus{font-size:calc(12px * var(--ol-font-scale,1));line-height:1.6;margin:0;padding:0;background:none;border:0}
body.easyMode .guideBottom{display:none!important}
body.easyMode .guideMeaning{gap:12px;padding:21px 23px;background:var(--white);box-shadow:none}
body.easyMode .guideMeaning #meaningStep{display:none}
body.easyMode #guideTakeaway{background:none;padding:0;border:0;line-height:1.75;font-size:calc(15px * var(--ol-font-scale,1));color:var(--ink);max-width:85ch}
body.easyMode #guideTakeaway>b:first-child{display:none}
.teachingOptional109,.teaching105Deep,#guideMeaning>.guideCode,.study107{background:var(--white);border:1px solid var(--line);border-radius:10px;margin:0}
.teachingOptional109>summary,.teaching105Route>summary,.teaching105Deep>summary,#guideMeaning>.guideCode>summary,.study107>summary{display:list-item;cursor:pointer;padding:13px 16px;min-height:46px;line-height:1.55;font-size:calc(13px * var(--ol-font-scale,1));font-weight:650;color:var(--ink)}
.teachingOptionalBody109,.studyOptionalBody109{padding:0 16px 16px}
.teachingOptionalBody109>p{margin-bottom:15px}
.teaching105{display:grid;gap:12px}
.teaching105Route{padding:0;margin:0}
.teaching105Route>ol,.teaching105Route>p,.teaching105Route>a{margin-left:16px;margin-right:16px}
.teaching105Route>a{margin-bottom:12px}
.teaching105Deep{margin-top:0}
.teaching105Scope{padding:0;margin:0!important}
.teaching105Jump{padding:0 16px 16px;border:0;grid-template-columns:minmax(0,1fr)}
#teachingAnswer105{margin:0 0 15px;background:var(--ol-soft)}
.study107{padding:0}
.study107Head{margin:0}.study107Head>span:last-child{margin-left:10px;font-size:calc(11px * var(--ol-font-scale,1));font-weight:450;color:var(--muted)}
.studyOptionalBody109 .study107Buttons{padding-top:3px}
#guideMeaning>.guideCode{flex:0 0 auto;min-width:0;min-height:0;height:auto;width:100%;max-width:100%;align-self:stretch}
#guideMeaning>.guideCode>summary{text-align:start;justify-content:flex-start}
#guideMeaning>.guideCode>pre{margin:0 16px 16px;max-width:none;max-height:360px;font-size:calc(13px * var(--ol-font-scale,1))}
#guideMeaning .guideLanguageBar{background:none;border:0;padding:0 15px 14px;margin:0;justify-content:flex-start}
#guideMeaning .guideLanguageCopy{display:none}
#guideMeaning .guideLangNote{margin:0 15px 15px}
body.easyMode .guideLanguagePicker label{font-size:calc(12px * var(--ol-font-scale,1))}
body.easyMode .sceneToolbar{margin-top:0}
@media(max-width:630px){body.easyMode .guideTop{padding:14px}.guideMetaRight{gap:10px}body.easyMode .guideHeading p{font-size:calc(14px * var(--ol-font-scale,1));line-height:1.65}body.easyMode .guideMeaning{padding:16px}.study107Head>span:last-child{display:block;margin:4px 0 0}.guideObserve109 #guideAction{width:100%}.teachingOptional109>summary,.teaching105Route>summary,.teaching105Deep>summary,#guideMeaning>.guideCode>summary,.study107>summary{padding:12px}}


/* v10.12: annotated code keeps each original instruction and debugger row. */
.olCodeComment110{color:#aed7c0;font-style:normal;font-weight:450;letter-spacing:0}
.codeLine{min-width:0;white-space:normal;align-items:flex-start}
.codeLine>code{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;flex:1}
.codeLine>.lineNo{flex:0 0 30px}
.dbgCodeLine .dbgLineNum,.dbgCodeLine .dbgPointer{align-self:start}
.learnCodeBody:has(.learnCodeLines110){display:block}
.learnCodeLines110{display:block;min-width:0;padding:10px 0;background:#20283a;color:#edf2fa;font:calc(12px * var(--ol-font-scale,1))/1.75 Consolas,monospace}
.learnCodeLine110{display:grid;grid-template-columns:36px minmax(0,1fr);padding:1px 12px 1px 0;min-width:0}
.learnCodeLine110>.learnLineNo110{color:#91a0b7;text-align:center;user-select:none;font:inherit;align-self:start}
.learnCodeLine110>code{font:inherit;color:inherit;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
#guideCodeDetails:not([open])>:not(summary){display:none!important}
.worldCodePicker110{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:15px 0;font-size:13px}
.worldCodePicker110 select{border:1px solid var(--line,#ded7e8);border-radius:8px;padding:9px 12px;min-height:42px;font:inherit;color:var(--ink,#35435a);background:var(--white,#fff)}
#worldCodeNote110{font-size:12px;line-height:1.7;color:var(--muted,#66758b);margin:0 0 14px;max-width:95ch}
#worldCode110{white-space:pre-wrap;overflow-wrap:anywhere}
#worldCodeSummary110{text-align:start;cursor:pointer}

/* v10.12: a roomy code reader and user-sized learning panels. */
.codeExpand111{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line,#ded7e8);border-radius:8px;background:var(--plight,#f5f0fb);color:var(--purple,#80649f);padding:7px 10px;min-height:35px;font:700 11px/1.4 system-ui;cursor:pointer;white-space:nowrap}
.codeSection111>.sectionHead{flex-wrap:wrap;gap:8px}.codeSection111>.sectionHead>strong{flex:1 1 145px}
#guideCodeDetails .guideLanguageBar{flex-wrap:wrap;gap:10px}#guideCodeDetails .codeExpand111{margin-left:auto}
#codeReader111{padding:0;border:1px solid var(--line,#ded7e8);border-radius:18px;width:min(1660px,96vw);max-width:96vw;height:min(900px,91dvh);max-height:94dvh;color:var(--ink,#35435a);background:var(--white,#fff);box-shadow:0 30px 110px #17223c66;overflow:hidden}
#codeReader111[open]{display:flex;flex-direction:column}#codeReader111::backdrop{background:#172338aa;backdrop-filter:blur(4px)}
.codeReaderHead111{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid var(--line,#ded7e8)}
#codeReaderTitle111{font:750 22px/1.3 system-ui;margin:0 0 5px;color:var(--ink,#35435a)}#codeReaderLanguage111{font:550 12px/1.5 system-ui;color:var(--muted,#66758b)}
#codeReader111 button{min-height:40px;border:1px solid var(--line,#ded7e8);border-radius:8px;background:var(--white,#fff);color:var(--ink,#35435a);font:650 12px/1.4 system-ui;padding:8px 12px;cursor:pointer}#codeReader111 button:disabled{opacity:.4;cursor:default}
.codeReaderTools111{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--line,#ded7e8);font:550 12px/1.5 system-ui}
.codeReaderFont111{display:flex;align-items:center;gap:8px}.codeReaderFont111 output{min-width:42px;text-align:center;font-variant-numeric:tabular-nums}.codeReaderTools111>label{display:flex;align-items:center;gap:7px;min-height:40px;cursor:pointer}.codeReaderTools111 input{width:16px;height:16px;accent-color:var(--purple,#80649f)}#codeReaderCopy111{margin-left:auto}
#codeReaderStatus111{font-size:11px;color:var(--teal,#338a7e)}
#codeReader111 .codeReaderBody111{flex:1;min-height:0;overflow:auto;padding:16px 0;background:#182337!important;color:#edf2fa!important;font:var(--reader-font111,14px)/1.85 Consolas,"Cascadia Code",monospace;overscroll-behavior:contain}
.codeReaderLine111{display:flex;align-items:flex-start;min-width:max-content;white-space:pre;border-left:3px solid transparent;padding-right:20px}.codeReaderLine111>code{font:inherit;white-space:pre;color:#edf2fa!important}.readerLineNo111{position:sticky;left:0;z-index:1;flex:0 0 54px;min-width:54px;text-align:right;padding:0 14px 0 5px;color:#8e9db6!important;background:#182337;user-select:none;font:inherit}.codeReaderLine111.is-active{background:#65539b55;border-left-color:#b7a1ee}
#codeReader111 .olCodeComment110{color:#aed7c0!important;font:inherit}
#codeReader111.readerWrap111 .codeReaderLine111{min-width:0;white-space:normal}#codeReader111.readerWrap111 .codeReaderLine111>code{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;flex:1}
#codeReaderHint111{padding:10px 22px;margin:0;font:400 11px/1.6 system-ui;color:var(--muted,#66758b);border-top:1px solid var(--line,#ded7e8)}
#codeReader111 :is(button,input):focus-visible{outline:3px solid var(--purple,#80649f);outline-offset:3px}
.layout{position:relative}.panelHandle111{touch-action:none;user-select:none;outline:none;flex-shrink:0;position:relative}
.panelHandleColumn111{position:absolute;top:6px;bottom:6px;width:12px;z-index:12;cursor:col-resize;display:none;align-items:center;justify-content:center}
.panelHandleColumn111::after{content:"";display:block;width:4px;height:44px;border-radius:4px;background:#b9aace;box-shadow:0 0 0 3px var(--bg,#f5f6fa)}
.panelHandleRow111{height:12px;min-height:12px;cursor:row-resize;display:flex;align-items:center;justify-content:center;margin:0;background:var(--ol-soft,#f7f5fb);border-radius:5px}
.panelHandleRow111::after{content:"";width:42px;height:3px;border-radius:3px;background:#b9aace}
.panelHandle111:hover::after,.panelHandle111:focus-visible::after{background:var(--purple,#80649f)}.panelHandle111:focus-visible{outline:2px solid var(--purple,#80649f);outline-offset:2px}
.panelDragging111,.panelDragging111 *{cursor:col-resize!important;user-select:none!important}.panelRowDragging111,.panelRowDragging111 *{cursor:row-resize!important;user-select:none!important}
body.panelSizing111:not(.easyMode):not(.teacherMode)>.shell .layout,body.panelSizing111:not(.easyMode):not(.teacherMode) .shell>.layout{grid-template-columns:var(--panel-left111,247px) minmax(360px,1fr) var(--panel-right111,359px)}
body.panelSizing111:not(.easyMode):not(.teacherMode) .panelHandleColumn111{display:flex}
.right #didacticExplanation.didacticResizable111{padding:0;display:flex;flex-direction:column;flex:0 0 auto;min-height:160px;height:var(--panel-height111,auto);overflow:hidden}
.didacticContent111{min-height:0;flex:1;overflow:auto;padding:17px 19px}
.right #code{height:var(--panel-height111,auto);max-height:var(--panel-height111,360px);min-height:120px;flex-shrink:0}
#guideMeaning>.guideCode>#guideCode{height:var(--panel-height111,auto);max-height:var(--panel-height111,360px)}
#guideCodeDetails>[data-panel-handle111]{margin:0 16px 12px}
@media(max-width:930px){.panelHandleColumn111{display:none!important}.didacticContent111{padding:13px}#codeReader111{width:98vw;max-width:98vw;height:94dvh;max-height:96dvh;border-radius:13px}}
@media(max-width:600px){.codeReaderHead111{padding:13px 14px;gap:10px}#codeReaderTitle111{font-size:18px}.codeReaderTools111{padding:10px 14px;gap:9px}#codeReaderCopy111{margin-left:0}.codeReaderFont111>span{display:none}.readerLineNo111{flex-basis:40px;min-width:40px;padding-right:9px}#codeReaderHint111{padding:9px 14px}.codeReaderTools111>label{font-size:11px}}
@media print{.panelHandle111,.codeExpand111,#codeReader111{display:none!important}}

body.readerOpen111{overflow:hidden}
@media(max-width:600px){.codeExpand111{min-height:42px}}

.patternFrame111{padding:0!important;border:1px solid var(--line,#ded7e8);border-radius:14px;background:var(--white,#fff);overflow:hidden;margin:12px 0 20px}
.patternTools111{padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line,#ded7e8);background:var(--ol-soft,#f7f5fb)}
.patternTools111>div{display:flex;gap:5px}.patternTools111 button,.patternRolePicker111 button{min-height:38px;border:1px solid var(--line,#ded7e8);border-radius:8px;background:var(--white,#fff);color:var(--ink,#35435a);font:650 11px/1.45 system-ui;padding:8px 11px;cursor:pointer}
.patternTools111 button[aria-pressed=true],.patternRolePicker111 button[aria-pressed=true]{background:var(--plight,#f4eef9);color:var(--purple,#80649f);border-color:var(--purple,#80649f)}
#patternHelp111{flex:1 1 100%;font-size:11px;line-height:1.65;color:var(--muted,#66758b)}
.patternFrame111>.patternTransport{margin:0;padding:13px 15px;border:0;border-bottom:1px solid var(--line,#ded7e8);border-radius:0;background:var(--white,#fff)}
.patternFrame111 .patternTransportTop{gap:8px;flex-wrap:wrap}.patternFrame111 #patternStepText{font-size:calc(13px * var(--ol-font-scale,1));line-height:1.75;margin:9px 0 0}
.patternStage111{width:100%;overflow:hidden;touch-action:none;background:#fbfbfe;cursor:grab;border-bottom:1px solid var(--line,#ded7e8)}
.patternStage111:active{cursor:grabbing}.patternStage111 svg{display:block;width:100%;height:auto;max-height:430px;user-select:none}.patternStage111 svg:focus-visible{outline:3px solid var(--purple,#80649f);outline-offset:-4px}.patternStage111 g[role=button]:focus-visible>rect{stroke:#35435a;stroke-width:3.5}
.patternRolePicker111{display:flex;gap:7px;flex-wrap:wrap;padding:12px 14px 0}
.patternRoleDetail111{padding:12px 16px 16px;color:var(--ink,#35435a);font-size:calc(13px * var(--ol-font-scale,1));line-height:1.75}.patternRoleDetail111>strong{font-weight:750;color:var(--purple,#80649f);display:block}.patternRoleDetail111>p{margin:4px 0 0}
.patternFrame111>.patternFlow{margin:16px}
@media(max-width:600px){.patternTools111{padding:10px}.patternFrame111>.patternTransport{padding:12px}.patternFrame111 .patternControls{width:100%;justify-content:space-between}.patternFrame111 .patternControls button{padding:8px;min-height:40px}.patternRolePicker111{padding-inline:10px}.patternRoleDetail111{padding:12px}.patternRolePicker111 button{flex:1 1 auto;min-height:42px}}

.patternMessages111{padding:12px 16px;border-bottom:1px solid var(--line,#ded7e8);font-size:calc(12px * var(--ol-font-scale,1));line-height:1.7;color:var(--ink,#35435a)}.patternMessages111>p{font-size:11px;color:var(--muted,#66758b);margin:5px 0 8px}.patternMessages111 ul{margin:0;padding-left:20px}.patternMessages111 li{padding:3px 0}.patternMessages111 b{font-weight:600;color:var(--purple,#80649f)}
/* v10.12: visible learning resources and an expandable pattern workspace. */
.top.topCompact{grid-template-columns:max-content max-content max-content max-content minmax(0,1fr) max-content!important;grid-template-areas:"brand mode resources language author more";column-gap:10px!important}
.topCompact>.brand{grid-area:brand}.topCompact>.experienceSwitch{grid-area:mode}.topCompact>.languageControl{grid-area:language}.topCompact>.headRight{grid-area:author}.topCompact>.headerMore{grid-area:more}
.topCompact .learningResources112{grid-area:resources;display:flex;align-items:center;gap:6px;min-width:0}
.topCompact .learningResources112 :is(a,button){display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line,#ded7e8);border-radius:9px;background:var(--white,#fff);color:var(--ink,#35435a);padding:9px 10px;font:750 11px/1.35 system-ui;min-height:38px;text-decoration:none;white-space:nowrap;cursor:pointer;margin:0}
.topCompact .learningResources112 #patternsOpen112{background:var(--ol-soft,#f7f3fb);color:var(--ol-accent,#80649f);border-color:var(--ol-accent,#80649f)}
.patternsCount112{display:inline-flex;align-items:center;justify-content:center;min-width:23px;min-height:21px;border-radius:6px;background:var(--ol-accent,#80649f);color:var(--ol-on-accent,#fff);font-size:10px;font-weight:800;padding:2px 4px}
.patternsLabelShort112{display:none}.learningResources112 :is(a,button):hover{box-shadow:0 2px 9px #80649f20}.learningResources112 :is(a,button):focus-visible{outline:3px solid var(--ol-accent,#80649f);outline-offset:3px}
.topCompact .headerMorePanel .menuLearning112{margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid var(--line,#ded7e8)}.topCompact .headerMorePanel .menuLearning112>.menuSectionTitle{padding-top:3px}
.topCompact .headerMorePanel .menuLearning112>[data-open-patterns]{background:var(--ol-soft,#f7f3fb);color:var(--ol-accent,#80649f);font-weight:850}
.patternsSurface112{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%;height:100%;overflow:hidden;background:var(--white,#fbfcff);color:var(--ink,#35435a)}.patternsSurface112:fullscreen{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;margin:0;padding:0}
.patternsTopHeading{min-width:0}.patternsWindowTools112{display:flex;align-items:center;gap:8px;flex-shrink:0}.patternsWindowTools112 #patternsClose{position:static;flex-shrink:0}
.patternsScreen112{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 11px;min-height:40px;border:1px solid var(--line,#ded7e8);border-radius:9px;background:var(--white,#fff);color:var(--ol-accent,#80649f);font:700 12px/1.45 system-ui;cursor:pointer}
.patternsScreen112[aria-pressed=true]{background:var(--ol-soft,#f7f3fb);border-color:var(--ol-accent,#80649f)}.patternsScreen112:focus-visible{outline:3px solid var(--ol-accent,#80649f);outline-offset:2px}.screenGlyph112{font-size:21px;line-height:1}
.patternCurrent112{flex:1 1 auto;min-width:100px;font:800 14px/1.5 system-ui;color:var(--ink,#35435a)}.patternTools111 #patternSceneFull112{margin-left:auto}
body.patternsExpanded112{overflow:hidden}
#patternsDialog.patternsFull112{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none}
#patternsDialog.patternsFull112[open]{display:flex;flex-direction:column}
#patternsDialog.patternsFull112 .patternsTop{flex:0 0 auto;padding-top:14px;padding-bottom:12px}
#patternsDialog.patternsFull112 .patternsTopHeading>p,#patternsDialog.patternsFull112 .patternsIntro{display:none}
#patternsDialog.patternsFull112 .patternsFilters{flex:0 0 auto;padding-top:9px;padding-bottom:9px}
#patternsDialog.patternsFull112 .patternsBody{flex:1 1 0;min-height:0}
#patternsDialog.patternsFull112 .patternsContent{scroll-padding-top:12px}
#patternsDialog.patternsFull112 .patternFrame111{scroll-margin-top:8px}
#patternsDialog.patternsFull112 .patternStage111 svg{max-height:none}
#patternsDialog.patternsFull112 .patternsFooter{flex:0 0 auto}
#patternsDialog.patternsFull112 .patternsFooter>span:nth-of-type(2){display:none}
@media(max-width:1350px){.topCompact .authorBy{display:none!important}.topCompact .brand small{display:none!important}}
@media(max-width:1250px){.top.topCompact{grid-template-columns:minmax(0,1fr) max-content max-content!important;grid-template-areas:"brand brand more" "mode resources language";min-height:99px!important;height:auto!important;row-gap:7px!important;padding:7px 12px!important}.topCompact>.headRight{display:none!important}.topCompact>.brand{min-width:0}.topCompact>.headerMore{justify-self:end}.topCompact>.experienceSwitch{justify-self:start}.topCompact>.languageControl{justify-self:end}.liDesktop108{display:none}.liMobile108{display:inline-flex}.liMobile108 span{display:none}}
@media(max-width:700px){.top.topCompact{grid-template-columns:minmax(0,1fr) max-content!important;grid-template-areas:"brand more" "mode language" "resources resources";padding:7px 10px!important;row-gap:6px!important}.topCompact .brand small{display:none!important}.topCompact .learningResources112{width:100%;gap:7px}.topCompact .learningResources112 :is(a,button){flex:1 1 0;min-width:0;min-height:38px;padding:7px 9px;white-space:normal}.patternsLabelFull112{display:none}.patternsLabelShort112{display:inline}.topCompact .experienceSwitch{width:100%;margin-left:0;gap:3px!important}.topCompact .experienceSwitch>button{flex:1 1 0;min-width:0;max-width:none!important;white-space:normal!important;font-size:10px!important;padding:7px 5px!important;line-height:1.25!important}.topCompact .languageControl{max-width:120px}.topCompact .languageControl .compareText{display:none}.topCompact .languageControl label{display:none!important}.topCompact .languageControl select{width:76px!important;min-width:68px!important}.patternsWindowTools112 .screenLabel112{display:none}.patternsWindowTools112 .patternsScreen112{width:40px;padding:7px}.patternsWindowTools112{gap:5px}}
@media(max-width:520px){.patternTools111 .patternCurrent112{flex-basis:100%}.patternTools111 #patternSceneFull112{flex:1 1 auto;margin-left:0}.patternsWindowTools112{align-self:flex-start}#patternsDialog.patternsFull112 .patternsTopHeading>.patternsKicker{display:none}#patternsDialog.patternsFull112 .patternsTopHeading h2{font-size:21px}#patternsDialog.patternsFull112 .patternsFooter{padding-top:8px;padding-bottom:8px}}
@media print{.learningResources112,.patternsScreen112{display:none!important}}