*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background-color:#000}.full-set-view{width:100%;height:100%;overflow:hidden;position:relative;cursor:grab}.full-set-view:active{cursor:grabbing}.full-set-view canvas{position:absolute;top:0;left:0;z-index:0;pointer-events:none}.full-set-grid{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:12px;padding:20px;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;scroll-behavior:smooth}.full-set-grid::-webkit-scrollbar{width:8px;height:8px}.full-set-grid::-webkit-scrollbar-track{background:transparent}.full-set-grid::-webkit-scrollbar-thumb{background-color:#fff3;border-radius:4px}.full-set-grid::-webkit-scrollbar-thumb:hover{background-color:#ffffff4d}.full-set-grid{scrollbar-color:rgba(255,255,255,.1) transparent}.full-set-grid:hover{scrollbar-color:rgba(255,255,255,.2) transparent}.config-tile{width:var(--tile-size, 150px);height:calc(var(--tile-size, 150px) * 1.15);flex-shrink:0;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.1);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.config-tile:hover{transform:scale(1.03);box-shadow:0 4px 24px #00000080;border-color:var(--ui-accent-color, #e07020);z-index:10}.config-tile:active{transform:scale(.98)}.tile-canvas-placeholder{flex:1;width:100%;min-height:0;background:transparent}.tile-labels{display:flex;flex-direction:column;gap:calc(var(--tile-size, 150px) * .015);padding:calc(var(--tile-size, 150px) * .04) calc(var(--tile-size, 150px) * .05);background:var(--ui-primary-color, #111118);min-height:calc(var(--tile-size, 150px) * .12)}.tile-formal-name{font-size:var(--label-size, 12px);font-weight:500;color:#ffffffe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-short-name{font-size:calc(var(--label-size, 12px) * .85);color:#ffffff80;font-family:SF Mono,Monaco,Inconsolata,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:root{--ui-primary-color: #111118;--ui-accent-color: #e07020}.app-container{display:flex;flex-direction:column;width:100vw;height:100vh;background:#000;color:#f0f0f0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid #2a2a35;background:var(--ui-primary-color)}.header-left{flex:1;display:flex;align-items:center}.header-center{flex:2;text-align:center}.header-center h3{font-size:18px;font-weight:400;margin:0;letter-spacing:.5px}.header-center h5{font-size:12px;font-weight:400;color:var(--ui-accent-color);margin:6px 0 0;letter-spacing:.3px}.header-center h1{font-size:18px;font-weight:400;margin:0;letter-spacing:.5px}.header-center p{font-size:11px;color:#666;margin:4px 0 0}.menu-button{padding:8px 14px;border:none;border-radius:4px;font-size:18px;cursor:pointer;transition:background .2s;background:#2a2a35;color:#f0f0f0}.menu-button:hover,.menu-button.active{background:#3a3a45}.back-button{margin-left:10px;padding:8px 14px;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:background .2s,color .2s;background:#2a2a35;color:#f0f0f0}.back-button:hover{background:#3a3a45;color:var(--ui-accent-color)}.dropdown-menu{position:absolute;top:100%;left:0;margin-top:4px;background:#1a1a22;border:1px solid #2a2a35;border-radius:6px;min-width:180px;box-shadow:0 4px 12px #0006;z-index:1000;overflow:hidden}.dropdown-item{display:block;width:100%;padding:12px 16px;border:none;background:transparent;color:#f0f0f0;font-size:14px;text-align:left;cursor:pointer;transition:background .15s}.dropdown-item:hover{background:#2a2a35}.dropdown-item:not(:last-child){border-bottom:1px solid #2a2a35}.header-left{position:relative}.header-controls{flex:1;display:flex;justify-content:flex-end;gap:8px}.projection-button{padding:8px 16px;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s;background:#2a2a35;color:#f0f0f0}.projection-button:hover{background:#3a3a45}.party-button{padding:8px 16px;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s;background:#2a2a35;color:#f0f0f0}.party-button:hover{background:#3a3a45}.party-button.active{background:var(--ui-accent-color);color:#fff}.dev-button{padding:8px 16px;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s;background:#2a2a35;color:#f0f0f0}.dev-button:hover{background:#3a3a45}.dev-button.active{background:#4a7c59;color:#fff}.hide-ui-button{padding:8px 16px;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s;background:#2a2a35;color:#f0f0f0}.hide-ui-button:hover{background:#3a3a45}.hide-ui-button.active{background:#5a4a7c;color:#fff}.main-content{display:flex;flex:1;min-height:0;overflow:hidden}.canvas-container{flex:1;position:relative;min-width:0}.canvas-hint{position:absolute;bottom:16px;left:16px;font-size:11px;color:#555}.settings-panel{width:220px;min-width:220px;flex-shrink:0;padding:16px;border-left:1px solid #2a2a35;background:var(--ui-primary-color);overflow-y:auto}.settings-panel.hidden{display:none}.settings-section{margin-bottom:20px}.settings-section.disabled-section{opacity:.4;pointer-events:none}.settings-label{display:block;font-size:14px;color:#888;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.settings-value{float:right;color:#b0c4de;font-weight:500;text-transform:none}.settings-value.harmonic{color:var(--ui-accent-color)}.harmonic-indicator{color:var(--ui-accent-color);font-size:10px}.harmonic-hint{font-size:9px;color:#666;margin-top:4px;text-align:right}.settings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.layer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.layer-header{text-align:center;font-size:11px;font-weight:600;color:#888;padding:4px;text-transform:uppercase;letter-spacing:.5px}.layer-button{padding:8px 4px;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;background:#2a2a35;color:#888;transition:background .2s,color .2s;user-select:none;-webkit-user-select:none}.layer-button:hover{background:#3a3a45;color:#ccc}.layer-button.active{background:var(--ui-accent-color);color:#fff}.layer-button.composite{border:1px dashed #444}.layer-button.composite.active{border-color:var(--ui-accent-color)}.layer-count{margin-top:8px;text-align:center;font-size:12px;color:#666}.formal-name{text-align:center;font-size:13px;color:var(--ui-accent-color);font-style:italic;margin-top:4px}.settings-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.mode-toggle-button{width:24px;height:24px;border:none;border-radius:4px;font-size:16px;font-weight:600;cursor:pointer;background:#2a2a35;color:#888;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:center;line-height:1}.mode-toggle-button:hover{background:#3a3a45;color:#ccc}.wireframe-overlay-buttons{display:flex;gap:4px}.overlay-button{flex:1;padding:6px 0;border:none;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:background .2s;background:#2a2a35;color:#888}.overlay-button:hover{background:#3a3a45;color:#f0f0f0}.overlay-button.active{background:var(--ui-accent-color);color:#fff}.advanced-config{display:flex;flex-direction:column;gap:8px}.config-group{display:flex;flex-direction:column;gap:4px}.config-group-label{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #333;padding-bottom:2px}.config-group-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}.config-group-buttons.two-rows{grid-template-columns:repeat(6,1fr)}.plane-button{padding:4px 2px;border:none;border-radius:3px;font-size:10px;font-weight:500;cursor:pointer;background:#2a2a35;color:#666;transition:background .2s,color .2s;user-select:none;-webkit-user-select:none}.plane-button:hover{background:#3a3a45;color:#ccc}.plane-button.active{background:var(--ui-accent-color);color:#fff}.settings-toggle-row{display:flex;gap:4px}.toggle-button{flex:1;padding:8px 12px;border:none;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;background:#2a2a35;color:#888;transition:background .2s,color .2s}.toggle-button.compact{padding:8px 6px}.toggle-button:hover,.toggle-button.hover-default{background:#3a3a45;color:#ccc}.toggle-button.active{background:var(--ui-accent-color);color:#fff}.toggle-button.disabled{opacity:.4;cursor:not-allowed}.toggle-button.disabled:hover{background:#2a2a35;color:#888}.config-button{padding:6px;border:none;border-radius:3px;font-size:12px;cursor:pointer;background:#2a2a35;color:#888;transition:background .2s}.config-button:hover:not(:disabled){background:#3a3a45}.config-button.active{background:var(--ui-accent-color);color:#fff}.config-button:disabled{opacity:.5;cursor:not-allowed}.settings-slider{width:100%;accent-color:var(--ui-accent-color)}.color-row{display:flex;gap:12px}.color-group{flex:1;position:relative}.color-group span{display:block;font-size:10px;color:#888;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}.color-input{width:100%;height:36px;border-radius:4px;border:2px solid #3a3a45;cursor:pointer;background:transparent;padding:0;transition:border-color .2s}.color-input:hover{border-color:#555}.color-input::-webkit-color-swatch-wrapper{padding:2px}.color-input::-webkit-color-swatch{border:none;border-radius:2px}.color-swatch-button{width:100%;height:36px;border-radius:4px;border:2px solid #3a3a45;cursor:pointer;transition:border-color .2s,transform .1s;padding:0}.color-swatch-button:hover{border-color:#555;transform:scale(1.02)}.color-picker-popover{position:absolute;left:0;right:0;margin-top:8px;z-index:100}.color-picker-popover .react-colorful{width:100%;height:150px}.color-picker-popover .react-colorful__saturation{border-radius:4px 4px 0 0}.color-picker-popover .react-colorful__hue{height:16px;border-radius:0 0 4px 4px}.color-picker-popover .react-colorful__saturation-pointer,.color-picker-popover .react-colorful__hue-pointer{width:16px;height:16px}.hex-input{width:100%;margin-top:8px;padding:8px;border:1px solid #333;border-radius:4px;background:#1a1a2e;color:#f0f0f0;font-family:SF Mono,Monaco,Consolas,monospace;font-size:13px;text-align:center;text-transform:uppercase}.hex-input:focus{outline:none;border-color:#4a9eff}.preset-save-button{width:100%;padding:10px;border:1px dashed #444;border-radius:4px;background:transparent;color:#888;font-size:12px;cursor:pointer;transition:all .2s}.preset-save-button:hover{border-color:#666;color:#ccc;background:#1a1a2e}.preset-list{margin-top:8px;display:flex;flex-direction:column;gap:4px}.preset-item{display:flex;gap:4px}.preset-load-button{flex:1;padding:8px 12px;border:none;border-radius:4px;background:#2a2a35;color:#f0f0f0;font-size:12px;cursor:pointer;text-align:left;transition:background .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-load-button:hover{background:#3a3a45}.preset-delete-button{padding:8px 10px;border:none;border-radius:4px;background:#2a2a35;color:#888;font-size:14px;cursor:pointer;transition:all .2s}.preset-delete-button:hover{background:#4a2a2a;color:#ff6b6b}.settings-divider{height:1px;background:#2a2a35;margin:16px 0}.settings-info{font-size:11px;color:#666}.settings-info p{margin:4px 0}.interactive-slider .slider-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;min-height:24px}.interactive-slider .slider-label-text{font-size:14px;color:#888;text-transform:uppercase;letter-spacing:.5px}.interactive-slider .slider-controls-centered{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.interactive-slider .slider-control-btn{width:24px;height:24px;border:none;border-radius:4px;background:#2a2a35;color:#888;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}.interactive-slider .slider-control-btn:hover:not(:disabled){background:var(--ui-accent-color);color:#ccc}.interactive-slider .slider-control-btn:disabled{opacity:.4;cursor:not-allowed}.interactive-slider .slider-play-btn{width:24px;height:24px;border:none;border-radius:4px;background:#2a2a35;color:#888;font-size:10px;cursor:pointer;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.interactive-slider .slider-play-btn:hover{background:var(--ui-accent-color);color:#ccc}.interactive-slider .slider-play-btn.playing{background:var(--ui-accent-color);color:#fff}.interactive-slider .settings-value{font-size:14px;color:#b0c4de;font-weight:500;min-width:48px;text-align:right}.interactive-slider .clickable-value{cursor:text}.interactive-slider .editable-value{background:transparent;border:none;outline:none;font-size:14px;color:#b0c4de;font-weight:500;min-width:48px;max-width:60px;text-align:right;font-family:inherit;padding:0;margin:0;caret-color:var(--ui-accent-color)}.interactive-slider.disabled-slider{opacity:.4;pointer-events:none}.interactive-slider.disabled-slider .settings-slider{cursor:not-allowed}