:root{--color-primary: #9E8B59;--color-primary-hover: #b39d6a;--color-dark: #0F1419;--color-darker: #000000;--color-light: #ffffff;--color-bg-light: #f8f9fa;--color-error: #dc3545;--color-success: #28a745;--gradient-wealth: linear-gradient(135deg, #10b981 0%, #059669 100%);--gradient-creativity: linear-gradient(135deg, #f97316 0%, #ea580c 100%);--gradient-love: linear-gradient(135deg, #ec4899 0%, #be123c 100%);--gradient-power: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);--gradient-health: linear-gradient(135deg, #10b981 0%, #047857 100%);--gradient-weight: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);--gradient-smoking: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);--gradient-friends: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);--icon-wealth: #10b981;--icon-creativity: #f97316;--icon-love: #ec4899;--icon-power: #3b82f6;--icon-health: #10b981;--icon-weight: #8b5cf6;--icon-smoking: #ef4444;--icon-friends: #14b8a6}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{margin:0;padding:0;min-height:100vh;background:linear-gradient(135deg,var(--color-dark) 0%,var(--color-darker) 100%);background-attachment:fixed;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--color-light);display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow-x:hidden;width:100%}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 50%,rgba(158,139,89,.05) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(158,139,89,.05) 0%,transparent 50%);pointer-events:none;z-index:0}.container{width:90%;max-width:900px;padding:3rem;margin:2rem auto;background:#ffffff0d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:2rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000005e,inset 0 1px #ffffff1a;color:var(--color-light);position:relative;z-index:1}.loading-spinner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;background:#1b1e28e6;padding:2rem;border-radius:1rem;display:none;flex-direction:column;align-items:center;gap:1rem}.loading-spinner.visible{display:flex}.spinner{width:50px;height:50px;border:4px solid rgba(158,139,89,.3);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10000;background:var(--color-light);padding:2rem;border-radius:1rem;box-shadow:0 10px 40px #0000004d;max-width:400px;width:90%;display:none}.error-message.visible{display:block}.error-content{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.error-icon{width:60px;height:60px;color:var(--color-error)}.error-message p{color:var(--color-dark);margin:0;font-size:1.1rem}.error-actions{display:flex;gap:1rem;margin-top:1rem}.error-btn{padding:.75rem 1.5rem;border:none;border-radius:.5rem;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s ease}.error-btn.retry{background:var(--color-primary);color:var(--color-light)}.error-btn.retry:hover{background:var(--color-dark)}.error-btn.dismiss{background:#e9ecef;color:var(--color-dark)}.error-btn.dismiss:hover{background:#dee2e6}.language-selector{display:flex;justify-content:flex-end;gap:.8rem;margin-bottom:2rem}.language-btn{background:#ffffff1a;color:var(--color-light);border:1px solid rgba(255,255,255,.2);padding:.6rem 1.2rem;border-radius:.8rem;cursor:pointer;font-size:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:600;min-width:44px;min-height:44px;backdrop-filter:blur(10px)}.language-btn:hover,.language-btn:focus{background:#9e8b594d;border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #9e8b594d;outline:none}.language-btn.active{background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 4px 12px #9e8b5966}h1{text-align:center;color:var(--color-light);margin-bottom:3rem;font-size:3rem;font-weight:800;letter-spacing:-1px;text-shadow:0 2px 20px rgba(158,139,89,.3);background:linear-gradient(135deg,#ffffff 0%,var(--color-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.player-container{background:#ffffff08;backdrop-filter:blur(10px);padding:2.5rem;border-radius:1.5rem;margin-bottom:2.5rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 16px #0003}.track-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:2.5rem}.track-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;background:#ffffff14;color:var(--color-light);border-radius:1.25rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.1);font-size:1.1rem;font-weight:700;line-height:1.4;min-width:44px;min-height:120px;position:relative;overflow:hidden;backdrop-filter:blur(10px)}.track-btn .icon{width:2.5rem;height:2.5rem;margin-bottom:1rem;transition:all .3s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));color:#fff}.track-btn[data-file="WEALTH.mp3"]{background:var(--gradient-wealth)}.track-btn[data-file="CREATIVITY.mp3"]{background:var(--gradient-creativity)}.track-btn[data-file="LOVE.mp3"]{background:var(--gradient-love)}.track-btn[data-file="POWER.mp3"]{background:var(--gradient-power)}.track-btn[data-file="HEALTH.mp3"]{background:var(--gradient-health)}.track-btn[data-file="WEIGHT.mp3"]{background:var(--gradient-weight)}.track-btn[data-file="SMOKING.mp3"]{background:var(--gradient-smoking)}.track-btn[data-file="FRIENDS.mp3"]{background:var(--gradient-friends)}.track-btn:hover,.track-btn:focus{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 24px #0000004d;border-color:#ffffff4d;outline:none}.track-btn:hover .icon{transform:scale(1.1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.track-btn.active{transform:scale(.98);box-shadow:0 8px 16px #0006,inset 0 2px 8px #0003;border-color:#ffffff4d}.track-btn.active .icon{transform:scale(1.05)}.english{font-size:1rem;margin-top:.6rem;color:inherit;opacity:.85}.player-controls{background:#ffffff0d;backdrop-filter:blur(10px);padding:2rem;border-radius:1rem;border:1px solid rgba(255,255,255,.1)}.time-display{text-align:center;font-size:1.1rem;margin-bottom:1rem;color:var(--color-light);font-weight:600;letter-spacing:.5px;opacity:.9}.progress-container{width:100%;height:.5rem;background:#ffffff1a;border-radius:.25rem;margin:1.5rem 0;cursor:pointer;overflow:hidden;position:relative}.progress-container:focus{outline:2px solid var(--color-primary);outline-offset:2px}.progress-bar{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,#d4af6a 100%);border-radius:.25rem;width:0%;transition:width .1s linear;box-shadow:0 0 10px #9e8b5980}.volume-control{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;padding:1rem;background:#ffffff0d;border-radius:.8rem;border:1px solid rgba(255,255,255,.1)}.volume-icon{width:24px;height:24px;color:var(--color-light);flex-shrink:0;opacity:.8}.volume-slider{flex:1;height:6px;border-radius:3px;background:#ffffff1a;outline:none;-webkit-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #0003}.volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;transition:all .3s ease;box-shadow:0 2px 4px #0003}.volume-slider::-webkit-slider-thumb:hover,.volume-slider::-moz-range-thumb:hover{transform:scale(1.2);background:var(--color-primary-hover);box-shadow:0 0 12px #9e8b5980}.volume-slider:focus{outline:none}.volume-value{min-width:45px;text-align:right;font-weight:600;color:var(--color-light);font-size:.95rem;opacity:.8}.control-buttons{display:flex;justify-content:center;gap:1.5rem}button{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-hover) 100%);border:1px solid rgba(255,255,255,.1);padding:1rem 2rem;color:#fff;border-radius:.8rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:1.1rem;font-weight:700;letter-spacing:.3px;min-width:44px;min-height:44px;box-shadow:0 4px 12px #9e8b594d}.button:hover,button:focus{transform:translateY(-2px);box-shadow:0 6px 20px #9e8b5966;outline:none}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.info-box{margin-top:2.5rem;color:var(--color-light);background:#ffffff0d;backdrop-filter:blur(10px);padding:2rem;border-radius:1rem;border:1px solid rgba(255,255,255,.1)}.info-box p{color:var(--color-light);font-size:1.1rem;line-height:1.7;font-weight:500;opacity:.9}.info-box a{color:var(--color-primary);text-decoration:underline;font-weight:600;transition:all .3s ease}.info-box a:hover,.info-box a:focus{color:var(--color-primary-hover);text-decoration-thickness:2px;outline:none}.explanation{margin-top:2.5rem;font-size:1.1rem;line-height:1.8;color:var(--color-light);text-align:left}.explanation h2{color:var(--color-primary);font-size:1.8rem;margin-bottom:2rem;font-weight:700;letter-spacing:-.3px}.explanation ul{list-style-type:none;padding-left:0}.explanation li{margin-bottom:1.5rem;padding-left:2.5rem;position:relative;color:var(--color-light);opacity:.9}.explanation li:before{content:"•";position:absolute;left:0;font-size:1.8rem;color:var(--color-primary)}.explanation li strong{font-weight:700;display:block;margin-bottom:.5rem;font-size:1.2rem;color:var(--color-primary)}.keyboard-shortcuts{margin-top:2rem;padding:1.5rem;background:var(--color-bg-light);border-radius:1rem;border:2px solid rgba(27,30,40,.1)}.keyboard-shortcuts summary{cursor:pointer;font-weight:600;font-size:1.1rem;color:var(--color-dark);padding:.5rem;user-select:none}.keyboard-shortcuts summary:hover,.keyboard-shortcuts summary:focus{color:var(--color-primary);outline:2px solid var(--color-primary);outline-offset:2px;border-radius:.5rem}.keyboard-shortcuts ul{list-style:none;padding:1rem 0 0;margin:0}.keyboard-shortcuts li{padding:.5rem 0;color:var(--color-dark);font-size:1rem}.keyboard-shortcuts kbd{background:var(--color-dark);color:#fff;padding:.25rem .5rem;border-radius:.25rem;font-family:monospace;font-size:.9rem;font-weight:600;box-shadow:0 2px 4px #0000001a}.footer{width:100%;background:var(--color-dark);color:var(--color-light);padding:20px;margin-top:auto;text-align:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.footer p{margin:0;font-size:1.1rem;line-height:1.6}.footer a{color:var(--color-primary);text-decoration:none;font-weight:600;transition:all .3s ease}.footer a:hover,.footer a:focus{color:var(--color-light);text-decoration:underline;outline:2px solid var(--color-primary);outline-offset:2px}@media (max-width: 768px){.container{width:100%;padding:1rem;margin:0;border-radius:0}h1{font-size:2rem}.track-buttons{grid-template-columns:1fr}.track-btn{padding:1.5rem}.control-buttons{flex-direction:column;gap:1.2rem}button{width:100%}.footer{padding:16px}.footer p{font-size:1rem}.error-message{max-width:90%}}@media (max-width: 480px){.container{padding:.75rem}h1{font-size:1.8rem;margin-bottom:2rem}.track-btn{font-size:1.1rem}.track-btn .icon{width:1.8rem;height:1.8rem}.explanation li{font-size:1.1rem}.footer p{font-size:.95rem}.volume-control{flex-direction:column;align-items:stretch}.volume-slider{width:100%}}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.update-notification{position:fixed;bottom:20px;right:20px;background:var(--color-bg-light);padding:1rem;border-radius:.5rem;box-shadow:0 4px 6px #0000004d;display:flex;align-items:center;gap:1rem;z-index:1000;border:1px solid var(--color-primary);transform:translateY(0);transition:transform .3s ease,opacity .3s ease}.update-notification.hidden{transform:translateY(100px);opacity:0;pointer-events:none}.update-notification p{margin:0;color:var(--color-dark)}.update-notification button{background:var(--color-primary);color:var(--color-light);border:none;padding:.5rem 1rem;border-radius:.25rem;cursor:pointer;font-weight:700;min-width:auto;min-height:auto}.update-notification button:hover{background:var(--color-dark)}