main.learning-page{width:100%;max-width:var(--max-width);height:auto;min-height:0;padding:0;align-items:stretch}.learning-diagram{--diagram-ink: var(--text-color);--diagram-muted: var(--text-muted);--diagram-line: var(--border-color);--diagram-card: var(--bg-card);width:100%;max-width:var(--max-width);min-width:0;margin:0 auto;padding:1.5rem .8rem 3rem;line-height:1.35}.learning-tabs{display:flex;gap:.75rem;justify-content:center;margin:0 auto 1.2rem;width:min(100%,420px)}.learning-tabs .btn{flex:1;min-width:0}.learning-progress{display:none}.learning-diagram[data-mode=quiz] .learning-tabs .btn.filled{background-color:var(--orange-base);border-color:var(--orange-base)}.learning-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(18rem,1fr);gap:1.4rem;align-items:start;width:100%}.diagram-stage,.learning-card{border:2px solid var(--diagram-line);border-radius:12px 18px 14px 20px/18px 14px 20px 12px;background:var(--diagram-card);box-shadow:4px 5px 0 var(--shadow-color);transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}.learning-diagram[data-mode=explore] .diagram-stage{border-color:color-mix(in srgb,var(--teal-base) 55%,var(--diagram-line))}.learning-diagram[data-mode=quiz] .diagram-stage{border-color:color-mix(in srgb,var(--orange-base) 65%,var(--diagram-line));background:color-mix(in srgb,var(--orange-base) 5%,var(--diagram-card))}.learning-diagram[data-mode=quiz] .diagram-art [data-diagram-part]{opacity:.58}.diagram-stage{padding:.8rem}.diagram-art svg{display:block;width:100%;height:auto}.diagram-art [data-diagram-part]{opacity:.86;transition:opacity .2s ease,filter .2s ease}.diagram-art .is-highlighted{opacity:1;filter:drop-shadow(0 0 6px var(--teal-base))}[data-diagram-pin]{cursor:pointer;outline:none}[data-diagram-pin] circle{fill:var(--orange-base);stroke:var(--diagram-card);stroke-width:3;transition:transform .2s ease,fill .2s ease;transform-box:fill-box;transform-origin:center}[data-diagram-pin]:hover circle,[data-diagram-pin]:focus-visible circle{transform:scale(1.18)}[data-diagram-pin].is-active circle{fill:var(--teal-base);transform:scale(1.25)}[data-diagram-pin].is-visited circle{fill:var(--green-base)}[data-diagram-pin].is-correct circle{fill:var(--green-base);transform:scale(1.25)}[data-diagram-pin].is-incorrect circle{fill:var(--red-base);transform:scale(1.25)}[data-diagram-pin] text{fill:#fff;font:700 14px sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}.learning-aside{display:grid;gap:1rem}.learning-card{padding:1.2rem}.learning-diagram [hidden]{display:none!important}.detail-card{min-height:12rem}.learning-diagram[data-mode=explore] .detail-card{border-color:color-mix(in srgb,var(--teal-base) 35%,var(--diagram-line))}.detail-card.is-empty{display:grid;place-items:center;color:var(--diagram-muted);text-align:center;font-style:italic}.detail-card h3{margin:0 0 .55rem;color:var(--purple-primary);font-size:1.6rem}.detail-card p{margin:.55rem 0;color:var(--diagram-muted)}.detail-image{display:block;width:min(100%,260px);height:150px;margin:.75rem 0 1rem;border:1px solid var(--diagram-line);border-radius:8px;object-fit:cover;background:var(--bg-color)}.detail-function{border-top:2px dashed var(--diagram-line);padding-top:.75rem;color:var(--diagram-ink)!important}.detail-function strong{display:block;margin-bottom:.2rem;color:var(--purple-primary)}.quiz-score{display:flex;justify-content:space-between;gap:.5rem;color:var(--diagram-muted);font-size:.9rem}.quiz-score strong{color:var(--diagram-ink)}.learning-diagram[data-mode=quiz] .quiz-card{border-color:color-mix(in srgb,var(--orange-base) 55%,var(--diagram-line))}.quiz-score button,.quiz-next{border:1px solid var(--diagram-line);border-radius:8px;background:transparent;color:var(--diagram-ink);font:inherit;cursor:pointer}.quiz-score button{padding:.25rem .5rem;font-size:.8rem}.quiz-prompt{color:var(--purple-primary);font-size:1.25rem}.quiz-prompt em{color:var(--teal-base);font-style:normal}.quiz-options{display:grid;gap:.5rem}.quiz-options button{padding:.7rem;border:1px solid var(--diagram-line);border-radius:8px;background:var(--bg-color);color:var(--diagram-ink);font:inherit;text-align:left;cursor:pointer}.quiz-options button:hover:not(:disabled){border-color:var(--teal-base);background:color-mix(in srgb,var(--teal-base) 12%,transparent)}.quiz-options button.is-correct{border-color:var(--green-base);background:color-mix(in srgb,var(--green-base) 20%,transparent)}.quiz-options button.is-incorrect{border-color:var(--red-base);background:color-mix(in srgb,var(--red-base) 18%,transparent)}.quiz-hint{color:var(--diagram-muted);font-style:italic}.quiz-feedback{display:none;gap:.4rem;margin-top:1rem;padding-top:.8rem;border-top:2px dashed var(--diagram-line);color:var(--diagram-muted)}.quiz-feedback.is-visible{display:grid}.quiz-feedback .is-good{color:var(--green-base)}.quiz-feedback .is-bad{color:var(--red-base)}.quiz-next{margin-top:1rem;padding:.55rem .8rem;background:var(--purple-primary);color:#fff}.learning-note{margin:1.5rem 0 0;padding-top:1rem;border-top:2px dashed var(--diagram-line);color:var(--diagram-muted);font-size:.85rem}@media(max-width:800px){.learning-heading,.learning-grid{grid-template-columns:1fr;display:grid}.learning-progress{min-width:0}}