@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Source+Sans+3:wght@300;400;500;600&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--color-bg: #faf8f5;--color-bg-warm: #f5f1eb;--color-text: #2d2926;--color-text-muted: #6b635b;--color-text-light: #9a918a;--color-accent: #c4a77d;--color-accent-dark: #a08460;--color-border: rgba(45, 41, 38, .08);--color-shadow: rgba(45, 41, 38, .06);--color-shadow-hover: rgba(45, 41, 38, .12);--color-white: #ffffff;--color-danger: #b85450;--color-danger-hover: #9a4340;--font-display: "Playfair Display", Georgia, serif;--font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-medium: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{max-width:1400px;margin:0 auto;padding:40px 32px 80px;min-height:100vh}header{margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--color-border);text-align:center}header h1{font-family:var(--font-display);font-size:clamp(28px,5vw,42px);font-weight:500;color:var(--color-text);letter-spacing:-.02em;position:relative;display:inline-block}header h1:after{content:"";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:40px;height:2px;background:var(--color-accent)}.gallery-page{display:flex;flex-direction:column;gap:48px}.upload-form{background:var(--color-white);border-radius:var(--radius-xl);padding:32px 40px;box-shadow:0 1px 3px var(--color-shadow),0 8px 32px var(--color-shadow);display:flex;flex-wrap:wrap;gap:16px;align-items:center;border:1px solid var(--color-border);position:relative;overflow:hidden}.upload-form:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-accent) 0%,var(--color-accent-dark) 50%,var(--color-accent) 100%)}.upload-form input[type=text]{flex:1;min-width:180px;padding:14px 20px;font-family:var(--font-body);font-size:15px;font-weight:400;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.upload-form input[type=text]::placeholder{color:var(--color-text-light);font-weight:300}.upload-form input[type=text]:focus{border-color:var(--color-accent);background:var(--color-white);box-shadow:0 0 0 3px #c4a77d26}.upload-form input[type=file]{flex:0 0 auto;padding:12px 16px;font-family:var(--font-body);font-size:14px;color:var(--color-text-muted);background:var(--color-bg);border:2px dashed var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}.upload-form input[type=file]:hover{border-color:var(--color-accent);background:var(--color-bg-warm)}.upload-form input[type=file]::file-selector-button{padding:8px 16px;margin-right:12px;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--color-text);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.upload-form input[type=file]::file-selector-button:hover{background:var(--color-bg-warm);border-color:var(--color-accent)}.upload-form button{padding:14px 32px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--color-white);background:var(--color-text);border:none;border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast);position:relative;overflow:hidden}.upload-form button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left var(--transition-medium)}.upload-form button:hover:not(:disabled){background:var(--color-accent-dark);transform:translateY(-2px);box-shadow:0 6px 20px #a084604d}.upload-form button:hover:before{left:100%}.upload-form button:active:not(:disabled){transform:translateY(0)}.upload-form button:disabled{background:var(--color-text-light);cursor:not-allowed;transform:none}.photo-grid{columns:4;column-gap:24px;width:100%}.photo-grid>p{column-span:all;text-align:center;padding:80px 20px;font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--color-text-muted);font-style:italic}.photo-card{break-inside:avoid;margin-bottom:24px;background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;box-shadow:0 2px 8px var(--color-shadow);transition:transform var(--transition-medium),box-shadow var(--transition-medium);position:relative}.photo-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(45,41,38,.03) 100%);opacity:0;transition:opacity var(--transition-medium);pointer-events:none;z-index:1}.photo-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 12px 40px var(--color-shadow-hover),0 4px 12px var(--color-shadow)}.photo-card:hover:before{opacity:1}.photo-card img{width:100%;height:auto;display:block;transition:transform var(--transition-slow),filter var(--transition-medium)}.photo-card:hover img{transform:scale(1.03);filter:brightness(1.02) contrast(1.01)}.photo-info{padding:18px 20px;background:var(--color-white);position:relative;z-index:2}.photo-info:before{content:"";position:absolute;top:0;left:20px;right:20px;height:1px;background:var(--color-border)}.photo-info h3{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--color-text);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.detail-page{max-width:900px;margin:0 auto;padding:0 20px}.detail-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--color-border)}.detail-actions button{padding:12px 24px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--color-text);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.detail-actions button:hover{background:var(--color-bg-warm);border-color:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 12px var(--color-shadow)}.detail-actions .delete-btn{background:var(--color-danger);color:var(--color-white);border-color:var(--color-danger)}.detail-actions .delete-btn:hover{background:var(--color-danger-hover);border-color:var(--color-danger-hover);box-shadow:0 4px 16px #b854504d}.detail-content{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 2px 8px var(--color-shadow),0 16px 48px var(--color-shadow)}.detail-content img{width:100%;display:block;border-radius:0;margin-bottom:0}.detail-info{padding:32px 40px 40px;background:var(--color-white)}.detail-info h2{font-family:var(--font-display);font-size:clamp(24px,4vw,32px);font-weight:500;color:var(--color-text);margin-bottom:16px;letter-spacing:-.01em}.detail-info p{font-size:16px;font-weight:300;color:var(--color-text-muted);line-height:1.8}.gallery-page>div:first-child:last-child,.detail-page>div:only-child{display:flex;align-items:center;justify-content:center;min-height:300px;font-family:var(--font-body);font-size:16px;font-weight:400;color:var(--color-text-light);font-style:italic}@media(max-width:1200px){.photo-grid{columns:3;column-gap:20px}.photo-card{margin-bottom:20px}}@media(max-width:900px){.app{padding:32px 24px 60px}header{margin-bottom:36px;padding-bottom:24px}.photo-grid{columns:2;column-gap:16px}.photo-card{margin-bottom:16px;border-radius:var(--radius-md)}.upload-form{padding:24px 28px;border-radius:var(--radius-lg);gap:12px}.upload-form input[type=text]{min-width:140px;padding:12px 16px}.upload-form button{padding:12px 24px}.detail-info{padding:24px 28px 32px}}@media(max-width:600px){.app{padding:24px 16px 48px}header{margin-bottom:28px;padding-bottom:20px}.gallery-page{gap:32px}.photo-grid{columns:1;column-gap:0}.photo-card{margin-bottom:20px;border-radius:var(--radius-lg)}.photo-info{padding:16px 18px}.upload-form{padding:20px;border-radius:var(--radius-md);flex-direction:column}.upload-form input[type=text]{width:100%;min-width:100%}.upload-form input[type=file]{width:100%}.upload-form button{width:100%;padding:14px 24px}.detail-page{padding:0}.detail-actions{margin-bottom:24px;padding-bottom:16px}.detail-actions button{padding:10px 18px;font-size:13px}.detail-content{border-radius:var(--radius-lg)}.detail-info{padding:20px 24px 28px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.photo-card{animation:fadeInUp var(--transition-medium) ease-out;animation-fill-mode:backwards}.photo-card:nth-child(1){animation-delay:.05s}.photo-card:nth-child(2){animation-delay:.1s}.photo-card:nth-child(3){animation-delay:.15s}.photo-card:nth-child(4){animation-delay:.2s}.photo-card:nth-child(5){animation-delay:.25s}.photo-card:nth-child(6){animation-delay:.3s}.photo-card:nth-child(7){animation-delay:.35s}.photo-card:nth-child(8){animation-delay:.4s}.photo-card:nth-child(9){animation-delay:.45s}.photo-card:nth-child(10){animation-delay:.5s}.photo-card:nth-child(11){animation-delay:.55s}.photo-card:nth-child(12){animation-delay:.6s}.app:before{content:"";position:fixed;inset: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='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity:.02;pointer-events:none;z-index:9999}.upload-form input:focus-visible,.upload-form button:focus-visible,.detail-actions button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.photo-card:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}::selection{background:var(--color-accent);color:var(--color-white)}