@import"https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap";@import"https://www.nerdfonts.com/assets/css/webfont.css";:root{--color-dark-gray: #313131;--color-darker-gray: #222222;--color-olive: #BBBE64;--color-lavender: #E9E6FF;--color-muted-purple: #858AE3}body{margin:0;display:flex;flex-direction:column;min-height:100vh;background-color:var(--color-darker-gray);color:var(--color-lavender);font-family:Arimo,system-ui,-apple-system,sans-serif;font-size:1.5vw}header{padding:1rem;text-align:center}header h1{color:var(--color-olive);margin:0 0 2rem;font-size:10vw;font-weight:700}header p{margin:0;color:var(--color-lavender);opacity:.9;font-size:3vmax}.explanation{margin:2vmax auto;max-width:110vmin;font-size:2vmax;line-height:1.5em;position:relative;padding-bottom:4vmax}.explanation .intro{color:var(--color-lavender);margin:0;display:inline}.explanation .intro a{color:var(--color-olive);text-decoration:none;transition:opacity .2s ease}.explanation .intro a:hover{opacity:.8}footer{position:relative;z-index:1;padding:1rem;text-align:center}footer p{margin:0;font-size:1.5vmax}footer a{color:var(--color-olive);text-decoration:none;transition:opacity .2s ease}footer a:hover{opacity:.8}#app{flex:1;display:flex;justify-content:center;align-items:center;min-height:100vmin;position:relative;z-index:2;margin-bottom:0}.controls-container{position:relative;width:100%;height:5vh}.controls{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:row;gap:1vw;align-items:center;justify-content:center;transition:opacity .3s ease;opacity:0;pointer-events:none}.controls.visible{opacity:1;pointer-events:auto}#settingsButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;font-family:Arimo,system-ui,-apple-system,sans-serif;font-size:3vmax;background:none;color:var(--color-muted-purple);border:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:10}#settingsButton i{transition:transform .3s ease;display:inline-block}#settingsButton:hover i{transform:rotate(90deg)}#settingsButton.active{left:2vw;transform:translateY(-50%) rotate(90deg);color:var(--color-olive)}#settingsButton:hover{color:var(--color-olive)}#settingsButton.active:hover{color:var(--color-muted-purple)}#settingsButton:hover,#settingsButton.active{color:var(--color-olive)}.speed-control{display:flex;flex-direction:row;align-items:center;gap:1vw}.speed-control .nf{color:var(--color-muted-purple);font-size:3vmax}.speed-control label,.speed-control #speedValue{color:var(--color-lavender);font-size:3vmax}.speed-control input{width:15vmin;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.5rem;background:var(--color-dark-gray);border-radius:4px;outline:none}.speed-control input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1rem;height:1rem;background:var(--color-muted-purple);border-radius:50%;cursor:pointer;transition:background-color .2s ease;transform:translateY(-.25rem)}.speed-control input::-moz-range-thumb{width:1rem;height:1rem;background:var(--color-muted-purple);border:none;border-radius:50%;cursor:pointer;transition:background-color .2s ease;transform:translateY(-.25rem)}.speed-control input::-webkit-slider-runnable-track{background:var(--color-dark-gray);border-radius:4px;height:.5rem}.speed-control input::-moz-range-track{background:var(--color-dark-gray);border-radius:4px;height:.5rem}.speed-control input:hover::-webkit-slider-thumb{background:var(--color-olive)}speed-control input:hover::-moz-range-thumb{background:var(--color-olive)}#toggleLines,#pauseButton{margin:0;padding:.5rem 1rem;font-family:Arimo,system-ui,-apple-system,sans-serif;font-size:3vmax;background:none;color:var(--color-muted-purple);border:none;border-radius:4px;cursor:pointer;transition:color .3s ease}#toggleLines:hover,#pauseButton:hover{color:var(--color-olive);opacity:1}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);padding:.5rem;background:var(--color-dark-gray);color:var(--color-lavender);font-size:2vmin;font-family:Arimo,system-ui,-apple-system,sans-serif;white-space:nowrap;border-radius:4px;pointer-events:none;z-index:100;margin-left:10px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}[data-tooltip]:hover:after{opacity:1;visibility:visible;transition-delay:.5s}.speed-control input[data-tooltip]:after{top:0;transform:translateY(0)}:root{--var-color-a: #ff6b6b;--var-color-b: #4ecdc4;--var-color-cap-b: #ff9f43;--var-color-cap-a: #3498db;--var-color-freq: #00ff11;--var-color-time: #9b59b6;--var-color-delta:#f1c40f}.collapsible-section{margin:2vmax auto;max-width:110vmin;overflow:hidden;height:auto;opacity:1;transition:all .5s cubic-bezier(.4,0,.2,1)}.equations{margin:2vmax auto;text-align:center;display:flex;justify-content:center;gap:2rem}.equations math{font-size:2.5vmax;color:var(--color-muted-purple)}.equations math .variable-a,.equation-explanation .variable-a{color:var(--var-color-a)}.equations math .variable-b,.equation-explanation .variable-b{color:var(--var-color-b)}.equations math .freq-a,.equation-explanation .freq-a{color:var(--var-color-cap-a)}.equations math .freq-b,.equation-explanation .freq-b{color:var(--var-color-cap-b)}.equations math .variable-time,.equation-explanation .variable-time{color:var(--var-color-time)}.equations math .variable-delta,.equation-explanation .variable-delta{color:var(--var-color-delta)}.equation-explanation{text-align:center;font-size:1.8vmax;color:var(--color-lavender);opacity:.9}.equation-explanation span{font-style:italic}.collapsible-section p{color:var(--color-lavender);text-align:left;font-size:2vmax;line-height:1.5em;opacity:.9}.collapsible-section.collapsed{height:0;opacity:0;margin:0 auto}#single-curve{margin:1vmax auto;flex:1;display:flex;justify-content:center;align-items:center;width:50vmin;height:50vmin;position:relative;clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.4,0,.2,1)}#single-curve.collapsed{clip-path:inset(0 0 100% 0)}#single-curve canvas{width:100%!important;height:100%!important}#curve-section{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0vmax auto;max-width:110vmin;position:relative;transition:all .5s cubic-bezier(.4,0,.2,1)}#toggleSingleCurve{display:block;margin:0 auto;font-family:Arimo,system-ui,-apple-system,sans-serif;font-size:2vmax;color:var(--color-muted-purple);border:none;border-radius:4px;cursor:pointer;position:absolute;left:50%;bottom:0;transform:translate(-50%);background:none;z-index:10;transition:transform .5s cubic-bezier(.4,0,.2,1)}#toggleSingleCurve.active{transform:translate(-50%)}#toggleSingleCurve:hover{color:var(--color-olive)}#toggleSingleCurve i{display:inline-block;transition:all .5s cubic-bezier(.4,0,.2,1);transform:rotate(180deg)}#toggleSingleCurve.active i{transform:rotate(0)}.slider-controls{display:flex;flex-direction:column;gap:1.5vmax;padding:2vmax}.controls-row{display:flex;justify-content:space-between;gap:2vmax;width:100%}.input-group{display:flex;align-items:center;gap:.5vmax;flex:1;background:var(--color-bg-secondary);border-radius:.5vmax;padding:.5vmax}.input-group.with-play{padding-right:.2vmax}.input-group label{font-size:1.5vmax;min-width:4vmax;padding-left:.5vmax}.input-group label.variable-a{color:var(--var-color-a)}.input-group label.variable-b{color:var(--var-color-b)}.input-group label.freq-a{color:var(--var-color-cap-a)}.input-group label.freq-b{color:var(--var-color-cap-b)}.input-group label.variable-time{color:var(--var-color-time)}.input-group label.variable-delta{color:var(--var-color-delta)}.input-group input[type=number]{width:4vmax;height:4vmax;padding:0;font-size:1.5vmax;color:var(--color-lavender);background:var(--color-bg-secondary);border:2px solid var(--color-muted-purple);border-radius:.5vmax;outline:none;text-align:center;-moz-appearance:textfield}.input-group input[type=number]:focus{border-color:var(--color-olive)}.input-group input[type=number]::-webkit-inner-spin-button,.input-group input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.play-btn{font-size:1.5vmax;color:var(--color-lavender);background:var(--color-muted-purple);border:none;border-radius:.5vmax;padding:.8vmax;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:3vmax;height:3vmax;min-width:3vmax}.play-btn:hover{background:var(--color-olive);color:var(--color-bg)}.play-btn i{transition:all .3s ease}.play-btn.playing{background:var(--color-olive);color:var(--color-bg)}.button-row{display:flex;gap:1vmax;margin-bottom:1.5vmax}.action-btn{font-family:Arimo,system-ui,-apple-system,sans-serif;font-size:1.5vmax;color:var(--color-lavender);background:var(--color-muted-purple);border:none;border-radius:.5vmax;padding:1vmax;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5vmax;justify-content:center;flex:1}.action-btn:hover{background:var(--color-olive);color:var(--color-bg)}.action-btn i{font-size:1.2vmax}.lock-btn{font-size:1.5vmax;color:var(--color-lavender);background:none;border:none;border-radius:.5vmax;padding:.5vmax;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.lock-btn:hover{color:var(--color-olive)}.lock-btn.locked i:before{content:""}.input-group.time-disabled{pointer-events:none}.input-group.time-disabled input,.input-group.time-disabled button:not(#toggleTime),.input-group.time-disabled label{cursor:not-allowed;opacity:.5}.input-group.time-disabled #toggleTime{pointer-events:all;cursor:pointer;opacity:1;background:var(--color-olive);color:var(--color-bg)}#toggleTime.active{background:var(--color-muted-purple);color:var(--color-lavender)}