:root{--l4-purple:#6c5ce7;--l4-green:#18a77a;--l4-red:#e45544;--l4-yellow:#f2b84b}
.hero-logic{position:relative;min-height:500px;border:1px solid var(--line);border-radius:32px;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--teal) 22%,transparent),transparent 48%),var(--paper);overflow:hidden;box-shadow:var(--shadow)}
.hero-logic .question-card{position:absolute;left:50%;top:55px;transform:translateX(-50%);width:230px;padding:22px;border-radius:20px;background:#0c252a;color:#eaffff;text-align:center;box-shadow:0 22px 50px rgba(0,0,0,.22)}.question-card small{display:block;color:#73d9d3}.question-card b{display:block;font:800 1.55rem ui-monospace,monospace;margin:8px}.question-card span{position:absolute;top:118px;padding:5px 10px;border-radius:999px;font-size:.72rem;font-weight:800}.answer-yes{left:-52px;background:#dff8ee;color:#087851}.answer-no{right:-54px;background:#ffe6e2;color:#aa3328}.hero-logic svg{position:absolute;inset:0;width:100%;height:100%}.hero-logic svg path{fill:none;stroke:var(--teal);stroke-width:4;stroke-dasharray:8 8}.hero-logic .branch{position:absolute;top:265px;width:150px;padding:22px 15px;text-align:center;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}.hero-logic .branch i{display:grid;place-items:center;margin:auto auto 8px;width:48px;height:48px;border-radius:50%;font-style:normal;font-size:1.5rem}.branch-a{left:60px}.branch-b{right:60px}.branch-a i{background:#dff8ee;color:#087851}.branch-b i{background:#ffe6e2;color:#aa3328}.logic-array{position:absolute;left:50%;bottom:35px;transform:translateX(-50%);display:flex;gap:7px}.logic-array span{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--teal);color:#fff;font-weight:900}.logic-array span:nth-child(2),.logic-array span:nth-child(5){background:var(--soft);color:var(--muted)}
.decision-gate,.if-simulator,.array-if-demo,.two-road,.grade-ladder,.switch-console,.tolerance-demo,.fan-demo,.logical-vector-builder,.mask-lab,.relation-playground,.roundoff-microscope,.logic-gates,.logical-index-demo,.final-inspector{border:1px solid var(--line);border-radius:24px;background:var(--paper);box-shadow:0 14px 36px rgba(17,65,70,.07)}
.decision-gate{padding:30px}.gate-question{display:flex;align-items:center;justify-content:space-between;gap:20px}.gate-question label,.two-road-input label,.grade-control label,.tolerance-demo label,.fan-demo label,.roundoff-microscope>label{display:flex;align-items:center;gap:12px;flex:1}.gate-question input,.two-road input,.grade-control input,.tolerance-demo input,.fan-demo input,.roundoff-microscope input{flex:1}.condition-card{padding:12px 18px;border-radius:14px;background:var(--soft);display:flex;gap:15px;align-items:center}.condition-card strong,.array-summary strong,.relation-inputs strong{padding:5px 10px;border-radius:999px}.true{color:var(--l4-green)!important}.false{color:var(--l4-red)!important}.gate-track{height:150px;margin-top:25px;position:relative;border-radius:18px;background:linear-gradient(90deg,var(--soft),color-mix(in srgb,var(--teal) 12%,var(--soft)));overflow:hidden}.gate-track:before{content:"";position:absolute;left:20px;right:20px;top:74px;border-top:4px dashed var(--line)}.gate-person{position:absolute;left:45px;top:50px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;transition:.6s}.gate-person.pass{left:calc(100% - 95px)}.gate-door{position:absolute;left:50%;top:18px;bottom:18px;width:20px;background:var(--ink);transition:.35s;transform-origin:left bottom}.gate-door.open{transform:rotate(-70deg)}.gate-door span{position:absolute;left:-42px;top:-4px;width:105px;font-size:.7rem;color:var(--muted)}.gate-result{position:absolute;right:22px;bottom:12px;font-weight:800;color:var(--l4-green)}.gate-result.skip{color:var(--l4-red)}.syntax-block{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.syntax-block>div{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}.syntax-block code{font-weight:900;color:var(--teal)}
.if-simulator{padding:25px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;align-items:center}.sim-code{display:flex;flex-direction:column;gap:6px;background:#0d2025;color:#dff9f6;padding:20px;border-radius:15px}.sim-meter{height:120px;position:relative;border-radius:14px;background:linear-gradient(90deg,#ffe5e0 50%,#dff8ee 50%)}.meter-scale{display:flex;justify-content:space-between;padding:8px}.sim-meter i{position:absolute;left:73%;top:25px;width:4px;height:65px;background:var(--ink);transition:.45s}.sim-meter b{position:absolute;bottom:8px;left:50%;transform:translateX(-50%)}.sim-verdict{display:flex;flex-direction:column;gap:10px}.sim-verdict strong{color:var(--l4-green)}.sim-verdict strong.false{color:var(--l4-red)}.sim-verdict button,.filter-belt button{align-self:flex-start;border:0;border-radius:10px;background:var(--teal);color:#fff;padding:9px 13px}
.filter-belt{display:grid;grid-template-columns:1.5fr auto 1.5fr auto;gap:18px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}.belt-items{display:flex;gap:8px;flex-wrap:wrap}.belt-items i,.belt-bins i{font-style:normal;padding:8px;border-radius:9px;background:var(--soft);transition:.3s}.belt-items i.checking{transform:translateY(-10px);box-shadow:0 8px 20px rgba(0,0,0,.14)}.belt-items i.kept{background:#dff8ee;color:#087851}.belt-items i.skipped{background:#ffe6e2;color:#a83228}.belt-gate{width:80px;height:80px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);font-weight:900}.belt-bins{display:grid;grid-template-columns:1fr 1fr;gap:8px}.belt-bins>div{min-height:95px;padding:10px;border:1px dashed var(--line);border-radius:12px}.belt-bins span{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.perfect-square-demo{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:center;margin-top:18px}.square-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:5px}.square-strip span{min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:var(--soft)}.square-strip .square{outline:2px solid var(--l4-yellow)}.square-strip .match{background:#dff8ee;outline:2px solid var(--l4-green)}.square-strip small{font-size:.58rem}
.array-if-demo{padding:25px}.array-if-controls{display:flex;align-items:center;justify-content:space-between}.array-if-controls label{display:flex;align-items:center;gap:10px}.array-expression{font-size:1.15rem}.array-values,.array-answers{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;margin-top:14px}.array-values i,.array-answers i{display:grid;place-items:center;min-height:46px;border-radius:9px;background:var(--soft);font-style:normal;font-weight:800}.array-answers i.true{background:#dff8ee}.array-answers i.false{background:#ffe6e2}.array-summary{display:flex;gap:12px;justify-content:center;margin-top:18px}.array-summary>div{padding:10px 15px;border:1px solid var(--line);border-radius:12px}.warning-card,.callout{margin:16px 0;padding:17px 20px;border-left:5px solid var(--teal);background:var(--soft);border-radius:0 14px 14px 0}.callout.danger{border-color:var(--l4-red)}
.two-road{padding:26px}.two-road-input{display:flex;align-items:center;justify-content:space-between;gap:25px}.road-map{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:12px;margin-top:25px}.road{padding:20px;border:2px solid var(--line);border-radius:16px;text-align:center;opacity:.45;transition:.3s}.road.active{opacity:1;border-color:var(--teal);transform:translateY(-4px)}.road span{display:block;font-size:.7rem}.road b{font-size:2rem;color:var(--teal)}.road-result{display:flex;flex-direction:column;justify-content:center;padding:20px;border-radius:16px;background:#0d2025;color:#eaffff}.road-result strong{font-size:1.65rem}
.grade-ladder{padding:25px;display:grid;grid-template-columns:280px 1fr;gap:30px}.grade-control label{flex-direction:column;align-items:stretch}.grade-answer{text-align:center;margin-top:20px}.grade-answer strong{display:block;font-size:4rem;color:var(--teal)}.ladder-rungs{display:flex;flex-direction:column;gap:7px}.ladder-rungs div{display:flex;justify-content:space-between;padding:12px 16px;border-radius:10px;background:var(--soft);transition:.25s}.ladder-rungs div.active{background:var(--teal);color:#fff;transform:translateX(12px)}
.switch-console{padding:25px;display:grid;grid-template-columns:150px 1fr 1fr;gap:20px}.switch-selector{display:grid;grid-template-columns:1fr 1fr;gap:8px}.switch-selector button{border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:1.2rem}.switch-selector button.active{background:var(--teal);color:#fff}.switch-cases{display:flex;flex-direction:column;gap:8px}.switch-cases>div{display:flex;justify-content:space-between;padding:12px;border-radius:10px;background:var(--soft);opacity:.45}.switch-cases>div.active{opacity:1;outline:2px solid var(--teal)}.switch-output{padding:20px;border-radius:14px;background:#0d2025;color:#eaffff}.switch-output small{display:block;color:#7bd8d2;margin-bottom:15px}.compare-table,.index-explain{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:17px 0}.compare-table>div,.index-explain article{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.tolerance-demo,.fan-demo{padding:25px;margin-bottom:15px}.tolerance-scale{height:80px;position:relative;margin-bottom:15px;border-bottom:5px solid var(--line)}.safe-band{position:absolute;left:30%;right:30%;bottom:-5px;height:14px;background:#65cfa6;border-radius:7px}.tolerance-scale .limit,.tolerance-scale .target{position:absolute;bottom:16px;transform:translateX(-50%)}.tolerance-scale .low{left:30%}.tolerance-scale .target{left:50%;font-weight:900}.tolerance-scale .high{left:70%}.tolerance-scale i{position:absolute;left:58%;bottom:-13px;width:6px;height:46px;background:var(--orange);border-radius:3px;z-index:2}.tolerance-demo strong{display:block;text-align:center;margin-top:16px;font-size:1.5rem}.tolerance-demo strong.pass{color:var(--l4-green)}.tolerance-demo strong.fail{color:var(--l4-red)}.fan-demo{display:grid;grid-template-columns:1fr 240px;align-items:center}.fan-graphic{text-align:center}.fan-graphic i{display:block;font-style:normal;font-size:6rem;color:var(--teal)}.fan-graphic i.spinning{animation:spin .55s linear infinite}.fan-graphic strong.on{color:var(--l4-green)}.fan-graphic strong.off{color:var(--muted)}@keyframes spin{to{transform:rotate(360deg)}}
.logical-vector-builder{padding:25px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}.vector-source,.vector-result{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.vector-source i,.vector-result i{display:grid;place-items:center;height:54px;border-radius:10px;background:var(--soft);font-style:normal;font-weight:900}.vector-result i.true{background:#dff8ee}.vector-result i.false{background:#ffe6e2}.vector-operator{display:flex;align-items:center;gap:7px}.vector-operator select,.vector-operator input{width:70px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.mask-lab{padding:20px}.mask-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.mask-tabs button{border:1px solid var(--line);border-radius:10px;background:var(--soft);padding:8px 12px}.mask-tabs button.active{background:var(--teal);color:#fff}.mask-lab canvas{width:100%;height:auto;border-radius:14px;background:var(--paper)}.mask-formula{display:flex;align-items:center;gap:18px;padding:12px}.mask-formula code{font-size:1.05rem;color:var(--teal)}.count-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin:18px 0}.count-compare>div:not(.arrow){padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}.count-compare .arrow{font-size:2rem;color:var(--teal)}
.relation-playground{padding:24px}.relation-inputs{display:flex;justify-content:center;align-items:center;gap:12px}.relation-inputs label{display:flex;align-items:center;gap:7px}.relation-inputs input,.relation-inputs select{width:90px;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}.relation-inputs strong{font-size:1.2rem}.operator-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:18px}.operator-cards button{padding:12px 7px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--ink)}.operator-cards span{display:block;font-size:.68rem;color:var(--muted)}.equality-note{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:12px;align-items:center;margin:16px 0;padding:18px;border-radius:14px;background:var(--soft)}.equality-note b{font:900 1.5rem ui-monospace,monospace;color:var(--teal)}
.roundoff-microscope{padding:25px}.number-line{height:110px;position:relative;border-bottom:3px solid var(--line)}.number-line span{position:absolute;left:50%;bottom:8px}.number-line i{position:absolute;bottom:-7px;width:14px;height:14px;border-radius:50%;background:var(--ink)}#zeroPoint{left:50%}#sinPoint{left:53%;background:var(--l4-red);transition:.3s}#sinPoint.accepted{background:var(--l4-green);box-shadow:0 0 0 10px rgba(24,167,122,.15)}.number-line b{position:absolute;left:54%;top:12px;color:var(--muted)}.roundoff-tests{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0}.roundoff-tests>div{padding:18px;border:1px solid var(--line);border-radius:13px;background:var(--soft)}.roundoff-tests strong{display:block;font-size:1.3rem;margin-top:8px}
.logic-gates{padding:24px;display:grid;grid-template-columns:200px 1fr;gap:24px}.gate-inputs{display:flex;gap:12px}.gate-inputs button{width:85px;height:85px;border:1px solid var(--line);border-radius:18px;background:var(--soft);color:var(--ink)}.gate-inputs button.on{background:var(--teal);color:#fff}.gate-inputs span,.gate-inputs b{display:block}.gate-inputs b{font-size:1.7rem}.gate-results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gate-results>div{padding:16px;border-radius:13px;background:var(--soft);text-align:center}.gate-results strong{display:block;font-size:2rem;color:var(--teal)}.gate-results small{color:var(--muted)}.precedence-stack{margin:18px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.precedence-stack ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.precedence-stack li{padding:12px;border-radius:10px;background:var(--soft);display:flex;flex-direction:column}.precedence-stack li b{color:var(--teal)}
.logical-functions-board{display:grid;grid-template-columns:1fr 1fr;gap:18px}.function-family{display:grid;grid-template-columns:1fr 1fr;gap:10px}.function-family article{padding:16px;border:1px solid var(--line);border-radius:13px;background:var(--soft)}.type-inspector{border:1px solid var(--line);border-radius:18px;background:var(--paper);overflow:hidden}.type-values{display:flex;gap:5px;padding:12px;background:var(--soft);flex-wrap:wrap}.type-values button{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:7px 10px;color:var(--ink)}.type-values button.active{background:var(--teal);color:#fff}.type-results{padding:15px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.type-results span{display:flex;justify-content:space-between;padding:8px;border-radius:8px;background:var(--soft)}.any-all-demo{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0}.any-all-cells{display:flex;gap:6px}.any-all-cells button{width:48px;height:48px;border:1px solid var(--line);border-radius:10px;background:#ffe6e2;color:var(--l4-red)}.any-all-cells button.on{background:#dff8ee;color:var(--l4-green)}.any-all-demo>div:not(:first-child){padding:10px 16px;border-radius:10px;background:var(--soft)}
.logical-index-demo{padding:25px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:15px;align-items:center}.matrix-card h3{text-align:center}.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.matrix-grid i{display:grid;place-items:center;height:58px;border-radius:8px;background:var(--soft);font-style:normal;font-weight:800}.matrix-grid i.picked,.matrix-grid i.true{background:#dff8ee;color:var(--l4-green)}.matrix-grid i.false{background:#ffe6e2;color:var(--l4-red)}.index-arrow{text-align:center}.index-arrow input{width:65px;border:1px solid var(--line);border-radius:7px;padding:6px}.index-arrow span{display:block;font-size:2rem;color:var(--teal)}.picked-values{display:flex;gap:8px;justify-content:center}.picked-values b{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:var(--teal);color:#fff}.index-explain{grid-template-columns:repeat(3,1fr)}
.final-inspector{padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.inspector-input{display:flex;align-items:center;justify-content:center;gap:15px;font-size:1.3rem}.final-inspector pre{margin:0;padding:20px;border-radius:14px;background:#0d2025;color:#eaffff}.inspector-flow{grid-column:1/3;display:flex;align-items:center;justify-content:center;gap:12px}.inspector-flow span{padding:9px 13px;border-radius:999px;background:var(--soft)}.lesson-summary{display:flex;align-items:center;gap:10px;margin-top:25px}.lesson-summary>div{flex:1;min-height:120px;padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}.lesson-summary b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;margin-bottom:9px}.lesson-summary i{color:var(--teal);font-size:1.8rem}
@media(max-width:1050px){.if-simulator,.switch-console,.logical-functions-board{grid-template-columns:1fr}.filter-belt{grid-template-columns:1fr}.belt-gate{margin:auto}.perfect-square-demo,.grade-ladder,.logical-vector-builder,.logical-index-demo{grid-template-columns:1fr}.logical-index-demo .index-arrow span{transform:rotate(90deg)}.operator-cards{grid-template-columns:repeat(3,1fr)}.precedence-stack ol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.syntax-block,.concept-grid.three,.road-map,.roundoff-tests,.gate-results,.index-explain,.final-inspector{grid-template-columns:1fr}.gate-question,.two-road-input,.fan-demo,.mask-formula,.count-compare,.logic-gates{display:block}.square-strip{grid-template-columns:repeat(6,1fr)}.array-values,.array-answers{grid-template-columns:repeat(5,1fr)}.operator-cards{grid-template-columns:repeat(2,1fr)}.precedence-stack ol{grid-template-columns:1fr}.logical-functions-board,.function-family{grid-template-columns:1fr}.final-inspector .inspector-flow{grid-column:auto;flex-direction:column}.lesson-summary{flex-direction:column}.lesson-summary i{transform:rotate(90deg)}.hero-logic{min-height:430px}.hero-logic .branch{width:120px}.branch-a{left:25px}.branch-b{right:25px}}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.hero-badges span{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font-size:.78rem}
.index-explain b,.index-explain code{display:block}.index-explain code{margin:7px 0;color:var(--teal)}

/* v1.2.1 dark-mode contrast fixes for light semantic panels */
.sim-meter,.sim-meter .meter-scale,.sim-meter b{color:#173239!important}
:root[data-theme="dark"] .sim-meter{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
:root[data-theme="dark"] .answer-yes,:root[data-theme="dark"] .branch-a i,:root[data-theme="dark"] .belt-items i.kept,:root[data-theme="dark"] .array-answers i.true,:root[data-theme="dark"] .square-strip .match{color:#087851!important}
:root[data-theme="dark"] .answer-no,:root[data-theme="dark"] .branch-b i,:root[data-theme="dark"] .belt-items i.skipped,:root[data-theme="dark"] .array-answers i.false{color:#9f3027!important}
:root[data-theme="dark"] .logical-mask-cell.on,:root[data-theme="dark"] .mask-cell.on{color:#073f31!important}
/* v1.2.1: keep native button text readable in dark mode. */
.switch-selector button{color:var(--ink)}
.mask-tabs button{color:var(--ink)}
.sim-meter{background-color:#eff7f3}

/* v1.2.2: keep the random-number needle visible on both halves of the meter. */
.sim-meter i{width:5px!important;background:#075c67!important;border:1px solid rgba(255,255,255,.92);border-radius:999px;box-shadow:0 0 0 2px rgba(7,92,103,.18),0 4px 12px rgba(0,0,0,.22)}
:root[data-theme="dark"] .sim-meter i{background:#063f47!important;border-color:#f2ffff;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.4)}