.learning-expansion{margin:46px 0;padding:22px;border:1px solid var(--line,#263b59);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel,#11223a) 92%,var(--cyan,#22d3ee) 8%),var(--bg2,#091426));box-shadow:0 20px 50px rgba(0,0,0,.12)}
.learning-expansion *{box-sizing:border-box}.learning-expansion__head{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;margin-bottom:20px}.learning-expansion__num{display:grid;place-items:center;min-width:46px;height:46px;border:1px solid color-mix(in srgb,var(--cyan,#22d3ee) 62%,var(--line,#263b59));border-radius:13px;background:color-mix(in srgb,var(--cyan,#22d3ee) 10%,var(--bg2,#091426));color:var(--cyan,#22d3ee);font:800 12px "JetBrains Mono",monospace}.learning-expansion h2{margin:0;color:var(--ink,#e5eef8);font-size:clamp(22px,4vw,30px);line-height:1.15}.learning-expansion__lead{max-width:880px;margin:7px 0 0;color:var(--muted,#8fa6c0);font-size:14px;line-height:1.65}
.learning-theory{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:13px}.learning-theory__copy,.learning-rules,.learning-lab,.learning-visual{padding:17px;border:1px solid var(--line,#263b59);border-radius:13px;background:color-mix(in srgb,var(--panel,#11223a) 95%,transparent)}.learning-theory__copy h3,.learning-rules h3,.learning-lab h3,.learning-visual h3{margin:0 0 10px;color:var(--cyan,#22d3ee);font-size:16px}.learning-theory__copy p{margin:9px 0;color:var(--ink,#e5eef8);font-size:14px;line-height:1.72}.learning-theory__copy code{color:var(--amber,#f59e0b)}
.learning-rule-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.learning-rule-list li{position:relative;padding:10px 11px 10px 34px;border:1px solid color-mix(in srgb,var(--line,#263b59) 72%,transparent);border-radius:9px;background:var(--bg2,#091426);color:var(--ink,#e5eef8);font-size:13px;line-height:1.55}.learning-rule-list li::before{content:attr(data-rule);position:absolute;left:10px;top:10px;color:var(--amber,#f59e0b);font:800 10px "JetBrains Mono",monospace}.learning-rule-list b{color:var(--cyan,#22d3ee)}
.learning-visuals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:13px}.learning-visual{min-width:0}.learning-visual p{margin:7px 0 0;color:var(--muted,#8fa6c0);font-size:12px;line-height:1.5}.learning-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.learning-flow button{position:relative;min-height:64px;padding:8px 6px;border:1px solid var(--line,#263b59);border-radius:9px;background:var(--bg2,#091426);color:var(--muted,#8fa6c0);cursor:pointer;font:700 10px/1.35 "JetBrains Mono",monospace}.learning-flow button+button::before{content:"→";position:absolute;left:-8px;top:22px;color:var(--amber,#f59e0b)}.learning-flow button.active{border-color:var(--cyan,#22d3ee);background:color-mix(in srgb,var(--cyan,#22d3ee) 13%,var(--bg2,#091426));color:var(--ink,#e5eef8);box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan,#22d3ee) 11%,transparent)}.learning-flow-detail{min-height:82px;margin-top:9px;padding:9px;border-left:3px solid var(--cyan,#22d3ee);background:var(--bg2,#091426);color:var(--ink,#e5eef8);font-size:12px;line-height:1.55}
.learning-compare{display:grid;grid-template-columns:1fr 26px 1fr;align-items:stretch;gap:7px}.learning-compare__card{padding:10px;border:1px solid var(--line,#263b59);border-radius:9px;background:var(--bg2,#091426)}.learning-compare__card b{display:block;margin-bottom:6px;color:var(--red,#f87171);font:800 10px "JetBrains Mono",monospace;text-transform:uppercase}.learning-compare__card.good b{color:var(--green,#34d399)}.learning-compare__card span{color:var(--ink,#e5eef8);font-size:12px;line-height:1.5}.learning-compare__arrow{display:grid;place-items:center;color:var(--amber,#f59e0b);font-weight:800}
.learning-layer-stage{display:grid;gap:6px;margin:10px 0}.learning-layer{position:relative;overflow:hidden;padding:9px 10px;border:1px solid var(--line,#263b59);border-radius:8px;background:var(--bg2,#091426);color:var(--ink,#e5eef8);font-size:11px}.learning-layer::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--learning-level,50) * 1%);background:color-mix(in srgb,var(--cyan,#22d3ee) 14%,transparent);transition:width .28s}.learning-layer b,.learning-layer span{position:relative;z-index:1}.learning-layer b{color:var(--cyan,#22d3ee)}.learning-slider{width:100%;accent-color:var(--cyan,#22d3ee)}.learning-slider-output{display:block;margin-top:4px;color:var(--amber,#f59e0b);font:700 10px "JetBrains Mono",monospace}
.learning-labs{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}.learning-lab__question{margin:0 0 10px;color:var(--ink,#e5eef8);font-weight:700;line-height:1.5}.learning-choice-list{display:grid;gap:7px}.learning-choice{min-height:44px;padding:9px 11px;border:1px solid var(--line,#263b59);border-radius:9px;background:var(--bg2,#091426);color:var(--ink,#e5eef8);cursor:pointer;text-align:left;font-size:12px;line-height:1.4}.learning-choice:hover,.learning-choice:focus-visible{border-color:var(--cyan,#22d3ee);outline:0}.learning-choice.selected{border-color:var(--amber,#f59e0b);background:color-mix(in srgb,var(--amber,#f59e0b) 9%,var(--bg2,#091426))}.learning-choice.correct{border-color:var(--green,#34d399);background:color-mix(in srgb,var(--green,#34d399) 10%,var(--bg2,#091426))}.learning-choice.wrong{border-color:var(--red,#f87171)}.learning-check{min-height:44px;margin-top:9px;padding:9px 14px;border:1px solid var(--cyan,#22d3ee);border-radius:9px;background:var(--cyan,#22d3ee);color:#04222b;cursor:pointer;font-weight:800}.learning-feedback{min-height:44px;margin:9px 0 0;padding:9px;border-radius:8px;background:var(--bg2,#091426);color:var(--muted,#8fa6c0);font-size:12px;line-height:1.5}.learning-feedback.ok{border-left:3px solid var(--green,#34d399);color:var(--ink,#e5eef8)}.learning-feedback.bad{border-left:3px solid var(--red,#f87171);color:var(--ink,#e5eef8)}
.learning-action-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.learning-action{padding:10px;border:1px solid var(--line,#263b59);border-radius:9px;background:var(--bg2,#091426)}.learning-action b{display:block;color:var(--cyan,#22d3ee);font-size:12px}.learning-action span{display:block;margin-top:4px;color:var(--muted,#8fa6c0);font-size:11px;line-height:1.45}
.learning-practical-model{display:grid;grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);gap:13px;margin-top:13px}.learning-practical-copy,.learning-practical-stage{min-width:0;padding:17px;border:1px solid var(--line,#263b59);border-radius:13px;background:color-mix(in srgb,var(--panel,#11223a) 95%,transparent)}.learning-practical-copy h3{margin:0 0 12px;color:var(--amber,#f59e0b);font-size:16px;line-height:1.4}.learning-practical-copy p{margin:9px 0;color:var(--ink,#e5eef8);font-size:13px;line-height:1.65}.learning-practical-copy b{color:var(--cyan,#22d3ee)}.learning-practical-stage{display:grid;align-content:start;gap:12px}.learning-model{position:relative;min-height:164px;overflow:hidden;border:1px solid color-mix(in srgb,var(--cyan,#22d3ee) 42%,var(--line,#263b59));border-radius:12px;background:radial-gradient(circle at 80% 15%,color-mix(in srgb,var(--cyan,#22d3ee) 13%,transparent),transparent 40%),var(--bg2,#091426);color:var(--ink,#e5eef8)}.learning-model-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.learning-model-controls button{min-height:44px;padding:8px;border:1px solid var(--line,#263b59);border-radius:8px;background:var(--bg2,#091426);color:var(--muted,#8fa6c0);cursor:pointer;font:700 10px/1.35 "JetBrains Mono",monospace}.learning-model-controls button.active{border-color:var(--amber,#f59e0b);color:var(--ink,#e5eef8);background:color-mix(in srgb,var(--amber,#f59e0b) 11%,var(--bg2,#091426))}.learning-practical-stage [data-model-output]{min-height:42px;margin:0;padding:9px 11px;border-left:3px solid var(--cyan,#22d3ee);background:var(--bg2,#091426);color:var(--ink,#e5eef8);font-size:12px;line-height:1.55}
.learning-model.trace{display:grid;grid-template-columns:1fr 1.3fr;gap:14px;align-items:center;padding:18px}.model-code{padding:14px;border-radius:8px;background:#050b15;color:var(--green,#34d399);font:600 13px/1.8 "JetBrains Mono",monospace}.model-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.model-timeline i{height:calc(30px + (var(--model-step) * 10px));border-radius:5px 5px 2px 2px;background:color-mix(in srgb,var(--cyan,#22d3ee) calc(25% + var(--model-step) * 12%),var(--line,#263b59));transition:.25s}
.learning-model.library{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:18px}.learning-model.library span{display:grid;place-items:center;padding:12px;border:1px solid var(--line,#263b59);border-radius:9px;background:color-mix(in srgb,var(--cyan,#22d3ee) 6%,var(--panel,#11223a));font:700 11px "JetBrains Mono",monospace}.learning-model.library span.active{border-color:var(--amber,#f59e0b);color:var(--amber,#f59e0b)}
.learning-model.ui{display:flex;align-items:center;justify-content:center;gap:8px;padding:18px;flex-wrap:wrap}.learning-model.ui span{padding:14px;border:1px solid var(--line,#263b59);border-radius:9px;background:var(--panel,#11223a);font:700 11px "JetBrains Mono",monospace}.learning-model.ui i{color:var(--amber,#f59e0b);font-style:normal;font-size:11px}
.learning-model.game{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px}.model-player,.model-wall{position:absolute;width:24px;height:24px;border-radius:6px}.model-player{left:17px;top:17px;z-index:2;background:var(--cyan,#22d3ee);box-shadow:0 0 18px color-mix(in srgb,var(--cyan,#22d3ee) 55%,transparent);transition:transform .28s}.model-wall{right:54px;top:45px;width:18px;height:84px;background:var(--red,#f87171)}.learning-model.game span{position:absolute;left:12px;bottom:8px;font:700 10px "JetBrains Mono",monospace;color:var(--amber,#f59e0b)}
.learning-model.document{width:76%;margin:auto;padding:19px;background:#f7f2e8;color:#172033;box-shadow:0 14px 40px rgba(0,0,0,.22)}.learning-model.document b{display:block;margin-bottom:15px;font-size:19px}.learning-model.document span{display:block;height:6px;margin:8px 0;border-radius:4px;background:#9da8b5}.learning-model.document span:nth-child(3){width:72%}.learning-model.document em{display:block;margin-top:9px;font-style:normal;font-size:11px}
.learning-model.slide{margin:auto;aspect-ratio:16/9;min-height:0;padding:18px;background:linear-gradient(135deg,#14284a,#081222)}.learning-model.slide b{display:block;max-width:62%;font-size:18px}.slide-object{position:absolute;right:17px;top:17px;width:29%;height:60%;border-radius:50% 14px 50% 14px;background:linear-gradient(135deg,var(--cyan,#22d3ee),var(--violet,#a78bfa))}.learning-model.slide i{display:block;width:54%;height:6px;margin-top:10px;border-radius:4px;background:rgba(255,255,255,.28)}
.learning-model.sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;align-content:center;padding:18px;background:var(--line,#263b59)}.learning-model.sheet>*{display:grid;place-items:center;min-height:38px;background:var(--bg2,#091426);font:600 11px "JetBrains Mono",monospace}.learning-model.sheet b{color:var(--cyan,#22d3ee);background:var(--panel,#11223a)}
.learning-model.analysis{display:flex;align-items:end;justify-content:center;gap:12px;padding:18px 18px 34px}.learning-model.analysis i{width:13%;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(var(--cyan,#22d3ee),var(--violet,#a78bfa));transform:scaleY(calc(.55 + var(--model-step) * .15));transform-origin:bottom;transition:.25s}.learning-model.analysis b{position:absolute;left:12px;bottom:8px;color:var(--amber,#f59e0b);font:700 10px "JetBrains Mono",monospace}
.learning-model.database{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:17px}.learning-model.database>div{display:grid;border:1px solid var(--line,#263b59);border-radius:8px;overflow:hidden}.learning-model.database b,.learning-model.database span{padding:7px 9px}.learning-model.database b{background:var(--cyan,#22d3ee);color:#04222b;font-size:11px}.learning-model.database span{border-top:1px solid var(--line,#263b59);font:600 10px "JetBrains Mono",monospace}.learning-model.database>i{color:var(--amber,#f59e0b);font-style:normal;font-weight:800}
.learning-model.ide{display:grid;grid-template-columns:.7fr auto 1.3fr;gap:9px;align-items:stretch;padding:14px}.learning-model.ide div,.learning-model.ide pre{display:grid;align-content:start;gap:7px;margin:0;padding:11px;border:1px solid var(--line,#263b59);border-radius:8px;background:#050b15;font:600 10px "JetBrains Mono",monospace}.learning-model.ide i{align-self:center;color:var(--amber,#f59e0b);font-style:normal;font-size:10px}
.learning-model.office{display:grid;grid-template-columns:repeat(3,1fr);align-content:start}.learning-model.office b{padding:9px;border-right:1px solid var(--line,#263b59);background:var(--panel,#11223a);font-size:10px;text-align:center}.learning-model.office div{grid-column:1/-1;min-height:88px;padding:18px;background:linear-gradient(145deg,#f7f2e8 50%,#dae5ef 50%);color:#172033;font-weight:800}.learning-model.office span{grid-column:1/-1;padding:7px 10px;color:var(--green,#34d399);font:700 10px "JetBrains Mono",monospace}
@media(max-width:900px){.learning-theory{grid-template-columns:1fr}.learning-visuals{grid-template-columns:1fr 1fr}.learning-visual:last-child{grid-column:1/-1}.learning-labs{grid-template-columns:1fr}.learning-practical-model{grid-template-columns:1fr}}
@media(max-width:600px){.learning-expansion{margin:32px 0;padding:14px}.learning-expansion__head{grid-template-columns:1fr}.learning-expansion__num{width:46px}.learning-visuals{grid-template-columns:1fr}.learning-visual:last-child{grid-column:auto}.learning-flow{grid-template-columns:1fr 1fr}.learning-flow button+button::before{display:none}.learning-action-map{grid-template-columns:1fr}.learning-compare{grid-template-columns:1fr}.learning-compare__arrow{transform:rotate(90deg)}.learning-practical-copy,.learning-practical-stage{padding:13px}.learning-model-controls{grid-template-columns:1fr 1fr}.learning-model.trace{grid-template-columns:1fr}.learning-model.database{grid-template-columns:1fr}.learning-model.database>i{transform:rotate(90deg);text-align:center}.learning-model.ide{grid-template-columns:1fr}.learning-model.ide i{transform:rotate(90deg);text-align:center}}
@media(prefers-reduced-motion:reduce){.learning-layer::after{transition:none}}
@media(forced-colors:active){.learning-flow button.active,.learning-choice.selected,.learning-choice.correct,.learning-choice.wrong{outline:2px solid CanvasText}.learning-layer::after{display:none}}