:root{--ink:#17160f;--sand:#f2e6ce;--cream:#fff9ed;--orange:#ff5a24;--blue:#2764e7;--acid:#d8ff45}*{box-sizing:border-box}html{background:var(--sand)}body{color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}a{color:inherit}.public-shell{background:radial-gradient(circle at 12% 7%, #fffc 0 2px, transparent 3px), linear-gradient(115deg, transparent 0 70%, #2764e714 70% 70.5%, transparent 70.5%), var(--sand);min-height:100vh;padding:30px clamp(20px,5vw,72px) 24px;overflow:hidden}.hero{max-width:1180px;margin:0 auto 34px;position:relative}.eyebrow{letter-spacing:.21em;text-transform:uppercase;margin:0 0 12px;font-size:11px;font-weight:700}.hero h1{letter-spacing:-.065em;text-transform:uppercase;margin:0;font-family:Archivo Black,Impact,sans-serif;font-size:clamp(58px,11vw,150px);line-height:.73}.hero h1 span{color:var(--orange);letter-spacing:-.04em;font-size:.58em}.lede{background:var(--acid);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);margin:0;padding:9px 14px;font-weight:700;position:absolute;bottom:2px;right:2%;transform:rotate(-2deg)}.sound-grid,.loading-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:center;gap:clamp(18px,3vw,40px);max-width:1120px;margin:0 auto;display:grid}.sound-button{aspect-ratio:1;border:4px solid var(--ink);width:100%;max-width:250px;box-shadow:8px 9px 0 var(--ink);cursor:pointer;background:#d4c5aa;border-radius:50%;justify-self:center;padding:0;transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden}.sound-button:nth-child(3n+2){transform:rotate(2deg)}.sound-button:nth-child(3n){transform:rotate(-1.5deg)}.sound-button:hover{box-shadow:11px 13px 0 var(--ink);transform:translate(-2px,-3px)rotate(0)}.sound-button:active,.sound-button.is-playing{box-shadow:2px 2px 0 var(--ink);transform:translate(6px,7px)}.sound-button:focus-visible{outline:5px solid var(--blue);outline-offset:5px}.sound-button img{object-fit:cover;filter:saturate(.9)contrast(1.05);width:100%;height:100%}.sound-shade{background:linear-gradient(#0000 45%,#000000bf);position:absolute;inset:0}.sound-name{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.sound-name path{fill:#0000}.sound-name text{fill:#fff;stroke:var(--ink);stroke-width:2px;paint-order:stroke;letter-spacing:.04em;text-transform:uppercase;font-family:Archivo Black,Impact,sans-serif;font-size:18px}.play-mark{border:2px solid var(--ink);background:var(--acid);border-radius:50%;place-items:center;width:42px;height:42px;font-size:16px;display:grid;position:absolute;top:16%;left:50%;transform:translate(-50%)}.is-playing .play-mark{background:var(--orange);color:#fff}.is-playing:after{content:"";border:8px solid var(--blue);border-radius:50%;animation:.75s ease-in-out infinite alternate throb;position:absolute;inset:-8px}@keyframes throb{to{opacity:.45;transform:scale(.94)}}.loading-grid span{aspect-ratio:1;background:#17160f1f;border-radius:50%;justify-self:center;width:100%;max-width:250px;animation:1s ease-in-out infinite alternate pulse}@keyframes pulse{to{opacity:.35}}.empty-state{text-align:center;max-width:520px;margin:50px auto 80px}.empty-orb{border:4px solid var(--ink);background:var(--blue);color:#fff;width:180px;height:180px;box-shadow:9px 10px 0 var(--ink);border-radius:50%;place-items:center;margin:0 auto 28px;font-family:Archivo Black,sans-serif;font-size:58px;display:grid;transform:rotate(-5deg)}.empty-state h2{text-transform:uppercase;margin:0;font-family:Archivo Black,sans-serif;font-size:32px}.empty-state p{margin:8px 0 0}footer{border-top:2px solid var(--ink);letter-spacing:.12em;text-transform:uppercase;justify-content:space-between;max-width:1120px;margin:60px auto 0;padding-top:15px;font-size:11px;font-weight:700;display:flex}footer a{opacity:.55}@media (max-width:620px){.public-shell{padding-inline:16px}.hero{margin-bottom:28px}.hero h1{font-size:clamp(52px,19vw,82px);line-height:.78}.hero h1 span{margin-top:8px;font-size:.48em;display:block}.lede{margin:20px 0 0 34%;display:inline-block;position:static}.sound-grid,.loading-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.sound-button{box-shadow:5px 6px 0 var(--ink);border-width:3px}.sound-name text{stroke-width:1.5px;font-size:16px}.play-mark{width:32px;height:32px;font-size:12px;top:13%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}