@import "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&family=Outfit:wght@400;500;600&display=swap";:root{color:#17231d;font-synthesis:none;background:#eee8dc;font-family:Outfit,PingFang SC,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit;text-decoration:none}svg{stroke-width:1.8px;width:20px;height:20px}main{min-height:100dvh;padding-bottom:92px}.login{background:#eee8dc;padding:0}.login-photo{color:#fff;background:linear-gradient(#0d1b150a,#0d1b15a6),url(https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=85) 50%/cover;height:57dvh;min-height:390px;padding:28px 24px;position:relative;overflow:hidden}.grain{opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");position:absolute;inset:0}.stamp{letter-spacing:.18em;border:1px solid #ffffffb5;border-radius:99px;padding:7px 12px;font-size:10px;position:relative}.login-copy{position:absolute;bottom:34px;left:24px;right:24px}.login-copy small{letter-spacing:.12em;font-size:12px}.login-copy h1,.hero-copy h1{letter-spacing:-.05em;margin:10px 0 14px;font-family:Noto Serif SC,serif;font-size:50px;line-height:1.04}.login-copy h1 i{color:#ffc96d;font-style:normal}.login-copy p{color:#f5f1e7;max-width:320px;font-size:13px;line-height:1.7}.key-card{background:#f8f4eb;border-radius:30px 30px 0 0;margin:-18px 14px 0;padding:23px 20px 30px;position:relative;box-shadow:0 -12px 35px #1b281b20}.key-card>div{justify-content:space-between;align-items:baseline;display:flex}.key-card span{color:#b26634;letter-spacing:.16em;font-size:10px}.key-card b{font:700 16px Noto Serif SC,serif}.key-card label{border-bottom:1px solid #bcb7aa;align-items:center;margin:22px 0 10px;padding-bottom:8px;display:flex}.key-card input{letter-spacing:.42em;color:#17231d;background:0 0;border:0;outline:0;width:100%;font-size:34px;font-weight:600}.key-card input::placeholder{letter-spacing:.28em;color:#d3cec2}.key-card em{color:#8b877e;font-size:11px;font-style:normal}.key-card>button,.primary,.empty>button{color:#fff;background:#173e2c;border:0;border-radius:19px;width:100%;height:54px;margin-top:14px;font-weight:600}.privacy,.upload-tip{text-align:center;color:#8f8b82;margin-top:12px;font-size:10px;display:block}.form-error{color:#b94b37;margin:8px 0;font-size:12px}.home{color:#fff;background:#15251d;padding-bottom:92px}.home>header,.album>header{justify-content:space-between;align-items:center;height:70px;padding:14px 18px;display:flex}.home>header>div{letter-spacing:.1em;align-items:center;gap:8px;font-size:11px;display:flex}.home>header button{color:#fff;background:#ffffff12;border:0;border-radius:99px;align-items:center;gap:8px;padding:7px 9px 7px 13px;font-size:12px;display:flex}.home>header button svg{width:16px}.hero{background:#31443a;border-radius:30px;height:calc(100dvh - 182px);min-height:520px;margin:0 14px;display:block;position:relative;overflow:hidden}.hero>img{object-fit:cover;width:100%;height:100%;animation:4.5s ease-out both filmIn}.vignette{background:linear-gradient(#07100b48 0%,#0000 42%,#07100bd9 100%),radial-gradient(circle,#0000 40%,#07100b47);position:absolute;inset:0}.hero-top{letter-spacing:.13em;align-items:center;gap:12px;font-size:10px;display:flex;position:absolute;top:18px;left:18px;right:18px}.hero-top i{background:#ffffff80;flex:1;height:1px}.hero-copy{position:absolute;bottom:24px;left:20px;right:20px}.hero-copy small{letter-spacing:.1em;color:#f7d59c}.hero-copy h1{margin:10px 0 18px;font-size:42px}.hero-copy p{color:#ece8dd;font-size:12px}.hero-copy p span{float:right;border-bottom:1px solid #fff;padding-bottom:2px}.home-note{text-align:center;color:#b8c3bd;letter-spacing:.08em;margin-top:11px;font-size:10px}.home-note i{color:#f2835b;margin-right:9px;font-style:normal}@keyframes filmIn{0%{opacity:.4;filter:blur(4px);transform:scale(1.045)}to{opacity:1;filter:blur();transform:scale(1)}}nav{z-index:30;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#faf7efee;border:1px solid #ffffffb5;border-radius:26px;grid-template-columns:1fr 1fr 1fr;width:min(100% - 28px,440px);height:66px;padding:7px;display:grid;position:fixed;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 14px 35px #16241c35}nav a,nav button{color:#727b76;background:0 0;border:0;border-radius:19px;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:9px;display:flex}nav .active{color:#173e2c;background:#e5eade}nav button{color:#fff;background:#c76536}nav svg{width:19px}.album{background:#f3eee4;padding:0 14px 100px}.album>header{height:86px;padding:18px 4px 12px}.album>header small,.sheet header small{letter-spacing:.18em;color:#b2673e;font-size:9px}.album h1{margin:2px 0;font:900 27px Noto Serif SC,serif}.album>header button{color:#fff;background:#173e2c;border:0;border-radius:18px;align-items:center;gap:6px;padding:10px 13px;font-size:12px;display:flex}.filters{grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 16px;display:grid}.filters button{color:#696b67;text-align:left;background:#fbf8f1;border:1px solid #ded6c8;border-radius:18px;grid-template-rows:auto 1fr;grid-template-columns:28px 1fr auto;align-items:center;column-gap:7px;min-width:0;min-height:72px;padding:10px;transition:transform .2s,background .2s;display:grid;box-shadow:0 5px 16px #26382d08}.filters button.active{color:#fff;background:#1b3528;border-color:#1b3528;transform:translateY(-1px);box-shadow:0 8px 20px #173e2c1c}.filters i{color:#5d655f;background:#ebe5d9;border-radius:99px;place-items:center;min-width:24px;height:24px;padding:0 7px;font-size:10px;font-style:normal;display:grid}.filters button.active i{color:#fff;background:#ffffff20}.filter-icon{color:#234332;background:#e8eee8;border-radius:10px;grid-row:1/3;place-items:center;width:28px;height:28px;display:grid}.filters button.active .filter-icon{color:#f6ead7;background:#ffffff18}.filter-icon svg{width:15px}.filter-copy{flex-direction:column;gap:2px;min-width:0;display:flex}.filter-copy b{color:#233128;font-size:12px}.filter-copy small{color:#8a8b84;font-size:8px;line-height:1.3}.filters button.active .filter-copy b,.filters button.active .filter-copy small{color:#fff}.filters button.active .filter-copy small{opacity:.64}.masonry{columns:2;column-gap:10px}.photo-card{break-inside:avoid;background:#d9d2c5;border-radius:21px;min-height:145px;margin-bottom:10px;position:relative;overflow:hidden}.photo-card>a{width:100%;height:100%;display:block}.photo-card img{object-fit:cover;width:100%;height:100%;display:block}.photo-card img.broken{opacity:0}.photo-card:after{content:"";pointer-events:none;background:linear-gradient(#0000,#0b1711aa);position:absolute;inset:35% 0 0}.card-meta{z-index:2;color:#fff;flex-direction:column;display:flex;position:absolute;bottom:10px;left:11px}.card-meta b{font-size:12px}.card-meta span{opacity:.75;font-size:9px}.photo-card>button{z-index:3;color:#fff;background:#13221ba8;border:0;border-radius:99px;place-items:center;width:31px;height:31px;display:grid;position:absolute;top:8px;right:8px}.photo-card>button svg{width:14px}.empty{text-align:center;color:#435047;padding:clamp(42px,9dvh,76px) 28px}.empty-frame{background:#fffdf8;border:1px solid #e5ddcf;border-radius:50%;place-items:center;width:92px;height:92px;margin:auto;display:grid;box-shadow:0 16px 38px #27352b17,inset 0 0 0 9px #f4efe5}.empty-frame svg{width:26px;height:26px}.empty h2{margin:20px 0 7px;font:700 21px Noto Serif SC,serif}.empty p{color:#7c817d;font-size:12px;line-height:1.7}.empty>button{align-items:center;gap:8px;width:auto;padding:0 20px;display:inline-flex}.home .empty{color:#f5eee1;background:radial-gradient(circle at 50% 28%,#365747 0,#1b3528 38%,#10231a 100%);border-radius:30px;flex-direction:column;justify-content:center;min-height:calc(100dvh - 182px);margin:0 14px;display:flex;position:relative;overflow:hidden}.home .empty:before{content:"";border:1px solid #ffffff12;border-radius:50%;width:260px;height:260px;position:absolute;top:12%;box-shadow:0 0 0 34px #ffffff08,0 0 0 70px #ffffff05}.home .empty>*{z-index:1;position:relative}.home .empty-frame{color:#183426;background:#f3d3a0;border:0;box-shadow:0 18px 48px #07110c66}.home .empty h2{color:#fff8ed}.home .empty p{color:#c8d1ca}.home .empty>button{color:#183426;background:#f1c47e}.detail{color:#fff;background:#111b16;padding:0;overflow:hidden}.detail>img{object-fit:contain;width:100%;height:100dvh;display:block}.detail-shade{background:linear-gradient(#06100b75,#0000 25% 60%,#06100be8);position:absolute;inset:0}.back{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#10201888;border:1px solid #ffffff40;border-radius:99px;width:43px;height:43px;position:absolute;top:18px;left:16px}.detail-info{justify-content:space-between;align-items:end;display:flex;position:absolute;bottom:100px;left:20px;right:20px}.detail-info small{color:#efc488;letter-spacing:.1em;font-size:10px}.detail-info h2{margin:7px 0;font:700 20px Noto Serif SC,serif}.detail-info p{color:#ffffff8e;font-size:10px}.detail-info>button{color:#fff;background:#ffffff12;border:1px solid #ffffff40;border-radius:99px;width:44px;height:44px}.scrim{background:#07120c99;border:0;width:100%;height:100%;position:absolute;inset:0}.sheet-wrap,.confirm{z-index:60;position:fixed;inset:0}.sheet{width:100%;padding:10px 18px calc(20px + env(safe-area-inset-bottom));color:#17231d;background:#f7f2e8;border-radius:34px 34px 0 0;position:absolute;bottom:0}.handle{background:#cfc8bb;border-radius:99px;width:36px;height:4px;margin:0 auto 16px}.sheet header{justify-content:space-between;align-items:center;display:flex}.sheet h2{margin:3px 0 14px;font:700 24px Noto Serif SC,serif}.sheet header button{background:#e5dfd4;border:0;border-radius:99px;width:36px;height:36px}.picker{color:#48554d;background:#ebe7dd;border:1.5px dashed #aaa99e;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;height:230px;display:flex}.picker svg{width:34px;height:34px}.picker b{font-size:14px}.picker span{color:#848780;font-size:10px}.preview{background:#ded8cd;border-radius:17px;height:265px;position:relative;overflow:hidden}.preview img{object-fit:contain;width:100%;height:100%}.preview button{background:#fff;border:0;border-radius:99px;padding:8px 12px;font-size:11px;position:absolute;bottom:10px;right:10px}.confirm section{text-align:center;color:#1a241f;background:#f9f5ec;border-radius:22px;padding:24px;position:absolute;top:50%;left:20px;right:20px;transform:translateY(-50%)}.danger-icon{color:#b84f3d;background:#f2ded7;border-radius:99px;place-items:center;width:48px;height:48px;margin:auto;display:grid}.confirm h2{margin:15px 0 7px;font:700 20px Noto Serif SC,serif}.confirm p{color:#777b77;font-size:12px}.confirm section>div:last-child{grid-template-columns:1fr 1fr;gap:9px;margin-top:22px;display:grid}.confirm section button{border:0;border-radius:12px;height:45px}.confirm section button:last-child{color:#fff;background:#b94f3c}.toast{z-index:90;color:#fff;white-space:nowrap;background:#15251df0;border-radius:99px;padding:11px 16px;font-size:11px;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 25px #16251d40}.splash{color:#f6e8ce;background:#173e2c;place-items:center;min-height:100dvh;font:700 30px Noto Serif SC,serif;display:grid}.splash span{background:#f6e8ce;width:28px;height:1px;animation:1s infinite pulse;position:absolute}@keyframes pulse{50%{opacity:.3;transform:scaleX(2)}}@media (width>=700px){body{background:#d8d1c4}#root{background:#f3eee4;max-width:480px;min-height:100vh;margin:auto;box-shadow:0 0 70px #10201825}.sheet{width:480px;left:50%;transform:translate(-50%)}.confirm section{width:420px;left:50%;right:auto;transform:translate(-50%,-50%)}}@media (width<=520px){.album{padding:0 12px 84px}.album>header{height:76px;padding:13px 3px 8px}.album h1{font-size:24px}.album>header button{padding:9px 12px}.filters{margin:4px 0 10px}.filters button{border-radius:17px;grid-template-columns:26px 1fr auto;column-gap:6px;min-height:64px;padding:8px}.filter-icon{border-radius:9px;width:26px;height:26px}.filter-copy b{font-size:11px}.filter-copy small{font-size:7.5px}.filters i{min-width:21px;height:21px;padding:0 5px}.empty{padding:clamp(34px,6dvh,54px) 24px}.empty-frame{width:78px;height:78px;box-shadow:0 12px 30px #27352b14,inset 0 0 0 8px #f4efe5}.empty h2{margin-top:17px;font-size:19px}.empty p{max-width:300px;margin:0 auto}.empty>button{height:48px;margin-top:12px}nav{border-radius:23px;width:calc(100% - 24px);height:60px;padding:6px;bottom:8px}.home>header{height:62px;padding:10px 16px}.hero{border-radius:26px;height:calc(100dvh - 148px);min-height:0;margin:0 12px}.hero-copy h1{font-size:clamp(34px,10vw,42px)}.home .empty{min-height:calc(100dvh - 148px);margin:0 12px}.home-note{display:none}}@media (height<=720px) and (width<=520px){.album>header{height:68px}.filters button{min-height:58px}.filter-copy small{display:none}.empty{padding-top:26px;padding-bottom:22px}.empty-frame{width:66px;height:66px}.empty h2{margin-top:13px;font-size:18px}.empty p{font-size:11px}.hero-copy{bottom:18px}.hero-copy h1{margin:7px 0 12px}}.batch-sheet{max-height:92dvh;overflow-y:auto}.batch-preview{grid-template-columns:repeat(3,1fr);gap:8px;max-height:350px;padding:2px;display:grid;overflow-y:auto}.batch-preview>div{aspect-ratio:1;background:#ddd5c8;border-radius:12px;position:relative;overflow:hidden}.batch-preview img{object-fit:cover;width:100%;height:100%}.batch-preview span{color:#fff;background:#16251dcc;border-radius:99px;place-items:center;min-width:20px;height:20px;font-size:9px;display:grid;position:absolute;bottom:6px;left:6px}.batch-preview button{color:#26342d;background:#fff;border:0;border-radius:99px;place-items:center;width:25px;height:25px;display:grid;position:absolute;top:5px;right:5px;box-shadow:0 3px 10px #17231d33}.batch-preview button svg{width:13px}.add-more{color:#455149;background:0 0;border:1px solid #c8c1b5;border-radius:12px;justify-content:center;align-items:center;gap:7px;width:100%;height:42px;margin-top:10px;font-size:11px;display:flex}
