:root{--bg:#121212;--surface:#1a1a1ae1;--text:#f0f0f0;--text-secondary:#a0a0a0;--accent:#ff4e8e;--accent-muted:#802747}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;font-family:Inter,sans-serif;font-size:16px;display:flex}button{cursor:pointer;color:#fff;background:var(--accent);box-shadow:0 0 25px var(--accent-muted);border:none;border-radius:7px;width:auto;height:auto;padding:10px 20px;font-size:1.2em;font-weight:700;transition:box-shadow .5s}button:hover{box-shadow:0 0 5px var(--accent-muted), 0 0 25px var(--accent-muted), 0 0 50px var(--accent-muted)}button:disabled{opacity:.4;cursor:not-allowed}input{background:var(--surface);border:1px solid var(--accent-muted);color:var(--text-secondary);border-radius:8px;outline:none;width:100%;padding:10px 14px;font-size:1em}input:hover,input:focus{transition:all .3s;transition-property:border-color box-shadow;border-color:var(--accent-muted);box-shadow:0 0 25px var(--accent-muted)}.site-header{background-color:var(--surface);z-index:1000;width:100vw;margin-bottom:40px;position:fixed;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex}.header-app-name{font-size:2em}.header-app-name:hover{text-decoration:none}.header-buttons{gap:20px;font-size:.8em;display:flex}.home-container{flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:100vh;padding:20px;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.introduction-card,.login-card,.register-form,.popup-content,.close-popup-button{animation-name:fadeUp;animation-duration:.7s;animation-timing-function:cubic-bezier(.23,1,.32,1)}.introduction-card{background-color:var(--surface);border-radius:26px;flex-direction:column;place-content:center;width:75vw;min-height:50vh;padding:30px;display:flex;box-shadow:0 50px 100px -20px #00000080,0 30px 60px -30px #00000080,inset 0 -2px 6px #0006}.title-header{color:var(--text);text-align:center;font-size:2em;font-weight:600}.app-name{color:var(--accent)}.title-subtitle{color:var(--text-secondary);text-align:center;margin-bottom:20px;font-size:1.1em;font-weight:500}.features{flex-direction:column;justify-content:center;align-items:center;gap:10px;margin:20px 0;display:flex}.feature-tab{color:var(--text);text-align:center;width:85%;transition:all .5s ease-in;transition-property:box-shadow background-color;border-radius:20px;padding:5px;font-size:1em;font-weight:600}.feature-tab:hover{background-color:var(--accent-muted);box-shadow:0 0 20px var(--accent-muted)}.login-container,.register-container{justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card,.register-form{background-color:var(--surface);border-radius:26px;width:80vw;padding:50px 40px;box-shadow:0 50px 100px -20px #00000080,0 30px 60px -30px #00000080,inset 0 -2px 6px #0006}.login-title,.register-title{color:var(--accent);text-align:center;text-shadow:0 0 5px var(--accent-muted), 0 0 25px var(--accent-muted);margin-bottom:15px;font-size:2.5em;font-weight:600}.email-field,.password-field{color:var(--text-secondary);margin:10px 0 5px;font-size:1.5em;font-weight:500}.forgot-password{color:var(--text-secondary);margin:20px 0;font-size:1.1em;font-weight:400}a{color:var(--accent);font-weight:600;text-decoration:none}.button-row{flex-direction:column;gap:20px;display:flex}.button-row button{flex:1}.btn-secondary{border:1px solid var(--accent);color:var(--accent);background:0 0}.error{color:#ff6b6b;font-size:13px}.registration-input{margin-bottom:20px;font-size:1.2em}.submit-button{justify-content:center;margin-top:40px;font-size:1.2em;display:flex}#song-list-page,#song-detail-page{flex-direction:column;align-items:center;padding:20px;display:flex}.songs-header,.sections-header{color:var(--accent);text-align:center;text-shadow:0 0 5px var(--accent-muted), 0 0 25px var(--accent-muted);margin-top:60px;margin-bottom:15px;font-size:2.5em;font-weight:600}.song-form,.section-form{flex-direction:column;width:70%;display:flex}.song-form-fields{color:var(--text-secondary);margin:10px 0 5px;font-size:1.3em;font-weight:500}.create-button{margin-top:20px}.song-list,.sections-list{opacity:1;min-width:80vw;margin-top:10px;transition:opacity .4s,transform .4s;transform:translateY(0)}.song-info,.section-info{background-color:var(--accent);color:var(--text);cursor:pointer;border-radius:15px;align-items:center;width:100%;margin-top:10px;padding:20px 20px 20px 30px;font-size:1.1em;font-weight:600;transition:all .2s ease-in-out;display:flex;box-shadow:inset 0 -23px 25px #00000069}.song-info:hover,.section-info:hover{transform:translateY(-3px);box-shadow:inset 0 -23px 25px #00000069}.popup{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.popup-content{background-color:var(--surface);border-radius:15px;flex-direction:column;justify-content:center;align-items:center;width:25em;padding:20px;display:flex;box-shadow:0 50px 100px -20px #00000080,0 30px 60px -30px #00000080,inset 0 -2px 6px #0006}.popup-song-info{margin-bottom:20px;font-size:1.5em}.popup-options{gap:50px;display:flex}.close-popup-button{margin:15px;font-size:1em}@starting-style{.song-list,.sections-list,.song-info,.section-info{opacity:0;transform:translateY(-20px)}}.delete-button{box-shadow:none;background:0 0;margin-left:auto;margin-right:0;font-size:10px}.delete-button:hover{box-shadow:none}.mastery{padding-left:10px;font-weight:400}.practice-section{display:flex}#video-container{aspect-ratio:16/9;background:#000;border-radius:12px;width:100%;overflow:hidden}#video-container iframe{display:block;width:100%!important;height:100%!important}.reps{flex-direction:column;justify-content:center;align-items:center;margin-top:20px;margin-bottom:20px;display:flex}.reps-label{color:var(--text);align-items:center;margin-bottom:10px;font-size:1.3em;font-weight:700;display:flex}.reps-input{width:80px;margin-bottom:10px}select{appearance:base-select}::picker(select){appearance:base-select}select{border:1px solid var(--accent-muted);background-color:var(--bg);color:var(--text);border-radius:20px;padding:10px}select:hover,select:focus{background:var(--accent-muted)}select::picker-icon{color:var(--text-secondary);transition:rotate .4s}select:open::picker-icon{rotate:180deg}::picker(select){border:none}option{background:var(--bg);border:2px solid var(--bg);gap:15px;padding:8px;transition:all .4s}option:first-of-type{border-radius:8px 8px 0 0}option:last-of-type{border-radius:0 0 8px 8px}::picker(select){border-radius:8px}option:not(option:last-of-type){border-bottom:none}option:focus{background:var(--accent)}option:checked{font-weight:700}::picker(select){opacity:0;transition:all .4s allow-discrete}:open::picker(select){opacity:1}@starting-style{:open::picker(select){opacity:0}}::picker(select){top:calc(anchor(bottom) + 1px);left:anchor(10%)}.heatmap{margin-top:50px}@media screen and (width>=768px) and (width<=1239px){.login-card,.register-form{max-width:500px}.practice-section .popup-content{min-width:80vw;height:80vh}#video-container{aspect-ratio:16/9;background:#000;border-radius:12px;width:120%;position:relative;left:50%;overflow:hidden;transform:translate(-50%)}#video-container iframe{display:block;width:100%!important;height:100%!important}.reps{flex-direction:row;justify-content:center;align-items:center;gap:10px}}@media screen and (width>=1240px){.introduction-card{width:50vw}.introduction-card button{width:50%;margin:0 auto;font-size:1.4em}.title-header{font-size:3em}.features{font-size:1.3em}.login-card,.register-form{max-width:500px}.song-list{width:50%}.practice-section .popup-content{min-width:90vw;height:80vh}.reps{flex-direction:row;gap:10px}#video-container{aspect-ratio:16/9;background:#000;border-radius:12px;width:150%;position:relative;left:50%;overflow:hidden;transform:translate(-50%)}#video-container iframe{display:block;width:100%!important;height:100%!important}}