@font-face{
  font-family:"Nunito";
  src:url("/fonts/Nunito-Variable.woff2") format("woff2");
  font-style:normal;
  font-weight:200 1000;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("/fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("/fonts/InstrumentSans-Italic-Variable.woff2") format("woff2");
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
}
:root{--font-display:"Nunito","Instrument Sans",system-ui,sans-serif;--radius-text-control:var(--primitive-radius-8px);--space-text-control-inset:var(--primitive-spacing-9px) var(--primitive-spacing-12px);--text-text-control:var(--primitive-font-size-15px);--text-text-control-mobile:var(--primitive-font-size-16px);
  --space-command-status-gap:var(--primitive-spacing-8px);
  --text-command-status:var(--primitive-font-size-14px);
  --space-session-recovery-gap:var(--primitive-spacing-8px) var(--primitive-spacing-14px);
  --space-session-recovery-action:var(--primitive-spacing-4px);
  --space-session-recovery-options:var(--primitive-spacing-10px) 0;
  --text-session-recovery:var(--primitive-font-size-14px);
  --space-assess-detail-gap:var(--primitive-spacing-5px);
  --space-assess-copy-gap:var(--primitive-spacing-6px);
  --space-assess-control-pad:var(--primitive-spacing-8px);
  --space-assess-control-gap:var(--primitive-spacing-9px);
  --space-assess-item-gap:var(--primitive-spacing-10px);
  --space-assess-field-pad:var(--primitive-spacing-12px);
  --space-assess-panel-gap:var(--primitive-spacing-14px);
  --space-assess-facts-gap:var(--primitive-spacing-16px);
  --space-assess-section-gap:var(--primitive-spacing-18px);
  --space-assess-rule-inset:var(--primitive-spacing-20px);
  --space-assess-major-gap:var(--primitive-spacing-22px);
  --space-assess-surface-gap:var(--primitive-spacing-24px);
  --text-assess-label:var(--primitive-font-size-11-5px);
  --text-assess-item:var(--primitive-font-size-13-5px);
  --text-assess-strong:var(--primitive-font-size-14px);
  --text-assess-heading:var(--primitive-font-size-16px);
  --radius-assess-control:var(--primitive-radius-9px);
  --space-written-gap:var(--primitive-spacing-12px);
  --space-written-tight:var(--primitive-spacing-8px);
  --radius-written-panel:var(--primitive-radius-12px);
  --exam-rail-width:56px;
  --exam-dot:40px;
  --exam-review-dot:30px;
  --exam-flag-size:10px;

  --exam-measure:760px;
  --exam-results-measure:860px;
  --space-exam-gap:var(--primitive-spacing-24px);
  --space-exam-rail-gap:clamp(20px,4vw,56px);
  --space-exam-rail-top:88px;
  --space-exam-results-gap:var(--primitive-spacing-24px);
  --text-exam-prompt:clamp(21px,2.3vw,26px);
  --text-exam-subject:clamp(30px,4vw,44px);
  --text-exam-score:clamp(52px,7vw,76px);
  --text-assess-title:var(--primitive-font-size-clamp-24px-3-5vw-34px);
  --text-assess-input:var(--primitive-font-size-15px);
  --text-assess-title:var(--primitive-font-size-clamp-24px-3-5vw-34px);
  --text-assess-lede:var(--primitive-font-size-16px);
  --text-assess-body:var(--primitive-font-size-15px);
  --space-assess-none:var(--primitive-spacing-0px);
  --space-assess-row-pad:var(--primitive-spacing-16px);
  --space-assess-panel-pad:var(--primitive-spacing-22px);
  --radius-assess-panel:var(--primitive-radius-7px);
  --size-mode-nav-mark:24px;
  /* Today: Continue rows and activity rows. */
  --size-continue-mark:62px;
  --size-continue-progress:132px;
  --text-continue-meta:12px;
  --size-continue-meter:4px;
  --size-activity-mark:34px;
  /* THE LEARNING LADDER. One colour per state, everywhere a state is shown:
     grey not started, amber in progress, green learned, blue proven,
     purple retained. Ink for dots and rules; surface and text for badges. */





  /* The Visual Conversion Lab: each depth of a split has its own colour, the
     whole in deep blue and each finer unit lighter, then amber, so a row's
     depth reads before its label. The cube is the same blue, its one pulled
     out small cube amber. */







  --size-lab-row:46px;
  --size-lab-row-ruler:34px;
  --size-lab-row-label:128px;
  --size-lab-cube:150px;
  --size-lab-cube-compact:100px;
  --size-lab-family:132px;
  --size-lab-zoom-line:44px;
  --size-lab-zoom-line-compact:26px;
  --size-lab-zoom-slot:84px;
  --text-lab-equation:clamp(21px,3.2vw,30px);
  --text-lab-cell:12px;
  --text-lab-chain:19px;
  --space-lab-seam:3px;
  --space-lab-stagger:22ms;
  --space-lab-family-pad:var(--primitive-spacing-10px) var(--primitive-spacing-12px);
  --space-lab-factor-pad:var(--primitive-spacing-8px) var(--primitive-spacing-12px);
  --space-lab-chain-gap:var(--primitive-spacing-12px);
  --space-lab-frac-x:var(--primitive-spacing-6px);
  --space-lab-frac-y:var(--primitive-spacing-2px);
  --text-lab-family:var(--primitive-font-size-14px);
  --text-lab-meta:var(--primitive-font-size-12px);
  --text-lab-micro:var(--primitive-font-size-11px);
  --text-lab-factor:var(--primitive-font-size-15px);
  --radius-lab-cell:var(--primitive-radius-6px);
  --radius-lab-container:var(--primitive-radius-10px);
  --size-learn-column:760px;
  --size-learn-landing:880px;
  --size-learn-landing-mark:56px;
  --size-learn-landing-mark-compact:42px;
  --size-learn-beat-mark:22px;
  --size-learn-feature-mark:44px;
  --radius-learn-surface:var(--primitive-radius-7px);
  --text-learn-next-title:clamp(24px,3.4vw,32px);
  --space-learn-stack:var(--primitive-spacing-20px);
  --space-learn-tight:var(--primitive-spacing-8px);
  --space-learn-panel:var(--primitive-spacing-24px);
  --space-learn-panel-compact:var(--primitive-spacing-16px);
  --space-learn-beat-gap:var(--primitive-spacing-8px);
  --space-learn-hairline:var(--primitive-spacing-2px);
  --text-learn-title:var(--primitive-font-size-26px);
  --text-learn-title-compact:var(--primitive-font-size-21px);
  --text-learn-prompt:var(--primitive-font-size-18px);
  --text-learn-body:var(--primitive-font-size-15px);
  --text-learn-small:var(--primitive-font-size-13px);
  --radius-learn-panel:var(--primitive-radius-12px);
  --radius-learn-chip:var(--primitive-radius-999px);
  --radius-menu-glyph-bar:var(--primitive-radius-999px);
  --size-account-menu-glyph:17px;
  --space-account-menu-glyph:var(--primitive-spacing-11px);
  --space-account-menu-clearance:var(--primitive-spacing-10px);
  --space-account-menu-panel:var(--primitive-spacing-6px);
  --radius-account-menu-panel:var(--primitive-radius-9px);
  --space-attention-gap:var(--primitive-spacing-8px);
  --size-attention-badge:var(--primitive-spacing-20px);
  --space-attention-badge-inline:var(--primitive-spacing-5px);
  --space-support-new-block:var(--primitive-spacing-2px);
  --space-support-new-inline:var(--primitive-spacing-7px);
  --radius-attention-badge:var(--primitive-radius-999px);
  --size-attention-dot:var(--primitive-spacing-8px);
  --space-attention-dot-inset:var(--primitive-spacing-6px);
  --text-attention-badge:var(--primitive-font-size-11px);
  --size-account-menu-scrim-left:40px;
  --size-account-menu-scrim-left-compact:40px;
  --size-account-menu-scrim-above:8px;
  --size-account-menu-scrim-below:40px;
  --size-account-menu-scrim-blur:9px;
  --space-mobile-sheet-inline:var(--primitive-spacing-20px);
  --space-mobile-sheet-block:var(--primitive-spacing-12px);
  --space-mobile-sheet-actions-gap:var(--primitive-spacing-12px);
  --size-mobile-sheet-row:60px;
  --size-mobile-sheet-utility-row:48px;
  --size-mobile-sheet-glyph:18px;
  --size-mobile-sheet-icon-glyph:20px;
  --size-mobile-sheet-grabber:var(--primitive-spacing-24px);
  --size-mobile-sheet-wash:140px;
  --radius-mobile-sheet-top:var(--primitive-radius-22px);
  --space-mobile-sheet-reveal:var(--primitive-spacing-48px);
  --space-mobile-sheet-strip-gap:var(--primitive-spacing-8px);
  --space-mobile-sheet-pref-gap:var(--primitive-spacing-6px);
  --space-mobile-sheet-icon-gap:var(--primitive-spacing-2px);
  --space-mobile-sheet-news-dot:var(--primitive-spacing-12px);
  --space-mobile-sheet-news-dot-pull:var(--primitive-spacing-8px);
  --space-mobile-sheet-group:var(--primitive-spacing-8px);
  --space-mobile-sheet-glyph:var(--primitive-spacing-14px);
  --text-mobile-sheet-utility:var(--primitive-font-size-15px);
  --radius-mobile-sheet-indicator:var(--primitive-radius-4px);
  --space-mobile-sheet-switch-inset:var(--primitive-spacing-3px);
  --space-mobile-sheet-trailing:var(--primitive-spacing-8px);
  --space-mobile-sheet-signout-gap:var(--primitive-spacing-10px);
  --space-mobile-sheet-signout-inline:var(--primitive-spacing-14px);
  --text-mobile-sheet-row:var(--primitive-font-size-17px);
  --text-mobile-sheet-action:var(--primitive-font-size-16px);
  --radius-mobile-sheet-action:var(--primitive-radius-999px);
  --radius-mobile-sheet-switch:var(--primitive-radius-999px);
  --size-public-subject-mark:52px;
  --size-public-subject-mark-compact:40px;
  --space-public-subject-head-gap:var(--primitive-spacing-16px);
  --space-public-subject-head-gap-compact:var(--primitive-spacing-12px);
  --text-public-subject-title:var(--primitive-font-size-26px);
  --text-public-subject-title-compact:var(--primitive-font-size-21px);
  --text-public-subject-lede:var(--primitive-font-size-15px);
  --text-public-subject-meta:var(--primitive-font-size-12-5px);
  --size-pref-page:760px;
  --space-pref-group:var(--primitive-spacing-40px);
  --space-pref-group-head:var(--primitive-spacing-10px);
  --space-pref-row:var(--primitive-spacing-16px);
  --space-pref-row-gap:var(--primitive-spacing-20px);
  --space-pref-copy-gap:var(--primitive-spacing-3px);
  --space-pref-action-gap:var(--primitive-spacing-8px);
  --space-pref-detail:var(--primitive-spacing-14px);
  --size-pref-field:360px;
  --size-pref-code:360px;
  --size-pref-copy-min:220px;
  --size-pref-copy-min-compact:150px;
  /* Course sharing roles (constitution 7.29). */
  --size-sharing-glyph:20px;
  --size-sharing-up-glyph:15px;
  --size-share-control-glyph:17px;
  --size-sharing-check:18px;
  --text-shared-preview-title:var(--primitive-font-size-28px);
  --text-shared-preview-title-compact:var(--primitive-font-size-24px);
  --text-pref-group:var(--primitive-font-size-12px);
  --text-pref-title:var(--primitive-font-size-15-5px);
  --text-pref-value:var(--primitive-font-size-14px);
  --text-pref-meta:var(--primitive-font-size-12-5px);
  --text-pref-tag:var(--primitive-font-size-11px);
  --text-pref-choice:var(--primitive-font-size-13-5px);
  --radius-pref-choice:var(--primitive-radius-999px);
  --space-pref-choice-inset:var(--primitive-spacing-3px);
  --space-pref-choice-pad:var(--primitive-spacing-6px) var(--primitive-spacing-14px);
  --pref-arrow-travel:3px;
  --text-pref-table-head:var(--primitive-font-size-10-5px);
  --text-pref-table:var(--primitive-font-size-13px);
  --text-pref-button:var(--primitive-font-size-14px);
  --text-pref-arrow:var(--primitive-font-size-18px);
  --radius-pref-focus:var(--primitive-radius-4px);
  --radius-pref-button:var(--primitive-radius-6px);
  --radius-pref-tag:var(--primitive-radius-999px);
  --space-pref-follow:var(--primitive-spacing-10px);
  --space-pref-list-top:var(--primitive-spacing-12px);
  --space-pref-button-inline:var(--primitive-spacing-15px);
  --space-pref-hairline:var(--primitive-spacing-2px);
  --space-pref-group-compact:var(--primitive-spacing-32px);
  --space-pref-quiet-block:var(--primitive-spacing-4px);
  --size-pref-check-tag:var(--primitive-spacing-58px);
  --space-pref-stack:var(--primitive-spacing-6px);
  --space-pref-inline:var(--primitive-spacing-8px);
  --space-pref-button-block:var(--primitive-spacing-9px);
  --size-pref-nav:188px;
  --space-pref-nav-outdent:calc(-1 * var(--primitive-spacing-12px));
  --space-pref-nav-gap:var(--primitive-spacing-40px);
  --space-pref-nav-item:var(--primitive-spacing-9px) var(--primitive-spacing-12px);
  --space-pref-nav-break:var(--primitive-spacing-18px);
  --text-pref-nav:var(--primitive-font-size-15px);
  --radius-pref-nav:var(--primitive-radius-9px);
  --radius-pref-panel:var(--primitive-radius-12px);
  --space-pref-panel-block:var(--primitive-spacing-6px);
  --space-pref-panel-inline:var(--primitive-spacing-22px);
  --space-pref-panel-inline-compact:var(--primitive-spacing-16px);
  --space-pref-row-panel:var(--primitive-spacing-14px);
  --size-mode-nav-mark-compact:18px;
  --space-mode-nav-mark-gap:var(--primitive-spacing-8px);
  --space-mode-nav-mark-gap-compact:var(--primitive-spacing-4px);
  --space-assess-none:var(--primitive-spacing-0px);
  color-scheme:light;
  --space-auth-brand-main-padding:clamp(28px,5vh,58px) clamp(18px,4vw,48px) 34px;
  --space-auth-brand-composition-gap:28px;
  --space-auth-brand-intro-gap:12px;
  --space-auth-brand-header-bottom:24px;
  --space-auth-brand-copy-gap:8px;
  --space-auth-brand-lockup-gap:11px;
  --space-auth-brand-compact-bottom:var(--primitive-spacing-16px);
  --space-auth-brand-message-gap:14px;
  --space-auth-brand-card-padding:30px 34px 27px;
  --space-auth-brand-form-gap:15px;
  /* Course question focus mode (advanced-study.js courseSessionHeader). */
  --space-course-session-gap:var(--primitive-spacing-12px);
  --space-course-session-exit-pull:calc(var(--primitive-spacing-12px) * -1);
  --radius-course-session-round:var(--primitive-radius-999px);
  --text-course-session-count:var(--primitive-font-size-13px);
  --space-course-session-brow-gap:var(--primitive-spacing-4px) var(--primitive-spacing-8px);
  --space-course-session-brow-top:var(--primitive-spacing-20px);
  --space-course-session-brow-bottom:var(--primitive-spacing-10px);
  --text-course-session-brow:var(--primitive-font-size-12px);
  --space-course-session-dot:var(--primitive-spacing-8px);
  --space-course-session-phone-top:calc(var(--primitive-spacing-6px) + env(safe-area-inset-top));
  --space-course-session-phone-bottom:calc(var(--primitive-spacing-12px) + env(safe-area-inset-bottom));
  --space-course-review-actions:var(--primitive-spacing-14px);
  --space-course-exit-resume:var(--primitive-spacing-4px);
  --text-course-exit-resume:var(--primitive-font-size-14px);
  --space-course-exit-stats-gap:var(--primitive-spacing-12px);
  --space-course-exit-stats-block:var(--primitive-spacing-22px);
  --space-course-exit-stat-gap:var(--primitive-spacing-2px);
  --text-course-exit-label:var(--primitive-font-size-13px);
  --text-course-exit-value:var(--primitive-font-size-24px);
  --space-course-exit-actions-gap:var(--primitive-spacing-10px);
  --space-course-exit-actions-gap-compact:var(--primitive-spacing-6px);
  --space-course-exit-saved-gap:var(--primitive-spacing-6px);
  --space-course-exit-saved-top:var(--primitive-spacing-14px);
  --text-course-exit-saved:var(--primitive-font-size-12px);
  /* Control glyphs in buttons (iconography audit, 26 Oct). */
  --size-control-glyph:17px;
  --size-control-glyph-mark:14px;
  --size-control-icon-button:var(--primitive-spacing-36px);
  --space-control-glyph-gap:var(--primitive-spacing-6px);
  --radius-control-icon-button:var(--primitive-radius-999px);
  --size-control-mark:1em;
  --space-control-mark-baseline:-.14em;
  --size-control-state-glyph:var(--primitive-spacing-24px);
  --size-control-win-glyph:var(--primitive-spacing-20px);
  --size-dialog-close-target:var(--primitive-spacing-36px);
  /* Feedback marks drawn from CSS (a pseudo-element cannot hold an <svg>):
     the same drawings as CONTROL_ICON_ART, used as masks so they paint in the
     element's own ink. tests/control_glyph_set_contract.test.js keeps them
     equal to the set. */
  --control-mask-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(-3.5 24 24)'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 24.5L19 35L39.5 13.5' stroke-width='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --control-mask-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(-3.5 24 24)'%3E%3Cpath fill-rule='evenodd' d='M24 5A19 19 0 1 1 24 43A19 19 0 1 1 24 5Z M24.00 27.68L28.24 31.92A2.6 2.6 0 0 0 31.92 28.24L27.68 24.00L31.92 19.76A2.6 2.6 0 0 0 28.24 16.08L24.00 20.32L19.76 16.08A2.6 2.6 0 0 0 16.08 19.76L20.32 24.00L16.08 28.24A2.6 2.6 0 0 0 19.76 31.92Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  --control-mask-onward:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='rotate(180 24 24)'%3E%3Cg transform='rotate(-3.5 24 24)'%3E%3Cpath d='M29.34 8.34L12.44 23.3A1.37 1.37 0 0 0 12.44 24.7L29.34 39.66A2.35 2.35 0 0 0 32.66 36.34L21.73 24.0L32.66 11.66A2.35 2.35 0 0 0 29.34 8.34Z' fill='%23000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --space-control-tip-offset:var(--primitive-spacing-6px);
  --space-auth-context-gap:10px;
  --space-auth-context-padding:14px 18px;
  --space-auth-footer-padding:12px 24px 16px;
  --space-workspace-footer-mobile-gap:var(--primitive-spacing-4px) var(--primitive-spacing-20px);
  --space-auth-compact-main-block:24px;
  --space-auth-compact-composition-gap:14px;
  --space-auth-compact-intro-gap:10px;
  --space-auth-compact-card-bottom:22px;
  --space-auth-mobile-main-padding:30px 18px 32px;
  --space-auth-mobile-composition-gap:18px;
  --space-auth-mobile-message-gap:8px;
  --space-auth-mobile-card-padding:26px 20px 25px;
  --space-auth-mobile-footer-padding:10px 18px 22px;
  --space-auth-otp-gap:var(--primitive-spacing-9px);
  --space-auth-otp-gap-mobile:var(--primitive-spacing-6px);
  --space-auth-recovery-heading-top:var(--primitive-spacing-18px);
  --space-auth-back-action-gap:var(--primitive-spacing-7px);
  --space-auth-code-recovery-offset:calc(var(--primitive-spacing-4px) * -1) 0 0;
  --space-auth-signout-action-top:var(--primitive-spacing-4px);
  --radius-auth-brand-card:18px;
  --radius-auth-brand-link-focus:var(--primitive-radius-4px);
  --radius-auth-context:17px 17px 0 0;
  --radius-auth-mobile-card:14px;
  --radius-auth-mobile-context:13px 13px 0 0;
  --radius-auth-otp-digit:var(--primitive-radius-9px);
  --text-auth-brand-lockup:1.28rem;
  --text-auth-brand-headline:var(--primitive-font-size-26px);
  --text-auth-brand-description:var(--primitive-font-size-14px);
  --text-auth-context:.9rem;
  --text-auth-context-icon:.72rem;
  --text-auth-institutional:.84rem;
  --text-auth-footer:.78rem;
  --text-auth-compact-headline:var(--primitive-font-size-24px);
  --text-auth-compact-description:var(--primitive-font-size-14px);
  --text-auth-mobile-headline:var(--primitive-font-size-24px);
  --text-auth-mobile-description:var(--primitive-font-size-14px);
  --text-auth-otp-digit:var(--primitive-font-size-22px);
  --text-auth-otp-digit-mobile:var(--primitive-font-size-18px);
  --text-auth-back-action:var(--primitive-font-size-13px);
  --text-auth-back-icon:var(--primitive-font-size-18px);
  --text-auth-code-recovery:var(--primitive-font-size-13px);
  --size-registration-rail:480px;
  --size-registration-language-min-block:var(--primitive-spacing-36px);
  --size-registration-field-min-block:52px;
  --size-auth-product-icon:var(--primitive-spacing-64px);
  --size-auth-product-icon-compact:var(--primitive-spacing-52px);
  --size-auth-product-icon-mobile:var(--primitive-spacing-56px);
  --size-registration-shape-large:var(--primitive-spacing-26px);
  --size-registration-shape-small:var(--primitive-spacing-18px);
  --size-registration-shape-bar-inline:var(--primitive-spacing-30px);
  --size-registration-shape-bar-block:var(--primitive-spacing-8px);
  --space-registration-page-block:clamp(var(--primitive-spacing-24px),var(--primitive-spacing-5vh),var(--primitive-spacing-48px));
  --space-registration-language-top:var(--primitive-spacing-24px);
  --space-registration-language-right:var(--primitive-spacing-28px);
  --space-registration-language-padding:var(--primitive-spacing-6px) var(--primitive-spacing-30px) var(--primitive-spacing-6px) var(--primitive-spacing-36px);
  --space-language-picker-panel:var(--primitive-spacing-5px) var(--primitive-spacing-8px);
  --space-language-picker-option-gap:var(--primitive-spacing-9px);
  --space-language-picker-option-padding:0 var(--primitive-spacing-11px);
  --space-registration-card-padding:var(--primitive-spacing-32px) var(--primitive-spacing-38px) var(--primitive-spacing-30px);
  --space-registration-card-padding-compact:var(--primitive-spacing-24px) var(--primitive-spacing-34px) var(--primitive-spacing-22px);
  --space-registration-card-padding-mobile:var(--primitive-spacing-26px) var(--primitive-spacing-20px) var(--primitive-spacing-24px);
  --space-registration-illustration-margin:0 auto var(--primitive-spacing-14px);
  --space-registration-illustration-ring:var(--primitive-spacing-6px);
  --space-registration-shape-inset:var(--primitive-spacing-12px);
  --space-registration-heading-margin:var(--primitive-spacing-8px) auto var(--primitive-spacing-22px);
  --space-registration-form-gap:var(--primitive-spacing-14px);
  --space-registration-field-padding:var(--primitive-spacing-18px) var(--primitive-spacing-14px) var(--primitive-spacing-6px);
  --space-registration-password-end:var(--primitive-spacing-52px);
  --space-registration-label-inline:var(--primitive-spacing-12px);
  --space-registration-label-padding:0 var(--primitive-spacing-4px);
  --space-registration-guidance-pull:calc(var(--primitive-spacing-8px) * -1);
  --space-registration-provider-top:var(--primitive-spacing-4px);
  --space-registration-compact-page-block:var(--primitive-spacing-20px);
  --space-registration-compact-illustration-margin:var(--primitive-spacing-10px);
  --space-registration-compact-heading-margin:var(--primitive-spacing-16px);
  --space-registration-compact-form-gap:var(--primitive-spacing-10px);
  --space-registration-mobile-language-margin:var(--primitive-spacing-14px);
  --radius-registration-language:var(--primitive-radius-11px);
  --radius-language-picker-panel:var(--primitive-radius-11px);
  --radius-language-picker-option:var(--primitive-radius-7px);
  --radius-registration-illustration:var(--primitive-radius-16px);
  --radius-registration-shape:var(--primitive-radius-999px);
  --text-registration-language:var(--primitive-font-size-14px);
  --text-language-picker-option:var(--primitive-font-size-14px);
  --text-registration-heading:var(--primitive-font-size-26px);
  --text-registration-heading-mobile:var(--primitive-font-size-24px);
  --text-registration-intro:var(--primitive-font-size-14px);
  --text-registration-label:var(--primitive-font-size-14px);
  --text-registration-label-raised:var(--primitive-font-size-11px);
  --motion-registration-label-duration:.16s;











  --feedback-order-correct-marker-text:var(--text-on-strong);
  --feedback-order-incorrect-marker-text:var(--text-on-strong);
  --feedback-order-list-marker-text:var(--text-on-strong);
  --match-done-marker-text:var(--text-on-strong);
  --match-reuse-marker-text:var(--text-on-strong);
  --match-win-marker-text:var(--text-on-strong);
  --assess-builder-step-text:var(--text-on-strong);

  /* Selector-owned paint roles; original hues and gradients are preserved. */












  --visual-landing-hero-seam-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L190,0 C360,0 520,100 760,100 C870,100 945,92 1000,81 L1000,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E");
  --visual-landing-footer-seam-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 L190,100 C360,100 520,0 760,0 C870,0 945,8 1000,19 L1000,100 Z' fill='%23000'/%3E%3C/svg%3E");















































































































  /* 5.9 -- the threshold. The card is a paper object on cool paper, so its
     shadow is tinted with the page's own navy rather than with grey. */



































  --space-planner-rail-inset:var(--primitive-spacing-20px) var(--primitive-spacing-22px);
  --space-today-heading-top:var(--primitive-spacing-32px);
  --space-today-heading-bottom:0;
  --space-today-intro-gap:36px;
  --radius-planner-rail:var(--primitive-radius-12px);
  /* CONTINUE IS A FIELD, NOT A CARD (VISUAL_IDENTITY_CONSTITUTION 7.15).
     The rail is Resting: a panel placed ON the page, declaring an elevation.
     The Continue list is Flat -- content printed INTO the page -- and 7.15
     says flat is a decision, not an omission, so it does not get to grow a
     shadow just because the thing beside it has one. Home read lopsided all
     the same, and the reason was not that the list was weak: the right side
     was an OBJECT and the left side was loose content, so the eye scored the
     calendar as the designed thing even though Continue carries far more.

     What the list was missing was never height. It was an EDGE. The ground is
     a surface too, so the list gets a shaped piece of ground: exactly half a
     step from --workspace-bg toward --surface, no border, no shadow, and the
     rail's own radius so both corners come from one hand. Half a step is the
     whole point -- the rail takes the full step AND carries elevation, so it
     stays the smaller, sharper object while Continue dominates by area and by
     quiet. Two boxes of equal strength would have been card soup.

     The wash is a PERCENTAGE here and the mix happens at the use site, not a
     finished colour mixed at :root. A custom property substitutes its var()s
     where it is DECLARED, and --surface is rebound per theme further down the
     tree than :root, so a colour composed up here resolves against light mode
     for good: the first build of this field came out #767676 in dark -- a
     pale slab brighter than the calendar card it was meant to sit under. Same
     trap TOKEN_CONTRACT records for composite shadows and gradients. */
  --space-today-continue-field:var(--primitive-spacing-22px) var(--primitive-spacing-28px);
  --space-today-continue-field-compact:var(--primitive-spacing-16px) var(--primitive-spacing-14px);
  --space-today-continue-field-lead:var(--primitive-spacing-14px);
  --radius-today-continue-field:var(--radius-planner-rail);
  --visual-today-continue-field-wash:50%;
  --size-today-mark:24px;
  --size-calendar-tool:36px;
  --space-calendar-dots:var(--primitive-spacing-3px);
  --space-calendar-column-gap:var(--primitive-spacing-24px);
  --space-calendar-organizer-actions-gap:var(--primitive-spacing-20px);
  --space-calculation-answer-submit-gap:var(--primitive-spacing-16px);
  --space-calendar-kit-gap:var(--primitive-spacing-24px);
  --space-calendar-kit-step:var(--primitive-spacing-6px);
  --space-calendar-kit-indent:var(--primitive-spacing-20px);
  --space-calendar-notice:var(--primitive-spacing-10px);
  --radius-calendar-notice:var(--primitive-radius-10px);
  --text-calendar-kit-title:var(--primitive-font-size-15px);
  --space-calendar-archive-hint:var(--primitive-spacing-4px);
  --text-calendar-archive-hint:var(--primitive-font-size-12-5px);
  --space-drug-question-action:var(--primitive-spacing-24px);
  --space-drug-question-action-gap:var(--primitive-spacing-12px);
  --space-stage-review-action:var(--primitive-spacing-12px);
  --space-drug-recovery-action-gap:var(--primitive-spacing-10px);
  --space-drug-recovery-action:var(--primitive-spacing-12px);
  --space-landscape-branch-stack:var(--primitive-spacing-12px);
  --space-drug-editor-pad:var(--primitive-spacing-22px);
  --space-drug-editor-gap:var(--primitive-spacing-16px);
  --space-drug-field:var(--primitive-spacing-6px);
  --size-drug-field:43px;
  --space-drug-field-inset:var(--primitive-spacing-10px);
  --space-drug-change:var(--primitive-spacing-14px);
  --text-drug-change-title:var(--primitive-font-size-15px);
  --radius-drug-field:var(--primitive-radius-5px);
  --radius-drug-change:var(--primitive-radius-10px);
  --radius-drug-pill:var(--primitive-radius-999px);
  --text-drug-editor-title:var(--primitive-font-size-24px);
  --text-drug-editor-meta:var(--primitive-font-size-13px);
  --text-drug-field-label:var(--primitive-font-size-12-5px);
  --text-drug-field-hint:var(--primitive-font-size-12px);
  --size-calendar-segment:30px;
  --size-calendar-chevron:15px;










































































































































































  /* Exact primitive vocabulary; component classes supply visual meaning. */
  --primitive-font-size-1-02rem:1.02rem;
  --primitive-font-size-1-08rem:1.08rem;
  --primitive-font-size-1-12rem:1.12rem;
  --primitive-font-size-1-13rem:1.13rem;
  --primitive-font-size-1-35rem:1.35rem;
  --primitive-font-size-1-3rem:1.3rem;
  --primitive-font-size-10-5px:10.5px;
  --primitive-font-size-10px:10px;
  --primitive-font-size-11-5px:11.5px;
  --primitive-font-size-11px:11px;
  --primitive-font-size-12-5px:12.5px;
  --primitive-font-size-12px:12px;
  --primitive-font-size-13-5px:13.5px;
  --primitive-font-size-13px:13px;
  --primitive-font-size-14-5px:14.5px;
  --primitive-font-size-14px:14px;
  --primitive-font-size-15-5px:15.5px;
  --primitive-font-size-15px:15px;
  --primitive-font-size-16-5px:16.5px;
  --primitive-font-size-16px:16px;
  --primitive-font-size-17-5px:17.5px;
  --primitive-font-size-17px:17px;
  --primitive-font-size-18px:18px;
  --primitive-font-size-19px:19px;
  --primitive-font-size-1rem:1rem;
  --primitive-font-size-20px:20px;
  --primitive-font-size-21px:21px;
  --primitive-font-size-22px:22px;
  --primitive-font-size-23px:23px;
  --primitive-font-size-24px:24px;
  --primitive-font-size-25px:25px;
  --primitive-font-size-26px:26px;
  --primitive-font-size-27px:27px;
  --primitive-font-size-28px:28px;
  --primitive-font-size-29px:29px;
  --primitive-font-size-30px:30px;
  --primitive-font-size-32px:32px;
  --primitive-font-size-34px:34px;
  --primitive-font-size-38px:38px;
  --primitive-font-size-42px:42px;
  --primitive-font-size-44px:44px;
  --primitive-font-size-50px:50px;
  --primitive-font-size-68rem:.68rem;
  --primitive-font-size-72rem:.72rem;
  --primitive-font-size-75rem:.75rem;
  --primitive-font-size-76px:76px;
  --primitive-font-size-78rem:.78rem;
  --primitive-font-size-82rem:.82rem;
  --primitive-font-size-84rem:.84rem;
  --primitive-font-size-85rem:.85rem;
  --primitive-font-size-88rem:.88rem;
  --primitive-font-size-9-5px:9.5px;
  --primitive-font-size-93rem:.93rem;
  --primitive-font-size-9px:9px;
  --primitive-font-size-9rem:.9rem;
  --primitive-font-size-clamp-1-7rem-3vw-2-35rem:clamp(1.7rem,3vw,2.35rem);
  --primitive-font-size-clamp-15-5px-1-35vw-18px:clamp(15.5px,1.35vw,18px);
  --primitive-font-size-clamp-18px-2vw-23px:clamp(18px,2vw,23px);
  --primitive-font-size-clamp-19px-2-4vw-23px:clamp(19px,2.4vw,23px);
  --primitive-font-size-clamp-20px-2-1vw-26px:clamp(20px,2.1vw,26px);
  --primitive-font-size-clamp-20px-3vw-28px:clamp(20px,3vw,28px);
  --primitive-font-size-clamp-21px-3vw-30px:clamp(21px,3vw,30px);
  --primitive-font-size-clamp-22px-2-7vw-31px:clamp(22px,2.7vw,31px);
  --primitive-font-size-clamp-22px-3vw-30px:clamp(22px,3vw,30px);
  --primitive-font-size-clamp-24px-3-5vw-34px:clamp(24px,3.5vw,34px);
  --primitive-font-size-clamp-25px-3-2vw-37px:clamp(25px,3.2vw,37px);
  --primitive-font-size-clamp-25px-3-4vw-35px:clamp(25px,3.4vw,35px);
  --primitive-font-size-clamp-25px-4vw-38px:clamp(25px,4vw,38px);
  --primitive-font-size-clamp-26px-4vw-42px:clamp(26px,4vw,42px);
  --primitive-font-size-clamp-27px-4vw-39px:clamp(27px,4vw,39px);
  --primitive-font-size-clamp-28px-4vw-42px:clamp(28px,4vw,42px);
  --primitive-font-size-clamp-28px-8-5vw-38px:clamp(28px,8.5vw,38px);
  --primitive-font-size-clamp-29px-4vw-42px:clamp(29px,4vw,42px);
  --primitive-font-size-clamp-2rem-4vw-3rem:clamp(2rem,4vw,3rem);
  --primitive-font-size-clamp-30px-4-1vw-49px:clamp(30px,4.1vw,49px);
  --primitive-font-size-clamp-30px-4vw-42px:clamp(30px,4vw,42px);
  --primitive-font-size-clamp-31px-5vw-44px:clamp(31px,5vw,44px);
  --primitive-font-size-clamp-32px-5vw-52px:clamp(32px,5vw,52px);
  --primitive-font-size-clamp-33px-4-5vw-55px:clamp(33px,4.5vw,55px);
  --radius-softness:1.6;--radius-softness-cap:26px;
  --primitive-radius-0-0-10px-10px:0 0 10px 10px;
  --primitive-radius-0-10px-10px-0:0 10px 10px 0;
  --primitive-radius-0-6px-6px-0:0 6px 6px 0;
  --primitive-radius-0-8px-8px-0:0 8px 8px 0;
  --primitive-radius-0-9px-9px-0:0 9px 9px 0;
  --primitive-radius-10px:min(calc(10px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-10px-10px-0-0:10px 10px 0 0;
  --primitive-radius-11px:min(calc(11px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-12px:min(calc(12px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-12px-12px-0-0:12px 12px 0 0;
  --primitive-radius-13px:min(calc(13px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-14px:min(calc(14px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-15px:min(calc(15px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-16px:min(calc(16px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-16px-16px-0-0:16px 16px 0 0;
  --primitive-radius-18px:min(calc(18px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-1px:1px;
  --primitive-radius-20px:min(calc(20px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-22px:min(calc(22px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-2px:2px;
  --primitive-radius-3px:3px;
  --primitive-radius-4px:4px;
  --primitive-radius-5px:min(calc(5px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-5px-0-0-5px:5px 0 0 5px;
  --primitive-radius-6px:min(calc(6px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-75rem:min(calc(75rem * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-7px:min(calc(7px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-8px:min(calc(8px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-radius-999px:999px;
  --primitive-radius-9px:min(calc(9px * var(--radius-softness)),var(--radius-softness-cap));
  --primitive-spacing-0px:0px;
  --primitive-spacing-1-05rem:1.05rem;
  --primitive-spacing-1-15rem:1.15rem;
  --primitive-spacing-1-1rem:1.1rem;
  --primitive-spacing-1-35rem:1.35rem;
  --primitive-spacing-100px:100px;
  --primitive-spacing-100vw:100vw;
  --primitive-spacing-108px:108px;
  --primitive-spacing-10px:10px;
  --primitive-spacing-112px:112px;
  --primitive-spacing-11px:11px;
  --primitive-spacing-11vh:11vh;
  --primitive-spacing-12px:12px;
  --primitive-spacing-132px:132px;
  --primitive-spacing-13px:13px;
  --primitive-spacing-13vh:13vh;
  --primitive-spacing-14px:14px;
  --primitive-spacing-150px:150px;
  --primitive-spacing-15px:15px;
  --primitive-spacing-16px:16px;
  --primitive-spacing-17px:17px;
  --primitive-spacing-18px:18px;
  --primitive-spacing-19px:19px;
  --primitive-spacing-1px:1px;
  --primitive-spacing-1rem:1rem;
  --primitive-spacing-20px:20px;
  --primitive-spacing-21px:21px;
  --primitive-spacing-22px:22px;
  --primitive-spacing-23px:23px;
  --primitive-spacing-24px:24px;
  --primitive-spacing-25px:25px;
  --primitive-spacing-26px:26px;
  --primitive-spacing-27px:27px;
  --primitive-spacing-28px:28px;
  --primitive-spacing-29px:29px;
  --primitive-spacing-2px:2px;
  --primitive-spacing-3-5vw:3.5vw;
  --primitive-spacing-30px:30px;
  --primitive-spacing-32px:32px;
  --primitive-spacing-34px:34px;
  --primitive-spacing-36px:36px;
  --primitive-spacing-38px:38px;
  --primitive-spacing-3px:3px;
  --primitive-spacing-3vw:3vw;
  --primitive-spacing-40px:40px;
  --primitive-spacing-42px:42px;
  --primitive-spacing-43px:43px;
  --primitive-spacing-44px:44px;
  --primitive-spacing-46px:46px;
  --primitive-spacing-48px:48px;
  --primitive-spacing-49px:49px;
  --primitive-spacing-4px:4px;
  --primitive-spacing-4vw:4vw;
  --primitive-spacing-52px:52px;
  --primitive-spacing-54px:54px;
  --primitive-spacing-56px:56px;
  --primitive-spacing-58px:58px;
  --primitive-spacing-5px:5px;
  --primitive-spacing-5vh:5vh;
  --primitive-spacing-5vw:5vw;
  --primitive-spacing-60px:60px;
  --primitive-spacing-64px:64px;
  --primitive-spacing-68px:68px;
  --primitive-spacing-6px:6px;
  --primitive-spacing-7-4vh:7.4vh;
  --primitive-spacing-72px:72px;
  --primitive-spacing-76px:76px;
  --primitive-spacing-7px:7px;
  --primitive-spacing-7rem:.7rem;
  --primitive-spacing-8-5vh:8.5vh;
  --primitive-spacing-88px:88px;
  --primitive-spacing-8px:8px;
  --primitive-spacing-8rem:.8rem;
  --primitive-spacing-8vh:8vh;
  --primitive-spacing-90px:90px;
  --primitive-spacing-92px:92px;
  --primitive-spacing-96px:96px;
  --primitive-spacing-9px:9px;
  --primitive-spacing-9vh:9vh;
  /* Composition contract. The contrasting outer canvas is a wide-screen
     frame, not a device-specific gutter. It collapses into the workspace
     whenever two intentional 40px rails no longer fit. */
  --workspace-max-width:1160px;--minimum-outer-rail:40px;
  --space-learning-utility-block-start:var(--primitive-spacing-8px);
  --space-course-tabs-top:var(--primitive-spacing-12px);
  --space-learning-utility-block-end:var(--primitive-spacing-9px);
  --space-learning-utility-stuck-block-start:var(--primitive-spacing-18px);
  --space-learning-utility-stuck-block-end:var(--primitive-spacing-3px);
  --size-learning-utility-stuck-height:var(--primitive-spacing-42px);
  --size-learning-utility-stuck-search:600px;
  --size-learning-utility-scrim-tail:clamp(64px,9vh,92px);
  --size-learning-index-scrim-tail:clamp(104px,12vh,124px);
  --space-learning-index-after-control:var(--primitive-spacing-24px);
  --space-learning-index-scrim-inline:var(--primitive-spacing-28px);
  --space-learning-index-scrim-inline-compact:var(--primitive-spacing-14px);
  --space-learning-index-jump:var(--primitive-spacing-16px);
  --space-learning-index-rail-bottom:var(--primitive-spacing-8px);
  /* THE GROUND IS ONE VALUE, AND THE MARKETING SURFACE WEARS IT TOO.
     Declared once here, above the themes, because the landing page is navy in
     both themes and its light chapters must not follow --workspace-bg down to
     Eclipse. Two places meaning "our paper" once held two literals and one of
     them moved: --paper stayed at #f7f9fc, the ground this token replaced, so
     the landing kept advertising a workspace that no longer looked like that. */

  /* ECLIPSE HAS THE SAME THREE LAYERS AS PAPER. Light mode is a navy frame
     (rails #07111e, header #121c29 one 1.105 step above them) around a lit
     column. Dark mode had the frame -- ground #0f0f0f, header #1a1a1c at
     1.103 -- and nothing inside it: the column WAS the ground. The column now
     rises one more even step (1.106) above the header, and every surface on
     it keeps its old step above what it sits on, one floor higher. Each value
     is the Eclipse recipe: a neutral level mixed 4% toward #7d848d. */



  /* LIGHT MODE NEEDS A GROUND, OR NOTHING CAN RISE OFF IT.
     This was #f7f9fc, which put --surface #ffffff only 1.055 above the page it
     sits on -- less than half of dark mode's card step (#1d1e1e over #0f0f0f is
     1.147). Dark mode can afford that because 5.1 gives the border the
     structural work there; light mode never got the equivalent sentence, so
     when the borders came off the panels had nothing left to separate them.
     #eef2f8 takes the step to 1.123, which is the dark step within a hair.

     It is the DARKEST value that keeps the marginal foreground roles at AA on
     the ground itself: --dim 4.52 and --accent 4.51, both of which fall under
     4.5 by #ecf1f7. The ground is the constrained surface, not the card. Going
     lower means moving --accent, which is a palette decision (5.4), not a
     depth one.

     Legal under 5.2: the frame may not out-emit what it frames, and the navy
     rails and #121c29 header stay far darker. It moves in the permitted
     direction, and it improves the bright-pixel measurement 5.2 argues from. */
  /* Compatibility aliases for component styles authored before the canvas
     and workspace concepts were named explicitly. */
  --gutter:var(--outer-canvas-bg);--workspace:var(--surface-workspace);







  --space-header-utilities-gap:var(--primitive-spacing-14px);
  --app-header-height:68px;--app-sticky-obstruction:68px;--sticky-content-gap:8px;
  --content-sticky-top:calc(var(--app-sticky-obstruction) + var(--sticky-content-gap));
  /* Shell and page are separate stacking contexts. These values order only
     peers within their own context; page controls never compete with chrome. */
  --layer-page:0;--layer-page-section:10;--layer-page-controls:20;--layer-page-index-navigation:21;--layer-page-index-guard:22;
  --layer-app-header:10;
  --catalog-reading-line-gap:43px;
     --radius:7px;
  /* Study-plan list rows are a reusable list role, not a new colour palette. */
  /* The up control is a presentation role of its own: it is chrome that sits
     above a page heading, not a list row and not body copy. */
  --study-up-gap:var(--primitive-spacing-8px);
  --study-up-text-size:var(--primitive-font-size-13px);
  --study-up-radius:var(--primitive-radius-5px);
  --study-up-travel:-3px;--study-up-travel-press:-4px;
  --space-auth-heading-action-gap:var(--primitive-spacing-16px);
  --space-action-icon-gap:var(--primitive-spacing-10px);
  --size-action-leading-icon:var(--primitive-spacing-18px);
  --space-list-gap:var(--primitive-spacing-10px);--space-list-row-block:15px;--space-list-row-inline:18px;
  --space-list-row-content-gap:2px;--radius-list-row:13px;
  --space-study-plan-actions:var(--primitive-spacing-14px);
  --space-home-view-gap:var(--primitive-spacing-2px);
  --space-home-view-link-block:var(--primitive-spacing-8px);
  --space-home-view-link-inline:var(--primitive-spacing-12px);
  --text-home-view-link:var(--primitive-font-size-13px);
  --space-catalog-section-header-gap:var(--primitive-spacing-24px);
  --space-catalog-section-header-rule:var(--primitive-spacing-12px);
  --text-catalog-section-heading:var(--primitive-font-size-22px);
  --text-catalog-section-copy:var(--primitive-font-size-13px);
  --space-catalog-pinned-grid-gap:var(--primitive-spacing-14px);
  --text-catalog-pin-count:var(--primitive-font-size-12px);
  --text-catalog-card-category:var(--primitive-font-size-11px);
  --text-catalog-card-category-mobile:var(--primitive-font-size-10px);
  --space-catalog-pinned-empty-gap:var(--primitive-spacing-3px);
  --text-catalog-pinned-empty-heading:var(--primitive-font-size-15px);
  --text-catalog-pinned-empty-body:var(--primitive-font-size-15px);
  --space-catalog-pinned-empty-pad:var(--primitive-spacing-18px);
  --radius-catalog-pinned-empty:var(--primitive-radius-12px);
  --size-catalog-pin-hint:var(--primitive-spacing-24px);
  --size-catalog-pin-hint-glyph:var(--primitive-spacing-14px);
  --space-catalog-pin-hint-inline:var(--primitive-spacing-2px);
  --space-catalog-entry-pin-clearance:var(--primitive-spacing-49px);
  --space-catalog-replace-option-gap:var(--primitive-spacing-16px);
  --space-catalog-replace-option-block:var(--primitive-spacing-14px);
  --space-catalog-replace-option-inline:var(--primitive-spacing-4px);
  --space-catalog-replace-copy-gap:var(--primitive-spacing-2px);
  --text-catalog-replace-meta:var(--primitive-font-size-11px);
  --text-catalog-replace-action:var(--primitive-font-size-12px);
  --text-catalog-section-heading-compact:var(--primitive-font-size-15px);
  --space-plan-picker-group-gap:var(--primitive-spacing-2px);
  --space-plan-picker-legend-top:var(--primitive-spacing-8px);
  --space-plan-picker-legend-inline:var(--primitive-spacing-4px);
  --space-plan-picker-legend-bottom:var(--primitive-spacing-2px);
  --text-plan-picker-legend:var(--primitive-font-size-12px);
  --space-personal-course-heading-gap:var(--primitive-spacing-10px);
  --space-personal-lecture-order:var(--primitive-spacing-4px);
  --space-lecture-order-row:var(--primitive-spacing-6px) var(--primitive-spacing-6px) var(--primitive-spacing-6px) var(--primitive-spacing-12px);
  --space-lecture-order-gap:var(--primitive-spacing-14px);
  --size-lecture-position:var(--primitive-spacing-28px);
  --text-lecture-position:var(--primitive-font-size-13px);
  --radius-lecture-order-list:var(--primitive-radius-14px);
  --size-lecture-move-glyph:var(--primitive-spacing-16px);
  --space-course-toggle-focus-inset:calc(-1 * var(--primitive-spacing-4px));
  --radius-course-section-focus:var(--primitive-radius-12px);
  --space-reorder-toggle-wrap:calc(-1 * var(--primitive-spacing-4px)) 0 var(--primitive-spacing-14px) var(--primitive-spacing-23px);
  --space-personal-course-dialog-padding:var(--primitive-spacing-24px);
  --space-personal-course-field-gap:var(--primitive-spacing-6px);
  --space-personal-course-action-gap:var(--primitive-spacing-10px);
  --space-personal-course-facet-actions-gap:var(--primitive-spacing-16px);
  --space-personal-course-panel-padding:var(--primitive-spacing-16px);
  --radius-personal-course-panel:var(--primitive-radius-12px);
  --space-personal-course-list-gap:var(--primitive-spacing-8px);
  --space-personal-course-row-block:var(--primitive-spacing-10px);
  --space-personal-course-control-inline:var(--primitive-spacing-10px);
  --space-personal-course-control-block:var(--primitive-spacing-8px);
  --space-personal-course-edge:var(--primitive-spacing-2px);
  --space-personal-course-section-inline:var(--primitive-spacing-11px);
  --space-personal-course-input-block:var(--primitive-spacing-9px);
  --space-courses-facet-after:var(--primitive-spacing-22px);
  --space-courses-section-after:var(--primitive-spacing-32px);
  --space-courses-head-gap:var(--primitive-spacing-14px);
  --space-courses-head-after:var(--primitive-spacing-12px);
  --space-courses-action-gap:var(--primitive-spacing-12px);
  --text-courses-count:var(--primitive-font-size-13px);
  --space-course-card-gap:var(--primitive-spacing-12px);
  --radius-course-card:var(--primitive-radius-12px);
  --space-course-card-block:var(--primitive-spacing-16px);
  --space-course-card-inline:var(--primitive-spacing-18px);
  --space-course-card-mark-gap:var(--primitive-spacing-14px);
  --size-course-card-mark:var(--primitive-spacing-38px);
  --space-course-card-settings-edge:var(--primitive-spacing-8px);
  --space-course-card-panel-start:calc(var(--space-course-card-inline) + var(--size-course-card-mark) + var(--space-course-card-mark-gap));
  --space-course-chevron-edge:var(--primitive-spacing-6px);
  --text-course-code:var(--primitive-font-size-11-5px);
  --text-course-card-title:var(--primitive-font-size-17px);
  --space-course-empty-block:var(--primitive-spacing-14px);
  --space-course-empty-inline:var(--primitive-spacing-16px);
  --space-course-empty-gap:var(--primitive-spacing-16px);
  --space-course-empty-after:var(--primitive-spacing-14px);
  --radius-course-empty:var(--primitive-radius-10px);
  --space-courses-empty-pad:var(--primitive-spacing-28px);
  --space-courses-empty-gap:var(--primitive-spacing-20px);
  --size-courses-empty-mark:var(--primitive-spacing-56px);
  --text-courses-empty-heading:var(--primitive-font-size-19px);
  --text-courses-empty-body:var(--primitive-font-size-14px);
  --space-courses-empty-copy-gap:var(--primitive-spacing-6px);
  --space-courses-empty-actions-before:var(--primitive-spacing-16px);
  --space-course-entry-panel-start:calc(var(--primitive-spacing-8px) + var(--primitive-spacing-38px) + var(--primitive-spacing-14px));
  --space-course-entry-panel-end:var(--primitive-spacing-8px);
  --space-course-entry-panel-after:var(--primitive-spacing-14px);
  --space-course-mobile-inline:var(--primitive-spacing-14px);
  --size-course-entry-chevron:var(--primitive-spacing-17px);
  --radius-course-tile:var(--primitive-radius-10px);
  --space-course-term-after:var(--primitive-spacing-26px);
  --space-course-term-toggle-block:var(--primitive-spacing-6px);
  --space-course-term-head-after:var(--primitive-spacing-10px);
  --space-course-term-head-gap:var(--primitive-spacing-10px);
  --space-course-term-empty-block:var(--primitive-spacing-16px);
  --space-course-term-empty-inline:var(--primitive-spacing-18px);
  --text-course-term-heading:var(--primitive-font-size-16px);
  --text-course-tile:var(--primitive-font-size-13px);
  --size-course-swatch:var(--primitive-spacing-28px);
  --size-course-swatch-ring:var(--primitive-spacing-2px);
  --space-course-swatch-ring-gap:var(--primitive-spacing-2px);
  --space-course-swatches-gap:var(--primitive-spacing-10px);
  --space-course-swatch-legend-after:var(--primitive-spacing-8px);
  --space-course-disclosure-toggle:var(--primitive-spacing-18px) var(--primitive-spacing-2px);
  --space-course-disclosure-toggle-compact:var(--primitive-spacing-16px) 0;
  --space-personal-course-mobile-gap:var(--primitive-spacing-12px);
  --radius-personal-course-control:var(--primitive-radius-999px);
  --text-personal-course-title:var(--primitive-font-size-17px);
  --text-personal-course-body:var(--primitive-font-size-14px);
  --text-personal-course-label:var(--primitive-font-size-13px);
  --text-personal-course-caption:var(--primitive-font-size-12px);
  --text-personal-course-mobile-caption:var(--primitive-font-size-11px);
  --text-personal-builder-intro:var(--primitive-font-size-16px);
  --space-personal-builder-step-gap:var(--primitive-spacing-7px);
  --space-personal-builder-card-gap:var(--primitive-spacing-22px);
  --space-personal-builder-card-padding:var(--primitive-spacing-30px);
  --space-personal-builder-upload-padding:var(--primitive-spacing-22px);
  --space-personal-builder-label-gap:var(--primitive-spacing-3px);
  --space-personal-builder-error-padding:var(--primitive-spacing-14px);
  --space-personal-builder-error-indent:var(--primitive-spacing-20px);
  --radius-personal-builder-upload:var(--primitive-radius-10px);
  --radius-personal-builder-input:var(--primitive-radius-6px);--space-personal-creator-tight:var(--primitive-spacing-6px);--space-personal-creator-regular:var(--primitive-spacing-10px);--space-personal-creator-inset:var(--primitive-spacing-12px);--space-personal-creator-medium:var(--primitive-spacing-14px);--space-personal-creator-large:var(--primitive-spacing-16px);--space-personal-creator-wide:var(--primitive-spacing-18px);--space-personal-creator-indent:var(--primitive-spacing-20px);


  /* Answer controls and verdict panels keep their existing, distinct roles. */
  --answer-choice-gap:9px;--answer-choice-padding:12px;--answer-choice-radius:10px;--answer-choice-text-size:15px;
  --feedback-padding-block:13px;--feedback-padding-inline:16px;--feedback-radius:10px;--feedback-text-size:15px;
  /* Matching owns its own success/error palette: its light fills differ from verdict panels. */




  --match-option-gap:9px;--match-option-padding:11px;--match-option-radius:10px;--match-option-text-size:14px;
  --badge-padding-block:2px;--badge-padding-inline:9px;--badge-radius:20px;--badge-text-size:11.5px;

  --text-conversion-practice-question:20px;--text-conversion-visual-prompt:var(--primitive-font-size-18px);--text-course-stage-prompt:var(--primitive-font-size-19px);--text-mobile-section-title:var(--primitive-font-size-27px);--space-conversion-practice-actions:10px;
  /* Compatibility aliases are part of the theme contract. Newer assessment,
     review, and verification surfaces use these semantic names; keeping them
     mapped here prevents invalid declarations and light-only fallbacks. */
  --shadow:none;
  --shadow-sm:none;--ink:var(--text-primary);--paper:var(--ground-paper);--serif:"Instrument Sans",system-ui,sans-serif;
  /* One quiet physical grammar for every bounded action. Marketing, primary,
     secondary, destructive, compact, and shell buttons keep their own color
     and geometry; these tokens make their response to the hand consistent. */
  /* ELEVATION CARRIES A HUE, AND IT HAS TO BE THE THEME'S HUE.
     Every raised control casts two shadows: a neutral contact shadow and a
     tinted ambient glow. Those were hardcoded blue, so after dark mode went
     gold every button still sat in a blue haze -- at rest, not just on hover.
     Fills alone were never the whole of the accent; the light it throws is
     part of it. These are raw "r,g,b" triples so alpha stays per-shadow. */

  /* ELEVATION IS A LADDER, NOT 87 RECIPES.
     The tint channel above says what colour a shadow is. It never said how far
     off the page a thing sits, so every surface picked its own number and the
     sheet ended up with 87 distinct box-shadow values -- including a resting
     card at .045 alpha next to its own primary sibling at .07+.11, a 2.4x step
     between two rows of the same list that nothing declared and nobody chose.

     Three levels, each a contact layer plus an ambient layer. A component asks
     for a height; it does not author a shadow. TOKEN_CONTRACT rule 3.

     The levels resolve --elev-tint/--elev-shade at the USE site, so a scope
     that rebinds the channels (auth, dark) retints the whole ladder for free
     and the alphas are the only thing a theme has to restate. */



  /* Level 4 is the FLOATING tier, and it is a different kind of thing from 1-3.
     One to three are heights within the page: a surface at level 2 is still in
     the room, and the ground under it is the room's floor. A dialog, an account
     menu or a toast is not in the room at all -- it is in front of it, over a
     dimmed backdrop, and it has to read as separated from a page it may be
     covering at any luminance. So the contact layer here carries much more
     weight than the ladder's spacing would suggest, and 3 -> 4 is the largest
     single step on the ladder: it is the one that crosses out of the room.

     This tier is why level 3 must not be handed to a modal: 3 is a sticky bar,
     a dock, an in-flow thing riding above its own content. It was doing both
     jobs for exactly as long as there was nothing above it. */

  /* Text that sits ON the accent fill. Blue takes white; gold takes ink. */

  --action-rest-duration:150ms;--action-hover-duration:120ms;--action-press-duration:80ms;
  --action-ease:cubic-bezier(.22,.61,.36,1);
  /* THE CONTROL MATERIAL (VISUAL_IDENTITY_CONSTITUTION 7.26): one size ladder
     and one corner per size for every command. */
  --size-action:var(--primitive-spacing-40px);--size-action-compact:var(--primitive-spacing-32px);
  --size-action-large:var(--primitive-spacing-48px);--size-action-touch:var(--primitive-spacing-44px);
  --space-action-inline:var(--primitive-spacing-16px);--space-action-inline-compact:var(--primitive-spacing-12px);
  --space-action-inline-touch:var(--primitive-spacing-14px);--space-action-gap:var(--primitive-spacing-8px);
  --text-action:var(--primitive-font-size-14px);--text-action-large:var(--primitive-font-size-15px);
  --radius-action:var(--primitive-radius-999px);--radius-action-compact:var(--primitive-radius-999px);
  --radius-action-large:var(--primitive-radius-999px);--radius-action-hero:var(--primitive-radius-999px);
  --shape-action:round;
  --text-action-compact:var(--primitive-font-size-13-5px);--size-action-spinner-quiet:var(--primitive-spacing-14px);
}
/* overflow-x:clip (not hidden): hidden creates a scroll container on the
   root elements, which silently disables position:sticky everywhere. */
*{box-sizing:border-box} html{background:var(--outer-canvas-bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;transition:background-color var(--theme-paint-duration,.2s) ease}
/* Theme identity is an atomic application-state commit. Paint transitions use
   this inherited clock; transforms, layout motion, and activity animations do
   not, so a theme change cannot create mixed-theme frames or cancel unrelated
   interaction feedback. The runtime holds this value for two painted frames. */
html.theme-commit{--theme-paint-duration:0s}
/* Theme state itself still commits in one frame. These compositor snapshots
   put back a restrained sense of continuity without reviving independent
   component transition clocks. The switch thumb is its own captured element,
   so it travels once instead of appearing in both full-page snapshots. */
@keyframes workspace-theme-fade-out{to{opacity:0}}
@keyframes workspace-theme-fade-in{from{opacity:0}}
::view-transition-old(root){animation:workspace-theme-fade-out 200ms cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:workspace-theme-fade-in 200ms cubic-bezier(.4,0,.2,1) both}
::view-transition-group(theme-chip){animation-duration:200ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(theme-chip),::view-transition-new(theme-chip){animation-duration:200ms;mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  ::view-transition-group(theme-chip),::view-transition-old(theme-chip),::view-transition-new(theme-chip){animation:none}
}
/* Dark mode is EDGE TO EDGE. The dark reaches the rails, so the page is one
   field from the header down. The rails used to invert -- pale #e9eff6 rails
   framing a dark column -- which made the brightest surface on the screen the
   chrome, in the periphery, in the theme chosen specifically to emit less
   light. The frame is never brighter than what it frames.

   Light mode keeps its rails, and that asymmetry is deliberate: each theme
   extends whichever colour serves it. Dark extends the dark; light contains
   the white, where the navy rails cut the bright area of the screen from 88%
   to 69%. VISUAL_IDENTITY_CONSTITUTION 5.2.

   The ground is Eclipse, not navy -- see the palette section. */
/* The header joins the field. It is lifted off the ground rather than matched
     to it, so it still reads as a bar instead of dissolving, and --header-edge
     finishes it: navy's luminance is 0.0054 against the ground's 0.0048, so a
     fill alone would leave any bar here floating.

     The header therefore DOES move between themes, which is what cost us the
     logo and the switch when it last moved -- to a pale #e9eff6. The rule that
     stops that recurring is directional, not fixed: THE HEADER MAY FOLLOW THE
     THEME DOWNWARD, NEVER UPWARD. Darker than the content it sits above is
     allowed; brighter is not, in either theme.
     VISUAL_IDENTITY_CONSTITUTION 5.2. */
/* Gold light, and a true black contact shadow: on a #0f0f0f ground a navy
     shade reads as a blue bruise under every control. */
/* The ladder is the same three heights, expressed differently. Here the
     surface step (#0f0f0f -> #1d1e1e -> #262727) already carries the height,
     so the shadow is a contact cue and nothing more -- and it is pure shade.
     The ambient layer drops its tint on purpose: a gold haze under a resting
     card is the same defect the elevation tint test was written for, arrived
     at from the other side. What lights the object may be gold; what the
     object BLOCKS is black. A light-mode alpha would also be invisible on
     Eclipse, which is why a theme restates the numbers and not the shape. */
/* The switch was drawn as a groove cut into navy. On a neutral bar its blue
     chip would be the only hue left in the header, so it goes neutral too. */
/* The ground the arrival bloom opens to. Same surface as the workspace. */

[hidden]{display:none!important}
[data-tone="success"]{color:var(--success-fg)}
[data-tone="danger"]{color:var(--danger-fg)}
[data-tone="warning"]{color:var(--warning-fg)}
[data-tone="action"]{color:var(--action-primary-bg)}
.route-pending{min-height:42vh;display:grid;place-content:center;justify-items:center;gap:var(--primitive-spacing-12px);color:var(--text-secondary);text-align:center}
.route-pending p{margin:0;font-weight:650}
.route-pending-indicator{width:30px;height:30px;border:3px solid var(--border-subtle);border-top-color:var(--action-primary-bg);border-radius:50%;animation:route-spin .7s linear infinite}
@keyframes route-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.route-pending-indicator{animation:none;border-top-color:var(--border-subtle);background:var(--action-primary-bg)}}
.route-destination-skeleton{min-height:58vh;padding-top:var(--primitive-spacing-42px);overflow:hidden}
.route-destination-skeleton .skeleton-heading,.route-destination-skeleton .skeleton-copy,
.route-destination-skeleton .skeleton-grid i,.route-destination-skeleton .skeleton-rows i{
  display:block;border-radius:var(--primitive-radius-7px);background:linear-gradient(90deg,var(--surface-raised) 25%,var(--surface-panel) 50%,var(--surface-raised) 75%);
  background-size:220% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite}
.route-destination-skeleton .skeleton-heading{width:min(430px,62%);height:42px;margin-bottom:18px}
.route-destination-skeleton .skeleton-copy{width:min(680px,90%);height:18px;margin-bottom:48px}
.route-destination-skeleton .skeleton-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--primitive-spacing-18px);margin-bottom:42px}
.route-destination-skeleton .skeleton-grid i{height:112px}
.route-destination-skeleton .skeleton-rows{display:grid;gap:var(--primitive-spacing-13px)}
.route-destination-skeleton .skeleton-rows i{height:54px}
@keyframes skeleton-shimmer{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.route-destination-skeleton *{animation:none!important}}
.bootstrap-arrival-hold{min-height:calc(100dvh - 167px);display:grid;place-content:center;justify-items:center;gap:var(--primitive-spacing-24px);
  color:var(--visual-bootstrap-arrival-hold-text)}
.bootstrap-arrival-hold img{width:72px;height:72px}
main[data-bootstrap-shell="true"]{background-color:var(--outer-canvas-bg)}
.route-update-failure{display:flex;align-items:center;gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-12px) 0 var(--primitive-spacing-16px);margin-bottom:16px;border-bottom:1px solid var(--danger-fg);color:var(--danger-fg)}
.route-update-failure span{color:var(--text-secondary)}.route-update-failure button{margin-left:auto}
main[inert]{user-select:none}
/* THE FLOOR. The page may fade; the ground it stands on may not.

   Route commits replace the #main element, and the replacement enters with
   `animation:pageIn` from opacity 0. main is also the thing that paints
   --workspace, so for those 180ms the content column had no floor at all and
   what showed through was --outer-canvas-bg: the navy rails, seen through a
   transparent page. Measured on the Today -> Calendar commit, the column went
   #eef2f8 -> #1a232f -> #9aa1a9 -> #eef2f8 inside a tenth of a second. That
   swing is the flash; it is not a blend of two pages, because there are never
   two pages -- the old one is removed before the new one is shown.

   Charles found the fingerprint that identifies it: the only thing that stayed
   bright was the scrim at the bottom. .site-footer and .workspace-edge-veil are
   SIBLINGS of main, so they are never removed and never animated. A cross-fade
   would have taken them with it. A page fading over the rails does not.

   Dark mode never had the bug and that is not luck: 5.2 makes it edge to edge,
   so --outer-canvas-bg IS --workspace-bg there and a transparent page already
   revealed the colour it was about to become. Measured: #0f0f0f -> #0e0e0e.
   This gives light mode the same property.

   Painted as a background layer on the body rather than an element, so there is
   no new node, no stacking order to get wrong, and nothing for a future layout
   to have to step around. Scoped to the workspace: the signed-out environment
   has no content column to floor. If a browser ignores background-attachment
   fixed the positioning area becomes the body box instead of the viewport and
   100% height still covers the document, so the degradation is harmless. */
body.workspace-environment{
  background-image:linear-gradient(var(--surface-workspace),var(--surface-workspace));
  background-repeat:no-repeat;background-position:top center;
  background-size:min(100%,var(--workspace-max-width)) 100%;
  background-attachment:fixed}
body{margin:0;min-height:100dvh;position:relative;isolation:isolate;background-color:var(--outer-canvas-bg);color:var(--text-primary);overflow-x:clip;
  font-family:"Instrument Sans",system-ui,sans-serif;font-size:var(--primitive-font-size-15px);line-height:1.52;
  font-synthesis:none;transition:background-color var(--theme-paint-duration,.2s) ease}
body:before{display:none}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{font-family:inherit;font-weight:680;letter-spacing:-.018em}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:12px;top:8px;z-index:20;padding:var(--primitive-spacing-10px) var(--primitive-spacing-14px);border-radius:var(--primitive-radius-8px);background:var(--action-primary-bg);color:var(--visual-skip-link-text);font-weight:700;transform:translateY(-160%)}
.skip-link:focus{transform:none}
header{display:flex;align-items:center;gap:var(--primitive-spacing-14px);padding:var(--primitive-spacing-14px) var(--primitive-spacing-22px);
  border-bottom:1px solid var(--header-control-line);position:sticky;top:0;
  background:var(--header-bg);color:var(--header-text);z-index:5;
  transition:background-color var(--theme-paint-duration,.2s) ease,color var(--theme-paint-duration,.2s) ease,border-color var(--theme-paint-duration,.2s) ease}
/* Keep rapid taps on the mobile navigation controls from triggering iOS
   WebView double-tap zoom. Pinch zoom remains available everywhere. */
body>header{border-bottom:0;z-index:var(--layer-app-header)}
body>header{min-height:var(--app-header-height)}
body>header,body>header a,body>header button{touch-action:manipulation}
/* The header is chrome, not content. Dragging across Today / Calendar / Study
   Areas selects them like body text, which is a thing no native app does and
   which mostly happens by accident -- an overshot double-click leaves the nav
   sitting there highlighted.

   Scoped to body>header deliberately: `main header` is a real in-page heading
   (study area titles, breadcrumbs) and that text stays selectable, because
   people copy it. Right-click, keyboard focus and the context menu are all
   untouched; this only stops drag-to-select. The brand mark also stops being
   draggable, so the logo cannot be pulled out of the page as an image. */
body>header{-webkit-user-select:none;user-select:none}
/* Navigation labels behave like the primary header, including Safari's
   word selection on secondary click. Keep link menus and lesson text native. */
:where(.mode-nav a,.mode-switcher a,.study-up-link,.course-study-row,.exam-readiness-link,main a.primary,main a.ghost){-webkit-user-select:none;user-select:none}
body>header .brand-mark{-webkit-user-drag:none}
header .brand{display:flex;align-items:center;gap:0;flex:0 0 auto;color:var(--header-text);text-decoration:none;border-radius:var(--primitive-radius-8px);padding:var(--primitive-spacing-5px) var(--primitive-spacing-7px);margin:-5px -7px}
header span.brand{cursor:default}
header .brand-mark{display:block;width:31px;height:31px;object-fit:contain;flex:0 0 31px}

/* ============================================================================
   THE LIFT — a hover primitive with two clocks and a row
   Ported from Vetrra's GalleryCardPainted and WishlistSurface:
     "Strategy Gamma: Hybrid Compositing Architecture"
       -- Vetrra Poster Hover Motion Re-engineering, 2026-03-21
     "Gravitational Asymmetric Easing"
       -- Poster Card Fidelity, Cinematic Choreography, and State-of-the-Art
          Hover/Click Microinteractions, 2026-03-15
     neighbour handoff settle, 150ms row / 185ms soft
       -- Vetrra Wishlist Hover Spike Elimination Research Report

   It is not an animation. It is a set of effects on clocks that deliberately
   disagree with each other, and the disagreement is the illusion.

     Clock A — scale     1 → --lift-scale       in 320ms, out 200ms
     Clock B — tilt      0 → --lift-tilt        in 360ms, out 200ms
       ...and riding clock B: the shadow's asymmetry, and the sheen.

   The row adds no clock of its own. It only decides how long the SETTLE of the
   object you just left is allowed to take -- see THE ROW IS ONE OBJECT in
   study-icons.js, and 11.11 for the displacement channel that was rejected.

   WHY TWO CLOCKS FOR ONE OBJECT. Vetrra's first attempt ran one perspective
   transform over the whole widget and failed: "a visual impossibility: a
   shadow that narrows as it falls away from the object." The fix was to stop
   transforming the shadow with the object. The object barely tilts (a degree
   or two is below the threshold where edges start to degrade); the SHADOW
   behaves as though it tilted much harder. On a flat screen the brain has no
   stereo disparity to argue with, so it believes the lighting and ignores the
   geometry.

     "A pure geometric tilt without a corresponding localized shadow expansion
      and surface sheen gradient will consistently fail to produce a believable
      physical interaction."

   GRAVITY IS NOT A REVERSAL. The way up and the way down are different
   physical events, so they get different curves and different durations. Up is
   320ms on cubic-bezier(.17,.89,.32,1.15): an explosive break from resting
   inertia, then hang-time, and the terminal 1.15 overshoots so the object
   micro-bounces as its kinetic energy transfers at the peak. Down is 200ms on
   cubic-bezier(.55,.08,.68,.53): gravity accelerates it and the table stops it
   abruptly. An exit that eases IN, as a naive reversal does, reads as the
   object FLOATING down, which is the one thing a solid object never does.

   Only the scale overshoots. The tilt must not: an oscillating perspective
   "causes a highly disruptive flickering effect along the vertical edges", so
   clock B and the shadow keep curves that approach their target from one side.

   WHAT LIFTS IS NOT WHAT MEASURES. Vetrra keeps its hit-test rectangle
   axis-aligned and un-tilted so the layout engine and anchored overlays see a
   plain rectangle: "The poster must occupy the exact same two-dimensional
   footprint in the layout engine as it would with a pure flat scale."
   Transforms do not affect layout in CSS, so this holds for free -- but it is
   why the lift must never be expressed as width, margin or top.

   Every channel is a custom property. A surface retunes the primitive by
   overriding tokens, never by writing new keyframes: a 31px brand mark needs
   far more relative scale than a 150px poster to read as the same gesture.
   ============================================================================ */
/* ---- SILHOUETTE OBJECTS ---------------------------------------------------
   The primitive above assumes the object IS its box. For a poster that is true
   -- the superellipse card and its bounding rectangle are the same shape -- so
   a box-shadow happens to be a correct shadow, and a gradient over the box
   happens to fall on the artwork.

   For a glyph it is false, and the whole effect inverts: a box-shadow behind a
   transparent mark is not a shadow, it is a visible rectangle hovering behind
   the letter, and a gradient over the box lights the empty air around it. The
   object appears to rise while a separate rectangle does the emoting. That is
   the difference between "the icon lifts" and "something under the icon lifts".

   Vetrra never has this problem because every lighting layer is clipped to the
   poster's own path -- `painter.setClipPath(path)` before the sheen,
   `setClipPath(clip_path)` before the contact AO. The light is ON the object.
   The web equivalents for a shape that is not a rectangle:

     shadow  ->  filter: drop-shadow()   follows the ALPHA silhouette
     sheen   ->  mask-image: <the mark>  the light lands only on the glyph
     contact ->  an ellipse pooled beneath the shape, not a bar on a box edge

   ONE MECHANISM, MANY SURFACES. Everything below is written once and adopted by
   setting tokens. `data-lift` marks the hover host -- the element you point at,
   which is usually bigger than the object being lit. Nothing is ever painted on
   the host: it may be padded, and in a grid it may stretch, and a shadow
   attached to a stretched host draws a bar across the page.
   VISUAL_IDENTITY_CONSTITUTION 11.8, 11.9. */
[data-lift]{
  --lift-scale:1.06;
  --lift-tilt:6deg;
  --lift-perspective:320px;
  /* Up and down are different events. See GRAVITY IS NOT A REVERSAL above. */
  --lift-in:320ms;
  --lift-out:200ms;
  --lift-in-ease:cubic-bezier(.17,.89,.32,1.15);   /* shipped scale curve; the
                                                      1.15 is the micro-bounce */
  --lift-in-ease-safe:cubic-bezier(.215,.61,.355,1); /* for channels that must
                                                      not overshoot */
  --lift-out-ease:cubic-bezier(.55,.08,.68,.53);   /* gravity, then the table */
  --lift-tilt-in:360ms;
  --lift-tilt-ease:cubic-bezier(.645,.045,.355,1);

  --lift-glow:136ms;                 /* motion_combo_duration_ms, brand papers */
  --lift-shadow-tint:var(--elev-shade);
  /* Shadow: two layers. Blur and offset grow while alpha FALLS -- a shadow
     spread over more area is a fainter shadow (11.3). */
  --lift-rest-shadow:
    var(--data-lift-lift-rest-shadow);
  --lift-hover-shadow:
    var(--data-lift-lift-hover-shadow);
  --lift-pool-left:14%;
  --lift-pool-right:14%;
  --lift-pool-bottom:-1px;
  --lift-pool-height:5px;
  --lift-pool-a:.55;
}
/* The object's own box. Separate from the hover host on purpose: a host may be
   padded for a comfortable target, and in a grid it may stretch to its column.
   Perspective and the contact pool belong to the OBJECT, or the pool draws a
   bar the width of whatever you happened to make clickable. */
/* The stage does not move. Vetrra's neighbours are displaced a few pixels by
   a lifting poster; ported to a row of words that reads as the page reflowing
   under the pointer rather than as air being pushed aside, so this surface has
   no displacement channel at all. VISUAL_IDENTITY_CONSTITUTION 11.11. */
.lift-mark{position:relative;perspective:var(--lift-perspective)}
/* Clock A: scale. It carries the shadow, because a drop-shadow must grow with
   the thing it belongs to but must NOT be tilted with it -- the same decoupling
   the poster gets by painting its shadow before the perspective matrix. */
.lift-rise{
  display:flex;align-items:center;gap:inherit;
  transform:scale(1);
  transform-origin:50% 78%;          /* pivot low: the object grows from its feet */
  filter:var(--lift-rest-shadow);
  transition:transform var(--lift-out) var(--lift-out-ease),
    filter var(--lift-out) var(--lift-out-ease);
}
/* Clock B: tilt. The object itself contorts, bottom edge forward. */
.lift-plane{
  display:flex;align-items:center;gap:inherit;
  transform:rotateX(0deg);
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transition:transform var(--lift-out) var(--lift-out-ease);
}
/* The pool it sits in. A shape with no bottom edge cannot darken one, so the
   contact cue is the shadow pooled beneath it: tight and dark at rest, wider
   and fainter once it is off the ground -- the same release Vetrra performs
   when it drops contact AO from 150 alpha to 72. */
.lift-mark::after{
  content:"";
  position:absolute;
  left:var(--lift-pool-left);right:var(--lift-pool-right);
  bottom:var(--lift-pool-bottom);height:var(--lift-pool-height);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(var(--shadow-contact-rgb),var(--lift-pool-a)) 0%,
    rgba(var(--shadow-contact-rgb),calc(var(--lift-pool-a) * .5)) 45%,
    var(--visual-lift-mark-pool) 100%);
  pointer-events:none;
  transition:transform var(--lift-tilt-in) var(--lift-tilt-ease),
    opacity var(--lift-tilt-in) var(--lift-tilt-ease);
}
/* ---- lifted -------------------------------------------------------------- */
[data-lift]:hover .lift-rise,[data-lift]:focus-visible .lift-rise,
[data-lift].is-lifted .lift-rise{
  transform:scale(var(--lift-scale));
  filter:var(--lift-hover-shadow);
  transition-duration:var(--lift-in);
  /* transform overshoots; filter must not -- a blur radius driven past its
     target has nowhere to go but clamp, which stutters the shadow. */
  transition-timing-function:var(--lift-in-ease),var(--lift-in-ease-safe);
}
[data-lift]:hover .lift-plane,[data-lift]:focus-visible .lift-plane,
[data-lift].is-lifted .lift-plane{
  transform:rotateX(var(--lift-tilt));
  transition-duration:var(--lift-tilt-in);
  transition-timing-function:var(--lift-tilt-ease);
}
[data-lift]:hover .lift-mark::after,[data-lift]:focus-visible .lift-mark::after,
[data-lift].is-lifted .lift-mark::after,
.lift-mark[data-lift]:hover::after,.lift-mark[data-lift]:focus-visible::after,
.lift-mark[data-lift].is-lifted::after{
  transform:translateY(2px) scaleX(1.35) scaleY(1.5);
  opacity:.42;
}
@media (prefers-reduced-motion:reduce){
  .lift-rise,.lift-plane,.lift-mark::after{transition:none}
  [data-lift]:hover .lift-rise,[data-lift]:focus-visible .lift-rise,[data-lift].is-lifted .lift-rise,
  [data-lift]:hover .lift-plane,[data-lift]:focus-visible .lift-plane,[data-lift].is-lifted .lift-plane{
    transform:none}
}

/* ---- SURFACE: the brand mark (the demo bench) ----------------------------
   Kept deliberately separate from every other surface. It is the first place a
   change to this motion gets tried, so it must be free to diverge without
   dragging the activity rows with it -- and the brand papers give it one rule
   the others do not have: "the badge's response must be purely luminous."  */
header .brand{
  --lift-scale:1.085;
  --lift-tilt:7deg;              /* a glyph has no straight edges to converge,
                                    so the tilt has to be legible on its own */
  --lift-perspective:150px;
  --mark:url("/brand/pharmrecall-mark.svg");
}
header .brand .lift-rise,header .brand .lift-plane{display:block;width:100%;height:100%}
header .brand .lift-mark{display:block;width:31px;height:31px;flex:0 0 31px}
header .brand .brand-mark{
  background:var(--mark) center/contain no-repeat;
  transition:transform var(--lift-out) var(--lift-out-ease),
    filter var(--lift-glow) var(--lift-out-ease);
  -webkit-user-drag:none;
}
/* The sheen, masked to the glyph so the light falls ON the letter. */
header .brand .brand-mark::after{
  content:"";position:absolute;inset:0;
  background:var(--visual-brand-brand-mark-surface);
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat;
  mix-blend-mode:plus-lighter;
  opacity:0;pointer-events:none;
  transition:opacity var(--lift-tilt-in) var(--lift-tilt-ease);
}
header a.brand:hover .brand-mark,header a.brand:focus-visible .brand-mark{
  filter:brightness(1.06) drop-shadow(0 0 5px rgba(var(--elev-tint),.5));
  transition-duration:var(--lift-tilt-in),var(--lift-glow);
  transition-timing-function:var(--lift-tilt-ease),cubic-bezier(.215,.61,.355,1);
}
header a.brand:hover .brand-mark::after,header a.brand:focus-visible .brand-mark::after{opacity:.5}
/* The public brand link starts gently raised and depresses while pressed.
   The application mark is static branding, with no press response. */
body.landing-environment>header .brand{
  --lift-scale:1.055;--lift-tilt:3deg;

  }
body.landing-environment>header .brand .lift-rise{transform:scale(var(--lift-scale));filter:var(--lift-rest-shadow)}
body.landing-environment>header .brand .lift-plane{transform:rotateX(var(--lift-tilt))}
body.landing-environment>header .brand .lift-mark::after{
  transform:translateY(2px) scaleX(1.28) scaleY(1.35);opacity:.38}
body.landing-environment>header .brand:active .lift-rise{
  transform:scale(1);filter:var(--lift-rest-shadow);transition-duration:80ms}
body.landing-environment>header .brand:active .lift-plane{
  transform:rotateX(0);transition-duration:80ms}
body.landing-environment>header .brand:active .lift-mark::after{
  transform:none;opacity:.62;transition-duration:80ms}
@media (prefers-reduced-motion:reduce){
  header .brand .brand-mark{transition:none}
  header a.brand:hover .brand-mark,header a.brand:focus-visible .brand-mark{filter:none}
  header a.brand:hover .brand-mark::after,header a.brand:focus-visible .brand-mark::after{opacity:0}
}

nav{display:flex;gap:var(--primitive-spacing-4px);flex-wrap:wrap;margin-left:auto}
body.landing-environment header nav:empty{display:none}
body.landing-environment header #account{margin-left:auto}
/* The primary destinations belong to the header's centre, not to the gap
   left over between the brand and the utilities -- at every desktop width,
   including a browser snapped to half a laptop screen (owner review, 29 Oct).
   Three columns: brand | destinations | utilities. The two outer columns
   share what is left equally, so the destinations sit on the true centre;
   neither may shrink below its contents, so when a long account name leaves
   too little room the destinations give way sideways instead of colliding.
   It used to switch from the flex flow to absolute centering at 1020px,
   which left them up to 120px off centre below it and made them jump. The
   public landing header (Features, Pricing) follows the same rule; its
   utilities are the language, Sign in and the offer that docks beside them. */
.header-utilities{display:contents}
@media(min-width:641px){
  body:is(.workspace-environment,.landing-environment)>header{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)}
  body:is(.workspace-environment,.landing-environment)>header>.brand{justify-self:start}
  body:is(.workspace-environment,.landing-environment)>header #nav{margin-left:0}
  body:is(.workspace-environment,.landing-environment)>header>.header-utilities{display:flex;align-items:center;justify-self:end;gap:var(--space-header-utilities-gap)}
}
nav button,nav a{background:none;border:1px solid transparent;color:var(--header-muted);padding:var(--primitive-spacing-7px) var(--primitive-spacing-13px);
  border-radius:var(--primitive-radius-8px);cursor:pointer;font-size:var(--primitive-font-size-14px);text-decoration:none;display:inline-block;line-height:1.35}
/* High-contrast hover belongs only to the site header. A bare "nav" selector
   here used to bleed into the workspace's light-background mode tabs. */
/* The current page must outrank the utility controls (theme, account),
   which share the same themed pill: an accent underline marks it uniquely. */
header nav button.active,header nav a.active:not(.app-nav-action){color:var(--header-text);background:var(--header-control-bg);border-color:var(--header-control-line);font-weight:650;box-shadow:var(--visual-active-shadow)}
header nav button:hover,header nav a:hover{color:var(--header-text)}
/* Premium primary navigation ----------------------------------------------
   One gold source travels beneath Today, Calendar, Study Areas, and Progress.
   The core filament is deliberately bright and narrow; its directional wash
   uses a soft Gaussian-like falloff so the header reads as illuminated
   material rather than four boxed tabs. */
header nav#nav{

  position:relative;isolation:isolate;overflow:visible;
}
/* The spotlight needs a positioned host at every size; the header grid
   centres the destinations, so they stay in flow. */
header nav .app-nav-action{
  --nav-action-focus:var(--header-focus);
  position:relative;z-index:2;isolation:isolate;overflow:visible;transform:translateY(0) scale(1);
  transform-origin:center;background:transparent;border-color:transparent;box-shadow:none;
  filter:saturate(1) brightness(1);text-shadow:none;
  transition:transform var(--action-rest-duration) var(--action-ease),
    filter var(--action-rest-duration) ease-out,color var(--theme-paint-duration,var(--action-rest-duration)) ease-out,
    text-shadow 220ms ease-out;
}
header nav .app-nav-action.active{
  color:var(--header-text);background:transparent;border-color:transparent;font-weight:650;box-shadow:none;
  text-shadow:var(--visual-app-nav-action-active-text-shadow);
}
header nav .app-nav-label{display:inline-block}
.app-nav-spotlight{
  --nav-spotlight-x:0px;--nav-spotlight-y:0px;--nav-spotlight-width:0px;--nav-spotlight-height:0px;
  position:absolute;z-index:1;left:0;top:0;width:var(--nav-spotlight-width);
  height:var(--nav-spotlight-height);pointer-events:none;opacity:0;
  transform:translate3d(var(--nav-spotlight-x),var(--nav-spotlight-y),0);
  transform-origin:50% 100%;will-change:transform,width,height,opacity;
  transition:transform 520ms cubic-bezier(.2,.78,.2,1),width 440ms cubic-bezier(.2,.72,.2,1),
    height 360ms ease-out,opacity 180ms ease-out;
}
.app-nav-spotlight.is-positioned.is-visible{opacity:1}
.app-nav-spotlight.is-immediate{transition:none}
.app-nav-spotlight-cone,.app-nav-spotlight-pool,.app-nav-spotlight-filament{
  position:absolute;display:block;pointer-events:none;
}
.app-nav-spotlight-cone{
  left:-13%;right:-13%;top:-12px;bottom:1px;
  clip-path:polygon(7% 0,93% 0,56% 100%,44% 100%);
  background:var(--visual-app-nav-spotlight-cone-surface);
  filter:blur(3.5px);opacity:.82;transform-origin:50% 100%;
}
.app-nav-spotlight-pool{
  left:-35%;right:-35%;top:-17px;bottom:-7px;
  background:var(--visual-app-nav-spotlight-pool-surface);
  filter:blur(2.5px);opacity:.88;transform-origin:50% 88%;
}
.app-nav-spotlight-filament{
  left:24%;right:24%;bottom:0;height:1px;border-radius:var(--primitive-radius-999px);
  background:linear-gradient(90deg,transparent 0%,var(--nav-spotlight-edge) 18%,
    var(--nav-spotlight-highlight) 50%,var(--nav-spotlight-edge) 82%,transparent 100%);
  box-shadow:var(--visual-app-nav-spotlight-filament-shadow);
}
.app-nav-spotlight.is-igniting .app-nav-spotlight-cone{animation:nav-light-cone-arrive 520ms cubic-bezier(.2,.72,.2,1) 120ms both}
.app-nav-spotlight.is-igniting .app-nav-spotlight-pool{animation:nav-light-pool-arrive 560ms cubic-bezier(.2,.72,.2,1) 100ms both}
.app-nav-spotlight.is-igniting .app-nav-spotlight-filament{animation:nav-light-filament-arrive 430ms cubic-bezier(.16,1,.3,1) 150ms both}
@keyframes nav-light-cone-arrive{0%{opacity:.28;transform:scaleX(.48) scaleY(.62)}55%{opacity:1;transform:scaleX(1.06) scaleY(1.04)}100%{opacity:.82;transform:none}}
@keyframes nav-light-pool-arrive{0%{opacity:.22;transform:scale(.54)}58%{opacity:1;transform:scale(1.08)}100%{opacity:.88;transform:none}}
@keyframes nav-light-filament-arrive{0%{opacity:.3;transform:scaleX(.32)}62%{opacity:1;transform:scaleX(1.08)}100%{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){
  header nav .app-nav-action:hover:not([aria-busy="true"]){
    transform:translateY(-2px) scale(1.015);filter:saturate(1.025) brightness(1.07);
    text-shadow:var(--visual-app-nav-action-text-shadow-hover);
    transition-duration:var(--action-hover-duration);
  }
  header nav .app-nav-action.active:hover{
    text-shadow:var(--visual-app-nav-action-active-text-shadow-hover);
  }
}
header nav .app-nav-action:active:not([aria-busy="true"]){
  transform:translateY(1px) scale(.988);filter:saturate(1.02) brightness(.96);
  text-shadow:var(--visual-app-nav-action-text-shadow-active);transition-duration:var(--action-press-duration);
}
header nav .app-nav-action[data-action-owned="true"]{
  transform:translateY(1px) scale(.988);filter:saturate(1.02) brightness(.96);
  text-shadow:var(--visual-app-nav-action-text-shadow);transition-duration:var(--action-press-duration);
}
header nav .app-nav-action:focus-visible{outline:2px solid var(--nav-action-focus);outline-offset:2px}
body.assessment-navigation-locked>header .brand,
body.assessment-navigation-locked>header #nav,
body.assessment-navigation-locked>header #account,
body.assessment-navigation-locked>header #themeToggle,
body.assessment-navigation-locked>header #mobileMenu{opacity:.38;filter:grayscale(1);pointer-events:none;cursor:default}
body.assessment-navigation-locked>header .app-nav-spotlight{opacity:0!important}
body.assessment-navigation-locked>header #nav .app-nav-action.active{color:var(--header-text);text-shadow:none}
header nav .app-nav-action[aria-busy="true"]{color:transparent!important;pointer-events:none;cursor:progress;transform:none;filter:none}
header nav .app-nav-action[aria-busy="true"]::after{
  content:"";position:absolute;z-index:2;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border:2px solid color-mix(in srgb,var(--header-text) 34%,transparent);border-top-color:var(--header-text);border-radius:50%;
  animation:action-button-spin .62s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  header nav .app-nav-action,.app-nav-spotlight{transition:none}
  header nav .app-nav-action:hover,header nav .app-nav-action:active{transform:none}
  header nav .app-nav-action[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:3px;transform:none;filter:none}
  .app-nav-spotlight.is-igniting .app-nav-spotlight-cone,
  .app-nav-spotlight.is-igniting .app-nav-spotlight-pool,
  .app-nav-spotlight.is-igniting .app-nav-spotlight-filament{animation:none}
  header nav .app-nav-action[aria-busy="true"]::after{animation:none}
}
@media (forced-colors:active){
  header nav .app-nav-action{box-shadow:none;filter:none}
  .app-nav-spotlight{display:none}
  header nav .app-nav-action.active{border-color:Highlight;color:HighlightText}
  header nav .app-nav-action[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:3px;transform:none;filter:none}
}
.mobile-menu{display:none;background:var(--header-control-bg);border:1px solid var(--header-control-line);color:var(--header-control-text);
  border-radius:var(--primitive-radius-8px);padding:var(--primitive-spacing-8px) var(--primitive-spacing-11px);font-size:var(--primitive-font-size-18px);line-height:1;cursor:pointer}
header button.ghost,header a.ghost{background:var(--header-control-bg);border:1px solid var(--header-control-line);color:var(--header-control-text);
  padding:var(--primitive-spacing-9px) var(--primitive-spacing-15px);border-radius:var(--primitive-radius-6px);font-size:var(--primitive-font-size-14px);text-decoration:none;display:inline-block;cursor:pointer}
header button.ghost:hover,header a.ghost:hover{border-color:var(--header-focus)}
#account{position:relative;flex:0 0 auto}
.account-menu-trigger{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-trigger{display:inline-flex;align-items:center;gap:var(--space-attention-gap)}
.account-menu-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* An attention mark is a solid lozenge of the attention ink, the number cut
   in the ground colour. It used to be an outlined ring around a numeral, and a
   closed ring around a character reads as a stamp (4.7) -- at 11px it sat in
   the menu like a registered mark. Solid also keeps it from looking like one
   more control in a row of controls. A dot is the same ink with nothing to
   count. */
.account-attention-count,.account-menu-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--size-attention-badge);height:var(--size-attention-badge);padding:0 var(--space-attention-badge-inline);border:0;border-radius:var(--radius-attention-badge);background:var(--warning-fg);color:var(--warning-bg);font-size:var(--text-attention-badge);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.account-attention-count.is-dot,.account-menu-count.is-dot{position:relative;min-width:0;width:var(--size-attention-dot);height:var(--size-attention-dot);padding:0}
.account-menu-count.is-dot{margin-right:var(--space-attention-dot-inset)}
/* The header is a dark bar in both themes, so a mark on it keeps the
   dark-ground orange; light mode's deep text orange turned to brown on navy. */
body>header :is(#accountAttentionCount,#mobileAccountAttentionCount){background:var(--header-attention-bg);color:var(--header-attention-fg)}
#accountAttentionCount{margin-left:var(--space-attention-dot-inset)}
.account-attention-count{flex:0 0 auto}
.account-attention-count[hidden],.account-menu-count[hidden]{display:none}
header button.account-menu-trigger:hover{border-color:transparent}
.account-menu{position:absolute;right:0;top:calc(100% + var(--account-menu-offset,var(--space-account-menu-clearance)));z-index:12;display:grid;min-width:190px}
.account-menu[hidden]{display:none}
/* THE MENU IS LIFTED BY A SCRIM, NOT DRAWN WITH AN OUTLINE.

   A border states where a box ends. It does not stop the page behind the box
   competing with it, and here the page was winning: the Add course button and
   the dashed rule ran straight up to the edge, so the menu read as a bordered
   rectangle laid over the content rather than as a thing in front of it. The
   scrim answers the same question from the other side -- it lets the page
   recede -- and once the page recedes the line has nothing left to do.

   Unlike the workspace edge and search scrims, this one crosses from the
   workspace onto the outer canvas. It must leave both surfaces unpainted:
   only the backdrop blur and radial mask may soften what is behind the menu.

   .account-menu is now a SHELL that only positions. It holds no ink: the
   surface, the padding and the opening animation all belong to
   .account-menu-panel, and the shell shrink-wraps it, so the scrim can inset
   off the shell and track the panel's real size with no measurement.

   That split is not tidiness. A backdrop-filter cannot see past an ancestor
   that is a BACKDROP ROOT, and an element is one for as long as an animation
   is filling an opacity value on it. With the fade on .account-menu the scrim
   was inside it, so its blur did not run until the animation finished --
   visibly late, arriving after a menu that had already landed. Moving the
   fade down to the panel puts the scrim beside it instead of underneath it,
   and the blur is live from the first frame.

   Two things about the geometry are deliberate.

   IT NEVER RISES ABOVE THE PANEL'S OWN TOP EDGE. The eight pixels of --above
   stay inside the gap below the header.

   THE REACH IS LOCAL. The left inset stays shorter than the exposed navy gap
   beside the workspace on wide layouts, so the blur leaves that seam sharp. */
.account-menu::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:calc(-1 * var(--size-account-menu-scrim-above)) 0
    calc(-1 * var(--size-account-menu-scrim-below))
    calc(-1 * var(--size-account-menu-scrim-left));
  background:transparent;
  -webkit-backdrop-filter:blur(var(--size-account-menu-scrim-blur));
  backdrop-filter:blur(var(--size-account-menu-scrim-blur));
  -webkit-mask-image:var(--account-menu-scrim-mask-image);
  mask-image:var(--account-menu-scrim-mask-image);
  animation:account-menu-scrim-in .2s cubic-bezier(.2,.8,.2,1) both}
/* The menu sits 22px from the viewport edge and the workspace is centered at
   a maximum width of 1160px. In the short range where the menu is beside the
   workspace but its 40px halo could still touch it, clip at the workspace
   edge plus a 16px navy gap. At tighter widths the menu covers the seam. */
@media(min-width:1584px){
  body.workspace-environment .account-menu::before{
    clip-path:inset(0 0 0 max(0px,
      calc(100% + 22px + 16px + 580px - 50vw)))}
}
.account-menu-panel{display:grid;padding:var(--space-account-menu-panel);
  border-radius:var(--radius-account-menu-panel);background:var(--shell-menu-bg);
  box-shadow:var(--visual-account-menu-panel-shadow);
  transform-origin:top right;
  animation:account-menu-open .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes account-menu-open{
  from{opacity:0;transform:translateY(-6px) scale(.98)}
  to{opacity:1;transform:none}
}
/* The scrim arrives on the panel's clock -- same duration, same curve, no
   delay -- so the page recedes exactly as the menu lands. Animate the blur,
   not the scrim's opacity: opacity below one would make it a backdrop root. */
@keyframes account-menu-scrim-in{
  from{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
}
/* Leaving is the entrance played backwards: the same 200ms, on the mirrored
   curve, both layers again on one clock.

   The panel's fade makes it a backdrop root on the way out exactly as it does
   on the way in -- which is the second reason the scrim is its sibling and
   not its child. As a child it would lose its blur the moment the exit
   started and snap to sharp before the menu had gone. Beside it, it can
   un-blur at the same rate the panel fades.

   The scrim thins its blur rather than fading its opacity, for the same
   reason it does on arrival. */
.account-menu.is-closing{pointer-events:none}
.account-menu.is-closing .account-menu-panel{
  animation:account-menu-close .2s cubic-bezier(.8,0,.8,.2) both}
.account-menu.is-closing::before{
  animation:account-menu-scrim-out .2s cubic-bezier(.8,0,.8,.2) both}
@keyframes account-menu-close{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-6px) scale(.98)}
}
@keyframes account-menu-scrim-out{
  to{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  .account-menu-panel,.account-menu::before,
  .account-menu.is-closing .account-menu-panel,.account-menu.is-closing::before{animation:none}
}
/* Reduced transparency keeps the menu panel and its shadow visible. */
@media(prefers-reduced-transparency:reduce){
  .account-menu::before{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* The header owns the open menu's stacking context. Raise that context above
   sticky page tools only while the menu is visible. */
body>header:has(.account-menu:not([hidden])){z-index:21}
.account-menu a,.account-menu button{display:flex;align-items:center;gap:var(--space-account-menu-glyph);width:100%;min-height:40px;padding:var(--primitive-spacing-9px) var(--primitive-spacing-11px);border:0;
  border-radius:var(--primitive-radius-6px);background:transparent;color:var(--shell-menu-fg);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.account-menu a:hover,.account-menu button:hover,.account-menu a:focus-visible,.account-menu button:focus-visible{
  outline:none;background:var(--shell-menu-hover-bg);color:var(--shell-menu-fg)}
/* Sign out keeps its warning ink on either header. */
.account-menu .account-menu-signout{color:var(--shell-menu-danger-fg)}
/* Each row leads with its control glyph (§4.11): flat, in the row's own ink,
   a step quieter than the words until the row is under the pointer. */
.account-menu-glyph{display:grid;flex:0 0 auto;width:var(--size-account-menu-glyph);height:var(--size-account-menu-glyph);opacity:.72}
.account-menu-glyph svg{width:100%;height:100%}
.account-menu a:hover .account-menu-glyph,.account-menu button:hover .account-menu-glyph,
.account-menu a:focus-visible .account-menu-glyph,.account-menu button:focus-visible .account-menu-glyph{opacity:1}
.account-menu-label{flex:1 1 auto}
.account-menu-count{flex:0 0 auto;margin-left:var(--space-attention-gap)}
.support-request-new{display:inline-flex;align-items:center;margin-left:var(--space-attention-gap);padding:var(--space-support-new-block) var(--space-support-new-inline);border:0;border-radius:var(--radius-attention-badge);background:var(--warning-fg);color:var(--warning-bg);font-size:var(--text-attention-badge);font-weight:750}
/* The theme control is a two-position switch --------------------------------
   A single button has to say both where you are and where you would go with
   one glyph, so somebody has to choose which -- and the first pass chose the
   current state while every word on it named the action, putting a sun beside
   the word "Dark". A switch cannot make that mistake: both options are on
   screen, the raised chip marks the one in force, the other is the offer.
   VISUAL_IDENTITY_CONSTITUTION 4.9.

   The physics: the track is a dark instrument housing inset into either header
   field, and the chip is a key riding in it. A hard shadow under the top lip
   and a faint light line off the far wall keep the same control legible when
   the header is brand navy or the neutral Eclipse bar.

   The alternative reading -- two rocker keys, the active one pressed in -- was
   drawn and rejected: on a dark ground the raised key is the bright one, so the
   option you did NOT choose is the one the eye lands on. */
.theme-toggle{position:relative;display:inline-flex;align-items:center;gap:var(--primitive-spacing-2px);flex:0 0 auto;
  padding:var(--primitive-spacing-3px);border-radius:var(--primitive-radius-999px);background:var(--switch-track,var(--visual-theme-track-fallback));
  box-shadow:var(--visual-theme-toggle-shadow)}
.theme-chip{position:absolute;z-index:1;top:3px;left:3px;width:32px;height:28px;border-radius:var(--primitive-radius-999px);
  background:linear-gradient(var(--switch-chip-top,var(--visual-theme-chip-top)),var(--switch-chip-bottom,var(--visual-theme-chip-bottom)));
  box-shadow:var(--visual-theme-chip-shadow);
  transition:transform .3s cubic-bezier(.4,0,.2,1);view-transition-name:theme-chip}
/* The chip travels; the icons never change identity. A sun that morphed into a
   moon would put us back to one glyph doing two jobs. */
.theme-toggle[data-theme="dark"] .theme-chip{transform:translateX(34px)}
.theme-seg{position:relative;z-index:2;display:grid;place-items:center;width:32px;height:28px;
  padding:0;border:0;border-radius:var(--primitive-radius-999px);background:transparent;cursor:pointer}
.theme-glyph{width:17px;height:17px;overflow:visible}
.theme-glyph .disc{fill:var(--visual-theme-glyph-disc-fill);transition:fill var(--theme-paint-duration,.28s) ease}
.theme-glyph .rays{transition:opacity .28s ease}
.theme-glyph .rays line{stroke:var(--visual-theme-glyph-rays-stroke);stroke-width:2.1;stroke-linecap:round;transition:stroke var(--theme-paint-duration,.28s) ease}
.theme-seg:hover .theme-glyph .disc{fill:var(--visual-theme-seg-theme-glyph-disc-fill-hover)}
.theme-seg:hover .theme-glyph .rays line{stroke:var(--visual-theme-seg-theme-glyph-rays-stroke-hover)}
/* Colour and elevation agree: the icon on the chip is the one in force. */
.theme-seg[aria-pressed="true"] .theme-glyph .disc{fill:var(--visual-theme-seg-theme-glyph-disc-fill)}
.theme-seg[aria-pressed="true"] .theme-glyph .rays line{stroke:var(--visual-theme-seg-theme-glyph-rays-stroke)}
.theme-seg[data-sets-theme="dark"][aria-pressed="true"] .theme-glyph .disc{fill:var(--visual-theme-seg-theme-glyph-disc-fill-0b05c056)}
@media (prefers-reduced-motion: reduce){
  .theme-chip,.theme-glyph .disc,.theme-glyph .rays,.theme-glyph .rays line{transition:none}
}
main{position:relative;z-index:var(--layer-page);isolation:isolate;max-width:var(--workspace-max-width);min-height:calc(100dvh - 116px);margin:0 auto;padding:var(--primitive-spacing-28px) var(--primitive-spacing-28px) var(--primitive-spacing-48px);background:var(--workspace);animation:pageIn .18s ease both;transition:background-color var(--theme-paint-duration,.2s) ease,color var(--theme-paint-duration,.2s) ease}
.workspace-edge-veil{
  position:fixed;z-index:4;left:50%;bottom:0;width:min(100%,var(--workspace-max-width));
  height:clamp(64px,9vh,92px);pointer-events:none;visibility:hidden;opacity:0;
  transform:translateX(-50%);background:linear-gradient(180deg,
    transparent 0%,color-mix(in srgb,var(--surface-workspace) 18%,transparent) 34%,
    color-mix(in srgb,var(--surface-workspace) 72%,transparent) 72%,var(--surface-workspace) 100%);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  -webkit-mask-image:var(--visual-workspace-edge-veil--webkit-mask-image);
  mask-image:var(--visual-workspace-edge-veil-mask-image);
  transition:opacity 120ms ease-out,visibility 0s linear 120ms;
}
body.workspace-environment.workspace-edge-veil-active .workspace-edge-veil{
  visibility:visible;opacity:1;transition:opacity 120ms ease-out,visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .workspace-edge-veil,
  body.workspace-environment.workspace-edge-veil-active .workspace-edge-veil{transition:none}
}
main header,:where(.route-visual-exit) header{position:static;top:auto;display:flex;grid-template-columns:none;grid-template-areas:none;
  padding:0;background:transparent;color:var(--text-primary);border:0;z-index:auto}
/* THE UP CONTROL. One step, one shape, every depth.

   FLAT, per 7.15: it is printed into the page, not placed on it. The drawing
   carries no elevation at rest and gains none on hover -- what it gains is
   travel. The app already says "this link goes somewhere" by sliding its arrow
   the way the arrow points (the forward arrows on catalog rows, study cards and
   Today items all translate +3px); this one points back, so it goes -3px. That
   idiom was already here and already understood, which is worth more than
   reaching for the lift because the lift exists. An object that TRAVELS is not
   an object that RISES.

   The mark is its own element so the travel belongs to the drawing and not to
   the link, which is padded for a comfortable target -- 11.8's corollary:
   attach the motion to the thing being moved, and to nothing else. */
.study-up{display:block;margin:0 0 14px}
.study-up-link{display:inline-flex;align-items:center;gap:var(--study-up-gap);
  min-height:32px;padding:0;border:0;background:none;color:var(--text-secondary);
  font-family:inherit;font-size:var(--study-up-text-size);font-weight:650;
  text-decoration:none;cursor:pointer;
  transition:color var(--theme-paint-duration,var(--action-rest-duration)) ease}
.study-up-mark{display:inline-flex;flex:0 0 auto;width:17px;height:17px;overflow:visible}
.study-up-travel{display:block;width:100%;height:100%;
  transition:transform var(--action-rest-duration) var(--action-ease)}
.study-up-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.study-up-link:hover,.study-up-link:focus-visible{color:var(--action-primary-bg)}
.study-up-link:hover .study-up-travel,
.study-up-link:focus-visible .study-up-travel{transform:translateX(var(--study-up-travel))}
/* 5.5: the ring is not removable, and it hugs the control rather than standing
   off it. The link has no box of its own, so it borrows a small radius. */
.study-up-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;
  border-radius:var(--study-up-radius)}
.study-up-link:active .study-up-travel{transform:translateX(var(--study-up-travel-press));
  transition-duration:var(--action-press-duration)}
@media (prefers-reduced-motion:reduce){
  .study-up-travel{transition:none}
  .study-up-link:hover .study-up-travel,.study-up-link:focus-visible .study-up-travel,
  .study-up-link:active .study-up-travel{transform:none}
}
/* Reference destinations share the parent-navigation drawing, facing forward. */
.study-reference-link{min-height:var(--size-action-touch);flex-shrink:0}
.study-reference-link .study-up-travel svg{transform:rotate(180deg)}
.study-reference-link:hover .study-up-travel,
.study-reference-link:focus-visible .study-up-travel{transform:translateX(calc(-1 * var(--study-up-travel)))}
.study-reference-link:active .study-up-travel{transform:translateX(calc(-1 * var(--study-up-travel-press)))}
@media (prefers-reduced-motion:reduce){
  .study-reference-link:hover .study-up-travel,.study-reference-link:focus-visible .study-up-travel,
  .study-reference-link:active .study-up-travel{transform:none}
}

.conversion-mode-nav{margin:0 0 14px}

/* The central canvas and outer environment deliberately invert: light mode
   presents an illuminated workspace inside dark application rails; dark mode
   presents a near-ink workspace inside pale environmental rails. */
html.workspace-dark{
  color-scheme:dark;
  /* ECLIPSE. The dark ground carries no hue.
     Adapted from the Vetrra palette of the same name: base #0f0f0f -- a black
     held ten levels off the floor, because #000 switches OLED pixels off,
     which shimmers under scrolling text and leaves nothing darker for a
     shadow to be -- with every surface above it mixed 4% toward the cool grey
     #7d848d. At the base that mix is below the 8-bit floor and the ground is
     dead neutral; by the card tier it appears (blue one step above red). The
     hue lives in the RISE, not in the ground, which is how an unlit surface
     behaves as it catches light. Text keeps that cool cast deliberately.

     Why not navy: a navy ground drags every warm hue on top of it toward grey
     by simultaneous contrast, and gold is the worst case because gold is
     navy's near-complement. The study-area icons and the nav filament are the
     things this app is made of, so the ground lets go of them. The swap costs
     no brightness at all -- Eclipse's luminance is 0.0048 against navy's
     0.0054. Only the cast is gone. */


  /* GOLD IS THE DARK-MODE ACTION COLOUR.
     Light mode is blue on white; dark mode is gold on black. The landing page
     already runs black and gold in its dark sections, so this makes the app
     agree with the marketing rather than inventing a second identity. It is
     also the pairing the ground was chosen for: gold is what suffered most on
     navy, being its near-complement, and on a neutral black it is at full
     strength.

     --warn moves off gold and onto orange. When the primary action and the
     warning state are the same colour, neither means anything. */







  background:var(--workspace);color:var(--text-primary);
}
/* Links retain their authored role in dark mode. A former blanket anchor
   override turned neutral card titles, breadcrumbs, tabs, and ghost buttons
   blue simply because their container was an <a>. Real text links already
   receive --accent from the base anchor rule. */
.connection-state{position:sticky;top:var(--app-header-height);z-index:4;padding:var(--primitive-spacing-8px) var(--primitive-spacing-16px);text-align:center;background:var(--visual-connection-state-surface);color:var(--visual-connection-state-text);border-bottom:var(--visual-connection-state-bottom-outline);font-weight:700}
.request-progress{position:fixed;top:0;left:0;z-index:30;width:100%;height:3px;pointer-events:none;opacity:0;background:var(--action-primary-bg);transition:opacity .12s ease}
.request-progress.active{opacity:1;animation:requestPulse 1s ease-in-out infinite alternate}
.command-status{margin:var(--space-command-status-gap) 0 0;color:var(--text-secondary);font-size:var(--text-command-status);line-height:1.4}
.command-status:empty{display:none}
.command-error{margin:var(--space-command-status-gap) 0 0;color:var(--danger-fg);font-size:var(--text-command-status);line-height:1.4}
.command-error:empty{display:none}
button[aria-busy="true"]{cursor:progress}
@media (prefers-reduced-motion:reduce){.request-progress.active{animation:none}}
.card{background:transparent;border:0;border-top:1px solid var(--border-subtle);border-radius:0;
  padding:var(--primitive-spacing-20px) 0;margin-bottom:16px;box-shadow:none;transition:border-color var(--theme-paint-duration,.16s) ease}
.card.interactive:hover{border-color:var(--action-primary-bg)}
.grid{display:grid;gap:var(--primitive-spacing-12px)}
.grid.stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.stat{background:transparent;border-right:1px solid var(--border-subtle);border-radius:0;padding:var(--primitive-spacing-12px) var(--primitive-spacing-16px);text-align:left}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:var(--primitive-font-size-26px);font-weight:680;letter-spacing:-.02em}
.stat span{color:var(--text-secondary);font-size:var(--primitive-font-size-12-5px)}
h2{font-size:var(--primitive-font-size-16px);margin:0 0 12px}
h3{font-size:var(--primitive-font-size-14px);margin:16px 0 8px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.6px}
table{width:100%;border-collapse:collapse;font-size:var(--primitive-font-size-14px)}
th,td{text-align:left;padding:var(--primitive-spacing-7px) var(--primitive-spacing-9px);border-bottom:1px solid var(--border-subtle)}
th{color:var(--text-secondary);font-weight:600;font-size:var(--primitive-font-size-12-5px);text-transform:uppercase;letter-spacing:.5px}
select,input:is([type=text],[type=email],[type=number],:not([type])){background:var(--surface-raised);color:var(--text-primary);border:1px solid var(--border-subtle);
  border-radius:var(--radius-text-control);padding:var(--space-text-control-inset);font-size:var(--text-text-control);min-height:44px}
input[type=password]{min-height:44px}
input:is([type=text],[type=email],:not([type])){width:100%}
/* CONTINUOUS CORNERS. A circular corner meets the straight side with a jump in
   curvature, which is why a box can look cut rather than drawn; a squircle eases
   into the side. It needs a larger radius to read as the same roundness (a 12px
   squircle is about an 8px circle at 40px), so radius and shape change together.
   A browser that cannot draw it (Safari, the iOS app) keeps the circle. */
@supports (corner-shape:squircle){
  :root{--radius-action:var(--primitive-radius-999px);--radius-action-compact:var(--primitive-radius-999px);
    --radius-action-large:var(--primitive-radius-999px);--radius-action-hero:var(--primitive-radius-999px);--shape-action:round}
}
/* Navigation actions render as real anchors so right-click / middle-click
   "open in new tab" works; they share the button look exactly. */
main a.primary,main a.ghost{text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;text-align:center;line-height:1.35}
/* THE COMMAND KINDS (VISUAL_IDENTITY_CONSTITUTION 7.26). One flat material,
   the Settings switch chip's: a fill whose edge is the fill, no sheen, no top
   highlight. Each kind spends colour on one thing only:
   - primary: the accent fill (blue on Paper, gold on Eclipse);
   - secondary: a neutral piece -- white on Paper, one step up on Eclipse;
   - destructive entry (danger-quiet): the secondary piece with red ink, and
     nothing else red -- a red edge and a maroon hover made it the loudest
     thing on a page and read as an error rather than a choice;
   - destructive confirmation (danger): the one solid red, where the decision
     is actually made.
   Hover is the lift alone, so a fill never goes pastel as it is reached for;
   press is the one deeper step, edge and face together. */
:is(button.primary,main a.primary,button.ghost,main a.ghost,button.danger,button.danger-quiet):not(:where(body>header *)){
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-action-gap);
  min-height:var(--size-action);padding:0 var(--space-action-inline);border-radius:var(--radius-action);corner-shape:var(--shape-action);
  font-size:var(--text-action);font-weight:600;line-height:1.2;cursor:pointer}
button.primary,main a.primary{background:var(--action-primary-bg);border:1px solid var(--action-primary-bg);color:var(--action-primary-fg)}
/* The header's controls are drawn for its bar and keep their own material;
   Google keeps its own dark face. */
:is(button.ghost,main a.ghost):not(:where(body>header *,.provider-button)){background:var(--action-secondary-bg);border:1px solid var(--border-subtle);color:var(--text-primary)}
button.danger{background:var(--danger-solid-bg);border:1px solid var(--danger-solid-bg);color:var(--danger-solid-fg)}
button.danger-quiet{background:var(--action-secondary-bg);border:1px solid var(--border-subtle);color:var(--danger-action-text)}
@media (hover:hover) and (pointer:fine){
  :is(button.ghost,main a.ghost,button.danger-quiet):not(:where(body>header *,.provider-button)):hover:not(:disabled):not([aria-busy="true"]){
    background:var(--action-secondary-hover);border-color:var(--action-secondary-edge-hover)}
}
:is(button.primary,main a.primary):is(:active,[data-action-owned="true"],[data-surface-open="true"]):not(:disabled){
  background:var(--action-primary-press);border-color:var(--action-primary-press)}
:is(button.ghost,main a.ghost,button.danger-quiet):not(:where(body>header *,.provider-button)):is(:active,[data-action-owned="true"],[data-surface-open="true"]):not(:disabled){
  background:var(--action-secondary-press);border-color:var(--action-secondary-press-edge)}
button.danger:is(:active,[data-action-owned="true"]):not(:disabled){background:var(--action-danger-press);border-color:var(--action-danger-press)}
/* A compact command is a toolbar's short verb, and its label is set on one
   line. Squeezed into two, a pill reads as broken (owner review, 31 Oct 2026:
   My Courses' bar on a phone), so the bar around it makes room instead --
   whole buttons wrap or stack -- and tests/control_fit_browser_e2e.mjs
   measures that at phone width. A full-size action may carry a long,
   content-named label ("Start Potassium Permanganate Topical Solution
   0.017%"), which wraps rather than run off the screen. */
:is(button.compact,main a.compact):not(:where(body>header *)){min-height:var(--size-action-compact);padding:0 var(--space-action-inline-compact);
  border-radius:var(--radius-action-compact);font-size:var(--text-action-compact);white-space:nowrap}
button.danger:disabled{background:var(--action-primary-disabled-bg);border-color:var(--action-primary-disabled-edge);color:var(--action-primary-disabled-fg);opacity:1}
/* A disabled entry is a disabled secondary: the red ink leaves, the piece stays. */
button.danger-quiet:disabled{background:var(--action-secondary-bg);border-color:var(--border-subtle);color:var(--action-primary-disabled-fg)}
@media (max-width:640px){
  :is(button.primary,main a.primary,button.ghost,main a.ghost,button.danger,button.danger-quiet):not(.compact,.provider-button):not(:where(body>header *)){
    min-height:var(--size-action-touch);padding:0 var(--space-action-inline-touch)}
}
/* KEYBOARD FOCUS. Not a mode and not optional: it is the only thing telling
   someone navigating by Tab which control they are on, and WCAG 2.4.7 (AA) is
   what institutional buyers check for. It never appears on a mouse click --
   :focus-visible, not :focus -- so it costs a pointer user nothing.

   What it must not be is the browser default look. A 3px slab floating 4px off
   the control reads as an error state. Two pixels, hugging the shape, in the
   theme's own accent: the same ring the design would have drawn on purpose. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.62}
/* An enabled primary action must never read as disabled: keep the fill
   saturated and the label fully white in both themes. Disabled primaries
   drop the accent entirely instead of dimming a blue fill into an
   ambiguous middle state. */
/* A gold fill carries dark text, exactly as the landing page's "Try for free"
   does. White on gold is the one combination this palette must never make. */
button.primary:disabled{background:var(--action-primary-disabled-bg);border-color:var(--action-primary-disabled-edge);color:var(--action-primary-disabled-fg);opacity:1}
[data-answer-state]:disabled{opacity:1}

/* Bounded actions -----------------------------------------------------------
   The landing CTA established the product's interaction model: a short lift, a
   faster press that sinks (a pixel down, a hair smaller), an intentional focus
   ring, stable disabled geometry, and an in-place busy state. Its gloss did not
   survive (7.26): no sheen, no top highlight, and depth is cast in the neutral
   shade -- the elevation tint is gold on Eclipse, and every action and even
   neutral buttons glowed with it. Apply that model to actions only. Tabs, filters, answer options,
   calendar cells, navigation, and text controls deliberately do not match
   this selector because selection is not physical elevation. */
:is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label){
  --action-contact-shadow:var(--action-rest-contact);
  --action-ambient-shadow:var(--action-rest-ambient);
  --action-hover-shadow:var(--action-raise-shadow);
  --action-pressed-shadow:var(--action-press-outer);
  --action-hover-y:-1px;--action-hover-scale:1;
  --action-press-y:1px;--action-press-scale:.988;
  --action-busy-color:var(--text-primary);
  /* 5.5: the theme's accent, like every other control */
  --action-focus-ring:var(--focus-ring);
  position:relative;isolation:isolate;overflow:hidden;transform:translateY(0) scale(1);
  transform-origin:center;box-shadow:var(--action-contact-shadow),var(--action-ambient-shadow);
  transition:transform var(--action-rest-duration) var(--action-ease),
    box-shadow var(--theme-paint-duration,var(--action-rest-duration)) ease-out,filter var(--action-rest-duration) ease-out,
    background-color var(--theme-paint-duration,var(--action-rest-duration)) ease-out,border-color var(--theme-paint-duration,var(--action-rest-duration)) ease-out,
    color var(--theme-paint-duration,var(--action-rest-duration)) ease-out;
}
/* Colour lives in the fill, never in the air: every kind casts the same
   neutral depth, and only the spinner's ink differs, so a busy command keeps
   a visible spinner on its own fill. (It used currentColor, which a busy
   button sets transparent -- secondary and destructive spinners vanished.) */
:is(button.primary:not(.landing-cta),main a.primary,.announcement-cta){--action-busy-color:var(--action-primary-fg)}
:is(button.danger,main a.danger){--action-busy-color:var(--danger-solid-fg)}
button.danger-quiet{--action-busy-color:var(--danger-action-text)}
:is(header button.ghost,header a.ghost,.theme-seg,.mobile-menu,.provider-button){--action-busy-color:var(--ghost-action-busy-color)}
header :is(button.ghost,a.ghost,.theme-seg,.mobile-menu){--action-focus-ring:var(--focus-ring);--action-busy-color:var(--header-control-text)}
header button.account-menu-trigger{--action-focus-ring:var(--header-focus)}
:is(button.compact,main a.compact){
  --action-hover-y:-1px;--action-hover-scale:1.01;
  --action-press-y:.5px;--action-press-scale:.992;
}
@media (hover:hover) and (pointer:fine){
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){
    box-shadow:var(--action-hover-shadow);
    transform:translateY(var(--action-hover-y)) scale(var(--action-hover-scale));
    transition-duration:var(--action-hover-duration);
  }
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){
  box-shadow:var(--action-press-inset),var(--action-pressed-shadow);
  transform:translateY(var(--action-press-y)) scale(var(--action-press-scale));
  transition-duration:var(--action-press-duration);
}
/* A physical press ends on mouse-up. An owned action does not. Reuse the
   exact pressed geometry while its destination, scene, processing command,
   dialog, sheet, menu, or popover is still unresolved. */
:is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):is([data-action-owned="true"],[data-surface-open="true"]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){
  box-shadow:var(--action-press-inset),var(--action-pressed-shadow);
  transform:translateY(var(--action-press-y)) scale(var(--action-press-scale));
  transition-duration:var(--action-press-duration);
}
/* Custom calendar rows and native menu summaries are real surface owners but
   intentionally are not styled as bounded CTA buttons. They still communicate
   engagement through the same down-and-in geometry. */
:where(button,[role="button"],summary,label.ghost):is([data-action-owned="true"],[data-surface-open="true"]){
  transform:translateY(var(--action-press-y,1px)) scale(var(--action-press-scale,.988));
}
:is(.reference-menu,.study-area-actions)>summary{
  transform:translateY(0) scale(1);transform-origin:center;
  transition:transform var(--action-rest-duration) var(--action-ease),
    box-shadow var(--theme-paint-duration,var(--action-rest-duration)) ease-out,filter var(--action-rest-duration) ease-out;
}
:is(.reference-menu,.study-area-actions)>summary[data-surface-open="true"]{
  box-shadow:inset 0 1px 2px rgba(var(--elev-shade),.2),0 1px 2px rgba(var(--elev-shade),.18);
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):focus-visible{outline:2px solid var(--action-focus-ring);outline-offset:2px}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):disabled,
:is(main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta)[aria-disabled="true"]{
  box-shadow:none;filter:none;transform:none;cursor:not-allowed;
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)[aria-busy="true"]{
  color:transparent!important;pointer-events:none;cursor:progress;box-shadow:none;filter:none;transform:none
}
/* A committed command may be disabled to prevent duplication, but its owner
   still has an unresolved visible consequence and must retain pressed depth. */
:is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet)[data-action-owned="true"]:is(:disabled,[aria-busy="true"]){
  box-shadow:var(--action-press-inset),var(--action-pressed-shadow);
  transform:translateY(var(--action-press-y)) scale(var(--action-press-scale));
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)[aria-busy="true"]>*{opacity:0}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)[aria-busy="true"]::after{
  content:"";position:absolute;z-index:2;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border:2px solid color-mix(in srgb,var(--action-busy-color) 30%,transparent);
  border-top-color:var(--action-busy-color);border-radius:50%;animation:action-button-spin .62s linear infinite
}
@keyframes action-button-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label),
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)::before{transition:none}
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):hover,
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):active{transform:none}
  :where(button,[role="button"],summary,label.ghost)[data-action-owned="true"]{
    outline:2px solid currentColor;outline-offset:2px;transform:none;box-shadow:none;filter:none;
  }
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)[aria-busy="true"]::after{animation:none}
}
@media (forced-colors:active){
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label){box-shadow:none;filter:none}
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,button.danger-quiet,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)::before{display:none}
  :where(button,[role="button"],summary,label.ghost)[data-action-owned="true"]{
    outline:2px solid Highlight;outline-offset:2px;transform:none;box-shadow:none;filter:none;
  }
}
/* THE CARD AT REST.
   Same card, same mark, same place on the page as a running question -- with
   nothing on it that is not true yet. No counter, no progress, no End session,
   no scope line: a session has not begun, and chrome that describes one is a
   lie the page tells on the way in. VISUAL_IDENTITY_CONSTITUTION 7.6. */
.activity-ready .stage-brow{border-bottom:0;padding-bottom:0}
.activity-ready .stage-ask{margin-top:16px}
.activity-ready .stage-scene>.stage-ask:first-child{margin-top:0}
.ready-options{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--primitive-spacing-18px) var(--primitive-spacing-26px);margin-top:26px;
  padding-top:var(--primitive-spacing-22px);border-top:1px solid var(--border-subtle)}
.ready-option{display:grid;gap:var(--primitive-spacing-6px);font-size:var(--primitive-font-size-12-5px);color:var(--text-secondary)}
.ready-option-wide{align-items:flex-start}
.ready-option>span{font-weight:650}
.ready-option input[type="number"]{width:92px;height:44px;padding:0 var(--primitive-spacing-12px);border:1px solid var(--border-subtle);
  border-radius:var(--primitive-radius-9px);background:var(--workspace);color:var(--text-primary);font:inherit;font-size:var(--primitive-font-size-15px);
  font-variant-numeric:tabular-nums}
.ready-option small{color:var(--text-secondary);font-size:var(--primitive-font-size-11-5px)}
.ready-option .scope-picker{margin:0}
.ready-go{margin-top:24px}
.ready-go .primary{min-height:var(--size-action-large);padding:0 var(--primitive-spacing-26px);border-radius:var(--radius-action-large);font-size:var(--text-action-large)}
@media(max-width:560px){
  .ready-options{gap:var(--primitive-spacing-14px)}
  .ready-option,.ready-option-wide{width:100%}
  
}
.ready-conditional-slot{display:contents}
/* The deeper workspaces sit under the activity. While a session is running they
   quieten with the rest of the setup chrome -- three "Open" buttons beneath a
   live question compete with the one thing on the page that matters. They stay
   reachable: hover or keyboard focus brings them back to full weight. */
.workspace-deeper{margin-top:34px;padding-top:var(--primitive-spacing-8px)}
body.activity-in-play .workspace-deeper{opacity:.55;transition:opacity .2s ease}
body.activity-in-play .workspace-deeper:hover,
body.activity-in-play .workspace-deeper:focus-within{opacity:1}
.activity-stage .matchgrid{margin-top:20px}
/* The message line is feedback now, not the instruction: the ask moved above
   the board where it is read before you act, not after. */
.activity-stage #mMsg{text-align:center;color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}
.activity-stage #mMsg:empty{display:none}
/* Matching's own measure of progress is elapsed time; it rides in the rail
   beside the counter rather than floating over the board. */
.stage-rail-count#mClock{font-variant-numeric:tabular-nums}
/* SETUP IS NOT PLAY.
   The mode chips and the scope selector are decisions you make ONCE, before a
   question exists. Leaving them on screen through all eight questions meant
   the page never left setup: the card had to compete for attention with the
   controls that configured it, which is most of why the landing page's demo
   read as cleaner than the real screen it was advertising.

   They do not disappear -- disappearing controls are their own bug -- they
   quieten to a strip that stays reachable, and the card takes the weight.
   VISUAL_IDENTITY_CONSTITUTION 7.1. */
body.activity-in-play .session-bar{
  opacity:.62;transition:opacity .2s ease}
body.activity-in-play .session-bar:hover,
body.activity-in-play .session-bar:focus-within{opacity:1}
body.activity-in-play .mode-switcher .mode-chip:not(.is-active){font-weight:600}
/* THE ACTIVITY STAGE -------------------------------------------------------
   An activity screen has four jobs: say where you are, present one prompt,
   take the answer, give the verdict. The old screen gave all four the same
   weight and stacked the session's configuration on top, so the question had
   to compete with the controls that set it up. Here the card is the only
   object with elevation on the page: the eye has exactly one place to land.

   The rule that keeps it clean: ANYTHING CONSTANT ACROSS THE SESSION BELONGS
   TO THE RAIL; THE CARD CARRIES ONLY WHAT CHANGES.
   VISUAL_IDENTITY_CONSTITUTION 7.1. */
.stage-rail{display:flex;align-items:center;gap:var(--primitive-spacing-14px);flex-wrap:wrap;margin:4px 0 0}
.stage-rail-scope{font-size:var(--primitive-font-size-12px);font-weight:600;color:var(--text-secondary);letter-spacing:.01em}
.stage-rail-end{margin-left:auto;display:flex;align-items:center;gap:var(--primitive-spacing-14px)}
.stage-rail-count{font-size:var(--primitive-font-size-12-5px);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.stage-exit{border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--primitive-font-size-12-5px);
  padding:var(--primitive-spacing-4px) var(--primitive-spacing-2px);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--border-subtle)}
.stage-exit:hover{color:var(--text-primary)}
.stage-exit:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--primitive-radius-4px)}

/* Segments, not a bar. A bar says how far; segments say how it is going. */
.stage-segments{display:flex;gap:var(--primitive-spacing-4px);margin:13px 0 24px}
.stage-seg{flex:1;height:3px;border-radius:var(--primitive-radius-2px);background:var(--border-subtle);
  transition:background var(--theme-paint-duration,.35s) ease}
.stage-seg.is-done{background:var(--success-fg)}
.stage-seg.is-miss{background:var(--danger-fg)}
.stage-seg.is-here{background:var(--action-primary-bg)}

.activity-stage{position:relative;overflow:hidden;
  transition:height .34s cubic-bezier(.4,0,.2,1)}
/* A prompt card is a reading-and-response surface, not a page-sized canvas.
   Keeping its measure close to the controls prevents a short question from
   producing a large, vacant right-hand panel on wide screens. Activities that
   genuinely spend horizontal space opt into one of the wider variants below. */
.card:is([data-activity-stage],[data-activity-ready]){
  width:100%;max-width:760px;margin-left:auto;margin-right:auto;border:0
}
.card:is([data-activity-stage],[data-activity-ready]).activity-stage-standard{max-width:900px}
.card:is([data-activity-stage],[data-activity-ready]).activity-stage-wide{max-width:none}
.activity-stage .stage-scene{animation:stageEnter .34s cubic-bezier(.2,.7,.3,1) both}
.activity-stage .stage-scene.is-leaving{animation:stageLeave .2s cubic-bezier(.4,0,1,1) both}
@keyframes stageEnter{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes stageLeave{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-22px)}}

/* The eyebrow: what KIND of question, before you read the question. */
.stage-brow{display:flex;align-items:center;gap:var(--primitive-spacing-10px);padding-bottom:var(--primitive-spacing-15px);
  border-bottom:1px solid var(--border-subtle)}
.activity-mark{display:inline-flex;flex:0 0 auto;width:30px;height:30px}
.activity-mark .study-glyph{width:100%;height:100%;display:block}
.stage-brow-label{font-size:var(--primitive-font-size-10-5px);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary)}
.stage-brow-count{margin-left:auto;font-size:var(--primitive-font-size-11px);font-weight:650;letter-spacing:.09em;
  color:var(--text-secondary);font-variant-numeric:tabular-nums}

/* The subject is the poster. It is the largest thing on the screen because it
   is what the question is ABOUT; the ask is a caption under it. */
.stage-ask{margin:24px 0 0}
.stage-subject{margin:0;font-size:var(--primitive-font-size-clamp-31px-5vw-44px);font-weight:600;
  letter-spacing:-.032em;line-height:1.03;text-wrap:balance}
.stage-instruction{margin:10px 0 0;font-size:var(--primitive-font-size-13-5px);color:var(--text-secondary)}
/* The missing value is a ruled blank the answer fills, not a question mark. */
.stage-blank{display:inline-block;width:2.4em;height:.8em;margin:0 .12em;border-bottom:.07em solid currentColor;opacity:.55;vertical-align:baseline}
/* The field starts where the subject starts. The shared .answerbox centres
   itself in a 520px column, which on the stage left it floating inboard of the
   drug name it belongs to -- the two read as unrelated objects. */
.activity-stage .answerbox{margin:20px 0 0;max-width:560px}
.activity-stage .answerbox input{flex:1;min-width:0}
/* Feedback starts where the subject and the choices start. The feedback
   pieces centre themselves for the old centred pages; on the stage that left
   "Not yet", the order card and the decode table floating inboard of the
   answers they belong to. */
.activity-stage :is(.result,.correction-panel,.safety,.decode,.rxcard,textarea.rxans){margin-left:0;margin-right:0}
.activity-stage .sub{text-align:left}
.stage-after .center{text-align:left}
.stage-after:empty{display:none}
.stage-after{margin-top:18px}
/* Standalone review controls need their own separation from verdicts and
   explanations, including when different study areas share this layout. */
.stage-after>button,.definition-stage .stage-scene>.stage-verdict+button{margin-top:var(--space-stage-review-action)}
/* An answer settles; it does not snap. The submitted state used to arrive as a
   single-frame swap: the chosen row flipped colour, "Answer saved." pushed the
   rows below it down in one jump, and the verdict appeared fully formed and
   grew the card by its whole height in one frame. Each of those is now a short,
   physical change on the product's own easing. Height grows from 0 to auto
   where the browser supports interpolate-size; elsewhere it simply appears. */
@media (prefers-reduced-motion:no-preference){
  .opts button{transition:background-color .22s cubic-bezier(.2,.7,.2,1),border-color .22s cubic-bezier(.2,.7,.2,1),
    color .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s cubic-bezier(.2,.7,.2,1),opacity .22s cubic-bezier(.2,.7,.2,1)}
  .command-status{interpolate-size:allow-keywords;animation:command-status-reveal .24s cubic-bezier(.2,.7,.2,1);overflow:hidden}
  .stage-after:not(:empty){interpolate-size:allow-keywords;overflow:clip;overflow-clip-margin:12px;
    animation:stage-after-reveal .36s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes command-status-reveal{from{opacity:0;height:0;margin-top:0}to{opacity:1;height:auto}}
@keyframes stage-after-reveal{from{opacity:0;height:0;margin-top:0;transform:translateY(6px)}to{opacity:1;height:auto;transform:none}}
.stage-brow-step{margin-left:auto;font-size:var(--primitive-font-size-11px);font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-secondary);font-variant-numeric:tabular-nums}

/* THE VIGNETTE.
   A case has no subject to enlarge -- "A fictional patient presents with a
   condition the course lists as 'Fungal Infection'." is a sentence, and set in
   display weight and centred it read as a headline nobody wrote. It gets
   reading measure, reading weight, and the ask beneath it in the same
   instruction voice every other activity uses. VISUAL_IDENTITY_CONSTITUTION 7.7. */
.stage-vignette{margin:0;font-size:var(--primitive-font-size-clamp-19px-2-4vw-23px);font-weight:450;
  line-height:1.42;letter-spacing:-.008em;max-width:34em;color:var(--text-primary);text-wrap:pretty}
.stage-ask-vignette .stage-instruction{margin-top:14px;font-size:var(--primitive-font-size-14px);font-weight:600;
  color:var(--text-primary)}
:root{--text-class-definition-heading:var(--primitive-font-size-20px)}
.stage-definition-title{margin:0 0 14px;font-size:var(--text-class-definition-heading);font-weight:600;line-height:1.42}
.stage-ask-definition .stage-vignette{font-weight:400}
/* What the subject IS, when the name alone does not say it. */
.stage-subject-note{margin:7px 0 0;font-size:var(--primitive-font-size-11px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary)}
.stage-subject-note+.stage-instruction{margin-top:18px;font-size:var(--primitive-font-size-14-5px);color:var(--text-primary)}
/* The rule of this board -- how many are right, or that nothing is revealed
   until you submit. It is not the ask, so it does not compete with it. */
.stage-note{margin:10px 0 0;font-size:var(--primitive-font-size-12px);color:var(--text-secondary)}
.stage-actions{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-12px);margin-top:22px}

/* THE COMPLETION SCREEN (activityCompletion). The ending of a session is the
   same stage the session ran on: the score is the subject, at the subject's
   size; the caption is the ask beneath it; everything after is reading, so the
   review is flat rows with an outcome edge -- not cards, not pressable, and
   deliberately outside FEEL_SURFACES. Outcome never rides on colour alone:
   a miss is a solid edge, a written answer still to compare is a dashed one
   with its own label. */
:root{
  --text-completion-score:var(--primitive-font-size-clamp-31px-5vw-44px);
  --text-completion-heading:var(--primitive-font-size-15px);
  --text-completion-body:var(--primitive-font-size-13-5px);
  --text-completion-meta:var(--primitive-font-size-12px);
  --space-completion-section:var(--primitive-spacing-24px);
  --space-completion-row:var(--primitive-spacing-12px);
  --space-completion-pad:var(--primitive-spacing-16px);
  --space-completion-gap:var(--primitive-spacing-10px);
  --space-completion-edge:var(--primitive-spacing-4px);
  --space-completion-hair:var(--primitive-spacing-2px);
  --space-completion-tight:var(--primitive-spacing-4px);
  --space-completion-pair:var(--primitive-spacing-6px);
  --radius-completion-row:var(--primitive-radius-0-8px-8px-0);
}
.completion .stage-brow{flex-wrap:wrap}
.completion .stage-brow-count{min-width:0;text-align:right;letter-spacing:normal;text-transform:none;overflow-wrap:anywhere}
.completion-score{margin:0;font-size:var(--text-completion-score);font-weight:600;letter-spacing:-.032em;line-height:1.03;
  font-variant-numeric:tabular-nums;text-wrap:balance}
.completion-score:focus{outline:0}
.completion-caption{margin:var(--space-completion-gap) 0 0;font-size:var(--text-completion-body);color:var(--text-secondary)}
.completion-measures{display:flex;flex-wrap:wrap;gap:var(--space-completion-row) var(--space-completion-section);margin:var(--space-completion-row) 0 0}
.completion-measures dt{font-size:var(--text-completion-meta);color:var(--text-secondary)}
.completion-measures dd{margin:0;font-size:var(--text-completion-body);font-weight:600;font-variant-numeric:tabular-nums}
.completion-changes,.completion-breakdown,.completion-review{margin-top:var(--space-completion-section)}
.completion-changes h2,.completion-review h2,.completion-breakdown caption{margin:0 0 var(--space-completion-gap);
  font-size:var(--text-completion-heading);font-weight:600;text-align:left}
.completion-change{border-top:1px solid var(--border-subtle)}
.completion-change summary{padding:var(--space-completion-gap) 0;font-size:var(--text-completion-body);cursor:pointer}
.completion-change ul{margin:0;padding:0 0 var(--space-completion-gap);list-style:none;font-size:var(--text-completion-body);
  color:var(--text-secondary)}
.completion-change li{padding:var(--space-completion-hair) 0}
.completion-breakdown{display:table;width:100%;border-collapse:collapse;font-size:var(--text-completion-body)}
.completion-breakdown :is(th,td){padding:var(--space-completion-gap) 0;border-top:1px solid var(--border-subtle);border-bottom:0;font-size:inherit;font-weight:400;
  letter-spacing:normal;text-align:left;text-transform:none}
.completion-breakdown th{color:var(--text-primary)}
.completion-breakdown td{text-align:right;font-variant-numeric:tabular-nums}
.completion-item{margin-top:var(--space-completion-gap);padding:var(--space-completion-row) var(--space-completion-pad);
  background:var(--surface-raised);border-left:var(--space-completion-edge) solid var(--border-subtle);
  border-radius:var(--radius-completion-row)}
.completion-item[data-outcome="incorrect"]{border-left-color:var(--answer-choice-incorrect-ink)}
.completion-item[data-outcome="pending"]{border-left-color:var(--warning-fg);border-left-style:dashed}
.completion-item[data-outcome="correct"]{border-left-color:var(--success-edge)}
.completion-state{margin:0 0 var(--space-completion-tight);font-size:var(--text-completion-meta);font-weight:700;color:var(--warning-fg)}
.completion-prompt{margin:0;font-size:var(--text-completion-body);font-weight:600;overflow-wrap:anywhere}
.completion-answers{margin:var(--space-completion-gap) 0 0;font-size:var(--text-completion-body)}
.completion-answers>div+div{margin-top:var(--space-completion-pair)}
.completion-answers dt{font-size:var(--text-completion-meta);color:var(--text-secondary)}
.completion-answers dd{margin:0;overflow-wrap:anywhere}
.completion-explanation{margin:var(--space-completion-gap) 0 0;font-size:var(--text-completion-body);color:var(--text-secondary)}
.completion-all{margin-top:var(--space-completion-row)}
.completion-all>summary{padding:var(--space-completion-tight) 0;font-size:var(--text-completion-body);color:var(--text-secondary);cursor:pointer}
.completion .stage-actions{margin-top:var(--space-completion-section)}
.stage-rail-note{margin:8px 0 0;font-size:var(--primitive-font-size-12px);color:var(--text-secondary)}

/* The ready card's own furniture ----------------------------------------- */
.ready-option-row{flex:1 1 100%}
/* A full-width row that still reads at a comfortable measure: the cap goes on
   the text, not on the flex item, or the next control wraps up beside it. */
.ready-hint{flex:1 1 100%;margin:2px 0 0;font-size:var(--primitive-font-size-12-5px);color:var(--text-secondary)}
.ready-hint>span{display:block;max-width:52em}
/* The long tail always sorts after the decisions it is the tail of. */
.ready-more{order:5}
.ready-note{margin:20px 0 0;font-size:var(--primitive-font-size-12px);color:var(--text-secondary);max-width:46em}
.ready-more{flex:1 1 100%;margin-top:4px}
.ready-more>summary{cursor:pointer;font-size:var(--primitive-font-size-12-5px);font-weight:650;color:var(--text-secondary);
  padding:var(--primitive-spacing-6px) 0;list-style:none;display:inline-flex;align-items:center;gap:var(--primitive-spacing-8px)}
.ready-more>summary::-webkit-details-marker{display:none}
.ready-more>summary::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .16s ease}
.ready-more[open]>summary::before{transform:rotate(45deg)}
.ready-more>summary:hover{color:var(--text-primary)}
.ready-more-row{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-14px) var(--primitive-spacing-26px);margin-top:14px}
.ready-more-row label{display:grid;gap:var(--primitive-spacing-6px);font-size:var(--primitive-font-size-12-5px);color:var(--text-secondary)}
.ready-more-row label>span{font-weight:650}
.ready-options .session-tool-chips{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-8px)}
.ready-option-wide .session-tool-chips{margin-top:2px}
.ready-options .mode-chip[disabled]{opacity:.42;cursor:not-allowed}

/* CALCULATION'S SCOPE BROWSER ---------------------------------------------
   Drug Mastery scopes to one of ~30 interchangeable weeks, so one select is
   honest there. A calculation lesson is not interchangeable with another, and
   there are 29 of them across 11 topics, each carrying its own mastery state.
   So the scope is browsed: topics first, each showing what it holds and how
   far in you are, opening to its own lessons only when you want one. */
.calc-scope{gap:var(--primitive-spacing-10px)}
/* Wide enough for the names the curriculum actually uses. At 232px these sat
   six to a row and spent most of each row on the count, the cells and the
   caret, leaving about 76px for the label -- so "Dose, Stock Strength &
   Measurable Volume" and "Pediatric Calculation Mathematics" both ellipsised
   away. A browser whose labels cannot be read is not a browser. */
.calc-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:var(--primitive-spacing-6px);width:100%;margin-top:2px}
.calc-topic{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;
  gap:var(--primitive-spacing-10px);width:100%;text-align:left;font:inherit;font-size:var(--primitive-font-size-13-5px);color:var(--text-primary);
  background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);
  padding:var(--primitive-spacing-9px) var(--primitive-spacing-11px);cursor:pointer;transition:border-color var(--theme-paint-duration,.14s),background var(--theme-paint-duration,.14s)}
.calc-topic:hover{border-color:var(--line-strong)}
.calc-topic.is-chosen{border-color:var(--action-primary-bg);background:var(--accent-soft)}
/* Wrapping, not ellipsis: a long name loses nothing, it takes a second line,
   and the grid keeps every row in a band the same height. */
.calc-topic-name{min-width:0;font-weight:600;text-wrap:balance}
.calc-topic-count{font-size:var(--primitive-font-size-12px);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.calc-topic-cells{display:flex;gap:var(--primitive-spacing-2px)}
.calc-topic-caret{width:6px;height:6px;border-right:1.5px solid var(--text-secondary);
  border-bottom:1.5px solid var(--text-secondary);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .16s ease}
.calc-topic.is-open .calc-topic-caret{transform:rotate(225deg) translate(-2px,-2px)}

/* One cell per lesson: the state ramp runs from an empty outline to a filled
   mark, so a topic's progress reads before any of its words do. */
.calc-cell{display:block;width:9px;height:9px;border-radius:var(--primitive-radius-2px);
  border:1px solid var(--line-strong);background:transparent}
.calc-cell.in-progress{background:linear-gradient(90deg,var(--action-primary-bg) 60%,transparent 60%);
  border-color:var(--action-primary-bg)}
.calc-cell.lesson-complete{background:var(--accent-soft);border-color:var(--action-primary-bg)}
.calc-cell.independent{background:var(--action-primary-bg);border-color:var(--action-primary-bg)}
.calc-cell.mastered{background:var(--action-primary-bg);border-color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--accent-soft)}

.calc-lesson-picks{display:flex;flex-direction:column;gap:var(--primitive-spacing-1px);width:100%;margin-top:2px;
  background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);overflow:hidden}
.calc-lesson-pick{display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:var(--primitive-spacing-14px);width:100%;text-align:left;font:inherit;font-size:var(--primitive-font-size-13-5px);color:var(--text-primary);
  background:var(--surface-panel);border:0;padding:var(--primitive-spacing-9px) var(--primitive-spacing-12px);cursor:pointer}
.calc-lesson-pick:hover{background:var(--surface-raised)}
.calc-lesson-pick.is-chosen{background:var(--accent-soft)}
.calc-lesson-all{font-weight:650}
.calc-lesson-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-lesson-ops{font-size:var(--primitive-font-size-12px);color:var(--text-secondary);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.calc-lesson-state{display:inline-flex;align-items:center;gap:var(--primitive-spacing-6px);font-size:var(--primitive-font-size-11-5px);
  color:var(--text-secondary);white-space:nowrap}
.calc-lesson-state i{width:8px;height:8px;border-radius:var(--primitive-radius-2px);flex:none;
  border:1px solid var(--line-strong)}
.calc-lesson-state.in-progress i{background:linear-gradient(90deg,var(--action-primary-bg) 60%,transparent 60%);border-color:var(--action-primary-bg)}
.calc-lesson-state.independent i{background:var(--action-primary-bg);border-color:var(--action-primary-bg)}
.calc-lesson-state.lesson-complete i{background:var(--accent-soft);border-color:var(--action-primary-bg)}
.calc-lesson-state.mastered i{background:var(--action-primary-bg);border-color:var(--text-primary)}

.chip-count{opacity:.62;font-weight:400;font-variant-numeric:tabular-nums}
.mode-chip.is-active .chip-count{opacity:.75}

/* The Start button says which session you are about to enter, not just that
   one will begin. */
.calc-go-detail{margin:10px 0 0;font-size:var(--primitive-font-size-12-5px);color:var(--text-secondary)}
.calc-go-detail b{color:var(--text-primary);font-weight:650}

.calc-coverage-grid{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-12px) var(--primitive-spacing-24px)}
.calc-coverage-topic{display:flex;flex-direction:column;gap:var(--primitive-spacing-5px)}
.calc-coverage-topic span{font-size:var(--primitive-font-size-11-5px);color:var(--text-secondary)}
.calc-coverage-cells{display:flex;gap:var(--primitive-spacing-3px)}
.calc-coverage-cells .calc-cell{width:13px;height:13px;border-radius:var(--primitive-radius-3px)}
.calc-key-row{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-6px) var(--primitive-spacing-16px);margin:14px 0 0;font-size:var(--primitive-font-size-12px);
  color:var(--text-secondary)}
.calc-key{display:inline-flex;align-items:center;gap:var(--primitive-spacing-6px)}
.calc-key i{width:9px;height:9px;border-radius:var(--primitive-radius-2px);border:1px solid var(--line-strong)}
.calc-key.independent i{background:var(--action-primary-bg);border-color:var(--action-primary-bg)}
.calc-key.in-progress i{background:linear-gradient(90deg,var(--action-primary-bg) 60%,transparent 60%);border-color:var(--action-primary-bg)}
@media (max-width:640px){
  .calc-topics{grid-template-columns:1fr}
  .calc-topic-cells{display:none}
}

/* A choice owns a region, and the region needs an identity to be redrawn on
   its own -- but .ready-options lays its children out as flex items, so the
   wrapper must not become one itself. */
.calc-slot{display:contents}

/* The evidence ledger beneath the card. */
.calc-evidence table{width:100%;border-collapse:collapse;margin-top:4px}
.calc-evidence th{text-align:left;font-size:var(--primitive-font-size-11px);font-weight:660;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-secondary);padding:0 var(--primitive-spacing-12px) var(--primitive-spacing-6px) 0;font-weight:650}
.calc-evidence td{padding:var(--primitive-spacing-7px) var(--primitive-spacing-12px) var(--primitive-spacing-7px) 0;font-size:var(--primitive-font-size-13px);vertical-align:middle;
  border-top:1px solid var(--border-subtle)}
.calc-evidence td:last-child{width:38%;padding-right:0}
.calc-evidence-count{font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
.calc-evidence-note{display:block;font-size:var(--primitive-font-size-11-5px);color:var(--text-secondary);margin-top:1px}
.calc-evidence .muted.small{margin-top:14px;font-size:var(--primitive-font-size-12px);max-width:56em}

/* An activity's own record, under the card rather than in front of it. */
.ready-aside{margin-top:30px}
.ready-aside-line{margin:0 0 14px;font-size:var(--primitive-font-size-13px);color:var(--text-secondary);display:flex;
  flex-wrap:wrap;gap:var(--primitive-spacing-4px) var(--primitive-spacing-10px)}
.ready-aside-line b{color:var(--text-primary)}
.ready-aside table{width:100%;border-collapse:collapse;font-size:var(--primitive-font-size-13px)}
.ready-aside th{text-align:left;font-size:var(--primitive-font-size-10-5px);letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:700;padding:0 0 var(--primitive-spacing-8px)}
.ready-aside td{padding:var(--primitive-spacing-9px) 0;border-top:1px solid var(--border-subtle);color:var(--text-primary)}
.ready-aside .muted.small{font-size:var(--primitive-font-size-12px);margin-top:10px}

/* The map's board sits on the stage, so its bays follow the stage's column. */
.activity-stage .dispatch-bays{margin-top:20px;max-width:640px}
.activity-stage .sr-matrix-wrap{margin-top:20px;overflow-x:auto}

@media (prefers-reduced-motion:reduce){
  .activity-stage,.stage-seg{transition:none}
  .activity-stage .stage-scene,.activity-stage .stage-scene.is-leaving{animation:none}
}
@media(max-width:560px){
  .stage-brow-count,.stage-brow-step{font-size:var(--primitive-font-size-10-5px)}
  /* A report's scope can be a long lecture title; on a phone it wraps under
     the brow, so it takes the whole row and reads from the left. */
  .completion .stage-brow-count{flex-basis:100%;margin-left:0;text-align:left}
}
/* Quiet header utilities --------------------------------------------------
   The theme switch, the account menu, and the landing Sign in action remain
   premium controls, but their resting shape
   comes from fill and spacing rather than a visible rim. Motion and elevation
   still answer hover/press; borders, bevels, and directional edge light do not. */
body>header button.account-menu-trigger.account-menu-trigger,
body.landing-environment>header button.landing-sign-in.landing-sign-in{
  --action-highlight-opacity:0;border-color:transparent;box-shadow:none
}
body.landing-environment>header button.landing-sign-in.landing-sign-in{
  --action-focus-ring:var(--header-focus)
}
/* The one exception: Sign in keeps the hairline it shares with the language
   control (see the landing header), because with the offer docked away its
   outline is what makes it read as a control rather than a label. No bevel
   and no directional light -- only the hairline. */
body.landing-environment>header button.landing-sign-in.landing-sign-in{
  border-color:var(--visual-landing-header-language-rest-border)
}
body>header button.account-menu-trigger.account-menu-trigger::before,
body.landing-environment>header button.landing-sign-in.landing-sign-in::before{display:none}
@media (hover:hover) and (pointer:fine){
  body>header button.account-menu-trigger.account-menu-trigger:hover:not(:disabled):not([aria-busy="true"]),
  body.landing-environment>header button.landing-sign-in.landing-sign-in:hover:not(:disabled):not([aria-busy="true"]){
    border-color:transparent;box-shadow:var(--visual-account-menu-trigger-account-menu-trigger-shadow-hover-disabled)
  }
}
body>header button.account-menu-trigger.account-menu-trigger:active:not(:disabled):not([aria-busy="true"]),
body.landing-environment>header button.landing-sign-in.landing-sign-in:active:not(:disabled):not([aria-busy="true"]){
  border-color:transparent;box-shadow:var(--visual-account-menu-trigger-account-menu-trigger-shadow-active-disabled)
}
/* Sign in shares the account trigger's hover lift and pressed depth, but it
   keeps the hairline it shares with the language control (see the landing
   header): its outline is what makes it read as a control, not a label. */
@media (hover:hover) and (pointer:fine){
  body.landing-environment>header button.landing-sign-in.landing-sign-in:hover:not(:disabled):not([aria-busy="true"]){
    border-color:color-mix(in srgb,var(--header-text) 21%,transparent)}
}
body.landing-environment>header button.landing-sign-in.landing-sign-in:active:not(:disabled):not([aria-busy="true"]){
  border-color:color-mix(in srgb,var(--header-text) 24%,transparent)}
/* The switch segments sit inside the groove, so every scrap of elevation
   belongs to the chip. A segment is a transparent window: the action model's
   hover treatment -- an inset white edge light plus a lift -- draws a bright
   arc cast by nothing and jogs the icon, which is exactly what it looked like
   before this block existed.

   These selectors carry the extra .theme-toggle class deliberately. The shared
   rules are wrapped in :is(), and :is() takes the specificity of its most
   specific argument -- label.ghost.library-file-label, at two classes -- so a
   plain doubled-class override loses to them. Anything overriding the action
   model from outside needs to clear that bar, not the bar the short selectors
   in the list suggest.

   The segments keep the parts of the model that are behaviour rather than
   material: focus ring, busy, disabled, reduced motion, forced colours. */
body>header .theme-toggle .theme-seg.theme-seg{
  --action-highlight-opacity:0;border-color:transparent;background:transparent;
  box-shadow:none;filter:none;transform:none;
  /* header :is(...) sets --action-focus-ring:var(--focus-ring), but the action
     model's own default sits on a higher-specificity :is() list and wins, so
     the ring resolves to near-black #152237 -- invisible on the navy header.
     A wordless two-target control cannot afford an invisible focus ring, so it
     is set here where the specificity actually holds. */
  --action-focus-ring:var(--focus-ring)
}
body>header .theme-toggle .theme-seg.theme-seg::before{display:none}
body>header .theme-toggle .theme-seg.theme-seg:hover:not(:disabled):not([aria-busy="true"]),
body>header .theme-toggle .theme-seg.theme-seg:active:not(:disabled):not([aria-busy="true"]),
body>header .theme-toggle .theme-seg.theme-seg[data-action-owned="true"],
body>header .theme-toggle .theme-seg.theme-seg[data-surface-open="true"]{
  border-color:transparent;background:transparent;box-shadow:none;filter:none;transform:none
}
body>header button.account-menu-trigger.account-menu-trigger[data-surface-open="true"]:not(:disabled):not([aria-busy="true"]){
  border-color:transparent;box-shadow:var(--visual-account-menu-trigger-account-menu-trigger-shadow-disabled)
}
.badge{display:inline-block;padding:var(--badge-padding-block) var(--badge-padding-inline);border-radius:var(--badge-radius);font-size:var(--badge-text-size);font-weight:600}
.badge.safe{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-edge)}
.badge.unsafe{background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-edge)}
.badge.uncertain{background:var(--neutral-bg);color:var(--neutral-fg);border-color:var(--neutral-edge)}
.badge.cat{background:var(--info-bg);color:var(--info-fg)}
.prompt{font-size:var(--primitive-font-size-34px);font-weight:680;letter-spacing:-.025em;text-align:center;margin:22px 0 6px}
.prompt.small{font-size:var(--primitive-font-size-22px)}
.prompt.small.conversion-practice-prompt{font-size:var(--text-conversion-practice-question)}
.conversion-practice-actions{margin-top:var(--space-conversion-practice-actions)}
.sub{color:var(--text-secondary);text-align:center;margin-bottom:18px}
.opts{display:grid;gap:var(--answer-choice-gap);max-width:520px;margin:0 auto}
/* On the stage the field starts where the subject starts. Centring itself in a
   520px column left the answers floating inboard of the question they answer;
   this is geometry only -- .opts stays outside the bounded-action model. */
.activity-stage .opts{margin:22px 0 0;max-width:620px}
.answer-elimination-row{position:relative;display:block}
.answer-elimination-row>.answer-elimination-choice{min-width:0;width:100%;margin:0}
.opts .answer-elimination-row>button.answer-elimination-choice,
.answer-elimination-row>label.answer-elimination-choice{padding-right:var(--primitive-spacing-58px)}
.answer-elimination-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:44px;height:44px;
  border:0;border-radius:var(--primitive-radius-9px);background:transparent;color:var(--text-secondary);
  cursor:pointer;transition:border-color var(--theme-paint-duration,.16s) ease,background var(--theme-paint-duration,.16s) ease,color var(--theme-paint-duration,.16s) ease,opacity .16s ease}
.answer-elimination-toggle:hover{background:color-mix(in srgb,var(--action-primary-bg) 10%,transparent);color:var(--text-primary)}
.answer-elimination-toggle:focus-visible{outline:2px solid var(--action-primary-bg);outline-offset:2px}
.answer-elimination-toggle[aria-disabled="true"]{cursor:not-allowed;opacity:.5}
[data-answer-elimination][data-answer-elimination-locked="true"] .answer-elimination-toggle{display:none}
.answer-elimination-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.answer-elimination-toggle .eye-slash{opacity:0;transition:opacity .16s ease}
.answer-elimination-row.is-eliminated>.answer-elimination-choice{opacity:.42;text-decoration:line-through;
  text-decoration-thickness:1.5px;filter:saturate(.25)}
.answer-elimination-row.is-eliminated>.answer-elimination-toggle{background:color-mix(in srgb,var(--surface-card) 82%,transparent);color:var(--text-secondary)}
.answer-elimination-row.is-eliminated>.answer-elimination-toggle .eye-slash{opacity:1}
.opts button{background:var(--surface-raised);border:1px solid var(--border-subtle);color:var(--text-primary);
  padding:var(--answer-choice-padding);border-radius:var(--answer-choice-radius);font-size:var(--answer-choice-text-size);cursor:pointer;text-align:left}
.opts button:hover{border-color:var(--action-primary-bg)}
.opts button.sel{border-color:var(--action-primary-bg);background:var(--surface-raised);box-shadow:none;transform:none}
.opts button.sel:after{content:"◉ Selected";display:block;margin-top:var(--answer-feedback-gap);color:var(--action-primary-bg-hover);font-size:var(--answer-feedback-size);font-weight:500}
.opts button.correct,.answer-correct{
  border-color:var(--border-subtle)!important;background:var(--surface-raised)!important;
  color:var(--text-primary)!important;box-shadow:none!important;border-bottom-color:var(--success-edge)!important
}
/* A marked answer is the result being shown, not a control at rest: it keeps
   full strength after the choices lock. */
.opts button:disabled:is(.correct,.wrong){opacity:1}
.opts button.wrong,.answer-wrong{
  border-color:var(--border-subtle)!important;background:var(--surface-raised)!important;
  color:var(--text-primary)!important;box-shadow:none!important;border-bottom-color:var(--answer-choice-incorrect-ink)!important;border-bottom-style:dashed!important
}
input.answer-correct,textarea.answer-correct,select.answer-correct,
input.answer-wrong,textarea.answer-wrong,select.answer-wrong{border-width:2px!important}
.answer-correct,.answer-wrong{transition:background-color var(--theme-paint-duration,.18s) ease,border-color var(--theme-paint-duration,.18s) ease,color var(--theme-paint-duration,.18s) ease,box-shadow var(--theme-paint-duration,.18s) ease}
.opts button.correct:after{content:"Correct";display:block;margin-top:var(--answer-feedback-gap);color:var(--success-fg);font-size:var(--answer-feedback-size);font-weight:500}
.opts button.wrong:after{content:"Not correct";display:block;margin-top:var(--answer-feedback-gap);color:var(--answer-choice-incorrect-ink);font-size:var(--answer-feedback-size);font-weight:500}
/* A trace is a one-time confirmation of a newly evaluated response. Static
   references and history share the resting treatment, never the motion. */
:root{
  --answer-feedback-gap:9px;--answer-feedback-size:12px;--answer-trace-weight:1.5px;--answer-trace-duration:800ms;
  --answer-trace-inset:14px;--answer-choice-incorrect-ink:var(--warning-fg);
  --answer-choice-correct-ink:var(--success-fg);--answer-choice-reference-ink:var(--info-fg);
  --answer-choice-mask:var(--text-primary);
}
@property --answer-trace-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.answer-option{position:relative;--answer-option-ink:var(--text-secondary)}
.answer-option[data-answer-state=correct]{--answer-option-ink:var(--answer-choice-correct-ink)}
.answer-option[data-answer-state=incorrect],.answer-option[data-answer-state=missed]{--answer-option-ink:var(--answer-choice-incorrect-ink)}
.answer-option[data-answer-state=reference]{--answer-option-ink:var(--answer-choice-reference-ink)}
.opts button.answer-option:after{content:none!important}
.answer-feedback{display:flex;align-items:baseline;gap:var(--answer-feedback-gap);margin-top:var(--answer-feedback-gap);color:var(--answer-option-ink);font-size:var(--answer-feedback-size);font-weight:500;line-height:1.4;text-decoration:none}
.answer-feedback:before{content:attr(data-answer-mark)}
.answer-feedback:after{content:attr(data-answer-label)}
.answer-trace{display:none;position:absolute;inset:-1px;padding:var(--answer-trace-weight);border-radius:inherit;pointer-events:none;
  background:conic-gradient(from -90deg,var(--answer-option-ink) 0deg,var(--answer-option-ink) var(--answer-trace-angle),transparent var(--answer-trace-angle));
  mask:linear-gradient(var(--answer-choice-mask) 0 0) content-box,linear-gradient(var(--answer-choice-mask) 0 0);mask-composite:exclude}
.answer-option[data-answer-animate=true][data-answer-state=correct]>.answer-trace{display:block;animation:answerTraceComplete var(--answer-trace-duration) linear both}
.answer-option[data-answer-animate=true][data-answer-state=incorrect]>.answer-trace{display:block;animation:answerTraceOpen var(--answer-trace-duration) ease-out both}
.opts button.answer-option:is(.correct,.wrong,.missed){border-color:transparent!important}
.opts button.answer-option:is(.correct,.wrong,.missed):before{content:"";position:absolute;left:var(--answer-trace-inset);right:var(--answer-trace-inset);bottom:0;border-bottom:var(--answer-trace-weight) solid var(--answer-option-ink)}
.opts button.answer-option.wrong:before{border-bottom-style:dashed}
.opts button.answer-option.missed:before{border-bottom-style:dotted}
.opts button.answer-option[data-answer-state=reference]{border-color:var(--border-subtle)!important;background:var(--surface-card)!important;font-weight:400}
.opts button.answer-option[data-answer-state=reference]:before{content:none}
.opts button.answer-option[data-answer-state=correct][data-answer-selected=true]{font-weight:600}
.opts button.answer-option:disabled,.opts.review-opts button:disabled{opacity:1}
.opts button.answer-option.left-out{opacity:1;background:var(--surface-raised)}
.answer-option[data-answer-review=true]>.answer-trace{display:none!important}
.assess-option.answer-option{flex-wrap:wrap}
.assess-option.answer-option>.answer-feedback{flex-basis:100%}
.assess-option:has(input:checked){border-color:var(--action-primary-bg);background:var(--surface-raised)}
.course-match-grid .row.answer-option{flex-wrap:wrap;color:var(--text-primary)!important}
.course-match-grid .row.answer-option>.answer-feedback{flex-basis:100%}
.course-match-grid .row.answer-option>label{color:var(--text-primary)}
@keyframes answerTraceComplete{0%{--answer-trace-angle:0deg;opacity:1}78%{--answer-trace-angle:360deg;opacity:1}100%{--answer-trace-angle:360deg;opacity:0}}
@keyframes answerTraceOpen{0%{--answer-trace-angle:0deg;opacity:1}65%{--answer-trace-angle:255deg;opacity:1}100%{--answer-trace-angle:255deg;opacity:0}}
@media(prefers-reduced-motion:reduce){.answer-trace{display:none!important}}
.order-options button{display:flex;align-items:center;gap:var(--primitive-spacing-12px)}
.order-options button.sel:after{display:none}
.order-choice-label{min-width:0;flex:1}
.order-pick-badge,.order-position-number{display:inline-grid;place-items:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;font-size:var(--primitive-font-size-12px);font-weight:800}
.order-pick-badge:empty{display:none}
.order-pick-badge{order:-1;background:var(--action-primary-bg);color:var(--surface-card)}
.order-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--primitive-spacing-18px);
  margin:14px 0;text-align:left}
.order-comparison section{min-width:0}
.order-comparison h3{margin:0 0 9px;font-size:var(--primitive-font-size-14px);letter-spacing:.02em}
.order-review-list,.order-correct-list{display:grid;gap:var(--primitive-spacing-7px);margin:0;padding:0;list-style:none}
.order-position,.order-correct-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;gap:var(--primitive-spacing-9px);padding:var(--primitive-spacing-10px) var(--primitive-spacing-11px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-9px);
  background:var(--surface-raised)}
.order-position{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"number label mark" "number note note"}
.order-position-number{grid-area:number;width:24px;height:24px;background:color-mix(in srgb,var(--text-secondary) 16%,transparent);color:var(--text-primary)}
.order-position-label{grid-area:label;font-weight:650}
.order-position-mark{grid-area:mark;font-weight:850}
.order-position-note{grid-area:note;font-size:var(--primitive-font-size-12px);color:var(--text-secondary)}
.order-position.is-correct{border-bottom-color:var(--success-fg);background:var(--surface-raised);color:var(--text-primary)}
.order-position.is-correct .order-position-number{background:var(--success-edge);color:var(--feedback-order-correct-marker-text)}
.order-position.is-correct .order-position-mark{color:var(--success-fg)}
.order-position.is-incorrect{border-bottom:1px dashed var(--answer-choice-incorrect-ink);background:var(--surface-raised);color:var(--text-primary)}
.order-position.is-incorrect .order-position-number{background:var(--surface-card);color:var(--answer-choice-incorrect-ink)}
.order-position.is-incorrect .order-position-mark{color:var(--answer-choice-incorrect-ink)}
.order-correct-list li{grid-template-columns:28px minmax(0,1fr);border-color:var(--border-subtle)}
.order-correct-list .order-position-number{grid-area:auto;background:var(--surface-card);color:var(--answer-choice-reference-ink)}
@media(max-width:700px){.order-comparison{grid-template-columns:1fr}}
.multi-help{max-width:520px;margin:0 auto 10px;padding:var(--primitive-spacing-9px) var(--primitive-spacing-12px);border-left:3px solid var(--action-primary-bg);
  border-radius:var(--primitive-radius-0-8px-8px-0);background:var(--accent-soft);color:var(--text-primary);font-size:var(--primitive-font-size-13px)}
.answerbox{max-width:520px;margin:0 auto;display:flex;gap:var(--primitive-spacing-8px)}
.result{max-width:560px;margin:14px auto;padding:var(--feedback-padding-block) var(--feedback-padding-inline);border-radius:var(--feedback-radius);font-size:var(--feedback-text-size)}
.result.good{background:var(--success-bg);border:1px solid var(--success-edge);color:var(--success-fg)}
.result.bad{background:var(--danger-bg);border:1px solid var(--danger-edge);color:var(--danger-fg)}
.result.close{background:var(--neutral-bg);border:1px solid var(--neutral-edge);color:var(--neutral-fg)}
.safety{max-width:560px;margin:10px auto;padding:var(--primitive-spacing-11px) var(--primitive-spacing-14px);border-radius:var(--primitive-radius-10px);
  background:var(--neutral-bg);border:1px solid var(--neutral-edge);color:var(--neutral-fg);font-size:var(--primitive-font-size-14px)}
.center{text-align:center}
.matchgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--match-option-gap);max-width:640px;margin:0 auto}
.matchcol{display:grid;align-content:start;gap:var(--match-option-gap)}
.matchcol:first-child button{--match-select-pull:-12px}
.matchcol:last-child button{--match-select-pull:12px}
.matchgrid button{background:var(--surface-raised);border:1px solid var(--border-subtle);color:var(--text-primary);
  padding:var(--match-option-padding);border-radius:var(--match-option-radius);cursor:pointer;font-size:var(--match-option-text-size);min-height:52px;position:relative;
  transition:transform .18s ease,border-color var(--theme-paint-duration,.18s) ease,background var(--theme-paint-duration,.18s) ease,box-shadow var(--theme-paint-duration,.18s) ease,opacity .28s ease}
.matchgrid button.sel{z-index:2;border-color:var(--action-primary-bg);background:var(--accent-soft);
  transform:translateX(var(--match-select-pull)) scale(1.025);
  box-shadow:0 0 0 3px rgba(var(--elev-tint),.2),0 9px 20px rgba(var(--elev-tint),.22);
  animation:matchSelectedSignal .72s ease-in-out infinite alternate}
/* A matched pair clicks together on the press springs (feel.js, §12): pulled
   toward each other, grown, its check stamped in. What stays here is light
   and the exit: the ring that flares on a verdict, and the fade that takes a
   finished pair off the board. None of the keyframes below moves anything. */
.matchgrid button.done{pointer-events:none;color:var(--text-primary);border-color:var(--success-edge);background:var(--surface-raised);
  animation:matchResolve 1.05s ease both}
.matchgrid button.reuse-hit{color:var(--text-primary);border-color:var(--success-edge);background:var(--surface-raised);animation:matchReuseLight .8s ease}
.matchgrid button.done:after{content:"";position:absolute;right:-7px;top:-9px;display:grid;place-items:center;
  width:25px;height:25px;border-radius:50%;background:var(--success-fg);border:2px solid var(--bg);
  -webkit-mask:var(--control-mask-check) center/58% no-repeat,linear-gradient(var(--text-primary) 0 0);-webkit-mask-composite:xor;
  mask:var(--control-mask-check) center/58% no-repeat exclude,linear-gradient(var(--text-primary) 0 0)}
.matchgrid button.reuse-hit:after{content:"";position:absolute;right:-7px;top:-9px;display:grid;place-items:center;width:25px;height:25px;
  border-radius:50%;background:var(--success-fg);border:2px solid var(--bg);
  -webkit-mask:var(--control-mask-check) center/58% no-repeat,linear-gradient(var(--text-primary) 0 0);-webkit-mask-composite:xor;
  mask:var(--control-mask-check) center/58% no-repeat exclude,linear-gradient(var(--text-primary) 0 0)}
/* The check stamps in on the badge spring: feel.js hands it over as --feel-badge. */
.matchgrid button:is(.done,.reuse-hit):after{scale:var(--feel-badge,1);rotate:calc((1 - var(--feel-badge,1))*-28deg)}
.matchgrid button.flash{color:var(--text-primary);border-color:var(--answer-choice-incorrect-ink);background:var(--surface-raised);animation:matchNopeLight .62s ease both}
.matchgrid button:is(.done,.reuse-hit,.flash):before{content:"";position:absolute;inset:-1px;padding:var(--answer-trace-weight);border-radius:inherit;pointer-events:none;
  --answer-option-ink:var(--success-fg);background:conic-gradient(from -90deg,var(--answer-option-ink) 0deg,var(--answer-option-ink) var(--answer-trace-angle),transparent var(--answer-trace-angle));
  mask:linear-gradient(var(--answer-choice-mask) 0 0) content-box,linear-gradient(var(--answer-choice-mask) 0 0);mask-composite:exclude;
  animation:answerTraceComplete var(--answer-trace-duration) linear both}
.matchgrid button.flash:before{--answer-option-ink:var(--answer-choice-incorrect-ink);animation-name:answerTraceOpen}
@media(prefers-reduced-motion:reduce){.matchgrid button:is(.done,.reuse-hit,.flash):before{display:none}}
#mBody{position:relative}
.match-pep{display:inline-flex;align-items:center;gap:var(--primitive-spacing-9px);padding:var(--primitive-spacing-7px) var(--primitive-spacing-12px);border:1px solid var(--line-strong);
  border-radius:var(--primitive-radius-999px);background:var(--accent-soft);animation:matchPepIn .38s cubic-bezier(.2,1.25,.35,1)}
.match-pep b{color:var(--success-fg)}.match-pep span{font-size:var(--primitive-font-size-12px)}
.match-round-win{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--primitive-spacing-12px);max-width:500px;margin:0 auto;
  padding:var(--primitive-spacing-13px) var(--primitive-spacing-15px);border:1px solid var(--line-strong);border-radius:var(--primitive-radius-13px);background:var(--accent-soft);
  overflow:hidden;animation:matchRoundIn .68s cubic-bezier(.2,1.25,.35,1)}
.match-round-win>span:nth-child(2){display:grid;text-align:left;line-height:1.25}.match-round-win small{color:var(--text-secondary)}
.match-round-win button{margin-left:auto}.match-win-mark{display:grid;place-items:center;flex:0 0 38px;height:38px;
  border-radius:50%;background:var(--action-primary-bg-hover);color:var(--match-win-marker-text);font-size:var(--primitive-font-size-21px);font-weight:800}
.match-win-stars{position:absolute;inset:0;pointer-events:none}.match-win-stars i{position:absolute;left:50%;top:50%;width:6px;height:6px;
  border-radius:50%;background:var(--visual-match-win-stars-surface);animation:matchWinStar 1s ease-out both;animation-delay:calc(var(--i)*55ms)}
/* The board's swell and the wave across its items are springs (feel.js
   celebrate, §12); the brightening is light, and stays here. */
.activity-success{animation:activitySuccess .72s ease-out}
.activity-success .row,.activity-success button,.activity-success select{border-color:var(--action-primary-bg)!important}
.latin{font-style:italic;color:var(--info-fg)}
.latin.conversion-practice-explanation{font-style:normal}
.muted{color:var(--text-secondary)} .right{margin-left:auto}
.row{display:flex;gap:var(--primitive-spacing-10px);align-items:center;flex-wrap:wrap;margin-bottom:14px}
.learncard{max-width:560px;margin:0 auto;text-align:center}
textarea{width:100%;min-height:150px;background:var(--surface-raised);color:var(--text-primary);
  border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);padding:var(--primitive-spacing-10px);font:13px monospace}
.pill{font-size:var(--primitive-font-size-12px);color:var(--text-secondary)}
a{color:var(--action-primary-bg)}
.rxcard{background:var(--surface-panel);color:var(--text-primary);border-radius:var(--primitive-radius-10px);padding:var(--primitive-spacing-18px) var(--primitive-spacing-22px);
  max-width:520px;margin:14px auto;font-family:Georgia,'Times New Roman',serif;
  border:var(--visual-rxcard-outline);box-shadow:var(--visual-rxcard-shadow);white-space:pre-line}
.rxcard .rxhead{font-weight:700;font-size:var(--primitive-font-size-17px);border-bottom:var(--visual-rxcard-rxhead-bottom-outline);
  padding-bottom:var(--primitive-spacing-6px);margin-bottom:8px}
.decode{max-width:560px;margin:12px auto;font-size:var(--primitive-font-size-14px)}
.decode td:first-child{font-family:Georgia,serif;font-weight:700;white-space:nowrap}
.decode .st-correct{color:var(--success-fg)} .decode .st-wrong{color:var(--danger-fg)}
.decode .st-missing{color:var(--warning-fg)} .decode .st-skipped{color:var(--text-secondary)}
.notice{font-size:var(--primitive-font-size-12px);color:var(--text-secondary);max-width:640px;margin:18px auto 0;
  text-align:center;border-top:1px solid var(--border-subtle);padding-top:var(--primitive-spacing-10px)}
textarea.rxans{min-height:70px;font:inherit;max-width:560px;display:block;
  margin:0 auto}
.setuprow{display:flex;gap:var(--primitive-spacing-10px);align-items:center;flex-wrap:wrap;margin:10px 0}
.setuprow label{min-width:150px;color:var(--text-secondary)}
.chips{display:flex;gap:var(--primitive-spacing-6px);flex-wrap:wrap}
.chips button{background:var(--surface-raised);border:1px solid var(--border-subtle);color:var(--text-primary);
  padding:var(--primitive-spacing-7px) var(--primitive-spacing-13px);border-radius:var(--primitive-radius-20px);cursor:pointer;font-size:var(--primitive-font-size-14px)}
.chips button.on{border-color:var(--action-primary-bg);background:var(--accent-soft)}
.support-note{font-size:var(--primitive-font-size-12px);color:var(--warning-fg);text-align:center}
.meter{height:8px;background:var(--surface-raised);border-radius:var(--primitive-radius-999px);overflow:hidden;min-width:90px;box-shadow:inset 0 0 0 1px var(--border-subtle)}
.meter span{display:block;height:100%;background:var(--action-primary-bg);border-radius:var(--primitive-radius-999px)}
.hero{padding:var(--primitive-spacing-4px) 0 var(--primitive-spacing-22px);background:transparent;border:0;border-bottom:1px solid var(--border-subtle);position:relative;overflow:visible}
.eyebrow{color:var(--action-primary-bg);text-transform:none;letter-spacing:0;font-weight:650;font-size:var(--primitive-font-size-13px)}
.hero h2{font-size:var(--primitive-font-size-clamp-22px-3vw-30px);line-height:1.2;margin:6px 0 8px;max-width:760px}
.hero p{max-width:680px;font-size:var(--primitive-font-size-15px);color:var(--text-secondary)}
/* Overview-only arrival bands. These are intentionally calmer and shallower
   than the cinematic exam heroes: one dark, desaturated identity color is
   enough to orient the user before the rest of the page returns to neutral. */
.study-area-identity{--area-hero-start:var(--study-area-identity-area-hero-start);--area-hero-end:var(--study-area-identity-area-hero-end);--area-hero-muted:var(--study-area-identity-area-hero-muted);--area-hero-shadow:var(--study-area-identity-area-hero-shadow);
  position:relative;overflow:hidden;margin:0 0 20px;padding:var(--primitive-spacing-22px) var(--primitive-spacing-24px) var(--primitive-spacing-24px);border:var(--visual-study-area-identity-outline);border-radius:var(--primitive-radius-16px);
  background:linear-gradient(135deg,var(--area-hero-start),var(--area-hero-end));color:var(--visual-study-area-identity-text);box-shadow:var(--elev-3)}
.study-area-identity::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--visual-study-area-identity-surface)}
.study-area-identity-abbr{--area-hero-start:var(--study-area-identity-abbr-area-hero-start);--area-hero-end:var(--study-area-identity-abbr-area-hero-end);--area-hero-muted:var(--study-area-identity-abbr-area-hero-muted);--area-hero-shadow:var(--study-area-identity-abbr-area-hero-shadow)}
.study-area-identity-rx{--area-hero-start:var(--study-area-identity-rx-area-hero-start);--area-hero-end:var(--study-area-identity-rx-area-hero-end);--area-hero-muted:var(--study-area-identity-rx-area-hero-muted);--area-hero-shadow:var(--study-area-identity-rx-area-hero-shadow)}
.study-area-identity-conv{--area-hero-start:var(--study-area-identity-conv-area-hero-start);--area-hero-end:var(--study-area-identity-conv-area-hero-end);--area-hero-muted:var(--study-area-identity-conv-area-hero-muted);--area-hero-shadow:var(--study-area-identity-conv-area-hero-shadow)}
.study-area-identity-calc{--area-hero-start:var(--study-area-identity-calc-area-hero-start);--area-hero-end:var(--study-area-identity-calc-area-hero-end);--area-hero-muted:var(--study-area-identity-calc-area-hero-muted);--area-hero-shadow:var(--study-area-identity-calc-area-hero-shadow)}
.study-area-identity-drugs{--area-hero-start:var(--study-area-identity-drugs-area-hero-start);--area-hero-end:var(--study-area-identity-drugs-area-hero-end);--area-hero-muted:var(--study-area-identity-drugs-area-hero-muted);--area-hero-shadow:var(--study-area-identity-drugs-area-hero-shadow)}
.study-area-identity-eyebrow{position:relative;z-index:1;display:block;color:var(--area-hero-muted);font-size:var(--primitive-font-size-11-5px);font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.study-area-identity h1{position:relative;z-index:1;max-width:820px;margin:5px 0 8px;color:var(--visual-study-area-identity-text-21f5da01);font-size:var(--primitive-font-size-clamp-25px-3-4vw-35px);font-weight:680;line-height:1.12;letter-spacing:-.025em}
.study-area-identity p{position:relative;z-index:1;max-width:780px;margin:0;color:var(--area-hero-muted);font-size:var(--primitive-font-size-14-5px);line-height:1.5}
.study-area-identity-actions{position:relative;z-index:1;display:flex;align-items:center;gap:var(--primitive-spacing-9px);flex-wrap:wrap;margin-top:17px}
.study-area-identity button.primary,.study-area-identity a.primary{background:var(--visual-study-area-identity-primary-surface);border-color:var(--visual-study-area-identity-primary-border);color:var(--visual-study-area-identity-primary-text);
  --action-contact-shadow:var(--study-area-identity-action-contact-shadow);--action-ambient-shadow:var(--study-area-identity-action-ambient-shadow)}
.study-area-identity button.primary:hover,.study-area-identity a.primary:hover{background:var(--visual-study-area-identity-primary-surface-hover);border-color:var(--visual-study-area-identity-primary-border-hover);color:var(--visual-study-area-identity-primary-text-hover)}
.study-area-identity button.ghost,.study-area-identity a.ghost{background:var(--visual-study-area-identity-ghost-surface);border-color:var(--visual-study-area-identity-ghost-border);color:var(--visual-study-area-identity-ghost-text)}
.study-area-identity button.ghost:hover,.study-area-identity a.ghost:hover{background:var(--visual-study-area-identity-ghost-surface-hover);border-color:var(--visual-study-area-identity-ghost-border-hover);color:var(--visual-study-area-identity-ghost-text-hover)}
.subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-14px)}
.aa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-14px)}
.aa-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--primitive-spacing-16px);align-items:start}
.aa-code{display:grid;place-items:center;min-height:68px;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-raised)}
.aa-code b{font-size:var(--primitive-font-size-28px);color:var(--action-primary-bg)}.aa-code span{font-weight:700;color:var(--text-primary)}
.aa-card h3,.aa-group h3{margin-top:0}.aa-card p:last-child,.aa-group p:last-child{margin-bottom:0}
.study-launcher-section>h2,.study-curriculum-section>h2{display:inline-flex;align-items:center;margin:0 0 10px;padding:var(--primitive-spacing-3px) var(--primitive-spacing-8px);border-radius:var(--primitive-radius-5px);background:var(--surface-raised);color:var(--text-secondary);font-size:var(--primitive-font-size-11px);font-weight:720;letter-spacing:.07em;text-transform:uppercase}
.study-launcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--primitive-spacing-14px)}
.study-curriculum-section{margin:24px -14px 0;padding:var(--primitive-spacing-14px);border-radius:var(--primitive-radius-14px);background:color-mix(in srgb,var(--action-primary-bg) 3%,var(--workspace))}
.study-curriculum-section>h2{background:color-mix(in srgb,var(--action-primary-bg) 8%,var(--surface-panel));color:color-mix(in srgb,var(--action-primary-bg) 76%,var(--text-primary))}
/* The card is an anchor so browser link behaviors work; it must therefore
   explicitly cancel default link color/underline and stay a flex block. */
main a.study-area-card,.study-area-card{position:relative;overflow:hidden;min-height:190px;
  background:var(--surface-panel);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);
  padding:var(--primitive-spacing-16px) var(--primitive-spacing-16px) var(--primitive-spacing-13px);display:flex;flex-direction:column;gap:var(--primitive-spacing-6px);cursor:pointer;
  color:var(--text-primary);text-decoration:none;
  box-shadow:var(--elev-1);
  --hold-progress:0;--hold-return-ms:180ms;
  transition:background var(--theme-paint-duration,.16s),border-color var(--theme-paint-duration,.16s),transform .16s cubic-bezier(.2,.75,.25,1),box-shadow var(--theme-paint-duration,.16s)}
/* Study areas share one interaction language. Category color is deliberately
   limited to a quiet hairline and icon marker; links, focus, hover, and depth
   belong to the PharmRecall brand rather than forming a rainbow matrix. */
.study-area-card,.curriculum-card{--study-shadow:var(--study-area-card-study-shadow)}
.study-area-card{--study-accent:var(--study-area-card-study-accent);--study-ink:var(--study-area-card-study-ink)}
.study-area-card::before,.curriculum-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--study-accent);opacity:var(--study-card-hairline-opacity);transition:opacity .16s}
.study-abbr{--study-accent:var(--study-domain-abbr-accent);--study-ink:var(--study-domain-abbr-ink)}
.study-rx{--study-accent:var(--study-domain-rx-accent);--study-ink:var(--study-domain-rx-ink)}
.study-conv{--study-accent:var(--study-domain-conv-accent);--study-ink:var(--study-domain-conv-ink)}
.study-calc{--study-accent:var(--study-domain-calc-accent);--study-ink:var(--study-domain-calc-ink)}
.study-drugs{--study-accent:var(--study-domain-drugs-accent);--study-ink:var(--study-domain-drugs-ink)}
.study-courses{--study-accent:var(--study-domain-courses-accent);--study-ink:var(--study-domain-courses-ink)}
.study-area-card,.study-area-card *{text-decoration:none}
.study-title{color:var(--text-primary);font-size:var(--primitive-font-size-16px);font-weight:650;margin:4px 0 0;transition:color var(--theme-paint-duration,.15s)}
.study-desc{color:var(--text-secondary);font-size:var(--primitive-font-size-13-5px);line-height:1.45}
.study-area-card::after,.curriculum-card::after,.catalog-entry-row.study-hold-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--elev-tint),.20),rgba(var(--elev-tint),.08));
  transform:scaleX(var(--hold-progress));transform-origin:left;transition:transform var(--hold-return-ms) cubic-bezier(.16,.72,.28,1)}
.study-area-card.holding::after,.curriculum-card.holding::after,.catalog-entry-row.study-hold-card.holding::after{transition:none}
.study-area-card.hold-complete::after,.curriculum-card.hold-complete::after,.catalog-entry-row.study-hold-card.hold-complete::after{background:linear-gradient(90deg,rgba(var(--elev-tint),.24),rgba(var(--elev-tint),.12))}
.study-area-card.holding .study-open i,.curriculum-card.holding .curriculum-action i,
.study-area-card.hold-complete .study-open i,.curriculum-card.hold-complete .curriculum-action i,
.catalog-entry-row.holding .catalog-entry-arrow,.catalog-entry-row.hold-complete .catalog-entry-arrow{transform:translateX(6px)}
.study-hold-card{touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
/* ============================================================================
   THE PRESS — the feel layer (feel.js; VISUAL_IDENTITY_CONSTITUTION §12)
   A press, a hold and a verdict are springs driven by the finger, painted
   into the independent scale / rotate / translate properties so they compose
   with every transform a surface already owns. Nothing here animates: feel.js
   writes the values each frame and clears them at rest. The only CSS the
   layer needs is depth for the tip, on the host's parent.

   The old flat presses this replaces -- `.study-area-card:active{scale(.995)}`,
   the `answer-settle` keyframe, and the map's `ls-settle` / `ls-shake` -- were
   one fixed curve each, the same whatever the finger did. They are gone so
   that a surface has exactly one thing moving it when it is touched.
   ============================================================================ */
:root{--feel-perspective:900px}
.feel-stage{perspective:var(--feel-perspective)}
/* Reduced motion: the switch still changes, the chip just does not travel.
   (The old one-button glyph animated a masked "bite" across a disc; that
   element is gone with the button it belonged to.) */
@media (prefers-reduced-motion:reduce){
  .theme-chip,.theme-glyph,.theme-glyph .disc,.theme-glyph .rays,
  .theme-glyph .rays line{transition:none}
}
@media (prefers-reduced-motion: reduce){
  .study-area-card,.study-area-card h2,.study-open i,.curriculum-card,.curriculum-action i,.study-mark{transition:none!important}
  .study-area-card:hover,.study-area-card:focus-visible,.curriculum-card:hover,.curriculum-card:focus-visible{transform:none}
  .study-area-card::after,.curriculum-card::after,.catalog-entry-row.study-hold-card::after{transform:none;opacity:var(--hold-progress);transition:none;background:rgba(var(--elev-tint),.13)}
}
.study-area-card:hover,.study-area-card:focus-visible{background:color-mix(in srgb,var(--action-primary-bg) var(--study-card-hover-strength),var(--surface-panel));border-color:color-mix(in srgb,var(--action-primary-bg) 38%,var(--border-subtle));
  transform:translateY(-2px);box-shadow:0 8px 22px var(--study-shadow)}
.study-area-card:hover::before,.study-area-card:focus-visible::before,.curriculum-card:hover::before,.curriculum-card:focus-visible::before{opacity:.82}
.study-area-card:focus-visible,.curriculum-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.study-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--primitive-radius-8px);
  background:color-mix(in srgb,var(--study-accent) 9%,var(--surface-panel));color:var(--study-ink);font-weight:700;font-size:var(--primitive-font-size-13px);transition:background var(--theme-paint-duration,.16s),transform .16s}
.study-area-card:hover .study-mark,.study-area-card:focus-visible .study-mark{background:color-mix(in srgb,var(--study-accent) 13%,var(--surface-panel));transform:scale(1.025)}
/* Study-area marks are objects on transparency, not badges. No tile, no
   background, no ring -- a container would read as the icon and reduce the
   drawing to a hole punched in it. The drawings carry their own colour, so
   they are identical in both themes, exactly like an app icon. */
.study-mark-icon{background:none;box-shadow:none;border-radius:0;
  width:38px;height:38px;overflow:visible}
.study-glyph{width:100%;height:100%;display:block;overflow:visible}
.study-area-card:hover .study-mark-icon,.study-area-card:focus-visible .study-mark-icon{
  background:none;transform:scale(1.07) rotate(-3deg)}
.catalog-entry-row .study-mark-icon,.curriculum-card .study-mark-icon{width:38px;height:38px}
.study-area-card,.study-area-card *{text-decoration:none}
.study-title{color:var(--text-primary);font-size:var(--primitive-font-size-16px);font-weight:650;margin:4px 0 0;transition:color var(--theme-paint-duration,.15s)}
.study-desc{color:var(--text-secondary);font-size:var(--primitive-font-size-13-5px);line-height:1.45}
.study-area-card h2,.study-area-card .study-title{font-size:var(--primitive-font-size-16px);margin:4px 0 0;transition:color var(--theme-paint-duration,.15s)}
.study-area-card p,.study-area-card .study-desc{color:var(--text-secondary);margin:0;font-size:var(--primitive-font-size-13-5px);line-height:1.45}
.study-card-foot{margin-top:auto;padding-top:var(--primitive-spacing-10px);display:flex;justify-content:space-between;align-items:center;width:100%}
.study-meta{font-size:var(--primitive-font-size-12px);font-weight:680;color:var(--text-secondary)}
.study-meta.due{border:1px solid transparent;border-radius:var(--primitive-radius-20px);padding:var(--primitive-spacing-2px) var(--primitive-spacing-9px);font-variant-numeric:tabular-nums}
.study-meta.due-low{color:var(--neutral-fg);background:var(--neutral-bg);border-color:var(--neutral-edge)}
.study-meta.due-medium{color:var(--warning-fg);background:var(--warning-bg);border-color:var(--warning-edge)}
.study-meta.due-high{color:var(--danger-fg);background:var(--danger-bg);border-color:var(--danger-edge)}
.study-meta.clear{color:var(--success-fg);background:color-mix(in srgb,var(--success-fg) 10%,var(--surface-panel));border-radius:var(--primitive-radius-20px);padding:var(--primitive-spacing-2px) var(--primitive-spacing-9px)}
.study-open{font-size:var(--primitive-font-size-13px);font-weight:650;color:var(--action-primary-bg)}
.study-open i{font-style:normal;display:inline-block;transition:transform .15s}
.study-area-card:hover .study-open i,.study-area-card:focus-visible .study-open i{transform:translateX(3px)}

.curriculum-card{position:relative;overflow:hidden;--hold-progress:0;--hold-return-ms:180ms;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--primitive-spacing-16px);width:100%;min-height:116px;padding:var(--primitive-spacing-19px) var(--primitive-spacing-20px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-panel);color:var(--text-primary);text-decoration:none;box-shadow:var(--elev-1);transition:background var(--theme-paint-duration,.16s),border-color var(--theme-paint-duration,.16s),transform .16s cubic-bezier(.2,.75,.25,1),box-shadow var(--theme-paint-duration,.16s)}
.curriculum-card *{text-decoration:none}.curriculum-card:hover,.curriculum-card:focus-visible{background:color-mix(in srgb,var(--action-primary-bg) var(--study-card-hover-strength),var(--surface-panel));border-color:color-mix(in srgb,var(--action-primary-bg) 38%,var(--border-subtle));transform:translateY(-2px);box-shadow:0 8px 22px var(--study-shadow)}
.curriculum-mark{width:42px;height:42px}.curriculum-copy{display:grid;min-width:0}.curriculum-institution{color:var(--text-secondary);font-size:var(--primitive-font-size-12-5px);font-weight:620}.curriculum-title{color:var(--text-primary);font-size:var(--primitive-font-size-18px);font-weight:680;line-height:1.35}.curriculum-summary{margin-top:3px;color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}.curriculum-action{color:var(--action-primary-bg);font-size:var(--primitive-font-size-13px);font-weight:650;white-space:nowrap}.curriculum-action i{display:inline-block;font-style:normal;transition:transform .15s}.curriculum-card:hover .curriculum-action i,.curriculum-card:focus-visible .curriculum-action i{transform:translateX(3px)}
@media(max-width:980px){.study-launcher{grid-template-columns:repeat(2,minmax(0,1fr))}}
.catalog-heading{max-width:760px;margin:0 0 24px}.catalog-eyebrow,.catalog-section-kicker{display:block;margin-bottom:5px;color:var(--action-primary-bg);font-size:var(--primitive-font-size-11px);font-weight:760;letter-spacing:.09em;text-transform:uppercase}.catalog-heading h1{margin:0 0 8px;font-size:var(--primitive-font-size-clamp-29px-4vw-42px);line-height:1.08;letter-spacing:-.035em}.catalog-heading p{margin:0;color:var(--text-secondary);font-size:var(--primitive-font-size-15px);line-height:1.55}.catalog-pinned,.catalog-library{margin-top:30px}.catalog-pinned>header,.catalog-library>header{display:flex;align-items:end;justify-content:space-between;gap:var(--space-catalog-section-header-gap);margin-bottom:13px;padding-bottom:var(--space-catalog-section-header-rule);border-bottom:1px solid var(--border-subtle)}.catalog-pinned>header h2,.catalog-library>header h2{margin:0;font-size:var(--text-catalog-section-heading);letter-spacing:-.015em}.catalog-pinned>header p,.catalog-library>header p{max-width:430px;margin:0;color:var(--text-secondary);font-size:var(--text-catalog-section-copy);text-align:right}.catalog-pinned-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-catalog-pinned-grid-gap)}.catalog-pinned-card{min-height:210px}.catalog-pinned-card.study-drug-mastery{--study-accent:var(--study-domain-drugs-accent);--study-ink:var(--study-domain-drugs-ink)}.catalog-pinned-card.study-calculation{--study-accent:var(--study-domain-calc-accent);--study-ink:var(--study-domain-calc-ink)}.catalog-entry-type{margin-top:3px;color:var(--text-secondary);font-size:var(--primitive-font-size-11px);font-weight:720;letter-spacing:.06em;text-transform:uppercase}.catalog-domain{margin-top:25px}.catalog-domain>header{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-18px);padding:0 var(--primitive-spacing-2px) var(--primitive-spacing-9px)}.catalog-domain>header h2{margin:0;font-size:var(--primitive-font-size-15px)}.catalog-domain>header span{color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.catalog-entry-list{border-top:1px solid var(--border-subtle)}main a.catalog-entry-row,.catalog-entry-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--primitive-spacing-14px);min-height:82px;padding:var(--primitive-spacing-13px) var(--primitive-spacing-8px);border-bottom:1px solid var(--border-subtle);color:var(--text-primary);text-decoration:none;transition:background var(--theme-paint-duration,.14s),padding .14s}.catalog-entry-row:hover,.catalog-entry-row:focus-visible{padding-left:var(--primitive-spacing-13px);background:color-mix(in srgb,var(--action-primary-bg) 3%,var(--surface-panel))}.catalog-entry-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.catalog-entry-copy{display:grid;gap:var(--primitive-spacing-2px);min-width:0}.catalog-entry-row .study-title{margin:0;font-size:var(--primitive-font-size-15px)}.catalog-entry-row .study-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--primitive-font-size-12-5px)}.catalog-entry-scope{margin-top:3px;color:var(--text-secondary);font-size:var(--primitive-font-size-11-5px);font-weight:650}.catalog-status{display:inline-flex;align-items:center;width:max-content;padding:var(--primitive-spacing-3px) var(--primitive-spacing-8px);border-radius:var(--primitive-radius-20px);background:var(--surface-raised);color:var(--text-secondary);font-size:var(--primitive-font-size-11-5px);font-weight:680;white-space:nowrap}.catalog-status-current{background:color-mix(in srgb,var(--success-fg) 10%,var(--surface-panel));color:var(--success-fg)}.catalog-status-in_progress{background:var(--progress-bg);color:var(--progress-fg)}.catalog-entry-arrow{color:var(--action-primary-bg);font-size:var(--primitive-font-size-17px);transition:transform .14s}.catalog-entry-row:hover .catalog-entry-arrow,.catalog-entry-row:focus-visible .catalog-entry-arrow{transform:translateX(3px)}.catalog-search-results>h2{margin:0 0 12px;font-size:var(--primitive-font-size-19px)}.catalog-empty{padding:var(--primitive-spacing-48px) var(--primitive-spacing-20px);text-align:center;border:1px dashed var(--border-subtle);border-radius:var(--primitive-radius-12px);background:var(--surface-panel)}.catalog-empty h2{margin:0 0 6px}.catalog-empty p{margin:0;color:var(--text-secondary)}.catalog-loading{min-height:420px;border-radius:var(--primitive-radius-12px);background:linear-gradient(100deg,var(--surface-raised) 25%,var(--surface-panel) 45%,var(--surface-raised) 65%);background-size:240% 100%;animation:catalogLoading 1.2s ease-in-out infinite}@keyframes catalogLoading{to{background-position:-150% 0}}/* The waiting state is the arrived page with its ink removed. Every measurement below is the measured geometry of the real thing -- 190px cards, 92px rows, a 38px mark, a 22px heading over a 12px gap -- so the entries land into the space already held for them and nothing on the page moves. A skeleton that merely suggests the shape makes the arrival a jump. The ink is the rule colour softened, not panel2: panel2 sits a hair away from the paper ground, and a skeleton painted in it reads as an empty page rather than a filling one. */.catalog-entries-loading{--learning-skeleton-gap:var(--primitive-spacing-14px);--learning-skeleton-heading-width:var(--primitive-spacing-150px);--learning-skeleton-heading-height:var(--primitive-spacing-22px);--learning-skeleton-heading-gap:var(--primitive-spacing-12px);--learning-skeleton-card-height:calc(var(--primitive-spacing-150px) + var(--primitive-spacing-40px));--learning-skeleton-card-radius:var(--primitive-radius-13px);--learning-skeleton-card-pad:var(--primitive-spacing-18px);--learning-skeleton-row-height:calc(var(--primitive-spacing-60px) + var(--primitive-spacing-32px));--learning-skeleton-row-pad-block:var(--primitive-spacing-13px);--learning-skeleton-row-pad-inline:var(--primitive-spacing-8px);--learning-skeleton-mark:var(--primitive-spacing-38px);--learning-skeleton-mark-radius:var(--primitive-radius-12px);--learning-skeleton-line-height:var(--primitive-spacing-11px);--learning-skeleton-line-radius:var(--primitive-radius-5px);--learning-skeleton-line-gap:var(--primitive-spacing-8px);--learning-skeleton-line-short:var(--primitive-spacing-150px);--learning-skeleton-line-long:calc(var(--primitive-spacing-150px) + var(--primitive-spacing-100px));--learning-skeleton-ink:color-mix(in srgb,var(--border-subtle) 62%,var(--surface-panel));display:grid;justify-items:start}.catalog-loading-heading{display:block;width:var(--learning-skeleton-heading-width);height:var(--learning-skeleton-heading-height);margin-bottom:var(--learning-skeleton-heading-gap);border-radius:var(--learning-skeleton-line-radius);background:var(--learning-skeleton-ink)}.catalog-entries-loading .catalog-pinned-grid,.catalog-loading-list{width:100%}.catalog-entries-loading .catalog-loading-card{display:grid;align-content:space-between;min-height:var(--learning-skeleton-card-height);padding:var(--learning-skeleton-card-pad);border:1px solid var(--border-subtle);border-radius:var(--learning-skeleton-card-radius);background:var(--surface-panel)}.catalog-loading-list{display:grid;margin-top:var(--learning-skeleton-gap);border-top:1px solid var(--border-subtle)}.catalog-loading-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--learning-skeleton-gap);min-height:var(--learning-skeleton-row-height);padding:var(--learning-skeleton-row-pad-block) var(--learning-skeleton-row-pad-inline);border-bottom:1px solid var(--border-subtle)}.catalog-loading-mark{display:block;width:var(--learning-skeleton-mark);height:var(--learning-skeleton-mark);border-radius:var(--learning-skeleton-mark-radius);background:var(--learning-skeleton-ink)}.catalog-loading-lines{display:grid;gap:var(--learning-skeleton-line-gap)}.catalog-loading-lines span{display:block;height:var(--learning-skeleton-line-height);width:var(--learning-skeleton-line-short);border-radius:var(--learning-skeleton-line-radius);background:var(--learning-skeleton-ink)}.catalog-loading-lines span:last-child{width:var(--learning-skeleton-line-long)}@media(max-width:760px){.catalog-entries-loading .catalog-pinned-grid{grid-template-columns:1fr}}@media(max-width:760px){.catalog-pinned-grid{grid-template-columns:1fr}.catalog-pinned>header,.catalog-library>header{display:block}.catalog-pinned>header p,.catalog-library>header p{margin-top:6px;text-align:left}.catalog-entry-row{grid-template-columns:auto minmax(0,1fr) auto}.catalog-entry-row>.catalog-status{grid-column:2}.catalog-entry-arrow{grid-column:3;grid-row:1/3}.catalog-entry-row .study-desc{white-space:normal}}@media(max-width:460px){.catalog-entry-row{gap:var(--primitive-spacing-10px);padding-left:var(--primitive-spacing-2px);padding-right:var(--primitive-spacing-2px)}.catalog-entry-row:hover,.catalog-entry-row:focus-visible{padding-left:var(--primitive-spacing-6px)}.catalog-entry-row .study-mark{width:31px;height:31px}.catalog-heading h1{font-size:var(--primitive-font-size-29px)}}
.catalog-entry-row.study-hold-card{position:relative;overflow:hidden;--hold-progress:0;--hold-return-ms:180ms}
.catalog-entry-row.study-hold-card>*{position:relative;z-index:1}
.catalog-entry-row.study-hold-card::after{z-index:0}
.catalog-entry-row>.catalog-status{grid-column:3;grid-row:1;transition:opacity .1s}
.catalog-entry-hold-label{grid-column:3;grid-row:1;justify-self:end;color:var(--action-primary-bg);font-size:var(--primitive-font-size-11-5px);font-weight:720;white-space:nowrap;opacity:0;transition:opacity .1s}
.catalog-entry-row>.catalog-entry-arrow{grid-column:4;grid-row:1}
.catalog-entry-row.holding .catalog-status,.catalog-entry-row.hold-complete .catalog-status,.catalog-entry-row.hold-returning .catalog-status{opacity:0}
.catalog-entry-row.holding .catalog-entry-hold-label,.catalog-entry-row.hold-complete .catalog-entry-hold-label,.catalog-entry-row.hold-returning .catalog-entry-hold-label{opacity:1}
@media(max-width:760px){.catalog-entry-row>.catalog-status,.catalog-entry-hold-label{grid-column:2;grid-row:2;justify-self:start}.catalog-entry-row>.catalog-entry-arrow{grid-column:3;grid-row:1/3}}
@media(prefers-reduced-motion:reduce){.catalog-loading{animation:none}.catalog-entry-row,.catalog-entry-arrow,.catalog-entry-hold-label,.catalog-status{transition:none}}
.learn-path-section,.learn-tools-section{margin-top:24px}.lesson-overview-list,.learning-tool-list{border-top:1px solid var(--border-subtle)}.lesson-overview-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--primitive-spacing-24px);align-items:center;padding:var(--primitive-spacing-18px) var(--primitive-spacing-6px);border-bottom:1px solid var(--border-subtle)}.lesson-overview-copy h3{margin:3px 0 4px;font-size:var(--primitive-font-size-18px)}.lesson-overview-copy p{margin:0;color:var(--text-secondary)}.lesson-overview-copy .calc-method-line{margin-top:7px;color:var(--text-primary);font-size:var(--primitive-font-size-12-5px)}.lesson-overview-action{display:grid;justify-items:end;gap:var(--primitive-spacing-7px);min-width:140px}.learning-tool-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-20px);min-height:74px;padding:var(--primitive-spacing-13px) var(--primitive-spacing-8px);border-bottom:1px solid var(--border-subtle);color:var(--text-primary);text-decoration:none}.learning-tool-list a:hover,.learning-tool-list a:focus-visible{background:color-mix(in srgb,var(--action-primary-bg) 3%,var(--surface-panel))}.learning-tool-list span{display:grid;gap:var(--primitive-spacing-3px)}.learning-tool-list small{color:var(--text-secondary);font-size:var(--primitive-font-size-12-5px)}.learning-tool-list i{color:var(--action-primary-bg);font-style:normal}@media(max-width:650px){.lesson-overview-row{grid-template-columns:1fr;gap:var(--primitive-spacing-12px)}.lesson-overview-action{grid-auto-flow:column;justify-content:space-between;justify-items:start;align-items:center}}
.abbreviation-lesson-list .lesson-overview-row{grid-template-columns:42px minmax(0,1fr) auto}.lesson-sequence{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border-subtle);border-radius:50%;color:var(--text-secondary);font:700 12px/1 var(--mono)}.abbr-teaching-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-14px);margin:20px 0 92px}.abbr-teaching-card{padding:var(--primitive-spacing-20px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-16px);background:var(--surface-panel);box-shadow:var(--shadow-sm)}.abbr-teaching-card header{display:flex;justify-content:space-between;gap:var(--primitive-spacing-14px);align-items:flex-start}.abbr-teaching-card h3{margin:4px 0 0;font-size:var(--primitive-font-size-27px)}.abbr-teaching-meaning{display:grid;gap:var(--primitive-spacing-4px);margin-top:22px}.abbr-teaching-meaning span{color:var(--text-secondary);font-size:var(--primitive-font-size-11px);font-weight:700;text-transform:uppercase;letter-spacing:.08em}.abbr-teaching-meaning strong{font-size:var(--primitive-font-size-17px)}.abbr-teaching-meaning small{color:var(--text-secondary)}.teaching-note{margin:15px 0 0;color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}@media(max-width:760px){.abbr-teaching-grid{grid-template-columns:1fr}.abbreviation-lesson-list .lesson-overview-row{grid-template-columns:34px minmax(0,1fr)}.abbreviation-lesson-list .lesson-overview-action{grid-column:2}}
.prescription-lesson-list .lesson-overview-row{grid-template-columns:42px minmax(0,1fr) auto}.content-notice{margin:22px 0;color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.rx-lesson-intro{display:flex;justify-content:space-between;gap:var(--primitive-spacing-24px);align-items:end;padding:var(--primitive-spacing-22px) 0;border-bottom:1px solid var(--border-subtle)}.rx-lesson-intro h2{max-width:760px;margin:6px 0 0}.rx-lesson-intro>p{max-width:280px;color:var(--text-secondary);text-align:right}.rx-anatomy{margin:28px 0}.rx-anatomy ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--primitive-spacing-12px);padding:0;list-style:none}.rx-anatomy li{display:flex;gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-16px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-14px);background:var(--surface-panel)}.rx-anatomy li>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--surface-raised);font-weight:800}.rx-anatomy p{margin:5px 0 0;color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}.rx-rule-panel{display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:var(--primitive-spacing-36px);padding:var(--primitive-spacing-26px);border-radius:var(--primitive-radius-18px);background:var(--ink);color:var(--paper)}.rx-rule-panel h2{margin:6px 0 0}.rx-rule-panel ul{display:grid;gap:var(--primitive-spacing-12px);margin:0;padding-left:var(--primitive-spacing-20px)}.rx-example-section{margin:32px 0}.rx-worked-example{margin:14px 0;padding:var(--primitive-spacing-22px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-18px);background:var(--surface-panel);box-shadow:var(--shadow-sm)}.rx-worked-example>header{display:flex;justify-content:space-between;color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.rx-worked-example pre{overflow:auto;margin:18px 0;padding:var(--primitive-spacing-16px);border-radius:var(--primitive-radius-12px);background:var(--surface-raised);color:var(--text-primary);font:700 15px/1.6 var(--mono);white-space:pre-wrap}.rx-component-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--primitive-spacing-8px)}.rx-component-track div{display:grid;gap:var(--primitive-spacing-4px);padding:var(--primitive-spacing-10px);border-left:2px solid var(--action-primary-bg);background:color-mix(in srgb,var(--action-primary-bg) 3%,transparent)}.rx-component-track span{color:var(--text-secondary);font-size:var(--primitive-font-size-10px);text-transform:uppercase;letter-spacing:.08em}.rx-component-track small{color:var(--text-secondary)}.rx-translation{margin-top:18px;padding-top:var(--primitive-spacing-16px);border-top:1px solid var(--border-subtle)}.rx-translation span{color:var(--text-secondary);font-size:var(--primitive-font-size-11px);font-weight:700;text-transform:uppercase}.rx-translation p{margin:5px 0 0;font-size:var(--primitive-font-size-18px)}.rx-contrast{margin:26px 0;padding:var(--primitive-spacing-22px);border:1px solid color-mix(in srgb,var(--warning-fg) 35%,var(--border-subtle));border-radius:var(--primitive-radius-16px)}.rx-contrast>div{display:flex;gap:var(--primitive-spacing-14px);align-items:center;font:800 20px/1 var(--mono)}.rx-contrast i{color:var(--warning-fg);font-style:normal}.rx-contrast p{margin:12px 0 0;color:var(--text-secondary)}.rx-changed-surface{margin-bottom:94px}@media(max-width:820px){.rx-anatomy ol{grid-template-columns:repeat(2,minmax(0,1fr))}.rx-rule-panel{grid-template-columns:1fr}.rx-lesson-intro{align-items:start;flex-direction:column}.rx-lesson-intro>p{text-align:left}.prescription-lesson-list .lesson-overview-row{grid-template-columns:34px minmax(0,1fr)}.prescription-lesson-list .lesson-overview-action{grid-column:2}}@media(max-width:520px){.rx-anatomy ol{grid-template-columns:1fr}}
.catalog-entry-row-shell{position:relative;border-bottom:1px solid var(--border-subtle)}.catalog-entry-row-shell .catalog-entry-row{border-bottom:0;padding-right:var(--primitive-spacing-112px)}.catalog-add-plan{position:absolute;right:44px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--action-primary-bg);font-weight:700;cursor:pointer}.catalog-add-plan:hover,.catalog-add-plan:focus-visible{text-decoration:underline}.study-plans-catalog{margin-top:34px;padding:var(--primitive-spacing-24px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-18px);background:linear-gradient(135deg,color-mix(in srgb,var(--action-primary-bg) 5%,var(--surface-panel)),var(--surface-panel))}.study-plans-catalog>header{position:static;padding:0;border:0;background:transparent;color:var(--text-primary)}.study-plans-catalog>p{max-width:720px;color:var(--text-secondary)}.study-plan-preview{display:grid;gap:var(--primitive-spacing-1px);margin:18px 0;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px);overflow:hidden}.study-plan-preview>a{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:var(--primitive-spacing-12px) var(--primitive-spacing-15px);background:var(--surface-panel);color:var(--text-primary);text-decoration:none}.study-plan-preview span,.study-plan-row span{display:grid;gap:var(--space-list-row-content-gap)}.study-plan-preview small,.study-plan-row small{color:var(--text-secondary)}.study-plan-empty{display:grid;gap:var(--primitive-spacing-3px);padding:var(--primitive-spacing-18px);background:var(--surface-panel)}.study-plan-empty span{color:var(--text-secondary)}.study-plan-list,.study-plan-items{display:grid;gap:var(--space-list-gap)}.study-plan-row{display:flex;justify-content:space-between;align-items:center;min-height:74px;padding:var(--space-list-row-block) var(--space-list-row-inline);border:1px solid var(--border-subtle);border-radius:var(--radius-list-row);background:var(--surface-panel);color:var(--text-primary);text-decoration:none}.study-plan-row:hover,.study-plan-row:focus-visible{border-color:var(--action-primary-bg)}.study-plan-truth{padding:var(--primitive-spacing-14px) var(--primitive-spacing-16px);border-left:3px solid var(--action-primary-bg);background:var(--accent-soft);color:var(--text-secondary)}.study-plan-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:var(--primitive-spacing-14px);align-items:center;padding:var(--primitive-spacing-16px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-14px);background:var(--surface-panel)}.study-plan-order{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--surface-raised);font-weight:800}.study-plan-item>a{display:grid;gap:var(--primitive-spacing-3px);color:var(--text-primary);text-decoration:none}.study-plan-item>a small{color:var(--text-secondary)}.study-plan-item-actions{display:flex;align-items:center;gap:var(--primitive-spacing-6px)}.danger-text{color:var(--danger-fg)}@media(max-width:650px){.catalog-entry-row-shell .catalog-entry-row{padding-right:var(--primitive-spacing-8px);padding-bottom:var(--primitive-spacing-48px)}.catalog-add-plan{left:66px;right:auto;top:auto;bottom:14px;transform:none}.study-plan-item{grid-template-columns:34px minmax(0,1fr)}.study-plan-item-actions{grid-column:2;justify-content:flex-start}}
.lesson-method{margin:18px 0 26px}.lesson-method>p:not(.eyebrow){max-width:820px;color:var(--text-secondary);line-height:1.55}.amino-lesson-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--primitive-spacing-10px);margin:20px 0 0;padding:0;list-style:none;counter-reset:none}.amino-lesson-stages li{display:grid;grid-template-columns:28px 1fr;gap:var(--primitive-spacing-9px);align-items:start;padding:var(--primitive-spacing-12px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--workspace)}.amino-lesson-stages li>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface-raised);color:var(--action-primary-bg);font-size:var(--primitive-font-size-12px);font-weight:760}.amino-lesson-stages p{margin:2px 0;color:var(--text-primary);font-size:var(--primitive-font-size-12-5px);line-height:1.45}.amino-teaching-group{margin:28px 0}.amino-teaching-group>h3{padding-bottom:var(--primitive-spacing-9px);border-bottom:1px solid var(--border-subtle);font-size:var(--primitive-font-size-17px);text-transform:capitalize}.lesson-completion-bar{position:sticky;bottom:14px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-20px);margin:30px 0 10px;padding:var(--primitive-spacing-13px) var(--primitive-spacing-15px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-11px);background:color-mix(in srgb,var(--surface-panel) 94%,transparent);box-shadow:var(--elev-3);backdrop-filter:blur(12px)}.lesson-completion-bar span{color:var(--text-secondary);font-size:var(--primitive-font-size-12-5px)}@media(max-width:760px){.amino-lesson-stages{grid-template-columns:1fr}.lesson-completion-bar{align-items:stretch;flex-direction:column}}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:var(--primitive-spacing-12px);margin:24px 2px 12px}
.section-title h2{font-size:var(--primitive-font-size-19px);margin:0}.section-title p{margin:0;color:var(--text-secondary)}
.mode-nav{display:flex;gap:var(--primitive-spacing-22px);flex-wrap:wrap;margin:0 0 26px;padding:0 0 var(--primitive-spacing-10px);background:var(--workspace);
  border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;position:sticky;top:64px;z-index:3}
.mode-nav button,.mode-nav a{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--text-secondary);padding:var(--primitive-spacing-9px) 0 var(--primitive-spacing-8px);border-radius:0;cursor:pointer;transition:color var(--theme-paint-duration,.12s);text-decoration:none;font-size:var(--primitive-font-size-15px);display:inline-block}
.mode-nav button.on,.mode-nav a.on{background:transparent;border-color:var(--action-primary-bg);color:var(--text-primary)}
/* Theme-aware hover: darkens in light mode, lightens in dark mode. */
.mode-nav button:hover:not(.on),.mode-nav a:hover:not(.on){color:var(--text-primary)}
/* A tab that names a study mode carries that mode's mark. Grey at rest, warmer
   on hover, full colour only for the mode you are in -- the activity switcher's
   ladder, one step quieter, so the tabs never out-shout the chips below them. */
.mode-nav :is(a,button):has(.mode-nav-mark){display:inline-flex;align-items:center;justify-content:center;gap:var(--space-mode-nav-mark-gap)}
.mode-nav-mark{display:inline-flex;flex:0 0 auto;width:var(--size-mode-nav-mark);height:var(--size-mode-nav-mark);
  filter:var(--artwork-muted-filter);opacity:var(--activity-mark-muted-opacity);transition:filter var(--action-rest-duration,150ms) ease,opacity var(--action-rest-duration,150ms) ease}
.mode-nav-mark .study-glyph{width:100%;height:100%;display:block}
.mode-nav :is(a,button):hover .mode-nav-mark,.mode-nav :is(a,button):focus-visible .mode-nav-mark{filter:var(--artwork-hover-filter);opacity:.82}
.mode-nav :is(a,button).on .mode-nav-mark{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.mode-nav-mark{transition:none}}
@media(max-width:760px){
  .mode-nav :is(a,button):has(.mode-nav-mark){gap:var(--space-mode-nav-mark-gap-compact)}
  .mode-nav-mark{width:var(--size-mode-nav-mark-compact);height:var(--size-mode-nav-mark-compact)}
}
.recommendation{display:flex;align-items:center;gap:var(--primitive-spacing-14px)}
.progress-list{display:grid}.progress-row{display:grid;grid-template-columns:minmax(190px,1fr) 2fr auto;gap:var(--primitive-spacing-18px);align-items:center;
  padding:var(--primitive-spacing-15px) 0;background:transparent;border-bottom:1px solid var(--border-subtle);border-radius:0}
.progress-row:last-child{border-bottom:0}
.progress-copy{display:grid;gap:var(--primitive-spacing-2px)}.progress-copy small{color:var(--text-secondary)}
.state-badge{display:inline-flex;align-items:center;width:max-content;padding:var(--primitive-spacing-2px) var(--primitive-spacing-7px);border-radius:var(--primitive-radius-4px);
  font-size:var(--primitive-font-size-11px);font-weight:650;text-transform:none;letter-spacing:0;border:1px solid currentColor}
.state-badge.not-started{background:var(--ladder-not-started-surface);color:var(--ladder-not-started-text)}.state-badge.introduced{background:var(--info-bg);color:var(--info-fg)}
.state-badge.in-progress{background:var(--progress-bg);color:var(--progress-fg)}.state-badge.reviewed{background:var(--progress-bg);color:var(--progress-fg)}
.state-badge.lesson-complete{background:var(--ladder-learned-surface);color:var(--ladder-learned-text)}
.state-badge.independent{background:var(--ladder-proven-surface);color:var(--ladder-proven-text)}.state-badge.mastered{background:var(--ladder-retained-surface);color:var(--ladder-retained-text)}
.class-progress{display:grid;gap:var(--primitive-spacing-3px);width:max-content;max-width:100%}.class-progress-detail{color:var(--text-secondary);font-size:var(--primitive-font-size-11px);line-height:1.3}
.status-in-progress,.status-reviewed{border-left:3px solid var(--progress-edge)!important;padding-left:var(--primitive-spacing-13px)!important}
.status-lesson-complete{border-left:3px solid var(--ladder-learned-ink)!important;padding-left:var(--primitive-spacing-13px)!important}
.status-independent{border-left:3px solid var(--ladder-proven-ink)!important;padding-left:var(--primitive-spacing-13px)!important}
.status-mastered{border-left:3px solid var(--ladder-retained-ink)!important;padding-left:var(--primitive-spacing-13px)!important}
.lesson-status-key{display:grid;gap:var(--primitive-spacing-7px);margin-top:16px;padding-top:var(--primitive-spacing-14px);border-top:1px solid var(--border-subtle);font-size:var(--primitive-font-size-12px);color:var(--text-secondary)}
.lesson-status-key span{display:flex;align-items:center;gap:var(--primitive-spacing-7px)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--visual-status-dot-surface)}
.status-dot.complete{background:var(--ladder-learned-ink)}.status-dot.active{background:var(--progress-edge)}.status-dot.proven{background:var(--ladder-proven-ink)}.status-dot.retained{background:var(--ladder-retained-ink)}
.checkline{display:flex;gap:var(--primitive-spacing-10px);align-items:center;padding:var(--primitive-spacing-9px) var(--primitive-spacing-12px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-raised)}
.checkline input{width:18px;height:18px;accent-color:var(--action-primary-bg)}
@keyframes pageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* ===================== The route hand-off ============================
   Two live pages, four clocks. See routeHandoffBegin() in shell.js for what
   was ported from Vetrra's depth profile and, more importantly, what was
   deliberately left behind: no global darkening (7.17 removed exactly that dip
   and 5.2 says the page is the bright thing), and no pre-glow, because the
   travelling light in the header already is one.

   THE SPOTLIGHT IS THE METRONOME. It travels on a 520ms transform and then
   ignites on arrival, blooming at about 410ms. The page belongs to the travel,
   not the bloom: at 350ms it has landed just before the light strikes, so the
   strike punctuates an arrival instead of competing with one. Everything below
   is inside that 350ms.

   FOUR CLOCKS, because a page's shape and a page's light are different events:

     leaving   geometry  350ms   from 0          accelerating away
     leaving   light     298ms   from 0          gone at 85% -- the old page is
                                                 finished before the new lands
     arriving  geometry  314ms   from 36ms       decelerating in
     arriving  light     245ms   from 105ms      held for the first 30%

   The arriving page is therefore ALREADY MOVING WHILE IT IS STILL INVISIBLE.
   That single disagreement is what makes the hand-off read as depth rather
   than as a cross-fade, and it is the one thing from Vetrra worth copying
   exactly. Geometry and opacity are separate animations because an element has
   one `transform`, which is the same constraint that makes the Lift three
   nodes deep (11.1). */
:root{
  --route-duration:350ms;
  /* A HAND-OFF MAY NOT SHOW TWO PAGES OF LEGIBLE TEXT AT ONCE.

     Getting the combined opacity under 1 was not enough. At the crossing the
     two pages sat at 0.474 EACH -- summing to 0.95, which passes that test and
     still puts two sets of headings on screen at readable strength for about
     75ms. Measured; the peak was exactly where the eye catches it.

     Two changes, and the second is the one that matters. The crossover is
     tightened so the outgoing page is essentially gone before the incoming one
     becomes readable. And the outgoing page BLURS as it leaves, which is the
     real answer: blurred text is not text. It stops being words and becomes
     soft shapes receding, so even the moment where both are technically
     present reads as one page over an out-of-focus field rather than as two
     pages competing. Vetrra grades its outgoing stage the same way. */
  /* THE CROSSING MAY NOT EMPTY THE FRAME, and the first attempt at this moved
     the wrong lever.

     The note below is right about the disease and wrong about the cure. It
     pulled the arriving page's delay in from 140ms to 120ms to stop the frame
     dipping -- but shifting WHEN the crossover starts does not widen it, and
     measured, the crossing still carried 0.24 of combined ink, against the
     ~0.2 it was trying to escape. Four hundredths. Filmed, 105-135ms still
     read as a nearly blank page.

     What widens the crossing is the OVERLAP, which is leave-light minus the
     delay. Measured across five settings, duration held at 350ms:

       leave light  delay  arrive light | faintest  below 0.5  legible overlap
             200ms  120ms        230ms  |     0.24       65ms             0ms
             218ms  100ms        250ms  |     0.57        0ms             0ms
             230ms   88ms        262ms  |     0.73        0ms             5ms
             252ms   66ms        284ms  |     0.89        0ms            35ms

     218/100/250 is taken. The frame never empties, and the double exposure
     this crossover exists to prevent still never happens -- zero milliseconds
     of two legible pages, the same as before. It is not free further up: past
     0.73 the pages start colliding, which is the failure this whole section
     is written against. And the crossing is still a CROSSING at 0.57, which a
     page move needs -- the dip is how it says the page you were reading is
     gone. That is exactly the distinction 11.7's facet does not get to make. */
  --route-leave-light:218ms;          /* gone by 62% of the duration */
  --route-leave-blur:6px;
  --route-arrive-geometry:314ms;
  --route-arrive-stagger:36ms;        /* geometry starts here */
  /* Pulled back in from 140ms. The blur, not the gap, is what stops the two
     pages colliding -- so the gap only has to be wide enough that the outgoing
     page is already out of focus, not wide enough that the frame empties. At
     140ms the crossing frame carried only about 0.2 of combined ink and read as
     a dip; at 120ms it keeps the picture alive and the legible-overlap window
     is still zero. */
  --route-arrive-light:250ms;
  --route-arrive-delay:100ms;         /* light starts here -- 0.29 */
  --route-leave-ease:cubic-bezier(.4,0,.72,.36);
  /* The leaving page's LIGHT gets its own curve, and it is not the one its
     geometry uses. Reusing the accelerating curve for both made the old page
     linger exactly through the overlap: measured at 220ms the two pages summed
     to 1.36 of opacity and both headings were legible at once -- a double
     exposure, which is the classic way a cross-fade announces itself. InOutCubic
     plunges through the middle instead, so the hand-off has a crossing rather
     than a plateau. Vetrra makes the same split (InCubic geometry, InOutCubic
     opacity) and flattening it was my mistake, not its. */
  --route-leave-light-ease:cubic-bezier(.645,.045,.355,1);
  /* OutCubic, as Vetrra uses. The first curve here was cubic-bezier(.16,.84,
     .32,1), which is so front-loaded that the page had travelled 90% of its
     distance by the time its light was allowed to start -- so it became
     visible already parked, and the whole point of splitting the two clocks
     was lost. Measured, not guessed: at 105ms it was at scale .997 of 1. With
     this curve it is a little past halfway when it appears, which is what
     "still arriving" has to look like. */
  --route-arrive-ease:cubic-bezier(.215,.61,.355,1);
  --route-shift:0px;
  /* Hierarchy uses direction while the workspace keeps its physical size.
     Entering and returning share the same travel, with opposite signs. */
  --route-lateral-rise:6px;--route-lateral-recede:-9px;
  --route-lateral-in-scale:.992;--route-lateral-out-scale:.972;
  --route-deeper-rise:6px;--route-deeper-recede:-6px;
  --route-deeper-in-scale:1;--route-deeper-out-scale:1;
  /* 11.7 THE FACET MOVE. Today and Calendar are one page at two framings, so
     flipping between them is not a journey and must not be drawn as one. The
     whole profile is defined by what it REFUSES: no travel, because nothing
     moved; almost no scale, because nothing changed place; a much shorter
     clock, because this is a control people will hit twenty times a session
     and a 350ms journey is insufferable by the fifth.
     Only depth is left, and it is tiny: widening pulls both surfaces back
     together, narrowing pushes both forward. The sign comes from script. */
  --route-facet-step:.008;
  --route-facet-sign:1;
  --route-facet-duration:210ms;
  --route-facet-blur:2.5px;
  --route-facet-arrive-geometry:195ms;
  --route-facet-arrive-stagger:18ms;
  /* A FACET MAY NOT BLANK. The page hand-off crosses through a deliberate dip
     -- 0.24 of combined ink at its crossing -- because the outgoing page has
     to be finished before the incoming one lands, and a dip is how you say
     "that page is gone". Nothing is gone here, so the same shape is wrong:
     measured at the first tuning this crossed at 0.31 and read as a flash on
     a control that is not supposed to be an event.
     Widening the overlap fixes it cheaply. Measured across five settings:

       leave light  delay  arrive light |  faintest ink   legible overlap
              105ms   58ms        130ms |          0.31            0ms
              120ms   34ms        120ms |          0.85           10ms
              132ms   26ms        140ms |          0.93           20ms

     0.85 is taken. The view never blanks, and the window where both are
     legible at once is ~10ms -- under a single frame, so the double exposure
     the page hand-off spends its whole crossover avoiding never arrives. */
  --route-facet-leave-light:120ms;
  --route-facet-arrive-light:120ms;
  --route-facet-arrive-delay:34ms;
  /* Stiffer than the page curves, and deliberately. The hand-off's arrival
     decelerates hard, which is right for something COMING TO REST somewhere
     new. A facet is a state change, not an arrival: it should settle, not
     land, so the tail is cut short. */
  --route-facet-arrive-ease:cubic-bezier(.36,.66,.4,1);
  --route-facet-leave-ease:cubic-bezier(.45,0,.75,.4);
  /* The page on its way out travels further than the one arriving. It is not
     going anywhere anyone needs to follow, and the extra distance is what
     separates the two in depth instead of stacking them at the same apparent
     height. Vetrra: outgoing 24px against incoming 20px. */
  --route-leave-reach:1.6;
  --route-rise:var(--route-lateral-rise);--route-recede:var(--route-lateral-recede);
  --route-in-scale:var(--route-lateral-in-scale);--route-out-scale:var(--route-lateral-out-scale);
}
main.route-lateral{
  --route-rise:var(--route-lateral-rise);--route-recede:var(--route-lateral-recede);
  --route-in-scale:var(--route-lateral-in-scale);--route-out-scale:var(--route-lateral-out-scale)}
main.route-deeper{
  --route-rise:var(--route-deeper-rise);--route-recede:var(--route-deeper-recede);
  --route-in-scale:var(--route-deeper-in-scale);--route-out-scale:var(--route-deeper-out-scale)}
/* Return mirrors entry's direction, distance and clocks at a stable scale. */
main.route-return{
  --route-rise:calc(var(--route-deeper-rise) * -1);--route-recede:calc(var(--route-deeper-recede) * -1);
  --route-in-scale:var(--route-deeper-in-scale);--route-out-scale:var(--route-deeper-out-scale)}
/* The facet overrides the hand-off's clocks as well as its geometry, because
   the difference is not a smaller version of the same move -- it is a
   different move. Both surfaces travel the SAME way here: widening, the
   arriving view comes from slightly large and the leaving one recedes, so the
   pair reads as one pull-back rather than as two pages passing. */
.route-visual-exit.route-facet,main.route-facet{
  --route-rise:0px;--route-recede:0px;
  --route-in-scale:calc(1 + var(--route-facet-sign) * var(--route-facet-step));
  --route-out-scale:calc(1 - var(--route-facet-sign) * var(--route-facet-step));
  --route-leave-reach:0;
  --route-duration:var(--route-facet-duration);
  --route-leave-light:var(--route-facet-leave-light);
  --route-leave-blur:var(--route-facet-blur);
  --route-arrive-geometry:var(--route-facet-arrive-geometry);
  --route-arrive-stagger:var(--route-facet-arrive-stagger);
  --route-arrive-light:var(--route-facet-arrive-light);
  --route-arrive-delay:var(--route-facet-arrive-delay);
  --route-arrive-ease:var(--route-facet-arrive-ease);
  --route-leave-ease:var(--route-facet-leave-ease)}
@keyframes route-leave-geometry{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(calc(var(--route-shift) * var(--route-leave-reach) * -1),var(--route-recede),0) scale(var(--route-out-scale))}}
/* Opacity and focus leave together: by the time the page is faint it is also
   no longer readable, so there is nothing for the incoming text to collide
   with. filter needs an explicit 0px to interpolate from. */
@keyframes route-leave-light{
  from{opacity:1;filter:blur(0px)}
  to{opacity:0;filter:blur(var(--route-leave-blur))}}
@keyframes route-arrive-geometry{
  from{transform:translate3d(var(--route-shift),var(--route-rise),0) scale(var(--route-in-scale))}
  to{transform:translate3d(0,0,0) scale(1)}}
@keyframes route-arrive-light{from{opacity:0}to{opacity:1}}
/* The leaving page is pinned by script to the rectangle it already held, so
   the two occupy one space without the document growing. It owes the layout
   nothing; it is on its way out. */
/* The blur has to stop at the column. A 6px blur spreads the page's opaque
   white roughly three radii past its own edge, and what is out there is the
   navy rail: the outgoing page threw a faint bright halo onto it, measured
   #07111e -> #121c28 at peak. clip-path is applied after filter, so clipping
   the left and right edges to the border box removes exactly the spill and
   nothing else -- inside the column the blurred edge composites back onto the
   floor, which is the same white, so the crop is invisible there. Top and
   bottom stay open: the spread is harmless against the header and the footer,
   and cropping them would put a hard line across the page. */
main.route-leaving{
  clip-path:inset(-64px 0);
  z-index:3;will-change:transform,opacity,filter;
  animation:route-leave-geometry var(--route-duration) var(--route-leave-ease) both,
    route-leave-light var(--route-leave-light) var(--route-leave-light-ease) both}
main.route-arriving{
  will-change:transform,opacity;
  animation:route-arrive-geometry var(--route-arrive-geometry) var(--route-arrive-ease)
      var(--route-arrive-stagger) both,
    route-arrive-light var(--route-arrive-light) var(--route-arrive-ease)
      var(--route-arrive-delay) both}
/* 11.6: motion is the point, so it degrades to nothing rather than to a fast
   version of itself. The script never starts a hand-off under reduced motion;
   this is the belt to that braces. */
/* THE HAND-OFF HAS TO SUPPRESS pageIn WHEN IT ENDS, OR THE PAGE REPLAYS.

   Dropping .route-arriving hands the element straight back to the base rule's
   `animation:pageIn`, which then starts from scratch on a page that has already
   arrived: it blanks to opacity 0 and rises through 7px a second time. That is
   the same blank-and-rise flicker arrivalTeardown() was written to stop, and it
   was found here by measuring the settled frame rather than by looking, because
   it lands at 300ms and is over in 180. */
/* Ready content is never transparent. Retain directional geometry without
   the pending skeleton's opacity channel, or the base pageIn entrance. */
main.route-content-ready:not(.route-leaving){animation:none;opacity:1}
main.route-arriving.route-content-ready{
  will-change:transform,opacity;
  animation:route-arrive-geometry var(--route-arrive-geometry) var(--route-arrive-ease)
    var(--route-arrive-stagger) both,
    route-ready-light var(--route-arrive-light) var(--route-arrive-ease) both}
@keyframes route-ready-light{from{opacity:.96}to{opacity:1}}
/* An inert, identity-free echo supplies the exit without keeping the previous
   route alive. Its ink starts blurred and faint, behind the readable arrival. */
.route-visual-exit{
  z-index:var(--layer-page);pointer-events:none;overflow:hidden;
  clip-path:inset(-64px 0);background:transparent;will-change:transform,opacity,filter;
  animation:route-leave-geometry var(--route-duration) var(--route-leave-ease) both,
    route-visual-leave-light var(--route-leave-light) var(--route-leave-light-ease) both}
@keyframes route-visual-leave-light{
  from{opacity:.18;filter:blur(var(--route-leave-blur))}
  to{opacity:0;filter:blur(var(--route-leave-blur))}}
/* Primary-page and facet content move over the stationary workspace floor.
   An opaque main sweeps over the side rails when shifted or scaled above 1,
   as Calendar and Library are on arrival. Switch the paint immediately;
   the normal background transition would leave a fading edge. */
body.workspace-environment main.route-arriving.route-lateral.route-content-ready,
body.workspace-environment main.route-arriving.route-facet.route-content-ready{
  background:transparent;transition-property:color}
main.route-settled{animation:none}
main.route-settled.route-content-ready{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .route-visual-exit{display:none}
  main.route-leaving,main.route-arriving,main.route-arriving.route-content-ready{animation:none;opacity:1;transform:none;filter:none}
}
@media (forced-colors:active){
  .route-visual-exit{display:none}
  main.route-leaving{display:none}
  main.route-arriving,main.route-arriving.route-content-ready{animation:none;opacity:1;transform:none}
}
@keyframes matchSelectedSignal{from{box-shadow:0 0 0 3px rgba(var(--elev-tint),.18),0 8px 18px rgba(var(--elev-tint),.18)}to{box-shadow:0 0 0 5px rgba(var(--elev-tint),.26),0 12px 24px rgba(var(--elev-tint),.28)}}
@keyframes matchResolve{0%{opacity:1}28%{box-shadow:var(--visual-global-shadow)}55%{opacity:1}100%{opacity:0;box-shadow:var(--visual-global-shadow-3b3816fe)}}
@keyframes matchReuseLight{45%{box-shadow:var(--visual-global-shadow-c8f640df)}100%{box-shadow:var(--visual-global-shadow-587fae53)}}
@keyframes matchNopeLight{0%,100%{box-shadow:var(--visual-global-shadow-bd377be5)}16%{box-shadow:var(--visual-global-shadow-186e37dc)}56%{box-shadow:var(--visual-global-shadow-7f0461d8)}}
@keyframes matchPepIn{from{opacity:0;transform:translateY(5px) scale(.92)}to{opacity:1;transform:none}}
@keyframes matchRoundIn{0%{opacity:0;transform:translateY(8px) scale(.94)}55%{opacity:1;transform:translateY(-2px) scale(1.025)}100%{transform:none}}
@keyframes matchWinStar{0%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--i)*72deg)) translateX(0) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--i)*72deg)) translateX(64px) scale(1.25)}}
@keyframes activitySuccess{45%{filter:brightness(1.12)}100%{filter:none}}
@keyframes requestPulse{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;scroll-behavior:auto!important}
  .matchgrid button.sel{animation:none!important}
  .matchgrid button.done{animation:none!important;opacity:.35}}
.auth-card{max-width:430px;margin:9vh auto;padding:var(--primitive-spacing-26px)}
.auth-card>p{margin:0 0 20px}
.auth-card .safety{max-width:none;margin:0 0 18px}
.auth-form{display:grid;gap:var(--primitive-spacing-16px)}
.auth-field{display:grid;gap:var(--primitive-spacing-6px)}
.auth-field label{color:var(--text-secondary);font-size:var(--primitive-font-size-13px);font-weight:600}
.auth-field input{display:block;width:100%;min-height:44px;background:var(--surface-raised);
  color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);
  font:inherit;outline:none}
.auth-field input:focus{border-color:var(--action-primary-bg);box-shadow:0 0 0 3px rgba(var(--elev-tint),.16)}
.password-input{position:relative}
.password-input input{padding-right:var(--primitive-spacing-52px)}
.password-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:grid;
  place-items:center;width:44px;min-height:40px;padding:0;border:0;border-radius:var(--primitive-radius-7px);
  background:transparent;color:var(--text-secondary);cursor:pointer}
.password-toggle:hover{background:var(--accent-soft);color:var(--action-primary-bg)}
.password-toggle:focus-visible{outline-offset:0}
.password-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.password-toggle .password-hide-mark{display:none}
.password-toggle[aria-pressed="true"] .password-hide-mark{display:block}
.auth-actions{display:flex;align-items:center;gap:var(--primitive-spacing-12px);margin-top:2px}
.auth-actions .muted{font-size:var(--primitive-font-size-13px);color:var(--danger-fg)}
.otp-input{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-auth-otp-gap);width:100%}
.otp-digit{width:100%;min-width:0;aspect-ratio:1/1.08;padding:0;border:1px solid var(--border-subtle);border-radius:var(--radius-auth-otp-digit);
  background:var(--surface-raised);color:var(--text-primary);text-align:center;font-size:var(--text-auth-otp-digit);font-weight:750;font-variant-numeric:tabular-nums;caret-color:var(--action-primary-bg)}
.otp-digit:focus{outline:0;border-color:var(--action-primary-bg);box-shadow:0 0 0 3px rgba(var(--elev-tint),.18)}
.recovery-verification-card{position:relative}
.recovery-verification-card h2{margin-top:var(--space-auth-recovery-heading-top)}
.recovery-verification-card .auth-actions .primary{width:100%;min-height:var(--size-action-large);border-radius:var(--radius-action-large)}
.auth-back-action,.auth-text-action{padding:0;border:0;background:transparent;color:var(--text-secondary);box-shadow:none;filter:none;transform:none;font:inherit}
.auth-back-action{display:inline-flex;align-items:center;gap:var(--space-auth-back-action-gap);font-size:var(--text-auth-back-action);font-weight:700}
.auth-back-action span{font-size:var(--text-auth-back-icon);line-height:1}
.auth-text-action{color:var(--action-primary-bg);font-weight:700;text-decoration:none}
.auth-back-action:hover,.auth-text-action:hover{background:transparent;color:var(--text-primary);box-shadow:none;filter:none;transform:none;text-decoration:underline}
.auth-back-action:active,.auth-text-action:active{background:transparent;box-shadow:none;filter:none;transform:none}
.auth-code-recovery{margin:var(--space-auth-code-recovery-offset);text-align:center;color:var(--text-secondary);font-size:var(--text-auth-code-recovery)}
.auth-signout-action{justify-self:center;margin-top:var(--space-auth-signout-action-top);color:var(--text-secondary);font-weight:600}
.provider-sign-in{display:grid;width:100%;gap:var(--primitive-spacing-10px)}
.provider-sign-in:empty{display:none}
button.provider-button{display:flex;width:100%;align-items:center;justify-content:center;background:var(--eclipse-ground);color:var(--header-control-text);border-color:var(--border-subtle);font-weight:600}
.button-content{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-action-icon-gap)}
.button-leading-icon{display:block;flex:0 0 auto;width:var(--size-action-leading-icon);height:var(--size-action-leading-icon)}
.auth-divider{display:flex;align-items:center;gap:var(--primitive-spacing-12px);color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--border-subtle);flex:1}
.status-verified,.status-pending{display:inline-block;margin-left:8px;padding:var(--primitive-spacing-2px) var(--primitive-spacing-7px);
  border-radius:var(--primitive-radius-999px);font-size:var(--primitive-font-size-11px);font-weight:700}
.status-verified{color:var(--success-fg);background:var(--success-bg)}
.status-pending{color:var(--progress-fg);background:var(--progress-bg)}
.table-scroll{overflow-x:auto}
.site-footer{max-width:var(--workspace-max-width);margin:0 auto;min-height:51px;padding:var(--primitive-spacing-15px) var(--primitive-spacing-28px) calc(var(--primitive-spacing-15px) + env(safe-area-inset-bottom));
  display:flex;justify-content:flex-end;gap:var(--primitive-spacing-20px);border-top:1px solid var(--border-subtle);background:var(--workspace);
  color:var(--text-secondary);font-size:var(--primitive-font-size-13px);transition:background-color var(--theme-paint-duration,.2s) ease,color var(--theme-paint-duration,.2s) ease}
.site-footer a{color:var(--text-secondary);text-decoration:none}.site-footer a:hover{text-decoration:underline;color:var(--action-primary-bg)}
/* THE SEAM BELONGS TO THE ENVIRONMENT, NOT TO THE PAGE (7.19).

   On wide canvases the hard gutter/workspace edge is gently diffused by a
   feather. It used to be painted as a background layer on main and the footer,
   which made it a property of the page: every route hand-off translated it
   +/-14px against its own 18px width, blurred it and cross-faded it, so the
   darkness at the seam appeared to arrive and leave with each page instead of
   standing still behind all of them. That is the failure 7.17 names for the
   floor, one layer out -- the element that carries the environment may never be
   the element that animates.

   It is now a fixed overlay on the body: one node-less layer, outside the
   document flow, outside every page animation, pinned to the column. It sits
   above main and below the header, which is where the old background layer
   effectively sat too -- the 18px band falls inside main's 28px padding, so no
   content has ever been under it at this width.

   The darker surface always feathers onto the lighter one: inward onto the
   light workspace in light mode, outward onto the pale rails in dark mode,
   where the overlay widens by one band on each side. Dark currently has no
   seam to soften -- rails and workspace are one surface under 5.2, so
   --canvas-feather is transparent there -- and the outward geometry is kept
   so that a future dark ground with rails again inherits it here, on the
   environment, rather than growing a second copy on the page.

   The auth and landing environments are excluded: main is transparent over the
   navy field there, so there is no seam to diffuse. */
@media(min-width:1241px){
  body:not(.auth-environment)::after{
    content:"";position:fixed;z-index:4;top:0;bottom:0;left:50%;
    width:var(--rail-feather-width);transform:translateX(-50%);
    pointer-events:none;
    background-image:var(--rail-feather-image);
    background-position:left,right;background-repeat:no-repeat;background-size:18px 100%}
}
.button-link{text-decoration:none}.legal-note{color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}
.legal-page{max-width:780px;margin:0 auto}.legal-page>header{padding-bottom:var(--primitive-spacing-18px);border-bottom:1px solid var(--border-subtle)}
.legal-page>header h1{margin:0}.legal-page>header p{margin:4px 0 0;color:var(--text-secondary)}
.legal-page h2{margin:30px 0 8px;font-size:var(--primitive-font-size-20px)}.legal-page p,.legal-page li{max-width:75ch}
.legal-page li+li{margin-top:7px}
.support-page{max-width:820px;margin:0 auto}
.support-page .page-heading{padding-bottom:0;border-bottom:0;margin-bottom:0}
.support-form{display:grid;gap:var(--primitive-spacing-18px);margin-top:26px}
.support-form label{display:grid;gap:var(--primitive-spacing-6px)}.support-form label>span{color:var(--text-secondary);font-size:var(--primitive-font-size-13px);font-weight:650}
.support-form input,.support-form select,.support-form textarea{width:100%;background:var(--surface-card);color:var(--text-primary);
  border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-6px);padding:var(--primitive-spacing-11px) var(--primitive-spacing-12px);font:inherit}
.support-form textarea{resize:vertical}.support-form input:focus,.support-form select:focus,.support-form textarea:focus{outline:3px solid color-mix(in srgb,var(--focus-ring) 35%,transparent);border-color:var(--action-primary-bg)}
/* Reading pages keep text sharp at the viewport edge. */
body.public-content-environment:has(.legal-page,.support-page) .workspace-edge-veil{display:none}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-14px)}
.support-request-list{display:grid;gap:var(--primitive-spacing-10px)}.support-request{padding:var(--primitive-spacing-12px) 0;border-top:1px solid var(--border-subtle)}
.support-request p{margin:7px 0;white-space:pre-wrap}.support-request small{color:var(--text-secondary);margin-right:10px}
.support-request.resolved{opacity:.65}
.course-answer-correction{margin:14px 0;padding:var(--primitive-spacing-12px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px);text-align:left;background:var(--surface-raised)}
.course-answer-correction p{margin:7px 0 0}
/* The menu button's three bars fold into the close cross: the outer two swing
   to the middle and cross, the middle one draws in to nothing. */
.menu-glyph{position:relative;display:block;width:18px;height:14px}
.menu-glyph i{position:absolute;left:0;right:0;height:2px;border-radius:var(--radius-menu-glyph-bar);background:currentColor;
  transition:top .22s cubic-bezier(.4,0,.2,1) .18s,transform .26s cubic-bezier(.4,0,.2,1),opacity .18s ease .12s}
.menu-glyph i:nth-child(1){top:0}
.menu-glyph i:nth-child(2){top:6px}
.menu-glyph i:nth-child(3){top:12px}
.mobile-menu[aria-expanded="true"] .menu-glyph i{transition:top .22s cubic-bezier(.4,0,.2,1),transform .34s cubic-bezier(.34,1.4,.64,1) .18s,opacity .12s ease}
.mobile-menu[aria-expanded="true"] .menu-glyph i:nth-child(1){top:6px;transform:rotate(45deg)}
.mobile-menu[aria-expanded="true"] .menu-glyph i:nth-child(2){opacity:0;transform:scaleX(.2)}
.mobile-menu[aria-expanded="true"] .menu-glyph i:nth-child(3){top:6px;transform:rotate(-45deg)}
/* The sheet-only rows exist in the header at every width; only the phone sheet shows them. */
body>header #nav :is(.mobile-sheet-theme,.mobile-sheet-actions,.mobile-sheet-account){display:none}
body:not(.workspace-environment) #mobileAccountAttentionCount{display:none}
/* THE PHONE MENU SHEET (toggleMobileNav in shell.js).
   The menu opens as a sheet hung from the header's lower edge and covering the
   page beneath it: full-width rows split by hairlines, the account actions on
   top when signed out, Dark mode at the foot when signed in. It is absolutely
   positioned, so opening it never changes the header's own height, and the
   page behind it does not scroll while it is open. */
@media(max-width:640px){
  html.mobile-nav-open{overflow:hidden}
  /* The sheet is the page's own ground, not the header's: white in light,
     where only the header and footer are navy; the header's navy in dark,
     where the page itself is dark too. */
  body>header{--mobile-sheet-bg:var(--mobile-sheet-surface);--mobile-sheet-text:var(--mobile-sheet-fg);--mobile-sheet-line:var(--mobile-sheet-edge);
    --mobile-sheet-knob:var(--surface-card)}
  html.workspace-dark body>header{--mobile-sheet-knob:var(--mobile-sheet-fg)}
  /* The mark is set on the sheet itself because the nav's gold lives there. */
  body>header #nav{--mobile-sheet-mark:var(--mobile-sheet-mark-theme)}
  body>header #nav{position:absolute;left:0;right:0;top:100%;z-index:1;
    height:calc(100dvh - var(--mobile-sheet-top,64px));margin:0;
    display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;
    padding:0 0 calc(var(--space-mobile-sheet-block) + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--mobile-sheet-bg);border-top:1px solid var(--mobile-sheet-line);
    /* THE SHEET UNROLLS FROM THE HEADER'S EDGE. A clip, not a slide: the
       sheet is already where it belongs and is revealed top to bottom, so it
       never passes over the header on its way in. Closing rolls it back up
       faster than it came -- leaving should never make you wait. */
    visibility:hidden;pointer-events:none;clip-path:inset(0 0 100% 0);
    transition:clip-path .3s cubic-bezier(.55,0,.75,.2) .06s,visibility 0s linear .36s}
  body>header.nav-open #nav{visibility:visible;pointer-events:auto;clip-path:inset(0 0 0 0);
    transition:clip-path .52s cubic-bezier(.16,1,.3,1),visibility 0s}
  /* Each row follows the edge down: it rises into place a beat after the one
     above it. On the way out they all let go at once, before the sheet rolls
     up, so nothing is caught mid-move by the closing edge. */
  body>header:not(.nav-open) #nav>*{opacity:0;transform:translateY(-10px);
    transition:opacity .12s ease,transform .12s ease}
  body>header.nav-open #nav>*{opacity:1;transform:none;
    transition:opacity .34s ease,transform .5s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(70ms + var(--sheet-step,0) * 45ms)}
  body>header #nav>:nth-child(2){--sheet-step:1}
  body>header #nav>:nth-child(3){--sheet-step:2}
  body>header #nav>:nth-child(4){--sheet-step:3}
  body>header #nav>:nth-child(5){--sheet-step:4}
  body>header #nav .app-nav-spotlight{display:none}
  body>header #nav>:is(a,button){display:flex;align-items:center;justify-content:space-between;width:100%;
    min-height:var(--size-mobile-sheet-row);margin:0;padding:0 var(--space-mobile-sheet-inline);
    border:0;border-bottom:1px solid var(--mobile-sheet-line);border-radius:0;background:transparent;box-shadow:none;
    color:var(--mobile-sheet-text);font-size:var(--text-mobile-sheet-row);font-weight:650;text-align:left;text-shadow:none;transform:none}
  body>header #nav>:is(a,button):active{background:var(--mobile-sheet-line)}
  body>header #nav>:is(a,button):focus-visible{outline:2px solid var(--header-focus,var(--focus-ring));outline-offset:-4px}
  /* WHERE YOU GO. The three destinations keep their size -- they are the app.
     The current one is marked on the edge of its row, because the list is a
     tower: desktop's destinations stand side by side, so its light lies
     beneath them; stacked, the mark stands beside them. A horizontal
     filament under the word was drawn and rejected -- it read as an
     underline on one floor of the tower. What the phone borrows from desktop
     is only the light's quality: a bright core, in dark mode a faint wash
     off the edge, and the moment it comes on as the sheet opens. */
  body>header #nav{--mobile-sheet-top-edge:transparent;--mobile-sheet-mark-core:var(--mobile-sheet-mark);--mobile-sheet-mark-glow:none;--mobile-sheet-mark-text-glow:none;
    --mobile-sheet-wash:color-mix(in srgb,var(--mobile-sheet-mark) 6%,transparent)}
  html.workspace-dark body>header #nav{
    --mobile-sheet-mark-core:linear-gradient(180deg,var(--nav-spotlight-edge),var(--nav-spotlight-highlight) 50%,var(--nav-spotlight-edge));
    --mobile-sheet-mark-glow:var(--visual-app-nav-spotlight-filament-shadow);
    --mobile-sheet-mark-text-glow:var(--visual-app-nav-action-active-text-shadow);
    --mobile-sheet-top-edge:var(--mobile-sheet-line);
    --mobile-sheet-wash:color-mix(in srgb,var(--nav-spotlight-source) 11%,transparent)}
  body>header #nav :is(.app-nav-action,.mobile-sheet-primary a){position:relative;font-weight:600}
  body>header #nav .app-nav-action.active{font-weight:750;text-shadow:var(--mobile-sheet-mark-text-glow)}
  body>header #nav .app-nav-action.active::after{content:"";position:absolute;left:0;top:50%;width:4px;height:24px;margin-top:-12px;
    border-radius:0 var(--radius-mobile-sheet-indicator) var(--radius-mobile-sheet-indicator) 0;
    background:var(--mobile-sheet-mark-core);box-shadow:var(--mobile-sheet-mark-glow);transform-origin:0 50%}
  body>header #nav .app-nav-action.active::before{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--size-mobile-sheet-wash);
    background:radial-gradient(ellipse 100% 46% at 0 50%,var(--mobile-sheet-wash),transparent);pointer-events:none}
  body>header.nav-open #nav .app-nav-action.active::after{animation:mobile-sheet-mark-on .46s cubic-bezier(.16,1,.3,1) .16s both}
  @keyframes mobile-sheet-mark-on{0%{opacity:.3;transform:scaleY(.3)}60%{opacity:1;transform:scaleY(1.08)}100%{opacity:1;transform:none}}
  body.workspace-environment>header #account{display:none}
  body.workspace-environment>header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand menu"}
  body.workspace-environment>header #nav>.app-nav-action{border-bottom:0}
  /* On the settings page the header's current destination is Settings, so the
     sheet draws the three destinations from its own copy instead. */
  body>header #nav:has([data-nav-destination="settings"])>[data-nav-destination="settings"]{display:none}
  body>header #nav:has([data-nav-destination="settings"])>.mobile-sheet-primary{display:grid;order:0}
  body>header #nav .mobile-sheet-primary a{display:flex;align-items:center;min-height:var(--size-mobile-sheet-row);
    padding:0 var(--space-mobile-sheet-inline);color:var(--mobile-sheet-text);font-size:var(--text-mobile-sheet-row);text-decoration:none}

  /* THE SIGNED-IN SHEET RISES FROM THE FOOT OF THE SCREEN.
     It used to unroll from the header and cover the whole page, which put
     the three destinations at the top edge -- the hardest reach on a phone
     -- left the lower half blank, and made the menu feel like a page of its
     own. Now it is a sheet the height of its contents, standing on the
     bottom edge, with the page still there behind it under a scrim: the
     destinations land where the thumb already is, nothing is empty, and you
     can see where you are while you choose where to go. The signed-out
     landing sheet keeps the old shape; nothing here reaches it. */
  body.workspace-environment>header #nav{top:auto;bottom:calc(var(--mobile-sheet-top,64px) - 100dvh);height:auto;
    max-height:calc(100dvh - var(--mobile-sheet-top,64px) - var(--space-mobile-sheet-reveal));
    padding:0 0 calc(var(--space-mobile-sheet-group) + env(safe-area-inset-bottom));
    border-top:0;border-radius:var(--radius-mobile-sheet-top) var(--radius-mobile-sheet-top) 0 0;
    box-shadow:0 -10px 30px rgba(var(--elev-shade),.2);clip-path:none;transform:translateY(100%);
    /* LEAVING. The sheet moves from the first frame and glides off: the
       iOS sheet curve, front-loaded. An ease-in was tried and measured --
       on a docked sheet only ~150px tall it sat almost still for 180ms and
       then dropped out in the last two frames, which reads as vanishing,
       not leaving. will-change keeps the sheet on its own compositor layer
       at all times, so the exit runs off the main thread: the touch that
       closes a docked sheet usually also opens something, and on iOS Safari
       an exit that had to wait for that page's render was over before it
       was first painted -- the "random" exits that just disappeared. */
    will-change:transform;
    transition:transform .42s cubic-bezier(.32,.72,0,1),visibility 0s linear .42s}
  body.workspace-environment>header.nav-open #nav{clip-path:none;transform:none;
    transition:transform .5s cubic-bezier(.16,1,.3,1),visibility 0s}
  /* DOCKED. After a choice the destinations fold away -- the rows shrink to
     nothing in place, so the sheet's top edge comes down to meet what is
     left -- and the page you chose comes out from under the scrim. Nothing
     is rearranged; swiping up unfolds the same rows. Two numbers drive it,
     and the drag in shell.js writes them directly so the picture follows the
     finger: --mobile-sheet-open (1 full, 0 docked) is how far the
     destinations are unfolded and how dark the scrim is; --mobile-sheet-fade
     dims the scrim as the sheet is carried down. Docked, the page is live:
     it scrolls, and the first touch on it closes the sheet and still does
     what it touched. */
  body.workspace-environment>header{--mobile-sheet-open:1;--mobile-sheet-fade:1}
  body.workspace-environment>header.nav-docked{--mobile-sheet-open:0}
  /* Touch ownership must be set before pointerdown: otherwise the browser
     cancels the pointer stream for native scrolling before JS can expand. */
  body.workspace-environment>header.nav-docked #nav{touch-action:none}
  html.mobile-nav-open.mobile-nav-docked{overflow:visible}
  body.workspace-environment>header.nav-docked::after{pointer-events:none}
  /* The fold belongs to the sheet's state, not to whether it is still open:
     when a docked sheet is closed by a touch on the page, its rows must stay
     folded while it leaves. Scoped to .nav-open, they sprang back to full
     height the instant closing began, and the sheet visibly rose by three
     rows before it slid away. */
  body.workspace-environment>header :is(#nav>.app-nav-action,#nav .mobile-sheet-primary a){
    height:calc(var(--size-mobile-sheet-row) * var(--mobile-sheet-open));min-height:0;overflow:hidden}
  body.workspace-environment>header.nav-open :is(#nav>.app-nav-action,#nav .mobile-sheet-primary a){
    /* The words leave in the first part of the fold and come back in the
       last part of an unfold, so a row is never seen with its name clipped
       or crushed: folding, the names fade and then the space closes;
       unfolding, the space opens and then the names arrive. A word anchored
       to its row's top was tried -- mid-fold every row showed only its
       empty padding. */
    opacity:clamp(0,(var(--mobile-sheet-open) - .55) / .45,1);
    transition:height .44s cubic-bezier(.16,1,.3,1),opacity .34s ease calc(70ms + var(--sheet-step,0) * 45ms),
      transform .5s cubic-bezier(.16,1,.3,1) calc(70ms + var(--sheet-step,0) * 45ms),visibility 0s}
  body.workspace-environment>header.nav-docked:not(.is-dragging) :is(#nav>.app-nav-action,#nav .mobile-sheet-primary a){visibility:hidden;
    /* Folding, the names are gone before their rows have closed much: the
       fade is quick and the closing waits a beat for it. */
    transition:height .4s cubic-bezier(.16,1,.3,1) .07s,opacity .1s linear,visibility 0s linear .47s}
  body.workspace-environment>header.is-dragging :is(#nav,#nav>*,#nav .mobile-sheet-primary a),
  body.workspace-environment>header.is-dragging::after{transition:none!important}
  /* On near-black the sheet's edge is drawn with light, not with shadow
     (4.9): a dark sheet over a dimmed dark page otherwise has no top. */
  body.workspace-environment>header #nav{border-top:1px solid var(--mobile-sheet-top-edge)}
  /* Leaving, the contents ride down with the sheet. They used to let go at
     once (right for the old sheet that rolled up into the header), which here
     left an empty panel sliding away; they reset only once it has gone. */
  body.workspace-environment>header:not(.nav-open) #nav>*{transform:translateY(12px);
    transition:opacity 0s linear .44s,transform 0s linear .44s}
  body.workspace-environment>header::after{content:"";position:absolute;z-index:0;left:0;right:0;top:100%;
    height:calc(100dvh - var(--mobile-sheet-top,64px));background:rgba(var(--elev-shade),.42);
    opacity:0;visibility:hidden;transition:opacity .34s ease,visibility 0s linear .34s}
  body.workspace-environment>header.nav-open::after{opacity:calc(var(--mobile-sheet-open) * var(--mobile-sheet-fade));visibility:visible;
    transition:opacity .36s ease,visibility 0s}
  /* The handle is real: drag it down and the sheet follows and lets go
     (shell.js). A handle that does nothing would be a promise the sheet
     does not keep. */
  body.workspace-environment>header #nav .mobile-sheet-grabber{display:flex;justify-content:center;order:-3;flex:0 0 auto;
    height:var(--size-mobile-sheet-grabber);padding-top:var(--space-mobile-sheet-group);touch-action:none;cursor:grab;--sheet-step:0}
  body.workspace-environment>header #nav .mobile-sheet-grabber::before{content:"";width:36px;height:5px;
    border-radius:var(--radius-mobile-sheet-switch);background:color-mix(in srgb,var(--mobile-sheet-text) 18%,transparent)}
  /* The open menu's own marks are inside it; the button that closes it does
     not also carry a count. */
  body>header.nav-open #mobileAccountAttentionCount{opacity:0}

  /* THE STRIP: What's new and the Appearance switch, one compact row above
     the destinations. The switch carries no words -- sun and moon name
     themselves. There is no study pet on a phone (study-companion.js). */
  body.workspace-environment>header #nav .mobile-sheet-strip{display:flex;align-items:center;gap:var(--space-mobile-sheet-strip-gap);
    order:-2;min-height:var(--size-mobile-sheet-utility-row);padding:0 var(--space-mobile-sheet-trailing) 0 var(--space-mobile-sheet-inline);--sheet-step:1}
  body>header #nav .mobile-sheet-news{display:inline-flex;align-items:center;gap:var(--space-mobile-sheet-glyph);flex:1 1 auto;min-width:0;
    min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--mobile-sheet-text);
    font-size:var(--text-mobile-sheet-utility);font-weight:500;white-space:nowrap;text-align:left;text-shadow:none;transform:none;
    -webkit-tap-highlight-color:transparent}
  body>header #nav .mobile-sheet-news .account-menu-glyph{width:var(--size-mobile-sheet-glyph);height:var(--size-mobile-sheet-glyph);opacity:.6}
  body>header #nav .mobile-sheet-news .account-menu-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* The dot sits on the words it belongs to, not out at the row's end where
     it read as part of the switch beside it. */
  body>header #nav .mobile-sheet-news .account-menu-count.is-dot{align-self:flex-start;margin:var(--space-mobile-sheet-news-dot) 0 0 calc(-1 * var(--space-mobile-sheet-news-dot-pull))}
  body>header #nav .mobile-sheet-news:focus-visible{outline:2px solid var(--header-focus,var(--focus-ring));outline-offset:2px}
  body>header #nav .mobile-sheet-prefs{display:inline-flex;align-items:center;gap:var(--space-mobile-sheet-pref-gap);flex:0 0 auto}
  /* Appearance wears the header's own sun-and-moon switch (4.9), so the
     theme looks the same wherever it is chosen. */
  body>header #nav .sheet-switch{display:inline-flex;flex:0 0 auto;margin:0}
  /* The segments keep a full 44px touch height; the groove is drawn inside
     them at the visual height of the Study pet switch, so the two switches
     read as one family and neither control shrinks its target. */
  body>header #nav .sheet-switch{padding:0 var(--space-mobile-sheet-switch-inset);background:transparent;box-shadow:none;isolation:isolate}
  body>header #nav .sheet-switch::before{content:"";position:absolute;z-index:0;left:0;right:0;top:7px;bottom:7px;
    border-radius:var(--radius-mobile-sheet-switch);background:var(--switch-track,var(--visual-theme-track-fallback));box-shadow:var(--visual-theme-toggle-shadow)}
  body>header #nav .sheet-switch .theme-seg{width:32px;height:44px;min-height:44px}
  body>header #nav .sheet-switch .theme-chip{top:10px;width:32px;height:24px}
  body>header #nav .mobile-sheet-theme-toggle .theme-chip{view-transition-name:theme-sheet-chip}
  body>header #nav .mobile-sheet-theme-toggle[data-theme="dark"] .theme-chip{transform:translateX(33px)}
  /* The header's switch is drawn for a dark bar. On light mode's pale sheet the
     same switch is retuned in material, not in shape: a shallow groove, a
     white chip, glyphs in the sheet's own ink -- so it sits at the weight of
     the switch above it instead of being the darkest thing on the page. */
  html:not(.workspace-dark) body>header #nav .sheet-switch{
    --switch-track:color-mix(in srgb,var(--mobile-sheet-text) 9%,transparent);
    --switch-chip-top:var(--mobile-sheet-knob);--switch-chip-bottom:var(--mobile-sheet-knob);
    --visual-theme-toggle-shadow:inset 0 1px 2px rgba(var(--elev-shade),.14);
    --visual-theme-chip-shadow:0 1px 2px rgba(var(--elev-shade),.24),0 2px 6px rgba(var(--elev-shade),.1);
    --visual-theme-glyph-disc-fill:color-mix(in srgb,var(--mobile-sheet-text) 45%,transparent);
    --visual-theme-glyph-rays-stroke:color-mix(in srgb,var(--mobile-sheet-text) 45%,transparent);
    --visual-theme-seg-theme-glyph-disc-fill-hover:var(--mobile-sheet-text);
    --visual-theme-seg-theme-glyph-rays-stroke-hover:var(--mobile-sheet-text)}
  /* WHO YOU ARE. The closing row: the name as context, the account's own
     doors as icons beside it -- settings, and for the owner the support
     inbox with its count -- and Sign out last. */
  body.workspace-environment>header #nav .mobile-sheet-session{display:flex;align-items:center;gap:var(--space-mobile-sheet-icon-gap);
    order:2;min-height:var(--size-mobile-sheet-row);margin-top:var(--space-mobile-sheet-group);
    padding:0 var(--space-mobile-sheet-trailing) 0 var(--space-mobile-sheet-inline);border-top:1px solid var(--mobile-sheet-line);--sheet-step:5}
  body>header #nav .mobile-sheet-who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:color-mix(in srgb,var(--mobile-sheet-text) 62%,transparent);font-size:var(--text-mobile-sheet-utility);font-weight:600}
  body>header #nav .mobile-sheet-icon{position:relative;display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;margin:0;padding:0;
    border:0;border-radius:var(--radius-mobile-sheet-action);background:transparent;box-shadow:none;color:var(--mobile-sheet-text);
    -webkit-tap-highlight-color:transparent}
  body>header #nav .mobile-sheet-icon .control-glyph{width:var(--size-mobile-sheet-icon-glyph);height:var(--size-mobile-sheet-icon-glyph);opacity:.68}
  body>header #nav .mobile-sheet-icon[aria-current="page"] .control-glyph{opacity:1;color:var(--mobile-sheet-mark)}
  body>header #nav .mobile-sheet-icon .account-menu-count{position:absolute;top:0;right:-2px}
  body>header #nav :is(.mobile-sheet-icon,.mobile-sheet-signout):active{background:var(--mobile-sheet-line)}
  body>header #nav .mobile-sheet-icon:focus-visible{outline:2px solid var(--header-focus,var(--focus-ring));outline-offset:-2px}
  body>header #nav .mobile-sheet-signout{display:inline-flex;align-items:center;gap:var(--space-mobile-sheet-signout-gap);flex:0 0 auto;
    min-height:44px;margin:0;padding:0 var(--space-mobile-sheet-signout-inline);border:0;border-radius:var(--radius-mobile-sheet-action);
    background:transparent;box-shadow:none;color:var(--danger-fg);font-size:var(--text-mobile-sheet-utility);font-weight:600;
    text-shadow:none;transform:none;-webkit-tap-highlight-color:transparent}
  body>header #nav .mobile-sheet-signout:focus-visible{outline:2px solid var(--header-focus,var(--focus-ring));outline-offset:-2px}
  body>header #nav .mobile-sheet-signout .account-menu-glyph{width:var(--size-mobile-sheet-glyph);height:var(--size-mobile-sheet-glyph)}
  /* The attention mark hangs off the button's corner. The action model clips
     its buttons, and that clip was cutting the mark in half; its highlight
     layer is inset and radius-inherited, so nothing else needs the clip. */
  .mobile-menu{position:relative}
  body>header button.mobile-menu.mobile-menu{overflow:visible}
  .mobile-menu .account-attention-count{position:absolute;top:0;right:0;transform:translate(25%,-25%);box-shadow:0 0 0 2px var(--header-bg)}
  .mobile-menu .account-attention-count.is-dot{transform:translate(35%,-35%)}
  body>header #nav .mobile-sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-mobile-sheet-actions-gap);
    padding:var(--space-mobile-sheet-inline);border-bottom:1px solid var(--mobile-sheet-line)}
  body>header #nav .mobile-sheet-actions button{width:100%;min-height:50px;border-radius:var(--radius-mobile-sheet-action);corner-shape:round;
    font-size:var(--text-mobile-sheet-action);font-weight:700;justify-content:center}
  body>header #nav .mobile-sheet-actions .landing-sheet-sign-in{background:transparent;color:var(--mobile-sheet-text);
    border:1px solid color-mix(in srgb,var(--mobile-sheet-text) 22%,transparent)}
  body>header #nav .landing-header-language-mobile{display:flex;align-items:center;gap:var(--space-mobile-sheet-actions-gap);
    min-height:var(--size-mobile-sheet-row);padding:0 var(--space-mobile-sheet-inline);color:var(--mobile-sheet-text);
    border-bottom:1px solid var(--mobile-sheet-line)}
  body>header #nav .landing-header-language-mobile .control-glyph{position:static;flex:0 0 auto}
  body>header #nav .landing-header-language-mobile::after{right:var(--space-mobile-sheet-inline)}
  body>header #nav .landing-header-language-mobile select{flex:1;width:100%;min-height:44px;padding:0;border:0;background:transparent;
    color:var(--mobile-sheet-text);font-size:var(--text-mobile-sheet-row);font-weight:650;text-align:left}
  body.landing-environment>header #account{display:none}
  @media (prefers-reduced-motion:reduce){
    body>header #nav,body>header #nav>*,body>header::after,body>header #nav .sheet-switch .theme-chip,.menu-glyph i{transition:none!important}
    body>header.nav-open #nav .app-nav-action.active::after{animation:none}
    body>header:not(.nav-open) #nav>*{transform:none}}
}
@media(max-width:640px){
  .study-area-identity{padding:var(--primitive-spacing-19px) var(--primitive-spacing-18px) var(--primitive-spacing-20px);border-radius:var(--primitive-radius-14px)}
  .study-area-identity h1{font-size:var(--primitive-font-size-25px)}
  .study-area-identity-actions{align-items:stretch;flex-direction:column}
  
  header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"brand account menu";gap:var(--primitive-spacing-9px);
    padding:calc(var(--primitive-spacing-10px) + env(safe-area-inset-top)) var(--primitive-spacing-12px) var(--primitive-spacing-10px)}
  header .brand{grid-area:brand;min-width:0;gap:var(--primitive-spacing-8px)}
  header .rx{font-size:var(--primitive-font-size-20px)}
  #account{grid-area:account}
  /* A phone workspace header is the mark and menu. The theme moves into
     the menu sheet as a Dark mode switch. */
  body>header .theme-toggle{display:none}
  #accountMenuButton{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding:var(--primitive-spacing-7px) var(--primitive-spacing-10px)}
  /* Keep the phone menu below the header with the same clear gap. */
  /* A phone is mostly menu, so the scrim's reach comes in with it. */
  .account-menu{position:fixed;right:0;top:var(--account-menu-top,calc(64px + env(safe-area-inset-top) + var(--space-account-menu-clearance)));min-width:0;width:max-content;
    --size-account-menu-scrim-left:var(--size-account-menu-scrim-left-compact)}
  /* The box hugs its longest item, so the only space on either side of a label is the item's own padding. */
  .mobile-menu{display:grid;place-items:center;grid-area:menu}
  main{padding:var(--primitive-spacing-14px) var(--primitive-spacing-12px);max-width:100%}
  .site-footer{padding-inline:var(--primitive-spacing-14px);justify-content:flex-start}
  body.workspace-environment .site-footer{flex-wrap:wrap;align-items:center;gap:var(--space-workspace-footer-mobile-gap)}
  body.workspace-environment .site-footer a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
  .form-grid{grid-template-columns:1fr}
  /* The narrow viewport used to be the only place that collapsed the chain,
     with a typed arrow standing in for a drawing. Both viewports now wear the
     same control, so all that is left here is a comfortable tap target. */
  .study-up-link{min-height:40px}
  .card{padding:var(--primitive-spacing-14px);margin-bottom:12px}
  .grid.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-8px)}
  .aa-grid{grid-template-columns:1fr}
  .aa-card{grid-template-columns:58px minmax(0,1fr);gap:var(--primitive-spacing-12px)}.aa-code{min-height:58px}
  .study-launcher{grid-template-columns:1fr}
  main a.study-area-card,.study-area-card{min-height:176px}
  .curriculum-card{grid-template-columns:auto minmax(0,1fr);padding:var(--primitive-spacing-16px);gap:var(--primitive-spacing-12px)}
  .curriculum-action{grid-column:2;justify-self:start;margin-top:4px}
  .study-area-card:hover,.study-area-card:focus-visible,.curriculum-card:hover,.curriculum-card:focus-visible{transform:none}
  .hero{padding:var(--primitive-spacing-17px)}.hero h2{font-size:var(--primitive-font-size-25px)}
  .mode-nav{top:68px;overflow:visible;flex-wrap:wrap}.mode-nav button,.mode-nav a{flex:1 1 calc(33.333% - 7px);white-space:normal}
  .progress-row{grid-template-columns:1fr auto}.progress-row .meter{grid-column:1/-1;grid-row:2}
  .stat{padding:var(--primitive-spacing-11px) var(--primitive-spacing-8px)}.stat b{font-size:var(--primitive-font-size-23px)}
  .prompt{font-size:var(--primitive-font-size-25px);overflow-wrap:anywhere;margin-top:15px}
  .prompt.small{font-size:var(--primitive-font-size-20px)}
  .matchgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--primitive-spacing-7px)}
  .matchgrid button{padding:var(--primitive-spacing-9px) var(--primitive-spacing-7px);font-size:var(--primitive-font-size-13px);overflow-wrap:anywhere}
  .answerbox{flex-direction:column;align-items:flex-start}
  .answerbox>:not(button,.primary,.ghost){align-self:stretch}
  .setuprow{align-items:flex-start}.setuprow label{min-width:100%;margin-bottom:2px}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  select,input:is([type=text],[type=email],[type=number],:not([type])),input[type=password],textarea{font-size:var(--text-text-control-mobile);max-width:100%}
  .rxcard{padding:var(--primitive-spacing-14px);max-width:100%;overflow-wrap:anywhere}
  .auth-card{margin:5vh auto;padding:var(--primitive-spacing-20px) var(--primitive-spacing-16px)}
  .auth-actions{align-items:stretch;flex-direction:column}
  .auth-actions button{width:100%}
  .otp-input{gap:var(--space-auth-otp-gap-mobile)}
  .otp-digit{font-size:var(--text-auth-otp-digit-mobile)}
  button,.chips button,.mode-nav button,.mobile-menu{min-height:44px}
  .row>.primary,.row>.ghost{min-height:44px}
  .decode{display:grid}.decode tbody{display:grid;gap:var(--primitive-spacing-9px)}.decode tr{display:grid;padding:var(--primitive-spacing-10px);background:var(--surface-raised);border-radius:var(--primitive-radius-9px)}.decode td{display:block;border:0;padding:var(--primitive-spacing-2px) 0;white-space:normal!important}
}

.system-state{max-width:620px;margin:8vh auto;text-align:center}.system-state .row{justify-content:center}

/* Calculation Practice keeps complete word problems and method work visually distinct. */
.calc-stats{margin-bottom:20px}.calc-topic-card{min-height:175px;display:flex;flex-direction:column}
.calc-topic-card .row{margin-top:auto;margin-bottom:0}.source-bank-state{border-style:dashed}
.calc-workbook{align-items:start}.calc-rail-heading{margin-top:24px}.calc-assigned-link{margin-top:20px;width:auto}
.calc-lesson-list{display:grid;gap:var(--primitive-spacing-18px)}
.calc-module-list{display:grid}.calc-module-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,230px);gap:var(--primitive-spacing-24px);align-items:center;padding:var(--primitive-spacing-17px) 0;border-bottom:1px solid var(--border-subtle)}
.calc-module-row:last-child{border-bottom:0}.calc-module-copy h3{margin:3px 0 5px;font-size:var(--primitive-font-size-19px)}.calc-module-copy>p{margin:0;color:var(--text-secondary);font-size:var(--primitive-font-size-13px);line-height:1.45}
.calc-module-copy .calc-method-line{margin-top:7px;color:var(--text-primary);font-size:var(--primitive-font-size-12px)}.calc-module-action{display:grid;justify-items:end;gap:var(--primitive-spacing-9px);text-align:right}
.calc-module-action .primary{width:auto;min-width:124px;min-height:40px;padding:var(--primitive-spacing-8px) var(--primitive-spacing-14px)}.calc-module-action .class-progress{justify-items:end}
.calc-direction-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-8px);margin:16px 0}.calc-direction-list span{padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);border-left:3px solid var(--action-primary-bg);background:var(--accent-soft);font-size:var(--primitive-font-size-13px);font-weight:650}
.calc-worked-examples{display:grid;gap:var(--primitive-spacing-18px)}.calc-worked-examples>section{padding:var(--primitive-spacing-17px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-9px);background:var(--surface-raised)}
.calc-worked-examples h3{font-size:var(--primitive-font-size-17px);line-height:1.35;margin:6px 0 12px}
.calc-lesson{max-width:760px;margin:0 auto}.solution-steps{display:grid;gap:var(--primitive-spacing-8px);padding-left:var(--primitive-spacing-24px)}
.solution-steps li{padding-left:var(--primitive-spacing-4px)}.calc-missing-step{margin:18px 0;padding:var(--primitive-spacing-15px);border-left:3px solid var(--action-primary-bg);background:var(--accent-soft);border-radius:var(--primitive-radius-0-9px-9px-0)}
.calc-question{max-width:880px;margin:0 auto}.calc-question>h2{font-size:var(--primitive-font-size-clamp-20px-3vw-28px);line-height:1.28;margin:14px 0 18px}
.calc-source{display:flex;align-items:center;gap:var(--primitive-spacing-9px);flex-wrap:wrap}.calc-givens{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:var(--primitive-spacing-12px);margin:12px 0 18px}
.calc-givens>div{padding:var(--primitive-spacing-14px);background:var(--surface-raised);border-radius:var(--primitive-radius-10px)}.calc-givens h3{margin-top:0}
.calc-givens ul{display:grid;gap:var(--primitive-spacing-8px);margin:0;padding:0;list-style:none}.calc-givens li{display:flex;justify-content:space-between;gap:var(--primitive-spacing-16px)}.calc-givens li span{color:var(--text-secondary);text-align:right}
.calc-workspace{margin:18px 0;padding:var(--primitive-spacing-16px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px);background:var(--surface-panel)}
.calc-workspace-head{display:flex;align-items:start;justify-content:space-between;gap:var(--primitive-spacing-16px)}.calc-workspace-head h3{margin-top:0}.calc-workspace-head p{margin:0 0 12px}
.calc-workspace input,.calc-answer input{min-width:0;min-height:44px;background:var(--surface-raised);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);padding:var(--primitive-spacing-9px) var(--primitive-spacing-12px);font-size:var(--primitive-font-size-16px)}
.ratio-builder{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--primitive-spacing-14px);margin:12px 0}
.ratio-side{display:grid;gap:var(--primitive-spacing-7px)}.ratio-side>div{display:grid;grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-7px);padding-bottom:var(--primitive-spacing-7px);border-bottom:1px solid var(--border-subtle)}
.ratio-side>div:last-child{border:0;padding-bottom:0}.ratio-equals{font-size:var(--primitive-font-size-24px);color:var(--text-secondary)}.ratio-x{font-size:var(--primitive-font-size-18px);font-weight:700}
.da-builder{display:grid;gap:var(--primitive-spacing-10px);margin:12px 0}.da-start{display:grid;grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-7px);max-width:360px}
#daFactors{display:flex;gap:var(--primitive-spacing-10px);flex-wrap:wrap}.da-factor{display:flex;align-items:center;gap:var(--primitive-spacing-8px);min-width:225px}.da-factor>div{display:grid;gap:var(--primitive-spacing-5px)}
.da-factor>div>div{display:grid;grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-5px);padding-bottom:var(--primitive-spacing-5px);border-bottom:1px solid var(--border-subtle)}.da-factor>div>div:last-child{border:0}
.calc-answer{margin-top:18px}.calc-answer h3{margin-top:0}.calc-answerbox{max-width:none;margin:0;display:grid;grid-template-columns:minmax(110px,1fr) minmax(90px,.7fr) auto}
.calc-hints{display:grid;gap:var(--primitive-spacing-9px);margin-top:14px}.calc-hint{padding:var(--primitive-spacing-13px) var(--primitive-spacing-15px);border:1px solid var(--border-subtle);border-left:3px solid var(--action-primary-bg);border-radius:var(--primitive-radius-9px);background:var(--accent-soft)}
.calc-hint p{margin:5px 0}.calc-review-item{padding:var(--primitive-spacing-16px) 0;border-bottom:1px solid var(--border-subtle)}.calc-review-item:last-child{border:0}
.assigned-document-card{min-height:190px;display:flex;flex-direction:column}.assigned-document-card .row{margin-top:auto}
.assigned-problem-list{display:grid;gap:var(--primitive-spacing-10px)}.assigned-problem-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--primitive-spacing-18px);margin:0;padding:var(--primitive-spacing-16px) var(--primitive-spacing-18px)}
.assigned-preview{margin:9px 0 0;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.assigned-question textarea,.assigned-study textarea,.assigned-session-builder textarea{width:100%;min-height:96px;background:var(--surface-raised);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-9px);padding:var(--primitive-spacing-12px);font-size:var(--primitive-font-size-16px);resize:vertical}
.assigned-question .calc-answer{display:grid;gap:var(--primitive-spacing-10px)}.assigned-question .calc-answer .primary{justify-self:start}
.assigned-reference{margin:16px 0;padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-raised)}
.assigned-reference summary{cursor:pointer;font-weight:700}.assigned-reference ul{display:grid;gap:var(--primitive-spacing-8px);margin-bottom:0;padding-left:var(--primitive-spacing-22px)}.assigned-study h2,.assigned-question>h2{white-space:pre-line}
@media(max-width:640px){
  .calc-givens{grid-template-columns:1fr}.calc-givens li{display:grid;gap:var(--primitive-spacing-2px)}.calc-givens li span{text-align:left}
  .calc-workspace{padding:var(--primitive-spacing-12px)}.calc-workspace-head{display:grid}.calc-workspace-head select{width:100%}
  .ratio-builder{grid-template-columns:1fr}.ratio-equals{text-align:center;line-height:1}
  #daFactors{display:grid}.da-factor{min-width:0;width:100%}.calc-answerbox{grid-template-columns:1fr}.calc-answerbox>button{justify-self:start}
  .calc-question>h2{font-size:var(--primitive-font-size-21px)}.calc-topic-card{min-height:0}
  .assigned-problem-row{grid-template-columns:1fr}.assigned-document-card{min-height:0}
}

/* Standalone answer submissions need clearance from the last bordered choice
   or multi-part field, including the same editor used in calculation lessons. */
:is(.calc-answer,.learn-editor)>:is(.assess-options,.calc-multipart)+.primary{
  margin-top:var(--space-calculation-answer-submit-gap)}

/* Assignment calendar */
.today-calendar h2{margin-bottom:10px}.today-assignment-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-learn-hairline);margin-bottom:var(--space-learn-tight)}
.today-assignment-tabs button{position:relative;display:grid;justify-items:start;gap:var(--primitive-spacing-1px);min-width:0;min-height:62px;padding:var(--primitive-spacing-10px) var(--primitive-spacing-8px);border:0;border-radius:var(--radius-learn-surface);background:transparent;color:var(--text-secondary);box-shadow:none;cursor:pointer;text-align:left;transition:background var(--theme-paint-duration,.16s) ease,color var(--theme-paint-duration,.16s) ease}.today-assignment-tabs button:hover{background:var(--surface-raised);color:var(--text-primary)}.today-assignment-tabs button.on{background:var(--accent-soft);color:var(--text-primary)}.today-assignment-tabs button:focus-visible{z-index:1;outline:2px solid var(--focus-ring);outline-offset:-2px}.today-assignment-tabs b{font-size:var(--primitive-font-size-21px);line-height:1;color:var(--text-primary)}.today-assignment-tabs span{overflow:hidden;max-width:100%;font-size:var(--primitive-font-size-11px);text-overflow:ellipsis;white-space:nowrap}.today-assignment-tabs .has-overdue b{color:var(--danger-fg)}
.today-assignment-panel{display:grid}.today-assignment-row{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:var(--primitive-spacing-10px);overflow:hidden;max-height:var(--assignment-row-height,110px);padding:var(--primitive-spacing-11px) 0;border-bottom:1px solid var(--border-subtle);opacity:1;transform:translateY(0);transition:max-height .3s ease,padding .3s ease,border-color var(--theme-paint-duration,.2s) ease,opacity .22s ease,transform .3s ease}.today-assignment-check{display:grid;place-items:center;width:22px;height:22px;min-height:22px;margin-top:1px;padding:0;border:1.5px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--visual-today-assignment-check-text);box-shadow:none;cursor:pointer;transition:background var(--theme-paint-duration,.18s) ease,border-color var(--theme-paint-duration,.18s) ease,transform .14s ease}.today-assignment-check span{opacity:0;transform:scale(.45);font-size:var(--primitive-font-size-13px);font-weight:800;line-height:1;transition:opacity .15s ease,transform .2s cubic-bezier(.2,.8,.2,1.25)}.today-assignment-check:hover,.today-assignment-check:focus-visible{border-color:var(--action-primary-bg);background:var(--accent-soft)}.today-assignment-check:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.today-assignment-check[data-action-owned="true"]{transform:scale(.88)}.today-assignment-copy{display:grid;gap:var(--primitive-spacing-2px);min-width:0}.today-assignment-copy small{color:var(--text-secondary);font-size:var(--primitive-font-size-11-5px)}.today-assignment-copy b{position:relative;width:fit-content;max-width:100%;font-size:var(--primitive-font-size-13px);line-height:1.3}.today-assignment-copy b::after{content:"";position:absolute;left:0;right:0;top:52%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}.today-assignment-row.is-completing .today-assignment-check{border-color:var(--action-primary-bg);background:var(--action-primary-bg)}.today-assignment-row.is-completing .today-assignment-check span{opacity:1;transform:scale(1)}.today-assignment-row.is-completing .today-assignment-copy{color:var(--text-secondary)}.today-assignment-row.is-completing .today-assignment-copy b::after{transform:scaleX(1)}.today-assignment-row.is-leaving{max-height:0;padding-block:0;border-color:transparent;opacity:0;transform:translateY(-5px);pointer-events:none}
.today-assignment-empty{margin:0;padding:var(--primitive-spacing-18px) var(--primitive-spacing-2px);color:var(--text-secondary);font-size:var(--primitive-font-size-12-5px)}.today-assignment-more{justify-self:start;margin:9px 0 0;padding:var(--primitive-spacing-2px) 0;border:0;background:transparent;color:var(--action-primary-bg);box-shadow:none;font-size:var(--primitive-font-size-12px);font-weight:700;text-decoration:none;cursor:pointer}.today-assignment-more:hover,.today-assignment-more:focus-visible{text-decoration:underline;text-underline-offset:3px}.today-assignment-more:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}.today-assignment-undo{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-10px);margin-top:12px;padding:var(--primitive-spacing-9px) var(--primitive-spacing-10px);border-radius:var(--primitive-radius-8px);background:var(--surface-raised);color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.today-assignment-undo button{min-height:0;padding:var(--primitive-spacing-2px);border:0;background:transparent;color:var(--action-primary-bg);box-shadow:none;font-weight:750;cursor:pointer}.today-assignment-undo button:hover,.today-assignment-undo button:focus-visible{text-decoration:underline}.today-assignment-undo button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.today-assignment-tabs button,.today-assignment-row,.today-assignment-check,.today-assignment-check span,.today-assignment-copy b::after{transition:none}.today-assignment-check[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:2px;transform:none;filter:none}}
@media (forced-colors:active){.today-assignment-tabs button.on{outline:2px solid ButtonText;outline-offset:-3px}.today-assignment-check{border:1px solid ButtonText}.today-assignment-check[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:2px;transform:none;filter:none}.today-assignment-row.is-completing .today-assignment-check{background:Highlight;color:HighlightText}}
.rail-divider{height:1px;background:var(--border-subtle);margin:20px 0}
.text-link{display:inline-block;color:var(--action-primary-bg);padding:var(--primitive-spacing-10px) 0;font-weight:650;text-decoration:none}.text-link:hover,.text-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-calendar-column-gap);align-items:start}
.month-calendar{border:0;background:var(--surface-panel)}.weekday-row,.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.weekday-row{border-bottom:1px solid var(--border-subtle);background:var(--surface-raised)}.weekday-row span{padding:var(--primitive-spacing-8px) var(--primitive-spacing-9px);color:var(--text-secondary);font-size:var(--primitive-font-size-12px);font-weight:650}
.weekday-row i{font-style:normal}.weekday-row .wd-short{display:none}
.calendar-day{min-height:116px;padding:var(--primitive-spacing-6px);border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);overflow:hidden}
.calendar-day:nth-child(7n){border-right:0}.calendar-day.outside{background:var(--calendar-outside-bg);color:var(--text-secondary)}.calendar-day.today{box-shadow:inset 0 0 0 2px var(--action-primary-bg)}
.calendar-day:nth-last-child(-n+7){border-bottom:0}
.calendar-day.selected{background:var(--calendar-selected-bg)}.day-number{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.calendar-day.today .day-number{background:var(--action-primary-bg);color:var(--visual-calendar-day-today-day-number-text)}.day-events{display:grid;gap:var(--primitive-spacing-3px);margin-top:3px}
.calendar-event{display:block;width:100%;padding:var(--primitive-spacing-3px) var(--primitive-spacing-5px);border:0;border-left:3px solid var(--course);border-radius:var(--primitive-radius-2px);background:var(--visual-calendar-event-surface);color:var(--text-primary);font-size:var(--primitive-font-size-10-5px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:pointer}
.calendar-event span{font-weight:700;margin-right:4px}
/* Completed history de-emphasizes through exactly two mechanisms —
   strikethrough plus a moderate opacity drop. Anything fainter reads as
   disabled placeholder text on dark cells. */
.calendar-event.completed{text-decoration:line-through;opacity:.72}.more-events{border:0;background:transparent;color:var(--action-primary-bg);font-size:var(--primitive-font-size-11px);text-align:left;cursor:pointer}
.release-count{border:0;background:transparent;color:var(--text-secondary);font-size:var(--primitive-font-size-10-5px);text-align:left;padding:var(--primitive-spacing-2px) var(--primitive-spacing-4px);cursor:pointer}
.calendar-detail{position:sticky;top:95px;border-left:1px solid var(--border-subtle);padding-left:var(--primitive-spacing-20px)}.calendar-detail>h2{font-size:var(--primitive-font-size-18px)}
.agenda-list{max-width:850px}.agenda-day{margin-bottom:26px}.agenda-day>header{display:flex;align-items:center;gap:var(--primitive-spacing-10px);padding-bottom:var(--primitive-spacing-7px);border-bottom:1px solid var(--border-subtle)}
.agenda-day>header h2{font-size:var(--primitive-font-size-17px);margin:0}.agenda-day>header span{font-size:var(--primitive-font-size-12px);color:var(--action-primary-bg);font-weight:700}
.agenda-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:start;gap:var(--primitive-spacing-10px);padding:var(--primitive-spacing-13px) var(--primitive-spacing-4px);border-bottom:1px solid var(--border-subtle);border-left:3px solid var(--course)}
.completion-check{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--primitive-radius-4px);border:1px solid var(--line-strong);background:var(--surface-panel);color:var(--text-primary);cursor:pointer}
.completion-check[aria-pressed=true]{background:var(--success-bg);border-color:var(--success-edge);color:var(--success-fg)}.agenda-copy{display:grid;gap:var(--primitive-spacing-2px);border:0;background:transparent;color:var(--text-primary);padding:0;text-align:left;cursor:pointer}
.release-marker{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line-strong);color:var(--action-primary-bg);font-size:var(--primitive-font-size-11px);font-weight:750}.release-item{background:var(--surface-panel)}
.agenda-copy>b{font-size:var(--primitive-font-size-14px)}.agenda-copy>span:last-child,.agenda-meta{color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.agenda-item.completed .agenda-copy{text-decoration:line-through;opacity:.72}
.calendar-warning{align-self:center;padding:var(--primitive-spacing-3px) var(--primitive-spacing-6px);border:1px solid var(--warning-edge);background:var(--warning-bg);color:var(--warning-fg);font-size:var(--primitive-font-size-11px)}
.calendar-empty{padding:var(--primitive-spacing-36px) 0;border-block:1px solid var(--border-subtle)}.calendar-empty h2{font-size:var(--primitive-font-size-18px)}.calendar-empty p{color:var(--text-secondary)}
.calendar-onboarding{margin:28px 0;padding:var(--primitive-spacing-28px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-16px);background:var(--surface-card);text-align:center}.calendar-onboarding h2{margin:0 0 8px}.calendar-onboarding p{color:var(--text-secondary);margin:0 auto 18px;max-width:580px}.calendar-onboarding>div{display:flex;gap:var(--primitive-spacing-10px);justify-content:center;flex-wrap:wrap}
.app-dialog-backdrop{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;
  border:0;z-index:20;display:grid;place-items:center;padding:var(--primitive-spacing-20px);color:inherit;
  background:transparent;overscroll-behavior:contain;overflow:auto;opacity:0;transition:opacity .18s ease}
.app-dialog-backdrop:not([open]){display:none}
.app-dialog-backdrop::backdrop{background:var(--visual-ui-dialog-surface);backdrop-filter:blur(2px)}
.app-dialog-backdrop.is-open{opacity:1}
.app-dialog{animation:dialogEnter .22s cubic-bezier(.2,.82,.28,1) both;transform-origin:50% 35%}
.app-dialog-backdrop.is-closing{opacity:0}
.app-dialog-backdrop.is-closing .app-dialog{animation:dialogExit .16s ease both}
@keyframes dialogEnter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dialogExit{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px) scale(.99)}}
.activity-stage-enter{opacity:.35;transform:translateY(8px);transition:height .28s cubic-bezier(.2,.75,.25,1),opacity .2s ease,transform .24s ease}
.activity-stage-enter.activity-stage-enter-active{opacity:1;transform:none}
.calendar-dialog-backdrop{z-index:20}
.calendar-dialog{position:relative;width:min(560px,100%);max-height:100%;overflow:auto;background:var(--surface-panel);padding:var(--primitive-spacing-26px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-7px)}
.calendar-dialog h2{font-size:var(--primitive-font-size-24px)}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:var(--primitive-font-size-25px);color:var(--text-secondary);cursor:pointer}
.calendar-dialog dl{margin:20px 0}.calendar-dialog dl div{display:grid;grid-template-columns:105px 1fr;padding:var(--primitive-spacing-8px) 0;border-top:1px solid var(--border-subtle)}.calendar-dialog dt{color:var(--text-secondary);font-size:var(--primitive-font-size-12px);font-weight:650}.calendar-dialog dd{margin:0}
.calendar-dialog-actions{display:flex;gap:var(--primitive-spacing-8px);justify-content:flex-end}.calendar-editor{width:min(720px,100%)}.editor-intro{color:var(--text-secondary);margin:-4px 0 18px}
.calendar-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-13px) var(--primitive-spacing-16px)}.calendar-form label{display:grid;align-content:start;gap:var(--primitive-spacing-5px)}.calendar-form label.wide{grid-column:1/-1}
.calendar-form label>span{font-size:var(--primitive-font-size-12-5px);font-weight:650;color:var(--text-secondary)}.calendar-form small{font-weight:400;color:var(--text-secondary)}
.calendar-form input,.calendar-form select,.calendar-form textarea{width:100%;min-width:0;min-height:43px;padding:var(--primitive-spacing-9px) var(--primitive-spacing-10px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-5px);background:var(--surface-raised);color:var(--text-primary);font:inherit}
.calendar-form textarea{resize:vertical}.editor-source{padding:var(--primitive-spacing-10px) 0;margin:15px 0 0;border-top:1px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.editor-error{min-height:22px;margin:4px 0;color:var(--danger-fg);font-size:var(--primitive-font-size-13px)}
@media(max-width:900px){.calendar-layout{grid-template-columns:1fr}.calendar-detail{position:static;border:0;border-top:1px solid var(--border-subtle);padding:var(--primitive-spacing-18px) 0 0}}
@media(max-width:760px){.calendar-layout{display:block}.calendar-detail{border:0;padding:0}.agenda-item{grid-template-columns:30px minmax(0,1fr)}.calendar-warning{grid-column:2}.calendar-dialog{padding:var(--primitive-spacing-22px) var(--primitive-spacing-18px)}.calendar-dialog dl div{grid-template-columns:1fr;gap:var(--primitive-spacing-2px)}.calendar-form{grid-template-columns:1fr}.calendar-form label.wide{grid-column:auto}}
/* ===== Calendar mobile recomposition =====
   One shared state model (calendar.js) with two presentations. Desktop
   keeps the wide chip row, side-panel agenda, and two-column editor.
   Phones get a calendar-first composition: minimal chrome, the month
   grid owning the remaining viewport, course filters and the selected
   day in bottom sheets, and a compact full-screen editor. */
.editor-more{margin:12px 0 0;border:0;padding:0}
.editor-more>summary{cursor:pointer;font-weight:650;font-size:var(--primitive-font-size-13px);color:var(--text-secondary);padding:var(--primitive-spacing-8px) 0}
.editor-more>summary:hover{color:var(--text-primary)}
.editor-more>.calendar-form{margin-top:6px}
.sheet-handle{display:none}
.course-sheet-list{display:grid;grid-auto-rows:max-content;align-content:start;gap:var(--primitive-spacing-6px)}
.course-sheet-row{display:flex;align-items:stretch;gap:var(--primitive-spacing-12px);width:100%;padding:var(--primitive-spacing-11px) var(--primitive-spacing-12px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-9px);background:var(--surface-raised);color:var(--text-primary);cursor:pointer;text-align:left;font-size:var(--primitive-font-size-14px)}
.course-sheet-row i{flex:0 0 5px;border-radius:var(--primitive-radius-3px);background:var(--course)}
.course-sheet-row span{display:grid;min-width:0;align-content:center}
.course-sheet-row small{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-sheet-row em{margin-left:auto;align-self:center;font-style:normal;color:var(--action-primary-bg);font-weight:800;min-width:20px;text-align:center}
.course-sheet-row.on{border-color:var(--course);background:var(--accent-soft)}
.calendar-organizer{width:min(880px,100%)}.calendar-organizer-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-24px)}.calendar-organizer-grid section>header,.organizer-sources>header{position:static;top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-12px);margin-bottom:10px;padding:0;background:transparent;color:var(--text-primary);border:0;z-index:auto}.calendar-organizer-grid h3{margin:0}.organizer-list{display:grid;gap:var(--primitive-spacing-7px);max-height:48vh;overflow:auto}.organizer-list article{display:flex;align-items:center;gap:var(--primitive-spacing-10px);padding:var(--primitive-spacing-10px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-raised)}.organizer-list article>i{width:5px;align-self:stretch;border-radius:var(--primitive-radius-4px);background:var(--course)}.organizer-list article>div{display:grid;min-width:0;margin-right:auto}.organizer-list small{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.organizer-list article.archived{opacity:.58}/* Imported calendars sit under the organizer grid: the same list shape as terms and courses, one section wider, because a source line carries a date range and a count. */.organizer-sources{margin-top:24px;padding-top:var(--primitive-spacing-20px);border-top:1px solid var(--border-subtle)}.organizer-sources h3{margin:0}.organizer-sources .organizer-list{max-height:30vh}.organizer-sources>p.muted{margin-top:10px;font-size:var(--primitive-font-size-13px);color:var(--text-secondary)}.calendar-remove-modified{display:flex;align-items:flex-start;gap:var(--primitive-spacing-9px);margin:14px 0 0;padding:var(--primitive-spacing-11px) var(--primitive-spacing-12px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-raised)}.calendar-remove-modified input{width:auto;margin-top:2px}.calendar-small-editor{width:min(600px,100%)}.archive-toggle{display:flex;align-items:center;gap:var(--primitive-spacing-8px);margin-top:16px}.archive-toggle input{width:auto}.archive-hint{margin:var(--space-calendar-archive-hint) 0 0 26px;color:var(--text-secondary);font-size:var(--text-calendar-archive-hint)}.calendar-dialog-actions:has(.calendar-delete){flex-wrap:wrap}.calendar-dialog-actions .calendar-delete{margin-right:auto}.calendar-dialog-actions:has(.calendar-delete) button{white-space:nowrap}@media (max-width:560px){.calendar-dialog-actions .calendar-delete{order:1;flex:1 0 100%;margin-right:0}}.calendar-import{width:min(620px,100%)}.calendar-kit{margin-top:var(--space-calendar-kit-gap)}.calendar-kit h3{margin:0 0 var(--space-calendar-kit-step);font-size:var(--text-calendar-kit-title)}.calendar-kit ol{margin:0 0 var(--space-calendar-kit-gap);padding-left:var(--space-calendar-kit-indent);color:var(--text-secondary);display:grid;gap:var(--space-calendar-kit-step)}.calendar-file-picker{display:grid;gap:var(--primitive-spacing-8px);padding:var(--primitive-spacing-20px);margin-top:18px;border:1px dashed var(--action-primary-bg);border-radius:var(--primitive-radius-12px);background:var(--accent-soft)}.calendar-import-busy{display:flex;align-items:center;gap:var(--primitive-spacing-10px);margin-top:12px;color:var(--text-secondary);font-size:var(--primitive-font-size-13-5px)}.calendar-import-busy .route-pending-indicator{width:16px;height:16px;border-width:2px;flex:0 0 auto}.calendar-import-preview{width:min(900px,100%);max-height:min(90vh,900px);overflow:auto}.import-summary{display:flex;gap:var(--primitive-spacing-8px);flex-wrap:wrap;margin:12px 0 16px}.import-summary span{padding:var(--primitive-spacing-7px) var(--primitive-spacing-10px);border-radius:var(--primitive-radius-999px);background:var(--surface-raised);border:1px solid var(--border-subtle);font-size:var(--primitive-font-size-13px)}.import-warnings{margin-bottom:14px;padding:var(--primitive-spacing-10px);border:var(--visual-import-warnings-outline);border-radius:var(--primitive-radius-10px)}.import-warnings ul{max-height:150px;overflow:auto}.import-attention{margin-bottom:14px;padding:var(--space-calendar-notice);border:var(--visual-import-warnings-outline);border-radius:var(--radius-calendar-notice)}.import-attention ul{margin:var(--space-calendar-kit-step) 0 0;padding-left:var(--space-calendar-kit-indent);max-height:150px;overflow:auto}.import-event-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--primitive-spacing-10px)}.import-event select{width:100%;min-width:0}.import-term{display:grid;gap:var(--space-calendar-kit-step);margin-bottom:14px}.import-term select{width:100%;min-width:0}.import-event{padding:var(--primitive-spacing-13px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-11px);background:var(--surface-raised)}.import-event.update{border-color:var(--action-primary-bg)}.import-event.probable_duplicate{border-color:var(--visual-import-event-probable-duplicate-border)}.import-event.duplicate{opacity:.65}.import-event-choice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--primitive-spacing-10px)}.import-event-choice input{width:auto}.import-event-choice span{display:grid}.import-event-choice small{color:var(--text-secondary)}.import-event-choice em{font-style:normal;font-size:var(--primitive-font-size-12px);font-weight:700;color:var(--text-secondary)}.import-event>label:not(.import-event-choice){display:grid;gap:var(--primitive-spacing-5px);margin-top:10px}.import-overlap{color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}.import-new-course{display:grid;grid-template-columns:1fr 2fr;gap:var(--primitive-spacing-8px);margin-top:8px}.import-event .calendar-warning{display:block;margin:8px 0 0}
@media(max-width:760px){
  /* -- Viewport-owned month canvas: the grid stretches to fill what the
     compact chrome leaves, weeks sharing the space evenly (five-week
     months get taller rows than six-week months via --week-count). The
     below-grid day list is replaced by the day sheet. -- */
  /* No box: the container border and the closing bottom edge go, and the
     grid bleeds to the screen edges (negative margin cancels the page
     padding). Only the interior separators between days, and the line
     under the weekday labels, remain. */
  .month-calendar{display:flex;flex-direction:column;touch-action:pan-y;
    border:0;background:transparent;margin-inline:-28px;
    height:calc(100dvh - 286px - env(safe-area-inset-bottom));min-height:340px}
  .calendar-day:nth-last-child(-n+7){border-bottom:0}
  .weekday-row{flex:0 0 auto;background:transparent}
  .weekday-row span{padding:var(--primitive-spacing-6px) var(--primitive-spacing-2px);font-size:var(--primitive-font-size-11px);text-align:center}
  .weekday-row .wd-long{display:none}
  .weekday-row .wd-short{display:inline}
  .month-grid{flex:1;min-height:0;grid-template-rows:repeat(var(--week-count,5),minmax(0,1fr))}
  .calendar-day{min-height:0;padding:var(--primitive-spacing-3px) var(--primitive-spacing-2px);position:relative;overflow:hidden}
  /* min-height:0 beats the global 44px mobile button minimum that was
     stretching the 24px disc into an oval. The tap target is unharmed:
     the ::after overlay makes the whole cell clickable. */
  .calendar-day .day-number{width:24px;height:24px;min-height:0;aspect-ratio:1;margin:0 auto;font-size:var(--primitive-font-size-12px)}
  .calendar-day .day-number::after{content:"";position:absolute;inset:0}
  /* One selection language: today = outlined number, selected = filled
     number, nothing else. The heavy cell outline competed with both. */
  .calendar-day.today{box-shadow:none}
  .calendar-day.today .day-number{background:transparent;color:var(--action-primary-bg);box-shadow:inset 0 0 0 2px var(--action-primary-bg);font-weight:700}
  .calendar-day.selected{background:transparent}
  .calendar-day.selected .day-number{background:var(--action-primary-bg);color:var(--visual-calendar-day-selected-day-number-text);box-shadow:none}
  .calendar-day.today.selected .day-number{background:var(--action-primary-bg);color:var(--visual-today-selected-day-number-text)}
  /* -- Mini event chips: course strip + first characters of the title.
     Completion at this size shows as reduced emphasis only; adding
     strikethrough to 9px text just makes noise. Chips are decorative —
     the whole cell is the tap target; details live in the day sheet. -- */
  .day-events{pointer-events:none;display:grid;gap:var(--primitive-spacing-2px);margin-top:3px}
  .day-events .calendar-event{width:100%;min-height:0;padding:var(--primitive-spacing-1px) var(--primitive-spacing-3px);border:0;border-left:2px solid var(--course);border-radius:var(--primitive-radius-3px);font-size:var(--primitive-font-size-9px);line-height:1.3;font-weight:600}
  .day-events .calendar-event.completed{opacity:.45;text-decoration:none}
  .day-events .calendar-event span{display:none}
  .day-events .more-events{font-size:var(--primitive-font-size-9-5px);padding:0 var(--primitive-spacing-3px);line-height:1.2}
  .day-events .release-count{display:none}
  .calendar-layout .calendar-detail{display:none}
  /* -- Bottom sheets (day agenda, course filters): the month stays
     visible behind; content scrolls inside the sheet, not the page. -- */
  .calendar-sheet-backdrop{place-items:end stretch;padding:0}
  .calendar-sheet{width:100%;max-width:none;max-height:72dvh;display:flex;flex-direction:column;
    border-radius:var(--primitive-radius-16px-16px-0-0);border-bottom:0;margin:0;
    padding:var(--primitive-spacing-8px) var(--primitive-spacing-16px) calc(var(--primitive-spacing-14px) + env(safe-area-inset-bottom))}
  .calendar-sheet .sheet-handle{display:block;flex:0 0 auto;width:38px;height:4px;border-radius:var(--primitive-radius-2px);background:var(--line-strong);margin:4px auto 10px}
  .calendar-sheet h2{font-size:var(--primitive-font-size-18px);margin:0 0 10px}
  .sheet-scroll{overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain}
  .calendar-sheet .calendar-dialog-actions{flex:0 0 auto;padding-top:var(--primitive-spacing-12px)}
  /* -- Mobile editor: full-height sheet, required fields on the first
     screen, Save always reachable via the sticky action row. -- */
  /* Full-screen overlays bypass the app header, so they must reserve the
     device safe area (status bar / notch) themselves — pages never crossed
     that plane only because the header's own safe-area padding did it. */
  /* Overlays scroll on one axis only: vertical. overflow-x kills any
     stray horizontal overflow, touch-action:pan-y stops sideways pans,
     and overscroll-behavior prevents the loose rubber-band chaining. */
  .calendar-sheet,.calendar-editor{overflow-x:hidden;overflow-y:auto;
    touch-action:pan-y;overscroll-behavior:contain}
  .calendar-editor{width:100%;height:100dvh;max-height:100dvh;border-radius:0;
    display:flex;flex-direction:column;
    padding:calc(var(--primitive-spacing-14px) + env(safe-area-inset-top,var(--primitive-spacing-0px))) var(--primitive-spacing-14px) 0}
  .calendar-editor .calendar-form input,.calendar-editor .calendar-form select,
  .calendar-editor .calendar-form textarea{max-width:100%}
  /* iOS date inputs have an intrinsic width and ignore width:100% until
     the native appearance is stripped — this was the horizontal-overflow
     source. Also left-align their value to match the other fields. */
  .calendar-form input[type=date]{display:block;width:100%;min-width:0;
    -webkit-appearance:none;appearance:none;text-align:left}
  .calendar-form input[type=date]::-webkit-date-and-time-value{text-align:left}
  .calendar-editor .dialog-close{top:calc(10px + env(safe-area-inset-top,0px))}
  .calendar-editor>.calendar-form,.calendar-editor .editor-more{flex:0 0 auto}
  .calendar-editor .calendar-dialog-actions{position:sticky;bottom:0;margin-top:auto;
    background:var(--surface-panel);border-top:1px solid var(--border-subtle);
    padding:var(--primitive-spacing-10px) 0 calc(var(--primitive-spacing-10px) + env(safe-area-inset-bottom))}
  /* Both open as full-screen sheets here, so their backdrop keeps no gutter;
     a gutter would push the sheet past the top of the screen. */
  .calendar-editor-backdrop,.calendar-preview-backdrop{padding:0}
}

/* --- Brand-led authentication composition ------------------------------ */
body.auth-environment:not(.landing-environment)>header{display:none}
body.auth-environment:not(.landing-environment) main{
  width:100%;min-height:calc(100svh - 58px);padding:var(--space-auth-brand-main-padding);
  grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center}
.auth-experience{width:min(100%,560px);display:grid;justify-items:stretch;gap:var(--space-auth-brand-composition-gap);margin:0 auto}
.auth-brand-introduction{display:grid;gap:var(--space-auth-brand-intro-gap);margin-bottom:var(--space-auth-brand-header-bottom);text-align:center}
.auth-brand-link{display:block;width:fit-content;cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none}
.auth-brand-link:focus-visible{outline:2px solid var(--action-primary-bg);outline-offset:4px;border-radius:var(--radius-auth-brand-link-focus)}
.auth-brand-link img{display:block;width:var(--size-auth-product-icon);height:var(--size-auth-product-icon);object-fit:contain;-webkit-user-drag:none}
.auth-brand-lockup{justify-self:center}
.auth-brand-compact{margin:0 auto var(--space-auth-brand-compact-bottom)}
.auth-brand-message{display:block}
.auth-brand-copy{text-align:center}
.auth-brand-copy h1{max-width:560px;margin:0 auto;color:var(--visual-auth-brand-headline-text);font-size:var(--text-auth-brand-headline);font-weight:500;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.auth-brand-copy p{max-width:52ch;margin:var(--space-auth-brand-copy-gap) auto 0;color:var(--visual-auth-brand-description-text);font-size:var(--text-auth-brand-description);line-height:1.5;text-wrap:balance}
body.auth-environment:not(.landing-environment) main .card.auth-card.auth-login-card{
  width:100%;max-width:none;margin:0;padding:var(--space-auth-brand-card-padding);border-radius:var(--radius-auth-brand-card)}
.auth-login-card .auth-form{gap:var(--space-auth-brand-form-gap)}
.auth-login-card .provider-button{min-height:var(--size-action-large)}
.auth-login-card .auth-field input::placeholder{color:var(--visual-auth-brand-placeholder-text);opacity:1}
.auth-context-message{display:flex;align-items:flex-start;gap:var(--space-auth-context-gap);margin:-30px -34px 24px;padding:var(--space-auth-context-padding);border-radius:var(--radius-auth-context);background:var(--visual-auth-context-surface);color:var(--visual-auth-context-text);font-size:var(--text-auth-context);line-height:1.4}
.auth-context-icon{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border:var(--visual-auth-context-icon-outline);border-radius:50%;font-size:var(--text-auth-context-icon);font-weight:800}
.auth-institutional-cta{text-align:center;color:var(--visual-auth-institutional-text);font-size:var(--text-auth-institutional);line-height:1.4}
.auth-institutional-cta p{margin:0 0 4px}
.auth-institutional-cta a{color:var(--visual-auth-institutional-link-text);font-weight:680;text-underline-offset:3px}
@media(min-width:761px) and (min-height:761px){
  .auth-experience:not(.registration-experience){position:relative}
  .auth-experience:not(.registration-experience) .auth-institutional-cta{
    position:absolute;inset-inline:0;top:calc(100% + var(--space-auth-brand-composition-gap))}}
body.auth-environment:not(.landing-environment) .site-footer{
  max-width:none;justify-content:center;padding:var(--space-auth-footer-padding);gap:0;border:0;color:var(--visual-auth-footer-quiet-text);font-size:var(--text-auth-footer)}
body.auth-environment:not(.landing-environment) .site-footer a{color:var(--visual-auth-footer-quiet-text)}
body.auth-environment:not(.landing-environment) .site-footer a+a::before{content:"\00b7";display:inline-block;margin:0 10px;color:var(--visual-auth-footer-separator)}
body.auth-environment:not(.landing-environment) .auth-footer-billing{display:none}

@media(max-height:860px) and (min-width:761px){
  body.auth-environment:not(.landing-environment) main{padding-top:var(--space-auth-compact-main-block);padding-bottom:var(--space-auth-compact-main-block)}
  .auth-experience{gap:var(--space-auth-compact-composition-gap)}
  .auth-brand-introduction{gap:var(--space-auth-compact-intro-gap)}
  .auth-brand-lockup img{width:var(--size-auth-product-icon-compact);height:var(--size-auth-product-icon-compact)}
  .auth-brand-copy h1{font-size:var(--text-auth-compact-headline)}
  .auth-brand-copy p{margin-top:7px;font-size:var(--text-auth-compact-description)}
  body.auth-environment:not(.landing-environment) main .card.auth-card.auth-login-card{padding-top:var(--space-auth-compact-main-block);padding-bottom:var(--space-auth-compact-card-bottom)}
  .auth-context-message{margin-top:-24px}
}
@media(max-width:760px){
  body.auth-environment:not(.landing-environment) main{min-height:auto;padding:var(--space-auth-mobile-main-padding);align-content:start}
  body.auth-environment:not(.landing-environment)::after{content:none;display:none}
  .auth-experience{width:min(100%,520px);gap:var(--space-auth-mobile-composition-gap)}
  .auth-brand-introduction{gap:var(--space-auth-mobile-composition-gap)}
  .auth-brand-copy h1{font-size:var(--text-auth-mobile-headline)}
  .auth-brand-copy p{font-size:var(--text-auth-mobile-description)}
  body.auth-environment:not(.landing-environment) main .card.auth-card.auth-login-card{padding:var(--space-auth-mobile-card-padding);border-radius:var(--radius-auth-mobile-card)}
  .auth-context-message{margin:-26px -20px 22px;border-radius:var(--radius-auth-mobile-context)}
  body.auth-environment:not(.landing-environment) .site-footer{padding:var(--space-auth-mobile-footer-padding);justify-content:center}
}
@media(max-width:640px){
  /* Page side padding shrinks to 14px at this width; match the bleed. */
  .month-calendar{margin-inline:-14px}
}
.state-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:var(--accent-soft);font-size:var(--primitive-font-size-24px);font-weight:700}
.empty-state{text-align:center;padding:var(--primitive-spacing-28px) var(--primitive-spacing-18px)}.empty-state h2{font-size:var(--primitive-font-size-20px)}
.session-progress{display:flex;align-items:center;gap:var(--primitive-spacing-10px)}.session-progress .meter{flex:1}
.field-error{color:var(--danger-fg);font-weight:700;margin-top:7px}
.session-recovery{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-session-recovery-gap);margin-top:var(--space-session-recovery-action);color:var(--text-secondary);font-size:var(--text-session-recovery)}
.session-recovery .text-action{border:0;background:none;color:var(--action-primary-bg);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:var(--space-session-recovery-action)}
.session-recovery details{margin-left:auto}.session-recovery summary{cursor:pointer}.session-recovery details .row{padding:var(--space-session-recovery-options)}
.assess-prerequisite{max-width:720px;margin:0 auto}.assess-prerequisite h1{font-size:var(--text-assess-title)}.assess-prerequisite p{max-width:430px;margin:12px auto 22px}
.correction-panel{max-width:640px;margin:14px auto;text-align:left}
/* SETTINGS AND OWNER TOOLS: grouped panels (VISUAL_IDENTITY_CONSTITUTION 7.25).
   A group is a small uppercase label over one raised panel in the surface the
   study plans and the Calendar card already wear. Rows inside a panel are told
   apart by space alone: a rule under every row was standing in for spacing the
   page had not given them. A row's one action sits at its right edge and wraps
   under the copy when the line is too short, which is the phone layout without
   a second set of rules. Settings adds a section menu on a wide screen. */
.pref-page{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-pref-group);max-width:var(--size-pref-page);margin-top:var(--space-pref-inline)}
.pref-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-pref-action-gap);
  margin:0 0 var(--space-pref-group-head)}
.pref-group-head h2{margin:0;color:var(--text-secondary);font-size:var(--text-pref-group);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pref-list{padding:var(--space-pref-panel-block) var(--space-pref-panel-inline);border-radius:var(--radius-pref-panel);background:var(--surface-panel)}
.pref-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-pref-row-gap);row-gap:var(--space-pref-follow);
  padding:var(--space-pref-row-panel) 0}
.pref-copy{display:grid;gap:var(--space-pref-copy-gap);flex:1 1 var(--size-pref-copy-min);min-width:0}
.pref-title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-pref-inline);color:var(--text-primary);
  font-size:var(--text-pref-title);font-weight:650;line-height:1.3}
.pref-value{color:var(--text-secondary);font-size:var(--text-pref-value);line-height:1.45;overflow-wrap:anywhere}
.pref-meta{color:var(--text-secondary);font-size:var(--text-pref-meta);line-height:1.45;overflow-wrap:anywhere}
.pref-action{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-pref-action-gap);margin-left:auto}
.pref-action select{width:auto;max-width:var(--size-pref-field)}
.pref-detail{flex:1 0 100%;min-width:0}
/* An editor's opener steps aside while the editor is open; Cancel brings it back. */
.pref-action [aria-controls][aria-expanded="true"]{display:none}
.pref-detail:empty,.pref-detail>[role="status"]:empty{display:none}
.pref-detail>[role="status"]:not(:empty){margin-top:var(--space-pref-follow)}

/* The section menu beside the panels. It marks the section being read
   (aria-current), in the panel's own surface so the two read as one system;
   Owner tools sits apart at the foot because it leaves the page. */
.pref-shell{display:grid;grid-template-columns:var(--size-pref-nav) minmax(0,1fr);gap:var(--space-pref-nav-gap);align-items:start;
  margin-top:var(--space-pref-inline)}
.pref-shell>.pref-page{max-width:none;margin-top:0}
.pref-group{scroll-margin-top:var(--content-sticky-top)}
.pref-group-head h2:focus{outline:none}
.pref-nav{position:sticky;top:var(--content-sticky-top);display:grid;gap:var(--space-pref-hairline);margin-left:var(--space-pref-nav-outdent)}
.pref-nav-item{display:flex;align-items:center;gap:var(--space-pref-inline);width:100%;padding:var(--space-pref-nav-item);border:0;
  border-radius:var(--radius-pref-nav);background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--text-pref-nav);
  font-weight:600;text-align:left;text-decoration:none;cursor:pointer;
  transition:background var(--theme-paint-duration,.2s) ease,color var(--theme-paint-duration,.2s) ease}
.pref-nav-item:hover{color:var(--text-primary)}
.pref-nav-item[aria-current]{background:var(--surface-panel);color:var(--text-primary)}
.pref-nav-item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pref-nav-out{margin-top:var(--space-pref-nav-break)}
.pref-nav-out .pref-arrow{margin-left:0;font-size:var(--text-pref-value)}
.pref-nav-out:hover .pref-arrow,.pref-nav-out:focus-visible .pref-arrow{transform:translateX(var(--pref-arrow-travel))}
.pref-shell .pref-owner-row{display:none}
@media(max-width:959px){
  .pref-shell{display:block}
  .pref-nav{display:none}
  .pref-shell .pref-owner-row{display:flex}
}

/* A tag is a fact about the row (Verified, This browser), never an action. */
.pref-tag{display:inline-flex;align-items:center;padding:var(--space-pref-hairline) var(--space-pref-inline);
  border-radius:var(--radius-pref-tag);font-size:var(--text-pref-tag);font-weight:700;letter-spacing:.01em;line-height:1.5}
.pref-tag.good{color:var(--success-fg);background:var(--success-bg)}
.pref-tag.pending{color:var(--warning-fg);background:var(--warning-bg)}
.pref-tag.accent{color:var(--action-primary-bg);background:var(--accent-soft)}
.pref-tag.neutral{color:var(--text-secondary);background:var(--surface-raised)}

/* A row that goes somewhere is a link with the catalog's arrow, which travels
   the way it points (7.16's idiom, not a lift). */
.pref-link{color:inherit;text-decoration:none}
.pref-arrow{margin-left:auto;color:var(--action-primary-bg);font-size:var(--text-pref-arrow);line-height:1;
  transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.pref-link:hover .pref-arrow,.pref-link:focus-visible .pref-arrow{transform:translateX(var(--pref-arrow-travel))}
.pref-link:hover .pref-title{color:var(--action-primary-bg)}
.pref-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-pref-focus)}

/* Editors unfold under their row and keep a reading width. */
.pref-editor{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-pref-action-gap);margin-top:var(--space-pref-detail)}
.pref-editor[hidden]{display:none}
.pref-editor input{flex:1 1 240px;min-width:0;max-width:var(--size-pref-field)}
.pref-editor-stack{display:grid;gap:var(--space-pref-stack);max-width:var(--size-pref-field)}
.pref-editor-stack input{max-width:none}
.pref-editor-stack label{color:var(--text-secondary);font-size:var(--text-pref-meta);font-weight:650}
.pref-editor-actions{display:flex;flex-wrap:wrap;gap:var(--space-pref-action-gap);margin-top:var(--space-pref-follow)}
.pref-detail .verification-code-panel{margin:var(--space-pref-detail) 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.pref-code-label{display:grid;gap:var(--space-pref-hairline);margin:0 0 var(--space-pref-follow)}
.pref-code-label b{font-size:var(--text-pref-value);font-weight:650}
.pref-code-label span{font-size:var(--text-pref-meta)}
.pref-code-row{max-width:var(--size-pref-code)}
.pref-detail .reset-confirm{margin-top:var(--space-pref-detail)}
.pref-billing{display:grid;gap:var(--space-pref-inline);margin-top:var(--space-pref-follow)}
.pref-billing p{margin:0}

/* Quiet actions: a text button for a secondary command in a group header, and
   a destructive command that is outlined, not filled -- the filled red belongs
   to the confirmation, where the decision is actually made. */
/* QUIET COMMANDS (7.26): no chrome at rest; touched, they take the switch's
   groove and sink like every other press. A quiet command is not a link, so it
   carries no underline -- real links keep theirs. */
.pref-quiet{display:inline-flex;align-items:center;min-height:var(--size-action-compact);margin-right:calc(-1 * var(--space-action-inline-compact));
  padding:0 var(--space-action-inline-compact);border:0;border-radius:var(--radius-action-compact);corner-shape:var(--shape-action);
  background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--text-pref-meta);font-weight:600;cursor:pointer;text-decoration:none;
  transition:background-color var(--action-rest-duration) ease-out,color var(--action-rest-duration) ease-out,
    transform var(--action-rest-duration) var(--action-ease)}
@media (hover:hover) and (pointer:fine){.pref-quiet:hover:not(:disabled){background:var(--action-quiet-hover);color:var(--text-primary)}}
.pref-quiet:is(:active,[data-action-owned="true"]):not(:disabled){background:var(--action-quiet-hover);color:var(--text-primary);
  box-shadow:var(--action-press-inset);transform:translateY(var(--action-press-y)) scale(var(--action-press-scale));transition-duration:var(--action-press-duration)}
/* Busy outranks pressed: the label steps aside for the spinner. */
.pref-quiet.pref-quiet[aria-busy="true"]{position:relative;color:transparent;pointer-events:none;cursor:progress}
.pref-quiet[aria-busy="true"]::after{content:"";position:absolute;left:50%;top:50%;width:var(--size-action-spinner-quiet);height:var(--size-action-spinner-quiet);
  margin:calc(-.5 * var(--size-action-spinner-quiet)) 0 0 calc(-.5 * var(--size-action-spinner-quiet));
  border:2px solid color-mix(in srgb,var(--text-secondary) 30%,transparent);border-top-color:var(--text-secondary);border-radius:50%;
  animation:action-button-spin .62s linear infinite}
.pref-action .pref-quiet{font-size:var(--text-pref-value)}
@media (max-width:640px){.pref-quiet{min-height:var(--size-action-touch)}}
@media (prefers-reduced-motion:reduce){.pref-quiet{transition:none}.pref-quiet:active{transform:none}.pref-quiet[aria-busy="true"]::after{animation:none}}
.pref-count{color:var(--text-secondary);font-size:var(--text-pref-meta);font-weight:650;font-variant-numeric:tabular-nums}

/* A setting with two or three answers is one switch (4.9, 7.5): a groove,
   and the answer in force raised in it. Same material as the sheet's
   Appearance switch on a page-coloured ground. */
.pref-choice{display:inline-flex;align-items:center;gap:var(--space-pref-hairline);padding:var(--space-pref-choice-inset);
  border-radius:var(--radius-pref-choice);background:color-mix(in srgb,var(--text-primary) 7%,transparent);
  box-shadow:inset 0 1px 2px rgba(var(--elev-shade),.14)}
.pref-choice-option{border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--text-pref-choice);font-weight:600;
  padding:var(--space-pref-choice-pad);border-radius:var(--radius-pref-choice);cursor:pointer;white-space:nowrap;
  transition:background var(--theme-paint-duration,.2s) ease,color var(--theme-paint-duration,.2s) ease,box-shadow .2s ease}
.pref-choice-option:hover:not(:disabled){color:var(--text-primary)}
.pref-choice-option[aria-pressed="true"]{background:var(--settings-choice-chip);color:var(--text-primary);
  box-shadow:0 1px 2px rgba(var(--elev-shade),.24),0 2px 6px rgba(var(--elev-shade),.1)}
.pref-choice-option:disabled{opacity:.45;cursor:not-allowed}
.pref-choice-option:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}

/* The rest of a long list folds under one quiet line of its own. */
.pref-more>summary{display:flex;align-items:center;gap:var(--space-pref-inline);padding:var(--space-pref-row) 0;
  color:var(--text-secondary);font-size:var(--text-pref-value);font-weight:650;
  cursor:pointer;list-style:none}
.pref-more>summary::-webkit-details-marker{display:none}
.pref-more>summary::after{content:"";width:7px;height:7px;margin-left:var(--space-pref-hairline);border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.pref-more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.pref-more>summary:hover{color:var(--text-primary)}
.pref-more>summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-pref-focus)}
/* Owner tools: a readiness checklist and the one table that is a table. */
.pref-checks{display:grid;gap:var(--space-pref-stack);margin:var(--space-pref-list-top) 0 0;padding:0;list-style:none}
.pref-checks li{display:flex;align-items:center;gap:var(--space-pref-follow);color:var(--text-primary);font-size:var(--text-pref-value)}
.pref-checks .pref-tag{min-width:var(--size-pref-check-tag);justify-content:center}
.pref-note{margin:var(--space-pref-follow) 0 0;color:var(--text-secondary);font-size:var(--text-pref-meta);line-height:1.5}
.pref-table-row{display:block}
.pref-table{width:100%;border-collapse:collapse;font-size:var(--text-pref-table);font-variant-numeric:tabular-nums}
.pref-table th,.pref-table td{padding:var(--space-pref-inline) var(--space-pref-stack);text-align:right;white-space:nowrap}
.pref-table th:first-child,.pref-table tbody th{text-align:left}
.pref-table thead th{color:var(--text-secondary);font-size:var(--text-pref-table-head);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pref-table tbody tr{border-top:1px solid var(--border-subtle)}
.pref-table tbody th{font-size:inherit;font-weight:650;letter-spacing:0;text-transform:none;color:var(--text-primary)}
.pref-page .verification-timeline:empty{display:none}
@media(max-width:640px){
  .pref-page{gap:var(--space-pref-group-compact)}
  /* A narrower floor for the copy keeps a row's one button beside it, as on a
     wide screen, instead of some buttons wrapping under their text and others
     not depending on how long the description runs. */
  .pref-copy{flex-basis:var(--size-pref-copy-min-compact)}
  .pref-action{margin-left:auto;justify-content:flex-end}
  .pref-link .pref-copy{flex-basis:0}
  /* A settings row's switch takes the row's width on a phone. Scoped to the
     row: the switch material is shared, its stretch is a Settings layout. */
  .pref-action .pref-choice{display:flex;width:100%}
  .pref-action .pref-choice-option{flex:1 1 0;padding-left:var(--space-pref-inline);padding-right:var(--space-pref-inline)}
  .pref-action:has(.pref-choice){flex:1 0 100%}
  .pref-editor input{flex-basis:100%;max-width:none}
  .pref-list{padding-left:var(--space-pref-panel-inline-compact);padding-right:var(--space-pref-panel-inline-compact)}
  .pref-action:has(select){flex-wrap:nowrap;width:100%}
  .pref-action select{flex:1 1 0;width:auto;min-width:0;max-width:none}
  .pref-action:has(select) button{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){.pref-arrow,.pref-choice-option,.pref-nav-item{transition:none}}
.danger-zone{border-color:var(--danger-edge)}.reset-description{display:grid;gap:var(--primitive-spacing-2px);margin:10px 0 16px;padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);border-left:3px solid var(--danger-edge);background:var(--danger-bg);border-radius:var(--primitive-radius-0-9px-9px-0)}.reset-description span{color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}.reset-confirm{margin-top:16px;padding:var(--primitive-spacing-16px);border:1px solid var(--danger-edge);border-radius:var(--primitive-radius-10px);background:var(--danger-bg)}.reset-confirm label{display:block;color:var(--text-secondary);font-size:var(--primitive-font-size-13px);font-weight:650;margin-bottom:5px}.reset-confirm input{width:100%;max-width:320px;margin-bottom:12px}
.course-match-grid{grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-16px)}
.course-match-grid .row{padding:var(--primitive-spacing-9px) var(--primitive-spacing-11px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-7px)}
.course-match-grid select{max-width:100%}
@media(max-width:640px){.course-match-grid{grid-template-columns:1fr}.course-match-grid .row{align-items:stretch}.course-match-grid select{width:100%;margin-left:0!important}}
@media(max-width:480px){.match-round-win{display:grid;grid-template-columns:auto 1fr}.match-round-win button{grid-column:1/-1;margin:0;justify-self:start}}

/* Drug Mastery curriculum, catalog, and staged lessons */
.drug-hero{border-left:3px solid var(--action-primary-bg);padding-block:var(--primitive-spacing-22px)}.drug-hero h1{max-width:850px}
.scope-picker{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--primitive-spacing-4px);min-width:min(100%,300px);color:var(--text-secondary);font-size:var(--primitive-font-size-12px);font-weight:700}
.scope-picker select{min-width:240px;color:var(--text-primary)}
.scope-picker-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:var(--space-action-gap)}
.scope-picker-heading>label{margin:0}
.scope-manage-link{display:inline-flex;align-items:center;min-height:var(--size-action-compact);font-size:var(--text-action-compact);font-weight:500;color:var(--text-secondary);text-decoration:none;white-space:nowrap}
.scope-manage-link:hover,.scope-manage-link:focus-visible{color:var(--text-primary);text-decoration:underline}
.scope-explanation{display:flex;align-items:baseline;gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-10px) 0 var(--primitive-spacing-14px);border-bottom:1px solid var(--border-subtle);margin-bottom:8px}
.scope-explanation b{color:var(--text-primary)}.scope-explanation span{color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}
.course-map{display:grid;gap:var(--primitive-spacing-10px)}.course-map-group{border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px);background:var(--surface-card)}
.course-map-group>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-15px) var(--primitive-spacing-18px);cursor:pointer;font-weight:750}
.course-map-group[open]>summary{border-bottom:1px solid var(--border-subtle)}
.course-map-classes{display:grid;padding:var(--primitive-spacing-8px) var(--primitive-spacing-18px)}.course-map-class{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--primitive-spacing-18px);align-items:center;padding:var(--primitive-spacing-14px) 0;border-bottom:1px solid var(--border-subtle)}
.course-map-class:last-child{border-bottom:0}.course-map-class h3,.catalog-row h3{margin:3px 0}.course-map-class p{margin:5px 0}
.drug-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-14px)}.drug-class-card{display:flex;flex-direction:column}.drug-class-card .row{margin-top:auto}
.catalog-filters{display:grid;grid-template-columns:minmax(220px,2fr) 1fr 1fr auto;gap:var(--primitive-spacing-10px);align-items:end}.catalog-filters label{display:grid;gap:var(--primitive-spacing-5px);color:var(--text-secondary);font-weight:700;font-size:var(--primitive-font-size-12px)}
.catalog-list{display:grid;gap:var(--primitive-spacing-10px)}.catalog-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--primitive-spacing-18px);padding:var(--primitive-spacing-17px);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px)}.catalog-row p{margin:4px 0}
.pagination{display:flex;justify-content:center;align-items:center;gap:var(--primitive-spacing-14px);margin:18px}
.drug-lesson-card{max-width:1040px;margin:14px auto}.mode-nav button,.lesson-checkpoints button{min-height:44px}.lesson-summary{font-size:var(--primitive-font-size-18px);color:var(--text-secondary);max-width:760px}.concept-definition{padding:var(--primitive-spacing-16px);border-left:3px solid var(--action-primary-bg);background:var(--accent-soft);border-radius:var(--primitive-radius-0-10px-10px-0);margin:18px 0}
.concept-parts,.member-grid,.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--primitive-spacing-12px);margin:16px 0}.concept-part,.member-card{padding:var(--primitive-spacing-15px);background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px)}.concept-part h3,.member-card h3{margin-top:0}
.exact-name-study{display:grid;gap:var(--primitive-spacing-5px);margin:20px 0;padding:var(--primitive-spacing-17px) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.exact-name-study span{color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.exact-name-study strong{font-size:var(--primitive-font-size-clamp-25px-4vw-38px);letter-spacing:.015em;overflow-wrap:anywhere}.exact-name-study p{margin:0;color:var(--text-secondary)}
.drug-set-options{max-width:760px;margin-inline:auto}.drug-set-options button.sel{border-color:var(--action-primary-bg);background:var(--accent-soft);color:var(--text-primary);box-shadow:inset 3px 0 0 var(--action-primary-bg)}
/* Keep the submission action separate from the choices/content it submits,
   including when a selected answer grows to show its state. */
.drug-question-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-drug-question-action-gap);margin-top:var(--space-drug-question-action)}
.drug-recovery-actions{display:flex;flex-wrap:wrap;gap:var(--space-drug-recovery-action-gap);padding-top:var(--space-drug-recovery-action)}
.component-line{display:flex;align-items:center;gap:var(--primitive-spacing-8px);flex-wrap:wrap}.component-line span{padding:var(--primitive-spacing-5px) var(--primitive-spacing-9px);border-radius:var(--primitive-radius-999px);background:var(--accent-soft);border:1px solid var(--action-primary-bg);font-weight:700}.component-line b{color:var(--text-secondary)}
.product-detail{margin-top:18px}.source-note{color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.source-note a{color:var(--visual-source-note-text)}.lesson-actions{justify-content:flex-end;margin-top:20px}
.lesson-actions .lesson-action-spacer{flex:1}
.lesson-checkpoints{max-width:1040px;margin:12px auto 0;padding-bottom:var(--primitive-spacing-10px);border-bottom:1px solid var(--border-subtle)}
.checkpoint-heading{display:block;margin-bottom:7px;color:var(--text-secondary);font-size:var(--primitive-font-size-12px);font-weight:700}
.lesson-checkpoints ol{display:flex;gap:var(--primitive-spacing-6px);overflow-x:auto;list-style:none;margin:0;padding:0 0 var(--primitive-spacing-5px);scrollbar-width:thin}
.lesson-checkpoint{display:flex;align-items:center;gap:var(--primitive-spacing-7px);min-height:38px;padding:var(--primitive-spacing-6px) var(--primitive-spacing-10px);white-space:nowrap;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-6px);background:transparent;color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}
.lesson-checkpoint:not(:disabled):hover{border-color:var(--action-primary-bg);color:var(--text-primary);background:var(--accent-soft)}
.lesson-checkpoint.completed{color:var(--text-primary);border-color:var(--visual-lesson-checkpoint-completed-border)}
.lesson-checkpoint.current{color:var(--visual-lesson-checkpoint-current-text);background:var(--action-primary-bg);border-color:var(--action-primary-bg);font-weight:700}
.lesson-checkpoint.upcoming{opacity:.55}.lesson-checkpoint:disabled{cursor:not-allowed}
.checkpoint-number{display:grid;place-items:center;min-width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font-variant-numeric:tabular-nums;font-size:var(--primitive-font-size-10px)}
.reviewing-label{padding:var(--primitive-spacing-5px) var(--primitive-spacing-8px);border-left:2px solid var(--action-primary-bg);color:var(--action-primary-bg);font-size:var(--primitive-font-size-12px);font-weight:700}

/* Therapeutic-group color is a persistent learning scaffold. Every cue retains
   a written label, and independent Practice/Review questions do not receive
   these category surfaces. */
.tg-surface{--tg-accent:var(--therapeutic-surface-accent);--tg-soft:var(--therapeutic-surface-soft);--tg-ink:var(--therapeutic-surface-ink);--tg-line:var(--therapeutic-surface-line)}
.tg-cns-pain{--tg-accent:var(--therapeutic-cns-pain-accent);--tg-soft:var(--therapeutic-cns-pain-soft);--tg-ink:var(--therapeutic-cns-pain-ink);--tg-line:var(--therapeutic-cns-pain-line)}
.tg-respiratory-allergy{--tg-accent:var(--therapeutic-respiratory-allergy-accent);--tg-soft:var(--therapeutic-respiratory-allergy-soft);--tg-ink:var(--therapeutic-respiratory-allergy-ink);--tg-line:var(--therapeutic-respiratory-allergy-line)}
.tg-derm-ent{--tg-accent:var(--therapeutic-derm-ent-accent);--tg-soft:var(--therapeutic-derm-ent-soft);--tg-ink:var(--therapeutic-derm-ent-ink);--tg-line:var(--therapeutic-derm-ent-line)}
.tg-endocrine-metabolic{--tg-accent:var(--therapeutic-endocrine-metabolic-accent);--tg-soft:var(--therapeutic-endocrine-metabolic-soft);--tg-ink:var(--therapeutic-endocrine-metabolic-ink);--tg-line:var(--therapeutic-endocrine-metabolic-line)}
.tg-gastrointestinal{--tg-accent:var(--therapeutic-gastrointestinal-accent);--tg-soft:var(--therapeutic-gastrointestinal-soft);--tg-ink:var(--therapeutic-gastrointestinal-ink);--tg-line:var(--therapeutic-gastrointestinal-line)}
.tg-cardiovascular{--tg-accent:var(--therapeutic-cardiovascular-accent);--tg-soft:var(--therapeutic-cardiovascular-soft);--tg-ink:var(--therapeutic-cardiovascular-ink);--tg-line:var(--therapeutic-cardiovascular-line)}
.tg-infectious-disease{--tg-accent:var(--therapeutic-infectious-disease-accent);--tg-soft:var(--therapeutic-infectious-disease-soft);--tg-ink:var(--therapeutic-infectious-disease-ink);--tg-line:var(--therapeutic-infectious-disease-line)}
.tg-immunology-oncology{--tg-accent:var(--therapeutic-immunology-oncology-accent);--tg-soft:var(--therapeutic-immunology-oncology-soft);--tg-ink:var(--therapeutic-immunology-oncology-ink);--tg-line:var(--therapeutic-immunology-oncology-line)}
.tg-genitourinary{--tg-accent:var(--therapeutic-genitourinary-accent);--tg-soft:var(--therapeutic-genitourinary-soft);--tg-ink:var(--therapeutic-genitourinary-ink);--tg-line:var(--therapeutic-genitourinary-line)}
.therapeutic-group-label{display:inline-flex;align-items:center;gap:var(--primitive-spacing-8px);color:var(--tg-ink);font-size:var(--primitive-font-size-12px);font-weight:700;line-height:1.35}
.therapeutic-group-label i{display:inline-block;width:10px;height:10px;border-radius:var(--primitive-radius-2px);background:var(--tg-accent);border:1px solid color-mix(in srgb,var(--tg-accent),var(--visual-therapeutic-group-label-contrast) 12%)}
.therapeutic-lesson-list{display:grid;gap:var(--primitive-spacing-28px)}
.therapeutic-lesson-section{border-top:3px solid var(--tg-accent)}
.therapeutic-lesson-section>header{display:block;padding:var(--primitive-spacing-13px) 0 var(--primitive-spacing-8px);border-bottom:1px solid var(--tg-line)}
.therapeutic-lesson-section>header p{margin:3px 0 0;color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}
.class-course-context{color:var(--text-secondary);font-size:var(--primitive-font-size-11px)}
.therapeutic-context{max-width:1040px;margin:0 auto 12px;display:grid;grid-template-columns:minmax(180px,auto) minmax(0,1fr);align-items:center;gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-9px) var(--primitive-spacing-12px);background:var(--tg-soft);border-left:3px solid var(--tg-accent);border-bottom:1px solid var(--tg-line)}
.therapeutic-context>span{min-width:0;color:var(--text-primary);font-size:var(--primitive-font-size-12px);overflow-wrap:anywhere}
.drug-lesson-card.tg-surface{border-top:3px solid var(--tg-accent)}
.member-card.tg-surface{background:var(--tg-soft);border-color:var(--tg-line)}











@media(max-width:760px){.drug-class-grid{grid-template-columns:1fr}.catalog-filters{grid-template-columns:1fr 1fr}.catalog-filters label:first-child{grid-column:1/-1}.catalog-filters button{width:100%}}
@media(max-width:640px){.course-map-group>summary{align-items:flex-start}.course-map-class,.catalog-row{grid-template-columns:1fr}.catalog-filters{grid-template-columns:1fr}.catalog-filters label:first-child{grid-column:auto}.scope-picker,.scope-picker select{width:100%;min-width:0}.scope-explanation{display:grid;gap:var(--primitive-spacing-3px)}.drug-lesson-card{padding:var(--primitive-spacing-16px)}.therapeutic-context{grid-template-columns:1fr;gap:var(--primitive-spacing-4px)}.session-progress{flex-wrap:wrap}.session-progress .meter{min-width:55%}.lesson-checkpoints{margin-top:8px}}

/* Purpose-built academic layout */
.card:has(.prompt),.card:has(.opts),.card:has(.answerbox),.card:has(.matchgrid),
/* .activity-stage is on this list because THE STAGE is the surface, whichever
   activity is standing on it. The question card only ever got its panel via
   .drug-lesson-card, so the ready card -- same component, no lesson class --
   came out transparent and edgeless, floating on the page with no boundary. */
.learncard,#learnBody,#revBody,#mBody,.drug-lesson-card,.activity-stage,.calc-question,.assigned-question,
.assigned-study,.assigned-session-builder,.auth-card,.system-state,.empty-state,.review-builder{
  background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-7px);padding:var(--primitive-spacing-22px);
}
/* AN ACTIVITY IS A SURFACE, NOT AN OUTLINE (7.27). The stage above is one
   panel of the page's own material; a pale perimeter around it was a second
   edge on top of the tone that already separates it -- the "border colour"
   Charles called out. The stage rule further up meant to remove it, but this
   list sits later in the sheet at the same specificity and put it back, so
   the perimeter is removed here, where it was drawn. */
.card:has(.prompt),.card:has(.opts),.card:has(.answerbox),.card:has(.matchgrid),
.learncard,#learnBody,#revBody,#mBody,.drug-lesson-card,.activity-stage,.calc-question,.assigned-question{
  border:0;box-shadow:var(--elev-1)}
/* A COURSE QUESTION IS READ LIKE AN EXAM (7.27). Skills activities stand
   on a card because they are drills -- a deck you work through. A course
   question is the course's own material, so it is set the way the assessment
   runner sets one: no panel, the prompt in the page's ink at the exam size,
   and the answer choices as the only boxes. Prompt, choices and feedback
   share one left edge. The blue light-mode stage this replaces (Sept 2026)
   gave light and dark two different components; there is one now. */
.card.course-question-stage{background:transparent;border:0;box-shadow:none;padding:0;color:var(--text-primary)}
.card.course-question-stage .prompt.course-stage-prompt{margin:0;text-align:left;font-size:var(--text-exam-prompt);line-height:1.35;
  font-weight:650;letter-spacing:-.01em;color:var(--text-primary)}
.course-question-stage .opts{max-width:none;margin:var(--space-exam-gap) 0 0}
/* Course answer choices use fill and the existing inset status bar for state.
   Their perimeter stays quiet in idle, hover, selected, and graded states. */
.course-question-stage .opts button{border-color:transparent}
/* With no stage under them, the choices stand on the page itself, so they
   take the card fill -- white on the light page, the panel tone on the dark
   one -- where the raised fill would match the page and vanish -- and the
   same first elevation as a Skills card, which is what grounds white on the
   pale page. Hover lifts one step; a marked answer keeps its status bar. */
.course-question-stage .opts button:not(.correct):not(.wrong):not(.sel){background:var(--surface-card);box-shadow:var(--elev-1)}
@media (hover:hover) and (pointer:fine){
  .course-question-stage .opts button:not(:disabled):not(.correct):not(.wrong):not(.sel):hover{box-shadow:var(--elev-2)}
}
/* Everything in the question -- the multi-select note, the submit action,
   the feedback -- reads down the same left edge as the prompt and the
   choices. The shared .center and the note's own centred measure were made
   for a centred card. */
.course-question-stage :is(#cqAfter,.center){text-align:left}
.course-question-stage .multi-help{max-width:none;margin:var(--space-exam-gap) 0 0}
.course-question-stage .multi-help+.opts{margin-top:var(--space-learn-panel-compact)}
.course-question-stage .opts button.correct,
.course-question-stage .opts button.wrong{border-color:transparent!important}
/* Focus mode for course question sessions (advanced-study.js
   courseSessionHeader). One row owns leaving, progress and position; the
   question follows a single quiet line naming the pass and the item's level.
   On phones that row replaces the app header and footer, and the actions row
   settles at the bottom of the screen, within reach of the thumb and far from
   the corner exit. Keyed off the header being on the page, so leaving the
   session by any route restores the shell without cleanup. */
.course-session-header,.course-session-brow{width:100%;max-width:760px;margin-left:auto;margin-right:auto}
.course-session-header{display:flex;align-items:center;gap:var(--space-course-session-gap);min-height:var(--size-action-touch)}
.course-session-exit{flex:0 0 auto;display:grid;place-items:center;width:var(--size-action-touch);height:var(--size-action-touch);min-height:0;
  margin:0 0 0 var(--space-course-session-exit-pull);padding:0;border:0;border-radius:var(--radius-course-session-round);
  background:transparent;box-shadow:none;color:var(--text-secondary);transition:color .15s ease,background-color .15s ease}
.course-session-exit svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.course-session-exit:hover{color:var(--text-primary);background:var(--surface-card)}
.course-session-exit:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.course-session-progress{flex:1 1 auto;height:8px;overflow:hidden;border-radius:var(--radius-course-session-round);background:var(--border-subtle)}
.course-session-progress i{display:block;width:var(--course-session-filled,0%);height:100%;border-radius:inherit;background:var(--progress-fg);
  transition:width .45s cubic-bezier(.2,.75,.25,1)}
.course-session-count{flex:0 0 auto;font-size:var(--text-course-session-count);font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.course-session-brow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-course-session-brow-gap);
  margin-top:var(--space-course-session-brow-top);margin-bottom:var(--space-course-session-brow-bottom);
  font-size:var(--text-course-session-brow);font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary)}
.course-session-brow>span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 var(--space-course-session-dot) 0 0;
  border-radius:var(--radius-course-session-round);background:currentColor;vertical-align:middle;opacity:.55}
.course-session-level{color:var(--info-fg)}
.course-session-level[data-outcome="correct"]{color:var(--success-fg)}
.course-session-level[data-outcome="incorrect"]{color:var(--danger-fg)}
.course-session-return{margin-left:auto;min-height:0;padding:0;line-height:inherit;border:0;background:transparent;box-shadow:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--text-secondary)}
.course-session-return:hover{color:var(--text-primary)}
.course-review-actions{margin-top:var(--space-course-review-actions)}
.course-exit-sheet{width:min(420px,100%)}
.course-exit-sheet h2{margin:0}
.course-exit-resume{margin:var(--space-course-exit-resume) 0 0;font-size:var(--text-course-exit-resume);color:var(--text-secondary)}
.course-exit-sheet .course-exit-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-course-exit-stats-gap);margin:var(--space-course-exit-stats-block) 0}
.course-exit-sheet .course-exit-stats>div{display:flex;flex-direction:column-reverse;gap:var(--space-course-exit-stat-gap);padding:0;border:0}
.course-exit-sheet .course-exit-stats dt{font-size:var(--text-course-exit-label);font-weight:500;color:var(--text-secondary)}
.course-exit-sheet .course-exit-stats dd{margin:0;font-size:var(--text-course-exit-value);font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums}
.course-exit-stats .is-correct dd{color:var(--success-fg)}
.course-exit-actions{display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:var(--space-course-exit-actions-gap)}
.course-exit-saved{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-course-exit-saved-gap);margin:var(--space-course-exit-saved-top) 0 0;
  font-size:var(--text-course-exit-saved);color:var(--text-secondary)}
.course-exit-saved svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  body:has(#main>[data-course-session-header])>header,
  body:has(#main>[data-course-session-header])>.site-footer{display:none}
  body:has(#main>[data-course-session-header]){--app-header-height:0px;--app-sticky-obstruction:0px}
  main:has(>[data-course-session-header]){display:flex;flex-direction:column;min-height:100dvh;
    padding-top:var(--space-course-session-phone-top);
    padding-bottom:var(--space-course-session-phone-bottom)}
  main:has(>[data-course-session-header])>.course-question-stage{flex:1 0 auto;display:flex;flex-direction:column}
  main:has(>[data-course-session-header])>.course-question-stage>#cqAfter{flex:1 0 auto;display:flex;flex-direction:column}
  main:has(>[data-course-session-header])>.course-question-stage>#cqAfter>.stage-actions:last-child,
  main:has(>[data-course-session-header])>.course-question-stage>.course-review-actions{margin-top:auto;padding-top:var(--space-course-review-actions)}
}
@media (max-width:760px){
  .course-exit-sheet{width:100%}
  .course-exit-actions{flex-direction:column;gap:var(--space-course-exit-actions-gap-compact)}
  .course-exit-actions button{width:100%}
  .course-exit-saved{justify-content:center}
}
/* ===================== Authentication environment =====================
   Shared signed-out controls. The landing and account-access canvas colors
   are assigned separately below, after their respective page styles. */
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{
  /* The stored workspace preference remains on <html>, but this environment
     owns its own rail. These values terminate inherited workspace chrome at
     the signed-out boundary rather than changing or restoring preference
     state during authentication. */



  }
/* Landing and account access share signed-out controls. Their page canvases
   are assigned by route in the canvas rules below. */
body.auth-environment>header{background:transparent;border:0;box-shadow:none}

/* --- signed-out grounds ------------------------------------------------
   Nothing is painted behind the signed-out pages. There used to be a canvas
   here -- a starfield -- shared by the overview and sign-in; it was removed
   (7.26) so each page owns its own ground: the overview's hero paints its own
   ink-blue and its chapters their own paper, and account access sits on the
   product's paper. main and the footer stay transparent so each route's own
   body ground is what shows, with nothing layered beneath it. */
body.auth-environment main,body.auth-environment .site-footer{
  position:relative;z-index:1;background-color:transparent}
/* The theme control has nothing left to act on here: the auth environment is
   navy in both themes by design, so the toggle would change one card's tone on
   a screen with nothing else on it. The preference still persists and applies
   inside the product. */
body.auth-environment .theme-toggle{display:none}
/* Optically centred. The card used to hang from a top margin inside a tall
   min-height, leaving ~184px above it and ~440px below. */
body.auth-environment main{
  max-width:none;background-image:none;
  display:grid;align-content:center;
  padding:clamp(var(--primitive-spacing-20px),var(--primitive-spacing-5vh),var(--primitive-spacing-60px)) var(--primitive-spacing-28px) clamp(var(--primitive-spacing-60px),var(--primitive-spacing-13vh),var(--primitive-spacing-150px))}
/* Legal links stay quietly at the foot of the shared environment. */
body.auth-environment .site-footer{
  max-width:none;border-top:0;background-image:none;
  color:var(--visual-auth-site-footer-text);padding-right:var(--primitive-spacing-28px)}
body.auth-environment .site-footer a{color:var(--visual-auth-site-footer-text)}
body.auth-environment .site-footer a:hover{color:var(--visual-auth-site-footer-text-hover)}
.card.auth-card.auth-login-card{
  width:min(100%,448px);max-width:448px;margin:clamp(42px,8vh,92px) auto;padding:var(--primitive-spacing-32px) var(--primitive-spacing-34px) var(--primitive-spacing-30px);
  background:var(--visual-card-auth-card-auth-login-card-surface);border:var(--visual-card-auth-card-auth-login-card-outline);border-radius:var(--primitive-radius-16px);
  box-shadow:0 16px 38px rgba(var(--elev-shade),.09),0 2px 6px rgba(var(--elev-shade),.05)
}
body.auth-environment .card.auth-card{
  width:min(100%,448px);max-width:448px;
  margin:0 auto
}
.auth-login-card>h2{margin:0 0 22px;font-size:var(--primitive-font-size-28px);line-height:1.12;letter-spacing:-.035em;font-weight:760}
.auth-login-card .auth-form{gap:var(--primitive-spacing-15px)}
.auth-login-card .auth-field{gap:var(--primitive-spacing-7px)}
.auth-login-card .auth-field label{font-size:var(--primitive-font-size-14px);color:var(--text-primary);font-weight:650}
.auth-login-card .auth-field input{min-height:48px;background:var(--visual-auth-login-card-auth-field-surface);border-color:var(--visual-auth-login-card-auth-field-border);border-radius:var(--primitive-radius-9px)}
.auth-login-card .auth-field input:focus{border-color:var(--visual-auth-login-card-auth-field-border-9aa9e3e2);box-shadow:0 0 0 3px rgba(var(--elev-tint),.17)}
.auth-login-card .auth-actions{display:grid;gap:var(--primitive-spacing-8px);margin-top:2px}
.auth-login-card .auth-actions .primary{width:100%;min-height:var(--size-action-large);border-radius:var(--radius-action-large);font-size:var(--text-action-large)}
/* Submit and Google are one height and one corner; Google keeps its dark face. */
.auth-login-card .provider-button{min-height:var(--size-action-large);border-radius:var(--radius-action-large);font-size:var(--text-action-large)}
.auth-login-card .auth-actions .primary[aria-busy="true"]{cursor:wait}
.auth-error-slot{display:block;min-height:18px;color:var(--danger-fg)!important;font-size:var(--primitive-font-size-12-5px);line-height:1.35}
.auth-error-slot:empty{display:none}
.auth-recovery-link{justify-self:end;margin-top:-4px;font-size:var(--primitive-font-size-13-5px);font-weight:600}
.auth-switch{display:flex;align-items:baseline;justify-content:center;gap:var(--primitive-spacing-5px);margin:2px 0 0;color:var(--visual-auth-switch-text);font-size:var(--primitive-font-size-13-5px)}
.auth-switch-link{appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--visual-auth-switch-link-text)!important;padding:0!important;min-height:0!important;font:inherit;font-weight:700;line-height:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.auth-switch-link:hover{color:var(--visual-auth-switch-link-text-hover)!important}
.auth-intro{margin:-7px 0 19px;color:var(--visual-auth-intro-text);line-height:1.45;font-size:var(--primitive-font-size-14px)}
.auth-registration-card{padding-top:var(--primitive-spacing-29px);padding-bottom:var(--primitive-spacing-24px)}
.auth-registration-card>h2{margin-bottom:18px}
.auth-registration-card .auth-form{gap:var(--primitive-spacing-12px)}
.auth-password-guidance{margin:-3px 0 0;color:var(--visual-auth-password-guidance-text);font-size:var(--primitive-font-size-12-5px);line-height:1.35}
.auth-registration-card .legal-note{margin:2px 0 0;color:var(--visual-auth-registration-card-legal-note-text);font-size:var(--primitive-font-size-11-5px);line-height:1.42;text-align:center}
/* Auth keeps its blue palette regardless of the saved workspace theme.
   The column supplies the surface; the form itself stays transparent. */
body.auth-environment main .card.auth-card{background:transparent;color:var(--text-primary);border:0;box-shadow:none}
body.auth-environment main .auth-login-card .auth-field input{background:var(--visual-auth-auth-login-card-auth-field-surface);color:var(--visual-auth-auth-login-card-auth-field-text);border-color:var(--visual-auth-auth-login-card-auth-field-border)}
body.auth-environment main .auth-switch{color:var(--visual-auth-auth-switch-text)}
body.auth-environment main .auth-switch-link{color:var(--visual-auth-auth-switch-link-text)!important}
body.auth-environment main .auth-intro,body.auth-environment main .auth-password-guidance,
body.auth-environment main .auth-registration-card .legal-note{color:var(--visual-auth-auth-intro-text)}
@media(max-height:820px) and (min-width:761px){
  body.auth-environment main{padding-top:var(--primitive-spacing-18px);padding-bottom:var(--primitive-spacing-58px)}
  .card.auth-card.auth-login-card{padding-top:var(--primitive-spacing-27px);padding-bottom:var(--primitive-spacing-24px)}
  .auth-login-card>h2{margin-bottom:18px}
  .auth-login-card .auth-form{gap:var(--primitive-spacing-12px)}
  .auth-registration-card .auth-field input{min-height:44px}
  .auth-registration-card .auth-intro{margin-bottom:14px}
}
@media(max-width:760px){
  body.auth-environment .card.auth-card{margin-left:auto;margin-right:auto}
  body.auth-environment main{padding-bottom:clamp(var(--primitive-spacing-40px),var(--primitive-spacing-9vh),var(--primitive-spacing-90px))}
  /* Wrap as whole links rather than breaking mid-word, which four flex items
     do at 390px. */
  body.auth-environment .site-footer{
    justify-content:flex-start;padding-inline:var(--primitive-spacing-14px);flex-wrap:wrap;gap:var(--primitive-spacing-10px) var(--primitive-spacing-18px)}
}
@media(max-width:640px){
  .card.auth-card.auth-login-card{padding:var(--primitive-spacing-26px) var(--primitive-spacing-20px) var(--primitive-spacing-28px);border-radius:var(--primitive-radius-12px)}
  .auth-login-card>h2{margin-bottom:22px;font-size:var(--primitive-font-size-25px)}
  .auth-switch{flex-wrap:wrap}
}
/* The form belongs to a quiet left column in the shared star field. Keep the
   surface outside the animated form so switching auth steps does not move it. */
body.auth-environment:not(.landing-environment){--auth-column:clamp(420px,36vw,580px)}
body.auth-environment:not(.landing-environment)::before{
  content:"";display:block;position:fixed;inset:0 auto 0 0;width:var(--auth-column);z-index:0;pointer-events:none;
  background:var(--visual-auth-body-surface);
  border-right:var(--visual-auth-body-right-outline)}
body.auth-environment:not(.landing-environment)::after{
  content:"";position:fixed;inset:0 0 0 var(--auth-column);z-index:0;pointer-events:none;
  background:var(--visual-auth-body-surface-96e7bfed)}
body.auth-environment:not(.landing-environment) main{
  width:var(--auth-column);min-height:calc(100svh - var(--app-header-height) - 70px);
  margin:0;padding:var(--primitive-spacing-48px) clamp(var(--primitive-spacing-28px),var(--primitive-spacing-3-5vw),var(--primitive-spacing-64px)) var(--primitive-spacing-72px)}
body.auth-environment:not(.landing-environment) main .card.auth-card{
  width:100%;max-width:370px;margin:0 auto;padding:0;border-radius:0}
body.auth-environment:not(.landing-environment) .auth-login-card>h2{
  font-size:var(--primitive-font-size-32px);letter-spacing:-.035em;margin-bottom:var(--space-auth-heading-action-gap)}
body.auth-environment:not(.landing-environment) .auth-form{gap:var(--primitive-spacing-19px)}
body.auth-environment:not(.landing-environment) .auth-field input{min-height:50px;color-scheme:dark}
body.auth-environment:not(.landing-environment) .auth-recovery-link{color:var(--visual-auth-auth-recovery-link-text)}
body.auth-environment:not(.landing-environment) .password-toggle{color:var(--visual-auth-password-toggle-text)}
body.auth-environment:not(.landing-environment) .auth-error-slot{color:var(--danger-fg)!important}
body.auth-environment:not(.landing-environment) .auth-switch{margin-top:10px;font-size:var(--primitive-font-size-13px)}
body.auth-environment:not(.landing-environment) .legal-note a{color:var(--visual-auth-legal-note-text)}
body.auth-environment:not(.landing-environment) .site-footer{position:relative;z-index:1}
@media(max-width:760px){
  body.auth-environment:not(.landing-environment){--auth-column:100%}
  body.auth-environment:not(.landing-environment)::before{border:0;background:
    var(--visual-auth-body-surface-28183b04)}
  body.auth-environment:not(.landing-environment) main{padding:var(--primitive-spacing-38px) var(--primitive-spacing-26px) var(--primitive-spacing-54px)}
  body.auth-environment:not(.landing-environment) .site-footer{justify-content:center;padding:var(--primitive-spacing-18px) var(--primitive-spacing-20px)}
}
@media(max-height:740px) and (min-width:761px){
  body.auth-environment:not(.landing-environment) main{padding-top:var(--primitive-spacing-26px);padding-bottom:var(--primitive-spacing-34px)}
  body.auth-environment:not(.landing-environment) .auth-form{gap:var(--primitive-spacing-13px)}
}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--primitive-spacing-28px);padding:var(--primitive-spacing-4px) 0 var(--primitive-spacing-22px);border-bottom:1px solid var(--border-subtle);margin-bottom:24px}
.page-heading h1{font-size:var(--primitive-font-size-clamp-27px-4vw-39px);line-height:1.08;max-width:760px;margin:0 0 9px;letter-spacing:-.03em}
.page-heading h2{font-size:var(--primitive-font-size-clamp-24px-3-5vw-34px);line-height:1.12;margin:0 0 8px}
.page-heading p{max-width:680px;color:var(--text-secondary);margin:0}.page-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--primitive-spacing-9px);flex-wrap:wrap}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:var(--primitive-spacing-18px);padding-bottom:var(--primitive-spacing-9px);border-bottom:1px solid var(--border-subtle);margin:28px 0 0}
.section-heading h2{font-size:var(--primitive-font-size-18px);margin:0}.section-heading p{margin:0;color:var(--text-secondary)}
main h1[tabindex="-1"]:focus,main h2[tabindex="-1"]:focus{outline:none}

.study-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-block:1px solid var(--border-subtle);margin:18px 0 28px}
.study-status>div{padding:var(--primitive-spacing-13px) var(--primitive-spacing-16px);border-right:1px solid var(--border-subtle)}
.study-status>div:last-child{border-right:0}.study-status b{display:block;font-size:var(--primitive-font-size-23px);line-height:1.1}.study-status span{display:block;color:var(--text-secondary);font-size:var(--primitive-font-size-12px);margin-top:4px}

/* The page reads greeting, what is due, then work: one source order serves
   the phone's single column, and on a wide screen the due list simply moves
   beside the work it would otherwise sit above. */
.planner-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,320px);grid-template-rows:auto 1fr;grid-template-areas:"head rail" "work rail";gap:var(--primitive-spacing-46px);row-gap:0;align-items:start}
.planner-layout>.today-heading{grid-area:head}.planner-layout>.planner-rail{grid-area:rail}.planner-layout>.today-workspace{grid-area:work}
.planner-kicker{display:flex;align-items:center;justify-content:center;gap:var(--space-learn-tight);color:var(--text-secondary);font-size:var(--primitive-font-size-12px);font-weight:680;letter-spacing:.025em;margin-bottom:8px}
.planner-title{font-size:var(--primitive-font-size-clamp-30px-4vw-42px);line-height:1.06;margin:0;letter-spacing:-.035em}
.today-heading{display:block;padding:var(--space-today-heading-top) 0 var(--space-today-heading-bottom);text-align:center}
.today-section{margin-top:38px}.today-section>header{position:static;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--primitive-spacing-24px);padding:0;border:0;background:transparent;color:var(--text-primary)}
.today-continue{margin-top:var(--space-today-intro-gap)}
.today-section>header h2{margin:0;font-size:var(--primitive-font-size-21px);letter-spacing:-.015em}.today-section>header p{margin:4px 0 0;color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}.today-section>header>a{color:var(--action-primary-bg);font-size:var(--primitive-font-size-13px);font-weight:700;text-decoration:none;white-space:nowrap}.today-section>header>a:hover,.today-section>header>a:focus-visible{text-decoration:underline}
.learning-tool-list a[data-action-owned="true"],.study-plan-preview>a[data-action-owned="true"],.study-plan-row[data-action-owned="true"],.catalog-entry-row[data-action-owned="true"]{transform:translateY(1px) scale(.994);box-shadow:0 1px 2px rgba(var(--elev-shade),.14),0 3px 7px rgba(var(--elev-tint),.08);transition-duration:var(--action-press-duration)}
.today-data-slot[aria-busy="true"]{pointer-events:none}.today-loading-list i{display:block;min-height:82px;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-13px);background:var(--surface-raised);opacity:.62}.today-loading-line{display:block;height:52px;margin-top:14px;border-radius:var(--primitive-radius-10px);background:var(--surface-raised);opacity:.62}.today-assignments-loading[aria-busy="true"]{display:grid;gap:var(--primitive-spacing-10px)}.today-assignments-loading[aria-busy="true"] span{display:block;height:48px;border-radius:var(--primitive-radius-8px);background:var(--surface-raised);opacity:.62}.today-assignments-loading[aria-busy="true"] span:first-child{height:72px;border-radius:0}
.due-ledger{border-top:1px solid var(--border-subtle)}
.due-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--primitive-spacing-18px);padding:var(--primitive-spacing-13px) 0;border-bottom:1px solid var(--border-subtle)}
.due-row span{color:var(--text-secondary)}.due-row b{font-size:var(--primitive-font-size-20px);font-variant-numeric:tabular-nums}.due-row.is-due b{color:var(--action-primary-bg)}
/* One due card in both themes: a raised surface separates it from the work
   beside or below it, so no rule has to. */
.planner-rail{position:sticky;top:105px;padding:var(--space-planner-rail-inset);border-radius:var(--radius-planner-rail);background:var(--surface-panel);box-shadow:var(--elev-2)}
.planner-rail .today-assignment-row:last-of-type{border-bottom-color:transparent}.planner-rail h2{font-size:var(--primitive-font-size-18px);margin:0 0 10px}
/* The dark sidebar gets a slight surface lift (~3% luminance) so the rail
   reads as its own region rather than relying on a lone vertical rule. */

.report-section{margin-top:30px}.report-section>header{position:static;background:transparent;border:0;border-bottom:1px solid var(--border-subtle);padding:0 0 var(--primitive-spacing-8px);margin-bottom:0}
.report-section>header h2{font-size:var(--primitive-font-size-17px);margin:0}.report-section>header p{color:var(--text-secondary);margin:0 0 0 auto;font-size:var(--primitive-font-size-13px)}

.academic-split{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:var(--primitive-spacing-44px);align-items:start}
.academic-rail{border-left:1px solid var(--border-subtle);padding-left:var(--primitive-spacing-22px);position:sticky;top:106px}.academic-rail h2{font-size:var(--primitive-font-size-15px);margin:0 0 9px}.academic-rail p{color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}.academic-rail .row{display:grid;align-items:stretch}.academic-rail button{width:100%}
.workbook-layout{display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr);gap:var(--primitive-spacing-42px);align-items:start}.workbook-layout>*{min-width:0}.workbook-rail{min-width:0;position:sticky;top:106px;border-right:1px solid var(--border-subtle);padding-right:var(--primitive-spacing-22px)}.workbook-rail .scope-picker,.workbook-rail .scope-picker select{width:100%;min-width:0;max-width:100%}.workbook-rail h2{font-size:var(--primitive-font-size-15px)}.workbook-rail p{color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}
.workbook-main>.section-heading{margin-top:0}.drug-class-grid{grid-template-columns:1fr;gap:0}
.drug-class-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--primitive-spacing-26px);padding:var(--primitive-spacing-20px) 0;border-top:0;border-bottom:1px solid var(--border-subtle);margin:0}
.drug-class-card h2{font-size:var(--primitive-font-size-19px);margin:4px 0 6px}.drug-class-card>p{max-width:760px;margin:5px 0}.drug-class-card .row{grid-column:2;grid-row:1/5;align-self:center;display:grid;justify-items:end;margin:0}.drug-class-card .class-progress{order:2;margin-top:8px;text-align:right;justify-items:end}
.class-report-list{display:grid}.class-report-row{display:grid;grid-template-columns:minmax(280px,1.25fr) minmax(230px,.85fr) auto;gap:var(--primitive-spacing-24px);align-items:center;padding:var(--primitive-spacing-17px) 0;border-bottom:1px solid var(--border-subtle)}
.class-report-row:last-child{border-bottom:0}.class-report-row h3{font-size:var(--primitive-font-size-16px);margin:2px 0 7px;color:var(--text-primary);text-transform:none;letter-spacing:0}.class-report-context{display:block;margin-top:3px;color:var(--text-secondary);font-size:var(--primitive-font-size-11px)}
.class-report-measure{display:grid;gap:var(--primitive-spacing-6px);color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.class-report-measure .meter{width:100%}

.practice-intro{max-width:720px;padding:var(--primitive-spacing-2px) 0 var(--primitive-spacing-20px);border-bottom:1px solid var(--border-subtle)}.practice-intro h1{font-size:var(--primitive-font-size-32px);margin:0 0 8px}.practice-intro p{color:var(--text-secondary);margin:0}
.practice-start{padding:var(--primitive-spacing-20px) 0 var(--primitive-spacing-28px);border-bottom:1px solid var(--border-subtle)}
.practice-start h2{font-size:var(--primitive-font-size-18px);margin:0 0 6px;text-transform:none;letter-spacing:0;color:var(--text-primary)}
.practice-start>p{color:var(--text-secondary);margin:0 0 20px;max-width:560px}
.practice-start-button{font-size:var(--primitive-font-size-15px);padding:var(--primitive-spacing-12px) var(--primitive-spacing-30px)}
.practice-start-modes{display:flex;align-items:center;flex-wrap:wrap;gap:var(--primitive-spacing-8px);margin-top:20px}
.practice-start-modes>span{color:var(--text-secondary);font-size:var(--primitive-font-size-13px);margin-right:2px}
.session-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-16px);flex-wrap:wrap;padding:var(--primitive-spacing-14px) 0 var(--primitive-spacing-4px)}
.session-bar .mode-switcher{padding:0}
.session-bar-scope .scope-picker{margin:0}
.session-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-16px);flex-wrap:wrap;padding:var(--primitive-spacing-10px) 0 var(--primitive-spacing-12px);border-bottom:1px solid var(--border-subtle);margin-bottom:14px}
.session-tool-chips{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-8px)}
.session-tool-chips .mode-chip{font-size:var(--primitive-font-size-12px);padding:var(--primitive-spacing-5px) var(--primitive-spacing-13px)}
.session-toggle{display:inline-flex;align-items:center;gap:var(--primitive-spacing-8px);color:var(--text-secondary);font-size:var(--primitive-font-size-13px);cursor:pointer}
.session-toggle input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--action-primary-bg);cursor:pointer}
.mode-switcher{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-8px);padding:var(--primitive-spacing-14px) 0 var(--primitive-spacing-4px)}
.mode-chip{display:inline-flex;align-items:center;gap:var(--primitive-spacing-8px);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-999px);padding:var(--primitive-spacing-6px) var(--primitive-spacing-15px) var(--primitive-spacing-6px) var(--primitive-spacing-9px);font-size:var(--primitive-font-size-13px);color:var(--text-primary);cursor:pointer;line-height:1.2;text-decoration:none}
.mode-chip:hover{border-color:var(--text-secondary)}
/* An activity is a thing, so its chip carries the thing. Same mark the card's
   eyebrow shows once you are inside, so picking an activity and being in one
   are one picture rather than two. */
.mode-chip .activity-mark{width:20px;height:20px}
.mode-chip:not(:has(.activity-mark)){padding-left:var(--primitive-spacing-15px)}

/* THE ACTIVITY ROW IS A SET OF OBJECTS, NOT A SET OF BUTTONS.
   Every activity owns a drawn mark, and the mark is the thing a student
   recognises -- but it was set at 20px inside an outlined pill, so the pill was
   louder than the drawing it contained, and six pills in a row read as a
   toolbar. The outline comes off, the mark grows to the size it is drawn for,
   and the row becomes six objects you choose between.

   SELECTION IS A HEIGHT, NOT A COLOUR.
   These are objects on a table, so the language of choosing is the language of
   picking something up. Three states, one ladder:

     resting    flat, grey, its shadow tight underneath
     hovering   lifted and lit -- a PREVIEW of being chosen
     chosen     lifted higher and left standing

   While you hover a different activity, two are off the table: the one you have
   and the one you are considering, at different heights. Clicking settles the
   old one and leaves the new one up, so the click does not introduce a new
   visual idea -- it just decides which of the two stays.

   The lift itself is the shared silhouette mechanism (11.8/11.9); only the
   tokens are local. Scoped to .mode-switcher because the same .mode-chip class
   is an OPTION control elsewhere -- pair kind, round, board size, validation,
   bank layout -- and a setting is not a thing you can pick up.
   VISUAL_IDENTITY_CONSTITUTION 7.14, 11.10. */
.mode-switcher{gap:var(--primitive-spacing-4px) var(--primitive-spacing-10px);padding:var(--primitive-spacing-12px) 0 var(--primitive-spacing-10px)}
.mode-switcher .mode-chip{
  --lift-scale:1.055;
  --lift-tilt:5deg;
  --lift-perspective:340px;
  --lift-pool-left:9px;
  --lift-pool-right:auto;
  --lift-pool-bottom:1px;
  --lift-pool-height:6px;
  /* A resting object still touches the table, but the cue is CONTACT, not
     shadow: a soft dark shape under a greyed mark on a near-black ground reads
     as dirt rather than depth. So at rest the pool is a hairline and the drop
     shadow is barely there; both arrive with the lift. */
  --lift-pool-a:.2;
  --lift-rest-shadow:var(--mode-switcher-lift-rest-shadow);
  border:0;background:transparent;border-radius:var(--primitive-radius-11px);
  padding:var(--primitive-spacing-9px) var(--primitive-spacing-13px) var(--primitive-spacing-11px) var(--primitive-spacing-10px);gap:var(--primitive-spacing-11px);font-size:var(--primitive-font-size-13-5px);color:var(--text-secondary);
  transition:color var(--theme-paint-duration,var(--action-rest-duration,150ms)) ease}
/* The pool sits under the MARK, which is the part with mass. The word is its
   label and travels with it. */
.mode-switcher .mode-chip::after{width:34px;opacity:.55;transform:scaleX(.72)}
.mode-switcher .mode-chip:hover::after,.mode-switcher .mode-chip:focus-visible::after,
.mode-switcher .mode-chip.is-active::after{opacity:.42}
.mode-switcher .mode-chip .lift-rise,
.mode-switcher .mode-chip .lift-plane{gap:var(--primitive-spacing-11px)}
.mode-switcher .mode-chip .activity-mark{width:34px;height:34px;
  filter:var(--artwork-muted-filter);opacity:var(--activity-mark-muted-opacity);
  transition:filter var(--action-rest-duration,150ms) ease,
    opacity var(--action-rest-duration,150ms) ease}
.mode-switcher .mode-chip .chip-label{white-space:nowrap}
.mode-switcher .mode-chip:hover{color:var(--text-primary)}
/* A PREVIEW warms; it does not arrive. Full colour is what being chosen looks
   like, so hovering may only travel part of the way there -- if the pointer
   could produce the chosen appearance, hovering a neighbour would read as
   having switched to it. The ladder has to be monotonic on every channel it
   uses. VISUAL_IDENTITY_CONSTITUTION 11.10. */
.mode-switcher .mode-chip:hover .activity-mark,
.mode-switcher .mode-chip:focus-visible .activity-mark{filter:var(--artwork-hover-filter);opacity:.82}
.mode-switcher .mode-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* Chosen: the same lift, held, and a touch higher than a hovered preview so the
   two are never the same height at the same moment. */
.mode-switcher .mode-chip.is-active{
  --lift-scale:1.085;
  --lift-hover-shadow:
    var(--mode-switcher-lift-hover-shadow);
  background:transparent;border-color:transparent;
  color:var(--text-primary);font-weight:700}
.mode-switcher .mode-chip.is-active .activity-mark{filter:none;opacity:1}
.mode-switcher .mode-chip.is-active .lift-rise{
  transform:scale(var(--lift-scale));filter:var(--lift-hover-shadow)}
.mode-switcher .mode-chip.is-active .lift-plane{transform:rotateX(var(--lift-tilt))}
.mode-switcher .mode-chip.is-active::after{
  transform:translateY(2px) scaleX(1.35) scaleY(1.5);opacity:.42}
@media (prefers-reduced-motion:reduce){
  .mode-switcher .mode-chip.is-active .lift-rise,
  .mode-switcher .mode-chip.is-active .lift-plane{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mode-switcher .mode-chip,.mode-switcher .mode-chip .activity-mark{transition:none}
}
@media(max-width:760px){
  .mode-switcher .mode-chip{padding:var(--primitive-spacing-7px) var(--primitive-spacing-9px);font-size:var(--primitive-font-size-12-5px);gap:var(--primitive-spacing-8px)}
  .mode-switcher .mode-chip .activity-mark{width:28px;height:28px}
}
/* THE SELECTED ACTIVITY SPEAKS THE THEME'S LANGUAGE.
   This was background:var(--text-primary) -- a near-white pill in dark mode, which
   reads as disabled rather than chosen, and made the one control whose whole
   job is saying "you are here" the only one not using the accent. It is the
   soft accent, not the full fill: the gold fill belongs to the primary action,
   and a mode chip must not compete with the button that submits an answer. */
.mode-chip.is-active{background:var(--accent-soft);border-color:var(--action-primary-bg);color:var(--text-primary);font-weight:700}
.mode-chip.is-active:hover{border-color:var(--action-primary-bg)}
.shelf-heading{font-size:var(--primitive-font-size-18px);letter-spacing:0;text-transform:none;color:var(--text-primary);margin:26px 0 4px}
.workspace-shelf{display:grid}
.workspace-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--primitive-spacing-18px);align-items:center;padding:var(--primitive-spacing-17px) 0;border-bottom:1px solid var(--border-subtle)}
.workspace-row:last-child{border-bottom:0}
.workspace-row h3{font-size:var(--primitive-font-size-16px);margin:0 0 4px;color:var(--text-primary);text-transform:none;letter-spacing:0}
.workspace-mark{display:inline-flex;flex:0 0 auto;width:34px;height:34px}
.workspace-mark .activity-mark{width:100%;height:100%}
.workspace-state{display:inline-block;margin-top:6px;font-size:var(--primitive-font-size-11-5px);font-weight:650;
  letter-spacing:.02em;color:var(--action-primary-bg-hover)}
.workspace-row p{color:var(--text-secondary);margin:0;font-size:var(--primitive-font-size-13px)}

.scenario-setup h2{margin-top:22px}
.scenario-setup .setuprow select{max-width:min(430px,100%);text-overflow:ellipsis}
.scenario-checks{display:grid;gap:var(--primitive-spacing-8px);margin:10px 0}
.scenario-check{display:flex;gap:var(--primitive-spacing-10px);align-items:flex-start;cursor:pointer}
.scenario-check input{margin-top:3px}
.scenario-check span{display:grid}.scenario-check small{color:var(--text-secondary)}
.scenario-check.unavailable{opacity:.45;cursor:not-allowed}
.scenario-context .pill{white-space:nowrap}
.scenario-explanation{border-left:3px solid var(--border-subtle);padding-left:var(--primitive-spacing-14px);margin:16px auto;max-width:640px;text-align:left}
.scenario-explanation h2{font-size:var(--primitive-font-size-15px);margin:0 0 6px}.scenario-explanation h3{font-size:var(--primitive-font-size-13px);margin:12px 0 4px}
.scenario-explanation .why-others{margin:4px 0;padding-left:var(--primitive-spacing-18px)}.scenario-explanation .why-others li{margin:4px 0;color:var(--text-secondary)}
.scenario-explanation .why-others li b{color:var(--text-primary)}
.scenario-explanation .fact-grid{margin-top:10px}
.scenario-finish{max-width:760px}
.scenario-finish .pill{margin-right:6px}
.scenario-review{margin:14px 0}.scenario-review summary{cursor:pointer;font-weight:600;padding:var(--primitive-spacing-6px) 0}
.scenario-review-item{border-left:3px solid var(--border-subtle);padding:var(--primitive-spacing-8px) 0 var(--primitive-spacing-8px) var(--primitive-spacing-14px);margin:12px 0}
.scenario-review-item.good{border-left-color:var(--success-fg)}
.scenario-review-item.bad{border-left-color:var(--danger-fg)}
.scenario-review-item .scenario-explanation{margin:8px 0 0;border-left:0;padding-left:0}

/* Drug Landscape Builder */
/* ---- Drug landscape: a table you play on, with a tray you draw from -------
   The bank used to be a 300px column beside the map: it cost the map a third of
   the canvas, forced the class grid into three narrow columns, and still ran
   past the fold, so the button that scores your work was reached by scrolling a
   sidebar. VISUAL_IDENTITY_CONSTITUTION 7.12. */
.ls-layout{display:block;margin-top:4px}
.ls-sync-slot{display:contents}
.ls-map{display:grid;gap:var(--primitive-spacing-14px)}
.activity-stage .ls-map{margin-top:20px}
/* The dock pins to the bottom of the viewport, so mid-scroll it sits OVER the
   table. At full scroll it reaches its own place in the flow and the table's
   last row is clear, so this is breathing room, not a reservation the height of
   the tray -- which on a short map would be a void the size of the dock. */
.ls-table{padding-bottom:var(--primitive-spacing-40px)}

.activity-dock{position:sticky;bottom:0;z-index:6;margin:18px 0 0;
  padding:var(--primitive-spacing-12px) var(--primitive-spacing-15px) var(--primitive-spacing-13px);border:0;border-radius:var(--primitive-radius-12px-12px-0-0);
  background:color-mix(in srgb,var(--surface-panel) 95%,transparent);
  box-shadow:0 -10px 30px rgba(var(--elev-shade),.14);backdrop-filter:blur(12px)}
.dock-head{display:flex;align-items:center;gap:var(--primitive-spacing-10px) var(--primitive-spacing-14px);flex-wrap:wrap}
.dock-title{font-size:var(--primitive-font-size-10-5px);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary)}
.dock-count{font-size:var(--primitive-font-size-12-5px);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.dock-actions{margin-left:auto;display:flex;align-items:center;gap:var(--primitive-spacing-8px);flex-wrap:wrap}
.dock-actions button{min-height:36px;padding:0 var(--primitive-spacing-14px);font-size:var(--primitive-font-size-13px)}
.dock-head .session-tool-chips{display:flex;gap:var(--primitive-spacing-6px);flex-wrap:wrap}
.dock-head .mode-chip{min-height:30px;padding:0 var(--primitive-spacing-12px);font-size:var(--primitive-font-size-12-5px)}
/* The tray: full width, so a bank that showed one card per row now shows a
   handful, and only scrolls when it is genuinely deep. */
.dock-rail{display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--primitive-spacing-8px);
  margin:10px 0 0;max-height:124px;overflow-y:auto;overflow-x:hidden}
.activity-dock.is-tall .dock-rail{max-height:46vh}
.dock-note{margin:9px 0 0;font-size:var(--primitive-font-size-12-5px);color:var(--text-secondary)}
.activity-dock .ls-stage,.activity-dock .ls-bank-tabs,
.activity-dock .ls-expert-note{margin:9px 0 0}
.activity-dock .ls-stage{display:flex;align-items:center;gap:var(--primitive-spacing-12px);flex-wrap:wrap;font-size:var(--primitive-font-size-12-5px)}
.activity-dock .ls-stage .meter{flex:1;min-width:160px}
.activity-dock .ls-selected-panel{margin:9px 0 0}
@media(max-width:760px){
  .activity-dock{padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px)}
  .dock-actions{margin-left:0;width:100%}
  .dock-rail{max-height:34vh}
}
@media (prefers-reduced-motion:reduce){.activity-dock{backdrop-filter:none}}
.ls-bank h2{font-size:var(--primitive-font-size-16px);margin:0}
.ls-bank-head{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-8px);margin-bottom:8px}
.ls-bank-tabs{display:flex;gap:var(--primitive-spacing-4px);flex-wrap:wrap;margin:6px 0}
.ls-bank-tabs button{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-7px);
  padding:var(--primitive-spacing-5px) var(--primitive-spacing-10px);font-size:var(--primitive-font-size-12-5px);font-weight:600;color:var(--text-secondary);cursor:pointer}
.ls-bank-tabs button.on{background:var(--accent-soft);border-color:var(--action-primary-bg);color:var(--text-primary)}
.ls-stage{margin:8px 0;display:grid;gap:var(--primitive-spacing-4px);font-size:var(--primitive-font-size-13px)}
.ls-stage .meter{width:100%}
.ls-expert-note{margin:6px 0;font-size:var(--primitive-font-size-12-5px)}
.ls-selected-panel{display:flex;align-items:center;gap:var(--primitive-spacing-8px);flex-wrap:wrap;margin:8px 0;padding:var(--primitive-spacing-8px) var(--primitive-spacing-10px);
  border:2px solid var(--action-primary-bg);border-radius:var(--primitive-radius-8px);background:var(--accent-soft);font-size:var(--primitive-font-size-13px)}
.ls-selected-panel button{padding:var(--primitive-spacing-3px) var(--primitive-spacing-10px);min-height:0;font-size:var(--primitive-font-size-12px)}
/* One column: drug names are long unbreakable words, so narrow columns
   force overflow. Extra columns appear only when the bank is expanded. */
.ls-bank-tools button,.ls-mode-copy{font-size:var(--primitive-font-size-12-5px)}
.ls-bank-tools button{padding:var(--primitive-spacing-5px) var(--primitive-spacing-10px);min-height:0}
.ls-card{display:flex;align-items:center;gap:var(--primitive-spacing-6px);border:1px solid var(--line-strong);border-radius:var(--primitive-radius-8px);background:var(--surface-panel);
  padding:var(--primitive-spacing-6px) var(--primitive-spacing-10px);font-size:var(--primitive-font-size-13px);font-weight:600;cursor:grab;user-select:none;min-width:0;max-width:100%;
  transition:transform .12s,box-shadow var(--theme-paint-duration,.12s),border-color var(--theme-paint-duration,.12s),background var(--theme-paint-duration,.12s)}
.ls-card .ls-label{min-width:0;overflow-wrap:anywhere}
/* Reserve gestures on movable cards for dragging; the surrounding workspace
   and locked cards still allow normal touch scrolling. */
.ls-card[data-card]:not(.locked):not(.fixed){touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ls-tag{font-style:normal;font-size:var(--primitive-font-size-9-5px);font-weight:700;letter-spacing:.06em;flex-shrink:0;
  padding:var(--primitive-spacing-1px) var(--primitive-spacing-5px);border-radius:var(--primitive-radius-4px);background:var(--surface-raised);color:var(--text-secondary)}
.ls-card:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(var(--elev-tint),.12);border-color:var(--action-primary-bg)}
.ls-card.selected{border-color:var(--action-primary-bg);background:var(--accent-soft);box-shadow:0 0 0 2px var(--focus-ring)}
.ls-card.is-drag-source{cursor:grabbing;color:transparent!important;background:color-mix(in srgb,var(--workspace) 84%,var(--visual-lesson-card-drag-overlay));
  border-color:var(--border-subtle);box-shadow:inset 0 2px 7px rgba(var(--elev-shade),.24);transform:none}
.ls-card.is-drag-source>*{visibility:hidden}
.ls-drag-proxy{position:fixed;z-index:30;left:0;top:0;margin:0;box-sizing:border-box;pointer-events:none;
  cursor:grabbing;opacity:1;transition:none!important;
  box-shadow:0 10px 24px rgba(var(--elev-shade),.28);will-change:translate,rotate,scale}
.ls-drag-proxy.is-pending-placement{cursor:progress;box-shadow:0 6px 18px rgba(var(--elev-shade),.22);
  animation:ls-pending-placement .8s ease-in-out infinite alternate}
.ls-drag-proxy.is-rejected{border-color:var(--danger-edge);animation:none}
.ls-drag-proxy.is-returning{animation:none}
.is-landscape-dragging,.is-landscape-dragging *{cursor:grabbing!important}
.ls-card.locked{cursor:default;border-color:var(--border-subtle);border-bottom-color:var(--success-edge);background:var(--surface-raised);color:var(--text-primary)}
.ls-card.locked .ls-tag{background:transparent;color:inherit;opacity:.7}
.ls-card.bad{border-color:var(--border-subtle);border-bottom-color:var(--answer-choice-incorrect-ink);border-bottom-style:dashed;background:var(--surface-raised);color:var(--text-primary)}
.ls-card.fixed{cursor:default;background:var(--surface-raised);border-color:var(--border-subtle)}
/* Restrained type colors: labels and shape carry the meaning; color only
   reinforces it. Never red/yellow/green — those mean wrong/due/correct. */
.ls-card.kind-class{border-radius:var(--primitive-radius-5px);background:var(--surface-raised);border-color:var(--line-strong)}
.ls-card.kind-class .ls-tag{background:var(--surface-card);color:var(--text-secondary)}
.ls-card.kind-product{background:var(--accent-soft);border-color:var(--action-primary-bg)}
.ls-card.kind-product .ls-tag{background:var(--surface-card);color:var(--text-secondary)}
.ls-card.kind-brand{border-radius:var(--primitive-radius-18px);background:var(--surface-card);border-color:var(--rule-strong);font-weight:500;font-style:italic}
.ls-card.kind-brand .ls-tag{background:var(--surface-raised);color:var(--text-secondary);font-style:normal}
/* Progressive completion compression: a finished branch folds into one
   compact relationship row and stops competing for space. */
.ls-map-tools{display:flex;align-items:center;gap:var(--primitive-spacing-10px);flex-wrap:wrap;margin-bottom:4px;font-size:var(--primitive-font-size-13px)}
.ls-map-tools .ghost{padding:var(--primitive-spacing-5px) var(--primitive-spacing-10px);min-height:0;font-size:var(--primitive-font-size-12-5px)}
.ls-auto-collapse{display:flex;align-items:center;gap:var(--primitive-spacing-6px);color:var(--text-secondary);cursor:pointer;font-weight:600}
.ls-done-row{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-10px);cursor:pointer;
  border:1px solid var(--success-edge);border-radius:var(--primitive-radius-8px);background:var(--success-bg);color:var(--success-fg);
  padding:var(--primitive-spacing-7px) var(--primitive-spacing-12px);font-size:var(--primitive-font-size-13-5px);margin:4px 0;transform-origin:top}
.ls-done-row.folding{animation:ls-fold .3s ease-out}
.ls-done-row:hover,.ls-done-row:focus-visible{filter:brightness(.97)}
.ls-done-row .ls-done-chain{min-width:0;overflow-wrap:anywhere}
.ls-done-row .ls-done-chain i{font-style:normal;opacity:.6;padding:0 var(--primitive-spacing-2px)}
.ls-done-row b{flex-shrink:0}
.ls-done-count{font-weight:400;opacity:.8;padding-left:var(--primitive-spacing-6px)}
.ls-done-class{font-weight:600}
.ls-done-group{padding:var(--primitive-spacing-10px) var(--primitive-spacing-14px);font-size:var(--primitive-font-size-14px)}
/* CONTROL GLYPHS IN BUTTONS. A glyph beside its word sits on the word's
   baseline at the control size; a glyph alone is a round target that names
   itself through aria-label and shows the name as a tip (audit ruling,
   26 Oct: glyph only for close, more, expand / collapse and move). */
:is(button,a,summary):has(>.control-label){display:inline-flex;align-items:center;justify-content:center;gap:var(--space-control-glyph-gap)}
/* In a menu or a list of choices the words line up on the left. */
:is(.reference-menu-panel,.calendar-more-menu,.personal-creator-source,.course-term-menu,.dialog-actions-stack) :is(button,a):has(>.control-label){justify-content:flex-start}
:is(button,a,summary)>.control-glyph{flex:0 0 auto;width:var(--size-control-glyph);height:var(--size-control-glyph)}
.control-icon-button{position:relative;display:inline-grid;place-items:center;width:var(--size-control-icon-button);height:var(--size-control-icon-button);
  min-height:0;padding:0;border-radius:var(--radius-control-icon-button)}
/* The shared button material clips to its own shape (isolation for the press
   and busy states). A wordless control has to show its name outside that
   shape, so it opts out; it never goes busy, so nothing it clips is lost. */
:is(button,a,summary).control-icon-button.control-icon-button{overflow:visible}
.control-icon-button>.control-glyph{transition:transform .2s ease}
.control-icon-button[data-tip]::after{content:attr(data-tip);position:absolute;inset:auto auto calc(100% + var(--space-control-tip-offset)) 50%;z-index:9;
  padding:var(--space-learn-hairline) var(--space-learn-tight);border-radius:var(--radius-learn-surface);background:var(--text-primary);color:var(--bg);
  font-size:var(--text-continue-meta);font-weight:650;line-height:1.5;letter-spacing:0;white-space:nowrap;opacity:0;pointer-events:none;
  transform:translate(-50%,2px);transition:opacity var(--action-rest-duration,150ms) ease,transform var(--action-rest-duration,150ms) ease}
@media (hover:hover){.control-icon-button[data-tip]:hover::after{opacity:1;transform:translate(-50%,0)}}
.control-icon-button[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.control-icon-button>.control-glyph,.control-icon-button[data-tip]::after{transition:none}}
@media (forced-colors:active){.control-icon-button[data-tip]::after{border:1px solid CanvasText}}
/* The session exit in a rail is the corner x, at the rail's quiet ink. */
.stage-exit.control-icon-button{width:var(--size-control-icon-button);height:var(--size-control-icon-button);margin:calc(var(--size-control-icon-button) / -4) 0}
.stage-exit.control-icon-button:hover{background:var(--surface-card)}
/* Dialogs close with the same corner x as sessions. */
.dialog-close:has(>.control-glyph){display:grid;place-items:center;width:var(--size-dialog-close-target);height:var(--size-dialog-close-target);padding:0;border-radius:var(--radius-control-icon-button)}
.dialog-close:has(>.control-glyph):hover{background:var(--surface-raised);color:var(--text-primary)}
:is(.announcement-note-close,.continue-row-remove)>.control-glyph{width:var(--size-control-glyph-mark);height:var(--size-control-glyph-mark)}
/* A disclosure that keeps its words turns its chevron when it opens. */
summary.control-disclosure{list-style:none}
summary.control-disclosure::-webkit-details-marker{display:none}
summary.control-disclosure>.control-glyph{transform:rotate(-90deg);transition:transform .2s ease}
details[open]>summary.control-disclosure>.control-glyph{transform:none}
@media (prefers-reduced-motion:reduce){summary.control-disclosure>.control-glyph{transition:none}}
/* Marks in a line of text: sized to the text, sitting on its baseline. */
.control-mark{display:inline-block;flex:0 0 auto;width:var(--size-control-mark);height:var(--size-control-mark);vertical-align:var(--space-control-mark-baseline);line-height:0}
.control-mark>.control-glyph{width:100%;height:100%}
:is(.course-study-arrow,.catalog-entry-arrow,.pref-arrow)>.control-mark{width:var(--size-control-glyph);height:var(--size-control-glyph);vertical-align:middle}
:is(.rdy-reviewed-mark,.language-picker-check,.order-position-mark,.course-sheet-row em)>.control-glyph{display:inline-block;vertical-align:middle;width:var(--size-control-glyph-mark);height:var(--size-control-glyph-mark)}
.state-icon>.control-glyph{width:var(--size-control-state-glyph);height:var(--size-control-state-glyph)}
.match-win-mark>.control-glyph{width:var(--size-control-win-glyph);height:var(--size-control-win-glyph)}
.reference-menu-trigger>.control-glyph{display:block}
/* Drawn marks where the CSS once typed one. */
.answer-feedback:is([data-answer-mark="✓"],[data-answer-mark="×"]):before{content:"";flex:0 0 auto;align-self:center;width:var(--size-control-mark);height:var(--size-control-mark);background:currentColor;
  -webkit-mask:var(--control-mask-check) center/contain no-repeat;mask:var(--control-mask-check) center/contain no-repeat}
.answer-feedback[data-answer-mark="×"]:before{-webkit-mask-image:var(--control-mask-cross);mask-image:var(--control-mask-cross)}
/* Card order: both answers shown, the one in force raised (4.9). */
.dock-actions .pref-choice-option{min-height:0;padding-block:var(--space-learn-hairline);font-size:var(--text-continue-meta)}
.ls-bank-order .control-glyph{width:var(--size-control-glyph-mark);height:var(--size-control-glyph-mark)}
/* The bank grows upward, so its chevron points up while closed and turns
   down once open. A finished branch's Fold points up while the branch is open. */
.dock-actions .ls-bank-expand{padding:0;min-height:0;width:var(--size-control-icon-button)}
.ls-bank-expand[aria-expanded="false"]>.control-glyph,button.ls-fold[aria-expanded="true"]>.control-glyph{transform:rotate(180deg)}
button.ls-fold>.control-glyph{width:var(--size-control-glyph-mark);height:var(--size-control-glyph-mark)}
/* Status ticks are feedback, not controls: smaller, success ink, hidden from
   assistive tech because the row or card already says it in words. */
.ls-done-mark,.ls-lock-mark{display:inline-grid;place-items:center;flex:0 0 auto;color:var(--success-fg)}
.ls-done-mark .control-glyph,.ls-lock-mark .control-glyph{width:var(--size-control-glyph-mark);height:var(--size-control-glyph-mark)}
.ls-card:has(>.ls-lock-mark){display:inline-flex;align-items:center;gap:var(--space-control-glyph-gap)}
button.ls-fold{background:transparent;border:1px solid var(--success-edge);color:var(--success-fg);
  border-radius:var(--primitive-radius-6px);font-size:var(--primitive-font-size-11-5px);padding:var(--primitive-spacing-2px) var(--primitive-spacing-8px);cursor:pointer;margin-left:8px;vertical-align:middle;
  --action-busy-color:var(--success-fg);
  --action-ambient-shadow:0 6px 14px color-mix(in srgb,var(--success-fg) 16%,transparent);
  --action-hover-shadow:var(--ls-fold-action-hover-shadow);
  --action-pressed-shadow:var(--ls-fold-action-pressed-shadow)}
@keyframes ls-fold{from{opacity:0;transform:scaleY(.6)}to{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){.ls-done-row{animation:none}}
/* Selecting a card highlights every drop area of the matching level. */
.selecting-class .ls-classes,.selecting-product .ls-products,.selecting-brand .ls-brands{
  border-color:var(--action-primary-bg);border-style:solid}
@keyframes ls-pending-placement{from{filter:brightness(1)}to{filter:brightness(.88)}}
.ls-map{display:grid;gap:var(--primitive-spacing-14px)}
.ls-group{border:0;border-radius:var(--primitive-radius-10px);padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);background:var(--surface-panel)}
.ls-group summary{cursor:pointer;font-weight:600;margin-bottom:8px}
/* A group folds by its own chevron, not the browser's typed triangle: the
   same drawing as every other disclosure, pointing right while closed. */
.ls-group>summary{list-style:none;display:flex;align-items:center;gap:var(--space-control-glyph-gap)}
.ls-group>summary::-webkit-details-marker{display:none}
.ls-group-chevron{display:inline-grid;place-items:center;flex:0 0 auto;color:var(--text-secondary)}
.ls-group-chevron .control-glyph{width:var(--size-control-glyph-mark);height:var(--size-control-glyph-mark);transition:transform .2s ease}
.ls-group:not([open])>summary .ls-group-chevron .control-glyph{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.ls-group-chevron .control-glyph{transition:none}}
.ls-class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--primitive-spacing-12px);margin-top:10px}
.ls-class{border:0;border-radius:var(--primitive-radius-8px);padding:var(--primitive-spacing-10px);background:var(--workspace)}
.ls-class h3{margin:0 0 8px;font-size:var(--primitive-font-size-14px);color:var(--text-primary);text-transform:none;letter-spacing:0;font-weight:650}
.ls-dropzone{min-height:44px;border:1.5px dashed var(--line-strong);border-radius:var(--primitive-radius-8px);padding:var(--primitive-spacing-7px);
  display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-6px);align-content:flex-start;cursor:pointer;transition:border-color var(--theme-paint-duration,.12s),background var(--theme-paint-duration,.12s)}
.ls-dropzone small{width:100%;color:var(--text-secondary)}
.ls-dropzone.over,.ls-dropzone:hover{border-color:var(--action-primary-bg);background:var(--accent-soft)}
.ls-dropzone.is-drag-over{border-color:var(--action-primary-bg);border-style:solid;background:var(--accent-soft);
  box-shadow:0 0 0 2px var(--focus-ring)}
.ls-dropzone.hinted{border-color:var(--action-primary-bg);background:var(--accent-soft);box-shadow:0 0 0 2px var(--focus-ring)}
.ls-brands{min-height:36px;margin-top:6px}
@media (prefers-reduced-motion:reduce){.ls-drag-proxy,.ls-drag-proxy.is-pending-placement{
  transition:none!important;animation:none!important}}
.ls-product{margin:2px 0;width:100%}
/* Expanded branches own the space between their card, Fold action and child
   region. A standalone Fold must never sit on a dropzone's dashed border. */
.ls-class,.ls-product{display:grid;gap:var(--space-landscape-branch-stack);min-width:0}
.ls-placed-class{display:grid;gap:var(--space-landscape-branch-stack);min-width:0}
.ls-placed-class>.ls-class{padding-top:0}
.ls-class>h3{margin-bottom:0}
.ls-class>button.ls-fold,.ls-product>button.ls-fold{justify-self:start;margin-left:0}
.ls-product>.ls-brands{margin-top:0}
.ls-group>summary{margin-bottom:var(--space-landscape-branch-stack)}
.ls-group>.ls-class-grid{margin-top:var(--space-landscape-branch-stack)}
.ls-placed-class{width:100%;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);padding:var(--primitive-spacing-8px);background:var(--workspace)}
.ls-actions{flex-wrap:wrap}
.ls-feedback{min-height:20px;color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}
.ls-wrong-list li{margin:6px 0}
@media (max-width: 900px){
  .ls-layout{grid-template-columns:1fr}
  .ls-bank{position:static;max-height:none}
}

.reference-header{position:static;display:flex;justify-content:space-between;align-items:end;gap:var(--primitive-spacing-24px);padding:0 0 var(--primitive-spacing-18px);background:transparent;border:0;border-bottom:2px solid var(--rule-strong)}.reference-header h1{font-size:var(--primitive-font-size-32px);margin:0 0 5px}.reference-header p{color:var(--text-secondary);margin:0}
.reference-tools{position:sticky;top:105px;z-index:2;background:var(--workspace);padding:var(--primitive-spacing-14px) 0;border-bottom:1px solid var(--border-subtle)}
.catalog-list{gap:0}.catalog-row{display:block;background:transparent;border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;padding:0}
.catalog-row-summary{display:grid;grid-template-columns:minmax(240px,1fr) minmax(280px,1.15fr) auto;align-items:center;gap:var(--primitive-spacing-18px);padding:var(--primitive-spacing-16px) 0}
.catalog-row h3{font-size:var(--primitive-font-size-16px);color:var(--text-primary);text-transform:none;letter-spacing:0;margin:0 0 3px}.catalog-row p{font-size:var(--primitive-font-size-13px);margin:2px 0}.catalog-row .eyebrow{font-size:var(--primitive-font-size-11px);color:var(--text-secondary)}
.catalog-row .class-progress{margin-top:6px}.catalog-row .class-progress-detail{display:none}
.catalog-details{margin:0 0 14px;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-card)}
.catalog-details>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--primitive-spacing-18px);cursor:pointer;padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);color:var(--action-primary-bg);list-style-position:inside}
.catalog-details>summary:hover{background:var(--surface-raised)}.catalog-details>summary span:first-child{display:inline-flex;align-items:baseline;gap:var(--primitive-spacing-10px)}.catalog-details>summary small{color:var(--text-secondary);font-weight:500}
.catalog-detail-hint{font-size:var(--primitive-font-size-12px);color:var(--text-secondary);text-align:right}
.catalog-details[open]>summary{border-bottom:1px solid var(--border-subtle);background:var(--accent-soft)}
.catalog-reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--primitive-spacing-26px);padding:var(--primitive-spacing-16px) var(--primitive-spacing-18px) var(--primitive-spacing-10px)}
.catalog-fact{padding:var(--primitive-spacing-4px) 0 var(--primitive-spacing-14px)}.catalog-fact h4{margin:0 0 7px;font-size:var(--primitive-font-size-12px);letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
.catalog-fact ul{margin:0;padding-left:var(--primitive-spacing-19px)}.catalog-fact li{margin:4px 0;line-height:1.4}.catalog-fact p{font-size:var(--primitive-font-size-14px);line-height:1.45;margin:0 0 7px}
.catalog-routes,.catalog-class-reference{grid-column:1/-1;border-top:1px solid var(--border-subtle);padding-top:var(--primitive-spacing-14px)}
.catalog-routes ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-8px) var(--primitive-spacing-24px);list-style:none;padding:0}
.catalog-routes li{display:grid;gap:var(--primitive-spacing-2px)}.catalog-routes li span,.catalog-routes li small{color:var(--text-secondary)}
.catalog-sources a{display:inline}.catalog-reference-note{margin:0!important;padding:var(--primitive-spacing-10px) var(--primitive-spacing-18px) var(--primitive-spacing-13px);border-top:1px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--primitive-font-size-12px)!important}
.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--primitive-spacing-12px);margin-top:10px;color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.catalog-toolbar>div{display:flex;gap:var(--primitive-spacing-8px)}

.course-map{gap:0;border-top:1px solid var(--border-subtle)}.course-map-group{background:transparent;border:0;border-bottom:1px solid var(--border-subtle);border-radius:0}
.course-map-group>summary{padding:var(--primitive-spacing-14px) 0}.course-map-group[open]>summary{border-bottom:1px solid var(--border-subtle)}
.course-map-classes{padding:0 0 0 var(--primitive-spacing-18px)}.course-map-class{padding:var(--primitive-spacing-16px) 0}.course-map-class h3{color:var(--text-primary);font-size:var(--primitive-font-size-15px);text-transform:none;letter-spacing:0}

.review-builder{max-width:720px;margin-top:26px}.review-builder h2{font-size:var(--primitive-font-size-18px)}
.drug-lesson-card{max-width:900px}.concept-part,.member-card{border-radius:var(--primitive-radius-6px)}.component-line span{border-radius:var(--primitive-radius-4px)}
.route-variant-map{margin:24px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.route-variant-map>h2{margin:20px 0 4px}.route-variant-map>p{color:var(--text-secondary);margin:0 0 10px}.route-variant-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.55fr);gap:var(--primitive-spacing-24px);padding:var(--primitive-spacing-16px) 0;border-top:1px solid var(--border-subtle)}.route-variant-row p{color:var(--text-secondary);margin:4px 0 0}.route-variant-row>div:last-child{display:grid;align-content:start;gap:var(--primitive-spacing-3px)}.route-variant-row span{color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}
.pill{font-size:var(--primitive-font-size-12px);color:var(--text-secondary)}.badge{border-radius:var(--primitive-radius-4px)}

@media(max-width:820px){
  .planner-layout,.academic-split,.workbook-layout{grid-template-columns:1fr;gap:var(--primitive-spacing-28px)}
  .planner-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "rail" "work";gap:0;--space-today-heading-top:var(--primitive-spacing-4px);--space-today-heading-bottom:var(--primitive-spacing-20px);--space-today-intro-gap:var(--primitive-spacing-28px)}
  .today-heading{text-align:left}
  .planner-kicker{justify-content:flex-start}
  .planner-layout>.planner-rail{border-top:0;padding:var(--space-planner-rail-inset)}
  .planner-rail,.academic-rail{position:static;border-left:0;border-top:1px solid var(--border-subtle);padding:var(--primitive-spacing-22px) 0 0}
  .workbook-rail{position:static;border-right:0;border-bottom:1px solid var(--border-subtle);padding:0 0 var(--primitive-spacing-18px)}
  .page-heading{align-items:flex-start;display:grid}.page-heading-actions{justify-content:flex-start}
}
@media(max-width:640px){
  main{padding:var(--primitive-spacing-18px) var(--primitive-spacing-14px) var(--primitive-spacing-38px)}.page-heading h1,.planner-title{font-size:var(--primitive-font-size-29px)}.practice-intro h1,.reference-header h1{font-size:var(--text-mobile-section-title)}
  .today-section{margin-top:28px}.today-section>header{align-items:flex-start}
  .mode-nav{top:70px;gap:0;display:flex;flex-wrap:wrap;overflow:visible}.mode-nav button,.mode-nav a{flex:1 1 82px;min-height:44px;padding-inline:var(--primitive-spacing-4px);font-size:var(--primitive-font-size-12px);text-align:center}
  .study-status{grid-template-columns:repeat(2,minmax(0,1fr))}.study-status>div{border-bottom:1px solid var(--border-subtle)}.study-status>div:nth-child(2n){border-right:0}
  .drug-class-card{grid-template-columns:1fr}.drug-class-card .row{grid-column:1;grid-row:auto;justify-items:start;margin-top:12px}
  .drug-class-card .class-progress{justify-items:start;text-align:left}.class-report-row{grid-template-columns:1fr;gap:var(--primitive-spacing-12px)}
  .route-variant-row{grid-template-columns:1fr;gap:var(--primitive-spacing-10px)}
  .workspace-row{grid-template-columns:auto minmax(0,1fr);gap:var(--primitive-spacing-7px) var(--primitive-spacing-14px)}.workspace-row a{text-align:center;margin-top:5px;grid-column:1/-1;justify-self:start}
  .reference-header{display:grid;grid-template-columns:1fr;grid-template-areas:none;align-items:start}.reference-tools{top:115px}.catalog-row-summary{grid-template-columns:1fr}.catalog-row h3{grid-row:auto}.catalog-row-summary>button{width:100%}.catalog-reference-grid{grid-template-columns:1fr}.catalog-routes,.catalog-class-reference{grid-column:auto}.catalog-routes ul{grid-template-columns:1fr}.catalog-details>summary{align-items:flex-start}.catalog-details>summary span:first-child{display:grid;gap:var(--primitive-spacing-2px)}.catalog-detail-hint{display:none}.catalog-toolbar{align-items:flex-start}.catalog-toolbar>div{display:grid}
  .report-section>header{display:grid;grid-template-columns:1fr;gap:var(--primitive-spacing-3px)}.report-section>header p{margin:0}
  
  .checklist-item{grid-template-columns:auto 1fr}
}

/* ---- course navigator: nested, persistent disclosures ---- */
/* Courses opens on a two-facet switcher (My Courses | Library). The bar owns
   the rule under it; the switcher inside is the ordinary mode-nav without its
   own border, margin or sticky offset, and the collection's actions share
   the row. */
.courses-facet-bar{display:block;margin-bottom:var(--space-courses-facet-after)}
.courses-facet-bar .mode-nav{margin:0;padding-bottom:0;border-bottom:0;position:static}.courses-collapse-all{white-space:nowrap;border:0;background:transparent;color:var(--text-secondary);padding:var(--primitive-spacing-8px) var(--primitive-spacing-2px);cursor:pointer;font-size:var(--primitive-font-size-13px);font-weight:650}
.courses-collapse-all:hover{color:var(--action-primary-bg)}
.course-disclosure{border-top:1px solid var(--border-subtle);transition:background-color var(--theme-paint-duration,.2s) ease,border-color var(--theme-paint-duration,.2s) ease}
.course-disclosure:last-child{border-bottom:1px solid var(--border-subtle)}
.course-disclosure.is-open{background:linear-gradient(90deg,color-mix(in srgb,var(--action-primary-bg) 3%,transparent),transparent 68%)}
main .course-disclosure-header{display:flex;align-items:center;gap:var(--primitive-spacing-12px);padding:0;background:transparent;color:var(--text-primary);border:0}
.course-disclosure-toggle,.course-section-toggle{display:flex;align-items:center;gap:var(--primitive-spacing-14px);min-width:0;border:0;background:transparent;color:var(--text-primary);cursor:pointer;text-align:left}
.course-disclosure-toggle:not(.catalog-entry-row){flex:1;padding:var(--space-course-disclosure-toggle)}
.course-heading-copy,.course-section-toggle>span:last-child,.course-study-copy{display:grid;min-width:0}
.course-title{font-size:var(--primitive-font-size-17px);font-weight:640;letter-spacing:-.014em;line-height:1.32}
.course-heading-copy small,.course-section-toggle small,.course-study-copy small{color:var(--text-secondary);font-size:var(--primitive-font-size-12-5px);font-weight:520;line-height:1.4}
.disclosure-chevron{flex:0 0 9px;width:9px;height:9px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(-45deg);transition:transform .21s cubic-bezier(.2,.75,.25,1),border-color var(--theme-paint-duration,.16s) ease}
.course-disclosure-toggle:hover .disclosure-chevron,.course-section-toggle:hover .disclosure-chevron{border-color:var(--action-primary-bg)}
.is-open>.course-disclosure-header .disclosure-chevron,.course-section-disclosure.is-open>.course-section-header .disclosure-chevron{transform:rotate(45deg)}
/* Contain absolute screen-reader labels so collapsed rows cannot extend the page's scroll area. */
.course-disclosure-panel,.course-section-panel{position:relative;display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;opacity:.35;transition:grid-template-rows .22s cubic-bezier(.2,.75,.25,1),opacity .16s ease}
.course-disclosure.is-open>.course-disclosure-panel,.course-section-disclosure.is-open>.course-section-panel{grid-template-rows:minmax(0,1fr);opacity:1}
.course-disclosure-panel>div,.course-section-panel>div{min-height:0;overflow:hidden}
.course-disclosure-panel>div{padding:0 var(--primitive-spacing-2px) var(--primitive-spacing-14px) var(--primitive-spacing-25px)}
.course-description{margin:0 0 12px;color:var(--text-secondary);font-size:var(--primitive-font-size-14px)}
.course-section-disclosure{border-top:1px solid color-mix(in srgb,var(--border-subtle) 80%,transparent)}
.course-section-toggle{flex:1;padding:var(--primitive-spacing-14px) var(--primitive-spacing-3px);text-transform:none}
.course-section-toggle b{font-size:var(--primitive-font-size-14px);text-transform:uppercase;letter-spacing:.055em;color:var(--text-secondary)}
.course-section-toggle small{display:block;margin-top:2px;text-transform:none;letter-spacing:0}
.course-section-panel>div{padding:0 0 var(--primitive-spacing-9px) var(--primitive-spacing-24px)}
/* Exam header: the checklist sits at the exam's level, carried by a readiness
   bar, so nothing in the lecture list below competes with it. No border box --
   the tinted pill is the only surface. */
.course-section-header{display:flex;align-items:center;gap:var(--primitive-spacing-16px)}
.exam-readiness-link{text-decoration:none;display:inline-flex;align-items:center;gap:var(--primitive-spacing-10px);flex:0 0 auto;min-height:36px;padding:var(--primitive-spacing-7px) var(--primitive-spacing-13px) var(--primitive-spacing-7px) var(--primitive-spacing-15px);border:0;border-radius:var(--primitive-radius-999px);background:color-mix(in srgb,var(--action-primary-bg) 9%,transparent);color:var(--action-primary-bg);font-size:var(--primitive-font-size-13px);font-weight:680;box-shadow:none;cursor:pointer;transition:background-color var(--theme-paint-duration,.14s) ease}
.exam-readiness-link:hover{background:color-mix(in srgb,var(--action-primary-bg) 16%,transparent)}
.exam-readiness-bar{display:flex;width:92px;height:6px;overflow:hidden;border-radius:var(--primitive-radius-999px);background:color-mix(in srgb,var(--border-subtle) 90%,transparent)}
.exam-readiness-bar i{display:block;width:0;height:100%;transition:width .55s cubic-bezier(.2,.75,.25,1)}
.exam-readiness-bar .is-green{background:var(--success-fg)}.exam-readiness-bar .is-yellow{background:var(--warning-fg)}.exam-readiness-bar .is-red{background:var(--danger-fg)}
.exam-readiness-bar.is-wide{width:100%;height:8px;margin:12px 0 4px}
.exam-readiness-label{display:inline-flex;align-items:center;gap:var(--primitive-spacing-5px)}
.exam-readiness-label::after{content:"";width:var(--size-control-glyph-mark);height:var(--size-control-glyph-mark);background:currentColor;-webkit-mask:var(--control-mask-onward) center/contain no-repeat;mask:var(--control-mask-onward) center/contain no-repeat;transform:translateY(-1px);transition:transform .14s ease}
.exam-readiness-link:hover .exam-readiness-label::after{transform:translate(2px,-1px)}
.course-study-row{display:flex;align-items:center;gap:var(--primitive-spacing-14px);width:100%;min-height:54px;padding:var(--primitive-spacing-9px) var(--primitive-spacing-11px);border:0;border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 72%,transparent);border-radius:0;background:transparent;color:var(--text-primary);cursor:pointer;text-align:left;text-decoration:none;transition:background-color var(--theme-paint-duration,.14s) ease,padding .14s ease}
.course-study-row:hover{background:color-mix(in srgb,var(--action-primary-bg) 7%,transparent);padding-left:var(--primitive-spacing-14px)}
.course-study-row:last-child{border-bottom:0}.course-study-copy{margin-right:auto}
/* Reordering an exam's lectures: one tinted list, a position and the moves
   inside each row. The rows are not links while it lasts. */
.personal-lecture-order-list{margin:0;padding:0;list-style:none;border-radius:var(--radius-lecture-order-list);background:color-mix(in srgb,var(--action-primary-bg) 5%,transparent)}
.personal-lecture-order-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lecture-order-gap);min-height:54px;padding:var(--space-lecture-order-row);border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 72%,transparent)}
.personal-lecture-order-row:last-child{border-bottom:0}
.personal-lecture-order-row>.course-study-copy{flex:1;min-width:0;overflow-wrap:anywhere}
.personal-lecture-position{display:grid;place-items:center;flex:0 0 var(--size-lecture-position);height:var(--size-lecture-position);border-radius:var(--radius-control-icon-button);background:var(--surface-raised);color:var(--text-secondary);font-size:var(--text-lecture-position);font-weight:700;font-variant-numeric:tabular-nums}
.personal-lecture-order{display:flex;flex-shrink:0;gap:var(--space-personal-lecture-order)}
.personal-lecture-move.control-icon-button{border:0;background:transparent;box-shadow:none;color:var(--text-secondary)}
.personal-lecture-move.control-icon-button:hover{background:var(--surface-raised);color:var(--text-primary)}
.personal-lecture-move.control-icon-button:disabled{visibility:hidden}
.personal-lecture-move>.control-glyph{width:var(--size-lecture-move-glyph);height:var(--size-lecture-move-glyph)}
/* Rows are close together, so a move's tip opens to the left of the pair
   rather than over the row above and its moves. */
.personal-lecture-move.control-icon-button[data-tip]::after{inset:50% calc(100% + var(--space-control-tip-offset)) auto auto;transform:translate(2px,-50%)}
.personal-lecture-move.control-icon-button[data-move="down"][data-tip]::after{right:calc(200% + var(--space-personal-lecture-order) + var(--space-control-tip-offset))}
@media (hover:hover){.personal-lecture-move.control-icon-button[data-tip]:hover::after{transform:translate(0,-50%)}}
.personal-lecture-move.control-icon-button[data-tip]:focus-visible::after{transform:translate(0,-50%)}
.personal-reorder-toggle{flex:0 0 auto}
/* A course or exam header is several controls in a row. The disclosure's
   keyboard ring is drawn inside the card on the card's own curve, so it reads
   as the region it opens rather than a square box stopping short of Share. */
.course-card .course-disclosure-toggle:focus-visible{outline-offset:var(--space-course-toggle-focus-inset);border-radius:var(--radius-course-card)}
.course-section-toggle:focus-visible{outline-offset:var(--space-course-toggle-focus-inset);border-radius:var(--radius-course-section-focus)}
.personal-lecture-order-error{flex-basis:100%;margin:0}
.personal-lecture-order-error:empty{display:none}
.course-study-copy b{font-size:var(--primitive-font-size-14px);line-height:1.35}.course-study-arrow{color:var(--action-primary-bg);font-size:var(--primitive-font-size-24px);line-height:1;transform:translateX(-3px);transition:transform .14s ease}
.course-study-row:hover .course-study-arrow{transform:translateX(1px)}
.exam-row{min-height:57px;margin:0;padding:var(--primitive-spacing-8px) var(--primitive-spacing-11px);border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 72%,transparent);align-items:center}
.exam-row .primary{padding:var(--primitive-spacing-8px) var(--primitive-spacing-13px)}
.exam-calc-hero .stats{margin:18px 0}.exam-calc-hero .row{margin-top:16px}
.exam-calc-plan{display:grid;gap:0}.exam-calc-todo{display:flex;align-items:flex-start;gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-12px) var(--primitive-spacing-4px);border-top:1px solid var(--border-subtle);cursor:pointer}
.exam-calc-todo input{width:18px;height:18px;margin-top:2px;accent-color:var(--action-primary-bg)}.exam-calc-todo span,.exam-calc-resource-row>div:first-child{display:grid;gap:var(--primitive-spacing-3px)}.exam-calc-todo small,.exam-calc-resource-row small{color:var(--text-secondary)}
.exam-calc-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-16px);margin:16px 0}.exam-calc-topic{margin:0}.exam-calc-topic h2,.exam-calc-foundation h2{margin-bottom:7px}.exam-calc-topic h3,.exam-calc-foundation h3{margin:18px 0 8px;font-size:var(--primitive-font-size-93rem)}.exam-calc-topic ul,.exam-calc-exclusions ul{padding-left:var(--primitive-spacing-21px)}
.exam-calc-resources{margin-top:auto}.exam-calc-resource-row{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-10px) 0;border-top:1px solid var(--border-subtle)}.exam-calc-resource-row .row{flex:0 0 auto}.exam-calc-resource-row .compact{padding:var(--primitive-spacing-7px) var(--primitive-spacing-10px)}
.exam-calc-foundation,.exam-calc-exclusions{margin-top:16px}
@media(max-width:760px){.exam-calc-topic-grid{grid-template-columns:1fr}.exam-calc-resource-row{align-items:flex-start;flex-direction:column}.exam-calc-resource-row .row{width:100%}}
.course-ungrouped-list{border-top:1px solid color-mix(in srgb,var(--border-subtle) 80%,transparent)}
/* A Foundational Sciences subject page: its Library mark beside its name. */
/* A page that is a place wears its mark beside its name: a Library subject
   and Settings share one head. */
.public-subject-head,.settings-head{display:flex;align-items:flex-start;gap:var(--space-public-subject-head-gap);margin:0 0 22px}
.public-subject-head .public-subject-mark,.settings-head .settings-mark{flex:0 0 auto;width:var(--size-public-subject-mark);height:var(--size-public-subject-mark)}
.public-subject-copy,.settings-head-copy{display:grid;min-width:0}
.public-subject-copy h1,.settings-head-copy h1{margin:0;font-size:var(--text-public-subject-title);line-height:1.2;letter-spacing:-.02em}
.public-subject-copy p,.settings-head-copy p{margin:6px 0 0;color:var(--text-secondary);font-size:var(--text-public-subject-lede);max-width:720px}
.public-subject-copy small{margin-top:6px;color:var(--text-secondary);font-size:var(--text-public-subject-meta);font-weight:560}
@media(max-width:760px){
  .public-subject-head,.settings-head{gap:var(--space-public-subject-head-gap-compact)}
  .public-subject-head .public-subject-mark,.settings-head .settings-mark{width:var(--size-public-subject-mark-compact);height:var(--size-public-subject-mark-compact)}
  .public-subject-copy h1,.settings-head-copy h1{font-size:var(--text-public-subject-title-compact)}
}
@media(max-width:640px){
  .calc-module-row{grid-template-columns:1fr;gap:var(--primitive-spacing-12px)}.calc-module-action{justify-items:start;text-align:left}.calc-module-action .class-progress{justify-items:start}.calc-direction-list{grid-template-columns:1fr}
  .course-disclosure-header{align-items:stretch!important}.course-disclosure-toggle:not(.catalog-entry-row){padding:var(--space-course-disclosure-toggle-compact)}
  .course-title{font-size:var(--primitive-font-size-15px)}.course-heading-copy small{font-size:var(--primitive-font-size-11-5px)}.course-disclosure-panel>div{padding-left:var(--space-lab-chain-gap)}
  .checklist-section .course-section-panel>div{padding-left:var(--space-lab-chain-gap)}
  .checklist-section .course-section-header{flex-wrap:wrap;gap:0}
  .checklist-section>.course-section-header>.course-section-toggle{flex-basis:100%}
  .exam-readiness-bar.is-section{width:100%;margin:0 0 10px 23px}
  .checklist-section-practice{margin:0 0 12px 23px}
  .course-section-panel>div{padding-left:var(--space-lab-chain-gap)}.course-section-header{flex-wrap:wrap;gap:0}.course-section-header>.course-section-toggle{flex-basis:100%}.exam-readiness-link{margin:-4px 0 14px 23px}.exam-row{align-items:stretch}.exam-row .right{display:none}
  /* Wrapped under the exam title, the checklist keeps its place and Reorder
     follows it, on the same indent. */
  .personal-reorder-toggle{order:3;margin:var(--space-reorder-toggle-wrap)}
}
@media(prefers-reduced-motion:reduce){
  .course-disclosure,.course-disclosure-panel,.course-section-panel,.disclosure-chevron,.course-study-row,.course-study-arrow,.exam-readiness-bar i,.exam-readiness-label::after{transition:none!important}
}
/* ---- lecture objectives: recommendation + contextual disclosures ---- */
.objective-recommendation{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-28px);margin:0 0 18px;padding:var(--primitive-spacing-20px) var(--primitive-spacing-22px);border:1px solid color-mix(in srgb,var(--action-primary-bg) 42%,var(--border-subtle));border-radius:var(--primitive-radius-12px);background:linear-gradient(105deg,color-mix(in srgb,var(--action-primary-bg) 11%,var(--surface-panel)),var(--surface-panel) 72%);box-shadow:0 8px 24px rgba(var(--elev-tint),.08)}
.objective-recommendation>div{display:grid;gap:var(--primitive-spacing-4px);min-width:0}.objective-recommendation h2{margin:0;font-size:var(--primitive-font-size-18px)}.objective-recommendation p{margin:0;color:var(--text-secondary);font-size:var(--primitive-font-size-13-5px)}.objective-recommendation small{color:var(--text-secondary);font-size:var(--primitive-font-size-12px);font-weight:650}.objective-recommendation .primary{flex:0 0 auto;min-width:150px}.objective-recommendation-complete{border-color:var(--border-subtle);background:color-mix(in srgb,var(--success-fg) 5%,var(--surface-panel));box-shadow:none}
.objective-list{border-top:1px solid var(--border-subtle)}.objective-disclosure{border-bottom:1px solid var(--border-subtle);transition:background-color var(--theme-paint-duration,.2s) ease,border-color var(--theme-paint-duration,.2s) ease}.objective-disclosure.is-open{background:linear-gradient(90deg,color-mix(in srgb,var(--action-primary-bg) 6%,transparent),transparent 76%);border-bottom-color:color-mix(in srgb,var(--action-primary-bg) 32%,var(--border-subtle))}
.objective-disclosure-toggle{display:flex;align-items:center;gap:var(--primitive-spacing-14px);width:100%;min-width:0;padding:var(--primitive-spacing-16px) var(--primitive-spacing-8px);border:0;background:transparent;color:var(--text-primary);cursor:pointer;text-align:left}.objective-disclosure-toggle:hover{background:color-mix(in srgb,var(--action-primary-bg) 4%,transparent)}.objective-disclosure-toggle:hover .disclosure-chevron{border-color:var(--action-primary-bg)}.objective-disclosure.is-open>.objective-disclosure-toggle .disclosure-chevron{transform:rotate(45deg)}
.objective-heading-copy{display:grid;gap:var(--primitive-spacing-5px);min-width:0}.objective-heading-copy>b{font-size:var(--primitive-font-size-14-5px);line-height:1.4}.objective-heading-copy small{display:flex;align-items:center;gap:var(--primitive-spacing-9px);flex-wrap:wrap;color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}.objective-heading-copy .badge{text-transform:none}
.objective-disclosure-panel{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;opacity:.25;transition:grid-template-rows .22s cubic-bezier(.2,.75,.25,1),opacity .16s ease}.objective-disclosure.is-open>.objective-disclosure-panel{grid-template-rows:minmax(0,1fr);opacity:1}.objective-disclosure-panel>div{min-height:0;overflow:hidden}.objective-detail-content{margin:0 8px 16px 31px;padding:var(--primitive-spacing-16px) var(--primitive-spacing-18px);border:1px solid color-mix(in srgb,var(--action-primary-bg) 24%,var(--border-subtle));border-radius:var(--primitive-radius-10px);background:var(--surface-raised)}
.objective-detail-summary{display:flex;align-items:baseline;gap:var(--primitive-spacing-10px);margin-bottom:15px}.objective-detail-summary span{color:var(--text-secondary);font-size:var(--primitive-font-size-12-5px)}.objective-detail-content h3{margin:0 0 7px;font-size:var(--primitive-font-size-12px)}.objective-knowledge-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-subtle)}.objective-knowledge-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--primitive-spacing-18px);padding:var(--primitive-spacing-10px) var(--primitive-spacing-2px);border-bottom:1px solid var(--border-subtle);line-height:1.42}.objective-knowledge-meta{display:flex;align-items:center;justify-content:flex-end;gap:var(--primitive-spacing-10px)}.objective-knowledge-meta small{min-width:72px;color:var(--text-secondary);font-size:var(--primitive-font-size-11-5px);text-align:right}
.objective-detail-action{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-24px);padding-top:var(--primitive-spacing-16px)}.objective-detail-action>div{display:grid;gap:var(--primitive-spacing-3px)}.objective-detail-action small{max-width:650px;color:var(--text-secondary);font-size:var(--primitive-font-size-12px);line-height:1.45}.objective-detail-action button{flex:0 0 auto}.objective-detail-loading,.objective-detail-error{display:flex;align-items:center;gap:var(--primitive-spacing-11px);min-height:72px;color:var(--text-secondary)}.objective-detail-spinner{width:18px;height:18px;border:2px solid var(--line-strong);border-top-color:var(--action-primary-bg);border-radius:50%;animation:route-spin .7s linear infinite}.objective-detail-error{justify-content:space-between;color:var(--danger-fg)}.objective-detail-error>div{display:grid;gap:var(--primitive-spacing-2px)}.objective-detail-error small{color:var(--text-secondary)}.objective-unavailable{display:flex;justify-content:space-between;gap:var(--primitive-spacing-18px);padding:var(--primitive-spacing-16px) var(--primitive-spacing-8px);border-bottom:1px solid var(--border-subtle)}
@media(max-width:640px){
  .objective-recommendation{align-items:stretch;flex-direction:column;gap:var(--primitive-spacing-15px);padding:var(--primitive-spacing-17px)}
  .objective-disclosure-toggle{align-items:flex-start;padding:var(--primitive-spacing-15px) var(--primitive-spacing-2px)}.objective-heading-copy>b{font-size:var(--primitive-font-size-14px)}.objective-heading-copy small{align-items:flex-start;display:grid;gap:var(--primitive-spacing-5px)}
  .objective-detail-content{margin:0 0 13px 0;padding:var(--primitive-spacing-14px)}.objective-detail-summary{display:grid;gap:var(--primitive-spacing-1px)}.objective-knowledge-row{grid-template-columns:1fr;gap:var(--primitive-spacing-7px)}.objective-knowledge-meta{justify-content:flex-start}.objective-knowledge-meta small{text-align:left}.objective-detail-action{align-items:stretch;flex-direction:column;gap:var(--primitive-spacing-13px)}
}
@media(prefers-reduced-motion:reduce){
  .objective-disclosure,.objective-disclosure-panel,.objective-disclosure-toggle,.objective-detail-spinner{transition:none!important;animation:none!important}
}
.checklist-sub{margin:16px 0 6px;font-size:var(--primitive-font-size-14px);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.checklist-item{display:grid;grid-template-columns:22px 1fr;gap:var(--primitive-spacing-10px);align-items:start;
  padding:var(--primitive-spacing-9px) 0;border-bottom:1px solid var(--border-subtle);cursor:pointer;line-height:1.45}
.checklist-item:last-child{border-bottom:0}
.checklist-item input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:var(--action-primary-bg);cursor:pointer}
.checklist-item.done>span{color:var(--text-secondary);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.checklist-card p.muted{font-size:var(--primitive-font-size-12px)}
.pdf-viewer{display:block;margin-top:6px;background:var(--surface-raised)}

/* ---- exam readiness workspace ---- */
.rdy-summary{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-14px);margin:10px 0 2px}
.rdy-count{display:inline-flex;align-items:center;gap:var(--primitive-spacing-6px);font-size:var(--primitive-font-size-13px)}
.rdot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  border:var(--visual-rdot-outline)}
.rdot-green{background:var(--success-fg)}
.rdot-yellow{background:var(--warning-fg)}
.rdot-red{background:var(--danger-fg)}
.rdot-gray{background:var(--line-strong)}
/* checklist sections reuse the courses navigator's disclosure language:
   restrained chevron, hierarchy through indentation, summary still legible
   while the contents are hidden. */
.checklist-toolbar{display:flex;gap:var(--primitive-spacing-18px);align-items:center;margin:18px 2px 0}
.checklist-section .course-section-toggle b{font-size:var(--primitive-font-size-15px);text-transform:none;letter-spacing:0;color:var(--text-primary)}
.checklist-section .course-section-toggle small{margin-top:3px}
.checklist-section .course-section-header{gap:var(--primitive-spacing-14px)}
.exam-readiness-bar.is-section{flex:0 0 auto;width:84px;height:6px}
.checklist-section .checklist-section-practice{flex:0 0 auto;font-size:var(--primitive-font-size-12-5px);font-weight:640;text-decoration:none}
.checklist-section .checklist-section-practice:hover{text-decoration:underline}
.checklist-section .course-section-panel>div{padding:var(--primitive-spacing-2px) 0 var(--primitive-spacing-12px) var(--primitive-spacing-25px)}
.checklist-empty{margin:10px 0;font-size:var(--primitive-font-size-13px)}
/* filter chips: the readiness tally IS the filter, so the page states each
   count once and lets it be acted on. */
.checklist-filters{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-8px);margin:14px 0 2px}
.checklist-chip{display:inline-flex;align-items:center;gap:var(--primitive-spacing-7px);padding:var(--primitive-spacing-6px) var(--primitive-spacing-12px);border-radius:var(--primitive-radius-999px);
  border:1px solid var(--border-subtle);background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--primitive-font-size-12-5px);
  font-weight:620;cursor:pointer;transition:border-color .14s ease,color .14s ease,background-color .14s ease}
.checklist-chip:hover{color:var(--text-primary);border-color:var(--line-strong)}
.checklist-chip.is-active{color:var(--action-primary-bg);border-color:color-mix(in srgb,var(--action-primary-bg) 55%,transparent);
  background:color-mix(in srgb,var(--action-primary-bg) 10%,transparent)}
.checklist-chip-count{font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.checklist-chip.is-active .checklist-chip-count{color:var(--action-primary-bg)}
.checklist-chip.is-secondary{border-style:dashed}
/* objective rows: status dot, the professor's sentence, and nothing else
   until the row is opened. */
.rdy-item{border-bottom:1px solid var(--border-subtle);line-height:1.45}
.rdy-item:last-child{border-bottom:0}
.rdy-row-toggle{display:flex;align-items:flex-start;gap:var(--primitive-spacing-11px);width:100%;padding:var(--primitive-spacing-11px) var(--primitive-spacing-4px) var(--primitive-spacing-11px) 0;
  border:0;background:transparent;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}
.rdy-row-toggle:hover{color:var(--action-primary-bg)}
.rdy-row-toggle:hover .disclosure-chevron{border-color:var(--action-primary-bg)}
.rdy-row-text{flex:1;min-width:0}
.rdy-item .rdot{margin-top:5px;width:12px;height:12px}
.rdy-row-toggle .disclosure-chevron{margin-top:6px}
.rdy-item.is-open>.rdy-row-toggle .disclosure-chevron{transform:rotate(45deg)}
.rdy-reviewed-mark{flex:0 0 auto;margin-top:1px;color:var(--success-fg);font-size:var(--primitive-font-size-13px);font-weight:700}
.rdy-item.is-reviewed .rdy-row-text{color:var(--text-secondary)}
.rdy-row-panel{padding:0 var(--primitive-spacing-4px) var(--primitive-spacing-12px) var(--primitive-spacing-23px)}
.rdy-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--primitive-spacing-12px);margin-top:2px}
.rdy-meta .ghost{padding:var(--primitive-spacing-5px) var(--primitive-spacing-12px);font-size:var(--primitive-font-size-12-5px)}
.rdy-reviewed{display:inline-flex;align-items:center;gap:var(--primitive-spacing-5px);font-size:var(--primitive-font-size-12px);color:var(--text-secondary);cursor:pointer}
.rdy-reviewed input{width:15px;height:15px;accent-color:var(--action-primary-bg)}
.linklike{background:none;border:0;padding:0;color:var(--action-primary-bg);font:inherit;font-size:var(--primitive-font-size-13px);
  cursor:pointer;text-decoration:underline}
.linklike:hover{color:var(--action-primary-bg-hover)}
.rdy-why{margin-top:8px}
.rdy-whybox{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px)}
.rdy-whybox table{width:100%}
.rdy-whybox td,.rdy-whybox th{padding:var(--primitive-spacing-5px) var(--primitive-spacing-6px);vertical-align:top}
.rdy-flash{animation:rdyflash 1.6s ease-out}
@keyframes rdyflash{0%{background:var(--accent-soft)}100%{background:transparent}}
/* reference cards (equation sheets, classification tables, usage notes) */
.rdy-reflist{margin:4px 0 0;padding-left:var(--primitive-spacing-20px)}
.rdy-reflist li{margin:5px 0;line-height:1.5}
.checklist-reference-block{padding:var(--primitive-spacing-14px) 0;border-top:1px solid var(--border-subtle)}
.checklist-reference-block:first-child{border-top:0;padding-top:var(--primitive-spacing-4px)}
.checklist-reference-block h3{font-size:var(--primitive-font-size-14-5px)}
.rdy-ref-warn h3{color:var(--warning-fg)}
.rdy-ref-warn .rdy-reflist li{color:var(--text-primary)}

/* ---- review of previously answered quiz questions ---- */
.review-opts button{cursor:default;opacity:1}
.review-opts button:hover{border-color:var(--border-subtle)}
.review-opts button.correct:hover{border-color:var(--success-fg)}
.review-opts button.wrong:hover{border-color:var(--danger-fg)}
.review-tag{float:right;margin-left:12px;font-size:var(--primitive-font-size-11px);font-weight:750;color:var(--text-secondary)}

/* ---- Structured Recall ---- */
.sr-gate{text-align:center;padding:var(--primitive-spacing-18px) var(--primitive-spacing-8px)}
.sr-gate-note{margin:0 0 6px;color:var(--text-secondary);font-size:var(--primitive-font-size-14px)}
.sr-count{margin:0 0 14px;font-size:var(--primitive-font-size-13px);color:var(--text-secondary)}
.sr-matrix-wrap{overflow-x:auto;margin-top:10px}
.sr-matrix{width:100%;border-collapse:collapse;font-size:var(--primitive-font-size-14px)}
.sr-matrix th,.sr-matrix td{border:1px solid var(--border-subtle);padding:var(--primitive-spacing-8px) var(--primitive-spacing-10px);text-align:center}
.sr-matrix thead th{background:var(--surface-raised);font-size:var(--primitive-font-size-12px);letter-spacing:.02em}
.sr-matrix tbody th{text-align:left;font-weight:500;line-height:1.4;max-width:340px}
.sr-cell{display:flex;align-items:center;justify-content:center;cursor:pointer;min-height:30px;margin:0}
.sr-cell input{width:18px;height:18px;accent-color:var(--action-primary-bg);cursor:pointer}
.sr-progress{text-align:center;font-size:var(--primitive-font-size-12px);margin:10px 0}
.sr-progress.sr-need{color:var(--danger-fg);font-weight:700}
.sr-feedback{margin:10px 0;text-align:left}
.sr-score{margin:0 0 8px}
.sr-atoms{width:100%;border-collapse:collapse;font-size:var(--primitive-font-size-13px)}
.sr-atoms td{padding:var(--primitive-spacing-6px) var(--primitive-spacing-8px);border-bottom:1px solid var(--border-subtle);vertical-align:top}
.sr-atoms td:first-child{width:22px;font-weight:800}
.sr-atoms tr.sr-ok td:first-child{color:var(--success-fg)}
.sr-atoms tr.sr-miss td:first-child{color:var(--answer-choice-incorrect-ink)}
.sr-atoms tr.sr-miss{background:transparent}
/* a false statement correctly left out is neutral — never a green "you had this" */
.sr-atoms tr.sr-neutral td{color:var(--text-secondary)}
.sr-atoms tr.sr-neutral td:first-child{color:var(--line-strong)}
.sr-atoms tr.sr-neutral td:nth-child(2){text-decoration:none;
  text-decoration-color:var(--line-strong)}
.sr-note{font-size:var(--primitive-font-size-12px);margin:8px 0 0}
/* select-all options marked by their own truth, not the overall verdict */
.opts button.missed{border-color:var(--warning-fg);border-style:dotted;
  background:var(--surface-raised)}
.opts button.missed:after{content:"Missed";float:right;margin-left:12px;
  font-size:var(--primitive-font-size-11px);font-weight:750;color:var(--warning-fg)}
.opts button.left-out{opacity:1}

/* ---- calculation questions: instruction, equation, given, find ---- */
.calc-panel{max-width:920px;margin:0 auto;text-align:left}
.calc-eyebrow{margin:0 0 4px;font-size:var(--primitive-font-size-11px);letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-secondary);font-weight:750}
.calc-prompt{margin:0 0 20px;font-size:var(--primitive-font-size-21px);font-weight:650;line-height:1.35}
.calc-equation{display:flex;align-items:center;justify-content:center;gap:var(--primitive-spacing-12px);
  padding:var(--primitive-spacing-20px) var(--primitive-spacing-16px);margin:0 0 22px;background:var(--surface-raised);
  border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);overflow-x:auto;
  font-size:var(--primitive-font-size-23px);line-height:1.3}
.calc-lhs{font-weight:650}
.calc-eq{color:var(--text-secondary)}
.calc-expr{white-space:nowrap}
.calc-frac{display:inline-flex;flex-direction:column;align-items:center;
  vertical-align:middle;white-space:nowrap}
.calc-frac .calc-num{padding:0 var(--primitive-spacing-10px) var(--primitive-spacing-4px)}
.calc-frac .calc-den{padding:var(--primitive-spacing-4px) var(--primitive-spacing-10px) 0;border-top:2px solid currentColor}
.calc-columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:var(--primitive-spacing-26px);align-items:start}
.calc-label{margin:0 0 8px;font-size:var(--primitive-font-size-11px);letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-secondary);font-weight:750}
.calc-givens{margin:0;display:grid;gap:var(--primitive-spacing-2px)}
.calc-given{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:var(--primitive-spacing-14px);
  align-items:baseline;padding:var(--primitive-spacing-7px) 0;border-bottom:1px solid var(--border-subtle)}
.calc-given:last-child{border-bottom:0}
.calc-given dt,.calc-given dd{margin:0}
.calc-symbol{font-size:var(--primitive-font-size-18px);font-weight:650}
.calc-desc{display:block;font-size:var(--primitive-font-size-12px);color:var(--text-secondary);font-weight:400}
.calc-value{font-size:var(--primitive-font-size-18px);font-variant-numeric:tabular-nums}
.calc-unit{font-size:var(--primitive-font-size-14px);color:var(--text-secondary)}
.calc-find p{margin:0;padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);background:var(--accent-soft);
  border-radius:var(--primitive-radius-8px)}
.calc-find .calc-unit{display:block;margin-top:2px}
@media (max-width:760px){
  .calc-columns{grid-template-columns:1fr;gap:var(--primitive-spacing-18px)}
  .calc-equation{font-size:var(--primitive-font-size-19px);justify-content:flex-start}
  .calc-prompt{font-size:var(--primitive-font-size-18px)}
}

/* ---- owner usage analytics ---- */
.usage-table-wrap{overflow:auto;margin-top:10px}
.usage-table{width:100%;border-collapse:collapse;font-size:var(--primitive-font-size-13px)}
.usage-table th{text-align:left;font-size:var(--primitive-font-size-11px);letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-secondary);padding:var(--primitive-spacing-6px) var(--primitive-spacing-10px);
  border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--workspace)}
.usage-table td{padding:var(--primitive-spacing-9px) var(--primitive-spacing-10px);border-bottom:1px solid var(--border-subtle);vertical-align:top}
.usage-num{text-align:right;font-variant-numeric:tabular-nums}
.usage-row{cursor:pointer}
.usage-row:hover{background:var(--surface-raised)}
.usage-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.usage-spark{display:inline-flex;gap:var(--primitive-spacing-2px);align-items:flex-end;height:20px}
.usage-spark i{width:5px;height:100%;border-radius:var(--primitive-radius-2px);background:var(--border-subtle);display:block}
.usage-spark i.lv0{background:var(--border-subtle);opacity:.45}
.usage-spark i.lv1{background:color-mix(in srgb,var(--action-primary-bg) 35%,transparent)}
.usage-spark i.lv2{background:color-mix(in srgb,var(--action-primary-bg) 55%,transparent)}
.usage-spark i.lv3{background:color-mix(in srgb,var(--action-primary-bg) 75%,transparent)}
.usage-spark i.lv4{background:var(--action-primary-bg)}
.usage-spark-large .usage-spark{height:34px}
.usage-spark-large .usage-spark i{width:9px}
.grid.two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-14px)}
@media (max-width:820px){.grid.two-column{grid-template-columns:1fr}
  .usage-table{font-size:var(--primitive-font-size-12px)}.usage-table td,.usage-table th{padding:var(--primitive-spacing-6px)}}
@media (max-width:720px){.sr-matrix{font-size:var(--primitive-font-size-12-5px)}.sr-matrix th,.sr-matrix td{padding:var(--primitive-spacing-6px)}}
.sr-weak{margin-top:10px;padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);border-left:3px solid var(--danger-fg);background:color-mix(in srgb,var(--danger-fg) 6%,transparent);border-radius:var(--primitive-radius-0-6px-6px-0)}
.sr-weak-title{margin:0 0 6px;font-weight:700;font-size:var(--primitive-font-size-13px)}
.sr-weak ul{margin:0;padding-left:var(--primitive-spacing-18px);font-size:var(--primitive-font-size-13px);line-height:1.5}

/* ---- Therapeutic Dispatch ---- */
.dispatch-anchor{text-align:center;font-size:var(--primitive-font-size-19px);padding:var(--primitive-spacing-10px) 0 var(--primitive-spacing-14px)}
.dispatch-anchor .muted{font-size:var(--primitive-font-size-13px);display:block;margin-top:2px}
.dispatch-bays button{position:relative}
.dispatch-bays button.sel{border-color:var(--action-primary-bg);background:var(--accent-soft);
  box-shadow:none}
.dispatch-bays button.correct,.dispatch-cell.correct{border-color:var(--success-fg);
  background:var(--surface-raised)}
.dispatch-bays button.wrong,.dispatch-cell.wrong{border-color:var(--answer-choice-incorrect-ink);
  background:var(--surface-raised);border-bottom-style:dashed}
.dispatch-bays button.missed,.dispatch-cell.missed{border-color:var(--warning-fg);
  background:var(--surface-raised);
  border-style:dotted}
.dispatch-grid th[scope=row]{max-width:230px}
.dispatch-class{display:block;font-size:var(--primitive-font-size-11px);font-weight:400}
.dispatch-cell{width:100%;min-height:34px;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-6px);
  background:var(--surface-raised);cursor:pointer}
.dispatch-cell:hover{border-color:var(--action-primary-bg)}
.dispatch-cell.sel{border-color:var(--action-primary-bg);background:var(--accent-soft)}
.dispatch-cell:is(.sel,.correct,.wrong):after{content:"";display:inline-block;vertical-align:middle;flex:0 0 auto;width:var(--size-control-glyph-mark);height:var(--size-control-glyph-mark);background:var(--action-primary-bg);
  -webkit-mask:var(--control-mask-check) center/contain no-repeat;mask:var(--control-mask-check) center/contain no-repeat}
.dispatch-cell.correct:after{background:var(--success-fg)}
.dispatch-cell.wrong:after{background:var(--answer-choice-incorrect-ink);-webkit-mask-image:var(--control-mask-cross);mask-image:var(--control-mask-cross)}
.dispatch-cell.answer-option:after{content:none}
.dispatch-cell.missed:after{content:"·";color:var(--warning-fg);font-weight:800}
.dispatch-explain{margin:10px 0;padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);border-left:3px solid var(--action-primary-bg);
  background:var(--surface-raised);border-radius:var(--primitive-radius-0-6px-6px-0);text-align:left}
.dispatch-explain p{margin:4px 0;font-size:var(--primitive-font-size-13px)}
@media(max-width:760px){.calendar-organizer-grid{grid-template-columns:1fr}.organizer-list{max-height:32vh}.calendar-import-preview{width:100%;height:100dvh;max-height:100dvh;border-radius:0}.import-event-choice{grid-template-columns:auto minmax(0,1fr)}.import-event-choice em{grid-column:2}.import-new-course{grid-template-columns:1fr}}

/* guided course lesson */
.lesson-steps{display:flex;gap:var(--primitive-spacing-6px);flex-wrap:wrap;margin:10px 0 4px}
.lesson-step{font-size:var(--primitive-font-size-11-5px);font-weight:600;padding:var(--primitive-spacing-3px) var(--primitive-spacing-10px);border-radius:var(--primitive-radius-20px);
  background:var(--surface-raised);color:var(--text-secondary);border:1px solid var(--border-subtle)}
.lesson-step.on{background:var(--accent-soft);color:var(--action-primary-bg);border-color:var(--action-primary-bg)}
.lesson-step.done{color:var(--success-fg)}
.lesson-step.done::before{content:"";display:inline-block;width:var(--size-control-mark);height:var(--size-control-mark);margin-inline-end:var(--space-control-glyph-gap);vertical-align:var(--space-control-mark-baseline);background:currentColor;
  -webkit-mask:var(--control-mask-check) center/contain no-repeat;mask:var(--control-mask-check) center/contain no-repeat}
.lesson-answer{margin-top:10px;padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);border-left:4px solid var(--action-primary-bg);
  background:var(--surface-raised);border-radius:var(--primitive-radius-0-6px-6px-0);text-align:left}
.lesson-your-answer{margin-top:10px;padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);border:1px dashed var(--border-subtle);
  border-radius:var(--primitive-radius-6px);background:var(--surface-raised);white-space:pre-wrap;text-align:left}
.lesson-scenario{margin-top:8px;padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);border-left:4px solid var(--warning-fg);
  background:var(--surface-raised);border-radius:var(--primitive-radius-0-6px-6px-0);text-align:left}
.lesson-elements{display:block}
.lesson-element{display:flex;gap:var(--primitive-spacing-8px);align-items:flex-start;text-align:left;
  padding:var(--primitive-spacing-9px) var(--primitive-spacing-11px);margin:6px 0;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);
  background:var(--surface-raised);cursor:pointer;font-size:var(--primitive-font-size-13-5px)}
.lesson-element:hover{border-color:var(--action-primary-bg)}
.lesson-element input{margin-top:3px;flex:0 0 auto}

.lesson-confidence{display:flex;gap:var(--primitive-spacing-8px);margin-top:12px}
.lesson-confidence button{flex:1;font-size:var(--primitive-font-size-18px);font-weight:600;padding:var(--primitive-spacing-14px) 0}
/* A step whose request is in flight says so. Silence after a click is what a
   broken button looks like. */
.lesson-step-error{margin-top:14px}
[data-lesson-busy]{position:relative}
[data-lesson-busy] button{cursor:progress}
[data-lesson-busy]::after{content:"Saving…";position:absolute;top:10px;right:14px;
  font-size:var(--primitive-font-size-11-5px);font-weight:600;color:var(--text-secondary)}

/* ---- shared assessment kernel: builder, sparse runner, and results ---- */
.assess-launch-head,.assess-builder-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--primitive-spacing-24px);margin:30px 0 22px}.assess-launch-head h1,.assess-builder-head h1,.assess-confirm h1{margin:4px 0 7px;font-size:var(--primitive-font-size-clamp-28px-4vw-42px);line-height:1.08}.assess-launch-head p,.assess-builder-head p{margin:0;color:var(--text-secondary);max-width:650px}.assess-head-actions{display:flex;align-items:center;gap:var(--primitive-spacing-16px);flex:none}.assess-head-actions a,.text-action{border:0;background:transparent;color:var(--action-primary-bg);font:inherit;font-weight:650;padding:var(--primitive-spacing-8px) var(--primitive-spacing-2px);cursor:pointer;text-decoration:none}.assess-head-actions a:hover,.text-action:hover{text-decoration:underline}
.assess-scope-bar{display:grid;grid-template-columns:180px minmax(260px,1fr);align-items:center;gap:var(--primitive-spacing-20px);padding:var(--primitive-spacing-18px) var(--primitive-spacing-22px);margin-bottom:22px;background:var(--surface-raised)}.assess-scope-bar>span{font-size:var(--primitive-font-size-11-5px);font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}.assess-scope-bar select{max-width:560px;font-weight:650}.assess-scope-bar div{display:flex;flex-direction:column;gap:var(--primitive-spacing-3px)}.assess-scope-bar small{color:var(--text-secondary)}
.assess-launch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-16px);margin-top:24px}.assess-launch-card{display:flex;flex-direction:column;min-height:290px;padding:var(--primitive-spacing-22px);text-align:left}.assess-launch-card.featured{grid-column:1/-1;border-color:color-mix(in srgb,var(--action-primary-bg) 55%,var(--border-subtle))}.assess-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--primitive-spacing-16px)}.assess-card-heading h3{margin:4px 0 0;font-size:var(--primitive-font-size-20px)}
.assess-contract-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-16px);margin:22px 0 14px}.assess-contract-grid .wide{grid-column:1/-1}.assess-contract-grid dt,.assess-builder-summary dt,.assess-confirm-grid dt{font-size:var(--primitive-font-size-10-5px);font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}.assess-contract-grid dd,.assess-builder-summary dd,.assess-confirm-grid dd{margin:4px 0 0;font-weight:700}.assess-contract-grid small,.assess-confirm-grid small{display:block;margin-top:3px;color:var(--text-secondary);font-weight:450}.assess-card-description{color:var(--text-secondary);font-size:var(--primitive-font-size-13px);line-height:1.5;margin:0 0 18px}.assess-card-actions{display:flex;align-items:center;gap:var(--primitive-spacing-18px);margin-top:auto}.assess-custom-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--primitive-spacing-24px);margin:26px 0;padding:var(--primitive-spacing-22px) var(--primitive-spacing-4px);border-top:1px solid var(--border-subtle)}.assess-custom-foot p{margin:4px 0 0;color:var(--text-secondary)}
.assess-builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:var(--primitive-spacing-20px)}.assess-builder-main{display:grid;gap:var(--primitive-spacing-16px)}.assess-builder-section{padding:var(--primitive-spacing-22px)}.assess-builder-section>header{display:flex;gap:var(--primitive-spacing-13px);align-items:flex-start;margin-bottom:20px}.assess-builder-section>header>span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:var(--primitive-radius-999px);background:var(--action-primary-bg);color:var(--assess-builder-step-text);font-weight:750}.assess-builder-section header h2{font-size:var(--primitive-font-size-18px);margin:2px 0 3px}.assess-builder-section header p{font-size:var(--primitive-font-size-13px);margin:0;color:var(--text-secondary)}.assess-builder-section .setuprow{margin:13px 0}.assess-advanced{margin:14px 0}.assess-advanced>summary{cursor:pointer;font-weight:650;color:var(--action-primary-bg);padding:var(--primitive-spacing-8px) 0}.assess-advanced[open]>summary{margin-bottom:8px}.assess-builder-note,.assess-contract-copy{font-size:var(--primitive-font-size-12-5px);color:var(--text-secondary);margin:14px 0 0}.assess-time-control{display:flex;align-items:center;gap:var(--primitive-spacing-9px)}.assess-time-control input{max-width:110px}.assess-time-control span{color:var(--text-secondary)}
.assess-builder-summary{position:sticky;top:94px;padding:var(--primitive-spacing-22px)}.assess-builder-summary h2{font-size:var(--primitive-font-size-20px);margin:6px 0 18px}.assess-builder-summary dl{display:grid;gap:var(--primitive-spacing-14px);margin:0 0 20px}.assess-builder-summary dd{font-size:var(--primitive-font-size-14px)}.assess-builder-summary>p{font-size:var(--primitive-font-size-11-5px);color:var(--text-secondary);line-height:1.4;margin:10px 0 0}
.assess-confirm{max-width:850px;margin:34px auto;text-align:left}.assess-confirm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0;overflow:hidden}.assess-confirm-grid>div{min-height:110px;padding:var(--primitive-spacing-20px) var(--primitive-spacing-22px);border-bottom:1px solid var(--border-subtle)}.assess-confirm-grid>div:nth-child(odd){border-right:1px solid var(--border-subtle)}.assess-confirm-grid>div:nth-last-child(-n+2){border-bottom:0}.assess-confirm-grid dd{font-size:var(--primitive-font-size-17px)}.assess-scope-assurance,.assess-clock-note{color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}.assess-rules{margin:16px 0}.assess-rules summary{cursor:pointer;color:var(--action-primary-bg);font-weight:650}.assess-rules ul{margin:10px 0 0;padding-left:var(--primitive-spacing-22px);color:var(--text-secondary)}
.assess-builder{display:flex;flex-direction:column;gap:var(--primitive-spacing-14px);text-align:left}
.assess-fieldset{border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);margin:0}
.assess-fieldset legend{font-weight:600;font-size:var(--primitive-font-size-13-5px);padding:0 var(--primitive-spacing-6px)}
.assess-checks{display:grid;gap:var(--primitive-spacing-8px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.assess-check{display:flex;gap:var(--primitive-spacing-8px);align-items:flex-start;font-size:var(--primitive-font-size-13-5px)}
.assess-weight{align-items:center}
.assess-weight input{max-width:96px}
.assess-untimed{display:flex;gap:var(--primitive-spacing-8px);align-items:center;font-size:var(--primitive-font-size-13-5px)}
.assess-kind h3{margin:0 0 6px}
.assess-attempt-row{display:flex;gap:var(--primitive-spacing-14px);align-items:center;justify-content:space-between}
.assess-attempt-list,.assess-open-list{display:grid;gap:var(--primitive-spacing-10px)}

/* Assessment selection uses the same quiet switcher/card grammar as Activities.
   The catalog supplies the choices; only the selected surface is mounted. */
.assess-launch-head{margin:var(--space-assess-section-gap) 0 var(--space-assess-item-gap)}
.assess-launch-head .eyebrow{display:block;margin-bottom:var(--space-assess-copy-gap)}
.assess-list-row:focus-visible,.assess-list-custom:focus-visible,.assess-settings-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.assess-settings{margin-top:var(--space-assess-section-gap);padding-top:var(--space-assess-panel-gap);border-top:1px solid var(--border-subtle)}
.assess-settings-toggle{display:flex;align-items:center;gap:var(--space-assess-control-gap);width:max-content;max-width:100%;padding:var(--space-assess-control-pad) 0;border:0;background:transparent;cursor:pointer;color:var(--action-primary-bg);font:inherit;font-weight:650}
.assess-settings-toggle::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .22s ease}
.assess-settings-toggle[aria-expanded="true"]::after{transform:rotate(45deg)}
.assess-settings-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .2s ease}
.assess-settings-panel.is-open{grid-template-rows:1fr;opacity:1}
.assess-settings-content{display:grid;gap:var(--space-assess-panel-gap);min-height:0;overflow:hidden}
.assess-settings-panel.is-open .assess-settings-content{padding-top:var(--space-assess-field-pad)}
.assess-settings-content .assess-builder-section,.assess-custom-fields .assess-builder-section{padding:var(--space-assess-field-pad) 0;background:transparent;border:0;box-shadow:none}
.assess-settings-content .assess-builder-section>header,.assess-custom-fields .assess-builder-section>header{margin-bottom:var(--space-assess-item-gap)}
.assess-settings-content .assess-builder-section>header>span,.assess-custom-fields .assess-builder-section>header>span{display:none}
.assess-settings-content .assess-builder-section h2,.assess-custom-fields .assess-builder-section h2{font-size:var(--text-assess-heading);margin:0 0 var(--space-assess-control-pad)}
.assess-custom-fields{display:grid;gap:var(--space-assess-panel-gap);margin-top:var(--space-assess-section-gap);padding-top:var(--space-assess-field-pad);border-top:1px solid var(--border-subtle)}
.assess-start-note{margin:var(--space-assess-item-gap) 0 0;color:var(--text-secondary);font-size:var(--text-assess-label)}

@media(prefers-reduced-motion:reduce){.assess-settings-panel,.assess-settings-toggle::after,.assess-list-row{transition:none}}
/* ---- Assessments: select, confirm, assess ----
   Activities are browsed; an assessment is chosen. The list is one quiet row
   per test with its last result, and the confirm step says only what a
   learner must know before starting. The seriousness comes from what the
   page leaves out, not from decoration. */
.card.assess-list{margin:0;padding:var(--space-assess-none);list-style:none;overflow:hidden}
.assess-list li:last-child .assess-list-row{border-bottom:0}
.assess-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto 10px;align-items:center;gap:var(--space-assess-facts-gap);padding:var(--space-assess-row-pad) var(--space-assess-major-gap);border-bottom:1px solid var(--border-subtle);color:var(--text-primary);text-decoration:none;transition:background .15s ease}
.assess-list-row:hover{background:var(--surface-raised)}
.assess-list-copy{display:grid;gap:var(--space-assess-detail-gap);min-width:0}
.assess-list-copy b{font-size:var(--text-assess-heading);font-weight:650}
.assess-list-copy small,.assess-list-status{font-size:var(--text-assess-item);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.assess-list-status.is-scored{color:var(--text-primary);font-weight:650}
.assess-list-status.is-open{color:var(--action-primary-bg);font-weight:650}
.assess-list-go{width:7px;height:7px;border-top:2px solid var(--text-secondary);border-right:2px solid var(--text-secondary);transform:rotate(45deg)}
.assess-list-custom{display:inline-flex;align-items:center;gap:var(--space-assess-control-pad);margin-top:var(--space-assess-section-gap);padding:var(--space-assess-control-pad) var(--space-assess-none);color:var(--action-primary-bg);font-weight:650;text-decoration:none}
.assess-list-custom:hover{text-decoration:underline}
.assess-preflight h1{margin:0;font-size:var(--text-assess-title);line-height:1.12}
.assess-preflight-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-assess-major-gap);margin-top:var(--space-assess-copy-gap)}
/* One centred column, the same width as the exam question, so Select,
   Confirm, and Assess share an axis and moving between them never jumps. */
.assess-list-page,.assess-preflight,.assess-preflight-top{max-width:720px;margin-left:auto;margin-right:auto}
/* The same panel the Activities stage stands on, owned here by named roles. */
.card.assess-preflight,.card.assess-list{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-assess-panel)}
.card.assess-preflight{padding:var(--space-assess-panel-pad)}
.assess-scope-line{margin:0 0 var(--space-assess-facts-gap)}
.assess-scope-line p{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-assess-control-pad);margin:0;font-size:var(--text-assess-body)}
.assess-scope-line span{color:var(--text-secondary)}
.assess-scope-line b{font-weight:650}
.assess-scope-line .text-action{padding:var(--space-assess-none)}
.assess-scope-line select{display:block;max-width:100%;margin-top:var(--space-assess-control-pad);font-weight:650}
.assess-scope-line select[hidden]{display:none}
.assess-preflight-top{margin-top:var(--space-assess-major-gap);margin-bottom:var(--space-assess-item-gap)}
.card.assess-preflight{display:grid;gap:var(--space-assess-panel-gap);margin-top:0;margin-bottom:var(--space-assess-surface-gap);text-align:left}
.assess-preflight,.assess-custom-fields{grid-template-columns:minmax(0,1fr)}
.assess-preflight>*,.assess-custom-fields>*{min-width:0}
.assess-preflight .stage-brow{margin:0;padding-bottom:var(--space-assess-none);border-bottom:0}
.assess-preflight-meta{margin:calc(-1 * var(--space-assess-copy-gap)) 0 0;color:var(--text-secondary);font-size:var(--text-assess-body);font-variant-numeric:tabular-nums}
.assess-preflight-lede{margin:0;font-size:var(--text-assess-body);line-height:1.5}
.assess-preflight .assess-scope-line{margin:0}
.assess-preflight-rules{margin:0;padding-top:var(--space-assess-panel-gap);border-top:1px solid var(--border-subtle);font-size:var(--text-assess-body);line-height:1.5}
.assess-preflight .assess-settings-toggle::after{transform:rotate(45deg)}
.assess-preflight .assess-settings-toggle[aria-expanded="true"]::after{transform:rotate(-135deg)}
.assess-preflight .assess-custom-fields{margin-top:var(--space-assess-none)}
.assess-preflight .assess-builder-section header p{display:none}
.assess-preflight .assess-builder-section .setuprow{margin:var(--space-assess-item-gap) 0}
.assess-preflight .assess-builder-section select{max-width:100%;min-width:0}
.assess-preflight .assess-time-control input{width:96px;min-height:44px;padding:var(--space-assess-control-pad) var(--space-assess-field-pad);border:1px solid var(--border-subtle);border-radius:var(--radius-assess-control);background:var(--surface-raised);color:var(--text-primary);font:inherit;font-size:var(--text-assess-input);font-variant-numeric:tabular-nums}



/* --------------------------------- the exam ---------------------------------
   A quiet bar, a rail of numbered questions, and the question. An exam is
   muted on purpose: the prompt reads as a plain sentence and only the thing it
   asks about is bold. The rail is Examplify's column of numbers: done ones are
   filled, the current one is ringed, and it scrolls on its own. */
.assess-exam{display:grid;gap:var(--space-exam-gap);text-align:left}
.assess-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-learn-panel-compact);
  padding-bottom:var(--space-learn-panel-compact);border-bottom:1px solid var(--border-subtle)}
.assess-bar-title{font-size:var(--text-learn-small);font-weight:600;color:var(--text-secondary)}
.assess-bar-end{display:flex;align-items:center;gap:var(--space-learn-panel-compact)}
.assess-bar-end button{min-height:0;padding:var(--space-learn-hairline) var(--space-learn-tight);border:0;background:none;box-shadow:none;
  color:var(--text-secondary);font:inherit;font-size:var(--text-learn-small);font-weight:650;cursor:pointer}
.assess-bar-end button:hover{color:var(--danger-fg)}
#assessEndConfirm:not(:empty){margin-bottom:var(--space-learn-stack)}
.assess-clock{font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--text-learn-body);color:var(--text-primary)}
.assess-clock.urgent{color:var(--danger-fg)}
.assess-exam-body{display:grid;grid-template-columns:var(--exam-rail-width) minmax(0,1fr);gap:var(--space-exam-rail-gap);align-items:start}
.assess-exam-main{min-width:0;max-width:var(--exam-measure)}
.assess-rail{position:sticky;top:var(--space-exam-rail-top);display:grid;gap:var(--space-learn-tight);
  max-height:calc(100vh - var(--space-exam-rail-top) - var(--space-exam-gap));overflow-y:auto;overscroll-behavior:contain;
  padding:var(--space-learn-hairline);scrollbar-width:thin}
.assess-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-learn-tight);justify-items:center}
.assess-dot{position:relative;display:grid;place-items:center;width:var(--exam-dot);height:var(--exam-dot);padding:0;
  border:1.5px solid var(--line-strong);border-radius:var(--radius-learn-chip);background:transparent;
  color:var(--text-secondary);font:inherit;font-size:var(--text-learn-small);font-weight:600;font-variant-numeric:tabular-nums;box-shadow:none}
button.assess-dot{cursor:pointer}
button.assess-dot:hover{border-color:var(--action-primary-bg);color:var(--text-primary)}
.assess-dot.is-done{background:var(--border-subtle);border-color:var(--border-subtle);color:var(--text-secondary)}
.assess-dot.is-current{border:2px solid var(--action-primary-bg);color:var(--action-primary-bg);background:var(--accent-soft);font-weight:700}
.assess-dot.is-flagged::after{content:"";position:absolute;top:-2px;right:-2px;width:var(--exam-flag-size);height:var(--exam-flag-size);
  border-radius:var(--radius-learn-chip);background:var(--exam-flag);box-shadow:0 0 0 2px var(--bg)}
.assess-rail-finish{margin-top:var(--space-learn-tight);padding:var(--space-learn-tight) 0;min-height:0;border:0;background:none;box-shadow:none;
  color:var(--action-primary-bg);font:inherit;font-size:var(--text-learn-small);font-weight:650;cursor:pointer}
.assess-question{text-align:left}
.assess-qnum{margin:0 0 var(--space-learn-tight);font-size:var(--text-learn-small);font-weight:650;color:var(--text-secondary)}
.assess-qnum span{font-weight:500;color:var(--text-secondary)}
.assess-prompt{margin:0;font-size:var(--text-exam-prompt);line-height:1.35;font-weight:450;letter-spacing:-.01em;color:var(--text-primary)}
.assess-prompt b{font-weight:750}
.assess-prompt.is-subject{font-weight:750;font-size:var(--text-exam-subject)}
.assess-exhibit{margin:var(--space-learn-panel-compact) 0 0}
.assess-exhibit .rxcard{margin:0}
.assess-exhibit.is-compact .rxcard{font-size:var(--text-learn-small)}
.assess-answer{margin:var(--space-exam-gap) 0 0}
.assess-answer input[type=text],.assess-answer textarea{width:100%}
.assess-numeric-label{display:block;margin-bottom:var(--space-learn-tight);font-weight:650}
.assess-fixed-unit{margin:0;align-items:center}
.assess-fixed-unit input{min-width:0;flex:1}
.assess-fixed-unit span{font-weight:650;color:var(--text-secondary)}
.assess-question .stage-actions{margin-top:var(--space-learn-stack)}
.assess-flag.is-on{color:var(--text-primary);border-color:var(--exam-flag)}
.assess-review-note{margin:var(--space-learn-tight) 0 0;color:var(--text-secondary);font-size:var(--text-learn-body)}
.assess-confirm-inline{display:grid;gap:var(--space-learn-tight);padding:var(--space-learn-panel-compact) var(--space-learn-panel);
  border:1px solid var(--border-subtle);border-left:3px solid var(--danger-fg);border-radius:var(--radius-learn-surface);background:var(--surface-card)}
.assess-confirm-inline p{margin:0;font-size:var(--text-learn-body);color:var(--text-primary)}
.assess-confirm-inline .stage-actions{margin-top:0}
.assess-more{margin-top:var(--space-learn-panel-compact)}
.assess-more summary{cursor:pointer;color:var(--action-primary-bg);font-weight:650;font-size:var(--text-learn-small)}
.assess-ratio,.assess-percent{display:flex;gap:var(--primitive-spacing-8px);align-items:center;max-width:420px}
.assess-ratio input,.assess-percent input{max-width:130px}
.assess-colon{font-size:var(--primitive-font-size-22px);font-weight:700}
.assess-options{border:0;padding:0;margin:0;display:grid;gap:var(--primitive-spacing-8px)}
.assess-options .answer-elimination-row>.assess-option{height:100%}
.assess-option{display:flex;gap:var(--primitive-spacing-10px);align-items:flex-start;padding:var(--primitive-spacing-11px) var(--primitive-spacing-13px);
  border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);background:var(--surface-raised);cursor:pointer}
.assess-option:hover{border-color:var(--action-primary-bg)}
/* Results: the score, one line of context, what to repair, then every
   question as a single row. */
.assess-results{max-width:var(--exam-results-measure);margin:0 auto;text-align:left;display:grid;gap:var(--space-exam-results-gap)}
.assess-score h1{margin:var(--space-learn-hairline) 0 0;display:flex;align-items:baseline;gap:var(--space-learn-tight);font-size:var(--text-exam-score);line-height:1;letter-spacing:-.03em}
.assess-score-of{font-size:var(--text-learn-title);font-weight:600;color:var(--text-secondary);letter-spacing:0}
.assess-score-title{margin:0;font-size:var(--text-learn-small);font-weight:650;color:var(--text-secondary)}
.assess-score-meta{margin:var(--space-learn-tight) 0 0;color:var(--text-secondary);font-size:var(--text-learn-body)}
.assess-score-meta b{color:var(--text-primary)}
.assess-results h2{margin:0 0 var(--space-learn-tight);font-size:var(--text-learn-prompt)}
.assess-results-repair{padding-top:var(--space-exam-results-gap);border-top:1px solid var(--border-subtle)}
.assess-repair-list{list-style:none;margin:0 0 var(--space-learn-panel-compact);padding:0;display:grid}
.assess-repair-list li{display:flex;justify-content:space-between;gap:var(--space-learn-panel-compact);padding:var(--space-learn-tight) 0;
  border-bottom:1px solid var(--border-subtle);font-size:var(--text-learn-body)}
.assess-repair-list li b{font-weight:600;color:var(--danger-fg);font-variant-numeric:tabular-nums}
.assess-repair-list+.stage-actions{margin-top:var(--space-learn-panel-compact)}
.assess-results-questions{padding-top:var(--space-exam-results-gap);border-top:1px solid var(--border-subtle)}
.assess-review{list-style:none;margin:0;padding:0;display:grid}
.assess-review-item{display:grid;grid-template-columns:var(--exam-dot) minmax(0,1fr);gap:var(--space-learn-panel-compact);
  padding:var(--space-learn-panel-compact) 0;border-bottom:1px solid var(--border-subtle)}
.assess-review-item:last-child{border-bottom:0}
.assess-review-num{display:grid;place-items:center;width:var(--exam-review-dot);height:var(--exam-review-dot);border-radius:var(--radius-learn-chip);
  font-size:var(--text-learn-small);font-weight:700;font-variant-numeric:tabular-nums;border:1.5px solid var(--line-strong);color:var(--text-secondary)}
.assess-review-item.is-right .assess-review-num{border-color:var(--success-fg);color:var(--success-fg)}
.assess-review-item.is-wrong .assess-review-num,.assess-review-item.is-blank .assess-review-num{border-color:var(--danger-fg);color:var(--danger-fg)}
.assess-review-body{min-width:0}
.assess-review-prompt{margin:0;font-size:var(--text-learn-body);line-height:1.45;color:var(--text-primary)}
.assess-review-prompt b{font-weight:700}
.assess-review-answer{margin:var(--space-learn-hairline) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-learn-hairline) var(--space-learn-tight);font-size:var(--text-learn-body)}
.assess-answer-right{color:var(--success-fg);font-weight:700}
.assess-review-item.is-right .assess-answer-right{font-weight:600}
.assess-answer-given{color:var(--answer-choice-incorrect-ink);text-decoration-thickness:1.5px}
.assess-review-item.is-wrong .assess-answer-right,.assess-review-item.is-blank .assess-answer-right{color:var(--answer-choice-reference-ink)}
.assess-answer-none{color:var(--text-secondary);font-style:italic}
.assess-answer-arrow{color:var(--text-secondary)}
.assess-review-why{margin:var(--space-learn-hairline) 0 0;font-size:var(--text-learn-small);color:var(--text-secondary)}
.assess-review-item.is-pending .assess-review-num{border-color:var(--exam-flag);color:var(--text-primary)}
.assess-answer-yours{color:var(--text-primary);white-space:pre-wrap}
.assess-answer-note{font-size:var(--text-learn-small);color:var(--text-secondary)}
.assess-review-model{margin:var(--space-learn-hairline) 0 0;font-size:var(--text-learn-body);color:var(--text-primary);white-space:pre-wrap}
.assess-review-model span{margin-right:var(--space-learn-tight);font-size:var(--text-learn-small);font-weight:650;color:var(--text-secondary)}
.assess-results .written-review-panel{margin:var(--space-learn-tight) 0 0}
.assess-results>.stage-actions{margin-top:0;padding-top:var(--space-exam-results-gap);border-top:1px solid var(--border-subtle)}
@media(max-width:720px){
  .assess-exam-body{grid-template-columns:1fr;gap:var(--space-learn-panel-compact)}
  .assess-rail{position:static;max-height:none;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;gap:var(--space-learn-tight);
    padding-bottom:var(--space-learn-tight)}
  .assess-rail ol{display:flex;gap:var(--space-learn-tight)}
  .assess-rail-finish{margin:0 0 0 var(--space-learn-tight);white-space:nowrap}
}
.written-review-panel{margin:var(--space-written-gap) 0;padding:var(--space-written-gap);border:1px solid var(--border-subtle);border-radius:var(--radius-written-panel);background:var(--surface-raised)}
.written-review-panel h4{margin:0 0 var(--space-written-tight)}
.written-review-panel fieldset{border:0;margin:var(--space-written-gap) 0;padding:0}
.written-review-panel legend{font-weight:700;margin-bottom:var(--space-written-tight)}
.written-review-choice{display:flex;gap:var(--space-written-tight);align-items:flex-start;margin:var(--space-written-tight) 0;line-height:1.45;cursor:pointer}
.written-review-choice input{flex:none;margin-top:.25em}
.assess-rules li{margin:6px 0}
@media(max-width:640px){
  .assess-launch-head,.assess-builder-head,.assess-custom-foot{display:grid;align-items:start}.assess-head-actions{flex-wrap:wrap}.assess-scope-bar{grid-template-columns:1fr;gap:var(--primitive-spacing-8px)}.assess-launch-grid,.assess-builder-layout{grid-template-columns:1fr}.assess-launch-card.featured{grid-column:auto}.assess-builder-summary{position:static;order:-1}.assess-confirm-grid{grid-template-columns:1fr}.assess-confirm-grid>div,.assess-confirm-grid>div:nth-child(odd){border-right:0;border-bottom:1px solid var(--border-subtle)}.assess-confirm-grid>div:last-child{border-bottom:0}
  .assess-attempt-row{display:grid;grid-template-columns:1fr auto}
  .assess-attempt-row button{grid-column:1/-1;justify-self:start}
}

/* School-agnostic Drug Library control plane */
.library-tabs{display:flex;gap:var(--primitive-spacing-4px);margin:16px 0;border-bottom:1px solid var(--border-subtle);overflow:auto}.library-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;color:var(--text-secondary);padding:var(--primitive-spacing-11px) var(--primitive-spacing-15px);white-space:nowrap}.library-tabs button.active,.library-tabs button[aria-current=page]{border-bottom-color:var(--action-primary-bg);color:var(--text-primary);font-weight:800}.library-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--primitive-spacing-7px);flex-wrap:wrap}.library-file-label{position:relative;overflow:hidden;cursor:pointer}.library-file-label input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.library-publish-bar{position:sticky;bottom:12px;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:var(--primitive-spacing-16px);margin:20px 0 4px;padding:var(--primitive-spacing-12px) var(--primitive-spacing-15px);border:1px solid var(--action-primary-bg);border-radius:var(--primitive-radius-12px);background:var(--surface-card);box-shadow:var(--visual-library-publish-bar-shadow)}.library-publish-bar>div{display:flex;gap:var(--primitive-spacing-8px)}.library-editor{width:min(760px,calc(100% - 24px));border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-16px);background:var(--surface-card);color:var(--text-primary);padding:0}.library-editor::backdrop{background:var(--visual-library-editor-surface)}.library-editor form>header,.library-editor form>footer{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-16px);padding:var(--primitive-spacing-16px) var(--primitive-spacing-20px);border-bottom:1px solid var(--border-subtle)}.library-editor form>footer{border-top:1px solid var(--border-subtle);border-bottom:0;justify-content:flex-end}.library-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-15px);padding:var(--primitive-spacing-20px)}.library-editor-grid label{display:grid;gap:var(--primitive-spacing-6px);font-weight:700}.library-editor-grid .wide{grid-column:1/-1}.library-editor textarea{min-height:90px;resize:vertical}.library-editor #drugLibrarySaveStatus{padding:0 var(--primitive-spacing-20px)}.curriculum-node-list,.readiness-list,.revision-list{display:grid;gap:0}.curriculum-node,.readiness-activity,.revision-row{display:flex;justify-content:space-between;align-items:center;gap:var(--primitive-spacing-18px);padding:var(--primitive-spacing-15px) 0;border-bottom:1px solid var(--border-subtle)}.curriculum-node:last-child,.readiness-activity:last-child,.revision-row:last-child{border-bottom:0}.curriculum-node h3,.readiness-activity h3,.revision-row h3{margin:3px 0}.curriculum-node p,.readiness-activity p,.revision-row p{margin:3px 0;color:var(--text-secondary)}
.editor-tabs{display:flex;gap:var(--primitive-spacing-2px);padding:0 var(--primitive-spacing-16px);border-bottom:1px solid var(--border-subtle);overflow:auto}.editor-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;color:var(--text-secondary);padding:var(--primitive-spacing-11px) var(--primitive-spacing-10px);white-space:nowrap}.editor-tabs button.active{border-bottom-color:var(--action-primary-bg);color:var(--text-primary);font-weight:800}.key-value-list{display:grid;grid-template-columns:max-content 1fr;gap:var(--primitive-spacing-8px) var(--primitive-spacing-16px)}.key-value-list dt{font-weight:800;color:var(--text-secondary)}.key-value-list dd{margin:0;min-width:0;overflow-wrap:anywhere}.token-list{display:flex;gap:var(--primitive-spacing-7px);flex-wrap:wrap}.curriculum-node-expanded{display:block}.curriculum-node-expanded>header{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-16px)}.curriculum-members{display:grid;gap:var(--primitive-spacing-6px);margin:12px 0}.curriculum-member{display:grid;grid-template-columns:minmax(160px,1fr) minmax(140px,220px) repeat(5,auto);align-items:center;gap:var(--primitive-spacing-6px);padding:var(--primitive-spacing-8px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-9px)}.curriculum-member span,.curriculum-member small{display:block}.curriculum-assign{display:grid;gap:var(--primitive-spacing-7px);justify-content:stretch;margin-top:16px}.curriculum-assign>label{font-weight:800}.curriculum-assign>.row{justify-content:flex-end}.curriculum-assign input{min-width:min(360px,100%)}.curriculum-assign>small{color:var(--text-secondary);text-align:right}.scope-builder-intro{border-left:4px solid var(--action-primary-bg)}.scope-builder-intro h2{margin-top:0}.scope-source-summary{margin:16px 0;padding:var(--primitive-spacing-14px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--panel-2)}.scope-source-summary h4{margin:0 0 9px}.scope-source-pills{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-7px)}.scope-source-grid{display:grid;gap:var(--primitive-spacing-7px);max-height:48vh;overflow:auto;padding:var(--primitive-spacing-4px)}.scope-source-option{grid-template-columns:auto 1fr!important;align-items:start;gap:var(--primitive-spacing-10px)!important;padding:var(--primitive-spacing-10px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-9px);background:var(--panel-2)}.scope-source-option input{margin-top:3px}.scope-source-option span,.scope-source-option small{display:block}.scope-source-option small{margin-top:3px;color:var(--text-secondary);font-weight:500}.import-review{width:min(980px,calc(100% - 24px))}.import-review-body{padding:var(--primitive-spacing-20px);display:grid;gap:var(--primitive-spacing-16px);max-height:65vh;overflow:auto}.import-mapping-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-12px)}.import-mapping-grid label,.import-review-body>label,.import-row label{display:grid;gap:var(--primitive-spacing-5px);font-weight:700}.import-row-list{display:grid;gap:var(--primitive-spacing-8px)}.import-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,180px) minmax(180px,1fr);gap:var(--primitive-spacing-12px);align-items:end;padding:var(--primitive-spacing-12px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px)}.import-row small{display:block;color:var(--text-secondary);margin-top:4px}
/* Drug editor: the calendar dialogs' form language (filled 43px fields, small
   bold labels, one close mark) with each field showing whether it is the
   learner's edit, and a Your changes tab comparing edits with the defaults. */
.drug-editor{width:min(780px,calc(100% - 24px));max-height:calc(100dvh - 32px)}.drug-editor form{display:flex;flex-direction:column;height:min(700px,calc(100dvh - 34px))}.drug-editor form>header{position:relative;display:block;padding:var(--space-drug-editor-pad) var(--space-drug-editor-pad) var(--space-drug-field);border-bottom:0}.drug-editor form>header h2{margin:2px 0 0;font-size:var(--text-drug-editor-title)}.drug-editor-source{margin:4px 0 0;color:var(--text-secondary);font-size:var(--text-drug-editor-meta)}.drug-editor .editor-tabs{margin:0;flex:0 0 auto;flex-wrap:nowrap;padding:0 var(--space-drug-editor-pad)}.drug-editor .editor-tabs button{padding-left:0;padding-right:0;margin-right:var(--space-drug-editor-pad)}.drug-editor-count:not(:empty){display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 var(--space-drug-field);border-radius:var(--radius-drug-pill);background:var(--accent-soft);color:var(--action-primary-bg);font-size:var(--text-drug-field-hint);font-weight:800}.drug-editor .library-editor-grid,.drug-editor-changes{flex:1 1 auto;align-content:start;overflow:auto;padding:var(--space-drug-editor-pad);gap:var(--space-drug-editor-gap)}.drug-editor .library-editor-grid[hidden],.drug-editor-changes[hidden]{display:none}.drug-field{display:grid;align-content:start;gap:var(--space-drug-field);min-width:0}.drug-field.wide{grid-column:1/-1}.drug-field-head{display:flex;align-items:center;gap:var(--space-drug-field);min-height:22px}.drug-field-head label{display:inline;font-size:var(--text-drug-field-label);font-weight:650;color:var(--text-primary)}.drug-field-flag,.drug-field-restore{display:none}.drug-field.is-edited .drug-field-flag{display:inline-block;padding:0 var(--space-drug-field);border-radius:var(--radius-drug-pill);background:var(--accent-soft);color:var(--action-primary-bg);font-size:var(--text-drug-field-hint);font-weight:750}.drug-field.is-edited .drug-field-restore{display:inline-block;margin-left:auto;padding:0;border:0;background:transparent;box-shadow:none;color:var(--action-primary-bg);font-size:var(--text-drug-field-hint);font-weight:700;cursor:pointer}.drug-field-restore:hover{text-decoration:underline}.drug-field input,.drug-field textarea{width:100%;min-width:0;min-height:var(--size-drug-field);padding:var(--space-drug-field-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-drug-field);background:var(--surface-raised);color:var(--text-primary);font:inherit;line-height:1.45}.drug-field textarea{min-height:0;resize:vertical}.drug-field.is-edited input,.drug-field.is-edited textarea{border-color:var(--action-primary-bg);box-shadow:inset 3px 0 0 var(--action-primary-bg)}.drug-field small{color:var(--text-secondary);font-size:var(--text-drug-field-hint)}.drug-editor-note{margin:0;color:var(--text-secondary);font-size:var(--text-drug-editor-meta)}.drug-editor-changes{display:grid;align-content:start}.drug-change{padding:var(--space-drug-change) var(--space-drug-editor-gap);border:1px solid var(--border-subtle);border-radius:var(--radius-drug-change);background:var(--surface-raised)}.drug-change-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-drug-editor-gap)}.drug-change h3,.drug-editor-empty h3{text-transform:none;letter-spacing:normal;color:var(--text-primary)}.drug-change h3{margin:0;font-size:var(--text-drug-change-title)}.drug-change-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-drug-editor-gap);margin-top:10px}.drug-change-compare>div{min-width:0}.drug-change-compare>div+div{padding-left:var(--space-drug-editor-gap);border-left:1px solid var(--border-subtle);color:var(--text-secondary)}.drug-change-compare span{display:block;margin-bottom:4px;font-size:var(--text-drug-field-hint);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}.drug-change-compare>div:first-child span{color:var(--action-primary-bg)}.drug-change-compare ul{margin:0;padding-left:var(--space-drug-editor-gap);display:grid;overflow-wrap:anywhere}.drug-change-compare p{margin:0}.drug-change-all{display:flex;justify-content:flex-end}.drug-editor-empty{padding:var(--space-drug-editor-pad);border:1px dashed var(--border-subtle);border-radius:var(--radius-drug-change);text-align:center;color:var(--text-secondary)}.drug-editor-empty h3{margin:0 0 4px;color:var(--text-primary)}.drug-editor-empty p{margin:0}.drug-editor form>footer{flex:0 0 auto;padding:var(--space-drug-change) var(--space-drug-editor-pad)}.drug-editor #drugLibrarySaveStatus{margin:0 auto 0 0;padding:0;color:var(--text-secondary);font-size:var(--text-drug-editor-meta)}
@media(max-width:560px){.drug-editor{width:100%;max-width:100%;max-height:100dvh;margin:auto 0 0;border-radius:var(--radius-drug-change) var(--radius-drug-change) 0 0}.drug-editor form{height:calc(100dvh - 12px)}.drug-editor .library-editor-grid{grid-template-columns:1fr}.drug-change-compare{grid-template-columns:1fr}.drug-change-compare>div+div{padding:var(--space-drug-field-inset) 0 0;border-left:0;border-top:1px solid var(--border-subtle)}}
@media(max-width:760px){.curriculum-node-expanded>header,.library-publish-bar,.curriculum-node,.readiness-activity,.revision-row{align-items:stretch;flex-direction:column}.library-publish-bar>div{width:100%}.library-editor-grid,.import-mapping-grid{grid-template-columns:1fr}.library-editor-grid .wide{grid-column:auto}.library-row-actions{display:grid;grid-template-columns:1fr 1fr}.library-row-actions .primary{grid-column:1/-1}.curriculum-member,.import-row{grid-template-columns:1fr}.curriculum-member select,.curriculum-assign,.curriculum-assign select{width:100%}.curriculum-assign{display:grid}}
.verification-code-panel {
  margin-top: 1rem;
  padding: var(--primitive-spacing-1rem);
  border: 1px solid var(--border-subtle, var(--visual-verification-panel-border-fallback));
  border-radius: var(--primitive-radius-75rem);
  background: var(--surface-subtle, var(--visual-verification-panel-surface-fallback));
}
.otp-code {
  max-width: 10rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--primitive-font-size-1-35rem);
  font-weight: 700;
  letter-spacing: .28em;
  text-align: center;
}
.institution-membership {
  margin: 1rem 0;
  padding: var(--primitive-spacing-1rem);
  border: 1px solid var(--border-subtle, var(--visual-institution-membership-border-fallback));
  border-radius: var(--primitive-radius-75rem);
}
.institution-membership.verified { border-color: var(--visual-institution-membership-verified-border); }
.verification-timeline {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 18rem;
  overflow: auto;
  background: var(--surface-raised);
  border-radius: var(--primitive-radius-10px);
  padding: 0;
  margin-top: 12px;
}
.verification-timeline:not(:empty) { padding: var(--primitive-spacing-12px); }
.institution-verification-start { margin-top: 1.25rem; }

/* Course Pathway Builder */
.course-pathway-offer{border-color:color-mix(in srgb,var(--action-primary-bg) 42%,var(--border-subtle));background:linear-gradient(135deg,color-mix(in srgb,var(--action-primary-bg) 8%,var(--surface-card)),var(--surface-card) 58%)}
.course-pathway-offer h2{margin:5px 0 7px}.course-pathway-offer p{color:var(--text-secondary);max-width:780px}
.pb-heading{align-items:center}.pb-step-count,.pb-progress-ring{flex:0 0 auto;display:grid;place-items:center;align-content:center;width:86px;height:86px;border:1px solid color-mix(in srgb,var(--action-primary-bg) 42%,var(--border-subtle));border-radius:50%;background:color-mix(in srgb,var(--action-primary-bg) 8%,var(--surface-card));box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--action-primary-bg) 5%,transparent)}
.pb-step-count b,.pb-progress-ring b{font-size:var(--primitive-font-size-25px);line-height:1;color:var(--action-primary-bg)}.pb-step-count span,.pb-progress-ring span{font-size:var(--primitive-font-size-11px);color:var(--text-secondary);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.pb-setup{max-width:960px;margin-inline:auto}.pb-layer-checks{grid-template-columns:repeat(2,minmax(0,1fr))}.pb-setup-note{margin:16px 0;padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);border-left:3px solid var(--action-primary-bg);border-radius:var(--primitive-radius-7px);background:color-mix(in srgb,var(--action-primary-bg) 7%,var(--surface-raised));color:var(--text-secondary)}
.pb-toolbar{position:sticky;top:8px;z-index:12;display:flex;align-items:center;gap:var(--primitive-spacing-12px);margin:10px 0 14px;padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px);background:color-mix(in srgb,var(--surface-card) 94%,transparent);box-shadow:var(--visual-pb-toolbar-shadow);backdrop-filter:blur(10px)}
.pb-toolbar>div{display:grid}.pb-toolbar>div span{font-size:var(--primitive-font-size-12px);color:var(--text-secondary)}
.pb-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,340px);gap:var(--primitive-spacing-16px);align-items:start}.pb-board{display:grid;gap:0;min-width:0}.pb-phase{display:flex;align-items:baseline;justify-content:space-between;gap:var(--primitive-spacing-14px);margin-top:15px;padding:var(--primitive-spacing-9px) var(--primitive-spacing-14px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px-10px-0-0);text-transform:uppercase;letter-spacing:.045em}.pb-phase b{font-size:var(--primitive-font-size-12px)}.pb-phase span{font-size:var(--primitive-font-size-11px);color:var(--text-secondary);text-align:right}
.pb-phase.phase-entry{background:color-mix(in srgb,var(--visual-pathway-entry-tint) 12%,var(--surface-card))}.pb-phase.phase-decarboxylation{background:color-mix(in srgb,var(--visual-pathway-decarboxylation-tint) 12%,var(--surface-card))}.pb-phase.phase-regeneration{background:color-mix(in srgb,var(--visual-pathway-regeneration-tint) 12%,var(--surface-card))}
.pb-step{display:grid;grid-template-columns:58px minmax(0,1fr);border:1px solid var(--border-subtle);border-top:0;background:var(--surface-card);min-height:105px}.pb-step:last-of-type{border-radius:var(--primitive-radius-0-0-10px-10px)}.pb-step-number{display:grid;place-items:center;align-content:center;gap:var(--primitive-spacing-2px);border-right:1px solid var(--border-subtle);background:var(--surface-raised)}.pb-step-number span{font-size:var(--primitive-font-size-9px);letter-spacing:.12em;color:var(--text-secondary)}.pb-step-number b{font-size:var(--primitive-font-size-25px)}.phase-entry .pb-step-number b{color:var(--visual-phase-entry-pb-step-number-text)}.phase-decarboxylation .pb-step-number b{color:var(--visual-phase-decarboxylation-pb-step-number-text)}.phase-regeneration .pb-step-number b{color:var(--visual-phase-regeneration-pb-step-number-text)}
.pb-step-body{padding:var(--primitive-spacing-11px);min-width:0}.pb-fixed-reaction{display:grid;gap:var(--primitive-spacing-3px);margin-bottom:9px}.pb-fixed-reaction small,.pb-slot>small{font-size:var(--primitive-font-size-10px);text-transform:uppercase;letter-spacing:.055em;color:var(--text-secondary)}.pb-fixed-reaction b{font-size:var(--primitive-font-size-14px);font-weight:700}.pb-step-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--primitive-spacing-8px)}
.pb-slot{min-height:68px;display:grid;align-content:start;gap:var(--primitive-spacing-6px);padding:var(--primitive-spacing-8px);border:1px dashed color-mix(in srgb,var(--action-primary-bg) 48%,var(--border-subtle));border-radius:var(--primitive-radius-9px);background:color-mix(in srgb,var(--action-primary-bg) 3%,var(--surface-raised));cursor:pointer;transition:border-color var(--theme-paint-duration,.15s),background var(--theme-paint-duration,.15s),transform .15s}.pb-slot:hover,.pb-slot.over{border-color:var(--action-primary-bg);background:color-mix(in srgb,var(--action-primary-bg) 9%,var(--surface-raised));transform:translateY(-1px)}.pb-slot.filled{border-style:solid}.pb-slot-empty{align-self:center;color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}
.pb-bank{position:sticky;top:78px;max-height:calc(100vh - 95px);overflow:auto;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-13px);background:var(--surface-card);box-shadow:var(--visual-pb-bank-shadow)}.pb-bank-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-10px);padding:var(--primitive-spacing-13px) var(--primitive-spacing-14px) var(--primitive-spacing-9px);background:var(--surface-card)}.pb-bank-head h2{margin:2px 0 0;font-size:var(--primitive-font-size-17px)}.pb-bank-tabs{display:flex;gap:var(--primitive-spacing-4px);padding:0 var(--primitive-spacing-10px) var(--primitive-spacing-9px);overflow:auto;border-bottom:1px solid var(--border-subtle)}.pb-bank-tabs button{padding:var(--primitive-spacing-6px) var(--primitive-spacing-8px);border:0;border-radius:var(--primitive-radius-7px);background:transparent;color:var(--text-secondary);font-size:var(--primitive-font-size-11px);white-space:nowrap}.pb-bank-tabs button.on{background:color-mix(in srgb,var(--action-primary-bg) 13%,var(--surface-raised));color:var(--action-primary-bg);font-weight:800}.pb-bank-cards{display:grid;gap:var(--primitive-spacing-7px);padding:var(--primitive-spacing-10px)}.pb-bank-empty{padding:var(--primitive-spacing-18px) var(--primitive-spacing-8px);text-align:center;color:var(--text-secondary)}
.pb-card{width:100%;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--primitive-spacing-8px);padding:var(--primitive-spacing-9px) var(--primitive-spacing-10px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);background:var(--surface-raised);color:var(--text-primary);text-align:left;font-size:var(--primitive-font-size-12-5px);line-height:1.3;cursor:grab;overflow-wrap:anywhere}.pb-card:hover{border-color:var(--action-primary-bg)}.pb-card.selected{outline:2px solid var(--action-primary-bg);outline-offset:1px}.pb-card.bad{border-color:var(--border-subtle);border-bottom-color:var(--answer-choice-incorrect-ink);border-bottom-style:dashed;background:var(--surface-raised)}.pb-card.locked{border-color:var(--border-subtle);border-bottom-color:var(--success-edge);background:var(--surface-raised);cursor:default;opacity:1}.pb-card.placed{padding:var(--primitive-spacing-6px) var(--primitive-spacing-7px);font-size:var(--primitive-font-size-12px)}.pb-card-tag{display:inline-grid;place-items:center;min-width:31px;padding:var(--primitive-spacing-3px) var(--primitive-spacing-5px);border-radius:var(--primitive-radius-5px);background:color-mix(in srgb,var(--action-primary-bg) 13%,var(--surface-card));color:var(--action-primary-bg);font-size:var(--primitive-font-size-9px);font-weight:900;letter-spacing:.05em}.pb-card.kind-enzyme .pb-card-tag{color:var(--visual-pb-card-kind-enzyme-pb-card-tag-text);background:color-mix(in srgb,var(--visual-pathway-enzyme-tag-tint) 13%,var(--surface-card))}.pb-card.kind-cofactor .pb-card-tag{color:var(--visual-pb-card-kind-cofactor-pb-card-tag-text);background:color-mix(in srgb,var(--visual-pathway-cofactor-tag-tint) 14%,var(--surface-card))}.pb-card.kind-key_fact .pb-card-tag{color:var(--visual-pb-card-kind-key-fact-pb-card-tag-text);background:color-mix(in srgb,var(--visual-pathway-key-fact-tag-tint) 13%,var(--surface-card))}
.pb-result-score{display:grid;margin:14px auto 20px}.pb-result-score b{font-size:var(--primitive-font-size-44px);color:var(--action-primary-bg)}.pb-result-score span{color:var(--text-secondary)}.pb-results table{max-width:620px;margin:0 auto 18px;text-align:left}
@media(max-width:900px){.pb-layout{grid-template-columns:1fr}.pb-bank{position:static;max-height:none;order:-1}.pb-bank-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pb-toolbar{top:4px}}
@media(max-width:620px){.pb-heading{align-items:flex-start}.pb-step-count,.pb-progress-ring{width:66px;height:66px}.pb-layer-checks,.pb-bank-cards{grid-template-columns:1fr}.pb-step{grid-template-columns:45px minmax(0,1fr)}.pb-step-body{padding:var(--primitive-spacing-8px)}.pb-step-slots{grid-template-columns:1fr}.pb-toolbar{display:grid;grid-template-columns:1fr 1fr}.pb-toolbar .right{display:none}.pb-phase{display:grid;gap:var(--primitive-spacing-3px)}.pb-phase span{text-align:left}}

/* ===================== Arrival intro ("First Light") =====================
   Plays on the first resolved render, including Sign in.

   The overlay never blocks: pointer-events:none throughout, and the real
   page hydrates underneath it the entire time. See static/arrival-intro.js. */

/* --workspace is redefined only on `main`. The overlay is a sibling of main,
   not a descendant, so it would resolve the LIGHT canvas color in dark mode
   and light up a white column over a near-ink page. This mirrors the canvas
   color at a scope the overlay can actually see. */
:root{}
/* The workspace and the two signed-out routes own their arrival colors in
   their canvas rules. Route selectors outrank html.workspace-dark, so a
   stored dark-mode preference cannot change the signed-out bloom. */

/* The veil opens from the real environment ground. Signed-out cold arrivals
   extend it over their transparent header; authenticated arrivals and
   hand-offs begin below the raised rail. Light mode opens from its navy outer
   canvas, while dark mode defines the outer canvas as the Eclipse workspace
   itself. Keeping this tied to the canvas token avoids reconciliation fades,
   theme exceptions, and fallback colours. */
:root{--arrival-field:var(--outer-canvas-bg)}

/* z-index 40 places the arrival above the header (5). The controller chooses
   whether the field starts at the viewport edge or below the measured rail. */
.arrival{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
/* No background-color transition. Theme and environment tokens are applied
   before the arrival is raised; animating the field itself would reintroduce
   the colour reconciliation this layer exists to avoid. */
.arrival-veil{position:absolute;left:0;right:0;background:var(--arrival-field)}
.arrival-canvas{top:64px;bottom:0}
.arrival-clip{position:absolute;left:50%;top:64px;bottom:0;width:min(var(--workspace-max-width),100%);
  transform:translateX(-50%);overflow:hidden;pointer-events:none}
.arrival-bloom{position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;
  margin:-70vmax 0 0 -70vmax;border-radius:50%;opacity:0;
  background:radial-gradient(circle,var(--arrival-canvas) 0%,var(--arrival-canvas) 42%,
    color-mix(in srgb,var(--arrival-canvas) 55%,transparent) 62%,transparent 74%);
  transform:scale(.1);will-change:transform,opacity}
/* `top` is set in JS from the mark's measured box. Anchoring it to the
   viewport instead puts it on top of the mark, because the mark is centred
   in the canvas area below the header, not in the viewport. */
/* transform-origin:0 0 is load-bearing. With the default 50% 50%, the
   translate()+scale() pair that carries the mark to the header lands it
   offset by half the size difference — about 20px low and 20px right. */
.arrival-mark{position:absolute;left:0;top:0;opacity:0;transform-origin:0 0;
  will-change:transform,opacity,filter}

/* pageIn suppression, half one of two. Routing REPLACES the #main element
   partway through the arrival — measured at ~170ms on the sign-in hand-off —
   so an inline style set on the main that existed when the arrival was raised
   is discarded with it and the replacement runs pageIn from scratch. This rule
   covers whatever main exists at any point during the arrival.

   Half two lives in arrivalTeardown(), which re-applies the inline
   `animation:none` to the surviving main BEFORE removing this class. Without
   that, dropping the class does not resume pageIn, it restarts it: the settled
   page blanks to opacity 0 and rises back through translateY(7px). That was
   the reported flicker, and it is why this rule alone is not enough. */
body.arrival-active main{animation:none}

@media (prefers-reduced-motion:reduce){
  .arrival-bloom,.arrival-mark{transition:none!important}
}

/* ---- public marketing overview ---------------------------------------
   The signed-out front door. It shares the sign-in environment -- same ink,
   same header, same decay-and-renewal backdrop -- so the deck in
   static/landing.js can slide between the overview and the auth card without
   the environment appearing to move.

   Three corrections govern this pass:

   1. ONE HUE IS NOT A PALETTE. The first version was Recall blue on navy and
      nothing else, which is why it read as unfinished rather than restrained.
      A warm gold now carries every call to action and every point of emphasis,
      and the six study areas each own a tint expressed through their glyph and
      their rules. The tints never touch body copy; they are accent only, so
      the page gains colour without losing its ink.
   2. CONTENT NEVER SITS ON THE MOVING FIELD. Bands carry their own ground.
   3. TYPE HAS TO HAVE A VOICE. Instrument Sans is the brand face and stays the
      brand face -- the range comes from its italic (used for the one word each
      heading turns on), from real weight and scale contrast, and from tracked
      micro-labels, rather than from importing a second family. */
body.auth-environment.landing-environment{















  --space-landing-header-height:var(--primitive-spacing-60px);
  --space-landing-header-block:var(--primitive-spacing-10px);
  --space-landing-header-inline:var(--primitive-spacing-22px);
  /* Public header: keep primary navigation centered and account actions grouped. */
  --space-landing-header-primary-gap:var(--primitive-spacing-10px);
  --space-landing-header-actions-gap:var(--primitive-spacing-10px);
  --space-landing-header-sign-in:0 var(--primitive-spacing-16px);
  --space-landing-header-language-padding:0 var(--primitive-spacing-30px) 0 var(--primitive-spacing-36px);
  --size-landing-header-language-control:var(--primitive-spacing-36px);
  --size-landing-header-language-code-inset:var(--primitive-spacing-36px);
  --size-landing-header-language-code-control:calc(var(--primitive-spacing-36px) + 2.4em + var(--primitive-spacing-30px));
  --size-landing-header-language-icon:var(--primitive-spacing-16px);
  --radius-landing-header-language:var(--primitive-radius-11px);
  --text-landing-header-language:var(--primitive-font-size-14px);
  --space-landing-hero-block-start:calc(var(--space-landing-header-height) + clamp(var(--primitive-spacing-44px),var(--primitive-spacing-8-5vh),var(--primitive-spacing-100px)));
  /* Keep the curved overlap separate from the CTA's visible breathing room.
     The shadow allowance covers the raised button, including its hover shadow. */
  --space-landing-hero-cta-shadow:var(--primitive-spacing-24px);
  --space-landing-hero-cta-clearance:clamp(var(--primitive-spacing-24px),var(--primitive-spacing-5vh),var(--primitive-spacing-40px));
  --space-landing-hero-block-end:calc(var(--landing-seam-depth) + var(--space-landing-hero-cta-shadow) + var(--space-landing-hero-cta-clearance));
  --text-landing-cta-note:var(--primitive-font-size-13px);
  --space-landing-testimonial-rail-gap:20px;
  --space-landing-testimonial-rail-inset:6px 2px 48px;
  --space-landing-testimonial-rail-inset-compact:6px 0 20px;
  --space-landing-testimonial-rail-gap-compact:12px;
  --size-landing-testimonial-dot:8px;
  --size-landing-testimonial-dot-current:22px;
  --radius-landing-testimonial-dot:var(--primitive-radius-999px);
  --space-landing-testimonial-mobile-card-padding:var(--primitive-spacing-24px);
  --space-landing-pricing-gap:clamp(24px,3vw,36px);
  --space-landing-pricing-block:var(--landing-section-block-start);
  --space-landing-pricing-block-end:var(--landing-section-block-start);
  --size-landing-pricing-card:980px;
  --space-landing-pricing-card:clamp(28px,3.4vw,44px) clamp(28px,3.8vw,52px);
  --radius-landing-pricing-card:22px;
  --space-landing-pricing-detail:8px 0 0;
  --space-landing-pricing-mobile-gap:var(--primitive-spacing-28px);
  --space-landing-faq-block-start:clamp(var(--primitive-spacing-24px),var(--primitive-spacing-3vw),var(--primitive-spacing-36px));
  --text-landing-faq-heading:var(--text-landing-section);
  --space-landing-pricing-rate-gap:var(--primitive-spacing-6px);
  --text-landing-pricing-rate:clamp(44px,4.6vw,60px);
  --text-landing-pricing-detail:13.5px;
  --text-landing-pricing-cta:var(--primitive-font-size-15px);
  --text-landing-pricing-note:var(--primitive-font-size-12px);
  --size-landing-why-figure:480px;
  --space-landing-why-column-gap:var(--primitive-spacing-64px);
  --space-landing-why-steps-gap:22px 24px;
  --space-landing-why-step-mark-gap:var(--primitive-spacing-12px);
  --space-landing-why-row-gap:var(--primitive-spacing-36px);
  --space-landing-why-block-start:clamp(var(--primitive-spacing-48px),var(--primitive-spacing-5vh),var(--primitive-spacing-68px));
  --text-landing-feature-body:var(--primitive-font-size-15-5px);
  --text-landing-feature-ui:var(--primitive-font-size-12px);
  --text-landing-feature-mobile-heading:var(--primitive-font-size-22px);
  --radius-landing-feature-connector:0 0 0 6px;
  --radius-landing-feature-day-cell:5px;
  --radius-landing-feature-day-item:4px;
  --space-landing-feature-week-gap:5px;
  --space-landing-feature-day-item:6px 10px;
  /* The features chapter's closing cards (7.23). One card material for the
     product cards and the student quotes, so the paper chapters read as one
     set of objects rather than two. */
  --space-landing-feature-card-note:14px 0 0;
  --space-landing-feature-mobile-gap:18px;
  --radius-landing-feature-meter:99px;
  /* THE TYPE SCALE (one size per role). Display: the hero. Statement: the
     retention band's claim, the page's second display moment. Section: every
     other chapter heading, whatever the chapter. Passage: the preview's
     three passages. Step: a numbered step or a panel title. */
  --text-landing-section:clamp(28px,3vw,40px);
  --space-landing-testimonial-controls-gap:10px;
  --space-landing-testimonial-card:30px 30px 26px;
  --space-landing-testimonial-person:18px 0 0;
  --space-landing-testimonial-person-gap:12px;
  --space-landing-testimonial-who-gap:2px;
  --size-landing-launch-step:var(--primitive-spacing-24px);
  --radius-landing-testimonial-card:20px;
  --text-landing-testimonial-quote:clamp(17px,1.4vw,19.5px);
  --text-landing-testimonial-avatar:13px;
  --text-landing-testimonial-name:15px;
  --text-landing-testimonial-role:13px;
  --size-landing-testimonial-card:calc((100% - 2 * var(--space-landing-testimonial-rail-gap)) / 2.3);
  --space-landing-pricing-action-gap:8px;
  --text-landing-pricing-heading:var(--text-landing-section);
  /* The page's side margin, named once so a full-bleed rail can give it back. */
  --space-landing-feature-moment-gap:clamp(40px,6vw,88px);
  --text-landing-feature-journey:clamp(26px,2.6vw,34px);
  --space-landing-testimonial-arrow-reach:min(54px,calc(var(--landing-gutter) - 12px));
  --landing-rail-fade:56px;
  --text-landing-chapter-small:13px; --text-landing-chapter-title:15.5px; --text-landing-chapter-figure:22px;
  --text-landing-chapter-heading:clamp(22px,2vw,26px); --text-landing-chapter-body:14px; --text-landing-chapter-stem:18px;
  --text-landing-chapter-label:12px;
  --space-landing-chapter-card:18px 20px 20px; --space-landing-chapter-gap:clamp(16px,2vw,24px);
  --space-landing-drill-tab-gap:4px;
  --space-landing-drill-row-pad:4px;
  --space-landing-drill-tab:8px 14px 9px 12px;
  --radius-landing-drill-tab:14px;
  --space-landing-pricing-deal-gap:20px;
  --size-landing-pricing-deal:260px; --size-landing-pricing-deal-max:400px;
  --size-landing-faq-settle:clamp(140px,22vh,220px);
  /* The foot of the overview. */
  --space-landing-colophon-gap:var(--primitive-spacing-24px);
  --space-landing-colophon-block-start:var(--primitive-spacing-48px);
  --space-landing-colophon-legal-gap:var(--primitive-spacing-4px);
  --space-landing-colophon-legal-gap-compact:var(--primitive-spacing-16px);
  --space-landing-colophon-block-start-compact:var(--primitive-spacing-40px);
  --space-landing-colophon-block-end:var(--primitive-spacing-0px);
  --space-landing-colophon-stack:var(--primitive-spacing-20px);
  --space-landing-colophon-entries-row:var(--primitive-spacing-12px);
  --space-landing-colophon-entries:var(--primitive-spacing-28px);
  --space-landing-colophon-glyph:var(--primitive-spacing-8px);
  --size-landing-colophon-glyph:20px;
  --space-landing-app-soon-glyph:var(--primitive-spacing-10px);
  --text-landing-colophon-entry:var(--primitive-font-size-14px);
  --text-landing-colophon-note:var(--primitive-font-size-12-5px);
  --space-landing-drill-tab-gap-inline:13px;
  --space-landing-drill-pool-left:13px;
  --space-landing-drill-pool-bottom:8px;
  --size-landing-drill-pool:34px;
  --text-landing-demo-subject:clamp(30px,3vw,40px);
  --text-landing-demo-vignette:clamp(18px,1.6vw,21px);
  --space-landing-demo-verdict-gap:6px; --space-landing-demo-tag:10px; --text-landing-demo-tag:12px;
  --radius-landing-ws-card:10px; --radius-landing-ws-node:7px; --radius-landing-ws-chip:99px;
  --radius-landing-ws-filament:2px;
  --space-landing-ws-card:14px 16px 16px;
  --space-landing-ws-head-gap:9px; --space-landing-ws-row-gap:11px; --space-landing-ws-modes-gap:6px;
  --space-landing-ws-counts-gap:6px; --space-landing-ws-count:7px 9px;
  --text-landing-ws-title:13.5px; --text-landing-ws-small:11.5px; --text-landing-ws-today:19px;
  --landing-ws-ease:cubic-bezier(.4,0,.2,1);
  --space-landing-drill-tab-mobile:9px 14px 10px 10px;
  --text-landing-drill-name-mobile:13.5px;
  --text-landing-drill-name:14.5px;
  --space-landing-cx-gap:16px;
  --text-landing-cx-title:20px; --space-landing-cx-tabs-gap:6px; --space-landing-cx-tab:7px 6px 8px; --space-landing-cx-row:9px 0;
  --text-landing-cx-body:13px; --space-landing-cx-question-gap:10px; --text-landing-cx-stem:16px; --space-landing-cx-state-gap:6px; --size-landing-cx-state-dot:9px;
  --space-landing-cx-note:12px; --size-landing-cx-practices-mark:14px;
  --space-landing-cx-tag-top:16px; --space-landing-cx-tag-right:18px;
  --space-landing-preview-head-gap:12px; --space-landing-preview-head-after:clamp(36px,4vw,56px);
  --size-landing-preview-head:720px; --size-landing-preview-support:520px;
  --text-landing-preview-heading:clamp(30px,3.2vw,42px);
  --space-landing-plate:clamp(24px,3.6vw,52px); --radius-landing-plate:28px; --opacity-landing-plate-icon:.82;
  --duration-landing-reveal:460ms; --ease-landing-reveal:cubic-bezier(.16,.84,.28,1); --space-landing-reveal-rise:14px;
  --space-landing-drills-tail:clamp(40px,6vw,72px); --space-landing-touch-link:12px; --space-landing-cx-link-inset:8px;
  --space-landing-hx-gap:8px; --text-landing-hx-resume:var(--text-landing-chapter-heading); --space-landing-hx-continue:20px 22px 22px; --space-landing-hx-continue-gap:14px; --text-landing-hx-hello:22px; --space-landing-hx-agenda-gap:5px;
  /* THE HYBRID PAGE (7.30): the table, the plate, the day, the material. */
  --space-landing-mark-bleed:.08em; --size-landing-graph-cell:28px;
  --space-landing-pricing-label:26px 26px 26px; --radius-landing-pricing-label:12px; --space-landing-pricing-label-head:14px;
  --landing-pricing-label-turn:-1.2deg; --text-landing-pricing-brand:17px;
  --size-landing-table:600px; --radius-landing-table-screen:1px;
  --text-landing-table-small:1.42cqw; --text-landing-table-title:2.75cqw; --text-landing-table-line:1.62cqw;
  --text-landing-table-stem:2.25cqw; --text-landing-table-verdict:1.62cqw;
  --space-landing-table-page:2.3cqw 2.2cqw 2.6cqw 4.6cqw; --space-landing-table-margin:3cqw;
  --radius-landing-table-card:1.5cqw; --space-landing-table-card:1.9cqw 2.1cqw; --space-landing-table-card-gap:.9cqw;
  --space-landing-table-verdict:1cqw 1.3cqw; --radius-landing-table-verdict:1cqw; --space-landing-table-verdict-gap:.6em;
  --space-landing-table-rise:10px;
  --space-landing-hero-columns:clamp(24px,3vw,44px); --space-landing-hero-copy-end:clamp(32px,6vw,96px);
  --space-landing-table-stacked:clamp(20px,4vw,40px);
  --space-landing-lecture-page:24px 24px 26px 46px; --space-landing-lecture-margin:30px; --radius-landing-lecture-page:6px;
  --space-landing-lecture-list:0 0 0 1.1em;
  --text-landing-lecture-small:12px; --text-landing-lecture-title:24px; --text-landing-lecture-line:15px;
  --size-landing-plate:1280px; --size-landing-plate-min:560px;
  --space-landing-plate-stage:72px 9% 64px; --space-landing-plate-side:clamp(48px,5vw,72px) clamp(32px,4vw,56px) clamp(40px,4vw,60px);
  --space-landing-plate-tabs:clamp(24px,3vw,34px); --text-landing-plate-heading:clamp(26px,2.4vw,32px);
  --space-landing-plate-side-inline:20px; --space-landing-plate-side-compact:40px 20px 28px; --space-landing-plate-stage-compact:150px 16px 22px;
  --radius-landing-photo:22px;
  --space-landing-day-gap:20px; --space-landing-day-row-gap:36px; --space-landing-day-gap-compact:14px; --space-landing-day-dots:8px;
  --size-landing-moment-shot:300px; --size-landing-moment-shot-compact:240px; --size-landing-moment-compact:82%;
  --space-landing-moment-art-top:14%; --size-landing-moment-art:40%;
  --space-landing-moment-inset:12px; --space-landing-moment-when:5px 10px; --text-landing-moment-when:14px;
  --space-landing-moment-overlap:64px; --size-landing-moment-card:150px;
  --text-landing-moment-title:18px; --space-landing-moment-title:18px; --text-landing-moment-body:14px;
  --space-landing-moment-pdf:5px 6px; --text-landing-moment-pdf:10px; --space-landing-moment-row:7px 0;
  --size-landing-practice-shot:560px; --size-landing-practice-shot-stacked:440px; --size-landing-practice-shot-compact:300px;
  --text-landing-practice-page-title:26px; --text-landing-practice-page-line:16px;
  --space-landing-practice-page:30px 30px 34px 56px; --space-landing-practice-margin:36px; --radius-landing-practice-page:6px;
  --space-landing-practice-overlap:80px; --space-landing-practice-card-top:84px; --space-landing-practice-overlap-compact:44px;
  --text-landing-practice-page-title-compact:20px; --text-landing-practice-page-line-compact:13.5px; --space-landing-practice-page-compact:18px 18px 20px 38px; --space-landing-practice-margin-compact:24px; --space-landing-practice-overlap-stacked:110px; --space-landing-practice-inset:32px;
  --space-landing-steps-before:clamp(48px,6vw,72px); --space-landing-step:24px 30px 0 30px; --space-landing-step-compact:22px 0 24px;
  --text-landing-step-number:56px; --text-landing-step-title:19px; --text-landing-step-body:14.5px; --text-landing-step-note:14px;
  --landing-gutter:max(var(--primitive-spacing-28px),calc((var(--primitive-spacing-100vw) - var(--workspace-max-width))/2));


  /* THE BOOKENDS (7.22.2). One depth for the two shaped boundaries the page
     has left -- the hero's silhouette and the footer's rise -- so they stay a
     mirrored pair. Named for the seam, not for any motif. */
  --landing-seam-depth:48px;
  /* The landing CTA's side: how far the key sits above the page (7.26.1). */
  --landing-cta-travel:5px;
  --landing-cta-travel-hover:6px;
  --space-landing-cta-arrow:var(--primitive-spacing-4px);
  /* One chapter's opening measure, named once. The hero seam adds its depth to
     this rather than restating the clamp. */
  --landing-section-block-start:clamp(var(--primitive-spacing-56px),var(--primitive-spacing-7-4vh),var(--primitive-spacing-92px));
  --tint:var(--landing-accent-link)}
[data-tint="blue"]{--tint:var(--landing-accent-link)}
[data-tint="gold"]{--tint:var(--landing-accent-highlight)}
[data-tint="mint"]{--tint:var(--landing-accent-growth)}
[data-tint="violet"]{--tint:var(--landing-accent-learning)}
[data-tint="coral"]{--tint:var(--landing-accent-energy)}
[data-tint="cyan"]{--tint:var(--landing-accent-clarity)}

body.auth-environment.landing-environment main{
  display:block;align-content:normal;max-width:none;margin:0;padding:0}
body.auth-environment.landing-environment .site-footer{padding-inline:var(--landing-gutter)}
/* THE LANDING HEADER IS FROSTED PAPER, NOT A WALL (5.7).

   It stays a rectangle and it keeps its bottom boundary -- that line is what
   says "navigation above, page below", and removing it was the reason the full
   scrim draft was rejected. What goes is the opacity, not the edge.

   ONE MATERIAL, AND IT IS DUMB ON PURPOSE.

     surface = paper, at an alpha the SCROLL decides, over a constant blur

   Scroll controls how transparent the sheet is. The page underneath controls
   what colour you see through it. Nothing else is allowed an opinion.

   Two smarter versions were built and both were wrong, in the same way. The
   first gave each chapter a "safe floor" so the bar could not go muddy over
   ink; the second tinted the veil blue over dark chapters. Together they
   produced the two failures Charles caught: a header that turned flat grey the
   instant it was told it was over a dark chapter, and one that was already
   painted blue before the page had been scrolled at all.

   The screenshot that settled it was the one where the retention section's arc
   was halfway under the header. Sampled across that band:

     curve passing under   #eff2f9   #a6abb4   #828792   <- real translucency
     fully inside the blue #c5cad1   #c5cad1   #c5cad1   <- the policy stomping

   The blur was never failing. The policy was overwriting it. The one frame
   where the implementation was behaving correctly was the frame the chapter
   detector had not caught up with yet.

   So: no chapter-derived hue, no tint, no chapter-derived alpha, and the
   section observer may not touch the fill. If white goes under it, it looks
   nearly white. If navy goes under it, it is navy frost. If half and half go
   under it, you see half and half -- which is what glass does. */
body.landing-environment>header{position:fixed;inset:0 0 auto;width:100%;isolation:isolate;min-height:var(--space-landing-header-height);padding:var(--space-landing-header-block) var(--space-landing-header-inline);
  --landing-header-phase:0;
  --mobile-sheet-bg:var(--ground-paper);--mobile-sheet-text:var(--header-text);

  /* One near-opaque paper at every scroll position (5.7.2): over navy and
     over the blue band the 55% sheet went grey-violet and pale blue, with
     the blurred headline beneath showing through as a smudge. The blur
     stays, for the 8% that still passes. */
  --header-paper:92%;
  --header-frost-blur:14px;



  --visual-landing-header-language-rest-border:color-mix(in srgb,var(--header-text) 11%,transparent);
  --visual-landing-header-language-rest-surface:color-mix(in srgb,var(--header-text) 2.7%,transparent);
  /* The flat paper is the floor every fallback lands on, and the frosted

     surface overrides it wherever color-mix resolves. */
  background:var(--landing-paper);
  background:color-mix(in srgb,var(--landing-paper) var(--header-paper),transparent);
  -webkit-backdrop-filter:blur(var(--header-frost-blur));
  backdrop-filter:blur(var(--header-frost-blur));
  /* One disciplined plane. Not a shadow, not a glow: a hairline that firms up
     slightly once the page is moving, so the eye can always find it. */
  border:0;border-bottom:1px solid rgba(var(--header-edge-ink),calc(.07 + .05 * var(--landing-header-phase)));
  box-shadow:none}
/* Header actions stay legible without turning the whole 1400px sheet opaque.
   Sign in uses the sheet itself as its surface; its navy ink retains accessible
   contrast even where the darkest landing band passes under the frost. */
/* No backdrop-filter means no frost, and a translucent bar with nothing behind
   it is just a weak wall: take the paper instead. Same for anyone who has asked
   their system for less transparency -- they get the boundary, not a redesign. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body.landing-environment>header{background:var(--landing-paper)}
}
@media (prefers-reduced-transparency:reduce){
  body.landing-environment>header{background:var(--landing-paper);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  body.landing-environment>header{transition:none}
}
body.landing-environment header nav button{color:var(--header-text);font-size:var(--primitive-font-size-14px)}
@media(min-width:641px){
  body.landing-environment>header #nav{gap:var(--space-landing-header-primary-gap)}
}
body.landing-environment #account button.ghost{font-weight:640}
/* SIGN IN IS A UTILITY, AND NOW IT LOOKS LIKE ONE. With the offer docked
   away at the top of the page, Sign in stands beside the language with
   nothing else in the corner -- plain words there read as a stray label.
   It takes the language control's own quiet material, so the two read as one
   pair of utilities: a hairline and a breath of ink, never gold, never
   filled. Returning students find it at once; it never competes with the
   offer when that docks beside it. */
body.landing-environment #account button.landing-sign-in{
  min-height:var(--size-landing-header-language-control);padding:var(--space-landing-header-sign-in);
  background:var(--visual-landing-header-language-rest-surface);color:var(--header-text);
  border:1px solid var(--visual-landing-header-language-rest-border);border-radius:var(--radius-landing-header-language);
  font-size:var(--text-landing-header-language);box-shadow:none;filter:none;transform:none;
  transition:background-color 140ms ease,border-color 140ms ease}
body.landing-environment #account button.landing-sign-in:hover{
  background:color-mix(in srgb,var(--header-text) 7%,transparent);color:var(--header-text);
  border-color:color-mix(in srgb,var(--header-text) 21%,transparent);
  box-shadow:none;filter:none;transform:none}
body.landing-environment #account button.landing-sign-in:active{
  background:color-mix(in srgb,var(--header-text) 11%,transparent);color:var(--header-text);
  border-color:color-mix(in srgb,var(--header-text) 24%,transparent);
  box-shadow:none;filter:none;transform:none}
body.landing-environment #account button.landing-sign-in:focus-visible{outline:2px solid var(--header-focus);outline-offset:2px}
/* The docking offer. Its slot is a one-column grid whose track opens from
   nothing to the button's own width, so Sign in steps aside smoothly; the
   button stands at full size inside the opening slot and only fades in once
   there is room for it, so it is never seen squeezed. Hidden, it is out of
   the tab order and invisible to pointer and screen reader alike. */
body.landing-environment>header .landing-header-offer{display:grid;grid-template-columns:minmax(0,0fr);
  margin-left:calc(-1 * var(--space-landing-header-actions-gap));opacity:0;visibility:hidden;pointer-events:none;
  transition:grid-template-columns 300ms cubic-bezier(.22,.61,.36,1),margin-left 300ms cubic-bezier(.22,.61,.36,1),
    opacity 120ms ease,visibility 0s linear 300ms}
body.landing-environment>header .landing-header-offer>.landing-cta{justify-self:start;width:max-content;white-space:nowrap}
body.landing-environment>header.landing-offer-docked .landing-header-offer{grid-template-columns:minmax(0,1fr);margin-left:0;
  opacity:1;visibility:visible;pointer-events:auto;
  transition:grid-template-columns 300ms cubic-bezier(.22,.61,.36,1),margin-left 300ms cubic-bezier(.22,.61,.36,1),
    opacity 200ms ease 150ms,visibility 0s}
@media (prefers-reduced-motion:reduce){
  body.landing-environment>header .landing-header-offer,
  body.landing-environment>header.landing-offer-docked .landing-header-offer,
  body.landing-environment #account button.landing-sign-in{transition:none}
}
body.landing-environment>header .landing-header-actions{display:flex;align-items:center;gap:var(--space-landing-header-actions-gap)}
body.landing-environment>header .landing-header-language{position:relative;display:flex;align-items:center;color:var(--header-text)}
body.landing-environment>header .landing-header-actions .landing-header-language{
  border:1px solid var(--visual-landing-header-language-rest-border);
  border-radius:var(--radius-landing-header-language);
  background:var(--visual-landing-header-language-rest-surface)}
body.landing-environment>header .landing-header-actions .landing-header-language:hover,
body.landing-environment>header .landing-header-actions .landing-header-language:focus-within{
  border-color:color-mix(in srgb,var(--header-text) 21%,transparent);
  background:color-mix(in srgb,var(--header-text) 7%,transparent)}
body.landing-environment>header .landing-header-language .control-glyph{
  position:absolute;left:12px;width:var(--size-landing-header-language-icon);height:var(--size-landing-header-language-icon);
  color:currentColor;pointer-events:none}
body.landing-environment>header .landing-header-language::after{
  content:"";position:absolute;right:12px;width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);pointer-events:none}
body.landing-environment>header .landing-header-language select{
  appearance:none;min-height:var(--size-landing-header-language-control);padding:var(--space-landing-header-language-padding);border:0;
  border-radius:var(--radius-landing-header-language);background:transparent;color:inherit;
  font:inherit;font-size:var(--text-landing-header-language);font-weight:600;cursor:pointer}
body.landing-environment>header .landing-header-language select:focus-visible{
  outline:2px solid var(--header-focus);outline-offset:2px}
body.landing-environment>header .landing-header-language-mobile{display:none}
/* Touch keeps the platform picker, so the closed control shows the code
   through a mark laid over the select; the select itself stays the target. */
body.landing-environment>header .language-picker-code{position:absolute;left:var(--size-landing-header-language-code-inset);
  font-size:var(--text-landing-header-language);font-weight:600;pointer-events:none}
body.landing-environment>header .landing-header-language select[data-display="code"]{
  width:var(--size-landing-header-language-code-control);color:transparent}
body.landing-environment>header .landing-header-language select[data-display="code"] option{color:var(--text-primary)}
@media (hover:hover) and (pointer:fine){
  body.landing-environment>header .language-picker-code{display:none}
}
body.landing-environment>header .landing-header-actions .landing-header-cta{
  width:auto;min-height:var(--size-action);padding:0 var(--primitive-spacing-18px);border-radius:var(--radius-action);corner-shape:var(--shape-action);font-size:var(--primitive-font-size-14px)}

.landing{color:var(--l-text);display:block}
.landing p{margin:0}
/* The one phrase each heading turns on. Orange supplies the visual cue; an
   upright posture keeps the otherwise heavy marketing type disciplined. */
.landing h1 em,.landing h2 em{font-style:normal;color:var(--landing-accent-highlight);font-weight:640}
.landing h2{color:var(--l-head);font-size:var(--text-landing-section);line-height:1.08;
  letter-spacing:-.034em;margin:0 0 14px;text-wrap:balance}
.landing h3{color:var(--l-head);font-size:var(--primitive-font-size-16-5px);margin:0 0 8px;letter-spacing:-.014em}

.landing-icon{width:100%;height:100%;display:block}

/* Full-bleed bands flow into one another. Spacing and tonal shifts establish
   the major sections without hard page-wide rules between them. */
.landing-section,.landing-hero{
  padding-left:max(var(--primitive-spacing-28px),calc((var(--primitive-spacing-100vw) - var(--workspace-max-width))/2));
  padding-right:max(var(--primitive-spacing-28px),calc((var(--primitive-spacing-100vw) - var(--workspace-max-width))/2))}
.landing-section{padding-top:var(--landing-section-block-start);padding-bottom:clamp(var(--primitive-spacing-56px),var(--primitive-spacing-7-4vh),var(--primitive-spacing-92px));
  position:relative;background:var(--l-band)}
.landing-why-section,.landing-faq{background:var(--l-band-alt)}

/* The dark hero carries the promise; every light chapter after it is the
   landing's one warm paper (7.30), the material chapter its white, the method
   graph paper. */
.landing-drills-section,.landing-day,.landing-practice,.landing-testimonials,.landing-pricing,.landing-faq{
  --l-band:var(--landing-paper);--l-band-alt:var(--landing-paper);
  --l-panel:var(--landing-content-l-panel);--l-panel-2:var(--landing-content-l-panel-2);
  --l-line:var(--landing-content-l-line);--l-line-soft:var(--landing-content-l-line-soft);
  --l-text:var(--landing-content-l-text);--l-text-dim:var(--landing-content-l-text-dim);--l-head:var(--landing-content-l-head);
  --landing-accent-link:var(--landing-content-accent-link);--landing-accent-highlight:var(--landing-content-accent-highlight);--landing-accent-growth:var(--landing-content-accent-growth);
  --landing-accent-learning:var(--landing-content-accent-learning);--landing-accent-energy:var(--landing-content-accent-energy);--landing-accent-clarity:var(--landing-content-accent-clarity);
  background:var(--landing-paper);color:var(--l-text)}
/* THE PAPER IS WARM (7.30). The page carries the student's material, and
   that material is printed on paper: the ground below the hero is a warm
   paper rather than the app's cool workspace, so the product's white cards
   stand on it as objects. The seam under the hero is the only transition the
   paper needs. */
.landing-drills-section,.landing-day,.landing-testimonials,.landing-pricing{background:var(--landing-paper)}

/* THE HERO DOES NOT END AT A RULER (7.22).

   The page's largest structural boundary was the simplest geometry on it: a
   dead-straight full-width cut under a composed dark scene. Everything else
   about that boundary had been designed and this had not, so it read as a
   default rather than as a decision.

   THE PAGE IS HELD BETWEEN TWO BOOKENDS (7.22.2). The hero's silhouette and
   the footer's rise are one shape, mirrored top to bottom: flat across the
   left fifth, leaving it tangent so there is no corner, deepest at 76%,
   easing back a fifth of its depth at the right edge. Here the navy comes
   DOWN into the paper; at the foot the ink rises UP into it. The eye reads the
   direction of the line, so the pair reads as an opening and a close rather
   than one stroke drawn twice -- and the chapters between them, the blue
   retention band included, meet on straight edges so nothing competes with
   either end. One depth token moves both.

   The paper is pulled up under the hero and its top band masked, rather than
   navy being painted over the paper. That matters: the hero's ground is a
   radial gradient, #0a121f at the seam on the left and #0d1627 at the right,
   so any flat fill would band exactly where the curve is deepest. Masking
   shows the hero's own pixels. */
/* The preview ends on a clear section break: more space after its last
   chapter than between its chapters, so Courses never reads as running on
   into the workflow below. It is also the room the lecture's verdict opens
   into (landingAbsorbGrowth) without moving anything after it. */
.landing-drills-section{padding-bottom:calc(var(--landing-section-block-start) + var(--space-landing-drills-tail));
  overflow:clip;isolation:isolate;
  margin-top:calc(-1 * var(--landing-seam-depth));
  padding-top:calc(var(--landing-section-block-start) + var(--landing-seam-depth));
  -webkit-mask-image:var(--visual-landing-hero-seam-mask),var(--visual-landing-hero-seam-base);
  mask-image:var(--visual-landing-hero-seam-mask),var(--visual-landing-hero-seam-base);
  /* The opaque layer overlaps the shaped band by one device-independent pixel.
     An exact edge-to-edge join exposes a horizontal antialiasing seam at some
     viewport scales even though neither section owns a border. */
  -webkit-mask-size:100% var(--landing-seam-depth),100% calc(100% - var(--landing-seam-depth) + 1px);
  mask-size:100% var(--landing-seam-depth),100% calc(100% - var(--landing-seam-depth) + 1px);
  -webkit-mask-position:top,bottom;mask-position:top,bottom;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* 48px across 390px is a wave, not a silhouette. Both bookends come down
   together, so a phone keeps the gentle swell the desktop has. */
@media(max-width:760px){
  body.auth-environment.landing-environment{--landing-seam-depth:18px}
}
.landing-drills-section>*{
  position:relative;z-index:1}
/* A measured duplicate of the hero's two working rings occupies the exact
   same page-space after the white canvas begins. Its pale ink and radial mask
   make it an atmospheric continuation on the far right, never illustration
   behind the practice controls. */
/* THE RETENTION CHAPTER IS GRAPH PAPER (7.30). It was a saturated logo-blue
   band; on the warm page it is the one place the ground is ruled, faintly
   blue -- the atmosphere kept, the weight given back to the evidence above.
   The curve is drawn on it in the page's ink, its reviews in gold. */
.landing-why-section{
  --why-ink:var(--landing-content-l-head);--why-accent:var(--landing-review-mark);--why-field:var(--landing-graph-field);
  --l-band-alt:var(--why-field);
  --l-head:var(--landing-content-l-head);
  --l-text:var(--landing-content-l-text);
  --l-text-dim:var(--landing-content-l-text-dim);
  --l-line-soft:var(--landing-graph-line);
  isolation:isolate;color:var(--l-text);
  background-color:var(--why-field);
  background-image:linear-gradient(var(--landing-graph-line) 1px,transparent 1px),linear-gradient(90deg,var(--landing-graph-line) 1px,transparent 1px);
  background-size:var(--size-landing-graph-cell) var(--size-landing-graph-cell);background-position:center top;
  padding-top:var(--space-landing-why-block-start)}

/* The section stamp: gold ordinal, rule, label. The page's only repeating
   ornament, and what turns six stacked bands into one numbered argument. */
.landing-section-head{max-width:660px;margin-bottom:clamp(30px,4.2vh,44px)}
/* A chapter heading stands centred over the chapter it opens; the content
   beneath keeps its own reading edge. The one exception is the retention
   band, whose claim is set beside its evidence. */
.landing-section>.landing-section-head{margin-inline:auto;text-align:center}
.landing-section>.landing-section-head .landing-section-lede{max-width:540px;margin-inline:auto;text-wrap:balance}
.landing-narrative-beat{max-width:900px;margin:0 auto clamp(46px,6.4vh,72px);
  text-align:center}
.landing-narrative-beat h2{font-size:var(--primitive-font-size-clamp-30px-4-1vw-49px);line-height:1.08;
  letter-spacing:-.038em;margin:0;text-wrap:balance}
.landing-ordinal{display:flex;align-items:center;gap:var(--primitive-spacing-11px);margin:0 0 16px!important;
  font-size:var(--primitive-font-size-11px);font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  color:var(--landing-accent-highlight)}
.landing-ordinal span{font-variant-numeric:tabular-nums}
.landing-ordinal i{flex:0 0 34px;height:1px;background:linear-gradient(90deg,var(--landing-accent-highlight),transparent)}
.landing-section-lede{color:var(--l-text-dim);font-size:var(--primitive-font-size-15-5px);line-height:1.58}

/* --- hero --------------------------------------------------------------- */
.landing-hero{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;
  padding-top:var(--space-landing-hero-block-start);
  padding-bottom:var(--space-landing-hero-block-end);
  position:relative;isolation:isolate;overflow:hidden;
  background:
    var(--visual-landing-hero-surface)}
/* The promise stands centred: on a wide screen a left-set column of copy
   left the other half of the navy empty, and the product it promises is
   directly below, centred on the same axis. */
.landing-hero-copy{max-width:760px;margin-inline:auto;position:relative;z-index:2;text-align:center}
.landing-hero .landing-lede{margin-inline:auto}
.landing-hero .landing-actions{justify-content:center}
.landing-hero-offer{margin-top:16px!important;color:var(--l-text-dim);font-size:var(--text-landing-cta-note);font-weight:600;
  letter-spacing:.01em;font-variant-numeric:tabular-nums}
.landing-eyebrow{display:inline-flex;align-items:center;gap:var(--primitive-spacing-9px);
  margin:0 0 18px!important;padding:var(--primitive-spacing-5px) var(--primitive-spacing-12px) var(--primitive-spacing-5px) var(--primitive-spacing-11px);border-radius:var(--primitive-radius-999px);
  border:var(--visual-landing-eyebrow-outline);background:var(--visual-landing-eyebrow-surface);
  font-size:var(--primitive-font-size-11px);font-weight:750;letter-spacing:.15em;text-transform:uppercase;
  color:var(--landing-accent-highlight)}
.landing-hero h1{color:var(--visual-landing-hero-text);font-size:var(--primitive-font-size-clamp-33px-4-5vw-55px);line-height:1.03;
  letter-spacing:-.038em;margin:0 0 22px;text-wrap:balance;font-weight:700}
.landing-lede{font-size:var(--primitive-font-size-clamp-15-5px-1-35vw-18px);line-height:1.58;
  color:var(--l-text-dim);max-width:530px}
.landing-lede strong{font-weight:720;color:inherit;font-style:normal}
.landing-actions{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-11px);margin-top:30px;align-items:center}

/* THE LANDING CTA IS A KEY (7.26.1). Inside the product a primary button is
   a quiet flat fill; out here it is the one thing the page is selling, so it
   gets a body. A gold face, lit along its top edge, sits on a deeper gold
   side --landing-cta-travel thick. Hover lifts the face a pixel; a press drives
   it all the way down onto its side, so the click is felt rather than
   decorated. No sheen, no gloss streak: the volume is geometry (7.26). The
   arrow says "forward" before the label is read, and moves with the press. */
.landing .landing-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:53px;padding:0 var(--primitive-spacing-30px);overflow:hidden;isolation:isolate;
  border-radius:var(--radius-action-hero);corner-shape:var(--shape-action);font-size:var(--primitive-font-size-16-5px);font-weight:720;line-height:1;
  letter-spacing:-.012em;background:var(--cta-primary-surface)!important;
  border:0!important;color:var(--cta-primary-text)!important;
  box-shadow:inset 0 1.5px 0 var(--cta-primary-lit-edge),
    0 var(--landing-cta-travel) 0 var(--cta-primary-edge),
    0 calc(var(--landing-cta-travel) + 2px) 0 var(--cta-primary-contact-shadow),
    var(--cta-primary-ambient-shadow);
  transform:translateY(0);
  transition:transform 140ms cubic-bezier(.22,.61,.36,1),box-shadow 140ms ease-out}
.landing-cta-label{position:relative;z-index:1;transform:translateY(-.5px);
  transition:opacity 90ms ease}
.landing-cta-arrow{position:relative;z-index:1;display:inline-flex;margin-left:var(--space-landing-cta-arrow);
  transition:transform 180ms cubic-bezier(.22,.61,.36,1),opacity 90ms ease}
.landing-cta-arrow svg{display:block;width:1.1em;height:1.1em}
.landing .landing-cta:hover{background:var(--cta-primary-surface-hover)!important;transform:translateY(-1px);
  box-shadow:inset 0 1.5px 0 var(--cta-primary-lit-edge),
    0 var(--landing-cta-travel-hover) 0 var(--cta-primary-edge-hover),
    0 calc(var(--landing-cta-travel-hover) + 2px) 0 var(--cta-primary-contact-shadow),
    var(--cta-primary-shadow-hover)}
.landing .landing-cta:hover .landing-cta-arrow{transform:translateX(4px)}
.landing .landing-cta:active{background:var(--cta-primary-surface-pressed)!important;
  transform:translateY(var(--landing-cta-travel));
  box-shadow:inset 0 2px 3px var(--visual-landing-cta-pressed-inset),0 0 0 var(--cta-primary-edge-pressed),var(--cta-primary-shadow-pressed);
  transition-duration:70ms}
.landing .landing-cta[data-action-owned="true"]{background:var(--cta-primary-surface-pressed)!important;
  transform:translateY(var(--landing-cta-travel));
  box-shadow:inset 0 2px 3px var(--visual-landing-cta-owned-inset),0 0 0 var(--cta-primary-edge-pressed),var(--cta-primary-shadow-pressed);
  transition-duration:70ms}
.landing .landing-cta:is(:active,[data-action-owned="true"]) .landing-cta-arrow{transform:translateX(6px)}
.landing .landing-cta:focus-visible{outline:2px solid var(--cta-primary-focus);outline-offset:3px}
.landing .landing-cta:disabled{background:var(--cta-primary-surface-disabled)!important;
  color:var(--cta-primary-text-disabled)!important;
  box-shadow:none;filter:none;transform:none;cursor:not-allowed;opacity:1}
.landing .landing-cta[aria-busy="true"]{cursor:progress;pointer-events:none}
.landing .landing-cta[aria-busy="true"] :is(.landing-cta-label,.landing-cta-arrow){opacity:0}
.landing .landing-cta[aria-busy="true"]:after{content:"";position:absolute;z-index:2;
  width:15px;height:15px;border:var(--visual-landing-landing-cta-outline);border-right-color:var(--visual-landing-landing-cta-border-right-ink);
  border-radius:50%;animation:landingCtaBusy .65s linear infinite}
@keyframes landingCtaBusy{to{transform:rotate(360deg)}}

/* --- the practice stage: the product's own (7.29) -----------------------
   This is not a picture of the activity screen; it is the activity screen's
   own stage, composed for presentation. The card is .activity-stage, so it
   takes the product's surface, hairline, radius and padding from the one list
   that grants every stage its panel. The eyebrow, ask, vignette, answer box
   and verdict are the product's classes. The landing adds only two things:
   the elevation that makes the stage the one object standing on the page
   (7.1), and the turn states below. The session chrome above a real stage
   (modes, count, outcome segments) is left out at every width: on this page
   it was reading matter with nothing to say about the skill. */
.landing-demo-frame{display:grid;min-width:0}
.landing-demo.activity-stage{margin:0;color:var(--text-primary);box-shadow:var(--elev-2)}
.landing-demo .answerbox{max-width:none}
.landing-demo .answerbox input{min-height:44px}
.landing-demo .stage-subject{font-size:var(--text-landing-demo-subject)}
.landing-demo .stage-vignette{font-size:var(--text-landing-demo-vignette)}
/* THE TURN. The stage only animates while it is turning: on arrival the
   scene is simply there, so the page's first frame carries no motion that
   is not the visitor's doing. During a turn the leaving scene is lifted out
   of flow onto the stage at the box it held, and the arriving one waits,
   invisible and in flow, until the leaving one has nearly gone. */
.landing-demo:not(.is-turning) .stage-scene{animation:none}
.landing-demo.is-turning .stage-scene.is-leaving{position:absolute;margin:0;pointer-events:none}
.landing-demo.is-turning .stage-scene.is-waiting{opacity:0;animation:none}
/* The verdict is the product's; a near miss is its own band, not a failure,
   and must not be coloured like one. */
.landing-demo-result .stage-verdict b{margin-right:var(--space-landing-demo-verdict-gap)}
.landing-demo-result .stage-verdict.is-near{border-left-color:var(--visual-landing-demo-result-is-near-text)}
.landing-demo-result .stage-verdict.is-near b{color:var(--visual-landing-demo-result-is-near-text)}
.landing-demo-answer{font-weight:700;color:var(--text-primary)}
.landing-demo-hint{color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}
/* THE SKILLS DEMONSTRATION (landing.js, the choreography contract). The
   practice card is the one focal object: it lifts while the example is
   answered and settles once the verdict is in. Nothing around it dims. The
   example wears its label and a quieter ink than a visitor's own answer. */
.landing-demo.activity-stage,.landing-cx-lecture{transition:transform 280ms var(--landing-ws-ease),box-shadow 280ms var(--landing-ws-ease)}
:is(.landing-demo.activity-stage,.landing-cx-lecture).is-demonstrating{transform:translateY(-3px);box-shadow:var(--elev-3)}
/* The lecture's label, at the card's top-right as the stage's sits in its
   brow: the same place in both chapters. */
.landing-cx-lecture>.landing-demo-tag{position:absolute;top:var(--space-landing-cx-tag-top);right:var(--space-landing-cx-tag-right);padding:0}
.landing-cx:not([data-view="questions"]) .landing-cx-lecture>.landing-demo-tag{display:none}
/* Courses: the checklist item a question counts toward, picked out once on
   arrival -- the same mark the lecture gets when Continue lands on it. */
.landing-cx-checklist li.is-practiced{margin-inline:calc(-1 * var(--space-landing-cx-link-inset));
  padding-inline:var(--space-landing-cx-link-inset);border-radius:var(--radius-landing-ws-node)}
.landing-cx-checklist li.is-practiced.is-linked{animation:landingResume 1400ms var(--landing-ws-ease) 200ms both}
.landing-demo-tag{margin-left:auto;padding-left:var(--space-landing-demo-tag);color:var(--landing-accent-link);
  font-size:var(--text-landing-demo-tag);font-weight:700;white-space:nowrap;animation:landingDemoTag 220ms var(--landing-ws-ease) both}
@keyframes landingDemoTag{from{opacity:0;transform:translateY(2px)}}
.landing-demo .answerbox.is-example input{color:var(--text-secondary)}
.landing-demo .answerbox.is-demo-typing input{border-color:var(--action-primary-bg)}
.landing-demo .answerbox button.primary.is-pressed{box-shadow:var(--action-press-inset),var(--action-pressed-shadow);
  transform:translateY(var(--action-press-y)) scale(var(--action-press-scale));transition-duration:var(--action-press-duration)}
.landing-demo-result .stage-verdict{animation:landingDemoVerdict 260ms var(--landing-ws-ease) both}
@keyframes landingDemoVerdict{from{opacity:0;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){
  .landing-demo.activity-stage,.landing-cx-lecture,.landing-demo-tag,.landing-demo-result .stage-verdict,
  .landing-cx-checklist li.is-practiced.is-linked{transition:none;animation:none}
  .landing-cx-checklist li.is-practiced.is-linked{background:color-mix(in srgb,var(--landing-accent-link) 9%,var(--l-panel))}
}
/* --- the evidence, the day, the material (7.30) --------------------------- */
/* THE PRODUCT AT ITS OWN SIZE. Wherever the page lays a real product card --
   the practice stage, a moment of the day, the lecture -- its parts take the
   app's reading sizes, not a miniature's. */
.landing-plate-stage,.landing-moment-card,.landing-practice-grid{
  --text-landing-ws-small:var(--text-landing-chapter-small);--text-landing-ws-title:var(--text-landing-chapter-title);
  --text-landing-ws-today:var(--text-landing-chapter-figure);--text-landing-cx-title:var(--text-landing-chapter-heading);
  --text-landing-cx-body:var(--text-landing-chapter-body);--text-landing-cx-stem:var(--text-landing-chapter-stem);
  --text-landing-hx-hello:var(--text-landing-chapter-heading);--text-landing-feature-ui:var(--text-landing-chapter-label);
  --space-landing-ws-card:var(--space-landing-chapter-card);--space-landing-cx-gap:var(--space-landing-chapter-gap)}
.landing-preview-head{display:grid;justify-items:center;gap:var(--space-landing-preview-head-gap);text-align:center;
  max-width:var(--size-landing-preview-head);margin:0 auto var(--space-landing-preview-head-after)}
.landing-preview-head h2{margin:0;color:var(--l-head);font-size:var(--text-landing-preview-heading);line-height:1.08;letter-spacing:-.035em}
.landing-preview-head p{margin:0;max-width:var(--size-landing-preview-support);color:var(--l-text-dim);
  font-size:var(--text-landing-feature-body);line-height:1.55;text-wrap:balance}

/* THE THREAD (7.30.2): material becomes practice. On paper the line that
   matters wears a highlighter stroke -- gold, because highlighting is the
   action a student takes on a page -- and a blue ink line runs from it to the
   question it became. On navy the same phrase is simply gold. */
.landing-mark{font-style:normal;color:inherit;padding-inline:var(--space-landing-mark-bleed);margin-inline:calc(-1 * var(--space-landing-mark-bleed));
  background-image:linear-gradient(transparent var(--landing-mark-top),color-mix(in srgb,var(--landing-highlighter) 92%,transparent) var(--landing-mark-top) var(--landing-mark-bottom),transparent var(--landing-mark-bottom));
  background-repeat:no-repeat;background-size:100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;--landing-mark-top:14%;--landing-mark-bottom:90%}
.landing h2 em.landing-mark,.landing h3 em.landing-mark{color:inherit;font-weight:inherit;--landing-mark-top:56%;--landing-mark-bottom:94%}
.landing-thread{position:absolute;left:0;top:0;z-index:2;overflow:visible;pointer-events:none}
.landing-thread path{stroke:var(--landing-ink-line);stroke-width:2.2}
.landing-thread circle{fill:var(--landing-ink-line)}

/* PHOTOGRAPHS AND THEIR STAND-INS (7.30.3). A slot is a frame: it crops,
   it rounds, it carries a time label and a product card. With no photograph
   yet, its drawing is the icon set's own objects on the time of day. */
.landing-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;overflow:hidden}
.landing-photo[data-photo="desk"]{object-position:82% 50%}
.landing-photo-field{position:absolute;inset:0;width:100%;height:100%}
.landing-photo-object{position:absolute;display:block}
.landing-photo-object svg{display:block;width:100%;height:100%}
.landing-practice-shot .landing-photo-object[data-object="pen"]{right:9%;bottom:7%;width:min(22%,120px);aspect-ratio:1;transform:rotate(18deg)}

/* 1. THE HERO'S TABLE. One drawing, scaled as a whole: every part is placed
   in the table's own proportions and its words are sized by its width, so it
   is the same picture on a phone and on a desktop. */
.landing-table{position:relative;z-index:1;width:100%;max-width:var(--size-landing-table);aspect-ratio:600/470;
  container-type:inline-size;justify-self:end;margin-inline:auto}
.landing-table>*{position:absolute}
.landing-table svg{display:block;width:100%;height:100%}
.landing-table-glow{left:-34%;top:-30%;width:120%;aspect-ratio:1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--landing-highlighter) 40%,transparent),color-mix(in srgb,var(--landing-highlighter) 16%,transparent) 36%,color-mix(in srgb,var(--landing-highlighter) 4%,transparent) 66%,transparent)}
.landing-table-desk{left:0;bottom:0;width:100%;height:31.9%}
.landing-table-lamp{left:-3%;bottom:20%;width:31%;aspect-ratio:150/300}
.landing-table-laptop{left:15%;bottom:19.6%;width:70%;aspect-ratio:420/290}
.landing-table-screen{
  --l-panel:var(--landing-content-l-panel);--l-panel-2:var(--landing-content-l-panel-2);
  --l-line:var(--landing-content-l-line);--l-line-soft:var(--landing-content-l-line-soft);
  --l-text:var(--landing-content-l-text);--l-text-dim:var(--landing-content-l-text-dim);--l-head:var(--landing-content-l-head);
  --landing-accent-link:var(--landing-content-accent-link);--landing-accent-energy:var(--landing-content-accent-energy);
  position:absolute;left:8.1%;top:4.14%;width:83.8%;height:82.8%;overflow:hidden;border-radius:var(--radius-landing-table-screen)}
.landing-table-object{display:block}
.landing-table-object svg{width:100%;height:100%}
.landing-table-object[data-object="books"]{right:-15%;bottom:20%;width:27%;aspect-ratio:1}
.landing-table-object[data-object="bottle"]{right:13%;bottom:7%;width:18%;aspect-ratio:1;transform:rotate(4deg)}
.landing-table-object[data-object="calc"]{left:5%;bottom:6%;width:15.5%;aspect-ratio:1;transform:rotate(-10deg)}
.landing-table-object[data-object="rx"]{left:36%;bottom:3%;width:15%;aspect-ratio:1;transform:rotate(-6deg)}
/* The lecture page, on the screen and on the desk below: the same page. */
.landing-lecture-page{position:relative;background:var(--l-panel);color:var(--l-head);text-align:left;
  padding:var(--space-landing-lecture-page);border-radius:var(--radius-landing-lecture-page);box-shadow:var(--elev-1)}
.landing-lecture-page:before{content:"";position:absolute;left:var(--space-landing-lecture-margin);top:0;bottom:0;width:1.5px;
  background:color-mix(in srgb,var(--landing-accent-energy) 45%,transparent)}
.landing-lecture-page small{display:block;color:var(--l-text-dim);font-size:var(--text-landing-lecture-small);font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.landing-lecture-page b{display:block;font-size:var(--text-landing-lecture-title);font-weight:800;letter-spacing:-.02em;margin:.2em 0 .45em}
.landing-lecture-page ul{margin:0;padding:var(--space-landing-lecture-list);color:var(--l-text);font-size:var(--text-landing-lecture-line);line-height:1.85}
.landing-lecture-page li::marker{color:var(--l-text-dim)}
.landing-table-screen .landing-lecture-page{position:absolute;left:3.6%;top:4.5%;width:70%;
  --text-landing-lecture-small:var(--text-landing-table-small);--text-landing-lecture-title:var(--text-landing-table-title);
  --text-landing-lecture-line:var(--text-landing-table-line);--space-landing-lecture-page:var(--space-landing-table-page);
  --space-landing-lecture-margin:var(--space-landing-table-margin);--radius-landing-lecture-page:var(--radius-landing-table-card)}
.landing-table-screen .landing-table-question{position:absolute;right:3.6%;bottom:4%;width:47%;z-index:3;
  padding:var(--space-landing-table-card);border-radius:var(--radius-landing-table-card);display:grid;gap:var(--space-landing-table-card-gap)}
.landing-table-question-meta{display:flex;justify-content:space-between;color:var(--l-text-dim);font-size:var(--text-landing-table-small);
  font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.landing-table-question-meta span+span{color:var(--landing-accent-link);text-transform:none;letter-spacing:0}
.landing-table-question>b{color:var(--l-head);font-size:var(--text-landing-table-stem);line-height:1.22;letter-spacing:-.01em}
.landing-table-verdict{display:flex;gap:var(--space-landing-table-verdict-gap);align-items:baseline;padding:var(--space-landing-table-verdict);border-radius:var(--radius-landing-table-verdict);
  background:var(--visual-landing-demo-result-is-correct-surface);color:var(--visual-landing-demo-result-is-correct-text);
  font-size:var(--text-landing-table-verdict);font-weight:650}
.landing-table-verdict b{font-weight:800}
/* The opening (landingTellTable): once, about a second, every frame already
   a picture. */
.landing-hero.is-telling .landing-table-glow{animation:landingTableGlow 700ms ease-out both}
.landing-hero.is-telling .landing-table-screen .landing-mark{animation:landingMarkSweep 450ms 350ms cubic-bezier(.3,.7,.2,1) both}
.landing-hero.is-telling .landing-table-screen .landing-thread path{stroke-dasharray:1;animation:landingThreadDraw 350ms 800ms ease-out both}
.landing-hero.is-telling .landing-table-screen .landing-thread circle{animation:landingThreadEnd 200ms 1100ms ease-out both}
.landing-hero.is-telling .landing-table-question{animation:landingTableRise 380ms 950ms cubic-bezier(.2,.8,.2,1) both}
/* Behind the arrival veil the opening waits, drawn at its first frame, and
   starts when the page is revealed -- never told to no one. */
.landing-hero.is-waiting .landing-table-glow{opacity:.25}
.landing-hero.is-waiting .landing-table-screen .landing-mark{background-size:0% 100%}
.landing-hero.is-waiting .landing-table-question,.landing-hero.is-waiting .landing-table-screen .landing-thread{opacity:0}
@keyframes landingTableGlow{from{opacity:.25}to{opacity:1}}
@keyframes landingMarkSweep{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes landingThreadDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes landingThreadEnd{from{opacity:0}to{opacity:1}}
@keyframes landingTableRise{from{opacity:0;transform:translateY(var(--space-landing-table-rise))}to{opacity:1;transform:none}}
@media (min-width:901px){
  .landing-hero{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:end;column-gap:var(--space-landing-hero-columns)}
  .landing-hero-copy{text-align:left;margin-inline:0;align-self:center;padding-bottom:var(--space-landing-hero-copy-end)}
  .landing-hero .landing-lede{margin-inline:0}
  .landing-hero .landing-actions{justify-content:flex-start}
}
@media (max-width:900px){
  .landing-table{margin-top:var(--space-landing-table-stacked)}
}
/* A phone's table: the laptop takes most of the width, so its screen reads. */
@media (max-width:640px){
  .landing-table{aspect-ratio:600/520;max-width:none;margin-inline:calc(-1 * var(--landing-gutter));width:calc(100% + 2 * var(--landing-gutter))}
  .landing-table-laptop{left:12%;width:78%;bottom:17%}
  .landing-table-lamp{left:-2%;width:21%;bottom:18%}
  .landing-table-object[data-object="books"]{right:-8%;width:22%;bottom:17%}
  .landing-table-object[data-object="rx"]{display:none}
  .landing-table-object[data-object="bottle"]{right:8%;width:16%}
  .landing-table-desk{height:27%}
}

/* 2. TRY IT RIGHT HERE. A plate: a moment of the day on one side with the
   practice card set on it, the skills on the hero's navy on the other. The
   white card is the brightest object below the promise. */
.landing-plate{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);max-width:var(--size-landing-plate);margin-inline:auto;
  border-radius:var(--radius-landing-plate);overflow:hidden;box-shadow:var(--elev-3);isolation:isolate}
.landing-plate>*{min-width:0}
.landing-plate-shot{position:relative;min-height:var(--size-landing-plate-min)}
.landing-plate-shot .landing-photo-object[data-object="drugs"]{left:-4%;bottom:-6%;width:min(34%,190px);aspect-ratio:1;transform:rotate(8deg)}
.landing-plate-shot .landing-photo-object[data-object="rx"]{right:-4%;top:-5%;width:min(20%,120px);aspect-ratio:1;transform:rotate(-12deg)}
.landing-plate-shot .landing-photo-object[data-object="calc"]{right:4%;bottom:-3%;width:min(20%,120px);aspect-ratio:1;transform:rotate(-8deg)}
.landing-plate-stage{position:relative;z-index:1;padding:var(--space-landing-plate-stage)}
.landing-plate-side{position:relative;padding:var(--space-landing-plate-side);background:var(--visual-landing-hero-surface);
  --l-head:var(--landing-environment-l-head);--l-text:var(--landing-environment-l-text);
  --l-text-dim:var(--landing-environment-l-text-dim);
  --landing-accent-link:var(--landing-environment-accent-link);--landing-accent-highlight:var(--landing-environment-accent-highlight)}
.landing-plate-side h3{text-transform:none;color:var(--l-head);font-size:var(--text-landing-plate-heading);line-height:1.12;letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
.landing-plate-side h3 em{font-style:normal;color:var(--landing-accent-highlight)}
.landing-plate-side>p{color:var(--l-text-dim);font-size:var(--text-landing-feature-body);line-height:1.6}
.landing-plate-side .landing-drill-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-landing-plate-tabs)}
.landing-plate-side .landing-drill-tab .landing-drill-icon{filter:none;opacity:var(--opacity-landing-plate-icon)}
.landing-plate-side .landing-drill-tab.is-active .landing-drill-icon{opacity:1}
.landing-plate-side .landing-drill-tab:hover .landing-drill-name,
.landing-plate-side .landing-drill-tab.is-active .landing-drill-name{color:var(--l-head)}

/* 3. ONE LECTURE, FROM THE HALL TO THE EXAM. Four moments in a row; each is a
   framed moment of the day with its product card set over its lower edge,
   then what it means in two lines. */
.landing-day-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-landing-day-gap)}
.landing-day-rail:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px;border-radius:var(--radius-landing-photo)}
/* The four moments share their rows, so every card and every caption starts
   on one line across the day, however long a card is. */
.landing-moment{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;min-width:0}
.landing-moment-card{align-self:start}
.landing-moment-shot{position:relative;height:var(--size-landing-moment-shot);border-radius:var(--radius-landing-photo);overflow:hidden}
.landing-moment-shot .landing-photo-object{left:50%;top:var(--space-landing-moment-art-top);width:var(--size-landing-moment-art);aspect-ratio:1;transform:translateX(-50%)}
.landing-moment-when{position:absolute;left:var(--space-landing-moment-inset);top:var(--space-landing-moment-inset);z-index:1;padding:var(--space-landing-moment-when);
  border-radius:var(--radius-landing-ws-chip);background:color-mix(in srgb,var(--eclipse-ground) 58%,transparent);
  color:var(--landing-environment-l-head);font-size:var(--text-landing-moment-when);font-weight:800;letter-spacing:-.01em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.landing-moment-card{position:relative;z-index:1;margin:calc(-1 * var(--space-landing-moment-overlap)) var(--space-landing-moment-inset) 0;
  min-height:var(--size-landing-moment-card)}
.landing-moment>h3{text-transform:none;color:var(--l-head);font-size:var(--text-landing-moment-title);margin:var(--space-landing-moment-title) 0 0;letter-spacing:-.015em}
.landing-moment>p{color:var(--l-text-dim);font-size:var(--text-landing-moment-body);line-height:1.5;margin-top:6px}
.landing-moment-title{display:block;color:var(--l-head);font-size:var(--text-landing-ws-title);font-weight:780;letter-spacing:-.01em;margin-top:8px}
.landing-moment-file{display:flex;gap:var(--space-landing-ws-head-gap);align-items:center;margin-top:10px;padding:var(--space-landing-ws-count);
  border-radius:var(--radius-landing-ws-node);background:var(--l-panel-2)}
.landing-moment-file i{font-style:normal;padding:var(--space-landing-moment-pdf);border-radius:var(--radius-landing-ws-filament);
  background:var(--visual-landing-demo-result-is-miss-text);color:var(--l-panel);font-size:var(--text-landing-moment-pdf);font-weight:900}
.landing-moment-file span{display:grid}
.landing-moment-file b{color:var(--l-head);font-size:var(--text-landing-ws-small)}
.landing-moment-file small{color:var(--l-text-dim);font-size:var(--text-landing-ws-small)}
.landing-moment-card.landing-hx-continue{width:auto;padding:var(--space-landing-chapter-card)}
.landing-moment-card.landing-hx-continue .landing-hx-hello{grid-column:1/-1;margin:0;font-size:var(--text-landing-feature-ui);color:var(--l-text-dim);letter-spacing:.12em}
.landing-moment-card .landing-hx-resume b{font-size:var(--text-landing-ws-title)}
.landing-moment-card .landing-hx-week{margin:8px 0 6px}
.landing-moment-card .landing-hx-agenda{min-height:0}
.landing-moment-checklist ul{list-style:none;margin:8px 0 0;padding:0}
.landing-moment-checklist li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-landing-ws-head-gap);
  padding:var(--space-landing-moment-row);border-top:1px solid var(--l-line-soft);font-size:var(--text-landing-ws-small);color:var(--l-text)}
.landing-moment-checklist li:first-child{border-top:0}
.landing-moment-checklist .landing-cx-state{white-space:nowrap}
.landing-day-pager{display:none}

/* 4. FROM YOUR LECTURE TO PRACTICE. The page and the lecture it became,
   overlapping, joined by the thread; the three steps beneath. */
.landing-practice{background:var(--l-panel)}
/* The card meets the page near its top, so a verdict opens it downward into
   the page's height: the question never moves while it is read. */
.landing-practice-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.landing-practice-shot{position:relative;height:var(--size-landing-practice-shot);border-radius:var(--radius-landing-plate);overflow:hidden}
.landing-practice-shot .landing-lecture-page{position:absolute;left:12%;top:15%;width:66%;transform:rotate(-3deg);
  --text-landing-lecture-small:var(--text-landing-chapter-small);--text-landing-lecture-title:var(--text-landing-practice-page-title);
  --text-landing-lecture-line:var(--text-landing-practice-page-line);--space-landing-lecture-page:var(--space-landing-practice-page);
  --space-landing-lecture-margin:var(--space-landing-practice-margin);--radius-landing-lecture-page:var(--radius-landing-practice-page)}
.landing-practice-grid .landing-cx{position:relative;z-index:3;margin:var(--space-landing-practice-card-top) 0 0 calc(-1 * var(--space-landing-practice-overlap));display:block}
.landing-practice-grid .landing-cx-lecture{box-shadow:var(--elev-3)}
.landing-steps{list-style:none;margin:var(--space-landing-steps-before) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:2px solid var(--l-head)}
.landing-step{padding:var(--space-landing-step);min-width:0}
.landing-step+.landing-step{border-left:1px solid var(--l-line-soft)}
.landing-step-number{display:block;font-size:var(--text-landing-step-number);font-weight:900;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--l-head)}
.landing-step h3{text-transform:none;letter-spacing:-.01em;font-size:var(--text-landing-step-title);margin:12px 0 0;color:var(--l-head)}
.landing-step p{color:var(--l-text-dim);font-size:var(--text-landing-step-body);line-height:1.55;margin-top:8px}
.landing-step-note{display:block;margin-top:12px;color:var(--landing-ink-line);font-size:var(--text-landing-step-note);font-weight:650;font-style:italic}

@media (max-width:1100px){
  .landing-plate{grid-template-columns:minmax(0,1fr)}
  .landing-plate-side{order:-1}
  .landing-plate-shot{min-height:0}
  .landing-day-rail{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-landing-day-row-gap)}
  .landing-practice-grid{grid-template-columns:minmax(0,1fr)}
  .landing-practice-shot{height:var(--size-landing-practice-shot-stacked)}
  .landing-practice-shot .landing-photo{object-position:50% 90%}
  .landing-practice-grid .landing-cx{margin:calc(-1 * var(--space-landing-practice-overlap-stacked)) var(--space-landing-practice-inset) 0}
}
/* A PHONE WALKS THE DAY ONE MOMENT AT A TIME: a sideways row that bleeds to
   the screen's edges, the next moment peeking in, and a pager that is a real
   way through it -- arrows, dots, and where you are. */
@media (max-width:640px){
  .landing-plate{border-radius:0;margin-inline:calc(-1 * var(--landing-gutter))}
  .landing-plate-side{padding:var(--space-landing-plate-side-compact)}
  .landing-plate-stage{padding:var(--space-landing-plate-stage-compact)}
  .landing-day-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none;
    gap:var(--space-landing-day-gap-compact);margin-inline:calc(-1 * var(--landing-gutter));padding-inline:var(--landing-gutter);
    scroll-padding-inline:var(--landing-gutter)}
  .landing-day-rail::-webkit-scrollbar{display:none}
  .landing-moment{display:flex;flex-direction:column;flex:0 0 var(--size-landing-moment-compact);scroll-snap-align:center;scroll-snap-stop:always}
  .landing-moment-shot{height:var(--size-landing-moment-shot-compact)}
  .landing-day-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--space-landing-day-gap-compact);margin-top:18px}
  .landing-day-dots{display:flex;gap:var(--space-landing-day-dots)}
  .landing-day-dots i{width:8px;height:8px;border-radius:var(--radius-landing-ws-chip);background:var(--landing-paper-rule);transition:width 200ms ease,background-color 200ms ease}
  .landing-day-dots i.is-current{width:22px;background:var(--l-head)}
  .landing-day-count{color:var(--l-text-dim);font-size:var(--text-landing-ws-small);font-weight:700;font-variant-numeric:tabular-nums}
  .landing-day-arrows{display:flex;gap:var(--space-landing-day-dots)}
  .landing-day-step{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-landing-ws-chip);
    background:var(--l-panel);color:var(--l-head);box-shadow:var(--elev-1);cursor:pointer}
  .landing-day-step .control-glyph{width:22px;height:22px}
  .landing-day-back{display:grid;transform:scaleX(-1)}
  .landing-day-step:disabled{opacity:.35;cursor:default}
  .landing-day-step:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
  .landing-practice-shot{height:var(--size-landing-practice-shot-compact);border-radius:var(--radius-landing-photo)}
  .landing-practice-shot .landing-lecture-page{left:7%;width:82%;top:8%;
    --text-landing-lecture-title:var(--text-landing-practice-page-title-compact);--text-landing-lecture-line:var(--text-landing-practice-page-line-compact);
    --space-landing-lecture-page:var(--space-landing-practice-page-compact);--space-landing-lecture-margin:var(--space-landing-practice-margin-compact)}
  .landing-practice-grid .landing-cx{margin:calc(-1 * var(--space-landing-practice-overlap-compact)) 0 0}
  .landing-steps{grid-template-columns:minmax(0,1fr)}
  .landing-step{padding:var(--space-landing-step-compact)}
  .landing-step+.landing-step{border-left:0;border-top:1px solid var(--l-line-soft)}
}
@media (prefers-reduced-motion:reduce){
  .landing-hero.is-telling *{animation:none!important}
  .landing-day-dots i{transition:none}
}
/* THE REVEAL (landing.js landingStartReveal). Below the first screen, each
   chapter and section arrives once as it enters: its words first, the
   product a beat later -- so the eye reads what it is about to see, then
   sees it. Opacity and transform only (no layout shift), short, never
   replayed, never applied to anything already on screen, and absent under
   reduced motion or without script: nothing waits behind it. */
[data-reveal]{transition:opacity var(--duration-landing-reveal) var(--ease-landing-reveal) var(--delay-landing-reveal,0ms),
  transform var(--duration-landing-reveal) var(--ease-landing-reveal) var(--delay-landing-reveal,0ms)}
[data-reveal="words"]:not(.is-revealed){opacity:0}
[data-reveal="object"]:not(.is-revealed){opacity:0;transform:translateY(var(--space-landing-reveal-rise))}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{transition:none}
  [data-reveal]:not(.is-revealed){opacity:1;transform:none}
}
/* A panel is the product's: white, hairline, the product radius, and a
   height asked of the elevation scale. */
.landing-ws-card{position:relative;min-width:0;padding:var(--space-landing-ws-card);text-align:left;
  border:1px solid var(--l-line-soft);border-radius:var(--radius-landing-ws-card);background:var(--l-panel);
  box-shadow:var(--elev-1)}
.landing-ws-head{display:flex;align-items:center;gap:var(--space-landing-ws-head-gap);margin:0 0 10px;min-height:22px}
.landing-ws-head .mode-nav-mark{width:24px;height:24px;filter:none;opacity:1}
.landing-ws-head>b{color:var(--l-head);font-size:var(--text-landing-ws-title);font-weight:700}
.landing-feature-ui-label{display:block;color:var(--l-text-dim);font-size:var(--text-landing-feature-ui);
  font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.landing-feature-meter{position:relative;display:block;height:5px;overflow:hidden;
  border-radius:var(--radius-landing-feature-meter);background:color-mix(in srgb,var(--landing-accent-link) 14%,transparent)}
.landing-feature-meter:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill);
  border-radius:inherit;background:var(--landing-accent-link)}

/* Skills: the list is the control and the stage is what it controls. */
.landing-drill-tabs{display:grid;gap:var(--space-landing-drill-tab-gap);background:none;border:0;overflow:visible}
/* A SKILL IS AN OBJECT YOU CHOOSE (11.10). Not a row in a box: the product's
   own selection ladder, worn through the shared lift (11.9). At rest the mark
   is greyed and flat on the table; a pointer or keyboard focus PREVIEWS it --
   picked up, warmed part of the way, never full colour -- and the chosen one
   stands in full colour, lifted a touch higher than any preview, with its
   name at full weight. Colour belongs to the choice, not to the pointer. No
   pill, no fill, no outline: selection is height, not a container. */
.landing-drill-tab{
  --lift-scale:1.045;
  --lift-tilt:4deg;
  --lift-perspective:340px;
  --lift-pool-left:var(--space-landing-drill-pool-left);
  --lift-pool-right:auto;
  --lift-pool-bottom:var(--space-landing-drill-pool-bottom);
  --lift-pool-height:6px;
  --lift-pool-a:.2;
  --lift-rest-shadow:var(--mode-switcher-lift-rest-shadow);
  --lift-hover-shadow:var(--mode-switcher-lift-hover-shadow);
  display:block;text-align:left;background:transparent;border:0;border-radius:var(--radius-landing-drill-tab);
  padding:var(--space-landing-drill-tab);cursor:pointer;color:var(--l-text-dim);
  transition:color var(--action-rest-duration,150ms) ease}
.landing-drill-tab::after{width:var(--size-landing-drill-pool);opacity:.55;transform:scaleX(.72)}
.landing-drill-tab .lift-rise,.landing-drill-tab .lift-plane{gap:var(--space-landing-drill-tab-gap-inline)}
.landing-drill-tab .landing-drill-icon{filter:var(--artwork-muted-filter);opacity:var(--activity-mark-muted-opacity);
  transition:filter var(--action-rest-duration,150ms) ease,opacity var(--action-rest-duration,150ms) ease}
.landing-drill-tab:hover .landing-drill-icon,.landing-drill-tab:focus-visible .landing-drill-icon{
  filter:var(--artwork-hover-filter);opacity:.82}
.landing-drill-tab:hover .landing-drill-name,.landing-drill-tab:focus-visible .landing-drill-name{color:var(--l-head)}
.landing-drill-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.landing-drill-tab.is-active{--lift-scale:1.07}
.landing-drill-tab.is-active .landing-drill-icon{filter:none;opacity:1}
.landing-drill-tab.is-active .lift-rise{transform:scale(var(--lift-scale));filter:var(--lift-hover-shadow)}
.landing-drill-tab.is-active .lift-plane{transform:rotateX(var(--lift-tilt))}
.landing-drill-tab.is-active::after{transform:translateY(2px) scaleX(1.35) scaleY(1.5);opacity:.42}
.landing-drill-tab.is-active .landing-drill-name{color:var(--l-head);font-weight:720}
@media (prefers-reduced-motion:reduce){
  .landing-drill-tab.is-active .lift-rise,.landing-drill-tab.is-active .lift-plane{transform:none}
  .landing-drill-tab,.landing-drill-tab .landing-drill-icon{transition:none}
}
/* No tile behind a study-area mark here either: the drawings are objects, and
   a tinted bordered square would read as the icon. */
.landing-drill-icon{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center}
.landing-drill-icon svg{width:19px;height:19px}
.landing-drill-icon .study-glyph{width:32px;height:32px}
.landing-drill-text{display:grid;gap:var(--primitive-spacing-1px);min-width:0}
.landing-drill-name{font-size:var(--text-landing-drill-name);font-weight:620;color:var(--l-text);
  transition:color var(--action-rest-duration,150ms) ease}
/* Names only: the stage's own eyebrow says what the chosen skill asks. */
.landing-drill-cue{display:none}
.landing-drill-panel{min-width:0;background:transparent;border:0;padding:0;position:relative;overflow:visible}

/* Courses: the lecture is the card; its label names the course it is in. */
.landing-cx{display:block}
.landing-cx-lecture h4{margin:4px 0 10px;color:var(--l-head);font-size:var(--text-landing-cx-title);letter-spacing:-.02em}
/* The lecture's views, as the product draws a page's facets: words on a
   hairline, the chosen one underlined in blue. */
.landing-cx-tabs{display:flex;gap:var(--space-landing-cx-tabs-gap);border-bottom:1px solid var(--l-line-soft)}
.landing-cx-tabs button{display:flex;align-items:center;gap:var(--space-landing-ws-modes-gap);margin-bottom:-1px;
  padding:var(--space-landing-cx-tab);border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
  color:var(--l-text-dim);font:inherit;font-size:var(--text-landing-ws-small);font-weight:650;
  transition:color 160ms ease,border-color 200ms var(--landing-ws-ease)}
/* A tab's name stays on one line. A narrow lecture panel keeps the names and
   lets the marks go, rather than break "Exam checklist" over two lines. */
.landing-cx-tabs button{white-space:nowrap}
.landing-cx-lecture{container-type:inline-size;position:relative}
@container (max-width:380px){
  .landing-cx-tabs .mode-nav-mark,.landing-cx-tabs .activity-mark{display:none}
}
.landing-cx-tabs button:hover{color:var(--l-head)}
.landing-cx-tabs button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;border-radius:var(--radius-landing-ws-node)}
.landing-cx-tabs button[aria-selected="true"]{color:var(--landing-accent-link);border-bottom-color:var(--landing-accent-link)}
.landing-cx-tabs .mode-nav-mark,.landing-cx-tabs .activity-mark{width:18px;height:18px;filter:none;opacity:1}
/* Only the open view takes room, so the lecture is as tall as what it shows
   rather than its tallest view: Questions no longer ends in the empty space
   Definitions left behind. The open view fades in as it arrives. */
.landing-cx-views{display:grid;margin-top:12px}
.landing-cx-view{min-width:0;opacity:0;visibility:hidden;transform:translateY(4px)}
.landing-cx-view[inert]{display:none}
.landing-cx[data-view="definitions"] [data-view="definitions"],
.landing-cx[data-view="questions"] [data-view="questions"],
.landing-cx[data-view="checklist"] [data-view="checklist"]{opacity:1;visibility:visible;transform:none;
  transition:opacity 240ms ease,transform 260ms var(--landing-ws-ease)}
@starting-style{
  .landing-cx[data-view] .landing-cx-view:not([inert]){opacity:0;transform:translateY(4px)}
}
.landing-cx-definitions{display:grid;margin:0}
.landing-cx-definitions div{padding:var(--space-landing-cx-row);border-top:1px solid var(--l-line-soft)}
.landing-cx-definitions div:first-child{border-top:0;padding-top:0}
.landing-cx-definitions dt{color:var(--l-head);font-size:var(--text-landing-ws-title);font-weight:700}
.landing-cx-definitions dd{margin:2px 0 0;color:var(--l-text-dim);font-size:var(--text-landing-cx-body);line-height:1.45}
.landing-cx-question{display:grid;gap:var(--space-landing-cx-question-gap);border-radius:var(--radius-landing-ws-node)}
.landing-cx-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-landing-ws-modes-gap) var(--space-landing-ws-row-gap)}
.landing-cx-count{color:var(--l-text-dim);font-size:var(--text-landing-ws-small);font-weight:650}
/* Which checklist item this question counts toward, in the checklist tab's
   own mark: the same words appear on that item, so the link reads at rest. */
.landing-cx-practices{display:inline-flex;align-items:center;gap:var(--space-landing-ws-modes-gap);
  color:var(--l-text);font-size:var(--text-landing-ws-small);font-weight:650}
.landing-cx-practices .mode-nav-mark{width:var(--size-landing-cx-practices-mark);height:var(--size-landing-cx-practices-mark);filter:none;opacity:1}
.landing-cx-note{margin:var(--space-landing-cx-note) 0 0;color:var(--l-text-dim);font-size:var(--text-landing-ws-small);line-height:1.45}
.landing-cx-stem{color:var(--l-head);font-size:var(--text-landing-cx-stem);font-weight:650;line-height:1.35}
/* The field starts where the question starts, as on the skill stage; the
   shared .answerbox centring would otherwise shrink it inside the lecture. */
.landing-cx-question .answerbox{max-width:none;margin:0}
.landing-cx-question .answerbox input{flex:1;min-width:0}
.landing-cx-checklist{display:grid;margin:0;padding:0;list-style:none}
.landing-cx-checklist li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-landing-ws-row-gap);
  padding:var(--space-landing-cx-row);border-top:1px solid var(--l-line-soft);color:var(--l-text);font-size:var(--text-landing-cx-body)}
.landing-cx-checklist li:first-child{border-top:0;padding-top:0}
/* A readiness state is the product's dot and word (READY_META), not a chip. */
.landing-cx-state{flex:none;display:inline-flex;align-items:center;gap:var(--space-landing-cx-state-gap);
  color:var(--l-text);font-size:var(--text-landing-ws-small);font-weight:700}
.landing-cx-state.is-gray{color:var(--l-text-dim)}
.landing-cx-state .rdot{width:var(--size-landing-cx-state-dot);height:var(--size-landing-cx-state-dot)}
/* Arriving from Continue: the lecture and its question are picked out once,
   the way the product marks where you left off, then settle. */
.landing-cx.is-resuming .landing-cx-question{animation:landingResume 1400ms var(--landing-ws-ease) 360ms both}
@keyframes landingResume{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--landing-accent-link) 0%,transparent)}
  30%{box-shadow:0 0 0 5px color-mix(in srgb,var(--landing-accent-link) 22%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--landing-accent-link) 0%,transparent)}}

/* Home: Continue leads, the calendar keeps the week. */
.landing-hx{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-landing-cx-gap);align-items:start}
.landing-hx-main{display:grid;gap:var(--space-landing-hx-gap);text-align:left;container-type:inline-size}
.landing-hx-hello{margin:4px 0 6px;color:var(--l-head);font-size:var(--text-landing-hx-hello);font-weight:720;letter-spacing:-.025em}
/* Home has one focal point: Continue. It is the largest object on the page,
   the calendar beside it the quieter second. */
.landing-hx-continue{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;
  padding:var(--space-landing-hx-continue);
  gap:var(--space-landing-ws-row-gap);row-gap:var(--space-landing-hx-continue-gap);width:100%;font:inherit;cursor:pointer;
  transition:transform 200ms var(--landing-ws-ease),box-shadow 200ms var(--landing-ws-ease),border-color 200ms ease}
.landing-hx-continue:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--landing-accent-link) 40%,transparent);box-shadow:var(--elev-2)}
.landing-hx-continue:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.landing-hx-continue .mode-nav-mark{width:36px;height:36px;filter:none;opacity:1}
.landing-hx-continue .landing-feature-meter{grid-column:1/-1}
.landing-hx-resume{display:grid;min-width:0}
.landing-hx-resume b{color:var(--l-head);font-size:var(--text-landing-hx-resume);letter-spacing:-.02em;font-weight:720}
.landing-hx-resume small{color:var(--l-text-dim);font-size:var(--text-landing-ws-small)}
/* Continue sits under the lecture it resumes, never beside it: beside it, it
   squeezed the lecture's place in the course down to "Questions, ...". */
.landing-hx-go{grid-column:2;display:flex;gap:var(--space-landing-ws-modes-gap);color:var(--landing-accent-link);
  font-size:var(--text-landing-ws-small);font-weight:750}
.landing-ws-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-landing-ws-counts-gap)}
.landing-ws-counts span{display:grid;padding:var(--space-landing-ws-count);border-radius:var(--radius-landing-ws-node);
  color:var(--l-text-dim);font-size:var(--text-landing-ws-small)}
.landing-ws-counts b{color:var(--l-head);font-size:var(--text-landing-ws-today);line-height:1.1}
.landing-ws-counts .is-selected{background:color-mix(in srgb,var(--landing-accent-link) 10%,var(--l-panel));color:var(--l-head)}
.landing-hx-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-landing-feature-week-gap);margin:12px 0 8px}
.landing-hx-week button{position:relative;height:30px;padding:0;border:1px solid var(--l-line-soft);
  border-radius:var(--radius-landing-feature-day-cell);background:var(--l-panel-2);cursor:pointer;
  color:var(--l-text-dim);font:inherit;font-size:var(--text-landing-ws-small);font-weight:650;
  transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.landing-hx-week button:hover{border-color:var(--l-line);color:var(--l-head)}
.landing-hx-week button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.landing-hx-week button.is-today{border-color:var(--landing-accent-link);color:var(--landing-accent-link)}
.landing-hx-week button.has-items:after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:var(--landing-accent-link)}
.landing-hx-week button.is-exam:after{background:var(--landing-accent-highlight)}
.landing-hx-week button[aria-pressed="true"]{background:color-mix(in srgb,var(--landing-accent-link) 16%,var(--l-panel));
  border-color:var(--landing-accent-link);color:var(--l-head)}
.landing-hx-agenda{display:grid;gap:var(--space-landing-hx-agenda-gap);min-height:62px;margin:0;padding:0;list-style:none}
.landing-hx-when,.landing-hx-empty{color:var(--l-text-dim);font-size:var(--text-landing-ws-small);font-weight:650}
.landing-feature-calendar-item{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:var(--space-landing-feature-day-item);border-left:3px solid var(--landing-accent-link);
  border-radius:var(--radius-landing-feature-day-item);background:var(--l-panel-2);color:var(--l-head);
  font-size:var(--text-landing-ws-small);font-weight:660}
.landing-feature-calendar-item.is-exam{border-left-color:var(--landing-accent-highlight)}

/* A chapter's words: the page's name, one statement, one supporting line. */
.landing-feature-moment{position:relative;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;min-width:0}
.landing-system-eyebrow{display:block;margin:0 0 10px;color:var(--landing-accent-link);font-size:var(--text-landing-feature-ui);
  font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.landing-feature-moment h3{color:var(--l-head);font-size:var(--text-landing-feature-journey);line-height:1.12;
  letter-spacing:-.03em;text-transform:none;margin:0 0 12px;text-wrap:balance}
.landing-feature-moment h3 em{font-style:normal;color:var(--landing-accent-highlight)}
.landing-feature-moment p{color:var(--l-text-dim);font-size:var(--text-landing-feature-body);line-height:1.62}
.landing-feature-moment small{display:block;padding:var(--space-landing-feature-card-note);
  color:var(--landing-accent-link);font-size:var(--text-landing-feature-ui);font-weight:700;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){
  .landing-cx-view,.landing-cx-tabs button,
  .landing-hx-continue,.landing-hx-week button{transition:none!important}
  .landing-cx.is-resuming .landing-cx-question{animation:none}
}

/* --- the method: process, evidence, conclusion --------------------------- */
/* The claim leads, the four steps support it beneath, and the graph stands
   beside both as the evidence. Read left to right: what we believe, how the
   product acts on it, what that does to forgetting. */
.landing-why{display:grid;margin:0 auto;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  grid-template-areas:"conclusion graph" "process graph";
  column-gap:var(--space-landing-why-column-gap);row-gap:var(--space-landing-why-row-gap);
  justify-content:space-between;align-items:start}
.landing-why-figure{grid-area:graph;align-self:center;justify-self:end;width:100%;max-width:var(--size-landing-why-figure);
  margin:0;background:transparent;border:0;padding:0}
.landing-why-conclusion{grid-area:conclusion;max-width:560px}
/* The retention claim speaks at the page's section scale: at 47px over three
   lines it was the second-largest type on the page and, with the band's
   saturated ground, outweighed the evidence it reinforces. */
.landing-why-conclusion h2{font-size:var(--text-landing-section);line-height:1.08;
  letter-spacing:-.038em;margin:0;text-wrap:balance}
/* The conclusion is its own line, so the claim never breaks mid-thought;
   it is the line the student would highlight. */
.landing-why-conclusion h2 em{display:inline}
.landing-curve{width:100%;height:auto;display:block}
.landing-why-section .landing-curve-fill-stop{stop-color:var(--landing-ink-line)}
.landing-why-section .landing-curve-grid{stroke:color-mix(in srgb,var(--why-ink) 24%,transparent)}
.landing-why-section .landing-curve-axis{stroke:color-mix(in srgb,var(--why-ink) 54%,transparent)}
.landing-why-section .landing-curve-line{stroke:var(--why-ink)}
.landing-why-section .landing-curve-ghost{stroke:var(--why-ink);opacity:.14}
.landing-why-section .landing-curve-end{fill:var(--why-ink)}
.landing-why-section .landing-curve-label{fill:var(--why-ink)}
.landing-why-section .landing-curve-review-stem{stroke:var(--why-accent)}
.landing-why-section .landing-curve-review-halo{fill:var(--why-accent)}
/* Gold alone is too pale to read on the graph paper; the ink outline
   carries the mark, the gold says what it is. */
.landing-why-section .landing-curve-review-point{fill:var(--why-accent);stroke:var(--why-ink);stroke-width:1.2}
.landing-why-section .landing-curve-review-core{fill:var(--why-field)}
.landing-why-section .landing-curve-measure-drop,.landing-why-section .landing-curve-measure-ring,
.landing-why-section .landing-curve-measure-tick{stroke:var(--why-ink)}
.landing-why-section .landing-curve-measure-point{fill:var(--why-ink)}
/* THE RETENTION STORY (7.24). One clock, --story, runs 0 -> 1 across the
   telling; every part below derives its progress from it with a clamp, so
   the curve, the events and the step marks cannot fall out of step.
   The ladder, as fractions of the clock:

     .00-.08  LEARN lights          .02-.22  the first, steepest decay
     .22-.30  PRACTICE lights       .22-.32  recovery rises;  .28-.42  decay
     .42-.50  ASSESS lights         .42-.53  a reading is taken off the curve
                                    .52-.60  the decay goes on from the reading
     .60-.68  REVIEW lights         .60-.70  recovery rises;  .66-.86  flattest decay
     .86-.91  the endpoint settles

   The headline is not on the clock: the claim is read first and never waits.

   At rest (and with reduced motion, and without JS) --story is 1: the
   finished graph. */
@property --story{syntax:"<number>";inherits:true;initial-value:1}
.landing-why-section{
  --k-learn:clamp(0,var(--story) / .08,1);
  --k-d1:clamp(0,(var(--story) - .02) / .2,1);
  --k-practice:clamp(0,(var(--story) - .22) / .08,1);
  --k-rec1-stem:clamp(0,(var(--story) - .22) / .04,1);
  --k-rec1:clamp(0,(var(--story) - .24) / .08,1);
  --k-d2a:clamp(0,(var(--story) - .28) / .14,1);
  --k-assess:clamp(0,(var(--story) - .42) / .08,1);
  --k-drop:clamp(0,(var(--story) - .42) / .05,1);
  --k-ring:clamp(0,(var(--story) - .45) / .08,1);
  --k-tick:clamp(0,(var(--story) - .46) / .04,1);
  --k-d2b:clamp(0,(var(--story) - .52) / .08,1);
  --k-review:clamp(0,(var(--story) - .6) / .08,1);
  --k-rec2-stem:clamp(0,(var(--story) - .6) / .04,1);
  --k-rec2:clamp(0,(var(--story) - .62) / .08,1);
  --k-d3:clamp(0,(var(--story) - .66) / .2,1);
  --k-end:clamp(0,(var(--story) - .86) / .05,1)}
.landing-why-section.is-motion-ready{--story:0}
.landing-why-section.is-motion-ready.is-drawn{animation:landingStory 3600ms linear both}
@keyframes landingStory{from{--story:0}to{--story:1}}

.landing-curve-line{--k:1;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k));
  opacity:clamp(0,var(--k) * 40,1)}
.landing-curve-line[data-segment="learn"]{--k:var(--k-d1)}
.landing-curve-line[data-segment="practice"]{--k:var(--k-d2a)}
.landing-curve-line[data-segment="assess"]{--k:var(--k-d2b)}
.landing-curve-line[data-segment="review"]{--k:var(--k-d3)}
/* The area under the curve is uncovered at the line's own x, so it never
   shows forgetting that has not been drawn: 74, 55.25, 62.75 and 126 units
   of the 318-unit run. The first decay starts almost vertical, so its x
   lags its drawn length; squaring its progress keeps the fill behind it. */
.landing-curve-fill{clip-path:inset(0 calc((1 - (74 * var(--k-d1) * var(--k-d1) + 55.25 * var(--k-d2a)
  + 62.75 * var(--k-d2b) + 126 * var(--k-d3)) / 318) * 100%) 0 0)}
.landing-curve-end,.landing-curve-review circle,.landing-curve-measure circle{transform-box:fill-box;transform-origin:center}
.landing-curve-review-stem{transform-box:fill-box;transform-origin:bottom}
.landing-curve-measure-drop{transform-box:fill-box;transform-origin:top}
/* A recovery: the stem rises, then the point arrives with a small overshoot
   and its halo swells and settles. */
.landing-curve-review[data-event="practice"]{--k-stem:var(--k-rec1-stem);--k:var(--k-rec1)}
.landing-curve-review[data-event="review"]{--k-stem:var(--k-rec2-stem);--k:var(--k-rec2)}
.landing-curve-review-stem{transform:scaleY(var(--k-stem));opacity:calc(.7 * clamp(0,var(--k-stem) * 20,1))}
.landing-curve-review-point,.landing-curve-review-core{opacity:clamp(0,var(--k) * 3,1);
  transform:scale(calc(.4 + .6 * var(--k) + .3 * sin(var(--k) * 3.1416)))}
.landing-curve-review-halo{opacity:calc(.24 * var(--k) + .3 * sin(var(--k) * 3.1416));
  transform:scale(calc(.4 + .6 * var(--k) + .9 * sin(var(--k) * 3.1416)))}
/* A measurement: nothing is lifted. The drop falls to the axis, a reading
   ring closes onto the curve, and the axis takes a tick. */
.landing-curve-measure-drop{transform:scaleY(var(--k-drop));opacity:clamp(0,var(--k-drop) * 20,1)}
.landing-curve-measure-ring{opacity:var(--k-ring);transform:scale(calc(2.2 - 1.2 * var(--k-ring)))}
.landing-curve-measure-point{opacity:clamp(0,var(--k-ring) * 3,1)}
.landing-curve-measure-tick{opacity:var(--k-tick)}
.landing-curve-end{opacity:var(--k-end);transform:scale(calc(.72 + .28 * var(--k-end) + .2 * sin(var(--k-end) * 3.1416)))}
/* The list is dim until its step is reached, and the step being reached is
   briefly the brightest thing in the list. */
.landing-reason{--k:1}
.landing-reason:nth-child(1){--k:var(--k-learn)}
.landing-reason:nth-child(2){--k:var(--k-practice)}
.landing-reason:nth-child(3){--k:var(--k-assess)}
.landing-reason:nth-child(4){--k:var(--k-review)}
/* The words are always there to be read; the story is told by the marks.
   Each step's object wakes as its event happens on the curve. */
.landing-reason-icon{opacity:calc(.45 + .55 * var(--k));transform:scale(calc(1 + .14 * sin(var(--k) * 3.1416)))}
/* After its telling the graph is still. A breathing point once kept it
   from being "a dead picture"; a finished chart that keeps moving competes
   with the reading beside it and teaches nothing new. */
.landing-why-figure figcaption{margin-top:12px;color:var(--l-text-dim);font-size:var(--primitive-font-size-13px);
  line-height:1.52;font-style:italic}
.landing-reasons{grid-area:process;list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-landing-why-steps-gap);
  background:none;border:0;overflow:visible}
.landing-reason{display:flex;gap:var(--space-landing-why-step-mark-gap);background:transparent;padding:0;position:relative}
/* Object, not badge -- see .study-mark-icon. No tint, no ring, no tile. */
.landing-reason-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;color:var(--tint)}
.landing-reason-icon svg{width:21px;height:21px}
.landing-reason-icon .study-glyph{width:42px;height:42px}
.landing-reason p{color:var(--l-text-dim);font-size:var(--primitive-font-size-14px);line-height:1.56}
.landing-why-section .landing-reason{--tint:var(--why-ink)}

/* --- student proof ------------------------------------------------------ */
/* One card for every student. Neutral mark, neutral initials, one hairline;
   the only colour is the product blue, and only on the card being handled.
   The arrows stand at the rail's two ends. The rail fades out -- never
   crops -- on a side that still has quotes behind it, so the partly shown
   card reads as "more" instead of as a layout mistake. */
.landing-testimonials{padding-top:var(--landing-section-block-start);padding-bottom:0}
.landing-testimonials .landing-section-head{margin:0 0 clamp(20px,2.6vh,28px)}
.landing-testimonials .landing-section-head h2{margin-bottom:0}
.landing-testimonial-shell{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;
  gap:var(--space-landing-testimonial-controls-gap);margin-inline:calc(-1 * var(--space-landing-testimonial-arrow-reach))}
.landing-testimonial-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--l-line);border-radius:50%;background:var(--l-panel);color:var(--l-head);
  box-shadow:var(--elev-1);cursor:pointer;
  transition:transform 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease,opacity 160ms ease}
.landing-testimonial-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.landing-testimonial-arrow:hover:not(:disabled){transform:translateY(-2px);
  border-color:var(--landing-accent-link);color:var(--landing-accent-link);box-shadow:var(--elev-2)}
.landing-testimonial-arrow:focus-visible,.landing-testimonial-rail:focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:3px}
.landing-testimonial-arrow:disabled{opacity:.35;cursor:default;box-shadow:none}
.landing-testimonial-rail{display:flex;gap:var(--space-landing-testimonial-rail-gap);min-width:0;
  overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;cursor:grab;
  padding:var(--space-landing-testimonial-rail-inset);
  -webkit-mask-image:linear-gradient(90deg,transparent,currentColor var(--landing-rail-fade),currentColor calc(100% - var(--landing-rail-fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,currentColor var(--landing-rail-fade),currentColor calc(100% - var(--landing-rail-fade)),transparent)}
.landing-testimonial-rail.is-at-start{
  -webkit-mask-image:linear-gradient(90deg,currentColor calc(100% - var(--landing-rail-fade)),transparent);
  mask-image:linear-gradient(90deg,currentColor calc(100% - var(--landing-rail-fade)),transparent)}
.landing-testimonial-rail.is-at-end{
  -webkit-mask-image:linear-gradient(90deg,transparent,currentColor var(--landing-rail-fade));
  mask-image:linear-gradient(90deg,transparent,currentColor var(--landing-rail-fade))}
.landing-testimonial-rail.is-at-start.is-at-end{-webkit-mask-image:none;mask-image:none}
.landing-testimonial-rail::-webkit-scrollbar{display:none}
.landing-testimonial-dots{display:none}
.landing-testimonial-dot{display:grid;place-items:center;width:var(--size-action-touch);height:var(--size-action-touch);
  padding:0;border:0;background:transparent;cursor:pointer}
.landing-testimonial-dot span{display:block;width:var(--size-landing-testimonial-dot);height:var(--size-landing-testimonial-dot);
  border-radius:var(--radius-landing-testimonial-dot);background:color-mix(in srgb,var(--l-head) 22%,transparent);
  transition:width 180ms cubic-bezier(.22,.61,.36,1),background-color 180ms ease}
.landing-testimonial-dot[aria-current="true"] span{width:var(--size-landing-testimonial-dot-current);background:var(--l-head)}
.landing-testimonial-dot:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-6px;border-radius:var(--radius-landing-testimonial-dot)}
.landing-testimonial-rail.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.landing-testimonial-card{position:relative;display:flex;flex:0 0 var(--size-landing-testimonial-card);flex-direction:column;
  min-width:0;min-height:250px;scroll-snap-align:start;margin:0;
  padding:var(--space-landing-testimonial-card);overflow:hidden;
  border:1px solid var(--l-line-soft);border-radius:var(--radius-landing-testimonial-card);
  background:var(--l-panel);
  box-shadow:var(--elev-1);
  transform:translateY(0);
  transition:transform 160ms cubic-bezier(.22,.61,.36,1),border-color 160ms ease-out,
    box-shadow var(--theme-paint-duration,160ms) ease-out}
.landing-testimonial-quote-mark{display:block;width:28px;height:21px;
  fill:color-mix(in srgb,var(--landing-accent-link) 42%,transparent);transform:translateY(0);transition:transform 160ms ease-out,fill 160ms ease-out}
.landing-testimonial-card>p{margin:18px 0 24px!important;
  color:var(--l-head);font-size:var(--text-landing-testimonial-quote);font-weight:580;
  letter-spacing:-.012em;line-height:1.55;text-wrap:pretty}
.landing-testimonial-person{display:flex;align-items:center;gap:var(--space-landing-testimonial-person-gap);
  margin-top:auto;padding:var(--space-landing-testimonial-person);border-top:1px solid var(--l-line-soft)}
.landing-testimonial-avatar{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:color-mix(in srgb,var(--landing-accent-link) 10%,var(--l-panel));color:var(--landing-accent-link);
  border:1px solid color-mix(in srgb,var(--landing-accent-link) 22%,transparent);
  font-size:var(--text-landing-testimonial-avatar);font-weight:760;letter-spacing:.03em}
.landing-testimonial-who{display:grid;gap:var(--space-landing-testimonial-who-gap);min-width:0}
.landing-testimonial-person cite{color:var(--l-head);font-size:var(--text-landing-testimonial-name);font-style:normal;font-weight:720}
.landing-testimonial-person small{color:var(--l-text-dim);font-size:var(--text-landing-testimonial-role)}
/* Launch borrows the same card geometry without quote or identity affordances. */
.landing-launch-step{display:block;min-height:var(--size-landing-launch-step);color:var(--l-text-dim);
  font-size:var(--text-landing-testimonial-role);font-weight:720}
.landing-launch-detail{color:var(--l-text-dim);font-size:var(--text-landing-testimonial-name);line-height:1.55}

/* THE OFFER (one panel). The page's only panel outside the preview, because
   it is the one thing being sold: what the plan is on the left, what it costs
   and the key that accepts it on the right, one hairline-free white object
   at the product's card elevation. */
.landing-pricing{padding-top:var(--space-landing-pricing-block);padding-bottom:var(--space-landing-pricing-block-end)}
.landing-pricing-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  max-width:var(--size-landing-pricing-card);margin-inline:auto;gap:var(--space-landing-pricing-gap)}
/* The offer reads down one column, in the hero's order: the price, its
   terms, then the key that accepts them, as wide as the price above it so
   the column is one object rather than three things in a row. */
/* The plan is a label: white, the brand across its head over one firm rule,
   set down on the paper at a slight turn like a thing on a desk. */
.landing-pricing-deal{display:grid;justify-items:stretch;gap:var(--space-landing-pricing-deal-gap);min-width:var(--size-landing-pricing-deal);
  max-width:var(--size-landing-pricing-deal-max);padding:var(--space-landing-pricing-label);border-radius:var(--radius-landing-pricing-label);
  background:var(--l-panel);box-shadow:var(--elev-3);transform:rotate(var(--landing-pricing-label-turn))}
.landing-pricing-brand{display:flex;align-items:center;gap:var(--space-landing-ws-head-gap);margin:calc(-1 * var(--space-landing-pricing-label-head)) 0 0;
  padding-bottom:var(--space-landing-pricing-label-head);border-bottom:2px solid var(--l-head);color:var(--l-head);font-size:var(--text-landing-pricing-brand)}
.landing-pricing-brand img{width:26px;height:26px}
.landing-pricing-brand b{font-weight:850;letter-spacing:-.01em}
.landing-pricing .landing-section-head{margin:0;max-width:420px}
.landing-pricing .landing-section-head h2{font-size:var(--text-landing-pricing-heading);margin:0 0 10px}
.landing-pricing-rate{display:flex;align-items:baseline;gap:var(--space-landing-pricing-rate-gap);color:var(--l-head)}
.landing-pricing-rate b{font-size:var(--text-landing-pricing-rate);letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.landing-pricing-rate span{color:var(--l-text-dim);font-size:var(--text-landing-pricing-detail);font-weight:620}
.landing-pricing-detail{margin:var(--space-landing-pricing-detail)!important;color:var(--l-text-dim);
  font-size:var(--text-landing-pricing-detail);font-weight:650}
.landing-pricing-action{display:grid;justify-items:stretch;gap:var(--space-landing-pricing-action-gap)}
.landing-pricing-line .landing-cta{min-height:50px;border-radius:var(--radius-action-hero);font-size:var(--text-landing-pricing-cta)}
/* The questions are reference, not pitch: the page changes chapter here by
   settling one measured step deeper -- the same derived entry step the light
   chapters use -- across the full width. The step is laid in over a long,
   soft run rather than at an edge, so it reads as the ground changing under
   the reader, not as a band being placed on the page. */
.landing-faq{padding-top:var(--space-landing-faq-block-start);
  background:linear-gradient(180deg,var(--landing-paper) 0,color-mix(in srgb,var(--landing-paper-rule) 45%,var(--landing-paper)) var(--size-landing-faq-settle))}
.landing-faq .landing-section-head h2{font-size:var(--text-landing-faq-heading)}

/* Credibility motion: one entrance in reading order, then stable prose. The
   cards never auto-slide. On a precise pointing device only, depth answers the
   visitor locally without shifting the composition laterally. */
.landing-testimonials.is-motion-ready .landing-section-head,
.landing-testimonials.is-motion-ready .landing-testimonial-card{
  opacity:0;transform:translateY(18px);filter:blur(2px)}
.landing-testimonials.is-motion-ready.is-revealed .landing-section-head,
.landing-testimonials.is-motion-ready.is-revealed .landing-testimonial-card{
  opacity:1;transform:translateY(0);filter:none}
.landing-testimonials.is-motion-ready .landing-section-head{
  transition:opacity 240ms ease-out,transform 260ms cubic-bezier(.22,.61,.36,1),filter 240ms ease-out}
.landing-testimonials.is-motion-ready .landing-testimonial-card{
  transition:opacity 280ms ease-out,transform 300ms cubic-bezier(.22,.61,.36,1),
    filter 280ms ease-out,box-shadow var(--theme-paint-duration,160ms) ease-out,border-color var(--theme-paint-duration,160ms) ease-out}
.landing-testimonials.is-motion-ready .landing-testimonial-card:nth-child(1){transition-delay:65ms}
.landing-testimonials.is-motion-ready .landing-testimonial-card:nth-child(2){transition-delay:135ms}
.landing-testimonials.is-motion-ready .landing-testimonial-card:nth-child(3){transition-delay:185ms}
@media (hover:hover) and (pointer:fine){
  .landing-testimonials.is-revealed .landing-testimonial-card:hover{
    transform:translateY(-3px);border-color:color-mix(in srgb,var(--landing-accent-link) 40%,transparent);
    box-shadow:var(--elev-3)}
  .landing-testimonial-card:hover .landing-testimonial-quote-mark{transform:translateY(-2px);fill:var(--landing-accent-link)}
}

/* --- questions ---------------------------------------------------------- */
/* No container: the field already holds the set. One hairline above and
   below closes it, the product's line between questions divides it. */
.landing-faq-list{display:grid;gap:0;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--l-line);border-bottom:1px solid var(--l-line)}
.landing-faq-item{background:transparent;border-top:1px solid var(--l-line)}
.landing-faq-item:nth-child(-n+2){border-top:0}
.landing-faq-item:nth-child(even){border-left:1px solid var(--l-line)}
.landing-faq-item summary{cursor:pointer;list-style:none;padding:var(--primitive-spacing-17px) var(--primitive-spacing-19px);font-weight:660;
  color:var(--l-head);font-size:var(--primitive-font-size-14-5px);display:flex;align-items:flex-start;gap:var(--primitive-spacing-12px)}
.landing-faq-item summary::-webkit-details-marker{display:none}
.landing-faq-mark{position:relative;flex:0 0 13px;height:13px;margin-top:4px}
.landing-faq-mark:before,.landing-faq-mark:after{content:"";position:absolute;
  background:var(--landing-accent-link);border-radius:var(--primitive-radius-1px);transition:transform .18s ease}
.landing-faq-mark:before{left:0;top:6px;width:13px;height:1.8px}
.landing-faq-mark:after{left:5.6px;top:0;width:1.8px;height:13px}
.landing-faq-item[open] .landing-faq-mark:after{transform:scaleY(0)}
.landing-faq-item summary:hover{background:var(--l-panel-2)}
.landing-faq-answer{overflow:hidden}
.landing-faq-item p{padding:0 var(--primitive-spacing-19px) var(--primitive-spacing-19px) var(--primitive-spacing-43px);color:var(--l-text-dim);font-size:var(--primitive-font-size-14px);line-height:1.58}
.landing-faq .landing-section-head a{color:var(--landing-accent-highlight)}
.landing-faq>.landing-section-lede{margin-top:16px!important}
/* The way to more answers is the page's own link, not the browser's. */
.landing-faq>.landing-section-lede a{color:var(--landing-accent-link);font-weight:700;text-decoration:none;
  border-radius:var(--radius-landing-ws-node)}
.landing-faq>.landing-section-lede a:hover{text-decoration:underline;text-underline-offset:3px}
.landing-faq>.landing-section-lede a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* A finger is not a pointer. On touch screens every landing control answers
   across at least a 44px band -- by an invisible extension of the control
   where it sits in open space, so nothing is drawn bigger; the lecture's tabs
   sit on the card's own rule, so they simply grow to 44px. */
@media (pointer:coarse){
  body.landing-environment>header #nav>button,body.landing-environment>header .landing-sign-in,
  body.landing-environment>header .landing-header-cta{position:relative}
  body.landing-environment>header #nav>button::after,body.landing-environment>header .landing-sign-in::after,
  body.landing-environment>header .landing-header-cta::after{
    content:"";position:absolute;inset:calc((44px - 100%) / -2) 0;min-height:44px;pointer-events:auto}
  body.landing-environment>header button.landing-sign-in.landing-sign-in{overflow:visible}
  .landing-cx-tabs button{min-height:44px}
  .landing-hx-week button::before{content:"";position:absolute;inset:-7px -2px}
  body.landing-environment>header .landing-header-language select{min-height:44px;margin-block:-4px}
  .landing-faq>.landing-section-lede a{display:inline-block;padding-block:var(--space-landing-touch-link);margin-block:calc(-1 * var(--space-landing-touch-link))}
}

/* --- the foot of the overview --------------------------------------------
   The ink the legal row stands on rises into the page as the closing
   bookend: the hero's silhouette mirrored (7.22.2), painted rather than
   masked because the ink here is one flat ground with no gradient to band --
   not a hard edge, and not a pale-to-navy fade, which would read as a
   smudge. Inside it
   each side has one job: the mark with the legal links beneath it on the
   left, the places PharmRecall lives outside the browser on the right. The
   mark keeps its own clear space and is never set beside the word. Both
   entries are one line of quiet ink on ink at the same weight -- they are
   directions, not offers, and gold stays with the offer. */
.landing-colophon{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-landing-colophon-gap);
  padding:var(--space-landing-colophon-block-start) var(--landing-gutter) var(--space-landing-colophon-block-end)}
.landing-colophon:before{content:"";position:absolute;z-index:0;left:0;right:0;
  top:calc(-1 * var(--landing-seam-depth));height:var(--landing-seam-depth);
  background:var(--outer-canvas-bg);pointer-events:none;
  -webkit-mask:var(--visual-landing-footer-seam-mask) 0 0/100% 100% no-repeat;
  mask:var(--visual-landing-footer-seam-mask) 0 0/100% 100% no-repeat}
.landing-colophon>*{position:relative;z-index:1}
.landing-colophon-mark{display:block;width:32px;height:32px}
.landing-colophon-elsewhere{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-landing-colophon-entries-row) var(--space-landing-colophon-entries)}
.landing-colophon-social,.landing-app-soon{display:inline-flex;align-items:center;gap:var(--space-landing-colophon-glyph);min-height:var(--size-action-touch);
  color:var(--visual-auth-site-footer-text);font-size:var(--text-landing-colophon-entry);font-weight:600;line-height:1.2}
.landing-colophon-social{text-decoration:none;transition:color .16s ease}
.landing-colophon-social:hover{color:var(--visual-auth-site-footer-text-hover)}
.landing-colophon-social:focus-visible{outline:2px solid var(--visual-auth-site-footer-text-hover);outline-offset:2px;border-radius:var(--radius-action-compact)}
.landing-colophon svg{flex:none}
.landing-app-soon .control-glyph{width:var(--size-landing-colophon-glyph);height:var(--size-landing-colophon-glyph)}
/* Until the listing is public the slot is a statement, not a control: no
   pointer, no hover, nothing that pretends to be Apple's badge. */
.landing-app-soon-note{color:var(--visual-auth-site-footer-text-939798e7);font-weight:500}
.landing-app-soon-note:before{content:"\00b7";margin-right:var(--space-landing-colophon-glyph)}
/* Apple's artwork, unmodified, at Apple's onscreen minimum of 40px. */
.landing-app-store{display:inline-block;border-radius:var(--radius-action-compact)}
.landing-app-store img{display:block;height:40px;width:auto}
.landing-app-store:focus-visible{outline:2px solid var(--visual-auth-site-footer-text-hover);outline-offset:2px}
/* The legal row is the left column's second line. */
body.auth-environment.landing-environment .site-footer{justify-content:flex-start;
  padding-top:var(--space-landing-colophon-legal-gap)}
@media(max-width:760px){
  .landing-colophon{flex-direction:column;align-items:flex-start;gap:var(--space-landing-colophon-stack);padding-top:var(--space-landing-colophon-block-start-compact)}
  .landing-colophon-elsewhere{flex-direction:column;align-items:flex-start;gap:0}
  body.auth-environment.landing-environment .site-footer{padding-top:var(--space-landing-colophon-legal-gap-compact)}
}

/* The route back to the overview from any auth pane. */
.auth-overview-link{justify-self:center;font-size:var(--primitive-font-size-13-5px);font-weight:600;color:var(--text-secondary)}
.auth-overview-link:hover{color:var(--action-primary-bg)}
.landing-plan-pending{display:block;margin-top:-8px}

@media(max-width:959px){
  .landing-why{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"conclusion" "graph" "process";max-width:620px}
  .landing-why-figure{max-width:520px}
}
@media(max-width:900px){
  .landing-hero{grid-template-columns:minmax(0,1fr);
    background:var(--visual-landing-hero-surface-ebcee43b)}
  body.auth-environment.landing-environment{
    --size-landing-testimonial-card:calc((100% - var(--space-landing-testimonial-rail-gap)) / 1.5)}
  /* The number and the action share a second line under the statement. */
  .landing-pricing-line{grid-template-columns:minmax(0,1fr);row-gap:var(--space-landing-pricing-mobile-gap)}
  .landing-faq-list{grid-template-columns:minmax(0,1fr)}
  .landing-faq-item:nth-child(n){border-left:0}
  .landing-faq-item:nth-child(n+2){border-top:1px solid var(--l-line)}
  .landing-break{display:none}
  .landing .landing-cta{min-height:51px;padding:0 var(--primitive-spacing-28px);border-radius:var(--radius-action-hero);font-size:var(--primitive-font-size-16px)}
}
@media(max-width:760px){
  .landing-feature-copy h3{font-size:var(--text-landing-feature-mobile-heading)}
  body.auth-environment.landing-environment{--landing-gutter:20px;
    --size-landing-testimonial-card:100%}
  .landing-cx,.landing-hx{grid-template-columns:minmax(0,1fr)}
  .landing-reasons{grid-template-columns:minmax(0,1fr)}
  .landing-cx-tabs .mode-nav-mark,.landing-cx-tabs .activity-mark{display:none}
  .landing-section,.landing-hero{padding-left:var(--primitive-spacing-20px);padding-right:var(--primitive-spacing-20px)}
  .landing-why-section{padding-top:var(--primitive-spacing-68px)}
  .landing-narrative-beat{margin-bottom:clamp(38px,6vh,52px)}
  .landing-narrative-beat h2{font-size:var(--primitive-font-size-clamp-28px-8-5vw-38px)}
  /* A PHONE SWIPES, ONE QUOTE PER PAGE. The rail runs edge to edge and its
     own padding is the page gutter, so every card -- the first, the middle,
     the last -- settles exactly on the page's content edges with its
     neighbours peeking in at the screen edges. Nothing fades over a card:
     the peek is the "there is more" signal. The arrows were half buried
     under the rail's shadow room, so they are gone here; dots say where you
     are and take you anywhere in one tap. */
  .landing-testimonial-shell{display:block;margin-inline:0}
  .landing-testimonial-arrow{display:none}
  .landing-testimonial-rail,.landing-testimonial-rail.is-at-start,.landing-testimonial-rail.is-at-end{
    margin-inline:calc(-1 * var(--landing-gutter));padding:var(--space-landing-testimonial-rail-inset-compact);
    padding-inline:var(--landing-gutter);scroll-padding-inline:var(--landing-gutter);
    gap:var(--space-landing-testimonial-rail-gap-compact);-webkit-mask-image:none;mask-image:none}
  .landing-testimonial-card{scroll-snap-align:center;scroll-snap-stop:always}
  .landing-testimonial-dots{display:flex;justify-content:center}
  .landing-testimonial-card{padding:var(--space-landing-testimonial-mobile-card-padding)}
  .landing-pricing-deal{min-width:0}
  /* The product's session chrome -- the Learn / Activities / Assessments
     row, the count and its segments -- means nothing to a visitor on a
     phone and stacked a third band above the card. The card is the demo. */
  /* Two definitions show the idea on a phone as well as three. */
  .landing-cx-definitions div:nth-child(n+3){display:none}
  /* ONE SWIPEABLE ROW OF SKILLS. A phone has no room for six names beside
     the stage, and a 2 x 3 grid of them stacked a second block of choices
     above the practice card. The skills become one row of objects that runs
     to the screen's edges and scrolls sideways; the next skill peeking in at
     the edge is the "there are more" signal. The chosen one is scrolled into
     view as it is chosen. */
  .landing-drill-tabs{display:flex;gap:var(--space-landing-drill-tab-gap);overflow-x:auto;overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(-1 * var(--landing-gutter));
    padding:var(--space-landing-drill-row-pad) var(--landing-gutter);scroll-padding-inline:var(--landing-gutter)}
  .landing-drill-tabs::-webkit-scrollbar{display:none}
  /* A name ending exactly at the screen's edge reads as the end of the row,
     so the edge that hides more skills fades out (landingDrillRowEdges). */
  .landing-drill-tabs[data-more="end"]{-webkit-mask-image:var(--visual-landing-drill-row-mask-end);mask-image:var(--visual-landing-drill-row-mask-end)}
  .landing-drill-tabs[data-more="start"]{-webkit-mask-image:var(--visual-landing-drill-row-mask-start);mask-image:var(--visual-landing-drill-row-mask-start)}
  .landing-drill-tabs[data-more="both"]{-webkit-mask-image:var(--visual-landing-drill-row-mask-both);mask-image:var(--visual-landing-drill-row-mask-both)}
  .landing-drill-tab{flex:none;scroll-snap-align:start;padding:var(--space-landing-drill-tab-mobile);--space-landing-drill-tab-gap-inline:9px}
  .landing-drill-name{font-size:var(--text-landing-drill-name-mobile);line-height:1.2;white-space:nowrap}
  .landing-drill-icon{flex-basis:28px;width:28px;height:28px}
  .landing-drill-icon .study-glyph{width:28px;height:28px}
  .landing .landing-cta{width:auto;min-height:49px;padding:0 var(--primitive-spacing-26px);border-radius:var(--radius-action-hero);
    font-size:var(--primitive-font-size-15-5px)}
  .landing-demo-entry{flex-wrap:wrap}
  .landing-demo-entry input{width:100%}
}
@media(max-width:420px){
  body.landing-environment>header .landing-header-actions{gap:var(--primitive-spacing-6px)}
  body.landing-environment>header .landing-sign-in{padding:var(--primitive-spacing-8px) var(--primitive-spacing-9px)}
  body.landing-environment>header .landing-header-actions .landing-header-cta{
    min-height:38px;padding:0 var(--primitive-spacing-12px);font-size:var(--primitive-font-size-13px)}
}
@media(max-width:640px){
  body.landing-environment>header{
    padding-top:calc(var(--space-landing-header-block) + env(safe-area-inset-top))}
  /* The fixed header grows into the status-bar safe area in the native app.
     Give the hero the same inset to preserve its blue gap below the header. */
  .landing-hero{
    padding-top:calc(var(--space-landing-hero-block-start) + env(safe-area-inset-top))}
  body.landing-environment>header .landing-header-actions .landing-header-language{display:none}
}
@media (prefers-reduced-motion:reduce){
  .landing-drill-tab,.landing-faq-mark:before,.landing-faq-mark:after,
  .landing .landing-cta,.landing-cta-label,.landing-cta-arrow{transition:none}
  .landing .landing-cta:hover,.landing .landing-cta:active{transform:none}
  .landing .landing-cta[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:3px;transform:none;filter:none}
  .landing .landing-cta[aria-busy="true"]:after{animation:none}
  .landing-testimonials .landing-section-head,.landing-testimonials .landing-testimonial-card{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .landing-testimonial-rail{scroll-behavior:auto}
  .landing-testimonial-arrow,.landing-testimonial-dot span{transition:none}
  .landing-testimonial-quote-mark{transform:none!important;transition:none!important}
  /* The finished graph, still: the clock is held at its end. */
  .landing-why-section,.landing-why-section.is-motion-ready{--story:1;animation:none!important}
  .landing-curve-review-halo{animation:none!important}
}
@media (forced-colors:active){
  .landing .landing-cta[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:3px;transform:none;filter:none;box-shadow:none}
}

/* ---- announcements ------------------------------------------------------
   One channel, three weights. The quiet card is the default: docked, not
   modal, and never in the way of the workspace. The dialog is reserved for
   news the student has to see, and reuses the shared app dialog so focus,
   inertness, and reduced motion behave exactly as they do everywhere else. */
.announcement-eyebrow{margin:0 0 6px;color:var(--text-secondary);font-size:var(--primitive-font-size-11px);font-weight:680;
  letter-spacing:.09em;text-transform:uppercase}
.announcement-actions{display:flex;gap:var(--primitive-spacing-9px);justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
.announcement-cta{display:inline-flex;align-items:center;justify-content:center;padding:var(--primitive-spacing-10px) var(--primitive-spacing-18px);
  border:var(--visual-announcement-cta-outline);border-radius:var(--primitive-radius-6px);background:var(--action-primary-bg-hover);color:var(--visual-announcement-cta-text);
  font-size:var(--primitive-font-size-14px);font-weight:650;text-decoration:none;line-height:1.35}
.announcement-cta:hover{background:var(--action-primary-bg-hover);border-color:var(--action-primary-bg);color:var(--on-accent)}
.announcement-link{color:var(--action-primary-bg);font-weight:650;text-decoration:none}
.announcement-link:hover{text-decoration:underline}

.announcement-dialog{position:relative;width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;
  padding:var(--primitive-spacing-26px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px);background:var(--surface-panel);color:var(--text-primary);
  box-shadow:var(--elev-4)}
.announcement-dialog h2{margin:0 0 12px;font-size:var(--primitive-font-size-22px);line-height:1.2}
.announcement-dialog p{margin:0 0 10px;color:var(--text-secondary);line-height:1.65}
.announcement-dialog p.announcement-eyebrow{color:var(--text-secondary)}
.announcement-dialog.is-critical{border-color:var(--line-strong);border-top:3px solid var(--warning-fg)}

/* The quiet card. Docked bottom-right on a workspace-width screen, and a
   full-width sheet once the workspace loses its rails. */
.announcement-note{position:fixed;right:22px;bottom:22px;z-index:19;display:flex;gap:var(--primitive-spacing-10px);
  width:min(380px,calc(100vw - 44px));padding:var(--primitive-spacing-18px) var(--primitive-spacing-18px) var(--primitive-spacing-16px);border:1px solid var(--border-subtle);
  border-radius:var(--primitive-radius-12px);background:var(--surface-panel);color:var(--text-primary);
  box-shadow:var(--elev-4);
  opacity:0;transform:translateY(14px);transition:opacity .26s ease,transform .3s cubic-bezier(.2,.82,.28,1)}
.announcement-note.is-open{opacity:1;transform:none}
.announcement-note.is-closing{opacity:0;transform:translateY(8px)}
.announcement-note-content{min-width:0}
.announcement-note h2{margin:0 0 6px;font-size:var(--primitive-font-size-16px);line-height:1.25}
.announcement-note p{margin:0 0 8px;color:var(--text-secondary);font-size:var(--primitive-font-size-13-5px);line-height:1.6}
.announcement-note p:last-child{margin-bottom:0}
.announcement-note-actions{margin-top:10px}
.announcement-note-close{flex:0 0 auto;align-self:flex-start;margin:-4px -4px 0 0;border:0;background:transparent;
  color:var(--text-secondary);font-size:var(--primitive-font-size-22px);line-height:1;cursor:pointer;padding:var(--primitive-spacing-2px) var(--primitive-spacing-6px);border-radius:var(--primitive-radius-6px)}
.announcement-note-close:hover{color:var(--text-primary);background:var(--surface-raised)}

.announcement-history{width:min(560px,100%);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;
  padding:var(--primitive-spacing-26px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px);background:var(--surface-panel);color:var(--text-primary);
  box-shadow:var(--elev-4)}
.announcement-history h2{margin:0 0 16px;font-size:var(--primitive-font-size-22px)}
.announcement-history-list{overflow:auto;margin:0 -4px;padding:0 var(--primitive-spacing-4px)}
.announcement-entry{padding:var(--primitive-spacing-16px) 0;border-top:1px solid var(--border-subtle)}
.announcement-entry:first-child{border-top:0;padding-top:0}
.announcement-entry h3{margin:0 0 6px;font-size:var(--primitive-font-size-15px);line-height:1.3}
.announcement-entry p{margin:0 0 8px;color:var(--text-secondary);font-size:var(--primitive-font-size-13-5px);line-height:1.6}
.announcement-entry p:last-child{margin-bottom:0}
.announcement-entry-meta{display:flex;align-items:center;gap:var(--primitive-spacing-8px);margin:0 0 6px;font-size:var(--primitive-font-size-12px)}
.announcement-entry.is-unread h3{position:relative}
.announcement-entry.is-unread h3:before{content:"";position:absolute;left:-13px;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--action-primary-bg)}
.announcement-chip{padding:var(--primitive-spacing-2px) var(--primitive-spacing-8px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-999px);
  color:var(--text-secondary);font-size:var(--primitive-font-size-11px);font-weight:680;letter-spacing:.04em}
.announcement-chip.is-critical{border-color:var(--warning-fg);color:var(--warning-fg)}
.announcement-empty{margin:0;color:var(--text-secondary);line-height:1.6}

/* Each account-menu destination carries its own unread count. The trigger
   shows their total without changing the account name's color. */
@media(max-width:720px){
  .announcement-note{right:12px;left:12px;bottom:12px;width:auto;
    padding-bottom:calc(var(--primitive-spacing-16px) + env(safe-area-inset-bottom,var(--primitive-spacing-0px)))}
}
@media (prefers-reduced-motion:reduce){
  .announcement-note{transition:opacity .12s linear}
  .announcement-note.is-open{transform:none}
}

/* Course -> Section -> Drugs: the learner-facing curriculum surface. */
.course-card-list{display:grid;gap:var(--primitive-spacing-10px)}
button.course-card{display:flex;align-items:center;justify-content:flex-start;gap:var(--primitive-spacing-14px);
  width:100%;text-align:left;padding:var(--primitive-spacing-16px) var(--primitive-spacing-18px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px);
  background:var(--surface-card);color:inherit;font:inherit;cursor:pointer}
/* The body takes the row, so the badge and the arrow sit at its trailing edge. */
.course-card-body{display:flex;flex-direction:column;gap:var(--primitive-spacing-4px);flex:1 1 auto;min-width:0}
button.course-card:hover .course-study-arrow{transform:translateX(1px)}
.course-card-body b{font-size:var(--primitive-font-size-17px)}
.course-card-body small,.course-section-open small{color:var(--text-secondary)}
.pill.supplied{color:var(--action-primary-bg)}
.course-section-list{display:grid;gap:var(--primitive-spacing-8px)}
.course-section-row{display:flex;align-items:center;gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);
  border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-card)}
.course-section-open{flex:1;display:flex;flex-direction:column;gap:var(--primitive-spacing-2px);text-align:left;
  background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.course-section-open:hover b{color:var(--action-primary-bg)}
.course-study-bar{align-items:center;gap:var(--primitive-spacing-12px);margin-top:16px}
.course-study-bar small{color:var(--text-secondary)}
.course-drug-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--primitive-spacing-6px)}
.course-drug-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);
  border-bottom:1px solid var(--border-subtle)}
.course-drug-list li>span{display:grid;gap:var(--primitive-spacing-2px)}.course-drug-list small{color:var(--text-secondary)}
.course-source-note{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--primitive-spacing-16px);
  margin-bottom:14px;padding:var(--primitive-spacing-12px) var(--primitive-spacing-14px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-raised)}
.course-source-note small{color:var(--text-secondary);text-align:right}
.course-population-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-12px)}
.course-population-card{display:grid;gap:var(--primitive-spacing-6px);min-height:118px;padding:var(--primitive-spacing-18px);text-align:left;
  border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-12px);background:var(--surface-card);color:inherit;font:inherit;cursor:pointer}
.course-population-card:hover:not(:disabled){border-color:var(--action-primary-bg);background:var(--surface-raised)}
.course-population-card:disabled{cursor:not-allowed;opacity:.55}.course-population-card b{font-size:var(--primitive-font-size-16px)}
.course-population-card small,.course-source-summary small{color:var(--text-secondary);line-height:1.45}
.course-population-later{justify-content:flex-end;margin-top:14px}
.course-source-summary{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:var(--primitive-spacing-12px);padding:var(--primitive-spacing-12px) var(--primitive-spacing-4px);background:var(--surface-card);border-top:1px solid var(--border-subtle)}
.course-saved-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:var(--primitive-spacing-12px);margin-top:16px;padding:var(--primitive-spacing-10px) var(--primitive-spacing-14px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);
  background:var(--surface-card)}

.picker-list{max-height:min(60vh,620px);overflow:auto;display:grid;gap:var(--primitive-spacing-18px)}
.picker-group header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--primitive-spacing-12px);
  position:sticky;top:0;background:var(--surface-card);padding:var(--primitive-spacing-6px) 0;border-bottom:1px solid var(--border-subtle)}
.picker-group h3{margin:0;font-size:var(--primitive-font-size-13px);text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}
.picker-row{display:flex;align-items:center;gap:var(--primitive-spacing-10px);padding:var(--primitive-spacing-8px) var(--primitive-spacing-4px);cursor:pointer}
.picker-row:hover{background:var(--hover,var(--visual-picker-row-hover-fallback))}
.picker-row span{display:flex;flex-direction:column}
.picker-row small{color:var(--text-secondary)}
.picker-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:var(--primitive-spacing-10px);
  padding:var(--primitive-spacing-12px) 0;background:var(--bg)}
@media(max-width:650px){.course-population-options{grid-template-columns:1fr}.course-source-note{display:grid}.course-source-note small{text-align:left}}
.add-course-body{display:grid;gap:var(--primitive-spacing-14px);max-height:60vh;overflow:auto}
.add-course-group h3{margin:0 0 6px;font-size:var(--primitive-font-size-13px);color:var(--text-secondary)}

/* Every modal uses the same top-layer separation token, regardless of which
   feature owns the surface content. */
.app-native-dialog::backdrop{background:var(--visual-ui-dialog-surface);backdrop-filter:blur(2px)}
/* In-app dialogs replace prompt/confirm/alert everywhere. */
.ui-dialog{border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-14px);padding:0;background:var(--surface-card);
  color:inherit;max-width:min(440px,92vw);width:100%;box-shadow:var(--elev-4)}
.ui-dialog form{display:grid;gap:var(--primitive-spacing-14px);padding:var(--primitive-spacing-22px) var(--primitive-spacing-24px)}
.ui-dialog-title{margin:0;font-size:var(--primitive-font-size-19px);line-height:1.3}
.ui-dialog-message{margin:0;color:var(--text-secondary);line-height:1.5}
.ui-dialog-field{display:grid;gap:var(--primitive-spacing-6px)}
.ui-dialog-field span{font-size:var(--primitive-font-size-13px);color:var(--text-secondary)}
.ui-dialog-field input{width:100%;padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);font-size:var(--primitive-font-size-15px)}
.ui-dialog-hint{margin:-6px 0 0;font-size:var(--primitive-font-size-13px);color:var(--text-secondary)}
.ui-dialog-error{margin:0;font-size:var(--primitive-font-size-13px);color:var(--danger-fg,var(--visual-dialog-error-text-fallback))}
.ui-dialog footer{display:flex;justify-content:flex-end;gap:var(--primitive-spacing-10px);margin-top:2px}
.course-section-name{flex:1;display:block}

.mode-nav-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-16px);flex-wrap:wrap}
.mode-nav-tools{display:flex;gap:var(--primitive-spacing-8px)}
.study-area-shell-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--primitive-spacing-16px)}
.study-area-shell-heading .study-up{min-width:0}
.study-area-shell-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--primitive-spacing-8px);flex-wrap:wrap}
.area-local-row{display:flex;align-items:center;gap:var(--primitive-spacing-12px);min-height:20px;margin-bottom:8px}
.lesson-status-key{display:grid;gap:var(--primitive-spacing-6px)}

/* One header block per page.

   The trail's first step is the way out of the area, so "where am I" and "how
   do I leave" are one line instead of two competing rows. No background band:
   a page header is part of the page, not a toolbar dropped on top of it. */
.area-header{margin:0 0 18px;padding:0 0 var(--primitive-spacing-14px);border-bottom:1px solid var(--border-subtle)}
.area-sibling{background:none;border:0;padding:0;font:inherit;font-size:var(--primitive-font-size-13px);color:var(--text-secondary);
  cursor:pointer;white-space:nowrap;text-decoration:none}
.area-sibling:hover{color:var(--action-primary-bg)}
.area-title-row{display:flex;align-items:center;gap:var(--primitive-spacing-14px);flex-wrap:wrap}
.area-identity{display:flex;align-items:baseline;gap:var(--primitive-spacing-10px);min-width:0}
.area-identity h1{margin:0;font-size:var(--primitive-font-size-26px);line-height:1.15}
.area-count{color:var(--text-secondary);font-size:var(--primitive-font-size-13px);white-space:nowrap}
.area-actions{display:flex;align-items:center;gap:var(--primitive-spacing-10px);margin-left:auto;flex:1 1 auto;
  justify-content:flex-end;min-width:0}
/* Collection controls are a sibling of page identity, never part of it. The
   shell publishes only global obstruction; each learning surface measures and
   composes its visible utility height locally. */
.learning-utility-surface{--learning-utility-height:0px;--learning-utility-obstruction:var(--learning-utility-height);
  --learning-utility-sticky-top:calc(var(--app-sticky-obstruction) + var(--learning-sticky-predecessor-height,0px));
  --learning-index-heading-offset:var(--space-learning-index-after-control);
  --learning-content-sticky-top:calc(var(--learning-utility-sticky-top) + var(--learning-utility-obstruction) + var(--sticky-content-gap));
  --learning-index-sticky-top:calc(var(--learning-content-sticky-top) + var(--learning-index-heading-offset))}
.learning-utility-bar{position:sticky;top:var(--learning-utility-sticky-top);z-index:var(--layer-page-controls);
  --learning-utility-inline:var(--primitive-spacing-28px);
  margin:0 calc(-1 * var(--learning-utility-inline)) 14px;
  padding:var(--space-learning-utility-block-start) var(--learning-utility-inline) var(--space-learning-utility-block-end);
  border:0;background:transparent;box-shadow:none;
  transition:transform .18s ease,opacity .14s ease,padding 220ms ease}
/* One top scrim mirrors the workspace's bottom veil. It starts behind the
   search field and fades through the content below it, with no slab edge. */
.learning-utility-bar::before{content:"";position:absolute;inset:0 0 auto;
  height:calc(100% + var(--size-learning-utility-scrim-tail));pointer-events:none;opacity:0;
  background:linear-gradient(180deg,var(--surface-workspace) 0%,
    color-mix(in srgb,var(--surface-workspace) 72%,transparent) 28%,
    color-mix(in srgb,var(--surface-workspace) 18%,transparent) 66%,transparent 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:var(--visual-learning-utility-veil-mask-image);
  mask-image:var(--visual-learning-utility-veil-mask-image);
  transition:opacity 120ms ease-out}
.learning-utility-surface.is-utility-stuck>.learning-utility-bar::before{opacity:1}
/* On letter indexes, rows fade before reaching the pinned heading. The heading
   and rail remain sharp above the same scrim, without another toolbar slab. */
.learning-index-scrim{display:none}
.learning-utility-surface:has(:is(.reference-letter-group,.drug-letter-group))>.learning-index-scrim{
  display:block;position:sticky;top:var(--learning-utility-sticky-top);z-index:var(--layer-page-controls);
  height:0;margin-inline:calc(-1 * var(--space-learning-index-scrim-inline));pointer-events:none}
.learning-index-scrim::before{content:"";position:absolute;inset:0 0 auto;
  height:calc(var(--learning-utility-height) + var(--size-learning-index-scrim-tail));
  background:linear-gradient(180deg,var(--surface-workspace) 0%,var(--surface-workspace) 64%,
    color-mix(in srgb,var(--surface-workspace) 92%,transparent) 76%,
    color-mix(in srgb,var(--surface-workspace) 52%,transparent) 88%,transparent 100%);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  -webkit-mask-image:var(--visual-learning-index-veil-mask-image);
  mask-image:var(--visual-learning-index-veil-mask-image);
  opacity:0;transition:opacity 120ms ease-out}
.learning-utility-surface.is-utility-stuck>.learning-index-scrim::before{opacity:1}
/* The narrow front veil catches an outgoing letter before it can travel across
   the search control. The longer sibling veil remains behind the active letter. */
.learning-utility-surface:has(:is(.reference-letter-group,.drug-letter-group))>.learning-utility-bar{
  z-index:var(--layer-page-index-guard)}
.learning-utility-surface:has(:is(.reference-letter-group,.drug-letter-group))>.learning-utility-bar::before{
  height:calc(var(--learning-index-sticky-top) - var(--learning-utility-sticky-top));
  background:linear-gradient(180deg,var(--surface-workspace) 0%,var(--surface-workspace) 75%,transparent 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  -webkit-mask-image:none;mask-image:none}
@media(max-width:640px){.learning-utility-bar{--learning-utility-inline:var(--primitive-spacing-14px)}
  .learning-index-scrim{margin-inline:calc(-1 * var(--space-learning-index-scrim-inline-compact))}}
@media(prefers-reduced-transparency:reduce){
  .learning-utility-bar::before,.learning-index-scrim::before{-webkit-backdrop-filter:none;backdrop-filter:none}
}
.learning-utility-surface.is-utility-concealed{--learning-utility-obstruction:0px;--learning-index-heading-offset:0px}
.learning-utility-surface.is-utility-concealed>.learning-index-scrim::before{opacity:0}
.learning-utility-surface.is-utility-concealed>.learning-utility-bar{
  transform:translateY(calc(-1 * (var(--learning-utility-height) + var(--sticky-content-gap))));
  opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.learning-utility-bar,.learning-utility-bar::before{transition:none}}
.learning-utility-controls{position:relative;z-index:1;display:flex;align-items:center;gap:var(--primitive-spacing-10px);min-width:0}
.learning-utility-back{display:none;position:relative;z-index:1;margin-bottom:var(--sticky-content-gap)}
.learning-utility-surface.is-utility-stuck>.learning-utility-bar .learning-utility-back{display:block}
.learning-utility-back .study-up{margin:0}
.learning-utility-back .study-up-link{min-height:44px;max-width:100%}
.learning-utility-controls>.search-field{display:grid;grid-template-columns:minmax(180px,1fr) auto;
  grid-template-areas:"control status";align-items:center;gap:var(--primitive-spacing-10px);flex:1 1 720px;max-width:720px;min-width:0}
.learning-utility-controls>.search-field .search-field-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.learning-utility-controls>.search-field .search-field-control {grid-area:control}
.learning-utility-controls>.search-field .search-field-status{grid-area:status;min-height:0;white-space:nowrap}
.learning-utility-controls>.reference-menu{margin-left:0}
@media(min-width:641px){
  .learning-utility-surface.is-utility-stuck>.learning-utility-bar{
    padding-block:var(--space-learning-utility-stuck-block-start) var(--space-learning-utility-stuck-block-end)}
  .learning-utility-surface.is-utility-stuck>.learning-utility-bar .learning-utility-controls{justify-content:center}
  .learning-utility-surface.is-utility-stuck>.learning-utility-bar .search-field{
    --search-field-height:var(--size-learning-utility-stuck-height);
    max-width:var(--size-learning-utility-stuck-search)}
  .learning-utility-bar .search-field{transition:max-width 220ms ease}
  .learning-utility-bar .search-field-control{
    transition:height 220ms ease,min-height 220ms ease,background-color var(--theme-paint-duration,.15s) ease}
  .learning-utility-bar .search-field input{transition:height 220ms ease}
}
@media(prefers-reduced-motion:reduce){
  .learning-utility-bar .search-field,
  .learning-utility-bar .search-field-control,
  .learning-utility-bar .search-field input{transition:none}
}
/* Drug reference: dense rows, letter groups, A-Z rail. */
.reference-page{display:block;position:relative;isolation:isolate}

.reference-menu{position:relative;flex:0 0 auto}
.reference-menu summary{list-style:none;cursor:pointer;padding:var(--primitive-spacing-6px) var(--primitive-spacing-10px);border:1px solid var(--border-subtle);
  border-radius:var(--primitive-radius-8px);font-size:var(--primitive-font-size-16px);line-height:1;user-select:none}
.reference-menu summary::-webkit-details-marker{display:none}
.reference-menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:var(--primitive-spacing-6px);
  min-width:210px;padding:var(--primitive-spacing-10px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-10px);background:var(--surface-card);
  box-shadow:var(--visual-reference-menu-panel-shadow)}
.reference-menu-panel hr{border:0;border-top:1px solid var(--border-subtle);margin:2px 0;width:100%}
.reference-menu-panel .ghost{text-align:left;width:100%}
.reference-filter{display:grid;gap:var(--primitive-spacing-4px);font-size:var(--primitive-font-size-13px);color:var(--text-secondary)}
.reference-filter select{width:100%;padding:var(--primitive-spacing-6px) var(--primitive-spacing-8px)}
.reference-body{display:flex;align-items:flex-start;gap:var(--primitive-spacing-10px)}
.reference-list{flex:1;min-width:0}
.reference-letter-group,.drug-letter-group{scroll-margin-top:calc(var(--app-sticky-obstruction) + 24px)}
.reference-letter-heading,.drug-letter-heading{position:sticky;top:var(--app-sticky-obstruction);z-index:var(--layer-page-section);margin:0;padding:var(--primitive-spacing-8px) 0 var(--primitive-spacing-4px);
  font-size:var(--primitive-font-size-12px);letter-spacing:.14em;color:var(--text-secondary);background:var(--workspace);
  border-bottom:1px solid var(--border-subtle)}
.reference-row{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(110px,.6fr)
  minmax(145px,.8fr) auto;gap:var(--primitive-spacing-14px);align-items:center;padding:var(--primitive-spacing-10px) var(--primitive-spacing-8px);border-bottom:1px solid var(--border-subtle)}
.reference-row:hover{background:var(--surface-raised)}
.reference-row-copy{display:grid;gap:var(--primitive-spacing-2px);min-width:0}
.reference-row-copy>span,.reference-row-copy>small{color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}
.reference-row-actions{display:flex;gap:var(--primitive-spacing-10px);justify-content:flex-end;white-space:nowrap}
:root{--reference-row-gap:var(--primitive-spacing-16px);--reference-row-padding:var(--primitive-spacing-10px) var(--primitive-spacing-8px);
  --reference-row-secondary-size:var(--primitive-font-size-14px);--reference-row-meta-gap:var(--primitive-spacing-3px);
  --reference-row-meta-size:var(--primitive-font-size-12px);--reference-row-small-size:var(--primitive-font-size-11px);
  --reference-detail-padding:var(--primitive-spacing-5px) var(--primitive-spacing-14px) var(--primitive-spacing-18px);
  --reference-detail-grid-gap:var(--primitive-spacing-16px) var(--primitive-spacing-24px);
  --reference-detail-top:var(--primitive-spacing-14px);--reference-detail-label-size:var(--primitive-font-size-12px);
  --reference-detail-action-gap:var(--primitive-spacing-8px);--reference-detail-action-top:var(--primitive-spacing-14px);
  --reference-filter-panel-gap:var(--primitive-spacing-14px);--reference-filter-group-gap:var(--primitive-spacing-7px);
  --reference-filter-option-gap:var(--primitive-spacing-5px);--reference-filter-option-padding:var(--primitive-spacing-7px) var(--primitive-spacing-9px);
  --reference-filter-option-radius:var(--primitive-radius-8px);--reference-filter-note-size:var(--primitive-font-size-12px)}
.abbreviation-reference-row,.definition-reference-row{border-bottom:1px solid var(--border-subtle)}
.abbreviation-row-main,.definition-row-main{display:grid;grid-template-columns:minmax(120px,.55fr) minmax(240px,1.5fr) minmax(180px,1fr);
  gap:var(--reference-row-gap);align-items:baseline;width:100%;padding:var(--reference-row-padding);
  border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;white-space:normal}
.abbreviation-row-main:hover,.definition-row-main:hover{background:var(--surface-raised)}
.abbreviation-row-name,.definition-row-name{font-weight:650}
.abbreviation-row-meaning,.definition-row-meaning{color:var(--text-secondary);font-size:var(--reference-row-secondary-size);line-height:1.4}
.abbreviation-row-meta{display:grid;gap:var(--reference-row-meta-gap);color:var(--text-secondary);font-size:var(--reference-row-meta-size)}
.abbreviation-row-meta small{font-size:var(--reference-row-small-size)}
.abbreviation-reference-row.is-open,.definition-reference-row.is-open{background:var(--surface-raised)}
.abbreviation-reference-row.is-open .abbreviation-row-name,.definition-reference-row.is-open .definition-row-name{color:var(--action-primary-bg)}
.abbreviation-reference-detail,.definition-reference-detail{padding:var(--reference-detail-padding)}
.abbreviation-reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--reference-detail-grid-gap);
  padding-top:var(--reference-detail-top);border-top:1px solid var(--border-subtle)}
.abbreviation-reference-grid h4{margin:0 0 5px;color:var(--text-primary);font-size:var(--reference-detail-label-size);text-transform:uppercase;letter-spacing:.06em}
.abbreviation-reference-grid p{margin:0;color:var(--text-secondary);line-height:1.5}
.abbreviation-detail-actions,.definition-detail-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--reference-detail-action-gap);margin-top:var(--reference-detail-action-top)}
.abbreviation-filter-menu .reference-menu-panel{width:min(420px,calc(100vw - 28px));max-height:75dvh;overflow:auto;gap:var(--reference-filter-panel-gap);padding:var(--reference-filter-panel-gap)}
.abbreviation-filter-group{display:grid;gap:var(--reference-filter-group-gap)}
.abbreviation-filter-group h3{margin:0;font-size:var(--reference-detail-label-size);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.abbreviation-filter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--reference-filter-option-gap)}
.abbreviation-filter-option{min-width:0;padding:var(--reference-filter-option-padding);border:1px solid var(--border-subtle);border-radius:var(--reference-filter-option-radius);background:var(--surface-card);color:var(--text-primary);font:inherit;font-size:var(--reference-detail-label-size);text-align:left;cursor:pointer}
.abbreviation-filter-option:hover{border-color:var(--action-primary-bg);background:var(--surface-raised)}
.abbreviation-filter-option.is-selected{border-color:var(--action-primary-bg);background:var(--accent-soft);color:var(--action-primary-bg);font-weight:700}
.reference-filter-note{margin:0;color:var(--text-secondary);font-size:var(--reference-filter-note-size);line-height:1.45}
.reference-rail,.drug-rail{position:sticky;top:var(--content-sticky-top);display:flex;flex-direction:column;gap:var(--primitive-spacing-1px);
  flex:0 0 26px;align-items:center;padding:var(--primitive-spacing-4px) 0;max-height:calc(100dvh - var(--content-sticky-top) - 8px)}
.reference-rail button,.reference-rail span{background:none;border:0;padding:0;width:22px;height:16px;
  font:inherit;font-size:var(--primitive-font-size-11px);line-height:16px;text-align:center;border-radius:var(--primitive-radius-4px)}
.reference-rail button{color:var(--text-secondary);cursor:pointer}
.reference-rail button:hover{background:var(--surface-raised);color:inherit}
.reference-rail button.on{background:var(--action-primary-bg);color:var(--visual-reference-rail-on-text);font-weight:700}
.reference-rail span{color:var(--border-subtle);cursor:default}
.learning-utility-surface :is(.reference-letter-group,.drug-letter-group){scroll-margin-top:calc(var(--learning-index-sticky-top) + var(--space-learning-index-jump))}
.learning-utility-surface :is(.reference-letter-heading,.drug-letter-heading){top:var(--learning-index-sticky-top)}
.learning-utility-surface :is(.reference-letter-heading,.drug-letter-heading).is-index-exiting{opacity:0}
.learning-utility-surface :is(.reference-rail,.drug-rail){top:var(--learning-index-sticky-top);
  max-height:calc(100dvh - var(--learning-index-sticky-top) - var(--space-learning-index-rail-bottom))}
.learning-utility-surface:has(:is(.reference-letter-group,.drug-letter-group))
  :is(.reference-letter-heading,.drug-letter-heading,.reference-rail,.drug-rail){z-index:var(--layer-page-index-navigation)}
.study-mode-intro{max-width:760px;color:var(--text-secondary);margin:12px 0 18px}
.drug-list{flex:1;min-width:0}
.drug-row{border-bottom:1px solid var(--border-subtle)}
.drug-row-main{display:grid;grid-template-columns:minmax(180px,1.1fr) minmax(120px,1fr) minmax(140px,1fr);
  gap:var(--primitive-spacing-16px);align-items:baseline;width:100%;text-align:left;background:none;border:0;
  padding:var(--primitive-spacing-9px) var(--primitive-spacing-8px);color:inherit;font:inherit;cursor:pointer}
.drug-row-main:hover{background:var(--surface-raised)}
.drug-row-name{font-weight:600}
.drug-row-brands,.drug-row-class{color:var(--text-secondary);font-size:var(--primitive-font-size-14px)}
.drug-row.is-open{background:var(--surface-raised)}
.drug-row.is-open .drug-row-name{color:var(--action-primary-bg)}
.monograph{padding:var(--primitive-spacing-4px) var(--primitive-spacing-14px) var(--primitive-spacing-18px)}
.monograph-actions{display:flex;gap:var(--primitive-spacing-8px);margin-top:14px}
.terminology-reference-row{border-bottom:1px solid var(--border-subtle)}
.terminology-reference-page .reference-menu-panel{width:min(420px,calc(100vw - 28px));max-height:min(680px,75dvh);
  overflow:auto;gap:var(--primitive-spacing-14px);padding:var(--primitive-spacing-14px)}
.terminology-filter-group{display:grid;gap:var(--primitive-spacing-7px)}
.terminology-filter-group h3{margin:0;font-size:var(--primitive-font-size-12px);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.terminology-filter-group p{display:none;margin:0;color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}
.terminology-filter-group.is-disabled p{display:block}
.terminology-filter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-5px)}
.terminology-filter-option{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-8px);min-width:0;
  padding:var(--primitive-spacing-7px) var(--primitive-spacing-9px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);background:var(--surface-card);color:var(--text-primary);
  font:inherit;font-size:var(--primitive-font-size-12px);text-align:left;cursor:pointer;text-transform:capitalize}
.terminology-filter-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.terminology-filter-option small{color:var(--text-secondary);font-size:var(--primitive-font-size-11px);font-variant-numeric:tabular-nums}
.terminology-filter-option:hover{border-color:var(--action-primary-bg);background:var(--surface-raised)}
.terminology-filter-option.is-selected{border-color:var(--action-primary-bg);background:var(--accent-soft);color:var(--action-primary-bg);font-weight:700}
.terminology-filter-option:disabled{opacity:.42;cursor:not-allowed}
.terminology-row-main{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(280px,1.7fr) minmax(150px,.7fr);
  gap:var(--primitive-spacing-16px);align-items:baseline;width:100%;padding:var(--primitive-spacing-10px) var(--primitive-spacing-8px);border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;white-space:normal}
.terminology-row-main:not(.is-static):hover{background:var(--surface-raised)}
.terminology-row-main.is-static{cursor:default}
.terminology-row-name{font-weight:650}
.terminology-row-definition{color:var(--text-secondary);font-size:var(--primitive-font-size-14px);line-height:1.4}
.learn-mode-bar{margin-bottom:4px}
.table-practice-ready{max-width:980px;margin-inline:auto}
.table-practice-ready>h1{margin:6px 0 0;font-size:var(--primitive-font-size-clamp-28px-4vw-42px);letter-spacing:-.025em}
.table-practice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-10px);margin-top:18px}
.table-practice-option{display:grid;grid-template-columns:42px minmax(0,1fr) 20px;gap:var(--primitive-spacing-12px);align-items:start;width:100%;padding:var(--primitive-spacing-14px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-11px);background:var(--surface-raised);color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}
.table-practice-option:hover{border-color:var(--action-primary-bg);background:color-mix(in srgb,var(--action-primary-bg) 7%,var(--surface-card))}
.table-practice-option.is-selected{border-color:var(--action-primary-bg);background:var(--accent-soft);box-shadow:0 0 0 1px var(--action-primary-bg)}
.table-practice-option b{display:block;line-height:1.25}.table-practice-option small{display:block;margin-top:5px;color:var(--text-secondary);line-height:1.4}
.table-practice-option>i{color:var(--action-primary-bg);font-style:normal;font-weight:800;opacity:0}.table-practice-option.is-selected>i{opacity:1}
.table-practice-number{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--primitive-radius-9px);background:var(--surface-card);border:1px solid var(--border-subtle);color:var(--action-primary-bg);font-size:var(--primitive-font-size-12px);font-weight:800;font-variant-numeric:tabular-nums}
.table-practice-start{display:flex;gap:var(--primitive-spacing-16px);align-items:center;justify-content:flex-end;margin-top:18px;padding-top:var(--primitive-spacing-16px);border-top:1px solid var(--border-subtle)}
.table-practice-start p{margin:0;margin-right:auto}
@media(max-width:720px){.table-practice-grid{grid-template-columns:1fr}.table-practice-start{align-items:stretch;flex-direction:column}}
.definition-readiness{display:grid;gap:var(--primitive-spacing-8px)}
.definition-dist{display:flex;gap:var(--primitive-spacing-2px);height:6px;border-radius:var(--primitive-radius-999px);overflow:hidden;max-width:420px}
.definition-dist i{display:block;min-width:4px}
i.definition-dist-unseen{background:var(--border-subtle)}i.definition-dist-introduced{background:color-mix(in srgb,var(--action-primary-bg) 35%,var(--border-subtle))}
i.definition-dist-learning{background:color-mix(in srgb,var(--action-primary-bg) 65%,var(--border-subtle))}i.definition-dist-recalled{background:var(--action-primary-bg)}i.definition-dist-fluent{background:var(--success-fg)}
.activity-ready .ready-note .ghost{margin-right:8px}
.definition-teach{max-width:40em;margin-top:18px;text-align:left}
.definition-plain{margin:0;font-size:var(--primitive-font-size-clamp-19px-2-4vw-23px);line-height:1.42;font-weight:450;color:var(--text-primary);text-wrap:pretty}
.definition-lecture{margin-top:18px;padding-top:var(--primitive-spacing-14px);border-top:1px solid var(--border-subtle)}
.definition-lecture span{font-size:var(--primitive-font-size-11px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.definition-lecture p{margin:6px 0 0;font-size:var(--primitive-font-size-15-5px);line-height:1.55;color:var(--text-primary)}
.definition-aliases{margin:12px 0 0;font-size:var(--primitive-font-size-13px);color:var(--text-secondary)}
.definition-confirm{margin:8px 0 0;color:var(--text-secondary);line-height:1.5}
.definition-correction{max-width:40em;margin:14px 0}
.definition-correction .definition-teach{margin-top:6px}
.definition-correction-term{margin:0;font-size:var(--primitive-font-size-18px);font-weight:700}
.definition-correction .definition-plain{font-size:var(--primitive-font-size-17px)}
.definition-reference{--size-definition-index-letter:var(--primitive-spacing-44px);max-width:900px;margin:0 auto}
/* Keep course tabs at the same height and shell offset in every course view.
   The nested reference search measures this shared sticky predecessor. */
main>.course-mode-nav{top:var(--app-sticky-obstruction);padding-top:var(--space-course-tabs-top)}
.definition-reference-head{display:flex;justify-content:space-between;gap:var(--primitive-spacing-24px);align-items:center}
.ready-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--reference-row-gap)}
.ready-heading>.pref-quiet{flex-shrink:0}
.definition-row-main{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
:root{--space-definition-authoring-section:var(--primitive-spacing-24px);--space-definition-authoring-indent:var(--primitive-spacing-8px);--text-definition-authoring-step:var(--primitive-font-size-18px)}
.definition-authoring{max-width:var(--size-learn-column);margin-inline:auto}
.definition-authoring h1{margin-top:var(--reference-row-gap)}
.definition-add-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-definition-authoring-section);margin-top:var(--space-definition-authoring-section)}
.definition-add-options h2,.definition-import-steps h2{font-size:var(--text-definition-authoring-step)}
.definition-import-steps{display:grid;gap:var(--space-definition-authoring-section);padding-left:var(--space-definition-authoring-section);margin-top:var(--space-definition-authoring-section)}
.definition-import-steps li{padding-left:var(--space-definition-authoring-indent)}
.definition-import-steps h2{margin-top:0}
.definition-import-steps p{color:var(--text-secondary)}
@media(max-width:720px){
  .ready-heading{flex-wrap:wrap}
  .definition-add-options{grid-template-columns:minmax(0,1fr)}
  .definition-reference-head{align-items:start}
  .definition-reference .reference-body{display:grid;grid-template-columns:minmax(0,1fr)}
  .definition-reference .reference-rail{display:flex;position:static;grid-row:1;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;max-height:none;width:100%}
  .definition-reference .reference-rail :is(button,span){flex:0 0 var(--size-definition-index-letter);width:var(--size-definition-index-letter);height:var(--size-definition-index-letter);line-height:var(--size-definition-index-letter)}
}
.terminology-row-meta{display:grid;gap:var(--primitive-spacing-2px);color:var(--text-secondary);font-size:var(--primitive-font-size-12px);text-transform:capitalize}
.terminology-row-meta small{font-size:var(--primitive-font-size-11px)}
.terminology-reference-row.is-open{background:var(--surface-raised)}
.terminology-reference-row.is-open .terminology-row-name{color:var(--action-primary-bg)}
.terminology-reference-detail{padding:var(--primitive-spacing-5px) var(--primitive-spacing-14px) var(--primitive-spacing-18px);color:var(--text-secondary)}
.terminology-reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--primitive-spacing-16px) var(--primitive-spacing-24px);
  padding-top:var(--primitive-spacing-14px);border-top:1px solid var(--border-subtle)}
.terminology-reference-grid section{min-width:0}
.terminology-reference-grid h4{margin:0 0 5px;color:var(--text-primary);font-size:var(--primitive-font-size-12px);text-transform:uppercase;letter-spacing:.06em}
.terminology-reference-grid p{margin:0;line-height:1.5}
.terminology-facts{display:grid;gap:var(--primitive-spacing-5px);margin:0;padding-left:var(--primitive-spacing-18px)}
.terminology-facts li span{margin-right:8px;color:var(--text-secondary)}
.terminology-facts li b{margin-right:8px;color:var(--text-primary)}
.conversion-reference-page .reference-menu-panel{width:min(440px,calc(100vw - 28px));gap:var(--primitive-spacing-14px);padding:var(--primitive-spacing-14px)}
.conversion-filter-group{display:grid;gap:var(--primitive-spacing-7px)}
.conversion-filter-group h3{margin:0;font-size:var(--primitive-font-size-12px);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.conversion-filter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--primitive-spacing-5px)}
.conversion-filter-option{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-8px);min-width:0;
  padding:var(--primitive-spacing-7px) var(--primitive-spacing-9px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px);background:var(--surface-card);color:var(--text-primary);
  font:inherit;font-size:var(--primitive-font-size-12px);text-align:left;cursor:pointer}
.conversion-filter-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversion-filter-option small{color:var(--text-secondary);font-size:var(--primitive-font-size-11px);font-variant-numeric:tabular-nums}
.conversion-filter-option:hover{border-color:var(--action-primary-bg);background:var(--surface-raised)}
.conversion-filter-option.is-selected{border-color:var(--action-primary-bg);background:var(--accent-soft);color:var(--action-primary-bg);font-weight:700}
.conversion-reference-row{border-bottom:1px solid var(--border-subtle)}
.conversion-row-main{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--primitive-spacing-16px);align-items:baseline;width:100%;padding:var(--primitive-spacing-10px) var(--primitive-spacing-8px);color:inherit;
  font:inherit;text-align:left;white-space:normal}
.conversion-row-name{font-weight:650;font-variant-numeric:tabular-nums}
.conversion-row-note{color:var(--text-secondary);font-size:var(--primitive-font-size-14px);line-height:1.4}
.conversion-rail{flex-basis:42px;gap:var(--primitive-spacing-3px)}
.conversion-rail button{width:40px;height:22px;line-height:22px}
.drug-rail button,.drug-rail span{background:none;border:0;padding:0;width:22px;height:16px;
  font:inherit;font-size:var(--primitive-font-size-11px);line-height:16px;text-align:center;border-radius:var(--primitive-radius-4px)}
.drug-rail button{color:var(--text-secondary);cursor:pointer}
.drug-rail button:hover{background:var(--surface-raised);color:inherit}
.drug-rail button.on{background:var(--action-primary-bg);color:var(--visual-drug-rail-on-text);font-weight:700}
.drug-rail span{color:var(--border-subtle);cursor:default}
:is(.abbreviation-row-main,.drug-row-main,.terminology-row-main,.conversion-row-main,.definition-row-main){padding:var(--reference-row-padding)}
:is(.abbreviation-reference-row,.drug-row,.terminology-reference-row,.definition-reference-row).is-open>div{
  animation:reference-detail-enter .16s ease-out both}
@keyframes reference-detail-enter{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){:is(.abbreviation-reference-row,.drug-row,.terminology-reference-row,.definition-reference-row).is-open>div{animation:none}}
@media (max-width:1100px){
  .abbreviation-row-main{grid-template-columns:minmax(120px,.55fr) minmax(0,1.45fr)}
  .abbreviation-row-meta{grid-column:2;display:flex;gap:var(--reference-detail-action-gap);align-items:baseline}
  .terminology-row-main{grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr)}
  .terminology-row-meta{grid-column:2;display:flex;gap:var(--primitive-spacing-8px);align-items:baseline}
}
@media (max-width:720px){
  .abbreviation-row-main,.definition-row-main{grid-template-columns:1fr;gap:var(--reference-row-meta-gap)}
  .abbreviation-row-meta{grid-column:1}
  .drug-row-main{grid-template-columns:1fr;gap:var(--primitive-spacing-2px)}
  .terminology-row-main{grid-template-columns:1fr;gap:var(--primitive-spacing-3px)}
  .terminology-row-meta{grid-column:1}
  .conversion-row-main{grid-template-columns:1fr;gap:var(--reference-row-meta-gap)}
  .drug-rail,.reference-rail{display:none}
  .reference-row{grid-template-columns:1fr;gap:var(--primitive-spacing-6px)}
  .reference-row-actions{justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width:520px){
  .learning-utility-bar{padding-block:var(--primitive-spacing-6px) var(--primitive-spacing-7px)}
  .learning-utility-controls>.search-field{display:block}
  .learning-utility-controls>.search-field .search-field-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* .card draws its own top rule, so a page header directly above it would
   double the line. One separator, not two. */
.area-header+.card{border-top:0;padding-top:var(--primitive-spacing-2px)}
.catalog-row-shell{position:relative;border-bottom:1px solid var(--border-subtle)}
.catalog-row-shell .catalog-entry-row{border-bottom:0;padding-right:var(--primitive-spacing-112px)}
.course-canonical-link{display:flex;align-items:center;justify-content:space-between;margin:14px 0;padding:var(--primitive-spacing-14px) var(--primitive-spacing-17px);border:1px solid color-mix(in srgb,var(--action-primary-bg) 25%,var(--border-subtle));border-radius:var(--primitive-radius-13px);background:var(--accent-soft);color:var(--text-primary);text-decoration:none}.course-canonical-link span{display:grid}.course-canonical-link small{color:var(--text-secondary)}.course-canonical-link i{color:var(--action-primary-bg);font-style:normal}
.lesson-focus{outline:2px solid color-mix(in srgb,var(--focus-ring) 45%,transparent);outline-offset:2px;background:color-mix(in srgb,var(--action-primary-bg) 4%,transparent)}
@media(max-width:650px){.catalog-row-shell .catalog-entry-row{padding-right:var(--primitive-spacing-8px);padding-bottom:var(--primitive-spacing-48px)}}

/* Search is identified by its label, icon, and surface rather than an outline. */
/* iOS focus zoom targets 16px text; keep every shared search variant at that
   size rather than restricting the user's viewport or manual zoom. */
.search-field{--text-search-input:var(--primitive-font-size-16px);display:grid;gap:var(--primitive-spacing-5px);min-width:0;color:var(--text-primary)}
.search-field--reference,.search-field--catalog{--search-field-height:46px}
.search-field--compact{--search-field-height:42px}
.area-actions>.search-field--reference{flex:0 1 320px;min-width:180px}
.card>.search-field--compact{margin-bottom:14px}
.search-field-label{font-size:var(--primitive-font-size-13px);font-weight:650;color:var(--text-secondary)}
.search-field-control{position:relative;display:flex;align-items:center;height:var(--search-field-height);min-height:var(--search-field-height);overflow:visible;
  border:0;border-radius:var(--primitive-radius-13px);background:var(--surface-panel);color:var(--text-primary);
  transition:background-color var(--theme-paint-duration,.15s) ease}
.search-field-control:focus-within{background:color-mix(in srgb,var(--action-primary-bg) 8%,var(--surface-panel))}
.search-field-control:focus-within .search-field-icon{color:var(--action-primary-bg)}
.search-field-icon{position:relative;z-index:1;flex:0 0 auto;width:19px;height:19px;margin-left:13px;color:var(--text-secondary);fill:currentColor}
.search-field input{position:relative;z-index:1;min-width:0;flex:1;width:100%;height:var(--search-field-height);border:0;
  outline:0;background:transparent;color:var(--text-primary);font:inherit;font-size:var(--text-search-input);padding:0 var(--primitive-spacing-8px)}
.search-field input::placeholder{color:var(--text-secondary);opacity:.9}
.search-field-clear{position:relative;z-index:1;min-width:34px;min-height:34px;margin-right:5px;border:0;border-radius:var(--primitive-radius-8px);
  background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--primitive-font-size-13px);cursor:pointer;transition:color var(--theme-paint-duration,.15s) ease,background-color var(--theme-paint-duration,.15s) ease}
.search-field-clear:hover{background:var(--surface-raised);color:var(--text-primary)}
.search-field-clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.search-field:not(.is-populated) .search-field-clear{visibility:hidden;pointer-events:none}
.search-field-status{display:flex;justify-content:space-between;gap:var(--primitive-spacing-10px);min-height:18px;margin:0;color:var(--text-secondary);font-size:var(--primitive-font-size-13px);line-height:18px}
.search-field-message:empty,.search-field-count:empty{display:none}
@media(max-width:650px){.search-field-clear{position:absolute;right:1px;top:50%;width:44px;min-width:44px;height:44px;min-height:44px;
  margin:0;transform:translateY(-50%)}.search-field input{padding-right:var(--primitive-spacing-49px)}}
@media(prefers-reduced-motion:reduce){.search-field-control,.search-field-clear{transition:none}}

/* Study Areas.

   The page is a list of places to go. It does not need a hero question, a
   kicker above every heading, a sentence explaining each section, or a count
   of its own rows. Borders are load-bearing or they are noise: one hairline
   between rows, one outline per card, and never a bordered box inside another
   bordered box. */
.catalog-page{display:block}
.catalog-title{margin:0 0 18px;padding:0 0 var(--primitive-spacing-14px);border-bottom:1px solid var(--border-subtle)}
.catalog-title h1{margin:0;font-size:var(--primitive-font-size-26px);line-height:1.15;letter-spacing:-.02em}

.catalog-count{margin:0;color:var(--text-secondary);font-size:var(--primitive-font-size-13px);flex:0 0 auto}
.catalog-count:empty{display:none}

/* The plans block is a section of the page, not a card floating on one. */
.study-plans-catalog{margin-top:34px;padding:0;border:0;border-radius:0;background:none}
.study-plan-preview{border:0}

.catalog-pinned,.catalog-domain,.study-plans-catalog{margin:0 0 30px}
main a.catalog-pinned-card,.catalog-pinned-card{border:0}
.catalog-pinned-card::before{display:none}
.catalog-pinned-card{animation:catalog-pin-enter .2s cubic-bezier(.2,.75,.25,1) both}
@keyframes catalog-pin-enter{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
.catalog-pinned>header{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;padding:0;border:0}
.catalog-pinned>header h2{margin:0}
.catalog-pin-count{color:var(--text-secondary);font-size:var(--text-catalog-pin-count);font-weight:650}
.catalog-card-category{order:-2;margin:0 0 3px;color:var(--text-secondary);font-size:var(--text-catalog-card-category);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
/* Nothing pinned yet reads like nothing planned yet above it: one quiet
   filled panel, no rules. Two hairlines here used to box the message in and
   then sat directly on the next section's own rule. */
.catalog-pinned-empty{display:grid;gap:var(--space-catalog-pinned-empty-gap);padding:var(--space-catalog-pinned-empty-pad);border:0;border-radius:var(--radius-catalog-pinned-empty);background:var(--surface-panel);color:var(--text-secondary);font-size:var(--text-catalog-pinned-empty-body)}
.catalog-pinned-empty b{color:var(--text-primary);font-size:var(--text-catalog-pinned-empty-heading)}
.catalog-pin-hint{display:inline-grid;place-items:center;width:var(--size-catalog-pin-hint);height:var(--size-catalog-pin-hint);margin:0 var(--space-catalog-pin-hint-inline);vertical-align:middle;border-radius:50%;background:var(--surface-raised);color:var(--action-primary-bg)}
.catalog-pin-hint svg{width:var(--size-catalog-pin-hint-glyph);height:var(--size-catalog-pin-hint-glyph);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.catalog-entry-shell{position:relative}
.catalog-entry-shell .catalog-entry-row{padding-right:var(--space-catalog-entry-pin-clearance)}
.catalog-pin{position:absolute;right:7px;top:50%;z-index:2;display:grid;place-items:center;width:34px;min-width:34px;height:34px;min-height:34px;padding:0;transform:translateY(-50%);border:0;border-radius:50%;background:transparent;color:var(--text-secondary);cursor:pointer;opacity:0;transition:opacity .14s,background .14s,color .14s}
.catalog-entry-shell:hover .catalog-pin,.catalog-entry-shell:focus-within .catalog-pin,.catalog-pin.is-pinned{opacity:1}
.catalog-pin:hover,.catalog-pin:focus-visible,.catalog-pin.is-pinned{background:var(--surface-raised);color:var(--action-primary-bg)}
.catalog-pin svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.catalog-pin.is-pinned svg{fill:currentColor;stroke:currentColor}
.catalog-pin:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.catalog-replace-dialog{max-width:520px}
.catalog-replace-dialog>p{color:var(--text-secondary)}
.catalog-replace-options{display:grid;border-top:1px solid var(--border-subtle)}
.catalog-replace-option{display:flex;align-items:center;justify-content:space-between;gap:var(--space-catalog-replace-option-gap);width:100%;padding:var(--space-catalog-replace-option-block) var(--space-catalog-replace-option-inline);border:0;border-bottom:1px solid var(--border-subtle);background:transparent;color:var(--text-primary);text-align:left;cursor:pointer}
.catalog-replace-option:hover,.catalog-replace-option:focus-visible{background:var(--surface-raised)}
.catalog-replace-option>span:first-child{display:grid;gap:var(--space-catalog-replace-copy-gap)}
.catalog-replace-option small{color:var(--text-secondary);font-size:var(--text-catalog-replace-meta);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.catalog-replace-option>span:last-child{color:var(--action-primary-bg);font-size:var(--text-catalog-replace-action);font-weight:700;white-space:nowrap}
.catalog-pinned h2,.catalog-domain h2,.study-plans-catalog h2{
  margin:0 0 12px;font-size:var(--text-catalog-section-heading-compact);font-weight:650;letter-spacing:-.01em}
.study-plans-catalog>header{display:flex;align-items:center;justify-content:space-between;
  gap:var(--primitive-spacing-14px);margin-bottom:12px}
.study-plans-catalog>header h2{margin:0}
.study-plans-catalog-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-study-plan-actions)}
/* The heading and its one command share a row at every width, the way Your
   courses and Add course do. */
@media(max-width:760px){.catalog-pin{opacity:1}.catalog-card-category{font-size:var(--text-catalog-card-category-mobile)}}
@media(prefers-reduced-motion:reduce){.catalog-pin{transition:none}.catalog-pinned-card{animation:none}}
.catalog-domain h2{color:var(--text-secondary);font-size:var(--primitive-font-size-12px);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}
.catalog-entry-list{border-top:1px solid var(--border-subtle)}
.plan-picker{display:grid;gap:var(--primitive-spacing-2px);max-height:52vh;overflow:auto;margin:4px 0 2px}
.plan-picker-group{display:grid;gap:var(--space-plan-picker-group-gap);border:0;margin:0;padding:0;min-width:0}
.plan-picker-group legend{padding:var(--space-plan-picker-legend-top) var(--space-plan-picker-legend-inline) var(--space-plan-picker-legend-bottom);color:var(--text-secondary);font-size:var(--text-plan-picker-legend);font-weight:650}
.plan-picker-row{display:flex;align-items:center;gap:var(--primitive-spacing-10px);padding:var(--primitive-spacing-8px) var(--primitive-spacing-4px);cursor:pointer;
  border-bottom:1px solid var(--border-subtle)}
.plan-picker-row:hover{background:var(--surface-raised)}
.plan-picker-row span{display:flex;flex-direction:column}
.plan-picker-row small{color:var(--text-secondary);font-size:var(--primitive-font-size-12px)}

/* Your curriculum is a section like any other: a plain heading over a row.
   Moving it up the page only helps if it stops looking like a different app. */
.study-curriculum-section{margin:0 0 30px;padding:0;border:0;border-radius:0;background:none}
.study-curriculum-section>h2{display:block;margin:0 0 12px;padding:0;border-radius:0;
  background:none;color:var(--text-primary);font-size:var(--primitive-font-size-15px);font-weight:650;letter-spacing:-.01em;
  text-transform:none}
.study-curriculum-section .curriculum-card{min-height:0;padding:var(--primitive-spacing-14px) var(--primitive-spacing-6px);gap:var(--primitive-spacing-14px);
  border:0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);
  border-radius:0;background:none;box-shadow:none}
.study-curriculum-section .curriculum-card:hover{background:var(--surface-raised)}

/* Study-plan request state changes inside one permanent catalog slot. */
.study-plan-loading{display:grid;gap:var(--primitive-spacing-9px);min-height:62px;padding:var(--primitive-spacing-15px);background:var(--surface-panel)}
.study-plan-loading span{display:block;height:12px;border-radius:var(--primitive-radius-999px);
  background:linear-gradient(90deg,var(--surface-raised),color-mix(in srgb,var(--surface-raised) 55%,var(--surface-panel)),var(--surface-raised));
  background-size:200% 100%;animation:study-plan-loading 1.2s ease-in-out infinite}
.study-plan-loading span:first-child{width:38%}.study-plan-loading span:last-child{width:22%}
.study-plan-error{display:flex;align-items:center;justify-content:space-between;gap:var(--primitive-spacing-16px);
  min-height:62px;padding:var(--primitive-spacing-12px) var(--primitive-spacing-15px);background:var(--surface-panel)}
.study-plan-error>span{display:grid;gap:var(--primitive-spacing-2px)}.catalog-status-unavailable{color:var(--text-secondary)}
@keyframes study-plan-loading{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.study-plan-loading span{animation:none}}
@media(max-width:650px){.study-plan-error{align-items:flex-start;flex-direction:column}}
.study-plan-lifecycle-row{color:var(--text-primary)}
.study-plan-row-actions{display:flex;align-items:center;gap:var(--primitive-spacing-12px);flex-wrap:wrap}
@media(max-width:650px){.study-plan-lifecycle-row{align-items:flex-start;flex-direction:column}.study-plan-row-actions{width:100%}}


/* ============================================================================
   THE STUDY COMPANION

   A rig, not a sprite sheet. Every pose below is a transform on a grouped SVG
   node. It paints itself (Constitution 3.1) -- nothing here supplies colour.

   TWO THINGS THIS FILE IS BUILT AROUND.

   First, the ambient layer is almost empty. An earlier version offered a hop, a
   march, a stretch and a glance on a rolling clock, and that is a fidget rather
   than a companion. What is left running on its own is a one percent breath and
   a blink. Everything with personality in it happens because the learner
   brought their pointer to the character.

   Second, the greeting is a bounded performance. Three hops, then still --
   while the pointer is still on it. That restraint is the entire difference
   between something that noticed you and something that reacts to your cursor,
   and the latch that enforces it lives in the JS.

   The drawing is constructed in quarter view, so the near arm is larger and in
   front, the far arm smaller and behind, and the legs are unequal. Drag direction
   mirrors the completed drawing as one object; nothing inside the rig mirrors
   independently, so that authored asymmetry stays coherent in either direction.

   See docs/architecture/COMPANION_MOTION_SPECIFICATION.md and
   COMPANION_REFERENCE_TEARDOWN.md.
   ========================================================================= */
.study-companion{
  --companion-x:12px;--companion-y:12px;
  --companion-facing:1;
  --companion-lean:0deg;--companion-drag-sx:1;--companion-drag-sy:1;
  position:fixed;left:0;top:0;width:120px;height:120px;z-index:18;
  transform:translate3d(var(--companion-x),var(--companion-y),0);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:opacity .5s ease,filter .5s ease;
}
.study-companion.is-held{cursor:grabbing}
/* THE STABLE HIT REGION. The box is fixed at 120px and the drawing takes no
   pointer events, so the region cannot move while the character is mid-hop. A
   hit area that tracked the artwork would let the character hop out from under
   the cursor, fire a leave, re-arm, land back under it, fire an enter, and hop
   again -- forever. */
.study-companion .companion-art{
  display:block;width:100%;height:100%;overflow:visible;pointer-events:none;
  transform:scaleX(var(--companion-facing));transform-origin:center;
}

/* --- the rig ------------------------------------------------------------- */
/* Every group that scales or rotates declares `transform-box:fill-box`. Without
   it a percentage origin resolves against the 48x48 viewport instead of the
   element, and every origin below would silently be wrong. */
/* Groups whose pivot is a proportion of themselves use fill-box. The LIMBS do
   not appear here: their origin is a joint, an absolute coordinate written onto
   the element from COMPANION_JOINTS, and overriding it from CSS is exactly the
   drift this architecture exists to prevent. The contract test enforces that. */
.companion-world,.companion-tilt,.companion-lean,.companion-project,.companion-turn,.companion-face,.companion-mark,
.companion-eyes-rest,.companion-eyes-active{transform-box:fill-box}

.companion-world{transform-origin:50% 100%}
.companion-body{transform-box:fill-box;transform-origin:50% 96%}
.companion-lean{transform-origin:50% 100%;
  transform:rotate(var(--companion-lean,0deg))
            scale(var(--companion-drag-sx,1),var(--companion-drag-sy,1))}
/* The projection layer. A turn is not a rotation of a flat drawing -- it is the
   far side of a solid compressing toward the near side. Scaling X about an
   origin set over the NEAR shoulder does exactly that, which is why the origin
   below is at 76% and not at the middle. */
.companion-project{transform-origin:76% 55%}
/* The support point, not the centre. A centre-origin squash moves the top and
   the bottom together, so the feet appear to sink through the floor. */
.companion-turn{transform-origin:50% 50%}
.companion-face{transform-origin:50% 50%}
.companion-shadow{transform-origin:center;transform-box:fill-box}
/* The knees rest slightly bent. A leg locked at a straight zero reads as a
   mannequin, leaves landing recovery nowhere to go, and lets interpolation
   wander into hyperextension. The artwork still reads as one continuous stub. */
.j-kneeNear,.j-kneeFar{transform:rotate(-5deg)}
.companion-eyes-active{opacity:0}

/* --- rest ---------------------------------------------------------------- */
/* Seven tenths of a percent over 4.6s. The ceiling is an absolute excursion in
   screen pixels rather than a percentage of the character, so growing the
   drawing means shrinking the fraction -- the learner's periphery does not care
   how big the thing breathing in it is. The shadow does not join in: a ground shadow that
   pulses with a pair of lungs is the clearest possible tell that this is a
   drawing rather than a body. Breathing sits on its own node above the deform
   so a hop multiplies with it instead of restarting it from phase zero. */
.companion-breathe{animation:companion-breathe 4.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes companion-breathe{
  0%,100%{transform:scale(1,1)}
  42%{transform:scale(1.007,.993)}
}
.companion-head{animation:companion-breathe-head 4.6s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay:.06s}
@keyframes companion-breathe-head{
  0%,100%{transform:translateY(0)}
  42%{transform:translateY(-.056px)}
}

/* A blink is 165ms of eyelid, not a six-second metronome eased across its whole
   period. The interval is randomised in JS as a renewal process, because a
   fixed cadence is recognised as a loop inside a minute. */
.study-companion.is-blink .companion-eyes-rest{animation:companion-blink .165s both}
@keyframes companion-blink{
  0%{transform:scaleY(1);animation-timing-function:cubic-bezier(.4,0,1,1)}
  33%{transform:scaleY(.12);animation-timing-function:linear}
  48%{transform:scaleY(.12);animation-timing-function:cubic-bezier(0,0,.2,1)}
  100%{transform:scaleY(1)}
}

/* --- the greeting -------------------------------------------------------- */
/* THREE HOPS, AND THE LEGS FOLD.

   Every leg now has a knee, so the tuck is a real fold rather than a rotation
   plus a vertical squash. Hip flexion is negative on screen for both legs and
   knee flexion positive for both -- the two sides differ in magnitude, never in
   sign, because both motions are sagittal. Arms are the opposite: lifting is
   lateral, so the near arm rises on negative and the far arm on positive.

   The order is proximal to distal, which is how a body actually leaves the
   ground: the pelvis lowers, hips and knees load, hips extend first, knees
   follow, and only then does contact release. Landing runs it backwards -- the
   leg tips arrive, knees and hips flex beneath the body's continuing momentum,
   the torso compresses, and the head arrives last.

   Timed off the reference recording rather than invented: 683ms hop to hop, of
   which 417ms is action and 267ms is rest. It rises in 117ms, HANGS for 133ms,
   and comes down over 167ms -- fast up, long float, unhurried landing. The
   earlier 760ms continuous version was nearly twice as slow with no rest
   between reps, which is why it read as laboured rather than buoyant.

   Every channel starts at a different moment:
   hips at +20ms, spine at +30, knees at +50, head at +60, clavicles at +70,
   shoulders at +90. The hierarchy gives spatial inheritance for free. It gives
   temporal overlap for nothing -- that has to be authored, and this is it.

   Angles are stylised recommendations bounded by the hard limits in
   COMPANION_RIG, and the contract test samples the whole interpolation rather
   than the keyframes alone. */
.study-companion.is-hop .companion-world{animation:companion-hop-world .65s 3 both}
.study-companion.is-hop .companion-torso{
  animation:companion-hop-torso .65s 3 both;animation-delay:.04s}
.study-companion.is-hop .companion-shadow{animation:companion-hop-shadow .65s 3 both}
.study-companion.is-hop .j-hipNear{animation:companion-hop-hipNear .65s 3 both;animation-delay:.02s}
.study-companion.is-hop .j-hipFar{animation:companion-hop-hipFar .65s 3 both;animation-delay:.02s}
.study-companion.is-hop .j-kneeNear{animation:companion-hop-kneeNear .65s 3 both;animation-delay:.05s}
.study-companion.is-hop .j-kneeFar{animation:companion-hop-kneeFar .65s 3 both;animation-delay:.05s}
.study-companion.is-hop .j-spine{animation:companion-hop-spine .65s 3 both;animation-delay:.03s}
.study-companion.is-hop .j-neck{animation:companion-hop-neck .65s 3 both;animation-delay:.06s}
.study-companion.is-hop .j-clavicleNear{
  animation:companion-hop-clavicleNear .65s 3 both;animation-delay:.07s}
.study-companion.is-hop .j-clavicleFar{
  animation:companion-hop-clavicleFar .65s 3 both;animation-delay:.07s}
.study-companion.is-hop .j-shoulderNear{
  animation:companion-hop-shoulderNear .65s 3 both;animation-delay:.09s}
.study-companion.is-hop .j-shoulderFar{
  animation:companion-hop-shoulderFar .65s 3 both;animation-delay:.09s}

@keyframes companion-hop-world{
  0%{transform:translateY(0px)}
  2%{transform:translateY(-0.6px)}
  4.6%{transform:translateY(-3.5px)}
  10%{transform:translateY(-6.2px)}
  18%{transform:translateY(-7.6px)}
  28%{transform:translateY(-7.6px)}
  38.5%{transform:translateY(-5.5px)}
  52%{transform:translateY(-2.5px)}
  64%{transform:translateY(0px)}
  70%{transform:translateY(0.9px)}
  78%{transform:translateY(0.2px)}
  100%{transform:translateY(0px)}
}
@keyframes companion-hop-hipNear{
  0%{transform:rotate(3deg)}
  2%{transform:rotate(5deg)}
  4.6%{transform:rotate(10deg)}
  10%{transform:rotate(14deg)}
  18%{transform:rotate(16deg)}
  28%{transform:rotate(16deg)}
  38.5%{transform:rotate(14deg)}
  52%{transform:rotate(8deg)}
  64%{transform:rotate(4deg)}
  70%{transform:rotate(10deg)}
  78%{transform:rotate(6deg)}
  100%{transform:rotate(3deg)}
}
@keyframes companion-hop-kneeNear{
  0%{transform:rotate(-5deg)}
  2%{transform:rotate(-16deg)}
  4.6%{transform:rotate(-45deg)}
  10%{transform:rotate(-85deg)}
  18%{transform:rotate(-105deg)}
  28%{transform:rotate(-105deg)}
  38.5%{transform:rotate(-92deg)}
  52%{transform:rotate(-55deg)}
  64%{transform:rotate(-20deg)}
  70%{transform:rotate(-46deg)}
  78%{transform:rotate(-26deg)}
  100%{transform:rotate(-5deg)}
}
@keyframes companion-hop-hipFar{
  0%{transform:rotate(3deg)}
  2%{transform:rotate(4deg)}
  4.6%{transform:rotate(8deg)}
  10%{transform:rotate(12deg)}
  18%{transform:rotate(13deg)}
  28%{transform:rotate(13deg)}
  38.5%{transform:rotate(11deg)}
  52%{transform:rotate(7deg)}
  64%{transform:rotate(3deg)}
  70%{transform:rotate(8deg)}
  78%{transform:rotate(5deg)}
  100%{transform:rotate(3deg)}
}
@keyframes companion-hop-kneeFar{
  0%{transform:rotate(-5deg)}
  2%{transform:rotate(-15deg)}
  4.6%{transform:rotate(-40deg)}
  10%{transform:rotate(-78deg)}
  18%{transform:rotate(-98deg)}
  28%{transform:rotate(-98deg)}
  38.5%{transform:rotate(-86deg)}
  52%{transform:rotate(-50deg)}
  64%{transform:rotate(-18deg)}
  70%{transform:rotate(-42deg)}
  78%{transform:rotate(-24deg)}
  100%{transform:rotate(-5deg)}
}
@keyframes companion-hop-spine{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(1deg)}
  4.6%{transform:rotate(0deg)}
  10%{transform:rotate(0.5deg)}
  18%{transform:rotate(1.5deg)}
  28%{transform:rotate(1.5deg)}
  38.5%{transform:rotate(1deg)}
  52%{transform:rotate(0deg)}
  64%{transform:rotate(2deg)}
  70%{transform:rotate(4deg)}
  78%{transform:rotate(1deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-neck{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(0.5deg)}
  4.6%{transform:rotate(1.2deg)}
  10%{transform:rotate(0deg)}
  18%{transform:rotate(-1deg)}
  28%{transform:rotate(-1deg)}
  38.5%{transform:rotate(-0.5deg)}
  52%{transform:rotate(0.5deg)}
  64%{transform:rotate(1.5deg)}
  70%{transform:rotate(2.5deg)}
  78%{transform:rotate(1deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-shoulderNear{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(2deg)}
  4.6%{transform:rotate(-12deg)}
  10%{transform:rotate(-32deg)}
  18%{transform:rotate(-45deg)}
  28%{transform:rotate(-45deg)}
  38.5%{transform:rotate(-38deg)}
  52%{transform:rotate(-18deg)}
  64%{transform:rotate(-2deg)}
  70%{transform:rotate(5deg)}
  78%{transform:rotate(2deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-shoulderFar{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(-2deg)}
  4.6%{transform:rotate(11deg)}
  10%{transform:rotate(30deg)}
  18%{transform:rotate(42deg)}
  28%{transform:rotate(42deg)}
  38.5%{transform:rotate(35deg)}
  52%{transform:rotate(16deg)}
  64%{transform:rotate(2deg)}
  70%{transform:rotate(-4deg)}
  78%{transform:rotate(-2deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-clavicleNear{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(0deg)}
  4.6%{transform:rotate(1deg)}
  10%{transform:rotate(4deg)}
  18%{transform:rotate(7deg)}
  28%{transform:rotate(7deg)}
  38.5%{transform:rotate(6deg)}
  52%{transform:rotate(3deg)}
  64%{transform:rotate(0deg)}
  70%{transform:rotate(0deg)}
  78%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-clavicleFar{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(0deg)}
  4.6%{transform:rotate(-1deg)}
  10%{transform:rotate(-4deg)}
  18%{transform:rotate(-7deg)}
  28%{transform:rotate(-7deg)}
  38.5%{transform:rotate(-6deg)}
  52%{transform:rotate(-3deg)}
  64%{transform:rotate(0deg)}
  70%{transform:rotate(0deg)}
  78%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-torso{
  0%{transform:scale(1,1)}
  2%{transform:scale(1.02,0.98)}
  4.6%{transform:scale(0.97,1.031)}
  10%{transform:scale(0.985,1.015)}
  18%{transform:scale(0.99,1.01)}
  28%{transform:scale(0.99,1.01)}
  38.5%{transform:scale(0.99,1.01)}
  52%{transform:scale(1.01,0.99)}
  64%{transform:scale(1.06,0.943)}
  70%{transform:scale(1.08,0.926)}
  78%{transform:scale(0.99,1.01)}
  100%{transform:scale(1,1)}
}
@keyframes companion-hop-shadow{
  0%{transform:scaleX(1);opacity:0.26}
  2%{transform:scaleX(0.99);opacity:0.26}
  4.6%{transform:scaleX(0.9);opacity:0.24}
  10%{transform:scaleX(0.8);opacity:0.21}
  18%{transform:scaleX(0.74);opacity:0.2}
  28%{transform:scaleX(0.74);opacity:0.2}
  38.5%{transform:scaleX(0.8);opacity:0.21}
  52%{transform:scaleX(0.9);opacity:0.24}
  64%{transform:scaleX(1.03);opacity:0.27}
  70%{transform:scaleX(1.05);opacity:0.27}
  78%{transform:scaleX(1);opacity:0.26}
  100%{transform:scaleX(1);opacity:0.26}
}

/* THE EXTRA TURN. Not a rotate() -- the far side of a solid compressing toward
   the near side is what a body actually does when it turns away from you. It
   runs once across the whole performance rather than per hop: the character
   leans into the greeting, holds that engagement, and releases at the end. */
.study-companion.is-hop .companion-project{
  animation:companion-project 1.95s cubic-bezier(.4,0,.3,1) both}
.study-companion.is-hop .companion-turn{
  animation:companion-project-face 1.95s cubic-bezier(.4,0,.3,1) both}
.study-companion.is-hop .companion-mark{
  animation:companion-project-mark 1.95s cubic-bezier(.4,0,.3,1) both}
@keyframes companion-project{
  0%{transform:scaleX(1)}10%,86%{transform:scaleX(.978)}100%{transform:scaleX(1)}
}
@keyframes companion-project-face{
  0%{transform:translateX(0)}10%,86%{transform:translateX(.75px)}100%{transform:translateX(0)}
}
@keyframes companion-project-mark{
  0%{transform:translateX(0)}10%,86%{transform:translateX(.45px)}100%{transform:translateX(0)}
}

/* THE EXPRESSION SWAP. At rest the face is an asymmetric pair of capsules --
   quiet, and the only pharmacy in the whole drawing. During the greeting it
   becomes two closed curved eyes, and the creature stops being a readout and
   starts being a character. Rest is identity; this is emotion. */
.study-companion.is-hop .companion-eyes-rest{animation:companion-eyes-out 1.95s both}
.study-companion.is-hop .companion-eyes-active{animation:companion-eyes-in 1.95s both}
@keyframes companion-eyes-out{0%{opacity:1}5%,92%{opacity:0}100%{opacity:1}}
@keyframes companion-eyes-in{0%{opacity:0}5%,92%{opacity:1}100%{opacity:0}}

/* Dozing: the breath halves again and the eyes close most of the way. No snore,
   no twitch -- a periodic flourish on a sleeping character is motion onset in a
   learner's periphery, which is the one thing the attention evidence is
   unambiguous about. */
.study-companion.is-doze .companion-breathe{
  animation:companion-doze 6s cubic-bezier(.45,0,.55,1) infinite}
.study-companion.is-doze .companion-head{animation:none;transform:none}
.study-companion.is-doze .companion-eyes-rest{opacity:0}
.study-companion.is-doze .companion-eyes-active{opacity:1}
.study-companion.is-doze{opacity:.72}
@keyframes companion-doze{
  0%,100%{transform:scale(1,1)}
  42%{transform:scale(1.006,.994)}
}


/* RULE ONE. A live activity owns the learner's attention completely.

   An earlier version paused every animation here. That was the right intent and
   the wrong mechanism: pausing freezes the character mid-keyframe in a pose
   nobody designed -- a half-blink, an arm caught mid-swing. The problem was
   never stillness. It was stillness in an undesigned pose.

   So the character SNAPS to a waiting pose instead, reached without a
   transition, because a settle animating next to a freshly painted question is
   motion onset in the periphery. Hover is dead here too: a cursor drifting over
   the companion mid-question must do nothing at all. */
body.activity-in-play .study-companion{
  opacity:.55;filter:saturate(.6);pointer-events:none;
}
body.activity-in-play .study-companion *{animation:none !important;transition:none !important}
body.activity-in-play .companion-world,
body.activity-in-play .companion-project,
body.activity-in-play .companion-breathe,
body.activity-in-play .companion-torso,
body.activity-in-play .companion-head,
body.activity-in-play .companion-turn,
body.activity-in-play .companion-face,
body.activity-in-play .companion-mark,
body.activity-in-play .companion-body,
body.activity-in-play .companion-pelvis,
body.activity-in-play .companion-lean{transform:none !important}
/* The waiting pose is designed, and the knees keep their neutral bend: a leg
   snapped to a locked zero reads as a mannequin, and that is the pose a learner
   stares at for the whole question. */
body.activity-in-play .companion-pose{transform:none !important}
body.activity-in-play .j-kneeNear,
body.activity-in-play .j-kneeFar{transform:rotate(-5deg) !important}
body.activity-in-play .companion-eyes-rest{opacity:1 !important}
body.activity-in-play .companion-eyes-active{opacity:0 !important}
body.activity-in-play .companion-shadow{transform:none !important;opacity:.26 !important}

/* Reduced motion is prevented, not shortened -- but the greeting is not simply
   deleted. The eyes still close and the body still gives a couple of percent of
   compression, so the character acknowledges the learner without travelling
   through space. Dragging still repositions it, because that is functional and
   directly controlled; every decorative consequence of the drag goes. */
@media (prefers-reduced-motion:reduce){
  .study-companion *{animation:none !important;transition:none !important}
  .study-companion{transition:none}
  .companion-lean{transform:none}
  .study-companion.is-hop .companion-torso{
    animation:companion-greet-quiet 1.2s ease-in-out !important}
  .study-companion.is-hop .companion-eyes-rest{opacity:0}
  .study-companion.is-hop .companion-eyes-active{opacity:1}
}
@keyframes companion-greet-quiet{
  0%,100%{transform:scale(1,1)}
  30%,60%{transform:scale(1.02,.9804)}
}

/* The reduced-motion acknowledgement, and it is a real reply rather than the
   absence of one: the eyes close, the body gives two percent of compression,
   and nothing travels through space. Someone who asked for less motion still
   gets greeted. */
.study-companion.is-quiet .companion-torso{
  animation:companion-greet-quiet .7s ease-in-out both}
.study-companion.is-quiet .companion-eyes-rest{opacity:0}
.study-companion.is-quiet .companion-eyes-active{opacity:1}

@media (max-width:640px){
  /* On a phone the workspace is the whole screen; a character wandering over
     it costs more than it gives. */
  .study-companion{display:none}
}

.companion-motion-settings{display:flex;flex-wrap:wrap;gap:var(--primitive-spacing-10px) var(--primitive-spacing-18px);margin:12px 0 14px;
  padding:0;border:0}.companion-motion-settings legend{font-size:var(--primitive-font-size-12px);font-weight:750;
  color:var(--text-secondary);margin-bottom:8px}.companion-motion-settings label{display:inline-flex;
  align-items:center;gap:var(--primitive-spacing-6px);font-size:var(--primitive-font-size-13px);font-weight:650;cursor:pointer}
/* PHAR 520 Lab Final performance curriculum */
.lab-final-entry{border-left:3px solid var(--action-primary-bg,var(--visual-lab-final-entry-accent-fallback))}
/* One border per box. A bordered card inside a bordered card reads as
   template output, so every list on these screens is separated by rules and
   spacing instead. */
.lab-final-hero,.lab-mock-boundary,.lab-attempt-boundary{border-top:4px solid var(--action-primary-bg,var(--visual-lab-final-hero-accent-fallback))}
.lab-stack{display:grid;gap:0}
.lab-row{padding:var(--primitive-spacing-16px) 0;border-bottom:1px solid var(--border-subtle)}
.lab-row:first-of-type{padding-top:var(--primitive-spacing-4px)}
.lab-row:last-child{border-bottom:0;padding-bottom:0}
.lab-row>p{margin:6px 0 0;line-height:1.5}
.lab-row>ol,.lab-row>ul{margin:8px 0 0;padding-left:var(--primitive-spacing-1-15rem);line-height:1.55}
.lab-row-name{display:flex;align-items:center;gap:var(--primitive-spacing-10px);flex-wrap:wrap}
.lab-row-name b{font-size:var(--primitive-font-size-1-02rem)}
.lab-row .meter{margin:10px 0 0}
.lab-method{display:grid;gap:0;list-style:none;padding:0;margin:1rem 0 0}
.lab-method li{display:grid;grid-template-columns:2rem 1fr;gap:var(--primitive-spacing-8rem);align-items:center;padding:var(--primitive-spacing-7rem) 0;border-bottom:1px solid var(--border-subtle)}
.lab-method li:last-child{border-bottom:0}
.lab-method li b{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--action-primary-bg);color:var(--visual-lab-method-text);font-size:var(--primitive-font-size-85rem)}
.lab-tags{display:flex;gap:var(--primitive-spacing-6px);flex-wrap:wrap;margin:12px 0 0}
.lab-learn-hero,.lab-learn-stage,.lab-form-tabs{max-width:920px;margin-left:auto;margin-right:auto}
.lab-learn-hero{border-top:4px solid var(--action-primary-bg);padding:var(--primitive-spacing-28px) var(--primitive-spacing-32px)}
.lab-learn-hero h1{margin:8px 0 6px;font-size:var(--primitive-font-size-clamp-2rem-4vw-3rem);letter-spacing:-.035em}
.lab-learn-hero>p{max-width:720px;line-height:1.55}
.lab-learn-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--primitive-spacing-8px);margin:22px 0 14px}
.lab-learn-flow span{display:flex;align-items:center;gap:var(--primitive-spacing-7px);padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-999px);font-size:var(--primitive-font-size-84rem)}
.lab-learn-flow span::first-letter{color:var(--action-primary-bg)}
.lab-learn-reference{margin-top:18px;padding-top:var(--primitive-spacing-14px);border-top:1px solid var(--border-subtle)}
.lab-learn-reference>summary,.lab-grammar-reference>summary{cursor:pointer;font-weight:700;color:var(--text-primary)}
.lab-form-tabs{display:flex;flex-wrap:nowrap;gap:var(--primitive-spacing-6px);margin-top:18px;margin-bottom:12px;padding:var(--primitive-spacing-4px);overflow-x:auto;scrollbar-width:thin}
.lab-form-tabs button{flex:0 0 auto;padding:var(--primitive-spacing-9px) var(--primitive-spacing-13px);border:1px solid transparent;border-radius:var(--primitive-radius-999px);background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--primitive-font-size-82rem);font-weight:650;cursor:pointer}
.lab-form-tabs button:hover{color:var(--text-primary);background:var(--surface-raised)}
.lab-form-tabs button.on{color:var(--on-accent);background:var(--action-primary-bg);border-color:var(--action-primary-bg)}
.lab-learn-stage{padding:var(--primitive-spacing-30px) var(--primitive-spacing-34px)}
.lab-learn-stage>h2{margin:7px 0 8px;font-size:var(--primitive-font-size-clamp-1-7rem-3vw-2-35rem);letter-spacing:-.025em}
.lab-stage-lede{max-width:760px;margin:0;line-height:1.6;color:var(--text-secondary)}
.lab-key-distinction{margin:20px 0 16px;padding:var(--primitive-spacing-12px) var(--primitive-spacing-16px);border-left:3px solid var(--action-primary-bg);background:var(--surface-raised);color:var(--text-primary)}
.lab-key-distinction p{margin:3px 0 0;line-height:1.5;color:inherit}
.lab-grammar-reference{margin:18px 0;padding:var(--primitive-spacing-12px) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.lab-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--primitive-spacing-16px);margin:16px 0 24px}
.lab-case-card{margin:0;display:flex;flex-direction:column;gap:var(--primitive-spacing-4px)}
.lab-case-card h3{margin:0}
.lab-case-card .row{margin-top:auto;padding-top:var(--primitive-spacing-12px)}
.lab-marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--primitive-spacing-6px) var(--primitive-spacing-10px);margin:12px 0 0;padding:var(--primitive-spacing-12px) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.lab-mark{display:grid;gap:var(--primitive-spacing-2px);min-width:0;font-size:var(--primitive-font-size-75rem);font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.lab-mark small{font-weight:500;font-size:var(--primitive-font-size-68rem);color:var(--text-secondary,var(--visual-lab-mark-muted-fallback));overflow-wrap:anywhere}
.lab-mark.is-sourced{color:var(--action-primary-bg,var(--visual-lab-mark-source-fallback))}
.lab-mark.is-off{opacity:.45}
.lab-rx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--primitive-spacing-24px);margin:18px 0 0}
.lab-rx div{padding:var(--primitive-spacing-10px) 0;border-bottom:1px solid var(--border-subtle)}
.lab-rx dt{text-transform:capitalize;color:var(--text-secondary,var(--visual-lab-rx-muted-fallback));font-size:var(--primitive-font-size-78rem);font-weight:700;letter-spacing:.02em}
.lab-rx dd{margin:4px 0 0;font-weight:600;line-height:1.45}
.lab-rx dd ul{margin:0;padding-left:var(--primitive-spacing-1-05rem);font-weight:500}
.lab-answer-sheet{display:grid;gap:var(--primitive-spacing-22px)}
.lab-answer-sheet label{display:grid;gap:var(--primitive-spacing-8px)}
.lab-answer-sheet textarea{width:100%;box-sizing:border-box;resize:vertical;line-height:1.5}
.lab-response-review{white-space:pre-wrap;margin:8px 0 0;line-height:1.55}
.lab-checklist{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:var(--primitive-spacing-6px)}
.lab-checklist li{display:grid;gap:var(--primitive-spacing-2px);padding-left:var(--primitive-spacing-1-35rem);position:relative;line-height:1.45}
.lab-checklist li small{color:var(--text-secondary,var(--visual-lab-checklist-muted-fallback));font-size:var(--primitive-font-size-82rem)}
.lab-checklist li::before{position:absolute;left:0;top:0;font-weight:700}
.lab-checklist li.is-hit::before{content:"\2713";color:var(--ok,var(--visual-lab-checklist-hit-fallback))}
.lab-checklist li.is-miss::before{content:"\2715";color:var(--warning-fg,var(--visual-lab-checklist-miss-marker-fallback))}
.lab-checklist li.is-miss{color:var(--warning-fg,var(--visual-lab-checklist-miss-text-fallback))}
.lab-checklist li.is-critical::before{content:"!";color:var(--danger,var(--visual-lab-checklist-critical-marker-fallback))}
.lab-checklist li.is-critical{color:var(--danger,var(--visual-lab-checklist-critical-text-fallback));font-weight:600}
.lab-checklist.is-prompt li::before{content:"\2022";color:var(--text-secondary,var(--visual-lab-checklist-prompt-fallback))}
.lab-mock-sheet{margin-top:20px}
.lab-review-domains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--primitive-spacing-24px);margin:12px 0}
.lab-review-domains section{padding:var(--primitive-spacing-12px) 0;border-bottom:1px solid var(--border-subtle)}
.lab-review-domains h4{margin:0 0 8px}
@media(max-width:760px){.lab-case-grid,.lab-rx,.lab-review-domains{grid-template-columns:1fr}
  .lab-marks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lab-grammar-steps{margin:6px 0 0;line-height:1.6}
.lab-worked{margin-top:10px;padding:0 0 0 var(--primitive-spacing-14px);border-left:2px solid var(--border-subtle)}
.lab-worked summary{cursor:pointer;font-weight:600;font-size:var(--primitive-font-size-9rem);padding:var(--primitive-spacing-4px) 0}
.lab-worked[open] summary{margin-bottom:4px}
.lab-worked p{margin:8px 0 0;line-height:1.55}
.lab-worked-head{margin-top:12px}
.lab-worked .ghost.compact{margin-top:4px}
.lab-worked-focus{margin:24px 0 0;padding:0;border:0}
.lab-worked-focus>summary{padding:var(--primitive-spacing-14px) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);font-size:var(--primitive-font-size-1rem)}
.lab-worked-focus>summary span{display:grid;gap:var(--primitive-spacing-2px)}
.lab-worked-focus>summary small{color:var(--action-primary-bg);font-size:var(--primitive-font-size-72rem);text-transform:uppercase;letter-spacing:.08em}
.lab-givens{margin:0;padding:var(--primitive-spacing-24px) 0;border-bottom:1px solid var(--border-subtle)}
.lab-givens .eyebrow{display:block;margin-bottom:12px}
.lab-givens dl{display:grid;gap:var(--primitive-spacing-9px);margin:0}
.lab-givens dl>div{display:grid;grid-template-columns:minmax(105px,135px) 1fr;gap:var(--primitive-spacing-10px)}
.lab-givens dt{font-weight:650;color:var(--text-secondary)}
.lab-givens dd{margin:0}
.lab-givens-list{display:grid;grid-template-columns:minmax(105px,135px) 1fr;gap:var(--primitive-spacing-10px);margin-top:12px}
.lab-givens ul{margin:0;padding-left:var(--primitive-spacing-1-1rem)}
/* The answer sheet: what goes on the blank prescription, at a glance.
   Procedure and BUD are scanned, not read -- the lines are short, the type is
   a size up from body copy, and nothing sits between them and the eye. The
   reasoning lives in .lab-why underneath, closed by default. */
.lab-write-this{margin:16px 0 0}
.lab-write-this .eyebrow{display:block;margin-bottom:10px}
.lab-answer-lines{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:lab-line;
  border-top:1px solid var(--border-subtle)}
.lab-answer-lines li{counter-increment:lab-line;position:relative;
  padding:var(--primitive-spacing-11px) 0 var(--primitive-spacing-11px) var(--primitive-spacing-40px);border-bottom:1px solid var(--border-subtle);
  font-size:var(--primitive-font-size-1-02rem);line-height:1.45;color:var(--text-primary)}
ol.lab-answer-lines li::before{content:counter(lab-line) ".";position:absolute;left:0;top:11px;
  width:28px;text-align:right;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-weight:700}
ul.lab-answer-lines li::before{content:"";position:absolute;left:11px;top:20px;
  width:5px;height:5px;border-radius:50%;background:var(--action-primary-bg)}
ul.lab-answer-lines li:first-child{font-weight:700}
.lab-why{margin-top:16px}
.lab-why>summary{cursor:pointer;color:var(--text-secondary);font-size:var(--primitive-font-size-85rem);font-weight:650}
.lab-why[open]>summary{color:var(--text-primary)}
.lab-why .lab-teaching-steps{margin-top:12px}
.lab-teaching-steps{display:grid;gap:var(--primitive-spacing-16px);margin:16px 0 0;padding:0;list-style:none;counter-reset:lab-teach}
.lab-teaching-steps li{counter-increment:lab-teach;position:relative;padding-left:var(--primitive-spacing-38px);line-height:1.5}
.lab-teaching-steps li::before{content:counter(lab-teach);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line-strong);border-radius:50%;color:var(--action-primary-bg);font-size:var(--primitive-font-size-75rem);font-weight:750}
.lab-teaching-steps p{margin:4px 0 0}
.lab-equation{padding:var(--primitive-spacing-10px) var(--primitive-spacing-12px);border-left:2px solid var(--action-primary-bg);background:var(--surface-raised);color:var(--text-primary)!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--primitive-font-size-88rem);overflow-wrap:anywhere}
.lab-worked-block{padding:var(--primitive-spacing-28px) 0}
.lab-worked-block+.lab-worked-block{margin:0;border-top:1px solid var(--border-subtle)}
.lab-worked-head{display:flex;align-items:center;gap:var(--primitive-spacing-11px);margin:0}
.lab-worked-head h3{margin:1px 0 0;font-size:var(--primitive-font-size-1-3rem)}
.lab-worked-head small{display:block;color:var(--text-secondary);font-size:var(--primitive-font-size-68rem);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.lab-domain-index{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--primitive-radius-9px);background:var(--accent-soft);color:var(--action-primary-bg);font-size:var(--primitive-font-size-82rem);font-weight:800}
.lab-worked-answer{padding:var(--primitive-spacing-12px) 0;color:var(--text-primary)}
.lab-worked-action{padding:var(--primitive-spacing-22px) 0 var(--primitive-spacing-4px);border-top:1px solid var(--border-subtle)}
.lab-label-preview{max-width:820px;margin:18px auto 4px;padding:var(--primitive-spacing-20px) var(--primitive-spacing-22px);border:var(--visual-lab-label-preview-outline);border-radius:var(--primitive-radius-2px);background:var(--visual-lab-label-preview-surface);color:var(--visual-lab-label-preview-text);box-shadow:var(--visual-lab-label-preview-shadow)}
.lab-label-preview p{color:var(--visual-lab-label-preview-text)}
.lab-label-top{display:flex;justify-content:space-between;gap:var(--primitive-spacing-20px);font-size:var(--primitive-font-size-1-08rem)}
.lab-label-patient{margin-top:8px!important;font-size:var(--primitive-font-size-1-08rem)}
.lab-label-product{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--primitive-spacing-24px);margin-top:34px;font-size:var(--primitive-font-size-1-12rem)}
.lab-label-directions{margin-top:24px!important;font-size:var(--primitive-font-size-1-13rem);font-weight:700;line-height:1.5!important}
.lab-label-meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--primitive-spacing-4px) var(--primitive-spacing-24px);margin-top:22px}
.lab-label-meta p{margin:5px 0!important}
.lab-label-blank{display:inline-block;min-width:96px;border-bottom:var(--visual-lab-label-blank-bottom-outline);color:transparent}
.lab-label-aux{margin-top:22px;padding-top:var(--primitive-spacing-14px);border-top:var(--visual-lab-label-aux-top-outline);text-align:center}
.lab-label-aux>ul{display:flex;justify-content:center;gap:var(--primitive-spacing-8px);flex-wrap:wrap;margin:9px 0 0;padding:0;list-style:none}
.lab-label-aux li{padding:var(--primitive-spacing-6px) var(--primitive-spacing-9px);border:var(--visual-lab-label-aux-outline);border-radius:var(--primitive-radius-4px);font-weight:650}
.lab-bud-date-note{max-width:820px;margin:12px auto 0!important;padding:var(--primitive-spacing-11px) var(--primitive-spacing-13px);border-left:3px solid var(--action-primary-bg);background:var(--surface-raised);color:var(--text-primary)!important}
@media(max-width:600px){
  .lab-learn-hero,.lab-learn-stage{padding:var(--primitive-spacing-22px) var(--primitive-spacing-18px)}
  .lab-learn-flow{grid-template-columns:repeat(2,1fr)}
  .lab-givens dl>div{grid-template-columns:1fr;gap:var(--primitive-spacing-1px)}
  .lab-givens-list{grid-template-columns:1fr;gap:var(--primitive-spacing-4px)}
  .lab-label-preview{padding:var(--primitive-spacing-14px)}
  .lab-label-top,.lab-label-product{align-items:start;flex-direction:column;display:flex;gap:var(--primitive-spacing-6px)}
  .lab-label-product{margin-top:24px}
  .lab-label-directions{font-size:var(--primitive-font-size-1rem)}
  .lab-label-meta{grid-template-columns:1fr}
}


/* --- Earlier sign-in treatment --------------------------------------------
   These control and artwork colors remain scoped to account access. The page
   canvas is owned by the two route rules below. */
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){






}
/* the column and the wash are canvas work now */
body.auth-environment:not(.landing-environment)::before,
body.auth-environment:not(.landing-environment)::after{
  content:none;display:none;background:none;border:0}

/* The form: Eclipse tiers, no navy. */
body.auth-environment:not(.landing-environment) main .card.auth-card{

  }
/* §4.9: a groove on a near-black surface is drawn with light, not with fill --
   a hard shadow under the top lip and a faint light line off the far wall. */
body.auth-environment:not(.landing-environment) main .auth-field input{
  background:var(--visual-auth-auth-field-surface);border-color:var(--visual-auth-auth-field-border);color:var(--visual-auth-auth-field-text);
  box-shadow:var(--visual-auth-auth-field-shadow)}
body.auth-environment:not(.landing-environment) main .auth-field input:focus{
  border-color:var(--visual-auth-auth-field-border-12d8e2d8);box-shadow:var(--visual-auth-auth-field-shadow-1083d68d)}
body.auth-environment:not(.landing-environment) main .auth-field label{color:var(--visual-auth-auth-field-text-2e731401)}

/* Secondary actions are neutral. Blue owns brand and environment, gold owns
   the primary action, neutrals own everything else -- so no blue text. */
body.auth-environment:not(.landing-environment) main .auth-switch{color:var(--visual-auth-auth-switch-text-cde122bf)}
body.auth-environment:not(.landing-environment) main .auth-switch-link{
  color:var(--visual-auth-auth-switch-link-text-2c6a9181)!important;text-decoration:none;

  border-bottom:var(--visual-auth-auth-switch-link-bottom-outline);padding-bottom:var(--primitive-spacing-1px)!important}
body.auth-environment:not(.landing-environment) main .auth-switch-link:hover{

  color:var(--visual-auth-auth-switch-link-text-hover)!important;border-bottom-color:var(--visual-auth-auth-switch-link-border-bottom-ink-hover)}
body.auth-environment:not(.landing-environment) .auth-recovery-link{color:var(--visual-auth-auth-recovery-link-text-c5239532)}
body.auth-environment:not(.landing-environment) .auth-recovery-link:hover{color:var(--visual-auth-auth-recovery-link-text-hover)}
body.auth-environment:not(.landing-environment) .password-toggle{color:var(--visual-auth-password-toggle-text-4a857498)}
body.auth-environment:not(.landing-environment) .legal-note a{color:var(--visual-auth-legal-note-text-ec3511f3)}
body.auth-environment:not(.landing-environment) main .auth-intro,
body.auth-environment:not(.landing-environment) main .auth-password-guidance,
body.auth-environment:not(.landing-environment) main .auth-registration-card .legal-note{color:var(--visual-auth-auth-intro-text-c09b3168)}
body.auth-environment:not(.landing-environment) .site-footer,
body.auth-environment:not(.landing-environment) .site-footer a{color:var(--visual-auth-site-footer-text-939798e7)}
body.auth-environment:not(.landing-environment) .site-footer a:hover{color:var(--visual-auth-site-footer-text-hover-12b38229)}

/* The form and the plane are one composition. The plane is centred on the
   viewport, so the sign-in column centres with it -- a centred body with the
   card still pinned to the left edge is two unrelated objects sharing a
   screen, which is exactly what it looked like. */
body.auth-environment:not(.landing-environment) main{margin-inline:auto}
body.auth-environment:not(.landing-environment) .site-footer{justify-content:center}

/* --- account access on paper ----------------------------------------
   Sign-in and registration sit on the product's own white paper, with the
   card on it and blue owning the action -- the same blue the product's
   primary buttons use. (The page was once a paper/navy "threshold" with a
   starfield on the far side; that composition and its canvas were retired,
   7.26. The --threshold-* names below are that history, not a boundary.) */
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){
  /* The header carries only the brand here, and the brand sits on the paper
     side of the boundary at every width. Ink, not light. */
  --header-bg:transparent;

  --header-focus:color-mix(in srgb,var(--action-primary-bg) 72%,transparent);
  /* The shadow tint is the page's own navy. This is rule 2. */

  --threshold-card-width:clamp(400px,37vw,520px);
  /* The card's centre sits at 41.8% of the viewport: left of centre, so the
     field has room to be a place rather than a margin. */
  --threshold-card-bias:16.4%}
/* One owner per signed-out canvas. The server marks a route-pending shell;
   the client assigns landing or account access once it reads the hash. <html>
   paints elastic overscroll and <body> paints the document. */
html.auth-environment.auth-route-pending,
body.auth-environment.auth-route-pending,
html.auth-environment.landing-environment,
body.auth-environment.landing-environment{
  }
html.auth-environment.account-access-environment,
body.auth-environment.account-access-environment{
  }

/* The card centres inside the width the bias leaves it, which keeps its
   position proportional instead of pinned to a pixel that was only ever
   correct at one window size. */
body.auth-environment:not(.landing-environment) main{
  /* The old column layout gave main a fixed --auth-column width and hung it on
     the left edge. The threshold has no column: the page is the composition,
     and the card's place in it comes from the bias below. */
  width:100%;max-width:none;margin-inline:0;
  padding-right:calc(var(--threshold-card-bias) + var(--primitive-spacing-28px));
  /* main is a centring grid. Without an explicit column the track sizes to the
     card's content, the card's own width:100% becomes cyclic against it, and
     the card collapses to max-content -- which is how a 520px card rendered
     at 232px. The column must own the width. */
  grid-template-columns:minmax(0,1fr);justify-items:center}
body.auth-environment:not(.landing-environment) main .card.auth-card{
  width:min(100%,var(--threshold-card-width));max-width:var(--threshold-card-width);
  margin:0 auto;padding:var(--primitive-spacing-38px) var(--primitive-spacing-40px) var(--primitive-spacing-34px);
  border-radius:var(--primitive-radius-18px);
  background:var(--visual-threshold-card-surface);
  border:1px solid var(--visual-threshold-card-outline);
  color:var(--text-primary);
  box-shadow:var(--visual-threshold-card-shadow)}

/* The form returns to the light theme it always had in the workspace. */
body.auth-environment:not(.landing-environment) main .card.auth-card{

  }
body.auth-environment:not(.landing-environment) main .auth-field input{
  background:var(--visual-threshold-field-surface);
  border-color:var(--visual-threshold-field-border);
  color:var(--visual-threshold-field-text);
  box-shadow:var(--visual-threshold-field-shadow)}
body.auth-environment:not(.landing-environment) main .auth-field input:focus{
  border-color:var(--action-primary-bg);box-shadow:var(--visual-threshold-field-shadow-focus)}
body.auth-environment:not(.landing-environment) main .auth-field input{color-scheme:light}
body.auth-environment:not(.landing-environment) main .auth-field label{color:var(--text-secondary)}
body.auth-environment:not(.landing-environment) main .auth-intro,
body.auth-environment:not(.landing-environment) main .auth-password-guidance,
body.auth-environment:not(.landing-environment) main .auth-registration-card .legal-note{color:var(--text-secondary)}

/* Rule: blue owns the action on paper. */
body.auth-environment:not(.landing-environment) main button.primary,
body.auth-environment:not(.landing-environment) main a.primary{
  background:var(--action-primary-bg);border:1px solid var(--action-primary-bg);color:var(--auth-environment-on-accent);
  box-shadow:var(--visual-threshold-primary-shadow)}
body.auth-environment:not(.landing-environment) main :is(button.primary,a.primary):is(:active,[data-action-owned="true"]):not(:disabled){
  background:var(--action-primary-press);border-color:var(--action-primary-press)}
body.auth-environment:not(.landing-environment) main button.primary:disabled{
  background:var(--visual-threshold-primary-surface-disabled);
  border-color:var(--visual-threshold-primary-surface-disabled);
  color:var(--visual-threshold-primary-text-disabled);box-shadow:none}
body.auth-environment:not(.landing-environment) main .auth-switch{color:var(--text-secondary)}
body.auth-environment:not(.landing-environment) main .auth-switch-link,
body.auth-environment:not(.landing-environment) .auth-recovery-link,
body.auth-environment:not(.landing-environment) .password-toggle,
body.auth-environment:not(.landing-environment) .legal-note a{color:var(--action-primary-bg)!important}
body.auth-environment:not(.landing-environment) main .auth-switch-link{
  border-bottom-color:transparent!important}
/* Secondary links are links, not actions. The emphasis they carried was tuned
   against gold on near-black; beside a blue button on paper it competes. */
body.auth-environment:not(.landing-environment) .auth-recovery-link{
  font-weight:600;text-decoration:none;border-bottom:0}
body.auth-environment:not(.landing-environment) .auth-recovery-link:hover{
  text-decoration:underline}

/* Authentication keeps one quiet escape hatch for account-access help. Legal
   acknowledgement belongs to account creation itself; the full policy set
   remains available on the public landing and policy surfaces. */
body.auth-environment:not(.landing-environment) .auth-footer-policy{display:none}
/* The remaining support link stays on the paper side: the boundary's foot is
   right of it at every width the canvas runs at. */
body.auth-environment:not(.landing-environment) .site-footer,
body.auth-environment:not(.landing-environment) .site-footer a{
  color:var(--visual-threshold-footer-text)}
body.auth-environment:not(.landing-environment) .site-footer{justify-content:flex-start}
body.auth-environment:not(.landing-environment) .site-footer a:hover{color:var(--action-primary-bg)}

.client-continuity-notice{position:sticky;top:0;z-index:10000;display:flex;align-items:center;justify-content:center;gap:var(--primitive-spacing-24px);padding:var(--primitive-spacing-14px) var(--primitive-spacing-20px);border-bottom:1px solid color-mix(in srgb,var(--warning-fg) 55%,var(--border-subtle));background:var(--surface-panel);box-shadow:var(--shadow-sm);color:var(--text-primary)}
.client-continuity-notice div{max-width:720px}.client-continuity-notice p{margin:3px 0 0;color:var(--text-secondary);font-size:var(--primitive-font-size-13px)}.client-continuity-notice button{flex:0 0 auto}@media(max-width:620px){.client-continuity-notice{align-items:stretch;flex-direction:column;gap:var(--primitive-spacing-10px)}}

/* Presentation roles consumed by markup assembled in feature JavaScript. */
.type-caption{font-size:var(--primitive-font-size-12px)}
.abbreviation-verification-note{font-size:var(--primitive-font-size-13px)}
.learn-meaning,.prompt.small.course-stage-prompt{font-size:var(--text-course-stage-prompt)}
.learn-notes{font-size:var(--primitive-font-size-13-5px)}
.course-stage-prompt,.conversion-visual-prompt{text-align:left}
.prompt.small.conversion-visual-prompt{font-size:var(--text-conversion-visual-prompt)}
.activity-score{font-size:var(--primitive-font-size-20px)}
.rx-correct-translation{font-size:var(--primitive-font-size-16px)}
.study-guide-frame{width:100%;height:80vh;border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px)}
.study-guide-frame-lecture{height:75vh}
.library-export-link{text-decoration:none;display:inline-block;padding:var(--primitive-spacing-9px) var(--primitive-spacing-15px);border:1px solid var(--border-subtle);border-radius:var(--primitive-radius-8px)}
.rx-custom-count{width:110px;padding:var(--primitive-spacing-6px) var(--primitive-spacing-10px)}

.course-library-group{margin:28px 0 36px}.course-library-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-personal-course-heading-gap);margin:0 0 12px}.course-library-heading h2{margin:0}.course-library-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-personal-course-action-gap)}.personal-course-empty{border-style:dashed}.personal-course-manage{margin-right:12px;align-self:center}.personal-course-dialog{width:min(640px,100%);max-height:min(760px,100%);overflow:auto;padding:var(--space-personal-course-dialog-padding)}.personal-course-dialog>label,.personal-import-form label,.personal-manager-actions label{display:grid;gap:var(--space-personal-course-field-gap);margin:14px 0}.personal-course-dialog input,.personal-course-dialog select,.personal-course-dialog textarea{width:100%}.personal-manager-actions form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-personal-course-action-gap);align-items:end}.personal-manager-actions form label{margin:0}.personal-import-form{margin:20px 0;padding:var(--space-personal-course-panel-padding);border:1px solid var(--border-subtle);border-radius:var(--radius-personal-course-panel)}.personal-exam-list{display:grid;gap:var(--space-personal-course-list-gap);margin:18px 0}.personal-exam-list .row{padding:var(--space-personal-course-row-block) 0;border-bottom:1px solid var(--border-subtle)}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-personal-course-action-gap);margin-top:20px}@media(max-width:640px){.personal-manager-actions form{grid-template-columns:1fr}.personal-course-manage{margin-right:6px;align-self:center}}

/* Personal courses follow the same quiet hierarchy as installed courses. */
.personal-course-settings{flex:0 0 auto;margin-right:4px;padding:var(--space-personal-course-control-block) var(--space-personal-course-control-inline);border:0;border-radius:var(--radius-personal-course-control);background:transparent;color:var(--text-secondary);font-weight:750;letter-spacing:2px;cursor:pointer}
.personal-course-settings:hover{background:color-mix(in srgb,var(--action-primary-bg) 9%,transparent);color:var(--action-primary-bg)}
/* Sharing is a course-level act, so it sits beside the course's settings
   in the header rather than inside the opened course: a glyph and a word,
   at the settings control's quiet weight. On a phone the word drops. */
.course-share-control{display:inline-flex;flex:0 0 auto;align-items:center;gap:var(--space-pref-stack);padding:var(--space-personal-course-control-block) var(--space-personal-course-control-inline);border:0;border-radius:var(--radius-personal-course-control);background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--text-pref-button);font-weight:650;cursor:pointer}
.course-share-control .control-glyph{width:var(--size-share-control-glyph);height:var(--size-share-control-glyph)}
.course-share-control:hover{background:color-mix(in srgb,var(--action-primary-bg) 9%,transparent);color:var(--action-primary-bg)}
.course-share-control:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media(max-width:600px){.course-share-control span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.course-shared-by{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-pref-stack);margin:0 0 var(--space-pref-follow);color:var(--text-secondary);font-size:var(--text-pref-meta)}
.course-shared-unavailable{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-pref-follow);margin:0 0 var(--space-pref-follow)}
.course-shared-unavailable p{margin:0;color:var(--text-secondary);font-size:var(--text-pref-value)}
.personal-course-empty-state{margin:4px 0 14px;padding:var(--space-personal-course-dialog-padding);border:1px dashed var(--line-strong);border-radius:var(--radius-personal-course-panel);background:color-mix(in srgb,var(--surface-card) 72%,transparent);text-align:center}
.personal-course-empty-state h3{margin:0 0 5px;font-size:var(--text-personal-course-title)}.personal-course-empty-state p{max-width:510px;margin:0 auto 16px;color:var(--text-secondary);font-size:var(--text-personal-course-body)}
.personal-add-section,.personal-add-lecture{border:0;background:transparent;color:var(--action-primary-bg);font-weight:680;cursor:pointer}
.personal-add-section{margin-top:10px;padding:var(--space-personal-course-row-block) var(--space-personal-course-edge)}.personal-exam-actions{display:flex;align-items:center;gap:var(--space-personal-course-action-gap);padding:var(--space-personal-course-row-block) var(--space-personal-course-section-inline)}.personal-add-lecture{padding:var(--space-personal-course-control-block) var(--space-personal-course-edge)}
.personal-draft-list{margin-top:18px;padding-top:var(--space-personal-builder-error-padding);border-top:1px solid var(--border-subtle)}.personal-draft-list h3{margin:0 0 4px;color:var(--text-secondary);font-size:var(--text-personal-course-caption);letter-spacing:.06em;text-transform:uppercase}

/* COURSES, BOTH FACETS.

   The facet bar is the switcher alone, identical on My Courses and Library,
   so changing facet changes the content under it and nothing above. Each
   facet then reads the way Skills does: a section heading carrying that
   section's commands, over its entries.

   My Courses draws the learner's courses as cards -- the same material as
   Skills' pinned cards: the panel surface lifted by elev-1, no outline --
   because each one opens into a body of its own. Library is a catalog of
   linked rows; subjects and school courses each open their own index. */
.courses-shelf{margin:0 0 var(--space-courses-section-after)}
/* My Courses' command bar: what you look at, then what you make. A wide
   screen sets the two groups at either end of one row; a phone gives each
   its own row, making first, its two commands sharing the width. */
.courses-shelf-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-courses-head-gap);margin:0 0 var(--space-courses-head-after)}
.courses-shelf-view,.courses-shelf-create{display:flex;align-items:center;gap:var(--space-courses-action-gap)}
.courses-shelf-count{color:var(--text-secondary);font-size:var(--text-courses-count);font-weight:600}
.course-card-list{display:grid;gap:var(--space-course-card-gap)}
/* A term: a plain heading over its courses, not another card -- the courses
   stay the objects, the term only names the group they sit in. */
.course-term{margin:0 0 var(--space-course-term-after)}
.course-term:last-child{margin-bottom:0}
.course-term.is-collapsed{margin-bottom:calc(var(--space-course-term-after) / 2)}
.course-term-head{display:flex;align-items:center;gap:var(--space-course-term-head-gap);margin:0 0 var(--space-course-term-head-after)}
.course-term.is-collapsed>.course-term-head{margin-bottom:0}
.course-term-toggle{display:flex;align-items:center;gap:var(--space-course-term-head-gap);flex:1 1 auto;min-width:0;margin:0;padding:var(--space-course-term-toggle-block) 0;border:0;background:transparent;color:var(--text-primary);text-align:left;cursor:pointer}
.course-term-toggle h3{margin:0;text-transform:none;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-course-term-heading);font-weight:650;letter-spacing:-.005em}
.course-term-toggle .disclosure-chevron{flex-basis:8px;width:8px;height:8px}
.course-term-toggle[aria-expanded="true"] .disclosure-chevron{transform:rotate(45deg)}
.course-term-toggle:hover .disclosure-chevron{border-color:var(--action-primary-bg)}
.course-term-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-personal-course-control)}
.course-term-settings{flex:0 0 auto;margin-right:var(--space-course-card-settings-edge);padding:var(--space-personal-course-control-block) var(--space-personal-course-control-inline);border:0;border-radius:var(--radius-personal-course-control);background:transparent;color:var(--text-secondary);font-weight:750;letter-spacing:.08em;cursor:pointer}
.course-term-settings:hover{background:color-mix(in srgb,var(--action-primary-bg) 9%,transparent);color:var(--action-primary-bg)}
.course-term-empty{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-course-term-head-gap);padding:var(--space-course-term-empty-block) var(--space-course-term-empty-inline);border:1px dashed var(--border-subtle);border-radius:var(--radius-course-card);color:var(--text-secondary)}
.course-term-empty p{margin:0}
.course-term-order{display:grid;gap:var(--space-personal-course-field-gap);margin:15px 0;color:var(--text-primary);font-size:var(--text-personal-course-label);font-weight:650}
.course-term-order>div{display:flex;flex-wrap:wrap;gap:var(--space-personal-course-action-gap)}
.course-disclosure.course-card,.course-disclosure.course-card:last-child{border:0;border-radius:var(--radius-course-card);background:var(--surface-panel);box-shadow:var(--elev-1);transition:box-shadow var(--theme-paint-duration,.16s) ease,background-color var(--theme-paint-duration,.2s) ease}
.course-disclosure.course-card.is-open{background:var(--surface-panel)}
.course-card:has(>.course-disclosure-header:hover){box-shadow:var(--elev-2)}
.course-card>.course-disclosure-header{padding-right:var(--space-course-card-settings-edge)}
.course-card .course-disclosure-toggle{gap:var(--space-course-card-mark-gap);padding:var(--space-course-card-block) var(--space-course-card-inline)}
.course-card .course-card-mark{flex:0 0 auto;width:var(--size-course-card-mark);height:var(--size-course-card-mark)}
.course-card .course-heading-copy{flex:1}
.course-card .course-title{font-size:var(--text-course-card-title)}
.course-code{color:var(--text-secondary);font-size:var(--text-course-code);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.course-card .course-disclosure-toggle>.disclosure-chevron{margin-right:var(--space-course-chevron-edge)}
.course-card .course-disclosure-panel>div{padding:0 var(--space-course-card-inline) var(--space-course-card-block) var(--space-course-card-panel-start)}
.course-card .personal-course-empty-state{display:flex;align-items:center;justify-content:space-between;gap:var(--space-course-empty-gap);margin:0 0 var(--space-course-empty-after);padding:var(--space-course-empty-block) var(--space-course-empty-inline);border:0;border-radius:var(--radius-course-empty);background:var(--surface-raised);text-align:left}
.course-card .personal-course-empty-state p{max-width:none;margin:0;color:var(--text-secondary);font-size:var(--text-personal-course-body)}
.course-card .personal-course-empty-state b{color:var(--text-primary)}
.course-card .personal-course-empty-state button{flex:0 0 auto}
/* A learner's course tile: the swatch they chose, carrying the course's
   short name in white. The ten data-swatch names are personal.COURSE_COLORS;
   each takes its numbered course-swatch role. */
.course-tile,.course-swatch{--course-swatch:var(--course-swatch-10)}
[data-swatch="ocean"]{--course-swatch:var(--course-swatch-01)}
[data-swatch="teal"]{--course-swatch:var(--course-swatch-02)}
[data-swatch="green"]{--course-swatch:var(--course-swatch-03)}
[data-swatch="olive"]{--course-swatch:var(--course-swatch-04)}
[data-swatch="amber"]{--course-swatch:var(--course-swatch-05)}
[data-swatch="brick"]{--course-swatch:var(--course-swatch-06)}
[data-swatch="berry"]{--course-swatch:var(--course-swatch-07)}
[data-swatch="plum"]{--course-swatch:var(--course-swatch-08)}
[data-swatch="indigo"]{--course-swatch:var(--course-swatch-09)}
[data-swatch="slate"]{--course-swatch:var(--course-swatch-10)}
.course-tile{display:grid;place-items:center;flex:0 0 auto;width:var(--size-course-card-mark);height:var(--size-course-card-mark);border-radius:var(--radius-course-tile);background:var(--course-swatch);color:var(--text-on-strong);font-size:var(--text-course-tile);font-weight:760;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums}
.course-swatch-picker{margin:15px 0;padding:0;border:0;min-width:0}
.course-swatch-picker legend{margin:0 0 var(--space-course-swatch-legend-after);padding:0;color:var(--text-primary);font-size:var(--text-personal-course-label);font-weight:650}
.course-swatches{display:flex;flex-wrap:wrap;gap:var(--space-course-swatches-gap)}
.course-swatch{position:relative;display:grid;place-items:center;cursor:pointer}
.course-swatch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.course-swatch-dot{display:block;width:var(--size-course-swatch);height:var(--size-course-swatch);border-radius:50%;background:var(--course-swatch);box-shadow:0 0 0 var(--space-course-swatch-ring-gap) var(--surface-panel),0 0 0 calc(var(--space-course-swatch-ring-gap) + var(--size-course-swatch-ring)) transparent;transition:box-shadow .14s ease,transform .14s ease}
.course-swatch:hover .course-swatch-dot{transform:scale(1.06)}
.course-swatch input:checked+.course-swatch-dot{box-shadow:0 0 0 var(--space-course-swatch-ring-gap) var(--surface-panel),0 0 0 calc(var(--space-course-swatch-ring-gap) + var(--size-course-swatch-ring)) var(--course-swatch)}
.course-swatch input:focus-visible+.course-swatch-dot{outline:2px solid var(--focus-ring);outline-offset:calc(var(--space-course-swatch-ring-gap) + var(--size-course-swatch-ring) + var(--space-course-swatch-ring-gap))}
@media(prefers-reduced-motion:reduce){.course-swatch-dot{transition:none}}
/* Ten swatches wrap as two even rows of five, never eight and two. */
@media(max-width:640px){.course-swatches{display:grid;grid-template-columns:repeat(5,max-content)}}
.courses-empty{display:flex;align-items:flex-start;gap:var(--space-courses-empty-gap);padding:var(--space-courses-empty-pad);border-radius:var(--radius-course-card);background:var(--surface-panel);box-shadow:var(--elev-1)}
.courses-empty .courses-empty-mark{flex:0 0 auto;width:var(--size-courses-empty-mark);height:var(--size-courses-empty-mark)}
.courses-empty-copy{display:grid;gap:var(--space-courses-empty-copy-gap);min-width:0}
.courses-empty-copy h2{margin:0;font-size:var(--text-courses-empty-heading);letter-spacing:-.015em}
.courses-empty-copy p{max-width:560px;margin:0;color:var(--text-secondary);font-size:var(--text-courses-empty-body);line-height:1.55}
.courses-empty-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-courses-action-gap);margin-top:var(--space-courses-empty-actions-before)}
.course-disclosure.course-library-entry{border-top:0}
.course-disclosure.course-library-entry.is-open{background:none}
.course-library-entry>.course-disclosure-header{display:block}
/* Library rows carry no pin, so they keep no pin column: every row on a
   shelf, subject or school course, ends at the row's own edge. */
.course-shelf .catalog-entry-shell .catalog-entry-row{padding-right:var(--space-course-entry-panel-end)}
.course-library-entry .course-disclosure-toggle.catalog-entry-row{display:grid;width:100%;border-bottom:0;font:inherit}
.course-library-entry .catalog-entry-row .study-title{font-weight:650}
.course-entry-chevron{display:grid;place-items:center;width:var(--size-course-entry-chevron);height:var(--size-course-entry-chevron)}
.course-entry-chevron .disclosure-chevron{border-color:var(--action-primary-bg)}
.catalog-entry-row:hover .course-entry-chevron,.catalog-entry-row:focus-visible .course-entry-chevron{transform:none}
.course-library-entry .course-disclosure-panel>div{padding:0 var(--space-course-entry-panel-end) var(--space-course-entry-panel-after) var(--space-course-entry-panel-start)}
@media(max-width:640px){
  .courses-shelf-create{order:-1;flex:1 0 100%}
  .courses-shelf-create>button{flex:1 1 0}
  /* Collapse all comes and goes with the cards; the row keeps the height of
     its touch target either way, so the list below never jumps. */
  .courses-shelf-view{flex:1 0 100%;justify-content:space-between;min-height:var(--size-action-touch)}
  .course-card .course-disclosure-toggle{padding:var(--space-course-card-block) var(--space-course-mobile-inline)}
  .course-card .course-disclosure-panel>div,.course-library-entry .course-disclosure-panel>div{padding-left:var(--space-course-mobile-inline);padding-right:var(--space-course-mobile-inline)}
  .course-card .personal-course-empty-state{flex-direction:column;align-items:flex-start}
  .courses-empty{flex-direction:column;padding:var(--space-courses-empty-pad) var(--space-course-empty-inline)}
}
.personal-course-dialog{position:relative;background:var(--surface-panel);box-shadow:var(--shadow-lg)}
.personal-course-dialog>label,.personal-course-details label,.personal-import-form label{display:grid;gap:var(--space-personal-course-field-gap);margin:15px 0;color:var(--text-primary);font-size:var(--text-personal-course-label);font-weight:650}
.personal-course-dialog input,.personal-course-dialog select,.personal-course-dialog textarea{min-height:43px;padding:var(--space-personal-course-input-block) var(--space-personal-course-control-inline);border:1px solid var(--border-subtle);border-radius:var(--study-up-radius);background:var(--surface-raised);color:var(--text-primary);font:inherit}
.personal-course-dialog textarea{resize:vertical}.personal-course-details{margin:8px 0 2px}.personal-course-details summary{color:var(--action-primary-bg);font-size:var(--text-personal-course-label);font-weight:650;cursor:pointer}
.personal-settings-delete{align-self:center}.dialog-actions .right{flex:1}

/* The creator is a destination, not a modal layered over the course list. */
.personal-builder{width:100%;max-width:820px;margin:10px auto 60px}.personal-builder *{box-sizing:border-box}.personal-builder-heading{display:block;margin:22px 0 26px;padding:0;background:transparent;color:var(--text-primary)}.personal-builder-heading h1{margin:4px 0 6px}.personal-builder-heading>p:last-child{margin:0;color:var(--text-secondary);font-size:var(--text-personal-builder-intro)}
.personal-builder-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 28px;padding:0;list-style:none;counter-reset:none}
.personal-builder-progress li{position:relative;display:grid;justify-items:center;gap:var(--space-personal-builder-step-gap);padding:0 var(--space-personal-course-control-block);color:var(--text-secondary);font-size:var(--text-personal-course-caption);font-weight:650;text-align:center}
.personal-builder-progress li::before{content:"";position:absolute;z-index:0;top:14px;left:-50%;width:100%;height:2px;background:var(--border-subtle)}.personal-builder-progress li:first-child::before{display:none}
.personal-builder-progress li span{z-index:1;display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--line-strong);border-radius:50%;background:var(--surface-panel);color:var(--text-secondary)}
.personal-builder-progress li.current{color:var(--text-primary)}.personal-builder-progress li.current span{border-color:var(--action-primary-bg);background:var(--action-primary-bg);color:var(--accent-ink)}.personal-builder-progress li.complete span{border-color:var(--success-fg);background:var(--success-fg);color:var(--accent-ink)}.personal-builder-progress li.complete::before,.personal-builder-progress li.current::before{background:var(--success-fg)}
.personal-builder-card{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-personal-builder-card-gap);align-items:start;padding:var(--space-personal-builder-card-padding);background:var(--surface-panel)}.personal-builder-card h2{margin:3px 0 8px}.personal-builder-card p{margin:0;color:var(--text-secondary);line-height:1.55}.personal-builder-download{justify-self:start}.personal-creator-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-personal-creator-medium)}.personal-creator-choices label,.personal-creator-advanced>label{display:grid;gap:var(--space-personal-creator-tight);color:var(--text-primary);font-weight:650}.personal-creator-choices label span,.personal-creator-advanced>label span{font-size:var(--text-personal-course-label)}.personal-creator-mode select,.personal-creator-choices select,.personal-creator-choices input,.personal-creator-advanced textarea{width:100%;padding:var(--space-personal-creator-regular) var(--space-personal-creator-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-personal-builder-input);background:var(--surface-panel);color:var(--text-primary);font:inherit}.personal-creator-advanced{padding:var(--space-personal-creator-medium) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.personal-creator-advanced summary{cursor:pointer;color:var(--action-primary-bg);font-weight:700}.personal-creator-advanced[open]{display:grid;gap:var(--space-personal-creator-large)}.personal-creator-advanced[open] summary{margin-bottom:2px}.personal-creator-advanced fieldset{display:flex;flex-wrap:wrap;gap:var(--space-personal-creator-regular) var(--space-personal-creator-wide);margin:0;padding:var(--space-personal-creator-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-personal-builder-input)}.personal-creator-advanced fieldset label{display:flex;align-items:center;gap:var(--space-personal-creator-tight)}.personal-creator-note{max-width:68ch;font-size:var(--text-personal-course-label)}.personal-candidate-history{width:min(760px,100%);max-height:min(82vh,900px);overflow:auto}.personal-candidate-history details{margin:var(--space-personal-creator-inset) 0;border:1px solid var(--border-subtle);border-radius:var(--radius-personal-builder-input);background:var(--surface-card)}.personal-candidate-history summary{padding:var(--space-personal-creator-inset) var(--space-personal-creator-medium);cursor:pointer;font-weight:700}.personal-candidate-list{display:grid;gap:var(--space-personal-creator-regular);padding:0 var(--space-personal-creator-inset) var(--space-personal-creator-inset)}.personal-candidate-list article{padding:var(--space-personal-creator-inset);border-radius:var(--radius-personal-builder-input);background:var(--surface-panel)}.personal-candidate-list article p{margin:8px 0;color:var(--text-primary)}.personal-candidate-list article ul{margin:8px 0 0;padding-left:var(--space-personal-creator-indent)}.personal-candidate-list article small{color:var(--text-secondary)}
.personal-builder-upload{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-personal-builder-error-padding);align-items:center;margin-top:4px;padding:var(--space-personal-builder-upload-padding);border:1px dashed var(--line-strong);border-radius:var(--radius-personal-builder-upload);background:var(--surface-card)}.personal-builder-upload label{display:grid;gap:var(--space-personal-builder-label-gap)}.personal-builder-upload label span{color:var(--text-secondary);font-size:var(--text-personal-course-label)}.personal-builder-upload input{grid-column:1/-1;width:100%;padding:var(--space-personal-course-row-block);border:1px solid var(--border-subtle);border-radius:var(--radius-personal-builder-input);background:var(--surface-panel);color:var(--text-primary)}
.personal-builder-card>.editor-error{grid-column:1/-1;margin:0}.personal-builder-card>.editor-error:empty{display:none}.personal-builder-card>.editor-error:not(:empty){padding:var(--space-personal-builder-error-padding);border:1px solid color-mix(in srgb,var(--danger-fg) 45%,var(--border-subtle));border-radius:var(--radius);background:color-mix(in srgb,var(--danger-fg) 7%,var(--surface-panel));color:var(--text-primary)}.personal-builder-card>.editor-error ul{margin:8px 0 0;padding-left:var(--space-personal-builder-error-indent)}
@media(max-width:700px){.personal-builder-card{grid-template-columns:1fr;padding:var(--space-personal-builder-upload-padding)}.personal-creator-choices{grid-template-columns:1fr}.personal-builder-download{width:100%;white-space:normal}.personal-builder-upload{grid-template-columns:1fr}.personal-builder-progress li{font-size:var(--text-personal-course-mobile-caption)}.personal-exam-actions{align-items:stretch;flex-direction:column}.personal-exam-actions button{text-align:left}.dialog-actions{flex-wrap:wrap}.dialog-actions .right{display:none}.personal-settings-delete{margin-right:auto}.courses-facet-bar .mode-nav{width:100%}}

/* Final auth layout ownership. Kept after feature styles so older threshold
   rules cannot pull the new brand composition back onto the former card axis. */
body.auth-environment:not(.landing-environment)>header{display:none}
body.auth-environment:not(.landing-environment)::before,
body.auth-environment:not(.landing-environment)::after{content:none;display:none}
body.auth-environment:not(.landing-environment) main{
  width:100%;max-width:none;min-height:calc(100svh - 58px);margin:0;
  padding:var(--space-auth-brand-main-padding);
  grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center}
body.auth-environment:not(.landing-environment) main .card.auth-card.auth-login-card{
  width:100%;max-width:none;margin:0;padding:var(--space-auth-brand-card-padding);border-radius:var(--radius-auth-brand-card)}
body.auth-environment:not(.landing-environment) .auth-form{gap:var(--space-auth-brand-form-gap)}
body.auth-environment:not(.landing-environment) .site-footer{
  max-width:none;justify-content:center;padding:var(--space-auth-footer-padding);gap:0;border:0;color:var(--visual-auth-footer-quiet-text);font-size:var(--text-auth-footer)}
body.auth-environment:not(.landing-environment) .site-footer a{color:var(--visual-auth-footer-quiet-text)}
body.auth-environment:not(.landing-environment) .auth-footer-billing{display:none}
@media(max-height:860px) and (min-width:761px){
  body.auth-environment:not(.landing-environment) main{padding-top:var(--space-auth-compact-main-block);padding-bottom:var(--space-auth-compact-main-block)}
  body.auth-environment:not(.landing-environment) main .card.auth-card.auth-login-card{padding-top:var(--space-auth-compact-main-block);padding-bottom:var(--space-auth-compact-card-bottom)}}
@media(max-width:760px){
  body.auth-environment:not(.landing-environment) main{min-height:auto;padding:var(--space-auth-mobile-main-padding);align-content:start}
  body.auth-environment:not(.landing-environment)::after{content:none;display:none}
  body.auth-environment:not(.landing-environment) main .card.auth-card.auth-login-card{padding:var(--space-auth-mobile-card-padding);border-radius:var(--radius-auth-mobile-card)}
  body.auth-environment:not(.landing-environment) .site-footer{padding:var(--space-auth-mobile-footer-padding);justify-content:center;color:var(--visual-auth-footer-quiet-text)}
  body.auth-environment:not(.landing-environment) .site-footer a{color:var(--visual-auth-footer-quiet-text)}}

/* Registration is the quiet account-establishment surface, not the taller
   product introduction used by sign-in. It owns its vertical centring and
   field treatment so the two routes remain intentionally related without
   pretending to be the same composition. */
body.auth-environment.registration-environment main{
  min-height:calc(100svh - 58px);align-content:center;
  padding-block:var(--space-registration-page-block)}
.registration-experience{position:relative;width:min(100%,var(--size-registration-rail));gap:0;align-self:center}
/* Keep the language control outside the animated main/pane, but anchor it to
   the page so it moves with the form when the document scrolls or pulls. */
.registration-language{display:none;position:absolute;z-index:5;top:var(--space-registration-language-top);right:var(--space-registration-language-right)}
body.auth-environment.registration-environment>.registration-language{display:block}
body.auth-environment.auth-language-enabled:not(.landing-environment)>.registration-language{display:block}
body.auth-environment.auth-language-enabled:not(.registration-environment):not(.landing-environment) main{
  padding-top:calc(var(--space-registration-language-top) + var(--size-registration-language-min-block) + var(--space-registration-mobile-language-margin))}
.registration-language select{
  min-height:var(--size-registration-language-min-block);padding:var(--space-registration-language-padding);
  border:1px solid var(--border-subtle);border-radius:var(--radius-registration-language);background:var(--surface-panel);color:var(--text-primary);font:inherit;
  font-size:var(--text-registration-language);font-weight:650;cursor:pointer}
/* The sign-in pages wear the landing header's language control: a globe, then
   the code (EN, ES). Touch keeps the platform picker, so its closed state
   shows the code through a mark laid over the select. */
.registration-language-glyph{position:absolute;z-index:1;left:12px;top:50%;display:flex;width:16px;height:16px;
  transform:translateY(-50%);color:var(--text-primary);pointer-events:none}
.registration-language-glyph .control-glyph{width:100%;height:100%}
.registration-language .language-picker-code{position:absolute;left:36px;top:50%;transform:translateY(-50%);
  color:var(--text-primary);font-size:var(--text-registration-language);font-weight:650;pointer-events:none}
.registration-language select[data-display="code"]{width:calc(36px + 1.7em + 30px);color:transparent;appearance:none}
.registration-language::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;
  border-right:1.5px solid var(--text-primary);border-bottom:1.5px solid var(--text-primary);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
/* A pointer gets the PharmRecall popup; touch keeps the platform picker. */
.language-picker-trigger,.language-picker-listbox{display:none}
@media (hover:hover) and (pointer:fine){
  .language-picker select{display:none}
  .language-picker .language-picker-trigger{display:block;min-height:var(--size-registration-language-min-block);
    padding:var(--space-registration-language-padding);border:1px solid var(--border-subtle);
    border-radius:var(--radius-registration-language);background:var(--surface-panel);color:var(--text-primary);
    font:inherit;font-size:var(--text-registration-language);font-weight:650;cursor:pointer}
  .language-picker .language-picker-trigger:focus-visible{outline:2px solid var(--action-primary-bg);outline-offset:2px}
  .registration-language .language-picker-trigger{position:relative}
  .registration-language .language-picker-code,.registration-language::after{display:none}
  .registration-language .language-picker-trigger::after{content:"";position:absolute;right:12px;top:50%;
    width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:translateY(-70%) rotate(45deg)}
  .language-picker .language-picker-listbox:not([hidden]){position:absolute;z-index:20;top:calc(100% + 6px);right:0;
    display:block;min-width:max(100%,156px);padding:var(--space-language-picker-panel);border:1px solid var(--border-subtle);
    border-radius:var(--radius-language-picker-panel);background:var(--surface-panel);color:var(--text-primary);box-shadow:var(--elev-3)}
  .language-picker-listbox [role="option"]{display:flex;align-items:center;gap:var(--space-language-picker-option-gap);min-height:42px;padding:var(--space-language-picker-option-padding);
    border-radius:var(--radius-language-picker-option);background:transparent;font-size:var(--text-language-picker-option);font-weight:600;white-space:nowrap;cursor:pointer}
  .language-picker-check{width:16px;color:var(--action-primary-bg);font-weight:800;visibility:hidden}
  .language-picker-listbox [aria-selected="true"]{color:var(--text-primary);font-weight:700}
  .language-picker-listbox [aria-selected="true"] .language-picker-check{visibility:visible}
  .language-picker-listbox [role="option"].is-active:not([aria-selected="true"]),
  .language-picker-listbox [role="option"]:hover:not([aria-selected="true"]){background:color-mix(in srgb,var(--text-primary) 5%,var(--surface-panel))}
  body.landing-environment>header .landing-header-language .language-picker-trigger{
    min-height:var(--size-landing-header-language-control);padding:var(--space-landing-header-language-padding);
    border:0;border-radius:var(--radius-landing-header-language);background:transparent;color:inherit;
    font-size:var(--text-landing-header-language)}
  body.landing-environment>header .landing-header-language .language-picker-trigger:focus-visible{
    outline:2px solid var(--header-focus);outline-offset:2px}
  body.landing-environment>header .landing-header-language-mobile .language-picker-trigger{
    min-height:44px;width:100%;padding:0;text-align:left;color:var(--mobile-sheet-text)}
}
.auth-language-disclosure{margin:12px 0 0;color:var(--visual-auth-footer-quiet-text);font-size:var(--text-auth-footer);line-height:1.45;text-align:center;text-wrap:balance}
.landing>.auth-language-disclosure{max-width:52ch;margin:30px auto;color:var(--text-secondary)}
body.auth-environment:not(.landing-environment) main .card.auth-card.auth-login-card.auth-registration-card{
  padding:var(--space-registration-card-padding)}
.registration-product-link{margin:var(--space-registration-illustration-margin)}
.registration-header{display:block;text-align:center}
.registration-header h1{margin:0;color:var(--text-primary);font-size:var(--text-registration-heading);line-height:1.2;letter-spacing:-.01em;font-weight:500}
.registration-header p{margin:var(--space-registration-heading-margin);max-width:34ch;color:var(--text-secondary);font-size:var(--text-registration-intro);line-height:1.45}
.auth-registration-card .auth-form{gap:var(--space-registration-form-gap)}
.auth-registration-card .auth-floating-field{position:relative;display:block}
.auth-registration-card .auth-floating-field input{min-height:var(--size-registration-field-min-block);padding:var(--space-registration-field-padding)}
.auth-registration-card .password-input.auth-floating-field input{padding-right:var(--space-registration-password-end)}
.auth-registration-card .auth-floating-field>label{
  position:absolute;z-index:1;left:var(--space-registration-label-inline);top:50%;padding:var(--space-registration-label-padding);
  transform:translateY(-50%);background:var(--surface-panel);color:var(--visual-auth-brand-placeholder-text);
  font-size:var(--text-registration-label);font-weight:500;line-height:1;pointer-events:none;
  transition:top var(--motion-registration-label-duration) ease,font-size var(--motion-registration-label-duration) ease,color var(--motion-registration-label-duration) ease}
.auth-registration-card .auth-floating-field:focus-within>label,
.auth-registration-card .auth-floating-field>input:not(:placeholder-shown)+label{
  top:0;color:var(--action-primary-bg);font-size:var(--text-registration-label-raised);font-weight:700}
.auth-registration-card .password-input.auth-floating-field>input:not(:placeholder-shown)~label{top:0;color:var(--action-primary-bg);font-size:var(--text-registration-label-raised);font-weight:700}
.auth-registration-card .auth-password-guidance{margin-top:var(--space-registration-guidance-pull)}
.auth-registration-card .auth-switch{margin-top:0}
.auth-registration-card .provider-sign-in{margin-top:var(--space-registration-provider-top)}
.auth-registration-card .legal-note{margin-top:0}
@media(max-height:820px) and (min-width:761px){
  body.auth-environment.registration-environment main{padding-block:var(--space-registration-compact-page-block)}
  body.auth-environment:not(.landing-environment) main .card.auth-card.auth-login-card.auth-registration-card{
    padding:var(--space-registration-card-padding-compact)}
  .registration-product-link{margin-bottom:var(--space-registration-compact-illustration-margin)}
  .registration-product-icon{width:var(--size-auth-product-icon-compact);height:var(--size-auth-product-icon-compact)}
  .registration-header p{margin-bottom:var(--space-registration-compact-heading-margin)}
  .auth-registration-card .auth-form{gap:var(--space-registration-compact-form-gap)}}
@media(max-width:760px){
  body.auth-environment.registration-environment main{
    min-height:calc(100svh - 58px);align-content:center;padding:var(--space-auth-mobile-main-padding);
    padding-top:calc(var(--space-registration-language-top) + var(--size-registration-language-min-block) + var(--space-registration-mobile-language-margin))}
  body.auth-environment:not(.landing-environment) main .card.auth-card.auth-login-card.auth-registration-card{
    padding:var(--space-registration-card-padding-mobile)}
  .registration-product-icon{width:var(--size-auth-product-icon-mobile);height:var(--size-auth-product-icon-mobile)}
  .registration-header h1{font-size:var(--text-registration-heading-mobile)}}

/* THE LEARN LESSON FRAME (learn-shell.js). One calm centred column, the three
   beats as a rail under the title, and one task at a time beneath it. */
.learn-lesson{max-width:var(--size-learn-column);margin:0 auto;display:grid;gap:var(--space-learn-stack)}
.learn-lesson-top{min-height:24px}
.learn-lesson-head{display:grid;gap:var(--space-learn-tight)}
.learn-lesson-eyebrow{color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:650}
.learn-lesson-head h1{margin:0;font-size:var(--text-learn-title);line-height:1.2;letter-spacing:-.02em}
.learn-beats{list-style:none;display:flex;gap:var(--space-learn-beat-gap);margin:var(--space-learn-tight) 0 0;padding:0;counter-reset:none}
.learn-beat{display:flex;align-items:center;gap:var(--space-learn-tight);flex:1 1 0;padding:var(--space-learn-tight) 0;
  border-top:3px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:650}
.learn-beat .mode-nav-mark{width:var(--size-learn-beat-mark);height:var(--size-learn-beat-mark)}
.learn-beat.is-done{border-top-color:var(--success-fg);color:var(--text-primary)}
.learn-beat.is-done .mode-nav-mark{filter:grayscale(.3);opacity:.85}
.learn-beat.is-current{border-top-color:var(--action-primary-bg);color:var(--text-primary)}
.learn-beat.is-current .mode-nav-mark{filter:none;opacity:1}
.learn-lesson-body{display:grid;gap:var(--space-learn-stack)}
/* The body's gap is the only spacing between its sections; sections
   written for older pages bring margins that would double it. */
.learn-lesson-body>*{margin-block:0}
.learn-panel{display:grid;gap:var(--space-learn-stack);padding:var(--space-learn-panel);border:1px solid var(--border-subtle);
  border-radius:var(--radius-learn-panel);background:var(--surface-card)}
.learn-panel-title{margin:0;font-size:var(--text-learn-body)}
.learn-panel-kicker{margin:0;color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:650}
.learn-lede{margin:0;font-size:var(--text-learn-prompt);line-height:1.5}
.learn-prompt{margin:0;font-size:var(--text-learn-prompt);line-height:1.5;font-weight:560}
.learn-direction-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-learn-tight)}
.learn-direction-list li{padding:var(--space-learn-tight) var(--space-learn-panel-compact);border:1px solid var(--border-subtle);
  border-radius:var(--radius-learn-chip);font-size:var(--text-learn-small);font-weight:600}
.learn-given{margin:0;color:var(--text-secondary)}
.learn-worked{display:grid;gap:var(--space-learn-stack)}
.learn-worked-item{display:grid;gap:var(--space-learn-tight);padding:var(--space-learn-panel);border:1px solid var(--border-subtle);
  border-radius:var(--radius-learn-panel);background:var(--surface-card)}
.learn-worked-title{color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:650}
.learn-worked-answer{margin:0;font-weight:700}
.learn-worked-answer::before{content:"= ";color:var(--text-secondary)}
.learn-actions{display:flex;justify-content:flex-end;gap:var(--space-learn-tight)}
.learn-feedback-expected{font-weight:700}
.learn-feedback-note{color:var(--text-secondary);font-size:var(--text-learn-small)}
.learn-result{display:grid;justify-items:center;gap:var(--space-learn-tight);padding:var(--space-learn-panel);text-align:center;
  border:1px solid var(--border-subtle);border-radius:var(--radius-learn-panel);background:var(--surface-card)}
.learn-result .mode-nav-mark{width:48px;height:48px;filter:none;opacity:1}
.learn-result h2{margin:0;font-size:var(--text-learn-title)}
.learn-result p{margin:0;color:var(--text-secondary)}
.learn-result-actions{display:flex;gap:var(--space-learn-tight);margin-top:var(--space-learn-tight)}
@media(max-width:640px){
  .learn-panel,.learn-worked-item,.learn-result{padding:var(--space-learn-panel-compact)}
  .learn-lesson-head h1{font-size:var(--text-learn-title-compact)}
  .learn-beat-label{font-size:var(--text-learn-small)}
  
}
/* Prescription See it inside the one Learn column: the parts fill the row
   whatever their number, and the rules are read, not stared at. */
.learn-lesson .rx-anatomy ol{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.learn-lesson .rx-rule-panel{grid-template-columns:minmax(0,1fr);gap:var(--space-learn-tight);padding:var(--space-learn-panel-compact);
  border:1px solid var(--border-subtle);border-radius:var(--radius-learn-panel);background:var(--surface-panel);color:var(--text-primary)}
.learn-lesson .rx-rule-panel .learn-panel-kicker{margin:0}
/* THE LESSON STAGE. Try it and Show it stand on the Activities question stage
   (.activity-stage, .stage-brow, .stage-subject / .stage-vignette, .opts,
   .answerbox); these rules only add what a lesson has and an activity lacks:
   the beat mark in the brow, an exhibit to read, given steps, and a verdict. */
.learn-stage-mark .mode-nav-mark,.learn-stage-mark svg{display:block;width:100%;height:100%}
.learn-stage-mark .mode-nav-mark{filter:none;opacity:1}
.learn-exhibit{margin:var(--space-learn-stack) 0 0}
.learn-exhibit+.stage-ask{margin-top:var(--space-learn-panel-compact)}
.learn-exhibit .learn-order{margin:0;font-size:var(--text-learn-prompt)}
.learn-order mark,.learn-stage .stage-instruction mark{padding:0 var(--space-learn-hairline);border-radius:var(--radius-learn-chip);color:inherit;
  background:color-mix(in srgb,var(--action-primary-bg) 22%,transparent);box-shadow:inset 0 -2px 0 var(--action-primary-bg)}
.learn-support{margin:var(--space-learn-panel-compact) 0 0}
.learn-support .solution-steps{margin:0}
.learn-stage .learn-opts{margin:var(--space-learn-stack) 0 0;max-width:560px}
.learn-editor{margin:var(--space-learn-stack) 0 0;max-width:560px}
.stage-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-learn-hairline) var(--space-learn-panel-compact);
  padding:var(--space-learn-hairline) 0;border-left:0}
.stage-verdict b{color:var(--success-fg);font-size:var(--text-learn-body)}
/* The marked choices are the verdict; the line stays for screen readers only. */
.stage-verdict.is-marked{padding:0}
.stage-verdict.is-wrong{border-left-color:var(--danger-fg)}
.stage-verdict.is-wrong b{color:var(--answer-choice-incorrect-ink)}
.stage-verdict span{color:var(--text-primary)}
.stage-verdict-more,.stage-verdict-note,.stage-verdict-steps{margin:var(--space-learn-tight) 0 0}
.stage-verdict-more{color:var(--text-primary);font-size:var(--text-learn-small)}
.stage-verdict-note{color:var(--text-secondary);font-size:var(--text-learn-small)}
.learn-hint,.learn-note{margin:0;color:var(--text-secondary);font-size:var(--text-learn-small)}
.learn-prompt b{font-weight:800}
@media(max-width:640px){.learn-typed{flex-direction:column}}
.learn-order{margin:0 0 var(--space-learn-tight);padding:var(--space-learn-panel-compact);border-radius:var(--radius-learn-panel);
  background:var(--workspace);border:1px solid var(--border-subtle);font-size:var(--text-learn-body);white-space:pre-wrap}
.learn-components{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-learn-tight)}
.learn-components li{display:grid;grid-template-columns:minmax(72px,auto) 1fr;gap:var(--space-learn-tight);align-items:baseline;
  padding-left:var(--space-learn-tight);border-left:3px solid var(--success-fg);font-size:var(--text-learn-small)}
.learn-components li.is-wrong,.learn-components li.is-missing{border-left-color:var(--danger-fg)}
.learn-components small{grid-column:2;color:var(--text-secondary)}
.learn-targets{display:grid;gap:var(--space-learn-stack)}
.learn-target{display:grid;gap:var(--space-learn-tight);padding:var(--space-learn-panel);border:1px solid var(--border-subtle);
  border-radius:var(--radius-learn-panel);background:var(--surface-card)}
.learn-target h2{margin:0;font-size:var(--text-learn-prompt)}
.learn-target p{margin:0;color:var(--text-secondary)}
.learn-parts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-learn-tight)}
.learn-parts i{color:var(--text-secondary);font-style:normal}
.learn-part{display:grid;padding:var(--space-learn-tight) var(--space-learn-panel-compact);border:1px solid var(--border-subtle);
  border-radius:var(--radius-learn-panel);background:var(--workspace)}
.learn-part small{color:var(--text-secondary)}
.learn-anchors{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-learn-tight)}
.learn-anchor{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-learn-tight);row-gap:var(--space-learn-hairline);align-content:start;padding:var(--space-learn-panel-compact);
  border:1px solid var(--border-subtle);border-radius:var(--radius-learn-panel);background:var(--surface-card)}
.learn-anchor-line{margin:0;font-size:var(--text-learn-prompt);font-weight:700}
.learn-anchor-precision{justify-self:end;padding:var(--space-learn-hairline) var(--space-learn-tight);border-radius:var(--radius-learn-chip);
  font-size:var(--text-learn-small);font-weight:700;background:color-mix(in srgb,var(--success-fg) 12%,transparent);color:var(--success-fg)}
.learn-anchor.is-approximate .learn-anchor-precision{background:color-mix(in srgb,var(--warning-fg) 14%,transparent);color:var(--warning-fg)}
.learn-anchor.is-conditional .learn-anchor-precision{background:color-mix(in srgb,var(--danger-fg) 12%,transparent);color:var(--danger-fg)}
.learn-anchor-note{grid-column:1/-1;margin:0;color:var(--text-secondary);font-size:var(--text-learn-small)}
.learn-lab-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-learn-tight);width:100%;
  padding:var(--space-learn-panel-compact) var(--space-learn-panel);border:1px solid var(--action-primary-bg);border-radius:var(--radius-learn-panel);
  background:var(--accent-soft);color:var(--text-primary);text-align:left;cursor:pointer}
.learn-lab-link span{display:grid}
.learn-lab-link small{color:var(--text-secondary)}
/* The ladder as a badge and a dot, for any Learn surface. Text always travels
   with the colour; the colour is never the only signal. */
.learn-state{display:inline-flex;align-items:center;gap:var(--space-learn-tight);padding:var(--space-learn-hairline) var(--space-learn-tight);
  border-radius:var(--radius-learn-chip);font-size:var(--text-learn-small);font-weight:700;white-space:nowrap}
.learn-state.is-not_started{background:var(--ladder-not-started-surface);color:var(--ladder-not-started-text)}
.learn-state.is-in_progress{background:var(--progress-bg);color:var(--progress-fg)}
.learn-state.is-learned{background:var(--ladder-learned-surface);color:var(--ladder-learned-text)}
.learn-state.is-proven{background:var(--ladder-proven-surface);color:var(--ladder-proven-text)}
.learn-state.is-retained{background:var(--ladder-retained-surface);color:var(--ladder-retained-text)}
.learn-dot{--dot:var(--ladder-not-started-ink);display:inline-block;flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--dot)}
.learn-dot.is-in_progress{--dot:var(--progress-edge)}
.learn-dot.is-learned{--dot:var(--ladder-learned-ink)}
.learn-dot.is-proven{--dot:var(--ladder-proven-ink)}
.learn-dot.is-retained{--dot:var(--ladder-retained-ink)}
.learn-dot.is-not_started{background:transparent;box-shadow:inset 0 0 0 2px var(--dot)}

/* THE LEARN LANDING (learnLanding in learn-shell.js). */
.learn-landing{max-width:var(--size-learn-column);margin:0 auto;display:grid;gap:var(--space-learn-stack)}
.learn-landing-head{display:flex;align-items:center;gap:var(--space-learn-panel-compact)}
.learn-landing-head .learn-landing-mark{flex:0 0 auto;width:var(--size-learn-landing-mark);height:var(--size-learn-landing-mark)}
.learn-landing-head h1{margin:0;font-size:var(--text-learn-title);letter-spacing:-.02em;line-height:1.15}
.learn-landing-head p{margin:var(--space-learn-hairline) 0 0;color:var(--text-secondary);font-size:var(--text-learn-body)}
/* The next step: the Activities ready card, with the subject's strip inside. */
.learn-next .stage-brow .learn-state{margin-left:auto}
.learn-next-title{font-size:var(--text-learn-next-title);line-height:1.1}
.learn-next .learn-strip{margin:var(--space-learn-stack) 0 0}
.learn-next .ready-go{margin-top:var(--space-learn-stack)}
/* A tool beside the lessons: a slim card, its own mark, a way in. */
.learn-feature{display:flex;align-items:center;gap:var(--space-learn-panel-compact);width:100%;margin:0;
  padding:var(--space-learn-panel-compact) var(--space-learn-panel);border:0;text-align:left;color:var(--text-primary);cursor:pointer}
.learn-feature-mark .activity-mark{width:var(--size-learn-feature-mark);height:var(--size-learn-feature-mark)}
.learn-feature-copy{display:grid;gap:var(--space-learn-hairline);flex:1 1 auto;min-width:0}
.learn-feature-copy b{font-size:var(--text-learn-body)}
.learn-feature-copy small{color:var(--text-secondary);font-size:var(--text-learn-small)}
.learn-feature:hover{box-shadow:inset 0 0 0 1px var(--action-primary-bg)}
.learn-strip{display:grid;gap:var(--space-learn-tight)}
.learn-strip-bar{display:flex;gap:var(--space-learn-hairline);height:10px}
.learn-strip-seg{flex:1 1 0;border-radius:var(--radius-learn-chip);background:var(--ladder-not-started-surface);
  box-shadow:inset 0 0 0 1px var(--border-subtle);transition:transform .15s ease}
.learn-strip-seg:hover,.learn-strip-seg:focus-visible{transform:scaleY(1.5)}
.learn-strip-seg.is-in_progress{background:var(--progress-edge);box-shadow:none}
.learn-strip-seg.is-learned{background:var(--ladder-learned-ink);box-shadow:none}
.learn-strip-seg.is-proven{background:var(--ladder-proven-ink);box-shadow:none}
.learn-strip-seg.is-retained{background:var(--ladder-retained-ink);box-shadow:none}
.learn-strip-key{display:flex;flex-wrap:wrap;gap:var(--space-learn-panel-compact);margin:0;color:var(--text-secondary);font-size:var(--text-learn-small)}
.learn-strip-key span{display:inline-flex;align-items:center;gap:var(--space-learn-tight)}
.learn-curriculum{display:grid;gap:var(--space-learn-stack)}
.learn-group{display:grid;gap:var(--space-learn-tight)}
.learn-group-title{display:flex;align-items:center;gap:var(--space-learn-tight);margin:0;font-size:var(--text-learn-body);font-weight:750;color:var(--text-primary);text-transform:none;letter-spacing:normal}
.learn-group-title .study-mark{width:26px;height:26px}
.learn-group-title small{color:var(--text-secondary);font-weight:600;white-space:nowrap}
.learn-group-title>span{min-width:0}
.learn-group-dots{flex:0 0 auto}
summary.learn-group-title{cursor:pointer;list-style:none;padding:var(--space-learn-tight) 0}
summary.learn-group-title::-webkit-details-marker{display:none}
summary.learn-group-title::before{content:"";display:inline-block;flex:0 0 auto;width:12px;height:12px;background:var(--text-secondary);
  -webkit-mask:var(--control-mask-onward) center/contain no-repeat;mask:var(--control-mask-onward) center/contain no-repeat;transition:transform .15s ease}
details[open]>summary.learn-group-title::before{transform:rotate(90deg)}
.learn-group-dots{display:inline-flex;gap:var(--space-learn-hairline);margin-left:auto}
.learn-group-dots .learn-dot{width:8px;height:8px}
.learn-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-subtle)}
/* A group is a card: its heading, then its rows, no rule above the first
   row of an untitled list or below the last. */
/* Groups and tools stand on the same panel as the Activities stage. */
.learn-group.card,.learn-feature.card{background:var(--surface-card);border-radius:var(--radius-learn-surface)}
.learn-group.card{margin:0;padding:var(--space-learn-tight) var(--space-learn-panel);border:0}
.learn-group.card>.learn-rows:first-child{border-top:0}
.learn-group.card .learn-rows>li:last-child .learn-row{border-bottom:0}
.learn-group.card>.learn-group-title{padding:var(--space-learn-tight) 0}
.learn-row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-columns:auto;grid-auto-flow:column;align-items:center;gap:var(--space-learn-panel-compact);width:100%;
  padding:var(--space-learn-panel-compact) var(--space-learn-tight);border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;
  background:transparent;color:var(--text-primary);text-align:left;cursor:pointer;transition:background-color .15s ease}
.learn-row:hover,.learn-row:focus-visible{background:color-mix(in srgb,var(--action-primary-bg) 5%,transparent)}
.learn-row.is-flash{background:color-mix(in srgb,var(--action-primary-bg) 12%,transparent)}
.learn-row-copy{display:grid;gap:var(--space-learn-hairline);min-width:0}
.learn-row-copy b{font-size:var(--text-learn-body);font-weight:700}
.learn-row-copy small{color:var(--text-secondary);font-size:var(--text-learn-small);line-height:1.4}
.learn-row-copy em{color:var(--text-secondary);font-size:var(--text-learn-small);font-style:normal;font-weight:600}
.learn-row-state{color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:650;white-space:nowrap}
.learn-row.is-learned .learn-row-state{color:var(--ladder-learned-text)}
.learn-row.is-proven .learn-row-state{color:var(--ladder-proven-text)}
.learn-row.is-retained .learn-row-state{color:var(--ladder-retained-text)}
.learn-row.is-in_progress .learn-row-state{color:var(--progress-fg)}
.learn-row-go{width:8px;height:8px;border-top:2px solid var(--text-secondary);border-right:2px solid var(--text-secondary);transform:rotate(45deg)}
@media(max-width:640px){
  .learn-landing-head .learn-landing-mark{width:var(--size-learn-landing-mark-compact);height:var(--size-learn-landing-mark-compact)}
  .learn-landing-head h1{font-size:var(--text-learn-title-compact)}
  .learn-row{grid-template-columns:auto minmax(0,1fr) 12px;grid-auto-flow:row;row-gap:var(--space-learn-hairline)}
  .learn-row>.learn-dot{grid-column:1;grid-row:1}
  .learn-row-copy{grid-column:2;grid-row:1}
  .learn-row-state{grid-column:2;grid-row:2}
  .learn-row-go{grid-column:3;grid-row:1/span 2}
}
@media (prefers-reduced-motion:reduce){.learn-strip-seg,.learn-row,summary.learn-group-title::before{transition:none}}
.learn-scope{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-learn-panel-compact);padding:var(--space-learn-tight) 0;
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.learn-scope .scope-picker{flex:1 1 320px;margin:0}
.learn-scope-count{color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:650;padding-bottom:var(--space-learn-tight)}
.learn-group-swatch{display:inline-block;width:10px;height:10px;border-radius:var(--radius-learn-chip);background:var(--tg-accent,var(--action-primary-bg))}
.learn-landing-notice{max-width:var(--size-learn-landing);margin:var(--space-learn-stack) auto 0}

/* THE VISUAL CONVERSION LAB ------------------------------------------------
   Header, family picker, Explore card, Practice card: one centred column in
   the Learn measure. The cards are the Activities stage; what is new is the
   picture -- a wall of splits, or a cube for the thousand-fold metric steps. */
.vlab{max-width:var(--size-learn-column);margin:0 auto;display:grid;gap:var(--space-learn-stack)}
.vlab-head{display:grid;gap:var(--space-learn-panel-compact)}
.vlab-head .study-up-link{justify-self:start}
.vlab-title{display:flex;align-items:center;gap:var(--space-learn-panel-compact)}
.vlab-title .activity-mark{width:var(--size-learn-landing-mark);height:var(--size-learn-landing-mark)}
.vlab-title h1{margin:0;font-size:var(--text-learn-title);letter-spacing:-.02em}
.vlab-title p{margin:var(--space-learn-hairline) 0 0;color:var(--text-secondary)}
.vlab-families{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-lab-family),1fr));gap:var(--space-learn-tight)}
.vlab-family{display:grid;gap:var(--space-learn-hairline);align-content:start;min-width:0;text-align:left;
  padding:var(--space-lab-family-pad);border:1px solid var(--border-subtle);border-radius:var(--radius-learn-panel);
  background:var(--surface-panel);color:var(--text-primary);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.vlab-family b{font-size:var(--text-lab-family);font-weight:700}
.vlab-family small{color:var(--text-secondary);font-size:var(--text-lab-meta);font-variant-numeric:tabular-nums}
.vlab-family:hover{border-color:var(--action-primary-bg)}
.vlab-family.is-on{border-color:var(--action-primary-bg);box-shadow:inset 0 0 0 1px var(--action-primary-bg);background:var(--accent-soft)}
.vlab-values{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-learn-hairline);color:var(--text-secondary);
  font-size:var(--text-learn-small);font-weight:650;cursor:pointer}
.vlab-values input{margin:0;accent-color:var(--action-primary-bg)}
.vlab-equation{margin:var(--space-learn-stack) 0 0;font-size:var(--text-lab-equation);font-weight:600;letter-spacing:-.02em;
  line-height:1.2;text-wrap:balance;font-variant-numeric:tabular-nums}
.vlab-picture{margin:var(--space-learn-stack) 0 0}
.vlab-steps{margin-top:var(--space-learn-stack)}

/* The wall: every row is the same whole. */
.vlab-wall{display:grid;gap:var(--space-learn-tight)}
.vlab-row{display:grid;grid-template-columns:var(--size-lab-row-label) minmax(0,1fr);align-items:center;gap:var(--space-learn-panel-compact)}
.vlab-row-label{color:var(--text-secondary);font-size:var(--text-learn-small);line-height:1.3}
.vlab-row-label b{color:var(--text-primary);font-size:var(--text-learn-body);font-variant-numeric:tabular-nums}
.vlab-bar{display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));gap:var(--space-lab-seam);height:var(--size-lab-row)}
.vlab-bar i{display:grid;place-items:center;min-width:0;overflow:hidden;border-radius:var(--radius-lab-cell);font-style:normal;
  font-size:var(--text-lab-cell);font-weight:700;background:var(--lab-depth-0-surface);color:var(--lab-depth-0-text)}
.vlab-row.is-depth-1 .vlab-bar i{background:var(--lab-depth-1-surface);color:var(--lab-depth-1-text)}
.vlab-row.is-depth-2 .vlab-bar i{background:var(--lab-depth-2-surface);color:var(--lab-depth-2-text)}
.vlab-row.is-depth-3 .vlab-bar i{background:var(--lab-depth-3-surface);color:var(--lab-depth-3-text)}
/* Length is a ruler: pieces butt together, divided by ticks, not gaps. */
.vlab-bar.is-ruler{gap:0;height:var(--size-lab-row-ruler);border-radius:var(--radius-lab-cell);overflow:hidden}
.vlab-bar.is-ruler i{border-radius:0;box-shadow:inset -1px 0 0 var(--lab-cell-seam)}
.vlab-bar.is-ruler i:last-child{box-shadow:none}
.vlab-row.is-new .vlab-bar i{animation:vlabSplit .42s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:min(calc(var(--n) * var(--space-lab-stagger)),.4s)}
@keyframes vlabSplit{from{opacity:0;transform:translateY(-8px) scaleX(.55)}to{opacity:1;transform:none}}

/* The cube: a thousand of the next unit is ten by ten by ten. */
.vlab-cubes{container-type:inline-size;display:flex;align-items:flex-start;justify-content:center;flex-wrap:nowrap;gap:var(--space-learn-tight) var(--space-learn-hairline)}
/* Every cube is one size: the column shared by the cubes after the arrows. */
.vlab-cube-step{margin:0;display:grid;justify-items:center;gap:var(--space-learn-tight);flex:none;
  width:min(var(--size-lab-cube),calc((100cqw - (var(--cubes) - 1) * var(--size-lab-zoom-slot)) / var(--cubes)))}
.vlab-cube{display:block;width:100%;height:auto;overflow:visible}
.vlab-cube .is-front{fill:var(--lab-cube-front)}
.vlab-cube .is-top{fill:var(--lab-cube-top)}
.vlab-cube .is-side{fill:var(--lab-cube-side)}
.vlab-cube.is-picked>.is-front,.vlab-cube-pick .is-front{fill:var(--lab-cube-pick-front)}
.vlab-cube.is-picked>.is-top,.vlab-cube-pick .is-top{fill:var(--lab-cube-pick-top)}
.vlab-cube.is-picked>.is-side,.vlab-cube-pick .is-side{fill:var(--lab-cube-pick-side)}
.vlab-cube-grid{fill:none;stroke:var(--lab-cube-grid);stroke-width:.7}
.vlab-cube-step figcaption{display:grid;justify-items:center;gap:var(--space-learn-hairline);text-align:center;font-size:var(--text-learn-small);color:var(--text-secondary)}
.vlab-cube-step figcaption b{color:var(--text-primary);font-size:var(--text-learn-body)}
.vlab-cube-link{display:flex;align-items:flex-start;flex:none}
.vlab-zoom{flex:none;width:var(--size-lab-zoom-slot);align-self:flex-start;margin-top:var(--size-lab-zoom-line);display:grid;justify-items:center;gap:var(--space-learn-hairline);margin-bottom:var(--space-learn-stack);
  color:var(--text-secondary);font-weight:750;font-variant-numeric:tabular-nums}
.vlab-zoom i{position:relative;display:block;width:var(--size-lab-zoom-line);height:2px;background:currentColor}
.vlab-zoom i::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid currentColor;border-right:0}
.vlab-zoom small{font-size:var(--text-lab-micro);font-weight:600}
.vlab-cube-step.is-new,.vlab-zoom.is-new{animation:vlabGrow .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes vlabGrow{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.vlab-hidden{display:grid;justify-items:center;gap:var(--space-learn-tight);padding:var(--space-learn-panel) var(--space-learn-panel-compact);
  border:1px dashed var(--border-subtle);border-radius:var(--radius-learn-panel);color:var(--text-secondary);text-align:center}
.vlab-hidden p{margin:0}

/* Practice */
.vlab-exit{margin-left:auto}
.vlab-explore{border:0}
.vlab-answer{margin:var(--space-learn-stack) 0 0}
.vlab-answer .answerbox{margin:0}
.vlab-answer-unit{align-self:center;color:var(--text-secondary);font-weight:650;white-space:nowrap}
.vlab-answer .opts{margin:0;max-width:560px}
.vlab-answer .stage-instruction{margin:var(--space-learn-panel-compact) 0 var(--space-learn-tight)}
.vlab-bar.is-question i{background:var(--lab-depth-1-surface);color:var(--lab-depth-1-text)}
.vlab-bar.is-question i.is-missing{background:transparent;border:2px dashed var(--border-subtle);color:var(--text-secondary)}
.vlab-warn{color:var(--danger-fg)}
/* Build: the larger unit is an outline; pieces fill it, and spill past it. */
.vlab-build{display:grid;gap:var(--space-learn-tight)}
.vlab-build-label{font-size:var(--text-learn-small);font-weight:700;color:var(--text-secondary)}
.vlab-build-track{position:relative;display:grid;grid-template-columns:repeat(var(--slots),minmax(0,1fr));gap:var(--space-lab-seam);
  height:var(--size-lab-row)}
.vlab-build-outline{grid-row:1;grid-column:1 / span var(--count);margin:calc(-1 * var(--space-lab-seam) - 2px);
  border:2px dashed var(--action-primary-bg);border-radius:var(--radius-lab-container);pointer-events:none}
.vlab-build-track i{grid-row:1;grid-column:calc(var(--n) + 1);display:grid;place-items:center;min-width:0;overflow:hidden;
  border-radius:var(--radius-lab-cell);font-style:normal;font-size:var(--text-lab-cell);font-weight:700;white-space:nowrap;
  background:var(--lab-depth-1-surface);color:var(--lab-depth-1-text);animation:vlabGrow .22s ease both}
.vlab-build-track i.is-spill{background:var(--danger-fg);color:var(--lab-depth-0-text)}
.vlab-build.is-over .vlab-build-outline{border-color:var(--danger-fg)}
.vlab-build.is-right .vlab-build-outline{border-style:solid;border-color:var(--success-fg)}
.vlab-build.is-wrong .vlab-build-outline{border-style:solid;border-color:var(--danger-fg)}
.vlab-chain.is-right{border-bottom:1px solid var(--success-fg)}
.vlab-chain.is-wrong{border-bottom:1px dashed var(--answer-choice-incorrect-ink)}
/* Chain: written as on paper, units struck as they cancel. */
.vlab-chain{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-learn-tight) var(--space-lab-chain-gap);min-height:64px;margin:0;
  font-size:var(--text-lab-chain);font-variant-numeric:tabular-nums}
.vlab-chain>i{font-style:normal;color:var(--text-secondary)}
.vlab-chain-start{font-weight:650}
.vlab-frac{display:inline-grid;text-align:center;font-weight:650;line-height:1.25}
.vlab-frac>span:first-child{padding:0 var(--space-lab-frac-x) var(--space-lab-frac-y);border-bottom:2px solid currentColor}
.vlab-frac>span:last-child{padding:var(--space-lab-frac-y) var(--space-lab-frac-x) 0}
.vlab-frac.is-empty>span{min-width:64px;min-height:1.1em;border-color:var(--border-subtle);border-bottom-style:dashed}
.is-struck{color:var(--text-secondary);text-decoration:line-through;text-decoration-color:var(--danger-fg);text-decoration-thickness:2px}
.vlab-factors{display:flex;flex-wrap:wrap;gap:var(--space-learn-tight);margin:var(--space-learn-panel-compact) 0 0}
.vlab-factor{padding:var(--space-lab-factor-pad);border:1px solid var(--border-subtle);border-radius:var(--radius-lab-container);
  background:var(--surface-raised);color:var(--text-primary);font-size:var(--text-lab-factor);cursor:pointer}
.vlab-factor:hover:not(:disabled){border-color:var(--action-primary-bg)}
.vlab-factor.sel{opacity:.4}
.vlab-factor:is(.correct,.wrong){opacity:1}
.vlab-factor.correct{border-color:var(--border-subtle);border-bottom-color:var(--success-edge);background:var(--surface-raised)}
.vlab-factor.wrong{border-color:var(--border-subtle);border-bottom-color:var(--answer-choice-incorrect-ink);border-bottom-style:dashed;background:var(--surface-raised)}
@media(max-width:640px){
  .vlab-families{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vlab-row{grid-template-columns:minmax(0,1fr);gap:var(--space-learn-hairline)}
  .vlab-cubes{flex-wrap:wrap;row-gap:var(--space-learn-stack)}
  .vlab-cube-step{width:var(--size-lab-cube-compact)}
  .vlab-zoom{width:auto;padding:0 var(--space-learn-hairline)}
  .vlab-zoom small{display:none}
  .vlab-zoom i{width:var(--size-lab-zoom-line-compact)}
  .vlab-bar.is-dense i{font-size:0}
  .stage-brow:has(.vlab-values){flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .vlab-row.is-new .vlab-bar i,.vlab-cube-step.is-new,.vlab-zoom.is-new,.vlab-build-track i{animation:none}
}
/* LECTURE OVERVIEW is progress only: the title, one readiness bar, a count
   line, and the objectives. Nothing on it tells the learner what to do next. */
.lecture-overview-head{display:grid;gap:var(--space-learn-tight);margin:var(--space-learn-stack) 0}
.lecture-overview-head h1{margin:0;font-size:var(--text-learn-title);line-height:1.2;letter-spacing:-.02em}
.lecture-overview-head .exam-readiness-bar.is-wide{margin:var(--space-learn-hairline) 0 0}
.lecture-overview-counts{display:flex;flex-wrap:wrap;gap:var(--space-learn-panel-compact);margin:0;color:var(--text-secondary);font-size:var(--text-learn-small)}
.lecture-overview-counts span{display:inline-flex;align-items:center;gap:var(--space-learn-hairline)}
.lecture-overview-counts .rdot{margin-right:var(--space-learn-hairline)}
.lecture-overview-creator{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-learn-tight);margin:0 0 var(--space-learn-stack)}
.lecture-overview-creator .muted{font-size:var(--text-learn-small)}
.lecture-overview-label{margin:0 0 var(--space-learn-tight);color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* LEARN: a heading row shared by concepts and the study guide, topics read as
   titles (not shouted labels), and each mix-up as one "Not / Actually" pair. */
.course-learn-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-learn-tight) var(--space-learn-stack);margin:var(--space-learn-stack) 0 var(--space-learn-panel-compact)}
.course-learn-head h1{margin:0;font-size:var(--text-learn-title);line-height:1.2;letter-spacing:-.02em}
.course-learn-head p{margin:var(--space-learn-hairline) 0 0;color:var(--text-secondary);font-size:var(--text-learn-small)}
.course-learn-tools{display:flex;gap:var(--space-learn-tight);flex:0 0 auto}
.learn-topic .course-section-toggle b{color:var(--text-primary);font-size:var(--text-learn-body);font-weight:640;letter-spacing:0;text-transform:none}
.learn-topic-body{display:grid;gap:var(--space-learn-beat-gap);padding-bottom:var(--space-learn-panel-compact)}
.learn-concepts{display:grid;gap:var(--space-learn-beat-gap);margin:0;padding-left:var(--space-learn-stack);font-size:var(--text-learn-body);line-height:1.55}
.learn-mixup{display:grid;gap:var(--space-learn-hairline);padding:var(--space-learn-tight) var(--space-learn-panel-compact);border-left:3px solid var(--warning-fg);border-radius:0 var(--radius-learn-surface) var(--radius-learn-surface) 0;background:color-mix(in srgb,var(--warning-fg) 7%,transparent);font-size:var(--text-learn-body);line-height:1.5}
.learn-mixup p{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:var(--space-learn-tight);margin:0}
.learn-mixup span{padding-top:var(--space-learn-hairline);color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.learn-mixup-not{color:var(--text-secondary)}
.learn-mixup-fix span{color:var(--warning-fg)}
.course-learn-links{margin-top:var(--space-learn-stack)}
.course-study-guide .study-guide-frame{width:100%;border:1px solid var(--border-subtle);border-radius:var(--radius-learn-panel)}
.learn-empty h1,.learn-import h1{margin:var(--space-learn-tight) 0;font-size:var(--text-learn-title-compact)}
.learn-import{display:grid;gap:var(--space-learn-tight)}
.learn-import>p{margin:0}
.learn-import-actions{display:flex;flex-wrap:wrap;gap:var(--space-learn-tight);margin-top:var(--space-learn-tight)}
.learn-import-file{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 var(--space-learn-panel-compact);border:1px solid var(--border-subtle);border-radius:var(--radius-learn-surface);background:var(--surface-raised);color:var(--text-primary);font-size:var(--text-learn-small);font-weight:500;cursor:pointer}
.learn-import-file input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
.learn-import-file:focus-within{outline:2px solid var(--action-primary-bg);outline-offset:2px}
.learn-import-status{min-height:1.4em;color:var(--text-secondary);font-size:var(--text-learn-small)}
.learn-import-status.is-error{color:var(--danger-fg)}
@media (max-width:640px){.learn-mixup p{grid-template-columns:minmax(0,1fr);gap:0}.course-learn-head{align-items:flex-start}.course-learn-head h1,.lecture-overview-head h1{font-size:var(--text-learn-title-compact)}}
/* COURSE ASSESSMENTS reuse the assessment list, start card and builder; only
   the exam line, the lecture split, and the weight dials are their own. */
.course-assess-scope{margin:var(--space-learn-stack) 0 var(--space-learn-tight);color:var(--text-secondary);font-size:var(--text-learn-small)}
.course-assess-scope b{color:var(--text-primary)}
.course-assess-covers{display:grid;gap:var(--space-learn-hairline);margin:var(--space-learn-tight) 0;padding:0;list-style:none;font-size:var(--text-learn-small)}
.course-assess-covers li{display:flex;justify-content:space-between;gap:var(--space-learn-panel-compact);padding:var(--space-learn-hairline) 0;border-bottom:1px solid color-mix(in srgb,var(--border-subtle) 70%,transparent);color:var(--text-secondary)}
.course-assess-covers b{color:var(--text-primary);font-variant-numeric:tabular-nums}
.course-assess-dials{display:grid;gap:var(--space-learn-tight)}
.course-assess-dial{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,1.2fr) 7.5em;align-items:center;gap:var(--space-learn-panel-compact);font-size:var(--text-learn-small)}
.course-assess-dial input{width:100%;accent-color:var(--action-primary-bg)}
.course-assess-dial output{color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right}
#courseAssessTitle{width:100%}
@media (max-width:640px){.course-assess-dial{grid-template-columns:minmax(0,1fr) 6.5em}.course-assess-dial input{grid-column:1/-1;grid-row:2}}

/* ---------------- Today: Continue ----------------
   Rows under the course or area they belong to. The group header carries the
   drawing once; a row is a title, what kind of work it is, how far along,
   and two actions -- open it, or remove it. */
.today-count{margin-left:var(--space-learn-tight);color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:650;letter-spacing:0;vertical-align:middle}
.continue-groups{display:grid;gap:var(--space-learn-tight);
  margin-top:var(--space-today-continue-field-lead);padding:var(--space-today-continue-field);
  border-radius:var(--radius-today-continue-field);
  background:color-mix(in srgb,var(--surface-panel) var(--visual-today-continue-field-wash),var(--surface-workspace));
  /* A row inside the field has to rise off the FIELD, not off the page.
     --panel2 is one step above the ground, which against the field is a step
     DOWN in light mode -- the hover read as a press. Rising to --surface puts
     a touched row on the calendar card's tier in both themes, and resolves
     here rather than at :root for the reason given with the tokens. */
  --surface-raised:var(--surface-panel)}
.continue-group>h3{margin:0;font:inherit}
.continue-group-toggle{display:flex;align-items:center;gap:var(--space-learn-tight);width:100%;min-height:44px;margin:0;padding:var(--space-learn-hairline) var(--space-learn-tight) var(--space-learn-hairline) 0;border:0;border-radius:var(--radius-learn-surface);background:transparent;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--theme-paint-duration,var(--action-rest-duration))}
.continue-group-toggle:hover{background:var(--surface-raised)}
.continue-group-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
/* Pressed and owned are one rule. */
.continue-group-toggle:active,.continue-group-toggle[data-action-owned="true"]{background:var(--surface-raised)}
.continue-group-chevron{flex:0 0 auto;width:8px;height:8px;margin:0 var(--space-learn-tight) 3px var(--space-learn-tight);border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg);transition:transform var(--action-rest-duration,150ms) ease}
.continue-group[data-open="false"] .continue-group-chevron{margin-bottom:0;transform:rotate(-45deg)}
.continue-group-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows 220ms ease}
.continue-group[data-open="false"] .continue-group-body{grid-template-rows:0fr}
.continue-group-body>ul{min-height:0;overflow:hidden}
.continue-group-mark{width:var(--size-activity-mark);height:var(--size-activity-mark)}
.continue-group-mark .study-glyph{width:100%;height:100%}
.continue-group-name{display:flex;align-items:baseline;gap:var(--space-learn-tight);min-width:0}
.continue-group-name b{font-size:var(--text-learn-body)}
.continue-group-name small{overflow:hidden;color:var(--text-secondary);font-size:var(--text-learn-small);text-overflow:ellipsis;white-space:nowrap}
.continue-group-count{margin-left:auto;color:var(--text-secondary);font-size:var(--text-learn-small);font-variant-numeric:tabular-nums}
.continue-group ul{display:grid;margin:0;padding:0 0 0 calc(var(--size-activity-mark) + var(--space-learn-tight));list-style:none}
.continue-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-top:1px solid var(--border-subtle)}
.continue-row-open{display:grid;grid-template-columns:minmax(0,1fr) var(--size-continue-progress) 14px;align-items:center;gap:var(--space-learn-panel-compact);min-height:56px;padding:var(--space-learn-tight) var(--space-learn-tight) var(--space-learn-tight) var(--space-learn-hairline);border:0;border-radius:var(--radius-learn-surface);background:transparent;color:var(--text-primary);text-align:left;cursor:pointer;transition:background-color var(--theme-paint-duration,var(--action-rest-duration)) ease,transform var(--action-rest-duration,150ms) ease}
.continue-row-open:hover{background:var(--surface-raised)}
.continue-row-open:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* Pressed and owned are one rule: a row that starts navigation stays pressed. */
.continue-row-open:active{background:var(--surface-raised)}
.continue-row-open[data-action-owned="true"]{transform:translateY(1px) scale(.994);background:var(--surface-raised)}
.continue-row-open[aria-busy="true"]{opacity:.7;cursor:progress}
.continue-row-copy{display:grid;gap:var(--space-learn-hairline);min-width:0}
.continue-row-copy b{overflow:hidden;font-size:var(--text-learn-body);font-weight:640;text-overflow:ellipsis;white-space:nowrap}
.continue-row-copy small{color:var(--text-secondary);font-size:var(--text-learn-small)}
.continue-row-progress{display:grid;gap:var(--space-learn-hairline);text-align:right}
.continue-row-progress small{color:var(--text-secondary);font-size:var(--text-continue-meta);font-variant-numeric:tabular-nums}
.continue-meter{display:block;width:100%;height:var(--size-continue-meter);overflow:hidden;border-radius:var(--radius-learn-chip);background:color-mix(in srgb,var(--border-subtle) 80%,transparent)}
.continue-meter i{display:block;min-width:var(--size-continue-meter);height:100%;border-radius:inherit;background:var(--action-primary-bg)}
.continue-row-go{width:8px;height:8px;border-right:2px solid var(--text-secondary);border-top:2px solid var(--text-secondary);transform:rotate(45deg);opacity:.5;transition:opacity var(--action-rest-duration,150ms) ease,transform var(--action-rest-duration,150ms) ease}
.continue-row-open:hover .continue-row-go,.continue-row-open:focus-visible .continue-row-go{opacity:1;transform:translateX(2px) rotate(45deg)}
.continue-row-remove{display:grid;place-items:center;width:32px;height:32px;margin-left:var(--space-learn-hairline);padding:0;border:0;border-radius:var(--radius-learn-chip);background:transparent;color:var(--text-secondary);font-size:var(--text-learn-prompt);line-height:1;cursor:pointer;opacity:.55;transition:opacity var(--action-rest-duration,150ms) ease,background-color var(--action-rest-duration,150ms) ease}
.continue-row:hover .continue-row-remove,.continue-row-remove:focus-visible{opacity:1}
.continue-row-remove:hover{background:var(--surface-raised);color:var(--text-primary)}
.continue-row-remove:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.continue-undo{margin-top:var(--space-learn-tight)}
.continue-loading{display:grid;gap:var(--space-learn-tight);margin-top:var(--space-learn-tight)}.continue-loading i{display:block;height:52px;border-radius:var(--radius-learn-surface);background:var(--surface-raised);opacity:.62}
.continue-empty{display:flex;align-items:center;gap:var(--space-learn-panel-compact);margin-top:var(--space-learn-panel-compact);padding:var(--space-learn-panel-compact) var(--space-learn-stack);border:1px dashed var(--border-subtle);border-radius:var(--radius-learn-panel)}
.continue-empty .mode-nav-mark{width:var(--size-activity-mark);height:var(--size-activity-mark);filter:none;opacity:1}
.continue-empty p{display:grid;gap:var(--space-learn-hairline);margin:0;font-size:var(--text-learn-small)}
.continue-empty span{color:var(--text-secondary)}
@media (prefers-reduced-motion:reduce){.continue-row-open,.continue-row-go,.continue-row-remove,.continue-group-toggle,.continue-group-chevron,.continue-group-body{transition:none}.continue-group-toggle[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:1px}.continue-row-open[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:-2px;transform:none}}
@media (forced-colors:active){.continue-row-open[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:-2px;transform:none}.continue-group-toggle[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:1px}.continue-meter i{background:Highlight}}
.continue-group-name b{white-space:normal;overflow-wrap:anywhere}
@media (max-width:640px){.continue-group-name small{display:none}.continue-group ul{padding-left:0}.continue-groups{padding:var(--space-today-continue-field-compact)}.continue-row-open{grid-template-columns:minmax(0,1fr) 64px 10px;gap:var(--space-learn-tight)}.continue-row-remove{opacity:1}}
/* Today's own marks: the day beside the date, the calendar at the head of
   the due card. Each drawing appears once, where it names what follows. */
.today-mark{display:inline-flex;flex:0 0 auto;width:var(--size-today-mark);height:var(--size-today-mark)}
/* The Today mark's scenes crossfade when the time of day turns while the page
   is open (abbreviations.js syncTodayDayMark): the arriving scene is laid
   over the leaving one in the same box. */
.today-day-mark{position:relative}
.today-day-mark>svg{transition:opacity 1.2s ease}
.today-day-mark>svg+svg{position:absolute;inset:0}
.today-day-mark>svg.is-arriving{opacity:0}
.today-mark .study-glyph,.today-mark svg{width:100%;height:100%;display:block}
.today-calendar-link{display:flex;align-items:center;gap:var(--space-learn-tight);min-height:44px;margin:calc(-1 * var(--space-learn-hairline)) 0 var(--space-learn-tight);padding:0 var(--space-learn-hairline);border-radius:var(--radius-learn-surface);color:var(--text-primary);font-weight:680;text-decoration:none}
.today-calendar-link .today-mark{width:var(--size-activity-mark);height:var(--size-activity-mark)}
.today-calendar-link:hover{background:var(--surface-raised)}
.today-calendar-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.today-calendar-go{width:8px;height:8px;margin-left:auto;margin-right:var(--space-learn-tight);border-right:2px solid var(--text-secondary);border-top:2px solid var(--text-secondary);transform:rotate(45deg);transition:transform var(--action-rest-duration,150ms) ease}
.today-calendar-link:hover .today-calendar-go,.today-calendar-link:focus-visible .today-calendar-go{transform:translateX(2px) rotate(45deg)}
@media (prefers-reduced-motion:reduce){.today-calendar-go{transition:none}}
@media (forced-colors:active){.today-calendar-link:focus-visible{outline-color:Highlight}}
/* Today's activity: one answer count per area. */
.today-activity-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:var(--space-learn-panel-compact);
  /* The same field as Continue, for the same reason: a printed list on this
     page sits in a shaped piece of ground, and one section with an edge next
     to one without reads as an accident. Only the POPULATED list gets it --
     a field around "No answers yet today." is a big empty box, which is the
     thing the field exists to keep the page from looking like. */
  margin:var(--space-today-continue-field-lead) 0 0;padding:var(--space-today-continue-field);
  border-radius:var(--radius-today-continue-field);
  background:color-mix(in srgb,var(--surface-panel) var(--visual-today-continue-field-wash),var(--surface-workspace));
  list-style:none}
.today-activity-figures li{display:grid;align-content:start;gap:var(--space-learn-hairline);min-width:0}
.today-activity-area{color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:650;line-height:1.3}
.today-activity-count{font-size:var(--text-learn-title);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (max-width:640px){.today-activity-figures{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-today-continue-field-compact)}}
/* ---------------- Calendar: month-first header ----------------
   Back and utilities share the top row. Identity and paging center over
   the same column as the month grid below. */
.calendar-utility{display:flex;align-items:center;justify-content:space-between;gap:var(--space-learn-tight);min-height:var(--size-calendar-tool);margin-bottom:18px}
.calendar-utility .study-up{margin:0}
.calendar-bar{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:var(--space-calendar-column-gap);margin-bottom:var(--space-learn-stack)}
.calendar-when{display:grid;justify-items:center;gap:var(--space-learn-panel-compact);min-width:0;text-align:center}
.calendar-when h2{display:grid;justify-items:center;gap:var(--space-learn-hairline);margin:0;font-size:var(--text-learn-title);letter-spacing:-.02em;line-height:1.1}
.calendar-year{color:var(--text-secondary);font-size:var(--text-learn-small);font-weight:700;letter-spacing:.06em}
.calendar-month{display:block}
.calendar-tools{display:flex;align-items:center;gap:var(--space-learn-tight);white-space:nowrap}
/* THE CALENDAR SPEAKS THE PRODUCT'S TWO CONTROL WORDS (4.9, 7.26).
   A choice is the Settings switch: Month / Agenda is a groove with the view
   in force raised in it, the same .pref-choice material as Appearance. The
   month pager lives in the same groove because it belongs with the month
   it moves -- but its three parts are commands, so nothing sits raised at
   rest: the chip rises under the pointer and is pressed in on click.
   Courses and More are commands like Add, so they are the secondary command
   material, at the row's one height. */
/* The row is one height: a groove is the segment plus its inset, the same
   36px as Courses, More and Add beside it. */
.calendar-utility .pref-choice-option,.calendar-step .pref-choice-option{min-height:var(--size-calendar-segment);padding-block:0}
.calendar-step .pref-choice-option{display:grid;place-items:center;color:var(--text-primary)}
.calendar-step .pref-choice-option[aria-label]{width:var(--size-calendar-segment);padding-inline:0}
.calendar-chevron{display:block;width:var(--size-calendar-chevron);height:var(--size-calendar-chevron);fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  .calendar-step .pref-choice-option:hover{background:var(--settings-choice-chip);
    box-shadow:0 1px 2px rgba(var(--elev-shade),.18)}
}
.calendar-step .pref-choice-option:active{background:var(--settings-choice-chip);
  box-shadow:inset 0 1px 2px rgba(var(--elev-shade),.22)}
.calendar-utility .calendar-tools .calendar-courses{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-action-gap);min-height:var(--size-calendar-tool);padding:0 var(--space-learn-panel-compact);
  border:0;border-radius:var(--radius-pref-choice);corner-shape:round;background:transparent;box-shadow:none;color:var(--text-primary);font-size:var(--text-pref-choice);font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;transform:none}
.calendar-utility .calendar-tools .calendar-courses.on{background:var(--surface-raised)}
@media (hover:hover) and (pointer:fine){
  .calendar-utility .calendar-tools .calendar-courses:hover{background:var(--action-secondary-hover)}
}
.calendar-utility .calendar-tools .calendar-courses:active,.calendar-utility .calendar-tools .calendar-courses[data-surface-open="true"]{background:var(--surface-raised)}
/* Drawn buttons. Scoped to the utility row so shared button padding does
   not push the drawing off centre. */
.calendar-utility .calendar-tools .calendar-icon-button{position:relative;display:grid;place-items:center;width:var(--size-calendar-tool);height:var(--size-calendar-tool);min-height:0;padding:0;overflow:visible;border-radius:var(--radius-action);corner-shape:var(--shape-action);cursor:pointer}
.calendar-plus{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.calendar-filter-icon{display:block;flex-shrink:0;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
/* More is a <summary>, not a button, so it takes the secondary command
   material by its tokens: the shared secondary fill, edge, hover and press. */
.calendar-more>summary.calendar-icon-button{border:1px solid var(--border-subtle);
  background:var(--action-secondary-bg);color:var(--text-primary);list-style:none;
  transition:background-color .14s ease,border-color .14s ease,transform .14s ease}
@media (hover:hover) and (pointer:fine){
  .calendar-more>summary.calendar-icon-button:hover{background:var(--action-secondary-hover);border-color:var(--action-secondary-edge-hover)}
}
.calendar-more>summary.calendar-icon-button:active,.calendar-more[open]>summary.calendar-icon-button{
  background:var(--action-secondary-press);border-color:var(--action-secondary-press-edge)}
.calendar-more>summary.calendar-icon-button:active{transform:translateY(1px)}
.calendar-more>summary.calendar-icon-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.calendar-more>summary::-webkit-details-marker{display:none}
.calendar-dots{display:flex;gap:var(--space-calendar-dots)}.calendar-dots i{width:4px;height:4px;border-radius:50%;background:currentColor}
/* The name of a drawn button, under it on hover and on keyboard focus. */
.calendar-icon-button[data-tip]::after{content:attr(data-tip);position:absolute;inset:calc(100% + 6px) 0 auto auto;width:auto;height:auto;z-index:9;box-shadow:none;padding:var(--space-learn-hairline) var(--space-learn-tight);border-radius:var(--radius-learn-surface);background:var(--text-primary);color:var(--bg);font-size:var(--text-continue-meta);font-weight:650;line-height:1.5;letter-spacing:0;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity var(--action-rest-duration,150ms) ease,transform var(--action-rest-duration,150ms) ease}
@media (hover:hover){.calendar-icon-button[data-tip]:hover::after{opacity:1;transform:none}}
.calendar-icon-button[data-tip]:focus-visible::after{opacity:1;transform:none}
.calendar-more[open]>summary[data-tip]::after{opacity:0}
.calendar-sheet .calendar-dialog-actions{padding-top:var(--space-learn-panel-compact)}
.calendar-more,.calendar-add{position:relative}
.calendar-add>summary{display:flex;align-items:center;justify-content:center;gap:var(--space-learn-tight);min-height:var(--size-calendar-tool);padding:0 var(--space-learn-panel-compact);border:1px solid var(--action-primary-bg);border-radius:var(--radius-action);corner-shape:var(--shape-action);background:var(--action-primary-bg);color:var(--action-primary-fg);font-size:var(--text-pref-choice);font-weight:600;line-height:1.2;list-style:none;cursor:pointer}
.calendar-add>summary::-webkit-details-marker{display:none}
.calendar-add>summary:active,.calendar-add[open]>summary{background:var(--action-primary-press);border-color:var(--action-primary-press)}
.calendar-add>summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.calendar-more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:8;display:grid;min-width:190px;padding:var(--space-learn-hairline);border:1px solid var(--border-subtle);border-radius:var(--radius-learn-panel);background:var(--surface-panel);box-shadow:var(--elev-3)}
.calendar-more-menu button{padding:var(--space-learn-tight) var(--space-learn-panel-compact);border:0;border-radius:var(--radius-learn-surface);background:transparent;color:var(--text-primary);text-align:left;font-size:var(--text-learn-small);cursor:pointer}
.calendar-more-menu button:hover,.calendar-more-menu button:focus-visible{background:var(--surface-raised)}
.calendar-add-menu{width:320px;max-width:calc(100vw - 32px);white-space:normal}
.calendar-add-heading{margin:0;padding:var(--space-learn-tight) var(--space-learn-panel-compact);color:var(--text-secondary);font-size:var(--text-continue-meta);font-weight:600}
.calendar-add-menu button{display:grid;gap:var(--space-learn-hairline);width:100%}
.calendar-add-menu button span{font-weight:600}
.calendar-add-menu button small{color:var(--text-secondary);font-size:var(--text-continue-meta);line-height:1.5}
@media (prefers-reduced-motion:reduce){.calendar-icon-button[data-tip]::after{transition:none}}
@media (forced-colors:active){.calendar-icon-button[data-tip]::after{border:1px solid CanvasText}.calendar-view-toggle .pref-choice-option[aria-pressed="true"],.calendar-courses.on{outline:2px solid Highlight;outline-offset:-2px}}
@media(max-width:900px){
  .calendar-bar{grid-template-columns:1fr}
}
@media(max-width:760px){
  .calendar-utility{flex-wrap:wrap}
  .calendar-bar{gap:var(--space-learn-tight);margin-bottom:var(--space-learn-panel-compact)}
  .calendar-when{gap:var(--space-learn-tight)}
  .calendar-when h2{font-size:var(--text-learn-title-compact)}
  .calendar-tools{justify-content:flex-end;flex-wrap:wrap;white-space:normal;margin-left:auto}
}
.calendar-event{background:color-mix(in srgb,var(--course) var(--course-tint-strength),var(--surface-card));border-radius:var(--radius-learn-surface)}
.calendar-event.completed{text-decoration:none;opacity:.5}
.calendar-event-done{margin-right:var(--space-learn-hairline);color:var(--success-fg);font-style:normal;font-weight:800}
.agenda-item.completed .agenda-copy{text-decoration:none;opacity:.55}
.calendar-detail-empty{display:flex;align-items:center;gap:var(--space-learn-tight);color:var(--text-secondary);font-size:var(--text-learn-small)}
.calendar-detail-empty .mode-nav-mark,.calendar-onboarding .mode-nav-mark{filter:grayscale(.6);opacity:.55}
.calendar-onboarding .mode-nav-mark{width:var(--size-continue-mark);height:var(--size-continue-mark);margin:0 auto var(--space-learn-tight);filter:none;opacity:1}
.today-assignment-dot{display:inline-block;width:7px;height:7px;margin-right:var(--space-learn-hairline);border-radius:50%;background:var(--course);vertical-align:1px}
/* Keep the organizer's completion action clear of the final course row. */
.calendar-organizer>.calendar-dialog-actions{margin-top:var(--space-calendar-organizer-actions-gap)}


.personal-source-panel{--space-lecture-source-gap:var(--primitive-spacing-12px);--space-lecture-source-section:var(--primitive-spacing-24px);display:grid;gap:var(--space-lecture-source-gap);padding-bottom:var(--space-lecture-source-section);margin-bottom:var(--space-lecture-source-section);border-bottom:1px solid var(--border-subtle)}
.personal-source-replacement,.personal-source-replacement label{display:grid;gap:var(--space-lecture-source-gap);min-width:0}
.personal-source-replacement input{min-width:0;max-width:100%}
.personal-source-panel .row,.definition-reference-actions,.definition-row-actions{--space-definition-actions-gap:var(--primitive-spacing-8px);display:flex;flex-wrap:wrap;gap:var(--space-definition-actions-gap)}
.definition-row-actions{margin-top:var(--space-definition-actions-gap)}
.definition-reference-actions{justify-content:flex-end}
.definition-reference-head>.study-up-link{min-height:var(--size-action-touch)}


/* Shared copyable handoff for lecture and definitions Creator Kits. */
.creator-ai-prompt{display:grid;gap:var(--space-personal-creator-regular);min-width:0;padding:var(--space-personal-creator-large);border:1px solid var(--border-subtle);border-radius:var(--radius-personal-builder-input);background:var(--surface-panel)}
.creator-ai-prompt label{font-weight:700;color:var(--text-primary)}
.creator-ai-prompt p{margin:0;color:var(--text-secondary);line-height:1.55}
.creator-ai-prompt textarea{display:block;box-sizing:border-box;width:100%;min-width:0;padding:var(--space-personal-creator-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-personal-builder-input);background:var(--surface-card);color:var(--text-primary);font:inherit;line-height:1.55;resize:vertical}
.creator-ai-prompt button{justify-self:start}
.creator-ai-prompt-status:empty{display:none}
/* Calendar handoff sections use space and a filled text field, without nested boxes. */
.calendar-import .creator-ai-prompt{margin-top:var(--space-calendar-kit-gap);padding:0;border:0;background:transparent;gap:var(--space-personal-creator-large)}
.calendar-import .creator-ai-prompt textarea{border:0;background:var(--surface-raised)}
.calendar-import>.calendar-dialog-actions{margin-top:var(--space-calendar-kit-gap)}

.personal-question-scope{display:grid;gap:var(--space-personal-creator-regular)}
.personal-question-scope label{display:flex;align-items:flex-start;gap:var(--space-personal-creator-inset);padding:var(--space-personal-creator-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-personal-builder-input);cursor:pointer;background:var(--surface-card)}
.personal-course-dialog .personal-question-scope input[type="checkbox"]{flex:0 0 var(--space-personal-creator-indent);width:var(--space-personal-creator-indent);height:var(--space-personal-creator-indent);min-height:0;padding:0;margin:0;accent-color:var(--action-primary-bg)}
.personal-question-scope label:has(input:checked){border-color:var(--action-primary-bg)}
.personal-question-scope label span{display:grid;gap:var(--space-personal-creator-tight);min-width:0}
.personal-question-scope label b{font-weight:600;line-height:1.4}
.personal-question-scope label small{color:var(--text-secondary)}
.personal-question-scope-actions{display:flex;gap:var(--space-personal-creator-regular);margin-bottom:var(--space-personal-creator-inset)}

.personal-creator-mode{width:min(100%,28rem)}

:root{
  --space-creator-columns:var(--primitive-spacing-40px);
  --space-creator-panel-inset:var(--primitive-spacing-22px);
  --space-creator-control-gap:var(--primitive-spacing-16px);
  --text-creator-source-title:var(--primitive-font-size-16px);
  --space-creator-action-gap:var(--primitive-spacing-8px);
  --space-creator-section-gap:var(--primitive-spacing-24px);
  --space-creator-prompt-gap:var(--primitive-spacing-12px);
  --space-creator-prompt-inset:var(--primitive-spacing-18px);
  --space-creator-stack-gap:var(--primitive-spacing-32px);
  --space-creator-mobile-inset:var(--primitive-spacing-20px);
}
/* Creator hierarchy comes from distinct work areas and spacing, not dividers. */
.personal-builder:has(.personal-creator-layout){max-width:1040px}
.personal-creator-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--space-creator-columns);align-items:start}
.personal-creator-source{position:sticky;top:100px;min-width:0;padding:var(--space-creator-panel-inset);border-radius:var(--radius-personal-builder-upload);background:var(--surface-panel)}
.personal-creator-source .personal-source-panel{margin:0;padding:0;border:0;gap:var(--space-creator-control-gap)}
.personal-creator-source h2{margin:0;font-size:var(--text-creator-source-title)}
.personal-creator-source p{margin:0;color:var(--text-secondary);line-height:1.5;overflow-wrap:anywhere}
.personal-creator-source .row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-creator-action-gap)}
.personal-creator-source button{width:100%;white-space:normal;text-align:left}
.personal-creator-layout .personal-builder-card{padding:0;gap:var(--space-creator-section-gap);border:0;background:transparent;box-shadow:none}
.personal-creator-layout .personal-builder-card>div:first-child ol{padding-left:var(--space-creator-panel-inset);margin:12px 0 0;line-height:1.6}
.personal-creator-layout .personal-builder-card>div:first-child li+li{margin-top:8px}
.personal-creator-layout .creator-ai-prompt{padding:0;border:0;background:transparent;gap:var(--space-creator-prompt-gap)}
.personal-creator-layout .creator-ai-prompt textarea{border:0;background:var(--surface-panel);padding:var(--space-creator-prompt-inset);min-height:190px}
.personal-creator-layout .personal-creator-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-creator-control-gap)}
.personal-creator-layout .personal-creator-advanced{padding:var(--space-creator-control-gap) var(--space-creator-mobile-inset);border:0;border-radius:var(--radius-personal-builder-upload);background:var(--surface-panel)}
.personal-creator-layout .personal-creator-advanced fieldset{border:0;padding:0;gap:var(--space-personal-creator-regular) var(--space-creator-control-gap)}
.personal-creator-layout .personal-creator-advanced legend{margin-bottom:12px;font-weight:650}
.personal-creator-layout .personal-creator-advanced fieldset label{padding:var(--space-creator-action-gap) var(--space-creator-prompt-gap);border-radius:var(--radius-personal-builder-input);background:var(--surface-card)}
.personal-creator-layout .personal-builder-upload{padding:var(--space-creator-panel-inset);border:0;background:var(--surface-panel);gap:var(--space-creator-control-gap)}
.personal-creator-layout .personal-builder-upload button{grid-column:1/-1;justify-self:start;width:auto}
.personal-creator-layout .personal-builder-upload input{border:0;background:var(--surface-card)}
@media(max-width:800px){
  .personal-creator-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-creator-stack-gap)}
  .personal-creator-source{position:static;padding:var(--space-creator-mobile-inset)}
  .personal-creator-source .row{display:flex;flex-wrap:wrap}
  .personal-creator-source button{width:auto;flex:1 1 150px;text-align:center}
  .personal-creator-layout .personal-builder-card{padding:0}
}
@media(max-width:480px){
  .personal-creator-layout .personal-creator-choices{grid-template-columns:minmax(0,1fr)}
  .personal-creator-layout .personal-builder-upload,.personal-creator-layout .personal-creator-advanced{padding:var(--space-creator-prompt-inset)}
  .personal-creator-layout .personal-builder-upload button{width:100%}
}

:root{
  --space-creator-upload-scroll:var(--primitive-spacing-100px);
  --text-creator-upload-heading:var(--primitive-font-size-18px);
  --size-creator-upload-file-icon:var(--primitive-spacing-24px);
  --text-creator-upload-detail:var(--primitive-font-size-13px);
  --text-creator-upload-title:var(--primitive-font-size-16px);
  --text-creator-upload-caption:var(--primitive-font-size-12px);
  --text-creator-upload-count:var(--primitive-font-size-24px);
  --size-creator-upload-action:var(--primitive-spacing-48px);
}
/* One lecture upload owns the chosen file, recovery, review and confirmation. */
:root{
  --size-creator-mix-number:var(--primitive-spacing-72px);
  --size-creator-mix-touch:var(--primitive-spacing-44px);
  --text-creator-mix-detail:var(--primitive-font-size-13px);
}
.personal-creator-layout fieldset.creator-mix{display:grid;gap:var(--space-creator-control-gap);min-width:0;margin:0;padding:var(--space-creator-panel-inset);border:0;border-radius:var(--radius-personal-builder-upload);background:var(--surface-panel);scroll-margin-block:var(--space-creator-upload-scroll)}
.creator-mix legend{float:left;padding:0;font-weight:650}
.creator-mix>select{width:100%;min-height:var(--size-creator-mix-touch)}
.creator-mix p{margin:0;line-height:1.5;color:var(--text-secondary)}
.creator-mix-levels{display:flex;flex-wrap:wrap;gap:var(--space-creator-action-gap);margin-top:var(--space-creator-control-gap)}
.creator-mix-levels label{display:flex;align-items:center;gap:var(--space-creator-action-gap);min-height:var(--size-creator-mix-touch);font-weight:500;cursor:pointer}
.personal-builder .creator-mix-levels input[type="checkbox"]{width:auto;min-height:0;margin:0;accent-color:var(--action-primary-bg)}
#creatorMixCustom{display:grid;gap:var(--space-creator-control-gap)}
.creator-mix-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-creator-control-gap);align-items:center}
.creator-mix-row-head{display:contents}
.creator-mix-row-head label{font-weight:650}
.creator-mix-row-head label span{font-weight:400;color:var(--text-secondary)}
.creator-mix-value{grid-column:2;grid-row:1/span 2;display:flex;align-items:center;gap:var(--space-creator-action-gap)}
.personal-builder .creator-mix-value input{box-sizing:border-box;width:var(--size-creator-mix-number);min-height:var(--size-creator-mix-touch);padding:var(--space-creator-action-gap);text-align:right;font:inherit;font-variant-numeric:tabular-nums}
.personal-builder .creator-mix-row input[type="range"]{grid-column:1;display:block;width:100%;min-height:var(--size-creator-mix-touch);margin:0;padding:0;accent-color:var(--action-primary-bg);cursor:pointer;box-shadow:none;background:transparent;border:0}
.creator-mix-total{font-weight:650;font-variant-numeric:tabular-nums}
.creator-mix-total[data-valid="false"]{color:var(--danger-fg)}
.creator-mix-hint{font-size:var(--text-creator-mix-detail)}
.creator-mix .personal-creator-level-help{margin:0}
.personal-mix-result{padding:var(--space-creator-control-gap) 0;border-top:1px solid var(--border-subtle)}
.personal-mix-result summary{cursor:pointer;font-weight:650;line-height:1.6}
.personal-mix-result summary>span{display:block;font-weight:400;color:var(--text-secondary);font-size:var(--text-creator-mix-detail)}
.personal-mix-result p{color:var(--text-secondary);font-size:var(--text-creator-mix-detail);line-height:1.5}
.personal-mix-result table{display:table;table-layout:fixed;width:100%;border-collapse:collapse;font-size:var(--text-creator-mix-detail);font-variant-numeric:tabular-nums}
.personal-mix-result th,.personal-mix-result td{text-align:left;padding:var(--space-creator-action-gap) var(--space-creator-action-gap) var(--space-creator-action-gap) 0;border-bottom:1px solid var(--border-subtle)}
.personal-mix-result th{text-transform:none;letter-spacing:normal;font-size:inherit}
.personal-mix-result th:first-child{width:45%}
.personal-mix-result th:last-child,.personal-mix-result td:last-child{padding-right:0}
.personal-mix-result tbody th{font-weight:500}
.personal-mix-result td span,.personal-mix-result th span{color:var(--text-secondary)}
.personal-creator-layout .personal-builder-upload.personal-lecture-upload{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-creator-control-gap);min-width:0;scroll-margin-block:var(--space-creator-upload-scroll)}
.personal-lecture-upload .lecture-upload-heading h2{margin:0;font-size:var(--text-creator-upload-heading)}
.personal-lecture-upload .lecture-upload-heading p{margin:var(--space-creator-action-gap) 0 0;color:var(--text-secondary);line-height:1.5}
.personal-creator-layout .personal-lecture-upload button.lecture-file-picker{display:flex;align-items:center;gap:var(--space-creator-control-gap);width:100%;min-width:0;justify-self:stretch;padding:var(--space-creator-control-gap);border:1px solid var(--border-subtle);border-radius:var(--radius-personal-builder-input);background:var(--surface-card);color:var(--text-primary);text-align:left;box-shadow:none;font:inherit;white-space:normal}
.personal-creator-layout .personal-lecture-upload button.lecture-file-picker:hover{background:var(--surface-subtle);transform:none}
.lecture-file-picker svg{flex:0 0 var(--size-creator-upload-file-icon);width:var(--size-creator-upload-file-icon);height:var(--size-creator-upload-file-icon);color:var(--text-secondary)}
.lecture-file-copy{display:grid;gap:var(--space-personal-creator-tight);min-width:0;flex:1}
.lecture-file-copy b{font-weight:650;overflow-wrap:anywhere;line-height:1.45}
.lecture-file-copy>span,.lecture-file-change{color:var(--text-secondary);font-size:var(--text-creator-upload-detail)}
.lecture-file-change{flex:none;color:var(--text-link);font-weight:600}
.lecture-review-heading h3{margin:0;font-size:var(--text-creator-upload-title);line-height:1.4;text-transform:none;letter-spacing:normal;color:var(--text-primary);font-weight:650;overflow-wrap:anywhere}
.lecture-upload-message p{margin:0;color:var(--text-secondary);line-height:1.5}
.lecture-review-heading>p:last-child{margin:var(--space-creator-action-gap) 0 0;color:var(--text-secondary);line-height:1.5}
.lecture-upload-review{display:grid;gap:var(--space-creator-control-gap);padding-top:var(--space-creator-control-gap);border-top:1px solid var(--border-subtle);min-width:0}
.lecture-upload-caption{margin:0 0 var(--space-creator-action-gap);color:var(--text-secondary);font-size:var(--text-creator-upload-caption)}
.lecture-upload-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-creator-control-gap);margin:0}
.lecture-upload-counts>div{display:flex;flex-direction:column-reverse;gap:var(--space-personal-creator-tight);min-width:0}
.lecture-upload-counts dt{color:var(--text-secondary);font-size:var(--text-creator-upload-detail)}
.lecture-upload-counts dd{margin:0;font-size:var(--text-creator-upload-count);font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums}
.lecture-upload-notice,.lecture-review-note{margin:0;line-height:1.5;color:var(--text-secondary)}
.lecture-review-note{font-size:var(--text-creator-upload-detail)}
.lecture-upload-notes{color:var(--text-secondary);font-size:var(--text-creator-upload-detail)}
.lecture-upload-notes summary{cursor:pointer;color:var(--text-primary)}
.lecture-upload-notes ul{padding-left:var(--space-creator-panel-inset);line-height:1.6}
.lecture-upload-error:empty{display:none}
.lecture-upload-error:not(:empty){color:var(--danger-fg);line-height:1.5;overflow-wrap:anywhere}
.lecture-upload-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-creator-control-gap);padding-top:var(--space-creator-action-gap)}
.lecture-upload-actions [data-upload-back]{margin-right:auto}
.personal-creator-layout .personal-lecture-upload .lecture-upload-actions button{width:auto;min-height:var(--size-creator-upload-action);white-space:normal}
@media(max-width:480px){.personal-creator-layout .personal-lecture-upload .lecture-upload-actions [data-upload-submit]{flex:1}.lecture-file-picker .lecture-file-change{font-size:var(--text-creator-upload-caption)}}

/* Native popup selects share an inset chevron and reserve room for it.
   Use currentColor so theme, disabled state, and feedback colors stay coherent.
   The language pickers already supply their own indicator; listboxes have none.
   Important declarations protect this geometry from page-level form shorthands. */
:root{
  --space-select-arrow-inset:var(--primitive-spacing-14px);
  --size-select-arrow-half:var(--primitive-spacing-6px);
  --size-select-arrow-stroke:calc(var(--primitive-spacing-1px) / 2);
  --space-select-text-end:calc(2 * var(--space-select-arrow-inset) + 2 * var(--size-select-arrow-half));
}
select:where(:not([size]),[size="0"],[size="1"]):not([multiple]):not(.landing-header-language select):not(.language-picker select){
  appearance:none;
  -webkit-appearance:none;
  padding-inline-end:var(--space-select-text-end)!important;
  background-image:linear-gradient(45deg,transparent calc(50% - var(--size-select-arrow-stroke)),currentColor calc(50% - var(--size-select-arrow-stroke)),currentColor calc(50% + var(--size-select-arrow-stroke)),transparent calc(50% + var(--size-select-arrow-stroke))),linear-gradient(135deg,transparent calc(50% - var(--size-select-arrow-stroke)),currentColor calc(50% - var(--size-select-arrow-stroke)),currentColor calc(50% + var(--size-select-arrow-stroke)),transparent calc(50% + var(--size-select-arrow-stroke)))!important;
  background-position:right calc(var(--space-select-arrow-inset) + var(--size-select-arrow-half)) center,right var(--space-select-arrow-inset) center!important;
  background-size:var(--size-select-arrow-half) var(--size-select-arrow-half)!important;
  background-repeat:no-repeat!important;
}
select:where(:not([size]),[size="0"],[size="1"]):not([multiple]):not(.landing-header-language select):not(.language-picker select):dir(rtl){
  background-position:left var(--space-select-arrow-inset) center,left calc(var(--space-select-arrow-inset) + var(--size-select-arrow-half)) center!important;
}
@media(forced-colors:active){
  select:where(:not([size]),[size="0"],[size="1"]):not([multiple]):not(.landing-header-language select):not(.language-picker select){
    appearance:auto;
    -webkit-appearance:auto;
    background-image:none!important;
  }
}

/* Unavailable study modes stay visible without looking selected or broken. */
:root{--space-course-mode-hint:var(--primitive-spacing-9px);--text-course-mode-hint:var(--primitive-font-size-12px)}
.course-mode-nav button:disabled,.course-mode-nav button:disabled:hover{color:var(--text-secondary);opacity:.45;cursor:default;border-color:transparent;background:transparent}
.course-mode-nav button:disabled .mode-nav-mark,.course-mode-nav button:disabled:hover .mode-nav-mark{filter:var(--artwork-muted-filter);opacity:var(--activity-mark-muted-opacity)}
.course-mode-unavailable{align-self:center;color:var(--text-secondary);font-size:var(--text-course-mode-hint);padding-block:var(--space-course-mode-hint)}

:root{--space-creator-level-help-gap:var(--primitive-spacing-8px);--text-creator-level-help:var(--primitive-font-size-13px)}
.personal-creator-level-help{flex-basis:100%;font-size:var(--text-creator-level-help)}
.personal-creator-advanced .personal-creator-level-help summary{color:var(--text-secondary);font-weight:500}
.personal-creator-level-help dl{display:grid;gap:var(--space-creator-level-help-gap);margin:var(--space-creator-level-help-gap) 0 0}
.personal-creator-level-help dt{font-weight:650;color:var(--text-primary)}
.personal-creator-level-help dd{margin:0;color:var(--text-secondary);line-height:1.5}

/* Display type: headings and question prompts speak in the rounded face; body text, drug names and doses stay in
   Instrument Sans. Rounded letterforms are wider, so display tracking opens to normal. */
h1,h2,h3,.stage-subject,.prompt,.assess-prompt{font-family:var(--font-display)}
:where(h1,h2,h3,.stage-subject,.prompt,.assess-prompt){letter-spacing:normal}




/* Brief save feedback belongs below the session name, away from count and exit. */
.stage-rail:has(>.definition-save-status){--space-definition-save-row:var(--primitive-spacing-4px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:var(--space-definition-save-row)}
.definition-save-status{--text-definition-save-status:var(--primitive-font-size-12-5px);
  display:block;grid-column:1;grid-row:2;min-block-size:1.52em;
  font-size:var(--text-definition-save-status);font-weight:400;text-align:left;color:var(--text-secondary);font-variant-numeric:tabular-nums;opacity:1;transition:opacity .2s ease}
.definition-save-status[data-save-visible="false"]{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.definition-save-status[data-save-state="error"]{color:var(--danger-fg)}
@media(max-width:640px){
  .stage-rail:has(>.definition-save-status){grid-template-columns:1fr}
  .stage-rail:has(>.definition-save-status)>.stage-rail-end{grid-column:1;grid-row:2;justify-self:end}
  /* Stacked, the notice clears the round exit's target, which reaches a
     quarter of its size past the row it sits in. */
  .definition-save-status{grid-row:3;margin-block-start:calc(var(--size-control-icon-button) / 4)}
}
@media(prefers-reduced-motion:reduce){.definition-save-status,.definition-save-status[data-save-visible="false"]{transition:none}}




/* COURSE SHARING (constitution 7.29). The dialogs wear the course dialog's
   material with no ruled header: a level below the overview carries the one up
   control above its title. Inside, Settings' rows stand on the dialog itself,
   parted by space -- a panel inside a dialog would be a box in a box -- under
   small-capital group labels. Each row may lead with a control glyph so the
   ways to join scan by silhouette. */
.course-sharing-dialog{display:flex;flex-direction:column;overflow:hidden;width:min(600px,100%);max-height:min(780px,calc(100dvh - 32px))}
.course-sharing-dialog .sharing-dialog-header{display:grid;justify-items:start;gap:var(--space-pref-stack);padding-inline-end:var(--space-pref-group-compact);flex-shrink:0}
.course-sharing-dialog .sharing-dialog-header h2{margin:0;overflow-wrap:anywhere;color:var(--text-primary)}
.sharing-up{display:inline-flex;align-items:center;gap:var(--space-pref-hairline);margin:0 0 0 calc(-1 * var(--space-pref-inline));padding:var(--space-pref-quiet-block) var(--space-pref-inline);border:0;border-radius:var(--radius-pref-tag);background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--text-pref-meta);font-weight:650;cursor:pointer}
.sharing-up .control-glyph{width:var(--size-sharing-up-glyph);height:var(--size-sharing-up-glyph)}
@media (hover:hover) and (pointer:fine){.sharing-up:hover{color:var(--text-primary);background:var(--action-quiet-hover)}}
.sharing-up:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sharing-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-pref-inline);margin:0;color:var(--text-secondary);font-size:var(--text-pref-value)}
.sharing-dialog-body{min-width:0;min-height:0;margin-top:var(--space-pref-detail);overflow:auto;overscroll-behavior:contain}
.course-sharing-dialog [data-sharing-error]{flex-shrink:0;scroll-margin-block:var(--space-pref-detail)}
.course-sharing-dialog [data-sharing-error]:empty{display:none}
.course-sharing-dialog .dialog-actions{flex-shrink:0;flex-wrap:wrap;margin-top:var(--space-pref-detail)}
.sharing-lead{margin:0 0 var(--space-pref-detail);color:var(--text-secondary);font-size:var(--text-pref-value);line-height:1.55}
.sharing-note{margin:var(--space-pref-stack) 0 0;color:var(--text-secondary);font-size:var(--text-pref-meta);line-height:1.5}
.sharing-alert,.sharing-feedback{margin:0 0 var(--space-pref-detail);padding:var(--space-pref-follow) var(--space-pref-row-panel);border-radius:var(--radius-pref-tag);font-size:var(--text-pref-value);line-height:1.5}
.sharing-alert{background:var(--warning-bg);color:var(--warning-fg)}
.sharing-feedback{background:var(--success-bg);color:var(--success-fg);font-weight:600}
.sharing-empty{margin:0;padding:var(--space-pref-follow) 0;color:var(--text-secondary);font-size:var(--text-pref-value)}
.sharing-group+.sharing-group{margin-top:var(--space-pref-detail)}
.sharing-group h3,.sharing-section h3{margin:0;color:var(--text-secondary);font-size:var(--text-pref-group);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.course-sharing-dialog .sharing-list{padding:0;border-radius:0;background:transparent}
.sharing-row .pref-copy{flex-basis:var(--size-pref-copy-min)}
@media(max-width:640px){.sharing-row .pref-copy{flex-basis:var(--size-pref-copy-min-compact)}}
.sharing-row:has(>.sharing-glyph){column-gap:var(--space-pref-row-panel)}
.sharing-glyph{display:inline-flex;flex:none;align-self:flex-start;margin-top:var(--space-pref-hairline);color:var(--text-secondary)}
.sharing-glyph .control-glyph{width:var(--size-sharing-glyph);height:var(--size-sharing-glyph)}
.pref-quiet.sharing-danger{color:var(--danger-fg)}
.course-sharing-dialog .pref-quiet{margin-right:0}
.sharing-more{margin-top:var(--space-pref-follow)}
/* Publishing: what is shared, which lectures, how it is labelled. */
.sharing-section{margin-top:var(--space-pref-group-compact)}
.sharing-section>h3{margin-bottom:var(--space-pref-follow)}
.sharing-facts{margin:0;color:var(--text-primary);font-size:var(--text-pref-title);font-weight:650}
.sharing-chips{display:flex;flex-wrap:wrap;gap:var(--space-pref-stack);margin:var(--space-pref-follow) 0 0;padding:0;list-style:none}
.sharing-chips li{padding:var(--space-pref-hairline) var(--space-pref-follow);border-radius:var(--radius-pref-tag);background:var(--surface-raised);color:var(--text-primary);font-size:var(--text-pref-meta);font-weight:600;line-height:1.6}
.sharing-exam{margin:var(--space-pref-follow) 0 var(--space-pref-hairline);color:var(--text-secondary);font-size:var(--text-pref-meta);font-weight:700}
.sharing-exam:first-of-type{margin-top:0}
.course-sharing-dialog .sharing-check,.shared-course-preview .sharing-check{display:flex;align-items:flex-start;gap:var(--space-pref-follow);margin:0;padding:var(--space-pref-stack) 0;color:var(--text-primary);font-size:var(--text-pref-value);font-weight:650;cursor:pointer}
.course-sharing-dialog .sharing-check input{flex:none;width:var(--size-sharing-check);height:var(--size-sharing-check);min-height:0;margin:var(--space-pref-hairline) 0 0;padding:0;accent-color:var(--action-primary-bg)}
.sharing-check small{margin-left:var(--space-pref-stack);color:var(--text-secondary);font-size:var(--text-pref-meta);font-weight:500}
.sharing-set-choices{padding-inline-start:var(--space-pref-group-compact)}
.sharing-set-choices .sharing-check{font-weight:500}
.sharing-set-choices .sharing-check:has(input:disabled){opacity:.5;cursor:default}
.sharing-selection-update{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-pref-follow);margin-top:var(--space-pref-follow);padding:var(--space-pref-stack) var(--space-pref-stack) var(--space-pref-stack) var(--space-pref-row-panel);border-radius:var(--radius-pref-tag);background:var(--accent-soft);color:var(--text-primary);font-size:var(--text-pref-value)}
.sharing-selection-update[hidden]{display:none}
.course-sharing-dialog .sharing-field,.shared-course-preview .sharing-field{display:grid;gap:var(--space-pref-stack);margin:0;color:var(--text-primary);font-size:var(--text-pref-value);font-weight:650}
.sharing-field+.sharing-field{margin-top:var(--space-pref-row-panel)}
.sharing-field small{margin-left:var(--space-pref-stack);color:var(--text-secondary);font-size:var(--text-pref-meta);font-weight:500}
.course-sharing-dialog .sharing-rights{margin-top:var(--space-pref-follow)}
/* Ways to join: compose, result, list. */
.sharing-compose{display:grid;gap:var(--space-pref-stack);margin-bottom:var(--space-pref-detail)}
.sharing-compose>label{color:var(--text-primary);font-size:var(--text-pref-value);font-weight:650}
.sharing-compose>small{color:var(--text-secondary);font-size:var(--text-pref-meta)}
.sharing-compose-row,.sharing-copy-row{display:flex;align-items:stretch;gap:var(--space-pref-inline)}
.sharing-compose-row input,.sharing-copy-row input{flex:1 1 auto;min-width:0}
.sharing-compose-row button,.sharing-copy-row button{flex:none}
.sharing-copy-row input{font-size:var(--text-pref-meta)}
.sharing-result{margin:0 0 var(--space-pref-detail);padding:var(--space-pref-row-panel);border-radius:var(--radius-pref-panel);background:var(--accent-soft)}
.sharing-result-title{margin:0 0 var(--space-pref-follow);color:var(--text-primary);font-size:var(--text-pref-value);font-weight:700;overflow-wrap:anywhere}
#createGeneralLink{margin-bottom:var(--space-pref-detail)}
.sharing-choice-field{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-pref-follow);margin-bottom:var(--space-pref-row-panel);color:var(--text-primary);font-size:var(--text-pref-value);font-weight:650}
.sharing-publications{display:grid}
.sharing-publication-row{display:flex;align-items:center;gap:var(--space-pref-row-panel);width:calc(100% + 2 * var(--space-pref-inline));margin-inline:calc(-1 * var(--space-pref-inline));padding:var(--space-pref-follow) var(--space-pref-inline);border:0;border-radius:var(--radius-pref-tag);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
@media (hover:hover) and (pointer:fine){.sharing-publication-row:hover{background:var(--action-quiet-hover)}.sharing-publication-row:hover .pref-arrow{transform:translateX(var(--pref-arrow-travel))}}
.sharing-publication-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sharing-publication-row .pref-copy{flex:1 1 auto}
/* The preview: a course card a stranger can read, then one action. */
.shared-course-preview{max-width:var(--size-pref-page);margin:var(--space-pref-follow) auto 0;padding:var(--space-pref-group-compact);border-radius:var(--radius-pref-panel);background:var(--surface-panel);box-shadow:var(--elev-1);color:var(--text-primary);overflow-wrap:anywhere}
.shared-preview-head{display:flex;align-items:center;gap:var(--space-pref-row-panel)}
.shared-preview-head>div{min-width:0}
.shared-course-preview h1{margin:var(--space-pref-hairline) 0;color:var(--text-primary);font-size:var(--text-shared-preview-title);line-height:1.2}
.shared-preview-by{margin:0;color:var(--text-secondary);font-size:var(--text-pref-value)}
.shared-preview-description{margin:var(--space-pref-detail) 0 0;font-size:var(--text-pref-value);line-height:1.55}
.shared-preview-contents{margin-top:var(--space-pref-row-panel)}
.shared-preview-facts{margin:0;color:var(--text-primary);font-size:var(--text-pref-title);font-weight:650}
.shared-preview-join{display:grid;gap:var(--space-pref-follow);margin-top:var(--space-pref-group-compact)}
.shared-preview-join[hidden]{display:none}
.shared-preview-join .sharing-note{margin-top:0}
.shared-preview-join label:not(.sharing-field){display:grid;gap:var(--space-pref-stack);font-size:var(--text-pref-value);font-weight:650}
.shared-preview-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-pref-follow);margin-top:var(--space-pref-row-panel)}
.shared-preview-aside{display:flex;flex-wrap:wrap;gap:var(--space-pref-row-panel);margin:var(--space-pref-follow) 0 0 calc(-1 * var(--space-action-inline-compact))}
.shared-course-preview .sharing-note a{color:var(--action-primary-bg)}
.shared-course-preview .editor-error:empty{display:none}
.shared-course-unavailable .button{margin-top:var(--space-pref-follow)}
/* Library: the student-shared shelf, its search and its catalog rows. */
.shared-library-head p{margin:var(--space-pref-hairline) 0 0;color:var(--text-secondary);font-size:var(--text-pref-value)}
.shared-library-search{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:var(--space-pref-inline);align-items:stretch;margin:var(--space-pref-row-panel) 0 var(--space-pref-follow)}
.shared-library-search label{display:grid;min-width:0}
.shared-library-search input{width:100%;min-width:0;min-height:44px;box-sizing:border-box;padding:0 var(--space-pref-row-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-pref-tag);background:var(--surface-raised);color:var(--text-primary);font:inherit}
.shared-library-search button{min-height:44px}
#sharedLibraryResults .catalog-entry-copy{min-width:0}
#sharedLibraryResults .course-tile{margin-inline:var(--space-pref-hairline)}
@media(max-width:600px){
  .shared-library-search{grid-template-columns:minmax(0,1fr)}
  .shared-library-search button{justify-self:start}
  .sharing-compose-row{flex-direction:column;align-items:stretch}
  .course-sharing-dialog .dialog-actions button{flex:1 1 auto;white-space:normal}
  .shared-course-preview{padding:var(--space-pref-row-panel) var(--space-pref-panel-inline-compact)}
  .shared-course-preview h1{font-size:var(--text-shared-preview-title-compact)}
}

.public-content-environment:has(.shared-course-preview) #themeToggle{display:none}

/* OSCE documents reuse the assessment spacing and semantic surface roles. */
.osce-workspace{display:grid;gap:var(--space-assess-section-gap)}
.osce-intro p,.osce-lesson p{max-width:var(--workspace-max-width)}
.osce-exhibits,.osce-case-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:var(--space-assess-facts-gap)}
.osce-document{min-width:0;padding:var(--space-assess-surface-gap);border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--surface-panel)}
.osce-document h3{margin-top:0}
.osce-document dl{margin:0;display:grid;gap:var(--space-assess-copy-gap)}
.osce-document dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-assess-control-gap);padding-block:var(--space-assess-copy-gap);border-bottom:1px solid var(--border-subtle)}
.osce-document dt{color:var(--text-secondary)}
.osce-document dd{margin:0;overflow-wrap:anywhere}
.osce-lessons{display:flex;flex-wrap:wrap;gap:var(--space-assess-control-gap)}
.osce-lessons a{padding:var(--space-assess-control-pad);border-bottom:1px solid var(--border-subtle)}
.osce-lessons a[aria-current]{font-weight:700;border-color:var(--text-primary)}
.osce-answer textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;margin-block:var(--space-assess-control-gap)}
.osce-original{white-space:pre-wrap;overflow-wrap:anywhere}
.osce-criterion{display:grid;gap:var(--space-assess-control-gap);padding-block:var(--space-assess-panel-gap);border-bottom:1px solid var(--border-subtle)}
.osce-criterion select{width:100%;max-width:100%}
.osce-history{list-style:none;padding:0}
.osce-history li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-assess-control-gap);padding-block:var(--space-assess-control-gap)}
.osce-history span{color:var(--text-secondary)}
.osce-return{padding:var(--space-assess-panel-gap);margin:0}
/* BEGIN GENERATED COLOR CONTRACT */
:root{
  --p-black:#000000;
  --p-blue-025:#f2f8ff;
  --p-blue-050:#f7fbff;
  --p-blue-075:#f1f6fd;
  --p-blue-100:#e6f0ff;
  --p-blue-150:#e4edfb;
  --p-blue-300:#76a9ee;
  --p-blue-400:#6eafff;
  --p-blue-550:#4a75cc;
  --p-blue-600:#276dcc;
  --p-blue-625:#2266e3;
  --p-blue-650:#246fd3;
  --p-blue-700:#285d9f;
  --p-blue-950:#203d61;
  --p-composite-001:rgba(0,0,0,.26);
  --p-composite-002:rgba(0,0,0,.15);
  --p-composite-003:rgba(0,0,0,.25);
  --p-composite-004:rgba(0,0,0,.21);
  --p-composite-005:#5c96e8;
  --p-composite-006:#4d8be6;
  --p-composite-007:rgba(0,0,0,.38);
  --p-composite-008:rgba(233,185,104,.24);
  --p-composite-009:rgba(0,0,0,.36);
  --p-composite-010:rgba(233,185,104,.32);
  --p-composite-011:rgba(0,0,0,.45);
  --p-composite-012:rgba(0,0,0,.32);
  --p-composite-013:rgba(238,243,249,.12);
  --p-composite-014:rgba(233,185,104,.008);
  --p-composite-015:rgba(233,185,104,.028);
  --p-composite-016:rgba(233,185,104,.075);
  --p-composite-017:rgba(245,207,138,.16);
  --p-composite-018:rgba(245,207,138,.94);
  --p-composite-019:rgba(233,185,104,.52);
  --p-composite-020:rgba(233,185,104,.18);
  --p-composite-021:rgba(245,207,138,.20);
  --p-composite-022:rgba(233,185,104,.09);
  --p-composite-023:rgba(217,164,74,.035);
  --p-composite-024:rgba(217,164,74,0);
  --p-composite-025:rgba(0,0,0,.85);
  --p-composite-026:rgba(232,236,249,.055);
  --p-composite-027:rgba(233,185,104,.22);
  --p-composite-028:rgba(233,185,104,.42);
  --p-composite-029:rgba(148,186,230,.12);
  --p-composite-030:rgba(33,54,79,.96);
  --p-composite-031:rgba(23,42,64,.92);
  --p-composite-032:rgba(20,37,57,.86);
  --p-composite-033:#7fa9d4;
  --p-composite-034:#557597;
  --p-composite-035:#1d334e;
  --p-composite-036:#0b192b;
  --p-composite-037:rgba(47,106,183,.15);
  --p-composite-038:rgba(246,234,209,.55);
  --p-composite-039:rgba(0,0,0,.42);
  --p-composite-040:rgba(0,0,0,.6);
  --p-composite-041:#cf9c54;
  --p-composite-042:#b9853f;
  --p-composite-043:#e0ab5e;
  --p-composite-044:#c69048;
  --p-composite-045:#79adf3;
  --p-composite-046:rgba(255,255,255,0);
  --p-composite-047:rgba(255,255,255,1);
  --p-composite-048:rgba(39,109,204,.18);
  --p-composite-049:rgba(39,109,204,.22);
  --p-composite-050:rgba(147,184,245,.42);
  --p-composite-051:rgba(47,85,161,.52);
  --p-composite-052:#638cde;
  --p-composite-053:#557fd4;
  --p-composite-054:#355ca9;
  --p-composite-055:#7b5525;
  --p-composite-056:rgba(20,118,79,.2);
  --p-composite-057:rgba(20,118,79,.4);
  --p-composite-058:rgba(181,62,74,.2);
  --p-composite-059:rgba(181,62,74,.46);
  --p-composite-060:rgba(20,118,79,0);
  --p-composite-061:rgba(20,118,79,.12);
  --p-composite-062:rgba(181,62,74,0);
  --p-composite-063:rgba(20,118,79,.16);
  --p-composite-064:rgba(20,118,79,.32);
  --p-composite-065:#333;
  --p-composite-066:#222;
  --p-composite-067:rgba(0,0,0,.12);
  --p-composite-068:#b6c7da;
  --p-composite-069:#ccd9e8;
  --p-composite-070:#cddaea;
  --p-composite-071:rgba(0,0,0,.44);
  --p-composite-072:rgba(0,0,0,.22);
  --p-composite-073:#f7fafd;
  --p-composite-074:#e9f0f8;
  --p-composite-075:rgba(0,0,0,.34);
  --p-composite-076:rgba(21,49,79,.15);
  --p-composite-077:rgba(21,49,79,.08);
  --p-composite-078:rgba(233,185,104,.34);
  --p-composite-079:rgba(6,14,25,.92);
  --p-composite-080:rgba(6,14,25,.78);
  --p-composite-081:rgba(6,14,25,.20);
  --p-composite-082:rgba(6,14,25,0);
  --p-composite-083:rgba(6,14,25,.16);
  --p-composite-084:rgba(10,21,36,.65);
  --p-composite-085:rgba(6,14,25,.95);
  --p-composite-086:rgba(6,14,25,.74);
  --p-composite-087:rgba(10,21,36,.94);
  --p-composite-088:rgba(29,22,11,.35);
  --p-composite-089:rgba(255,255,255,.25);
  --p-composite-090:rgba(255,255,255,.08);
  --p-composite-091:#12263a;
  --p-composite-092:#1b3652;
  --p-composite-093:#11283f;
  --p-composite-094:rgba(0,0,0,.18);
  --p-composite-095:rgba(0,0,0,.11);
  --p-composite-096:rgba(0,0,0,.1);
  --p-composite-097:rgba(255,255,255,.24);
  --p-composite-098:rgba(255,255,255,.07);
  --p-composite-099:rgba(0,0,0,.28);
  --p-composite-100:#d8d2bd;
  --p-composite-101:rgba(0,0,0,.35);
  --p-composite-102:rgba(255,255,255,.12);
  --p-composite-103:rgba(255,255,255,.045);
  --p-composite-104:rgba(0,0,0,.5);
  --p-composite-105:rgba(255,255,255,.15);
  --p-composite-106:rgba(0,0,0,.9);
  --p-composite-107:rgba(0,0,0,.55);
  --p-composite-108:rgba(255,255,255,.06);
  --p-composite-109:rgba(181,62,74,.13);
  --p-composite-110:rgba(181,62,74,.12);
  --p-composite-111:rgba(0,0,0,.24);
  --p-composite-112:rgba(0,0,0,.3);
  --p-composite-113:rgba(0,0,0,.2);
  --p-composite-114:#f2c77d;
  --p-composite-115:#e8b462;
  --p-composite-116:#dca248;
  --p-composite-117:#e3ae57;
  --p-composite-118:#d59a3d;
  --p-composite-119:#b8a17b;
  --p-composite-120:#9e8967;
  --p-composite-121:rgba(3,10,18,.3);
  --p-composite-122:rgba(217,164,74,.18);
  --p-composite-123:rgba(217,164,74,.24);
  --p-composite-124:rgba(3,10,18,.28);
  --p-composite-125:rgba(217,164,74,.14);
  --p-course-amber:#a5601b;
  --p-course-berry:#ad3a68;
  --p-course-brick:#b2442f;
  --p-course-green:#2e7a45;
  --p-course-indigo:#4b55a6;
  --p-course-ocean:#2c6aa6;
  --p-course-olive:#66702a;
  --p-course-plum:#7a4ea0;
  --p-course-slate:#56657a;
  --p-course-teal:#18786f;
  --p-disabled-dark:#494a4b;
  --p-disabled-light:#dbe2e9;
  --p-eclipse-600:#3a3a3c;
  --p-eclipse-650:#666667;
  --p-eclipse-700:#434444;
  --p-eclipse-800:#353536;
  --p-eclipse-850:#2d2e2e;
  --p-eclipse-900:#232323;
  --p-eclipse-925:#1e1e1e;
  --p-eclipse-950:#0f0f0f;
  --p-eclipse-980:#1a1a1c;
  --p-gold-100:#3a2e17;
  --p-gold-300:#f5cf8a;
  --p-gold-400:#e9b968;
  --p-gold-425:#ecb55c;
  --p-gold-500:#d9a44a;
  --p-gold-600:#c08a36;
  --p-green-100:#e2f4ec;
  --p-green-400:#68cda4;
  --p-green-700:#14764f;
  --p-green-800:#178355;
  --p-green-900:#0b5136;
  --p-green-950:#17392f;
  --p-hero-ink-400:#163466;
  --p-hero-ink-500:#12295a;
  --p-hero-ink-600:#0e2147;
  --p-hero-ink-700:#0b1a38;
  --p-landing-graph-field:#f2f6fc;
  --p-landing-graph-line:#dde7f4;
  --p-landing-paper:#faf7f0;
  --p-landing-paper-rule:#ebe4d6;
  --p-navy-700:#304966;
  --p-navy-800:#20344d;
  --p-navy-900:#111f31;
  --p-navy-950:#0e1c3a;
  --p-navy-990:#07111e;
  --p-neutral-000:#ffffff;
  --p-neutral-050:#f1f5f9;
  --p-neutral-075:#eef3f9;
  --p-neutral-100:#eef2f8;
  --p-neutral-175:#f5f7fa;
  --p-neutral-200:#edf3f9;
  --p-neutral-250:#dde5ef;
  --p-neutral-300:#cdd8e5;
  --p-neutral-350:#9eb1c7;
  --p-neutral-400:#bac6d4;
  --p-neutral-500:#a9adb2;
  --p-neutral-650:#5f7084;
  --p-neutral-700:#52606f;
  --p-neutral-900:#152237;
  --p-orange-100:#fff1e3;
  --p-orange-400:#e8934a;
  --p-orange-700:#93500c;
  --p-orange-950:#3d2b20;
  --p-palette-071:#315f9f;
  --p-palette-073:#294f84;
  --p-palette-075:#397c78;
  --p-palette-077:#2c6662;
  --p-palette-078:#85b8b4;
  --p-palette-079:#5d668c;
  --p-palette-080:#5c6384;
  --p-palette-081:#4f587c;
  --p-palette-083:#8a6838;
  --p-palette-085:#73552b;
  --p-palette-086:#c7a979;
  --p-palette-087:#824b5b;
  --p-palette-089:#6f3d4c;
  --p-palette-091:#555f8d;
  --p-palette-092:#565d83;
  --p-palette-093:#465078;
  --p-palette-095:#718096;
  --p-palette-096:#eef2f6;
  --p-palette-097:#405064;
  --p-palette-098:#ced9e7;
  --p-palette-099:#c8d1dc;
  --p-palette-100:#41536a;
  --p-palette-101:#4f83bf;
  --p-palette-102:#77a9df;
  --p-palette-103:#e7f0fa;
  --p-palette-104:#1c3249;
  --p-palette-105:#285786;
  --p-palette-107:#b9cfe7;
  --p-palette-108:#395d7f;
  --p-palette-109:#b68a22;
  --p-palette-110:#d7b65a;
  --p-palette-111:#fff5d8;
  --p-palette-112:#39331f;
  --p-palette-113:#765813;
  --p-palette-114:#f0d98e;
  --p-palette-115:#e4cd8a;
  --p-palette-116:#6d5d2e;
  --p-palette-117:#826ba8;
  --p-palette-118:#ad92d2;
  --p-palette-119:#f0ebf7;
  --p-palette-120:#302a40;
  --p-palette-121:#594477;
  --p-palette-123:#cdbfe0;
  --p-palette-124:#5b4c74;
  --p-palette-125:#378c85;
  --p-palette-126:#65b6ad;
  --p-palette-127:#e1f2ef;
  --p-palette-128:#1d3838;
  --p-palette-129:#25635e;
  --p-palette-131:#add7d1;
  --p-palette-132:#356661;
  --p-palette-133:#bd7444;
  --p-palette-134:#dc9669;
  --p-palette-135:#faede4;
  --p-palette-136:#3c2d25;
  --p-palette-137:#7d4725;
  --p-palette-139:#e1c0a9;
  --p-palette-140:#704d39;
  --p-palette-141:#b65b72;
  --p-palette-142:#d98499;
  --p-palette-143:#f8e8ed;
  --p-palette-144:#3c2730;
  --p-palette-145:#7a3649;
  --p-palette-147:#dfb7c3;
  --p-palette-148:#704555;
  --p-palette-149:#568c5f;
  --p-palette-150:#83b88a;
  --p-palette-151:#e8f2e8;
  --p-palette-152:#243728;
  --p-palette-153:#37643e;
  --p-palette-155:#bdd5c0;
  --p-palette-156:#49664d;
  --p-palette-157:#986387;
  --p-palette-158:#c18aac;
  --p-palette-159:#f3e9ef;
  --p-palette-160:#3a2935;
  --p-palette-161:#693f5e;
  --p-palette-163:#d9bdcf;
  --p-palette-164:#6b4b61;
  --p-palette-165:#6679b8;
  --p-palette-166:#93a6df;
  --p-palette-167:#e9edf8;
  --p-palette-168:#272f49;
  --p-palette-169:#43558e;
  --p-palette-171:#c1cae4;
  --p-palette-172:#4b587d;
  --p-palette-174:#d4952a;
  --p-palette-175:#9aa7b5;
  --p-palette-176:#8a96a6;
  --p-palette-177:#eef1f5;
  --p-palette-178:#5f6e80;
  --p-palette-179:#2f9a70;
  --p-palette-180:#47b886;
  --p-palette-182:#2f7fd8;
  --p-palette-183:#5b9df0;
  --p-palette-184:#e3eefc;
  --p-palette-185:#1b3354;
  --p-palette-186:#1f5fa8;
  --p-palette-188:#6b5bd6;
  --p-palette-189:#8f80ea;
  --p-palette-190:#ebe8fb;
  --p-palette-191:#2c2750;
  --p-palette-192:#4d3fb2;
  --p-palette-194:#2f6fb0;
  --p-palette-195:#3a78bd;
  --p-palette-196:#5b9bd8;
  --p-palette-197:#2c5b8f;
  --p-palette-198:#dcebfb;
  --p-palette-199:#e19b31;
  --p-palette-200:#b97d25;
  --p-palette-201:#3b2508;
  --p-palette-202:#fff5e3;
  --p-palette-203:#f4c36d;
  --p-palette-204:#8a6121;
  --p-palette-205:#4a3209;
  --p-palette-206:#fbe8c4;
  --p-palette-207:#a9cdf0;
  --p-palette-208:#5d95d1;
  --p-palette-209:#24518a;
  --p-palette-210:#d0912f;
  --p-palette-211:#e8b35a;
  --p-palette-212:#b8741f;
  --p-palette-213:#94621f;
  --p-palette-215:#0b1930;
  --p-palette-216:#52677f;
  --p-palette-217:#75869a;
  --p-palette-218:#102d55;
  --p-palette-219:#f5f9ff;
  --p-palette-220:#5d7087;
  --p-palette-221:#245fba;
  --p-palette-222:#697b90;
  --p-palette-223:#9aa7b6;
  --p-palette-224:#657589;
  --p-palette-225:#d8e2ee;
  --p-palette-226:#f8fafc;
  --p-palette-227:#638bd7;
  --p-palette-228:#d26a54;
  --p-palette-229:#4f9a6d;
  --p-palette-230:#7b59c4;
  --p-palette-231:#d99b20;
  --p-palette-232:#040a13;
  --p-palette-233:#d8624b;
  --p-palette-234:#e5ecf4;
  --p-palette-235:#33465e;
  --p-palette-236:#e5484d;
  --p-palette-237:#6f5bd3;
  --p-palette-238:#2b4568;
  --p-palette-239:#1a2c45;
  --p-palette-240:#2e7d5b;
  --p-palette-241:#b3451f;
  --p-palette-242:#b3261e;
  --p-palette-243:#232324;
  --p-palette-244:#8a6232;
  --p-palette-245:#0d0e0f;
  --p-palette-246:#e8ecf9;
  --p-palette-247:#a3abbc;
  --p-palette-248:#a9bcd2;
  --p-palette-249:#526983;
  --p-palette-250:#edf4ff;
  --p-palette-251:#a4ccff;
  --p-palette-252:#99c5ff;
  --p-palette-253:#f0d39f;
  --p-palette-254:#7d8699;
  --p-palette-255:#667a91;
  --p-palette-256:#b9c9da;
  --p-palette-257:#2f79d7;
  --p-palette-258:#b4c9e1;
  --p-palette-259:#2d2d2e;
  --p-palette-260:#a0743c;
  --p-palette-261:#1e1f20;
  --p-palette-262:#1b1405;
  --p-palette-263:#6b7f95;
  --p-palette-264:#8ea2b8;
  --p-palette-265:#8bb9f6;
  --p-palette-266:#256fca;
  --p-palette-267:#174f96;
  --p-palette-270:#edf2f7;
  --p-palette-274:#c9d8e9;
  --p-palette-275:#b9c9de;
  --p-palette-276:#f2f6fb;
  --p-palette-277:#5b6f86;
  --p-palette-278:#c7d5ec;
  --p-palette-279:#070e17;
  --p-palette-280:#edf3fa;
  --p-palette-284:#4a3113;
  --p-palette-285:#ffe2a1;
  --p-palette-289:#b97918;
  --p-palette-290:#79b99a;
  --p-palette-291:#101d2f;
  --p-palette-292:#26364c;
  --p-palette-293:#3d4f66;
  --p-palette-294:#5c6c82;
  --p-palette-295:#2f6fd0;
  --p-palette-296:#12233a;
  --p-palette-297:#7d8da8;
  --p-palette-298:#1c8a5c;
  --p-palette-299:#dcf3e7;
  --p-palette-300:#fbe3e6;
  --p-palette-301:#fdf0d6;
  --p-palette-302:#7d5a10;
  --p-palette-303:#e5edf6;
  --p-palette-304:#c8d5e4;
  --p-palette-305:#fbfdff;
  --p-palette-306:#1d160b;
  --p-palette-309:#f4f8fd;
  --p-palette-310:#93a9c2;
  --p-palette-311:#2b4b69;
  --p-palette-313:#aac4e4;
  --p-palette-314:#b9d5ff;
  --p-palette-316:#a06c05;
  --p-palette-317:#b84f3a;
  --p-palette-318:#c65741;
  --p-palette-319:#3d8c5c;
  --p-palette-326:#06101f;
  --p-palette-327:#2f6eb8;
  --p-palette-340:#f7faff;
  --p-palette-341:#f6f9fc;
  --p-palette-342:#172337;
  --p-palette-343:#0f1c2e;
  --p-palette-344:#f8fbff;
  --p-palette-351:#7d95b4;
  --p-palette-352:#C6DAF3;
  --p-palette-353:#9db4d0;
  --p-palette-354:#3a3a3a;
  --p-palette-355:#e9eff6;
  --p-palette-356:#5a5b5b;
  --p-palette-357:#121c29;
  --p-palette-358:#a9b8ca;
  --p-palette-359:#13223a;
  --p-palette-360:#262727;
  --p-palette-361:#2a3c56;
  --p-palette-362:#188259;
  --p-palette-363:rgba(255,255,255,.55);
  --p-palette-364:rgba(255,255,255,.28);
  --p-palette-365:rgba(255,255,255,.34);
  --p-palette-366:rgba(0,0,0,0);
  --p-palette-367:rgba(255,255,255,.35);
  --p-palette-368:rgba(255,255,255,.42);
  --p-palette-369:rgba(92,54,4,.2);
  --p-palette-370:rgba(127,127,127,.08);
  --p-palette-371:#666;
  --p-palette-372:rgba(255,255,255,.32);
  --p-palette-373:rgba(255,255,255,.4);
  --p-palette-374:#000;
  --p-palette-375:#fff;
  --p-palette-376:rgba(7,17,30,.45);
  --p-palette-377:#111;
  --p-palette-378:rgba(233,185,104,.08);
  --p-palette-379:rgba(5,10,18,.68);
  --p-palette-380:rgba(255,255,255,.58);
  --p-palette-381:rgba(255,255,255,.055);
  --p-palette-382:rgba(255,255,255,.11);
  --p-palette-383:rgba(255,255,255,.72);
  --p-palette-384:rgba(8,10,16,.55);
  --p-palette-385:#19345c;
  --p-palette-386:#2d5e96;
  --p-palette-387:#cedcf0;
  --p-palette-388:rgba(18,43,78,.18);
  --p-palette-389:#172f52;
  --p-palette-390:#2d5b90;
  --p-palette-391:#153635;
  --p-palette-392:#cbe1df;
  --p-palette-393:rgba(17,58,56,.18);
  --p-palette-394:#303449;
  --p-palette-395:#59617f;
  --p-palette-396:#d6d9e7;
  --p-palette-397:rgba(42,47,72,.18);
  --p-palette-398:#40321f;
  --p-palette-399:#725633;
  --p-palette-400:#e4d8c5;
  --p-palette-401:rgba(62,46,27,.18);
  --p-palette-402:#40242c;
  --p-palette-403:#724151;
  --p-palette-404:#e5d1d7;
  --p-palette-405:rgba(62,32,43,.18);
  --p-palette-406:#ffadb5;
  --p-palette-407:#435973;
  --p-palette-408:#20334b;
  --p-palette-409:#14263c;
  --p-palette-410:#8bbcff;
  --p-palette-411:#060e19;
  --p-palette-412:#0a1524;
  --p-palette-413:#08111e;
  --p-palette-414:#0d1c2e;
  --p-palette-415:#112438;
  --p-palette-416:#1b2f47;
  --p-palette-417:#152740;
  --p-palette-418:#c6d6e8;
  --p-palette-419:#8ea5be;
  --p-palette-420:#7fb0f0;
  --p-palette-421:#6fd0aa;
  --p-palette-422:#a68ce8;
  --p-palette-423:#ef8f7a;
  --p-palette-424:#5fc4d8;
  --p-palette-425:#edc170;
  --p-palette-426:#f3cd82;
  --p-palette-427:#d89b3e;
  --p-palette-428:#9f8966;
  --p-palette-429:#524936;
  --p-palette-430:rgba(127,176,240,.78);
  --p-palette-431:#62758c;
  --p-palette-432:#e6ecf3;
  --p-palette-433:#354a63;
  --p-palette-434:#a86c10;
  --p-palette-435:#168b69;
  --p-palette-436:#7256bf;
  --p-palette-437:#c35c4d;
  --p-palette-438:#16849a;
  --p-palette-439:#18181a;
  --p-palette-440:#54687f;
  --p-palette-441:#bfd1e5;
  --p-palette-442:#e6edf6;
  --p-red-100:#fde4e7;
  --p-red-200:#fde7ea;
  --p-red-300:#f2c2c7;
  --p-red-400:#ff7c8d;
  --p-red-450:#ff8178;
  --p-red-550:#a96772;
  --p-red-600:#bd5965;
  --p-red-700:#b53e4a;
  --p-red-800:#c74753;
  --p-red-900:#81222d;
  --p-red-925:#4a2931;
  --p-red-950:#47262d;
  --p-retention-field:#2862bf;
  --p-retuned-443:#3e659c;
  --p-retuned-444:#85a9dc;
  --p-retuned-445:#3b726e;
  --p-retuned-446:#a1abcd;
  --p-retuned-447:#83663e;
  --p-retuned-448:#7d4e5b;
  --p-retuned-449:#c997a4;
  --p-retuned-450:#a3aed6;
  --p-retuned-451:#a5d0ff;
  --p-retuned-452:#d9c6f9;
  --p-retuned-453:#a9ddd7;
  --p-retuned-454:#fac3a4;
  --p-retuned-455:#fab4c3;
  --p-retuned-456:#b4deb8;
  --p-retuned-457:#e9bedc;
  --p-retuned-458:#b2c7ff;
  --p-retuned-459:#9be4bd;
  --p-retuned-460:#83baff;
  --p-retuned-461:#9796ff;
  --p-teal-100:#def3f0;
  --p-teal-400:#5cc6bb;
  --p-teal-700:#15776f;
  --p-teal-950:#173a36;
  --accent-soft:var(--p-blue-100);
  --account-card-accent:var(--p-palette-410);
  --account-card-accent-2:var(--p-gold-425);
  --account-card-accent-3:var(--p-blue-625);
  --account-card-bad:var(--p-palette-406);
  --account-card-bad-2:var(--p-palette-406);
  --account-card-bad-3:var(--p-palette-242);
  --account-card-dim:var(--p-palette-248);
  --account-card-dim-2:var(--p-palette-247);
  --account-card-dim-3:var(--p-palette-440);
  --account-card-line:var(--p-palette-407);
  --account-card-line-2:var(--p-palette-259);
  --account-card-line-3:var(--p-palette-441);
  --account-card-panel2:var(--p-palette-408);
  --account-card-panel2-2:var(--p-palette-261);
  --account-card-panel2-3:var(--p-palette-442);
  --account-card-surface:var(--p-palette-409);
  --account-card-surface-2:var(--p-palette-439);
  --account-card-surface-3:var(--p-neutral-000);
  --account-card-text:var(--p-palette-250);
  --account-card-text-2:var(--p-palette-246);
  --account-card-text-3:var(--p-navy-990);
  --account-environment-header-bg:var(--p-palette-279);
  --account-environment-header-control-bg:var(--p-palette-439);
  --account-environment-header-control-bg-2:var(--p-palette-359);
  --account-environment-header-control-line:var(--p-palette-259);
  --account-environment-header-control-line-2:var(--p-palette-361);
  --account-environment-header-control-text:var(--p-palette-246);
  --account-environment-header-control-text-2:var(--p-neutral-000);
  --account-environment-header-muted:var(--p-palette-247);
  --account-environment-header-muted-2:var(--p-palette-431);
  --account-environment-header-text:var(--p-palette-246);
  --account-environment-header-text-2:var(--p-neutral-900);
  --action-primary-bg:var(--p-blue-625);
  --action-primary-bg-hover:var(--p-blue-650);
  --action-primary-disabled-bg:var(--p-disabled-light);
  --action-primary-disabled-edge:var(--p-neutral-300);
  --action-primary-disabled-fg:var(--p-neutral-650);
  --action-primary-fg:var(--p-neutral-000);
  --arrival-canvas:var(--p-neutral-100);
  --auth-environment-header-bg:var(--p-navy-990);
  --auth-environment-header-control-bg:var(--p-palette-359);
  --auth-environment-header-control-line:var(--p-palette-361);
  --auth-environment-header-control-text:var(--p-neutral-000);
  --auth-environment-header-muted:var(--p-palette-358);
  --auth-environment-header-text:var(--p-neutral-075);
  --auth-environment-on-accent:var(--p-neutral-000);
  --bg:var(--p-palette-355);
  --border-subtle:var(--p-neutral-250);
  --brand-arrival-canvas:var(--p-navy-990);
  --calendar-course-default-color:var(--p-palette-224);
  --calendar-outside-bg:var(--p-neutral-175);
  --calendar-selected-bg:var(--p-blue-075);
  --course-swatch-01:var(--p-course-ocean);
  --course-swatch-02:var(--p-course-teal);
  --course-swatch-03:var(--p-course-green);
  --course-swatch-04:var(--p-course-olive);
  --course-swatch-05:var(--p-course-amber);
  --course-swatch-06:var(--p-course-brick);
  --course-swatch-07:var(--p-course-berry);
  --course-swatch-08:var(--p-course-plum);
  --course-swatch-09:var(--p-course-indigo);
  --course-swatch-10:var(--p-course-slate);
  --danger-action-text:var(--p-red-700);
  --danger-bg:var(--p-red-100);
  --danger-bg-hover:var(--p-red-200);
  --danger-edge:var(--p-red-800);
  --danger-edge-hover:var(--p-red-600);
  --danger-fg:var(--p-red-700);
  --danger-icon:var(--p-red-700);
  --danger-solid-bg:var(--p-red-700);
  --danger-solid-fg:var(--p-neutral-000);
  --eclipse-ground:var(--p-eclipse-950);
  --eclipse-workspace:var(--p-eclipse-900);
  --exam-flag:var(--p-palette-174);
  --focus-ring:var(--p-blue-300);
  --ghost-action-busy-color:var(--p-palette-375);
  --ground-paper:var(--p-neutral-100);
  --header-attention-bg:var(--p-orange-400);
  --header-attention-fg:var(--p-orange-950);
  --header-bg:var(--p-palette-357);
  --header-control-bg:var(--p-palette-359);
  --header-control-line:var(--p-palette-361);
  --header-control-text:var(--p-neutral-000);
  --header-muted:var(--p-palette-358);
  --header-text:var(--p-neutral-075);
  --info-bg:var(--p-blue-150);
  --info-edge:var(--p-blue-700);
  --info-fg:var(--p-blue-700);
  --lab-cell-seam:var(--p-palette-363);
  --lab-cube-front:var(--p-palette-196);
  --lab-cube-grid:var(--p-palette-363);
  --lab-cube-pick-front:var(--p-palette-199);
  --lab-cube-pick-side:var(--p-palette-212);
  --lab-cube-pick-top:var(--p-palette-203);
  --lab-cube-side:var(--p-palette-194);
  --lab-cube-top:var(--p-palette-207);
  --lab-depth-0-surface:var(--p-palette-194);
  --lab-depth-0-text:var(--p-neutral-000);
  --lab-depth-1-surface:var(--p-palette-196);
  --lab-depth-1-text:var(--p-neutral-000);
  --lab-depth-2-surface:var(--p-palette-199);
  --lab-depth-2-text:var(--p-palette-201);
  --lab-depth-3-surface:var(--p-palette-203);
  --lab-depth-3-text:var(--p-palette-205);
  --ladder-learned-ink:var(--p-palette-179);
  --ladder-learned-surface:var(--p-green-100);
  --ladder-learned-text:var(--p-green-700);
  --ladder-not-started-ink:var(--p-palette-175);
  --ladder-not-started-surface:var(--p-palette-177);
  --ladder-not-started-text:var(--p-palette-178);
  --ladder-proven-ink:var(--p-palette-182);
  --ladder-proven-surface:var(--p-palette-184);
  --ladder-proven-text:var(--p-palette-186);
  --ladder-retained-ink:var(--p-palette-188);
  --ladder-retained-surface:var(--p-palette-190);
  --ladder-retained-text:var(--p-palette-192);
  --landing-content-accent-clarity:var(--p-palette-438);
  --landing-content-accent-energy:var(--p-palette-437);
  --landing-content-accent-growth:var(--p-palette-435);
  --landing-content-accent-highlight:var(--p-palette-434);
  --landing-content-accent-learning:var(--p-palette-436);
  --landing-content-accent-link:var(--p-blue-600);
  --landing-content-l-head:var(--p-neutral-900);
  --landing-content-l-line:var(--p-neutral-300);
  --landing-content-l-line-soft:var(--p-palette-432);
  --landing-content-l-panel:var(--p-neutral-000);
  --landing-content-l-panel-2:var(--p-neutral-200);
  --landing-content-l-text:var(--p-palette-433);
  --landing-content-l-text-dim:var(--p-palette-440);
  --landing-environment-accent-clarity:var(--p-palette-424);
  --landing-environment-accent-energy:var(--p-palette-423);
  --landing-environment-accent-growth:var(--p-palette-421);
  --landing-environment-accent-highlight:var(--p-gold-425);
  --landing-environment-accent-highlight-strong:var(--p-gold-500);
  --landing-environment-accent-learning:var(--p-palette-422);
  --landing-environment-accent-link:var(--p-palette-420);
  --landing-environment-cta-primary-edge:var(--p-gold-600);
  --landing-environment-cta-primary-edge-disabled:var(--p-palette-428);
  --landing-environment-cta-primary-edge-hover:var(--p-gold-600);
  --landing-environment-cta-primary-edge-pressed:var(--p-gold-600);
  --landing-environment-cta-primary-focus:var(--p-palette-430);
  --landing-environment-cta-primary-text:var(--p-palette-306);
  --landing-environment-cta-primary-text-disabled:var(--p-palette-429);
  --landing-environment-l-band:var(--p-palette-412);
  --landing-environment-l-band-alt:var(--p-palette-413);
  --landing-environment-l-head:var(--p-palette-309);
  --landing-environment-l-ink:var(--p-palette-411);
  --landing-environment-l-line:var(--p-palette-416);
  --landing-environment-l-line-soft:var(--p-palette-417);
  --landing-environment-l-panel:var(--p-palette-414);
  --landing-environment-l-panel-2:var(--p-palette-415);
  --landing-environment-l-text:var(--p-palette-418);
  --landing-environment-l-text-dim:var(--p-palette-419);
  --landing-graph-field:var(--p-landing-graph-field);
  --landing-graph-line:var(--p-landing-graph-line);
  --landing-header-header-control-bg:var(--p-palette-359);
  --landing-header-header-control-line:var(--p-palette-361);
  --landing-header-header-control-text:var(--p-neutral-000);
  --landing-header-header-muted:var(--p-palette-431);
  --landing-header-header-text:var(--p-neutral-900);
  --landing-header-link-hover:var(--p-blue-625);
  --landing-highlighter:var(--p-gold-300);
  --landing-ink-line:var(--p-blue-625);
  --landing-paper:var(--p-landing-paper);
  --landing-paper-rule:var(--p-landing-paper-rule);
  --landing-retention-accent:var(--p-gold-300);
  --landing-retention-ink:var(--p-neutral-000);
  --landing-retention-surface:var(--p-retention-field);
  --landing-review-mark:var(--p-gold-500);
  --line-strong:var(--p-neutral-350);
  --match-success-marker-bg:var(--p-palette-362);
  --nav-spotlight-edge:var(--p-gold-500);
  --nav-spotlight-highlight:var(--p-gold-300);
  --nav-spotlight-source:var(--p-gold-400);
  --neutral-bg:var(--p-neutral-200);
  --neutral-edge:var(--p-neutral-350);
  --neutral-fg:var(--p-neutral-700);
  --neutral-icon:var(--p-neutral-700);
  --on-accent:var(--p-neutral-000);
  --outer-canvas-bg:var(--p-navy-990);
  --progress-bg:var(--p-teal-100);
  --progress-edge:var(--p-teal-700);
  --progress-fg:var(--p-teal-700);
  --rule-strong:var(--p-neutral-900);
  --settings-choice-chip:var(--p-neutral-000);
  --shell-menu-bg:var(--p-navy-900);
  --shell-menu-danger-fg:var(--p-red-300);
  --shell-menu-edge:var(--p-navy-700);
  --shell-menu-fg:var(--p-neutral-075);
  --shell-menu-hover-bg:var(--p-navy-800);
  --study-area-card-study-accent:var(--p-palette-071);
  --study-area-card-study-ink:var(--p-palette-073);
  --study-area-identity-abbr-area-hero-end:var(--p-palette-390);
  --study-area-identity-abbr-area-hero-muted:var(--p-palette-387);
  --study-area-identity-abbr-area-hero-shadow:var(--p-palette-388);
  --study-area-identity-abbr-area-hero-start:var(--p-palette-389);
  --study-area-identity-area-hero-end:var(--p-palette-386);
  --study-area-identity-area-hero-muted:var(--p-palette-387);
  --study-area-identity-area-hero-shadow:var(--p-palette-388);
  --study-area-identity-area-hero-start:var(--p-palette-385);
  --study-area-identity-calc-area-hero-end:var(--p-palette-399);
  --study-area-identity-calc-area-hero-muted:var(--p-palette-400);
  --study-area-identity-calc-area-hero-shadow:var(--p-palette-401);
  --study-area-identity-calc-area-hero-start:var(--p-palette-398);
  --study-area-identity-conv-area-hero-end:var(--p-palette-395);
  --study-area-identity-conv-area-hero-muted:var(--p-palette-396);
  --study-area-identity-conv-area-hero-shadow:var(--p-palette-397);
  --study-area-identity-conv-area-hero-start:var(--p-palette-394);
  --study-area-identity-drugs-area-hero-end:var(--p-palette-403);
  --study-area-identity-drugs-area-hero-muted:var(--p-palette-404);
  --study-area-identity-drugs-area-hero-shadow:var(--p-palette-405);
  --study-area-identity-drugs-area-hero-start:var(--p-palette-402);
  --study-area-identity-rx-area-hero-end:var(--p-palette-077);
  --study-area-identity-rx-area-hero-muted:var(--p-palette-392);
  --study-area-identity-rx-area-hero-shadow:var(--p-palette-393);
  --study-area-identity-rx-area-hero-start:var(--p-palette-391);
  --study-domain-abbr-accent:var(--p-palette-071);
  --study-domain-abbr-ink:var(--p-palette-073);
  --study-domain-calc-accent:var(--p-palette-083);
  --study-domain-calc-ink:var(--p-palette-085);
  --study-domain-conv-accent:var(--p-palette-079);
  --study-domain-conv-ink:var(--p-palette-081);
  --study-domain-courses-accent:var(--p-palette-091);
  --study-domain-courses-ink:var(--p-palette-093);
  --study-domain-drugs-accent:var(--p-palette-087);
  --study-domain-drugs-ink:var(--p-palette-089);
  --study-domain-rx-accent:var(--p-palette-075);
  --study-domain-rx-ink:var(--p-palette-077);
  --success-bg:var(--p-green-100);
  --success-edge:var(--p-green-800);
  --success-fg:var(--p-green-700);
  --success-icon:var(--p-green-700);
  --surface-canvas:var(--p-neutral-100);
  --surface-card:var(--p-neutral-000);
  --surface-panel:var(--p-neutral-000);
  --surface-raised:var(--p-neutral-200);
  --surface-workspace:var(--p-neutral-100);
  --text-on-strong:var(--p-neutral-000);
  --text-primary:var(--p-neutral-900);
  --text-secondary:var(--p-neutral-650);
  --therapeutic-cardiovascular-accent:var(--p-palette-141);
  --therapeutic-cardiovascular-ink:var(--p-palette-145);
  --therapeutic-cardiovascular-line:var(--p-palette-147);
  --therapeutic-cardiovascular-soft:var(--p-palette-143);
  --therapeutic-cns-pain-accent:var(--p-palette-101);
  --therapeutic-cns-pain-ink:var(--p-palette-105);
  --therapeutic-cns-pain-line:var(--p-palette-107);
  --therapeutic-cns-pain-soft:var(--p-palette-103);
  --therapeutic-derm-ent-accent:var(--p-palette-117);
  --therapeutic-derm-ent-ink:var(--p-palette-121);
  --therapeutic-derm-ent-line:var(--p-palette-123);
  --therapeutic-derm-ent-soft:var(--p-palette-119);
  --therapeutic-endocrine-metabolic-accent:var(--p-palette-125);
  --therapeutic-endocrine-metabolic-ink:var(--p-palette-129);
  --therapeutic-endocrine-metabolic-line:var(--p-palette-131);
  --therapeutic-endocrine-metabolic-soft:var(--p-palette-127);
  --therapeutic-gastrointestinal-accent:var(--p-palette-133);
  --therapeutic-gastrointestinal-ink:var(--p-palette-137);
  --therapeutic-gastrointestinal-line:var(--p-palette-139);
  --therapeutic-gastrointestinal-soft:var(--p-palette-135);
  --therapeutic-genitourinary-accent:var(--p-palette-165);
  --therapeutic-genitourinary-ink:var(--p-palette-169);
  --therapeutic-genitourinary-line:var(--p-palette-171);
  --therapeutic-genitourinary-soft:var(--p-palette-167);
  --therapeutic-immunology-oncology-accent:var(--p-palette-157);
  --therapeutic-immunology-oncology-ink:var(--p-palette-161);
  --therapeutic-immunology-oncology-line:var(--p-palette-163);
  --therapeutic-immunology-oncology-soft:var(--p-palette-159);
  --therapeutic-infectious-disease-accent:var(--p-palette-149);
  --therapeutic-infectious-disease-ink:var(--p-palette-153);
  --therapeutic-infectious-disease-line:var(--p-palette-155);
  --therapeutic-infectious-disease-soft:var(--p-palette-151);
  --therapeutic-respiratory-allergy-accent:var(--p-palette-109);
  --therapeutic-respiratory-allergy-ink:var(--p-palette-113);
  --therapeutic-respiratory-allergy-line:var(--p-palette-115);
  --therapeutic-respiratory-allergy-soft:var(--p-palette-111);
  --therapeutic-surface-accent:var(--p-palette-095);
  --therapeutic-surface-ink:var(--p-palette-097);
  --therapeutic-surface-line:var(--p-palette-099);
  --therapeutic-surface-soft:var(--p-palette-096);
  --visual-announcement-cta-text:var(--p-palette-375);
  --visual-auth-auth-field-border:var(--p-palette-243);
  --visual-auth-auth-field-border-12d8e2d8:var(--p-palette-244);
  --visual-auth-auth-field-surface:var(--p-palette-245);
  --visual-auth-auth-field-text:var(--p-palette-246);
  --visual-auth-auth-field-text-2e731401:var(--p-palette-247);
  --visual-auth-auth-intro-text:var(--p-palette-248);
  --visual-auth-auth-intro-text-c09b3168:var(--p-palette-247);
  --visual-auth-auth-login-card-auth-field-border:var(--p-palette-249);
  --visual-auth-auth-login-card-auth-field-surface:var(--p-palette-376);
  --visual-auth-auth-login-card-auth-field-text:var(--p-palette-250);
  --visual-auth-auth-recovery-link-text:var(--p-palette-251);
  --visual-auth-auth-recovery-link-text-c5239532:var(--p-palette-247);
  --visual-auth-auth-recovery-link-text-hover:var(--p-palette-246);
  --visual-auth-auth-switch-link-border-bottom-ink-hover:var(--p-gold-400);
  --visual-auth-auth-switch-link-text:var(--p-palette-252);
  --visual-auth-auth-switch-link-text-2c6a9181:var(--p-palette-246);
  --visual-auth-auth-switch-link-text-hover:var(--p-palette-253);
  --visual-auth-auth-switch-text:var(--p-palette-248);
  --visual-auth-auth-switch-text-cde122bf:var(--p-palette-254);
  --visual-auth-brand-description-text:var(--p-palette-216);
  --visual-auth-brand-headline-text:var(--p-palette-215);
  --visual-auth-brand-placeholder-text:var(--p-palette-217);
  --visual-auth-context-surface:var(--p-palette-218);
  --visual-auth-context-text:var(--p-palette-219);
  --visual-auth-footer-quiet-text:var(--p-palette-222);
  --visual-auth-footer-separator:var(--p-palette-223);
  --visual-auth-institutional-link-text:var(--p-palette-221);
  --visual-auth-institutional-text:var(--p-palette-220);
  --visual-auth-intro-text:var(--p-palette-255);
  --visual-auth-legal-note-text:var(--p-palette-251);
  --visual-auth-legal-note-text-ec3511f3:var(--p-palette-247);
  --visual-auth-login-card-auth-field-border:var(--p-palette-256);
  --visual-auth-login-card-auth-field-border-9aa9e3e2:var(--p-palette-257);
  --visual-auth-login-card-auth-field-surface:var(--p-palette-375);
  --visual-auth-password-guidance-text:var(--p-palette-255);
  --visual-auth-password-toggle-text:var(--p-palette-258);
  --visual-auth-password-toggle-text-4a857498:var(--p-palette-247);
  --visual-auth-registration-card-legal-note-text:var(--p-palette-263);
  --visual-auth-site-footer-text:var(--p-palette-264);
  --visual-auth-site-footer-text-939798e7:var(--p-palette-254);
  --visual-auth-site-footer-text-hover:var(--p-palette-265);
  --visual-auth-site-footer-text-hover-12b38229:var(--p-palette-247);
  --visual-auth-switch-link-text:var(--p-palette-266);
  --visual-auth-switch-link-text-hover:var(--p-palette-267);
  --visual-auth-switch-text:var(--p-palette-255);
  --visual-calendar-day-selected-day-number-text:var(--p-palette-375);
  --visual-calendar-day-today-day-number-text:var(--p-palette-375);
  --visual-calendar-event-surface:var(--p-palette-270);
  --visual-card-auth-card-auth-login-card-surface:var(--p-palette-280);
  --visual-connection-state-surface:var(--p-palette-284);
  --visual-connection-state-text:var(--p-palette-285);
  --visual-dialog-error-text-fallback:var(--p-palette-236);
  --visual-drug-rail-on-text:var(--p-palette-375);
  --visual-import-event-probable-duplicate-border:var(--p-palette-289);
  --visual-institution-membership-border-fallback:var(--p-palette-225);
  --visual-institution-membership-verified-border:var(--p-palette-290);
  --visual-lab-checklist-critical-marker-fallback:var(--p-palette-242);
  --visual-lab-checklist-critical-text-fallback:var(--p-palette-242);
  --visual-lab-checklist-hit-fallback:var(--p-palette-240);
  --visual-lab-checklist-miss-marker-fallback:var(--p-palette-241);
  --visual-lab-checklist-miss-text-fallback:var(--p-palette-241);
  --visual-lab-checklist-muted-fallback:var(--p-palette-371);
  --visual-lab-checklist-prompt-fallback:var(--p-palette-371);
  --visual-lab-final-entry-accent-fallback:var(--p-palette-237);
  --visual-lab-final-hero-accent-fallback:var(--p-palette-237);
  --visual-lab-label-preview-surface:var(--p-palette-375);
  --visual-lab-label-preview-text:var(--p-palette-377);
  --visual-lab-mark-muted-fallback:var(--p-palette-371);
  --visual-lab-mark-source-fallback:var(--p-palette-237);
  --visual-lab-method-text:var(--p-palette-375);
  --visual-lab-rx-muted-fallback:var(--p-palette-371);
  --visual-landing-cta-owned-inset:var(--p-palette-369);
  --visual-landing-cta-pressed-inset:var(--p-palette-369);
  --visual-landing-demo-answer-text:var(--p-palette-291);
  --visual-landing-demo-ask-text:var(--p-palette-292);
  --visual-landing-demo-contrast-text:var(--p-palette-293);
  --visual-landing-demo-entry-surface:var(--p-palette-375);
  --visual-landing-demo-eyebrow-contrast:var(--p-palette-235);
  --visual-landing-demo-meter-surface:var(--p-palette-225);
  --visual-landing-demo-meter-surface-4772a335:var(--p-palette-295);
  --visual-landing-demo-result-is-correct-border:var(--p-palette-298);
  --visual-landing-demo-result-is-correct-surface:var(--p-palette-299);
  --visual-landing-demo-result-is-correct-text:var(--p-green-900);
  --visual-landing-demo-result-is-miss-border:var(--p-red-800);
  --visual-landing-demo-result-is-miss-surface:var(--p-palette-300);
  --visual-landing-demo-result-is-miss-text:var(--p-red-900);
  --visual-landing-demo-result-is-near-border:var(--p-gold-500);
  --visual-landing-demo-result-is-near-surface:var(--p-palette-301);
  --visual-landing-demo-result-is-near-text:var(--p-palette-302);
  --visual-landing-demo-result-surface:var(--p-palette-303);
  --visual-landing-demo-stem-text:var(--p-palette-291);
  --visual-landing-drills-section-landing-drill-panel-landing-demo-border:var(--p-palette-304);
  --visual-landing-drills-section-surface:var(--p-palette-234);
  --visual-landing-eyebrow-surface:var(--p-palette-378);
  --visual-landing-hero-text:var(--p-palette-305);
  --visual-landing-landing-cta-border-right-ink:var(--p-palette-306);
  --visual-lesson-card-drag-overlay:var(--p-palette-374);
  --visual-lesson-checkpoint-completed-border:var(--p-palette-313);
  --visual-lesson-checkpoint-current-text:var(--p-palette-375);
  --visual-library-editor-surface:var(--p-palette-379);
  --visual-lift-mark-pool:var(--p-palette-366);
  --visual-match-win-stars-surface:var(--p-palette-314);
  --visual-pathway-cofactor-tag-tint:var(--p-palette-231);
  --visual-pathway-decarboxylation-tint:var(--p-palette-228);
  --visual-pathway-entry-tint:var(--p-palette-227);
  --visual-pathway-enzyme-tag-tint:var(--p-palette-230);
  --visual-pathway-key-fact-tag-tint:var(--p-palette-233);
  --visual-pathway-regeneration-tint:var(--p-palette-229);
  --visual-pb-card-kind-cofactor-pb-card-tag-text:var(--p-palette-316);
  --visual-pb-card-kind-enzyme-pb-card-tag-text:var(--p-palette-230);
  --visual-pb-card-kind-key-fact-pb-card-tag-text:var(--p-palette-317);
  --visual-phase-decarboxylation-pb-step-number-text:var(--p-palette-318);
  --visual-phase-entry-pb-step-number-text:var(--p-palette-227);
  --visual-phase-regeneration-pb-step-number-text:var(--p-palette-319);
  --visual-picker-row-hover-fallback:var(--p-palette-370);
  --visual-reference-rail-on-text:var(--p-palette-375);
  --visual-skip-link-text:var(--p-palette-326);
  --visual-source-note-text:var(--p-palette-327);
  --visual-status-dot-surface:var(--p-palette-175);
  --visual-study-area-identity-ghost-border:var(--p-palette-365);
  --visual-study-area-identity-ghost-border-hover:var(--p-palette-380);
  --visual-study-area-identity-ghost-surface:var(--p-palette-381);
  --visual-study-area-identity-ghost-surface-hover:var(--p-palette-382);
  --visual-study-area-identity-ghost-text:var(--p-palette-340);
  --visual-study-area-identity-ghost-text-hover:var(--p-palette-375);
  --visual-study-area-identity-primary-border:var(--p-palette-383);
  --visual-study-area-identity-primary-border-hover:var(--p-palette-375);
  --visual-study-area-identity-primary-surface:var(--p-palette-341);
  --visual-study-area-identity-primary-surface-hover:var(--p-palette-375);
  --visual-study-area-identity-primary-text:var(--p-palette-342);
  --visual-study-area-identity-primary-text-hover:var(--p-palette-343);
  --visual-study-area-identity-text:var(--p-palette-344);
  --visual-study-area-identity-text-21f5da01:var(--p-palette-375);
  --visual-theme-chip-bottom:var(--p-palette-239);
  --visual-theme-chip-top:var(--p-palette-238);
  --visual-theme-glyph-disc-fill:var(--p-palette-351);
  --visual-theme-glyph-rays-stroke:var(--p-palette-351);
  --visual-theme-seg-theme-glyph-disc-fill:var(--p-gold-400);
  --visual-theme-seg-theme-glyph-disc-fill-0b05c056:var(--p-palette-352);
  --visual-theme-seg-theme-glyph-disc-fill-hover:var(--p-palette-353);
  --visual-theme-seg-theme-glyph-rays-stroke:var(--p-gold-400);
  --visual-theme-seg-theme-glyph-rays-stroke-hover:var(--p-palette-353);
  --visual-theme-track-fallback:var(--p-palette-232);
  --visual-therapeutic-group-label-contrast:var(--p-palette-374);
  --visual-threshold-card-outline:var(--p-palette-274);
  --visual-threshold-card-surface:var(--p-neutral-000);
  --visual-threshold-field-border:var(--p-palette-274);
  --visual-threshold-field-surface:var(--p-neutral-000);
  --visual-threshold-field-text:var(--p-navy-990);
  --visual-threshold-footer-text:var(--p-palette-277);
  --visual-threshold-primary-surface-disabled:var(--p-palette-275);
  --visual-threshold-primary-text-disabled:var(--p-palette-276);
  --visual-today-assignment-check-text:var(--p-palette-375);
  --visual-today-selected-day-number-text:var(--p-palette-375);
  --visual-ui-dialog-surface:var(--p-palette-384);
  --visual-verification-panel-border-fallback:var(--p-palette-225);
  --visual-verification-panel-surface-fallback:var(--p-palette-226);
  --warning-bg:var(--p-orange-100);
  --warning-edge:var(--p-orange-700);
  --warning-fg:var(--p-orange-700);
  --warning-icon:var(--p-orange-700);
  --account-canvas-elev-shade:7,17,30;
  --account-canvas-elev-tint:7,17,30;
  --account-elev-shade:7,14,23;
  --account-elev-tint:143,178,228;
  --account-environment-header-focus:color-mix(in srgb,var(--p-gold-400) 76%,transparent);
  --account-menu-scrim-mask-image:radial-gradient(ellipse 48% 50% at 46% 50%,var(--p-palette-374) 0,var(--p-palette-374) 26%,var(--p-composite-104) 60%,transparent 100%);
  --action-danger-press:color-mix(in srgb,var(--danger-solid-bg) 86%,var(--p-black));
  --action-press-inset:inset 0 1px 2px rgba(var(--elev-shade),.2);
  --action-press-outer:0 1px 1px rgba(var(--elev-shade),.06);
  --action-primary-press:color-mix(in srgb,var(--action-primary-bg) 88%,var(--p-black));
  --action-quiet-hover:color-mix(in srgb,var(--text-primary) 7%,transparent);
  --action-raise-shadow:0 2px 4px rgba(var(--elev-shade),.18),0 6px 14px rgba(var(--elev-shade),.09);
  --action-rest-ambient:0 2px 6px rgba(var(--elev-shade),.08);
  --action-rest-contact:0 1px 2px rgba(var(--elev-shade),.2);
  --action-secondary-bg:var(--surface-card);
  --action-secondary-edge-hover:color-mix(in srgb,var(--border-subtle) 78%,var(--text-primary));
  --action-secondary-hover:color-mix(in srgb,var(--surface-card) 96%,var(--text-primary));
  --action-secondary-press:var(--surface-raised);
  --action-secondary-press-edge:var(--border-subtle);
  --activity-mark-muted-opacity:.45;
  --artwork-hover-filter:grayscale(.5);
  --artwork-muted-filter:grayscale(1);
  --auth-elev-shade:7,17,30;
  --auth-elev-tint:39,109,204;
  --auth-environment-header-focus:color-mix(in srgb,var(--p-neutral-075) 76%,transparent);
  --canvas-feather:rgba(var(--elev-shade),.18);
  --course-tint-strength:9%;
  --data-lift-lift-hover-shadow:drop-shadow(0 3px 5px rgba(var(--lift-shadow-tint),.30))
    drop-shadow(0 10px 18px rgba(var(--lift-shadow-tint),.22));
  --data-lift-lift-rest-shadow:drop-shadow(0 1px 2px rgba(var(--lift-shadow-tint),.42))
    drop-shadow(0 3px 6px rgba(var(--lift-shadow-tint),.30));
  --elev-1:0 1px 2px rgba(var(--elev-shade),.055),0 2px 6px rgba(var(--elev-tint),.07);
  --elev-2:0 2px 4px rgba(var(--elev-shade),.07),0 8px 18px rgba(var(--elev-tint),.11);
  --elev-3:0 4px 8px rgba(var(--elev-shade),.085),0 18px 38px rgba(var(--elev-tint),.15);
  --elev-4:0 8px 16px rgba(var(--elev-shade),.12),0 26px 60px rgba(var(--elev-tint),.20);
  --elev-shade:7,17,30;
  --elev-tint:39,109,204;
  --header-focus:color-mix(in srgb,var(--p-neutral-075) 76%,transparent);
  --landing-environment-cta-primary-ambient-shadow:0 12px 22px -6px rgba(var(--elev-shade),.40);
  --landing-environment-cta-primary-contact-shadow:rgba(var(--elev-shade),.10);
  --landing-environment-cta-primary-lit-edge:color-mix(in srgb,var(--p-neutral-000) 55%,transparent);
  --landing-environment-cta-primary-shadow-hover:0 16px 26px -6px rgba(var(--elev-shade),.42);
  --landing-environment-cta-primary-shadow-pressed:0 2px 4px -1px rgba(var(--elev-shade),.30);
  --landing-environment-cta-primary-surface:linear-gradient(180deg,var(--p-gold-300) 0%,var(--p-gold-425) 100%);
  --landing-environment-cta-primary-surface-disabled:linear-gradient(180deg,var(--p-composite-119),var(--p-composite-120));
  --landing-environment-cta-primary-surface-hover:linear-gradient(180deg,color-mix(in srgb,var(--p-gold-300) 80%,var(--p-neutral-000)) 0%,color-mix(in srgb,var(--p-gold-425) 85%,var(--p-gold-300)) 100%);
  --landing-environment-cta-primary-surface-pressed:linear-gradient(180deg,color-mix(in srgb,var(--p-gold-425) 75%,var(--p-gold-300)) 0%,color-mix(in srgb,var(--p-gold-425) 55%,var(--p-gold-500)) 100%);
  --landing-header-edge-ink:10,21,36;
  --landing-header-header-focus:color-mix(in srgb,var(--p-blue-600) 72%,transparent);
  --landing-header-lift-hover-shadow:drop-shadow(0 2px 3px rgba(var(--lift-shadow-tint),.28))
    drop-shadow(0 8px 14px rgba(var(--lift-shadow-tint),.17));
  --landing-header-lift-hover-shadow-2:drop-shadow(0 2px 3px rgba(var(--lift-shadow-tint),.28))
    drop-shadow(0 5px 9px rgba(var(--lift-shadow-tint),.16));
  --landing-header-lift-rest-shadow:drop-shadow(0 2px 3px rgba(var(--lift-shadow-tint),.30))
    drop-shadow(0 7px 12px rgba(var(--lift-shadow-tint),.18));
  --landing-header-mobile-sheet-line:rgba(var(--header-edge-ink),.1);
  --ls-fold-action-hover-shadow:0 2px 3px rgba(var(--elev-shade),.16),0 8px 17px color-mix(in srgb,var(--success-fg) 22%,transparent);
  --ls-fold-action-pressed-shadow:0 1px 2px rgba(var(--elev-shade),.18),0 3px 6px color-mix(in srgb,var(--success-fg) 13%,transparent);
  --mobile-sheet-edge:var(--border-subtle);
  --mobile-sheet-fg:var(--text-primary);
  --mobile-sheet-mark-theme:var(--action-primary-bg);
  --mobile-sheet-surface:var(--workspace);
  --mode-switcher-lift-hover-shadow:drop-shadow(0 4px 6px rgba(var(--lift-shadow-tint),.32))
    drop-shadow(0 13px 22px rgba(var(--lift-shadow-tint),.24));
  --mode-switcher-lift-rest-shadow:drop-shadow(0 1px 1px rgba(var(--lift-shadow-tint),.26));
  --rail-feather-image:linear-gradient(90deg,var(--canvas-feather),transparent 18px),linear-gradient(270deg,var(--canvas-feather),transparent 18px);
  --rail-feather-width:min(100%,var(--workspace-max-width));
  --shadow-contact-rgb:0,0,0;
  --study-area-card-study-shadow:rgba(var(--elev-shade),var(--study-card-shadow-alpha));
  --study-area-identity-action-ambient-shadow:0 8px 18px rgba(var(--elev-shade),.12);
  --study-area-identity-action-contact-shadow:0 1px 2px rgba(var(--elev-shade),.16);
  --study-card-hairline-opacity:.56;
  --study-card-hover-strength:3%;
  --study-card-shadow-alpha:.10;
  --visual-account-menu-panel-shadow:0 12px 30px var(--p-composite-111),0 2px 8px var(--p-composite-067);
  --visual-account-menu-trigger-account-menu-trigger-shadow-active-disabled:0 1px 2px var(--p-composite-001),0 3px 7px var(--p-composite-002);
  --visual-account-menu-trigger-account-menu-trigger-shadow-disabled:0 1px 2px var(--p-composite-001),0 3px 7px var(--p-composite-002);
  --visual-account-menu-trigger-account-menu-trigger-shadow-hover-disabled:0 3px 4px var(--p-composite-003),0 10px 20px var(--p-composite-004);
  --visual-active-shadow:inset 0 -2px 0 var(--p-composite-005);
  --visual-announcement-cta-outline:1px solid var(--p-composite-006);
  --visual-app-nav-action-active-text-shadow:0 1px 0 var(--p-composite-007),0 0 13px var(--p-composite-008);
  --visual-app-nav-action-active-text-shadow-hover:0 1px 0 var(--p-composite-009),0 0 16px var(--p-composite-010);
  --visual-app-nav-action-text-shadow:0 1px 1px var(--p-composite-011);
  --visual-app-nav-action-text-shadow-active:0 1px 1px var(--p-composite-011);
  --visual-app-nav-action-text-shadow-hover:0 1px 0 var(--p-composite-012),0 0 10px var(--p-composite-013);
  --visual-app-nav-spotlight-cone-surface:linear-gradient(180deg,var(--p-composite-014) 0%,var(--p-composite-015) 34%,
    var(--p-composite-016) 68%,var(--p-composite-017) 100%);
  --visual-app-nav-spotlight-filament-shadow:0 0 3px var(--p-composite-018),0 0 9px var(--p-composite-019),
    0 -5px 18px var(--p-composite-020);
  --visual-app-nav-spotlight-pool-surface:radial-gradient(ellipse 58% 72% at 50% 91%,var(--p-composite-021) 0%,
    var(--p-composite-022) 26%,var(--p-composite-023) 51%,var(--p-composite-024) 78%);
  --visual-auth-auth-field-shadow:inset 0 1px 0 var(--p-composite-025), inset 0 -1px 0 var(--p-composite-026);
  --visual-auth-auth-field-shadow-1083d68d:inset 0 1px 0 var(--p-composite-025),0 0 0 3px var(--p-composite-027);
  --visual-auth-auth-switch-link-bottom-outline:1px solid var(--p-composite-028);
  --visual-auth-body-right-outline:1px solid var(--p-composite-029);
  --visual-auth-body-surface:linear-gradient(115deg,var(--p-composite-030),var(--p-composite-031) 70%,var(--p-composite-032));
  --visual-auth-body-surface-28183b04:radial-gradient(circle at 86% 12%,var(--p-composite-033) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 7%,var(--p-composite-034) 0 1px,transparent 2px),
    radial-gradient(circle at 92% 80%,var(--p-composite-034) 0 1px,transparent 2px),
    radial-gradient(circle at 9% 90%,var(--p-composite-033) 0 1px,transparent 2px),
    linear-gradient(145deg,var(--p-composite-035),var(--p-composite-036));
  --visual-auth-body-surface-96e7bfed:radial-gradient(ellipse at 60% 46%,var(--p-composite-037),transparent 66%);
  --visual-auth-context-icon-outline:1px solid var(--p-palette-363);
  --visual-bootstrap-arrival-hold-text:color-mix(in srgb,var(--p-composite-045) 74%,transparent);
  --visual-brand-brand-mark-surface:linear-gradient(to bottom,
    var(--p-composite-046) 0%,var(--p-composite-046) 52%,
    var(--p-palette-367) 78%,var(--p-composite-047) 96%,var(--p-palette-373) 100%);
  --visual-card-auth-card-auth-login-card-outline:1px solid var(--p-palette-441);
  --visual-connection-state-bottom-outline:1px solid var(--p-composite-055);
  --visual-global-shadow:0 0 0 5px var(--p-composite-056),0 0 28px var(--p-composite-057);
  --visual-global-shadow-186e37dc:0 0 0 5px var(--p-composite-058),0 0 28px var(--p-composite-059);
  --visual-global-shadow-3b3816fe:0 0 0 1px var(--p-composite-060);
  --visual-global-shadow-587fae53:0 0 0 1px var(--p-composite-061);
  --visual-global-shadow-7f0461d8:0 0 0 5px var(--p-composite-058),0 0 28px var(--p-composite-059);
  --visual-global-shadow-bd377be5:0 0 0 0 var(--p-composite-062);
  --visual-global-shadow-c8f640df:0 0 0 4px var(--p-composite-063),0 0 24px var(--p-composite-064);
  --visual-import-warnings-outline:1px solid var(--p-palette-289);
  --visual-lab-label-aux-outline:1px solid var(--p-composite-065);
  --visual-lab-label-aux-top-outline:2px solid var(--p-palette-377);
  --visual-lab-label-blank-bottom-outline:1px solid var(--p-palette-377);
  --visual-lab-label-preview-outline:2px solid var(--p-composite-066);
  --visual-lab-label-preview-shadow:0 8px 26px var(--p-composite-067);
  --visual-landing-demo-entry-outline:1px solid var(--p-composite-068);
  --visual-landing-demo-outline:1px solid var(--p-composite-069);
  --visual-landing-demo-result-outline:1px solid var(--p-composite-070);
  --visual-landing-demo-shadow:0 28px 70px var(--p-composite-071),0 2px 8px var(--p-composite-072);
  --visual-landing-demo-surface:linear-gradient(168deg,var(--p-composite-073),var(--p-composite-074));
  --visual-landing-drill-panel-landing-demo-shadow:0 16px 38px var(--p-composite-075);
  --visual-landing-drill-row-mask-both:linear-gradient(90deg,transparent 0,var(--p-palette-374) 44px,var(--p-palette-374) calc(100% - 64px),transparent 100%);
  --visual-landing-drill-row-mask-end:linear-gradient(90deg,var(--p-palette-374) calc(100% - 64px),transparent 100%);
  --visual-landing-drill-row-mask-start:linear-gradient(90deg,transparent 0,var(--p-palette-374) 44px);
  --visual-landing-drills-section-landing-drill-panel-landing-demo-shadow:0 18px 42px var(--p-composite-076),0 2px 8px var(--p-composite-077);
  --visual-landing-eyebrow-outline:1px solid var(--p-composite-078);
  --visual-landing-hero-seam-base:linear-gradient(var(--p-palette-374),var(--p-palette-374));
  --visual-landing-hero-surface:radial-gradient(118% 128% at 16% 32%,var(--p-hero-ink-400) 0%,var(--p-hero-ink-500) 40%,var(--p-hero-ink-600) 72%,var(--p-hero-ink-700) 100%);
  --visual-landing-hero-surface-ebcee43b:linear-gradient(180deg,var(--p-hero-ink-400) 0%,var(--p-hero-ink-500) 58%,var(--p-hero-ink-700) 100%);
  --visual-landing-landing-cta-outline:2px solid var(--p-composite-088);
  --visual-learning-index-veil-mask-image:linear-gradient(180deg,var(--p-palette-374) 0%,var(--p-palette-374) 76%,transparent 100%);
  --visual-learning-utility-veil-mask-image:linear-gradient(180deg,var(--p-palette-374) 0%,var(--p-palette-374) 62%,transparent 100%);
  --visual-library-publish-bar-shadow:0 8px 28px var(--p-composite-094);
  --visual-pb-bank-shadow:0 10px 30px var(--p-composite-095);
  --visual-pb-toolbar-shadow:0 8px 28px var(--p-composite-096);
  --visual-rdot-outline:1px solid var(--p-composite-002);
  --visual-reference-menu-panel-shadow:0 16px 40px var(--p-composite-099);
  --visual-rxcard-outline:1px solid var(--p-composite-100);
  --visual-rxcard-rxhead-bottom-outline:1px solid var(--p-composite-100);
  --visual-rxcard-shadow:0 2px 10px var(--p-composite-101);
  --visual-study-area-identity-outline:1px solid var(--p-composite-102);
  --visual-study-area-identity-surface:linear-gradient(115deg,var(--p-composite-103),transparent 44%);
  --visual-theme-chip-shadow:0 1px 2px var(--p-composite-104),0 3px 7px var(--p-composite-101),inset 0 1px 0 var(--p-composite-105);
  --visual-theme-toggle-shadow:inset 0 1px 2px var(--p-composite-106),inset 0 2px 5px var(--p-composite-107),
    inset 0 -1px 0 var(--p-composite-108);
  --visual-threshold-card-shadow:0 2px 4px rgba(var(--elev-shade),.06),
    0 10px 22px rgba(var(--elev-tint),.09),0 34px 72px rgba(var(--elev-tint),.13);
  --visual-threshold-field-shadow:inset 0 1px 2px rgba(var(--elev-tint),.09);
  --visual-threshold-field-shadow-focus:0 0 0 3px var(--p-composite-048),
    inset 0 1px 2px rgba(var(--elev-tint),.06);
  --visual-threshold-primary-shadow:var(--action-rest-contact),var(--action-rest-ambient);
  --visual-workspace-edge-veil--webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--p-palette-374) 38%,var(--p-palette-374) 100%);
  --visual-workspace-edge-veil-mask-image:linear-gradient(180deg,transparent 0%,var(--p-palette-374) 38%,var(--p-palette-374) 100%);
}
html.workspace-dark{
  --accent-soft:var(--p-gold-100);
  --account-card-accent:var(--p-palette-410);
  --account-card-accent-2:var(--p-gold-425);
  --account-card-accent-3:var(--p-blue-625);
  --account-card-bad:var(--p-palette-406);
  --account-card-bad-2:var(--p-palette-406);
  --account-card-bad-3:var(--p-palette-242);
  --account-card-dim:var(--p-palette-248);
  --account-card-dim-2:var(--p-palette-247);
  --account-card-dim-3:var(--p-palette-440);
  --account-card-line:var(--p-palette-407);
  --account-card-line-2:var(--p-palette-259);
  --account-card-line-3:var(--p-palette-441);
  --account-card-panel2:var(--p-palette-408);
  --account-card-panel2-2:var(--p-palette-261);
  --account-card-panel2-3:var(--p-palette-442);
  --account-card-surface:var(--p-palette-409);
  --account-card-surface-2:var(--p-palette-439);
  --account-card-surface-3:var(--p-neutral-000);
  --account-card-text:var(--p-palette-250);
  --account-card-text-2:var(--p-palette-246);
  --account-card-text-3:var(--p-navy-990);
  --account-environment-header-bg:var(--p-palette-279);
  --account-environment-header-control-bg:var(--p-palette-439);
  --account-environment-header-control-bg-2:var(--p-palette-359);
  --account-environment-header-control-line:var(--p-palette-259);
  --account-environment-header-control-line-2:var(--p-palette-361);
  --account-environment-header-control-text:var(--p-palette-246);
  --account-environment-header-control-text-2:var(--p-neutral-000);
  --account-environment-header-muted:var(--p-palette-247);
  --account-environment-header-muted-2:var(--p-palette-431);
  --account-environment-header-text:var(--p-palette-246);
  --account-environment-header-text-2:var(--p-neutral-900);
  --action-primary-bg:var(--p-gold-425);
  --action-primary-bg-hover:var(--p-gold-500);
  --action-primary-disabled-bg:var(--p-disabled-dark);
  --action-primary-disabled-edge:var(--p-eclipse-700);
  --action-primary-disabled-fg:var(--p-neutral-500);
  --action-primary-fg:var(--p-neutral-900);
  --arrival-canvas:var(--p-eclipse-900);
  --auth-environment-header-bg:var(--p-navy-990);
  --auth-environment-header-control-bg:var(--p-palette-359);
  --auth-environment-header-control-line:var(--p-palette-361);
  --auth-environment-header-control-text:var(--p-neutral-000);
  --auth-environment-header-muted:var(--p-palette-358);
  --auth-environment-header-text:var(--p-neutral-075);
  --auth-environment-on-accent:var(--p-neutral-000);
  --bg:var(--p-eclipse-900);
  --border-subtle:var(--p-eclipse-700);
  --brand-arrival-canvas:var(--p-navy-990);
  --calendar-course-default-color:var(--p-palette-224);
  --calendar-outside-bg:var(--p-eclipse-925);
  --calendar-selected-bg:var(--p-eclipse-800);
  --course-swatch-01:var(--p-course-ocean);
  --course-swatch-02:var(--p-course-teal);
  --course-swatch-03:var(--p-course-green);
  --course-swatch-04:var(--p-course-olive);
  --course-swatch-05:var(--p-course-amber);
  --course-swatch-06:var(--p-course-brick);
  --course-swatch-07:var(--p-course-berry);
  --course-swatch-08:var(--p-course-plum);
  --course-swatch-09:var(--p-course-indigo);
  --course-swatch-10:var(--p-course-slate);
  --danger-action-text:var(--p-red-450);
  --danger-bg:var(--p-red-950);
  --danger-bg-hover:var(--p-red-925);
  --danger-edge:var(--p-red-400);
  --danger-edge-hover:var(--p-red-550);
  --danger-fg:var(--p-red-400);
  --danger-icon:var(--p-red-400);
  --danger-solid-bg:var(--p-red-700);
  --danger-solid-fg:var(--p-neutral-050);
  --eclipse-ground:var(--p-eclipse-950);
  --eclipse-workspace:var(--p-eclipse-900);
  --exam-flag:var(--p-palette-174);
  --focus-ring:var(--p-gold-300);
  --ghost-action-busy-color:var(--p-palette-375);
  --ground-paper:var(--p-neutral-100);
  --header-attention-bg:var(--p-orange-400);
  --header-attention-fg:var(--p-orange-950);
  --header-bg:var(--p-eclipse-980);
  --header-control-bg:var(--p-palette-360);
  --header-control-line:var(--p-eclipse-600);
  --header-control-text:var(--p-neutral-050);
  --header-muted:var(--p-neutral-500);
  --header-text:var(--p-neutral-050);
  --info-bg:var(--p-blue-950);
  --info-edge:var(--p-blue-400);
  --info-fg:var(--p-blue-400);
  --lab-cell-seam:var(--p-palette-364);
  --lab-cube-front:var(--p-palette-195);
  --lab-cube-grid:var(--p-palette-365);
  --lab-cube-pick-front:var(--p-palette-210);
  --lab-cube-pick-side:var(--p-palette-213);
  --lab-cube-pick-top:var(--p-palette-211);
  --lab-cube-side:var(--p-palette-209);
  --lab-cube-top:var(--p-palette-208);
  --lab-depth-0-surface:var(--p-palette-195);
  --lab-depth-0-text:var(--p-neutral-000);
  --lab-depth-1-surface:var(--p-palette-197);
  --lab-depth-1-text:var(--p-palette-198);
  --lab-depth-2-surface:var(--p-palette-200);
  --lab-depth-2-text:var(--p-palette-202);
  --lab-depth-3-surface:var(--p-palette-204);
  --lab-depth-3-text:var(--p-palette-206);
  --ladder-learned-ink:var(--p-palette-180);
  --ladder-learned-surface:var(--p-green-950);
  --ladder-learned-text:var(--p-retuned-459);
  --ladder-not-started-ink:var(--p-palette-176);
  --ladder-not-started-surface:var(--p-palette-354);
  --ladder-not-started-text:var(--p-neutral-400);
  --ladder-proven-ink:var(--p-palette-183);
  --ladder-proven-surface:var(--p-palette-185);
  --ladder-proven-text:var(--p-retuned-460);
  --ladder-retained-ink:var(--p-palette-189);
  --ladder-retained-surface:var(--p-palette-191);
  --ladder-retained-text:var(--p-retuned-461);
  --landing-content-accent-clarity:var(--p-palette-438);
  --landing-content-accent-energy:var(--p-palette-437);
  --landing-content-accent-growth:var(--p-palette-435);
  --landing-content-accent-highlight:var(--p-palette-434);
  --landing-content-accent-learning:var(--p-palette-436);
  --landing-content-accent-link:var(--p-blue-600);
  --landing-content-l-head:var(--p-neutral-900);
  --landing-content-l-line:var(--p-neutral-300);
  --landing-content-l-line-soft:var(--p-palette-432);
  --landing-content-l-panel:var(--p-neutral-000);
  --landing-content-l-panel-2:var(--p-neutral-200);
  --landing-content-l-text:var(--p-palette-433);
  --landing-content-l-text-dim:var(--p-palette-440);
  --landing-environment-accent-clarity:var(--p-palette-424);
  --landing-environment-accent-energy:var(--p-palette-423);
  --landing-environment-accent-growth:var(--p-palette-421);
  --landing-environment-accent-highlight:var(--p-gold-425);
  --landing-environment-accent-highlight-strong:var(--p-gold-500);
  --landing-environment-accent-learning:var(--p-palette-422);
  --landing-environment-accent-link:var(--p-palette-420);
  --landing-environment-cta-primary-edge:var(--p-gold-600);
  --landing-environment-cta-primary-edge-disabled:var(--p-palette-428);
  --landing-environment-cta-primary-edge-hover:var(--p-gold-600);
  --landing-environment-cta-primary-edge-pressed:var(--p-gold-600);
  --landing-environment-cta-primary-focus:var(--p-palette-430);
  --landing-environment-cta-primary-text:var(--p-palette-306);
  --landing-environment-cta-primary-text-disabled:var(--p-palette-429);
  --landing-environment-l-band:var(--p-palette-412);
  --landing-environment-l-band-alt:var(--p-palette-413);
  --landing-environment-l-head:var(--p-palette-309);
  --landing-environment-l-ink:var(--p-palette-411);
  --landing-environment-l-line:var(--p-palette-416);
  --landing-environment-l-line-soft:var(--p-palette-417);
  --landing-environment-l-panel:var(--p-palette-414);
  --landing-environment-l-panel-2:var(--p-palette-415);
  --landing-environment-l-text:var(--p-palette-418);
  --landing-environment-l-text-dim:var(--p-palette-419);
  --landing-graph-field:var(--p-landing-graph-field);
  --landing-graph-line:var(--p-landing-graph-line);
  --landing-header-header-control-bg:var(--p-palette-359);
  --landing-header-header-control-line:var(--p-palette-361);
  --landing-header-header-control-text:var(--p-neutral-000);
  --landing-header-header-muted:var(--p-palette-431);
  --landing-header-header-text:var(--p-neutral-900);
  --landing-header-link-hover:var(--p-blue-625);
  --landing-highlighter:var(--p-gold-300);
  --landing-ink-line:var(--p-blue-625);
  --landing-paper:var(--p-landing-paper);
  --landing-paper-rule:var(--p-landing-paper-rule);
  --landing-retention-accent:var(--p-gold-300);
  --landing-retention-ink:var(--p-neutral-000);
  --landing-retention-surface:var(--p-retention-field);
  --landing-review-mark:var(--p-gold-500);
  --line-strong:var(--p-eclipse-650);
  --match-success-marker-bg:var(--p-palette-362);
  --nav-spotlight-edge:var(--p-gold-500);
  --nav-spotlight-highlight:var(--p-gold-300);
  --nav-spotlight-source:var(--p-gold-400);
  --neutral-bg:var(--p-eclipse-800);
  --neutral-edge:var(--p-eclipse-650);
  --neutral-fg:var(--p-neutral-400);
  --neutral-icon:var(--p-neutral-400);
  --on-accent:var(--p-palette-262);
  --outer-canvas-bg:var(--p-eclipse-950);
  --progress-bg:var(--p-teal-950);
  --progress-edge:var(--p-teal-400);
  --progress-fg:var(--p-teal-400);
  --rule-strong:var(--p-palette-356);
  --settings-choice-chip:var(--p-eclipse-700);
  --shell-menu-bg:var(--p-eclipse-980);
  --shell-menu-danger-fg:var(--p-red-400);
  --shell-menu-edge:var(--p-eclipse-600);
  --shell-menu-fg:var(--p-neutral-050);
  --shell-menu-hover-bg:var(--p-eclipse-700);
  --study-area-card-study-accent:var(--p-palette-071);
  --study-area-card-study-ink:var(--p-palette-073);
  --study-area-identity-abbr-area-hero-end:var(--p-palette-390);
  --study-area-identity-abbr-area-hero-muted:var(--p-palette-387);
  --study-area-identity-abbr-area-hero-shadow:var(--p-palette-388);
  --study-area-identity-abbr-area-hero-start:var(--p-palette-389);
  --study-area-identity-area-hero-end:var(--p-palette-386);
  --study-area-identity-area-hero-muted:var(--p-palette-387);
  --study-area-identity-area-hero-shadow:var(--p-palette-388);
  --study-area-identity-area-hero-start:var(--p-palette-385);
  --study-area-identity-calc-area-hero-end:var(--p-palette-399);
  --study-area-identity-calc-area-hero-muted:var(--p-palette-400);
  --study-area-identity-calc-area-hero-shadow:var(--p-palette-401);
  --study-area-identity-calc-area-hero-start:var(--p-palette-398);
  --study-area-identity-conv-area-hero-end:var(--p-palette-395);
  --study-area-identity-conv-area-hero-muted:var(--p-palette-396);
  --study-area-identity-conv-area-hero-shadow:var(--p-palette-397);
  --study-area-identity-conv-area-hero-start:var(--p-palette-394);
  --study-area-identity-drugs-area-hero-end:var(--p-palette-403);
  --study-area-identity-drugs-area-hero-muted:var(--p-palette-404);
  --study-area-identity-drugs-area-hero-shadow:var(--p-palette-405);
  --study-area-identity-drugs-area-hero-start:var(--p-palette-402);
  --study-area-identity-rx-area-hero-end:var(--p-palette-077);
  --study-area-identity-rx-area-hero-muted:var(--p-palette-392);
  --study-area-identity-rx-area-hero-shadow:var(--p-palette-393);
  --study-area-identity-rx-area-hero-start:var(--p-palette-391);
  --study-domain-abbr-accent:var(--p-retuned-443);
  --study-domain-abbr-ink:var(--p-retuned-444);
  --study-domain-calc-accent:var(--p-retuned-447);
  --study-domain-calc-ink:var(--p-palette-086);
  --study-domain-conv-accent:var(--p-palette-080);
  --study-domain-conv-ink:var(--p-retuned-446);
  --study-domain-courses-accent:var(--p-palette-092);
  --study-domain-courses-ink:var(--p-retuned-450);
  --study-domain-drugs-accent:var(--p-retuned-448);
  --study-domain-drugs-ink:var(--p-retuned-449);
  --study-domain-rx-accent:var(--p-retuned-445);
  --study-domain-rx-ink:var(--p-palette-078);
  --success-bg:var(--p-green-950);
  --success-edge:var(--p-green-400);
  --success-fg:var(--p-green-400);
  --success-icon:var(--p-green-400);
  --surface-canvas:var(--p-eclipse-950);
  --surface-card:var(--p-eclipse-850);
  --surface-panel:var(--p-eclipse-850);
  --surface-raised:var(--p-eclipse-800);
  --surface-workspace:var(--p-eclipse-900);
  --text-on-strong:var(--p-neutral-000);
  --text-primary:var(--p-neutral-050);
  --text-secondary:var(--p-neutral-500);
  --therapeutic-cardiovascular-accent:var(--p-palette-142);
  --therapeutic-cardiovascular-ink:var(--p-retuned-455);
  --therapeutic-cardiovascular-line:var(--p-palette-148);
  --therapeutic-cardiovascular-soft:var(--p-palette-144);
  --therapeutic-cns-pain-accent:var(--p-palette-102);
  --therapeutic-cns-pain-ink:var(--p-retuned-451);
  --therapeutic-cns-pain-line:var(--p-palette-108);
  --therapeutic-cns-pain-soft:var(--p-palette-104);
  --therapeutic-derm-ent-accent:var(--p-palette-118);
  --therapeutic-derm-ent-ink:var(--p-retuned-452);
  --therapeutic-derm-ent-line:var(--p-palette-124);
  --therapeutic-derm-ent-soft:var(--p-palette-120);
  --therapeutic-endocrine-metabolic-accent:var(--p-palette-126);
  --therapeutic-endocrine-metabolic-ink:var(--p-retuned-453);
  --therapeutic-endocrine-metabolic-line:var(--p-palette-132);
  --therapeutic-endocrine-metabolic-soft:var(--p-palette-128);
  --therapeutic-gastrointestinal-accent:var(--p-palette-134);
  --therapeutic-gastrointestinal-ink:var(--p-retuned-454);
  --therapeutic-gastrointestinal-line:var(--p-palette-140);
  --therapeutic-gastrointestinal-soft:var(--p-palette-136);
  --therapeutic-genitourinary-accent:var(--p-palette-166);
  --therapeutic-genitourinary-ink:var(--p-retuned-458);
  --therapeutic-genitourinary-line:var(--p-palette-172);
  --therapeutic-genitourinary-soft:var(--p-palette-168);
  --therapeutic-immunology-oncology-accent:var(--p-palette-158);
  --therapeutic-immunology-oncology-ink:var(--p-retuned-457);
  --therapeutic-immunology-oncology-line:var(--p-palette-164);
  --therapeutic-immunology-oncology-soft:var(--p-palette-160);
  --therapeutic-infectious-disease-accent:var(--p-palette-150);
  --therapeutic-infectious-disease-ink:var(--p-retuned-456);
  --therapeutic-infectious-disease-line:var(--p-palette-156);
  --therapeutic-infectious-disease-soft:var(--p-palette-152);
  --therapeutic-respiratory-allergy-accent:var(--p-palette-110);
  --therapeutic-respiratory-allergy-ink:var(--p-palette-114);
  --therapeutic-respiratory-allergy-line:var(--p-palette-116);
  --therapeutic-respiratory-allergy-soft:var(--p-palette-112);
  --therapeutic-surface-accent:var(--p-palette-095);
  --therapeutic-surface-ink:var(--p-palette-098);
  --therapeutic-surface-line:var(--p-palette-100);
  --therapeutic-surface-soft:var(--p-eclipse-850);
  --visual-announcement-cta-text:var(--p-palette-375);
  --visual-auth-auth-field-border:var(--p-palette-243);
  --visual-auth-auth-field-border-12d8e2d8:var(--p-palette-244);
  --visual-auth-auth-field-surface:var(--p-palette-245);
  --visual-auth-auth-field-text:var(--p-palette-246);
  --visual-auth-auth-field-text-2e731401:var(--p-palette-247);
  --visual-auth-auth-intro-text:var(--p-palette-248);
  --visual-auth-auth-intro-text-c09b3168:var(--p-palette-247);
  --visual-auth-auth-login-card-auth-field-border:var(--p-palette-249);
  --visual-auth-auth-login-card-auth-field-surface:var(--p-palette-376);
  --visual-auth-auth-login-card-auth-field-text:var(--p-palette-250);
  --visual-auth-auth-recovery-link-text:var(--p-palette-251);
  --visual-auth-auth-recovery-link-text-c5239532:var(--p-palette-247);
  --visual-auth-auth-recovery-link-text-hover:var(--p-palette-246);
  --visual-auth-auth-switch-link-border-bottom-ink-hover:var(--p-gold-400);
  --visual-auth-auth-switch-link-text:var(--p-palette-252);
  --visual-auth-auth-switch-link-text-2c6a9181:var(--p-palette-246);
  --visual-auth-auth-switch-link-text-hover:var(--p-palette-253);
  --visual-auth-auth-switch-text:var(--p-palette-248);
  --visual-auth-auth-switch-text-cde122bf:var(--p-palette-254);
  --visual-auth-brand-description-text:var(--p-palette-216);
  --visual-auth-brand-headline-text:var(--p-palette-215);
  --visual-auth-brand-placeholder-text:var(--p-palette-217);
  --visual-auth-context-surface:var(--p-palette-218);
  --visual-auth-context-text:var(--p-palette-219);
  --visual-auth-footer-quiet-text:var(--p-palette-222);
  --visual-auth-footer-separator:var(--p-palette-223);
  --visual-auth-institutional-link-text:var(--p-palette-221);
  --visual-auth-institutional-text:var(--p-palette-220);
  --visual-auth-intro-text:var(--p-palette-255);
  --visual-auth-legal-note-text:var(--p-palette-251);
  --visual-auth-legal-note-text-ec3511f3:var(--p-palette-247);
  --visual-auth-login-card-auth-field-border:var(--p-palette-256);
  --visual-auth-login-card-auth-field-border-9aa9e3e2:var(--p-palette-257);
  --visual-auth-login-card-auth-field-surface:var(--p-palette-375);
  --visual-auth-password-guidance-text:var(--p-palette-255);
  --visual-auth-password-toggle-text:var(--p-palette-258);
  --visual-auth-password-toggle-text-4a857498:var(--p-palette-247);
  --visual-auth-registration-card-legal-note-text:var(--p-palette-263);
  --visual-auth-site-footer-text:var(--p-palette-264);
  --visual-auth-site-footer-text-939798e7:var(--p-palette-254);
  --visual-auth-site-footer-text-hover:var(--p-palette-265);
  --visual-auth-site-footer-text-hover-12b38229:var(--p-palette-247);
  --visual-auth-switch-link-text:var(--p-palette-266);
  --visual-auth-switch-link-text-hover:var(--p-palette-267);
  --visual-auth-switch-text:var(--p-palette-255);
  --visual-calendar-day-selected-day-number-text:var(--p-palette-375);
  --visual-calendar-day-today-day-number-text:var(--p-palette-375);
  --visual-calendar-event-surface:var(--p-palette-270);
  --visual-card-auth-card-auth-login-card-surface:var(--p-palette-280);
  --visual-connection-state-surface:var(--p-palette-284);
  --visual-connection-state-text:var(--p-palette-285);
  --visual-dialog-error-text-fallback:var(--p-palette-236);
  --visual-drug-rail-on-text:var(--p-palette-375);
  --visual-import-event-probable-duplicate-border:var(--p-palette-289);
  --visual-institution-membership-border-fallback:var(--p-palette-225);
  --visual-institution-membership-verified-border:var(--p-palette-290);
  --visual-lab-checklist-critical-marker-fallback:var(--p-palette-242);
  --visual-lab-checklist-critical-text-fallback:var(--p-palette-242);
  --visual-lab-checklist-hit-fallback:var(--p-palette-240);
  --visual-lab-checklist-miss-marker-fallback:var(--p-palette-241);
  --visual-lab-checklist-miss-text-fallback:var(--p-palette-241);
  --visual-lab-checklist-muted-fallback:var(--p-palette-371);
  --visual-lab-checklist-prompt-fallback:var(--p-palette-371);
  --visual-lab-final-entry-accent-fallback:var(--p-palette-237);
  --visual-lab-final-hero-accent-fallback:var(--p-palette-237);
  --visual-lab-label-preview-surface:var(--p-palette-375);
  --visual-lab-label-preview-text:var(--p-palette-377);
  --visual-lab-mark-muted-fallback:var(--p-palette-371);
  --visual-lab-mark-source-fallback:var(--p-palette-237);
  --visual-lab-method-text:var(--p-palette-375);
  --visual-lab-rx-muted-fallback:var(--p-palette-371);
  --visual-landing-cta-owned-inset:var(--p-palette-369);
  --visual-landing-cta-pressed-inset:var(--p-palette-369);
  --visual-landing-demo-answer-text:var(--p-palette-291);
  --visual-landing-demo-ask-text:var(--p-palette-292);
  --visual-landing-demo-contrast-text:var(--p-palette-293);
  --visual-landing-demo-entry-surface:var(--p-palette-375);
  --visual-landing-demo-eyebrow-contrast:var(--p-palette-235);
  --visual-landing-demo-meter-surface:var(--p-palette-225);
  --visual-landing-demo-meter-surface-4772a335:var(--p-palette-295);
  --visual-landing-demo-result-is-correct-border:var(--p-palette-298);
  --visual-landing-demo-result-is-correct-surface:var(--p-palette-299);
  --visual-landing-demo-result-is-correct-text:var(--p-green-900);
  --visual-landing-demo-result-is-miss-border:var(--p-red-800);
  --visual-landing-demo-result-is-miss-surface:var(--p-palette-300);
  --visual-landing-demo-result-is-miss-text:var(--p-red-900);
  --visual-landing-demo-result-is-near-border:var(--p-gold-500);
  --visual-landing-demo-result-is-near-surface:var(--p-palette-301);
  --visual-landing-demo-result-is-near-text:var(--p-palette-302);
  --visual-landing-demo-result-surface:var(--p-palette-303);
  --visual-landing-demo-stem-text:var(--p-palette-291);
  --visual-landing-drills-section-landing-drill-panel-landing-demo-border:var(--p-palette-304);
  --visual-landing-drills-section-surface:var(--p-palette-234);
  --visual-landing-eyebrow-surface:var(--p-palette-378);
  --visual-landing-hero-text:var(--p-palette-305);
  --visual-landing-landing-cta-border-right-ink:var(--p-palette-306);
  --visual-lesson-card-drag-overlay:var(--p-palette-374);
  --visual-lesson-checkpoint-completed-border:var(--p-palette-313);
  --visual-lesson-checkpoint-current-text:var(--p-palette-375);
  --visual-library-editor-surface:var(--p-palette-379);
  --visual-lift-mark-pool:var(--p-palette-366);
  --visual-match-win-stars-surface:var(--p-palette-314);
  --visual-pathway-cofactor-tag-tint:var(--p-palette-231);
  --visual-pathway-decarboxylation-tint:var(--p-palette-228);
  --visual-pathway-entry-tint:var(--p-palette-227);
  --visual-pathway-enzyme-tag-tint:var(--p-palette-230);
  --visual-pathway-key-fact-tag-tint:var(--p-palette-233);
  --visual-pathway-regeneration-tint:var(--p-palette-229);
  --visual-pb-card-kind-cofactor-pb-card-tag-text:var(--p-palette-316);
  --visual-pb-card-kind-enzyme-pb-card-tag-text:var(--p-palette-230);
  --visual-pb-card-kind-key-fact-pb-card-tag-text:var(--p-palette-317);
  --visual-phase-decarboxylation-pb-step-number-text:var(--p-palette-318);
  --visual-phase-entry-pb-step-number-text:var(--p-palette-227);
  --visual-phase-regeneration-pb-step-number-text:var(--p-palette-319);
  --visual-picker-row-hover-fallback:var(--p-palette-370);
  --visual-reference-rail-on-text:var(--p-palette-375);
  --visual-skip-link-text:var(--p-palette-326);
  --visual-source-note-text:var(--p-palette-327);
  --visual-status-dot-surface:var(--p-palette-175);
  --visual-study-area-identity-ghost-border:var(--p-palette-365);
  --visual-study-area-identity-ghost-border-hover:var(--p-palette-380);
  --visual-study-area-identity-ghost-surface:var(--p-palette-381);
  --visual-study-area-identity-ghost-surface-hover:var(--p-palette-382);
  --visual-study-area-identity-ghost-text:var(--p-palette-340);
  --visual-study-area-identity-ghost-text-hover:var(--p-palette-375);
  --visual-study-area-identity-primary-border:var(--p-palette-383);
  --visual-study-area-identity-primary-border-hover:var(--p-palette-375);
  --visual-study-area-identity-primary-surface:var(--p-palette-341);
  --visual-study-area-identity-primary-surface-hover:var(--p-palette-375);
  --visual-study-area-identity-primary-text:var(--p-palette-342);
  --visual-study-area-identity-primary-text-hover:var(--p-palette-343);
  --visual-study-area-identity-text:var(--p-palette-344);
  --visual-study-area-identity-text-21f5da01:var(--p-palette-375);
  --visual-theme-chip-bottom:var(--p-palette-239);
  --visual-theme-chip-top:var(--p-palette-238);
  --visual-theme-glyph-disc-fill:var(--p-palette-351);
  --visual-theme-glyph-rays-stroke:var(--p-palette-351);
  --visual-theme-seg-theme-glyph-disc-fill:var(--p-gold-400);
  --visual-theme-seg-theme-glyph-disc-fill-0b05c056:var(--p-palette-352);
  --visual-theme-seg-theme-glyph-disc-fill-hover:var(--p-palette-353);
  --visual-theme-seg-theme-glyph-rays-stroke:var(--p-gold-400);
  --visual-theme-seg-theme-glyph-rays-stroke-hover:var(--p-palette-353);
  --visual-theme-track-fallback:var(--p-palette-232);
  --visual-therapeutic-group-label-contrast:var(--p-palette-374);
  --visual-threshold-card-outline:var(--p-palette-274);
  --visual-threshold-card-surface:var(--p-neutral-000);
  --visual-threshold-field-border:var(--p-palette-274);
  --visual-threshold-field-surface:var(--p-neutral-000);
  --visual-threshold-field-text:var(--p-navy-990);
  --visual-threshold-footer-text:var(--p-palette-277);
  --visual-threshold-primary-surface-disabled:var(--p-palette-275);
  --visual-threshold-primary-text-disabled:var(--p-palette-276);
  --visual-today-assignment-check-text:var(--p-palette-375);
  --visual-today-selected-day-number-text:var(--p-palette-375);
  --visual-ui-dialog-surface:var(--p-palette-384);
  --visual-verification-panel-border-fallback:var(--p-palette-225);
  --visual-verification-panel-surface-fallback:var(--p-palette-226);
  --warning-bg:var(--p-orange-950);
  --warning-edge:var(--p-orange-400);
  --warning-fg:var(--p-orange-400);
  --warning-icon:var(--p-orange-400);
  --account-canvas-elev-shade:7,17,30;
  --account-canvas-elev-tint:7,17,30;
  --account-elev-shade:7,14,23;
  --account-elev-tint:143,178,228;
  --account-environment-header-focus:color-mix(in srgb,var(--p-gold-400) 76%,transparent);
  --account-menu-scrim-mask-image:radial-gradient(ellipse 48% 50% at 46% 50%,var(--p-palette-374) 0,var(--p-palette-374) 26%,var(--p-composite-104) 60%,transparent 100%);
  --action-danger-press:color-mix(in srgb,var(--danger-solid-bg) 86%,var(--p-black));
  --action-press-inset:inset 0 1px 2px rgba(var(--elev-shade),.42);
  --action-press-outer:0 1px 1px rgba(var(--elev-shade),.12);
  --action-primary-press:var(--p-gold-500);
  --action-quiet-hover:color-mix(in srgb,var(--text-primary) 7%,transparent);
  --action-raise-shadow:0 2px 4px rgba(var(--elev-shade),.34),0 7px 16px rgba(var(--elev-shade),.24);
  --action-rest-ambient:0 2px 6px rgba(var(--elev-shade),.14);
  --action-rest-contact:0 1px 2px rgba(var(--elev-shade),.3);
  --action-secondary-bg:var(--surface-raised);
  --action-secondary-edge-hover:color-mix(in srgb,var(--border-subtle) 78%,var(--text-primary));
  --action-secondary-hover:color-mix(in srgb,var(--surface-raised) 92%,var(--text-primary));
  --action-secondary-press:color-mix(in srgb,var(--surface-raised) 85%,var(--p-black));
  --action-secondary-press-edge:color-mix(in srgb,var(--surface-raised) 78%,var(--p-black));
  --activity-mark-muted-opacity:.5;
  --artwork-hover-filter:grayscale(.55) brightness(1.12);
  --artwork-muted-filter:grayscale(1) brightness(1.5);
  --auth-elev-shade:7,17,30;
  --auth-elev-tint:39,109,204;
  --auth-environment-header-focus:color-mix(in srgb,var(--p-neutral-075) 76%,transparent);
  --canvas-feather:rgba(var(--elev-shade),.18);
  --course-tint-strength:16%;
  --data-lift-lift-hover-shadow:drop-shadow(0 3px 5px rgba(var(--lift-shadow-tint),.30))
    drop-shadow(0 10px 18px rgba(var(--lift-shadow-tint),.22));
  --data-lift-lift-rest-shadow:drop-shadow(0 1px 2px rgba(var(--lift-shadow-tint),.42))
    drop-shadow(0 3px 6px rgba(var(--lift-shadow-tint),.30));
  --elev-1:0 1px 2px rgba(var(--elev-shade),.28),0 3px 10px rgba(var(--elev-shade),.16);
  --elev-2:0 2px 4px rgba(var(--elev-shade),.32),0 10px 22px rgba(var(--elev-shade),.22);
  --elev-3:0 4px 8px rgba(var(--elev-shade),.36),0 20px 42px rgba(var(--elev-shade),.30);
  --elev-4:0 8px 16px rgba(var(--elev-shade),.48),0 30px 64px rgba(var(--elev-shade),.44);
  --elev-shade:0,0,0;
  --elev-tint:233,185,104;
  --header-focus:var(--focus-ring);
  --landing-environment-cta-primary-ambient-shadow:0 12px 22px -6px rgba(var(--elev-shade),.40);
  --landing-environment-cta-primary-contact-shadow:rgba(var(--elev-shade),.10);
  --landing-environment-cta-primary-lit-edge:color-mix(in srgb,var(--p-neutral-000) 55%,transparent);
  --landing-environment-cta-primary-shadow-hover:0 16px 26px -6px rgba(var(--elev-shade),.42);
  --landing-environment-cta-primary-shadow-pressed:0 2px 4px -1px rgba(var(--elev-shade),.30);
  --landing-environment-cta-primary-surface:linear-gradient(180deg,var(--p-gold-300) 0%,var(--p-gold-425) 100%);
  --landing-environment-cta-primary-surface-disabled:linear-gradient(180deg,var(--p-composite-119),var(--p-composite-120));
  --landing-environment-cta-primary-surface-hover:linear-gradient(180deg,color-mix(in srgb,var(--p-gold-300) 80%,var(--p-neutral-000)) 0%,color-mix(in srgb,var(--p-gold-425) 85%,var(--p-gold-300)) 100%);
  --landing-environment-cta-primary-surface-pressed:linear-gradient(180deg,color-mix(in srgb,var(--p-gold-425) 75%,var(--p-gold-300)) 0%,color-mix(in srgb,var(--p-gold-425) 55%,var(--p-gold-500)) 100%);
  --landing-header-edge-ink:10,21,36;
  --landing-header-header-focus:color-mix(in srgb,var(--p-blue-600) 72%,transparent);
  --landing-header-lift-hover-shadow:drop-shadow(0 2px 3px rgba(var(--lift-shadow-tint),.28))
    drop-shadow(0 8px 14px rgba(var(--lift-shadow-tint),.17));
  --landing-header-lift-hover-shadow-2:drop-shadow(0 2px 3px rgba(var(--lift-shadow-tint),.28))
    drop-shadow(0 5px 9px rgba(var(--lift-shadow-tint),.16));
  --landing-header-lift-rest-shadow:drop-shadow(0 2px 3px rgba(var(--lift-shadow-tint),.30))
    drop-shadow(0 7px 12px rgba(var(--lift-shadow-tint),.18));
  --landing-header-mobile-sheet-line:rgba(var(--header-edge-ink),.1);
  --ls-fold-action-hover-shadow:0 2px 3px rgba(var(--elev-shade),.16),0 8px 17px color-mix(in srgb,var(--success-fg) 22%,transparent);
  --ls-fold-action-pressed-shadow:0 1px 2px rgba(var(--elev-shade),.18),0 3px 6px color-mix(in srgb,var(--success-fg) 13%,transparent);
  --mobile-sheet-edge:color-mix(in srgb,var(--header-text) 13%,transparent);
  --mobile-sheet-fg:var(--header-text);
  --mobile-sheet-mark-theme:var(--nav-spotlight-source);
  --mobile-sheet-surface:var(--header-bg);
  --mode-switcher-lift-hover-shadow:drop-shadow(0 4px 6px rgba(var(--lift-shadow-tint),.32))
    drop-shadow(0 13px 22px rgba(var(--lift-shadow-tint),.24));
  --mode-switcher-lift-rest-shadow:drop-shadow(0 1px 1px rgba(var(--lift-shadow-tint),.26));
  --rail-feather-image:linear-gradient(90deg,transparent,var(--canvas-feather)),linear-gradient(270deg,transparent,var(--canvas-feather));
  --rail-feather-width:min(100%,calc(var(--workspace-max-width) + 36px));
  --shadow-contact-rgb:0,0,0;
  --study-area-card-study-shadow:rgba(var(--elev-shade),var(--study-card-shadow-alpha));
  --study-area-identity-action-ambient-shadow:0 8px 18px rgba(var(--elev-shade),.12);
  --study-area-identity-action-contact-shadow:0 1px 2px rgba(var(--elev-shade),.16);
  --study-card-hairline-opacity:.58;
  --study-card-hover-strength:6%;
  --study-card-shadow-alpha:.28;
  --visual-account-menu-panel-shadow:0 12px 30px var(--p-composite-111),0 2px 8px var(--p-composite-067);
  --visual-account-menu-trigger-account-menu-trigger-shadow-active-disabled:0 1px 2px var(--p-composite-001),0 3px 7px var(--p-composite-002);
  --visual-account-menu-trigger-account-menu-trigger-shadow-disabled:0 1px 2px var(--p-composite-001),0 3px 7px var(--p-composite-002);
  --visual-account-menu-trigger-account-menu-trigger-shadow-hover-disabled:0 3px 4px var(--p-composite-003),0 10px 20px var(--p-composite-004);
  --visual-active-shadow:inset 0 -2px 0 var(--p-composite-005);
  --visual-announcement-cta-outline:1px solid var(--p-composite-006);
  --visual-app-nav-action-active-text-shadow:0 1px 0 var(--p-composite-007),0 0 13px var(--p-composite-008);
  --visual-app-nav-action-active-text-shadow-hover:0 1px 0 var(--p-composite-009),0 0 16px var(--p-composite-010);
  --visual-app-nav-action-text-shadow:0 1px 1px var(--p-composite-011);
  --visual-app-nav-action-text-shadow-active:0 1px 1px var(--p-composite-011);
  --visual-app-nav-action-text-shadow-hover:0 1px 0 var(--p-composite-012),0 0 10px var(--p-composite-013);
  --visual-app-nav-spotlight-cone-surface:linear-gradient(180deg,var(--p-composite-014) 0%,var(--p-composite-015) 34%,
    var(--p-composite-016) 68%,var(--p-composite-017) 100%);
  --visual-app-nav-spotlight-filament-shadow:0 0 3px var(--p-composite-018),0 0 9px var(--p-composite-019),
    0 -5px 18px var(--p-composite-020);
  --visual-app-nav-spotlight-pool-surface:radial-gradient(ellipse 58% 72% at 50% 91%,var(--p-composite-021) 0%,
    var(--p-composite-022) 26%,var(--p-composite-023) 51%,var(--p-composite-024) 78%);
  --visual-auth-auth-field-shadow:inset 0 1px 0 var(--p-composite-025), inset 0 -1px 0 var(--p-composite-026);
  --visual-auth-auth-field-shadow-1083d68d:inset 0 1px 0 var(--p-composite-025),0 0 0 3px var(--p-composite-027);
  --visual-auth-auth-switch-link-bottom-outline:1px solid var(--p-composite-028);
  --visual-auth-body-right-outline:1px solid var(--p-composite-029);
  --visual-auth-body-surface:linear-gradient(115deg,var(--p-composite-030),var(--p-composite-031) 70%,var(--p-composite-032));
  --visual-auth-body-surface-28183b04:radial-gradient(circle at 86% 12%,var(--p-composite-033) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 7%,var(--p-composite-034) 0 1px,transparent 2px),
    radial-gradient(circle at 92% 80%,var(--p-composite-034) 0 1px,transparent 2px),
    radial-gradient(circle at 9% 90%,var(--p-composite-033) 0 1px,transparent 2px),
    linear-gradient(145deg,var(--p-composite-035),var(--p-composite-036));
  --visual-auth-body-surface-96e7bfed:radial-gradient(ellipse at 60% 46%,var(--p-composite-037),transparent 66%);
  --visual-auth-context-icon-outline:1px solid var(--p-palette-363);
  --visual-bootstrap-arrival-hold-text:color-mix(in srgb,var(--p-composite-045) 74%,transparent);
  --visual-brand-brand-mark-surface:linear-gradient(to bottom,
    var(--p-composite-046) 0%,var(--p-composite-046) 52%,
    var(--p-palette-367) 78%,var(--p-composite-047) 96%,var(--p-palette-373) 100%);
  --visual-card-auth-card-auth-login-card-outline:1px solid var(--p-palette-441);
  --visual-connection-state-bottom-outline:1px solid var(--p-composite-055);
  --visual-global-shadow:0 0 0 5px var(--p-composite-056),0 0 28px var(--p-composite-057);
  --visual-global-shadow-186e37dc:0 0 0 5px var(--p-composite-058),0 0 28px var(--p-composite-059);
  --visual-global-shadow-3b3816fe:0 0 0 1px var(--p-composite-060);
  --visual-global-shadow-587fae53:0 0 0 1px var(--p-composite-061);
  --visual-global-shadow-7f0461d8:0 0 0 5px var(--p-composite-058),0 0 28px var(--p-composite-059);
  --visual-global-shadow-bd377be5:0 0 0 0 var(--p-composite-062);
  --visual-global-shadow-c8f640df:0 0 0 4px var(--p-composite-063),0 0 24px var(--p-composite-064);
  --visual-import-warnings-outline:1px solid var(--p-palette-289);
  --visual-lab-label-aux-outline:1px solid var(--p-composite-065);
  --visual-lab-label-aux-top-outline:2px solid var(--p-palette-377);
  --visual-lab-label-blank-bottom-outline:1px solid var(--p-palette-377);
  --visual-lab-label-preview-outline:2px solid var(--p-composite-066);
  --visual-lab-label-preview-shadow:0 8px 26px var(--p-composite-067);
  --visual-landing-demo-entry-outline:1px solid var(--p-composite-068);
  --visual-landing-demo-outline:1px solid var(--p-composite-069);
  --visual-landing-demo-result-outline:1px solid var(--p-composite-070);
  --visual-landing-demo-shadow:0 28px 70px var(--p-composite-071),0 2px 8px var(--p-composite-072);
  --visual-landing-demo-surface:linear-gradient(168deg,var(--p-composite-073),var(--p-composite-074));
  --visual-landing-drill-panel-landing-demo-shadow:0 16px 38px var(--p-composite-075);
  --visual-landing-drill-row-mask-both:linear-gradient(90deg,transparent 0,var(--p-palette-374) 44px,var(--p-palette-374) calc(100% - 64px),transparent 100%);
  --visual-landing-drill-row-mask-end:linear-gradient(90deg,var(--p-palette-374) calc(100% - 64px),transparent 100%);
  --visual-landing-drill-row-mask-start:linear-gradient(90deg,transparent 0,var(--p-palette-374) 44px);
  --visual-landing-drills-section-landing-drill-panel-landing-demo-shadow:0 18px 42px var(--p-composite-076),0 2px 8px var(--p-composite-077);
  --visual-landing-eyebrow-outline:1px solid var(--p-composite-078);
  --visual-landing-hero-seam-base:linear-gradient(var(--p-palette-374),var(--p-palette-374));
  --visual-landing-hero-surface:radial-gradient(118% 128% at 16% 32%,var(--p-hero-ink-400) 0%,var(--p-hero-ink-500) 40%,var(--p-hero-ink-600) 72%,var(--p-hero-ink-700) 100%);
  --visual-landing-hero-surface-ebcee43b:linear-gradient(180deg,var(--p-hero-ink-400) 0%,var(--p-hero-ink-500) 58%,var(--p-hero-ink-700) 100%);
  --visual-landing-landing-cta-outline:2px solid var(--p-composite-088);
  --visual-learning-index-veil-mask-image:linear-gradient(180deg,var(--p-palette-374) 0%,var(--p-palette-374) 76%,transparent 100%);
  --visual-learning-utility-veil-mask-image:linear-gradient(180deg,var(--p-palette-374) 0%,var(--p-palette-374) 62%,transparent 100%);
  --visual-library-publish-bar-shadow:0 8px 28px var(--p-composite-094);
  --visual-pb-bank-shadow:0 10px 30px var(--p-composite-095);
  --visual-pb-toolbar-shadow:0 8px 28px var(--p-composite-096);
  --visual-rdot-outline:1px solid var(--p-composite-002);
  --visual-reference-menu-panel-shadow:0 16px 40px var(--p-composite-099);
  --visual-rxcard-outline:1px solid var(--p-composite-100);
  --visual-rxcard-rxhead-bottom-outline:1px solid var(--p-composite-100);
  --visual-rxcard-shadow:0 2px 10px var(--p-composite-101);
  --visual-study-area-identity-outline:1px solid var(--p-composite-102);
  --visual-study-area-identity-surface:linear-gradient(115deg,var(--p-composite-103),transparent 44%);
  --visual-theme-chip-shadow:0 1px 2px var(--p-composite-104),0 3px 7px var(--p-composite-101),inset 0 1px 0 var(--p-composite-105);
  --visual-theme-toggle-shadow:inset 0 1px 2px var(--p-composite-106),inset 0 2px 5px var(--p-composite-107),
    inset 0 -1px 0 var(--p-composite-108);
  --visual-threshold-card-shadow:0 2px 4px rgba(var(--elev-shade),.06),
    0 10px 22px rgba(var(--elev-tint),.09),0 34px 72px rgba(var(--elev-tint),.13);
  --visual-threshold-field-shadow:inset 0 1px 2px rgba(var(--elev-tint),.09);
  --visual-threshold-field-shadow-focus:0 0 0 3px var(--p-composite-048),
    inset 0 1px 2px rgba(var(--elev-tint),.06);
  --visual-threshold-primary-shadow:var(--action-rest-contact),var(--action-rest-ambient);
  --visual-workspace-edge-veil--webkit-mask-image:linear-gradient(180deg,transparent 0%,var(--p-palette-374) 38%,var(--p-palette-374) 100%);
  --visual-workspace-edge-veil-mask-image:linear-gradient(180deg,transparent 0%,var(--p-palette-374) 38%,var(--p-palette-374) 100%);
}
body.landing-environment>header .brand{--lift-rest-shadow:var(--landing-header-lift-rest-shadow)}
body.landing-environment>header .brand{--lift-hover-shadow:var(--landing-header-lift-hover-shadow)}
body:not(.landing-environment)>header .brand{--lift-hover-shadow:var(--landing-header-lift-hover-shadow-2)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--header-bg:var(--auth-environment-header-bg)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--header-text:var(--auth-environment-header-text)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--header-muted:var(--auth-environment-header-muted)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--header-control-bg:var(--auth-environment-header-control-bg)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--header-control-line:var(--auth-environment-header-control-line)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--header-control-text:var(--auth-environment-header-control-text)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--header-focus:var(--auth-environment-header-focus)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--elev-tint:var(--auth-elev-tint)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--elev-shade:var(--auth-elev-shade)}
html.auth-environment,html.auth-environment,
body.auth-environment,body.auth-environment{--on-accent:var(--auth-environment-on-accent)}
body.auth-environment main .card.auth-card{--text-primary:var(--account-card-text)}
body.auth-environment main .card.auth-card{--text-secondary:var(--account-card-dim)}
body.auth-environment main .card.auth-card{--danger-fg:var(--account-card-bad)}
body.auth-environment main .card.auth-card{--border-subtle:var(--account-card-line)}
body.auth-environment main .card.auth-card{--surface-raised:var(--account-card-panel2)}
body.auth-environment main .card.auth-card{--surface-panel:var(--account-card-surface)}
body.auth-environment main .card.auth-card{--action-primary-bg:var(--account-card-accent)}
body.auth-environment.landing-environment{--l-ink:var(--landing-environment-l-ink)}
body.auth-environment.landing-environment{--l-band:var(--landing-environment-l-band)}
body.auth-environment.landing-environment{--l-band-alt:var(--landing-environment-l-band-alt)}
body.auth-environment.landing-environment{--l-panel:var(--landing-environment-l-panel)}
body.auth-environment.landing-environment{--l-panel-2:var(--landing-environment-l-panel-2)}
body.auth-environment.landing-environment{--l-line:var(--landing-environment-l-line)}
body.auth-environment.landing-environment{--l-line-soft:var(--landing-environment-l-line-soft)}
body.auth-environment.landing-environment{--l-text:var(--landing-environment-l-text)}
body.auth-environment.landing-environment{--l-text-dim:var(--landing-environment-l-text-dim)}
body.auth-environment.landing-environment{--l-head:var(--landing-environment-l-head)}
body.auth-environment.landing-environment{--landing-accent-link:var(--landing-environment-accent-link)}
body.auth-environment.landing-environment{--landing-accent-highlight:var(--landing-environment-accent-highlight)}
body.auth-environment.landing-environment{--landing-accent-highlight-strong:var(--landing-environment-accent-highlight-strong)}
body.auth-environment.landing-environment{--landing-accent-growth:var(--landing-environment-accent-growth)}
body.auth-environment.landing-environment{--landing-accent-learning:var(--landing-environment-accent-learning)}
body.auth-environment.landing-environment{--landing-accent-energy:var(--landing-environment-accent-energy)}
body.auth-environment.landing-environment{--landing-accent-clarity:var(--landing-environment-accent-clarity)}
body.auth-environment.landing-environment{--cta-primary-surface:var(--landing-environment-cta-primary-surface)}
body.auth-environment.landing-environment{--cta-primary-surface-pressed:var(--landing-environment-cta-primary-surface-pressed)}
body.auth-environment.landing-environment{--cta-primary-surface-disabled:var(--landing-environment-cta-primary-surface-disabled)}
body.auth-environment.landing-environment{--cta-primary-edge:var(--landing-environment-cta-primary-edge)}
body.auth-environment.landing-environment{--cta-primary-edge-hover:var(--landing-environment-cta-primary-edge-hover)}
body.auth-environment.landing-environment{--cta-primary-edge-pressed:var(--landing-environment-cta-primary-edge-pressed)}
body.auth-environment.landing-environment{--cta-primary-edge-disabled:var(--landing-environment-cta-primary-edge-disabled)}
body.auth-environment.landing-environment{--cta-primary-text:var(--landing-environment-cta-primary-text)}
body.auth-environment.landing-environment{--cta-primary-text-disabled:var(--landing-environment-cta-primary-text-disabled)}
body.auth-environment.landing-environment{--cta-primary-contact-shadow:var(--landing-environment-cta-primary-contact-shadow)}
body.auth-environment.landing-environment{--cta-primary-ambient-shadow:var(--landing-environment-cta-primary-ambient-shadow)}
body.auth-environment.landing-environment{--cta-primary-shadow-hover:var(--landing-environment-cta-primary-shadow-hover)}
body.auth-environment.landing-environment{--cta-primary-shadow-pressed:var(--landing-environment-cta-primary-shadow-pressed)}
body.auth-environment.landing-environment{--cta-primary-focus:var(--landing-environment-cta-primary-focus)}
body.auth-environment.landing-environment{--cta-primary-surface-hover:var(--landing-environment-cta-primary-surface-hover)}
body.auth-environment.landing-environment{--cta-primary-lit-edge:var(--landing-environment-cta-primary-lit-edge)}
body.landing-environment>header{--mobile-sheet-line:var(--landing-header-mobile-sheet-line)}
body.landing-environment>header{--header-edge-ink:var(--landing-header-edge-ink)}
body.landing-environment>header{--header-text:var(--landing-header-header-text)}
body.landing-environment>header{--header-muted:var(--landing-header-header-muted)}
body.landing-environment>header{--header-control-bg:var(--landing-header-header-control-bg)}
body.landing-environment>header{--header-control-line:var(--landing-header-header-control-line)}
body.landing-environment>header{--header-control-text:var(--landing-header-header-control-text)}
body.landing-environment>header{--header-focus:var(--landing-header-header-focus)}
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-bg:var(--account-environment-header-bg)}
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-text:var(--account-environment-header-text)}
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-muted:var(--account-environment-header-muted)}
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-control-bg:var(--account-environment-header-control-bg)}
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-control-line:var(--account-environment-header-control-line)}
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-control-text:var(--account-environment-header-control-text)}
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-focus:var(--account-environment-header-focus)}
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--elev-tint:var(--account-elev-tint)}
html.auth-environment:not(.landing-environment),
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--elev-shade:var(--account-elev-shade)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--text-primary:var(--account-card-text-2)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--text-secondary:var(--account-card-dim-2)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--danger-fg:var(--account-card-bad-2)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--border-subtle:var(--account-card-line-2)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--surface-raised:var(--account-card-panel2-2)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--surface-panel:var(--account-card-surface-2)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--action-primary-bg:var(--account-card-accent-2)}
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-text:var(--account-environment-header-text-2)}
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-muted:var(--account-environment-header-muted-2)}
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-control-bg:var(--account-environment-header-control-bg-2)}
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-control-line:var(--account-environment-header-control-line-2)}
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--header-control-text:var(--account-environment-header-control-text-2)}
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--elev-tint:var(--account-canvas-elev-tint)}
html.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment:not(.landing-environment){--elev-shade:var(--account-canvas-elev-shade)}
html.auth-environment.auth-route-pending,
body.auth-environment.auth-route-pending,
html.auth-environment.landing-environment,
body.auth-environment.landing-environment{--outer-canvas-bg:var(--brand-arrival-canvas)}
html.auth-environment.auth-route-pending,
body.auth-environment.auth-route-pending,
html.auth-environment.landing-environment,
body.auth-environment.landing-environment{--arrival-canvas:var(--brand-arrival-canvas)}
html.auth-environment.account-access-environment,
body.auth-environment.account-access-environment{--outer-canvas-bg:var(--ground-paper)}
html.auth-environment.account-access-environment,
body.auth-environment.account-access-environment{--arrival-canvas:var(--ground-paper)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--text-primary:var(--account-card-text-3)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--text-secondary:var(--account-card-dim-3)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--danger-fg:var(--account-card-bad-3)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--border-subtle:var(--account-card-line-3)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--surface-raised:var(--account-card-panel2-3)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--surface-panel:var(--account-card-surface-3)}
body.auth-environment:not(.landing-environment) main .card.auth-card{--action-primary-bg:var(--account-card-accent-3)}
/* END GENERATED COLOR CONTRACT */