:root{
--canvas:#fff7fa;--paper:#fff;--wash:#f5e3ef;--rose:#a9396d;--rose-dark:#8c2757;--ink:#492a42;--muted:#806a7b;--line:#eadce5;--serif:'Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;--sans:'Segoe UI',Tahoma,sans-serif;color-scheme:light;font-family:var(--sans);color:var(--ink);background:var(--canvas);font-synthesis:none}

*{
box-sizing:border-box}
body{
margin:0}
button,input,select{
font:inherit}
button,a,input,select{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer}
button:disabled{
cursor:not-allowed;opacity:.5}
a{
color:inherit;text-decoration:none}
button,select,input{
color:inherit}
button svg,a svg,label svg{
width:20px;height:20px;flex-shrink:0}
svg:not(.icon-library){
fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-library{
position:absolute;width:0;height:0;overflow:hidden}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
outline:3px solid var(--rose);outline-offset:4px}
button{
touch-action:manipulation}
[hidden]{
display:none!important}
h1,h2,p{
margin:0}
.sidebar{
width:236px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:39px 24px 25px;background:#fffdfE;border-right:1px solid var(--line);z-index:5}
.brand{
display:flex;align-items:center;gap:13px;padding:0 15px;font-family:var(--serif);font-size:25px;line-height:1.05}
.brand-second{
display:block;font-size:18px;color:var(--muted);margin-top:6px;letter-spacing:.7px}
.flower{
font-family:Georgia,serif;font-size:49px;color:var(--rose);line-height:1}
.navigation{
margin-top:64px;display:grid;gap:10px}
.nav-link{
display:flex;align-items:center;gap:12px;padding:14px 17px;font-size:15px;color:var(--muted);border-radius:13px;min-height:50px}
.nav-link.active{
background:var(--wash);color:var(--rose-dark);font-weight:600}
.nav-link:not(.active):hover{
background:#fcf3f8}
.sidebar-note{
margin-top:auto;padding:40px 14px;color:var(--muted);font-size:13px;line-height:1.7}
.tiny-flower{
color:#c2779e;font-size:26px;display:block;margin-bottom:10px}
.profile{
border-top:1px solid var(--line);padding-top:23px;display:flex;align-items:center;gap:10px;font-size:12px}
.avatar{
display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--wash);font-family:var(--serif);font-size:20px;color:var(--rose-dark)}
.profile div>span{
display:block;color:var(--muted);font-size:10px;margin-top:4px}
main{
margin-left:236px;padding:0 54px;max-width:1660px}
.topbar{
height:89px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:13px}
.breadcrumb{
color:var(--muted)}
.prototype-label{
display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
.prototype-label>span{
width:6px;height:6px;background:#b56d97;border-radius:50%}
.page-heading{
display:flex;align-items:center;justify-content:space-between;gap:24px;padding:41px 0 31px}
h1{
font:normal 46px/1.16 var(--serif);letter-spacing:-1.7px}
.greeting-dot{
color:var(--rose)}
.page-heading p{
color:var(--muted);margin-top:10px;font-size:15px}
.button{
border:0;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:13px 20px;font-size:14px;font-weight:600;white-space:nowrap}
.button.primary{
background:var(--rose);color:white;box-shadow:0 4px 10px #a9396d12}
.button.primary:hover{
background:var(--rose-dark)}
.button.secondary{
background:var(--wash);color:var(--rose-dark)}
.button.white{
background:white;border:1px solid #e9d9e5;color:var(--ink)}
.button.small{
padding:9px 14px;font-size:12px;min-height:40px}
.button.small svg{
width:15px;height:15px}
.frame-layout{
display:grid;grid-template-columns:minmax(0,1.7fr) minmax(275px,1fr);gap:29px;align-items:stretch}
.frame-stage{
padding:22px 28px 17px;border-radius:22px;background:#f2e5ee;position:relative;overflow:hidden}
.stage-label{
display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#76586e;margin-bottom:27px}
.preview-badge{
padding:6px 10px;background:#fffcfeaa;border:1px solid #e7d4e0;border-radius:20px}
.frame-object{
position:relative;padding:11px;background:#fffafd;border-radius:9px;border:1px solid #e7d8e2;box-shadow:0 3px 0 #d8c5d2,0 11px 18px #61465516;max-width:700px;margin:auto}
.frame-screen{
aspect-ratio:1024/600;position:relative;background:#f8eaf3 url('assets/orchid.webp') center/100% 100% no-repeat;overflow:hidden;filter:brightness(.8)}
.photo-safe-area{
position:absolute;left:21.484375%;top:5%;width:57.03125%;height:90%;display:flex;align-items:center;justify-content:center}
.photo-safe-area img{
width:100%;height:100%;object-fit:contain}
.frame-shadow{
height:6px;width:70%;margin:14px auto 16px;border-radius:50%;background:#8e5e7c;opacity:.1;filter:blur(4px)}
.now-playing{
display:flex;justify-content:space-between;align-items:center;gap:12px}
.subtle-label{
font-size:11px;color:var(--muted)}
.now-playing h2{
font:normal 21px/1.3 var(--serif);margin-top:5px}
.icon-button{
border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--ink);flex-shrink:0}
.icon-button:hover{
background:#fff8fc90}
.icon-button svg{
width:20px;height:20px}
.favorite-button[aria-pressed=true]{
color:var(--rose)}
.favorite-button[aria-pressed=true] svg{
fill:currentColor}
.playback{
display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid #dfccda}
.photo-position{
margin-left:auto;color:var(--muted);font-size:11px}
.controls{
padding:4px 0 0 3px;display:flex;flex-direction:column}
.section-intro h2{
font:normal 25px/1.3 var(--serif);letter-spacing:-.5px}
.section-intro p{
font-size:12px;color:var(--muted);margin-top:6px}
.control-group{
padding:21px 0 0;margin:0;border:0;min-width:0}
.control-label{
display:flex;align-items:center;justify-content:space-between}
.control-label label{
display:flex;align-items:center;gap:8px}
.control-label label svg{
width:16px;height:16px}
label,legend{
font-size:13px;font-weight:600}
legend{
float:left;width:100%;margin-bottom:10px}
output{
font-size:12px;color:var(--rose);font-weight:600}
input[type=range]{
width:100%;accent-color:var(--rose);margin:10px 0 0;height:22px;cursor:pointer}
.range-labels{
display:flex;justify-content:space-between;color:var(--muted);font-size:10px}
.control-group>label{
display:block;margin-bottom:9px}
select{
width:100%;background:white;padding:10px 12px;min-height:43px;border:1px solid var(--line);border-radius:9px;font-size:13px}
.background-control{
margin-top:3px}
.background-hint{
clear:both;font-size:11px;color:var(--muted);margin:0 0 13px}
.background-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 9px}
.background-option{
position:relative;display:block;min-width:0;cursor:pointer;font-weight:400}
.background-option input{
position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.background-swatch{
display:block;position:relative;padding:3px;border:2px solid transparent;border-radius:11px}
.background-swatch img{
display:block;width:100%;aspect-ratio:1024/600;object-fit:fill;border-radius:6px;background:var(--wash)}
.background-option input:checked+.background-swatch{
border-color:var(--rose);background:white}
.background-option input:focus-visible+.background-swatch{
outline:3px solid var(--rose);outline-offset:3px}
.background-option:hover .background-swatch{
background:var(--wash)}
.background-check{
position:absolute;right:0;top:-4px;display:none;width:19px;height:19px;border-radius:50%;background:var(--rose);color:white;border:2px solid var(--canvas);align-items:center;justify-content:center}
.background-check svg{
width:12px;height:12px;stroke-width:2.5}
.background-option input:checked+.background-swatch .background-check{
display:flex}
.background-option-name{
display:block;text-align:center;font-size:10px;line-height:1.35;margin-top:5px;color:var(--muted);overflow-wrap:normal}
.background-option input:checked~.background-option-name{
color:var(--rose-dark);font-weight:600}
.background-selection{
display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);margin-top:16px}
.background-selection>span:first-child{
color:var(--rose-dark);font-weight:600}
.demo-note{
display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);margin-top:19px;border-top:1px solid var(--line);padding-top:14px}
.demo-note svg{
width:14px;height:14px}
.recent-section{
margin-top:37px}
.section-heading{
display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:21px}
.section-heading h2{
font:normal 26px/1.3 var(--serif);letter-spacing:-.6px}
.section-heading p{
font-size:12px;color:var(--muted);margin-top:5px}
.text-link{
display:flex;align-items:center;gap:8px;font-size:12px;color:var(--rose);font-weight:600;white-space:nowrap}
.text-link svg{
width:16px;height:16px}
.photo-grid{
display:grid;gap:22px}
.recent-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
.photo-card{
min-width:0}
.photo-art{
position:relative;aspect-ratio:1.22;border-radius:13px;overflow:hidden;background:var(--wash)}
.photo-open{
display:block;border:0;background:transparent;padding:0;width:100%;height:100%}
.photo-open img{
width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.photo-art .favorite-button{
position:absolute;right:9px;top:9px;width:34px;height:34px;background:#fffdf5ed;box-shadow:0 2px 4px #492a4210}
.photo-art .favorite-button svg{
width:16px;height:16px}
.current-chip{
position:absolute;left:10px;bottom:10px;background:#fffcfeed;padding:6px 9px;border-radius:6px;font-size:10px;pointer-events:none;display:flex;gap:5px;align-items:center}
.current-chip svg{
width:12px;height:12px}
.photo-caption{
padding:11px 1px 0}
.photo-caption h3{
font-size:13px;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-caption p{
font-size:11px;color:var(--muted);margin-top:4px}
.add-tile{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:140px;aspect-ratio:1.22;border:1px dashed #d8b9cc;border-radius:13px;background:#fbf0f6;color:var(--rose-dark);font-size:12px}
.add-tile>svg{
height:30px;width:30px;padding:5px;background:var(--wash);border-radius:50%;margin-bottom:4px}
.add-tile>span{
color:var(--muted);font-size:11px}
.add-tile:hover{
background:var(--wash)}
.page-footer{
display:flex;align-items:center;justify-content:space-between;margin:33px 0 22px;padding-top:21px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}
.footer-flower{
font-size:21px;color:#c899b5}
.mobile-nav{
display:none}
.gallery-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);margin:5px 0 26px;padding-bottom:14px}
.filter-tabs{
display:flex;gap:8px}
.filter-tabs button{
display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);padding:9px 12px;border-radius:8px;font-size:13px;min-height:42px}
.filter-tabs button.selected{
background:var(--wash);color:var(--rose-dark);font-weight:600}
.filter-tabs button span{
padding:1px 6px;border-radius:8px;background:#fffcfeaa;font-size:10px}
.filter-tabs button svg{
width:14px;height:14px}
.gallery-help{
font-size:12px;color:var(--muted)}
.full-gallery{
grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 23px}
.full-gallery .photo-art,.full-gallery .add-tile{
aspect-ratio:.83}
.gallery-footnote{
margin-top:32px;font-size:11px;color:var(--muted)}
.empty-state{
padding:70px 20px;text-align:center}
.empty-state>svg{
width:35px;height:35px;color:var(--rose);margin-bottom:20px}
.empty-state h2{
font:normal 30px var(--serif)}
.empty-state p{
color:var(--muted);margin:12px 0 25px;font-size:14px}
dialog{
background:var(--paper);color:var(--ink);border:1px solid #ecdee7;border-radius:24px;box-shadow:0 24px 100px #492a4230;padding:38px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overscroll-behavior:contain}
dialog::backdrop{
background:#3e223d55;backdrop-filter:blur(5px)}
dialog h2{
font:normal 31px/1.2 var(--serif);letter-spacing:-.7px}
.dialog-close{
position:absolute;right:13px;top:13px;color:var(--muted)}
.upload-dialog{
width:470px}
.dialog-flower{
color:var(--rose);font-size:35px;margin-bottom:10px}
.dialog-subtitle{
font-size:13px;color:var(--muted);margin-top:9px;line-height:1.5}
.drop-zone{
width:100%;padding:26px 15px 20px;background:#fff7fb;border:1px dashed #cda6c0;border-radius:14px;margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted);font-size:12px}
.drop-zone.drag-over{
background:var(--wash);border:2px solid var(--rose)}
.drop-zone strong{
color:var(--ink);font-weight:600;font-size:14px}
.drop-zone small{
font-size:10px;margin-top:8px}
.upload-icon{
position:relative;margin-bottom:9px}
.upload-icon svg{
width:37px;height:37px;stroke-width:1.3;color:var(--rose)}
.upload-icon>span{
position:absolute;bottom:-3px;right:-7px;display:grid;place-items:center;border-radius:50%;background:var(--rose);color:white;width:18px;height:18px;font-size:14px}
.passcode-field{
margin:23px 0}
.passcode-field label{
display:block;font-size:12px}
.passcode-field label>span{
font-size:10px;color:var(--muted);font-weight:400;float:right}
.passcode-field input{
width:100%;border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:9px;font-size:13px}
.passcode-field p{
font-size:10px;margin-top:7px;color:var(--muted)}
.full-width{
width:100%}
.local-note{
text-align:center;font-size:10px;color:var(--muted);margin-top:14px;line-height:1.5}
.upload-queue{
display:grid;gap:8px;max-height:190px;overflow:auto;margin-top:12px}
.queue-item{
display:flex;align-items:center;gap:10px;background:#fcf5f9;border-radius:8px;padding:7px}
.queue-item img,.queue-placeholder{
width:44px;height:44px;object-fit:cover;border-radius:6px;flex-shrink:0}
.queue-placeholder{
display:grid;place-items:center;background:var(--wash);font-size:9px}
.queue-item>div:not(.queue-placeholder){
min-width:0;flex:1}
.queue-name{
font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-info{
font-size:10px;color:var(--muted);margin-top:3px}
.queue-item .icon-button{
width:32px;height:32px}
.inline-error{
font-size:12px;line-height:1.5;background:#fff0f2;color:#9a264b;border-radius:9px;padding:10px;margin-top:12px}
.photo-dialog{
width:540px;padding:22px}
.photo-dialog>.dialog-close{
background:white;z-index:1;top:31px;right:31px}
.photo-dialog>img{
display:block;width:100%;height:min(55dvh,520px);object-fit:contain;background:#f5edf2;border-radius:13px}
.photo-detail{
display:flex;align-items:center;justify-content:space-between;gap:10px;padding:21px 3px}
.photo-detail h2{
font-size:24px;overflow-wrap:anywhere}
.photo-detail p{
font-size:12px;color:var(--muted);margin-top:6px}
.success-dialog{
width:400px;text-align:center;padding:46px 32px 25px}
.success-icon{
background:var(--wash);color:var(--rose);border-radius:50%;width:70px;height:70px;margin:0 auto 25px;display:grid;place-items:center}
.success-icon svg{
width:32px;height:32px}
.success-dialog p{
font-size:14px;color:var(--muted);line-height:1.6;margin:13px 0 27px}
.text-button{
background:transparent;color:var(--rose);margin-top:6px}
.toast{
position:fixed;left:calc(50% + 118px);bottom:26px;transform:translate(-50%,20px);padding:13px 20px;background:var(--ink);color:white;border-radius:12px;box-shadow:0 8px 30px #492a4233;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:20;max-width:calc(100vw - 32px)}
.toast.visible{
opacity:1;transform:translate(-50%,0)}
.visually-hidden{
position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:1450px){
main{
padding:0 70px}
.frame-stage{
padding:27px 37px 21px}
.frame-layout{
gap:40px;grid-template-columns:minmax(0,1.85fr) minmax(290px,1fr)}
.controls{
padding-top:10px}
.control-group{
padding-top:26px}
.now-playing h2{
font-size:24px}
.stage-label{
margin-bottom:32px}
.recent-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
.recent-grid .add-tile{
grid-column:span 2;aspect-ratio:auto;min-height:calc(100% - 43px);align-self:start}
}

@media(max-width:1150px){
.sidebar{
width:200px;padding-left:15px;padding-right:15px}
.brand{
font-size:23px}
.flower{
font-size:42px}
main{
margin-left:200px;padding:0 30px}
.frame-layout{
gap:23px;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr)}
.frame-stage{
padding:19px}
.stage-label{
font-size:10px}
.section-intro h2{
font-size:23px}
.now-playing h2{
font-size:19px}
.photo-position{
font-size:10px}
.playback{
gap:4px}
.toast{
left:calc(50% + 100px)}
h1{
font-size:41px}
.gallery-help{
display:none}
}

@media(max-width:920px) and (min-width:701px){
.frame-layout{
grid-template-columns:1fr}
.controls{
display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:14px 0}
.section-intro{
grid-column:1/-1}
.background-control{
grid-column:1/-1}
.demo-note{
grid-column:1/-1}
.recent-grid{
gap:15px}
.section-heading h2{
font-size:22px}
.page-heading{
align-items:flex-start}
.page-heading .button{
padding:12px}
.full-gallery{
grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.sidebar{
position:relative;width:auto;height:82px;padding:0 22px;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line);background:var(--canvas)}
.brand{
font-size:22px;padding:0;gap:9px}
.brand-second{
display:inline;font-size:22px;color:var(--ink);margin:0 0 0 5px;letter-spacing:0}
.flower{
font-size:35px}
.navigation,.sidebar-note,.profile{
display:none}
main{
margin-left:0;padding:0 22px}
.topbar{
height:44px;border:0}
.breadcrumb{
display:none}
.prototype-label{
margin-left:auto;font-size:10px}
.page-heading{
padding:12px 0 25px;align-items:flex-start;gap:10px;flex-wrap:wrap}
h1{
font-size:36px;letter-spacing:-1.3px}
.page-heading p{
font-size:13px;line-height:1.5;margin-top:6px}
.page-heading .button{
position:absolute;top:23px;right:20px;font-size:0;min-height:37px;width:37px;padding:8px;border-radius:10px;gap:0}
.page-heading .button svg{
width:20px;height:20px}
.page-heading .button::after{
content:'Add photos';position:absolute;width:1px;height:1px;clip:rect(0,0,0,0)}
.frame-layout{
display:flex;flex-direction:column;gap:27px}
.frame-stage{
padding:17px 17px 13px;border-radius:18px}
.stage-label{
margin-bottom:22px;font-size:10px}
.preview-badge{
padding:5px 8px}
.frame-object{
padding:7px;border-radius:6px}
.frame-shadow{
margin-bottom:12px}
.now-playing h2{
font-size:20px}
.subtle-label{
font-size:10px}
.playback{
margin-top:12px;padding-top:12px;gap:8px}
.button.small{
font-size:11px;padding:9px 11px}
.photo-position{
font-size:10px}
.playback>.icon-button{
width:30px;height:36px}
.controls{
padding:0 3px}
.section-intro h2{
font-size:25px}
.section-intro p{
font-size:12px}
.control-group{
padding-top:22px}
label,legend{
font-size:14px}
.range-labels{
font-size:11px}
select{
font-size:14px;min-height:46px}
.background-hint{
font-size:12px}
.background-option-name{
font-size:10px}
.demo-note{
font-size:11px;margin-top:20px}
.recent-section{
margin-top:32px}
.section-heading{
gap:10px;align-items:flex-start}
.section-heading h2{
font-size:23px;max-width:230px}
.section-heading p{
font-size:11px;line-height:1.5}
.section-heading .text-link{
font-size:11px;margin-top:6px;gap:4px}
.section-heading .text-link svg{
width:13px;height:13px}
.recent-grid,.full-gallery{
grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 13px}
.recent-grid .add-tile{
grid-column:1/-1;min-height:90px;aspect-ratio:auto;display:grid;grid-template-columns:30px auto;justify-content:center;gap:3px 12px;padding:14px}
.recent-grid .add-tile>svg{
grid-row:span 2;margin:0}
.recent-grid .add-tile>span{
text-align:left}
.photo-art{
aspect-ratio:.9;border-radius:11px}
.photo-caption h3{
font-size:12px}
.photo-caption p{
font-size:10px}
.page-footer{
margin-bottom:106px;font-size:9px;gap:10px}
.mobile-nav{
display:flex;position:fixed;bottom:0;left:0;right:0;background:#fffdfef5;border-top:1px solid var(--line);padding:9px 20px max(11px,env(safe-area-inset-bottom));z-index:10;backdrop-filter:blur(10px)}
.mobile-nav a{
display:flex;align-items:center;justify-content:center;gap:9px;flex:1;font-size:12px;min-height:45px;color:var(--muted);border-radius:10px}
.mobile-nav a.active{
background:var(--wash);color:var(--rose-dark);font-weight:600}
.mobile-nav svg{
width:18px;height:18px}
.gallery-toolbar{
margin-top:0}
.filter-tabs button{
font-size:12px;padding:9px 11px}
.full-gallery .add-tile{
font-size:11px;padding:10px}
.full-gallery .add-tile>span{
font-size:10px;text-align:center}
.gallery-footnote{
font-size:11px;line-height:1.6}
.toast{
left:50%;bottom:87px;text-align:center;width:max-content}
.upload-dialog{
padding:29px 23px}
.upload-dialog h2{
font-size:28px}
.dialog-flower{
font-size:30px}
.drop-zone{
margin-top:21px}
.passcode-field label>span{
font-size:9px}
.photo-dialog{
padding:15px}
.photo-dialog>.dialog-close{
top:22px;right:22px}
.photo-detail h2{
font-size:22px}
.success-dialog{
padding:43px 25px 22px}
.empty-state{
padding:55px 5px}
.empty-state h2{
font-size:26px}
.empty-state p{
font-size:13px}
}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* --- Adjustments for the live app (no gallery page, no mobile nav bar) --- */
/* The stock rule .prototype-label>span sizes the little status dot; the status
   text is a sibling span and must not inherit those 6px dot dimensions. */
.prototype-label #frame-status{
width:auto;height:auto;background:none;border-radius:0;white-space:nowrap}
.unlock-passcode-note{
font-size:11px;color:var(--muted);margin-top:10px}
#unlock-dialog .passcode-field{
text-align:left;margin:25px 0 0}
#unlock-dialog .inline-error{
text-align:left}
#unlock-dialog form button{
margin-top:20px}
#unlock-dialog p{
font-size:14px;color:var(--muted);line-height:1.6;margin-top:13px}
.now-playing h2{
overflow-wrap:anywhere}
@media(max-width:700px){
.page-footer{
margin-bottom:22px}
/* The header bar is position:relative with z-index:5, so the absolutely
   positioned Add photos button needs to sit above it to stay visible. */
.page-heading .button{
z-index:6}
}
/* Gentle prompt shown inside the frame before any photos exist. Sits on a
   soft translucent card so it stays readable on all nine backgrounds. */
.frame-empty{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;max-width:56%;
padding:18px 26px;border:0;border-radius:14px;text-align:center;color:var(--ink);
background:#fffafdf2;backdrop-filter:blur(3px);box-shadow:0 6px 22px #492a4226}
.frame-empty:hover{
background:#fffafd}
.frame-empty-flower{
font-family:Georgia,serif;font-size:30px;color:var(--rose);line-height:1}
.frame-empty strong{
font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.3px}
.frame-empty-hint{
font-size:11px;color:var(--muted)}
@media(max-width:700px){
.frame-empty{
padding:13px 16px;gap:4px}
.frame-empty-flower{
font-size:24px}
.frame-empty strong{
font-size:16px}
.frame-empty-hint{
font-size:10px}
}