:root{--primary-light:#fff7ed;--primary-dark:#ffedd5;--primary-orange:#f97316;--primary-pink:#f472b5;--primary-violet:#4e46e5;--primary-shadow:#f974161e;--orange-dark:#ac4c08;--modal-background:#000000b3;--chord-blue:#0101df;--comment-green:green;--text-main:#222;--text-muted:#777;--white:#fff;--title-font:2.6rem;--text-font:2rem;--chords-font:2rem;--key-words:2rem}*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}body{color:var(--text-main);background-color:var(--white);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.title-bar{font-size:var(--title-font);text-align:center;color:var(--orange-dark);background:linear-gradient(75deg,#4e46e559,#f472b560,#f59f0b57);padding:1.5rem 0;font-weight:600}.title-bar h1,.title-bar h2{margin:0;font-size:2.6rem;font-weight:600}.page-center{background-color:var(--white);width:100%;max-width:90rem;font-size:var(--text-font);margin:0 auto;padding:2rem 4rem}.song-card{background-color:var(--white);border:1px solid #ddd;border-radius:8px;margin:1rem 0;padding:1.5rem;transition:all .2s;display:block}.song-card:hover{border-color:var(--primary-orange);background-color:var(--primary-light);box-shadow:0 .5rem 1.5rem var(--primary-shadow)}.song-card-title{color:var(--orange-dark);margin:0;font-size:2.2rem;font-weight:500}.song-card-subtitle{color:var(--orange-dark);margin-top:.5rem;font-size:1.6rem;font-style:italic;font-weight:400}.song-card-meta{color:var(--text-muted);margin-top:1rem;font-size:1.5rem}.back-link{color:var(--orange-dark);margin-bottom:1.5rem;font-size:1.5rem;font-weight:500;display:inline-block}.back-link:hover{text-decoration:underline}.song-title{color:var(--orange-dark);margin:1rem 0 0;font-size:2.4rem;font-weight:500}.song-subtitle{color:var(--orange-dark);margin-top:0;margin-bottom:2rem;font-size:1.6rem;font-style:italic;font-weight:400}.song-data{color:var(--text-muted);flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:3rem;margin-bottom:2rem;font-size:1.6rem;display:flex}.song-data strong{color:var(--orange-dark);margin-left:.6rem;font-weight:600}.song-text{white-space:pre-wrap;flex-direction:column;margin-bottom:2rem;display:flex}.song-text-inner{flex-direction:column;width:fit-content;max-width:100%;margin:0 auto;display:flex}.line{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;max-width:100%;min-height:1.8rem;line-height:1.1em;font-size:var(--text-font);margin:0}.line-section{color:var(--orange-dark);margin-top:1.6rem;font-weight:700}.line-chord{color:var(--chord-blue);font-weight:500}.line-empty{min-height:1.4rem}.song-count{color:var(--text-muted);margin-bottom:1rem;font-size:1.5rem}@media (max-width:62em){.page-center{padding:2rem 3rem}}@media (max-width:48em){.page-center{padding:2rem}.title-bar h1,.title-bar h2{font-size:2.2rem}.song-data{justify-content:center;gap:1rem}.line{font-size:1.6rem}}@media (max-width:32em){.page-center{padding:1.2rem}.song-title{font-size:2rem}.line{font-size:1.5rem}}@media (max-width:22.5em){.page-center{padding:1rem}}.header-btn{white-space:nowrap;border-radius:8px;align-items:center;gap:.8rem;padding:1rem 2rem;font-size:1.8rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex;box-shadow:0 4px 12px #f973164d;color:#fff!important;background-color:#f97316!important}@media (max-width:30em){.header-btn{text-align:center;white-space:normal;justify-content:center;width:98%;margin:0 auto}body{background-color:#fff!important}.song-page-wrapper{margin:0!important;padding:0!important}.song-content-box{box-shadow:none!important;border-radius:0!important;margin:0!important;padding:1.5rem 1rem!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header{background-color:#ffedd5;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:1.5rem 3rem;display:flex}@media (max-width:64em){.header{justify-content:left;align-items:flex-start;gap:1rem}}@media (max-width:56em){.header{justify-content:center}}.sticky-app-btn{z-index:100;position:fixed;top:1.5rem;right:3rem}@media (max-width:64em){.sticky-app-btn{z-index:80;background-color:#ffedd5;justify-content:center;width:100%;padding:.8rem 1rem;position:sticky;top:0;right:auto;box-shadow:0 4px 15px #0000001a;display:flex!important}.header-text{padding-right:1rem}}@media (max-width:37.5em){.sticky-app-btn{padding:.6rem .5rem}.sticky-app-btn .header-btn{text-align:center;white-space:normal!important;padding:.8rem 1.2rem!important;font-size:1.8rem!important}.sticky-app-btn{background-color:#ffedd5;justify-content:center;width:100%;padding:.8rem 1rem;position:sticky;top:0;right:auto;box-shadow:0 4px 15px #0000001a;display:flex!important}.btn-placeholder{width:80%}@media (max-width:64em){.btn-placeholder{display:none!important}}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.donate-jar-big{animation:.5s fadeIn;background:0 0!important}.donate-jar-small{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200!important;background:#ffedd5e6!important;box-shadow:0 2px 10px #0000001a!important}@keyframes shrinkToHeader{0%{bottom:3rem;right:5rem;transform:scale(1)}to{top:.5rem;right:22rem;transform:scale(.4)}}@media (max-width:64em){.donate-jar-small{z-index:101;top:0!important;right:1rem!important}.donate-jar-big{background:#ffedd5e6!important;bottom:2rem!important;right:2rem!important}}@media (max-width:37.5em){.donate-jar-small{z-index:101;top:0!important;right:.5rem!important}.donate-jar-big{background:#ffedd5e6!important;bottom:1.5rem!important;right:1rem!important}}@media (max-width:22.5em){.donate-jar-small{top:90%!important;right:.5rem!important}.header-text{font-size:1.4rem!important}.sticky-app-btn .header-btn{font-size:1.6rem!important}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width:22.5rem){.song-text p{min-height:1rem!important;font-size:1.6rem!important;line-height:1em!important}}.create-btn:hover{color:#fff!important;background-color:#f97316!important}@media (max-width:30em){.key-time-tempo{justify-content:right!important;gap:1rem!important;margin-top:1rem!important;font-size:2rem!important}}
