:root {
  --green: #117b7c;
  --green-dark: #095e62;
  --blue: #247fa7;
  --ink: #283e47;
  --muted: #70797b;
  --line: #dfe5e7;
  --soft: #f4f7f5;
  --mint: #e4f3ef;
  --font: 'DM Sans', sans-serif;
  --display: 'Outfit', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body { margin: 0; background: white; color: var(--ink); font: 14px/1.6 var(--font); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #efb73c; outline-offset: 4px; }
svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.8; }
[hidden] { display: none !important; }
.wrap { width: calc(100% - 64px); max-width: 1200px; margin-inline: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: 0; }
h2 { font: 400 31px/1.4 var(--display); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 9px 23px; min-height: 40px; border-radius: 4px; font-size: 14px; font-weight: 600; transition: background .18s; }
.button svg { width: 17px; height: 17px; }
.button-green { background: var(--green); color: #fff; box-shadow: inset 0 0 0 1px #ffffff20; }
.button-green:hover { background: var(--green-dark); }
.text-button { padding: 5px 0; font-size: 13px; }
.text-button:hover { color: var(--blue); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; }
.site-header { background: white; color: var(--ink); position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 8px #214e4710; }
.header-main { display: flex; align-items: center; justify-content: space-between; gap: 34px; height: 63px; }
.brand { display: inline-flex; align-items: center; font: 700 28px/1 var(--font); white-space: nowrap; }
.brand-symbol { display: flex; margin-right: 6px; }
.brand-symbol svg { width: 29px; height: 29px; stroke-width: 2.5; }
.brand-dot { color: #ea826a; }
.brand-symbol { color: var(--green); }
.search { display: flex; align-items: center; gap: 11px; background: #f4f8f8; border: 1px solid #dce8e8; border-radius: 6px; color: var(--green); width: 430px; height: 37px; padding: 0 10px 0 12px; }
.search input { min-width: 0; flex: 1; width: 100%; border: none; background: none; color: #596660; font-size: 13px; outline: none; }
.search input::placeholder { color: #929a93; }
.search svg { width: 18px; height: 18px; }
.search button { display: flex; color: #8b988a; padding: 0 0 0 9px; border-left: 1px solid var(--line); }
.header-actions { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.profile-button { display: flex; align-items: center; gap: 7px; background: #edf6f4; color: var(--green); padding: 6px 11px; border-radius: 4px; max-width: 170px; }
.profile-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-button:hover { background: #087fa6; color: white; }
.profile-button svg { width: 17px; height: 17px; }
.header-actions .button { min-height: 34px; padding: 6px 15px; background: var(--green); color: white; font-size: 13px; }
.header-actions .button:hover { background: var(--green-dark); }
.menu-button { display: none; }
.nav-band { background: #edf6f4; border-block: 1px solid #dfede9; }
.nav-inner { min-height: 44px; display: flex; justify-content: flex-start; }
.nav-inner nav { display: flex; gap: 45px; }
.nav-link { display: flex; align-items: center; gap: 8px; position: relative; color: #53716a; padding: 10px 0; font: 500 14px/1.4 var(--font); }
.nav-link svg { display: block; width: 16px; height: 16px; }
.nav-link:hover, .nav-link.active { color: var(--green-dark); }
.nav-link.active:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #e89a76; }
.hero { position: relative; isolation: isolate; overflow: hidden; background: #e6f8ec; }
.hero-photo, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-photo { object-fit: cover; object-position: center 43%; }
.hero-shade { background: #f0f8f1e6; z-index: -1; }
.hero-inner { text-align: left; padding: 38px 0 36px; position: relative; }
.hero-kicker { display: flex; align-items: center; gap: 8px; color: #ad653e; font-size: 11px; font-weight: 700; margin-bottom: 13px; }
.hero-kicker svg { color: #cb9550; width: 17px; height: 17px; }
.hero h1 { color: #233f45; font: 600 49px/1.1 var(--display); margin: 0 0 17px; max-width: min(620px, calc(100% - 195px)); }
.hero h1 span { color: var(--green); }
.hero-tagline { font-size: 13px; color: #526a68; line-height: 1.85; margin-bottom: 21px; }
.hero-actions { display: flex; align-items: center; gap: 23px; }
.hero-challenge { display: flex; align-items: center; gap: 6px; color: var(--green-dark); font-size: 12px; padding: 10px 0; }
.hero-challenge svg { color: #c27e3f; width: 17px; height: 17px; }
.hero-note { display: flex; align-items: center; gap: 7px; color: #74847a; font-size: 10px; margin: 17px 0 0; }
.hero-note svg { width: 14px; height: 14px; color: #c67b70; }
.discovery-stamp { position: absolute; right: 8%; top: 80px; width: 188px; aspect-ratio: 1; background: #f9dc75; color: #806327; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; transform: rotate(9deg); border: 8px solid #fff7d9; box-shadow: 0 6px 0 #927b3c14; text-align: center; font: 500 19px/1.3 var(--display); }
.discovery-stamp > svg:first-child { width: 46px; height: 46px; margin-bottom: 9px; }
.discovery-stamp .stamp-star { position: absolute; right: -24px; top: 7px; width: 34px; height: 34px; color: #d18a58; }
.hero-cta { min-width: 214px; }
.directory-section { background-color: #f7faf9; background-image: radial-gradient(#c8ded84a .7px, transparent .7px); background-size: 18px 18px; border-top: 1px solid #e0ebe7; }
.audience-banners { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; padding-top: 29px; }
.audience-banner { display: flex; align-items: center; gap: 18px; text-align: left; padding: 20px; min-height: 139px; border: 1px solid #dfc590; border-radius: 8px; background: #fff4d6; color: #886627; transition: transform .2s, box-shadow .2s; }
.audience-banner.big-ideas { background: #fdebe4; border-color: #f1cbbb; color: #a45f4c; }
.audience-banner.high-school { background: #e7f2f8; border-color: #c5dee9; color: #397e97; }
.audience-banner:hover { transform: translateY(-4px); box-shadow: 0 5px 0 #273d4710; }
.banner-art { display: grid; place-items: center; flex-shrink: 0; width: 49px; height: 49px; color: inherit; }
.banner-art svg { width: 39px; height: 39px; stroke-width: 1.5; }
.audience-banner small { font-size: 9px; font-weight: 700; display: block; margin-bottom: 4px; }
.audience-banner strong { font: 600 23px/1.2 var(--display); display: block; margin-bottom: 6px; }
.audience-banner > span > span { display: block; font-size: 12px; color: #50684b; }
.audience-banner .banner-link { display: flex; align-items: center; gap: 9px; font-size: 12px; margin-top: 6px; color: #3c8240; font-weight: 600; }
.banner-link svg { width: 16px; height: 16px; }
.curriculum { padding-top: 38px; padding-bottom: 35px; min-height: 350px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 12px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0; }
.green { color: var(--green-dark); }
#section-eyebrow { color: #7d9389; }
#section-description { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.section-heading h2 { font-size: 31px; font-weight: 600; margin: 4px 0 0; color: var(--ink); }
.grade-toggle { display: flex; gap: 4px; flex-shrink: 0; }
.grade-toggle button { font-size: 11px; border-radius: 4px; padding: 7px 12px; color: #718175; }
.grade-toggle button.selected { background: #dcedea; color: var(--green-dark); }
.subject-tabs { display: flex; gap: 22px; border-bottom: 1px solid #dde4dd; margin-bottom: 21px; padding-bottom: 11px; overflow-x: auto; scrollbar-width: thin; }
.subject-tab { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; padding: 4px 0; }
.subject-tab svg { width: 15px; height: 15px; }
.subject-tab .chevron { width: 12px; height: 12px; }
.subject-tab.selected { color: var(--green-dark); box-shadow: 0 2px 0 var(--green); }
.subject-tab:hover { color: var(--blue); }
.grade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.grade-card { border: 1px solid #dce7e3; border-top: 3px solid var(--badge-color, #2ea496); border-radius: 8px; padding: 19px 21px 17px; background: white; min-width: 0; position: relative; transition: box-shadow .2s, transform .2s; }
.grade-card:hover { box-shadow: 0 6px 16px #47725612; transform: translateY(-3px); }
.grade-top { display: flex; align-items: center; gap: 12px; margin: 0 0 11px; }
.grade-badge { display: grid; place-items: center; height: 39px; min-width: 39px; padding: 0 5px; border-radius: 8px; background: var(--badge-bg); color: var(--badge-color); font-size: 17px; font-weight: 700; }
.grade-top h3 { color: var(--ink); font: 500 22px/1.3 var(--display); margin: 0; }
.grade-top h3 button { padding: 0; text-align: left; font: inherit; display: flex; align-items: center; gap: 7px; }
.grade-top h3 button:hover { text-decoration: underline; text-underline-offset: 4px; }
.grade-short, .grade-top h3 button svg { display: none; }
.grade-options { display: grid; gap: 10px; margin-top: 22px; }
.grade-options .skill-card { min-height: 70px; padding: 12px 15px; width: 100%; }
.grade-top small { display: block; color: #84928d; font-size: 10px; }
.grade-description { font-size: 12px; line-height: 1.7; min-height: 42px; margin: 0 0 11px; }
.grade-subjects { display: grid; gap: 2px; padding-top: 9px; border-top: 1px solid #e0e5e6; }
.skill-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0; min-height: 25px; font-size: 12px; text-align: left; }
.skill-action { display: flex; align-items: center; gap: 5px; color: #2f97b6; font-size: 11px; }
.skill-action svg { width: 12px; height: 12px; }
.skill-link:hover > span:first-child { color: var(--blue); text-decoration: underline; }
.start-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #edf8f5; border-color: #55afa0; }
.start-card > svg { width: 44px; height: 44px; color: #37a38e; margin-bottom: 13px; stroke-width: 1.4; }
.start-card h3 { font: 400 25px/1.4 var(--display); color: #329786; margin: 0 0 8px; }
.start-card p { font-size: 13px; margin: 0 0 19px; max-width: 270px; }
.start-card button { display: flex; gap: 12px; align-items: center; color: #248d7a; font-size: 13px; padding: 0; }
.start-card button svg { width: 16px; height: 16px; }
.curriculum-footnote { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 11px; color: #819087; margin: 25px 0 0; }
.curriculum-footnote svg { width: 15px; height: 15px; }
.skill-plans-section { background: #fffaf1; text-align: center; padding: 42px 0; border-block: 1px solid #f1e7d4; }
.skill-plans-section h2 { color: var(--blue); margin-bottom: 9px; }
.skill-plans-section > .wrap > p { font-size: 13px; margin-bottom: 27px; }
.plan-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 25px; max-width: 1040px; margin: 0 auto 32px; }
.book-card { background: white; border-radius: 6px; padding: 12px 11px 11px; box-shadow: 0 3px 12px #51859515; font-size: 11px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; transition: transform .2s; }
.book-card:hover { transform: translateY(-5px); }
.book-cover { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; aspect-ratio: 3/4; background: var(--cover-color); color: white; border-left: 5px solid #00000014; box-shadow: 2px 2px 0 #00000012; }
.cover-green { --cover-color: #69a13b; }.cover-blue { --cover-color: #3e98c0; }.cover-orange { --cover-color: #d58d39; }.cover-teal { --cover-color: #35a399; }.cover-berry { --cover-color: #a76d92; }.cover-yellow { --cover-color: #c49e31; }
.book-cover > svg { width: 29px; height: 29px; stroke-width: 1.5; }
.book-cover strong { font: 500 19px/1.25 var(--display); }
.book-cover small { font-size: 6px; border-top: 1px solid #ffffff6b; padding-top: 7px; }
.support-section { background: #eff6f4; color: var(--ink); text-align: center; padding: 42px 0; }
.support-section h2 { margin-bottom: 9px; font-size: 31px; }
.section-intro { font: 400 19px/1.5 var(--display); margin-bottom: 27px; }
.support-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.support-card { background: transparent; color: var(--ink); padding: 22px 20px 18px; border-right: 1px solid #d2e4df; display: flex; flex-direction: column; align-items: center; }
.support-card:last-child { border-right: none; }
.support-card > svg { width: 55px; height: 55px; border: 2px solid var(--feature-color); color: var(--feature-color); border-radius: 50%; padding: 10px; margin-bottom: 17px; }
.support-card h3 { font: 500 24px/1.35 var(--display); color: var(--feature-color); margin: 0 0 13px; }
.support-card p { font-size: 13px; margin: 0 0 20px; line-height: 1.7; }
.support-card button { margin-top: auto; padding: 5px 0; color: var(--feature-color); font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.support-card button svg { width: 13px; height: 13px; }
.support-card button:hover { text-decoration: underline; }
.audience-section { border-top: 1px solid #cfe3dc; margin: 33px auto 0; padding-top: 27px; }
.audience-section > h2 { font-size: 27px; }
.audience-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; margin-top: 26px; }
.audience-options article > svg { width: 33px; height: 33px; margin-bottom: 8px; stroke-width: 1.5; }
.audience-options h3 { font: 400 18px/1.4 var(--display); margin-bottom: 8px; }
.audience-options p { font-size: 12px; color: #6d847d; margin-bottom: 15px; }
.audience-options button { display: inline-flex; align-items: center; gap: 15px; border: 1px solid #b4d4c9; padding: 7px 15px; font-size: 12px; border-radius: 4px; color: var(--green-dark); }
.audience-options button svg { width: 14px; height: 14px; }
.audience-options button:hover { background: #ffffff18; }
.learning-belief { position: relative; isolation: isolate; text-align: center; background: url('https://images.unsplash.com/photo-1588072432836-e10032774350?auto=format&fit=crop&w=1800&q=80') center 43% / cover; padding: 45px 0; }
.learning-belief::before { content: ''; position: absolute; inset: 0; background: #fffffff0; z-index: -1; }
.learning-belief .eyebrow { color: #85977d; }
.learning-belief h2 { color: var(--blue); font-size: 28px; margin: 9px 0 13px; }
.learning-belief p { font-size: 14px; line-height: 1.8; }
.learning-belief button { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); }
.learning-belief button svg { width: 15px; height: 15px; }
footer { background: white; }
.footer-main { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr .8fr; gap: 35px; padding-block: 42px; }
.footer-brand .brand { color: var(--green); font-size: 26px; }
.footer-brand .brand-dot { color: #e9b54d; }
.footer-brand p { font-size: 12px; line-height: 1.75; margin: 17px 0; }
.footer-brand .button { font-size: 12px; padding: 7px 16px; min-height: 35px; }
.footer-brand .footer-note { border-top: 1px solid var(--line); padding-top: 15px; color: #7b847f; font-size: 11px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; }
.footer-column h3 { color: var(--blue); font-size: 14px; font-weight: 650; margin: 0 0 12px; }
.footer-column button, .footer-column a { font-size: 12px; padding: 3px 0; text-align: left; }
.footer-column button:hover, .footer-column a:hover { color: var(--blue); text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 17px; color: #8b9691; font-size: 10px; }
.filter-status { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 10px 15px; background: #e8efdf; border-radius: 4px; margin-bottom: 20px; font-size: 12px; }
.filter-status button { font-size: 11px; text-decoration: underline; color: var(--green-dark); flex-shrink: 0; }
.skills-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.skill-card { border: 1px solid var(--line); border-radius: 5px; background: white; padding: 22px; min-height: 105px; display: flex; align-items: center; gap: 13px; text-align: left; }
.skill-card:hover { border-color: var(--blue); }
.skill-card > svg:last-child { margin-left: auto; width: 15px; }
.skill-card strong { display: block; font-size: 13px; }
.skill-card small { font-size: 10px; color: var(--muted); }
.empty-state { text-align: center; padding: 45px 15px; color: var(--muted); }
.empty-state > svg { width: 36px; height: 36px; color: var(--green); }
.empty-state h3 { color: var(--ink); }
.progress-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.progress-stats strong { display: block; font-size: 35px; color: var(--green); font-weight: 600; }
.progress-stats span { color: var(--muted); font-size: 12px; }
.history-row { display: flex; justify-content: space-between; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.history-row small { display: block; color: var(--muted); font-size: 11px; }
.score { color: var(--green-dark); white-space: nowrap; }
.plan-intro { margin: 0 0 25px; color: var(--muted); font-size: 13px; }
.plan-select { padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--ink); margin: 0 0 22px 8px; min-width: 200px; }
.plan-card { background: white; border: 1px solid var(--line); border-radius: 5px; padding: 22px; }
.plan-card h3 { font: 500 18px/1.5 var(--display); margin: 12px 0 4px; }
.plan-card p { color: var(--muted); font-size: 12px; min-height: 39px; }
.plan-card .button { font-size: 11px; padding: 10px 16px; min-height: 38px; }
.plan-step { color: #829084; font-size: 10px; font-weight: 700; }
dialog { border: 0; border-radius: 8px; width: min(520px, calc(100% - 32px)); padding: 38px; color: var(--ink); box-shadow: 0 25px 90px #0d352b30; max-height: 90dvh; overflow-y: auto; }
dialog::backdrop { background: #193f3bcc; backdrop-filter: blur(3px); }
.close-button { position: absolute; right: 12px; top: 12px; color: var(--muted); }
.close-button:hover { background: var(--soft); border-radius: 4px; }
dialog h2 { font-size: 26px; margin: 10px 0; color: var(--blue); }
dialog p { color: var(--muted); font-size: 13px; }
.modal-symbol { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 8px; background: var(--mint); color: var(--green); margin-bottom: 20px; }
.modal-form { display: grid; gap: 9px; margin-top: 23px; }
.modal-form label { font-size: 12px; font-weight: 600; }
.modal-form input, .modal-form select { border: 1px solid #cfdad1; background: white; color: var(--ink); border-radius: 4px; padding: 12px; width: 100%; margin-bottom: 8px; }
.modal-form .button { margin-top: 8px; }
.privacy-note { font-size: 10px !important; margin-bottom: 0; }
.quiz-meta { font-size: 10px; color: var(--green-dark); font-weight: 600; margin-top: 7px; }
.quiz-progress { height: 5px; border-radius: 5px; background: var(--mint); margin: 21px 0; }
.quiz-progress span { display: block; height: 100%; background: var(--green); border-radius: 5px; }
.quiz-question { font-size: 21px; line-height: 1.6; margin: 20px 0; font-weight: 500; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answer { border: 1px solid #d9e2dc; border-radius: 5px; padding: 15px; min-height: 58px; font-size: 14px; }
.answer:hover:not(:disabled) { border-color: var(--green); background: var(--soft); }
.answer.correct { background: #e9f5e9; border-color: #78af7e; color: #2d6b37; }
.answer.incorrect { background: #fff0ea; border-color: #d59a82; color: #a55938; }
.answer:disabled { cursor: default; }
.feedback { font-size: 12px; padding: 15px; background: var(--soft); border-radius: 5px; margin: 18px 0; }
.feedback strong { display: block; margin-bottom: 4px; }
.quiz-next { width: 100%; margin-top: 18px; }
.result { text-align: center; }
.result .modal-symbol { margin: 0 auto 18px; width: 65px; height: 65px; }
.result-score { font-size: 51px; color: var(--green); font-weight: 600; margin: 15px 0; }
.result .button { width: 100%; margin-top: 13px; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: var(--green-dark); color: white; border-radius: 6px; padding: 13px 24px; z-index: 20; font-size: 12px; max-width: 90%; box-shadow: 0 4px 20px #0002; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 30; background: white; padding: 12px; }
.skip-link:focus { top: 12px; }
@keyframes welcome-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rocket-drift { 0%, 100% { transform: translateY(0) rotate(9deg); } 50% { transform: translateY(-8px) rotate(5deg); } }
@keyframes answer-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.025); } 100% { transform: scale(1); } }
.hero-kicker, .hero h1, .hero-tagline, .hero-actions { animation: welcome-in .65s both; }
.hero h1 { animation-delay: .08s; }.hero-tagline { animation-delay: .16s; }.hero-actions { animation-delay: .24s; }
.discovery-stamp { animation: rocket-drift 2.2s ease-in-out 2; }
.grade-card { animation: welcome-in .4s backwards; }
.answer.correct, .result .modal-symbol { animation: answer-pop .4s ease-out; }
.quiz-progress span { transition: width .35s ease; }
.button svg, .banner-link svg { transition: transform .2s; }
.button:hover svg, .audience-banner:hover .banner-link svg { transform: translateX(3px); }
@media (max-width: 1100px) {
  .header-main { gap: 22px; }.brand { font-size: 25px; }.search { width: 360px; }
  .audience-banner { padding: 18px; gap: 16px; }.banner-art { width: 58px; height: 65px; }.banner-art svg { width: 38px; height: 38px; }.audience-banner strong { font-size: 19px; }
  .grade-top h3 { font-size: 22px; }.grade-description { min-height: 62px; }.plan-shelf { gap: 17px; }.book-cover strong { font-size: 16px; }
  .support-card { padding-inline: 15px; }.support-card h3 { font-size: 21px; }.footer-main { gap: 22px; }
}
@media (max-width: 850px) {
  .wrap { width: calc(100% - 40px); }.header-main { gap: 15px; }.brand { font-size: 23px; }.brand-symbol svg { width: 25px; height: 25px; }.search { width: 280px; }.profile-button span { display: none; }.profile-button { padding: 8px; }.header-actions { gap: 8px; }.header-actions .button { padding-inline: 10px; font-size: 11px; }
  .hero h1 { font-size: 39px; }.discovery-stamp { right: 2%; width: 148px; top: 75px; font-size: 16px; }.discovery-stamp > svg:first-child { width: 36px; height: 36px; }.hero-tagline { max-width: calc(100% - 185px); }
  .audience-banner { gap: 13px; }.banner-art { width: 44px; height: 55px; }.banner-art svg { width: 30px; height: 30px; }.audience-banner strong { font-size: 17px; }.audience-banner > span > span { font-size: 10px; }
  .grade-grid { gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.grade-description { min-height: 42px; }.plan-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 570px; gap: 20px; }.book-cover { aspect-ratio: 4/3; }.book-cover strong { font-size: 20px; }.book-cover small { display: none; }
  .support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }.support-card p { max-width: 260px; }.audience-options { gap: 20px; }.audience-options h3 { font-size: 16px; }
  .footer-main { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }.footer-brand { grid-column: 1 / -1; max-width: 550px; }.footer-brand .footer-note { display: none; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 124px; }.wrap { width: calc(100% - 32px); }.header-main { height: auto; padding-block: 13px 11px; flex-wrap: wrap; gap: 11px; }.header-main > .brand { font-size: 23px; }.header-actions { margin-left: auto; gap: 7px; }.header-actions .button { font-size: 11px; min-height: 30px; padding: 5px 10px; }.profile-button { display: none; }.menu-button { display: grid; color: #fff; width: 27px; height: 28px; }.menu-button svg { width: 25px; height: 25px; }
  .search { order: 3; width: 100%; height: 32px; }.search input { font-size: 11px; }.nav-band { display: none; border-top: 1px solid #ffffff30; }.site-header.menu-open .nav-band { display: block; }.nav-inner nav { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-block: 6px; }.nav-link { padding: 10px 8px; font-size: 16px; }.nav-link svg { display: block; width: 17px; height: 17px; }.nav-link.active:after { display: none; }
  .hero-inner { padding: 29px 0; }.hero h1 { font-size: 37px; max-width: 100%; }.hero-kicker { font-size: 9px; }.hero-tagline { font-size: 12px; max-width: 320px; margin: 0 0 19px; }.hero-tagline br { display: none; }.hero-cta { min-height: 43px; min-width: 0; font-size: 12px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 7px; }.hero-challenge { font-size: 11px; }.hero-note { font-size: 9px; margin-top: 10px; }.hero-shade { background: #f0f8f1eb; }.discovery-stamp { display: none; }.menu-button { color: var(--green); }
  .audience-banners { gap: 12px; padding-top: 20px; grid-template-columns: 1fr; }.audience-banner { min-height: 91px; gap: 20px; padding: 13px 20px; }.banner-art { width: 50px; height: 54px; }.audience-banner strong { font-size: 18px; }.audience-banner > span > span { font-size: 10px; }.audience-banner .banner-link { font-size: 10px; margin-top: 4px; }
  .curriculum { padding-top: 24px; padding-bottom: 27px; }.section-heading { display: block; margin-bottom: 10px; }.section-heading h2 { font-size: 23px; margin-bottom: 12px; }.grade-toggle { gap: 5px; }.grade-toggle button { padding: 6px 10px; font-size: 10px; }.subject-tabs { gap: 19px; margin-bottom: 19px; }.subject-tab { font-size: 11px; padding-block: 6px; }.subject-tab .chevron { display: none; }
  .grade-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.grade-card { padding: 12px 9px; }.grade-top { margin: 0; gap: 7px; }.grade-badge { height: 29px; min-width: 27px; font-size: 13px; border-radius: 6px; }.grade-top > div { min-width: 0; flex: 1; }.grade-top h3 { font-size: 16px; }.grade-top small { font-size: 8px; margin-top: 3px; }.grade-top h3 button { width: 100%; justify-content: space-between; gap: 3px; }.grade-top h3 button::after { content: ''; position: absolute; inset: 0; }.grade-name { display: none; }.grade-short { display: inline; }.grade-top h3 button svg { display: block; width: 11px; height: 11px; }.grade-description, .grade-card > .grade-subjects { display: none; }.start-card { grid-column: 1 / -1; padding: 18px; }.start-card > svg { width: 28px; height: 28px; margin-bottom: 9px; }.start-card h3 { font-size: 21px; }.start-card p { font-size: 11px; margin-bottom: 10px; }.curriculum-footnote { font-size: 10px; align-items: flex-start; }.curriculum-footnote svg { margin-top: 2px; }
  .skill-plans-section { padding-block: 29px; }.skill-plans-section h2 { font-size: 26px; }.skill-plans-section > .wrap > p { font-size: 12px; }.plan-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-bottom: 25px; }.book-cover { aspect-ratio: 1; gap: 10px; }.book-cover strong { font-size: 21px; }.book-cover > svg { width: 26px; height: 26px; }.book-card { font-size: 10px; }
  .support-section { padding-block: 29px; }.support-section h2 { font-size: 26px; }.section-intro { font-size: 16px; }.support-grid { gap: 12px; }.support-card { padding: 17px 12px 14px; }.support-card > svg { width: 45px; height: 45px; padding: 8px; margin-bottom: 13px; }.support-card h3 { font-size: 19px; }.support-card p { font-size: 11px; }.support-card button { font-size: 10px; gap: 0; }.support-card button svg { width: 11px; }.support-section > .wrap > .button { font-size: 12px; }
  .audience-options { grid-template-columns: 1fr; gap: 25px; margin-top: 24px; }.audience-options h3 { font-size: 20px; }.audience-options article > svg { width: 30px; height: 30px; }.audience-options p { margin-bottom: 10px; }.audience-section > h2 { font-size: 25px; }
  .learning-belief { padding-block: 33px; }.learning-belief h2 { font-size: 25px; }.learning-belief p { font-size: 12px; }.learning-belief p br { display: none; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 28px 18px; padding-block: 30px; }.footer-brand p { max-width: 320px; }.footer-column h3 { font-size: 13px; }.footer-column button, .footer-column a { font-size: 12px; padding-block: 5px; }.footer-bottom { font-size: 9px; gap: 20px; }
  .skills-grid { grid-template-columns: 1fr; }.skill-card { padding: 17px; min-height: 88px; }.progress-stats { gap: 12px; }.progress-stats strong { font-size: 29px; }.progress-stats span { font-size: 10px; }.history-row { font-size: 12px; }.filter-status { font-size: 11px; }.plan-select { min-width: 175px; margin-left: 5px; }
  dialog { padding: 32px 22px; }dialog h2 { font-size: 23px; }.quiz-question { font-size: 20px; }.answer { padding: 12px; font-size: 13px; }.toast { width: max-content; text-align: center; }
}
@media (max-width: 360px) { .header-main > .brand { font-size: 20px; }.brand-symbol svg { width: 23px; height: 23px; }.header-actions { gap: 4px; }.header-actions .button { padding-inline: 7px; font-size: 10px; }.hero h1 { font-size: 32px; }.grade-top h3 { font-size: 14px; }.support-grid { grid-template-columns: 1fr; }.support-card { border-right: 0; }.support-card h3 br { display: none; }.support-card p { font-size: 12px; }.support-card button { font-size: 12px; } }
.hero h1 { font-weight: 700; }
.hero-shade { background: linear-gradient(90deg,#eff9f4f5 0%,#eff9f4ed 45%,#eff9f466 100%); }
.discovery-stamp { background: #ffdf71; border-color: #fff7d6; }
.quick-quest { display: flex; align-items: center; gap: 21px; padding-block: 29px 26px; border-bottom: 1px dashed #c2d8d0; }
.quest-emblem { flex-shrink: 0; width: 65px; height: 65px; display: grid; place-items: center; background: #ffdf81; color: #866125; border-radius: 50%; box-shadow: 0 4px 0 #ebc666; }
.quest-emblem svg { width: 31px; height: 31px; }
.quest-copy .eyebrow { color: #73877d; font-size: 9px; }
.quest-copy h2 { font-size: 25px; font-weight: 600; margin: 2px 0; }
.quest-copy p { color: #78847d; font-size: 12px; margin: 0; }
.quest-form { margin-left: auto; display: grid; grid-template-columns: 170px auto; gap: 5px 12px; align-items: center; }
.quest-form label { font-size: 11px; font-weight: 600; grid-column: 1 / -1; }
.quest-form select { min-width: 0; border: 1px solid #bed6cf; background: white; border-radius: 6px; color: var(--ink); padding: 11px; min-height: 45px; }
.quest-form .button { min-height: 45px; }
.audience-banner { border-bottom-width: 4px; }
.audience-banner .banner-art { width: 57px; height: 65px; }
.audience-banner .banner-art svg { width: 47px; height: 47px; }
.section-heading { margin-bottom: 24px; }
.subject-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; overflow: visible; border: 0; padding: 0; margin-bottom: 28px; }
.subject-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 17px 18px; min-height: 155px; background: var(--subject-bg); border: 2px solid transparent; border-bottom: 4px solid color-mix(in srgb,var(--subject-color) 30%,white); border-radius: 8px; white-space: normal; text-align: left; color: var(--subject-color); transition: transform .2s, border-color .2s; }
.subject-tab:hover { transform: translateY(-4px); color: var(--subject-color); }
.subject-tab.selected { border-color: var(--subject-color); box-shadow: none; }
.subject-picture { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 5px; }
.subject-picture svg { width: 35px; height: 35px; stroke-width: 1.7; }
.subject-tab strong { font: 600 19px/1.2 var(--display); }
.subject-tab small { font-size: 11px; color: #586f70; }
.subject-selection { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--subject-color) 35%,transparent); border-radius: 50%; width: 22px; height: 22px; }
.subject-selection svg { width: 12px; height: 12px; }
.subject-tab.selected .subject-selection { background: var(--subject-color); color: white; }
.grade-card { border-top-width: 1px; border-bottom: 4px solid var(--badge-color,#53a896); }
.grade-top { padding-bottom: 12px; border-bottom: 1px dashed #dfe7e2; }
.grade-badge { width: 47px; height: 47px; font-size: 23px; }
.grade-description { font-size: 13px; }
.grade-subjects { border: 0; gap: 3px; }
.skill-link { min-height: 36px; font-size: 13px; border-radius: 4px; padding-inline: 5px; }
.skill-link:hover { background: var(--badge-bg); }
.grade-toggle { background: white; padding: 4px; border: 1px solid #d7e4de; border-radius: 6px; }
.grade-toggle button { min-height: 39px; }
.book-cover { border-radius: 4px; }
dialog { border-top: 5px solid #efc461; }
.quest-trail { display: flex; list-style: none; padding: 0; margin: 20px 0 27px; justify-content: space-around; position: relative; }
.quest-trail::before { content: ''; position: absolute; left: 16%; right: 16%; top: 17px; border-top: 2px dashed #d7e5de; }
.quest-trail li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.quest-trail li > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #edf2ef; border: 2px solid white; color: #768a80; font-weight: 600; }
.quest-trail .done > span { background: var(--green); color: white; }
.quest-trail .current > span { background: #ffe394; color: #6b5322; box-shadow: 0 0 0 3px #fff4d6; }
.quest-trail small { font-size: 10px; color: #62796e; }
.quest-trail svg { width: 17px; height: 17px; }
.answer { display: flex; align-items: center; text-align: left; gap: 10px; border-width: 2px; min-height: 68px; font-size: 16px; }
.answer-letter { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; background: #eef5f2; color: var(--green-dark); border-radius: 5px; font-size: 12px; font-weight: 700; }
.answer-letter svg { width: 15px; height: 15px; }
.feedback { display: flex; align-items: flex-start; gap: 12px; background: #fff6df; border-left: 3px solid #e4b658; font-size: 13px; }
.feedback > svg { color: #ad822f; margin-top: 2px; }
.feedback-correct { background: #eaf6ee; border-color: #58a374; }
.feedback-correct > svg { color: var(--green); }
@media (max-width: 1000px) {
  .quick-quest { gap: 14px; }.quest-emblem { width: 50px; height: 50px; }.quest-copy h2 { font-size: 22px; }.quest-form { grid-template-columns: 145px auto; gap: 5px 8px; }.quest-form .button { padding-inline: 13px; font-size: 12px; }
  .subject-tabs { gap: 10px; }.subject-tab { padding: 14px 12px; }.subject-tab strong { font-size: 17px; }.subject-tab small { font-size: 10px; }
}
@media (max-width: 700px) {
  .quick-quest { flex-wrap: wrap; padding-block: 23px; }.quest-form { flex-basis: 100%; margin: 0; grid-template-columns: 1fr 1fr; }.quest-form label { grid-column: 1; }.quest-form .button { grid-column: 2; grid-row: 2; }.quest-form select { width: 100%; }
  .subject-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }.subject-tab { min-height: 139px; }.subject-picture svg { width: 29px; height: 29px; }
}
@media (max-width: 600px) {
  .hero-shade { background: #eff9f4e6; }.section-heading { margin-bottom: 18px; }.section-heading h2 { font-size: 28px; margin-bottom: 8px; }#section-description { margin-bottom: 16px; }.grade-toggle { justify-content: space-between; }.grade-toggle button { font-size: 11px; padding-inline: 8px; }
  .subject-tabs { gap: 9px; margin-bottom: 21px; }.subject-tab { padding: 12px 9px; min-height: 139px; justify-content: flex-start; }.subject-tab strong { font-size: 16px; }.subject-tab small { font-size: 10px; line-height: 1.5; }.subject-picture { width: 33px; height: 35px; margin-bottom: 4px; }.subject-selection { width: 18px; height: 18px; right: 7px; top: 7px; }.subject-selection svg { width: 10px; height: 10px; }
  .grade-top { padding-bottom: 0; border: 0; }.grade-badge { width: 30px; height: 35px; font-size: 16px; }.grade-card { min-height: 83px; display: flex; align-items: center; }.grade-top { width: 100%; }.grade-top small { font-size: 10px; }.grade-top h3 { font-size: 16px; }.start-card { align-items: flex-start; }
  .answers { gap: 10px; }.answer { font-size: 15px; padding: 11px; }.answer-letter { width: 23px; height: 23px; }.quest-form select { font-size: 13px; }.quest-copy h2 { font-size: 24px; }
}
@media (max-width: 360px) {
  .subject-tab strong { font-size: 14px; }.subject-tab { min-height: 145px; }.grade-top h3 { font-size: 14px; }.grade-badge { width: 25px; min-width: 25px; }.quest-emblem { width: 43px; height: 43px; }.quest-copy h2 { font-size: 22px; }.quest-copy .eyebrow { font-size: 8px; }.quest-form .button { gap: 6px; padding-inline: 9px; }
}
.learning-belief a.text-button { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); }
.info-page .header-main { flex-wrap: nowrap; min-height: 76px; }
.info-page .header-main > .button { font-size: 13px; white-space: nowrap; }
.page-nav { display: flex; flex-wrap: wrap; gap: 8px 30px; padding-block: 4px 12px; }
.page-nav a { padding: 8px 0; font-size: 13px; color: #60746e; }
.page-nav a[aria-current] { color: var(--green-dark); box-shadow: 0 3px 0 #edbf69; font-weight: 600; }
.page-nav a:hover, .info-footer a:hover { color: var(--green); }
.info-heading { background-color: #eef7f3; background-image: radial-gradient(#b4d7c955 .8px,transparent .8px); background-size: 20px 20px; border-bottom: 1px solid #dcece5; padding-block: 24px 38px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #627c70; width: fit-content; margin-bottom: 26px; }
.breadcrumb svg { width: 15px; height: 15px; }
.info-heading .eyebrow { display: block; }
.info-heading h1 { font: 600 43px/1.2 var(--display); margin: 9px 0 13px; color: var(--green-dark); }
.info-heading p { max-width: 650px; font-size: 16px; margin-bottom: 0; color: #5e766d; }
.info-heading small { display: block; color: #6f8178; margin-top: 18px; font-size: 11px; }
.info-page h2 { font-size: 29px; font-weight: 500; }
.info-page h3 { font: 500 21px/1.3 var(--display); margin: 0 0 10px; }
.info-page p { line-height: 1.85; }
.about-story { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 65px; padding-block: 48px; }
.about-story h2 { margin: 8px 0 17px; }
.about-story p { color: #64766c; }
.about-story figure { margin: 0; }
.about-story img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 7px; }
.about-story figcaption { padding-top: 10px; color: #829083; font-size: 11px; }
.about-values { background: #f8faf4; border-block: 1px solid #e9eddf; padding-block: 38px; }
.value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.value-grid p { margin: 0; color: #64766c; font-size: 14px; }
.value-icon { display: grid; place-items: center; width: 43px; height: 43px; color: #85682c; background: #ffedbd; border-radius: 8px; margin: 5px 0 19px; }
.value-grid article:nth-child(2) .value-icon { color: #a66a58; background: #fbe8df; }
.value-grid article:nth-child(3) .value-icon { color: #398399; background: #e4f2f6; }
.info-section { padding-block: 42px; }
.preview-note { display: flex; align-items: flex-start; gap: 15px; border-block: 1px solid var(--line); padding-block: 26px; }
.preview-note > svg { margin-top: 6px; color: var(--green); }
.preview-note h2 { font-size: 21px; margin: 0 0 8px; }
.preview-note p { max-width: 850px; color: #6e7d73; font-size: 13px; margin: 0; }
.page-cta { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-block: 40px; }
.page-cta h2 { margin: 0 0 7px; }
.page-cta p { color: #6d7e73; margin: 0; }
.page-cta .button { flex-shrink: 0; }
.info-footer { border-top: 1px solid var(--line); padding-block: 30px; }
.info-footer > .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; }
.info-footer .brand { font-size: 24px; color: var(--green); }
.info-footer nav { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-left: auto; font-size: 12px; }
.info-footer nav a[aria-current] { color: var(--green-dark); font-weight: 700; }
.info-footer p { flex-basis: 100%; font-size: 10px; color: #87958c; margin: 0; }
.reading-layout { display: grid; grid-template-columns: 200px minmax(0,760px); gap: 65px; align-items: start; padding-block: 40px 55px; }
.contents-nav { display: flex; flex-direction: column; gap: 5px; position: sticky; top: 155px; font-size: 13px; }
.contents-nav strong { color: var(--green-dark); margin-bottom: 10px; }
.contents-nav a { padding-block: 7px; color: #6c8076; }
.contents-nav a:hover { color: var(--green); }
.reading-content section + section { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 30px; }
.reading-content h2 { font-size: 26px; margin-bottom: 15px; }
.reading-content p, .reading-content li { font-size: 14px; color: #5d6e64; }
.reading-content li { padding: 5px 0; line-height: 1.8; }
.reading-content a:not(.button), .faq-section a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.privacy-facts { margin: 20px 0; }
.privacy-facts > div { padding: 16px 0; border-top: 1px dashed #d9e3dc; }
.privacy-facts dt { font-weight: 600; color: #496759; margin-bottom: 5px; }
.privacy-facts dd { margin: 0; font-size: 14px; color: #5d6e64; line-height: 1.8; }
.privacy-facts code { font-size: 12px; overflow-wrap: anywhere; }
.getting-steps { display: grid; gap: 24px; list-style: none; margin: 25px 0 30px; padding: 0; max-width: 830px; }
.getting-steps li { display: flex; gap: 22px; }
.step-number { display: grid; place-items: center; width: 43px; height: 43px; flex-shrink: 0; border-radius: 50%; background: #ffedbd; color: #85682c; font: 600 22px var(--display); }
.getting-steps li:nth-child(2) .step-number { background: #fbe8df; color: #a66a58; }
.getting-steps li:nth-child(3) .step-number { background: #e4f2f6; color: #398399; }
.getting-steps h3 { margin-bottom: 6px; }
.getting-steps p { margin: 0; color: #63746a; }
.faq-section { max-width: 900px; padding-top: 40px; }
.faq-section h2 { margin: 8px 0 22px; }
.faq-section details { border-bottom: 1px solid var(--line); padding-block: 4px; }
.faq-section summary { cursor: pointer; padding: 15px 0; font-size: 15px; font-weight: 500; }
.faq-section summary::marker { color: var(--green); }
.faq-section summary:focus-visible { outline: 3px solid #efb73c; outline-offset: 3px; }
.faq-section details p { margin: 0 0 18px; color: #65766c; padding-right: 16px; }
@media (max-width: 850px) {
  .about-story { gap: 30px; }.value-grid { gap: 24px; }.reading-layout { grid-template-columns: 160px minmax(0,1fr); gap: 30px; }.page-cta h2 { font-size: 25px; }
}
@media (max-width: 600px) {
  .info-page .site-header { position: relative; }.info-page .header-main { min-height: 68px; gap: 12px; }.info-page .header-main > .button { font-size: 11px; padding: 9px 12px; gap: 6px; }.info-page .header-main > .button svg { width: 14px; }
  .page-nav { gap: 4px 17px; padding-bottom: 12px; }.page-nav a { font-size: 12px; padding-block: 9px; }.info-heading { padding-block: 19px 28px; }.info-heading h1 { font-size: 34px; }.info-heading p { font-size: 14px; }.breadcrumb { margin-bottom: 21px; }
  .about-story { grid-template-columns: 1fr; padding-block: 30px; gap: 20px; }.info-page h2 { font-size: 25px; }.info-page h3 { font-size: 20px; }.value-grid { grid-template-columns: 1fr; gap: 28px; }.about-values { padding-block: 30px; }.info-section { padding-block: 30px; }
  .preview-note { gap: 10px; }.preview-note h2 { font-size: 21px; }.page-cta { flex-direction: column; align-items: flex-start; padding-block: 30px; gap: 18px; }.info-footer nav { margin: 0; flex-basis: 100%; gap: 12px 20px; }
  .reading-layout { grid-template-columns: 1fr; padding-block: 26px 35px; gap: 28px; }.contents-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 5px 20px; border-bottom: 1px solid var(--line); padding-bottom: 19px; }.contents-nav strong { flex-basis: 100%; margin-bottom: 3px; }.reading-content section { scroll-margin-top: 20px; }
  .getting-steps li { gap: 14px; }.step-number { width: 35px; height: 35px; font-size: 19px; }.faq-section { padding-top: 30px; }.faq-section summary { font-size: 14px; }.faq-section details p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*, *::before, *::after { animation: none !important; transition: none !important; } }