.material-symbols-rounded{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 48}body{background-color:#201e1f;width:100%;height:100vh;box-sizing:border-box;margin:0}*{user-select:none}#content{position:fixed;display:flex;align-items:center;justify-content:center;height:100%;width:100%;box-sizing:border-box}button{-webkit-tap-highlight-color:transparent}#buttons{display:flex;--circle-diameter: min(min(50vw, calc(.9 * var(--win-height))), 500px)}#buttons>div{width:var(--circle-diameter);height:var(--circle-diameter);border-radius:50%;box-sizing:border-box}#buttons-left{z-index:1;padding:calc(var(--circle-diameter) * .05)}#buttons-right{margin-left:calc(var(--circle-diameter) * -.2);display:grid;align-items:center;justify-items:center;--base-rotation: 90deg}#buttons-right>*{grid-row:1;grid-column:1}.button{--offset-scale: 1;width:var(--button-diameter);height:calc(var(--button-diameter) + var(--max-offset-amount) * var(--button-diameter));margin-top:calc(-1 * var(--max-offset-amount) * var(--button-diameter));border-radius:calc(var(--button-diameter) * .5);background:none;border:none;padding:0;display:flex;flex-direction:column;justify-content:end;outline:solid 2px white;outline-offset:8px;touch-action:none;cursor:pointer}.button:not(:focus),.button:focus:not(:focus-visible){outline:none}.button .top{display:block;width:var(--button-diameter);height:var(--button-diameter);box-sizing:border-box;border-radius:50%;margin-bottom:-50%;margin-top:calc(var(--max-offset-amount) * var(--button-diameter) * (1 - var(--offset-scale)));z-index:2;transition:margin-top .3s ease-out}.button .side{display:block;width:var(--button-diameter);flex-grow:1;border-bottom-left-radius:calc(var(--button-diameter) * .5);border-bottom-right-radius:calc(var(--button-diameter) * .5);z-index:1}.button .bottom{margin:calc(-100% - 5px) -5px -5px;height:calc(var(--button-diameter) + 10px);width:calc(var(--button-diameter) + 10px);background-color:#000;border-radius:50%}.button.pressed,.button#connect-button:not(:disabled):active{--offset-scale: .25}.button.pressed .top,.button#connect-button:not(:disabled):active .top{transition:margin-top .1s ease-out}.big-button{--max-offset-amount: .05}.big-button .top{border:5px solid}.small-button,.small-button-label{--actual-rotation: calc(var(--base-rotation) + var(--index) * 36deg);--button-diameter: calc(var(--circle-diameter) * .15)}.small-button{--max-offset-amount: .075;transform:rotate(var(--actual-rotation)) translate(calc((var(--circle-diameter) - var(--button-diameter)) / -2)) rotate(calc(-1 * var(--actual-rotation)))}body:not(.show-labels) .button-label{opacity:0}.button-label{transition:opacity .3s}.button-label .label-text{font-family:sans-serif;fill:#fff}.small-button-label{width:calc(var(--button-diameter) * 1.8);height:calc(var(--button-diameter) * 1.8);--actual-rotation: calc(var(--base-rotation) + var(--index) * 36deg);transform:rotate(var(--actual-rotation)) translate(calc((var(--circle-diameter) - var(--button-diameter)) / -2)) rotate(-90deg)}.small-button-label .label-text{font-size:18px;opacity:.8}#bluetooth-button-label{--index: -1}.big-button-label .label-text{font-size:12px;opacity:.7}#big-red-button{--button-diameter: calc(var(--circle-diameter) * .9)}#big-red-button .top{background:radial-gradient(circle,#A00000 0%,#A00000 50%,#870000 70%);border-color:#540000}#big-red-button .side{background:#870000}#big-red-button.playing .top{background:radial-gradient(circle,#F44 0%,#F22 30%,#F00000 35%,#A00000 70%)}#big-red-button.playing .bottom{box-shadow:0 0 50px 10px #f006}#big-blue-button{--button-diameter: calc(var(--circle-diameter) * .6)}#big-blue-button .top{background:radial-gradient(circle,#00008C 0%,#00008C 50%,#000073 70%);border-color:#000040}#big-blue-button .side{background-color:#000073}#big-blue-button.playing .top{background:radial-gradient(circle,#22F 0%,#11F 30%,#0000C8 45%,#00008C 70%)}#big-blue-button.playing .bottom{box-shadow:0 0 40px 10px #22f6}#connect-button{color:#ccc;--index: -1;transition:color .4s,text-shadow .4s}#connect-button .top{padding:0 0 0 calc(var(--circle-diameter) * .005);background:#151515;display:flex;align-items:center;justify-content:center;text-align:center}#connect-button .side{background:#111}#connect-button:disabled{color:#0082fc;text-shadow:0 0 20px #0082fc;cursor:default}#connect-button-icon{font-size:calc(var(--circle-diameter) * .1)}#red-button,#red-button-label{--index: 0}#red-button .top{background:radial-gradient(circle,#f80000 0%,#f80000 40%,#e00 40%,#d50000 100%)}#orange-button,#orange-button-label{--index: 1}#orange-button .top{background:radial-gradient(circle,#ffa90a 0%,#ffa90a 40%,#ffa500 40%,#e69500 100%)}#yellow-button,#yellow-button-label{--index: 2}#yellow-button .top{background:radial-gradient(circle,#f8f800 0%,#f8f800 40%,#ee0 40%,#d5d500 100%)}#green-button,#green-button-label{--index: 3}#green-button .top{background:radial-gradient(circle,#008a00 0%,#008a00 40%,green 40%,#006700 100%)}#blue-button,#blue-button-label{--index: 4}#blue-button .top{background:radial-gradient(circle,#0000e7 0%,#0000e7 40%,#00d 40%,#0000c4 100%)}#white-button,#white-button-label{--index: 5}#white-button .top{background:radial-gradient(circle,#f3f3f3 0%,#f3f3f3 40%,#eee 40%,#e1e1e1 100%)}#black-button,#black-button-label{--index: 6}#black-button .top{background:radial-gradient(circle,#2d2d2d 0%,#2d2d2d 40%,#282828 40%,#1b1b1b 100%)}#red-button .side{background:#a20000}#orange-button .side{background:#b37400}#yellow-button .side{background:#a2a200}#green-button .side{background:#003400}#blue-button .side{background:#000091}#white-button .side{background:#c8c8c8}#black-button .side{background:#161616}@media (orientation: portrait){#buttons{flex-direction:column;--circle-diameter: min(min(50vh, 90vw), 500px)}#buttons-right{margin-left:0;margin-top:calc(var(--circle-diameter) * -.2);--base-rotation: 180deg}}#controls{position:fixed;top:0;right:0;display:flex;flex-direction:row;align-items:center}#controls .material-symbols-rounded{font-size:32px}#controls button{background:none;border:none;padding:6px;border-radius:50%;color:#fffb;cursor:pointer;margin:4px 4px 4px 0;width:32px;height:32px;box-sizing:content-box;transition:background-color .2s}#controls button:hover{background:rgba(255,255,255,.1333333333)}#interaction-required{animation:interactionRequired 2s infinite ease;color:#e76f51;margin-right:12px}@keyframes interactionRequired{50%{opacity:.5}}#interaction-required.hidden{display:none}body.show-labels #labels-button .material-symbols-rounded{font-variation-settings:"FILL" 1!important}:fullscreen #fullscreen-button{display:none}#config-dialog{border:5px solid black;border-radius:10px;box-shadow:0 10px 30px 4px #0007;font-family:sans-serif;width:500px;box-sizing:border-box;max-width:calc(95vw - 10px)}#config-dialog::backdrop{background:rgba(0,0,0,.6)}#config-dialog label{font-size:8pt;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:4px}#config-dialog #config-dialog__config-input{display:block;width:100%;box-sizing:border-box;border:3px solid #1C5253;border-radius:10px;font-size:12pt;padding:4px 8px}#config-dialog #config-dialog__submit{display:block;margin-top:8px;margin-left:auto;background:#246A6B;border:5px solid #1C5253;border-radius:10px;font-size:12pt;color:#fff;padding:6px 12px;cursor:pointer}#config-dialog-error{background:#fbb;border:#800 2px solid;border-radius:10px;padding:6px 12px;margin-bottom:10px}#config-dialog-error.hidden{display:none}