@import"https://fonts.googleapis.com/css2?family=KoHo:wght@500&family=Rajdhani:wght@500&display=swap";:root{--bold-purple: #7c3bd9;--mid-purple: #a784d9;--pale-purple: #c7bad9;--pale-purple-50: color-mix(in srgb, var(--pale-purple) 50%, var(--light) 50%);--light: #ede9f2;--dark: color-mix(in srgb, #405259 80%, black 20%);--dark-80: color-mix(in srgb, var(--dark) 80%, var(--light) 20%);--font-rajdhani: "Rajdhani",sans-serif;--font-koho: "KoHo", san-serif;font-family:var(--font-rajdhani);line-height:1.5;font-weight:400;color:var(--light);background-color:var(--dark);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0 auto;max-width:320px}button{font-family:var(--font-rajdhani);background-color:var(--light);border:1px solid var(--pale-purple);border-radius:4px}input[type=number]{font-family:var(--font-koho);background-color:var(--dark-80);color:var(--pale-purple-50);border:0;border-radius:2px;text-align:center}input[type=number]:focus,input[type=number]:focus-visible{outline:0;box-shadow:0 0 3px var(--mid-purple)}#app{display:flex;flex-direction:column;min-height:100vh}.number-input{padding:8px}.number-input__label{font-size:1.2rem}.number-input__input{font-size:2rem;width:5rem}.settings__fieldset{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:16px;border:0}.settings__fieldset label{display:flex;justify-content:center;align-items:center}.settings__fieldset label svg{width:16px;height:16px;fill:var(--light)}.settings__step-list .settings__fieldset{border-bottom:1px dotted var(--pale-purple-50)}.settings__step-list .settings__fieldset:first-child{border-top:1px dotted var(--pale-purple-50)}.settings__delete-button{width:48px;height:36px;font-size:1.5rem;border:1px solid var(--mid-purple);background-color:var(--dark);color:var(--mid-purple);display:flex;justify-content:center;align-items:center}.settings__delete-button svg{width:24px;height:24px;fill:currentColor}.settings__header{display:flex;flex-direction:row;justify-content:space-between;padding:16px}.settings__right-align{display:flex;flex-direction:row;justify-content:flex-end;padding:16px 16px 16px 0}.settings__reset-button{display:flex;justify-content:center;align-items:center;width:48px;height:36px;background-color:var(--dark);color:var(--mid-purple);border-color:var(--mid-purple)}.settings__reset-button-icon{width:24px;fill:currentColor}.settings__action-button{font-size:1.5rem;display:flex;justify-content:center;align-items:center;width:48px;height:36px;background-color:var(--mid-purple);color:var(--dark)}.settings__icon{width:24px;fill:var(--dark)}.settings__link-toggle{background-color:var(--dark);border:1px solid var(--pale-purple);color:var(--pale-purple);display:flex;justify-content:center;align-items:center;height:32px;width:32px}.settings__link-toggle[data-linked=true]{color:var(--mid-purple);border:1px solid var(--mid-purple)}.settings__link-toggle svg{width:28px;height:28px;fill:currentColor;transform:translateY(1px)}.volume-display{--minor-width: 2.5rem;--major-width: 10rem;display:flex;flex-direction:row;justify-content:center;gap:24px;align-items:baseline;padding:16px}.volume-display-number{font-family:var(--font-koho);display:flex;justify-content:center;align-items:center}.volume-display-primary{font-size:6rem;line-height:1;width:var(--major-width);color:var(--mid-purple)}.volume-display-secondary{width:var(--minor-width);font-size:2rem;color:var(--pale-purple)}.volume-display-end{margin-bottom:auto}.volume-display__ramp-row{display:flex;justify-content:center}.volume-display__ramp-container{width:256px;height:40px;position:relative;left:0;top:0;background-color:var(--pale-purple);clip-path:polygon(100% 0%,100% 100%,0% 100%,0% 96%)}.volume-display__progress-indicator{position:absolute;top:0;left:0;height:40px;background-color:var(--mid-purple)}.time-display{padding:16px;font-family:var(--font-koho);font-size:1.5rem;display:flex;justify-content:center;flex-direction:row;align-items:center;gap:2px}.time-display[data-size=primary]{font-size:4rem;gap:4px}.time-display-digits{display:flex;flex-direction:row;align-items:center;width:2rem}.time-display[data-size=primary] .time-display-digits{width:6rem}.time-display-minutes{justify-content:flex-end}.time-display-colon{transform:translateY(-2px)}.time-display[data-size=primary] .time-display-colon{transform:translateY(-5px)}.time-display[data-running=true] .time-display-colon{animation-name:colon-pulse;animation-duration:1s;animation-timing-function:ease-in-out;animation-direction:alternate;animation-iteration-count:infinite;animation-play-state:running}@keyframes colon-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:0}}.time-display-seconds{justify-content:flex-start}.pour__header{display:flex;justify-content:flex-end;padding:16px}.pour__footer{display:flex;justify-content:space-between;padding:16px}.pour__tune-button{display:flex;justify-content:center;align-items:center;width:48px;height:36px;background-color:var(--mid-purple);color:var(--dark)}.tune-button__icon{width:24px;fill:var(--dark)}.pour__reset-button{display:flex;justify-content:center;align-items:center;width:54px;height:54px;background-color:var(--dark);color:var(--mid-purple);border-color:var(--mid-purple)}.pour__reset-button__icon{fill:currentColor;width:36px}.play-control-action-button{display:flex;justify-content:center;align-items:center;width:200px;height:88px;background-color:var(--mid-purple)}.play-control-button__icon{fill:currentColor;width:64px;fill:var(--dark)}