/* Static generated laptop artwork; screen coordinates match the 1536 × 1024 asset. */
.learning-showcase { margin-top: -8px; }
.learning-figure { margin: 0 auto; max-width: 1160px; }
.learning-visual { position: relative; container-type: inline-size; isolation: isolate; }
.laptop-art { display: block; width: 100%; height: auto; border-radius: 26px; }
.dark .laptop-art { mask-image: linear-gradient(to right, transparent, #000 1.5%, #000 98.5%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 94%, transparent); mask-composite: intersect; }
.laptop-screen { position: absolute; left: 32.62%; top: 42.09%; width: 34.77%; height: 25.88%; container-type: inline-size; clip-path: none; background: #101b2d; color: #d2dce8; overflow: hidden; display: flex; flex-direction: column; border-radius: 2px; }
.laptop-screen-bar { display: flex; align-items: center; gap: 1.6275cqw; flex-shrink: 0; height: 5.6058cqw; padding: 0 1.9892cqw; border-bottom: 1px solid #62c7da26; font: 500 1.4467cqw 'JetBrains Mono', monospace; color: #b0bed0; }
.laptop-colab { color: #f9ab00; font: 700 3.255cqw/1 Arial, sans-serif; letter-spacing: -0.5425cqw; margin-right: 0.63291cqw; }
.laptop-runtime { margin-left: auto; color: #a1dfea; font-size: 1.1754cqw; white-space: nowrap; }
.laptop-runtime > span { color: #81c995; font-size: 0.99458cqw; }
.laptop-screen-main { display: grid; grid-template-columns: 48% 52%; flex: 1; min-height: 0; }
.laptop-code { padding: 1.9892cqw 1.085cqw 1.1754cqw 2.17cqw; border-right: 1px solid #62c7da1c; min-width: 0; }
.laptop-cell-label { display: flex; align-items: center; gap: 1.085cqw; font: 500 1.302cqw/1.5 'JetBrains Mono', monospace; color: #a1dfea; margin-bottom: 0.99458cqw; }
.laptop-cell-label > span:first-child { color: #70869f; font-size: 1.085cqw; }
.laptop-cell-label-plot { margin-top: 1.9892cqw; color: #d8b4fe; }
.laptop-code pre { margin: 0; font: 400 1.5913cqw/1.5 'JetBrains Mono', monospace; white-space: pre; }
.laptop-code .k, .laptop-code .kn { color: #c084fc; }
.laptop-code .s, .laptop-code .s1, .laptop-code .s2 { color: #9ed9b5; }
.laptop-code .nf, .laptop-code .nb { color: #8ab4f8; }
.laptop-code .mi, .laptop-code .mf { color: #fbbc04; }
.laptop-code .o { color: #9cafc4; }
.laptop-chart { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 1.8083cqw 1.3562cqw 0.90416cqw; }
.laptop-chart-heading { padding-left: 1.085cqw; }
.laptop-chart-heading strong { display: block; font-size: 1.8083cqw; font-weight: 600; color: #f1f5f9; letter-spacing: -.02em; }
.laptop-chart-heading > span { display: block; font-size: 1.302cqw; color: #9cafc4; margin-top: 0.45208cqw; }
.laptop-chart > img { display: block; width: 100%; min-height: 0; flex: 1; object-fit: contain; }
.laptop-chart-legend { display: flex; justify-content: center; gap: 2.3508cqw; color: #b0bed0; font-size: 1.1754cqw; }
.laptop-chart-legend > span { display: flex; align-items: center; gap: 0.72333cqw; }
.legend-dot { width: 0.81374cqw; height: 0.81374cqw; border-radius: 50%; background: #62c7da; }
.legend-line { width: 1.8083cqw; height: 2px; background: #d8b4fe; }
.laptop-screen-result { display: flex; align-items: center; gap: 0.99458cqw; flex-shrink: 0; min-height: 4.1591cqw; padding: 0.72333cqw 1.9892cqw; border-top: 1px solid #62c7da26; background: #008cb709; font: 400 1.2658cqw/1.3 'JetBrains Mono', monospace; color: #a1dfea; }
.result-status { color: #81c995; }
.result-method { margin-left: auto; color: #9cafc4; }
.learning-figure-caption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 8px 7% 24px; color: var(--muted-color); font-size: 12px; }
.learning-figure-caption > span, .learning-figure-caption a { display: inline-flex; align-items: center; gap: 10px; }
.learning-figure-caption > span > i { color: var(--link-color); }
.learning-figure-caption a { color: var(--link-color); padding: 8px 0; font-weight: 600; }
.learning-figure-caption a:hover { text-decoration: underline; text-underline-offset: 5px; }
.learning-figure-caption a:focus-visible, .learning-topic a:focus-visible { outline: 2px solid #2dabc4; outline-offset: 5px; border-radius: 3px; }
.learning-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.learning-topic { position: relative; min-width: 0; padding: 26px 24px 28px; border-radius: 18px; border: 1px solid var(--card-edge); background: var(--card-surface); box-shadow: var(--card-shadow); }
.learning-topic::before { content: ''; position: absolute; height: 2px; top: -1px; left: 24px; right: 24px; background: linear-gradient(90deg, var(--topic-color), transparent); }
.learning-topic-1 { --topic-color: #2dabc4; --topic-tint: #008cb712; }
.learning-topic-2 { --topic-color: #62c7da; --topic-tint: #62c7da12; }
.learning-topic-3 { --topic-color: #aa78d0; --topic-tint: #7a209f12; }
.learning-topic-4 { --topic-color: #d76da8; --topic-tint: #c21e7212; }
.learning-topic-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.learning-topic-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 13px; background: var(--topic-tint); color: var(--topic-color); border: 1px solid color-mix(in srgb, var(--topic-color) 20%, transparent); font-size: 19px; }
.learning-topic-number { font: 400 11px 'JetBrains Mono', monospace; color: var(--muted-color); opacity: .65; letter-spacing: .1em; }
.learning-topic h3 { color: var(--heading-color); font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; margin-bottom: 12px; }
.learning-topic p { font-size: 13px; color: var(--muted-color); margin: 0; text-wrap: pretty; }
.learning-topic p a { color: var(--link-color); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link-color) 35%, transparent); text-underline-offset: 3px; }
@media (max-width: 1023px) {
    .learning-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .learning-showcase { margin-top: 0; }
    .laptop-art { border-radius: 16px; }
    .learning-figure-caption { justify-content: center; text-align: center; padding: 14px 0 18px; font-size: 11px; gap: 4px 18px; }
    .learning-topics { grid-template-columns: 1fr; gap: 14px; }
    .learning-topic { padding: 22px; }
    .learning-topic-top { margin-bottom: 14px; }
    .learning-topic h3 { font-size: 17px; }
    .learning-topic p { font-size: 14px; }
}