:root{--color-cream: #FFF8E7;--color-light-peach: #FFE4D6;--color-peach: #FFCCB6;--color-vanilla: #F3E5AB;--color-primary: #FF7F50;--color-primary-light: #FF9A75;--color-primary-dark: #E8654E;--color-deep-coral: #E8654E;--color-soft-tan: #D9C2A3;--color-warm-beige: #C9B18F;--color-burnt-orange: #CC6640;--color-burgundy: var(--color-primary);--color-burgundy-light: var(--color-primary-light);--color-burgundy-dark: var(--color-primary-dark);--color-wine: var(--color-primary-dark);--color-darkroom: var(--color-cream);--color-slate: var(--color-light-peach);--color-charcoal: var(--color-soft-tan);--color-void: var(--color-vanilla);--color-gold: var(--color-primary);--color-highlight: var(--color-peach);--color-highlight-dark: var(--color-warm-beige);--color-amber: var(--color-burnt-orange);--color-coral: var(--color-primary);--color-coral-dark: var(--color-deep-coral);--color-olive: #8B9A6B;--color-olive-dark: #6B7A4B;--color-ivory: #FFFEF8;--color-parchment: #F5E6D3;--color-sepia: #8B7355;--color-text-primary: #2D2D2D;--color-text-secondary: #5A5A5A;--color-text-muted: #7A7A7A;--color-text-dark: #2D2D2D;--color-text-light: #FFFFFF;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 2px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .1);--shadow-xl: 0 8px 24px rgba(0, 0, 0, .12);--shadow-glow: 0 0 20px rgba(255, 127, 80, .15);--shadow-inner: inset 0 1px 4px rgba(0, 0, 0, .05);--shadow-photo: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 6px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--spacing-2xl: 4rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-pill: 9999px;--font-heading: "Cormorant Garamond", Georgia, serif;--font-body: "Inter", -apple-system, sans-serif;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1)}html,body{height:100%;margin:0;padding:0;background:var(--color-cream);color:var(--color-text-primary);font-family:var(--font-body);overflow-x:hidden;line-height:1.6}html{scroll-padding-bottom:80px}@supports (padding-bottom: env(safe-area-inset-bottom)){html{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom))}}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:500;letter-spacing:-.01em;line-height:1.2;color:var(--color-text-primary)}.memory-form input[type=text],.memory-form input[type=date],.memory-form input[type=email],.memory-form input[type=number],.memory-form input[type=search],.memory-form input[type=url],.memory-form input[type=password],.memory-form select,.memory-form textarea{color:var(--color-text-primary);caret-color:var(--color-primary);background:var(--color-ivory);border:1px solid var(--color-soft-tan)}.memory-form input[type=text]::placeholder,.memory-form input[type=date]::placeholder,.memory-form input[type=email]::placeholder,.memory-form input[type=number]::placeholder,.memory-form input[type=search]::placeholder,.memory-form input[type=url]::placeholder,.memory-form input[type=password]::placeholder,.memory-form textarea::placeholder{color:var(--color-text-muted);opacity:1}.board-bg{background:var(--color-cream);min-height:100vh;position:relative}.polaroid-card{position:relative;width:280px;max-width:100%;background:linear-gradient(135deg,var(--color-ivory) 0%,#FFFFFF 50%,var(--color-parchment) 100%);border-radius:var(--radius-sm);box-shadow:var(--shadow-photo);transition:transform var(--transition-spring),box-shadow var(--transition-base);cursor:pointer;transform-style:preserve-3d}.polaroid-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-sm);pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.4) 0%,transparent 5%,transparent 95%,rgba(0,0,0,.02) 100%)}.polaroid-card:hover{transform:translateY(-8px) rotate(.5deg) scale(1.01);box-shadow:var(--shadow-xl),var(--shadow-glow)}.polaroid-card:hover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-sm);pointer-events:none;border:2px solid var(--color-primary);opacity:.3;z-index:10}.polaroid-card:focus-visible{outline:none;box-shadow:var(--shadow-lg),0 0 0 3px var(--color-primary-light),0 0 16px #ff7f5033}.style-chip:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 4px #ff7f5026}@media(min-width:480px){.xs\:inline{display:inline!important}.xs\:hidden{display:none!important}}.filter-collapse-enter{opacity:0;max-height:0;overflow:hidden}.filter-collapse-enter-active{opacity:1;max-height:500px;transition:opacity .3s ease-in-out,max-height .3s ease-in-out}.filter-collapse-exit{opacity:1;max-height:500px}.filter-collapse-exit-active{opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease-in-out,max-height .3s ease-in-out}.polaroid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-xl);width:100%;max-width:1400px;margin:0 auto;padding:var(--spacing-lg)}@media(min-width:640px){.polaroid-grid{gap:calc(var(--spacing-xl) + var(--spacing-sm))}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes photoReveal{0%{opacity:0;filter:brightness(1.1) contrast(.9);transform:scale(.98)}to{opacity:1;filter:brightness(1) contrast(1);transform:scale(1)}}@keyframes gentleSway{0%,to{transform:rotate(var(--rotation, 0deg))}50%{transform:rotate(calc(var(--rotation, 0deg) + .3deg))}}.animate-fade-in{animation:fadeIn var(--transition-slow) ease-out}.animate-slide-up{animation:slideUp var(--transition-slow) ease-out}.animate-scale-in{animation:scaleIn var(--transition-base) var(--transition-spring)}.animate-photo-reveal{animation:photoReveal .8s ease-out}.polaroid-grid>*{animation:slideUp .5s ease-out backwards}.polaroid-grid>*:nth-child(1){animation-delay:.05s}.polaroid-grid>*:nth-child(2){animation-delay:.1s}.polaroid-grid>*:nth-child(3){animation-delay:.15s}.polaroid-grid>*:nth-child(4){animation-delay:.2s}.polaroid-grid>*:nth-child(5){animation-delay:.25s}.polaroid-grid>*:nth-child(6){animation-delay:.3s}.polaroid-grid>*:nth-child(7){animation-delay:.35s}.polaroid-grid>*:nth-child(8){animation-delay:.4s}.polaroid-grid>*:nth-child(n+9){animation-delay:.45s}@keyframes slideIn{0%{opacity:0;transform:translate(100%) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes slideOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(100%) scale(.95)}}.animate-slide-in{animation:slideIn .4s var(--transition-spring)}.animate-slide-out{animation:slideOut .3s ease-in forwards}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-shimmer{background:linear-gradient(90deg,#ff7f500d,#ff7f501a,#ff7f500d);background-size:200% 100%;animation:shimmer 1.5s infinite}.glass{background:linear-gradient(135deg,#fff8e7e6,#fffffff2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-lg);border:1px solid rgba(255,127,80,.1);box-shadow:var(--shadow-md)}.storybook-container{max-width:900px;margin:0 auto;padding:var(--spacing-lg);position:relative;display:flex;flex-direction:column;align-items:center}.storybook-page{position:relative;background:linear-gradient(135deg,var(--color-ivory) 0%,#FFFFFF 100%);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--spacing-xl);min-height:600px;width:100%;transition:transform var(--transition-base);cursor:pointer;transform-origin:left center;backface-visibility:hidden;color:var(--color-text-primary)}.storybook-page:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl),0 12px 40px #ff7f5014}@keyframes pageTurn{0%{transform:rotateY(0);opacity:1}40%{transform:rotateY(-10deg) translate(-8px) scale(.99);opacity:.9;box-shadow:4px 4px 12px #00000014}to{transform:rotateY(0);opacity:1}}.page-turn-animation{animation:pageTurn .6s cubic-bezier(.4,0,.2,1)}.book-spine{position:absolute;left:0;top:0;bottom:0;width:50px;background:linear-gradient(to right,rgba(0,0,0,.06) 0%,rgba(0,0,0,.03) 40%,rgba(0,0,0,.01) 70%,transparent 100%);border-radius:var(--radius-lg) 0 0 var(--radius-lg);pointer-events:none;z-index:10}.page-content{padding-left:60px;animation:pageSlideIn var(--transition-base)}.storybook-nav-button{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.75rem;font-family:var(--font-body);font-size:.875rem;font-weight:500;color:var(--color-text-light);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border:none;border-radius:var(--radius-pill);transition:all var(--transition-fast);cursor:pointer;box-shadow:var(--shadow-md);z-index:20}.storybook-nav-button:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 16px #ff7f5033}.storybook-nav-button:active:not(:disabled){transform:translateY(0)}.storybook-nav-button:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}@media(min-width:640px){.storybook-nav-previous{position:absolute;top:50%;left:0;transform:translate(-50%) translateY(-50%)}.storybook-nav-next{position:absolute;top:50%;right:0;transform:translate(50%) translateY(-50%)}.storybook-nav-previous:hover:not(:disabled){transform:translate(-50%) translateY(calc(-50% - 2px))}.storybook-nav-next:hover:not(:disabled){transform:translate(50%) translateY(calc(-50% - 2px))}}@media(max-width:639px){.storybook-nav-previous{position:absolute;top:120px;left:10px;padding:.5rem 1rem}.storybook-nav-next{position:absolute;bottom:20px;right:10px;padding:.5rem 1rem}.storybook-container{padding-bottom:80px}}.memory-image-container{width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,#ff7f5008,#ffccb60d);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-inner)}.memory-image-container img{width:100%;height:100%;object-fit:contain;background-color:var(--color-parchment)}.memory-metadata{max-width:100%}.favorite-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:linear-gradient(135deg,#ff7f501a,#ff7f500d);color:var(--color-primary);border:1px solid rgba(255,127,80,.2);border-radius:var(--radius-pill);font-size:.875rem;font-family:var(--font-body);font-weight:500}@keyframes pageSlideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media(max-width:640px){.storybook-container{padding:var(--spacing-sm)}.storybook-page{padding:var(--spacing-md) var(--spacing-sm);min-height:500px}.page-content{padding-left:30px}.book-spine{width:20px}.storybook-nav-button{padding:.625rem 1rem;font-size:.8125rem}.memory-image-container{aspect-ratio:1}}@media(prefers-reduced-motion:reduce){.animate-slide-in,.animate-slide-out,.animate-shimmer,.animate-fade-in,.animate-slide-up,.animate-scale-in,.animate-photo-reveal,.page-turn-animation,.polaroid-grid>*{animation:none!important}.polaroid-card,.storybook-page,.storybook-nav-button{transition:none!important}}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--color-cream)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--color-peach) 0%,var(--color-soft-tan) 100%);border-radius:5px;border:2px solid var(--color-cream)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%)}::selection{background:#ff7f5040;color:var(--color-text-primary)}.landing-hero{position:relative;min-height:80vh;display:flex;align-items:center;overflow:hidden;padding-top:80px}.landing-hero-background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background:linear-gradient(135deg,var(--color-vanilla) 0%,var(--color-light-peach) 100%)}.landing-grain-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");pointer-events:none}.landing-polaroid-float{position:absolute;width:180px;height:220px;background:linear-gradient(135deg,#ffccb64d,#ff7f5033);border:8px solid rgba(255,255,255,.5);border-bottom-width:40px;box-shadow:0 20px 60px #ff7f5033;animation:landingFloat 20s ease-in-out infinite;border-radius:2px}@media(min-width:768px){.landing-polaroid-float{width:200px;height:240px}}.landing-polaroid-1{top:10%;left:5%;transform:rotate(-8deg);animation-delay:0s}.landing-polaroid-2{top:60%;right:8%;transform:rotate(12deg);animation-delay:-7s}.landing-polaroid-3{bottom:15%;left:15%;transform:rotate(-15deg);animation-delay:-14s}@keyframes landingFloat{0%,to{transform:translateY(0) rotate(var(--rotation, -8deg))}50%{transform:translateY(-30px) rotate(calc(var(--rotation, -8deg) + 5deg))}}.landing-hero-container{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}@media(min-width:1024px){.landing-hero-container{grid-template-columns:1fr 1fr;gap:4rem;padding:4rem 2rem}}.landing-hero-content{max-width:600px;margin:0 auto;text-align:center}@media(min-width:1024px){.landing-hero-content{text-align:left;margin:0}}.landing-hero-title{font-family:var(--font-heading);font-size:3rem;font-weight:700;line-height:1.1;color:var(--color-burnt-orange);margin-bottom:1.5rem;letter-spacing:-.02em}@media(min-width:640px){.landing-hero-title{font-size:3.5rem}}@media(min-width:1024px){.landing-hero-title{font-size:4.5rem}}.landing-hero-title .highlight{color:var(--color-primary);position:relative;display:inline-block}.landing-hero-title .highlight:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-peach),var(--color-primary));transform:scaleX(0);transform-origin:left;animation:landingUnderline 1s ease-out .5s forwards}@keyframes landingUnderline{to{transform:scaleX(1)}}.landing-hero-subtitle{font-size:1.125rem;line-height:1.8;color:var(--color-warm-beige);margin-bottom:2.5rem;opacity:.95}@media(min-width:640px){.landing-hero-subtitle{font-size:1.25rem}}.landing-hero-buttons{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}@media(min-width:480px){.landing-hero-buttons{flex-direction:row;justify-content:center}}@media(min-width:1024px){.landing-hero-buttons{justify-content:flex-start}}.landing-feature-badges{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}@media(min-width:1024px){.landing-feature-badges{justify-content:flex-start;gap:1rem}}.landing-feature-badge{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:#fff9;border:1px solid rgba(255,127,80,.3);border-radius:50px;font-size:.8rem;color:var(--color-burnt-orange);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--font-body)}@media(min-width:640px){.landing-feature-badge{padding:.75rem 1.25rem;font-size:.9rem}}.landing-hero-visual{position:relative;height:400px;display:flex;align-items:center;justify-content:center}@media(min-width:640px){.landing-hero-visual{height:500px}}@media(min-width:1024px){.landing-hero-visual{height:600px}}.landing-memory-card{position:absolute;width:200px;background:#fff;padding:12px 12px 50px;border-radius:4px;box-shadow:0 20px 60px #ff7f5033;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}@media(min-width:640px){.landing-memory-card{width:240px;padding:14px 14px 55px}}@media(min-width:1024px){.landing-memory-card{width:280px;padding:16px 16px 60px}}.landing-memory-card:hover{transform:translateY(-10px) scale(1.02)!important;box-shadow:0 30px 80px #ff7f504d}.landing-card-1{transform:rotate(-6deg) translate(-60px);z-index:3;animation:landingCardFloat1 6s ease-in-out infinite}.landing-card-2{transform:rotate(3deg) translateY(40px);z-index:2;animation:landingCardFloat2 7s ease-in-out infinite}.landing-card-3{transform:rotate(-10deg) translate(60px) translateY(-20px);z-index:1;animation:landingCardFloat3 8s ease-in-out infinite}@media(min-width:640px){.landing-card-1{transform:rotate(-6deg) translate(-80px)}.landing-card-3{transform:rotate(-10deg) translate(80px) translateY(-20px)}}@keyframes landingCardFloat1{0%,to{transform:rotate(-6deg) translate(-60px) translateY(0)}50%{transform:rotate(-8deg) translate(-60px) translateY(-15px)}}@keyframes landingCardFloat2{0%,to{transform:rotate(3deg) translateY(40px) translate(0)}50%{transform:rotate(5deg) translateY(40px) translate(10px)}}@keyframes landingCardFloat3{0%,to{transform:rotate(-10deg) translate(60px) translateY(-20px)}50%{transform:rotate(-12deg) translate(60px) translateY(-35px)}}@media(min-width:640px){@keyframes landingCardFloat1{0%,to{transform:rotate(-6deg) translate(-80px) translateY(0)}50%{transform:rotate(-8deg) translate(-80px) translateY(-15px)}}@keyframes landingCardFloat3{0%,to{transform:rotate(-10deg) translate(80px) translateY(-20px)}50%{transform:rotate(-12deg) translate(80px) translateY(-35px)}}}.landing-card-image{width:100%;aspect-ratio:1;background:var(--color-light-peach);margin-bottom:10px;overflow:hidden;border-radius:2px}.landing-card-image img{width:100%;height:100%;object-fit:cover}.landing-card-caption{font-family:var(--font-heading);font-size:.9rem;color:var(--color-burnt-orange);text-align:center;font-style:italic}@media(min-width:640px){.landing-card-caption{font-size:1rem}}.landing-navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff8e7f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,127,80,.2)}.landing-nav-container{max-width:1400px;margin:0 auto;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center}@media(min-width:640px){.landing-nav-container{padding:1.25rem 2rem}}.landing-nav-logo{display:flex;align-items:center;gap:.75rem}.landing-logo-text{font-family:var(--font-body);font-size:1.5rem;font-weight:500;color:var(--color-primary);letter-spacing:-.02em;text-transform:lowercase}@media(min-width:640px){.landing-logo-text{font-size:1.75rem}}.landing-divider{width:100%;max-width:200px;height:1px;background:linear-gradient(90deg,transparent 0%,var(--color-soft-tan) 50%,transparent 100%);margin:2rem auto}@media(min-width:640px){.landing-divider{margin:3rem auto}}
