.lesson-menu{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0}
.lesson-menu a{border:1px solid #466780;background:#1a3041;border-radius:99px;padding:4px 11px;font-size:12px;text-decoration:none;color:#b5dfef}
.lesson-intro{border-left:3px solid #7cccb2;background:#1b393c;border-radius:0 9px 9px 0;color:#d1efe7;padding:10px 13px;font-size:14px;margin-bottom:22px}
.pad-buttons{display:flex;gap:10px;justify-content:center;margin:11px 0}
.pad-buttons button{flex:1;max-width:220px;min-height:48px;touch-action:none}
.options label.control{font-size:14px}
.interp-compare{background:#12283a;border:1px solid #3a6372;border-radius:10px;padding:11px;margin:9px 0 14px}
.interp-live-controls{display:flex;align-items:end;flex-wrap:wrap;gap:9px 20px;margin:13px 0}
#interpCompare[hidden]{display:none!important}
.interp-live-controls>label{display:flex;flex-direction:column;gap:6px;min-width:175px;font-size:13px;color:#c8e1ed}
.interp-live-controls select{min-height:42px;width:100%}
.interp-live-controls .row{margin:0;flex:1}
.interp-live-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.interp-live-card{background:#102436;border:1px solid #35576d;border-radius:10px;padding:10px;min-width:0}
.interp-live-card.recommended{border-color:#5cbf9f;background:#153436}
.interp-live-card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:5px;margin-bottom:8px}
.interp-live-card-head strong{font-size:14px;color:#f1faff}
.interp-live-card-head span{font-size:11px;color:#afcbd9}
.interp-live-card canvas{display:block;width:100%;height:auto;aspect-ratio:480/238;border-radius:6px;background:#152b43}
.interp-live-card code{display:block;margin-top:8px;min-height:2em;font-size:12px;color:#c1e5f5;white-space:normal;overflow-wrap:anywhere}
.interp-live-legend{display:flex;gap:7px 17px;flex-wrap:wrap;margin:14px 0 10px;font-size:12px;color:#bfd4e7}
.interp-live-snapshot{min-height:5.5em;background:#183a47;border-left:3px solid #7cd5bc;border-radius:0 8px 8px 0;padding:12px 13px;color:#dbf9f0;font-size:13px;line-height:1.7;font-variant-numeric:tabular-nums}
#interpOptionalNumbers>summary{cursor:pointer;font-size:14px;font-weight:600;color:#aadaed}
#interpOptionalNumbers>.panel{margin-top:12px}
.interp-compare>strong{font-size:13px;color:#def6f8}
.interp-compare canvas{display:block;width:100%;height:auto;aspect-ratio:360/146;image-rendering:auto;margin-top:7px;border-radius:7px;background:#102137}
.interp-compare p{font-size:12px;line-height:1.5;margin:6px 0 0}
.study-section{margin:28px 0;scroll-margin-top:12px}
.section-head{display:flex;gap:12px;align-items:flex-start;margin:20px 0 12px}
.section-head>span{background:#25445b;color:#b9f8fa;border:1px solid #4f8391;border-radius:9px;padding:8px 11px;font-weight:bold}
.section-head h2{margin:0 0 5px}
.section-head p{margin:0}
.metrics,.coords-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.metrics>div,.coords-grid>div{border:1px solid #3e5a70;background:#142537;border-radius:9px;padding:11px}
.metrics span,.coords-grid span{display:block;font-size:12px;color:#acc4d6}
.metrics strong,.coords-grid strong{font-size:19px;color:#eff8fc;display:block;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.phase-chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.phase-chip{border:1px solid #47677f;background:#1d3a51;color:#ddedf9;border-radius:8px;padding:7px 10px;font-size:12px}
.phase-chip.inactive{opacity:.42;filter:saturate(.3)}
.phase-chip.executed{opacity:1}
.phase-chip.fixed{border-color:#6fae8c;background:#1d453e;color:#cbfbd8}
.snapshot-hint{background:#183b42;border:1px solid #346c74;border-radius:8px;color:#c8f3ed;font-size:13px;line-height:1.5;min-height:3.4em;padding:8px 11px;margin:0 0 12px}
.metrics strong,.coords-grid strong{font-variant-numeric:tabular-nums lining-nums;min-height:1.5em}
#frameExplain{min-height:4.8em}
#liveStatus{font-variant-numeric:tabular-nums;white-space:pre-wrap;min-height:6.5em}
#lifeExplain{min-height:5em}
.insight{color:#dcf2f6;background:#183746;border-left:3px solid #72c7d8;padding:12px 14px;border-radius:0 8px 8px 0;font-size:14px;margin:12px 0}
.entity-log{display:grid;gap:7px;margin:12px 0}
.log-row{display:flex;gap:10px;padding:7px 9px;background:#11243a;border-radius:7px;color:#bcd3e8;font-size:12px}
.log-row span:first-child{min-width:46px;color:#91dcd4;font-variant-numeric:tabular-nums}
.equation{text-align:center;background:#11283b;border:1px solid #32536c;border-radius:8px;color:#b4eff7;padding:12px;font-size:17px;font-variant-numeric:tabular-nums}
.quiz{display:grid;gap:12px}
.quiz-card{border:1px solid #455d71;background:#19283b;padding:13px;border-radius:9px}
.quiz-card h3{font-size:15px;margin:0 0 10px}
.quiz-answers{display:flex;flex-wrap:wrap;gap:8px}
.quiz-answers button{flex:1 1 200px;text-align:left;font-size:13px}
.quiz-answers button.right{background:#23503e;border-color:#72b998}
.quiz-answers button.wrong{background:#4c2c3e;border-color:#be7685}
.quiz-card p{margin:7px 0 0}
@media(max-width:740px){
 .interp-live-grid{grid-template-columns:1fr;gap:9px}
 .interp-live-card-head strong{font-size:13px}
 .interp-live-controls>label{width:100%}
 .interp-live-controls .row{width:100%}
 .metrics,.coords-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .metrics strong,.coords-grid strong{font-size:17px}
 .phase-chip{padding:5px 7px}
 .quiz-answers button{flex:1 1 100%}
 .pad-buttons{gap:6px}
 .pad-buttons button{padding:8px}
 .equation{font-size:13px}
}