*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,'SF Pro Display','PingFang SC',sans-serif;background:var(--bg);color:var(--text);height:100dvh;height:-webkit-fill-available;overflow:hidden;display:flex;justify-content:center;-webkit-font-smoothing:antialiased;overscroll-behavior:none;position:fixed;top:0;left:0;right:0;bottom:0}html.starry-on body{background:transparent !important}html.starry-on .app{background:transparent !important}
.app{width:100%;display:flex;flex-direction:column;height:100%;overflow-y:auto}

/* ── Global UI Standards ── */
.btn{height:48px;padding:0 20px;border:none;border-radius:16px;background:var(--card);color:var(--text);font-size:16px;font-weight:500;cursor:pointer;transition:all .15s ease;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{opacity:.85}
.btn .icon{margin-right:8px;font-size:18px}
img.pv{max-width:90vw;max-height:50vh;object-fit:contain;background:var(--card);border-radius:16px;margin:20px auto;display:block}
.ti{width:100%;padding:12px 16px;border:1px solid var(--menu-sep);border-radius:16px;background:var(--card);color:var(--text);font-size:16px;outline:none;display:block;letter-spacing:-.3px}
.ti::placeholder{color:var(--muted)}
/* ── Glass Surface Utility ── */
.glass{background:var(--card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--nav-border);border-radius:18px}
/* ── Page-Enter Animation ── */
.page-enter{animation:pageEnter .45s ease both}
@keyframes pageEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes br{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes tilt{0%,100%{transform:perspective(800px) rotateY(-5deg) rotateX(1deg) scale(.97)}25%{transform:perspective(800px) rotateY(0deg) rotateX(0deg) scale(1)}50%{transform:perspective(800px) rotateY(5deg) rotateX(-1deg) scale(.97)}75%{transform:perspective(800px) rotateY(0deg) rotateX(0deg) scale(1)}}
.depth3d{
  animation:tilt 4s ease-in-out infinite;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 5px rgba(255,255,255,.1),0 0 30px rgba(255,107,53,.08) !important;
  border-radius:20px !important;
  position:relative;
  transform-style:preserve-3d;
}
.depth3d::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.5) 100%);
  pointer-events:none;border-radius:inherit;
}
.depth-btn{background:var(--accent) !important;color:#fff !important;text-align:center !important}
/* New layout styles */
.topbar{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--nav-border);-webkit-transform:translateZ(0);transform:translateZ(0)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;justify-content:space-around;padding:6px 0 calc(18px + env(safe-area-inset-bottom, 0px));background:var(--nav-bg);border-top:1px solid var(--nav-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* Starry mode: make bars transparent via CSS so there is no black bar flash before JS runs */
html.starry-on .topbar{background:rgba(0,0,0,.35) !important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html.starry-on .bottom-nav{background:rgba(0,0,0,.35) !important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html.starry-on [id^=tab-]{background:transparent !important}
html.starry-on #collage{background:transparent !important}
html.starry-on #timeFragment{background:transparent !important}
.nav-item{flex:1;min-height:52px;border:0;background:transparent;color:var(--text);opacity:.4;transition:opacity .25s ease,color .25s ease;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 0;position:relative;-webkit-tap-highlight-color:transparent;font:inherit}
.nav-item.active{opacity:1}
.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:12px}
.nav-item .nav-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform .25s ease,color .25s ease}
.nav-item.active .nav-icon{transform:scale(1.08);color:var(--accent)}
.nav-item.active .nav-label{font-weight:600;color:var(--accent);transition:color .25s ease}
.nav-item .nav-label{font-size:10px;letter-spacing:-.2px;transition:color .25s ease}
.nav-item:active .nav-icon{transform:scale(.92)}
/* Active tab: subtle pill indicator */
.nav-item.active::before{content:'';position:absolute;top:2px;bottom:2px;left:12px;right:12px;background:var(--accent);opacity:.08;border-radius:14px;z-index:-1;transition:opacity .25s ease}
/* Center (Moment) tab: slightly elevated camera entry */
#nav-photos .nav-icon svg{width:26px;height:26px}
#nav-photos.active .nav-icon{transform:scale(1.06)}


#sideMenu{
  position:fixed;top:0;left:-280px;bottom:0;width:280px;background:var(--menu-bg);z-index:4000;
  transition:transform .25s ease;overflow-y:auto;padding:calc(30px + env(safe-area-inset-top, 0px)) 20px calc(30px + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;
}
#sideMenu.open{transform:translateX(280px)}
#quickSettings{
  position:fixed;top:0;right:0;bottom:0;width:280px;background:var(--menu-bg);z-index:4000;
  transition:transform .25s ease;overflow-y:auto;padding:calc(30px + env(safe-area-inset-top, 0px)) 20px calc(30px + env(safe-area-inset-bottom, 0px));
  transform:translateX(280px);
}
#quickSettings.open{transform:translateX(0)}
#menuOverlay{
  position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-alpha);
  z-index:3999;display:none;
}
.menu-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--menu-sep);
  color:var(--text);font-size:16px;letter-spacing:-.3px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.menu-row:active{opacity:.7}
