:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}body{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;overflow:hidden}.app-container{width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.mobile-only{display:none!important}.desktop-only{display:block!important}.mobile-only-text{display:none}.desktop-only-text{display:inline}.ui-panel{width:450px;height:100vh;background:linear-gradient(135deg,#f8f9fa,#fff);border-right:1px solid rgba(0,0,0,.1);box-shadow:4px 0 20px #00000014;display:flex;flex-direction:column;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:10;position:relative;flex-shrink:0}.ui-panel.dark{background:linear-gradient(135deg,#1a1a1f,#2d2d35);border-right-color:#ffffff1a;box-shadow:4px 0 20px #0006}.ui-panel.collapsed{width:0;min-width:0;padding:0;border-right-width:0;opacity:0;pointer-events:none}.ui-panel.collapsed *{opacity:0;pointer-events:none}.panel-main-header{padding:2rem 2rem 1.5rem;border-bottom:2px solid rgba(0,0,0,.08);background:linear-gradient(180deg,rgba(255,255,255,.8) 0%,transparent 100%);flex-shrink:0;transition:all .3s ease}.ui-panel.dark .panel-main-header{border-bottom-color:#ffffff1a;background:linear-gradient(180deg,rgba(30,30,35,.8) 0%,transparent 100%)}.header-top{display:flex;justify-content:space-between;align-items:flex-start}.logo-section{display:flex;align-items:center;gap:1rem;flex:1}.logo-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:14px;color:#fff;box-shadow:0 4px 16px #667eea4d;transition:transform .3s ease;flex-shrink:0}.logo-icon:hover{transform:rotate(180deg)}.logo-text{min-width:0;flex:1}.logo-text h1{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;margin:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tagline{color:#7f8c8d;font-size:.75rem;font-weight:500;margin:0;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}.ui-panel.dark .tagline{color:#a0a8b0}.panel-close-btn{width:40px;height:40px;display:none;align-items:center;justify-content:center;background:#667eea1a;border:1px solid rgba(102,126,234,.2);border-radius:10px;cursor:pointer;transition:all .3s ease;flex-shrink:0;margin-left:1rem}.panel-close-btn:hover{background:#667eea33;transform:scale(1.05)}.panel-close-btn:active{transform:scale(.95)}.panel-close-btn svg{stroke:#667eea}.ui-panel.dark .panel-close-btn{background:#7c8ef51f;border-color:#7c8ef533}.ui-panel.dark .panel-close-btn svg{stroke:#7c8ef5}.panel-controls{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 2rem 2rem;transition:opacity .3s ease}.panel-controls::-webkit-scrollbar{width:8px}.panel-controls::-webkit-scrollbar-track{background:transparent;margin:12px 0}.panel-controls::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:10px;border:2px solid transparent;background-clip:padding-box}.panel-controls::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#7c8ef5,#8c5ab8)}.panel-controls{scrollbar-width:thin;scrollbar-color:#667eea transparent}.desktop-toggle-btn{position:absolute;top:50%;right:-20px;transform:translateY(-50%);z-index:60;width:40px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:0 12px 12px 0;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:4px 0 16px #667eea66;transition:all .3s cubic-bezier(.4,0,.2,1);color:#fff;opacity:1;pointer-events:all}.desktop-toggle-btn:hover{right:-22px;width:44px;box-shadow:6px 0 24px #667eea99}.desktop-toggle-btn:active{transform:translateY(-50%) scale(.95)}.desktop-toggle-btn svg{width:20px;height:20px;transition:transform .3s ease}.ui-panel.collapsed .desktop-toggle-btn{right:auto;left:-20px;border-radius:12px 0 0 12px;opacity:1;pointer-events:all}.ui-panel.collapsed .desktop-toggle-btn:hover{left:-22px;right:auto}.ui-panel.collapsed .desktop-toggle-btn svg{transform:rotate(180deg)}.panel-toggle-btn{position:fixed;top:1.5rem;right:1.5rem;z-index:250;width:48px;height:48px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 16px #667eea66;transition:all .3s cubic-bezier(.4,0,.2,1);color:#fff}.panel-toggle-btn:hover{transform:scale(1.05);box-shadow:0 6px 24px #667eea99}.panel-toggle-btn:active{transform:scale(.95)}.panel-toggle-btn svg{width:24px;height:24px;stroke:#fff;transition:transform .3s ease}.viewer-panel{flex:1;height:100vh;position:relative;background:#000;display:flex;align-items:center;justify-content:center;transition:all .4s cubic-bezier(.4,0,.2,1)}.viewer-info-panel{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);z-index:50;background:#000000d9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;padding:1rem 2rem;border-radius:50px;box-shadow:0 10px 40px #0006,0 0 0 1px #ffffff26;display:flex;align-items:center;gap:1.5rem;animation:slideUp .6s cubic-bezier(.16,1,.3,1) .3s both}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%)}}.viewer-info-panel:hover{transform:translate(-50%,-4px);box-shadow:0 14px 50px #00000080,0 0 0 1px #fff3}.info-item{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.9rem}.info-icon{font-size:1.2rem}.info-divider{width:1px;height:24px;background:#ffffff4d}.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(0,0,0,.06)}.ui-panel.dark .quick-actions{border-bottom-color:#ffffff1a}.quick-action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:linear-gradient(135deg,#667eea14,#764ba214);border:1px solid rgba(102,126,234,.15);border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.ui-panel.dark .quick-action-btn{background:linear-gradient(135deg,#7c8ef51f,#9d6bc81f);border-color:#7c8ef533}.quick-action-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px #667eea33;border-color:#667eea4d}.action-icon{font-size:1.5rem;transition:transform .3s ease}.quick-action-btn:hover .action-icon{transform:scale(1.15)}.action-label{font-size:.75rem;font-weight:600;color:#34495e;text-transform:uppercase;letter-spacing:.5px}.ui-panel.dark .action-label{color:#d0d4d8}@media(min-width:769px){.desktop-toggle-btn{display:flex}.panel-toggle-btn.mobile-only{display:none!important}}@media(max-width:1024px){.ui-panel{width:380px}}@media(max-width:768px){.mobile-only{display:flex!important}.desktop-only{display:none!important}.mobile-only-text{display:inline}.desktop-only-text{display:none}.desktop-toggle-btn{display:none!important}.app-container{flex-direction:column}.ui-panel{position:fixed;top:0;left:0;width:100%;max-width:100%;height:100vh;z-index:200;transform:translate(-100%);box-shadow:4px 0 30px #0003}.ui-panel.open{transform:translate(0);opacity:1}.ui-panel.open *{opacity:1;pointer-events:all}.ui-panel.collapsed{transform:translate(-100%)}.viewer-panel{width:100%;height:100vh}.panel-toggle-btn,.panel-close-btn.mobile-only{display:flex}.panel-main-header{padding:1.5rem 1.5rem 1rem}.panel-controls{padding:0 1.5rem 1.5rem}.logo-icon{width:42px;height:42px}.logo-icon svg{display:none}.logo-text h1{font-size:1.25rem}.tagline{font-size:.7rem}.quick-actions{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem;padding-bottom:1rem}.quick-action-btn{padding:.85rem .5rem;min-height:56px}.action-icon{font-size:1.3rem}.action-label{font-size:.7rem}.viewer-info-panel{bottom:1rem;padding:.75rem 1.5rem;font-size:.85rem;gap:1rem}.info-item{font-size:.8rem;gap:.5rem}.info-icon{font-size:1.1rem}}@media(max-width:480px){.panel-main-header{padding:1.25rem}.panel-controls{padding:0 1.25rem 1.25rem}.logo-section{gap:.75rem}.logo-icon{width:38px;height:38px}.logo-icon svg{width:24px;height:24px;display:none}.logo-text h1{font-size:1.1rem}.tagline{font-size:.65rem}.panel-close-btn{width:36px;height:36px}.panel-close-btn svg{width:20px;height:20px}.quick-actions{gap:.4rem}.quick-action-btn{padding:.75rem .4rem;min-height:52px}.action-icon{font-size:1.2rem}.action-label{font-size:.65rem}.viewer-info-panel{bottom:.75rem;padding:.65rem 1.25rem;font-size:.75rem;gap:.75rem}.info-item{font-size:.75rem;gap:.4rem}.info-icon{font-size:1rem}.info-divider{height:20px}}@media(max-width:1024px)and (orientation:landscape){.ui-panel{width:360px}}@media(max-width:768px)and (orientation:landscape){.ui-panel{width:320px;max-width:320px}.viewer-info-panel{bottom:.5rem;padding:.5rem 1rem;font-size:.7rem}.info-item{font-size:.7rem}}@media(hover:none)and (pointer:coarse){.panel-toggle-btn{min-width:48px;min-height:48px}.panel-close-btn{min-width:44px;min-height:44px}.quick-action-btn{min-height:56px}.desktop-toggle-btn{width:44px;height:90px}.panel-toggle-btn:active,.panel-close-btn:active{transform:scale(.92)}.quick-action-btn:active{transform:scale(.96)}.desktop-toggle-btn:active{transform:translateY(-50%) scale(.92)}}@media(max-width:768px){.ui-panel.open:before{content:"";position:fixed;top:0;left:100%;width:100vw;height:100vh;background:#00000080;z-index:-1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.controls-grid{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.control-group{background:linear-gradient(135deg,#fffffff2,#f8f9faf2);border-radius:16px;border:1px solid rgba(0,0,0,.06);transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.ui-panel.dark .control-group{background:linear-gradient(135deg,#2d2d37f2,#23232df2);border-color:#ffffff14}.control-group:hover{border-color:#667eea33;box-shadow:0 4px 16px #667eea1a}.ui-panel.dark .control-group:hover{border-color:#7c8ef54d;box-shadow:0 4px 16px #7c8ef526}.control-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.control-header:hover{background:#667eea08}.ui-panel.dark .control-header:hover{background:#7c8ef514}.control-header:active{transform:scale(.98)}.control-label{display:flex;align-items:center;gap:1rem;flex:1;min-width:0}.label-icon{font-size:1.75rem;transition:all .3s cubic-bezier(.34,1.56,.64,1);filter:grayscale(.2);flex-shrink:0}.ui-panel.dark .label-icon{filter:grayscale(0) brightness(1.1)}.control-group:hover .label-icon{transform:scale(1.1) rotate(5deg);filter:grayscale(0)}.label-content{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1}.label-text{font-weight:700;font-size:1.05rem;color:#2c3e50;letter-spacing:-.3px;transition:color .3s ease}.ui-panel.dark .label-text{color:#e8eaed}.label-description{font-size:.75rem;color:#7f8c8d;font-weight:500;transition:color .3s ease}.ui-panel.dark .label-description{color:#a0a8b0}.expand-btn{background:none;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .3s ease;color:#7f8c8d;flex-shrink:0}.ui-panel.dark .expand-btn{color:#a0a8b0}.expand-btn:hover{background:#667eea1a;color:#667eea}.ui-panel.dark .expand-btn:hover{background:#7c8ef526;color:#7c8ef5}.expand-btn svg{transition:transform .3s cubic-bezier(.4,0,.2,1)}.expand-btn svg.rotated{transform:rotate(180deg)}.control-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1);padding:0 1.25rem}.control-group.expanded .control-content{max-height:1200px;padding:0 1.25rem 1.25rem}.section-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;font-size:.85rem;font-weight:600;color:#34495e;text-transform:uppercase;letter-spacing:.5px;transition:color .3s ease}.ui-panel.dark .section-label{color:#d0d4d8}.color-picker-section{margin-bottom:1.5rem}.color-actions{display:flex;gap:.5rem;align-items:center}.color-mode-btn{background:#667eea1a;border:1px solid rgba(102,126,234,.2);color:#667eea;padding:.35rem .65rem;border-radius:6px;cursor:pointer;font-size:.95rem;transition:all .2s ease}.color-mode-btn:hover{background:#667eea33;transform:scale(1.05)}.color-mode-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 3px 10px #667eea66;animation:pulse-active 1.5s ease-in-out infinite}@keyframes pulse-active{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.copy-color-btn{background:#667eea1a;border:1px solid rgba(102,126,234,.2);color:#667eea;padding:.35rem .65rem;border-radius:6px;cursor:pointer;font-size:.75rem;transition:all .2s ease}.copy-color-btn:hover{background:#667eea33;transform:scale(1.05)}.copy-color-btn:active{transform:scale(.95)}.advanced-color-picker{margin-bottom:1rem;padding:1.5rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border:2px dashed rgba(102,126,234,.3);border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:.75rem;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.color-wheel-input{width:100%;height:150px;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000001a,inset 0 2px 8px #0000001a}.color-wheel-input:hover{transform:scale(1.02);box-shadow:0 6px 20px #667eea33,inset 0 2px 8px #0000001a}.picker-label{font-size:.75rem;font-weight:600;color:#667eea;text-transform:uppercase;letter-spacing:.5px}.color-picker-wrapper{position:relative;margin-bottom:1rem}.color-input{position:absolute;opacity:0;width:100%;height:70px;cursor:pointer}.color-preview{height:70px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 16px #00000026,inset 0 1px #fff6;position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.5)}.color-preview:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .5s,height .5s}.color-preview:hover:before{width:250px;height:250px}.color-preview:hover{transform:scale(1.03);box-shadow:0 12px 32px #00000040,inset 0 1px #fff6,0 0 0 3px #667eea4d}.color-hex{font-family:SF Mono,Monaco,Courier New,monospace;font-weight:700;font-size:1rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5),0 0 12px rgba(0,0,0,.3);letter-spacing:2px;position:relative;z-index:1;text-transform:uppercase;background:#00000026;padding:.4rem 1rem;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.manual-color-input{margin-bottom:1rem}.color-text-input{width:100%;padding:.85rem 1rem;border:2px solid rgba(102,126,234,.2);border-radius:10px;font-family:SF Mono,Monaco,Courier New,monospace;font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#2c3e50;background:#fffc;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none}.ui-panel.dark .color-text-input{background:#2d2d37cc;border-color:#7c8ef540;color:#e8eaed}.color-text-input:focus{border-color:#667eea;background:#fff;box-shadow:0 0 0 4px #667eea1a,0 4px 12px #667eea26;transform:translateY(-2px)}.ui-panel.dark .color-text-input:focus{border-color:#7c8ef5;background:#2d2d37;box-shadow:0 0 0 4px #7c8ef526,0 4px 12px #7c8ef533}.color-text-input:hover:not(:focus){border-color:#667eea59;background:#fffffff2}.ui-panel.dark .color-text-input:hover:not(:focus){border-color:#7c8ef566;background:#2d2d37f2}.color-text-input::placeholder{color:#bdc3c7;text-transform:none;letter-spacing:normal}.ui-panel.dark .color-text-input::placeholder{color:#6c7278}.input-helper{display:block;font-size:.7rem;color:#95a5a6;margin-top:.5rem;font-weight:500;letter-spacing:.3px;transition:color .3s ease}.ui-panel.dark .input-helper{color:#8c9298}.color-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.preset-color{width:100%;aspect-ratio:1;border-radius:8px;border:2px solid rgba(0,0,0,.1);cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.preset-color:before{content:"";position:absolute;inset:0;background:#ffffff4d;opacity:0;transition:opacity .3s}.preset-color:hover:before{opacity:1}.preset-color:hover{transform:scale(1.15);box-shadow:0 4px 12px #0003;border-color:#667eea80;z-index:1}.preset-color.active{border-color:#667eea;border-width:3px;box-shadow:0 0 0 2px #667eea4d}.preset-color:active{transform:scale(1.05)}.material-properties{border-top:1px solid rgba(0,0,0,.08);padding-top:1.5rem;margin-top:1.5rem;transition:border-color .3s ease}.ui-panel.dark .material-properties{border-top-color:#ffffff1a}.slider-section{margin-bottom:1.5rem}.slider-section:last-child{margin-bottom:0}.slider-wrapper{position:relative}.slider-value{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:700;min-width:50px;text-align:center;box-shadow:0 3px 10px #667eea59;transition:all .3s ease}.section-label:hover .slider-value{transform:scale(1.08);box-shadow:0 4px 14px #667eea73}.slider{-webkit-appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(90deg,#e6e6e6,#667eea33,#667eeacc);outline:none;transition:all .3s ease;cursor:pointer;margin:1rem 0 .5rem}.slider:hover{background:linear-gradient(90deg,#e6e6e6,#667eea59,#667eea)}.roughness-slider{background:linear-gradient(90deg,#e6e6e6,#ff8c4233,#ff8c42cc)}.roughness-slider:hover{background:linear-gradient(90deg,#e6e6e6,#ff8c4259,#ff8c42)}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;box-shadow:0 4px 14px #667eea80,0 0 0 4px #ffffffe6,0 0 0 5px #667eea33;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.roughness-slider::-webkit-slider-thumb{background:linear-gradient(135deg,#ff8c42,#ff6b42);box-shadow:0 4px 14px #ff8c4280,0 0 0 4px #ffffffe6,0 0 0 5px #ff8c4233}.slider::-webkit-slider-thumb:hover{transform:scale(1.25);box-shadow:0 6px 20px #667eea99,0 0 0 5px #fffffff2,0 0 0 7px #667eea4d}.roughness-slider::-webkit-slider-thumb:hover{box-shadow:0 6px 20px #ff8c4299,0 0 0 5px #fffffff2,0 0 0 7px #ff8c424d}.slider::-webkit-slider-thumb:active{transform:scale(1.15)}.slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;border:none;box-shadow:0 4px 14px #667eea80,0 0 0 4px #ffffffe6,0 0 0 5px #667eea33;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.roughness-slider::-moz-range-thumb{background:linear-gradient(135deg,#ff8c42,#ff6b42);box-shadow:0 4px 14px #ff8c4280,0 0 0 4px #ffffffe6,0 0 0 5px #ff8c4233}.slider::-moz-range-thumb:hover{transform:scale(1.25);box-shadow:0 6px 20px #667eea99,0 0 0 5px #fffffff2,0 0 0 7px #667eea4d}.roughness-slider::-moz-range-thumb:hover{box-shadow:0 6px 20px #ff8c4299,0 0 0 5px #fffffff2,0 0 0 7px #ff8c424d}.slider-labels{display:flex;justify-content:space-between;font-size:.7rem;color:#95a5a6;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem}.tips-section{margin-top:1.5rem}.tip-card{display:flex;align-items:flex-start;gap:1rem;padding:1rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-left:3px solid #667eea;border-radius:10px;transition:all .3s ease}.ui-panel.dark .tip-card{background:linear-gradient(135deg,#7c8ef514,#9d6bc814);border-left-color:#7c8ef5}.tip-icon{font-size:1.5rem;flex-shrink:0}.tip-content{font-size:.85rem;color:#34495e;line-height:1.5;transition:color .3s ease}.ui-panel.dark .tip-content{color:#d0d4d8}.tip-content strong{color:#667eea;font-weight:700;transition:color .3s ease}.ui-panel.dark .tip-content strong{color:#7c8ef5}.toast-notification{position:fixed;bottom:6rem;left:50%;transform:translate(-50%);z-index:200;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem 1.75rem;border-radius:50px;box-shadow:0 10px 40px #667eea66;display:flex;align-items:center;gap:.75rem;font-weight:600;font-size:.95rem;animation:toastSlideIn .3s cubic-bezier(.16,1,.3,1)}.toast-notification.dark{background:linear-gradient(135deg,#7c8ef5,#9d6bc8);box-shadow:0 10px 40px #7c8ef580,0 0 20px #7c8ef54d}@keyframes toastSlideIn{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.toast-icon{font-size:1.3rem;animation:checkmark .5s ease}@keyframes checkmark{0%{transform:scale(0) rotate(0)}50%{transform:scale(1.2) rotate(180deg)}to{transform:scale(1) rotate(360deg)}}@media(max-width:768px){.controls-grid{gap:.85rem}.control-header{padding:1rem}.label-icon{font-size:1.5rem}.label-text{font-size:.95rem}.label-description{font-size:.7rem}.expand-btn{padding:.5rem}.control-content{padding:0 1rem}.control-group.expanded .control-content{max-height:1500px;padding:0 1rem 1rem}.color-picker-section{margin-bottom:1.25rem}.section-label{font-size:.8rem;margin-bottom:.65rem}.color-actions{gap:.45rem}.color-mode-btn,.copy-color-btn{padding:.4rem .7rem;font-size:.85rem;min-width:38px;min-height:38px}.advanced-color-picker{padding:1.25rem}.color-wheel-input{height:120px}.picker-label{font-size:.7rem}.color-preview{height:60px}.color-hex{font-size:.85rem;padding:.3rem .75rem}.color-text-input{padding:.75rem .9rem;font-size:.9rem}.input-helper{font-size:.68rem}.color-presets{gap:.45rem}.preset-color{min-width:44px;min-height:44px}.material-properties{padding-top:1.25rem;margin-top:1.25rem}.slider-section{margin-bottom:1.25rem}.slider-value{font-size:.75rem;padding:.22rem .65rem;min-width:45px}.slider{height:10px;margin:.85rem 0 .45rem}.slider::-webkit-slider-thumb{width:26px;height:26px}.slider::-moz-range-thumb{width:26px;height:26px}.slider-labels{font-size:.68rem;margin-top:.45rem}.tips-section{margin-top:1.25rem}.tip-card{padding:.85rem}.tip-icon{font-size:1.35rem}.tip-content{font-size:.8rem}.toast-notification{bottom:5.5rem;padding:.9rem 1.5rem;font-size:.9rem}.toast-icon{font-size:1.2rem}}@media(max-width:480px){.controls-grid{gap:.75rem}.control-group{border-radius:14px}.control-header{padding:.85rem}.label-icon{font-size:1.4rem}.label-content{gap:.2rem}.label-text{font-size:.9rem}.label-description{font-size:.68rem}.expand-btn{padding:.4rem}.expand-btn svg{width:18px;height:18px}.control-content{padding:0 .85rem}.control-group.expanded .control-content{padding:0 .85rem .85rem}.color-picker-section{margin-bottom:1rem}.section-label{font-size:.75rem;margin-bottom:.6rem}.color-actions{gap:.4rem}.color-mode-btn,.copy-color-btn{padding:.35rem .6rem;font-size:.8rem;border-radius:5px}.advanced-color-picker{padding:1rem;margin-bottom:.85rem}.color-wheel-input{height:100px;border-radius:8px}.picker-label{font-size:.68rem}.color-picker-wrapper{margin-bottom:.85rem}.color-preview{height:55px;border-radius:10px}.color-hex{font-size:.8rem;padding:.25rem .65rem;letter-spacing:1.5px}.manual-color-input{margin-bottom:.85rem}.color-text-input{padding:.7rem .85rem;font-size:.85rem;border-radius:9px}.input-helper{font-size:.65rem;margin-top:.4rem}.color-presets{grid-template-columns:repeat(5,1fr);gap:.4rem}.preset-color{border-radius:7px}.material-properties{padding-top:1rem;margin-top:1rem}.slider-section{margin-bottom:1rem}.slider-value{font-size:.72rem;padding:.2rem .6rem;min-width:42px}.slider{height:12px;border-radius:6px;margin:.75rem 0 .4rem}.slider::-webkit-slider-thumb{width:28px;height:28px}.slider::-moz-range-thumb{width:28px;height:28px}.slider-labels{font-size:.65rem;margin-top:.4rem}.tips-section{margin-top:1rem}.tip-card{padding:.75rem;border-radius:8px}.tip-icon{font-size:1.25rem}.tip-content{font-size:.75rem;line-height:1.45}.toast-notification{bottom:4.5rem;padding:.75rem 1.25rem;font-size:.85rem;border-radius:40px}.toast-icon{font-size:1.15rem}}@media(hover:none)and (pointer:coarse){.control-header{min-height:60px;-webkit-tap-highlight-color:transparent}.expand-btn,.color-mode-btn,.copy-color-btn{min-width:44px;min-height:44px}.preset-color{min-width:48px;min-height:48px}.slider{height:14px}.slider::-webkit-slider-thumb{width:32px;height:32px}.slider::-moz-range-thumb{width:32px;height:32px}.color-preview:hover:before,.preset-color:hover:before{opacity:0}.control-header:active{background:#667eea14}.preset-color:active{transform:scale(.9)}.color-mode-btn:active,.copy-color-btn:active{transform:scale(.92)}}.export-model-section{margin-bottom:1.5rem}.export-model-btn{width:100%;display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;box-shadow:0 6px 20px #667eea59,0 0 0 1px #ffffff1a inset}.export-model-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff26;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.export-model-btn:hover:before{width:400px;height:400px}.export-model-btn:hover{transform:translateY(-3px);box-shadow:0 10px 32px #667eea73,0 0 0 1px #fff3 inset}.export-model-btn:active{transform:translateY(-1px);box-shadow:0 4px 16px #667eea4d,0 0 0 1px #ffffff1a inset}.export-model-btn:disabled{cursor:not-allowed;opacity:.7;transform:none}.export-model-btn.exporting{background:linear-gradient(135deg,#95a5a6,#7f8c8d);animation:pulse-export 1.5s ease-in-out infinite}@keyframes pulse-export{0%,to{box-shadow:0 6px 20px #95a5a659,0 0 0 1px #ffffff1a inset}50%{box-shadow:0 8px 28px #95a5a680,0 0 0 1px #fff3 inset}}.export-icon{font-size:2.5rem;flex-shrink:0;position:relative;z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.export-model-btn.exporting .export-icon{animation:rotate-export 2s linear infinite}@keyframes rotate-export{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.export-content{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;position:relative;z-index:1}.export-label{font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:-.3px;text-shadow:0 2px 8px rgba(0,0,0,.15)}.export-description{font-size:.8rem;color:#ffffffd9;font-weight:500;letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,0,.1)}.ui-panel.dark .export-model-btn{background:linear-gradient(135deg,#7c8ef5,#9d6bc8);box-shadow:0 6px 20px #7c8ef566,0 0 0 1px #ffffff26 inset}.ui-panel.dark .export-model-btn:hover{box-shadow:0 10px 32px #7c8ef58c,0 0 0 1px #ffffff40 inset}.ui-panel.dark .export-model-btn.exporting{background:linear-gradient(135deg,#a8b0b8,#909aa4)}.toast-notification.info{background:linear-gradient(135deg,#3498db,#2980b9)}.toast-notification.info.dark{background:linear-gradient(135deg,#5dade2,#3498db);box-shadow:0 10px 40px #3498db80,0 0 20px #3498db4d}@media(max-width:768px){.export-model-section{margin-bottom:1.25rem}.export-model-btn{padding:1.1rem 1.25rem;gap:.85rem}.export-icon{font-size:2.2rem}.export-label{font-size:1rem}.export-description{font-size:.75rem}}@media(max-width:480px){.export-model-section{margin-bottom:1rem}.export-model-btn{padding:1rem 1.1rem;gap:.75rem;border-radius:14px}.export-icon{font-size:2rem}.export-label{font-size:.95rem}.export-description{font-size:.7rem}}@media(hover:none)and (pointer:coarse){.export-model-btn{min-height:72px;-webkit-tap-highlight-color:transparent}.export-model-btn:active:not(:disabled){transform:scale(.97)}.export-model-btn:hover:before{width:0;height:0}}