*{margin:0;padding:0;box-sizing:border-box}
:root{color-scheme:light}
html,body{height:100%}
[hidden]{display:none!important}
img{max-width:100%}

:root{
  --canvas:#E9DFD2; --paper:#F6EEE4; --card:#FFFCF8; --ink:#2B1226; --plum:#5B2A50;
  --terra:#B4552B; --terra-deep:#8A3D18; --apricot:#E4854B; --rose:#C2455C;
  --peach:#FBE9DA; --gold:#F0A868; --cream:#F9F2E7; --danger:#A8324A;
  --serif:"Gambetta","Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
body{
  margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  -webkit-user-select:none;user-select:none
}
input,textarea,select{-webkit-user-select:text;user-select:text}
.serif{font-family:var(--serif);font-variation-settings:"SOFT" 0,"WONK" 0}
button{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--terra);outline-offset:2px;border-radius:6px}

@keyframes drift{0%{transform:translateX(-8%)}100%{transform:translateX(8%)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes nowpulse{0%{box-shadow:0 0 0 0 rgba(228,133,75,.55)}70%{box-shadow:0 0 0 12px rgba(228,133,75,0)}100%{box-shadow:0 0 0 0 rgba(228,133,75,0)}}
@keyframes risein{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#app{position:fixed;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#app,#app *{scrollbar-width:none;-ms-overflow-style:none}
#app::-webkit-scrollbar,#app *::-webkit-scrollbar{width:0;height:0;display:none}
#toastHost{position:fixed;inset:0;z-index:80;pointer-events:none}
.screen{min-height:100%;display:flex;flex-direction:column;background:var(--paper);position:relative}

.photo-slot{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:flex-start;
  background:
    radial-gradient(120% 90% at 22% 12%,rgba(228,133,75,.34),transparent 62%),
    radial-gradient(100% 80% at 84% 88%,rgba(91,42,80,.4),transparent 60%),
    repeating-linear-gradient(38deg,rgba(43,18,38,.05) 0 7px,transparent 7px 14px),
    linear-gradient(160deg,#D8C4AE,#A98977);
  background-size:cover;background-position:center}
.photo-slot span{font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,250,242,.92);text-shadow:0 1px 3px rgba(43,18,38,.6);margin:0 0 10px 12px;text-align:left}
.photo-slot.filled span{display:none}
.tap{-webkit-tap-highlight-color:transparent}
.fld{width:100%;border:0;outline:none;background:none;font:600 16px var(--sans);
  color:var(--ink);margin-top:8px;padding:0;-webkit-appearance:none;appearance:none}
.lbl{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(43,18,38,.42)}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 0;border-bottom:1px solid rgba(43,18,38,.06)}