:root{--bg-dark: #0d0d14;--bg-surface: #1a1a2e;--bg-elevated: #252542;--text-primary: #f5f5f5;--text-secondary: #a0a0b0;--text-muted: #6b6b7b;--accent: #e8a87c;--accent-glow: rgba(232, 168, 124, .3);--danger: #c9463d;--success: #85b79d;--shadow: rgba(0, 0, 0, .4);--polaroid-white: #faf8f5;--polaroid-shadow: rgba(0, 0, 0, .25);--font-display: "Caveat", cursive;--font-body: system-ui, -apple-system, sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--transition-fast: .15s ease;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-body);background:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#app{width:100%;height:100%;position:relative;overflow:hidden}.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity var(--transition-smooth),visibility var(--transition-smooth)}.screen.active{opacity:1;visibility:visible}#start-screen{justify-content:center;align-items:center;background:linear-gradient(160deg,var(--bg-dark) 0%,var(--bg-surface) 100%)}.start-content{text-align:center;padding:2rem}.logo{font-family:var(--font-display);font-size:4rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem;letter-spacing:-.02em}.tagline{color:var(--text-secondary);font-size:1.1rem;margin-bottom:3rem}.start-buttons{display:flex;flex-direction:column;gap:1rem;max-width:280px;margin:0 auto}.btn-primary,.btn-secondary{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 1.5rem;border-radius:var(--radius-md);font-size:1rem;font-weight:500;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.btn-primary{background:var(--accent);color:var(--bg-dark)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--accent-glow)}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:var(--bg-surface);transform:translateY(-2px)}.btn-primary:active,.btn-secondary:active{transform:translateY(0)}#camera-screen{background:#000}#camera-video{width:100%;height:100%;object-fit:cover}.camera-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.crop-guide{width:min(80vw,80vh);aspect-ratio:1;border:2px solid rgba(255,255,255,.5);border-radius:4px;box-shadow:0 0 0 9999px #00000080}.camera-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-around;padding:2rem;background:linear-gradient(transparent,#0009)}.btn-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff1a;color:#fff;transition:background var(--transition-fast)}.btn-icon:hover{background:#fff3}.btn-capture{width:72px;height:72px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-fast)}.btn-capture:hover{transform:scale(1.05)}.btn-capture:active{transform:scale(.95)}.capture-ring{width:60px;height:60px;border:3px solid var(--bg-dark);border-radius:50%}#crop-screen{background:var(--bg-dark)}.crop-container{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}#crop-canvas{max-width:100%;max-height:100%;object-fit:contain}.crop-box{position:absolute;border:2px solid white;box-shadow:0 0 0 9999px #0009;cursor:move;touch-action:none}.crop-controls{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:var(--bg-surface)}.crop-hint{color:var(--text-muted);font-size:.875rem}.btn-text{padding:.75rem 1.25rem;font-size:1rem;font-weight:500;color:var(--text-secondary);transition:color var(--transition-fast)}.btn-text:hover{color:var(--text-primary)}.btn-accent{color:var(--accent)}.btn-accent:hover{color:var(--accent);opacity:.9}#editor-screen{background:var(--bg-dark)}.polaroid-container{flex:1;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:hidden;touch-action:none}.polaroid-wrapper{transform-origin:center center;transition:transform .1s ease-out}.polaroid{position:relative;background:var(--polaroid-white);padding:12px;box-shadow:0 4px 20px var(--polaroid-shadow),0 0 0 1px #0000000d;transform:rotate(-1deg)}.polaroid-photo{position:relative;width:min(calc(100vw - 4rem),320px);aspect-ratio:1;background:#222;overflow:hidden}#photo-canvas{display:block;width:100%;height:100%}#drawing-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;touch-action:none;z-index:10}.polaroid-footer{height:48px;background:var(--polaroid-white)}.editor-toolbar{background:var(--bg-surface);padding:.75rem 1rem;display:flex;flex-direction:column;gap:.75rem;border-top:1px solid rgba(255,255,255,.05)}.tool-group{display:flex;justify-content:center;gap:.25rem}.tool-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--transition-fast)}.tool-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.tool-btn.active{background:var(--accent);color:var(--bg-dark)}.color-palette{display:flex;justify-content:center;gap:.5rem}.color-swatch{width:32px;height:32px;border-radius:50%;border:2px solid transparent;transition:transform var(--transition-fast),border-color var(--transition-fast);box-shadow:inset 0 -2px 4px #0003}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--text-primary);transform:scale(1.15)}.brush-size-container{display:flex;align-items:center;justify-content:center;gap:1rem;padding:0 1rem}.brush-slider{flex:1;max-width:200px;height:4px;-webkit-appearance:none;appearance:none;background:var(--bg-elevated);border-radius:2px;outline:none}.brush-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform var(--transition-fast)}.brush-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.brush-preview{width:40px;height:40px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;position:relative}.brush-preview:after{content:"";width:var(--brush-size, 8px);height:var(--brush-size, 8px);border-radius:50%;background:var(--brush-color, var(--text-primary))}.action-group{display:flex;justify-content:center;align-items:center;gap:.5rem}.action-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--transition-fast)}.action-btn:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-primary)}.action-btn:disabled{opacity:.3;cursor:not-allowed}.btn-save{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:var(--accent);color:var(--bg-dark);border-radius:var(--radius-md);font-weight:600;margin-left:auto;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.btn-save:hover{transform:translateY(-2px);box-shadow:0 4px 16px var(--accent-glow)}.btn-new{position:absolute;top:1rem;left:1rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-surface);color:var(--text-secondary);transition:all var(--transition-fast)}.btn-new:hover{background:var(--bg-elevated);color:var(--text-primary)}.modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;visibility:hidden;transition:opacity var(--transition-smooth),visibility var(--transition-smooth);z-index:100}.modal.active{opacity:1;visibility:visible}.modal-content{background:var(--bg-surface);border-radius:var(--radius-lg);padding:2rem;max-width:400px;width:100%;text-align:center}.modal-content h2{font-family:var(--font-display);font-size:1.75rem;margin-bottom:1.5rem}.export-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.export-option{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:var(--bg-elevated);border-radius:var(--radius-md);border:2px solid transparent;transition:all var(--transition-fast)}.export-option:hover{border-color:var(--accent)}.export-preview-canvas{width:100px;height:120px;border-radius:2px;box-shadow:0 2px 8px #0000004d;background:var(--polaroid-white)}.export-option span{font-weight:500;color:var(--text-primary)}.export-option small{font-size:.75rem;color:var(--text-muted)}@media(max-width:380px){.color-swatch{width:28px;height:28px}.tool-btn,.action-btn{width:40px;height:40px}}@media(min-width:768px){.polaroid{padding:16px 16px 0}.polaroid-footer{height:60px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.screen.active .start-content,.screen.active .polaroid{animation:fadeIn .4s ease-out}