.whistle-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000;overflow:hidden;-webkit-tap-highlight-color:transparent}.back-button,.whistle-container{display:flex;justify-content:center;align-items:center}.back-button{position:absolute;top:16px;left:24px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;z-index:100;padding:0;transition:opacity .2s}.back-button:hover{opacity:.7}.back-button:active{opacity:.5}.whistle-content{display:flex;gap:16px;padding:16px;width:100%;height:100%;box-sizing:border-box}.whistle-content.mobile{flex-direction:column;justify-content:center;align-items:center;padding:16px 48px}.whistle-content.desktop{flex-direction:row;gap:24px;padding:32px}.whistle-card,.whistle-content.desktop{justify-content:center;align-items:center}.whistle-card{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:16px;cursor:pointer;transition:transform .2s ease,background-color .3s ease,border-color .3s ease,border-width .3s ease;border:none;outline:none}.mobile .whistle-card{width:100%;aspect-ratio:1;max-width:400px}.desktop .whistle-card{width:300px;height:300px}.whistle-card.short{background:rgba(76,175,80,.1);border:1px solid rgba(76,175,80,.3)}.whistle-card.short.playing{background:rgba(76,175,80,.3);border:3px solid #4caf50}.whistle-card.short:not(:disabled):hover{background:rgba(76,175,80,.15);transform:scale(1.02)}.whistle-card.short:not(:disabled):active{transform:scale(.98)}.whistle-card.long{background:rgba(244,67,54,.1);border:1px solid rgba(244,67,54,.3)}.whistle-card.long.playing{background:rgba(244,67,54,.3);border:3px solid #f44336}.whistle-card.long:not(:disabled):hover{background:rgba(244,67,54,.15);transform:scale(1.02)}.whistle-card.long:not(:disabled):active{transform:scale(.98)}.whistle-card:disabled{opacity:.5;cursor:not-allowed}.whistle-icon{font-size:60px;transition:all .3s ease;opacity:1}.whistle-card.playing .whistle-icon{opacity:.6}.whistle-icon.scale{animation:iconScale .2s ease-out forwards}.whistle-card.long .whistle-icon.scale{animation:iconScale 1s ease-out forwards}@keyframes iconScale{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.whistle-title{font-size:20px;font-weight:700;color:white;margin:0}.whistle-subtitle{font-size:16px;color:rgba(255,255,255,.6);text-align:center;margin:0;transition:color .3s ease}.whistle-card.short.playing .whistle-subtitle{font-size:16px;color:#ffa500}.whistle-card.long.playing .whistle-subtitle{font-size:16px;color:#ff6b6b}@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}}