:root {
  --cream: #fff8f7;
  --paper: #fffdfc;
  --ink: #584445;
  --muted: #9a8586;
  --blue: #dcecf2;
  --green: #f3e3e6;
  --yellow: #f8e8b7;
  --pink: #f6d8dc;
  --deep: #d7969f;
  --line: rgba(139, 92, 99, .13);
  --shadow: 0 18px 50px rgba(126, 80, 88, .14);
}

.app { background: #fff8f7; }
.sidebar { background: rgba(255, 252, 251, .98); box-shadow: 12px 0 40px rgba(126, 80, 88, .07); }
.brand small, .list-title small, .modal > small { color: #bd8990; }
.summary { background: linear-gradient(135deg, #f7d7dc, #fbe7e3); }
.summary em { color: #ad747c; background: rgba(255,255,255,.66); }
.summary p, .summary div { color: #99777a; }
.list-title select { color: #9e777c; background: #f9e9e9; }
.spot:hover, .spot.active { box-shadow: 0 8px 24px rgba(136, 83, 92, .10); }
.spot:nth-child(4n+1) .thumb { background: #f5dadd; }
.spot:nth-child(4n+2) .thumb { background: #f8e4e1; }
.spot:nth-child(4n+3) .thumb { background: #f8e8b7; }
.spot:nth-child(4n+4) .thumb { background: #e4eaf2; }
.mic { color: #cf828d; background: #fbe5e8; }
.go, .primary { background: #d7969f; }
.result:hover { background: #fbeaed; }
.share i { color: #a66f77; background: #f6d8dc; }
.share i + i { color: #8f7680; background: #eee0eb; }
.hint { color: #8c6c70; }
.locate { color: #bd7f88; }
.love-pin span { background: #db929d; box-shadow: 0 5px 15px rgba(137,94,101,.25); }
.place { color: #a36f77; background: #fbe9ec; }
.secondary { color: #a36f77; background: #f8e4e7; }
.upload { background: #fff0e8; border-color: #e9bab8; }
.orb { background: linear-gradient(145deg, #f3cbd2, #f7dfc9); }
.heart { background: linear-gradient(145deg, #f1c4cc, #e7b9c8); }
.toast { background: #a66f77; }

.brand h1 { font-size: 19px; line-height: 1.15; }
.brand h1 span { display: inline-block; margin-top: 3px; color: #b87580; font-size: 22px; }
.memory-film { margin: 15px 0 0; }
.film-label { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 7px; }
.film-label span { color: #bb8089; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.film-upload { margin: 0 !important; padding: 4px 8px; color: #a96f78 !important; font-size: 9px !important; background: #f9e6e9; border-radius: 99px; cursor: pointer; }
.film-upload input { display: none; }
.film-window { overflow: hidden; padding: 4px 0 7px; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.film-track { display: flex; gap: 8px; width: max-content; animation: memory-scroll 58s linear infinite; will-change: transform; }
.film-set { display: flex; flex-shrink: 0; gap: 8px; }
.film-track figure { position: relative; flex: 0 0 184px; height: 132px; margin: 0; overflow: hidden; background: #f6d8dc; border: 4px solid #fff; border-radius: 17px 17px 17px 6px; box-shadow: 0 7px 18px rgba(132,82,90,.16); transform: rotate(-1deg); }
.film-track figure:nth-child(3n+2) { transform: rotate(1.2deg); }
.film-track figure:nth-child(3n) { transform: rotate(-.4deg); }
.film-track img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-track figure i { position: absolute; right: 4px; bottom: 3px; display: grid; place-items: center; width: 15px; height: 15px; color: #fff; font-size: 7px; font-style: normal; background: rgba(213,143,154,.88); border-radius: 50%; }
.gallery-delete { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; color: #fff; font-size: 17px; line-height: 1; background: rgba(83,54,59,.68); border: 2px solid rgba(255,255,255,.8); border-radius: 50%; opacity: 0; transform: scale(.8); transition: .2s; }
.film-track figure:hover .gallery-delete,.gallery-delete:focus { opacity: 1; transform: scale(1); }
.gallery-empty { width: 320px; padding: 30px; color: #ac8f93; text-align: center; font-size: 11px; }
.spot { position: relative; }
.spot-delete { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 23px; height: 23px; color: #b87580; font-size: 17px; line-height: 1; background: #f9e6e9; border-radius: 50%; opacity: 0; transition: .2s; }
.spot:hover .spot-delete,.spot:focus .spot-delete,.spot-delete:focus { opacity: 1; }
@keyframes memory-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 4px)); } }
@media (prefers-reduced-motion: reduce) { .film-track { animation-play-state: paused; } }