.learn-page { max-width: 1120px; margin: auto; padding: 52px 0 70px; color: #302b23; --learn-line: #d9cdbb; }
.learn-page [hidden] { display: none !important; }
.learn-page h1, .learn-page h2, .learn-page h3 { letter-spacing: -.035em; }
.learn-page h2:focus, .learn-page h3:focus { outline: none; }
.learn-page :focus-visible { outline: 3px solid #3156bd; outline-offset: 5px; }
.learn-page p { line-height: 1.9; }
.learn-intro { display: grid; grid-template-columns: 1.5fr 1fr; gap: 70px; align-items: center; }
.learn-intro h1 { margin: 0; font-size: clamp(34px, 4vw, 50px); line-height: 1.27; }
.learn-intro > div > p:not(.teacher-kicker) { max-width: 590px; margin: 22px 0 0; color: #716758; font-size: 15px; }
.learn-intro aside { padding: 27px; border: 1px solid #cfbd98; border-radius: 15px; background: #f2e7cc; }
.learn-intro aside b { font-size: 17px; }
.learn-intro aside p { margin: 14px 0; color: #655943; font-size: 14px; }
.learn-intro aside small { color: #7b6a4e; font-size: 12px; line-height: 1.8; }
.learn-entry { display: inline-block; margin-top: 18px; color: #395c70; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.learn-quick-links { display: flex; flex-wrap: wrap; gap: 6px 19px; margin-top: 18px; }
.learn-quick-links a { display: inline-flex; align-items: center; min-height: 36px; color: #395c70; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.learn-workspace-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 30px; margin-top: 30px; padding: 23px 25px; border: 1px solid #adbbb0; border-radius: 14px; background: #e9efea; }
.learn-workspace-bar .learn-eyebrow { margin-bottom: 7px; }
.learn-workspace-bar strong { font-size: 17px; line-height: 1.6; }
.learn-workspace-bar p:not(.learn-eyebrow) { margin: 7px 0 0; color: #617064; font-size: 12px; line-height: 1.8; }
.learn-workspace-controls { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; gap: 4px 18px; max-width: 350px; }
.learn-workspace-controls > .button { width: 100%; }
.learn-workspace-controls .learn-delete { color: #805943; }
.learn-storage-message { grid-column: 1 / -1; }
.learn-storage-message:empty { display: none; }
.learn-previous { margin-top: 18px; padding: 18px 22px; background: #fffaf1; border: 1px solid var(--learn-line); border-radius: 12px; }
.learn-previous summary { cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1.8; }
.learn-previous p { font-size: 12px; color: #716653; white-space: pre-wrap; overflow-wrap: anywhere; }
.learn-previous .learn-field { margin-bottom: 12px; }
.learn-revision { margin-top: 18px; padding: 20px 22px; background: #fbf0d7; border: 1px solid #c8ad71; border-radius: 12px; }
.learn-revision summary { cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1.8; }
.learn-revision > p { color: #786342; font-size: 12px; line-height: 1.8; }
.learn-revision .learn-field { margin: 15px 0; }
.learn-revision select { display: block; width: 100%; max-width: 100%; min-height: 44px; margin-top: 8px; padding: 10px; border: 1px solid #b4a68e; border-radius: 8px; color: #433c31; background: #fffdf7; font: inherit; font-size: 13px; }
.learn-revision textarea { resize: vertical; font-size: 12px; }
.learn-activity { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 25px; margin-top: 18px; padding: 18px 22px; border: 1px solid #bdc9ae; border-radius: 12px; background: #edf0e2; }
.learn-activity b { font-size: 14px; }
.learn-activity p { max-width: 650px; margin: 6px 0 0; font-size: 12px; color: #657058; line-height: 1.8; }
.learn-activity > a { flex-shrink: 0; }
.learn-final-actions { margin: 0 0 20px; }
.learn-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 0; margin: 38px 0 0; list-style: none; border-bottom: 1px solid var(--learn-line); scroll-margin-top: 105px; }
.learn-progress li { position: relative; display: flex; align-items: center; gap: 10px; padding: 15px 0 18px; font-size: 13px; color: #7b7365; }
.learn-progress button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.learn-progress span { font: 11px var(--mono); }
.learn-progress [aria-current="step"] { color: #2e526c; font-weight: 750; }
.learn-progress li[aria-current="step"]::after { position: absolute; content: ''; height: 3px; background: #2e526c; bottom: -1px; left: 0; right: 0; }
.learn-step { padding: 29px 0 40px; }
.learn-step > h2 { margin: 0; font-size: 28px; line-height: 1.4; }
.learn-section-lead { color: #746959; font-size: 13px; margin: 12px 0 25px; }
.learn-eyebrow { margin: 0 0 11px; color: #3b617a; font-size: 12px; font-weight: 700; line-height: 1.7; }
.learn-scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; min-width: 0; margin: 0; padding: 0; border: none; }
.learn-scene { position: relative; min-width: 0; cursor: pointer; }
.learn-scene > input { position: absolute; top: 21px; right: 21px; height: 18px; width: 18px; opacity: 0; margin: 0; }
.learn-scene-content { display: flex; flex-direction: column; height: 100%; padding: 21px; border: 1px solid #cabb9f; border-radius: 13px; background: #fffaf1; }
.learn-scene-number { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font: 11px var(--mono); color: #837358; }
.learn-scene-number i { display: block; width: 18px; height: 18px; border: 1px solid #b3a48e; border-radius: 50%; background: #fffdf7; }
.learn-scene-content > strong { font-size: 21px; line-height: 1.5; margin-bottom: 13px; }
.learn-scene-content > b { font-size: 13px; line-height: 1.7; font-weight: 700; }
.learn-scene-content > span:not(.learn-scene-number) { margin: 12px 0 20px; color: #716658; font-size: 12px; line-height: 1.85; }
.learn-scene-content small { padding-top: 15px; margin-top: auto; border-top: 1px solid #ded1ba; color: #655b4d; font-size: 11px; line-height: 1.85; }
.learn-scene input:checked + .learn-scene-content { border: 2px solid #355a72; padding: 20px; background: #eaf0ef; }
.learn-scene input:checked + .learn-scene-content i { border: 5px solid #355a72; }
.learn-scene input:focus-visible + .learn-scene-content { outline: 3px solid #3156bd; outline-offset: 4px; }
.learn-scene:hover .learn-scene-content { border-color: #355a72; }
.learn-actions { display: flex; justify-content: space-between; align-items: center; gap: 23px; margin-top: 25px; }
.learn-actions > p { margin: 0; color: #7b6f5f; font-size: 12px; }
.learn-page .button { min-height: 46px; font-size: 12px; box-shadow: 3px 4px 0 #17130d22; text-align: center; }
.learn-page button, .learn-page a { touch-action: manipulation; }
.learn-page form { max-width: 900px; }
.learn-field { display: block; font-size: 14px; font-weight: 700; margin: 0 0 23px; line-height: 1.7; }
.learn-field input, .learn-field textarea, .learn-document textarea, .learn-exercise-card textarea { display: block; width: 100%; min-width: 0; margin-top: 10px; padding: 13px 15px; border: 1px solid #b4a68e; border-radius: 8px; background: #fffdf7; color: #433c31; font-size: 15px; font-weight: 400; line-height: 1.85; }
.learn-field input { min-height: 50px; }
.learn-field textarea { resize: vertical; min-height: 82px; }
.learn-field input::placeholder, .learn-field textarea::placeholder { color: #8a7e6c; }
.learn-field [aria-invalid] { border-color: #9d3629; }
.learn-final-field { padding: 20px; border: 1px solid #aebdb0; border-radius: 12px; background: #eaf0e8; }
.learn-use-answer { margin-top: -17px; margin-bottom: 22px; }
.learn-error { display: block; margin-top: 8px; color: #9d3629; font-size: 12px; font-weight: 500; }
.learn-hint { display: block; margin-top: 9px; color: #786a57; font-size: 12px; font-weight: 400; }
.learn-optional { margin-left: 10px; font-size: 11px; font-weight: 400; color: #817461; }
.learn-source-kind { display: flex; flex-wrap: wrap; gap: 13px 27px; padding: 0; margin: 0 0 23px; border: none; min-width: 0; }
.learn-source-kind legend { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.learn-source-kind label { display: flex; align-items: center; gap: 7px; color: #695e4c; font-size: 13px; }
.learn-source-kind input, .learn-checks input { accent-color: #355a72; width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.learn-example-action { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.learn-example-action button, .learn-back { display: inline-flex; align-items: center; min-height: 40px; border: none; padding: 8px 0; background: transparent; color: #345c72; font-size: 12px; font-weight: 700; line-height: 1.8; text-align: left; }
.learn-example-action button { text-decoration: underline; text-underline-offset: 4px; }
.learn-example-action span { color: #807460; font-size: 11px; line-height: 1.8; }
.learn-local-note { margin: 17px 0 0; padding: 13px 17px; border-radius: 8px; background: #eae4d7; color: #6b614f; font-size: 12px; }
.learn-instruction-layout { display: grid; grid-template-columns: 1.3fr .8fr; gap: 28px; align-items: start; }
.learn-instruction-layout > *, .learn-continue > *, .learn-tool-grid > *, .learn-why > * { min-width: 0; }
.learn-document { padding: 24px; border: 1px solid var(--learn-line); border-radius: 14px; background: #fffaf1; }
.learn-document > label { font-size: 14px; font-weight: 750; }
.learn-document textarea, .learn-exercise-card textarea { min-height: 300px; resize: vertical; font-size: 13px; }
.learn-button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 23px; margin-top: 18px; }
.learn-side-guide { padding: 24px; border-radius: 14px; background: #e7edeb; }
.learn-side-guide h3 { font-size: 19px; margin: 0 0 18px; }
.learn-side-guide ol { padding-left: 19px; margin: 0; color: #57655f; font-size: 13px; line-height: 1.9; }
.learn-side-guide li { padding: 0 0 13px 4px; }
.learn-side-guide p { border-top: 1px solid #c5d1cb; padding-top: 16px; margin: 7px 0 0; color: #5c6c63; font-size: 12px; }
.learn-checks { margin: 6px 0 24px; padding: 21px; border: 1px solid var(--learn-line); border-radius: 12px; background: #fffaf1; min-width: 0; }
.learn-checks legend { padding: 0 8px; font-size: 14px; font-weight: 750; }
.learn-checks p { margin: 0 0 17px; font-size: 12px; color: #7a6c58; }
.learn-checks [data-learn-checks] { display: grid; gap: 14px; }
.learn-checks label { display: flex; align-items: flex-start; gap: 11px; color: #625a4b; font-size: 13px; line-height: 1.85; cursor: pointer; }
.learn-checks input { margin-top: 3px; }
.learn-observation { padding: 19px 21px; margin-bottom: 25px; border: 1px solid var(--learn-line); border-radius: 12px; background: #f1ebdf; }
.learn-observation summary { font-size: 13px; font-weight: 700; line-height: 1.8; cursor: pointer; }
.learn-observation > p, .learn-observation > small { display: block; font-size: 12px; line-height: 1.8; color: #756650; }
.learn-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.learn-time-fields .learn-field { margin-bottom: 6px; font-size: 12px; }
.learn-time-result { padding: 11px 13px; border-radius: 7px; background: #fffaf1; }
.learn-saved { display: flex; gap: 10px; align-items: flex-start; margin: 19px 0 23px; font-size: 13px; line-height: 1.85; }
.learn-saved input { accent-color: #355a72; width: 18px; height: 18px; flex-shrink: 0; margin: 3px 0 0; }
.learn-exercise-card { margin-top: 35px; padding: 28px; border: 1px solid #adbdae; border-radius: 15px; background: #eaf0e8; scroll-margin-top: 110px; }
.learn-exercise-card h3 { margin: 0; font-size: 26px; }
.learn-exercise-card > p:not(.learn-eyebrow) { font-size: 13px; color: #5f6c5b; }
.learn-exercise-card small { display: block; margin-top: 19px; font-size: 12px; color: #677160; line-height: 1.9; }
.learn-download { background: #fffdf7; }
.learn-continue { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; margin-top: 36px; padding: 28px; border-radius: 15px; background: #f1e3bf; }
.learn-continue h3 { margin: 0 0 15px; font-size: 23px; }
.learn-continue p { margin: 0 0 16px; font-size: 13px; color: #6f6147; }
.learn-continue > div:last-child { display: grid; justify-items: start; align-content: start; gap: 12px; }
.learn-continue small { color: #7b6b50; font-size: 11px; line-height: 1.85; }
.learn-related { display: grid; gap: 10px; }
.learn-related a { color: #395e6e; font-size: 12px; line-height: 1.8; text-decoration: underline; text-underline-offset: 4px; }
.learn-why { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; padding: 43px 0; border-top: 1px solid var(--learn-line); border-bottom: 1px solid var(--learn-line); }
.learn-why, .learn-how, .learn-tools, .learn-anchor { scroll-margin-top: 110px; }
.learn-anchor { display: block; }
.learn-how { padding: 37px 0; border-bottom: 1px solid var(--learn-line); }
.learn-how h2 { font-size: 27px; line-height: 1.4; margin: 0; }
.learn-question-pair { display: grid; grid-template-columns: .85fr 1.3fr; gap: 23px; margin-top: 24px; }
.learn-question-pair > div { min-width: 0; padding: 22px; border-radius: 10px; background: #eae4d8; }
.learn-question-pair > div:last-child { background: #e6ece9; }
.learn-question-pair b { font-size: 13px; }
.learn-question-pair p { font-size: 13px; margin: 13px 0; }
.learn-question-pair small { font-size: 12px; color: #776954; line-height: 1.9; }
.learn-reading { font-size: 11px; color: #7a6d59; }
.learn-reading a { color: #345c72; text-decoration: underline; text-underline-offset: 3px; }
.learn-why h2, .learn-tools > h2 { margin: 0; font-size: 30px; line-height: 1.4; }
.learn-why p:not(.teacher-kicker) { margin: 0 0 14px; color: #776955; font-size: 13px; }
.learn-tools { padding-top: 42px; }
.learn-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin: 29px 0 15px; }
.learn-tool-grid article { border-top: 2px solid #b6a585; padding-top: 15px; }
.learn-tool-grid span { font-size: 11px; color: #84745b; }
.learn-tool-grid h3 { margin: 15px 0 12px; font-size: 21px; }
.learn-tool-grid p { color: #756853; font-size: 12px; margin: 0; }
.learn-tool-grid a { display: inline-flex; align-items: center; min-height: 38px; margin-top: 11px; color: #345c72; font-size: 12px; line-height: 1.8; text-decoration: underline; text-underline-offset: 4px; }
.learn-status { position: fixed; z-index: 110; bottom: 19px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(720px, calc(100vw - 36px)); margin: 0; padding: 13px 18px; border-radius: 10px; background: #294a5d; color: #fffdf7; font-size: 12px; line-height: 1.85; box-shadow: 0 4px 18px #17130d25; pointer-events: none; overflow-wrap: anywhere; }
.learn-status:empty { display: none; }
@media(max-width: 1180px) { .learn-page { margin: 0 24px; }.learn-intro { gap: 40px; }.learn-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }.learn-scene-number { margin-bottom: 17px; }.learn-scene-content > span:not(.learn-scene-number) { margin-bottom: 16px; }.learn-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media(max-width: 760px) { .learn-page { margin: 0 20px; padding-top: 34px; }.learn-intro { grid-template-columns: 1fr; gap: 25px; }.learn-intro h1 { font-size: 36px; }.learn-intro aside { padding: 22px; }.learn-intro aside p { margin: 10px 0; }.learn-progress { gap: 10px; margin-top: 28px; }.learn-progress li { gap: 5px; font-size: 11px; }.learn-progress span { font-size: 9px; }.learn-instruction-layout, .learn-continue, .learn-why { grid-template-columns: 1fr; gap: 24px; }.learn-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.learn-document, .learn-side-guide { padding: 22px; }.learn-why { padding: 32px 0; }.learn-field input, .learn-field textarea, .learn-document textarea, .learn-exercise-card textarea { font-size: 16px; }.learn-continue { padding: 25px; }.learn-why h2, .learn-tools > h2 { font-size: 27px; } }
@media(max-width: 480px) { .learn-page { margin: 0 18px; }.learn-intro > div > p:not(.teacher-kicker) { font-size: 14px; }.learn-intro .teacher-kicker { font-size: 11px; }.learn-progress { gap: 8px; }.learn-progress li { flex-direction: column; align-items: start; gap: 7px; font-size: 11px; padding-bottom: 13px; }.learn-step > h2 { font-size: 25px; }.learn-scenes { grid-template-columns: 1fr; gap: 13px; }.learn-scene-content { padding: 19px; }.learn-scene input:checked + .learn-scene-content { padding: 18px; }.learn-scene-number { margin-bottom: 12px; }.learn-scene-content > strong { margin-bottom: 8px; }.learn-scene-content > span:not(.learn-scene-number) { margin: 10px 0 13px; }.learn-actions { flex-direction: column; align-items: stretch; gap: 15px; }.learn-actions > .button { width: 100%; }.learn-document { padding: 19px 15px; }.learn-button-row { align-items: stretch; flex-direction: column; gap: 13px; }.learn-button-row .learn-back { justify-content: center; }.learn-checks { padding: 18px 15px; }.learn-exercise-card { padding: 23px 17px; }.learn-continue { padding: 24px 19px; }.learn-tool-grid { gap: 25px 18px; }.learn-tool-grid h3 { font-size: 19px; } }
@media(prefers-reduced-motion: reduce) { .learn-page *, .learn-page *::before, .learn-page *::after { transition: none !important; scroll-behavior: auto !important; } }
@media(max-width: 760px) { .learn-question-pair { grid-template-columns: 1fr; gap: 15px; }.learn-how h2 { font-size: 25px; } }
@media(max-width: 480px) { .learn-time-fields { grid-template-columns: 1fr; gap: 14px; }.learn-observation { padding: 18px 15px; } }
@media(max-width: 760px) { .learn-workspace-bar { grid-template-columns: minmax(0, 1fr); padding: 21px; }.learn-workspace-controls { justify-content: start; max-width: none; }.learn-workspace-controls > .button { width: auto; }.learn-progress button { gap: 6px; }.learn-previous { padding: 18px; } }
@media(max-width: 480px) { .learn-workspace-controls > .button { width: 100%; }.learn-workspace-controls { gap: 6px 22px; }.learn-progress button { flex-direction: column; align-items: start; gap: 7px; }.learn-progress li { padding-top: 5px; padding-bottom: 10px; }.learn-final-field { padding: 17px 14px; } }
@media(max-width: 760px) {
  .learn-page { padding-top: 24px; }
  .learn-intro { gap: 0; }
  .learn-intro h1 { font-size: 29px; }
  .learn-intro .teacher-kicker { margin-bottom: 12px; }
  .learn-intro > div > p:not(.teacher-kicker) { margin-top: 12px; font-size: 13px; }
  .learn-intro aside { display: none; }
  .learn-entry { margin-top: 10px; }
  .learn-quick-links { margin-top: 8px; gap: 4px 14px; }
  .learn-quick-links a { font-size: 11px; }
  .learn-workspace-bar { margin-top: 18px; padding: 16px; gap: 12px; }
  .learn-workspace-bar strong { font-size: 14px; }
  .learn-workspace-bar p:not(.learn-eyebrow) { font-size: 11px; }
  .learn-workspace-controls > .button { border-radius: 8px; min-height: 42px; box-shadow: 2px 3px 0 #17130d24; font-size: 12px; }
  .learn-progress { margin-top: 16px; }
}

.learn-agent-feedback{margin:24px 0;padding:24px;border:1px solid #adbbb0;border-radius:14px;background:#edf1e8;min-width:0}.learn-agent-feedback h3{font-size:22px;margin:0 0 12px}.learn-agent-feedback [data-learn-review-panel]{margin-top:22px}.learn-agent-feedback details{margin-bottom:20px}.learn-agent-feedback summary{cursor:pointer;font-size:13px}.learn-agent-feedback [data-learn-review-base]{display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:12px;padding:12px;border:1px solid #b4a68e;border-radius:8px;font:inherit;background:#fffdf7;color:inherit;resize:vertical}.learn-agent-feedback .button{white-space:normal;max-width:100%}.learn-agent-feedback .learn-field{margin-top:20px}.learn-transfer-note{font-size:13px;color:#5f6c5b;line-height:1.9}@media(max-width:480px){.learn-agent-feedback{padding:18px 15px}.learn-agent-feedback .button{width:100%}.learn-agent-feedback [data-learn-review-base]{font-size:16px}}