.controls{position:fixed;top:calc(64px + .75rem);right:.75rem;background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:1rem;min-width:240px;max-width:260px;box-shadow:0 8px 32px #0000001a;z-index:100;max-height:calc(100vh - 144px - 1.5rem);overflow-y:auto;overflow-x:hidden;-webkit-user-select:none;user-select:none;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform,opacity}.controls.collapsed{min-width:auto;max-width:none;width:auto;padding:12px 16px;overflow:hidden}.controls-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.controls h2{margin:0;font-size:1.125rem;font-weight:600;color:#333;flex:1}.controls.collapsed h2{font-size:18px;margin:0}.collapse-button{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#666;border-radius:4px;transition:background-color .2s,color .2s;flex-shrink:0}.collapse-button:hover{background:#0000000d;color:#333}.collapse-button:active{background:#0000001a}.controls-content{margin-top:20px}.controls.collapsed .controls-content{display:none}.control-group{margin-bottom:.875rem}.control-group label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem;font-size:.8125rem;color:#555}.control-group span{font-weight:500;color:#333}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 4px #0003}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.control-group input[type=color]{width:60px;height:40px;min-width:60px;min-height:40px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;background:gray;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation;transition:transform .2s,box-shadow .2s}.control-group input[type=color]:active{transform:scale(.95)}.control-group input[type=color]::-webkit-color-swatch-wrapper{padding:0}.control-group input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.control-group input[type=color]::-moz-color-swatch{border:none;border-radius:6px}@media (min-width: 769px) and (max-width: 1024px){.controls{top:calc(64px + 1rem);right:1rem;padding:1.5rem;max-width:300px}}@media (max-width: 768px){.controls{position:fixed;top:auto;bottom:70px;left:.5rem;right:.5rem;width:calc(100vw - 1rem);max-width:none;min-width:auto;padding:.875rem;max-height:calc(35vh - 80px);border-radius:12px;box-shadow:0 -4px 24px #00000026}.controls h2{font-size:1rem;margin-bottom:.5rem}.control-group{margin-bottom:.75rem}.control-group label{font-size:.8125rem;gap:.5rem}.control-group input[type=color]{width:56px;height:40px;min-width:56px;min-height:40px;touch-action:manipulation}.collapse-button{min-width:40px;min-height:40px;padding:.5rem;touch-action:manipulation}}@media (max-width: 480px){.controls{padding:.75rem;bottom:60px;left:.5rem;right:.5rem;width:calc(100vw - 1rem);max-height:calc(30vh - 70px)}.controls h2{font-size:.9375rem;margin-bottom:.5rem}.control-group{margin-bottom:.625rem}.control-group label{font-size:.75rem;gap:.5rem}.control-group input[type=color]{width:50px;height:36px;min-width:50px;min-height:36px}.collapse-button{min-width:36px;min-height:36px;padding:.375rem}}@media (max-width: 768px) and (orientation: landscape){.controls{max-height:calc(60vh - 100px);bottom:60px}}.controls::-webkit-scrollbar{width:6px}.controls::-webkit-scrollbar-track{background:transparent}.controls::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.controls::-webkit-scrollbar-thumb:hover{background:#aaa}.design-form{position:fixed;top:calc(64px + .75rem);left:.75rem;width:280px;max-height:calc(100vh - 144px - 1.5rem);overflow-y:auto;overflow-x:hidden;background:#0f0f0fd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;padding:1rem;color:#f5f5f5;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 45px #00000073;z-index:100;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform,opacity}.design-form h3{margin-bottom:.75rem;font-size:1rem;font-weight:600}.design-form label{display:flex;flex-direction:column;gap:.5rem;font-size:.8125rem;margin-bottom:.75rem}.design-form input,.design-form textarea{padding:.625rem .875rem;min-height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#0006;color:#f5f5f5;font-size:.875rem;touch-action:manipulation;transition:border-color .2s,background-color .2s}.design-form input:focus,.design-form textarea:focus{outline:none;border-color:#667eea80;background:#00000080}.design-form textarea{resize:vertical;min-height:70px}.design-form button{width:100%;margin-top:.5rem;padding:.75rem 1rem;min-height:40px;border-radius:8px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;font-size:.875rem;cursor:pointer;touch-action:manipulation;transition:transform .2s,box-shadow .2s,opacity .2s;-webkit-tap-highlight-color:transparent}.design-form button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 20px #667eea4d}.design-form button:active:not(:disabled){transform:translateY(0);box-shadow:0 5px 15px #667eea33}.design-form button:disabled{cursor:not-allowed;opacity:.6}.design-form .status{margin-top:12px;font-size:.8rem;color:#b5f2d7}.design-form .status.error{color:#ff8a9b}.price-summary{margin:.75rem 0;padding:.875rem;background:#0000004d;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.price-row{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.8125rem}.price-row.total{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.1);font-weight:700;font-size:.9375rem}.price-note{margin-top:8px;font-size:.75rem;color:#fff9;font-style:italic}@media (min-width: 769px) and (max-width: 1024px){.design-form{top:calc(64px + 1rem);left:1rem;padding:1.5rem;max-width:300px}}@media (max-width: 768px){.design-form{position:fixed;top:auto;bottom:70px;left:.5rem;right:.5rem;width:calc(100vw - 1rem);max-width:none;max-height:calc(35vh - 80px);padding:.875rem;border-radius:12px;box-shadow:0 -4px 24px #0000004d}.design-form h3{font-size:.9375rem;margin-bottom:.5rem}.design-form label{font-size:.8125rem;margin-bottom:.625rem;gap:.375rem}.design-form input,.design-form textarea{padding:.625rem .75rem;font-size:16px;min-height:40px;touch-action:manipulation}.design-form textarea{min-height:70px}.design-form button{padding:.75rem;min-height:40px;font-size:.875rem;touch-action:manipulation}.price-summary{margin:.75rem 0;padding:.75rem}}@media (max-width: 480px){.design-form{top:auto;bottom:60px;left:.5rem;right:.5rem;width:calc(100vw - 1rem);padding:.75rem;max-height:calc(30vh - 70px)}.design-form h3{font-size:.875rem;margin-bottom:.5rem}.design-form label{font-size:.75rem;margin-bottom:.5rem}.design-form input,.design-form textarea{padding:.5rem .625rem;font-size:16px;min-height:36px}.design-form textarea{min-height:60px}.design-form button{padding:.625rem;min-height:36px;font-size:.8125rem}.price-summary{margin:.625rem 0;padding:.625rem}}@media (max-width: 768px) and (orientation: landscape){.design-form{max-height:calc(50vh - 80px);bottom:60px}}.navbar{position:fixed;top:0;left:0;right:0;height:64px;background:#000;z-index:1000;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px #0000004d;will-change:transform}.navbar-content{display:flex;align-items:center;gap:1.618rem;height:100%;padding:0 1.618rem;max-width:100%}.navbar-buttons{display:flex;gap:.75rem;align-items:center;margin-left:auto;flex-wrap:nowrap}.navbar-button{padding:.625rem 1.25rem;min-height:44px;background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;border-radius:6px;transition:all .2s ease;touch-action:manipulation;white-space:nowrap;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center}.navbar-button:hover{background:#ffffff1a;border-color:#ffffff4d}.navbar-button.active{background:#ffffff26;border-color:#fff6}.navbar-logo{display:flex;align-items:center;height:100%}.navbar-logo img{height:40px;width:auto;object-fit:contain}@media (min-width: 769px) and (max-width: 1024px){.navbar-content{padding:0 1.25rem;gap:1.25rem}.navbar-button{padding:.625rem 1rem;font-size:.8125rem}}@media (max-width: 768px){.navbar{height:56px}.navbar-content{padding:0 1rem;gap:.75rem}.navbar-buttons{gap:.5rem}.navbar-button{padding:.5rem .75rem;font-size:.6875rem;min-height:44px;touch-action:manipulation;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.navbar-logo img{height:28px}}@media (max-width: 480px){.navbar{height:52px}.navbar-content{padding:0 .75rem;gap:.5rem}.navbar-buttons{gap:.375rem}.navbar-button{padding:.5rem .625rem;font-size:.625rem;min-height:44px;max-width:100px}.navbar-logo img{height:24px}}@media (max-width: 360px){.navbar-button{padding:.5rem;font-size:.5625rem;max-width:80px}}.footer{position:fixed;bottom:0;left:0;right:0;background-color:#000;color:#fff;padding:1rem;z-index:1000;text-align:center}.footer-content{max-width:1200px;margin:0 auto}.footer p{margin:0;font-size:.875rem}@media (max-width: 768px){.footer{padding:.75rem}.footer p{font-size:.75rem}}@media (max-width: 480px){.footer{padding:.5rem}.footer p{font-size:.7rem}}:root{--spacing-base: 1rem;--spacing-golden-1: calc(var(--spacing-base) * 1.618);--spacing-golden-2: calc(var(--spacing-base) * 2.618);--spacing-golden-3: calc(var(--spacing-base) * 4.236)}.app{width:100%;height:100vh;height:100dvh;position:relative;background:linear-gradient(135deg,#667eea,#764ba2);overflow:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}.canvas-container{width:100%;height:100%;position:absolute;top:0;left:0;touch-action:none;will-change:transform;transform:translateZ(0)}@media (min-width: 769px) and (max-width: 1024px){.app,.canvas-container{height:100vh}}@media (max-width: 768px){.app,.canvas-container{height:100vh;height:100dvh;min-height:-webkit-fill-available}}@media (max-width: 480px){.app,.canvas-container{height:100vh;height:100dvh;min-height:-webkit-fill-available}}@media (max-width: 768px) and (orientation: landscape){.app,.canvas-container{height:100vh;height:100dvh}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.canvas-container{image-rendering:-webkit-optimize-contrast}}*{margin:0;padding:0;box-sizing:border-box}:root{font-size:16px;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem}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;text-rendering:optimizeLegibility;width:100%;height:100vh;height:100dvh;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-font-feature-settings:"kern" 1;font-feature-settings:"kern" 1;font-kerning:normal}#root{width:100%;height:100%}@media (max-width: 480px){:root{font-size:14px}}@media (min-width: 1025px){:root{font-size:17px}}button,a,input[type=button],input[type=submit],input[type=color],input[type=range]{min-height:44px;min-width:44px}*:focus-visible{outline:2px solid #667eea;outline-offset:2px;border-radius:4px}*{scroll-behavior:smooth}img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;max-width:100%;height:auto}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input,textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}::-webkit-scrollbar-thumb{background:#0000004d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#00000080}@media (max-width: 768px){input,textarea,select{font-size:16px!important}button,a{padding:.75rem 1rem}body{-webkit-text-size-adjust:100%;text-size-adjust:100%}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}