.whistle-container{-webkit-tap-highlight-color:transparent;background:#000;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0;overflow:hidden}.back-button{cursor:pointer;z-index:100;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;padding:0;transition:opacity .2s;display:flex;position:absolute;top:16px;left:24px}.back-button:hover{opacity:.7}.back-button:active{opacity:.5}.whistle-content{box-sizing:border-box;gap:16px;width:100%;height:100%;padding:16px;display:flex}.whistle-content.mobile{flex-direction:column;justify-content:center;align-items:center;padding:16px 48px}.whistle-content.desktop{flex-direction:row;justify-content:center;align-items:center;gap:24px;padding:32px}.whistle-card{cursor:pointer;border:none;border-radius:16px;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;transition:transform .2s,background-color .3s,border-color .3s,border-width .3s;display:flex}.mobile .whistle-card{aspect-ratio:1;width:100%;max-width:400px}.desktop .whistle-card{width:300px;height:300px}.whistle-card.short{background:#4caf501a;border:1px solid #4caf504d}.whistle-card.short.playing{background:#4caf504d;border:3px solid #4caf50}.whistle-card.short:not(:disabled):hover{background:#4caf5026;transform:scale(1.02)}.whistle-card.short:not(:disabled):active{transform:scale(.98)}.whistle-card.long{background:#f443361a;border:1px solid #f443364d}.whistle-card.long.playing{background:#f443364d;border:3px solid #f44336}.whistle-card.long:not(:disabled):hover{background:#f4433626;transform:scale(1.02)}.whistle-card.long:not(:disabled):active{transform:scale(.98)}.whistle-card:disabled{opacity:.5;cursor:not-allowed}.whistle-icon{opacity:1;font-size:60px;transition:all .3s}.whistle-card.playing .whistle-icon{opacity:.6}.whistle-icon.scale{animation:.2s ease-out forwards iconScale}.whistle-card.long .whistle-icon.scale{animation:1s ease-out forwards iconScale}@keyframes iconScale{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.whistle-title{color:#fff;margin:0;font-size:20px;font-weight:700}.whistle-subtitle{color:#fff9;text-align:center;margin:0;font-size:16px;transition:color .3s}.whistle-card.short.playing .whistle-subtitle{color:orange;font-size:16px}.whistle-card.long.playing .whistle-subtitle{color:#ff6b6b;font-size:16px}@media (min-width:768px) and (max-width:1024px){.whistle-content.desktop{gap:20px;padding:24px}.desktop .whistle-card{width:280px;height:280px}}@media (max-width:480px){.whistle-content.mobile{padding:16px 32px}.whistle-icon{font-size:50px}.whistle-title{font-size:18px}.whistle-subtitle{font-size:14px}}@media (min-width:1440px){.desktop .whistle-card{width:350px;height:350px}.whistle-icon{font-size:70px}.whistle-title{font-size:22px}.whistle-subtitle{font-size:18px}}