:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;--text-xs:11px;--text-sm:13px;--text-base:15px;--text-md:17px;--text-lg:20px;--text-xl:24px;--text-2xl:32px;--text-3xl:42px;--text-4xl:56px;--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--leading-tight:1.15;--leading-snug:1.35;--leading-normal:1.6;--leading-relaxed:1.75;--tracking-tight:-.02em;--tracking-normal:0;--tracking-wide:.06em;--tracking-wider:.12em;--tracking-widest:.18em;--shadow-sm:0 1px 3px #00000014, 0 1px 2px #0000000f;--shadow-md:0 4px 12px #0000001a, 0 2px 4px #0000000f;--shadow-lg:0 12px 32px #00000024, 0 4px 8px #0000000f;--shadow-xl:0 24px 64px #0000002e;--ease-default:cubic-bezier(.4, 0, .2, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--duration-fast:.15s;--duration-normal:.22s;--duration-slow:.4s;--quiz-max-width:600px;--quiz-gutter:20px}@keyframes ds-fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes ds-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes ds-scaleIn{0%{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}@keyframes ds-slideOut{to{opacity:0;transform:translateY(-10px)}}@keyframes ds-spin{to{transform:rotate(360deg)}}
:root{--bg:#f7f5f0;--bg-card:#fff;--bg-dark:#1a1814;--text:#1a1814;--text-muted:#8a8680;--border:#e8e4dc;--accent:#c8a96e;--radius:16px;--font-serif:"Libre Baskerville", Georgia, serif;--font-sans:"Noto Sans Thai", system-ui, sans-serif;--font-mono:"DM Mono", monospace;--max-w:448px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;font-size:16px;line-height:1.65}img{max-width:100%;display:block}button{font-family:inherit}.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 20px}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.fade-up{animation:.5s both fadeUp}.fade-in{animation:.4s both fadeIn}.scale-in{animation:.4s both scaleIn}