:root{color-scheme:light;--ink:#182b25;--forest:#1d4a39;--muted:#465b50;--paper:#fffdf7;--line:#ccd8ca;--accent:#d9ed9b}
*{box-sizing:border-box}body{margin:0;background:#f2f4e9;color:var(--ink);font:1rem/1.6 system-ui,sans-serif}a{color:var(--forest)}[hidden]{display:none!important}button,select,.button{font:inherit;min-height:44px;border:1px solid #829787;border-radius:.45rem;padding:.45rem .8rem;background:var(--paper);color:var(--ink)}button,.button,summary{cursor:pointer}.button{text-decoration:none;display:inline-flex;align-items:center}button:hover,.button:hover{background:#e6efdc}button.primary{background:var(--forest);color:white;border-color:var(--forest)}button.primary:hover{background:#133628}:focus-visible{outline:3px solid #9a430a;outline-offset:4px}.skip{position:fixed;top:.5rem;left:.5rem;z-index:2;background:white;padding:.6rem;transform:translateY(-150%)}.skip:focus{transform:none}.wrap{width:min(1100px,calc(100% - 2rem));margin-inline:auto}.mast{border-bottom:1px solid var(--line);background:var(--paper)}.mast-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{font-size:1.3rem;font-weight:750;text-decoration:none}.logo{display:inline-grid;place-items:center;background:var(--forest);color:white;width:2rem;height:2rem;border-radius:.45rem;margin-right:.3rem;font-family:Georgia,serif}.edition,.eyebrow{letter-spacing:.12em;font-size:.75rem;font-weight:780}.edition,.muted{color:var(--muted)}.hero{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:#193f32;color:#fffdf7;padding:clamp(1.4rem,5vw,3.5rem);border-radius:1.1rem;margin:2rem 0}.hero h1{font:normal clamp(2.4rem,7vw,4.7rem)/1.03 Georgia,serif;margin:.55rem 0 1rem}.hero h1 span,.hero .eyebrow{color:var(--accent)}.hero p:last-child{margin-bottom:0;color:#e5efe2;max-width:42ch}.art{display:flex;align-items:center;padding-right:1rem}.art span{height:clamp(5rem,13vw,10rem);width:clamp(2rem,6vw,4.5rem);border:1px solid #c5daae;border-radius:.35rem;background:#315848;color:#f2f9df;display:grid;align-items:end;justify-items:center;padding-bottom:.7rem;font:1.1rem Georgia,serif;transform:rotate(10deg)}.art span:nth-child(2){transform:rotate(-5deg);background:#688355}.art span:nth-child(3){transform:rotate(16deg);background:#d9ed9b;color:var(--ink)}.layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,3fr);gap:1.2rem;align-items:start}.sidebar,.paper,.practice{background:var(--paper);border:1px solid var(--line);border-radius:.85rem;padding:clamp(1rem,3vw,2rem)}h2{line-height:1.2;margin:.2rem 0 1rem}.sidebar h2{font-size:1.1rem}.sidebar label{display:block;font-weight:650;font-size:.88rem}.sidebar label span{display:block;font-weight:450}.sidebar progress{width:100%;height:.7rem;margin:.4rem 0 1rem;accent-color:var(--forest)}.select-row{display:flex;gap:.45rem;margin-top:.3rem}.select-row select{min-width:0;flex:1}.muted{font-size:.9rem}.story-meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.eyebrow{margin:0}.badge{font-size:.82rem;padding:.1rem .55rem;border-radius:1rem;background:#e5efdc;color:#234436}.paper h2{font:normal clamp(1.9rem,5vw,3.15rem)/1.1 Georgia,serif;margin:.9rem 0}.story{font:1.25rem/1.7 Georgia,serif;max-width:60ch}.practice{margin-top:1rem}.practice details{border-top:1px solid var(--line);padding:.45rem 0}.practice summary,.foot summary{padding:.5rem 0;font-weight:650}.practice li{margin-bottom:.7rem}.practice li p{margin:.2rem 0}.practice input{width:1.15rem;height:1.15rem;accent-color:var(--forest);vertical-align:middle}.controls{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.grammar-card{background:#edf3e1;padding:1rem;margin-top:1.2rem;border-radius:.5rem}.grammar-card p{margin:.4rem 0}.foot{margin-block:2rem;border-top:1px solid var(--line);padding-top:1rem}@media(max-width:680px){.layout{grid-template-columns:1fr}.art{display:none}.hero{margin-top:1rem}.edition{font-size:.65rem}}
.page{padding-bottom:3rem}.site-links{display:flex;flex-wrap:wrap;gap:1rem}.language-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}.paper h1{font:normal clamp(2rem,5vw,3.5rem)/1.12 Georgia,serif;margin:.8rem 0}.paper dl{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;max-width:30rem}.paper dt{font-weight:650}.paper dd{margin:0}#lessons li{padding:.35rem 0}#lessons a{display:inline-block;padding:.25rem 0}

.word-search{margin:1rem 0;padding:1rem;background:#edf3e1;border-radius:.5rem;max-width:38rem}
.word-search label{display:block;font-weight:650;margin-bottom:.4rem}
.word-search-row{display:flex;flex-wrap:wrap;gap:.5rem}
.word-search input{flex:1 1 12rem;min-width:0;max-width:100%;min-height:44px;border:1px solid #829787;border-radius:.45rem;background:var(--paper);color:var(--ink);font:inherit;padding:.45rem .8rem}
#word-result{margin:0}
#word-result:not(:empty){margin-top:.6rem}
#voice-control{margin:.75rem 0}
#story-voice{max-width:100%}

@font-face {
  font-family: "Noto Sans Coptic";
  src: url("noto-sans-coptic.woff2") format("woff2");
  font-display: swap;
}
:lang(cop), .paper h1:lang(cop) { font-family: "Noto Sans Coptic", sans-serif; }
.alphabet-lesson { max-width: 44rem; }
.alphabet-lesson table { width: 100%; border-collapse: collapse; margin-block: 1rem; }
.alphabet-lesson caption { font-weight: 650; text-align: start; margin-bottom: .5rem; }
.alphabet-lesson th, .alphabet-lesson td {
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}
.alphabet-lesson th[scope="row"] { width: 29%; font-size: 1.15rem; }
.alphabet-lesson bdi { overflow-wrap: anywhere; }
#story-translation { margin-top: 1rem; }
#story-translation summary { font-weight: 650; min-height: 44px; padding-block: .55rem; }

/* The narrator and the story share the same panel at every screen width. */
.mast-inner { flex-wrap: wrap; padding-block: .65rem; gap: .5rem 1rem; }
.theme-toggle { font-size: .875rem; font-weight: 650; }
.comic {
  --mascot-width: clamp(4rem, 18vw, 10rem);
  --bubble: #fff9e8;
  --bubble-outline: #704366;
  display: grid;
  grid-template-columns: var(--mascot-width) minmax(0, 1fr);
  align-items: start;
  gap: .35rem;
  margin-block: 1.25rem;
}
.comic img { display: block; width: 100%; height: auto; }
.comic .story {
  position: relative;
  margin-top: calc(var(--mascot-width) * .24);
  padding: clamp(.65rem, 2.8vw, 1.5rem);
  background: var(--bubble);
  border: 2px solid var(--bubble-outline);
  border-radius: 1.25rem;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  overflow-wrap: anywhere;
}
.comic .story::before,
.comic .story::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--mascot-width) * -.23 - .35rem);
  width: calc(var(--mascot-width) * .23 + .45rem);
  height: calc(var(--mascot-width) * .20);
  clip-path: polygon(0 76%, 100% 0, 100% 100%);
  background: var(--bubble-outline);
}
.comic .story::after {
  top: 2px;
  left: calc(var(--mascot-width) * -.18 - .25rem);
  width: calc(var(--mascot-width) * .18 + .35rem);
  height: calc(var(--mascot-width) * .20 - 4px);
  background: var(--bubble);
}
.comic .story p:first-child { margin-top: 0; }
.comic .story p:last-child { margin-bottom: 0; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f5f3ff;
  --muted: #c5bddb;
  --paper: #201a31;
  --line: #59476f;
  --forest: #71ffeb;
  --accent: #d7ff64;
  --pink: #ff8bdd;
  --panel: #2c2042;
}
[data-theme="dark"] body { background: #100d1a; }
[data-theme="dark"] .hero {
  background: linear-gradient(120deg, #281942, #171f31);
  border: 1px solid var(--pink);
}
[data-theme="dark"] .hero p:last-child { color: var(--ink); }
[data-theme="dark"] .story-meta .eyebrow { color: var(--accent); }
[data-theme="dark"] .grammar-card,
[data-theme="dark"] .word-search,
[data-theme="dark"] .badge,
[data-theme="dark"] button:hover,
[data-theme="dark"] .button:hover,
[data-theme="dark"] .skip { background: var(--panel); }
[data-theme="dark"] .badge { color: var(--accent); }
[data-theme="dark"] button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #141620;
}
[data-theme="dark"] button.primary:hover { background: #ecffa6; }
[data-theme="dark"] .theme-toggle[aria-pressed="true"] {
  color: var(--forest);
  border-color: var(--forest);
}
[data-theme="dark"] :focus-visible { outline-color: var(--pink); }
[data-theme="dark"] .comic {
  --bubble: #2b203d;
  --bubble-outline: var(--pink);
}


.pet-profile { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap: 1.5rem; align-items: center; }
.pet-scene {
  display: grid;
  place-items: end center;
  margin: 0;
  min-height: 16rem;
  padding: 2rem;
  border-radius: .8rem;
  background:
    radial-gradient(circle at 77% 21%, #fff1ab 0 7%, transparent 7.5%),
    radial-gradient(ellipse 90% 60% at 14% 114%, #527b43 99%, transparent),
    radial-gradient(ellipse 108% 60% at 100% 102%, #85a95c 99%, transparent),
    linear-gradient(#9fd4d4, #f1dfa9);
}
[data-theme="dark"] .pet-scene {
  background:
    radial-gradient(circle at 77% 21%, #fff1c4 0 6%, transparent 6.5%),
    radial-gradient(ellipse 90% 60% at 14% 114%, #315643 99%, transparent),
    radial-gradient(ellipse 108% 60% at 100% 102%, #47644f 99%, transparent),
    linear-gradient(#1e2248, #545572);
}
.pet-avatar { position: relative; width: min(100%, 12rem); }
.pet-avatar img { display: block; width: 100%; height: auto; }
.pet-item { position: absolute; font-size: 2rem; line-height: 1; }
.pet-item-bandana { top: 53%; left: 64%; transform: rotate(-20deg); }
.pet-item-hat { top: -3%; left: 62%; transform: rotate(18deg); }
.pet-item-flower { top: 12%; left: 43%; }
.pet-shop { margin-top: 2rem; }
.pet-notice { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--paper); }
.pet-name-editor summary { width: fit-content; min-height: 44px; padding-block: .55rem; font-weight: 650; }
.pet-name-form label { display: block; margin-bottom: .25rem; }
.pet-name-form input[type="text"] {
  width: min(100%, 24rem);
  min-height: 44px;
  padding: .45rem .7rem;
  border: 1px solid #829787;
  border-radius: .45rem;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.pet-name-form p { margin: .35rem 0 .65rem; }

.app-footer { border-top: 1px solid var(--line); background: var(--paper); margin-top: auto; }
body:has(.app-footer) { display: flex; flex-direction: column; min-height: 100vh; }
.app-footer nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .25rem; padding-block: .55rem; }
.app-footer a { display: grid; place-items: center; min-height: 44px; border-radius: .45rem; font-weight: 700; }
.app-footer a[aria-current] { outline: 1px solid var(--line); text-decoration-thickness: .15em; }
.forum-form { display: grid; gap: .75rem; }
.forum-form textarea { width: 100%; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: .45rem; padding: .7rem; font: inherit; }
.forum-form button { justify-self: start; }
.forum-posts { margin-block: 1.5rem; }
.forum-posts .paper { margin-bottom: .75rem; }
.forum-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.story-quiz { margin-top: 1rem; }
.story-quiz ol { padding-left: 1.5rem; }
.story-quiz li { margin-block: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.quiz-question { min-width: 0; margin: 0; padding: 0; border: 0; }
.quiz-question legend { padding: 0; font-weight: 700; overflow-wrap: anywhere; }
.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: .5rem;
  margin-top: .5rem;
}
.quiz-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .4rem .6rem;
  border: 1px solid var(--muted);
  border-radius: .45rem;
  cursor: pointer;
}
.quiz-option input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--forest); }
.quiz-option span { min-width: 0; overflow-wrap: anywhere; }
.quiz-option:has(input:checked) { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.quiz-option:has(input:focus-visible) { outline: 3px solid #9a430a; outline-offset: 2px; }
[data-theme="dark"] .quiz-option:has(input:focus-visible) { outline-color: var(--pink); }
.quiz-question:disabled .quiz-option, .story-quiz button[aria-disabled="true"] { cursor: default; }

.gerbillingo-home .site-links { gap: .2rem .45rem; }
.gerbillingo-home .site-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .65rem;
  font-weight: 650;
  text-decoration: none;
}
.gerbillingo-home .site-links a:hover,
.gerbillingo-home .site-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: .25em;
}
.gerbillingo-home .home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-block: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 5vw, 3.75rem);
  border-radius: 1.25rem;
  background: #193f32;
  color: #fffdf7;
}
.gerbillingo-home .home-intro h1 {
  margin: 0;
  font: normal clamp(2.45rem, 6vw, 5.15rem)/1.02 Georgia, serif;
  letter-spacing: -.035em;
}
.gerbillingo-home .home-intro h1 em {
  display: block;
  color: var(--accent);
}
.gerbillingo-home .home-intro p {
  max-width: 47ch;
  margin-block: 1rem 1.35rem;
}
.gerbillingo-home .home-action {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-height: 44px;
  padding: .65rem 1.05rem;
  border-radius: .5rem;
  background: var(--accent);
  color: #182b25;
  font-weight: 750;
  text-decoration: none;
}
.gerbillingo-home .home-action:hover { text-decoration: underline; }
.gerbillingo-home .home-action:focus-visible { outline-color: #fffdf7; }
.gerbillingo-home .home-intro .home-account {
  margin: .65rem 0 0;
  font-size: .875rem;
}
.gerbillingo-home .home-mascot {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin: 0;
  padding: .5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #f8edbf, #dcbe7a 75%);
}
.gerbillingo-home .home-mascot img { display: block; width: 100%; height: auto; }
.gerbillingo-home .home-benefits { padding-block: clamp(1rem, 4vw, 2.5rem); }
.gerbillingo-home .home-benefits h2,
.gerbillingo-home .home-courses h2 {
  font: normal clamp(2rem, 5vw, 3.35rem)/1.06 Georgia, serif;
  letter-spacing: -.02em;
}
.gerbillingo-home .home-benefit-grid,
.gerbillingo-home .home-course-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
}
.gerbillingo-home .home-benefit-grid article {
  padding: 1.1rem 1.2rem;
  border-top: 3px solid var(--forest);
  border-radius: 0 0 .65rem .65rem;
  background: var(--paper);
}
.gerbillingo-home .home-benefit-grid h3 { margin: 0 0 .4rem; }
.gerbillingo-home .home-benefit-grid p { margin: 0; color: var(--muted); }
.gerbillingo-home .home-courses {
  margin-top: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.25rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--paper);
}
.gerbillingo-home .home-courses h2 { scroll-margin-top: 1rem; }
.gerbillingo-home .home-course-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.gerbillingo-home .home-course-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-height: 56px;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  font-weight: 750;
  text-decoration: none;
}
.gerbillingo-home .home-course-list a:hover {
  border-color: var(--forest);
  text-decoration: underline;
}
[data-theme="dark"] .gerbillingo-home .home-intro {
  border: 1px solid var(--pink);
  background: linear-gradient(125deg, #281942, #171f31);
}
[data-theme="dark"] .gerbillingo-home .home-mascot {
  background: radial-gradient(circle at 42% 36%, #ceb5fa, #685392 75%);
}
[data-theme="dark"] .gerbillingo-home .home-action:focus-visible { outline-color: var(--pink); }
@media (max-width: 680px) {
  .gerbillingo-home .home-intro { grid-template-columns: minmax(0, 1fr); }
  .gerbillingo-home .home-mascot { width: min(70%, 14rem); justify-self: center; }
}