*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--paper:#fff0d1;--dot:#f0deb4;--card:#fff;--ink:#33272e;--muted:#9a8791;--line:#f0e2d0;--th-accent:#e8447a;--good:#a6e8b8;--bad:#ffc4d0;--shadow:0 2px 10px #33272e1a;--radius:16px;--note-radius:4px 16px 16px 16px;--scene:#ffd166}body{background:var(--paper);background-image:radial-gradient(var(--dot) 1px, transparent 1px);color:var(--ink);background-size:16px 16px;min-height:100vh;font-family:Segoe UI,Leelawadee UI,Noto Sans Thai,Tahoma,sans-serif}#app{max-width:520px;margin:0 auto;padding:16px 16px 48px}.view{flex-direction:column;gap:14px;display:flex}.hidden{display:none!important}.hero{text-align:center;padding:10px 0 2px}.hero h1{font-size:1.7rem;font-weight:800}.sub{color:var(--muted);margin-top:4px;font-size:.9rem}.topbar{justify-content:space-between;align-items:center;font-weight:700;display:flex}.back{color:var(--ink);padding:4px 12px 4px 0;font-size:1.4rem;text-decoration:none}.count{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}.btn{background:var(--card);color:var(--ink);border-radius:var(--radius);cursor:pointer;text-align:center;box-shadow:var(--shadow);border:none;padding:14px 18px;font-family:inherit;font-size:1rem;font-weight:700;text-decoration:none;display:inline-block}.btn:active{transform:scale(.97)}.btn-accent{background:var(--ink);color:#fff}.btn-review{background:var(--card);text-align:left;font-weight:700}.btn-review small{color:var(--muted);margin-top:2px;font-size:.78rem;font-weight:500;display:block}.btn-dim{color:var(--muted);box-shadow:none;border:1px dashed var(--line);background:0 0}.btn-sm{padding:8px 14px;font-size:.88rem}.btn[disabled]{opacity:.4;pointer-events:none}.hub-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;display:grid}.hub-card{border-radius:var(--note-radius);text-align:center;color:var(--ink);box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;text-decoration:none;display:flex;position:relative}.hub-card:before{content:"";background:#ffffff8c;border:1px solid #33272e14;width:34px;height:11px;position:absolute;top:-6px;left:14px;transform:rotate(-2deg)}.hub-card:active{transform:scale(.97)}.hub-emoji{font-size:2.1rem}.hub-title{font-size:1.02rem;font-weight:800;line-height:1.25}.hub-sub{opacity:.7;font-size:.85rem}.ring{background:conic-gradient(var(--ink) var(--p), #ffffffa6 0);border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;margin-top:8px;display:flex}.ring b{background:var(--card);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:.85rem;display:flex}.scene-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;display:grid}.gcard{border-radius:var(--note-radius);text-align:center;color:var(--ink);box-shadow:var(--shadow);flex-direction:column;gap:4px;padding:14px 10px 12px;text-decoration:none;display:flex;position:relative}.gcard:before{content:"";background:#ffffff80;border:1px solid #33272e14;width:30px;height:10px;position:absolute;top:-6px;left:12px;transform:rotate(-2deg)}.gcard-emoji{font-size:1.9rem}.gcard-title{font-size:.98rem;font-weight:800;line-height:1.25}.gcard-sub{opacity:.7;font-size:.85rem}.gcard .bar{margin-top:4px}.gcard-actions{gap:5px;margin-top:8px;display:flex}.gbtn{min-width:0;color:var(--ink);text-align:center;white-space:nowrap;background:#ffffffd9;border-radius:10px;flex:1;padding:8px 0;font-size:.8rem;font-weight:700;text-decoration:none;overflow:hidden;box-shadow:0 2px #33272e26}.gbtn:active{box-shadow:none;transform:translateY(1px)}.q-scene-tag{color:var(--muted);background:var(--paper);border-radius:999px;padding:3px 12px;font-size:.85rem}.bar{background:#ffffffa6;border-radius:4px;height:7px;overflow:hidden}.bar-fill{background:var(--ink);border-radius:4px;height:100%}.bottom-links{text-align:center}.bottom-links a{color:var(--muted)}.learn-card{background:var(--card);border-radius:var(--note-radius);border-top:8px solid var(--scene);cursor:pointer;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:10px;padding:22px 20px 16px;display:flex;box-shadow:0 3px 14px #2f34371f}.wimg,.wimg-lg{object-fit:contain;width:72px;height:72px}.wimg-lg{width:136px;height:136px}.wimg-placeholder{background:var(--scene);color:var(--ink);border-radius:50%;justify-content:center;align-items:center;font-size:2.5rem;font-weight:800;display:flex}.word-row{align-items:center;gap:10px;display:flex}.word{font-size:1.8rem;font-weight:800}.speak{cursor:pointer;background:0 0;border:none;font-size:1.4rem}.speak-lg{background:var(--card);border-radius:var(--radius);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);border:none;padding:16px 22px;font-family:inherit;font-size:1.1rem;font-weight:700}.meta{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.chip{background:var(--scene);color:var(--ink);border-radius:20px;padding:4px 12px;font-size:.88rem;font-weight:700}.chip-lv{color:var(--muted);background:#f7eedd}.ipa{color:var(--muted);font-size:1rem}.btn-reveal{background:var(--scene);width:100%;color:var(--ink);border-radius:var(--radius);cursor:pointer;box-shadow:0 3px 0 #2f343740, var(--shadow);border:none;padding:16px;font-family:inherit;font-size:1.1rem;font-weight:800}.btn-reveal:active{transform:translateY(2px);box-shadow:0 1px #2f343740}.reveal{text-align:center;border-top:2px dashed var(--line);width:100%;padding-top:12px}.reveal .th{color:var(--th-accent);font-size:1.3rem;font-weight:800}.reveal .ex{margin-top:8px;font-size:1.05rem;font-style:italic}.reveal .ex-th{color:var(--muted);font-size:1rem}.learn-nav{gap:12px;display:flex}.learn-nav .btn{flex:1}.quiz-q{background:var(--card);border-radius:var(--note-radius);border-top:8px solid var(--scene);box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:10px;padding:22px;display:flex}.q-text{color:var(--muted);font-weight:600}.choices{flex-direction:column;gap:10px;display:flex}.choices-img{flex-flow:wrap;justify-content:center}.choice{background:var(--card);color:var(--ink);border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow);border:2px solid #0000;padding:14px;font-family:inherit;font-size:1.1rem;font-weight:700}.choice-img{justify-content:center;width:calc(50% - 5px);padding:18px;display:flex}.choice.right{background:var(--good);border-color:#2f343726}.choice.wrong{background:var(--bad);opacity:.9;border-color:#2f34371a}.answer-strip{text-align:center;background:var(--card);box-shadow:var(--shadow);border-radius:12px;padding:10px}.answer-strip .th{color:var(--th-accent);font-weight:700}.quiz-result{text-align:center;flex-direction:column;align-items:center;gap:14px;padding-top:40px;display:flex}.big-emoji{font-size:4rem}.grades{gap:8px;display:flex}.grade{box-shadow:var(--shadow);flex:1;padding:12px 4px;font-size:.9rem}.g-again{background:var(--bad)}.g-hard{background:#ffe0a3}.g-good{background:var(--good)}.g-easy{background:#bfe4f7}.stat-grid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.stat{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:4px;padding:14px 8px;display:flex}.stat b{color:var(--th-accent);font-size:1.5rem}.stat span{color:var(--muted);text-align:center;font-size:.85rem}.browse-hint{text-align:center;margin-top:-6px}.browse-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;display:grid}.bcard{background:var(--card);border:none;border-top:5px solid var(--scene);box-shadow:var(--shadow);cursor:pointer;color:var(--ink);border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;font-family:inherit;display:flex}.bcard:active{transform:scale(.96)}.wimg-sm{object-fit:contain;width:52px;height:52px}.bcard .wimg-placeholder{width:52px;height:52px;font-size:1.6rem}.bword{word-break:break-word;font-size:1rem;font-weight:800}.bth{color:var(--muted);word-break:break-word;font-size:.88rem;line-height:1.25}.toast{background:var(--ink);color:#fff;border-radius:var(--radius);z-index:10;padding:12px 20px;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000040}@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}