.literal-page { --lit-blue:#1e3a5f; --lit-violet:#7655c5; --lit-teal:#15979a; --lit-yellow:#f4b942; --lit-orange:#ef8354; --lit-green:#36a269; --lit-red:#c94b55; --lit-ink:#19324d; --lit-muted:#60758b; --lit-border:#d8e4eb; }
.literal-page h1,.literal-page h2,.literal-page p { color:var(--lit-ink); }
.literal-page .memory-section__card h2 { color:#fff; }
.literal-progress { margin:1.25rem 0 2rem; padding:1rem 1.25rem; background:#fff; border:1px solid var(--lit-border); border-radius:18px; box-shadow:0 10px 30px rgba(30,58,95,.07); }
.literal-progress__text { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.7rem; color:var(--lit-muted); font-size:.92rem; }
.literal-progress__text strong { color:var(--lit-blue); }
.literal-progress__track { height:10px; overflow:hidden; background:#e8eef2; border-radius:999px; }
.literal-progress__fill { display:block; height:100%; background:linear-gradient(90deg,var(--lit-violet),var(--lit-yellow)); border-radius:inherit; }
.literal-progress__fill--1{width:8.333%}.literal-progress__fill--2{width:16.666%}.literal-progress__fill--3{width:25%}.literal-progress__fill--4{width:33.333%}.literal-progress__fill--5{width:41.666%}.literal-progress__fill--6{width:50%}.literal-progress__fill--7{width:58.333%}.literal-progress__fill--8{width:66.666%}.literal-progress__fill--9{width:75%}.literal-progress__fill--10{width:83.333%}.literal-progress__fill--11{width:91.666%}.literal-progress__fill--12{width:100%}
.literal-hero { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(2rem,5vw,4rem); padding:clamp(2rem,5vw,4rem); background:linear-gradient(135deg,#f4f0ff,#fff9e9); border:1px solid #ded6f5; border-radius:30px; }
.literal-heading { max-width:860px; margin:2.5rem auto; text-align:center; }
.literal-heading h1,.literal-hero h1 { margin:.25rem 0 1rem; color:var(--lit-blue); font-size:clamp(2rem,5vw,3.35rem); line-height:1.08; }
.literal-lead { font-size:clamp(1.08rem,2vw,1.3rem); line-height:1.65; }
.literal-callout,.literal-warning { display:flex; align-items:flex-start; gap:.9rem; margin-top:1.4rem; padding:1rem 1.2rem; background:#fff; border-left:5px solid var(--lit-yellow); border-radius:12px; }
.literal-callout span,.literal-warning span { font-size:1.55rem; }.literal-callout p,.literal-warning p{margin:0}
.literal-mystery { display:grid; place-items:center; min-height:270px; }
.literal-mystery__formula { display:flex; align-items:center; gap:.7rem; padding:2rem; background:#fff; border:3px solid #d8cff3; border-radius:24px; box-shadow:0 20px 40px rgba(118,85,197,.18); font-size:clamp(2rem,5vw,3.5rem); font-weight:900; }
.literal-mystery__formula .is-letter { display:grid; width:80px; height:80px; place-items:center; color:#fff; background:var(--lit-violet); border-radius:20px; }
.literal-card-grid,.literal-traps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin:2rem 0; }
.literal-card-grid article,.literal-traps article { padding:1.7rem; }.literal-card-grid h2,.literal-traps h2{margin:.5rem 0}.literal-icon{font-size:2rem}
.formula-stage { max-width:850px; margin:2rem auto; padding:clamp(1.5rem,5vw,3rem); background:#fff; border:1px solid var(--lit-border); border-radius:24px; text-align:center; }
.formula-stage__main { color:var(--lit-blue); font-size:clamp(2rem,6vw,3.7rem); font-weight:900; }
.formula-stage__arrow { margin:.7rem 0; color:#bd4f2b; font-size:2rem; }
.formula-stage__result { display:inline-block; padding:.6rem 1rem; color:#fff; background:var(--lit-teal); border-radius:14px; font-size:clamp(1.5rem,4vw,2.5rem); font-weight:900; }
.algebra-tiles { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:.65rem; margin:1.5rem 0; }
.algebra-tile { display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--lit-violet),#967be1); border-radius:10px; box-shadow:0 8px 16px rgba(30,58,95,.12); font-weight:900; }
.algebra-tile--x { width:52px; height:125px; }.algebra-tile--unit{width:52px;height:52px;background:linear-gradient(135deg,var(--lit-yellow),var(--lit-orange));}
.term-groups { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:850px; margin:2rem auto; }
.term-groups article { padding:1.3rem; background:#fff; border:2px solid var(--lit-border); border-radius:18px; text-align:center; }.term-groups strong{display:block;color:var(--lit-violet);font-size:1.6rem}
.distribution { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1.5rem; max-width:860px; margin:2rem auto; padding:2rem; background:#fff; border:1px solid var(--lit-border); border-radius:22px; }
.distribution__factor { display:grid; place-items:center; width:95px; height:95px; color:#fff; background:var(--lit-violet); border-radius:50%; font-size:2rem; font-weight:900; }
.distribution__arrows { display:grid; gap:.8rem; }.distribution__arrows span{padding:.7rem 1rem;background:#f2effb;border-radius:12px;color:var(--lit-blue);font-size:1.25rem;font-weight:850}
.literal-steps { display:grid; gap:1rem; max-width:840px; margin:2rem auto; }
.literal-steps article { display:flex; align-items:center; gap:1.2rem; padding:1.3rem 1.5rem; background:#fff; border:1px solid var(--lit-border); border-radius:18px; }.literal-steps article>span{display:grid;flex:0 0 46px;width:46px;height:46px;place-items:center;color:#fff;background:var(--lit-violet);border-radius:50%;font-weight:900}.literal-steps h2,.literal-steps p{margin:0}
.literal-page .interactive-lesson { margin-top:2.5rem; }.literal-question-list{display:grid;gap:1.1rem}
.literal-question { padding:clamp(1.35rem,4vw,2.25rem); background:#fff; border:2px solid var(--lit-border); border-radius:20px; transition:border-color .2s,box-shadow .2s; }
.literal-question.is-complete { border-color:#7bcf9c; box-shadow:0 10px 25px rgba(54,162,105,.1); }.literal-question h2{font-size:1.2rem}.literal-question__number{margin:0 0 .25rem;color:var(--lit-violet)!important;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.literal-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; margin-top:1.2rem; }.literal-choices--small{grid-template-columns:repeat(2,minmax(160px,260px))}
.literal-choices button { min-height:58px; padding:.85rem 1rem; color:var(--lit-blue); background:#f8fafd; border:2px solid #cfdce5; border-radius:14px; font:inherit; font-weight:750; cursor:pointer; transition:transform .15s,border-color .15s,background .15s; }
.literal-choices button:hover:not(:disabled),.literal-choices button:focus-visible{transform:translateY(-2px);border-color:var(--lit-violet);background:#f1edff}.literal-choices button.is-wrong{border-color:var(--lit-red);background:#fff0f1}.literal-choices button.is-correct{color:#155b36;border-color:var(--lit-green);background:#e8f8ef}.literal-choices button:disabled{cursor:default;opacity:.72}.literal-choices button.is-correct:disabled{opacity:1}
.activity-feedback{margin-top:1rem;padding:.9rem 1rem;border-radius:12px;font-weight:750}.activity-feedback.is-success{color:#155b36;background:#e8f8ef;border-left:5px solid var(--lit-green)}.activity-feedback.is-error{color:#8d2530;background:#fff0f1;border-left:5px solid var(--lit-red)}
.literal-input-label{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1rem;color:var(--lit-blue);font-size:1.08rem;font-weight:800}.literal-number-input{width:120px;padding:.7rem .85rem;color:var(--lit-blue);background:#fff;border:2px solid #b9ced7;border-radius:10px;font:inherit;font-size:1.1rem}.literal-number-input:focus{outline:3px solid rgba(118,85,197,.18);border-color:var(--lit-violet)}.literal-number-input.is-wrong{border-color:var(--lit-red);background:#fff5f5}.literal-number-input.is-correct{border-color:var(--lit-green);background:#eefbf3}
.literal-traps .is-wrong-example{border-top:5px solid var(--lit-red)}.literal-traps .is-right-example{border-top:5px solid var(--lit-green)}
.literal-problem{margin:2rem 0;padding:clamp(1.5rem,5vw,3rem);border-top:6px solid var(--lit-yellow)}.literal-problem h2{max-width:800px;margin:1rem 0}.literal-problem li{margin:.6rem 0;color:var(--lit-ink)}
.literal-score{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;padding:1.2rem 1.5rem;color:#fff;background:linear-gradient(135deg,var(--lit-blue),var(--lit-violet));border-radius:18px}.literal-score>span{font-size:2.2rem}.literal-score p{margin:0;color:#eee9ff}.literal-score strong{font-size:1.2rem}.literal-score.is-complete{background:linear-gradient(135deg,#247a4b,var(--lit-green))}
.literal-correction{margin-top:1.5rem;padding:1.25rem 1.5rem}.literal-correction summary{color:var(--lit-blue);font-size:1.1rem;font-weight:800;cursor:pointer}.literal-correction details div{padding-top:.7rem}.literal-navigation{display:flex;justify-content:space-between;gap:1rem;margin:3rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--lit-border)}
@media(max-width:800px){.literal-hero{grid-template-columns:1fr}.literal-card-grid,.literal-traps{grid-template-columns:1fr}.term-groups{grid-template-columns:1fr}.distribution{grid-template-columns:1fr;text-align:center}.distribution__factor{margin:auto}}
@media(max-width:560px){.literal-progress__text{display:grid;gap:.2rem}.literal-hero{padding:1.5rem}.literal-choices,.literal-choices--small{grid-template-columns:1fr}.literal-navigation{flex-direction:column-reverse}.literal-navigation .btn{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.literal-page *,.literal-page *::before,.literal-page *::after{transition:none!important;animation:none!important}}