:root{--bg:#f8f6fd;--card:#fff;--text:#302747;--muted:#766d89;--accent:#8b5cf6;--soft:#f0eafd;--line:#e6dff1;--shadow:0 9px 28px #4e337510;color-scheme:light}html[data-theme=dark]{--bg:#171321;--card:#241d32;--text:#f1ebfa;--muted:#b3a8c9;--soft:#36294f;--line:#443657;--shadow:0 9px 28px #08060b45;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 Inter,system-ui,-apple-system,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b49afa;outline-offset:2px}a{color:inherit;text-decoration:none}.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--card);border-bottom:1px solid var(--line);padding:14px max(18px,calc((100vw - 1320px)/2));position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px}.brand strong{display:block;font-size:20px;line-height:1.2}.brand em{font-style:normal;color:var(--accent)}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.05em}.mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#8b5cf6,#e6a0c3);font-size:27px}.top nav{display:flex;gap:3px;flex-wrap:wrap}.nav,.smallbtn{background:transparent;border:1px solid transparent;color:var(--muted);padding:8px 11px;border-radius:10px}.nav.active,.nav:hover,.smallbtn:hover{background:var(--soft);color:var(--text)}.wrap{max-width:1320px;margin:auto;padding:26px 18px 60px}.view{display:none}.view.active{display:block}.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:center;padding:36px;border-radius:25px;background:linear-gradient(120deg,var(--card),var(--soft));border:1px solid var(--line);box-shadow:var(--shadow)}.hero h1{font-size:clamp(30px,4.5vw,57px);line-height:1.12;letter-spacing:-.04em;margin:12px 0}.hero h1 i{font-style:normal;color:var(--accent)}.hero p{max-width:620px;color:var(--muted);font-size:16px}.hero-art{color:var(--text);opacity:.9}.hero-art svg{width:100%;max-height:260px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--accent)}.primary,.secondary,.danger{border-radius:11px;padding:10px 14px;font-weight:650;border:1px solid var(--line);margin:3px 4px 3px 0}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.secondary{background:var(--soft);color:var(--text)}.danger{background:#fff0f1;color:#a52b43;border-color:#f5c9d1}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.tile{text-align:left;display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:23px;box-shadow:var(--shadow);min-height:155px;transition:transform .15s}.tile:hover{transform:translateY(-3px);border-color:var(--accent)}.tile span{font-size:30px}.tile strong{font-size:17px}.tile small{color:var(--muted);font-size:13px}.muted-tile{opacity:.7}.notice,.info{background:var(--soft);padding:14px 17px;border-radius:13px;margin:18px 0}.sectionhead{margin:5px 0 20px}.sectionhead h1{font-size:clamp(27px,3vw,38px);line-height:1.2;margin:8px 0}.sectionhead p{color:var(--muted);max-width:850px}.workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px}.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);min-width:0}.panel h2{font-size:17px;margin:0 0 15px}.panel hr{border:0;border-top:1px solid var(--line);margin:19px 0}.row{display:flex;align-items:center;justify-content:space-between;gap:9px}.controls label{display:block;margin:14px 0;font-size:13px;font-weight:600}.controls label input[type=range]{display:block;width:100%;accent-color:var(--accent);margin-top:8px}.controls label output{float:right;color:var(--accent)}.hint{color:var(--muted);font-size:12px}.function-row{border:1px solid var(--line);padding:9px;border-radius:11px;margin:9px 0}.function-row .row{margin-bottom:5px}.function-row input[type=text],.exercise input{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);padding:11px;border-radius:10px}.function-row input[type=color]{width:30px;height:28px;padding:0;border:0;background:none}.function-row .remove{border:0;background:transparent;color:#bf5266;font-size:20px}.canvas-panel{padding:12px;min-height:480px;display:flex;flex-direction:column}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;padding:3px 7px 10px}canvas{width:100%;height:440px;display:block;border-radius:13px;background:var(--card);touch-action:none;cursor:crosshair}#geometry{height:500px;cursor:grab}.graph-readout{font-size:12px;color:var(--muted);padding:9px}.measure-list{display:grid;gap:9px}.measure-list div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding-bottom:7px}.measure-list b{color:var(--accent)}.sim-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.simtab{padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--text)}.simtab.active{background:var(--accent);color:#fff}.sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.sim-grid canvas{height:330px}.sim-grid input[type=range]{width:100%;accent-color:var(--accent)}.sim-grid label{display:block;margin:14px 0}.sim-explanation{background:var(--soft);border-radius:13px;padding:14px;margin-top:16px}.exercise{max-width:790px}.exercise h2{font-size:23px;margin-top:18px}.exercise label{display:block;font-weight:600;margin:17px 0 8px}.actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.tag{background:var(--soft);border-radius:999px;padding:5px 11px;font-size:12px;color:var(--accent);font-weight:700}.feedback{margin-top:16px;min-height:30px}.feedback.good{color:#16835e}.feedback.bad{color:#c25262}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stat small{color:var(--muted);display:block}.stat strong{font-size:32px;color:var(--accent)}.progress-layout{grid-template-columns:1.5fr 1fr}.record{padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.record small{display:block;color:var(--muted)}.import-label{display:block;border:1px solid var(--line);background:var(--soft);border-radius:11px;padding:10px 14px;margin:10px 0;font-weight:650;cursor:pointer}.import-label input{display:block;margin-top:7px;width:100%;font-size:12px}.empty{color:var(--muted);font-size:13px}footer{text-align:center;color:var(--muted);font-size:12px;padding:24px;border-top:1px solid var(--line)}code{background:var(--soft);padding:2px 5px;border-radius:4px}@media(max-width:1050px){.top{position:static}.top nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}.workspace{grid-template-columns:260px minmax(0,1fr)}}@media(max-width:720px){.wrap{padding:15px 11px 35px}.hero{grid-template-columns:1fr;padding:22px}.hero-art{display:none}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tile{padding:15px;min-height:142px}.tile strong{font-size:14px}.workspace,.progress-layout,.sim-grid{grid-template-columns:1fr}.canvas-panel{min-height:360px}canvas{height:330px}#geometry{height:380px}.stats{grid-template-columns:repeat(2,1fr)}.panel{padding:14px}.controls{order:2}.top{padding:12px}.brand strong{font-size:17px}}@media(max-width:390px){.tiles{grid-template-columns:1fr}}