.viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:var(--color-bg)}.viewport:active{cursor:grabbing}.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:4px;border:0;background:var(--color-bg-card);border-radius:var(--radius-md);overflow:visible;cursor:pointer;will-change:transform;box-shadow:0 2px 8px #0006,0 0 0 1px var(--color-border-subtle);animation:fadeScale .5s var(--ease-smooth) backwards}.thumb:before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius-md) + 2px);border:2px solid var(--color-accent);opacity:0;transition:opacity .25s var(--ease-smooth);pointer-events:none}.thumb:hover:before{opacity:1}.thumb:hover{box-shadow:0 4px 16px #00000080,0 0 0 1px var(--color-accent),var(--shadow-glow);transition:box-shadow .25s var(--ease-smooth)}.thumb:active{transform:scale(.97);transition:transform .12s ease}.thumb img{width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;border-radius:calc(var(--radius-md) - 2px)}.badge{position:absolute;right:-4px;top:-4px;font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.03em;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);white-space:nowrap;color:var(--color-white);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-soft);opacity:.85;transition:all .25s var(--ease-smooth)}.badge[data-person=groom]{background:var(--color-groom);border-color:var(--color-groom)}.badge[data-person=bride]{background:var(--color-bride);border-color:var(--color-bride)}.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-mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);text-align:center;pointer-events:none;mix-blend-mode:difference;animation:fadeIn .6s var(--ease-smooth) backwards;animation-delay:1s}@keyframes fadeScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sheetBackdrop{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);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-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:85vh;overflow:hidden;box-shadow:0 -4px 24px #0006,0 0 0 1px var(--color-border)}.sheet.open{transform:translateY(0)}.sheet:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);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:36px;height:4px;border-radius:var(--radius-full);background:var(--color-border);margin:0 auto;transition:all .2s var(--ease-smooth)}.grabArea:hover .grab,.grabArea:active .grab{background:var(--color-accent);transform:scaleX(1.2)}.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-border) transparent}.sheetBody::-webkit-scrollbar{width:4px}.sheetBody::-webkit-scrollbar-track{background:transparent}.sheetBody::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}.sheetMedia{position:relative;animation:fadeUp .5s var(--ease-smooth) backwards;animation-delay:.1s;cursor:grab}.sheetMedia:active{cursor:grabbing}.sheetMedia img{width:100%;height:auto;border-radius:var(--radius-md);box-shadow:0 4px 16px #0006,0 0 0 1px var(--color-border-subtle)}.sheetMedia:before,.sheetMedia:after{display:none}.sheetText{animation:fadeUp .5s var(--ease-smooth) backwards;animation-delay:.2s}.sheetTitle{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--color-text);margin-bottom:var(--space-sm);line-height:1.4}.sheetMeta{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}.sheetMeta:before{display:none}.sheetDesc{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.7;color:var(--color-text-secondary);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-mono);font-size:10px;font-weight:400;letter-spacing:.03em;color:var(--color-text-secondary);padding:5px 10px;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:all .2s var(--ease-smooth)}.tag:hover{background:var(--color-surface-hover);border-color:var(--color-accent);color:var(--color-text)}.closeBtn{width:100%;appearance:none;font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--color-white);background:var(--color-accent);border:none;border-radius:var(--radius-sm);padding:14px 24px;cursor:pointer;transition:all .25s var(--ease-smooth)}.closeBtn:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow)}.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:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);transition:all .25s var(--ease-smooth)}.filterToggle:hover{background:var(--color-surface-hover);border-color:var(--color-accent);color:var(--color-text)}.filterToggle.hidden{opacity:0;pointer-events:none;transform:scale(.9)}.filterToggle.hasFilter:after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;background:var(--color-accent);border-radius:var(--radius-full)}.filterDot{display:none}.filters{position:fixed;top:var(--space-md);right:var(--space-md);z-index:40;width:280px;max-width:calc(100vw - var(--space-md) * 2);opacity:0;pointer-events:none;transform:translateY(-8px);transform-origin:top right;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-medium);transition:all .3s 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:2px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);border-radius:0 0 2px 2px}.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-border-subtle)}.filterTitle{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary)}.closeFilter{appearance:none;width:28px;height:28px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease-smooth)}.closeFilter:hover{background:var(--color-surface-hover);color:var(--color-text)}.row{display:flex;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-md)}.row:last-child{margin-bottom:0}.label{width:36px;padding-top:7px;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);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:400;color:var(--color-text-secondary);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;transition:all .2s var(--ease-smooth)}.chip:hover{background:var(--color-surface-hover);border-color:var(--color-text-muted);color:var(--color-text)}.chip.active{font-weight:500;color:var(--color-white);background:var(--color-accent);border-color:var(--color-accent)}.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-border-subtle);gap:var(--space-sm)}.btn{appearance:none;font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--color-text-secondary);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:8px 14px;cursor:pointer;transition:all .2s var(--ease-smooth)}.btn:hover{color:var(--color-text);border-color:var(--color-text-muted);background:var(--color-surface-hover)}.btn:active{transform:scale(.98)}.btn.primary{color:var(--color-white);background:var(--color-accent);border-color:var(--color-accent)}.btn.primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.filterBackdrop{position:fixed;inset:0;z-index:38;background:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s 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:darkReveal .6s var(--ease-out-expo) forwards}@keyframes darkReveal{0%{opacity:1}to{opacity:0}}