@font-face{font-family:Sarabun;src:url('./Sarabun-Regular.ttf') format('truetype');font-weight:400 800;font-display:swap}
:root{font-family:Sarabun, sans-serif;color:#1e2545;background:#f5f6fb;font-synthesis:none;--accent:#4f46e5;--muted:#7c829a}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #e0e3ef;background:white;color:#363b56;border-radius:12px;padding:11px 17px;min-height:46px;font-weight:600}button:hover{border-color:#818cf8;background:#f3f2ff}button:focus-visible,a:focus-visible{outline:3px solid #818cf8;outline-offset:3px}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}header{height:98px;padding:0 max(24px,calc((100vw - 1220px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e8f1;background:white}.brand{display:flex;gap:12px;align-items:center;font-weight:800;font-size:24px;letter-spacing:-1px}.logo{background:var(--accent);color:white;font-size:35px;width:49px;height:49px;border-radius:15px;text-align:center}.light{font-weight:400}.brand small{display:block;font-size:11px;letter-spacing:2px;color:#8a8fa6;margin-top:3px}.header-actions,.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.offline{color:#68718b;font-size:12px;margin-right:14px}.offline:first-letter{color:#10b981}.quiet{background:transparent}main{max-width:1220px;margin:auto;padding:45px 24px 60px}.eyebrow{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:2px}h1{font-size:42px;line-height:1.35;margin:14px 0 12px;letter-spacing:-1.2px}h1 em{font-style:normal;color:var(--accent)}.muted{color:#737b93;line-height:1.7}h2{font-size:22px;margin:8px 0 12px}h3{margin:0 0 8px;font-size:18px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}.intro-art{width:180px;height:155px;transform:rotate(-8deg);background:linear-gradient(135deg,#e0e7ff,#ede9fe);border-radius:35px;display:grid;place-items:center;font-size:95px;color:#6366f1;box-shadow:18px 15px 0 #eeeff8}.layout{display:grid;grid-template-columns:1fr 330px;gap:26px}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}.step{background:#e9e9ff;color:#5b52d6;font-size:12px;padding:5px 10px;border-radius:7px}.categories{display:grid;grid-template-columns:1fr 1fr;gap:16px}.category{text-align:left;padding:24px;position:relative;min-height:181px;border:1px solid #e1e4ef;border-radius:20px;background:#fff;transition:transform .15s}.category:hover{transform:translateY(-2px)}.category.selected{border:2px solid #6366f1;padding:23px;background:#f9f9ff;box-shadow:0 5px 18px #6366f10c}.category .icon{font-size:30px;display:block;margin-bottom:16px;color:#6366f1}.category .check{position:absolute;right:18px;top:18px;color:#6366f1}.category p{font-size:13px;line-height:1.7;margin:0;color:#7b8299;font-weight:400}.tag{display:inline-block;background:#f0f1f8;color:#7c829a;padding:3px 9px;border-radius:6px;font-size:10px;margin-top:12px}.settings,.panel{background:white;border:1px solid #e4e6f0;border-radius:20px;padding:25px}.settings{height:fit-content;box-shadow:0 12px 40px #25246505}.settings label{display:block;margin:23px 0 9px;font-size:14px;font-weight:600}.settings input,.settings select{width:100%;background:#f8f9fc;border:1px solid #e1e4ef;border-radius:10px;padding:12px;color:#303856}.presets{display:flex;gap:7px;margin-top:8px}.presets button{flex:1;padding:7px;min-height:35px;font-size:12px}.primary{background:var(--accent);color:white;border-color:var(--accent)}.primary:hover{background:#4338ca;color:white}.start{width:100%;margin-top:27px;padding:15px}.note{font-size:11px;color:#9298ab;line-height:1.7}.bottom-info{margin-top:28px;display:flex;gap:24px;color:#8790a7;font-size:12px}.session-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.pill{font-size:12px;padding:7px 12px;background:#eaeaff;color:#5b52cc;border-radius:99px}.progress{height:5px;background:#e1e4ee;border-radius:6px;margin:18px 0 26px;overflow:hidden}.progress span{display:block;height:100%;background:#6366f1}.question-title{font-size:23px;line-height:1.7;max-width:900px;margin:15px 0}.question-image{max-width:480px;margin:0 auto}.question-image svg{width:100%;max-height:280px}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.choice{padding:12px;position:relative;border-radius:16px}.choice svg{width:100%;display:block}.choice b{display:block;text-align:left;background:#f0f1f8;width:30px;height:30px;text-align:center;line-height:30px;border-radius:9px}.choice.selected{border:2px solid #6366f1;background:#f1f1ff;padding:11px}.choice.correct{border:2px solid #10b981;background:#f0fdf8;padding:11px}.choice.wrong{border:2px solid #f87171;background:#fff5f5;padding:11px}.question-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px}.explanation{background:#f4f6ff;border:1px solid #dfe3fa;border-radius:16px;padding:24px;margin-top:24px}.explanation li{margin:12px 0;line-height:1.8}.explanation svg{max-height:260px;width:100%}.pieces{display:flex;align-items:center}.pieces svg{min-width:0;width:48%}.numbers{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}.numbers button{min-height:35px;width:35px;padding:5px;font-size:12px}.numbers .active{border-color:#6366f1;color:#4f46e5}.numbers .done{background:#e6e8ff}.result{text-align:center;padding:35px}.score{font-size:70px;font-weight:800;color:var(--accent)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0}.stat{background:#f6f7fc;border-radius:13px;padding:18px}.stat strong{display:block;font-size:25px;margin:12px}.history{margin-top:30px;font-size:13px;color:#7a829a}.history-item{padding:12px 0;border-bottom:1px solid #e4e6ef}.presentation header{display:none}.presentation main{max-width:1550px}.presentation .question-title{font-size:30px}.presentation .question-image{max-width:600px}.presentation .choice svg{max-height:300px}.presentation .note{display:none}dialog{border:0;border-radius:24px;padding:26px;width:min(690px,94vw);max-height:95vh;overflow:auto;color:#253052;box-shadow:0 20px 100px #151c5040}dialog::backdrop{background:#111b3e88;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head small{font-size:11px;letter-spacing:2px;color:#6366f1}#model{background:#f6f7ff;border-radius:18px;touch-action:none;cursor:grab;user-select:none}#model svg{width:100%;height:min(42vh,340px)}#helper p{font-size:13px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#222c4a;color:white;border-radius:12px;padding:13px 20px;display:none;z-index:100}.export-menu{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid #e9ebf3}.export-menu button{font-size:12px}footer{text-align:center;color:#949bae;font-size:11px;margin-top:38px}.review-line{display:flex;justify-content:space-between;padding:14px;border-bottom:1px solid #e7e9f0;gap:10px}.review-line button{font-size:12px}.error{color:#dc2626;font-size:13px}@media(max-width:850px){.layout{grid-template-columns:1fr}.settings{margin-top:8px}.intro-art{width:130px;height:120px;font-size:70px}.choices{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.offline{display:none}}@media(max-width:500px){header{height:80px;padding:0 17px}.brand{font-size:20px}.logo{width:40px;height:40px;font-size:29px}.header-actions button{font-size:11px;padding:8px}.brand small{font-size:9px}main{padding:27px 16px}h1{font-size:32px}.intro-art{display:none}.category{padding:17px;min-height:190px}.category.selected{padding:16px}.category h3{font-size:16px}.categories{gap:10px}.category p{font-size:12px}.panel{padding:17px}.question-title{font-size:19px}.bottom-info{gap:12px;font-size:10px}.session-head{align-items:flex-start;gap:10px}.session-head .row{justify-content:flex-end}.session-head button{font-size:12px;padding:9px}.choice{padding:8px}.choice.selected,.choice.correct,.choice.wrong{padding:7px}.explanation{padding:15px}.explanation ol{padding-left:20px}.presentation .question-title{font-size:22px}}
@media print{header,button,.numbers,.export-menu,.progress{display:none!important}body{background:white}.panel{border:0}.choices{grid-template-columns:repeat(4,1fr)}main{padding:0}.explanation{break-inside:avoid}}