@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";@import"https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap";:root{font-family:JetBrains Mono,monospace;--font-family-primary: "JetBrains Mono", monospace;--font-family-secondary: "Rock Salt", cursive;--black: #100F0F;--pink: #CA8E82;--tan: #D9B99F;--vanilla: #F2E7DD;--vanilla-translucent: #F2E7DDC2;--blush: #F2D6CE;--blush-translucent: #F2D6CEC2;--green: #7A958F;--grey: #666;--grey-light: #6b7280;--blue: #5372b1;--font-size-xl: 1.25rem;--font-size-lg: 1.125rem;--font-size-normal: 1rem;--font-size-sm: .875rem;--font-size-journify: 1.8rem;--font-size-button: 1rem;--font-size-front-page-year: 7.5rem;--font-size-front-page-value: 1.6rem;--font-size-front-page-title: 1.4rem ;--font-size-front-page-subtitle: .8rem;--font-size-front-page-pct: .75rem;--front-page-icon-width: 1.2rem;--font-size-all-time-front-page: 2rem;--font-size-spread-page-title: 1rem;--font-size-spread-page-value: .8rem;--font-size-summary-page-title: .8rem;--font-size-h1: 1.6rem;--navbar-height: 3rem;--navbar-logo-width: 1.6rem;--gallery-height: 540px;--gallery-width: 1080px}@media (max-width: 768px){:root{--font-size-xl: .9rem;--font-size-lg: .8rem;--font-size-normal: .75rem;--font-size-sm: .6rem;--font-size-journify: 1.25rem;--font-size-button: .8rem;--font-size-front-page-year: 5.5rem;--font-size-front-page-value: 1.1rem;--font-size-front-page-title: 1rem ;--font-size-front-page-subtitle: .6rem;--font-size-front-page-pct: .6rem;--front-page-icon-width: 1rem;--font-size-all-time-front-page: 1.4rem;--font-size-spread-page-title: .8rem;--font-size-spread-page-value: .65rem;--font-size-summary-page-title: .65rem;--font-size-h1: 1.1rem;--navbar-height: 2.5rem;--navbar-logo-width: 1.2rem;--gallery-height: 440px;--gallery-width: 700px}}*{box-sizing:border-box}body{color:var(--vanilla);margin:0;padding-top:var(--navbar-height);background:var(--black)}html{scroll-behavior:smooth}h1{font-size:var(--font-size-h1)!important}.button-custom{background:linear-gradient(135deg,var(--vanilla) 0%,var(--blush) 75%,var(--tan) 100%);color:var(--black);font-family:var(--font-family-primary);font-size:var(--font-size-button);padding:1.2rem 2.4rem;border-radius:12px;border:1px solid black;cursor:pointer;transition:all .3s ease;min-width:200px}.button-custom-secondary{background:radial-gradient(circle at 80% 50%,var(--black),transparent 100%),var(--grey)!important;color:var(--vanilla)!important}.spotify-logo{min-width:70px!important}@media (max-width: 768px){.button-custom{padding:.6rem 1.2rem;min-width:140px}.button-custom-secondary{padding:.6rem 1.2rem!important}}.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background-color:var(--black);border-bottom:1px solid var(--vanilla);height:var(--navbar-height)}.navbar-container{margin:0 auto;padding:.4rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.navbar-brand{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--font-size-journify);color:var(--pink);text-decoration:none}#navbar-logo{width:var(--navbar-logo-width);height:var(--navbar-logo-width)}.navbar-links{display:flex;gap:2rem;transition:all .3s ease}.navbar-link{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--blush);transition:all .3s ease;font-size:var(--font-size-normal)}.navbar-link:hover,.navbar-link.active{color:var(--pink)}.navbar-link-icon{width:var(--font-size-lg);height:var(--font-size-lg)}.navbar-toggle{display:none;background:none;border:none;color:var(--blush);cursor:pointer;font-size:1.8rem}@media (max-width: 768px){.navbar-container{padding-left:1rem;padding-top:.2rem;padding-right:1rem}.navbar-brand{gap:.3rem}.navbar-toggle{display:block}.navbar-links{position:absolute;top:var(--navbar-height);left:0;right:0;background-color:var(--black);flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem 0;transform:translateY(-200%);opacity:0;pointer-events:none}.navbar-links.active{transform:translateY(0);opacity:1;pointer-events:all}}.footer{width:100%;padding:1rem;background:var(--black);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--vanilla);margin-top:auto}.footer-content{margin:0 auto;text-align:center}.footer-text{font-size:calc(.8 * var(--font-size-normal));margin:0 0 .5rem}.footer-subtext{font-size:calc(.75 * var(--font-size-normal));color:var(--blush);margin:0 0 1rem}#spotify-logo-footer{max-width:120px!important}@media (max-width: 768px){#spotify-logo-footer{max-width:70px!important}}.journey-container{position:relative}.year-section{min-height:calc(100vh - var(--navbar-height));display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:100%}.year-bg-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;z-index:0}.year-bg-tile{background-size:cover;background-position:center;filter:brightness(.6);opacity:40%;display:flex;align-items:center;justify-content:center}.year-section>*:not(.year-bg-grid){position:relative;z-index:1}.year-bg-placeholder{display:flex;align-items:center;justify-content:center;opacity:.3}.year-bg-placeholder .placeholder-icon{width:40px;height:40px;color:#fff}.gallery-container{display:flex;align-items:center;justify-content:center;gap:2rem;height:var(--gallery-height);min-height:var(--gallery-height);width:var(--gallery-width);min-width:var(--gallery-width)}.gallery-content,.gallery-content-spread{height:var(--gallery-height);min-height:var(--gallery-height);max-height:var(--gallery-height);width:100%;min-width:var(--gallery-width);display:flex;align-items:center;justify-content:center}@media (max-width: 768px){.gallery-container:has(.gallery-content-spread){overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important;width:100%!important;min-width:100%!important;max-width:100%!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;scrollbar-color:rgba(100,100,100,.6) transparent!important}.gallery-content-spread{flex:0 0 100%!important;min-width:200%!important;max-width:200%!important;scroll-snap-align:start!important;height:var(--gallery-height)!important}.gallery-container:has(.gallery-content-spread)::-webkit-scrollbar{height:6px}.gallery-container:has(.gallery-content-spread)::-webkit-scrollbar-track{background:#0000001a;border-radius:3px}.gallery-container:has(.gallery-content-spread)::-webkit-scrollbar-thumb{background:#64646499;border-radius:3px}.gallery-container:has(.gallery-content-spread)::-webkit-scrollbar-thumb:hover{background:#505050cc}}.gallery-nav{background:radial-gradient(circle at 80% 50%,var(--black),transparent 90%),var(--grey);border:none;border-radius:50%;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0000001a;border:1px solid var(--vanilla)}.gallery-nav:hover{background:var(--black);transform:scale(1.1);box-shadow:0 6px 20px #00000026}.gallery-nav svg{width:1.3rem;height:1.3rem;color:var(--vanilla)}.gallery-indicators-container{display:flex;margin-top:2rem;justify-content:center;align-items:center}.gallery-indicators{display:flex;gap:1rem;justify-content:center;margin-left:1rem;margin-right:1rem}.indicator{width:1.1rem!important;height:1.1rem!important;border-radius:50%;background:var(--black);cursor:pointer;transition:all .3s ease;opacity:80%;border:1px solid white}@media (max-width: 768px){.indicator{width:.8rem!important;height:.8rem!important}}.indicator.active{background-image:url(/vinyl.svg);background-size:100% 100%;background-position:center;opacity:100%;transform:scale(1.2);box-shadow:0 2px 8px #0003}.gallery-page{background:radial-gradient(circle at 30% 30%,var(--black),transparent 95%),linear-gradient(135deg,var(--green) 0%,var(--black) 50%);box-shadow:inset 1px 2px 6px var(--black),inset -1px -1px 6px var(--vanilla)}.front-page-container{width:50%;min-width:50%;max-width:50%;display:flex;flex-direction:column;height:100%;min-height:100%;max-height:100%}.front-page{display:flex;flex-direction:column;width:100%;height:100%}.front-page-top{display:flex;flex-direction:row;flex:3;border-bottom:1px solid var(--vanilla);width:100%}.front-page-bottom{display:flex;flex-direction:row;flex:5}.front-page-year{font-size:var(--font-size-front-page-year);flex:4;display:flex;justify-content:center;align-items:center;color:var(--pink)}.front-page-minutes-container{flex:2;display:flex;flex-direction:row;align-items:center;justify-content:start;padding-right:2%;width:100%}.front-page-minutes-left{flex:1;display:flex;padding-right:2%}.stat-icon{height:var(--front-page-icon-width);width:var(--front-page-icon-width)}.front-page-minutes-right{flex:7;display:flex;flex-direction:column;justify-content:center;align-items:start}.front-page-minutes-top{flex:2;display:flex;flex-direction:row;align-items:end}.front-page-minutes-value{font-size:var(--font-size-front-page-value)}.front-page-minutes-pct{padding-bottom:5%}.front-page-minutes-bottom{flex:1;display:flex;align-items:start;font-size:var(--font-size-front-page-subtitle)}.front-page-stat-container{display:flex;flex-direction:column;flex:1;align-items:center}.front-page-stat-divider{width:1px;background:var(--vanilla);margin-top:10%;margin-bottom:5%}@media (max-width: 768px){.front-page-stat-divider{margin-top:15%;margin-bottom:8%}}.front-page-stat-header{flex:1;flex-direction:row;display:flex;justify-content:center;align-items:center;text-decoration:underline;font-size:var(--font-size-front-page-title)}.front-page-stat-icon{padding-right:.6rem;display:flex}.front-page-stat-card{flex:2;flex-direction:row;display:flex;align-items:center;width:100%;padding-right:10%}.front-page-stat-card-left{flex:3;flex-direction:column;display:flex}.front-page-stat-card-top{flex:1;display:flex;font-size:var(--font-size-front-page-value);justify-content:end}.front-page-stat-card-bottom{flex:1;display:flex;color:var(--tan);justify-content:end;font-size:var(--font-size-front-page-subtitle)}.front-page-stat-card-right{flex:1;display:flex}.percentage-change{display:flex;align-items:center;gap:.25rem;font-size:var(--font-size-front-page-pct);font-weight:500}.percentage-change.positive{color:#22c55e}.percentage-change.negative{color:#ef4444}.percentage-change.neutral{color:#6b7280}.percentage-icon{width:10px;height:10px}.spread-container{display:grid;grid-template-columns:1fr 2px 1fr;gap:0;height:100%;width:100%;background-color:var(--black)}.spread-page{padding:calc(1.5 * var(--font-size-spread-page-value));padding-top:var(--font-size-spread-page-value);overflow-y:auto}.spread-page-header{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid var(--vanilla);margin-bottom:var(--font-size-spread-page-value);font-size:var(--font-size-spread-page-title);padding-left:3%}.spread-divider{width:1px;background:var(--vanilla);position:relative}.spread-page-icon{margin-right:var(--font-size-spread-page-value)}.spread-page .stats-list{gap:calc(1.2 * var(--font-size-spread-page-value))}.spread-page .stat-rank{font-weight:700;min-width:calc(2.5 * var(--font-size-spread-page-value));font-size:var(--font-size-spread-page-value)}.spread-page .stat-image-container{width:calc(3.75 * var(--font-size-spread-page-value));height:calc(3.75 * var(--font-size-spread-page-value))}.spread-page .stat-name{font-size:var(--font-size-spread-page-value);flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.spread-page .stat-value{font-size:var(--font-size-spread-page-value);padding:calc(.5 * var(--font-size-spread-page-value)) var(--font-size-spread-page-value);color:var(--black);font-weight:500;background:linear-gradient(135deg,var(--blush) 0%,var(--tan) 75%,var(--pink) 100%);border-radius:8px}.stats-list{display:flex;flex-direction:column}.stat-item{display:flex;align-items:center;gap:var(--font-size-spread-page-value);padding:var(--font-size-spread-page-value);transition:all .3s ease;width:100%}.trend-container{display:flex;align-items:center;gap:calc(.5 * var(--font-size-spread-page-value));min-width:calc(4 * var(--font-size-spread-page-value))}.trend-icon{width:var(--font-size-spread-page-value);height:var(--font-size-spread-page-value);transition:all .3s ease}.trend-up{color:var(--green);background:#22c55e1a;border-radius:50%;padding:2px}.trend-down{color:var(--pink);background:#ef44441a;border-radius:50%;padding:2px}.trend-same{color:var(--grey-light);background:#6b72801a;border-radius:50%;padding:2px}.trend-new{color:var(--blue);background:#3b82f61a;border-radius:50%;padding:2px}.prev-rank{font-size:calc(.8 * var(--font-size-spread-page-value));color:var(--grey-light);font-weight:500}.stat-image-container{width:40px;height:40px;border-radius:8px;overflow:hidden;flex-shrink:0;box-shadow:0 2px 8px #0000001a}.stat-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.artist-image{border-radius:50%}.album-image{border-radius:4px}.stat-image:hover{transform:scale(1.05)}.stat-image-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);display:flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;transition:all .3s ease}.artist-placeholder{border-radius:50%}.album-placeholder{border-radius:4px}.placeholder-icon{width:20px;height:20px;color:#94a3b8;opacity:.7}.stat-image-placeholder:hover{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);transform:scale(1.05)}.stat-image-placeholder:hover .placeholder-icon{color:#64748b;opacity:1}.summary-container{position:relative;width:50%;display:flex;flex-direction:column;height:100%;background-color:var(--black);font-family:var(--font-family-primary);text-overflow:ellipsis}.summary-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:0rem;padding-left:calc(5 * var(--font-size-summary-page-title));padding-right:calc(2.2 * var(--font-size-summary-page-title))}@media (max-width: 768px){.summary-grid{padding-left:calc(3 * var(--font-size-summary-page-title));padding-right:calc(1.5 * var(--font-size-summary-page-title))}}.summary-section{margin-top:calc(.75 * var(--font-size-summary-page-title));padding-right:calc(1.25 * var(--font-size-summary-page-title));overflow:hidden;min-width:0}.summary-page-title{font-size:var(--font-size-summary-page-title);min-height:var(--font-size-summary-page-title);color:var(--tan);text-align:left;text-decoration:underline;margin-bottom:calc(.5 * var(--font-size-summary-page-title))}.summary-icon{width:var(--font-size-summary-page-title);height:var(--font-size-summary-page-title)}.summary-list{list-style:none;padding:0;margin:0;counter-reset:item}.summary-list-counter-reset-5{counter-reset:item 5!important}.summary-list li{position:relative;padding:.4rem 0 .4rem 1.4rem;color:var(--vanilla);font-size:calc(.875 * var(--font-size-summary-page-title));font-weight:500;margin-bottom:calc(.12 * var(--font-size-summary-page-title));counter-increment:item;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.summary-list li:nth-child(odd){color:var(--vanilla)}.summary-list li:nth-child(2n){color:var(--pink)}.summary-list li:before{content:counter(item) ".";position:absolute;left:0;top:50%;transform:translateY(-50%);width:.8rem;height:.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(.75 * var(--font-size-summary-page-title));font-weight:600}.summary-year{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12rem;font-weight:700;color:var(--green);opacity:7%;z-index:0;pointer-events:none;white-space:nowrap;font-family:var(--font-family-primary)}@media (max-width: 768px){.summary-year{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8.5rem;font-weight:700;color:var(--green);opacity:7%;z-index:0;pointer-events:none;white-space:nowrap;font-family:var(--font-family-primary)}.summary-list li{padding:.4rem 0 .3rem 1.4rem;margin-bottom:calc(0 * var(--font-size-summary-page-title))}}.all-time-front-page-top{display:flex;flex:2;font-size:calc(3 * var(--font-size-all-time-front-page));color:var(--pink);font-family:var(--font-family-primary);justify-content:center;padding-top:var(--font-size-all-time-front-page)}.all-time-front-page-middle{display:flex;flex:2;font-size:var(--font-size-all-time-front-page);color:var(--tan);font-family:var(--font-family-primary);justify-content:center;border-bottom:1px solid var(--vanilla);margin-bottom:var(--font-size-all-time-front-page);margin-left:calc(2 * var(--font-size-all-time-front-page));margin-right:calc(2 * var(--font-size-all-time-front-page))}.all-time-front-page-bottom{flex:5;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);margin-top:calc(.5 * var(--font-size-all-time-front-page))}.all-time-stat-box{display:flex;flex-direction:column;padding-right:calc(1.2 * var(--font-size-all-time-front-page));text-align:right}.stat-box-top{font-size:calc(1.2 * var(--font-size-all-time-front-page))}.stat-box-top .stat-icon{height:calc(.8 * var(--font-size-all-time-front-page));width:calc(.8 * var(--font-size-all-time-front-page));margin-right:calc(.2 * var(--font-size-all-time-front-page))}.stat-box-bottom{font-size:calc(.6 * var(--font-size-all-time-front-page))}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.demo-container{display:flex;flex-direction:column;position:relative;justify-content:center;align-items:center;text-align:center}.demo-section{display:flex;flex-direction:column;position:relative;padding-bottom:0rem;justify-content:center;align-items:center;width:100%}.demo-section-header{display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:calc(.6 * var(--gallery-width));font-size:var(--font-size-normal);padding-left:2rem;padding-right:2rem}.demo-section-header h1{margin-bottom:0}.help-container{display:flex;flex-direction:column;position:relative;justify-content:center;align-items:center;text-align:center;width:100%}.help-content{display:flex;flex-direction:column;position:relative;justify-content:center;align-items:left;text-align:center;font-size:var(--font-size-normal);max-width:50%}.help-container h1{display:block;text-align:center}.help-container h2{text-decoration:underline;text-align:left;font-size:calc(.9 * var(--font-size-h1))}.help-container img{max-height:600px;display:block;margin:1.5rem auto}.img-small{max-height:400px!important}.help-container a:link{color:var(--green)!important;text-decoration:underline}.help-container a:visited{color:var(--pink)!important}ol li{margin-bottom:1rem;text-align:left}strong{font-weight:900}@media (max-width: 768px){.help-content{max-width:90%}.help-container img{max-height:300px;display:block;margin:.5rem auto}.img-small{max-height:250px!important}}.app{background:linear-gradient(135deg,var(--pink) 0%,var(--black) 50%,var(--pink) 100%);background-size:400% 400%;animation:gradientShift 15s ease infinite;min-width:calc(var(--gallery-width))}@media (max-width: 768px){.app{width:100%;min-width:100px;overflow-x:hidden}}.upload-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - var(--navbar-height));text-align:center;overflow:clip;overflow-y:hidden;padding-left:1rem;padding-right:1rem}.upload-container>div{display:flex;justify-content:center;align-items:center}.upload-container>div:nth-child(1){flex:1;font-size:var(--font-size-xl)}.upload-container>div:nth-child(2){flex:1;padding-top:2%}.upload-container>div:nth-child(3){flex:8;position:relative}#vinyl{position:absolute;width:90%;height:90%;display:block;background-image:url(/vinyl.svg);background-size:100% 100%;background-position:center;z-index:0}.opacity-30{opacity:30%}.spin{animation:5s linear spinElement infinite}@keyframes spinElement{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.upload-section{min-width:500px;aspect-ratio:1 / 1;background:none;z-index:1;display:flex;justify-content:center;align-items:center}.upload-section .button-custom-secondary{width:10px!important}.drag-drop-area{width:60%;height:60%;border:3px dashed var(--blush);border-radius:6px;text-align:center;transition:all .3s ease;background:var(--blush-translucent);padding-top:10%}.drag-drop-area:hover{border-color:var(--pink);background:var(--blush)}.drag-drop-icon{width:3rem;height:3rem;color:var(--black);margin:0 auto 1rem;display:block}.drag-drop-text{font-size:var(--font-size-normal);font-weight:800;color:var(--black);margin:0 0 .5rem}.drag-drop-subtext{color:var(--black);font-size:var(--font-size-sm)}.file-input-container{display:flex;justify-content:center}.file-input{display:none}.file-input-label{display:inline-block;padding:1rem 2rem;transition:all .3s ease;box-shadow:0 4px 12px var(--pink)}.file-name{font-weight:800;padding-bottom:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.error-message{background:#fffffff2;color:#c33;padding:1.5rem;border-radius:12px;margin-top:2rem;border:1px solid #fcc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (max-width: 768px){.upload-section{min-width:350px}.drag-drop-icon{width:2rem;height:2rem}.file-name{padding-bottom:90%;font-size:var(--font-size-normal)}}.fade-in{animation:fadeInScale .6s ease-out forwards}@keyframes fadeInScale{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}#vinyl{transition:opacity .4s ease,transform .4s ease}