#root{width:100vw;height:100vh}body{margin:0}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#282c34;color:#fff;overflow:hidden}.App{display:flex;flex-direction:column;height:100vh}.App-container{display:flex;flex-grow:1;overflow:hidden;position:relative}.controls-panel{width:320px;min-width:300px;background-color:#2c3038;padding:20px;box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column;gap:12px;border-right:1px solid #3a3f4a}.panel-header{display:flex;align-items:center;gap:15px;margin-bottom:-10px}.back-button{background:#4a4f5a;border:none;color:#fff;padding:8px 12px;border-radius:4px;cursor:pointer;font-weight:700;transition:background-color .2s}.back-button:hover{background:#61dafb}.controls-panel hr{border:none;border-top:1px solid #4a4f5a;margin:5px 0}.controls-panel h2{color:#61dafb;margin:0;font-size:1.4em;text-align:left;flex-grow:1}.controls-panel h4{color:#ccc;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #4a4f5a;padding-bottom:5px}.controls-panel form{display:flex;flex-direction:column;gap:15px}.form-group{display:flex;flex-direction:column}.form-group label{margin-bottom:6px;font-size:.95em;color:#e0e0e0}.form-group input,.form-group select{width:100%;padding:10px;border-radius:4px;border:1px solid #4a4f5a;background-color:#20232a;color:#fff;font-size:1em;box-sizing:border-box}.dimension-group{background-color:#00000026;border-radius:6px;padding:15px;border:1px solid #3a3f4a;display:flex;flex-direction:column;gap:15px}.dimension-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.dimension-header label{font-weight:700;color:#e0e0e0;margin-bottom:0}.dimension-input{width:75px;flex-shrink:0;text-align:right;padding:6px 8px}.dimension-slider{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:#4a4f5a;border-radius:5px;outline:none;padding:0;cursor:pointer}.dimension-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#61dafb;border-radius:50%;transition:background-color .2s ease}.dimension-slider::-moz-range-thumb{width:18px;height:18px;background:#61dafb;border-radius:50%;border:none;transition:background-color .2s ease}.dimension-slider:hover::-webkit-slider-thumb{background:#88ecff}.dimension-slider:hover::-moz-range-thumb{background:#88ecff}.button-group{display:flex;flex-wrap:wrap;gap:10px}.button-group button{flex:1 1 auto;margin-top:0}.controls-panel button{padding:12px 20px;font-size:1em;font-weight:700;color:#fff;background-color:#61dafb;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;margin-top:10px}.controls-panel button:hover:not(:disabled){background-color:#4fa8d8}.controls-panel button:disabled{background-color:#555;cursor:not-allowed}.instructions{text-align:center;font-size:.9em;color:#aaa;margin-top:0;padding:5px;background-color:#333842;border-radius:4px}.server-status{margin-top:auto;padding-top:15px;border-top:1px solid #4a4f5a;text-align:center;font-size:.9em;color:#ccc}.viewer-panel{flex-grow:1;background-color:#1e1e1e;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}.viewer-panel canvas{display:block;width:100%!important;height:100%!important}.message-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#282c34d9;padding:20px 30px;border-radius:8px;text-align:center;z-index:10;color:#e0e0e0}.message-overlay.error-message p{color:#ff6b6b;font-weight:700}.selection-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px;box-sizing:border-box}.selection-container h1{color:#61dafb;margin-bottom:40px}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;width:100%;max-width:1000px}.project-card{background:#2c3038;border:1px solid #3a3f4a;border-radius:8px;padding:25px;text-align:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.project-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0003}.project-card h3{margin-top:0;color:#e0e0e0}.project-card p{color:#aaa;font-size:.9em}.select-button{background-color:#61dafb;color:#fff;border:none;padding:10px 20px;border-radius:4px;font-weight:700;margin-top:15px;cursor:pointer}.menu-toggle-button,.menu-overlay{display:none}@media (max-width: 768px){body{overflow-y:hidden}.menu-toggle-button{display:block;position:fixed;top:15px;left:15px;z-index:1002;width:40px;height:40px;background-color:#2c3038;border:1px solid #4a4f5a;border-radius:50%;cursor:pointer;transition:background-color .3s ease}.menu-toggle-button:before,.menu-toggle-button:after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;background-color:#61dafb;transform-origin:center;transition:transform .3s ease,top .3s ease}.menu-toggle-button:before{transform:translate(-50%,-50%) translateY(-6px)}.menu-toggle-button:after{transform:translate(-50%,-50%) translateY(6px)}.menu-open .menu-toggle-button:before{top:50%;transform:translate(-50%,-50%) rotate(45deg)}.menu-open .menu-toggle-button:after{top:50%;transform:translate(-50%,-50%) rotate(-45deg)}.controls-panel{position:fixed;top:0;left:0;height:100vh;z-index:1001;transform:translate(-100%);transition:transform .3s ease-in-out;border-right:1px solid #4a4f5a}.menu-open .controls-panel{transform:translate(0);box-shadow:5px 0 15px #00000040}.menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s}.menu-open .menu-overlay{display:block;opacity:1;visibility:visible}.viewer-panel{width:100%;transition:filter .3s ease-in-out}.menu-open .viewer-panel{filter:brightness(.7)}}