@font-face{font-family:IPA Local;src:url(/fonts/DejaVuSans.ttf)format("truetype");font-style:normal;font-weight:400;font-display:swap}:root{color:#263c36;font-synthesis:none;background:#f7f8f3;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-width:48px;min-height:48px;color:inherit}button:focus-visible{outline-offset:4px;outline:3px solid #d28b32}button:disabled{opacity:.4;cursor:default}svg{flex-shrink:0;width:20px;height:20px}.shell{max-width:1240px;padding:max(32px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left));margin:auto}header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px;display:flex}.identity{align-items:center;gap:14px;display:flex}.brand-mark{color:#355c46;background:#dce8de;border-radius:17px;place-items:center;width:56px;height:56px;font:italic 30px Georgia,serif;display:grid}h1{letter-spacing:-1px;margin:0 0 4px;font-size:26px}header p{color:#7b8a81;letter-spacing:1.5px;margin:0;font-size:13px}.offline{color:#67756d;align-items:center;gap:10px;max-width:260px;font-size:12px;line-height:1.5;display:flex}.offline[hidden]{display:none}.offline button{background:0 0;border:0;font-size:12px;text-decoration:underline}.tabs{background:#e9ede5;border-radius:18px;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;display:grid}.tabs button{color:#728075;background:0 0;border:0;border-radius:13px;min-height:54px;font-weight:600}.tabs button[aria-current=page]{color:#2f5944;background:#fff;box-shadow:0 2px 7px #253c3210}.intro{justify-content:space-between;align-items:center;margin:36px 0 32px;display:flex}.eyebrow{letter-spacing:2px;color:#798b73;margin:0 0 8px;font-size:10px}h2{letter-spacing:1px;margin:0 0 8px;font-size:30px}.intro p:last-child{color:#7b857c;margin:0;font-size:14px}.count{color:#63785e;background:#e9eee4;border-radius:20px;padding:9px 15px;font-size:13px}.section-heading{align-items:center;gap:12px;margin:26px 0 15px;display:flex}h3{letter-spacing:.5px;margin:0;font-size:14px;font-weight:600}.section-heading>span{color:#8a958b;font-size:11px}.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.card{background:#fff;border:1px solid #e1e7dc;border-radius:21px;overflow:hidden;box-shadow:0 3px 1px #dae1d51f}.sound{background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;min-height:132px;padding:18px 5px 13px;display:flex}.ipa{color:#32563f;white-space:nowrap;font-family:IPA Local,Times New Roman,serif;font-size:50px;line-height:1.2}.listen{color:#9aa896;align-items:center;gap:6px;font-size:10px;display:flex}.listen svg{width:14px;height:14px}.word{color:#61715f;background:#f9faf7;border:0;border-top:1px solid #edf0e9;justify-content:center;align-items:center;gap:9px;width:100%;min-height:49px;font-size:17px;display:flex}.word svg{color:#9aa896;width:15px;height:15px}.sound.active,.word.active{background:#e4efda;box-shadow:inset 0 0 0 2px #88a975}.help{color:#92a08d;justify-content:center;align-items:center;gap:7px;margin:30px 0;font-size:12px;display:flex}.help svg{width:15px;height:15px}footer{bottom:max(12px,env(safe-area-inset-bottom));background:#edf1e8;border:1px solid #e0e6d9;border-radius:22px;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding:16px 20px;display:flex;position:sticky;box-shadow:0 8px 24px #3446310d}.now{flex-direction:column;gap:6px;min-width:110px;font-size:13px;display:flex}.now-label{letter-spacing:1px;color:#87967e;font-size:10px}.controls{flex-wrap:wrap;justify-content:center;gap:7px;display:flex}.controls button{background:#f8faf4;border:1px solid #dbe3d2;border-radius:12px;padding:0 12px;font-size:12px}.controls .primary{color:#fff;background:#3b5d43;border-color:#3b5d43}.controls [aria-pressed=true]{background:#d6e5cb;border-color:#95ae81}.error{color:#7a4822;background:#fff0df;border:1px solid #e9cba6;border-radius:12px;padding:14px;font-size:14px}.error[hidden]{display:none}@media (min-width:1100px) and (orientation:landscape){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:1500px) and (orientation:landscape){.shell{max-width:1500px}.grid{grid-template-columns:repeat(8,minmax(0,1fr))}}@media (max-width:650px){.shell{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}header{align-items:flex-start;gap:10px}h1{font-size:22px}.brand-mark{display:none}.offline{max-width:150px;font-size:10px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}footer{flex-direction:column;padding:12px}.now{align-items:center}.now-label{display:none}.controls button{padding:0 10px;font-size:12px}.tabs button{font-size:14px}.intro{margin-top:26px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}.sound-note{color:#73856e;font-size:11px;line-height:1.3}.sound:has(.sound-note){gap:7px}.sound:disabled{opacity:1}.sound:disabled .ipa{color:#8a958b}.sound:disabled .listen{color:#7b857c}#playback-notice{color:#7a4822;font-size:13px;line-height:1.6}.contrast{padding:0 10px 8px}.contrast p{color:#67756d;margin:2px 0 6px;font-size:11px;line-height:1.6}.comparison{background:#f1f5ec;border:1px solid #dbe3d2;border-radius:9px;justify-content:center;align-items:center;gap:5px;width:100%;padding:5px;font-size:12px;display:flex}.comparison svg{width:14px;height:14px}.comparison.active{background:#e4efda}.word-label{flex-direction:column;gap:3px;display:flex}.word-label small{color:#7b857c;font-family:IPA Local,sans-serif;font-size:11px}.word{min-height:58px;padding:8px 4px}