:root{--primary:#9b7e6b;--primary-hover:#866b59;--bg-color:#fcfbf9;--surface:#ffffffb3;--surface-border:#9b7e6b33;--text-main:#2c2927;--text-muted:#736b63;--error:#c85a5a;--font-serif:"Cormorant Garamond", serif;--font-sans:"Inter", sans-serif;--radius-lg:24px;--radius-md:16px;--radius-sm:8px;--shadow-sm:0 4px 24px #9b7e6b14;--shadow-md:0 8px 32px #9b7e6b1f;--transition:all .3s cubic-bezier(.25, .8, .25, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}.bg-gradient{z-index:-2;background:radial-gradient(circle at 15%,#d4c4b733,#0000 50%),radial-gradient(circle at 85% 30%,#e4dbd44d,#0000 50%);width:100vw;height:100vh;position:fixed;top:0;left:0}.grain{z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");width:100vw;height:100vh;position:fixed;top:0;left:0}.container{max-width:1000px;margin:0 auto;padding:2rem 1.5rem}.hero{text-align:center;margin-bottom:4rem;animation:1s ease-out fadeInDown}.badge{letter-spacing:.2em;text-transform:uppercase;color:var(--primary);margin-bottom:1rem;font-size:.75rem;font-weight:600;display:inline-block}.names{font-family:var(--font-serif);color:var(--text-main);margin-bottom:1rem;font-size:clamp(3rem,8vw,5rem);font-weight:500;line-height:1.1}.divider-elegant{background:var(--primary);width:60px;height:2px;margin:1.5rem auto;position:relative}.divider-elegant:before{content:"✦";color:var(--primary);background:var(--bg-color);padding:0 10px;font-size:1.2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.date{font-family:var(--font-serif);color:var(--text-muted);margin-bottom:1.5rem;font-size:1.5rem;font-style:italic}.intro{max-width:500px;color:var(--text-muted);margin:0 auto;font-size:1.05rem}.upload-section{grid-template-columns:1fr;gap:2rem;margin-bottom:5rem;display:grid}@media (width>=768px){.upload-section{grid-template-columns:1.5fr 1fr}}.card{background:var(--surface);-webkit-backdrop-filter:blur(12px);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:var(--transition);padding:2rem}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-header h2{font-family:var(--font-serif);margin-bottom:.25rem;font-size:1.8rem;font-weight:500}.card-header p{color:var(--text-muted);margin-bottom:1.5rem;font-size:.9rem}.input-group{margin-bottom:1.5rem}.input-group label{color:var(--text-main);margin-bottom:.5rem;font-size:.9rem;font-weight:500;display:block}.optional{color:var(--text-muted);font-size:.8rem;font-weight:400}input[type=text]{border:1px solid var(--surface-border);border-radius:var(--radius-sm);width:100%;font-family:var(--font-sans);transition:var(--transition);background:#ffffff80;padding:.8rem 1rem;font-size:1rem}input[type=text]:focus{border-color:var(--primary);background:#fff;outline:none;box-shadow:0 0 0 3px #9b7e6b1a}.dropzone{border:2px dashed var(--surface-border);border-radius:var(--radius-md);text-align:center;cursor:pointer;transition:var(--transition);background:#ffffff4d;margin-bottom:1.5rem;padding:2.5rem 1rem}.dropzone:hover,.dropzone.dragover{border-color:var(--primary);background:#9b7e6b0d}.icon-circle{width:48px;height:48px;color:var(--primary);box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 1rem;display:flex}.primary-text{margin-bottom:.25rem;font-weight:500}.secondary-text{color:var(--text-muted);font-size:.85rem}.preview-container{flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;display:flex}.preview-container.hidden{display:none}.preview-item{border-radius:var(--radius-sm);width:80px;height:80px;box-shadow:var(--shadow-sm);animation:.3s ease-out scaleIn;position:relative;overflow:hidden}.preview-item img{object-fit:cover;width:100%;height:100%}.remove-btn{color:#fff;cursor:pointer;width:20px;height:20px;transition:var(--transition);background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:12px;display:flex;position:absolute;top:4px;right:4px}.remove-btn:hover{background:var(--error)}.btn{border-radius:var(--radius-sm);font-family:var(--font-sans);cursor:pointer;transition:var(--transition);border:none;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.8rem 1.5rem;font-size:1rem;font-weight:500;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.btn-secondary{color:var(--primary);background:#9b7e6b1a}.btn-secondary:hover:not(:disabled){background:#9b7e6b33}.btn-sm{padding:.5rem 1rem;font-size:.9rem}.voice-recorder-container{text-align:center;flex-direction:column;align-items:center;padding-top:1rem;display:flex}.mic-btn{background:linear-gradient(135deg, var(--primary), var(--primary-hover));color:#fff;cursor:pointer;width:80px;height:80px;box-shadow:var(--shadow-sm);transition:var(--transition);border:none;border-radius:50%;justify-content:center;align-items:center;margin-bottom:1.5rem;display:flex;position:relative}.mic-btn:hover{transform:scale(1.05);box-shadow:0 12px 24px #9b7e6b40}.mic-btn.recording{background:var(--error);animation:1.5s infinite pulse-error}.recording-indicator{color:var(--error);font-variant-numeric:tabular-nums;align-items:center;gap:.5rem;margin-bottom:1rem;font-weight:600;display:flex}.pulse{background:var(--error);border-radius:50%;width:10px;height:10px;animation:1s infinite alternate pulse-op}.instruction-text{color:var(--text-muted);font-size:.9rem}.audio-preview{width:100%;margin-top:1.5rem}.audio-preview.hidden{display:none}audio{border-radius:20px;width:100%;height:40px;margin-bottom:1rem}audio::-webkit-media-controls-panel{background-color:#9b7e6b1a}.voice-actions{grid-template-columns:1fr 2fr;gap:.5rem;display:grid}.wall-section{padding-top:2rem}.section-header{border-bottom:1px solid var(--surface-border);justify-content:space-between;align-items:flex-end;margin-bottom:2rem;padding-bottom:1rem;display:flex}.section-header h2{font-family:var(--font-serif);font-size:2.5rem;font-weight:500}.stats{gap:1rem;display:flex}.stat-badge{background:var(--surface);color:var(--text-muted);border:1px solid var(--surface-border);border-radius:20px;padding:.4rem 1rem;font-size:.85rem;font-weight:500}.masonry-grid{column-count:1;column-gap:1.5rem}@media (width>=600px){.masonry-grid{column-count:2}}@media (width>=900px){.masonry-grid{column-count:3}}.wall-item{break-inside:avoid;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:var(--transition);background:#fff;margin-bottom:1.5rem;animation:.6s cubic-bezier(.16,1,.3,1) both scaleUp;overflow:hidden}.wall-item:hover{box-shadow:var(--shadow-md);transform:translateY(-5px)}.wall-photo{cursor:pointer;position:relative}.wall-photo:after{content:"🔍";opacity:0;transition:var(--transition);z-index:10;font-size:2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.5)}.wall-photo:before{content:"";opacity:0;transition:var(--transition);z-index:5;background:#0000004d;position:absolute;inset:0}.wall-photo:hover:after{opacity:1;transform:translate(-50%,-50%)scale(1)}.wall-photo:hover:before{opacity:1}.wall-photo img{object-fit:cover;width:100%;display:block}.wall-content{padding:1rem}.wall-author{font-size:.9rem;font-weight:500}.wall-time{color:var(--text-muted);margin-top:.2rem;font-size:.75rem}.wall-voice{background:linear-gradient(#fff,#f9f8f6);padding:1.5rem 1rem}.voice-icon-wrap{width:40px;height:40px;color:var(--primary);background:#9b7e6b1a;border-radius:50%;justify-content:center;align-items:center;margin-bottom:1rem;display:flex}.empty-state{text-align:center;color:var(--text-muted);padding:4rem 1rem;font-size:1.1rem}.empty-state.hidden{display:none}.empty-icon{opacity:.5;margin-bottom:1rem;font-size:3rem}.toast{-webkit-backdrop-filter:blur(8px);z-index:100;opacity:0;background:#2c2927e6;border:1px solid #ffffff0d;border-radius:50px;align-items:center;padding:.6rem 1.2rem;transition:all .5s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;bottom:2rem;left:50%;transform:translate(-50%,50px);box-shadow:0 8px 32px #00000026}.toast.show{opacity:1;transform:translate(-50%)}.toast.hidden{display:none!important}.toast-content{align-items:center;gap:.5rem;display:flex}.toast-icon.success{color:#a7f3d0;stroke-width:2.5px;width:16px;height:16px}#toast-message{color:#fff;letter-spacing:.02em;font-size:.85rem;font-weight:500}.visibility-toggle{border-radius:var(--radius-sm);border:1px solid var(--surface-border);background:#fff6;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1rem;display:flex}.toggle-text{flex-direction:column;display:flex}.toggle-title{color:var(--text-main);font-size:.95rem;font-weight:500}.toggle-desc{color:var(--text-muted);font-size:.8rem}.switch{flex-shrink:0;width:44px;height:24px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:#9b7e6b4d;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;width:18px;height:18px;transition:all .4s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:var(--primary)}input:focus+.slider{box-shadow:0 0 1px var(--primary)}input:checked+.slider:before{transform:translate(20px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.lightbox{z-index:1000;opacity:0;pointer-events:none;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.lightbox:not(.hidden){opacity:1;pointer-events:auto}.lightbox-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000d9;position:absolute;inset:0}.lightbox-close{color:#fff;cursor:pointer;z-index:1002;width:40px;height:40px;transition:var(--transition);background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;display:flex;position:absolute;top:1.5rem;right:1.5rem}.lightbox-close:hover{background:#fff3;transform:scale(1.1)}.lightbox-content{z-index:1001;flex-direction:column;max-width:90vw;max-height:85vh;display:flex;position:relative}.lightbox-content img{object-fit:contain;border-radius:var(--radius-sm);max-width:100%;max-height:80vh;box-shadow:0 10px 40px #00000080}.lightbox-caption{color:#fff;justify-content:space-between;align-items:center;margin-top:1rem;display:flex}#lightbox-author{font-size:1.1rem;font-weight:500}#lightbox-time{color:#fff9;font-size:.9rem}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes scaleUp{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pulse-error{0%{box-shadow:0 0 #c85a5a66}70%{box-shadow:0 0 0 15px #c85a5a00}to{box-shadow:0 0 #c85a5a00}}@keyframes pulse-op{0%{opacity:.3}to{opacity:1}}.progress-container{align-items:center;gap:1rem;margin-top:1rem;margin-bottom:1.5rem;animation:.3s ease-out fadeInDown;display:flex}.progress-bar-bg{background:#9b7e6b26;border-radius:4px;flex:1;height:8px;overflow:hidden}.progress-bar-fill{background:var(--primary);border-radius:4px;width:0%;height:100%;transition:width .2s ease-out}.progress-text{color:var(--text-muted);min-width:35px;font-size:.85rem;font-weight:600}@media (width<=600px){.container{padding:1.5rem 1rem}.names{font-size:clamp(2.5rem,10vw,3.5rem)}.card{padding:1.5rem 1rem}.dropzone{padding:2rem .5rem}.btn{padding:1rem}.toast{width:max-content;max-width:90vw;padding:.5rem 1rem;bottom:1rem}}.hidden{display:none!important}