*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#fff;color:#333}body{display:flex;flex-direction:column;overflow:hidden}header{padding:24px 32px;border-bottom:1px solid #e5e5e5;background:linear-gradient(135deg,#fafafa,#fff);flex-shrink:0}header h1{font-size:28px;font-weight:300;letter-spacing:-.5px;margin-bottom:6px;color:#222}header .subtitle{font-size:13px;color:#888;font-weight:300}.main-container{display:grid;grid-template-columns:1fr 340px;flex:1;overflow:hidden;gap:8px;padding:8px}.canvas-wrapper{position:relative;border:1px solid #e0e0e0;border-radius:3px;background:#fafafa;overflow:hidden}#gl-canvas{display:block;width:100%;height:100%}.error-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.error-box{background:#fff;border:2px solid #ef4444;border-radius:8px;padding:20px;max-width:500px;max-height:300px;overflow-y:auto;box-shadow:0 10px 40px #0000004d}.error-box strong{color:#ef4444;display:block;margin-bottom:12px}.error-box pre{font-family:Courier New,monospace;font-size:12px;color:#666;white-space:pre-wrap;word-break:break-word}.control-panel{display:flex;flex-direction:column;gap:6px;overflow-y:auto;width:340px;background:#fbfbfb;border:1px solid #f0f0f0;border-radius:2px;padding:8px 6px;flex-shrink:0}.panel-section{border:1px solid #e0e0e0;border-radius:2px;padding:8px;background:#fff}.section-title{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#888;font-weight:700;margin-bottom:6px}.control-group{margin-bottom:8px}.control-label{font-size:10px;color:#666;display:block;margin-bottom:4px;font-weight:500}.button-group{display:grid;grid-template-columns:1fr 1fr;gap:3px}.button-group.triple{grid-template-columns:1fr 1fr 1fr}.button-group.full{grid-template-columns:1fr}button{padding:6px 8px;background:#f5f5f5;border:1px solid #ccc;border-radius:2px;color:#333;font-size:10px;font-weight:500;cursor:pointer;transition:all .15s ease}button:hover{background:#e8e8e8;border-color:#999}button.active{background:#222;color:#fff;border-color:#222}button.btn{padding:6px 8px}button.btn-full{width:100%}.shader-btn{padding:4px 6px;font-size:9px}.slider-group{margin-bottom:8px}input[type=range]{width:100%;height:3px;border-radius:2px;background:#ddd;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:#222;cursor:pointer}input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#222;cursor:pointer;border:none}.slider-value{display:flex;justify-content:space-between;font-size:9px;color:#999;margin-top:2px}.info-display{font-size:10px;color:#666;background:#f9f9f9;padding:6px;border-radius:2px;border:1px solid #e5e5e5}.info-line{padding:3px 0;font-family:Courier New,monospace}.control-panel::-webkit-scrollbar{width:5px}.control-panel::-webkit-scrollbar-track{background:transparent}.control-panel::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.control-panel::-webkit-scrollbar-thumb:hover{background:#999}@media (max-width: 768px){.main-container{grid-template-columns:1fr}.control-panel{width:100%;height:auto;max-height:200px}}