.learning-visual{margin:26px 0;background:#f7f4ec;border:2px solid var(--ink,#171817);border-radius:18px;overflow:hidden;box-shadow:5px 5px 0 rgba(23,24,23,.08)}
.learning-heading{padding:22px 24px 0}
.learning-eyebrow{display:block;font-size:11px;letter-spacing:.15em;font-weight:700;margin-bottom:8px;color:#4a5357}
.learning-heading h3{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.025em}
.learning-prediction{padding:0 24px;font-size:15px;line-height:1.6;margin:13px 0 20px;color:#35434a}
.learning-stage{background:#101b25;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#586774 #101b25;scrollbar-width:thin}
.learning-stage svg{display:block;width:100%;min-width:560px;max-width:none;height:auto;font-family:Inter,Arial,sans-serif;user-select:none}
.learning-controls{padding:19px 24px;border-bottom:1px solid #d5d9d4;background:#eef0e8}
.learning-playback{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px 13px}
.learning-playback .btn{white-space:nowrap;font-size:13px;min-height:42px;padding:10px 15px}
.learning-scrub-label{font-size:12px;font-weight:700;line-height:1.4}
.learning-playback input{grid-column:1/-1}
.learning-visual input[type=range]{accent-color:#d44d38;height:28px;min-height:28px;padding:0;margin:0;width:100%;box-shadow:none;border:0;background:transparent;cursor:pointer}
.learning-visual input[type=range]:focus-visible{outline:2px solid #bd4c3c;outline-offset:4px;border-radius:4px}
.learning-parameter{display:grid;gap:6px;margin-top:16px}
.learning-parameter label{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:13px;font-weight:700;margin:0}
.learning-parameter output{font-variant-numeric:tabular-nums;color:#526168;font-size:13px;white-space:nowrap}
.learning-side{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;flex-wrap:wrap}
.learning-side .btn{padding:7px 15px;min-height:36px;font-size:12px}
.learning-side .btn[aria-pressed=true]{background:#14262b;color:#f5f7ef}
.learning-readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:18px 24px;background:#fffdf7;border-bottom:1px solid #d5d9d4}
.learning-readouts>div{padding:0 14px;border-right:1px solid #e0e4dc;min-width:0}
.learning-readouts>div:first-child{padding-left:0}
.learning-readouts>div:last-child{padding-right:0;border:0}
.learning-readouts span{display:block;color:#59666a;font-size:11px;line-height:1.5;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.learning-readouts b{display:block;font-size:13px;line-height:1.6;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font-weight:650}
.learning-observation{padding:0 24px;margin:18px 0 10px;font-size:14px;line-height:1.65;color:#23343a}
.learning-note{padding:0 24px;margin:0 0 22px;color:#626d70;font-size:12px;line-height:1.7}
@media(max-width:600px){.learning-heading{padding:18px 17px 0}.learning-heading h3{font-size:21px}.learning-prediction{padding:0 17px;font-size:14px}.learning-controls{padding:16px 17px}.learning-playback{grid-template-columns:auto auto;gap:10px}.learning-scrub-label{grid-column:1/-1}.learning-readouts{padding:16px 17px;grid-template-columns:1fr;gap:12px}.learning-readouts>div{border:0;border-bottom:1px solid #e0e4dc;padding:0 0 10px!important}.learning-readouts>div:last-child{padding-bottom:0!important}.learning-readouts span{font-size:10px}.learning-readouts b{font-size:13px}.learning-observation,.learning-note{padding-left:17px;padding-right:17px}.learning-parameter label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.learning-visual *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}