:root{--paper:#f6f8f5;--surface:#fff;--ink:#182522;--muted:#66736f;--line:#dbe2de;--strong:#bdc9c3;--teal:#087e78;--pale:#e3f2ef;--thai:"Noto Sans Thai Looped","Thonburi",sans-serif;--sans:"Noto Sans TC",sans-serif}*{box-sizing:border-box}body{margin:0;background:linear-gradient(rgba(24,37,34,.025) 1px,transparent 1px),var(--paper);background-size:100% 28px;color:var(--ink);font-family:var(--sans)}a{color:inherit;text-decoration:none}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px clamp(18px,4vw,58px);min-height:76px;border-bottom:1px solid var(--strong);background:rgba(255,255,255,.95);position:sticky;top:0;z-index:2;backdrop-filter:blur(18px)}.brand{display:flex;gap:12px;align-items:center}.brand-mark{display:grid;place-items:center;width:46px;height:46px;background:var(--ink);color:#fff;font:600 24px var(--thai);border-radius:4px}.brand strong,.brand small{display:block}.brand strong{font:600 20px var(--thai)}.brand small{font-size:11px;color:var(--muted);margin-top:-3px}.topnav{display:flex;gap:4px}.topnav a{padding:12px 15px;color:var(--muted);font-weight:600}.topnav a:hover,.topnav a.active{background:var(--pale);color:var(--teal)}main{width:min(1180px,calc(100% - 36px));margin:auto;padding:54px 0 76px}.hero{display:flex;align-items:end;justify-content:space-between;gap:24px;border-top:4px solid var(--ink);border-bottom:1px solid var(--strong);padding:0 0 26px}.eyebrow{margin:0 0 5px;color:var(--teal);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.hero h1{margin:0;font-size:40px}.hero p{margin:10px 0 0;color:var(--muted);font-size:14px}.hero-meta{text-align:right;color:var(--muted);font-size:12px}.tabs{display:inline-flex;gap:4px;margin:26px 0 18px;padding:4px;border:1px solid var(--line);background:#edf1ee;border-radius:5px}.tabs button{border:0;background:transparent;padding:9px 24px;border-radius:3px;color:var(--muted);font-weight:600;cursor:pointer}.tabs button.active{background:#fff;color:var(--ink);box-shadow:0 1px 5px rgba(24,37,34,.1)}.sound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}.sound-card{display:grid;min-height:166px;align-content:start;gap:7px;padding:16px 13px 12px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;transition:.15s}.sound-card:hover,.sound-card.is-playing{border-color:var(--teal);background:var(--pale);transform:translateY(-2px)}.sound-symbol{font:600 34px var(--thai);line-height:1.2}.sound-roman{color:var(--teal);font-size:13px;font-weight:700}.sound-name{color:var(--muted);font:14px var(--thai);line-height:1.4}.sound-play{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);color:var(--teal-dark);font-size:11px;font-weight:600}.sound-play span{float:right;font-size:15px}@media(max-width:600px){.topbar{padding:9px 16px}.topnav a{padding:10px 8px;font-size:12px}.topnav a:first-child{display:none}main{padding-top:32px}.hero{display:block}.hero h1{font-size:32px}.hero-meta{text-align:left;margin-top:18px}.sound-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sound-card{min-height:148px;padding:13px 11px}.sound-symbol{font-size:30px}}