:root{--bg:#fff9ef;--ink:#3b2f4a;--muted:#7a6d8a;--card:#ffffff;--brand:#ff8a5c;--brand2:#7c5cff;--line:#f0e4d2;--radius:22px;--shadow:0 6px 18px rgba(80,50,20,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Mali,Sarabun,Noto Sans Thai,system-ui,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px 10px;z-index:99}.top{flex-wrap:wrap;gap:12px 20px;justify-content:space-between;padding:12px clamp(16px,4vw,40px);background:#fff;border-bottom:2px solid var(--line);position:-webkit-sticky;position:sticky;top:0;z-index:10}.brand,.top{display:flex;align-items:center}.brand{gap:10px}.brand .logo{font-size:2rem;background:#ffe8d6;border-radius:14px;padding:2px 8px}.brand strong{display:block;font-size:1.1rem}.brand small{color:var(--muted);font-size:.72rem}.search{display:flex;flex:1 1 220px;max-width:360px}.search input{flex:1 1;border:2px solid var(--line);border-right:0;border-radius:999px 0 0 999px;padding:8px 16px;font:inherit;outline:none}.search input:focus{border-color:var(--brand2)}.search button{border:2px solid var(--line);border-left:0;border-radius:0 999px 999px 0;background:#fff;padding:0 14px;cursor:pointer}#nav{display:flex;gap:6px;flex-wrap:wrap}#nav a{padding:7px 16px;border-radius:999px;font-weight:600}#nav a:hover{background:#fff0e4}#nav a.active{background:var(--brand);color:#fff}main{max-width:1120px;margin:0 auto;padding:24px clamp(16px,4vw,32px) 56px;min-height:70vh}h1,h2{line-height:1.25}.hero{background:linear-gradient(135deg,#ffe0c8,#e6dcff);border-radius:32px;padding:clamp(24px,5vw,48px);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}.hero h1{margin:0 0 6px;font-size:clamp(1.6rem,4vw,2.4rem)}.hero p{margin:0;color:var(--muted)}.hero .big{font-size:clamp(3rem,9vw,6rem)}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.chip{border:2px solid var(--line);background:#fff;border-radius:999px;padding:6px 16px;font:inherit;cursor:pointer;font-weight:600}.chip.on{background:var(--brand2);border-color:var(--brand2);color:#fff}.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));grid-gap:14px;gap:14px;margin:8px 0 28px}.cat{border-radius:var(--radius);padding:22px 16px;text-align:center;font-weight:700;box-shadow:var(--shadow);transition:transform .15s}.cat:hover{transform:translateY(-4px) rotate(-1deg)}.cat span{display:block;font-size:2.6rem}.section-title{display:flex;justify-content:space-between;align-items:baseline;margin:30px 0 12px}.section-title h2{margin:0;font-size:1.4rem}.section-title small{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));grid-gap:18px;gap:18px}.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s;display:flex;flex-direction:column}.card:hover{transform:translateY(-5px)}.cover{height:150px;display:grid;place-items:center;font-size:4.5rem;position:relative}.badge{position:absolute;top:10px;left:10px;background:#2fbf71;color:#fff;font-size:.75rem;padding:2px 10px;border-radius:999px;font-weight:700}.badge.paid{background:#e8a000}.card .body{padding:12px 14px 14px}.meta{color:var(--muted);font-size:.78rem;display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}.card h3{margin:0 0 6px;font-size:1.02rem}.stat{font-size:.78rem;color:var(--brand2);font-weight:600}.empty{text-align:center;color:var(--muted);padding:50px 0}.reader{max-width:760px;margin:0 auto}.crumb{color:var(--muted);font-size:.9rem;margin-bottom:8px}.stage{border-radius:30px;padding:32px 20px;text-align:center;box-shadow:var(--shadow);min-height:340px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;transition:background .4s;overflow:hidden}.stage .emoji{font-size:clamp(5rem,18vw,8.5rem);line-height:1}.stage p{font-size:clamp(1.15rem,3vw,1.5rem);margin:0;max-width:560px;font-weight:600}.ctrl{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:16px;flex-wrap:wrap}.btn{border:0;background:var(--brand);color:#fff;font:inherit;font-weight:700;padding:10px 22px;border-radius:999px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.12)}.btn:hover{filter:brightness(1.05)}.btn:disabled{opacity:.4;cursor:default}.btn.alt{background:var(--brand2)}.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--line);box-shadow:none}.dots{display:flex;gap:6px;justify-content:center;margin-top:12px}.dots i{width:10px;height:10px;border-radius:50%;background:#e3d6c4}.dots i.on{background:var(--brand2)}.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));grid-gap:12px;gap:12px;margin-top:18px}.tile{background:#fff;border:2px solid var(--line);border-radius:20px;padding:10px 0;text-align:center;cursor:pointer;font:inherit}.tile:hover{border-color:var(--brand2);transform:scale(1.04)}.tile b{display:block;font-size:2.2rem}.tile span{font-size:1.4rem}.lyrics{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.lyrics p{font-size:1.25rem;margin:8px 0;padding:6px 12px;border-radius:14px;transition:background .25s}.lyrics p.now{background:#ffe9a8;transform:scale(1.02)}@keyframes bob{50%{transform:translateY(-16px)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes float{50%{transform:translateX(26px)}}@keyframes fall{0%{transform:translateY(-40px);opacity:.2}to{transform:translateY(20px);opacity:1}}@keyframes grow{0%{transform:scale(.4)}to{transform:scale(1)}}.anim-bob{animation:bob 2s ease-in-out infinite}.anim-spin{animation:spin 6s linear infinite}.anim-float{animation:float 3s ease-in-out infinite}.anim-fall{animation:fall 1.2s ease-in infinite alternate}.anim-grow{animation:grow 1.4s ease-out both}.foot{text-align:center;padding:28px 16px;color:var(--muted);border-top:2px solid var(--line);background:#fff}.foot a{text-decoration:underline}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}a.chip{display:inline-block}.admin textarea{width:100%;min-height:260px;font:13px/1.5 monospace;border:2px solid var(--line);border-radius:14px;padding:10px}.admin input{font:inherit;border:2px solid var(--line);border-radius:999px;padding:8px 14px;width:100%;max-width:340px}.admin table{width:100%;border-collapse:collapse;margin-top:12px}.admin td,.admin th{border-bottom:1px solid var(--line);padding:8px;text-align:left}