body, html {
  background: var(--var-color-page-background, #ededed) !important;
  background-image: var(--var-page-background-image, url("../images/noise-light.png"));
  background-attachment: fixed;
  background-size: cover;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
body{text-align:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#error-messages{margin:32px 8px;color:red;font-weight:bold}.demo{display:flex;flex-flow:row wrap;align-items:flex-start;justify-content:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.logo{display:block;position:relative;width:64px;height:64px;margin:8px auto 16px;border-radius:50%;user-select:none;box-sizing:border-box}.logo,.logo:hover,.logo:focus,.logo:active{border-width:1px;border-style:solid;border-color:#009688;border-color:var(--var-color-control-accent, #009688)}.logo::before,.logo svg.logo-icon,.logo::after{position:absolute;top:-1px;left:-1px;width:64px;height:64px;border-radius:50%;pointer-events:none}.logo svg.logo-icon{stroke:#009688;stroke:var(--var-color-control-accent, #009688);fill:#009688;fill:var(--var-color-control-accent, #009688)}.logo::before{content:"";transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);transition:.1s ease;-webkit-transition:.1s ease}.logo.logo-animate-fill .logo::before{content:"";transform:scale(0);-webkit-transform:scale(0);-ms-transform:scale(0);transition:.1s ease;-webkit-transition:.1s ease}.logo:hover::before{transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1)}.logo.logo-animate-fill{background:#eeeeee;background:var(--var-color-block-background, #eeeeee)}.logo.logo-animate-fill::before{background:#009688;background:var(--var-color-control-accent, #009688)}.logo.logo-animate-fill:hover svg.logo-icon{fill:#fff;stroke:#fff}.logo.logo-animate-empty{background:#009688;background:var(--var-color-control-accent, #009688)}.logo.logo-animate-empty::before{top:0;left:0;width:62px;height:62px;background:#eeeeee;background:var(--var-color-block-background, #eeeeee)}
.intro{margin:auto;padding:16px;border-radius:8px;border:1px solid #c9c9c9;border:var(--var-color-block-border, 1px solid #c9c9c9);background:#eeeeee;background:var(--var-color-block-background, #eeeeee)}.intro h1{margin-top:0;text-align:center}@media only screen and (min-width: 560px){.intro{max-width:512px;border-width:1px}}.description{justify-content:center;line-height:125%;text-align:justify;text-indent:1em}.project-links{display:flex;flex-flow:row;justify-content:space-between;text-indent:0}
a{color:#009688;color:var(--var-color-control-accent, #009688);font-weight:bold;text-decoration:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-width:0 0 2px;border-style:solid;border-color:rgba(0,0,0,0)}a:focus,a:hover{border-color:#009688;border-color:var(--var-color-control-accent, #009688)}
.canvas-button{width:32px;height:32px;cursor:pointer}#canvas-container{position:relative;margin-bottom:16px;background:#000;overflow:hidden;width:100%;max-width:100vw;box-sizing:border-box}@media only screen and (min-width: 540px){#canvas-container{margin:16px}}#canvas-container>canvas{width:100%;height:100%;z-index:10}#canvas-container>.loader{display:none}#indicators{display:flex;position:absolute;left:1px;flex-direction:column;align-items:flex-start;color:#fff;font-family:"Lucida Console",Monaco,monospace;text-align:left;z-index:20}#indicators>div{flex:0 0 1em;margin:1px;padding:1px 4px;background:#000}#canvas-buttons-column{position:absolute;top:0;right:0;width:32px;z-index:30}#fullscreen-toggle-id{display:block;background-image:url("../images/resize.svg");background-position:0 0;background-size:200%}#fullscreen-toggle-id:hover{background-position-x:100%}#side-pane-toggle-id{display:none;background-image:url("../images/gear.svg");transition:transform .1s ease-in-out;-webkit-transition:transform .1s ease-in-out}#side-pane-toggle-id:hover{transform:rotate(-30deg);-webkit-transform:rotate(-30deg);-ms-transform:rotate(-30deg)}#side-pane-checkbox-id:checked+#canvas-container #side-pane-toggle-id:hover{transform:rotate(30deg);-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg)}.hidden{display:none}#fullscreen-checkbox-id:checked+.demo{position:fixed;overflow:hidden}#fullscreen-checkbox-id:checked+.demo #canvas-container{position:fixed;top:0;left:0;width:100vw;height:100vh;margin:0;overflow:hidden;z-index:5}#fullscreen-checkbox-id:checked+.demo #canvas-container #canvas-buttons-column{transition:transform .2s ease-in-out;-webkit-transition:transform .2s ease-in-out}#fullscreen-checkbox-id:checked+.demo #canvas-container #fullscreen-toggle-id{background-position-y:100%}@media only screen and (min-width: 500px){#fullscreen-checkbox-id:checked+.demo #canvas-container #side-pane-toggle-id{display:block}}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id:checked+#canvas-container #canvas-buttons-column{transform:translateX(-400px)}
.loader{position:absolute;top:0;right:0;bottom:0;left:0;width:120px;height:120px;margin:auto}.loader>span{color:#fff;font-size:32px;line-height:120px;text-shadow:1px 1px #000,-1px 1px #000,1px -1px #000,-1px -1px #000,1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000}.loader-animation{position:absolute;top:0;left:0;width:120px;height:120px;animation:spin 1.1s linear infinite}.loader-animation:before{position:absolute;top:-1px;left:-1px;width:122px;height:122px;border:6px solid rgba(0,0,0,0);border-top:6px solid #000;border-radius:50%;content:"";z-index:50;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.loader-animation:after{position:absolute;top:0;left:0;width:120px;height:120px;border:4px solid rgba(0,0,0,0);border-top:4px solid #fff;border-radius:50%;content:"";z-index:51;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.canvas-button{width:32px;height:32px;cursor:pointer}.controls-block{flex:1 0 0;max-width:36em;margin:16px 0;padding:12px 0;border-radius:8px;border:1px solid #c9c9c9;border:var(--var-color-block-border, 1px solid #c9c9c9);background:#eeeeee;background:var(--var-color-block-background, #eeeeee);z-index:0}@media only screen and (min-width: 540px){.controls-block{margin:16px}}.controls-block>hr{margin:12px 0;clear:both;border:none;border-top:1px solid #c9c9c9;border-top:var(--var-color-block-border, 1px solid #c9c9c9)}.controls-section{display:flex;flex-flow:row wrap;align-items:baseline;margin:0 16px}.controls-section>h2{width:7em;margin:0;font-size:medium;font-weight:bold;line-height:2em;text-align:left}.controls-section>.controls-list{display:flex;flex-direction:column;flex-grow:1}.controls-list>.control{display:flex;flex-flow:row wrap;align-items:center;min-width:300px;padding:3px 0}.control>label{min-width:8em;font-size:95%;line-height:95%;text-align:left}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id~.controls-block{position:fixed;top:0;left:100%;width:400px;max-height:calc(100% - 48px);margin:0;border-width:0 0 1px 1px;border-radius:0 0 0 8px;z-index:50;overflow-x:hidden;overflow-y:auto;transition:transform .2s ease-in-out;-webkit-transition:transform .2s ease-in-out}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id~.controls-block::-webkit-scrollbar{width:16px}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id~.controls-block::-webkit-scrollbar-track{border-radius:8px;background-color:#eeeeee;background-color:var(--var-color-block-background, #eeeeee)}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id~.controls-block::-webkit-scrollbar-thumb{border-width:3px 5px;border-style:solid;border-radius:8px;border-color:#eeeeee;border-color:var(--var-color-block-background, #eeeeee);background-color:#a5a5a5;background-color:var(--var-color-scrollbar, #a5a5a5)}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id~.controls-block::-webkit-scrollbar-thumb:focus,#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id~.controls-block::-webkit-scrollbar-thumb:hover{background-color:#b2b2b2;background-color:var(--var-color-scrollbar-hover, #b2b2b2)}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id~.controls-block::-webkit-scrollbar-thumb:active{background-color:#959595;background-color:var(--var-color-scrollbar-active, #959595)}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id~.controls-block:hover::-webkit-scrollbar-thumb{border-width:3px}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id:checked~.controls-block{transform:translateX(-100%);-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%)}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id:checked~.controls-block .tooltip{transform:translateX(-100vw) translateX(400px);-webkit-transform:translateX(-100vw) translateX(400px);-ms-transform:translateX(-100vw) translateX(400px)}#fullscreen-checkbox-id:checked+.demo #side-pane-checkbox-id:checked~.controls-block>#side-pane-close-toggle-id{display:block}#side-pane-close-toggle-id{display:none;position:absolute;top:0;right:0}#side-pane-close-toggle-id svg{stroke:#5e5e5e;stroke:var(--var-color-block-actionitem, #5e5e5e)}#side-pane-close-toggle-id svg:focus,#side-pane-close-toggle-id svg:hover{stroke:#7e7e7e;stroke:var(--var-color-block-actionitem-hover, #7e7e7e)}#side-pane-close-toggle-id svg:active{stroke:#535353;stroke:var(--var-color-block-actionitem-active, #535353)}
.file-control{position:relative}.file-control>input.file-input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0}.file-control>.file-control-button{display:inline-block;position:relative;padding:6px 12px 6px 2em;border-width:2px;border-style:solid;border-radius:4px;font-size:87.5%;font-weight:bold;cursor:pointer;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.file-control>.file-control-button>svg{position:absolute;top:0;left:.2em;width:1.5em;height:100%}.file-control.compact>.file-control-button{padding:4px 12px 4px 2em;font-size:75%}.file-control>input.file-input+.file-control-button{border-color:#009688;border-color:var(--var-color-control-accent, #009688);color:#009688;color:var(--var-color-control-accent, #009688)}.file-control>input.file-input+.file-control-button>svg{fill:#009688;fill:var(--var-color-control-accent, #009688)}.file-control>input.file-input:focus+.file-control-button,.file-control>input.file-input:hover:not(:disabled)+.file-control-button{border-color:#26a69a;border-color:var(--var-color-control-accent-hover, #26a69a);color:#26a69a;color:var(--var-color-control-accent-hover, #26a69a)}.file-control>input.file-input:focus+.file-control-button>svg,.file-control>input.file-input:hover:not(:disabled)+.file-control-button>svg{fill:#26a69a;fill:var(--var-color-control-accent-hover, #26a69a)}.file-control>input.file-input:active:not(:disabled)+.file-control-button{border-color:#00897b;border-color:var(--var-color-control-accent-active, #00897b);color:#00897b;color:var(--var-color-control-accent-active, #00897b);background:rgba(0,150,136,.1)}.file-control>input.file-input:active:not(:disabled)+.file-control-button>svg{fill:#00897b;fill:var(--var-color-control-accent-active, #00897b)}.file-control>input.file-input:disabled+.file-control-button{border-color:#a5a5a5;color:#a5a5a5}.file-control>input.file-input:disabled+.file-control-button>svg{fill:#a5a5a5}
.tabs{display:flex;position:relative;flex-flow:row wrap;flex-grow:1;width:auto;border-radius:4px;background:none;overflow:hidden}.tabs::after{position:absolute;top:0;left:0;width:100%;height:100%;border-width:2px;border-style:solid;border-color:#c9c9c9;border-color:var(--var-color-control-neutral, #c9c9c9);border-radius:4px;content:"";z-index:1;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.tabs.compact>input+label{padding:6px 14px;font-size:75%}.tabs>input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0}.tabs>input+label{flex:1;padding:8px 14px;font-size:87.5%;font-weight:bold;text-align:center;white-space:nowrap;cursor:pointer;z-index:2}.tabs>input:disabled+label,.tabs>input[type=radio]:checked+label{cursor:default}.tabs>input+label{background:none;color:#009688;color:var(--var-color-control-accent, #009688)}.tabs>input:checked+label{background:#009688;background:var(--var-color-control-accent, #009688);color:#fff}.tabs>input:disabled+label{background:none;color:#a5a5a5}.tabs>input:disabled:checked+label{background:#a5a5a5;color:#fff}.tabs>input[type=checkbox]:not(:disabled):hover+label,.tabs>input[type=checkbox]:not(:disabled):focus+label{background:rgba(0,150,136,.05)}.tabs>input[type=checkbox]:not(:disabled):hover:checked+label,.tabs>input[type=checkbox]:not(:disabled):focus:checked+label{background:#26a69a;background:var(--var-color-control-accent-hover, #26a69a)}.tabs>input[type=checkbox]:not(:disabled):active+label{background:rgba(0,150,136,.1)}.tabs>input[type=checkbox]:not(:disabled):active:checked+label{background:#00897b;background:var(--var-color-control-accent-active, #00897b)}.tabs>input[type=radio]:not(:disabled):not(:checked):hover+label,.tabs>input[type=radio]:not(:disabled):not(:checked):focus+label{background:rgba(0,150,136,.05)}.tabs>input[type=radio]:not(:disabled):not(:checked):active+label{background:rgba(0,150,136,.1)}
.range-container{display:inline-block;position:relative;flex:1 1 0%;width:100%;min-width:15px;height:26px}.range-container input[type=range]{width:100%;min-width:128px;height:100%;margin:0;padding:0;opacity:0}.range-container input[type=range]:not(:disabled){cursor:pointer}.range-container .range-skin-container{display:none !important}.range-container .range-progress{display:flex;flex:1;flex-flow:row nowrap}.range-container .range-progress-left{position:relative;flex-grow:0;flex-shrink:0;width:85%}.range-container .range-progress-right{position:relative;flex-grow:1}.range-container .range-bar{position:absolute;left:0;width:100%;z-index:0}.range-container .range-bar.range-bar-left{top:50%;height:3px;transform:translateY(-50%)}.range-container .range-bar.range-bar-right{top:50%;height:3px;background:#c9c9c9;background:var(--var-color-control-neutral, #c9c9c9);transform:translateY(-50%)}.range-container .range-handle{position:absolute;top:50%;right:-7.5px;width:15px;height:15px;border-radius:50%;z-index:1;transform:translateY(-50%)}
.range-container .range-bar-left,.range-container .range-handle{background:#009688;background:var(--var-color-control-accent, #009688)}.range-container input[type=range]:not(:disabled):hover+.range-skin-container .range-handle,.range-container input[type=range]:not(:disabled):focus+.range-skin-container .range-handle{background:#26a69a;background:var(--var-color-control-accent-hover, #26a69a)}.range-container input[type=range]:not(:disabled):active+.range-skin-container .range-handle{background:#00897b;background:var(--var-color-control-accent-active, #00897b)}.range-container input[type=range]:disabled+.range-skin-container .range-bar-left,.range-container input[type=range]:disabled+.range-skin-container .range-handle{background:#a5a5a5}.range-container .range-tooltip{position:absolute;top:-28px;right:0;min-width:24px;padding:4px;transform:translateX(50%);transition:opacity .1s ease-in-out;border-radius:4px;background:#535353;color:#eee;font-size:87.5%;text-align:center;opacity:0;z-index:2}.range-container .range-tooltip::after{position:absolute;top:100%;left:50%;width:0px;height:12px;margin-left:-6px;border-width:6px;border-style:solid;border-color:#535353 rgba(0,0,0,0) rgba(0,0,0,0);content:""}
.checkbox{display:block;position:relative;text-align:left;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.checkbox>input[type=checkbox]{width:1px;height:1px;opacity:0}.checkbox>input[type=checkbox]+label.checkmark,.checkbox>input[type=checkbox]+label.checkmark-line{margin-left:24px;line-height:26px;cursor:pointer}.checkbox>input[type=checkbox]:disabled+label.checkmark,.checkbox>input[type=checkbox]:disabled+label.checkmark-line{cursor:default}.checkbox>input[type=checkbox]+label.checkmark::before{position:absolute;top:calc(.5*(100% - 20px));left:0;width:20px;height:20px;border-width:2px;border-style:solid;border-radius:2px;background:none;content:"";box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.checkbox>input[type=checkbox]+label.checkmark::after{position:absolute;top:calc(.5*(100% - 20px) + .5*(20px - 14px));right:0;bottom:0;left:6.5px;width:7px;height:14px;border:solid #fff;border-width:0 3px 3px 0;background:none;content:"";box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;transform:translate(0, -1px) scale(0) rotate(45deg);-webkit-transform:translate(0, -1px) scale(0) rotate(45deg);-ms-transform:translate(0, -1px) scale(0) rotate(45deg)}.checkbox>input[type=checkbox]:checked+label.checkmark::after{transform:translate(0, -1px) scale(1) rotate(45deg);-webkit-transform:translate(0, -1px) scale(1) rotate(45deg);-ms-transform:translate(0, -1px) scale(1) rotate(45deg)}.checkbox>input[type=checkbox]+label.checkmark::before{border-color:#009688;border-color:var(--var-color-control-accent, #009688)}.checkbox>input[type=checkbox]:checked+label.checkmark::before{background:#009688;background:var(--var-color-control-accent, #009688)}.checkbox>input[type=checkbox]:hover+label.checkmark::before,.checkbox>input[type=checkbox]:focus+label.checkmark::before{border-color:#26a69a;border-color:var(--var-color-control-accent-hover, #26a69a)}.checkbox>input[type=checkbox]:hover:checked+label.checkmark::before,.checkbox>input[type=checkbox]:focus:checked+label.checkmark::before{background:#26a69a;background:var(--var-color-control-accent-hover, #26a69a)}.checkbox>input[type=checkbox]:active+label.checkmark::before{border-color:#00897b;border-color:var(--var-color-control-accent-active, #00897b)}.checkbox>input[type=checkbox]:active:checked+label.checkmark::before{background:#00897b;background:var(--var-color-control-accent-active, #00897b)}.checkbox>input[type=checkbox]:disabled+label.checkmark::before{border-color:#a5a5a5}.checkbox>input[type=checkbox]:disabled:checked+label.checkmark::before{background:#a5a5a5}
.control-btn {
    min-height: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    margin-right: 0.25rem;
    margin-bottom: 0;
    margin-top: 0;
    box-sizing: border-box;
}
.file-control .control-btn:last-child {
    margin-right: 0;
}
.file-control.upload {
    margin-left: -0.5rem;
}
:root{--var-color-theme:white;--var-color-page-background:#ededed;--var-page-background-image:url("../images/noise-light.png");--var-color-block-background:#eeeeee;--var-color-block-border:1px solid #c9c9c9;--var-color-title:#535353;--var-color-text:#676767;--var-color-block-actionitem:#5e5e5e;--var-color-block-actionitem-hover:#7e7e7e;--var-color-block-actionitem-active:#535353;--var-color-scrollbar:#a5a5a5;--var-color-scrollbar-hover:#b2b2b2;--var-color-scrollbar-active:#959595;--var-color-control-neutral:#c9c9c9;--var-color-control-accent:#00aaff;--var-color-control-accent-hover:#0088cc;--var-color-control-accent-active:#006699}@media(prefers-color-scheme: dark){:root{--var-color-theme:black;--var-color-page-background:#232323;--var-page-background-image:url("../images/noise-dark.png");--var-color-block-background:#202020;--var-color-block-border:1px solid #535353;--var-color-title:#eeeeee;--var-color-text:#dbdbdb;--var-color-block-actionitem:#dbdbdb;--var-color-block-actionitem-hover:#eeeeee;--var-color-block-actionitem-active:#c9c9c9;--var-color-scrollbar:#7e7e7e;--var-color-scrollbar-hover:#959595;--var-color-scrollbar-active:#676767;--var-color-control-neutral:#5e5e5e;--var-color-control-accent:#00aaff;--var-color-control-accent-hover:#0088cc;--var-color-control-accent-active:#006699}}:root{color-scheme:light dark}html{display:flex;min-height:100%;font-family:Arial,Helvetica,sans-serif}body{display:flex;flex:1;flex-direction:column;min-height:100vh;margin:0px;color:#676767;color:var(--var-color-text, #676767);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}main{display:block;flex-grow:1;padding-bottom:32px}h1,h2,h3{color:#535353;color:var(--var-color-title, #535353)}
.badge{width:32px;height:32px;margin:8px 12px;border:none}.badge>svg{width:32px;height:32px}.badge,.badge:hover,.badge:focus,.badge:active{border:none}.badge svg{fill:#5e5e5e;fill:var(--var-color-block-actionitem, #5e5e5e)}.badge svg:focus,.badge svg:hover{fill:#7e7e7e;fill:var(--var-color-block-actionitem-hover, #7e7e7e)}.badge svg:active{fill:#535353;fill:var(--var-color-block-actionitem-active, #535353)}.badge-shelf{display:flex;flex-flow:row;justify-content:center}footer{align-items:center;padding:8px;text-align:center;border-top:1px solid #c9c9c9;border-top:var(--var-color-block-border, 1px solid #c9c9c9);background:#eeeeee;background:var(--var-color-block-background, #eeeeee)}
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}
.arrow-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}
.arrow-group .arrow-btn {
    background: #23272b;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    border-radius: 0.375rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    cursor: pointer;
}
.arrow-group .arrow-btn:hover {
    background: #00aaff;
    color: #fff;
}
.arrow-group .value-display {
    min-width: 2.5rem;
    font-size: 1.1rem;
    font-family: inherit;
    font-weight: bold;
    background: #23272b;
    color: #fff;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
}
.controls-block {
    background: #181a1b;
    border-radius: 1rem;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.25);
    padding: 2rem 1.5rem;
    margin-top: 2rem;
}
.controls-section {
    margin-bottom: 2.5rem;
}
.controls-section h2 {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #fff;
    letter-spacing: 0.04em;
}
.controls-list {
    gap: 1.5rem;
}
.control label {
    font-size: 1.08rem;
    color: #e0e0e0;
    font-weight: 500;
}
hr {
    border: none;
    border-top: 1.5px solid #222c38;
    margin: 2rem 0;
}
/* 2D Horizontal Gallery Styles */
.gallery-container {
  max-width: 100vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
  margin-bottom: 32px;
  overflow: hidden;
}
.gallery-cylinder {
  display: flex;
  flex-direction: row;
  gap: 20px;
  cursor: grab;
  position: relative;
  height: 320px;
  transition: transform 0.3s ease-out;
}
.gallery-cylinder:active { cursor: grabbing; }
.gallery-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  z-index: 2;
  transition: transform 0.2s cubic-bezier(.4,1.6,.6,1), box-shadow 0.2s, filter 0.2s;
}
.glass-frame {
  border: 3px solid rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 30px 0 rgba(255,255,255,0.10) inset, 0 1.5px 10px 0 rgba(255,255,255,0.12);
  border-radius: 24px;
  width: 100%;
  height: 100%;
  min-width: 220px;
  min-height: 220px;
  max-width: 220px;
  max-height: 220px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s, box-shadow 0.2s, filter 0.2s;
}
.glass-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  pointer-events: none;
}
.gallery-face .slot-actions {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.gallery-face .slot-actions button {
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  padding: 6px;
  border: none;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.15s;
  cursor: pointer;
}
.gallery-face .slot-actions button:hover { opacity: 1; }
.gallery-face .slot-empty {
  font-size: 3rem;
  color: #fff;
  opacity: 0.3;
  user-select: none;
}
/* --- 2D Gallery --- */
.gallery-section {
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.gallery-section.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gallery-face:hover {
  z-index: 10;
  filter: none;
}
.gallery-face:hover .glass-frame {
  transform: scale(1.08);
  background: none !important;
}
.glass-frame {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.12), 0 1.5px 8px 0 rgba(0,0,0,0.10);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1.5px solid rgba(255,255,255,0.22);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot-content {
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #eaeaea 60%, #d1d1d1 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #222;
  font-weight: 600;
  user-select: none;
  overflow: hidden;
}
.delete-slot-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 50, 50, 0.8);
  color: white;
  border: none;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
  z-index: 10;
}
.gallery-face:hover .delete-slot-btn {
  opacity: 1;
}
.delete-slot-btn:hover {
  background-color: rgba(255, 0, 0, 1);
}
.gallery-face.selected .glass-frame {
  border: 2.5px solid var(--var-color-control-accent, #009688) !important;
  box-shadow: 0 0 15px var(--var-color-control-accent, #009688);
}
/* Запрет выделения для галереи */
.gallery-cylinder,
.gallery-face,
.glass-frame,
.gallery-face * {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.dpad-zoom-btn {
    background: #23272b;
    border: none;
    color: #fff;
    font-size: 2rem;
    border-radius: 0.5rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.3rem;
    transition: background 0.15s, box-shadow 0.15s;
    cursor: pointer;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.18);
}
.dpad-zoom-btn + .dpad-zoom-btn {
    margin-top: 1rem;
}
#canvas-container {
  box-sizing: border-box;
  padding: 0;
  margin-top: 0 !important;
}

.controls-block {
  min-height: 512px;
  height: 512px;
  max-height: 512px;
  box-sizing: border-box;
  padding: 0;
  margin-top: 0 !important;
}
.delete-slot-btn:focus,
.arrow-btn:focus,
.canvas-button:focus,
.gallery-face:focus {
  outline: 2px solid #00aaff;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0,170,255,0.25);
  z-index: 10;
}
@media (max-width: 768px) {
  .gallery-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .gallery-face {
    scroll-snap-align: center;
    min-width: 220px;
    max-width: 90vw;
  }
}
.delete-slot-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 24px;
  line-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.delete-slot-btn:active {
  background-color: rgba(255, 0, 0, 0.7);
}

/* Custom Tailwind-like classes */
.bg-custom-bg {
    background-color: var(--var-color-block-background);
}

.bg-custom-accent {
    background-color: var(--var-color-control-accent);
}

.border-custom-border {
    border-color: var(--var-color-block-border);
}

.text-custom-accent {
    color: var(--var-color-control-accent);
}

.text-custom-text-light {
    color: var(--var-color-text);
}

.text-custom-text-medium {
    color: var(--var-color-text);
}

.text-custom-text-dark {
    color: var(--var-color-title);
}

.focus\:border-custom-accent:focus {
    border-color: var(--var-color-control-accent);
}

.hover\:text-custom-accent:hover {
    color: var(--var-color-control-accent);
}

.checked\:bg-custom-accent:checked {
    background-color: var(--var-color-control-accent);
}

.checked\:text-black:checked {
    color: black;
}

.hover\:bg-white\/5:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.hover\:bg-blue-600:hover {
    background-color: #2563eb;
}

.placeholder-white\/40::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.max-h-\[90vh\] {
    max-height: 90vh;
}

.h-\[512px\] {
    height: 512px;
}

.transform {
    transform: translateX(-50%);
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.left-1\/2 {
    left: 50%;
}

.kit-indicator {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--var-color-control-accent);
    color: black;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-family: monospace;
    font-size: 0.875rem;
    z-index: 50;
}

/* Unified Design System Variables */
:root {
    /* Base colors */
    --var-color-theme: white;
    --var-color-page-background: #000000;
    --var-page-background-image: url("../images/noise-dark.png");
    --var-color-block-background: #1a1a1a;
    --var-color-block-border: 1px solid rgba(255,255,255,0.1);
    --var-color-title: #ffffff;
    --var-color-text: rgba(255,255,255,0.7);
    
    /* Extended color palette */
    --var-color-custom-bg: #1a1a1a;
    --var-color-custom-border: rgba(255,255,255,0.1);
    --var-color-custom-text-light: rgba(255,255,255,0.7);
    --var-color-custom-text-medium: rgba(255,255,255,0.85);
    --var-color-custom-text-dark: #ffffff;
    --var-color-custom-accent: #00aaff;
    --var-color-price-bg: #0f4c75;
    --var-color-urgent-red: #ff4444;
    --var-color-success-green: #00ff88;
    
    /* Action items */
    --var-color-block-actionitem: rgba(255,255,255,0.7);
    --var-color-block-actionitem-hover: rgba(255,255,255,0.9);
    --var-color-block-actionitem-active: rgba(255,255,255,0.6);
    
    /* Scrollbar */
    --var-color-scrollbar: rgba(255,255,255,0.3);
    --var-color-scrollbar-hover: rgba(255,255,255,0.5);
    --var-color-scrollbar-active: rgba(255,255,255,0.7);
    
    /* Controls */
    --var-color-control-neutral: rgba(255,255,255,0.2);
    --var-color-control-accent: #00aaff;
    --var-color-control-accent-hover: #0088cc;
    --var-color-control-accent-active: #006699;
    
    /* Gradients */
    --var-gradient-radial: radial-gradient(var(--tw-gradient-stops));
    --var-gradient-price: linear-gradient(135deg, #0f4c75 0%, #00aaff 100%);
    --var-gradient-urgent: linear-gradient(135deg, #ff4444 0%, #ff6666 100%);
    --var-gradient-success: linear-gradient(135deg, #00aaff 0%, #00ff88 100%);
    
    /* Typography */
    --var-font-mono: 'Space Mono', monospace;
    --var-font-size-xs: 0.75rem;
    --var-font-size-sm: 0.875rem;
    --var-font-size-base: 1rem;
    --var-font-size-lg: 1.125rem;
    --var-font-size-xl: 1.25rem;
    --var-font-size-2xl: 1.5rem;
    --var-font-size-3xl: 1.875rem;
    --var-font-size-4xl: 2.25rem;
    --var-font-size-5xl: 3rem;
    --var-font-size-6xl: 3.75rem;
    
    /* Spacing */
    --var-spacing-xs: 0.25rem;
    --var-spacing-sm: 0.5rem;
    --var-spacing-md: 1rem;
    --var-spacing-lg: 1.5rem;
    --var-spacing-xl: 2rem;
    --var-spacing-2xl: 2.5rem;
    --var-spacing-3xl: 3rem;
    
    /* Border radius */
    --var-border-radius-sm: 0.25rem;
    --var-border-radius-md: 0.5rem;
    --var-border-radius-lg: 0.75rem;
    --var-border-radius-xl: 1rem;
    --var-border-radius-2xl: 1.5rem;
    
    /* Shadows */
    --var-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --var-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --var-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --var-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --var-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --var-shadow-glow: 0 0 20px rgba(0, 170, 255, 0.3);
    --var-shadow-glow-strong: 0 0 40px rgba(0, 170, 255, 0.5);
}

/* Unified component styles */
.unified-button {
    display: inline-flex;
    align-items: center;
    padding: var(--var-spacing-md) var(--var-spacing-xl);
    background: var(--var-color-control-accent);
    color: white;
    font-weight: bold;
    border-radius: var(--var-border-radius-lg);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--var-color-control-accent);
    font-family: var(--var-font-mono);
    font-size: var(--var-font-size-lg);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.unified-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.unified-button:hover::before {
    left: 100%;
}

.unified-button:hover {
    background: var(--var-color-control-accent-hover);
    border-color: var(--var-color-control-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--var-shadow-glow);
}

.unified-button.urgent {
    background: var(--var-gradient-urgent);
    border-color: var(--var-color-urgent-red);
    animation: pulse-glow 2s infinite;
}

.unified-button.urgent:hover {
    background: linear-gradient(135deg, #ff6666 0%, #ff4444 100%);
    box-shadow: 0 12px 25px rgba(255, 68, 68, 0.4);
}

.unified-card {
    background: linear-gradient(135deg, var(--var-color-custom-bg) 0%, #2a2a2a 100%);
    border: 1px solid var(--var-color-custom-border);
    border-radius: var(--var-border-radius-xl);
    padding: var(--var-spacing-xl);
    transition: all 0.3s ease;
    position: relative;
}

.unified-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--var-shadow-glow);
    border-color: rgba(0, 170, 255, 0.3);
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); }
    50% { box-shadow: 0 0 0 10px rgba(255, 68, 68, 0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Unified typography classes */
.unified-heading-1 {
    font-size: var(--var-font-size-6xl);
    font-weight: bold;
    color: var(--var-color-title);
    font-family: var(--var-font-mono);
    line-height: 1.2;
}

.unified-heading-2 {
    font-size: var(--var-font-size-4xl);
    font-weight: bold;
    color: var(--var-color-title);
    font-family: var(--var-font-mono);
    line-height: 1.3;
}

.unified-heading-3 {
    font-size: var(--var-font-size-2xl);
    font-weight: bold;
    color: var(--var-color-title);
    font-family: var(--var-font-mono);
    line-height: 1.4;
}

.unified-text-body {
    font-size: var(--var-font-size-base);
    color: var(--var-color-text);
    line-height: 1.6;
    font-family: var(--var-font-mono);
}

.unified-text-accent {
    color: var(--var-color-custom-accent);
    font-weight: bold;
}

/* Responsive typography */
@media (max-width: 768px) {
    .unified-heading-1 { font-size: var(--var-font-size-4xl); }
    .unified-heading-2 { font-size: var(--var-font-size-3xl); }
    .unified-heading-3 { font-size: var(--var-font-size-xl); }
}

@media (max-width: 640px) {
    .unified-heading-1 { font-size: var(--var-font-size-3xl); }
    .unified-heading-2 { font-size: var(--var-font-size-2xl); }
    .unified-heading-3 { font-size: var(--var-font-size-lg); }
}