.keyboard{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none;position:fixed;top:0;left:0;overflow:hidden}h1{text-align:center}h1 a{color:#300}fieldset{margin-bottom:.5em;border-width:1px;border-radius:3px;border-color:#c8b8b8;border-style:solid}label{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;margin-top:.25em;line-height:1.5em}label>.sidebar-input{margin-left:auto}table{width:100%;border-collapse:collapse}table td,table th,table{padding:0;height:1.7em;box-sizing:border-box}table td>em{margin-left:.25em}textarea{width:100%;height:8.5em;box-sizing:border-box;-webkit-overflow-scrolling:touch;background-color:#faf9f8;border-width:1px;border-radius:3px;border-style:solid;border-color:#c8b8b8}select,input[type=text]{width:min(24em,100%);height:1.5em;box-sizing:border-box;background-color:#faf9f8;border-width:1px;border-radius:3px;border-style:solid;border-color:#c8b8b8}input[type=color]{height:1.5em;width:2.5em;box-sizing:border-box;background-color:#faf9f8;border-width:1px;color:#f5f1f0;border-radius:3px;border-style:solid;border-color:#c8b8b8}input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}table input[type=text]{height:1.5em;width:95%;box-sizing:border-box;background-color:#faf9f8;border-width:1px;border-radius:3px;border-style:solid;border-color:#c8b8b8}table input[type=color]{height:1.5em;width:2.5em;box-sizing:border-box;background-color:#faf9f8;border-width:1px;color:#f5f1f0;border-radius:3px;border-style:solid;border-color:#c8b8b8}input:out-of-range{background-color:#fde8e8;color:#900}.color-cell{display:flex;align-items:center;flex-direction:row-reverse;justify-content:flex-end;gap:4px;height:1.5em;position:relative;text-align:right}.color-swatch{display:inline-block;width:1.4em;height:1.4em;border-radius:3px;border:1px solid #c3c8cb;flex-shrink:0;cursor:pointer;transition:box-shadow .1s ease}.color-swatch:hover{box-shadow:0 0 0 2px #9006}.color-swatch--disabled{cursor:default;opacity:.5}.color-swatch--disabled:hover{box-shadow:none}.color-picker-hidden{position:absolute;right:0;top:0;width:1.4em!important;height:1.4em!important;padding:0!important;border:none!important;opacity:0;cursor:pointer;pointer-events:all}.color-input{width:calc(100% - 1.8em)!important;height:1.5em;box-sizing:border-box;background-color:#faf9f8;border-width:1px;border-radius:3px;border-style:solid;border-color:#c8b8b8;font-family:monospace;font-size:1.25em;text-align:right}.color-input:disabled{opacity:.5;cursor:not-allowed}.color-cell:focus-within{position:absolute;z-index:5;background:#faf9f8;border-radius:3px;box-shadow:0 2px 8px #00000026;height:auto;min-width:10em;right:0}.color-cell:focus-within .color-input{width:8.2em!important}.delete-btn{color:#900}.preset-error{width:100%;margin:.25em 0 0;color:#900;font-size:.85em}label .color-cell{flex-shrink:0;width:auto;margin-left:50%}@media(max-width:550px){label .color-cell{margin-left:30%}}label .color-cell .color-input{width:6.3em!important;flex:none;text-align:right}@media(max-width:550px){.divide-octave-btn,.edit-scala-btn{margin-left:0!important;margin-top:.5rem;display:block;width:100%}}.preset-actions{display:flex;justify-content:space-between;margin-top:.125em;line-height:1.5em}.reference-degree-row{background-color:#fff8a8}.reference-degree-row td:first-child{border-radius:4px 0 0 4px}.reference-degree-row td:last-child{border-radius:0 4px 4px 0}.reference-degree-cell{background-color:#fff8a8}.reference-degree-cell:first-child{border-radius:4px 0 0 4px}.reference-degree-cell:last-child{border-radius:0 4px 4px 0}.sidebar-input{width:50%!important;text-align:right}.preset-selector-row{justify-content:flex-start;gap:6px}.preset-selector-row select{flex:none}table td{vertical-align:top;padding-top:0;padding-bottom:0;position:relative}.freq-cell{display:flex;flex-direction:row;align-items:center;gap:3px}.tune-cell{display:flex;flex-direction:row;align-items:center;gap:3px;font-size:.78em}.tune-cell-spacer{display:inline-flex;width:33px;flex-shrink:0}.tune-cell--inline{display:inline-flex;flex-direction:row;align-items:center;gap:3px;font-size:.78em}.tune-handle{cursor:ew-resize;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:16px;border-radius:3px;background:#ede8e8;color:#300;touch-action:none;border:1px solid #c8b8b8;font-size:1.7em;margin-left:auto;margin-right:0}.tune-handle:hover{background:#ddd0d0;color:#300}.tune-handle:active{background:#cbb;cursor:grabbing}.tune-delta{font-family:monospace;font-size:1.35em;line-height:1;color:#900;min-width:4em;text-align:right;padding-left:2px;margin-right:12px}.tune-delta.tune-comparing{color:#600;font-style:italic}.tune-actions{display:flex;gap:3px;align-items:center}.tune-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;padding:0;border:1px solid #c8b8b8;border-radius:4px;background:#ede8e8;color:#300;cursor:pointer;font-size:1.05em;line-height:1}.tune-btn:hover{background:#ddd0d0;color:#300}.tune-btn--active{background:#ede8e8;color:#300;border-color:#c8b8b8}.tune-btn--save{color:#300;border-color:#c8b8b8}.tune-btn--save:hover{background:#ede8e8}.tune-btn--revert{color:#900;border-color:#c99}.tune-btn--revert:hover{background:#f5eded}.tune-btn-compare{font-size:1.3em;line-height:1}.tonic-label{line-height:1.5;color:#966;font-size:.85em}input.equiv-cell,input.equiv-cell:disabled,table input:disabled{color:#b99;border-color:#e8d8d8;background:transparent;-webkit-text-fill-color:#bb9999;opacity:1}.freq-cell input{flex:1;min-width:0}.fundamental-right{display:flex;align-items:center;gap:4px;width:50%;margin-left:auto}.fundamental-right input{flex:1;min-width:0;text-align:right;height:1.5em;box-sizing:border-box;background-color:#faf9f8;border:1px solid #c8b8b8;border-radius:3px}input[type=checkbox]{appearance:none;-webkit-appearance:none;width:1.1em;height:1.1em;border:1px solid #b0adb0;border-radius:3px;background:#faf9f8;cursor:pointer;flex-shrink:0;position:relative;vertical-align:middle;margin:0}input[type=checkbox]:checked{background:#900;border-color:#900}input[type=checkbox]:checked:after{content:"";position:absolute;left:.2em;top:.05em;width:.35em;height:.6em;border:2px solid rgb(243,241,240);border-top:none;border-left:none;transform:rotate(45deg)}input[type=checkbox]:focus{outline:none;box-shadow:0 0 0 2px #99000040}input[type=range]{-webkit-appearance:none;appearance:none;width:50%;height:1.1em;background:transparent;cursor:pointer;margin:0;padding:0;vertical-align:middle}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{height:3px;background:#c8b8b8;border-radius:2px}input[type=range]::-moz-range-track{height:3px;background:#c8b8b8;border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:.85em;height:.85em;border-radius:50%;background:#900;border:none;margin-top:-.32em;transition:background .1s ease}input[type=range]::-moz-range-thumb{width:.85em;height:.85em;border-radius:50%;background:#900;border:none;transition:background .1s ease}input[type=range]:hover::-webkit-slider-thumb{background:red}input[type=range]:hover::-moz-range-thumb{background:red}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}@font-face{font-family:Plainsound Sans;src:url(/hexatone/assets/PlainsoundSans-Regular-3SPRFtrr.otf);font-weight:400;font-style:normal}@font-face{font-family:Plainsound Sans;src:url(/hexatone/assets/PlainsoundSans-Italic-xVMxajch.otf);font-weight:400;font-style:italic}@font-face{font-family:Plainsound Sans;src:url(/hexatone/assets/PlainsoundSans-Bold-DBR5AbbM.otf);font-weight:700;font-style:normal}html,body{overflow:hidden;max-width:100%;height:100%;position:relative;overscroll-behavior:none;-webkit-overflow-scrolling:auto}body{-webkit-touch-callout:none;background-image:url(/hexatone/assets/Pattern3D_06-D5OgJPQC.png);transition:transform .3s ease-in-out;background-repeat:repeat;background-position:top left;background-attachment:scroll;font-family:Plainsound Sans,sans-serif}table{width:100%}.wide{width:50%}#leftaligned{text-align:left}#centered{text-align:center}#sidebar-spacer{height:.7em}@media(max-width:480px){#sidebar-spacer{height:3em}}@media(max-height:500px)and (orientation:landscape){#sidebar-spacer{top:75vh;height:1.5em}}#sidebar{transition:transform .3s ease-in-out;z-index:10;overflow-x:hidden;overflow-y:auto;background-color:#faf9f8;color:#300}#sidebar-button{position:fixed;z-index:11;background-color:#f0e9e9;border:1px solid #c0aaaa;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:background-color .15s ease,border-color .15s ease}#sidebar-button.latch-active{background-color:#f33;border-color:#a00}a{color:#900;text-decoration:none}a:hover{color:red}@media(max-width:480px){#sidebar{position:fixed;top:0;left:0;height:100%;width:100%;box-sizing:border-box;padding-top:4em;padding-left:1em;padding-right:1em;overflow-x:hidden;background-color:#faf9f8;color:#300}#sidebar-button{height:2.5em;top:0;left:50vw;transform:translate(-50%);transition:width .3s ease-in-out;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.hide #sidebar{transform:translateY(-100%)}.show #sidebar{transform:translate(0)}.hide #sidebar-button{width:2.5em}.show #sidebar-button{width:50vw}.hide #sidebar-button div{transform:rotate(90deg)}.show #sidebar-button div{transform:rotate(270deg)}}@media(min-width:480px){#sidebar{position:fixed;top:0;left:0;height:100vh;max-width:40em;padding-left:3.5em;padding-right:1em;background-color:#faf9f8;color:#300}#sidebar-button{width:2.5em;top:50vh;left:0;transform:translateY(-50%);transition:height .3s ease-in-out;border-top-right-radius:10px;border-bottom-right-radius:10px}.hide #sidebar{transform:translate(-100%)}.show #sidebar{transform:translate(0)}.hide #sidebar-button{height:2.5em}.show #sidebar-button{height:35vh}.hide #sidebar-button div{transform:rotate(0)}.show #sidebar-button div{transform:rotate(180deg)}}@media(max-height:500px)and (orientation:landscape){#sidebar-button{top:75vh;transform:translateY(-50%)}}@media(max-width:600px){#sustain-island{left:42%!important;transform:translate(calc(-100% - .3em))!important;padding-left:.9em!important;padding-right:.9em!important;font-size:.82em!important}#panic-button{right:auto!important;left:50%;transform:translate(.3em);padding:.45em .65em!important;font-size:.82em!important}#octave-island{font-size:.82em;bottom:4.6em!important;left:50%!important;transform:translate(-50%)}}@media(max-height:500px)and (orientation:landscape){#sustain-island{left:50%;transform:translate(-50%)}#panic-button{right:4.5em;left:auto;transform:none}}#bottom-bar{display:contents}#panic-button{position:fixed;bottom:1.2em;right:4.5em;z-index:11;padding:.45em 1.6em;border-radius:999px;background-color:#f0e9e9;border:1px solid #c0aaaa;color:#900;font-size:.95em;font-family:inherit;letter-spacing:.04em;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .15s ease}#panic-button:active{background-color:#dcc}#sustain-island{position:fixed;bottom:1.2em;z-index:11;padding:.45em 1.6em;border-radius:999px;background-color:#f0e9e9;border:1px solid #c0aaaa;color:#900;font-size:.95em;font-family:inherit;letter-spacing:.04em;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}#snapshot-list{position:fixed;bottom:4.5em;left:.5em;z-index:11;display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:14px;background:#f0e4e48c;-webkit-backdrop-filter:blur(12px) saturate(.7);backdrop-filter:blur(12px) saturate(.7);border:1px solid rgba(200,175,175,.45);box-shadow:0 2px 12px #643c3c1f}.snapshot-row{display:flex;align-items:center;gap:5px;border-radius:6px;transition:background-color .1s ease}.snapshot-drag-over{background:#c8a0a059;outline:1px solid rgba(153,0,0,.3)}.snapshot-drag-handle{cursor:grab;color:#783c3c80;font-size:1.1em;padding:0 2px;-webkit-user-select:none;user-select:none;line-height:1}.snapshot-play-btn{padding:.2em .65em;border-radius:999px;background-color:#fff8f8bf;border:1px solid rgba(192,160,160,.6);color:#800;font-size:.82em;font-family:inherit;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .1s ease}.snapshot-play-btn:active{background-color:#dcc8c8d9}.snapshot-playing .snapshot-play-btn{background-color:#dcc8c8d9;border-color:#a00;font-weight:700}.snapshot-del-btn{width:1.5em;height:1.5em;border-radius:50%;background:#b48c8c47;border:1px solid rgba(170,120,120,.4);color:#700;font-size:.75em;line-height:1;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .1s ease,color .1s ease}.snapshot-del-btn:hover,.snapshot-del-btn:active{background:#b4646473;color:#fff;border-color:#a0505099}#snapshot-button{position:fixed;bottom:1.25em;left:.6em;z-index:11;width:2.2em;height:2.2em;border-radius:50%;background-color:#f0e9e9;border:1px solid #c0aaaa;color:#900;font-size:1.1em;line-height:1;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .15s ease}#snapshot-button:active{background-color:#dcc}#redraw-button{position:fixed;bottom:1.25em;right:.6em;z-index:11;width:2.2em;height:2.2em;border-radius:50%;background-color:#f0e9e9;border:1px solid #c0aaaa;color:#900;font-size:1.1em;line-height:1;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .15s ease}#sustain-island{padding:.45em 1.6em;border-radius:999px;left:50%;transform:translate(-50%);background-color:#f0e9e9;border:1px solid #c0aaaa;color:#900;font-size:.95em;font-family:inherit;letter-spacing:.04em;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}#sustain-island.latch-active{background-color:#f33;border-color:#a00;color:#fff}#octave-island{position:fixed;bottom:1.2em;left:calc(50% - 13em);z-index:11;display:flex;align-items:center;gap:0;border-radius:999px;background-color:#f0e9e9;border:1px solid #c0aaaa;overflow:hidden;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.octave-btn{background:none;border:none;color:#900;font-size:.85em;padding:.45em .75em;cursor:pointer;font-family:inherit;line-height:1;transition:background-color .1s ease}.octave-btn:active{background-color:#dcc}.octave-defer-active{background-color:#e8d4d4;transition:background-color .1s ease}.octave-display{color:#900;font-size:.95em;font-family:inherit;font-weight:700;letter-spacing:.04em;min-width:2.8em;text-align:center;border-left:1px solid #c0aaaa;border-right:1px solid #c0aaaa;padding:.45em .3em;pointer-events:none}#redraw-button{width:2.2em;height:2.2em;border-radius:50%;background-color:#f0e9e9;border:1px solid #c0aaaa;color:#900;font-size:1.1em;line-height:1;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition:background-color .15s ease}#redraw-button:active{background-color:#ddd0d0}#ios-banner{position:fixed;bottom:3.5em;left:0;right:0;z-index:20;background:#1a1a2e;color:#e0e0e0;font-size:.85em;padding:.7em 2.5em .7em 1em;text-align:center;line-height:1.4}#ios-banner a{color:#7cb7ff;text-decoration:underline}#ios-banner button{position:absolute;top:.4em;right:.5em;background:none;border:none;color:#aaa;font-size:1em;cursor:pointer;padding:.2em .4em}@keyframes blue_ani{0%{fill:#abd1ff}25%{fill:#7cb7ff}50%{fill:#157fff}75%{fill:#0057c0}to{fill:#003f8b}}@keyframes pink_ani{0%{fill:#ffa4ff}25%{fill:#ff70ff}50%{fill:#f0f}75%{fill:#bf00bf}to{fill:#8a008a}}@keyframes green_ani{0%{fill:#efffa4}25%{fill:#e6ff70}50%{fill:#d3ff00}75%{fill:#cef900}to{fill:#a9cd00}}@keyframes orange_ani{0%{fill:#ffdca4}25%{fill:#ffc770}50%{fill:#ff9c00}75%{fill:#ff9c00}to{fill:#d48200}}path{fill-rule:evenodd}path:nth-child(1){animation:1.3s linear infinite alternate pink_ani}path:nth-child(2){animation:1.7s linear infinite alternate orange_ani}path:nth-child(3){animation:2.3s linear infinite alternate blue_ani}path:nth-child(4){animation:3.7s linear infinite alternate pink_ani}path:nth-child(5){animation:4.3s linear infinite alternate green_ani}path:nth-child(6){animation:4.7s linear infinite alternate orange_ani}path:nth-child(7){animation:1.1s linear infinite alternate green_ani}path:nth-child(8){animation:1.9s linear infinite alternate blue_ani}path:nth-child(9){animation:3.1s linear infinite alternate green_ani}path:nth-child(10){animation:4.1s linear infinite alternate green_ani}path:nth-child(11){animation:3.7s linear infinite alternate blue_ani}path:nth-child(12){animation:2.9s linear infinite alternate blue_ani}path:nth-child(13){animation:.7s linear infinite alternate pink_ani}path:nth-child(14){animation:.5s linear infinite alternate orange_ani}svg{opacity:.95;position:absolute;margin:auto;top:50%;left:50%;transform:translate(-50%,-50%);z-index:12}