/* Grade-bound presentation only. Content, progress and examination rules do not
   change. Every selector is scoped to an authoritative grade main element. */
.grade-experience {
  --grade-ink: #193f35;
  --grade-muted: #4c665d;
  --grade-accent: #17684d;
  --grade-tint: #eaf4ed;
  --grade-line: #d4e5d9;
  --grade-sun: #fae4ad;
  color: var(--grade-ink);
}
.grade-experience--1 { --grade-tint: #edf7e8; --grade-sun: #ffe3a6; }
.grade-experience--2 { --grade-tint: #e8f5ef; --grade-sun: #ffe0c4; }
.grade-experience--3 { --grade-tint: #eef2fc; --grade-sun: #eee0ff; }
.grade-experience--4 { --grade-tint: #e7f4f3; --grade-sun: #f8e4bc; }
.grade-experience--5 { --grade-tint: #eaf3ef; --grade-sun: #e2ecfd; }
.grade-experience--6 { --grade-tint: #eef2fa; --grade-sun: #d7eee5; }
.grade-experience--7 { --grade-tint: #eef5e9; --grade-sun: #f3dfb7; }
.grade-experience--8 { --grade-tint: #e6f2ee; --grade-sun: #f0e2ba; }
.grade-experience--9 { --grade-tint: #eaf2f7; --grade-sun: #e0eaf1; }
.grade-experience--10 { --grade-tint: #eef0f6; --grade-sun: #e4e8f4; }
.grade-experience--11 { --grade-tint: #ebf2ef; --grade-sun: #e7dfbd; }
.grade-experience--12 { --grade-tint: #e5efe9; --grade-sun: #e9dcad; }
.grade-experience.workbench-main { max-width: 1248px; padding-top: 22px; }
.grade-experience.workbench-main .breadcrumbs { margin-block: 0 8px; }
.grade-experience .workbench-heading {
  position: relative;
  isolation: isolate;
  margin: 22px 0 18px;
  padding: 32px 36px;
  border: 1px solid var(--grade-line);
  border-radius: 28px;
  background: var(--grade-tint);
  overflow: hidden;
  gap: 28px;
}
.grade-experience .workbench-heading::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 350px;
  height: 350px;
  border: 1px solid #b8d2c555;
  border-radius: 50%;
  right: -105px;
  top: -115px;
  box-shadow: 0 0 0 46px #ffffff35, 0 0 0 92px #ffffff25;
  pointer-events: none;
}
.grade-experience .workbench-heading > div:first-child { min-width: 0; max-width: 790px; }
.grade-experience .workbench-heading .section-kicker { color: var(--grade-accent); font-size: .75rem; letter-spacing: .09em; margin: 0 0 10px; }
.grade-experience .workbench-heading h1 { color: var(--grade-ink); margin: 0 0 12px; font-size: clamp(1.45rem, 2.2vw, 1.8rem); letter-spacing: -.035em; }
.grade-experience .workbench-heading h1 em { margin-top: 8px; color: var(--grade-ink); font-size: clamp(1.8rem, 3.1vw, 2.5rem); line-height: 1.16; letter-spacing: -.04em; }
.grade-experience .workbench-heading p:not(.section-kicker) { color: var(--grade-muted); max-width: 650px; margin: 0; font-size: 1rem; line-height: 1.65; }
.grade-experience .grade-experience-badge { position: relative; flex: 0 0 148px; height: 142px; display: grid; place-items: end; }
.grade-experience .grade-experience-badge-icon { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid #d2e0d4; border-radius: 22px; color: #276143; background: #fff; transform: rotate(-9deg); box-shadow: 0 8px 18px #2c57370a; }
/* This duplicate number is aria-hidden ornament; fixed icon dimensions must not
   clip at text zoom. The real grade label and every action use scalable text. */
.grade-experience .workbench-grade { min-width: 0; width: 100px; height: 100px; gap: 0; align-content: center; border-radius: 27px; background: var(--grade-sun); color: #254737; font-size: 44px; line-height: 1; transform: rotate(6deg); border: 1px solid #ffffffb0; box-shadow: 0 7px 0 #d0dacf66; }
.grade-experience .workbench-grade small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; margin-top: 7px; }
.grade-experience .grade-experience-badge-dot { position: absolute; width: 15px; height: 15px; right: 7px; top: 15px; border-radius: 50%; background: #aac9b7; }
.grade-experience .workbench-activity { background: #fff9e9; border-color: #eadcb7; margin: 0 0 18px; padding: 17px 22px; gap: 16px; border-radius: 20px; }
.grade-experience .grade-activity-icon { flex: 0 0 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: #f4df9f; color: #55401d; }
.grade-experience .workbench-activity strong { color: #3f411e; font-size: 1.16rem; margin-bottom: 4px; }
.grade-experience .workbench-activity small { display: block; color: #605a42; font-size: .9rem; line-height: 1.5; }
.grade-experience .workbench-activity > svg:last-child { margin-left: auto; flex-shrink: 0; color: #605126; }
.grade-experience .workbench-actions { margin: 18px 0 20px; gap: 14px; }
.grade-experience .workbench-actions > a { border-radius: 19px; padding: 20px; min-height: 154px; gap: 8px; transition: border-color .16s ease, box-shadow .16s ease; }
.grade-experience .workbench-actions > a:hover { border-color: #83aa94; box-shadow: 0 7px 22px #264e3310; }
.grade-experience .workbench-actions strong { font-size: 1.1rem; line-height: 1.3; color: var(--grade-ink); }
.grade-experience .workbench-actions small { color: var(--grade-muted); font-size: .8rem; line-height: 1.5; }
.grade-experience .workbench-icon { width: 44px; height: 44px; border: 1px solid #ffffffb0; border-radius: 13px; color: #215840; }
.grade-experience .grade-study-tip { display: flex; gap: 13px; align-items: flex-start; border-left: 3px solid #c4d8c9; padding: 6px 16px; margin: 18px 0 34px; color: var(--grade-ink); }
.grade-experience .grade-study-tip-icon { flex: 0 0 28px; margin-top: 1px; color: var(--grade-accent); }
.grade-experience .grade-study-tip strong { font-size: .95rem; line-height: 1.5; }
.grade-experience .grade-study-tip p { margin: 4px 0 0; font-size: .875rem; line-height: 1.65; color: var(--grade-muted); }
.grade-experience .grade-study-tip ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; margin: 0; width: 100%; gap: 12px; }
.grade-experience .grade-study-tip li { display: flex; justify-content: center; align-items: center; gap: 9px; font-size: 1rem; font-weight: 700; }
.grade-experience .workbench-library { margin-top: 28px; }
.grade-experience .workbench-library h2 { margin: 6px 0 18px; font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -.03em; color: var(--grade-ink); }
.grade-experience .workbench-library-heading .section-kicker { color: var(--grade-accent); }
.grade-experience .workbench-search { min-width: min(300px, 100%); border-radius: 14px; }
.grade-experience .workbench-mode { width: fit-content; max-width: 100%; background: #edf3ee; border-radius: 14px; padding: 4px; gap: 4px; }
.grade-experience .workbench-mode button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 46px; background: transparent; border-color: transparent; border-radius: 10px; font-size: .9rem; }
.grade-experience .workbench-mode button[aria-pressed=true] { background: #205d44; color: #fff; border-color: #205d44; }
.grade-experience .workbench-results { margin: 15px 0; }
.grade-experience .workbench-subject { border-radius: 20px; box-shadow: 0 4px 18px #183d2c04; }
.grade-experience .workbench-subject > header { padding: 20px; background: #f8faf7; }
.grade-experience .workbench-subject:nth-child(4n+2) .workbench-subject-icon { background: #f9edd4; color: #775923; }
.grade-experience .workbench-subject:nth-child(4n+3) .workbench-subject-icon { background: #e7edfa; color: #465f8a; }
.grade-experience .workbench-subject:nth-child(4n) .workbench-subject-icon { background: #f0eafa; color: #6f548c; }
.grade-experience .workbench-subject h3 { font-size: 1.15rem; color: var(--grade-ink); }
.grade-experience .workbench-subject-icon { height: 48px; width: 48px; border-radius: 15px; }
.grade-experience .workbench-content-list { padding-left: 20px; padding-right: 20px; }
.grade-experience .workbench-content-list a { min-height: 64px; padding-top: 16px; padding-bottom: 16px; }
.grade-experience .workbench-content-list b { min-height: 24px; }
.grade-experience .workbench-more summary { min-height: 48px; line-height: 1.6; }
.grade-experience .workbench-tools a { border-radius: 17px; }
.grade-experience .workbench-exams { background: #f5f8f4; border-radius: 20px; }
.grade-experience .workbench-exams h2 { color: var(--grade-ink); line-height: 1.4; }
.grade-experience .workbench-exam-grid article { box-shadow: 0 4px 12px #22433103; }
.grade-experience .catalog-detail-hero { background: var(--grade-tint); border-color: var(--grade-line); }
.grade-experience .catalog-detail-hero h1 em { color: var(--grade-accent); }
.grade-experience .catalog-next-step h2 { color: var(--grade-ink); }
.grade-experience .catalog-next-step p { font-size: .95rem; line-height: 1.7; color: var(--grade-muted); max-width: 650px; }
.grade-experience--first-steps .workbench-actions > a, .grade-experience--growing .workbench-actions > a { border-radius: 23px; min-height: 174px; }
.grade-experience--first-steps .workbench-actions strong, .grade-experience--growing .workbench-actions strong { font-size: 1.22rem; }
.grade-experience--first-steps .workbench-icon, .grade-experience--growing .workbench-icon { width: 54px; height: 54px; border-radius: 17px; }
.grade-experience--first-steps .workbench-icon svg, .grade-experience--growing .workbench-icon svg { width: 29px; height: 29px; }
.grade-experience--first-steps .workbench-content-list a, .grade-experience--growing .workbench-content-list a { font-size: 1.06rem; line-height: 1.6; padding-top: 18px; padding-bottom: 18px; }
.grade-experience--first-steps .grade-study-tip, .grade-experience--growing .grade-study-tip { border: 0; padding: 15px 18px; border-radius: 14px; background: #f2f7ef; margin: 20px 0 28px; }
.grade-experience--first-steps .workbench-subject h3, .grade-experience--growing .workbench-subject h3 { font-size: 1.35rem; }
.grade-experience :is(a,button,input,summary):focus-visible { outline: 3px solid #1a674c; outline-offset: 4px; }
@media (max-width: 760px) {
  .grade-experience.workbench-main { padding: 14px 16px 38px; }
  .grade-experience .workbench-heading { padding: 22px; border-radius: 23px; gap: 14px; margin: 16px 0; }
  .grade-experience .workbench-heading > div:first-child { flex: 1 1 auto; }
  .grade-experience .workbench-heading h1 { font-size: 1.2rem; }
  .grade-experience .workbench-heading h1 em { font-size: 1.65rem; }
  .grade-experience .workbench-heading p:not(.section-kicker) { font-size: .9rem; line-height: 1.6; }
  .grade-experience .workbench-heading .section-kicker { font-size: .65rem; letter-spacing: .055em; max-width: 27ch; }
  .grade-experience .grade-experience-badge { flex-basis: 76px; height: 94px; align-self: flex-start; margin-top: 22px; }
  .grade-experience .grade-experience-badge-icon { height: 43px; width: 43px; border-radius: 13px; left: -4px; }
  .grade-experience .grade-experience-badge-icon svg { height: 26px; width: 26px; }
  .grade-experience .workbench-grade { width: 59px; height: 59px; border-radius: 17px; font-size: 27px; }
  .grade-experience .workbench-grade small { font-size: 8px; margin-top: 4px; }
  .grade-experience .grade-experience-badge-dot { height: 9px; width: 9px; right: 0; top: 8px; }
  .grade-experience .workbench-activity { padding: 14px; gap: 12px; border-radius: 18px; }
  .grade-experience .grade-activity-icon { flex-basis: 44px; height: 44px; border-radius: 13px; }
  .grade-experience .grade-activity-icon svg { width: 28px; height: 28px; }
  .grade-experience .workbench-activity strong { font-size: 1.04rem; }
  .grade-experience .workbench-activity small { font-size: .8rem; }
  .grade-experience .workbench-actions { gap: 10px; }
  .grade-experience .workbench-actions > a { padding: 16px; min-height: 157px; gap: 8px; }
  .grade-experience .workbench-actions > a > svg:last-child { width: 16px; top: 17px; right: 14px; }
  .grade-experience .workbench-actions strong { font-size: 1rem; }
  .grade-experience .workbench-actions small { font-size: .76rem; }
  .grade-experience--first-steps .workbench-actions strong, .grade-experience--growing .workbench-actions strong { font-size: 1.12rem; }
  .grade-experience--first-steps .workbench-icon, .grade-experience--growing .workbench-icon { height: 47px; width: 47px; border-radius: 14px; }
  .grade-experience .grade-study-tip { margin: 18px 0 28px; padding-left: 12px; }
  .grade-experience .grade-study-tip p { font-size: .83rem; }
  .grade-experience .workbench-mode { width: 100%; }
  .grade-experience .workbench-mode button { min-width: 0; padding: 11px 8px; font-size: .85rem; }
  .grade-experience .workbench-mode button svg { flex-shrink: 0; width: 17px; }
  .grade-experience .workbench-library h2 { font-size: 1.45rem; }
  .grade-experience .workbench-subject > header { padding: 18px; }
  .grade-experience .workbench-content-list { padding-left: 18px; padding-right: 18px; }
  .grade-experience .workbench-exam-grid article { flex-wrap: wrap; }
  .grade-experience .workbench-exam-grid nav { min-width: 0; }
}
@media (max-width: 420px) {
  .grade-experience .workbench-heading { display: block; padding: 20px 18px; }
  .grade-experience .workbench-heading .section-kicker { max-width: none; padding-right: 65px; }
  .grade-experience .grade-experience-badge { position: absolute; right: 18px; top: 27px; width: 50px; height: 72px; margin: 0; }
  .grade-experience .workbench-heading h1 { margin-top: 14px; }
  .grade-experience .workbench-heading h1 em { margin-top: 18px; }
  .grade-experience .grade-experience-badge-icon { width: 33px; height: 33px; border-radius: 10px; left: -6px; top: -7px; }
  .grade-experience .grade-experience-badge-icon svg { width: 21px; height: 21px; }
  .grade-experience .workbench-grade { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
  .grade-experience .grade-experience-badge-dot { display: none; }
  .grade-experience .workbench-heading h1 em { font-size: 1.52rem; }
  .grade-experience .workbench-heading p:not(.section-kicker) { font-size: .87rem; }
}
@media (prefers-reduced-motion: reduce) {
  .grade-experience .workbench-actions > a { transition: none; }
  .grade-experience { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .grade-experience .workbench-heading, .grade-experience .workbench-activity, .grade-experience .grade-study-tip,
  .grade-experience .workbench-grade, .grade-experience .grade-experience-badge-icon { border: 1px solid CanvasText; }
  .grade-experience .workbench-heading::after, .grade-experience .grade-experience-badge-dot { display: none; }
}
