*{box-sizing:border-box}
:root{color-scheme:light;--bg:#f6f6f4;--card:#fff;--text:#20201d;--muted:#8a8a82;--line:#e3e3dd;--active:#20201d}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit;color:inherit}
main{width:min(900px,100%);margin:auto;padding:42px 22px 56px}
header{display:flex;align-items:center;gap:13px;margin-bottom:28px}
header img{width:48px;height:48px;border-radius:13px}
h1{margin:0;font-size:27px;line-height:1.15;letter-spacing:-.5px}
header p{margin:4px 0 0;color:var(--muted);font-size:13px}
.grid{display:block}.group+.group{margin-top:34px}.group-title{display:flex;align-items:baseline;gap:8px;margin:0 0 12px}.group-title h2{margin:0;font-size:17px;letter-spacing:-.2px}.group-title span{color:var(--muted);font-size:11px}.sound-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sound{display:flex;align-items:center;justify-content:center;min-height:70px;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-align:center;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.sound:hover{border-color:#c6c6bf;transform:translateY(-1px)}
.sound:active{transform:scale(.98)}
.sound.playing{background:var(--active);border-color:var(--active);color:#fff}

.sound.playing 
.name{display:block;overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){main{padding:28px 16px 44px}.sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){main{padding:23px 14px 38px}header{margin-bottom:22px}header img{width:44px;height:44px}h1{font-size:24px}.sound-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sound{min-height:58px;padding:10px 7px;border-radius:11px}}
@media(prefers-reduced-motion:reduce){.sound{transition:none}}
.sound:disabled{cursor:default;opacity:.52;transform:none}

.sound{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
/* Loading transition */
.loading-screen{position:fixed;z-index:1000;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);transition:opacity .38s ease,visibility .38s ease}
.loading-brand{display:flex;align-items:center;gap:14px;will-change:transform;transition:transform .72s cubic-bezier(.2,.8,.2,1)}
.loading-brand img{width:62px;height:62px;border-radius:17px;box-shadow:0 8px 26px rgba(32,32,29,.12);transition:width .72s cubic-bezier(.2,.8,.2,1),height .72s cubic-bezier(.2,.8,.2,1),border-radius .72s ease,box-shadow .35s ease}
.loading-copy{display:flex;flex-direction:column;gap:4px}.loading-copy strong{font-size:30px;line-height:1.1;letter-spacing:-.6px}.loading-copy span{color:var(--muted);font-size:13px}



#appMain{opacity:0;transition:opacity .45s ease}#siteHeader{opacity:0}.group{opacity:0;transform:translateY(12px)}
body.loading-fly .loading-progress,body.loading-fly 
body.loading-fly .loading-brand img{width:48px;height:48px;border-radius:13px;box-shadow:none}
body.loading-done .loading-screen{opacity:0;visibility:hidden;pointer-events:none}
body.loading-done #appMain{opacity:1}body.loading-done #siteHeader{opacity:1;transition:opacity .12s ease .05s}
body.loading-done .group{animation:groups-in .48s ease both}body.loading-done .group:nth-child(2){animation-delay:.1s}
@keyframes groups-in{to{opacity:1;transform:none}}
@media(max-width:480px){.loading-brand img{width:56px;height:56px}.loading-copy strong{font-size:26px}body.loading-fly .loading-brand img{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.loading-screen,.loading-brand,.loading-brand img,#appMain{transition-duration:.01ms!important}.group{animation-duration:.01ms!important}}

/* v21 spinner loader */
.loading-progress,
.loading-spinner{width:28px;height:28px;margin-top:26px;border:3px solid #deded8;border-top-color:var(--active);border-radius:50%;animation:loading-spin .72s linear infinite;transition:opacity .22s ease,transform .22s ease}
body.loading-fly .loading-spinner{opacity:0;transform:scale(.72)}
@keyframes loading-spin{to{transform:rotate(360deg)}}
@media(max-width:480px){.loading-spinner{width:26px;height:26px;margin-top:23px}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation-duration:1.4s}}
/* Progressive loading */
.music-pending .sound{opacity:.42}
.music-pending .group-title span{color:var(--muted)}