.phone-shell{--frame-w:min(100vw,50dvh,440px);--top-h:calc(var(--frame-w)*.1222826);--bottom-h:calc(var(--frame-w)*.1834239);--video-h:calc(var(--frame-w)*.5163 - 24px);width:var(--frame-w)}
.topbar{background:transparent url('./assets/optimized/topbar.webp') center/100% 100% no-repeat}
.brand{align-items:flex-end;gap:min(2.5vw,11px)}
.brand strong{display:none}
.brand:before{content:"";display:block;flex:0 0 auto;width:min(28vw,123px);height:min(7vw,31px);background:url('./assets/optimized/lipulife-logo-paper.png') left bottom/contain no-repeat}
.brand span{padding-bottom:0;font-size:0}
.brand span:after{content:"TRAVEL / FOOD / STYLE";color:#eee1ca;font:clamp(7px,1.95vw,9px)/1 SourceHanHeavy,sans-serif;letter-spacing:.035em;white-space:nowrap}
.bottombar{background:transparent url('./assets/optimized/bottombar.webp') center/100% 100% no-repeat}
.vlog-frame{clip-path:none;-webkit-mask-image:none;mask-image:none}
.home-main{top:calc(var(--top-h) - 5px)}
.bottombar{padding:0 2%}
.bottombar button{justify-content:center;gap:5px}
.bottombar img{width:min(8.8vw,38px);height:min(8vw,35px)}
.bottombar span{font-size:clamp(9px,2.8vw,13px)}
.bottombar{grid-template-columns:repeat(4,1fr);padding-right:1%;padding-left:1%}
.bottombar img{width:min(8vw,35px);height:min(7.5vw,33px)}
.bottombar span{font-size:clamp(8px,2.35vw,11px)}
.bottombar button:last-child img{transform:translateX(5%)}
.past-main,.video-main,.member-main{top:calc(var(--top-h) - 6px);bottom:calc(var(--bottom-h) - 7px)}
.past-main,.video-main,.member-main:not(.ticket-login){padding-top:6px}
.member-main.ticket-login{top:calc(var(--top-h) - 6px)!important;padding-top:26px!important}
html:not([data-preview-role="guest"]) .manage-main{top:calc(var(--top-h) - 6px);bottom:calc(var(--bottom-h) - 7px);padding-top:6px}
.vlog-frame{height:var(--video-h)}
.vlog-zone{height:var(--video-h)}
.video-edge-strip{position:absolute;z-index:7;left:0;top:calc(var(--video-h) - 1px);width:100%;height:auto;display:block;pointer-events:none}
.vlog-dots{z-index:9;bottom:8px}
.vlog-dots button{box-shadow:0 1px 2px #0007}
.trip-stage{z-index:21;top:calc(var(--video-h) - 36px)}
.trip-card{transform-origin:50% 50%}
.play-button{top:auto;right:3%;bottom:5%;width:min(8.5vw,38px);height:min(8.5vw,38px);box-shadow:1px 2px 0 #a94442}
.play-button span{font-size:12px}
.play-button small{font-size:5px}
