
:root{--navy:#102d45;--blue:#2d6f9f;--brick:#bf512e;--bg:#f3f7f9;--paper:#fff;--ink:#173047;--muted:#718492;--line:#d9e3e9;--good:#e4f5e9;--bad:#fde8e5;--hint:#fff7dd}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink)}button,input,select{font:inherit}
.j5top{background:var(--navy);color:#fff}.j5top>div{max-width:1180px;margin:auto;height:47px;padding:0 17px;display:flex;align-items:center;gap:10px}.j5top a{color:#fff;text-decoration:none;font-size:13px;font-weight:800}.j5top span{opacity:.55}.j5top .copyTop{margin-left:auto;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:8px;padding:6px 9px;font-weight:800;cursor:pointer}
.j5wrap{max-width:1180px;margin:auto;padding:20px 17px 50px}.j5hero{background:#fff;border:1px solid var(--line);border-radius:19px;padding:25px;box-shadow:0 10px 27px rgba(16,45,69,.06)}
.j5eyebrow{text-transform:uppercase;letter-spacing:.09em;color:var(--brick);font-size:11px;font-weight:950}.j5hero h1{margin:5px 0 7px;color:var(--navy);font-size:clamp(30px,5vw,48px);line-height:1.05}.j5hero>p{margin:0;color:var(--muted);line-height:1.5}
.j5meta{display:grid;grid-template-columns:1.2fr .8fr;gap:10px;margin-top:15px}.j5skills,.j5sequence{background:#f7fafb;border:1px solid #e4ebef;border-radius:12px;padding:12px}.j5skills b,.j5sequence b{display:block;color:var(--navy);font-size:12px;margin-bottom:5px}.j5skills ul{margin:0;padding-left:18px;color:#5d7180;font-size:12px;line-height:1.5}.j5sequence span{color:#607583;font-size:12px;line-height:1.5}
.levelbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}.level{border:1px solid var(--line);background:#fff;color:#486275;border-radius:9px;padding:8px 10px;font-weight:900;cursor:pointer}.level.active{background:var(--blue);border-color:var(--blue);color:#fff}.helpcheck{margin-left:auto;font-size:12px;color:#566e7e;font-weight:800}
.j5layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;margin-top:14px}.j5side,.j5task{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 20px rgba(16,45,69,.05)}
.j5side{padding:12px;height:fit-content;position:sticky;top:12px}.j5side h2{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8998a3;margin:3px 6px 8px}.mode{display:block;width:100%;border:0;background:transparent;border-radius:9px;padding:9px 10px;text-align:left;color:#36576c;font-weight:850;cursor:pointer}.mode:hover{background:#f5f8fa}.mode.active{background:#eaf2f7;color:#195682}.mode small{display:block;color:#84949f;font-weight:600;font-size:10px;margin-top:2px}
.stats{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.stat{background:#f3f6f8;color:#71828d;border-radius:999px;padding:4px 7px;font-size:10px}
.j5task{padding:21px;min-height:570px}.taskhead{display:flex;align-items:center;justify-content:space-between;gap:10px}.pill{background:#edf4f8;color:#275e86;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:900}.counter{color:#8a99a3;font-size:11px}
.question{text-align:center;color:var(--navy);font-weight:950;font-size:clamp(22px,3.8vw,32px);line-height:1.2;margin:30px 0 17px}.sub{text-align:center;color:var(--muted);font-size:13px;margin:-8px 0 17px}.expr{text-align:center;color:var(--navy);font-size:clamp(34px,7vw,58px);font-weight:950;margin:17px 0}
.answerrow{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}.answer{width:180px;border:2px solid #b9cad5;border-radius:10px;padding:9px;text-align:center;font-size:21px;font-weight:900}.btn{border:0;border-radius:9px;padding:9px 12px;font-weight:900;cursor:pointer}.primary{background:var(--blue);color:#fff}.secondary{background:#fff;border:1px solid var(--line);color:var(--navy)}
.feedback{display:none;max-width:780px;margin:14px auto 0;padding:10px 12px;border-radius:10px;text-align:center;font-weight:850;font-size:13px}.feedback.show{display:block}.feedback.good{display:block;background:var(--good);color:#2c6840}.feedback.bad{display:block;background:var(--bad);color:#963d34}.hint{max-width:790px;margin:11px auto;background:var(--hint);border:1px solid #ead383;border-radius:10px;padding:10px 11px;color:#725b14;font-size:12px;line-height:1.5}
.choices{display:grid;gap:7px;max-width:730px;margin:auto}.choice{border:1px solid #c7d3dc;background:#fff;border-radius:10px;padding:10px 12px;text-align:center;color:#36576c;font-weight:850;cursor:pointer}.choice:hover{background:#f5f8fa}.correct{background:var(--good)!important;border-color:#6aa17a!important}.wrong{background:var(--bad)!important;border-color:#c96c62!important}
.gridanswers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:720px;margin:auto}.qa{background:#f8fafb;border:1px solid var(--line);border-radius:10px;padding:10px;display:grid;grid-template-columns:1fr 100px;gap:8px;align-items:center;font-weight:800}.qa input,.qa select{width:100%;border:2px solid #bdcbd5;border-radius:8px;padding:7px;text-align:center;background:#fff;font-weight:850}
.visual{max-width:720px;margin:12px auto;background:#fafcfd;border:1px solid var(--line);border-radius:13px;padding:12px;text-align:center}.visual svg{max-width:100%;height:auto}.fracbar{display:flex;max-width:520px;margin:13px auto;border:2px solid #274e68;border-radius:8px;overflow:hidden}.fracpart{height:58px;border-right:1px solid #fff;background:#edf3f7;flex:1}.fracpart.on{background:#6699bf}.fracpart:last-child{border-right:0}
.actions{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:18px}.extras{margin-top:13px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}.extras b{display:block;color:var(--navy);font-size:12px;margin-bottom:7px}.extraLinks{display:flex;gap:7px;flex-wrap:wrap}.extraLinks a{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 9px;text-decoration:none;color:#456175;font-size:11px;font-weight:850}.summary{text-align:center;max-width:720px;margin:35px auto}.summary h2{color:var(--navy);font-size:29px}.summary p{color:var(--muted)}
@media(max-width:820px){.j5layout{grid-template-columns:1fr}.j5side{position:static}.j5meta{grid-template-columns:1fr}.gridanswers{grid-template-columns:1fr}.helpcheck{margin-left:0}.j5task{min-height:auto}}
