.function-page { --fun-blue:#173b63; --fun-teal:#0f9b91; --fun-violet:#7557c9; --fun-yellow:#f2b946; --fun-orange:#ed7a52; --fun-green:#2f9b65; --fun-red:#c94d59; --fun-ink:#18334f; --fun-muted:#60768b; --fun-border:#d5e3ea; }
.function-page h1,.function-page h2,.function-page p { color:var(--fun-ink); }
.function-page .memory-section__card h2 { color:#fff; }
.function-progress { margin:1.25rem 0 2rem; padding:1rem 1.25rem; background:#fff; border:1px solid var(--fun-border); border-radius:18px; box-shadow:0 10px 30px rgba(23,59,99,.07); }
.function-progress__text { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.7rem; color:var(--fun-muted); font-size:.92rem; }
.function-progress__text strong { color:var(--fun-blue); }
.function-progress__track { height:10px; overflow:hidden; background:#e8eff3; border-radius:999px; }
.function-progress__fill { display:block; height:100%; background:linear-gradient(90deg,var(--fun-teal),var(--fun-yellow)); border-radius:inherit; }
.function-progress__fill--1{width:8.333%}.function-progress__fill--2{width:16.666%}.function-progress__fill--3{width:25%}.function-progress__fill--4{width:33.333%}.function-progress__fill--5{width:41.666%}.function-progress__fill--6{width:50%}.function-progress__fill--7{width:58.333%}.function-progress__fill--8{width:66.666%}.function-progress__fill--9{width:75%}.function-progress__fill--10{width:83.333%}.function-progress__fill--11{width:91.666%}.function-progress__fill--12{width:100%}
.function-hero { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,5vw,4rem); padding:clamp(2rem,5vw,4rem); background:linear-gradient(135deg,#eafaf7,#fff7e7); border:1px solid #cce9e4; border-radius:30px; }
.function-heading { max-width:880px; margin:2.5rem auto; text-align:center; }
.function-heading h1,.function-hero h1 { margin:.25rem 0 1rem; color:var(--fun-blue); font-size:clamp(2rem,5vw,3.35rem); line-height:1.08; }
.function-lead { font-size:clamp(1.08rem,2vw,1.3rem); line-height:1.65; }
.function-callout,.function-warning { display:flex; align-items:flex-start; gap:.9rem; margin-top:1.4rem; padding:1rem 1.2rem; background:#fff; border-left:5px solid var(--fun-yellow); border-radius:12px; }
.function-callout span,.function-warning span { font-size:1.55rem; }.function-callout p,.function-warning p{margin:0}
.function-machine { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem; min-height:260px; }
.function-machine__number { display:grid; width:64px; height:64px; place-items:center; color:#fff; background:var(--fun-violet); border-radius:50%; font-size:1.65rem; font-weight:900; box-shadow:0 10px 20px rgba(117,87,201,.2); }
.function-machine__body { position:relative; padding:2rem 1.2rem; color:#fff; background:linear-gradient(145deg,var(--fun-blue),var(--fun-teal)); border-radius:24px; text-align:center; box-shadow:0 20px 35px rgba(23,59,99,.18); }
.function-machine__body::before,.function-machine__body::after { content:""; position:absolute; top:50%; width:18px; height:12px; background:var(--fun-blue); transform:translateY(-50%); }.function-machine__body::before{right:100%}.function-machine__body::after{left:100%;background:var(--fun-teal)}
.function-machine__body strong { display:block; color:#fff; font-size:clamp(1.25rem,3vw,2rem); }.function-machine__body span{display:block;margin-top:.35rem;color:#dff9f4}
.formula-stage { max-width:850px; margin:2rem auto; padding:clamp(1.5rem,5vw,3rem); background:#fff; border:1px solid var(--fun-border); border-radius:24px; text-align:center; }
.formula-stage__main { color:var(--fun-blue); font-size:clamp(1.8rem,5vw,3.4rem); font-weight:900; }
.formula-stage__arrow { margin:.7rem 0; color:#bd4f2b; font-size:1.3rem; font-weight:800; }
.formula-stage__result { display:inline-block; padding:.6rem 1rem; color:#fff; background:var(--fun-teal); border-radius:14px; font-size:clamp(1.4rem,4vw,2.4rem); font-weight:900; }
.function-meaning { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:1rem; max-width:900px; margin:2rem auto; }.function-meaning article{padding:1.5rem;background:#fff;border:2px solid var(--fun-border);border-radius:20px;text-align:center}.function-meaning strong{display:block;color:var(--fun-violet);font-size:1.55rem}.function-meaning__equals{align-self:center;color:#bd4f2b;font-size:2rem;font-weight:900}
.function-table-wrap { max-width:880px; margin:2rem auto; overflow-x:auto; background:#fff; border:1px solid var(--fun-border); border-radius:20px; box-shadow:0 12px 28px rgba(23,59,99,.06); }.function-table{width:100%;border-collapse:collapse;text-align:center}.function-table th,.function-table td{min-width:105px;padding:1rem;border:1px solid var(--fun-border)}.function-table th{color:#fff;background:var(--fun-blue)}.function-table td{color:var(--fun-ink);font-size:1.15rem;font-weight:800}.function-table tr:nth-child(2) td:first-child{color:#fff;background:var(--fun-teal)}
.function-graph { max-width:760px; margin:2rem auto; padding:1rem; background:#fff; border:1px solid var(--fun-border); border-radius:24px; }.function-graph svg{display:block;width:100%;height:auto}.function-graph text{font-family:inherit;fill:var(--fun-blue);font-weight:750}.function-graph .grid{fill:none;stroke:#dce8ed;stroke-width:1}.function-graph .axis{fill:none;stroke:var(--fun-blue);stroke-width:4}.function-graph .curve{fill:none;stroke:var(--fun-violet);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.function-graph .guide{fill:none;stroke:var(--fun-orange);stroke-width:3;stroke-dasharray:8 7}.function-graph .point{fill:var(--fun-yellow);stroke:var(--fun-blue);stroke-width:4}
.function-card-grid,.function-offers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin:2rem 0; }.function-card-grid article,.function-offers article{padding:1.7rem}.function-card-grid h2,.function-offers h2{margin:.5rem 0}.function-icon{font-size:2rem}.function-card-grid article:first-child{border-top:5px solid var(--fun-violet)}.function-card-grid article:last-child{border-top:5px solid var(--fun-teal)}
.function-steps { display:grid; gap:1rem; max-width:850px; margin:2rem auto; }.function-steps article{display:flex;align-items:center;gap:1.2rem;padding:1.3rem 1.5rem;background:#fff;border:1px solid var(--fun-border);border-radius:18px}.function-steps article>span{display:grid;flex:0 0 46px;width:46px;height:46px;place-items:center;color:#fff;background:var(--fun-violet);border-radius:50%;font-weight:900}.function-steps h2,.function-steps p{margin:0}
.function-page .interactive-lesson { margin-top:2.5rem; }.function-question-list{display:grid;gap:1.1rem}.function-question{padding:clamp(1.35rem,4vw,2.25rem);background:#fff;border:2px solid var(--fun-border);border-radius:20px;transition:border-color .2s,box-shadow .2s}.function-question.is-complete{border-color:#74c99a;box-shadow:0 10px 25px rgba(47,155,101,.1)}.function-question h2{font-size:1.2rem}.function-question__number{margin:0 0 .25rem;color:var(--fun-violet)!important;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.function-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-top:1.2rem}.function-choices--small{grid-template-columns:repeat(2,minmax(160px,260px))}.function-choices button{min-height:58px;padding:.85rem 1rem;color:var(--fun-blue);background:#f8fafc;border:2px solid #cbdbe4;border-radius:14px;font:inherit;font-weight:750;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}.function-choices button:hover:not(:disabled),.function-choices button:focus-visible{transform:translateY(-2px);border-color:var(--fun-violet);background:#f1edff}.function-choices button.is-wrong{border-color:var(--fun-red);background:#fff0f1}.function-choices button.is-correct{color:#155b36;border-color:var(--fun-green);background:#e8f8ef}.function-choices button:disabled{cursor:default;opacity:.72}.function-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(--fun-green)}.activity-feedback.is-error{color:#8d2530;background:#fff0f1;border-left:5px solid var(--fun-red)}
.function-input-label{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1rem;color:var(--fun-blue);font-size:1.08rem;font-weight:800}.function-number-input{width:120px;padding:.7rem .85rem;color:var(--fun-blue);background:#fff;border:2px solid #b9ced7;border-radius:10px;font:inherit;font-size:1.1rem}.function-number-input:focus{outline:3px solid rgba(117,87,201,.18);border-color:var(--fun-violet)}.function-number-input.is-wrong{border-color:var(--fun-red);background:#fff5f5}.function-number-input.is-correct{border-color:var(--fun-green);background:#eefbf3}
.function-problem{margin:2rem 0;padding:clamp(1.5rem,5vw,3rem);border-top:6px solid var(--fun-yellow)}.function-problem h2{max-width:800px;margin:1rem 0}.function-problem li{margin:.6rem 0;color:var(--fun-ink)}
.function-score{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;padding:1.2rem 1.5rem;color:#fff;background:linear-gradient(135deg,var(--fun-blue),var(--fun-violet));border-radius:18px}.function-score>span{font-size:2.2rem}.function-score p{margin:0;color:#eee9ff}.function-score strong{font-size:1.2rem}.function-score.is-complete{background:linear-gradient(135deg,#247a4b,var(--fun-green))}
.function-correction{margin-top:1.5rem;padding:1.25rem 1.5rem}.function-correction summary{color:var(--fun-blue);font-size:1.1rem;font-weight:800;cursor:pointer}.function-correction details div{padding-top:.7rem}.function-navigation{display:flex;justify-content:space-between;gap:1rem;margin:3rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--fun-border)}
@media(max-width:800px){.function-hero{grid-template-columns:1fr}.function-card-grid,.function-offers{grid-template-columns:1fr}.function-meaning{grid-template-columns:1fr}.function-meaning__equals{transform:rotate(90deg);justify-self:center}.function-machine{max-width:520px;margin:auto}}
@media(max-width:560px){.function-progress__text{display:grid;gap:.2rem}.function-hero{padding:1.5rem}.function-machine{grid-template-columns:1fr}.function-machine__body::before,.function-machine__body::after{display:none}.function-choices,.function-choices--small{grid-template-columns:1fr}.function-navigation{flex-direction:column-reverse}.function-navigation .btn{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.function-page *,.function-page *::before,.function-page *::after{transition:none!important;animation:none!important}}