/* English Club visual system: pearl, evergreen, and electric lime */
:root{
  color-scheme:light;
  --canvas:#f7faf4;
  --surface:#fffefa;
  --surface-soft:#f0f6eb;
  --surface-lime:#eaf5dc;
  --ink:#20382b;
  --ink-soft:#435b49;
  --muted:#5f7162;
  --line:#e2eade;
  --line-strong:#d4e2ce;
  --forest:#285b37;
  --leaf:#4f8a49;
  --lime:#b9f34d;
  --lime-bright:#c9ff62;
  --lime-shadow:#75b340;
  --font-ui:"SF Pro Rounded","SF Rounded",ui-rounded,"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"SF Pro Rounded","SF Rounded",ui-rounded,"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow-soft:0 5px 18px #2946320c;
  --shadow-hover:0 8px 22px #29463216;
}

*{font-family:var(--font-ui)}
body{
  background:radial-gradient(ellipse at 90% 5%,#eaf6db 0,transparent 34rem),linear-gradient(145deg,#fcfdf9 0%,var(--canvas) 62%,#f1f7ec 100%);
  color:var(--ink);
  font-size:15px;
  line-height:1.58;
}
button,input{font-family:var(--font-ui)}
h1,h2,h3,h4,.brand,.brand-wordmark,.lesson-heading h1,.practice-panel h2,.library-heading h1{font-family:var(--font-display)}

/* Header and first screen */
.topbar{background:rgba(255,254,250,.94);border-color:var(--line);box-shadow:0 1px 0 #b4d68b32;backdrop-filter:blur(12px)}
.brand{font-size:18px;letter-spacing:-.7px}
.brand-english{background:linear-gradient(105deg,#4d8a4a,#327447 58%,#78a83d);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-club{color:#354b39}
.topbar-center{color:#7b897e}
.saalpu-letters{font-family:var(--font-display)!important}
.home-active .welcome-view{isolation:isolate}
.home-active .welcome-view::before{content:"";position:absolute;z-index:-1;top:14%;right:7%;width:min(40vw,430px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ccf4934c 0,#b4e76b2b 39%,transparent 72%);filter:blur(11px);pointer-events:none}
.home-active .welcome-copy{position:relative;z-index:1}
.home-active .welcome-kicker{color:#5e7f54;letter-spacing:.09em}
.home-active .welcome-kicker span{color:#7dad43;text-shadow:0 0 13px #a9e56870}
.home-active .welcome-copy h1{color:#213a2b;letter-spacing:-.055em}
.home-active .welcome-copy h1 span{background:linear-gradient(105deg,#60984f 0%,#33784a 48%,#8fba3d 94%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.home-active .welcome-description{color:#5d7060;line-height:1.7}

/* One signature raised CTA, with a bevel integrated into its face */
.primary-button,.home-active .primary-button{
  position:relative;isolation:isolate;
  border:1px solid #72ab42;border-bottom:2px solid #669c3d;border-radius:15px;
  background:linear-gradient(180deg,#dcffa4 0%,#c9fa83 17%,#a9ed59 58%,#8bd549 100%);
  color:#24462b;text-shadow:0 1px 0 #ffffffb8;
  box-shadow:inset 0 1px 0 #ffffffed,inset 0 -2px 0 #679e3f42,0 4px 10px #47733b2e;
  transform:translateY(-1px);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.primary-button::before{content:"";position:absolute;z-index:-1;inset:2px 3px auto;height:35%;border-radius:11px 11px 9px 9px;background:linear-gradient(180deg,#ffffff75,#ffffff00);pointer-events:none}
.primary-button:hover,.home-active .primary-button:hover{background:linear-gradient(180deg,#e5ffb8 0%,#d1fb91 18%,#b7f36c 58%,#96df57 100%);box-shadow:inset 0 1px 0 #ffffffed,inset 0 -2px 0 #679e3f42,0 6px 14px #47733b3a;transform:translateY(-2px)}
.primary-button:active,.home-active .primary-button:active{border-bottom-width:1px;box-shadow:inset 0 2px 5px #477b3c40,0 1px 4px #47733b1f;transform:translateY(1px)}
.primary-button:focus-visible{outline:3px solid #9bd15d;outline-offset:4px}

/* Sidebar and progress */
.sidebar{background:rgba(255,254,250,.82);border-color:var(--line)}
.sidebar-intro h2{color:#2b4832;letter-spacing:-.035em}
.sidebar-intro p{color:var(--muted);font-size:12px}
.sidebar-eyebrow,.aside-heading{color:#708867;letter-spacing:.12em}
.nav-group{border-color:#e4ebdf}
.group-heading{color:#38523d;font-size:12px}
.group-count{color:#7d9672}
.group-icon{border:1px solid #e1ebd8}
.present-icon,.reference-icon{background:linear-gradient(145deg,#eff9df,#e2f2d2);color:#54823e}
.past-icon{background:linear-gradient(145deg,#f7f7e9,#edf1dd);color:#7a854e}
.future-icon{background:linear-gradient(145deg,#f2f8e6,#e4f1d8);color:#5b7f4d}
.nav-title,.nav-item,.nav-subtab,.reference-nav a{color:#5d715f}
.nav-title:hover,.nav-subtab:hover,.reference-nav a:hover{background:#f3f8eb;color:#3d7040}
.nav-title.active,.nav-title[aria-expanded="true"],.nav-item.active{background:linear-gradient(110deg,#f1f8e6,#e9f5dc);color:#3b6d3f}
.nav-title.active,.nav-title[aria-expanded="true"]{box-shadow:inset 0 0 0 1px #dcebcf}
.nav-item.active:before,.nav-subtab.active:before{background:#8fc84b;box-shadow:0 0 0 3px #e5f3d4}
.nav-subtab.active,.reference-nav a.active{background:#edf6e2;color:#3e713f}
.nav-practice{border-color:#e4ebdf;color:#637666;background:#fffefa}
.nav-practice:hover,.nav-practice.active{border-color:#d0e5bb;background:#eff7e4;color:#46783d}
.reference-nav{border-color:var(--line)}
.reference-heading{color:#718271}
.reference-nav a span{color:#699a4c}
.sidebar-bottom{border-color:var(--line)}
.leaf-icon{background:linear-gradient(145deg,#eaf6dc,#d9edc6);color:#578144}
.sidebar-bottom span{color:#78867b}
.progress-line{background:#e5ecdf}
.progress-line span{background:linear-gradient(90deg,#c8f56d,#78b846)}
.progress-label span+span{color:#59864a}

/* Lesson content: clear type, quiet cards, lime used as a guide */
.lesson-topline{color:#849487}
.breadcrumbs{color:#8ba17e}
.breadcrumbs a,.breadcrumbs strong{color:#5b824c}
.breadcrumbs a:hover{color:#315f38}
.lesson-meta,.lesson-heading-copy>p,.section-lead{color:#637568}
.lesson-heading{border-color:#e4ebdf;background:radial-gradient(ellipse at 94% 0,#eff8df 0,transparent 44%),linear-gradient(120deg,#f7faf2,#fffefa 72%)}
.lesson-heading h1,.section-heading h2,.library-heading h1{color:#243d2d;letter-spacing:-.04em}
.lesson-heading-copy>p{font-size:16px;line-height:1.7}
.lesson-kicker,.section-eyebrow,.subheading-note,.formula-label,.example-type,.video-source{color:#668256}
.kicker-pill{border:1px solid #dcebcf;background:#edf6e1;color:#4c783f}
.lesson-path-hint{border:1px solid #e3ebdd;border-left:3px solid #a9d95a;border-radius:13px;background:linear-gradient(100deg,#f3f8ea,#fffefa 62%);color:#566d59}
.lesson-path-hint strong{color:#477441}
.lesson-section{border-color:#e8ede4}
.section-heading h2{font-size:clamp(22px,2.4vw,27px)}
.section-number{display:grid;place-items:center;background:linear-gradient(145deg,#dafa9e,#b4e96a);color:#355f32;box-shadow:inset 0 1px #ffffffbd,0 2px 5px #587e3517}
.section-lead{font-size:16px;line-height:1.72}
.explanation-card,.academic-card,.example-card,.video-card,.pattern-card,.formula-card,.lesson-formulas{border-color:#e4ebdf;background:#fffefa}
.explanation-card{background:linear-gradient(110deg,#f4f9ec,#fffefa 65%);box-shadow:inset 3px 0 #b6e66e,var(--shadow-soft)}
.card-icon,.video-play,.note-icon,.complete-icon{background:linear-gradient(145deg,#eff9df,#e1f1d2);color:#588742}
.explanation-card strong,.subheading-row h3,.tip-row strong,.video-copy strong,.academic-card h3{color:#314b36}
.explanation-card p,.pattern-card p,.academic-card p,.academic-card li,.tip-row p,.example-context,.video-copy>span:last-child{color:#66766a}
.formula-card,.lesson-formulas{box-shadow:inset 0 1px #fff,var(--shadow-soft)}
.formula-line,.lesson-formula-row,.formula-divider,.tip-row{border-color:#e9eee6}
.formula-tense,.formula-example b,.lesson-formula-label,.academic-card .academic-example{color:#4f8047}
.grammar-note,.question-pattern{border-color:#e1ead7;background:linear-gradient(110deg,#f0f7e7,#f8faf4)}
.grammar-note p,.pattern-hint{color:#617262}
.say-it-card,.confidence-card,.remember-card{border-color:#e2eadb;background:linear-gradient(110deg,#f1f7e8,#fbfcf8)}
.say-it-card{box-shadow:inset 3px 0 #a8da59}
.say-it-label,.confidence-card strong{color:#4e7e42}
.say-it-icon{background:#e5f2d7;color:#5c8c43}
.tip-bullet{background:linear-gradient(145deg,#dcf8a5,#b6e96b);color:#3c6537;box-shadow:inset 0 1px #ffffffb8}
.confidence-sparkle,.confidence-heart{color:#84ad54}
.example-card{position:relative;overflow:hidden;box-shadow:0 3px 12px #29463209}
.example-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,#c7f678,#7ebf4c)}
.example-card p{color:#2f4935}
.example-icon{color:#55823f}
.example-number{color:#91b874}
.video-card:hover{border-color:#c9dfb6;box-shadow:var(--shadow-hover)}
.video-arrow,.video-footnote>span{color:#628d49}
.lesson-step-nav{border-color:#e5ecdf}
.lesson-step-nav>span{color:#7a897c}
.lesson-step-nav button{border-color:#e1e9dc;background:#fffefa;color:#557253}
.lesson-step-nav button:last-child,.practice-complete .lesson-step-nav button:last-child{border-color:#d6e6c8;background:linear-gradient(145deg,#f2f8e9,#e6f1dc);color:#496d40}
.lesson-step-nav button:hover:not(:disabled){background:#edf5e5}

/* Practice and reference pages */
.practice-panel,.practice-complete{border-color:#e2eadc;background:linear-gradient(145deg,#fffefa,#fafcf7);box-shadow:0 7px 22px #29463210}
.practice-kicker,.library-kicker{color:#64874f;letter-spacing:.09em}
.practice-panel h2,.practice-complete h2{color:#294432}
.practice-count{color:#669a43}
.practice-instruction,.practice-complete>p:not(.practice-kicker){color:#657569}
.practice-question{border-color:#e0ead8;background:radial-gradient(ellipse at 50% 0,#f0f8e3,transparent 74%),#fbfcf8}
.practice-sentence{color:#344b38}
.drop-slot{border-color:#9fca70;background:#f2f8e9;color:#4a783d}
.drop-slot:not(.has-word){color:#748e62}
.drop-slot.drag-over,.drop-slot.has-word{border-color:#81b84c;background:#eaf5dd;box-shadow:0 0 0 3px #e0efce}
.choice-chip{border-color:#e2eadc;background:#fffefa;color:#405942;box-shadow:0 2px 7px #2946320c}
.choice-chip:hover{border-color:#cde1b8;background:#fbfff5;box-shadow:0 5px 12px #47783a1a}
.choice-chip:active,.choice-chip.dragging{background:#edf5e4}
.check-answer,.next-question,.hint-button{border-color:#dce8d3;background:#fffefa;color:#506d51}
.check-answer,.next-question{background:linear-gradient(145deg,#f5f9ed,#eaf4e1);box-shadow:inset 0 1px #fff,0 2px 5px #2946320d}
.check-answer:not(:disabled):hover,.next-question:hover{border-color:#c5dda9;background:linear-gradient(145deg,#f0f8e4,#e4f1d7)}
.check-answer:disabled{border-color:#e4e9e1;background:#eff1ec;color:#909b91;box-shadow:none}
.practice-feedback{color:#4c813c}
.practice-progress{background:#e6ede0}
.practice-progress span{background:linear-gradient(90deg,#caf274,#96d34d 56%,#5f9d47)}
.library-back,.library-search-label{color:#59764f}
.library-back:hover{color:#35683a}
.library-heading>p:last-child{color:#657569}
.library-search{border-color:#dfe8d9;background:#fffefa;color:#2d4533}
.library-search:focus{border-color:#9bc768;box-shadow:0 0 0 3px #eaf4dc}
.verb-table-wrap{border-color:#e2eade;background:#fffefa}
.verb-table th{background:linear-gradient(100deg,#eff6e7,#e7f1dd);color:#4d7042}
.verb-table td{border-color:#ebefe8;color:#4c5d4d}
.verb-table tbody tr:nth-child(even){background:#fafbf8}
.verb-table tbody tr:hover{background:#f0f7e8}
.sentence-list li{border-color:#e4ebdf;background:#fffefa;color:#475a49}
.sentence-index{color:#6d9b4d}

/* Arabic help, accessibility, and polish */
.arabic-help-trigger{border-color:#d9e7d0;background:#f2f8e9;color:#4e773f}
.arabic-help-trigger:hover,.arabic-help-trigger[aria-expanded="true"]{border-color:#c6dda9;background:#eaf5dd;color:#426e39}
.arabic-help-trigger:focus-visible,.arabic-help-close:focus-visible{outline:3px solid #9ecb69;outline-offset:3px}
.arabic-help-popover{border-color:#dfe9d8;background:#fffefa;box-shadow:0 12px 30px #29463220;color:#304738}
.arabic-help-popover-head{border-color:#e8eee3}
.arabic-help-popover-head strong{color:#4a713f}
.arabic-help-popover p{color:#4d5d50}
.arabic-help-close{border-color:#e2eadd;background:#f8faf5;color:#596d5d}
.mode-button:hover{color:#3f733d}
.mode-button.active{background:linear-gradient(145deg,#eff7e5,#e6f2db);color:#426e3d;box-shadow:inset 0 1px #fff,0 2px 6px #537b3a16}
.lesson-mode-switch{border-color:#e1e9dc;background:#fffefa;box-shadow:0 2px 8px #2946320a}
.site-footer{border-color:#e3eade;color:#7c8b7e}
.site-footer>span:first-child,.site-footer>span:last-child{color:#6c8a60}
:focus-visible{outline-color:#9ecb69}
@media(max-width:740px){
  .home-active .welcome-view::before{top:12%;right:-13%;width:75vw;opacity:.72}
  #lesson-nav .nav-items:not(.collapsed),.reference-group .nav-items:not(.collapsed){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:3px;margin:4px 3px 0;width:auto;min-width:0}
  .nav-lesson-row{width:auto;min-width:0;flex:initial;padding:0}
  .nav-title{min-height:38px;padding:7px 8px;white-space:normal;line-height:1.3}
  .nav-title>span:first-child{min-width:0}
  .nav-subtabs{padding:2px 2px 5px 9px;gap:1px}
  .nav-subtab{min-height:31px;padding:6px 8px;font-size:10px}
  .reference-group .nav-item{font-size:11px}
  .verb-table th{padding:12px 10px;font-size:10px}
  .verb-table td{padding:12px 10px;font-size:12px}
  .sentence-list li{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.primary-button,.home-active .primary-button,.primary-button:hover,.home-active .primary-button:hover,.primary-button:active,.home-active .primary-button:active{transform:none;transition:none}}

/* Final art direction: deliberate spacing, stronger hierarchy, useful hero artwork */
:root{--radius-control:12px;--radius-card:18px;--radius-panel:24px;--radius-hero:30px}
.topbar{position:relative;top:auto;border-radius:20px;box-shadow:0 1px 0 #b4d68b32}
.home-active .welcome-view{
  grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);
  max-width:1180px;
  min-height:calc(100svh - 82px);
  padding:clamp(60px,9vh,112px) clamp(28px,5vw,68px) 76px;
  column-gap:clamp(28px,5vw,70px);
}
.home-active .welcome-copy{max-width:580px;padding:0}
.home-active .welcome-copy h1{font-size:clamp(52px,6.1vw,78px);line-height:1.02;letter-spacing:-.065em;margin:20px 0 17px}
.home-active .welcome-description{max-width:460px;font-size:16px;line-height:1.72;margin-bottom:26px}
.home-active .welcome-art{
  display:block;
  width:100%;max-width:470px;height:365px;min-height:365px;margin:0 auto;
  transform:none;border:1px solid #e6efde;border-radius:var(--radius-hero);
  background:radial-gradient(ellipse at 55% 43%,#e5f4d2 0%,#edf6e5 39%,#f5f9f0 72%,#f8faf5 100%);
  box-shadow:inset 0 1px #fff,0 18px 46px #3a62320d;
}
.welcome-art .art-sun{top:35px;right:48px;width:62px;height:62px;background:linear-gradient(145deg,#d7ff88,#aee65a);opacity:.9;box-shadow:0 0 32px #9fe55250}
.welcome-art .art-shape{top:58px;left:50%;width:75%;height:68%;background:linear-gradient(145deg,#e3f3d5,#d5ebc4 65%,#c5e5ae);border-radius:47% 53% 57% 43%/48% 43% 57% 52%;opacity:.85;box-shadow:inset 0 1px 0 #fff8}
.welcome-art .art-book{top:51%;left:52%;width:225px;height:164px;border:1px solid #8eb37f;border-radius:13px 17px 16px 13px;background:linear-gradient(145deg,#609267 0%,#457c58 68%,#356846 100%);color:#f7faef;transform:translate(-47%,-31%) rotate(-6deg);box-shadow:inset 0 1px 0 #ffffff70,0 11px 24px #2a573426,0 3px 0 #315f43}
.welcome-art .art-book:after{right:15px;width:8px;background:linear-gradient(90deg,#345f43,#294d39);border-left:1px solid #ffffff47}
.welcome-art .book-label{top:34px;left:28px;font-size:10px;letter-spacing:1.4px;color:#edf6e6}
.welcome-art .book-label strong{font-family:var(--font-display);font-size:18px;letter-spacing:1.4px}
.welcome-art .book-sparkle{color:#d4f18a}
.welcome-art .art-card{top:11%;left:2%;width:180px;padding:17px 16px 18px;border:1px solid #ffffff;border-radius:18px;background:rgba(255,254,250,.96);backdrop-filter:blur(10px);box-shadow:0 11px 24px #355c3318;transform:rotate(-3deg)}
.welcome-art .card-mini{font-size:8px;letter-spacing:.12em;color:#70836d}
.welcome-art .card-sentence{font-family:var(--font-display);font-size:17px;line-height:1.42;color:#294332}
.welcome-art .card-sentence span{font-style:normal;color:#568646}
.welcome-art .card-check{background:linear-gradient(145deg,#c9fa7c,#91cd4c);color:#315d35;box-shadow:inset 0 1px #fff9}
.welcome-art .art-plant{left:9%;bottom:7%;transform:scale(.8);transform-origin:bottom left}
.welcome-art .plant-stem{background:#82a775}
.welcome-art .plant-leaf{background:linear-gradient(135deg,#a9d88a,#6da46b)}
.welcome-art .plant-pot{background:linear-gradient(145deg,#d5e9bf,#a8c88e)}
.welcome-art .art-pencil,.welcome-art .art-sticker{display:none}
.welcome-art .art-caption{bottom:5%;font-size:8px;letter-spacing:.13em;color:#77906f}
.welcome-art .caption-line{background:#a9c994}

.lesson-view{max-width:1120px;padding:34px clamp(22px,4vw,54px) 56px}
.lesson-layout{grid-template-columns:minmax(0,1fr);gap:0}
.lesson-article{width:100%;max-width:900px;margin:0 auto}
.lesson-heading{border-radius:var(--radius-panel);padding:clamp(25px,4vw,42px);}
.lesson-heading h1{font-size:clamp(34px,4vw,48px);line-height:1.1;letter-spacing:-.055em}
.lesson-heading .title-period{color:#5f873e}
.lesson-heading-copy>p{max-width:620px;font-size:17px;line-height:1.65}
.lesson-path-hint{border-radius:var(--radius-control);padding:14px 17px;font-size:14px}
.lesson-section{margin-bottom:46px}
.section-heading{gap:14px;margin-bottom:16px}
.section-heading h2{font-size:clamp(23px,2.6vw,29px);line-height:1.24;letter-spacing:-.04em}
.section-number{width:38px;height:38px;flex:none;border-radius:13px;font-size:12px}
.section-lead{max-width:78ch;font-size:16px;line-height:1.78}
.section-lead strong,.lesson-article strong,.academic-card strong,.example-card p strong,.grammar-note strong{color:#386c3d}
.explanation-card,.formula-card,.pattern-card,.academic-card,.video-card,.practice-panel,.practice-complete{border-radius:var(--radius-card)}
.explanation-card{padding:21px 23px;gap:15px}
.explanation-card p,.pattern-card p,.academic-card p,.academic-card li,.tip-row p,.example-context{font-size:14px;line-height:1.72}
.subheading-row{margin:26px 0 12px}
.subheading-row h3{font-size:18px;letter-spacing:-.025em}
.formula-card,.lesson-formulas{padding:11px 19px}
.formula-line,.lesson-formula-row{min-height:54px;font-size:14px}
.grammar-note{border-radius:var(--radius-control);padding:14px 16px}
.two-cards{gap:14px}
.pattern-card{padding:18px 20px}
.academic-grid{gap:16px;margin-top:20px}
.academic-card{padding:22px 23px;border-radius:var(--radius-card)}
.academic-card h3{font-size:18px;line-height:1.3;margin-bottom:12px}
.academic-card ul{gap:10px}
.example-list{gap:10px}
.example-card{min-height:76px;padding:15px 18px;gap:15px;border-radius:16px}
.example-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:13px;background:#f0f7e8}
.example-card p{font-size:16px;line-height:1.45}
.example-context{font-size:13px}
.say-it-card,.confidence-card{border-radius:var(--radius-card);padding:20px 22px}
.tip-list{display:grid;gap:10px}
.tip-row{gap:14px;padding:16px 18px;border:1px solid #e7ede2;border-radius:16px;background:#fffefa}
.tip-bullet{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:11px;font-size:11px}
.video-card{min-height:90px;padding:17px 19px;margin-bottom:10px;border-radius:16px}
.video-copy strong{font-size:15px}
.lesson-footer{margin-top:34px;padding-top:24px;border-top:1px solid #e4ebdf}
.lesson-step-nav button{min-height:46px;border-radius:13px;padding:10px 17px}
.practice-panel{padding:clamp(24px,4vw,40px);}
.practice-question{border-radius:20px}
.choice-chip,.check-answer,.next-question,.hint-button{border-radius:13px}
.library-page{max-width:1040px;padding:clamp(30px,5vw,64px) clamp(22px,5vw,68px) 72px}
.library-heading{margin:34px 0 28px}
.library-heading h1{font-size:clamp(34px,5vw,48px);line-height:1.12}
.library-heading>p:last-child{font-size:16px}
.library-search{max-width:560px;height:50px;border-radius:14px;padding-inline:17px}
.verb-table-wrap{border-radius:18px;box-shadow:var(--shadow-soft)}
.verb-table th{padding:15px 18px}
.verb-table td{padding:13px 18px}
.sentence-list{gap:11px 15px}
.sentence-list li{border-radius:15px;padding:15px 17px;font-size:14px}
.arabic-help-trigger{width:26px;height:26px;flex:0 0 26px;border-radius:50%;vertical-align:middle;font-family:var(--font-ui);font-weight:700;box-shadow:inset 0 1px #fff,0 1px 4px #385a3010}
.section-lead .arabic-help-trigger,.explanation-card p .arabic-help-trigger,.grammar-note p .arabic-help-trigger,.pattern-card p .arabic-help-trigger,.academic-card p .arabic-help-trigger,.academic-card li .arabic-help-trigger,.tip-row p .arabic-help-trigger{margin:0 0 0 7px}
.formula-card+.arabic-help-trigger{margin:8px 0 12px auto}
.mode-button,.nav-title,.nav-subtab,.nav-practice,.lesson-step-nav button,.choice-chip,.check-answer,.next-question,.hint-button{font-family:var(--font-ui)}
@media(max-width:740px){
  .home-active .welcome-view{grid-template-columns:minmax(0,1fr);max-width:680px;min-height:calc(100svh - 62px);padding:clamp(48px,10vh,76px) 24px 64px;row-gap:0}
  #lesson-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #lesson-nav .nav-group{margin:0;align-self:start}
  #lesson-nav .nav-group:has(.nav-items:not(.collapsed)){grid-column:1/-1}
  .home-active .welcome-copy h1{font-size:clamp(46px,11vw,62px);letter-spacing:-.055em}
  .home-active .welcome-description{font-size:15px}
  .home-active .welcome-art{display:none}
  .lesson-view{padding:24px 16px 42px}
  .lesson-heading{padding:23px 20px;border-radius:20px}
  .lesson-heading h1{font-size:clamp(32px,9vw,40px)}
  .lesson-heading-copy>p{font-size:15px}
  .lesson-path-hint{padding:12px 13px;font-size:12px}
  .lesson-section{margin-bottom:36px}
  .section-heading{gap:10px}
  .section-heading h2{font-size:22px}
  .section-number{width:34px;height:34px;border-radius:11px}
  .section-lead{font-size:15px;line-height:1.72}
  .explanation-card,.academic-card,.pattern-card{padding:17px}
  .academic-grid{grid-template-columns:minmax(0,1fr);gap:11px}
  .academic-card h3{font-size:16px}
  .academic-card p,.academic-card li,.tip-row p{font-size:13px}
  .example-card{padding:13px 12px;gap:10px}
  .example-card p{font-size:14px}
  .example-icon{width:34px;height:34px;border-radius:11px}
  .example-context{font-size:12px}
  .tip-row{padding:13px 12px;gap:10px}
  .tip-bullet{width:29px;height:29px;border-radius:10px}
  .lesson-step-nav button{min-height:44px;padding:9px 10px;font-size:12px}
  .practice-panel{padding:19px 15px}
  .practice-question{min-height:110px;padding:17px 12px}
  .practice-sentence{font-size:17px}
  .choice-chip{min-width:78px;padding:10px 13px}
  .library-page{padding:28px 16px 52px}
  .library-heading{margin:26px 0 22px}
  .library-heading h1{font-size:34px}
  .verb-table-wrap{margin-inline:-2px}
  .verb-table th{padding:12px 9px}
  .verb-table td{padding:12px 9px}
  .sentence-list{gap:8px}
}
@media(min-width:741px) and (max-width:1000px){
  .home-active .welcome-view{grid-template-columns:minmax(0,1fr) minmax(290px,.8fr);column-gap:28px;padding-inline:32px}
  .home-active .welcome-art{height:330px;min-height:330px}
  .welcome-art .art-card{width:154px}
}

/* Keep grammatical emphasis in the same language as the visual system. */
.lesson-heading .title-period{color:#75a746}
.lesson-view .lesson-article b,
.lesson-view .lesson-article strong{color:#467b3f}

/* Darker secondary labels keep the soft palette legible at small sizes. */
.topbar-center,.sidebar-intro p,.lesson-topline,.breadcrumbs{color:#5f7162}
.breadcrumbs a,.breadcrumbs strong{color:#4e7841}
.sidebar-eyebrow,.aside-heading,.lesson-kicker,.section-eyebrow,.subheading-note,.formula-label,.example-type,.video-source{color:#526f47}
.group-count,.progress-label,.example-number,.sentence-index{color:#5c794b}
.practice-count,.practice-kicker,.library-kicker{color:#4f783e}
.welcome-art .card-mini,.welcome-art .art-caption{color:#586e53}
.home-active .welcome-copy h1 span{background-image:linear-gradient(105deg,#58894a 0%,#34784a 52%,#66893d 100%)}
.academic-card li::marker{color:#4f8047}
.academic-card em{color:#536f47}
.verb-table td:first-child{color:#5c794b}
.sidebar-bottom span,.lesson-step-nav>span,.site-footer,.site-footer>span:first-child,.site-footer>span:last-child{color:#5f7162}

/* Fluid layout: keep every grid and flex child inside the available viewport. */
html{scroll-padding-top:18px}
body{overflow-x:clip;font-size:clamp(15px,1.1vw,16px)}
.app-shell,.app-shell>main,.sidebar,.lesson-view,.lesson-layout,.lesson-article,.library-view,.library-page,.practice-panel,.practice-complete{min-width:0}
.app-shell{width:100%;grid-template-columns:clamp(224px,21vw,286px) minmax(0,1fr)}
main{min-width:0;width:100%}
.home-active .welcome-view{grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr)}
.home-active .welcome-copy,.home-active .welcome-art{min-width:0}
.lesson-view{width:100%;padding-inline:clamp(20px,4vw,54px)}
.lesson-heading-copy{min-width:0}
.lesson-heading-copy>p{max-width:62ch}
.section-heading>div,.explanation-card>div:last-child,.video-copy,.example-card>div{min-width:0}
.formula-example{min-width:0}
.practice-panel-top{flex-wrap:wrap}
.practice-sentence{max-width:100%;overflow-wrap:anywhere}
.choice-bank{min-width:0}
.library-page{width:100%}
.verb-table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.verb-table{min-width:560px}
.sentence-list li{min-width:0;overflow-wrap:anywhere}

@media (min-width:741px) and (max-width:1000px){
  .app-shell{grid-template-columns:clamp(205px,24vw,240px) minmax(0,1fr)}
  .sidebar{padding-inline:clamp(13px,2vw,20px)}
  .home-active .welcome-view{grid-template-columns:minmax(0,1fr);max-width:760px;min-height:auto;padding:clamp(42px,7vh,76px) clamp(28px,5vw,52px) 54px;row-gap:26px}
  .home-active .welcome-copy{max-width:640px}
  .home-active .welcome-art{width:min(100%,440px);height:clamp(250px,34vw,310px);min-height:0}
  .home-active .welcome-copy h1{font-size:clamp(50px,6.2vw,66px)}
  .lesson-view{padding-inline:clamp(20px,3.5vw,34px)}
}

@media(max-width:740px){
  .app-shell{display:flex;flex-direction:column;width:100%;min-height:calc(100svh - 62px)}
  .app-shell>.sidebar{order:0;width:auto;max-width:none;min-width:0;margin-inline:10px}
  .app-shell>main{order:1;width:100%;max-width:100%;overflow:visible}
  .home-active .app-shell{display:grid;grid-template-columns:minmax(0,1fr)}
  .topbar{width:auto;min-height:58px;height:auto;padding:9px clamp(12px,4vw,18px);gap:8px}
  .brand{min-width:0;gap:7px;font-size:clamp(14px,4vw,17px);letter-spacing:-.045em;white-space:nowrap}
  .saalpu-mark{flex:none}
  .lesson-view{padding:clamp(18px,5vw,26px) clamp(14px,4vw,20px) 42px}
  .lesson-topline{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .breadcrumbs{min-width:0;flex-wrap:wrap;row-gap:3px;font-size:clamp(10px,2.9vw,12px)}
  .lesson-meta{font-size:10px}
  .lesson-heading{min-height:0;margin-top:18px;padding:clamp(20px,6vw,27px);border-radius:20px}
  .lesson-heading h1{max-width:100%;font-size:clamp(32px,8.6vw,42px);line-height:1.08;overflow-wrap:anywhere}
  .lesson-heading-copy>p{max-width:38ch;font-size:clamp(14px,3.8vw,16px);line-height:1.6}
  .lesson-path-hint{font-size:clamp(12px,3.4vw,14px)}
  .section-lead{font-size:clamp(15px,3.8vw,16px)}
  .section-heading h2{font-size:clamp(21px,5.6vw,25px);overflow-wrap:anywhere}
  .two-cards{grid-template-columns:minmax(0,1fr);gap:10px}
  .formula-card,.lesson-formulas{width:100%;max-width:100%}
  .formula-line{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:5px 8px;min-height:0;padding:11px 0}
  .formula-label{width:auto;min-width:0;font-size:clamp(9px,2.6vw,11px);line-height:1.35}
  .formula-equals{text-align:center}
  .formula-tense{min-width:0;font-size:clamp(14px,4vw,17px)}
  .formula-example{grid-column:1/-1;margin:0;font-size:14px;line-height:1.4}
  .lesson-formulas{padding:7px 12px}
  .lesson-formula-row{grid-template-columns:minmax(78px, .42fr) minmax(0,1fr);gap:8px;min-height:46px;font-size:clamp(12px,3.3vw,14px);overflow-wrap:anywhere}
  .lesson-formula-label{font-size:9px;line-height:1.35}
  .example-card{align-items:flex-start}
  .example-card p{min-width:0;overflow-wrap:anywhere}
  .lesson-step-nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .lesson-step-nav button{min-width:0;white-space:normal}
  .practice-panel{width:100%;padding:clamp(17px,5vw,23px) clamp(14px,4vw,19px)}
  .practice-panel-top{align-items:flex-start}
  .practice-count{font-size:clamp(17px,5vw,21px)}
  .practice-question{min-width:0;padding:16px 10px}
  .practice-sentence{gap:6px;font-size:clamp(16px,4.6vw,19px);line-height:1.7}
  .drop-slot{min-width:88px;max-width:100%;padding-inline:10px;font-size:14px}
  .choice-bank{gap:8px}
  .choice-chip{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .practice-actions>*{flex:0 1 auto;max-width:100%}
  .library-page{padding:clamp(24px,6vw,34px) clamp(14px,4vw,20px) 48px}
  .library-heading h1{font-size:clamp(31px,8vw,38px)}
  .library-heading>p:last-child{font-size:15px;line-height:1.65}
  .library-search{max-width:100%;height:48px}
  .verb-table{min-width:540px}
  .sentence-list{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:380px){
  .topbar{padding-inline:10px;gap:5px}
  .brand{gap:5px;font-size:13px}
  .saalpu-letters{font-size:12px;letter-spacing:-.04em}
  .sidebar{padding-inline:8px}
  .nav-title{font-size:11px}
  .lesson-heading{padding:19px 16px}
  .lesson-section{margin-bottom:30px}
  .formula-card,.lesson-formulas{padding-inline:10px}
  .formula-line{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);column-gap:5px}
  .lesson-formula-row{grid-template-columns:72px minmax(0,1fr);gap:7px;font-size:12px}
  .lesson-step-nav button{font-size:11px}
  .practice-panel-top{gap:6px}
  .drop-slot{min-width:78px}
  .choice-chip{padding-inline:10px}
}

/* Real transparent hero cutout: let the page surface show through its alpha. */
.home-active .welcome-view::before{display:none}
.home-active .welcome-art{
  display:grid;
  place-items:center;
  width:min(100%,500px);
  height:auto;
  min-height:0;
  aspect-ratio:3/2;
  margin-inline:auto;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.welcome-illustration{display:block;width:100%;height:auto;object-fit:contain;object-position:center}
@media(max-width:740px){
  .home-active .welcome-art{width:min(100%,380px);margin:20px auto 0}
}

/* Character stickers and lively, accessible practice feedback */
.welcome-motto{
  margin:-10px 0 23px;
  color:#497841;
  font-size:clamp(15px,1.45vw,18px);
  font-weight:750;
  letter-spacing:-.025em;
}
.lesson-heading .heading-illustration{
  display:block!important;
  position:absolute;
  top:50%;
  right:clamp(18px,3.2vw,38px);
  width:112px;
  height:112px;
  margin:0;
  transform:translateY(-50%);
  flex:none;
}
.lesson-heading{min-height:0;padding:clamp(22px,3vw,32px) clamp(20px,3.2vw,38px)}
.lesson-heading-copy{max-width:calc(100% - 126px)}
.lesson-object-sticker{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 7px #285b371a);
}
.practice-feedback{min-height:0}
.practice-feedback-success{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:min(100%,560px);
  min-height:92px;
  margin:18px auto 4px;
  padding:14px 22px;
  overflow:hidden;
  border:1px solid #d6e9c8;
  border-radius:20px;
  background:radial-gradient(ellipse at 86% 0,#eff9d9 0,transparent 55%),linear-gradient(120deg,#fbfff6,#f2f8e9);
  box-shadow:inset 0 1px #fff,0 6px 18px #47783a12;
  color:#315f36;
  animation:success-card-in .38s cubic-bezier(.2,.8,.2,1) both;
}
.answer-checkmark{
  z-index:1;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:none;
  border:1px solid #b9df8d;
  border-radius:50%;
  background:linear-gradient(145deg,#dfffaa,#b8ed75);
  box-shadow:inset 0 1px 0 #fff,0 3px 8px #47783a20;
  color:#386b36;
  font-size:25px;
  font-weight:800;
  animation:success-mark-pop .45s cubic-bezier(.2,.8,.2,1) both;
}
.feedback-copy{position:relative;z-index:1;text-align:left}
.feedback-copy>strong{display:block;color:#315f36;font-size:15px;font-weight:800}
.feedback-copy>p,.complete-motivation{
  margin:5px 0 0;
  color:#4d693f;
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  font-size:clamp(14px,2vw,17px);
  font-weight:750;
  line-height:1.75;
}
.celebration-spark{position:absolute;z-index:2;color:#8bc64f;font-size:20px;animation:spark-burst .8s ease-out both}
.celebration-spark-one{top:10px;left:18px}
.celebration-spark-two{right:19px;top:20px;color:#8e72d2;font-size:17px;animation-delay:.08s}
.answer-celebration .drop-slot.has-word{border-color:#83bb50;background:linear-gradient(145deg,#eff9df,#e1f2cf);box-shadow:0 0 0 4px #dff0ce,0 3px 8px #4c853322}
.answer-celebration .choice-bank{opacity:.58}
.practice-feedback-error{
  display:grid;
  justify-items:center;
  gap:3px;
  margin:14px auto 4px;
  color:#8c5c52;
  font-size:13px;
}
.practice-motivation-line{
  margin:5px 0 0;
  color:#4d693f;
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  font-size:clamp(14px,2vw,17px);
  font-weight:750;
  line-height:1.75;
  text-align:right;
}
.practice-complete{position:relative;overflow:hidden}
.complete-motivation{
  width:fit-content;
  max-width:100%;
  margin:13px auto 19px;
  padding:8px 15px;
  border:1px solid #e1edcf;
  border-radius:14px;
  background:#f4f9eb;
}
@keyframes success-card-in{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes success-mark-pop{0%{opacity:0;transform:scale(.45) rotate(-18deg)}72%{opacity:1;transform:scale(1.12) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes spark-burst{0%{opacity:0;transform:scale(.2) rotate(-25deg)}55%{opacity:1;transform:scale(1.18) rotate(10deg)}100%{opacity:.8;transform:scale(1) rotate(0)}}
@media(max-width:740px){
  .lesson-heading{padding:20px 16px}
  .lesson-heading .heading-illustration{right:14px;width:66px;height:66px}
  .lesson-heading-copy{max-width:calc(100% - 76px)}
  .practice-feedback-success{gap:9px;padding:10px 13px;border-radius:16px}
  .answer-checkmark{width:40px;height:40px;font-size:21px}
  .feedback-copy>strong{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .practice-feedback-success,.answer-checkmark,.celebration-spark{animation:none!important}
}