:root{--color-bg-main: #d0d0d0;--color-bg-window: #e0e0e0;--color-bg-panel: #f0f0f0;--color-bg-code: #f8f8f8;--color-bg-button: #ffcc00;--color-bg-button-hover: #ffdd33;--color-bg-tab: #cccccc;--color-bg-tab-active: #f0f0f0;--color-bg-view: #2d3748;--color-text-dark: #000000;--color-text-light: #ffffff;--color-text-dim: #666666;--color-code-keyword: #0000ff;--color-code-operator: #666666;--color-code-number: #ff6600;--color-code-string: #008800;--color-code-comment: #888888;--color-code-value: #cc0000;--color-border: #888888;--color-border-light: #cccccc;--color-border-dark: #444444;--font-mono: "Monocraft", monospace;--font-ui: "Monocraft", sans-serif;--border-width: 1px;--border-width-thick: 2px;--border-radius: 0px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-ui);background-color:var(--color-bg-main);color:var(--color-text-dark);min-height:100vh;overflow:hidden}.cublica-container{width:100vw;height:100vh;display:flex;flex-direction:column;background-color:var(--color-bg-main);border:var(--border-width) solid var(--color-border-dark);overflow:hidden}.cublica-header{display:flex;align-items:center;background-color:var(--color-bg-window);border-bottom:var(--border-width) solid var(--color-border-dark);height:30px;padding:0 5px}.cublica-logo{background-color:red;color:var(--color-text-light);font-weight:700;padding:2px 10px;font-size:12px;text-align:center;margin-right:auto}.cublica-title{font-weight:700;font-size:14px;color:var(--color-text-dark);padding:0 10px}.cublica-close{font-size:16px;cursor:pointer;padding:0 5px}.cublica-content{display:flex;flex:1;overflow:hidden}.code-panel{width:50%;display:flex;flex-direction:column;border-right:var(--border-width) solid var(--color-border-dark)}.code-tabs{display:flex;background-color:var(--color-bg-window);border-bottom:var(--border-width) solid var(--color-border-dark)}.code-tab{padding:5px 15px;font-size:14px;cursor:pointer;border-right:var(--border-width) solid var(--color-border-dark)}.code-tab.active{background-color:var(--color-bg-tab-active);font-weight:700}.code-tab-placeholder{padding:5px 15px;font-size:14px;color:var(--color-text-dim);margin-left:auto;text-align:center;background-color:var(--color-bg-tab);border-left:var(--border-width) solid var(--color-border-dark)}.code-editor-container{position:relative;flex:1;background-color:var(--color-bg-code);overflow:hidden;border-bottom:var(--border-width) solid var(--color-border-dark)}.code-textarea{width:100%;height:100%;padding:10px;font-family:var(--font-mono);font-size:16px;line-height:1.5;color:var(--color-text-dark);background-color:var(--color-bg-code);border:none;resize:none;outline:none;-moz-tab-size:2;tab-size:2}.code-mirror-wrapper{height:100%;font-family:var(--font-mono)}.code-mirror-wrapper .cm-editor{height:100%;font-family:var(--font-mono)!important}.code-mirror-wrapper .cm-scroller{font-family:var(--font-mono);line-height:1.5}.code-mirror-wrapper .cm-content{font-family:var(--font-mono)}.code-stats{display:flex;justify-content:space-between;padding:5px 10px;background-color:var(--color-bg-window);border-top:var(--border-width) solid var(--color-border-dark);font-size:12px}.code-run-button{background-color:var(--color-bg-button);text-align:center;padding:8px;font-weight:700;cursor:pointer;border-top:var(--border-width) solid var(--color-border-dark);border-bottom:var(--border-width) solid var(--color-border-dark)}.code-run-button:hover{background-color:var(--color-bg-button-hover)}.view-panel{width:50%;display:flex;flex-direction:column;overflow:hidden}.view-top-section{display:flex;flex-direction:column;height:50%;border-bottom:var(--border-width) solid var(--color-border-dark)}.view-top-content{flex:1;overflow:hidden;position:relative}.view-bottom-section{display:flex;flex-direction:column;height:50%;position:relative}.view-bottom-content{flex:1;overflow:hidden;position:relative}.view-section-header{background-color:var(--color-bg-window);padding:5px 15px;font-size:14px;font-weight:700;border-bottom:var(--border-width) solid var(--color-border-dark)}.cube-view-top,.cube-view-bottom{height:calc(100% - 30px);position:relative;background-color:var(--color-bg-view)}.cube-canvas{width:100%;height:100%;position:relative;overflow:hidden}.cube-canvas canvas{width:100%!important;height:100%!important;display:block}.docs-container-top{padding:20px;background-color:var(--color-bg-panel);height:100%;overflow-y:auto}.docs-container-top h2{margin-bottom:15px;font-size:18px;border-bottom:var(--border-width) solid var(--color-border);padding-bottom:5px}.docs-container-top h3{margin:15px 0 5px;font-size:16px}.docs-container-top p{font-size:14px;line-height:1.5;margin-bottom:10px}.view-tabs{display:flex;background-color:var(--color-bg-window);border-bottom:var(--border-width) solid var(--color-border-dark)}.view-tab{padding:5px 15px;font-size:14px;cursor:pointer;border-right:var(--border-width) solid var(--color-border-dark)}.view-tab.active{background-color:var(--color-bg-tab-active);font-weight:700}.view-nav{margin-left:auto;display:flex}.view-nav button{background:none;border:none;padding:5px 10px;cursor:pointer;font-size:12px;border-left:var(--border-width) solid var(--color-border-dark)}.view-nav button:hover{background-color:var(--color-bg-tab)}.view-container{flex:1;display:flex;flex-direction:row}.cube-view{flex:1;position:relative;border-bottom:var(--border-width) solid var(--color-border-dark);border-right:var(--border-width) solid var(--color-border-dark)}.cube-view:last-child{border-right:none}.cube-canvas{width:100%;height:100%;position:relative;background-color:var(--color-bg-view)}canvas{width:100%!important;height:100%!important;display:block}.axis-label{position:absolute;color:var(--color-text-light);font-size:12px;font-weight:700;z-index:10}.x-axis{bottom:10px;left:10px;color:red}.y-axis{top:10px;left:10px;color:#0f0}.z-axis{bottom:10px;right:10px;color:#08f}.grid-coordinates{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.coordinate{position:absolute;color:#ffffff80;font-size:10px;text-align:center}.x-coordinate{bottom:5px}.y-coordinate{left:5px}.z-coordinate{top:5px}.cube-title{padding:5px 10px;font-size:14px;font-weight:700;background-color:var(--color-bg-window);border-bottom:var(--border-width) solid var(--color-border-dark)}.view-controls{position:absolute;bottom:10px;right:10px;display:flex;gap:5px}.view-control{width:24px;height:24px;background-color:#fff3;border:var(--border-width) solid rgba(255,255,255,.5);color:var(--color-text-light);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;border-radius:3px}.view-control:hover{background-color:#ffffff4d}.view-mode-controls{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:3px}.view-mode-button{width:40px;height:24px;background-color:#fff3;border:var(--border-width) solid rgba(255,255,255,.5);color:var(--color-text-light);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;border-radius:3px}.view-mode-button:hover{background-color:#ffffff4d}.view-mode-button.active{background-color:#fff6;border-color:#fffc;font-weight:700}.voxel-count{position:absolute;bottom:10px;left:10px;background-color:#00000080;color:var(--color-text-light);padding:5px 8px;font-size:12px;border-radius:3px}.cublica-footer{display:flex;justify-content:space-between;align-items:center;background-color:var(--color-bg-window);border-top:var(--border-width) solid var(--color-border-dark);height:30px;padding:0 10px}.settings-panel{padding:20px;background-color:var(--color-bg-panel);height:100%;overflow-y:auto}.settings-panel h3{margin-bottom:10px;font-size:16px}.settings-panel h4{margin:15px 0 5px;font-size:14px}.puzzle-selector{width:100%;padding:8px;margin-bottom:15px;border:var(--border-width) solid var(--color-border);background-color:var(--color-bg-window);font-family:var(--font-ui)}.puzzle-description{margin-bottom:20px;border:var(--border-width) solid var(--color-border-light);padding:10px;background-color:var(--color-bg-window)}.puzzle-description p{font-size:14px;line-height:1.4;margin-top:5px}.action-buttons{display:flex;gap:10px;margin-top:20px}.action-buttons button{padding:8px 15px;background-color:var(--color-bg-button);border:var(--border-width) solid var(--color-border-dark);cursor:pointer;font-weight:700}.action-buttons button:hover{background-color:var(--color-bg-button-hover)}.docs-container{padding:20px;background-color:var(--color-bg-panel);height:100%;overflow-y:auto}.docs-container h2{margin-bottom:15px;font-size:18px;border-bottom:var(--border-width) solid var(--color-border);padding-bottom:5px}.docs-container h3{margin:15px 0 5px;font-size:16px}.docs-container p{font-size:14px;line-height:1.5;margin-bottom:10px}.docs-code{background-color:var(--color-bg-code);border:var(--border-width) solid var(--color-border-light);padding:10px;font-family:var(--font-mono);font-size:14px;margin:10px 0;white-space:pre-wrap;overflow-x:auto}.color-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}.color-list li{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.color-swatch{display:inline-block;width:1rem;height:1rem;border-radius:.25rem;box-shadow:inset 0 0 0 1px #0000001a}.color-strip{display:flex;width:100%;height:24px;border-top:1px solid #ddd;overflow:hidden;position:relative;z-index:10}.color-block{flex:1;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:transform .1s ease;min-width:20px}.color-block:hover{transform:scaleY(1.2);z-index:20}.color-label{color:#fff;font-size:.7rem;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.7);-webkit-user-select:none;user-select:none}.code-editor-container{display:flex;flex-direction:column;height:100%;position:relative;border:1px solid #ddd;border-radius:4px;overflow:hidden}.code-mirror-wrapper{flex:1;overflow:hidden}.color-strip-container{width:100%;height:24px;position:relative;z-index:5;background-color:#1e1e1e}.auto-run-container{display:flex;align-items:center;gap:10px;font-size:12px}.toggle-switch{width:36px;height:18px;background-color:var(--color-bg-tab);border:var(--border-width) solid var(--color-border);border-radius:10px;position:relative;cursor:pointer}.toggle-switch.active{background-color:var(--color-bg-button)}.toggle-switch-handle{width:14px;height:14px;background-color:var(--color-bg-window);border:var(--border-width) solid var(--color-border);border-radius:50%;position:absolute;top:1px;left:1px;transition:transform .2s}.toggle-switch.active .toggle-switch-handle{transform:translate(18px)}.footer-status{font-size:12px;color:var(--color-text-dim)}