.phone-preview-button{display:inline-flex;align-items:center;gap:9px;background:#e8dfd0;border:0;border-radius:16px;padding:12px 18px;margin-top:18px;font:14px/1.4 'PingFang SC',sans-serif;color:#221f1c;cursor:pointer}
.phone-preview-button svg{width:17px;height:23px;flex:none}
.phone-preview-dialog{padding:0;border:0;border-radius:26px;background:#f8f7f4;color:#221f1c;width:min(390px,calc(100vw - 24px));height:min(820px,calc(100dvh - 32px));max-width:none;max-height:none;overflow:hidden;box-shadow:0 24px 80px #0005}
.phone-preview-layer{position:fixed;inset:0;overscroll-behavior:contain;z-index:200;display:grid;place-items:center;background:rgba(25,21,18,.65)}.phone-preview-layer[hidden]{display:none}.phone-preview-dialog{position:relative}
.phone-preview-head{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font:13px sans-serif;background:#f5f0e7}
.phone-preview-head button{border:0;border-radius:12px;background:#e8dfd0;padding:7px 12px;cursor:pointer}
.phone-preview-dialog iframe{display:block;width:100%;height:calc(100% - 48px);border:0}
.receipt-phone header,.receipt-phone main>nav,.receipt-phone main>section:not(#everyday),.receipt-phone footer,.receipt-phone #music-global,.receipt-phone #crab-pet,.receipt-phone .phone-preview-button{display:none!important}
.receipt-phone #everyday{padding:20px 16px!important;min-height:0!important}
.receipt-phone #everyday>div:first-child,.receipt-phone #everyday>div:nth-child(2)>div:first-child{display:none!important}
.receipt-phone #everyday>div:nth-child(2){margin-top:0!important;display:block!important}
.receipt-phone #everyday>div:nth-child(2)>div:last-child{width:100%!important;min-width:0!important}


.project-preview-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.project-preview-actions a{margin-top:0!important}
.phone-preview-button{margin:0;background:#e8dfd0;color:#221f1c;border-radius:999px;height:46px;padding:0 20px;letter-spacing:0;text-transform:none}
.journeys-phone header,.journeys-phone main,.journeys-phone footer,.journeys-phone #music-global,.journeys-phone #crab-pet{display:none!important}
.journeys-phone .jstory-overlay{padding:0!important}

/* Same portrait frame as the journey, with no title bar or notch. */
.phone-preview-dialog{width:min(390px,calc((100dvh - 48px)*.4875),calc(100vw - 24px));height:min(800px,calc(100dvh - 48px));border-radius:28px}
.phone-preview-dialog iframe{height:100%}
.phone-preview-close{position:absolute;top:20px;left:14px;z-index:10;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(245,240,231,.9);color:#221f1c;font:26px/1 sans-serif;cursor:pointer}
.journeys-phone .jstory-close{visibility:hidden}

.phone-preview-close{background:transparent;color:#221f1c;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));font-size:26px;font-weight:400}

.phone-preview-button.phone-preview-icon{width:46px;min-width:46px;padding:0;border-radius:50%;justify-content:center}
/* A plain close glyph: no circular border, focus ring or shadow. */
.phone-preview-close,.phone-preview-close:focus,.phone-preview-close:focus-visible{border:0!important;outline:none!important;box-shadow:none!important;filter:none!important;border-radius:0!important;background:transparent!important}
.phone-preview-close:focus-visible{ text-decoration:underline; text-underline-offset:5px; }
.phone-preview-button{transition:background .25s,transform .25s}
@media(hover:hover) and (pointer:fine){
 .phone-preview-button:hover{background:#ddd2bf;color:#221f1c;transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){.phone-preview-button{transition:none}.phone-preview-button:hover{transform:none}}