:root{--text-color: #222222;--surface: #c0c0c0;--button-highlight: #ffffff;--button-face: #dfdfdf;--button-shadow: #808080;--window-frame: #0a0a0a;--dialog-blue: #000080;--dialog-blue-light: #1084d0;--dialog-gray: #808080;--dialog-gray-light: #b5b5b5;--link-blue: #0000ff;--element-spacing: 8px;--grouped-button-spacing: 4px;--grouped-element-spacing: 6px;--radio-width: 12px;--checkbox-width: 13px;--radio-label-spacing: 6px;--range-track-height: 4px;--range-spacing: 10px;--radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);--radio-total-width: calc(var(--radio-total-width-precalc));--radio-left: calc(-1 * var(--radio-total-width-precalc));--radio-dot-width: 4px;--radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);--radio-dot-left: calc( -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var( --radio-dot-width ) / 2 );--checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing);--checkbox-total-width: calc(var(--checkbox-total-width-precalc));--checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));--checkmark-width: 7px;--checkmark-left: 3px;--border-width: 1px;--border-raised-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-highlight);--border-raised-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-face);--border-sunken-outer: inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame);--border-sunken-inner: inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow);--default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);--default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);--default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);--default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);--border-window-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face);--border-window-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);--border-field: inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);--border-tab: inset -1px 0 var(--window-frame), inset 1px 1px var(--button-face), inset -2px 0 var(--button-shadow), inset 2px 2px var(--button-highlight) }@font-face{font-family:"Pixelated MS Sans Serif";src:url(/fonts/converted/ms_sans_serif.woff) format("woff");src:url(/fonts/converted/ms_sans_serif.woff2) format("woff2");font-weight:400;font-style:normal}@font-face{font-family:"Pixelated MS Sans Serif";src:url(/fonts/converted/ms_sans_serif_bold.woff) format("woff");src:url(/fonts/converted/ms_sans_serif_bold.woff2) format("woff2");font-weight:700;font-style:normal}body{font-family:Arial;font-size:12px;color:var(--text-color)}button,label,input,legend,textarea,select,option,table,ul.tree-view,.window,.title-bar,li[role=tab]{font-family:"Pixelated MS Sans Serif",Arial;-webkit-font-smoothing:none;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}button,input[type=submit],input[type=reset]{box-sizing:border-box;border:none;color:transparent;text-shadow:0 0 var(--text-color);background:var(--surface);box-shadow:var(--border-raised-outer),var(--border-raised-inner);border-radius:0;min-width:75px;min-height:23px;padding:0 12px}button.default,input[type=submit].default,input[type=reset].default{box-shadow:var(--default-button-border-raised-outer),var(--default-button-border-raised-inner)}.vertical-bar{width:4px;height:20px;background:silver;box-shadow:var(--border-raised-outer),var(--border-raised-inner)}button:not(:disabled):active,input[type=submit]:not(:disabled):active,input[type=reset]:not(:disabled):active{box-shadow:var(--border-sunken-outer),var(--border-sunken-inner);text-shadow:1px 1px var(--text-color)}button.default:not(:disabled):active,input[type=submit].default:not(:disabled):active,input[type=reset].default:not(:disabled):active{box-shadow:var(--default-button-border-sunken-outer),var(--default-button-border-sunken-inner)}@media (not(hover)){button:not(:disabled):hover,input[type=submit]:not(:disabled):hover,input[type=reset]:not(:disabled):hover{box-shadow:var(--border-sunken-outer),var(--border-sunken-inner)}}button:focus,input[type=submit]:focus,input[type=reset]:focus{outline:1px dotted #000000;outline-offset:-4px}button::-moz-focus-inner,input[type=submit]::-moz-focus-inner,input[type=reset]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:var(--button-shadow)}button:disabled,input[type=submit]:disabled,input[type=reset]:disabled,:disabled+label{text-shadow:1px 1px 0 var(--button-highlight)}.window{box-shadow:var(--border-window-outer),var(--border-window-inner);background:var(--surface);padding:3px}.status-bar{margin:0 1px;display:flex;gap:1px}.status-bar-field{box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px gray;flex-grow:1;padding:2px 3px;margin:0}.window-body{margin:var(--element-spacing)}fieldset{border-image:url(/icon/groupbox-border.svg) 2;padding:calc(2 * var(--border-width) + var(--element-spacing));padding-block-start:var(--element-spacing);margin:0}legend{background:var(--surface)}.field-row{display:flex;align-items:center}[class^=field-row]+[class^=field-row]{margin-top:var(--grouped-element-spacing)}.field-row>*+*{margin-left:var(--grouped-element-spacing)}.field-row-stacked{display:flex;flex-direction:column}.field-row-stacked *+*{margin-top:var(--grouped-element-spacing)}label{display:inline-flex;align-items:center}input[type=radio],input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0;background:0;position:fixed;opacity:0;border:none}input[type=radio]+label,input[type=checkbox]+label{line-height:13px}input[type=radio]+label{position:relative;margin-left:var(--radio-total-width)}input[type=radio]+label:before{content:"";position:absolute;top:0;left:calc(-1 * (var(--radio-total-width-precalc)));display:inline-block;width:var(--radio-width);height:var(--radio-width);margin-right:var(--radio-label-spacing);background:url(/icon/radio-border.svg)}input[type=radio]:active+label:before{background:url(/icon/radio-border-disabled.svg)}input[type=radio]:checked+label:after{content:"";display:block;width:var(--radio-dot-width);height:var(--radio-dot-width);top:var(--radio-dot-top);left:var(--radio-dot-left);position:absolute;background:url(/icon/radio-dot.svg)}input[type=radio]:focus+label,input[type=checkbox]:focus+label{outline:1px dotted #000000}input[type=radio][disabled]+label:before{background:url(/icon/radio-border-disabled.svg)}input[type=radio][disabled]:checked+label:after{background:url(/icon/radio-dot-disabled.svg)}input[type=checkbox]+label{position:relative;margin-left:var(--checkbox-total-width)}input[type=checkbox]+label:before{content:"";position:absolute;left:calc(-1 * (var(--checkbox-total-width-precalc)));display:inline-block;width:var(--checkbox-width);height:var(--checkbox-width);background:var(--button-highlight);box-shadow:var(--border-field);margin-right:var(--radio-label-spacing)}input[type=checkbox]:active+label:before{background:var(--surface)}input[type=checkbox]:checked+label:after{content:"";display:block;width:var(--checkmark-width);height:var(--checkmark-width);position:absolute;left:calc(-1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left));background:url(/icon/checkmark.svg)}input[type=checkbox][disabled]+label:before{background:var(--surface)}input[type=checkbox][disabled]:checked+label:after{background:url(/icon/checkmark-disabled.svg)}input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=search],select,textarea{padding:3px 4px;border:none;box-shadow:var(--border-field);background-color:var(--button-highlight);box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}input[type=text],input[type=password],input[type=email],input[type=tel],input[type=search],select{height:21px}input[type=number]{height:22px}input[type=search]::-ms-clear{display:none;width:0;height:0}input[type=search]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=search]{line-height:2}input[type=email]:disabled,input[type=tel]:disabled,input[type=password]:disabled,input[type=text]:disabled,input[type=number]:disabled,input[type=search]:disabled,input[type=email]:read-only,input[type=tel]:read-only,input[type=password]:read-only,input[type=text]:read-only,input[type=number]:read-only,input[type=search]:read-only,textarea:disabled{background-color:var(--surface)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;padding-right:32px;background-image:url(/icon/button-down.svg);background-position:top 2px right 2px;background-repeat:no-repeat;border-radius:0}select:focus,input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=number]:focus,input[type=search]:focus,textarea:focus{outline:none}input[type=range]{-webkit-appearance:none;width:100%;background:transparent}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:21px;width:11px;background:url(/icon/indicator-horizontal.svg);transform:translateY(-8px);box-shadow:none;border:none}input[type=range].has-box-indicator::-webkit-slider-thumb{background:url(/icon/indicator-rectangle-horizontal.svg);transform:translateY(-10px)}input[type=range]::-moz-range-thumb{height:21px;width:11px;border:0;border-radius:0;background:url(/icon/indicator-horizontal.svg);transform:translateY(2px)}input[type=range].has-box-indicator::-moz-range-thumb{background:url(/icon/indicator-rectangle-horizontal.svg);transform:translateY(0)}input[type=range]::-webkit-slider-runnable-track{width:100%;height:2px;box-sizing:border-box;background:#000;border-right:1px solid grey;border-bottom:1px solid grey;box-shadow:1px 0 #fff,1px 1px #fff,0 1px #fff,-1px 0 #a9a9a9,-1px -1px #a9a9a9,0 -1px #a9a9a9,-1px 1px #fff,1px -1px #a9a9a9}input[type=range]::-moz-range-track{width:100%;height:2px;box-sizing:border-box;background:#000;border-right:1px solid grey;border-bottom:1px solid grey;box-shadow:1px 0 #fff,1px 1px #fff,0 1px #fff,-1px 0 #a9a9a9,-1px -1px #a9a9a9,0 -1px #a9a9a9,-1px 1px #fff,1px -1px #a9a9a9}.is-vertical{display:inline-block;width:4px;height:150px;transform:translateY(50%)}.is-vertical>input[type=range]{width:150px;height:4px;margin:0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);transform-origin:left;transform:rotate(270deg) translate(calc(-50% + var(--element-spacing)))}.is-vertical>input[type=range]::-webkit-slider-runnable-track,.is-vertical>input[type=range]::-moz-range-track{border-left:1px solid grey;border-bottom:1px solid grey;box-shadow:-1px 0 #fff,-1px 1px #fff,0 1px #fff,1px 0 #a9a9a9,1px -1px #a9a9a9,0 -1px #a9a9a9,1px 1px #fff,-1px -1px #a9a9a9}.is-vertical>input[type=range]::-webkit-slider-thumb,.is-vertical>input[type=range]::-moz-range-thumb{transform:translateY(2px) scaleX(-1)}.is-vertical>input[type=range].has-box-indicator::-webkit-slider-thumb,.is-vertical>input[type=range].has-box-indicator::-moz-range-thumb{transform:translateY(0) scaleX(-1)}select:focus{color:var(--button-highlight);background-color:var(--dialog-blue)}select:focus option{color:#000;background-color:#fff}select:active{background-image:url(/icon/button-down-active.svg)}a{color:var(--link-blue)}a:focus{outline:1px dotted var(--link-blue)}ul.tree-view{display:block;background:var(--button-highlight);box-shadow:var(--border-field);padding:6px;margin:0}ul.tree-view li{list-style-type:none}ul.tree-view a{text-decoration:none;color:#000}ul.tree-view a:focus{background-color:var(--dialog-blue);color:var(--button-highlight)}ul.tree-view ul,ul.tree-view li{margin-top:3px}ul.tree-view ul{margin-left:16px;padding-left:16px;border-left:1px dotted #808080}ul.tree-view ul>li{position:relative}ul.tree-view ul>li:before{content:"";display:block;position:absolute;left:-16px;top:6px;width:12px;border-bottom:1px dotted #808080}ul.tree-view ul>li:last-child:after{content:"";display:block;position:absolute;left:-20px;top:7px;bottom:0;width:8px;background:var(--button-highlight)}ul.tree-view details{margin-top:0}ul.tree-view details[open] summary{margin-bottom:0}ul.tree-view ul details>summary:before{margin-left:-22px;position:relative;z-index:1}ul.tree-view details>summary:before{text-align:center;display:block;float:left;content:"+";border:1px solid #808080;width:8px;height:9px;line-height:8px;margin-right:5px;padding-left:1px;background-color:#fff}ul.tree-view details[open]>summary:before{content:"-"}ul.tree-view details>summary::marker,ul.tree-view details>summary::-webkit-details-marker{content:""}pre{display:block;background:var(--button-highlight);box-shadow:var(--border-field);padding:12px 8px;margin:0}code,code *{font-family:monospace}summary:focus{outline:1px dotted #000000}::-webkit-scrollbar{width:16px}::-webkit-scrollbar:horizontal{height:17px}::-webkit-scrollbar-corner{background:var(--button-face)}::-webkit-scrollbar-track{background-image:url(/icon/scrollbar-background.svg)}::-webkit-scrollbar-thumb{background-color:var(--button-face);box-shadow:var(--border-raised-outer),var(--border-raised-inner)}::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:vertical:start:decrement,::-webkit-scrollbar-button:vertical:end:increment{display:block}::-webkit-scrollbar-button:vertical:start{height:17px;background-image:url(/icon/button-up.svg)}::-webkit-scrollbar-button:vertical:end{height:17px;background-image:url(/icon/button-down.svg)}::-webkit-scrollbar-button:horizontal:start{width:16px;background-image:url(/icon/button-left.svg)}::-webkit-scrollbar-button:horizontal:end{width:16px;background-image:url(/icon/button-right.svg)}.window[role=tabpanel]{position:relative;z-index:2}menu[role=tablist]{position:relative;margin:0 0 -2px;text-indent:0;list-style-type:none;display:flex;padding-left:3px}menu[role=tablist]>li{border-top-left-radius:3px;border-top-right-radius:3px;box-shadow:var(--border-tab);z-index:1}menu[role=tablist]>li[aria-selected=true]{padding-bottom:2px;margin-top:-2px;background-color:var(--surface);position:relative;z-index:8;margin-left:-3px}menu[role=tablist]>li>a{display:block;color:#222;margin:6px;text-decoration:none}menu[role=tablist]>li[aria-selected=true]>a:focus{outline:none}menu[role=tablist]>li>a:focus{outline:1px dotted #222}menu[role=tablist].multirows>li{flex-grow:1;text-align:center}.sunken-panel{box-sizing:border-box;border:2px groove transparent;border-image:url(/icon/sunken-panel-border.svg) 2;overflow:auto;background-color:#fff}table{border-collapse:collapse;position:relative;text-align:left;white-space:nowrap;background-color:#fff}table>thead>tr>*{position:sticky;top:0;height:17px;box-shadow:var(--border-raised-outer),var(--border-raised-inner);background:var(--surface);box-sizing:border-box;font-weight:400;padding:0 var(--grouped-element-spacing)}table.interactive>tbody>tr{cursor:pointer}table>tbody>tr.highlighted{color:#fff;background-color:var(--dialog-blue)}table>tbody>tr>*{padding:0 var(--grouped-element-spacing);height:14px}.progress-indicator{height:32px;position:relative;box-shadow:var(--border-sunken-inner);padding:4px;border:none;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}.progress-indicator>.progress-indicator-bar{height:100%;display:block;background-color:var(--dialog-blue)}.progress-indicator.segmented>.progress-indicator-bar{width:100%;background-color:transparent;background-image:linear-gradient(90deg,var(--dialog-blue) 0 16px,transparent 0 2px);background-repeat:repeat;background-size:18px 100%}html,body{margin:0;padding:0;overflow-x:hidden}body{background-color:#000;color:#fff;margin:0}.window-custom{display:flex;flex-direction:column;padding:0;margin:0}.title-bar{background:linear-gradient(90deg,#00007b,#1085d2);padding:5px;display:flex;justify-content:space-between;align-items:center;color:#fff}.title-bar-controls{display:flex}.tab-bar{background-color:silver;padding:5px 0}u{color:#000;padding:5px}.window-body-custom{display:flex;justify-content:space-between;padding:20px;flex-grow:1;background-color:#000;color:#000;margin:0}.controls-column1,.controls-column2{display:flex;flex-direction:column;justify-content:space-between;width:15%}.input-control,.pieces-checkbox{background-color:silver;display:flex;flex-direction:column}.dimension-control{display:flex;height:100%}.footer{padding:0 20px}.welcome-screen{position:absolute;transform:translate(14%,50%);z-index:1000;display:none}#tetris-grid-container{position:relative;width:600px;height:600px;margin:0 auto}#tetris-canvas,#three-container{width:600px;height:600px;border:2px solid rgba(255,255,255,.8)}#three-container{display:none}#toggle-container{margin-bottom:10px}#threed-helper{display:none}@media (max-width: 768px){.title-bar-text{font-size:12px}.title-bar-controls img{width:14px;height:12px}.window-body-custom{flex-direction:column;padding:10px;gap:15px}.controls-column1,.controls-column2{width:100%;order:2}#tetris-grid-container{position:relative;order:1;width:100%;max-width:90vw;height:90vw;max-height:400px;margin:0 auto;display:flex;justify-content:center;align-items:center}#tetris-canvas,#three-container{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;border:1px solid rgba(255,255,255,.8)}.controls-column1,.controls-column2{display:flex;flex-direction:row;justify-content:space-between;gap:10px}.controls-column1>.window,.controls-column2>.window{flex:1;min-width:0}.pieces-checkbox{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px}.pieces-checkbox .field-row{flex-direction:column;align-items:center;text-align:center;margin:0}.pieces-checkbox img{width:25px;height:auto;margin-bottom:2px}.pieces-checkbox label{font-size:9px;line-height:1}.input-control .field-row-stacked{margin-bottom:8px}.input-control label{font-size:10px;margin-bottom:2px}.input-control input[type=range]{width:100%;margin:5px 0}.input-control button{min-width:auto;padding:8px 12px;font-size:10px;margin:2px 0}.input-control select{font-size:10px;padding:4px}.input-control input[type=text]{font-size:16px;padding:8px}.welcome-screen{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:350px;z-index:1000}.welcome-screen .window-body{padding:15px}.welcome-screen p{font-size:11px;line-height:1.4;margin:8px 0}.footer{flex-direction:column;text-align:center;padding:15px 10px;gap:8px}.footer p{margin:0;font-size:11px}.footer .links{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.footer .links a{font-size:10px}button{min-height:40px;touch-action:manipulation}input[type=range]{height:40px;margin:8px 0}input[type=checkbox]+label{min-height:40px;display:flex;align-items:center}input[type=text],input[type=number],select,textarea{font-size:16px}#three-container canvas{width:100%!important;height:100%!important;display:block}#tetris-grid-container:before{content:"";display:block;padding-top:100%}}@media (max-width: 768px) and (orientation: landscape){.window-body-custom{flex-direction:row;gap:10px;padding:8px}.controls-column1,.controls-column2{width:20%;order:initial;flex-direction:column}#tetris-grid-container{width:60%;height:80vh;max-height:300px;order:initial}.pieces-checkbox{grid-template-columns:repeat(2,1fr);gap:4px;padding:4px}.pieces-checkbox img{width:20px}.input-control button{padding:4px 8px;font-size:9px}}@media (max-width: 480px){.window-body-custom{padding:5px;gap:10px}#tetris-grid-container{max-width:95vw;height:95vw;max-height:320px}.pieces-checkbox{grid-template-columns:repeat(3,1fr);gap:6px}.pieces-checkbox img{width:22px}.input-control button{font-size:9px;padding:6px 10px}.footer{padding:10px 5px}.footer .links{gap:10px}}@media (max-width: 360px){.title-bar-text{font-size:10px}.pieces-checkbox{grid-template-columns:repeat(2,1fr)}.controls-column1,.controls-column2{flex-direction:column;gap:5px}.controls-column1>.window,.controls-column2>.window{margin-bottom:8px}}
