:root{--ink: #1e1c2e;--ink-soft: #3e3c52;--muted: #45435a;--link: #3f3d7a;--link-hover: #2a2858;--dark: #2a2840;--lime: #cfe3a1;--accent: #5b5a9e;--ok: #34591f;--ok-bg: rgba(240, 248, 228, .85);--ok-border: #3f6b2a;--bad: #8a2a3e;--bad-bg: rgba(255, 240, 243, .8);--bad-border: #a8324a;--glass: rgba(255, 255, 255, .5);--glass-strong: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .65);--glass-dark: rgba(34, 32, 56, .78);--radius: 24px;--shadow: 0 8px 32px rgba(40, 38, 70, .08)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}html{background:#cfcfdb}body{font-family:Prompt,Noto Sans Thai,system-ui,sans-serif;color:var(--ink);background:linear-gradient(135deg,#d3d2df,#c9ccd8 45%,#d8d1d9);background-attachment:fixed;min-height:100vh;line-height:1.55}h1,h2,h3,p{margin:0}a{color:var(--link)}a:hover{color:var(--link-hover)}button{font:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.blobs{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}.shell{position:relative;z-index:1;display:flex;flex-wrap:wrap;min-height:100vh}.side{flex:1 1 200px;max-width:232px;padding:28px 16px;display:flex;flex-direction:column;gap:6px}.brand{display:flex;align-items:center;gap:10px;margin:0 0 24px 8px;color:var(--ink);text-decoration:none}.logo{width:36px;height:36px;border-radius:12px;background:var(--dark);color:var(--lime);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}.brand-name{font-weight:700;font-size:18px}.nav{display:block;padding:12px 16px;border-radius:999px;color:var(--ink-soft);text-decoration:none;font-size:15px;border:1px solid transparent}.nav[aria-current=page]{background:#ffffff8c;color:var(--ink);font-weight:600;border-color:#ffffffb3}.main{flex:999 1 560px;min-width:0;padding:28px 40px 40px 16px;display:flex;flex-direction:column;gap:20px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px}.avatar{display:block;width:48px;height:48px;border-radius:50%;background:#ffffff8c;border:1px solid rgba(255,255,255,.8);flex:none}.avatar span{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-weight:600;color:var(--dark)}.glass{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);box-shadow:var(--shadow)}.glass.dark{background:var(--glass-dark);border-color:#ffffff2e;color:#fff}.glass.dark .muted{color:#d6d4e6}.muted{color:var(--muted);font-size:14px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.75);background:#ffffff8c;font-size:15px;color:var(--ink);text-decoration:none;cursor:pointer}.btn:hover{background:#ffffffbf;color:var(--ink)}.btn.primary{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:600}.btn.primary:hover{background:#1e1c2e;color:#fff}.btn.lime{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600}.btn.lime:hover{background:#c2d98e}.btn.big{min-height:56px;padding:0 40px;font-size:18px}.btn[disabled]{opacity:.55;cursor:not-allowed}.chip{display:inline-flex;padding:4px 12px;border-radius:999px;background:#ffffffb3;font-size:13px;color:var(--dark);align-self:flex-start}.chip.lime{background:var(--lime);color:var(--ink);font-weight:600}.chip.warn{background:#f3e2b3;color:#5a4300}.bar{height:12px;background:#fff9;border-radius:999px;overflow:hidden}.bar>div{height:100%;background:var(--accent);border-radius:999px}.glass.dark .bar{background:#ffffff26}.glass.dark .bar>div{background:var(--lime)}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.7);font-size:15px}.list-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:#ffffff8c;font-size:15px}.num{width:28px;height:28px;border-radius:50%;background:#e2e1ee;color:var(--link-hover);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex:none}.focus{position:relative;z-index:1;min-height:100vh;display:flex;justify-content:center;padding:28px 16px}.focus-inner{width:100%;max-width:760px;display:flex;flex-direction:column;gap:22px}.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.step{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}.step>div{height:8px;border-radius:999px;background:#fff9}.step.done>div{background:#8e8dbf}.step.on{color:var(--ink);font-weight:600}.step.on>div{background:var(--accent)}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.choice{min-height:60px;padding:8px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.8);background:#fff9;font-size:19px;color:var(--ink);cursor:pointer}.choice:hover:not([disabled]){background:#ffffffd9}.choice.right{border:2px solid var(--ok-border);color:var(--ok);background:var(--ok-bg)}.choice.wrong{border:2px solid var(--bad-border);color:var(--bad);background:var(--bad-bg)}.feedback{background:var(--glass-strong);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px}.banner{position:relative;z-index:2;background:#f3e2b3;color:#5a4300;text-align:center;font-size:14px;padding:8px 16px}.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:999px;background:#fff6;border:1px solid rgba(255,255,255,.6);align-self:flex-start}.tab{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-size:15px;color:var(--ink-soft);background:none;border:0;cursor:pointer}.tab[aria-selected=true]{background:var(--dark);color:#fff;font-weight:600}label.field{display:flex;flex-direction:column;gap:6px;font-weight:500}input[type=email],input[type=text]{min-height:48px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.85);background:#ffffffbf;font:inherit;font-size:16px;color:var(--ink)}.opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px;border-radius:16px;background:#ffffff8c;border:1px solid rgba(255,255,255,.75);font-size:16px;flex:1 1 180px;cursor:pointer}.opt:has(input:checked){background:#ffffffd9;border:2px solid var(--dark)}fieldset{margin:0}fieldset legend{float:left;width:100%;padding:0;font-weight:600;font-size:16px}.opts{display:flex;flex-wrap:wrap;gap:12px;clear:both}.mobile-tabs{display:none}@media(max-width:720px){.side{display:none}.main{padding:16px 16px 96px}.mobile-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;left:12px;right:12px;bottom:12px;z-index:5;padding:6px;border-radius:999px;background:#ffffffb3;border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.mobile-tabs a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-size:13px;color:var(--ink-soft);text-decoration:none}.mobile-tabs a[aria-current=page]{background:var(--dark);color:#fff;font-weight:600}.btn.big{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.glass{background:#ffffffd9}}