body.gge-site { margin: 0; background: #faf9f3; color: #163e36; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif; line-height: 1.8; }
body.gge-site *, body.gge-site *::before, body.gge-site *::after { box-sizing: border-box; }
body.gge-site a { color: #315f44; text-underline-offset: 4px; }
body.gge-site .gge-skip { position: absolute; left: 15px; top: -100px; z-index: 1000000; padding: 12px 20px; background: #d6ef75; color: #163e36; border-radius: 8px; font-weight: 700; }
body.gge-site .gge-skip:focus { top: 15px; }
body.gge-site .gge-shell-header { max-width: 1200px; margin: 0 auto; padding: 22px 32px; border-bottom: 1px solid #e3e8dc; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
body.gge-site .gge-shell-header .gge-brand { font-size: 23px; font-weight: 800; color: #163e36; text-decoration: none; }
body.gge-site .gge-shell-header .gge-brand > span { font-size: 15px; color: #71824f; margin-left: 7px; }
body.gge-site .gge-shell-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 13px; }
body.gge-site .gge-shell-header nav a { text-decoration: none; }
body.gge-site .gge-shell-header nav a:hover { text-decoration: underline; }
body.gge-site > #gge-main { max-width: 1280px; margin: 24px auto; padding: 0 24px; }
body.gge-site .gge-info-page { max-width: 820px; margin: 36px auto; border: 1px solid #e3e8dc; border-radius: 18px; background: #fff; padding: 42px 48px; font-size: 15px; }
body.gge-site .gge-info-page > h1 { font-size: 32px; line-height: 1.4; letter-spacing: -.045em; margin: 0 0 26px; }
body.gge-site .gge-info-page h2 { font-size: 22px; line-height: 1.5; letter-spacing: -.035em; margin: 35px 0 16px; }
body.gge-site .gge-info-page h3 { font-size: 18px; margin: 25px 0 12px; }
body.gge-site .gge-info-page p { margin: 0 0 18px; }
body.gge-site .gge-info-page li { margin-bottom: 11px; }
body.gge-site .gge-info-page ul, body.gge-site .gge-info-page ol { padding-left: 23px; margin: 18px 0 25px; }
body.gge-site .ge-lead { font-size: 17px; line-height: 1.9; color: #506845; }
body.gge-site .ge-updated { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e3e8dc; color: #738167; font-size: 12px; }
body.gge-site .ge-example { padding: 20px 23px; border-radius: 11px; background: #f2f6e7; border: 1px solid #e2e9d5; margin: 23px 0; }
body.gge-site .gge-shell-footer { max-width: 1200px; margin: 35px auto 0; padding: 27px 32px; border-top: 1px solid #e3e8dc; color: #6c7b64; font-size: 12px; }
body.gge-site .gge-shell-footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 13px 0; }
body.gge-site .gge-shell-footer nav a { color: #526a45; }
body.gge-site.gge-app-ready > .gge-shell-header, body.gge-site.gge-app-ready > .gge-shell-footer { display: none; }
body.gge-site.gge-app-ready > #gge-main { margin: 24px auto; }
@media (max-width: 600px) {
  body.gge-site > #gge-main, body.gge-site.gge-app-ready > #gge-main { padding: 0 8px; margin: 8px auto; }
  body.gge-site .gge-shell-header { padding: 18px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
  body.gge-site .gge-shell-header nav { gap: 20px; font-size: 12px; }
  body.gge-site .gge-info-page { margin: 18px 0; padding: 28px 23px; border-radius: 13px; font-size: 14px; }
  body.gge-site .gge-info-page > h1 { font-size: 27px; }
  body.gge-site .gge-info-page h2 { font-size: 20px; margin-top: 28px; }
  body.gge-site .ge-lead { font-size: 15px; }
  body.gge-site .gge-shell-footer { padding: 22px; font-size: 11px; }
}
#gge-app.gge {
  --gge-ink: #163e36;
  --gge-muted: #65736a;
  --gge-lime: #d6ef75;
  --gge-cream: #faf9f3;
  --gge-line: #e3e8dc;
  --gge-teal: #1d4d41;
  --gge-purple: #7060a7;
  color: var(--gge-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  width: 100%;
  margin: 0 auto;
  isolation: isolate;
}
#gge-app.gge *, #gge-app.gge *::before, #gge-app.gge *::after { box-sizing: border-box; }
#gge-app.gge h1, #gge-app.gge h2, #gge-app.gge h3, #gge-app.gge p { margin: 0; padding: 0; color: inherit; font-family: inherit; }
#gge-app.gge h1, #gge-app.gge h2, #gge-app.gge h3 { letter-spacing: -.045em; font-weight: 750; }
#gge-app.gge h1 { font-size: clamp(25px, 3.5vw, 37px); line-height: 1.3; }
#gge-app.gge h2 { font-size: 23px; line-height: 1.4; }
#gge-app.gge h3 { font-size: 19px; line-height: 1.45; }
#gge-app.gge p { overflow-wrap: anywhere; }
#gge-app.gge button, #gge-app.gge input, #gge-app.gge select { font: inherit; letter-spacing: inherit; text-transform: none; }
#gge-app.gge button { cursor: pointer; border: 0; box-shadow: none; margin: 0; white-space: normal; }
#gge-app.gge button:disabled { opacity: .55; cursor: not-allowed; }
#gge-app.gge a { color: var(--gge-ink); text-decoration: none; }
#gge-app.gge a:hover { text-decoration: underline; text-underline-offset: 4px; }
#gge-app.gge button:focus-visible, #gge-app.gge a:focus-visible, #gge-app.gge input:focus-visible, #gge-app.gge select:focus-visible, #gge-app.gge summary:focus-visible { outline: 3px solid #647a20; outline-offset: 4px; }
#gge-app.gge [tabindex="-1"]:focus { outline: none; }
#gge-app.gge .gge-shell { background: var(--gge-cream); border: 1px solid var(--gge-line); border-radius: 20px; overflow: hidden; }
#gge-app.gge .gge-top { padding: 23px 38px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--gge-line); }
#gge-app.gge .gge-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
#gge-app.gge .gge-brand:hover { text-decoration: none; }
#gge-app.gge .gge-brand b { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .2em; }
#gge-app.gge .gge-brand-mark { width: 45px; height: 45px; background: var(--gge-ink); color: var(--gge-lime); border-radius: 14px; display: grid; place-items: center; font-size: 34px; font-family: Georgia, serif; font-weight: 600; }
#gge-app.gge .gge-top-actions { display: flex; align-items: center; gap: 17px; font-size: 13px; }
#gge-app.gge .gge-top-actions a { font-weight: 700; }
#gge-app.gge .gge-free, #gge-app.gge .gge-xp { border-radius: 30px; padding: 5px 11px; font-weight: 700; font-size: 12px; white-space: nowrap; }
#gge-app.gge .gge-free { background: #f1f5df; color: #526328; }
#gge-app.gge .gge-xp { background: #f0edf8; color: #61518b; }
#gge-app.gge .gge-nav { background: #fff; padding: 0 38px; display: flex; gap: 5px; overflow-x: auto; border-bottom: 1px solid var(--gge-line); scrollbar-width: thin; }
#gge-app.gge .gge-nav-item { color: var(--gge-muted); background: transparent; padding: 16px 15px 13px; border-bottom: 3px solid transparent; display: flex; gap: 8px; align-items: center; flex-shrink: 0; font-weight: 700; font-size: 14px; min-height: 52px; border-radius: 0; }
#gge-app.gge .gge-nav-item > span { font-size: 16px; }
#gge-app.gge .gge-nav-item:hover { background: #f6f8ed; color: var(--gge-ink); }
#gge-app.gge .gge-nav-item.is-active { color: var(--gge-ink); border-bottom-color: var(--gge-ink); background: #f5f8ed; }
#gge-app.gge .gge-nav-item small { min-width: 20px; height: 20px; font-size: 11px; background: var(--gge-lime); border-radius: 15px; display: grid; place-items: center; padding: 0 5px; }
#gge-app.gge .gge-main { max-width: 1260px; margin: auto; padding: 38px; }
#gge-app.gge .gge-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-bottom: 30px; }
#gge-app.gge .gge-eyebrow { font-size: 10px; letter-spacing: .16em; font-weight: 800; color: var(--gge-muted); margin-bottom: 9px; }
#gge-app.gge .gge-page-heading p:last-child { margin-top: 10px; color: var(--gge-muted); font-size: 14px; }
#gge-app.gge .gge-date-tag { background: #fff; border: 1px solid var(--gge-line); border-radius: 25px; padding: 8px 13px; font-size: 11px; color: var(--gge-muted); white-space: nowrap; }
#gge-app.gge .gge-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; }
#gge-app.gge .gge-hero { min-height: 294px; padding: 32px 34px; display: flex; justify-content: space-between; gap: 20px; border-radius: 19px; background: var(--gge-teal); color: #fff; position: relative; overflow: hidden; }
#gge-app.gge .gge-hero-label { font-size: 11px; color: #d1e2b3; border: 1px solid #668465; border-radius: 20px; padding: 5px 10px; display: inline-block; }
#gge-app.gge .gge-hero h2 { margin-top: 15px; font-size: clamp(28px, 3vw, 36px); letter-spacing: -.04em; line-height: 1.35; }
#gge-app.gge .gge-hero em { color: var(--gge-lime); font-style: normal; }
#gge-app.gge .gge-hero p { color: #d0dcd0; font-size: 13px; margin: 14px 0 22px; line-height: 1.7; }
#gge-app.gge .gge-button { color: var(--gge-ink); background: var(--gge-lime); border-radius: 10px; padding: 13px 19px; display: inline-flex; justify-content: center; align-items: center; gap: 25px; font-size: 14px; font-weight: 800; min-height: 47px; text-align: center; }
#gge-app.gge .gge-button:hover:not(:disabled) { background: #c9e65e; }
#gge-app.gge .gge-secondary { display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--gge-line); background: #fff; color: var(--gge-ink); border-radius: 10px; padding: 11px 16px; min-height: 44px; font-weight: 700; font-size: 13px; text-align: center; }
#gge-app.gge .gge-secondary:hover:not(:disabled) { background: #f0f5e6; }
#gge-app.gge .gge-word-art { flex: 0 0 205px; min-height: 205px; position: relative; align-self: center; }
#gge-app.gge .gge-word-art > b { background: #e9eacb; transform: rotate(-7deg); color: var(--gge-ink); width: 130px; height: 155px; border-radius: 17px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 67px; font-family: Georgia, serif; position: absolute; top: 38px; left: 25px; box-shadow: 9px 9px 0 #123a31; }
#gge-app.gge .gge-word-art small { font-family: inherit; font-size: 9px; letter-spacing: 0; }
#gge-app.gge .gge-word-art > span, #gge-app.gge .gge-word-art > i { position: absolute; border-radius: 12px; font-size: 15px; font-style: normal; font-weight: 700; z-index: 1; box-shadow: 0 4px 0 #123a31; }
#gge-app.gge .gge-word-art > span { left: 0; top: 0; background: #fff; color: #315d4b; padding: 8px 15px; transform: rotate(-9deg); }
#gge-app.gge .gge-word-art > i { right: 0; bottom: 3px; background: #d9ccf0; color: #4d456b; padding: 9px 13px; transform: rotate(7deg); font-size: 12px; }
#gge-app.gge .gge-word-art > strong { color: var(--gge-lime); right: 2px; top: 26px; position: absolute; font-size: 36px; }
#gge-app.gge .gge-section { margin-top: 33px; scroll-margin-top: 20px; }
#gge-app.gge .gge-section > h2 { margin-bottom: 20px; }
#gge-app.gge .gge-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
#gge-app.gge .gge-section-heading > span { color: var(--gge-muted); font-size: 11px; white-space: nowrap; }
#gge-app.gge .gge-section-heading h2 { font-size: 22px; }
#gge-app.gge .gge-section-heading h3 { font-size: 16px; }
#gge-app.gge .gge-text-button { color: inherit; background: transparent; padding: 0; font-weight: inherit; text-align: left; border-radius: 2px; }
#gge-app.gge .gge-text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
#gge-app.gge .gge-section-heading .gge-text-button { font-size: 11px; color: var(--gge-muted); }
#gge-app.gge .gge-level-description { color: var(--gge-muted); font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
#gge-app.gge .gge-level-description > span { white-space: nowrap; }
#gge-app.gge .gge-tools { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
#gge-app.gge .gge-tools > label { display: block; flex: 1; }
#gge-app.gge .gge-tools > label > span { font-size: 11px; font-weight: 700; display: block; margin-bottom: 5px; }
#gge-app.gge .gge-tools input, #gge-app.gge .gge-tools select { border: 1px solid #d6ddce; background: #fff; color: var(--gge-ink); width: 100%; min-width: 0; padding: 10px 12px; height: 43px; border-radius: 9px; font-size: 13px; box-shadow: none; }
#gge-app.gge .gge-tools input::placeholder { color: #879285; opacity: 1; }
#gge-app.gge .gge-tools .gge-filter { flex: 0 0 142px; }
#gge-app.gge .gge-catalog-count { color: var(--gge-muted); font-size: 11px; margin: 12px 0; }
#gge-app.gge .gge-lesson { border: 1px solid var(--gge-line); border-radius: 13px; background: #fff; padding: 20px; display: flex; gap: 17px; align-items: center; margin-bottom: 11px; transition: border-color .15s; }
#gge-app.gge .gge-lesson:hover { border-color: #a4b18e; }
#gge-app.gge .gge-lesson.is-complete { background: #f8fbf0; }
#gge-app.gge .gge-lesson-number { background: #f0f4e7; border-radius: 11px; width: 45px; height: 45px; flex-shrink: 0; color: #637d3e; display: grid; place-items: center; font-size: 17px; font-weight: 700; }
#gge-app.gge .gge-lesson.is-complete .gge-lesson-number { background: var(--gge-lime); color: var(--gge-ink); }
#gge-app.gge .gge-lesson > div { flex: 1; min-width: 0; }
#gge-app.gge .gge-small-label { font-size: 8px; letter-spacing: .13em; color: #7f8c7a; font-weight: 800; }
#gge-app.gge .gge-lesson h3 { font-size: 16px; margin: 3px 0 5px; }
#gge-app.gge .gge-lesson p { font-size: 12px; color: var(--gge-muted); line-height: 1.6; }
#gge-app.gge .gge-lesson-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; font-size: 10px; }
#gge-app.gge .gge-lesson-tags > span { background: #f4f6ef; border-radius: 4px; padding: 1px 7px; color: #6f7b63; }
#gge-app.gge .gge-lesson-tags > a { margin-left: 4px; font-weight: 700; }
#gge-app.gge .gge-round-arrow { width: 37px; height: 37px; border-radius: 50%; background: #f4f6ed; color: #476349; font-size: 20px; flex-shrink: 0; }
#gge-app.gge .gge-round-arrow:hover { background: var(--gge-lime); }
#gge-app.gge .gge-pagination { margin: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--gge-muted); }
#gge-app.gge .gge-small-note { font-size: 11px; color: #6e7a68; line-height: 1.85; margin-top: 18px; }
#gge-app.gge .gge-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 26px; }
#gge-app.gge .gge-feature { border-radius: 13px; text-align: left; color: var(--gge-ink); background: #ece6f5; padding: 23px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
#gge-app.gge .gge-feature-mint { background: #e8edda; }
#gge-app.gge .gge-feature > span { font-size: 27px; line-height: 1; }
#gge-app.gge .gge-feature b { font-size: 15px; }
#gge-app.gge .gge-feature small { color: #68715f; font-size: 11px; }
#gge-app.gge .gge-right { display: flex; flex-direction: column; gap: 20px; }
#gge-app.gge .gge-panel { background: #fff; border: 1px solid var(--gge-line); border-radius: 16px; padding: 24px; }
#gge-app.gge .gge-panel h2 { font-size: 20px; margin-bottom: 15px; }
#gge-app.gge .gge-panel h3 { font-size: 18px; margin-bottom: 11px; }
#gge-app.gge .gge-panel p { font-size: 13px; line-height: 1.85; }
#gge-app.gge .gge-muted { color: var(--gge-muted); }
#gge-app.gge .gge-center { text-align: center; }
#gge-app.gge .gge-goal-ring { border-radius: 50%; width: 126px; height: 126px; margin: 24px auto 20px; background: conic-gradient(var(--gge-purple) var(--gge-goal), #eeebf5 0); padding: 10px; }
#gge-app.gge .gge-goal-ring > span { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 7px; width: 100%; height: 100%; background: #fff; border-radius: 50%; align-content: center; font-size: 13px; color: var(--gge-muted); }
#gge-app.gge .gge-goal-ring strong { font-size: 32px; color: var(--gge-ink); line-height: 1.25; }
#gge-app.gge .gge-goal-ring small { flex: 0 0 100%; text-align: center; font-size: 10px; }
#gge-app.gge .gge-week { display: flex; justify-content: space-between; gap: 5px; margin-top: 23px; }
#gge-app.gge .gge-week > span { display: grid; place-items: center; width: 25px; height: 25px; background: #f3f5ee; border-radius: 50%; font-size: 10px; color: #758069; }
#gge-app.gge .gge-week > span.is-checked { background: var(--gge-lime); color: var(--gge-ink); font-weight: 700; }
#gge-app.gge .gge-phrase { background: #f0eee0; border-color: #e7e4d4; }
#gge-app.gge .gge-phrase h3 { font-family: Georgia, serif; font-size: 25px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 6px; }
#gge-app.gge .gge-phrase > p:last-child { margin-top: 20px; font-size: 11px; }
#gge-app.gge .gge-listen { background: #fff; color: #4c6456; border: 1px solid #d7dfd0; font-size: 11px; border-radius: 30px; padding: 6px 11px; min-height: 35px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; flex-shrink: 0; }
#gge-app.gge .gge-listen:hover { background: #eaf2d9; }
#gge-app.gge .gge-phrase .gge-listen { margin-top: 14px; }
#gge-app.gge .gge-mini-tag { display: inline-block; font-size: 8px; font-weight: 800; letter-spacing: .12em; color: #778067; margin-bottom: 12px; }
#gge-app.gge .gge-inline-link { display: inline-block; font-size: 12px; font-weight: 700; margin-top: 17px; }
#gge-app.gge .gge-footer { padding-top: 25px; margin-top: 40px; border-top: 1px solid var(--gge-line); display: flex; gap: 20px; align-items: center; justify-content: space-between; color: var(--gge-muted); font-size: 10px; }
#gge-app.gge .gge-footer nav { display: flex; flex-wrap: wrap; gap: 15px; }
#gge-app.gge .gge-account-note { margin-top: 28px; padding: 18px 20px; border-radius: 12px; background: #eef1e4; color: #5c6c52; font-size: 12px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
#gge-app.gge .gge-account-note > a { flex-shrink: 0; font-weight: 700; }
#gge-app.gge .gge-message { border-radius: 10px; padding: 13px 17px; background: #eaf1d9; color: #3e5a31; margin-bottom: 20px; font-size: 13px; }
#gge-app.gge .gge-error { color: #783e27; background: #fff0e6; border: 1px solid #edd8c7; }
#gge-app.gge .gge-error .gge-text-button { font-weight: 800; margin-left: 8px; }
#gge-app.gge .gge-info-strip { border: 1px solid #dde6d0; padding: 17px 20px; background: #f1f5e6; border-radius: 12px; font-size: 12px; margin-bottom: 25px; color: #587048; }
#gge-app.gge .gge-talk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#gge-app.gge .gge-talk-card { border: 1px solid var(--gge-line); background: #fff; border-radius: 16px; padding: 23px; display: flex; flex-direction: column; align-items: flex-start; }
#gge-app.gge .gge-talk-art { border-radius: 11px; width: 100%; height: 125px; display: grid; place-items: center; background: #f2e6cb; font-size: 53px; margin-bottom: 23px; }
#gge-app.gge .gge-tone-1 .gge-talk-art { background: #e3ecd8; }
#gge-app.gge .gge-tone-2 .gge-talk-art { background: #e6def3; }
#gge-app.gge .gge-talk-card h2 { font-size: 21px; margin-bottom: 12px; }
#gge-app.gge .gge-talk-card p { font-size: 13px; color: var(--gge-muted); margin-bottom: 18px; flex: 1; }
#gge-app.gge .gge-talk-card > small { font-size: 11px; color: var(--gge-muted); margin-bottom: 23px; }
#gge-app.gge .gge-talk-card .gge-button { width: 100%; }
#gge-app.gge .gge-talk-card > a { margin-top: 13px; font-size: 11px; align-self: center; }
#gge-app.gge .gge-speaking-tip { margin-top: 25px; }
#gge-app.gge .gge-review-hero { display: flex; align-items: center; gap: 35px; border-radius: 18px; background: #e5ebd8; padding: 35px; }
#gge-app.gge .gge-review-hero > span { font-size: 85px; color: #658948; line-height: 1; }
#gge-app.gge .gge-review-hero h2 { margin-bottom: 10px; font-size: 28px; }
#gge-app.gge .gge-review-hero p:not(.gge-eyebrow) { margin-bottom: 20px; font-size: 13px; color: #61715a; }
#gge-app.gge .gge-expression-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
#gge-app.gge .gge-expression { background: #fff; border: 1px solid var(--gge-line); border-radius: 13px; padding: 22px; }
#gge-app.gge .gge-expression h3 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; overflow-wrap: anywhere; margin: 12px 0 8px; }
#gge-app.gge .gge-expression p { font-size: 12px; color: var(--gge-muted); }
#gge-app.gge .gge-status-tag { color: #77816b; background: #f3f5ee; padding: 4px 8px; border-radius: 5px; font-size: 10px; }
#gge-app.gge .gge-status-tag.is-due { color: #8b5836; background: #fff0dc; }
#gge-app.gge details { font-size: 12px; color: var(--gge-muted); margin-top: 15px; }
#gge-app.gge summary { cursor: pointer; font-weight: 700; color: #526849; }
#gge-app.gge details p { margin-top: 9px; }
#gge-app.gge .gge-notes-more { margin: 24px auto 0; display: flex; }
#gge-app.gge .gge-empty { padding: 45px 25px; border: 1px dashed #ced8c0; background: #f6f8ee; border-radius: 13px; text-align: center; }
#gge-app.gge .gge-empty > span { font-size: 38px; color: #829863; }
#gge-app.gge .gge-empty h3 { font-size: 18px; margin-bottom: 10px; }
#gge-app.gge .gge-empty p { color: var(--gge-muted); font-size: 13px; }
#gge-app.gge .gge-empty button { margin-top: 22px; }
#gge-app.gge .gge-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 25px; }
#gge-app.gge .gge-stat-card { background: #fff; border: 1px solid var(--gge-line); padding: 22px; border-radius: 14px; display: flex; flex-direction: column; gap: 6px; }
#gge-app.gge .gge-stat-card > span { color: #7f9957; font-size: 20px; }
#gge-app.gge .gge-stat-card > strong { font-size: 31px; line-height: 1.3; }
#gge-app.gge .gge-stat-card > small { font-size: 11px; color: var(--gge-muted); }
#gge-app.gge .gge-stats-columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
#gge-app.gge .gge-activity-bars { display: flex; align-items: flex-end; justify-content: space-around; min-height: 165px; margin-top: 20px; }
#gge-app.gge .gge-activity-bars > div { display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: 11px; color: var(--gge-muted); }
#gge-app.gge .gge-activity-bars span { display: block; width: 27px; background: #d7e99a; border-radius: 5px 5px 2px 2px; }
#gge-app.gge .gge-goals { margin-top: 15px; display: flex; flex-direction: column; gap: 9px; }
#gge-app.gge .gge-goal-option { text-align: left; background: #f7f9f1; border: 1px solid var(--gge-line); border-radius: 10px; padding: 13px 15px; color: var(--gge-ink); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#gge-app.gge .gge-goal-option.is-selected { border-color: #94af53; background: #edf5d7; }
#gge-app.gge .gge-goal-option b { font-size: 13px; }
#gge-app.gge .gge-goal-option small { font-size: 10px; color: var(--gge-muted); }
#gge-app.gge .gge-history { border: 1px solid var(--gge-line); border-radius: 13px; background: #fff; overflow: hidden; }
#gge-app.gge .gge-history-row { padding: 18px 22px; display: flex; align-items: center; gap: 17px; border-bottom: 1px solid var(--gge-line); font-size: 12px; }
#gge-app.gge .gge-history-row:last-child { border-bottom: 0; }
#gge-app.gge .gge-history-row > div { flex: 1; min-width: 0; }
#gge-app.gge .gge-history-row strong { display: block; font-size: 13px; }
#gge-app.gge .gge-history-row small { display: block; color: var(--gge-muted); margin-top: 3px; font-size: 10px; }
#gge-app.gge .gge-history-row > b { color: #668a39; white-space: nowrap; font-size: 12px; }
#gge-app.gge .gge-history-row > span:not(.gge-history-check) { white-space: nowrap; font-size: 11px; }
#gge-app.gge .gge-history-check { background: #eef4df; color: #6d9241; border-radius: 50%; width: 33px; height: 33px; flex-shrink: 0; display: grid; place-items: center; font-size: 15px; }
#gge-app.gge .gge-storage { margin-top: 25px; }
#gge-app.gge .gge-storage .gge-secondary { margin-top: 20px; }
#gge-app.gge .gge-loading { text-align: center; padding: 70px 20px; }
#gge-app.gge .gge-loading h2 { font-size: 22px; margin: 20px 0 12px; }
#gge-app.gge .gge-loading p { font-size: 13px; color: var(--gge-muted); }
#gge-app.gge .gge-spinner { width: 38px; height: 38px; border: 4px solid #e1e8d2; border-top-color: #5a7b43; border-radius: 50%; display: inline-block; animation: gge-spin .8s linear infinite; }
@keyframes gge-spin { to { transform: rotate(360deg); } }
#gge-app.gge .is-hidden { display: none; }
#gge-app.gge .gge-sr-only { width: 1px; height: 1px; padding: 0; margin: -1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#gge-app.gge .gge-quiz-overlay { position: fixed; inset: 0; background: rgba(10, 34, 26, .7); z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 25px; backdrop-filter: blur(4px); }
#gge-app.gge .gge-quiz-shell { background: #fffef9; width: 100%; max-width: 710px; max-height: calc(100dvh - 50px); overflow: auto; border-radius: 20px; box-shadow: 0 25px 70px #09201960; overscroll-behavior: contain; }
#gge-app.gge .gge-quiz-header { display: flex; align-items: center; gap: 18px; padding: 20px 26px; border-bottom: 1px solid var(--gge-line); background: #fffef9; position: sticky; top: 0; z-index: 2; font-size: 12px; color: var(--gge-muted); }
#gge-app.gge .gge-close { background: #f2f4eb; color: #697462; border-radius: 50%; width: 35px; height: 35px; flex-shrink: 0; font-size: 24px; line-height: 1; padding: 0; }
#gge-app.gge .gge-close:hover { background: #e7edda; }
#gge-app.gge .gge-quiz-progress { flex: 1; height: 8px; background: #edf0e3; border-radius: 20px; overflow: hidden; }
#gge-app.gge .gge-quiz-progress > span { height: 100%; display: block; background: #a5c857; border-radius: 20px; transition: width .25s ease; }
#gge-app.gge .gge-quiz-body { padding: 33px 44px 42px; }
#gge-app.gge .gge-quiz-body h2 { font-size: 26px; margin-bottom: 20px; overflow-wrap: anywhere; }
#gge-app.gge .gge-quiz-intro > p:not(.gge-eyebrow):not(.gge-small-note) { color: var(--gge-muted); font-size: 14px; line-height: 1.9; }
#gge-app.gge .gge-examples { margin: 25px 0; border: 1px solid var(--gge-line); border-radius: 12px; background: #fff; overflow: hidden; }
#gge-app.gge .gge-examples > div { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--gge-line); }
#gge-app.gge .gge-examples > div:last-child { border-bottom: 0; }
#gge-app.gge .gge-examples strong { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
#gge-app.gge .gge-examples p { font-size: 12px; color: var(--gge-muted); margin-top: 6px; }
#gge-app.gge .gge-tip { border-radius: 10px; padding: 17px 20px; background: #f0f4e3; color: #5c7250; margin-bottom: 25px; }
#gge-app.gge .gge-tip strong { font-size: 12px; }
#gge-app.gge .gge-tip p { font-size: 12px; margin-top: 7px; }
#gge-app.gge .gge-wide { width: 100%; margin-top: 15px; }
#gge-app.gge .gge-question { background: #f4f6eb; border-radius: 12px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
#gge-app.gge .gge-question p[lang="en"] { font-size: 22px; font-weight: 650; line-height: 1.6; letter-spacing: -.015em; overflow-wrap: anywhere; }
#gge-app.gge .gge-translation { color: #60724f; font-size: 13px; line-height: 1.75; margin-top: 10px; }
#gge-app.gge .gge-question .gge-listen { align-self: flex-start; }
#gge-app.gge .gge-options { display: flex; flex-direction: column; gap: 12px; }
#gge-app.gge .gge-option { background: #fff; border: 1px solid #d9e0ce; border-bottom: 3px solid #d9e0ce; color: #36513b; padding: 15px 18px; border-radius: 11px; text-align: left; display: flex; align-items: center; gap: 15px; min-height: 57px; }
#gge-app.gge .gge-option > span { width: 27px; height: 27px; flex-shrink: 0; border: 1px solid #dfe5d6; background: #f7f8f2; border-radius: 7px; display: grid; place-items: center; font-size: 12px; color: #819072; }
#gge-app.gge .gge-option > b { font-size: 15px; font-weight: 650; flex: 1; overflow-wrap: anywhere; }
#gge-app.gge .gge-option:hover:not(:disabled), #gge-app.gge .gge-option.is-chosen { border-color: #9cb851; background: #f1f6e0; }
#gge-app.gge .gge-option:disabled { opacity: 1; cursor: default; }
#gge-app.gge .gge-option.is-correct { border-color: #8dad51; background: #edf6d9; color: #496b27; }
#gge-app.gge .gge-option.is-incorrect { border-color: #d59872; background: #fff2e8; color: #915734; }
#gge-app.gge .gge-option.is-correct > strong { font-size: 20px; }
#gge-app.gge .gge-feedback { border-radius: 11px; background: #edf5dd; color: #45622f; padding: 20px; margin-top: 22px; }
#gge-app.gge .gge-feedback.is-retry { background: #fff1df; color: #815938; }
#gge-app.gge .gge-feedback > strong { font-size: 14px; }
#gge-app.gge .gge-feedback > p:not(.gge-translation) { font-size: 13px; margin-top: 10px; line-height: 1.9; }
#gge-app.gge .gge-feedback-english { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 14px; margin-top: 14px; border-top: 1px solid #c6d7b0; }
#gge-app.gge .gge-feedback-english > span { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
#gge-app.gge .gge-feedback.is-retry .gge-feedback-english { border-color: #e8cfaf; }
#gge-app.gge .gge-quiz-body .gge-message { margin-top: 20px; margin-bottom: 8px; }
#gge-app.gge .gge-quiz-body .gge-message p { margin-top: 6px; font-size: 12px; }
#gge-app.gge .gge-button-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#gge-app.gge .gge-large-symbol { display: block; color: #8da64d; font-size: 50px; margin-bottom: 15px; }
#gge-app.gge .gge-result { text-align: center; }
#gge-app.gge .gge-result-medal { width: 90px; height: 90px; font-size: 48px; background: #eef4d9; color: #78953e; display: grid; place-items: center; border-radius: 50%; margin: 0 auto 23px; }
#gge-app.gge .gge-result > p:not(.gge-eyebrow):not(.gge-small-note) { color: var(--gge-muted); font-size: 13px; }
#gge-app.gge .gge-result h2 { margin-bottom: 15px; }
#gge-app.gge .gge-result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 29px 0; }
#gge-app.gge .gge-result-stats > div { border: 1px solid var(--gge-line); background: #fff; border-radius: 12px; padding: 17px 7px; }
#gge-app.gge .gge-result-stats strong { display: block; font-size: 27px; margin-bottom: 5px; }
#gge-app.gge .gge-result-stats small { color: var(--gge-muted); font-size: 11px; }
#gge-app.gge .gge-result-message { color: #55763f; font-size: 13px; padding: 15px 18px; background: #f0f5e2; border-radius: 9px; }
#gge-app.gge .gge-result-details { margin: 24px 0; text-align: left; }
#gge-app.gge .gge-result-details article { border-bottom: 1px solid var(--gge-line); padding: 17px 0; }
#gge-app.gge .gge-result-details article > strong { font-size: 12px; }
#gge-app.gge .gge-result-details article > p[lang="en"] { font-size: 16px; color: var(--gge-ink); font-weight: 650; }
#gge-app.gge .gge-result-details .gge-listen { margin-top: 12px; }
#gge-app.gge .gge-audio-status { display: none; }
#gge-app.gge .gge-audio-status.is-visible { display: block; margin: 0 30px 25px; color: #8a5738; background: #fff1e4; padding: 13px; font-size: 12px; border-radius: 9px; }
#gge-app.gge .gge-reading-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 800px; margin: 0 auto 25px; }
#gge-app.gge .gge-reading-actions > a { font-size: 13px; font-weight: 700; }
#gge-app.gge .gge-reading { background: #fff; border: 1px solid var(--gge-line); border-radius: 16px; padding: 38px 42px; max-width: 800px; margin: auto; }
#gge-app.gge .gge-reading .gge-info-page { margin: 0; border: 0; padding: 0; background: transparent; }
#gge-app.gge .gge-reading h1 { font-size: 31px; line-height: 1.5; margin: 10px 0 20px; }
#gge-app.gge .gge-reading h2 { font-size: 23px; line-height: 1.6; margin: 34px 0 17px; }
#gge-app.gge .gge-reading h3 { font-size: 18px; line-height: 1.65; margin-bottom: 16px; }
#gge-app.gge .gge-reading p { margin: 0 0 16px; font-size: 14px; line-height: 1.9; }
#gge-app.gge .gge-reading p.eyebrow { font-size: 10px; color: #718260; letter-spacing: .1em; font-weight: 700; }
#gge-app.gge .gge-reading p.subtitle { color: var(--gge-muted); font-size: 15px; }
#gge-app.gge .gge-reading p.translation { color: #68824d; font-size: 13px; }
#gge-app.gge .gge-reading .gge-examples { padding: 0 20px; list-style: none; background: #f5f8ec; border: 1px solid var(--gge-line); border-radius: 12px; margin: 20px 0; }
#gge-app.gge .gge-reading .gge-examples > li { border-bottom: 1px solid var(--gge-line); padding: 17px 0; }
#gge-app.gge .gge-reading .gge-examples > li:last-child { border-bottom: 0; }
#gge-app.gge .gge-reading .gge-examples > li p:last-child { margin-bottom: 0; color: var(--gge-muted); font-size: 13px; }
#gge-app.gge .gge-reading .gge-examples p[lang="en"] { font-size: 17px; font-weight: 700; }
#gge-app.gge .gge-reading .gge-static-question { margin: 25px 0; padding: 25px; border: 1px solid var(--gge-line); border-radius: 12px; background: #fcfdf8; }
#gge-app.gge .gge-reading .gge-static-question > p[lang="en"] { font-size: 18px; font-weight: 650; }
#gge-app.gge .gge-reading .gge-static-question ol { margin: 15px 0; padding-left: 24px; font-size: 14px; }
#gge-app.gge .gge-reading .gge-static-question li { margin: 8px 0; }
#gge-app.gge .gge-reading details { background: #edf4df; border-radius: 10px; padding: 15px 18px; margin: 22px 0 0; }
#gge-app.gge .gge-reading details p:first-of-type { margin-top: 16px; }
#gge-app.gge .gge-reading details p:last-child { margin-bottom: 0; }
#gge-app.gge .gge-reading-bottom { max-width: 800px; margin: 25px auto 0; text-align: center; }
/* Compact orientation and listening preferences, without changing lesson progress. */
#gge-app.gge .gge-audio-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px 15px; margin-bottom: 20px; font-size: 12px; color: var(--gge-muted); }
#gge-app.gge .gge-audio-controls label { display: inline-flex; align-items: center; gap: 9px; }
#gge-app.gge .gge-audio-controls select { min-height: 44px; border: 1px solid var(--gge-line); border-radius: 9px; padding: 7px 28px 7px 10px; color: var(--gge-ink); background: #fff; font-size: 12px; cursor: pointer; }
#gge-app.gge .gge-audio-note { font-size: 11px; }
#gge-app.gge .gge-level-guide { margin-top: 25px; padding: 23px; background: #fff; border: 1px solid var(--gge-line); border-radius: 14px; }
#gge-app.gge .gge-level-guide h2 { font-size: 20px; }
#gge-app.gge .gge-level-guide .gge-section-heading { margin-bottom: 7px; }
#gge-app.gge .gge-level-guide .gge-section-heading a { font-size: 11px; font-weight: 700; }
#gge-app.gge .gge-level-guide > p { font-size: 12px; color: var(--gge-muted); line-height: 1.8; }
#gge-app.gge .gge-level-guide-disclosure { margin-top: 12px; }
#gge-app.gge .gge-level-guide-disclosure > summary { min-height: 44px; padding: 10px 0; font-size: 12px; font-weight: 750; color: var(--gge-ink); cursor: pointer; list-style-position: inside; border-top: 1px solid var(--gge-line); }
#gge-app.gge .gge-level-guide-disclosure[open] > summary { border-bottom: 1px solid var(--gge-line); }
#gge-app.gge .gge-level-guide-disclosure > .gge-small-note { margin-top: 12px; }
#gge-app.gge .gge-level-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 12px; }
#gge-app.gge .gge-level-guide-card { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0; min-height: 44px; text-align: left; background: #fcfdf8; border: 1px solid var(--gge-line); border-radius: 11px; padding: 15px; color: var(--gge-ink); }
#gge-app.gge .gge-level-guide-card:hover { background: #f0f5e6; }
#gge-app.gge .gge-level-guide-card.is-selected { background: #f1f7dc; border-color: #97b55c; }
#gge-app.gge .gge-level-guide-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 800; }
#gge-app.gge .gge-level-guide-name small { font-size: 9px; color: #506632; font-weight: 700; }
#gge-app.gge .gge-level-guide-hint { font-size: 10px; color: var(--gge-muted); line-height: 1.7; }
#gge-app.gge .gge-level-guide-card > strong { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
#gge-app.gge .gge-level-guide-meaning { font-size: 11px; color: #526d43; line-height: 1.8; }
#gge-app.gge .gge-quiz-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 15px; padding: 12px 36px; border-bottom: 1px solid var(--gge-line); background: #fafcf6; }
#gge-app.gge .gge-quiz-tools .gge-audio-controls { margin: 0; }
#gge-app.gge .gge-keyboard-hint { font-size: 10px; color: var(--gge-muted); }
#gge-app.gge kbd { display: inline-block; border: 1px solid #d4ddc8; border-radius: 4px; background: #fff; padding: 1px 5px; font: inherit; color: var(--gge-ink); }
#gge-app.gge .gge-result-next { display: flex; flex-direction: column; gap: 10px; margin: 23px 0; padding-top: 22px; border-top: 1px solid var(--gge-line); }
#gge-app.gge .gge-result-next h3 { margin-bottom: 2px; font-size: 17px; }
#gge-app.gge .gge-result-next .gge-wide { margin: 0; }
#gge-app.gge .gge-result-next > p { font-size: 12px; }
#gge-app.gge .gge-result-next .gge-button > span:first-child { min-width: 0; }
#gge-app.gge .gge-result-next .gge-button small { display: block; margin-top: 5px; font-weight: 600; font-size: 11px; line-height: 1.8; }
#gge-app.gge .gge-reading-loading { min-height: 0; padding: 20px; margin-bottom: 20px; border: 1px solid var(--gge-line); border-radius: 12px; background: #fff; }
#gge-app.gge .gge-reading-loading h2 { font-size: 17px; }
#gge-app.gge .gge-reading-actions > .gge-muted { font-size: 12px; }
/* Runtime lesson navigation also remains usable without JavaScript. */
body.gge-site .gge-course-navigation { max-width: 800px; margin: 28px auto 0; padding: 24px; border: 1px solid #e3e8dc; border-radius: 13px; background: #f8faef; }
body.gge-site .gge-course-navigation > p, #gge-app.gge .gge-reading .gge-course-navigation > p { margin: 0 0 13px; font-size: 12px; color: #65736a; }
body.gge-site .gge-course-navigation > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.gge-site .gge-course-navigation .gge-course-link { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; min-height: 60px; padding: 14px 16px; background: #fff; border: 1px solid #e3e8dc; border-radius: 10px; color: #163e36; text-decoration: none; }
body.gge-site .gge-course-navigation .gge-course-link:hover { border-color: #97b55c; background: #f1f7dc; }
body.gge-site .gge-course-navigation .gge-course-link:focus-visible { outline: 3px solid #647a20; outline-offset: 4px; }
body.gge-site .gge-course-navigation .gge-course-link small { font-size: 11px; color: #65736a; }
body.gge-site .gge-course-navigation .gge-course-link strong { font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
body.gge-site .gge-course-navigation .gge-course-overview { grid-column: 1 / -1; background: transparent; min-height: 44px; }
@media (max-width: 1100px) {
  #gge-app.gge .gge-main { padding: 30px; }
  #gge-app.gge .gge-dashboard { grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; }
  #gge-app.gge .gge-hero { padding: 28px; }
  #gge-app.gge .gge-word-art { flex-basis: 170px; transform: scale(.85); transform-origin: right center; margin-left: -15px; }
  #gge-app.gge .gge-panel { padding: 20px; }
  #gge-app.gge .gge-talk-card { padding: 20px; }
  #gge-app.gge .gge-talk-card h2 { font-size: 19px; }
}
@media (max-width: 880px) {
  #gge-app.gge .gge-dashboard { grid-template-columns: 1fr; }
  #gge-app.gge .gge-right { display: grid; grid-template-columns: 1fr 1fr; }
  #gge-app.gge .gge-right > section:last-child { display: none; }
  #gge-app.gge .gge-nav { padding: 0 25px; }
  #gge-app.gge .gge-top { padding: 20px 28px; }
  #gge-app.gge .gge-talk-grid { grid-template-columns: 1fr; }
  #gge-app.gge .gge-talk-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 25px; }
  #gge-app.gge .gge-talk-art { grid-row: 1 / 6; height: 100%; min-height: 180px; margin-bottom: 0; }
  #gge-app.gge .gge-talk-card > a { grid-column: 2; text-align: center; }
  #gge-app.gge .gge-talk-card .gge-button { grid-column: 2; }
  #gge-app.gge .gge-talk-card p { margin-bottom: 10px; }
  #gge-app.gge .gge-talk-card > small { margin-bottom: 16px; }
  #gge-app.gge .gge-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  #gge-app.gge .gge-account-note { align-items: flex-start; flex-direction: column; gap: 8px; }
  #gge-app.gge .gge-date-tag { display: none; }
  #gge-app.gge .gge-stat-grid { gap: 12px; }
  #gge-app.gge .gge-stat-card { padding: 20px 15px; }
}
@media (max-width: 600px) {
  #gge-app.gge .gge-audio-controls { justify-content: flex-start; gap: 6px 12px; margin-bottom: 16px; }
  #gge-app.gge .gge-audio-note { font-size: 10px; }
  #gge-app.gge .gge-level-guide { padding: 18px 15px; margin-top: 20px; }
  #gge-app.gge .gge-level-guide h2 { font-size: 18px; }
  #gge-app.gge .gge-level-guide-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 13px; }
  #gge-app.gge .gge-level-guide-card { padding: 13px 15px; gap: 6px; }
  #gge-app.gge .gge-level-guide-card > strong { font-size: 13px; }
  #gge-app.gge .gge-level-guide-name small { font-size: 10px; }
  #gge-app.gge .gge-quiz-tools { padding: 10px 21px; gap: 7px 12px; }
  #gge-app.gge .gge-keyboard-hint { display: none; }
  #gge-app.gge .gge-reading-loading { padding: 18px; }
  body.gge-site .gge-course-navigation { padding: 18px; }
  body.gge-site .gge-course-navigation > div { grid-template-columns: 1fr; }
  #gge-app.gge { font-size: 14px; }
  #gge-app.gge .gge-shell { border-radius: 12px; }
  #gge-app.gge .gge-top { padding: 17px; gap: 10px; }
  #gge-app.gge .gge-brand { font-size: 17px; gap: 8px; }
  #gge-app.gge .gge-brand-mark { width: 38px; height: 38px; font-size: 29px; border-radius: 11px; }
  #gge-app.gge .gge-brand b { font-size: 8px; }
  #gge-app.gge .gge-top-actions { gap: 10px; font-size: 11px; }
  #gge-app.gge .gge-free { display: none; }
  #gge-app.gge .gge-xp { padding: 5px 8px; font-size: 10px; }
  #gge-app.gge .gge-nav { padding: 0 10px; gap: 1px; }
  #gge-app.gge .gge-nav-item { padding: 14px 13px 11px; font-size: 13px; min-height: 49px; gap: 5px; }
  #gge-app.gge .gge-nav-item > span { font-size: 12px; }
  #gge-app.gge .gge-main { padding: 24px 16px; }
  #gge-app.gge .gge-page-heading { margin-bottom: 23px; }
  #gge-app.gge .gge-page-heading p:last-child { font-size: 12px; line-height: 1.85; }
  #gge-app.gge .gge-hero { padding: 26px 23px; min-height: 305px; }
  #gge-app.gge .gge-hero > div:first-child { position: relative; z-index: 1; }
  #gge-app.gge .gge-hero h2 { font-size: 30px; }
  #gge-app.gge .gge-hero p { font-size: 12px; }
  #gge-app.gge .gge-word-art { position: absolute; right: 4px; top: 75px; width: 170px; transform: scale(.68); transform-origin: right center; opacity: .6; }
  #gge-app.gge .gge-hero .gge-button { padding: 11px 15px; font-size: 13px; }
  #gge-app.gge .gge-section { margin-top: 28px; }
  #gge-app.gge .gge-section-heading { gap: 8px; margin-bottom: 13px; }
  #gge-app.gge .gge-section-heading h2 { font-size: 19px; }
  #gge-app.gge .gge-section-heading > span { font-size: 9px; }
  #gge-app.gge .gge-level-description { font-size: 11px; flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 17px; }
  #gge-app.gge .gge-tools { gap: 9px; }
  #gge-app.gge .gge-tools .gge-filter { flex-basis: 113px; }
  #gge-app.gge .gge-tools input, #gge-app.gge .gge-tools select { font-size: 12px; padding: 9px; }
  #gge-app.gge .gge-tools input::placeholder { font-size: 11px; }
  #gge-app.gge .gge-lesson { padding: 16px 13px; gap: 11px; }
  #gge-app.gge .gge-lesson-number { width: 33px; height: 37px; border-radius: 9px; font-size: 14px; }
  #gge-app.gge .gge-lesson h3 { font-size: 15px; line-height: 1.6; }
  #gge-app.gge .gge-lesson p { font-size: 11px; }
  #gge-app.gge .gge-small-label { font-size: 7px; }
  #gge-app.gge .gge-round-arrow { width: 29px; height: 29px; font-size: 16px; }
  #gge-app.gge .gge-lesson-tags { font-size: 9px; gap: 5px; }
  #gge-app.gge .gge-lesson-tags > span { padding: 1px 5px; }
  #gge-app.gge .gge-pagination .gge-secondary { padding: 9px 12px; font-size: 12px; }
  #gge-app.gge .gge-feature-grid { gap: 11px; }
  #gge-app.gge .gge-feature { padding: 18px 15px; gap: 8px; }
  #gge-app.gge .gge-feature b { font-size: 13px; }
  #gge-app.gge .gge-feature small { font-size: 10px; line-height: 1.8; }
  #gge-app.gge .gge-right { grid-template-columns: 1fr; }
  #gge-app.gge .gge-right > section:first-child { display: none; }
  #gge-app.gge .gge-phrase { padding: 24px; }
  #gge-app.gge .gge-phrase h3 { font-size: 25px; }
  #gge-app.gge .gge-talk-card { grid-template-columns: 1fr; padding: 22px; }
  #gge-app.gge .gge-talk-art { grid-row: auto; min-height: 100px; height: 105px; margin-bottom: 20px; }
  #gge-app.gge .gge-talk-card .gge-button, #gge-app.gge .gge-talk-card > a { grid-column: auto; }
  #gge-app.gge .gge-review-hero { padding: 26px 22px; gap: 15px; }
  #gge-app.gge .gge-review-hero > span { font-size: 50px; }
  #gge-app.gge .gge-review-hero h2 { font-size: 22px; }
  #gge-app.gge .gge-review-hero p:not(.gge-eyebrow) { font-size: 12px; }
  #gge-app.gge .gge-expression-grid { grid-template-columns: 1fr; }
  #gge-app.gge .gge-expression { padding: 20px; }
  #gge-app.gge .gge-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  #gge-app.gge .gge-stat-card { padding: 19px; }
  #gge-app.gge .gge-stat-card > strong { font-size: 29px; }
  #gge-app.gge .gge-stats-columns { grid-template-columns: 1fr; }
  #gge-app.gge .gge-goal-option small { font-size: 10px; }
  #gge-app.gge .gge-history-row { padding: 16px 12px; gap: 9px; flex-wrap: wrap; }
  #gge-app.gge .gge-history-row strong { font-size: 12px; }
  #gge-app.gge .gge-history-check { width: 26px; height: 26px; font-size: 12px; }
  #gge-app.gge .gge-history-row > div { flex-basis: calc(100% - 40px); }
  #gge-app.gge .gge-history-row > span:not(.gge-history-check) { margin-left: 35px; }
  #gge-app.gge .gge-footer nav { gap: 9px 13px; font-size: 10px; }
  #gge-app.gge .gge-account-note { padding: 16px; font-size: 11px; }
  #gge-app.gge .gge-quiz-overlay { padding: 0; align-items: stretch; }
  #gge-app.gge .gge-quiz-shell { width: 100%; max-width: 100%; max-height: 100dvh; border-radius: 0; box-shadow: none; }
  #gge-app.gge .gge-quiz-header { padding: 15px 17px; gap: 13px; }
  #gge-app.gge .gge-quiz-body { padding: 26px 21px 35px; }
  #gge-app.gge .gge-quiz-body h2 { font-size: 23px; margin-bottom: 20px; line-height: 1.6; }
  #gge-app.gge .gge-quiz-intro > p:not(.gge-eyebrow):not(.gge-small-note) { font-size: 13px; }
  #gge-app.gge .gge-examples > div { padding: 17px 15px; gap: 12px; }
  #gge-app.gge .gge-examples strong { font-size: 14px; }
  #gge-app.gge .gge-examples p { font-size: 12px; }
  #gge-app.gge .gge-question { padding: 20px; flex-direction: column; align-items: flex-start; gap: 13px; }
  #gge-app.gge .gge-question p[lang="en"] { font-size: 21px; }
  #gge-app.gge .gge-question .gge-listen { align-self: flex-end; }
  #gge-app.gge .gge-translation { font-size: 13px; }
  #gge-app.gge .gge-option { padding: 15px 13px; gap: 11px; }
  #gge-app.gge .gge-option > b { font-size: 14px; line-height: 1.8; }
  #gge-app.gge .gge-option > span { width: 25px; height: 25px; font-size: 11px; }
  #gge-app.gge .gge-feedback { padding: 18px; }
  #gge-app.gge .gge-feedback-english { align-items: flex-start; flex-direction: column; gap: 10px; }
  #gge-app.gge .gge-feedback-english > span { font-size: 15px; }
  #gge-app.gge .gge-result-stats { gap: 8px; }
  #gge-app.gge .gge-result-stats strong { font-size: 24px; }
  #gge-app.gge .gge-result-stats small { font-size: 10px; }
  #gge-app.gge .gge-result > h2 { font-size: 23px; }
  #gge-app.gge .gge-button-row { flex-direction: column; }
  #gge-app.gge .gge-reading-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  #gge-app.gge .gge-reading { padding: 26px 20px; }
  #gge-app.gge .gge-reading h1 { font-size: 26px; }
  #gge-app.gge .gge-reading h2 { font-size: 21px; }
  #gge-app.gge .gge-reading h3 { font-size: 17px; }
  #gge-app.gge .gge-reading p { font-size: 13px; }
  #gge-app.gge .gge-reading .gge-static-question { padding: 20px 16px; }
}
@media (max-width: 360px) {
  #gge-app.gge .gge-top-actions { gap: 7px; }
  #gge-app.gge .gge-xp { display: none; }
  #gge-app.gge .gge-main { padding-left: 12px; padding-right: 12px; }
  #gge-app.gge .gge-word-art { opacity: .25; }
  #gge-app.gge .gge-tools { flex-direction: column; align-items: stretch; }
  #gge-app.gge .gge-tools .gge-filter { flex-basis: auto; }
  #gge-app.gge .gge-round-arrow { display: none; }
  #gge-app.gge .gge-section-heading { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  #gge-app.gge *, #gge-app.gge *::before, #gge-app.gge *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Practical collection: discoverable without moving the existing progress UI. */
#gge-app.gge .gge-expansion-callout {
  margin: 20px 0 0; padding: 22px 24px; border: 1px solid #d9e2ce;
  border-radius: 18px; background: #f4f7ed; display: flex;
  justify-content: space-between; align-items: center; gap: 20px;
}
#gge-app.gge .gge-expansion-callout > div { min-width: 0; }
#gge-app.gge .gge-expansion-callout h2 { font-size: 19px; line-height: 1.5; margin: 7px 0; }
#gge-app.gge .gge-expansion-callout p { font-size: 12px; line-height: 1.8; color: #56685e; margin: 0; }
#gge-app.gge .gge-expansion-callout > div:last-child { flex-shrink: 0; display: grid; gap: 10px; }
#gge-app.gge .gge-expansion-callout a { font-size: 11px; line-height: 1.6; text-align: center; color: #1e4a3e; }
#gge-app.gge .gge-collection-label { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 12px; }
#gge-app.gge .gge-collection-label select { min-width: 0; max-width: 100%; padding: 9px 12px; border: 1px solid #d7dfd7; border-radius: 9px; font: inherit; background: #fff; color: #204c40; }
#gge-app.gge .gge-phrase h3 { overflow-wrap: anywhere; line-height: 1.4; }
.gge-static-lesson .gge-learning-note { padding: 18px 22px; background: #f5f7f0; border-left: 3px solid #5d8064; border-radius: 0 12px 12px 0; margin: 18px 0; }
.gge-static-lesson .gge-learning-note h2 { margin-top: 0; }
.gge-static-lesson .gge-learning-note p { margin-bottom: 0; }
@media (max-width: 600px) {
  #gge-app.gge .gge-expansion-callout { padding: 18px; flex-direction: column; align-items: stretch; gap: 13px; }
  #gge-app.gge .gge-expansion-callout h2 { font-size: 18px; }
  #gge-app.gge .gge-expansion-callout > div:last-child { grid-template-columns: 1fr; gap: 8px; }
  #gge-app.gge .gge-collection-label { align-items: flex-start; flex-direction: column; gap: 6px; }
  .gge-static-lesson .gge-learning-note { padding: 16px; }
}