.menu-row.danger{color:rgba(255,80,80,.8)}
.menu-row .menu-arrow{color:var(--muted);font-size:14px}
.section-title{color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:24px 0 8px}
.wf-card-old{break-inside:avoid;margin-bottom:14px;background:var(--card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;overflow:hidden;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;min-height:140px;box-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,.25));transition:transform .2s ease,opacity .2s ease;animation:cardFadeIn .5s ease forwards}
.wf-card-old:active{transform:scale(.97);opacity:.9}
.wf-card-old img{width:100%;display:block;background:rgba(255,255,255,.03);min-height:120px;object-fit:cover}
.wf-card-old .wf-info{position:absolute;bottom:0;left:0;right:0;padding:30px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));border-radius:0 0 20px 20px;pointer-events:none}
.wf-card-old .wf-time{font-size:10px;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.5px}
.wf-card-old .wf-thought{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:4px;line-height:1.3;font-weight:500;letter-spacing:-.2px}
.wf-card-old .wf-author{font-size:10px;color:rgba(255,255,255,.65);margin-top:4px;letter-spacing:-.1px}
.wf-card-old .wf-likes{font-size:10px;color:var(--accent);margin-top:2px}
@keyframes cardFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Segmented control for Explore modes */
.explore-seg{display:flex;background:rgba(255,255,255,.06);border-radius:10px;padding:2px;margin:0 16px 12px}
.explore-seg-btn{flex:1;text-align:center;padding:8px 0;border-radius:8px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .2s ease;letter-spacing:-.2px}
.explore-seg-btn.active{background:rgba(255,255,255,.12);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.2)}
/* Immersive breathing & ripple */
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(var(--rz))}50%{transform:translate(-50%,calc(-50% - 3px)) scale(1) rotate(calc(var(--rz) + 1deg))}}
@keyframes ripple{0%{width:0;height:0;opacity:.4}100%{width:200px;height:200px;opacity:0}}
.card-breathing{animation:breathe 4s ease-in-out infinite}
/* Filmstrip scroll */
@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.film-track{display:flex;gap:16px;position:absolute;left:0;top:0;height:170px;will-change:transform;align-items:center;transform:translateZ(0);scroll-snap-type:x mandatory}
.film-track.left{animation:scroll-left 45s linear infinite}
.film-track.right{animation:scroll-right 45s linear infinite}
.film-photo{flex-shrink:0;width:130px;height:160px;border-radius:14px;overflow:hidden;position:relative;background:var(--card);box-shadow:var(--shadow-md,0 4px 12px rgba(0,0,0,.25));transition:transform .35s ease,opacity .35s ease}
.film-photo:hover{transform:scale(1.03);opacity:1}
.film-photo img{width:100%;height:100%;object-fit:cover;display:block}
.film-label{position:absolute;bottom:0;left:0;right:0;padding:24px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.75));display:flex;flex-direction:column;gap:2px}
.film-label span{font-size:10px;color:rgba(255,255,255,.85);font-weight:500;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-photo .film-time-label{color:rgba(255,255,255,.55);font-size:9px;font-weight:400}
/* World recording breathing dot */
.world-recording-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-success,#4CD964);animation:dotBreathe 2s ease-in-out infinite;vertical-align:middle;margin-right:6px}
@keyframes dotBreathe{0%,100%{opacity:.4;box-shadow:0 0 0 0 rgba(76,217,100,.4)}50%{opacity:1;box-shadow:0 0 6px 2px rgba(76,217,100,.6)}}
.film-photo{flex-shrink:0;width:160px;height:160px;border-radius:12px;overflow:hidden;box-shadow:var(--card-shadow,0 1px 2px rgba(0,0,0,.15));cursor:pointer;position:relative;transition:transform .2s ease;background:var(--card,#1a1a1d)}
.film-photo:active{transform:scale(.97);opacity:.85}
.film-photo img{width:100%;height:100%;display:block;object-fit:cover;border-radius:8px}
.film-photo .film-label{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.45));color:rgba(255,255,255,.75);font-size:10px;font-weight:500;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:4px;align-items:center}
.film-photo .film-time-label{color:var(--muted,#8E8E93);font-size:10px;flex-shrink:0;font-weight:400}
/* Pulse dot */
@keyframes pulse-dot{0%,100%{opacity:.2}50%{opacity:1}}

.custom-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center}
.custom-dialog{background:var(--card);border-radius:14px;padding:24px 20px 20px;max-width:300px;width:80%;text-align:center;color:var(--text)}
.custom-dialog p{font-size:16px;line-height:1.5;margin-bottom:20px;white-space:pre-wrap}
.custom-dialog .btn-row{display:flex;gap:10px}
.custom-dialog .btn-row button{flex:1;padding:12px;border:none;border-radius:12px;font-size:16px;cursor:pointer}
.custom-dialog .btn-cancel{background:rgba(255,255,255,.1);color:var(--text)}
.custom-dialog .btn-ok{background:var(--accent);color:#fff;font-weight:600}
/* ====== Light Mode Sky ====== */
.world-stars[data-mode="light"]{background:var(--bg,#F5F5F7);background-attachment:fixed}
.world-stars[data-mode="light"]::before{display:none}
.world-stars[data-mode="light"] canvas{display:none}
/* 此刻 Starry World Engine - v284 */
/* ====== Starry World ====== */
.world-stars{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:-webkit-fill-available;z-index:0;pointer-events:none;overflow:hidden}
.world-stars::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:-webkit-fill-available;background:radial-gradient(ellipse at 30% 20%,rgba(30,25,50,.25) 0%,transparent 55%),radial-gradient(ellipse at 70% 60%,rgba(20,18,35,.15) 0%,transparent 50%),var(--world-bg);z-index:0;pointer-events:none}
.star{position:fixed;background:var(--color-text-inverse);border-radius:50%;z-index:1;animation:twinkle var(--d,3s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.star.tier-bright{box-shadow:0 0 3px 1px rgba(200,220,255,.8),0 0 8px 3px rgba(150,180,255,.4)}
.star.tier-mid{box-shadow:0 0 1px rgba(200,220,255,.3)}
.star.tier-dim{box-shadow:none}
.star.dimmed{opacity:.15!important;transition:opacity .5s}
@keyframes twinkle{0%,100%{opacity:var(--lo,.3)}50%{opacity:var(--hi,.9)}}
.meteor{position:fixed;z-index:2;pointer-events:none;animation:meteor var(--mDur,.7s) linear forwards}
.meteor::before{content:'';position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--color-text-inverse);box-shadow:0 0 12px 4px rgba(255,255,255,.9),0 0 24px 8px rgba(200,210,255,.5);z-index:1}
.meteor-trail{position:absolute;top:0;left:-100px;width:100px;height:2px;background:linear-gradient(270deg,rgba(255,255,255,.95) 0%,rgba(200,180,255,.5) 40%,rgba(167,139,250,.2) 70%,transparent 100%);border-radius:1px;filter:blur(.5px);transform-origin:right center}
.meteor-trail::after{content:'';position:absolute;top:-3px;left:0;width:100%;height:8px;background:linear-gradient(270deg,rgba(255,255,255,.3) 0%,rgba(167,139,250,.1) 50%,transparent 100%);filter:blur(4px);border-radius:4px}
@keyframes meteor{0%{transform:translate(0,0) rotate(var(--ang,135deg));opacity:1}15%{opacity:1}70%{opacity:.2}100%{transform:translate(var(--dx,500px),var(--dy,500px)) rotate(var(--ang,135deg));opacity:0}}
.nebula{position:fixed;border-radius:50%;z-index:0;filter:blur(80px);animation:nebulaDrift var(--nd,75s) ease-in-out infinite alternate}
@keyframes nebulaDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(var(--nx,15px),var(--ny,20px)) scale(1.05)}}
.star-sparkle{animation:sparkleFlash .3s ease-out forwards!important}
@keyframes sparkleFlash{0%{opacity:1;transform:scale(1);box-shadow:0 0 4px 2px rgba(255,255,255,.9),0 0 16px 6px rgba(180,200,255,.6)}50%{opacity:1;transform:scale(2.5);box-shadow:0 0 6px 3px rgba(255,255,255,1),0 0 24px 10px rgba(200,220,255,.8)}100%{opacity:var(--lo,.3);transform:scale(1);box-shadow:0 0 0px 0px transparent}}
.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4CD964;margin-left:4px;vertical-align:middle;animation:pulse-dot 1s ease-in-out infinite}



/* ── Daily Time Book ── */
.daily-book-page{position:absolute;left:12px;right:12px;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.2);transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease;transform-origin:bottom center;will-change:transform}
.daily-book-page.flipping{transform:translateY(120%) rotateX(-30deg);opacity:0;transition:transform .35s cubic-bezier(.55,.06,.68,.19),opacity .3s ease}
.daily-book-page.flip-out{animation:pageFlipOut .4s ease forwards}
@keyframes pageFlipOut{0%{transform:translateY(0) rotateX(0);opacity:1}100%{transform:translateY(-30%) rotateX(-40deg) scale(.92);opacity:0}}
@keyframes pageReveal{0%{transform:translateY(60px);opacity:0}100%{transform:translateY(0);opacity:1}}
.daily-book-page.reveal{animation:pageReveal .35s ease forwards}
.page-0{z-index:50;transform:translateY(0) scale(1)}
.page-1{z-index:49;transform:translateY(6px) scale(.985);opacity:.5}
.page-2{z-index:48;transform:translateY(10px) scale(.97);opacity:.25}
.page-off{z-index:0;transform:translateY(14px) scale(.96);opacity:0}
@keyframes dailyReveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes revealFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes starBreathe{0%,100%{opacity:.2}50%{opacity:.45}}
@keyframes galleryFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes momentGlowBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes momentRingBreathe{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.5;transform:scale(1.01)}}
@keyframes globeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes globeDotPulse{0%,100%{box-shadow:0 0 8px var(--accent)}50%{box-shadow:0 0 16px var(--accent)}}
@keyframes capsuleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes capsuleParticle{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.6;transform:translateY(-8px)}}
@keyframes ceremonyFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ceremonyCapsuleSeal{0%{transform:scale(.85)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes ceremonyFill{from{height:0;opacity:0}to{height:60%;opacity:1}}
@keyframes ceremonyGlow{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}100%{opacity:.7;transform:scale(1)}}
@keyframes globeAppear{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes globeScan{0%{top:0}50%{top:calc(100% - 1px)}100%{top:0}}
@keyframes globeScanRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes globeOrbit1{0%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(30px,-10px) rotate(90deg)}50%{transform:translate(10px,-40px) rotate(180deg)}75%{transform:translate(-20px,-10px) rotate(270deg)}100%{transform:translate(0,0) rotate(360deg)}}
@keyframes globeOrbit2{0%{transform:translate(0,0)}25%{transform:translate(-25px,-20px)}50%{transform:translate(-15px,-50px)}75%{transform:translate(20px,-15px)}100%{transform:translate(0,0)}}
@keyframes globeOrbit3{0%{transform:translate(0,0)}33%{transform:translate(15px,-30px)}66%{transform:translate(-30px,-15px)}100%{transform:translate(0,0)}}
/* ── Moment Time Shutter ── */
@keyframes shutterGlowBreathe{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes shutterRingBreathe{0%,100%{opacity:.3}50%{opacity:.85}}
@keyframes shutterFlashRipple{0%{transform:scale(1);opacity:.8;box-shadow:0 0 0 0 rgba(220,200,165,.12)}100%{transform:scale(10);opacity:0;box-shadow:0 0 100px 50px rgba(220,200,165,0)}}
@keyframes stardustDrift{0%{transform:translateY(0) translateX(0);opacity:.5}20%{transform:translateY(-25px) translateX(12px);opacity:.7}40%{transform:translateY(-15px) translateX(-8px);opacity:.3}60%{transform:translateY(-35px) translateX(-4px);opacity:.6}80%{transform:translateY(-8px) translateX(10px);opacity:.4}100%{transform:translateY(0) translateX(0);opacity:.5}}
/* ── Daily Page Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes exploreToastIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes explorePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}


/* ====== Waterfall Cards V2 ====== */
.wf-card{break-inside:avoid;margin-bottom:12px;border-radius:18px;overflow:hidden;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;animation:cardFadeIn .5s ease forwards}
.wf-card img{width:100%;display:block;background:var(--card);object-fit:cover}
.wf-overlay{position:absolute;bottom:0;left:0;right:0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.5));pointer-events:none}
.wf-overlay span{font-size:11px;color:rgba(255,255,255,.82);font-weight:500;letter-spacing:.2px}
/* ====== Film Strip — Horizontal Reel ====== */
#film-strip{scrollbar-width:none;position:relative}
#film-strip::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,var(--accent) 0%,transparent 70%);opacity:.04;z-index:0}
#film-strip::-webkit-scrollbar{display:none}
#film-reel{align-items:center;gap:14px;position:relative;z-index:1}
.film-frame{flex-shrink:0;width:74vw;max-width:400px;scroll-snap-align:center;transition:transform .35s ease,opacity .35s ease;position:relative}
.film-frame.is-center{transform:scale(1);opacity:1}
.film-frame.is-edge{transform:scale(.92);opacity:.7}
.film-frame-body{background:var(--card);border-radius:14px;overflow:hidden;position:relative;padding:16px 0}
.film-frame-body::before,.film-frame-body::after{content:'';position:absolute;left:6px;right:6px;height:8px;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 5px,var(--muted) 5px,var(--muted) 8px);opacity:.08}
.film-frame-body::before{top:4px}
.film-frame-body::after{bottom:4px}
.film-frame-photo{margin:0 10px;border-radius:18px;overflow:hidden;background:var(--card)}
.film-frame-photo img{width:100%;display:block;max-height:52vh;object-fit:cover}
.film-frame-mark{text-align:right;padding:4px 12px 2px}
.film-frame-mark span{font-size:8px;color:var(--muted);letter-spacing:.8px;opacity:.28}
#film-info-panel{margin-top:0}
.film-info-loc{color:var(--text);font-size:15px;font-weight:600;letter-spacing:-.2px;margin-bottom:2px;opacity:.9}
.film-info-date{color:var(--text);font-size:11px;letter-spacing:.2px;opacity:.55;margin-bottom:4px}
.film-info-thought{color:var(--text);font-size:13px;line-height:1.5;letter-spacing:-.1px;opacity:.62;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.film-info-progress{margin-top:8px;font-size:11px;color:var(--muted);letter-spacing:.5px;opacity:.35}
#modeSwitcherWF,#modeSwitcherFilm{transition:color .25s ease}