.inputBox{display:flex;align-items:center;padding-top:15px}.inputButtons{display:flex;align-items:center;gap:.5rem}.inputButtons p{margin:0;color:#b0b0b0;font-size:clamp(.8rem,2vw,.95rem)}.inputButtons button:first-child{background-color:#3a3a3a;color:#fff;border:1px solid #6a6a6a;border-radius:6px;padding:.55rem .9rem;cursor:pointer;font-size:clamp(.8rem,2vw,1rem)}.inputButtons button:last-child{background:none;border:none;color:#b0b0b0;text-decoration:underline;font-size:clamp(.8rem,2vw,1rem);padding:0;cursor:pointer}.inputFileName{font-size:clamp(.9rem,2vw,1.2rem)}.audioPlayer{width:92%;max-width:450px;background-color:#3a3a3a;color:#fff;border:1px solid #6a6a6a;border-radius:6px;padding:clamp(.5rem,1.5vw,.9rem);font-size:1rem;margin-top:20px}.audioTitleContainer{width:fit-content;min-width:0;max-width:260px;white-space:nowrap;font-size:clamp(.8rem,2vw,.95rem);overflow:hidden}.audioTitleText{display:inline-flex;white-space:nowrap}.audioTitleText.scrolling{animation:scrollTitle 10s ease-in-out infinite}.audioRow{display:flex;align-items:center;height:45px;gap:clamp(.5rem,1vw,.75rem)}.audioScrubber{flex:1;display:flex;flex-direction:column;justify-content:center;position:relative}.playbackBar{width:100%;accent-color:white;cursor:pointer;margin:0}.audioTimes{display:flex;justify-content:space-between;width:100%;font-size:clamp(.6rem,1.5vw,.7rem);color:#b3b3b3;position:absolute;top:17px}.playButton{width:clamp(30px,4vw,34px);height:clamp(30px,4vw,34px);border-radius:50%;background:#1a1a1a;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}@keyframes scrollTitle{0%{transform:translate(0)}90%{transform:translate(var(--X))}to{transform:translate(0)}}.popupOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1a1a1a85;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:2001}.popupBox{position:relative;width:clamp(75%,2.5vw,100%);max-width:520px;padding:clamp(1.25rem,2.5vw,2rem);border-radius:20px;background:#1a1a1a;border:1px solid #444444}.popupBox h2{margin:0 0 .75rem;font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.02em}.popupBox p{margin-bottom:clamp(1rem,2vw,1.5rem);color:#b0b0b0;line-height:1.6;font-size:clamp(.85rem,1.2vw,.95rem)}.popupBox .popupError{color:#ed5347;font-size:.85rem;margin:-1.2rem 0 1rem .5rem}.fileInput{width:100%;margin-bottom:clamp(1rem,2vw,1.25rem);padding:clamp(.75rem,1.5vw,.9rem) clamp(.85rem,2vw,1rem);border-radius:14px;border:1px solid #44444477;background:#ffffff0a;color:#b0b0b0;font-size:clamp(.7rem,1.2vw,.95rem);box-sizing:border-box}.fileInput:hover{border-color:#721f81;background:#38383885}.fileInput::file-selector-button{margin-right:1rem;border:none;border-radius:10px;padding:.7rem 1rem;background:#721f8179;color:#fff;font-weight:500;cursor:pointer}.fileInput::file-selector-button:hover{background:#a147b179}.uploadButton{width:100%;border:none;border-radius:14px;padding:clamp(.8rem,2vw,.95rem);font-size:clamp(.9rem,1.5vw,1rem);font-weight:600;color:#fff;background:#721f8179;cursor:pointer}.uploadButton:hover:not(:disabled){background:#a147b179}.uploadButton:disabled{opacity:.45;cursor:not-allowed}.closeButton{position:absolute;top:clamp(.75rem,1.5vw,1rem);right:clamp(.75rem,1.5vw,1rem);width:clamp(30px,4vw,36px);height:clamp(30px,4vw,36px);border:none;border-radius:10px;background:#ffffff0a;color:#b0b0b0;font-size:clamp(.8rem,1.2vw,.95rem);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center}.closeButton:hover{background:#ffffff1e;color:#fff}.bodyOutput{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:.75rem;width:100%;margin-top:15px}.boxContainer{border:1px solid #6a6a6a;border-radius:6px;background-color:#1a1a1a;color:#fff;overflow:hidden;display:flex;flex-direction:column;flex:1 1 0;min-height:850px;margin-top:10px}.boxHeader{background-color:#3a3a3a;margin:0;padding:clamp(.4rem,1vw,.55rem) clamp(.6rem,1.5vw,.9rem);font-size:clamp(.9rem,2vw,1rem);border-bottom:1px solid #6a6a6a}.boxContent{padding:0rem clamp(.5rem,1.5vw,1rem);font-size:clamp(.8rem,1.5vw,.95rem)}.boxContent p{margin-top:15px}.boxContent h3{font-size:clamp(1rem,3.5vw,1.5rem);font-weight:500;margin:10px 0 -12px;letter-spacing:.5px}.boxDivider{height:1px;background-color:#6a6a6a;margin:1rem -1rem;width:calc(100% + 2rem)}.waveformSpectrumDivider{margin:.25rem -1rem}.chartContainer{display:flex;flex-direction:column;gap:clamp(.3rem,1vw,.5rem);margin-top:1rem;padding-bottom:2rem}.genreRow{display:flex;flex-direction:column;gap:.3rem}.genreLabel{font-size:clamp(.65rem,1.5vw,.75rem);color:#b0b0b0;text-align:left;letter-spacing:.5px}.barContainer{display:flex;align-items:center}.barTrack{flex:1;height:clamp(1rem,2vw,1.4rem);background-color:#2a2a2a;border-radius:2px;overflow:hidden}.barFill{height:100%}.percentageColumn{width:clamp(3rem,5vw,3.5rem);text-align:right;font-size:clamp(.7rem,1.5vw,.8rem);color:#fff}.boxSection{display:flex;flex-direction:column;gap:.35rem}.boxLabel{text-align:center;margin:0 0 -1rem;letter-spacing:.5px}.boxGraph{width:100%;display:flex;justify-content:center;overflow:hidden}.boxImage{width:100%}@media (max-width: 997px){.bodyOutput{flex-direction:column;align-items:stretch;gap:1rem}.boxContainer{min-height:auto;flex:none;margin-top:0}}.aboutOutput{display:grid;grid-template-columns:2fr 1fr;gap:.75rem;width:100%;margin-top:15px}.aboutLeft{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.75rem}.aboutContainer{border:1px solid #6a6a6a;border-radius:6px;background-color:#1a1a1a;color:#fff;overflow:hidden;display:flex;flex-direction:column;flex:1 1 0;min-height:350px;margin-top:10px}.aboutHeader{background-color:#3a3a3a;margin:0;padding:clamp(.4rem,1vw,.55rem) clamp(.6rem,1.5vw,.9rem);font-size:clamp(.8rem,2vw,1rem);border-bottom:1px solid #6a6a6a}.aboutContent{padding:0rem clamp(.5rem,1.5vw,1rem);font-size:clamp(.8rem,1.5vw,.9rem)}.aboutContent p{font-size:clamp(.7rem,3.5vw,1rem);margin-top:15px}.aboutLabel{color:#bb7ac7;font-size:clamp(.85rem,1.5vw,.95rem);font-weight:600}.aboutDivider{height:1px;background-color:#6a6a6a;margin:1rem -1rem;width:calc(100% + 2rem)}.modelDiagram{width:100%;max-width:100%;height:auto;display:block;margin:0 auto;object-fit:contain;cursor:zoom-in}@media (max-width: 997px){.aboutOutput{display:flex;flex-direction:column;align-items:stretch;grid-template-columns:none}.aboutLeft{grid-template-columns:none;grid-template-rows:none}.aboutContainer{min-height:auto;flex:none;margin-top:0}}.diagramPopupBox{position:relative;width:min(95vw,1400px);max-height:90vh;padding:clamp(1.25rem,2.5vw,2rem);border-radius:20px;background:#1a1a1a;border:1px solid #444444;overflow:auto;box-sizing:border-box}.diagramPopupBox h2{margin:0 0 1rem;font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.02em}.expandedDiagram{width:90%;height:auto;display:block;margin:0 auto}.diagramPopupBox::-webkit-scrollbar{width:10px;height:10px}.diagramPopupBox::-webkit-scrollbar-thumb{background:#721f81;border:2px solid #1a1a1a}.diagramPopupBox::-webkit-scrollbar-thumb:hover{background:#a147b1}.contributorsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding-top:10px}.contributorsContainer{border:1px solid #6a6a6a;border-radius:6px;background-color:#1a1a1a;color:#fff;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:350px;margin-top:10px}.contributorsHeader{background-color:#3a3a3a;margin:0;padding:clamp(.4rem,1vw,.55rem) clamp(.6rem,1.5vw,.9rem);font-size:clamp(.9rem,2vw,1rem);border-bottom:1px solid #6a6a6a;text-align:center}.contributorLabel{text-align:center;margin:-20px;letter-spacing:.5px}.contributorsContent{padding:0rem clamp(.5rem,1.5vw,1rem);font-size:clamp(.8rem,1.5vw,.95rem)}.contributorsContent p{margin-top:15px}.contributorsContent h3{font-size:clamp(1rem,3.5vw,1.5rem);font-weight:500;margin:-10px 0;letter-spacing:.5px}.contributorDivider{height:1px;background-color:#6a6a6a;margin:1rem -1rem;width:calc(100% + 2rem)}.contributorImage{width:110px;height:110px;border-radius:50%;display:block;margin:1rem auto .5rem;border:2px solid #6a6a6a}.contributorsContent .contributorRole{text-align:center;margin:.25rem 0 .75rem;font-size:clamp(.9rem,1.5vw,1rem);letter-spacing:.4px;color:#bb7ac7}.contributorsContent p{margin-top:.75rem;line-height:1.5;color:#b0b0b0;font-size:clamp(.8rem,1.5vw,1rem)}.contributorLinks{display:flex;justify-content:center;gap:16px;margin-top:auto;padding:1rem 0 1.25rem}.contributorLink{color:#bb7ac7;text-decoration:none;font-size:clamp(.8rem,1.5vw,1rem);padding:6px 0;border-radius:4px;border:1px solid transparent;text-decoration:underline;margin-top:-25px}.contributorLink:hover{color:#d64992}@media (max-width: 997px){.contributorsGrid{grid-template-columns:repeat(1,1fr)}}.creditsOutput{display:grid;gap:.75rem;width:100%;margin-top:15px}.creditsOutput h3{margin:0 0 -10px;font-size:clamp(.9rem,1.5vw,1.2rem)}.creditsOutput ul{margin:0}.creditsOutput a{color:#6692bb;text-decoration:none;font-size:clamp(.7rem,1.5vw,1rem)}.creditsOutput a:hover{color:#1d5faf;text-decoration:underline}.creditsOutput li{margin-bottom:.25rem}@font-face{font-family:YDGothic;src:url("/YDGothcic 120 Pro.ttf") format("truetype");font-weight:400;font-style:normal}html,body{background-color:#1a1a1a;color:#fff;font-family:YDGothic,sans-serif;margin:0;padding:0;font-size:125%;overflow-x:hidden}.page{min-height:100vh;margin:0;padding-left:10vw;padding-right:10vw;box-sizing:border-box}.frame{position:relative;min-height:100vh;border-left:1px solid #444444;border-right:1px solid #444444;box-sizing:border-box;padding:2rem}.frame:before{content:"";position:absolute;top:0;bottom:0;left:-3vw;border-left:1px dashed #444444}.frame:after{content:"";position:absolute;top:0;bottom:0;right:-3vw;border-right:1px dashed #444444}.navDivider{height:1px;background-color:#444;width:100vw;position:relative;left:50%;transform:translate(-50%)}.navBar{display:flex;flex-direction:row;align-items:center;gap:1rem;height:40px;transform:translateY(-45%);position:relative;z-index:2000}.navBar h2{color:#fff;margin:0;font-size:clamp(1.1rem,3vw,1.8rem)}.navButtons{display:flex;align-items:center;gap:1.5rem;margin-left:1rem;width:100%}.navButtons a:last-child{margin-left:auto}.navButtons a{background:none;border:none;color:#b0b0b0;font-size:1rem;cursor:pointer;padding:0;text-decoration:none}.navButtons a:hover{color:#fff}.homeButton{margin-left:auto!important;background-color:#fff!important;color:#000!important;border:1px solid #6a6a6a;border-radius:6px;padding:.55rem .8rem!important}.homeButton:hover{color:#fff!important;background-color:#3a3a3a!important;border:1px solid white}.homeButton:active{transform:scale(.97)}.navButton.active{color:#bb7ac7;text-decoration:underline}.hamburger{display:none;background:none;border:none;color:#fff;font-size:clamp(1.1rem,3vw,1.8rem);cursor:pointer;z-index:2000}@media (max-width: 997px){.hamburger{display:block;margin-left:auto}.navButtons{margin:0!important;display:none;flex-direction:column;position:absolute;top:58px;left:50%;transform:translate(-50%);width:calc(100% + 2rem);background-color:#1f1f1f;border:1px solid #444444;padding:1rem;z-index:999;align-items:center;gap:.4rem}.navButtons.show{display:flex}.navButtons a{margin:.5rem 0!important;text-align:center;font-size:.85rem}}.headerTitle{display:flex;align-items:center;gap:.6rem;margin:0}.headerTitle h1{margin-bottom:.5rem;font-size:clamp(1.1rem,4vw,2.5rem)}.headerTitle h1:first-child{font-weight:700}.headerTitle h1:last-child{font-weight:100}.header p{color:#b0b0b0;margin-top:0;margin-bottom:0;font-size:clamp(.8rem,2vw,1.1rem)}@media (max-width: 997px){.page{padding-left:2vw;padding-right:2vw}.frame{padding:2rem}}