*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Noto Sans SC','Inter',sans-serif;background:#1A1816;color:#E8E4DE;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;height:100%;max-width:430px;margin:0 auto;overflow:hidden;background:#1A1816}

.grain-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");background-size:200px;mix-blend-mode:overlay;opacity:.12}
.vignette-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:998;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.45) 100%)}

.progress-bar{position:fixed;top:0;left:0;width:100%;height:3px;z-index:200;background:rgba(255,255,255,.04)}
.progress-bar .fill{height:100%;width:10%;background:linear-gradient(90deg,#B8A99A,#D4C5B5);transition:width .5s ease;border-radius:0 2px 2px 0}
.page-counter{position:fixed;top:12px;left:20px;z-index:200;font-size:10px;letter-spacing:2px;color:rgba(232,228,222,.3);font-family:'Inter',sans-serif}

.music-btn{position:fixed;top:10px;right:16px;z-index:200;width:36px;height:36px;border-radius:50%;border:1px solid rgba(232,228,222,.15);background:rgba(26,24,22,.5);backdrop-filter:blur(8px);color:rgba(232,228,222,.5);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;font-family:inherit;padding:0}
.music-btn:active{transform:scale(.88)}
.music-btn.playing{color:#E8E4DE;border-color:rgba(232,228,222,.25);background:rgba(26,24,22,.7)}
.music-btn.playing .music-icon{animation:spin 3s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.nav-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:150;font-size:22px;color:rgba(232,228,222,.08);opacity:0;transition:opacity .5s;pointer-events:none;font-family:'Inter',sans-serif;font-weight:100}
.nav-arrow.show{opacity:1;pointer-events:auto}
.nav-arrow.left{left:10px}.nav-arrow.right{right:10px}

.page{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity .6s ease,transform .6s ease,visibility 0s .6s;will-change:opacity,transform;overflow:hidden}
.page.active{opacity:1;visibility:visible;transition:opacity .6s ease,transform .6s ease,visibility 0s 0s;z-index:10}
.page.exit-left{opacity:0;transform:translateX(-40px)}.page.exit-right{opacity:0;transform:translateX(40px)}
.page.enter-right{opacity:0;transform:translateX(40px)}.page.enter-left{opacity:0;transform:translateX(-40px)}
.page.enter-right.active,.page.enter-left.active{opacity:1;transform:translateX(0)}

.page-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center}
.page-bg.fallback-dark{background:linear-gradient(160deg,#2A2826,#1A1816)}
.page-bg.fallback-warm{background:linear-gradient(160deg,#3A322A,#2A2420)}
.page-bg.fallback-cool{background:linear-gradient(160deg,#2A2E32,#1A2228)}

.text-overlay{position:absolute;z-index:2;width:100%;padding:24px 24px 16px;pointer-events:none}
.text-overlay.bottom{bottom:0}
.text-overlay.top{top:0}
.text-overlay.center{text-align:center}
.text-overlay.left{text-align:left}
.text-overlay.right{text-align:right}
.text-overlay.dark{background:linear-gradient(to top,rgba(26,24,22,.85) 0%,rgba(26,24,22,.4) 60%,transparent 100%)}
.text-overlay.dark-top{background:linear-gradient(to bottom,rgba(26,24,22,.7) 0%,rgba(26,24,22,.2) 60%,transparent 100%)}

.text-overlay .label{font-size:10px;letter-spacing:3px;color:rgba(232,228,222,.35);font-weight:300;margin-bottom:4px}
.text-overlay .title{font-size:20px;font-weight:400;letter-spacing:2px;color:#E8E4DE;line-height:1.5}
.text-overlay .title-sm{font-size:16px;font-weight:400;letter-spacing:2px;color:#E8E4DE;line-height:1.5}
.text-overlay .desc{font-size:13px;font-weight:300;color:rgba(232,228,222,.45);margin-top:6px;letter-spacing:.5px;line-height:1.7}
.text-overlay .sub{font-size:10px;color:rgba(232,228,222,.2);margin-top:6px;letter-spacing:2px;font-family:'Inter',sans-serif}
.text-overlay .price-tag{display:inline-block;font-size:11px;color:rgba(232,228,222,.4);letter-spacing:1px;margin-top:6px;padding:2px 10px;border:1px solid rgba(232,228,222,.08);border-radius:4px}
.text-overlay .badge{display:inline-block;font-size:9px;color:rgba(232,228,222,.25);letter-spacing:1px;padding:2px 10px;border:1px solid rgba(232,228,222,.06);border-radius:12px;margin-top:6px}

.like-btn{position:absolute;bottom:24px;right:20px;z-index:20;font-size:24px;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1);background:none;border:none;outline:none;color:rgba(232,228,222,.2);text-shadow:0 0 20px rgba(0,0,0,.3)}
.like-btn:active{transform:scale(1.35)}.like-btn.liked{color:#E85A5A;animation:likePop .4s ease}
@keyframes likePop{0%{transform:scale(1)}30%{transform:scale(1.5)}60%{transform:scale(.9)}100%{transform:scale(1)}}

.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);z-index:300;padding:10px 28px;background:rgba(26,24,22,.85);backdrop-filter:blur(12px);border:1px solid rgba(232,228,222,.06);border-radius:30px;color:#E8E4DE;font-size:12px;letter-spacing:1px;opacity:0;transition:opacity .4s,transform .4s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

#page-1{display:flex;justify-content:center;padding:0 32px;background:#1A1816}
#page-1 .cover-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center 20%}
#page-1 .cover-bg.fallback{background:linear-gradient(160deg,#2A2E32,#1A2228)}
#page-1 .cover-scrim{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(26,24,22,.3) 0%,rgba(26,24,22,.6) 50%,rgba(26,24,22,.9) 100%);z-index:1}
#page-1 .cover-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}
#page-1 .cover-content .main-title{font-size:28px;font-weight:300;letter-spacing:8px;color:#E8E4DE;text-align:center;opacity:0;transform:translateY(-16px);transition:opacity 1s ease,transform 1s ease}
#page-1 .cover-content .main-title.show{opacity:1;transform:translateY(0)}
#page-1 .cover-content .sub-title{font-size:9px;font-weight:300;letter-spacing:5px;color:rgba(232,228,222,.2);margin-top:12px;opacity:0;transition:opacity .8s ease .4s}
#page-1 .cover-content .sub-title.show{opacity:1}
#page-1 .cover-content .entry-hint{font-size:11px;color:rgba(232,228,222,.2);letter-spacing:4px;margin-top:48px;opacity:0;cursor:pointer}
#page-1 .cover-content .entry-hint.show{opacity:1;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.2}50%{opacity:.5}}
#page-1 .footer-note{position:absolute;bottom:28px;left:0;width:100%;text-align:center;z-index:2;font-size:10px;color:rgba(232,228,222,.1);letter-spacing:2px}

.tag-group{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;pointer-events:auto}
.tag-group .tag{font-size:10px;color:rgba(232,228,222,.28);padding:4px 14px;border:1px solid rgba(232,228,222,.05);border-radius:20px;cursor:pointer;transition:all .25s;letter-spacing:.5px;pointer-events:auto}
.tag-group .tag:active{transform:scale(.95)}
.tag-group .tag.active{color:#E8E4DE;border-color:rgba(232,228,222,.15);background:rgba(232,228,222,.05)}

.lightbox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;background:rgba(0,0,0,.92);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .4s;padding:40px 24px}
.lightbox-overlay.open{opacity:1;pointer-events:auto}
.lightbox-overlay .lb-img{width:90%;height:70%;background-size:contain;background-repeat:no-repeat;background-position:center}
.lightbox-overlay .lb-label{margin-top:16px;font-size:13px;font-weight:300;color:rgba(232,228,222,.4);letter-spacing:1px;text-align:center}
.lightbox-overlay .lb-close{position:absolute;top:40px;right:24px;font-size:26px;color:rgba(232,228,222,.15);cursor:pointer;background:none;border:none;font-family:'Inter',sans-serif}
.lb-hint{position:absolute;z-index:5;font-size:10px;color:rgba(232,228,222,.12);letter-spacing:2px;padding:4px 12px;border:1px solid rgba(232,228,222,.05);border-radius:12px;cursor:pointer;transition:color .3s;pointer-events:auto}

.mood-toggle{position:absolute;bottom:100px;right:20px;z-index:20;padding:6px 14px;border:1px solid rgba(232,228,222,.05);border-radius:30px;background:rgba(26,24,22,.4);backdrop-filter:blur(8px);color:rgba(232,228,222,.2);font-size:9px;letter-spacing:2px;cursor:pointer;transition:all .3s;font-family:inherit;pointer-events:auto}
.mood-toggle:active{transform:scale(.95)}.mood-toggle.warm{color:#E8D5B5;border-color:rgba(232,213,181,.1)}
body.mood-warm .page-bg{filter:saturate(.6) contrast(.9) brightness(1.05) sepia(.08);transition:filter .5s}
body.mood-warm .vignette-overlay{background:radial-gradient(ellipse at center,transparent 50%,rgba(180,120,60,.12) 100%);transition:background .5s}

.date-stamp{position:absolute;bottom:14px;left:24px;font-size:9px;color:rgba(232,228,222,.08);letter-spacing:2px;z-index:2;font-family:'Inter',sans-serif;pointer-events:none}

#page-10{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#1A1816;padding:0 24px}
.collage-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;width:100%;max-width:320px}
.collage-grid .cell{background:rgba(232,228,222,.03);border-radius:3px;aspect-ratio:1/1;overflow:hidden;opacity:0;transform:scale(.92);animation:collageReveal .45s ease forwards}
.collage-grid .cell:nth-child(1){animation-delay:.0s}.collage-grid .cell:nth-child(2){animation-delay:.06s}
.collage-grid .cell:nth-child(3){animation-delay:.12s}.collage-grid .cell:nth-child(4){animation-delay:.18s}
.collage-grid .cell:nth-child(5){animation-delay:.24s}.collage-grid .cell:nth-child(6){animation-delay:.30s}
.collage-grid .cell:nth-child(7){animation-delay:.36s}.collage-grid .cell:nth-child(8){animation-delay:.42s}
.collage-grid .cell:nth-child(9){animation-delay:.48s}
@keyframes collageReveal{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
.collage-grid .cell .inner{width:100%;height:100%;background:linear-gradient(135deg,rgba(232,228,222,.04),rgba(232,228,222,.01));display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(232,228,222,.05)}
.end-text{text-align:center;margin-top:20px}
.end-text .m{font-size:18px;font-weight:300;letter-spacing:4px;color:#E8E4DE}
.end-text .s{font-size:10px;color:rgba(232,228,222,.18);letter-spacing:4px;margin-top:6px;font-weight:300}
.end-text .like-sum{font-size:11px;color:rgba(232,228,222,.18);margin-top:10px;letter-spacing:1px}
.save-btn{margin-top:16px;padding:8px 36px;border:1px solid rgba(232,228,222,.05);border-radius:30px;background:rgba(232,228,222,.02);color:rgba(232,228,222,.2);font-size:10px;letter-spacing:3px;cursor:pointer;transition:all .3s;font-family:inherit;pointer-events:auto}
.save-btn:active{transform:scale(.96);background:rgba(232,228,222,.06)}
.copyright{position:absolute;bottom:16px;left:0;width:100%;text-align:center;font-size:8px;color:rgba(232,228,222,.05);letter-spacing:2px;pointer-events:none}

.neon-glow{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 40%,rgba(200,60,60,.03) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(60,80,200,.03) 0%,transparent 50%);pointer-events:none;z-index:1}

@media(max-width:375px){
#page-1 .cover-content .main-title{font-size:22px;letter-spacing:6px}
.text-overlay .title{font-size:17px}.text-overlay .title-sm{font-size:14px}
.text-overlay{padding:16px 16px 12px}
.collage-grid{max-width:260px}
}
@media(min-width:431px){#app{border-left:1px solid rgba(255,255,255,.02);border-right:1px solid rgba(255,255,255,.02)}}
@media(orientation:landscape)and(max-height:500px){
.text-overlay .title{font-size:14px}.text-overlay .title-sm{font-size:12px}
.like-btn{bottom:12px;right:14px;font-size:20px}
.collage-grid{max-width:180px}
.end-text .m{font-size:14px}
.mood-toggle{bottom:50px;padding:4px 10px;font-size:8px}
}
::-webkit-scrollbar{display:none}