*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary: #4f46e5;--color-primary-hover: #4338ca;--color-primary-active: #3730a3;--color-secondary: #06b6d4;--color-secondary-hover: #0891b2;--color-background: #ffffff;--color-surface: #f9fafb;--color-surface-elevated: #ffffff;--color-border: #e5e7eb;--color-text-primary: #111827;--color-text-secondary: #6b7280;--color-text-inverse: #ffffff;--color-success: #10b981;--color-danger: #ef4444;--color-warning: #f59e0b;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--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: 2rem;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--touch-target-min: 48px;--safe-area-inset-top: env(safe-area-inset-top, 0px);--safe-area-inset-right: env(safe-area-inset-right, 0px);--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);--safe-area-inset-left: env(safe-area-inset-left, 0px);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--preview-perspective: 1000px;--preview-layer-spacing: 50px;font-family:var(--font-family);line-height:var(--line-height-normal);font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}@media(prefers-color-scheme:dark){:root{--color-primary: #6366f1;--color-primary-hover: #818cf8;--color-primary-active: #a5b4fc;--color-secondary: #22d3ee;--color-secondary-hover: #67e8f9;--color-background: #0f172a;--color-surface: #1e293b;--color-surface-elevated: #334155;--color-border: #334155;--color-text-primary: #f1f5f9;--color-text-secondary: #94a3b8;--color-text-inverse: #0f172a;--color-success: #34d399;--color-danger: #f87171;--color-warning: #fbbf24}}html{height:100%;scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{min-height:100vh;min-height:100dvh;margin:0;background-color:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-base);overflow-x:hidden;padding-top:var(--safe-area-inset-top);padding-right:var(--safe-area-inset-right);padding-bottom:var(--safe-area-inset-bottom);padding-left:var(--safe-area-inset-left)}#app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}main{flex:1;display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-md)}header{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);color:var(--color-text-inverse);padding:var(--space-lg) var(--space-md);box-shadow:var(--shadow-md)}header h1{font-size:var(--font-size-2xl);font-weight:700;line-height:var(--line-height-tight);margin:0;text-align:center}header p{margin-top:var(--space-sm);font-size:var(--font-size-sm);opacity:.95;text-align:center}.section{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm)}.section-header{margin-bottom:var(--space-lg)}.section-title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-text-primary);margin:0 0 var(--space-xs)}.section-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.upload-section{display:flex;flex-direction:column;gap:var(--space-lg)}.upload-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md)}.upload-item{display:flex;flex-direction:column;gap:var(--space-sm)}.upload-label{font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs)}.upload-input-wrapper{position:relative}.upload-input{width:100%;padding:var(--space-md);border:2px dashed var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface-elevated);cursor:pointer;transition:all var(--transition-normal);font-size:var(--font-size-sm);color:var(--color-text-secondary);min-height:var(--touch-target-min);display:flex;align-items:center;justify-content:center}.upload-input:hover{border-color:var(--color-primary);background-color:var(--color-background)}.upload-input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-color:var(--color-primary)}input[type=file],.file-input-hidden{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}.thumbnail-preview{width:100%;aspect-ratio:16 / 9;border-radius:var(--radius-md);border:2px dashed var(--color-border);overflow:hidden;background-color:var(--color-surface-elevated);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all var(--transition-normal);min-height:120px}.thumbnail-preview:hover{border-color:var(--color-primary);background-color:var(--color-background);transform:translateY(-1px);box-shadow:0 4px 12px #00000014}.thumbnail-preview:active{transform:translateY(0)}.thumbnail-preview .placeholder{color:var(--color-text-secondary);font-size:var(--font-size-base);text-align:center;padding:var(--space-md);-webkit-user-select:none;user-select:none}.thumbnail-preview img{width:100%;height:100%;object-fit:cover;pointer-events:none}.thumbnail-preview:has(img){border-style:solid;border-color:var(--color-primary)}.thumbnail-placeholder{color:var(--color-text-secondary);font-size:var(--font-size-sm);text-align:center;padding:var(--space-md)}.preview-section{min-height:400px}.preview-container{perspective:var(--perspective, 800px);perspective-origin:var(--origin-x, 50%) var(--origin-y, 50%);width:100%;min-height:400px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-surface-elevated)}.preview-container.checkerboard{background-image:linear-gradient(45deg,var(--color-border) 25%,transparent 25%),linear-gradient(-45deg,var(--color-border) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-border) 75%),linear-gradient(-45deg,transparent 75%,var(--color-border) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.preview-scene{position:relative;transform-style:preserve-3d;transition:transform var(--transition-slow);width:100%;max-width:500px;height:400px}.layers-wrapper{width:100%;height:400px;position:relative;transform-style:preserve-3d;transform:translate(var(--pan-x, 0px),var(--pan-y, 0px)) scale(var(--scale, 1)) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));will-change:transform;backface-visibility:hidden}.layer{position:absolute;top:0;left:0;width:100%;height:100%;transform-style:preserve-3d;transition:opacity var(--transition-normal);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);background-size:cover;background-position:center;background-repeat:no-repeat;will-change:transform;backface-visibility:hidden}.layer-1{transform:translateZ(calc(var(--layer-gap, 60px) * 0))}.layer-2{transform:translateZ(calc(var(--layer-gap, 60px) * 1))}.layer-3{transform:translateZ(calc(var(--layer-gap, 60px) * 2))}.layer-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#0000000d;color:var(--color-text-secondary);font-size:var(--font-size-lg);font-weight:500}.preview-layer{position:absolute;top:0;left:0;width:100%;height:100%;transform-style:preserve-3d;transition:opacity var(--transition-normal);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);will-change:transform;backface-visibility:hidden}.preview-layer img{width:100%;height:100%;object-fit:cover;display:block}.preview-layer:nth-child(1){transform:translateZ(0)}.preview-layer:nth-child(2){transform:translateZ(50px)}.preview-layer:nth-child(3){transform:translateZ(100px)}.preview-layer:nth-child(4){transform:translateZ(150px)}@media(prefers-reduced-motion:reduce){.preview-scene,.preview-layer{transition:none}}.controls-section{display:flex;flex-direction:column;gap:var(--space-lg)}.control-group{display:flex;flex-direction:column;gap:var(--space-md)}.control-item{display:flex;flex-direction:column;gap:var(--space-sm)}.control-label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);display:flex;justify-content:space-between;align-items:center}.control-value{font-size:var(--font-size-sm);font-weight:400;color:var(--color-text-secondary)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--touch-target-min);background:transparent;cursor:pointer;padding:var(--space-md) 0}input[type=range]::-webkit-slider-track{width:100%;height:8px;background:var(--color-border);border-radius:var(--radius-full)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--shadow-md);margin-top:-8px;transition:all var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{background:var(--color-primary-hover);transform:scale(1.1)}input[type=range]::-webkit-slider-thumb:active{background:var(--color-primary-active);transform:scale(1.2)}input[type=range]::-moz-range-track{width:100%;height:8px;background:var(--color-border);border-radius:var(--radius-full)}input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--color-primary);border:none;border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-fast)}input[type=range]::-moz-range-thumb:hover{background:var(--color-primary-hover);transform:scale(1.1)}input[type=range]::-moz-range-thumb:active{background:var(--color-primary-active);transform:scale(1.2)}input[type=range]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-md)}.color-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--touch-target-min),1fr));gap:var(--space-sm)}.color-button{width:100%;min-height:var(--touch-target-min);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden}.color-button:hover{transform:scale(1.05);border-color:var(--color-primary)}.color-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.color-button.active{border-color:var(--color-primary);border-width:3px;box-shadow:var(--shadow-md)}.color-button.active:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-text-inverse);font-size:var(--font-size-lg);font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.export-section{display:flex;flex-direction:column;gap:var(--space-lg)}.export-options,.export-actions{display:flex;flex-direction:column;gap:var(--space-md)}button{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:600;line-height:var(--line-height-normal);padding:var(--space-md) var(--space-xl);min-height:var(--touch-target-min);border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);text-align:center;width:100%}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-primary:active:not(:disabled){background-color:var(--color-primary-active);box-shadow:var(--shadow-sm);transform:translateY(0)}.btn-primary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn-secondary{background-color:var(--color-surface-elevated);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background-color:var(--color-border);border-color:var(--color-text-secondary)}.btn-secondary:active:not(:disabled){background-color:var(--color-border)}.btn-secondary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn-loading{position:relative;color:transparent;pointer-events:none}.btn-loading:after{content:"";position:absolute;width:20px;height:20px;top:50%;left:50%;margin-left:-10px;margin-top:-10px;border:2px solid transparent;border-top-color:currentColor;border-radius:var(--radius-full);animation:button-spinner .6s linear infinite;color:var(--color-text-inverse)}@keyframes button-spinner{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.btn-loading:after{animation:none;content:"...";border:none;width:auto;height:auto}}.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}.hidden{display:none!important}.text-center{text-align:center}@media(min-width:768px){header h1{font-size:var(--font-size-3xl)}header p{font-size:var(--font-size-base)}main{padding:var(--space-xl);gap:var(--space-xl)}.section{padding:var(--space-xl)}.upload-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}.preview-container{min-height:500px}.preview-scene{max-width:600px}.control-group{flex-direction:row;gap:var(--space-lg)}.control-item{flex:1}.export-actions{flex-direction:row}button{width:auto;min-width:160px}}@media(min-width:1024px){main{max-width:1400px;margin:0 auto;padding:var(--space-2xl);gap:var(--space-2xl)}.upload-grid{grid-template-columns:repeat(4,1fr)}.preview-container{min-height:600px}.preview-scene{max-width:800px}@media(hover:hover){.upload-input:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}button:hover:not(:disabled){transform:translateY(-2px)}}}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}