.viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;background:linear-gradient(180deg,var(--color-bg-warm) 0%,var(--color-bg) 50%,var(--color-sand) 100%)}.viewport:before{content:"";position:fixed;top:120px;left:16px;width:40px;height:40px;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 Q70 30 70 50 Q70 80 50 90 Q30 80 30 50 Q30 30 50 10' fill='none' stroke='%239CAF88' stroke-width='2'/%3E%3Cpath d='M50 20 L50 85' stroke='%239CAF88' stroke-width='1.5'/%3E%3C/svg%3E");background-size:contain}.stage{position:absolute;left:0;top:0;transform-origin:0 0;width:0;height:0;will-change:transform}.thumb{position:absolute;left:0;top:0;padding:6px;border:0;background:var(--color-white);border-radius:var(--radius-md);overflow:visible;cursor:pointer;will-change:transform;box-shadow:0 2px 8px #4a453914,0 8px 24px #4a45390f;animation:fadeUp .6s var(--ease-natural) backwards}.thumb:before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius-md) + 2px);border:2px solid var(--color-sage-light);opacity:0;transition:opacity .3s var(--ease-natural);pointer-events:none}.thumb:hover:before{opacity:1}.thumb:hover{box-shadow:0 4px 16px #4a45391a,0 12px 32px #9caf881f;transition:box-shadow .3s var(--ease-natural)}.thumb:active{transform:scale(.97);transition:transform .15s ease}.thumb img{width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;border-radius:calc(var(--radius-md) - 4px)}.badge{position:absolute;right:-6px;top:-6px;font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.02em;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);white-space:nowrap;border:2px solid var(--color-white);color:var(--color-white);background:var(--color-sage);box-shadow:var(--shadow-soft);opacity:.9;transition:all .3s var(--ease-natural)}.badge[data-person=groom]{background:var(--color-olive)}.badge[data-person=bride]{background:var(--color-terracotta)}.thumb:hover .badge{opacity:1;transform:scale(1.1)}.hint{position:fixed;left:var(--space-md);right:var(--space-md);bottom:var(--space-lg);z-index:20;font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:.02em;color:var(--color-text-light);text-align:center;pointer-events:none;background:#ffffffd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 20px;border-radius:var(--radius-full);width:fit-content;margin:0 auto;box-shadow:var(--shadow-soft);border:1px solid rgba(156,175,136,.2);animation:fadeUp .6s var(--ease-natural) backwards;animation-delay:1s}.sheetBackdrop{position:fixed;inset:0;background:#4a453933;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out-expo);z-index:40}.sheetBackdrop.open{opacity:1;pointer-events:auto}.sheet{position:fixed;left:0;right:0;bottom:0;transform:translateY(105%);transition:transform .5s var(--ease-out-expo);z-index:50;background:var(--color-white);border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:85vh;overflow:hidden;box-shadow:0 -4px 24px #4a45391a,0 -1px 8px #4a45390d}.sheet.open{transform:translateY(0)}.sheet:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-sage-light),var(--color-sage),var(--color-sage-light));pointer-events:none}.grabArea{padding:14px 0 10px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.grabArea:active{cursor:grabbing}.grab{width:40px;height:4px;border-radius:var(--radius-full);background:var(--color-sage-light);margin:0 auto;transition:all .2s var(--ease-natural)}.grabArea:hover .grab,.grabArea:active .grab{background:var(--color-sage);transform:scaleX(1.15)}.sheetBody{display:grid;grid-template-columns:1fr;gap:var(--space-lg);padding:0 var(--space-lg) var(--space-xl);max-height:calc(85vh - 45px);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-sage-light) transparent}.sheetBody::-webkit-scrollbar{width:4px}.sheetBody::-webkit-scrollbar-track{background:transparent}.sheetBody::-webkit-scrollbar-thumb{background:var(--color-sage-light);border-radius:var(--radius-full)}.sheetMedia{position:relative;animation:fadeUp .5s var(--ease-natural) backwards;animation-delay:.1s}.sheetMedia img{width:100%;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-medium)}.sheetMedia:before,.sheetMedia:after{content:"";position:absolute;width:24px;height:24px;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10 90 Q50 50 90 10' fill='none' stroke='%239CAF88' stroke-width='3'/%3E%3C/svg%3E");background-size:contain}.sheetMedia:before{top:-8px;left:-8px;transform:rotate(0)}.sheetMedia:after{bottom:-8px;right:-8px;transform:rotate(180deg)}.sheetText{animation:fadeUp .5s var(--ease-natural) backwards;animation-delay:.2s}.sheetTitle{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--color-text);margin-bottom:var(--space-sm);line-height:1.4}.sheetMeta{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--color-sage);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}.sheetMeta:before{content:"";width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 Q70 30 70 50 Q70 80 50 90 Q30 80 30 50 Q30 30 50 10' fill='%239CAF88'/%3E%3C/svg%3E");background-size:contain;opacity:.7}.sheetDesc{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.8;color:var(--color-text-light);margin-bottom:var(--space-md)}.sheetTags{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}.tag{font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--color-olive);padding:6px 12px;background:var(--color-sage-pale);border:1px solid var(--color-sage-light);border-radius:var(--radius-sm);transition:all .25s var(--ease-natural)}.tag:hover{background:var(--color-sage-light);color:var(--color-text)}.closeBtn{width:100%;appearance:none;font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--color-white);background:var(--color-sage);border:none;border-radius:var(--radius-sm);padding:14px 24px;cursor:pointer;box-shadow:var(--shadow-leaf);transition:all .3s var(--ease-natural)}.closeBtn:hover{background:var(--color-olive);transform:translateY(-2px);box-shadow:0 8px 24px #9caf8840}.closeBtn:active{transform:scale(.98)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.filterToggle{position:fixed;top:var(--space-md);right:var(--space-md);z-index:35;appearance:none;width:44px;height:44px;border-radius:var(--radius-full);border:1px solid var(--color-sage-light);background:var(--color-white);color:var(--color-sage);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);transition:all .3s var(--ease-natural)}.filterToggle:hover{background:var(--color-sage-pale);border-color:var(--color-sage);transform:scale(1.05)}.filterToggle.hidden{opacity:0;pointer-events:none;transform:scale(.9)}.filterToggle.hasFilter:after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--color-terracotta);border-radius:var(--radius-full);border:2px solid var(--color-white)}.filterDot{display:none}.filters{position:fixed;top:var(--space-md);right:var(--space-md);z-index:40;width:300px;max-width:calc(100vw - var(--space-md) * 2);opacity:0;pointer-events:none;transform:translateY(-12px);transform-origin:top right;background:var(--color-white);border:1px solid var(--color-sage-light);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-medium);transition:all .35s var(--ease-out-expo)}.filters.open{opacity:1;pointer-events:auto;transform:translateY(0)}.filters:before{content:"";position:absolute;top:-1px;left:20px;right:20px;height:3px;background:linear-gradient(90deg,transparent,var(--color-sage),transparent);border-radius:0 0 3px 3px}.filterHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-sand)}.filterTitle{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--color-text)}.closeFilter{appearance:none;width:32px;height:32px;border-radius:var(--radius-full);border:none;background:var(--color-sage-pale);color:var(--color-olive);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease-natural)}.closeFilter:hover{background:var(--color-sage);color:var(--color-white)}.row{display:flex;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-md)}.row:last-child{margin-bottom:0}.label{width:40px;padding-top:8px;font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--color-text-light);flex:0 0 auto}.chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}.chip{appearance:none;font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--color-text-light);background:var(--color-bg);border:1px solid var(--color-sand);border-radius:var(--radius-full);padding:7px 14px;cursor:pointer;transition:all .25s var(--ease-natural)}.chip:hover{background:var(--color-sage-pale);border-color:var(--color-sage-light);color:var(--color-olive)}.chip.active{font-weight:600;color:var(--color-white);background:var(--color-sage);border-color:var(--color-sage);box-shadow:var(--shadow-leaf)}.chip.active:before{display:none}.actions{justify-content:flex-end;margin-top:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--color-sand);gap:var(--space-sm)}.btn{appearance:none;font-family:var(--font-display);font-size:12px;font-weight:500;color:var(--color-text-light);background:transparent;border:1px solid var(--color-sand);border-radius:var(--radius-sm);padding:10px 16px;cursor:pointer;transition:all .25s var(--ease-natural)}.btn:hover{color:var(--color-olive);border-color:var(--color-sage-light);background:var(--color-sage-pale)}.btn:active{transform:scale(.98)}.btn.primary{color:var(--color-white);background:var(--color-sage);border-color:var(--color-sage)}.btn.primary:hover{background:var(--color-olive);border-color:var(--color-olive)}.filterBackdrop{position:fixed;inset:0;z-index:38;background:#4a453926;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s ease}.filterBackdrop.open{opacity:1;pointer-events:auto}.appRoot{width:100%;height:100%;position:relative}.appRoot:before{content:"";position:fixed;inset:0;background:var(--color-bg);z-index:9000;pointer-events:none;animation:naturalReveal .8s var(--ease-out-expo) forwards}@keyframes naturalReveal{0%{opacity:1}to{opacity:0}}
