:root{--bg:#eef3f8;--card:#fff;--text:#172033;--muted:#667085;--line:#d8e0ea;--primary:#285f9b;--primary2:#3b7db8;--good:#18794e;--bad:#b42318;--softgood:#eaf7f0;--softbad:#fff0ef;--accent:#f0a31a;--shadow:0 12px 32px rgba(38,57,77,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#e8f0f7 0,#f8fafc 44%,#eef3f8 100%);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.topbar{background:#173a59;color:#fff}.topbar-inner{max-width:1180px;margin:auto;padding:11px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}.topbar a{color:#fff;text-decoration:none;font-weight:800}.brand{font-weight:700;opacity:.9}.hero{padding:58px 22px 28px}.hero-inner,.page{max-width:1180px;margin:auto}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-weight:850;font-size:12px;color:#3b6f9e}.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.03;margin:6px 0 10px}.hero p{max-width:850px;color:var(--muted);font-size:18px;line-height:1.55;margin:0}.page{padding:0 22px 48px}.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:18px}.field{min-width:230px}.field label{display:block;font-weight:800;font-size:13px;color:var(--muted);margin-bottom:6px}.field select,.field input{width:100%;border:1.5px solid #b8c7d7;border-radius:11px;padding:10px 11px;background:#fff;color:var(--text)}.diff-note{flex:1;min-width:260px;color:#56657a;font-size:14px;line-height:1.4;padding:5px 0}.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:800;min-height:44px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#214f82}.btn-light{background:#fff;border:1px solid var(--line);color:#24364a}.btn-danger{background:#a73b32;color:#fff}.layout{display:grid;grid-template-columns:285px 1fr;gap:18px}.panel,.card,.section,.result,.intro,.game-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.panel{padding:16px;height:fit-content}.panel h2{font-size:17px;margin:0 0 12px}.modes{display:grid;gap:8px}.mode{width:100%;text-align:left;border:1px solid var(--line);background:#fff;color:var(--text);padding:11px 12px;border-radius:12px;font-weight:750}.mode span{display:block;color:var(--muted);font-weight:550;font-size:12px;margin-top:2px;line-height:1.35}.mode:hover{background:#f7fbff}.mode.active{background:#eaf3fc;border-color:#77a5d2;color:#174a7a}.panel-note{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;color:#667085;font-size:13px;line-height:1.45}.taskbox{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:clamp(18px,3vw,32px);min-height:510px;display:flex;flex-direction:column}.taskhead{display:flex;justify-content:space-between;align-items:center;gap:12px}.pill{display:inline-flex;background:#eef5fb;color:#315d86;border-radius:999px;padding:7px 11px;font-size:13px;font-weight:850}.counter{color:var(--muted);font-size:13px}.stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px 0;min-height:320px}.question{font-size:clamp(27px,4.8vw,50px);font-weight:850;line-height:1.18;margin:8px 0 20px}.question.smallq{font-size:clamp(21px,3.2vw,34px);max-width:820px}.hint{max-width:760px;background:#f6f8fb;border:1px solid var(--line);border-radius:14px;padding:13px 15px;color:#4f6175;line-height:1.5;text-align:left;margin:10px auto}.answerrow{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;width:100%}.answer{width:min(280px,80vw);text-align:center;font-weight:800;font-size:24px;border:2px solid #b9c8d7;border-radius:13px;padding:11px 13px;outline:none}.answer:focus{border-color:var(--primary2);box-shadow:0 0 0 4px rgba(52,120,189,.12)}.choice-grid{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.choice{min-width:88px;border:2px solid #b9c8d7;background:#fff;border-radius:13px;padding:11px 15px;font-weight:850;font-size:20px}.choice:hover{border-color:var(--primary2);background:#f6fbff}.feedback{border-radius:13px;padding:11px 14px;min-height:46px;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;visibility:hidden}.feedback.show{visibility:visible}.feedback.good{background:var(--softgood);color:var(--good)}.feedback.bad{background:var(--softbad);color:var(--bad)}.actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}.stats{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:9px;margin-bottom:16px}.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;text-align:center}.stat b{display:block;font-size:22px}.stat span{font-size:12px;color:var(--muted)}.numberline{position:relative;width:min(780px,94%);height:120px;margin:8px auto 20px}.axis{position:absolute;left:3%;right:3%;top:52px;height:4px;background:#26374a;border-radius:2px}.tick{position:absolute;top:38px;width:2px;height:31px;background:#26374a}.tick span{position:absolute;top:36px;left:50%;transform:translateX(-50%);font-size:12px;color:#536070;white-space:nowrap}.dot{position:absolute;top:41px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:var(--accent);border:4px solid #fff;box-shadow:0 0 0 2px #956300}.sort-area{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:8px 0 14px}.chip{border:2px solid #b9c8d7;background:#fff;border-radius:11px;padding:9px 12px;font-weight:850;font-size:18px}.chip.selected{border-color:var(--primary2);background:#eaf3fc}.ordered{min-height:52px;min-width:min(620px,90vw);border:2px dashed #b7c3d0;border-radius:13px;padding:8px;display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.canvas-wrap{width:min(720px,94vw);margin:10px auto}.coord-canvas,.snake-canvas{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:14px;touch-action:none}.coord-info{font-size:14px;color:var(--muted);margin-top:8px}.task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.task-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px}.task-card .nr{display:inline-flex;width:30px;height:30px;border-radius:50%;background:#eaf3fc;color:#174a7a;align-items:center;justify-content:center;font-weight:900}.task-card .expr{font-size:21px;font-weight:850;margin:10px 0}.task-card input,.task-card select{width:100%;border:1.5px solid #b8c7d7;border-radius:10px;padding:9px 10px}.task-card.correct{border-color:#75b593;background:#f3fbf6}.task-card.wrong{border-color:#e5aaa5;background:#fff5f4}.solution{display:none;margin-top:8px;color:#9b322a;font-size:13px;font-weight:750}.task-card.wrong .solution{display:block}.intro,.section,.result,.game-card{padding:18px;margin-bottom:18px}.intro h2,.section h2,.result h2,.game-card h2{margin:0 0 9px}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.mode-card{border:2px solid var(--line);background:#fff;border-radius:16px;padding:16px;text-align:left}.mode-card b{display:block;font-size:21px;margin-bottom:5px}.mode-card span{color:var(--muted);line-height:1.4}.mode-card.selected{border-color:var(--primary);background:#eef6fc}.workbar{display:none;position:sticky;top:8px;z-index:20;background:#173a59;color:#fff;border-radius:16px;padding:10px 12px;margin-bottom:16px;align-items:center;gap:12px;box-shadow:0 10px 26px rgba(0,0,0,.16)}.workbar.show{display:flex}.clock{font-size:23px;font-weight:900}.clock.warning{color:#ffd8d2}.spacer{flex:1}.task-area{display:none}.task-area.show{display:block}.task-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.task-section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}.task-section h2{margin:0 0 4px}.task-list{display:grid;gap:8px;margin-top:12px}.task-row{display:grid;grid-template-columns:34px 1fr minmax(100px,140px) 38px;align-items:center;gap:7px;border:1px solid var(--line);border-radius:11px;padding:8px}.task-row .expr{font-weight:800}.task-row input{width:100%;border:1.5px solid #b8c7d7;border-radius:9px;padding:7px 8px;text-align:center}.task-row.correct{background:#eff9f3;border-color:#87bea0}.task-row.wrong{background:#fff3f2;border-color:#e3aaa5}.sign-btn{border:1px solid var(--line);background:#fff;border-radius:8px;height:35px;font-weight:900}.result,.game-card{display:none}.result.show,.game-card.show{display:block}.result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:12px 0}.result-box{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}.result-box span{display:block;color:var(--muted);font-size:12px}.result-box strong{font-size:22px}.reward-text{font-size:16px;line-height:1.5;padding:10px 0}.snake-stats{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.snake-stat{background:#f6f8fb;border:1px solid var(--line);border-radius:11px;padding:9px 12px}.snake-stat span{font-size:12px;color:var(--muted);display:block}.snake-stat strong{font-size:20px}.snake-wrap{max-width:430px;margin:auto}.snake-controls{display:grid;grid-template-columns:repeat(3,64px);grid-template-areas:". up ." "left down right";gap:7px;justify-content:center;margin-top:10px}.snake-control{width:64px;height:54px;border:0;border-radius:12px;background:#173a59;color:#fff;font-size:25px;font-weight:900}.snake-up{grid-area:up}.snake-left{grid-area:left}.snake-down{grid-area:down}.snake-right{grid-area:right}.snake-message{text-align:center;color:var(--muted);font-size:13px;margin-top:8px}.level-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:15px}.progress{height:10px;background:#e7edf3;border-radius:999px;overflow:hidden;margin:10px 0}.progress span{display:block;height:100%;background:var(--primary);width:0}.complete{display:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.complete.show{display:block}.pinbox{margin-top:16px;padding:14px;border-radius:14px;background:#fff8e7;border:1px solid #efd28d}.pinbox input{border:1.5px solid #cdb46f;border-radius:10px;padding:9px;width:min(200px,100%)}.small{font-size:13px;color:var(--muted)}.print-only{display:none}
@media(max-width:860px){.layout{grid-template-columns:1fr}.panel{order:2}.taskbox{order:1}.task-columns{grid-template-columns:1fr}.mode-grid{grid-template-columns:1fr}.task-grid{grid-template-columns:1fr}.result-grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.hero{padding-top:74px}.topbar-inner{padding:10px 12px}.brand{font-size:12px}.page{padding-left:12px;padding-right:12px}.toolbar{padding:12px}.field{min-width:100%}.stats{grid-template-columns:1fr 1fr 1fr}.task-row{grid-template-columns:28px 1fr 95px 34px}.task-row .expr{font-size:14px}.result-grid{grid-template-columns:1fr 1fr}}
@media print{.topbar,.toolbar,.actions,.workbar,.st73-btn,.st73-overlay,.snake-controls,.btn{display:none!important}body{background:#fff}.hero{padding:10mm 0 4mm}.page{max-width:none;padding:0}.panel{display:none}.layout{display:block}.taskbox,.section,.task-card{box-shadow:none;break-inside:avoid}.print-only{display:block}}