:root{font-family:'IBM Plex Sans Thai',sans-serif;color:#303c43;background:#f5f3ea;--accent:#4e8a76;--paper:#fffdf6}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;min-height:44px;border:1px solid #d3d6cc;border-radius:14px;padding:10px 16px;color:inherit;background:var(--paper);box-shadow:0 3px 0 #dadbce}button:hover{border-color:var(--accent)}button:active{transform:translateY(2px);box-shadow:none}button:disabled{cursor:default;opacity:.6}a{color:var(--accent)}:focus-visible{outline:3px solid #d69d42;outline-offset:3px}header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 20px;background:#fffdf5;border-bottom:1px solid #deded0;flex-wrap:wrap}header a{font-weight:600;text-decoration:none}.mode,.tag{font-size:12px;background:#e4eedd;padding:5px 9px;border-radius:12px}.eyebrow{color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.06em}main{max-width:1020px;margin:auto;padding:22px}h1{margin:6px 0;font-size:clamp(23px,4vw,34px)}h2{margin:6px 0;font-size:24px}p{line-height:1.65}.deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:16px;margin:24px 0}.topic{display:flex;flex-direction:column;text-align:left;gap:6px;min-height:158px;border-top:5px solid var(--accent)}.art{font-size:34px;align-self:center;display:grid;place-items:center;width:70px;height:68px;background:#efeee3;border-radius:45% 45% 30% 30%;color:var(--accent)}.topic:hover .art{animation:bob .8s ease-in-out}.topic small{font-size:13px}.topline{display:flex;gap:12px;align-items:center;justify-content:space-between}.trail{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.trail button{min-width:42px;padding:5px;border-radius:50%;box-shadow:none}.trail button[aria-current=true]{background:var(--accent);color:#fff}.trail .done:after{content:' · ✓';color:#4d825e}.lesson{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.85fr);gap:20px;margin-top:18px}.visual,.workspace{min-width:0;background:var(--paper);padding:20px;border:1px solid #dfded0;border-radius:22px}.visual{background:linear-gradient(140deg,#ecf0e0,#f7ecd8)}.visual svg{width:100%;max-height:300px;display:block}.visual button{margin:4px}.workspace fieldset{border:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.field{display:flex;flex-direction:column;gap:5px;font-size:14px}.field input,.field select{min-width:0;width:100%;border-radius:10px;border:1px solid #bdc9bd;padding:10px;background:#fff;font-size:17px;min-height:44px}.checkfield{flex-direction:row;align-items:center}.checkfield input{width:22px}.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}.feedback{min-height:24px;border-radius:14px;padding:12px;line-height:1.6}.feedback.good{background:#e2eedc}.feedback.retry{background:#f7ecd8}.hints{display:flex;gap:8px;flex-wrap:wrap}.hint{color:var(--accent);font-size:14px;padding:10px}.hint[aria-expanded=true]{background:#f2dca9}.help{padding:14px;border:1px dashed #c49a57;border-radius:14px;background:#fff8df}.small{font-size:13px;color:#5e685f}.raw{display:flex;gap:7px;flex-wrap:wrap}.token{border:1px solid #cbd4c1;padding:8px 10px;background:#fff;border-radius:10px;font-size:13px}.bar{display:flex;align-items:center;gap:8px;margin:10px 0}.bar b{height:24px;background:var(--accent);border-radius:7px}.comparison{font-size:26px;text-align:center;padding:20px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}table{width:100%;border-collapse:collapse;font-size:14px}td,th{border:1px solid #d8dace;padding:8px;text-align:center}#save{max-width:1020px;margin:0 auto;padding:12px 22px;font-size:12px;color:#58695e}.later{border:1px dashed #c9cfc2;padding:14px;border-radius:16px}.fraction-strip{display:flex;height:48px;border:2px solid #687f70;margin:12px 0}.fraction-strip i{flex:1;border-right:1px solid #687f70}.fraction-strip i.on{background:#77a58d}.fraction-strip i:last-child{border:0}input[type=range]{width:100%;accent-color:var(--accent)}@keyframes bob{50%{transform:translateY(-5px) rotate(2deg)}}@media(max-width:680px){header{padding:10px 12px;font-size:13px}main{padding:14px}.lesson{grid-template-columns:1fr;gap:12px}.visual,.workspace{padding:15px}.deck{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.topic{padding:12px;min-height:145px}.topic strong{font-size:16px}.art{font-size:27px;width:56px;height:54px}.visual svg{max-height:230px}.workspace fieldset{gap:8px}.topline{align-items:flex-start}.topline h2{font-size:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.visual{align-self:start}.hints{margin-bottom:12px}#next{margin-top:10px}.feedback.good{animation:idea-arrives .32s ease-out}@keyframes idea-arrives{from{transform:scale(.97);opacity:.5}to{transform:scale(1);opacity:1}}@media(max-width:680px){.visual svg{max-height:190px}.visual table{font-size:13px}.comparison{font-size:23px;padding:12px}header{font-size:12px}.small{line-height:1.5}}@media(prefers-reduced-motion:reduce){.feedback.good{animation:none}}

.hint{min-width:86px;max-width:130px;min-height:78px;white-space:normal;border:1px solid var(--accent);background:linear-gradient(145deg,#fffdf5,#e9eddc);box-shadow:0 4px 0 #d5dbc9}.hint::before{content:"✧";display:block;font-size:20px;color:#b4934c;line-height:1.2}.hint[aria-expanded=true]{background:#fff1c7}.hint:hover{transform:translateY(-2px)}