.fas,.fa-solid{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display, inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fas,.fa-solid{font-family:"Font Awesome 6 Free"}.fa-right-from-bracket:before{content:""}.fa-copy:before{content:""}.fa-up-right-and-down-left-from-center:before{content:""}.fa-layer-group:before{content:""}.fa-list:before{content:""}.fa-arrows-rotate:before{content:""}.fa-save:before{content:""}.fa-cog:before{content:""}.fa-volume-high:before{content:""}.fa-volume-off:before{content:""}.fa-solid{font-weight:900}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../fontawesome-free-6.4.0-web/webfonts/fa-solid-900.woff2) format("woff2"),url(../fontawesome-free-6.4.0-web/webfonts/fa-solid-900.ttf) format("truetype")}*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*{margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;box-sizing:border-box}.dark-mode{background-color:#202020;color:#fff!important;color-scheme:dark!important}.dark-mode .page-left .button-off,.dark-mode .page-left .button-off:hover{background-color:#777;color:#a9a9a9;box-shadow:0 0 0 1px transparent}.dark-mode button,.dark-mode input[type=button]{background-color:#777;color:#fff;border:1px solid transparent}.dark-mode button:hover,.dark-mode input[type=button]:hover{background-color:#9f9f9f}.dark-mode .settings-panel button,.dark-mode button:active,.dark-mode .settings-panel button:active,.dark-mode input[type=button]:active{background-color:#4682b4}.dark-mode .settings-panel button:hover{background-color:#b0c4de}.dark-mode .settings-panel label input[type=checkbox]{accent-color:steelblue}.dark-mode button.submit-button{background-color:#228b22}.dark-mode button.settings-button,.dark-mode .page-left .button-latched,.dark-mode .page-left .button-latched:hover{background-color:#4682b4}.dark-mode select{background-color:#777;color:#fff;border:1px solid transparent;padding:1px}.dark-mode select:hover{background-color:#9f9f9f}.dark-mode .variant-alt-container{background-color:#4682b4;color:#fff}.dark-mode .sound-container{background-color:#4682b4}.dark-mode .sound-btn{border:1px solid black}.dark-mode .sound-btn:active{background-color:#1e90ff;color:#000}.dark-mode .textbox{background-color:#333;color:#fff}.dark-mode .settings-panel{border:3px solid #ccc;background:#777;color:#000}.dark-mode .tab{background-color:#333}.dark-mode .tab button:hover{background-color:#9f9f9f;box-shadow:0 0 3px 1px transparent}.dark-mode .tab button.active{background-color:#4682b4}.dark-mode .tab button.disabled{background-color:#777;color:#bbb;cursor:not-allowed}.dark-mode .structured-view .selected-area-container{background-color:#4682b4}.dark-mode .pp-container{border-color:#fff;border-width:1px}.dark-mode .pp-container .running{border-color:#7fff00;box-shadow:0 6px 24px #333}.dark-mode .popup-window{border:3px solid #ccc;background:#777}.dark-mode .header-container{background-color:#333}.dark-mode .wavlen-global-label.disabled{color:#444!important}.dark-mode .wavlen-global-label.disabled input{background-color:#555;color:#bbb}body{margin-top:-15px;margin-bottom:0;overflow:hidden}#start-overlay{display:none;position:fixed;z-index:99999;top:0;right:0;bottom:0;left:0;background:#000c;color:#fff;font-size:2em;text-align:center;align-items:center;justify-content:center;flex-direction:column;cursor:pointer}#start-overlay>.start-overlay-box{margin:auto;border:2px solid yellow;border-radius:12px;padding:34px 38px 22px;display:inline-block;background:#000000b8;box-shadow:0 4px 24px #0008}#start-overlay>div{margin:auto}.start-overlay-sub{font-size:.6em}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;color:#fff;font-size:1.5em;display:flex;justify-content:center;align-items:center;z-index:9999;text-align:center}.main-container{display:flex;flex-direction:row;width:100vw;height:100vh;overflow:hidden}.page-left{min-width:200px;width:65vw;max-width:90vw;overflow:auto;resize:none;padding:10px}#page_left_top,.page-left-top{display:flex;flex-direction:column}#page_left_top:fullscreen #control-buttons-strip,#page_left_top:-webkit-full-screen #control-buttons-strip{position:static;top:10px;left:10px;display:flex;flex-wrap:wrap;align-items:center;gap:.5em;padding:.2em;z-index:1000;margin:0}#page_left_top:fullscreen .controls,#page_left_top:-webkit-full-screen .controls{position:static;margin:0}#page_left_top:fullscreen .controls-row,#page_left_top:-webkit-full-screen .controls-row{display:flex;flex-direction:row;align-items:flex-start;width:100%;gap:1em;position:static;margin-top:1em;order:-1}#page_left_top:fullscreen .sound-container,#page_left_top:-webkit-full-screen .sound-container{margin-left:1em}#page_left_top:fullscreen #ENLARGE_BUTTON,#page_left_top:-webkit-full-screen #ENLARGE_BUTTON{display:none}#page_left_top:fullscreen #FULLSCREEN_BUTTON,#page_left_top:-webkit-full-screen #FULLSCREEN_BUTTON{position:fixed;top:10px;right:10px;z-index:1001}#canvas-container{position:relative;display:flex;flex-direction:column;justify-content:stretch;overflow:hidden}.preview-type{position:absolute;bottom:45px;left:10px;display:block}.pixel-ring-count{position:absolute;bottom:45px;left:300px}#ENLARGE_BUTTON{position:absolute;bottom:40px;right:20px;z-index:10}.more-menu-container{white-space:nowrap}.page-left .button-off,.page-left .button-off:hover{background-color:#d3d3d3;color:#a9a9a9;box-shadow:0 0 2px 1px transparent;cursor:not-allowed}select{background-color:#eee;color:#000;border-radius:5px;padding:.2%;font-size:.8em;cursor:pointer}select:hover{box-shadow:0 0 2px 1px #1e90ff}.settings-panel .restore-defaults-btn{display:block;margin-left:auto;margin-right:auto;background-color:#a1d1f3;color:#000;border:1px solid black}.settings-panel button:hover{background-color:#1e90ff}.settings-panel button.close-settings{position:absolute;top:0;right:5px;padding:0 4px;font-weight:700;background-color:red}button,input[type=button]{display:inline-block;background-color:#eee;color:#000;border-radius:3px;padding:3px;margin-block:5px;font-size:14px;border:1px solid #bbb;font-weight:400;transition:box-shadow .1s ease}button:hover,input[type=button]:hover{box-shadow:0 0 2px 1px #1e90ff}button:active,input[type=button]:active{background-color:#1e90ff}button.submit-button{background-color:#32cd32;border:1px solid green}button.settings-button{background-color:#a1d1f3;border:1px solid black}button.submit-button:active,button.settings-button:active{background-color:#1e90ff}input.invalid{border:2px dashed #000;background-color:red}input.nofocus:focus{outline:none;box-shadow:none}.page-left .button-latched,.page-left .button-latched:hover{background-color:#a1d1f3}.variant-alt-container,.sound-container{background:#a1d1f3;font-size:16px;border:1px solid black;border-radius:4px;display:inline-block;padding-inline:4px;margin-bottom:5px}.variant-alt-controls,.sound-controls{display:inline-flex;align-items:center}.variant-label{margin-left:3px}.variant-slider{-webkit-appearance:none;width:65px;height:10px;margin:5px 3px 3px;cursor:pointer}.variant-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#1e90ff;width:14px;height:14px;border-radius:20%;border:1px solid #333;margin-top:-2px}.variant-slider::-moz-range-thumb{background:#1e90ff;width:14px;height:14px;border-radius:20%;border:1px solid #333}.variant-slider::-ms-thumb{background:#1e90ff;width:14px;height:14px;border-radius:20%;border:1px solid #333}.alt-label{margin-left:8px;margin-right:3px}.sound-label{display:inline-flex;align-items:center;padding:0 5px;gap:3px}.sound-label:not(:last-child){border-right:1px solid #333}.sound-label input[type=checkbox]{accent-color:dodgerblue;margin-right:3px;box-shadow:0 0 0 1px #000}#sound-toggle-icon-wrap{display:inline-block;width:1.5em}#VOLUME_VALUE{display:inline-block;min-width:28px}.sound-btn{margin-left:3px}.controls{display:flex;justify-content:space-between;flex-wrap:wrap}.error-message{color:red;font-weight:700}.textbox{background-color:#eee;font-size:14px;width:100%;min-width:100%;box-sizing:border-box;resize:vertical}.action-buttons-strip,.settings-button-strip{display:inline-block;max-width:fit-content}.settings-button{background-color:#a1d1f3}.actions-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}#history_tabcontent .history-btn{background:#e0e0e0;border:1px solid #aaa;margin-bottom:2px;margin-right:4px;font-size:13px}#history_tabcontent .history-btn-valid{background:#a1d1f3}.dark-mode #history_tabcontent .history-btn-valid{background:#4682b4}#history_tabcontent .history-btn-invalid{background:#eee;color:#aaa;border-color:#bbb;opacity:.65}.settings-panel.show{opacity:1;pointer-events:auto}.settings-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);color:#000;border:3px solid #888;background:#ddd;padding:36px 36px 36px 30px;border-radius:9px;box-shadow:6px 10px 10px #000000e6;opacity:0;pointer-events:none;transition:opacity .25s ease-in-out;z-index:1000}.settings-panel label{display:flex;align-items:center}.settings-panel label input[type=checkbox]{accent-color:#A1D1F3;margin-right:8px}.settings-section,.sound-section{margin-bottom:10px}.settings-panel .settings-header-label{text-align:center;margin:0 auto;display:block;color:#333;font-size:22px}.settings-section-label{font-weight:700;color:#333;margin-bottom:5px;border-bottom:2px solid #888;padding-bottom:5px}.sound-section-label{font-size:12px;font-weight:700;color:#333;margin-bottom:5px;border-bottom:2px solid #888;padding-bottom:5px}.wavlen-controls{display:block;margin-top:5px}.wavlen-row{display:flex;align-items:center;position:relative;width:100%}.wavlen-global-label{display:block;margin-top:5px}.wavlen-value{margin-left:5px}.wavlen-global-label.disabled{color:#aaa!important;opacity:.7;pointer-events:none}.wavlen-global-label.disabled input{background-color:#eee;color:#888;cursor:not-allowed}.tab{overflow:hidden;border:1px solid #ccc;background-color:#f1f1f1}.tab button{background-color:inherit;float:left;border:none;margin:unset;outline:none;cursor:pointer;padding:8px;border-radius:0;transition:.1s ease}.tab button:hover{background-color:#ddd;box-shadow:0 0 3px 1px transparent}.tab button.active{background-color:#a1d1f3}.tab button.disabled{background-color:#d3d3d3;color:#a9a9a9;box-shadow:0 0 0 1px transparent;cursor:not-allowed}.tabcontent{display:none;padding:6px 12px;border:1px solid #ccc;border-top:none}.tabcontent .btn{border-radius:5px}.rgb-tabcontent{color:#000}.custom-color{background:#ccc;text-align:center;position:relative}.rgb-tabcontent .btn{border-radius:16px;width:125px}.rgb-tabcontent .custom-color .color-picker{width:100px}.splitter{width:6px;min-width:8px;background:#ddd;cursor:ew-resize;-webkit-user-select:none;user-select:none;position:relative;z-index:2;height:100vh}.splitter:after{content:"";display:block;position:absolute;left:50%;top:50%;width:4px;height:18px;transform:translate(-50%,-50%);background:radial-gradient(circle,black 70%,transparent 71%) 0 2px,radial-gradient(circle,black 70%,transparent 71%) 0 8px,radial-gradient(circle,black 70%,transparent 71%) 0 14px;background-repeat:no-repeat;background-size:4px 4px}.page-right{flex:1 1 0;min-width:400px;overflow-y:auto;padding:10px}.structured-view{position:sticky;top:50px;width:100%;height:calc(100vh - 50px);overflow-y:auto;padding-bottom:35px;box-sizing:border-box}.structured-view-label{display:flex;font-size:110%;font-weight:700;padding-top:9px;padding-bottom:5px;justify-content:space-around}.structured-view .selected-area-container{background-color:#a1d1f3}.pp span{padding-left:6px;font-weight:600}.pp-container{border-color:gray;border-style:solid;border-width:3px;padding:2px 20px 2px 2px}.pp-content{margin-left:1em}.running{border-color:#7fff00;box-shadow:0 4px 12px #777}.extra-buttons{margin:3px;line-height:1em;font-size:16px}.header-title{min-width:180px;font-size:16px}.header-container{position:fixed;top:0;left:0;z-index:1000;width:100%;display:flex;justify-content:space-between;align-items:center;background:#eee;height:25px;padding:2px 15px}.other-sites{float:right;padding-right:10px;margin-left:35px}.header-links{display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:100px}.header-links a img{height:16px;width:16px;margin-right:5px}.header-links a:hover{color:#000}
