:root {
  color-scheme: dark;
  --ink: #f8f4ec;
  --muted: #cbc6bb;
  --accent: #e59a58;
  --glass: rgba(19, 28, 24, .78);
  --line: rgba(255, 255, 255, .18);
  font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif;
  background: #111916;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: radial-gradient(circle at 75% 0%, #385145 0, #18241f 40%, #0d1411 100%); }
button { font: inherit; }

.topbar {
  position: fixed; z-index: 20; inset: max(12px, env(safe-area-inset-top)) 14px auto;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px;
  max-width: 720px; margin-inline: auto;
}
.round-button {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink); background: var(--glass); backdrop-filter: blur(18px);
  cursor: pointer; font-size: 1.2rem;
}
.round-button:disabled { opacity: .32; }
.round-button:focus-visible, .gallery-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.date-block { text-align: center; text-shadow: 0 1px 12px #000; min-width: 0; }
#display-date { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#display-progress { color: var(--muted); font-size: .78rem; margin-top: 2px; }

#diary { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.day { position: relative; height: 100dvh; overflow: hidden; background: #15201b; }
.day.from-bottom { animation: day-from-bottom .24s ease-out; }
.day.from-top { animation: day-from-top .24s ease-out; }
@keyframes day-from-bottom { from { opacity: .35; transform: translateY(5%); } }
@keyframes day-from-top { from { opacity: .35; transform: translateY(-5%); } }
.gallery { height: 59dvh; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #0b100e; overscroll-behavior-x: contain; }
.gallery::-webkit-scrollbar { display: none; }
.photo-frame { flex: 0 0 100%; height: 100%; scroll-snap-align: start; display: grid; place-items: center; background: #0b100e; }
.photo-frame img { width: 100%; height: 100%; display: block; object-fit: contain; }
.photo-frame img[alt=""] { color: transparent; }
.photo-empty { display: grid; place-items: center; height: 100%; color: var(--muted); background: linear-gradient(145deg, #24372e, #111915); }
.gallery-controls { position: absolute; z-index: 5; top: calc(59dvh - 54px); inset-inline: 14px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.gallery-button { pointer-events: auto; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(8, 12, 10, .64); color: white; font-size: 1.35rem; backdrop-filter: blur(12px); }
.photo-count { padding: 7px 11px; border-radius: 999px; background: rgba(8, 12, 10, .68); color: white; font-size: .78rem; backdrop-filter: blur(12px); }
.entry-panel { height: 41dvh; overflow-y: auto; padding: 20px 22px max(26px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(27, 40, 34, .98), #121b17); border-top: 1px solid var(--line); }
.entry-panel time { display: block; color: var(--accent); font-weight: 700; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.entry-text { margin: 0 auto; max-width: 42rem; white-space: pre-wrap; font-family: Charter, Georgia, serif; font-size: clamp(1rem, 4.25vw, 1.16rem); line-height: 1.58; }
.loading { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; color: var(--muted); background: #15201b; }
.loading.hidden { display: none; }

@media (min-width: 760px) {
  .day { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .75fr); }
  .gallery { height: 100dvh; }
  .entry-panel { height: 100dvh; padding: 112px 40px 48px; border-top: 0; border-left: 1px solid var(--line); }
  .gallery-controls { top: auto; bottom: 20px; right: calc(35% + 20px); }
  .topbar { right: 22px; left: auto; width: min(34%, 430px); }
}

@media (prefers-reduced-motion: reduce) { .day.from-bottom, .day.from-top { animation: none; } }