:root{--default-transition-time: .3s;--active-side: hsl(203, 45%, 51%);--inactive-side: hsla(203, 15%, 37%, .1%);--unit: max(1vw, 1vh)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{background-color:#1f2c33;font-family:Verdana,sans-serif;font-family:Nunito,sans-serif}body::-webkit-scrollbar{display:none}.all-except-footer{color:#e6f1f5;text-align:center;margin:0;padding:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:62.5%}.container{width:90%;max-width:800px;height:90vh;margin-top:5vh;display:flex;flex-direction:column;align-items:center;align-self:center;justify-content:center;justify-self:center;background:#2f373c;border-radius:12px;box-shadow:0 4px 10px #0000004d;padding:calc(var(--unit) * 2);box-sizing:border-box;overflow:hidden}h1{color:#50ade6;margin:0 auto;padding-top:0;padding-bottom:0;text-align:center;font-weight:150;font-family:Nunito,sans-serif;font-size:3.5rem;line-height:3rem}#sub-title{font-weight:100;padding-left:50%}textarea{flex-grow:1;width:100%;height:100%;padding:var(--unit);border-radius:8px;border:1px solid #637f91;background:#1f2c33;color:#e6f1f5;font-size:1.6rem;resize:none;box-sizing:border-box;-webkit-text-security:none;-webkit-user-modify:read-write-plaintext-only}.output-area{flex-grow:1;width:100%;height:100%;padding:10px;border-radius:8px;position:relative}.copy-button{padding:1%;height:10%;border-radius:calc(var(--unit) * 2);position:absolute;right:4%;top:10%;background:linear-gradient(180deg,#bfbfbf,#8c8c8c);transition-duration:var(--default-transition-time);color:#000;font-weight:800;font-size:1rem;text-align:center;display:flex;justify-content:center;align-items:center}.copy-button:hover{filter:brightness(.8);transition:var(--default-transition-time)}.copy-button:active{filter:brightness(.6)}.just-for-flex{display:flex;justify-content:space-between;width:100%;align-items:center;padding:0;margin:calc(var(--unit) * 1)}.selector-titles-container{display:flex;gap:8%;margin:calc(var(--unit) * 1)}h2{width:100%;text-align:center;font-weight:400;font-size:min(3vw,1.5rem);margin:0;white-space:nowrap}.dropdown-container{width:100%;display:flex;justify-content:center;gap:4%;margin-bottom:1%}.transpose-type{border-radius:calc(var(--unit) * 2);border:2px solid var(--inactive-side);width:min(100%,100vw);padding:calc(var(--unit) * 3);margin:calc(var(--unit) * .5);padding-top:0;padding-bottom:0;display:flex;justify-content:center;align-items:center;flex-shrink:1;min-width:0}.flexer-row{width:min(100%,100vw);display:flex;justify-content:center;gap:min(3%,2vw)}.flexer-column{display:flex;flex-direction:column;width:100%;justify-content:center;align-items:center;flex-shrink:1}select{width:100%;padding:10px;border-radius:8px;border:1px solid #637f91;background:#1f2c33;color:#e6f1f5;font-size:1.2rem;transition:var(--default-transition-time);text-align:center}select:hover{background:#101619;transition:var(--default-transition-time)}h1,h2,.copy-button{cursor:default;user-select:none}input{width:0;height:0;visibility:hidden}.plus,.minus,.monitor{background-color:#219bff;font-size:clamp(1rem,2vw,1.5rem);width:min(10vw,2rem);height:min(5vw,2rem);border-radius:.8rem;margin-top:.3rem;margin-bottom:.3rem;cursor:default;user-select:none;display:flex;justify-content:center;align-items:center;flex-shrink:1;margin:.2vw}.monitor{width:min(10vw,3rem);background-color:#101619}#by-interval .monitor{width:min(15vw,5rem)}.plus:hover,.minus:hover{filter:brightness(.7);transition:var(--default-transition-time)}.plus:active,.minus:active{filter:brightness(.4)}.new-selector-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.selector{transform:scale(0);width:0%;height:0%;visibility:hidden}.debug{transform:scale(1);visibility:visible}.help-container{position:relative;display:inline-block;font-size:clamp(.9rem,1vw,1rem)}.help-icon{display:flex;align-items:center;justify-content:center;width:clamp(1.2rem,2vw,1.5rem);height:clamp(1.2rem,2vw,1.5rem);background-color:#fff;color:#666;border:1px solid #ccc;border-radius:50%;font-weight:700;cursor:pointer;transition:background-color .2s ease;margin-left:clamp(150px,92vw,820px)}.help-icon:hover{background-color:#f0f0f0}.help-text{position:absolute;bottom:130%;right:0;width:clamp(150px,30vw,600px);padding:1rem;color:#f9f9f9;background-color:#333;border-radius:8px;box-shadow:0 4px 12px #0000001a;font-size:clamp(.85rem,1vw,1rem);line-height:1.4;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:10;text-align:left}.help-container:hover .help-text{opacity:1;pointer-events:auto}footer{text-align:left;filter:brightness(.9);background-color:#2f373c;font-size:1.2rem;color:#e6e6e6}footer p{margin-left:max(5%,calc((100vw - 820px)/2))}
