:root{
 --ritrich-blue:#1456d9;
 --ritrich-deep:#0b2f73;
 --ritrich-sky:#eaf4ff;
 --ritrich-yellow:#ffd84d;
 --ritrich-coral:#ff6b5f;
 --ritrich-purple:#7357d9;
 --ritrich-teal:#14866f;
 --ritrich-social:#1678b8;
 --ink:#17365d;
}
body{
 color:var(--ink);
 background:linear-gradient(180deg,#f4f9ff 0,#fff 36%,#f8fbff 100%);
}
header{
 min-height:100px;
 color:#fff;
 border:0;
 background:linear-gradient(115deg,var(--ritrich-deep),var(--ritrich-blue) 58%,#2587e8);
 box-shadow:0 8px 24px rgba(20,86,217,.18);
}
.brand{color:#fff;font-size:26px}
.logo{
 background:#fff;
 color:var(--ritrich-blue);
 box-shadow:0 7px 18px rgba(5,30,82,.24);
}
.logo span{color:var(--ritrich-yellow)}
.header-note{color:#e8f3ff;font-weight:700}
.intro{
 position:relative;
 overflow:hidden;
 padding:34px 38px;
 border:1px solid #cfe3ff;
 border-radius:28px;
 background:linear-gradient(125deg,#fff 5%,#edf6ff 60%,#fff5c9);
 box-shadow:0 18px 38px rgba(28,80,145,.10);
}
.intro:after{
 content:'✦';
 position:absolute;
 right:34px;
 top:20px;
 color:var(--ritrich-yellow);
 font-size:72px;
 line-height:1;
 text-shadow:24px 45px 0 #b7d9ff,-28px 68px 0 #ffd0ca;
}
.eyebrow{color:var(--ritrich-blue)}
h1{color:var(--ritrich-deep);max-width:720px}
.intro p{color:#375b79}
.amy-preview{
 margin:18px 0 32px;
 padding:12px 16px;
 border-radius:14px;
 background:#fff;
 border:1px solid #d7e6fb;
 box-shadow:0 6px 18px rgba(32,77,126,.08);
}
.amy-preview .quiet{
 color:#fff;
 background:var(--ritrich-blue);
 box-shadow:0 6px 14px rgba(20,86,217,.22);
}
h2{color:var(--ritrich-deep)}
.grades{gap:12px}
.grade{
 position:relative;
 overflow:hidden;
 border:2px solid #dbe8f7;
 color:#234466;
 box-shadow:0 6px 15px rgba(29,72,118,.07);
 transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.grade:hover{
 transform:translateY(-2px);
 border-color:#8db9f2;
 box-shadow:0 10px 20px rgba(29,72,118,.13);
}
.grade b{color:var(--ritrich-deep);background:#edf5ff}
.grade:nth-child(1){border-top-color:#ff8a7f}
.grade:nth-child(2){border-top-color:#ffc928}
.grade:nth-child(3){border-top-color:#41bda0}
.grade:nth-child(4){border-top-color:#8170e8}
.grade:nth-child(5){border-top-color:#24a6e2}
.grade:nth-child(6){border-top-color:#ff8b3e}
.grade.selected{
 color:#fff;
 border-color:var(--ritrich-blue);
 background:linear-gradient(115deg,var(--ritrich-deep),var(--ritrich-blue));
 box-shadow:0 10px 24px rgba(20,86,217,.25);
}
.grade.selected b{color:var(--ritrich-deep);background:var(--ritrich-yellow)}
.section-heading{margin-bottom:6px}
.section-heading span{
 padding:7px 12px;
 color:#315a82;
 background:#eaf4ff;
 border-radius:999px;
 font-weight:700;
}
.subjects{gap:22px}
.card{
 min-height:290px;
 border-width:2px;
 box-shadow:0 12px 26px rgba(24,65,108,.10);
 transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 17px 32px rgba(24,65,108,.15)}
.card.ela{
 border-color:#d4c7ff;
 background:linear-gradient(145deg,#f8f5ff,#ebe6ff);
}
.card.math{
 border-color:#f2cc45;
 background:linear-gradient(145deg,#fffdf3,#fff0ad);
}
.card.science{
 border-color:#83d7c1;
 background:linear-gradient(145deg,#effcf8,#d9f5eb);
}
.card.social{
 border-color:#92cbee;
 background:linear-gradient(145deg,#f2faff,#dcefff);
}
.symbol{
 width:66px;
 height:66px;
 display:grid;
 place-items:center;
 border-radius:18px;
 color:#fff;
 background:var(--ritrich-purple);
 box-shadow:0 8px 16px rgba(55,49,128,.18);
}
.math .symbol{color:var(--ritrich-deep);background:var(--ritrich-yellow)}
.science .symbol{color:#fff;background:var(--ritrich-teal)}
.social .symbol{color:#fff;background:var(--ritrich-social)}
.card h3{color:var(--ritrich-deep)}
.card p{color:#46627a}
.activity-count{
 display:inline-block;
 margin:-12px 0 15px;
 padding:5px 10px;
 border-radius:999px;
 color:#244968;
 background:rgba(255,255,255,.72);
 font-size:13px;
 font-weight:800;
}
.start,.primary{
 color:#fff;
 border:0;
 background:linear-gradient(115deg,var(--ritrich-deep),var(--ritrich-blue));
 box-shadow:0 7px 15px rgba(20,86,217,.20);
}
.start:hover,.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.colors-shortcut,.shapes-shortcut{
 border-width:2px;
 box-shadow:0 10px 22px rgba(30,76,124,.10);
}
.activity{
 border-color:#8abaf2;
 background:#fff;
 box-shadow:0 18px 42px rgba(24,70,124,.13);
}
.activity-top h2,.question{color:var(--ritrich-deep)}
.lesson{
 color:#24465f;
 border-left:6px solid var(--ritrich-yellow);
 background:linear-gradient(110deg,#eef6ff,#fff9d9);
}
.progress{
 display:inline-block;
 padding:6px 12px;
 border-radius:999px;
 color:var(--ritrich-deep);
 background:#e8f3ff;
 font-weight:800;
}
.answer{
 border-color:#c8daee;
 color:#173b5d;
 box-shadow:0 4px 10px rgba(27,71,115,.06);
}
.answer:hover:not(:disabled){border-color:var(--ritrich-blue);background:#f1f7ff}
.answer.correct{border-color:#1f9b63;background:#dcf7e9;color:#155b3c}
.answer.incorrect{border-color:#e6a72d;background:#fff1cf;color:#714c08}
.feedback.celebrate{
 padding:18px;
 border:2px solid #f1c735;
 border-radius:16px;
 background:linear-gradient(110deg,#fff8d5,#ecf7ff);
}
.cheer-stars{color:#f4b900}
.completion{
 padding:22px;
 border-radius:20px;
 color:#fff;
 background:linear-gradient(115deg,var(--ritrich-blue),var(--ritrich-purple));
 box-shadow:0 12px 28px rgba(58,67,166,.22);
}
.quiet{color:var(--ritrich-deep);background:#eaf3ff}
footer{
 color:#4b6780;
 border-top:2px solid #cfe3ff;
}
footer a{color:var(--ritrich-blue);font-weight:700}
@media(max-width:700px){
 header{min-height:80px}
 .intro{padding:26px 22px}
 .intro:after{right:10px;top:13px;font-size:44px;opacity:.6}
 .card{min-height:220px}
}