:root {
  --ink: #563747;
  --muted: #805f71;
  --line: #e4c7cf;
  --pink: #f6b4cb;
  --paper: #fff8f1;
  --panel-radius: 7px;
  --section-gap: 8px;
  --sans: ui-rounded, "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 280px; scrollbar-gutter: stable; }
body {
  position: relative;
  min-height: 100svh;
  margin: 0;
  padding: 68px 0 72px;
  color: var(--ink);
  background-color: #fbd0df;
  background-image: linear-gradient(#fff6fa4d 1px, transparent 1px), linear-gradient(90deg, #fff6fa4d 1px, transparent 1px);
  background-size: 18px 18px;
  font: 13px var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
}
body::before, body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 48px;
  background: url("/lace.svg") repeat-x center top / 48px 48px;
  pointer-events: none;
}
body::before { top: 0; }
body::after { bottom: 0; transform: rotate(180deg); }
main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  width: min(576px, calc(100% - 32px));
  margin: 0 auto;
  -webkit-touch-callout: none;
}
svg { display: block; width: 100%; height: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
button, input, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #923757;
  outline-offset: 2px;
}
input, textarea { -webkit-user-select: text; user-select: text; }
img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* Each page load begins with a separate acceptance screen. */
body.entry-pending { overflow: hidden; }
#privacyShield { position: fixed; inset: 0; z-index: 2147483647; background: #fbd0df; touch-action: none; }
body.privacy-covered > :not(#privacyShield) { visibility: hidden !important; }
body.privacy-covered::before, body.privacy-covered::after { visibility: hidden; }
.entry-gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; padding: 24px; overflow-y: auto; }
.entry-card { width: min(100%, 320px); margin: auto; padding: 24px; border: 1px solid var(--ink); border-radius: var(--panel-radius); background: var(--paper); box-shadow: 0 2px 0 #755162; text-align: center; }
.entry-heart { width: 24px; height: 24px; margin: 0 auto 12px; }
.entry-card h1 { margin: 0; font-size: 20px; line-height: 1.2; }
.entry-card p { margin: 12px 0 20px; font-size: 13px; line-height: 1.6; }
.entry-card button { width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid var(--ink); border-radius: var(--panel-radius); background: var(--pink); box-shadow: 0 2px 0 #a87289; font-weight: 700; }
.entry-card button:hover { background: #f8c4d6; }
.entry-card button:active { box-shadow: none; transform: translateY(2px); }

/* Title and edge-to-edge photo strip. */
.hero { text-align: center; }
.hero h1 { width: min(280px, 100%); margin: 0 auto; line-height: 0; filter: drop-shadow(0 2px 0 #75485d); }
h1 svg { height: auto; }
.hero .about-copy { margin: 9px auto 0; font-size: 11px; font-weight: 500; line-height: 1.5; }
/* Fine film rails frame the five touching portraits. */
.portrait-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; width: 100%; margin: 0; padding: 7px 0; border: 1px solid #896476; background: #755367; }
.portrait-grid::before, .portrait-grid::after { content: ""; position: absolute; left: 3px; right: 3px; height: 3px; background: repeating-linear-gradient(90deg, #ffecf2 0 4px, transparent 4px 9px); pointer-events: none; }
.portrait-grid::before { top: 2px; }.portrait-grid::after { bottom: 2px; }
.film-frame { position: relative; min-width: 0; margin: 0; }
.portrait-grid img { display: block; width: 100%; height: auto; aspect-ratio: 54 / 88; object-fit: cover; background: #ffeff1; }
.film-frame + .film-frame { border-left: 1px solid #b9869a; }
.film-frame figcaption { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); padding: 2px 3px 2px 4px; color: #755367; background: #fff8f1dc; font: 8px/1 ui-monospace, monospace; letter-spacing: 1px; pointer-events: none; }


/* One shared calendar, camera and door-log frame. */
.station { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr) 120px; gap: 6px; padding: 6px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--pink); box-shadow: 0 2px 0 #755162; }
.notebook { position: relative; min-width: 0; }
.paper { display: flex; flex-direction: column; border: 1px solid #885c6d; border-radius: 5px; overflow: hidden; background: var(--paper); }
#rings { position: absolute; top: -12px; left: 4%; width: 92%; display: flex; justify-content: space-around; pointer-events: none; z-index: 1; }
.ring { width: 6px; height: 13px; border: 1px solid var(--ink); border-radius: 4px; background: #fff1d5; box-shadow: 0 1px #845a67; }
.week, #days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.week { padding: 5px 0 3px; border-bottom: 1px solid #ad8091; background: #ffe4eb; font-size: 8px; font-weight: 700; text-align: center; }
#days { align-items: start; }
.day, .blank { position: relative; width: 100%; min-height: 0; aspect-ratio: 1; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.day { display: flex; flex-direction: column; gap: 1px; justify-content: center; align-items: center; padding: 0; }
#days > :nth-child(7n) { border-right: 0; }
#days > :nth-last-child(-n+7) { border-bottom: 0; }
.num { font-size: 10px; font-weight: 900; line-height: 1; }
.sticker { width: 9px; height: 9px; }
.day:disabled { color: #87727d; cursor: default; }
.day:disabled .sticker, .is-admin .day:not(.attached) .sticker { opacity: .5; }
.blank { background: repeating-linear-gradient(135deg, #fff4ee 0 4px, #f5e5e6 4px 5px); }
#calendar .day.bookable, .schedule-key .bookable { background: #fff; }
#calendar .day.trip, .schedule-key .trip { background-color: #d9d9dd; background-image: repeating-linear-gradient(135deg, transparent 0 4px, #bbbcc360 4px 5px); }
#calendar .day.shoot, .schedule-key .shoot { background-color: #ffe28b; background-image: radial-gradient(#d8ab4455 .8px, transparent 1px); background-size: 5px 5px; }
#calendar .day.booked, .schedule-key .booked { color: var(--ink); background-color: #c9aeeb; background-image: repeating-linear-gradient(45deg, transparent 0 5px, #a27cc457 5px 6px); }
#calendar .day:enabled:hover { filter: brightness(.97); }
#calendar .day[aria-pressed=true] { border-radius: 3px; box-shadow: inset 0 0 0 1.5px #8b3459; z-index: 1; }
#calendar .attached::after { content: ""; position: absolute; top: 2px; right: 2px; width: 4px; height: 4px; border-radius: 50%; background: #9a4164; }

#preview { position: relative; min-width: 0; }
.camera, .feed { position: relative; height: 100%; }
.feed { min-height: 100px; isolation: isolate; overflow: hidden; border: 1px solid #553e50; border-radius: 6px; background-color: #5b5162; background-image: linear-gradient(90deg, #ffffff08 1px, transparent 1px), linear-gradient(#ffffff08 1px, transparent 1px); background-size: 14px 14px; }
.feed::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, #352b411b 2px 3px); }
.capture { position: absolute; top: 50%; left: 50%; z-index: 3; width: 86%; aspect-ratio: 2.06; margin: 0; padding: 4px 4px 7px; border: 1px solid #decbbf; background: #fff7e7; box-shadow: 1px 3px 4px #372c3c90; transform: translate(-50%, -50%) rotate(-2deg); }
.capture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.capture::before { content: ""; position: absolute; top: -5px; left: 41%; width: 17%; height: 8px; background: #f5dca4df; transform: rotate(4deg); }
.perch { position: absolute; top: 0; left: 50%; z-index: 5; width: 48px; pointer-events: none; transform: translate(-50%, -78%); }
.perch svg { height: auto; filter: drop-shadow(0 1px 1px #382e474d); transform-origin: 50% 85%; animation: peep 3.6s ease-in-out infinite; }
@keyframes peep { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.overlay { position: absolute; inset: 7px 7px auto; z-index: 4; display: flex; justify-content: space-between; color: #fff; font: 700 9px/1.2 ui-monospace, monospace; letter-spacing: .6px; text-shadow: 0 1px 2px #302534; pointer-events: none; }
.overlay.bottom { inset: auto 7px 7px; }
.record { display: inline-flex; align-items: center; gap: 4px; }
.record b { width: 5px; height: 5px; border-radius: 50%; background: #ff90a5; box-shadow: 0 0 4px #ff8fa5; animation: signal 2s ease-in-out infinite; }
@keyframes signal { 50% { opacity: .4; } }
.image-tools { position: absolute; z-index: 6; top: 22px; right: 4px; left: 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.image-tools button, .door-bar button, #reasonForm button { padding: 3px 5px; border: 1px solid #956a7e; border-radius: 4px; color: var(--ink); background: #ffe3ed; font-size: 9px; font-weight: 700; line-height: 1.3; }
.is-admin .capture { top: 59%; max-height: calc(100% - 66px); }

.door-log { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid #987183; border-radius: 6px; overflow: hidden; background: var(--paper); }
.door-bar { display: flex; align-items: center; justify-content: space-between; gap: 3px; min-height: 22px; padding: 3px 5px; border-bottom: 1px solid #b3a7b1; background: #e2dce1; }
.door-bar h2 { display: flex; align-items: center; gap: 3px; margin: 0; font-size: 10px; line-height: 1.1; }
.door-bar h2 svg { width: 12px; height: 12px; }
.door-bar button { padding: 2px 4px; font-size: 8px; }
.log-body { position: relative; flex: 1; min-height: 0; }
#doorRecords { position: absolute; inset: 0; margin: 0; padding: 0 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; scrollbar-color: #c39aaa transparent; }
#doorRecords li { padding: 5px 0; font-size: 10px; overflow-wrap: anywhere; }
#doorRecords li + li { border-top: 1px dotted var(--line); }
#doorRecords time, #doorRecords strong, .door-reason { display: block; }
#doorRecords time { color: #705667; font: 8px/1.5 ui-monospace, monospace; }
#doorRecords strong { font-size: 10px; }
.demo-mark { color: #855c70; font: 7px ui-monospace, monospace; }
.door-log .erase { float: right; padding: 0; border: 0; color: #845368; background: none; font-size: 9px; text-decoration: underline; }
.door-log li::after { content: ""; display: block; clear: both; }
#reasonForm { padding: 5px; border-bottom: 1px solid var(--line); font-size: 10px; }
#reasonForm label { display: block; font-weight: 700; }
#reasonForm textarea { width: 100%; height: 42px; min-height: 30px; margin: 3px 0; border: 1px solid #bd9eab; border-radius: 3px; font-size: 12px; resize: vertical; }
#reasonForm > div { display: flex; flex-wrap: wrap; gap: 3px; }

/* The four labels retain the exact requested wording and order. */
.schedule-key { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 5px 6px 5px 48px; border: 1px solid #c595a6; border-radius: 6px; background: #fff4f6; font-size: 10px; line-height: 1.35; }
.schedule-key > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.schedule-key i { flex: none; width: 10px; height: 10px; border: 1px solid #967b85; border-radius: 2px; }

/* Three compact studio cards. */
.studio-row { position: relative; --gear-height: 240px; --gear-heading: 24px; --gear-list: 76px; --portrait-height: calc(var(--gear-height) - var(--gear-heading) - var(--gear-list) - 2px); --gear-width: calc(var(--portrait-height) * 110 / 138 + 2px); display: grid; grid-template-columns: minmax(0, .95fr) var(--gear-width) minmax(0, 1.05fr); align-items: start; gap: var(--section-gap); }
.task-card, .gear-card { min-width: 0; border: 1px solid #987183; border-radius: var(--panel-radius); overflow: hidden; background: var(--paper); }
.task-card { min-height: var(--gear-height); }
.task-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 7px; border-bottom: 1px solid var(--line); background: #ffe4eb; }
.task-card h2 { margin: 0; font-size: 12px; }
#task-count { color: #815d70; font: 9px ui-monospace, monospace; }
.task-card button { padding: 3px 7px; border: 1px solid #aa8092; border-radius: 5px; color: var(--ink); background: #fff6f3; font-size: 10px; }
.task-card header button { margin-left: auto; background: #f5c4d6; font-weight: 700; white-space: nowrap; }
.task-card button:disabled { opacity: .5; }
#task-form { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px; }
#task-text { flex: 1 1 100%; min-width: 0; padding: 5px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font: 12px var(--sans); }
#task-list { margin: 0; padding: 0 7px; list-style: none; }
#task-list li { display: flex; align-items: center; gap: 5px; min-height: 20px; padding: 2px 0; border-bottom: 1px dotted var(--line); }
#task-list li:last-child { border: 0; }
#task-list li::before { content: "•"; color: #94596f; font-size: 12px; line-height: 1; }
#task-list li > span { flex: 1; min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
#task-list .empty-slot::after { content: ""; flex: 1; height: 1px; margin: 0 4px 0 1px; background: var(--line); }
#task-list .task-remove { border: 0; padding: 1px 4px; background: none; font-size: 14px; }
#task-note { margin: 4px 8px; font-size: 10px; }
#task-note:empty { display: none; }
#task-requests { padding: 5px 7px; border-top: 1px solid var(--line); }
#task-requests h3 { margin: 0 0 3px; font-size: 10px; }
#request-list { margin: 0; padding: 0; list-style: none; }
#request-list li { padding: 4px 0; font-size: 11px; overflow-wrap: anywhere; }
#request-list li + li { border-top: 1px dotted var(--line); }
#request-list li div { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
#request-list small { color: #80566d; text-transform: capitalize; }
.gear-card { display: grid; height: var(--gear-height); grid-template-rows: var(--gear-heading) var(--portrait-height) var(--gear-list); }
.gear-portrait { display: block; width: 100%; height: 100%; object-fit: contain; }
.gear-card header { display: flex; align-items: center; padding: 0 5px; border-bottom: 1px solid var(--line); background: #ffe4eb; }
.gear-card h2 { margin: 0; font-size: 11px; }
.gear-card p { margin: 0; padding: 3px 5px; font-size: 10px; line-height: 11.5px; }
.rules-card { position: relative; isolation: isolate; height: var(--gear-height); min-width: 0; padding: 16px 9px; border: 1px solid #916e98; border-radius: var(--panel-radius); overflow: hidden; color: #543959; background-color: #efe3f3; background-image: radial-gradient(#b695c044 .7px, transparent .8px); background-size: 7px 7px; }
.rules-card header { display: inline-block; max-width: 100%; padding: 4px 8px; border-radius: 2px 7px 7px 2px; color: #fff9fc; background: #67466e; transform: rotate(-2deg); }
.rules-card h2 { margin: 0; font: 700 13px/1.2 Georgia, serif; }
.rules-card p { margin: 13px 1px; color: #644b6a; font-size: 11px; line-height: 1.4; }
.rules-stamp { position: absolute; right: 12px; bottom: 16px; width: 28px; height: 28px; color: #97749c; transform: rotate(-12deg); }
.todo-devil { --devil-width: 48px; position: absolute; z-index: 3; bottom: calc(100% - var(--devil-width) * 12 / 102); left: 2px; display: block; width: var(--devil-width); height: auto; pointer-events: none; filter: drop-shadow(0 1px 1px #57304433); }

.under { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0 2px; }
.under #adminLink { height: 28px; padding: 0 2px; border: 0; background: none; font-size: 10px; white-space: nowrap; }
.under #adminLink:hover { text-decoration: underline; }
#bookingToggle { padding: 4px 7px; border: 1px solid #af8cbd; border-radius: 4px; color: var(--ink); background: #efdefa; font-size: 10px; }
#editStatus { min-width: 0; font-size: 10px; line-height: 1.3; }
.month-tool { position: relative; display: none; width: 28px; height: 28px; margin-left: auto; color: #805b6b; }
.is-admin .month-tool { display: grid; place-items: center; }
.month-tool svg { width: 14px; height: 14px; }
.month-tool input { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; opacity: 0; cursor: pointer; }
.month-tool:focus-within { outline: 1px solid var(--ink); border-radius: 3px; }

.corner-hit { position: fixed; top: 0; z-index: 12; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: default; }
#cornerLeft { left: 0; }
#cornerRight { right: 0; }
#pinDialog { width: min(240px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 14px; border: 1.5px solid var(--ink); border-radius: 10px; overflow: auto; color: var(--ink); background: var(--paper); box-shadow: 0 3px var(--ink); }
#pinDialog::backdrop { background: #52374666; backdrop-filter: blur(2px); }
.pin-header { display: flex; align-items: center; justify-content: space-between; }
.pin-header h2 { margin: 0; font-size: 15px; }
.pin-header button { min-width: 32px; min-height: 32px; border: 0; background: none; font-size: 22px; }
#pinValue { display: block; width: 100%; margin: 8px 0; padding: 8px; border: 1px solid var(--line); border-radius: 5px; text-align: center; letter-spacing: 5px; font-size: 18px; }
.pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pin-keys button { min-height: 42px; padding: 6px; border: 1px solid #b8889c; border-radius: 5px; background: #ffe1eb; font-weight: 700; }
#pinMessage { margin: 6px 0 0; font-size: 11px; line-height: 1.4; }
#pinMessage:empty { display: none; }

/* Phones get the same components with enough room to read and tap them. */
@media (max-width: 559px) {
  body { padding-top: 66px; }
  main { width: min(430px, calc(100% - 28px)); }
  .hero .about-copy { max-width: 340px; font-size: 11px; }
  .hero .about-copy br { display: none; }
  .station { grid-template-columns: minmax(0, 1.7fr) minmax(112px, 1fr); gap: 8px; padding: 7px; }
  .notebook { grid-column: 1 / -1; }
  .week { padding: 8px 0 6px; font-size: 10px; }
  .num { font-size: 13px; }
  .sticker { width: 11px; height: 11px; }
  .day { gap: 3px; }
  #preview { min-height: 158px; }
  .perch { width: 42px; }
  .overlay { font-size: 9px; }
  .door-bar { min-height: 28px; }
  .door-bar h2 { font-size: 11px; }
  #doorRecords time { font-size: 9px; }
  #doorRecords strong { font-size: 11px; }
  .door-bar button { min-height: 28px; font-size: 10px; }
  .image-tools button { min-height: 30px; font-size: 10px; }
  .is-admin .capture { max-height: calc(100% - 78px); top: 63%; }
  .station:has(#reasonForm:not([hidden])) #preview { min-height: 224px; }
  #reasonForm textarea, #task-text { font-size: 16px; }
  #reasonForm button { min-height: 28px; }
  .schedule-key { justify-content: flex-start; gap: 5px 12px; padding: 7px 6px 7px 42px; font-size: 10px; }
  .schedule-key > span { gap: 4px; }
  .studio-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--section-gap); }
  .task-card { grid-column: 1; grid-row: 1 / 3; align-self: stretch; }
  .gear-card { grid-column: 2; grid-row: 1; height: auto; grid-template-rows: var(--gear-heading) auto auto; }
  .gear-portrait { height: auto; aspect-ratio: 110 / 138; }
  .gear-card p { padding: 5px; font-size: 11px; line-height: 1.35; }
  .rules-card { grid-column: 2; grid-row: 2; height: 150px; padding: 12px 6px; }
  .rules-card header { padding: 4px 5px; }
  .rules-card h2 { font-size: 12px; }
  .task-card { min-height: calc(var(--gear-height) + 158px); }
  .task-card header { gap: 6px; padding: 6px; }
  .task-card header button { flex: 1 0 100%; min-height: 32px; margin: 0; }
  .task-card h2 { font-size: 13px; }
  #task-list li { min-height: 29px; }
  #task-list li > span { font-size: 12px; line-height: 1.4; }
  #task-form button, #request-list button, #task-list .task-remove { min-height: 32px; }
  #task-note, #request-list li, #task-requests h3 { font-size: 11px; }
  .todo-devil { --devil-width: 42px; left: 0; }
  .under #adminLink, #bookingToggle, .month-tool { min-height: 34px; }
}
@media (max-width: 349px) {
  main { width: calc(100% - 20px); }
  .station { grid-template-columns: minmax(0, 1.5fr) minmax(100px, 1fr); padding: 5px; }
  .schedule-key { font-size: 9px; column-gap: 8px; }
  .hero .about-copy { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .perch svg, .record b { animation: none; }
}
@media print {
  body { padding: 0; color: #000; background: #fff; }
  body > *, body::after { display: none !important; }
  body::before { display: none !important; }
}

.entry-terms { margin: 0; padding-left: 18px; text-align: left; font-size: 12px; line-height: 1.5; }
.entry-terms li + li { margin-top: 9px; }
.entry-card { flex-shrink: 0; }

.photo-window { width: 100%; height: 100%; overflow: hidden; }
.photo-window img { filter: blur(12px); transform: scale(1.12); }
.capture.revealed .photo-window img { filter: none; transform: none; }
.reveal-image { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 30px; padding: 5px 10px; border: 1px solid var(--ink); border-radius: 5px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 700; }
.capture.revealed .reveal-image { top: auto; left: auto; right: 4px; bottom: 5px; transform: none; min-height: 22px; padding: 2px 5px; font-size: 9px; }
.door-bar h2 { min-width: 0; }
.door-bar h2 svg { flex-shrink: 0; }

.entry-card.is-thanking > :not(#entryThanks) { display: none; }
#entryThanks { margin: 8px 0; font-size: 18px; font-weight: 700; line-height: 1.5; }

/* Small, playful movement without changing the compact layout. */
#acceptEntry:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #923757, 0 2px 0 #a87289; }
button { transition: background-color .18s ease, box-shadow .18s ease, filter .18s ease; }
.entry-card { animation: soft-arrival .4s ease-out both; }
.entry-heart { animation: heart-beat 2.4s ease-in-out infinite; transform-origin: center; }
#entryThanks { animation: soft-arrival .25s ease-out both; }
#siteContent:not([hidden]) main > * { animation: soft-arrival .5s ease-out both; }
#siteContent:not([hidden]) main > :nth-child(2) { animation-delay: .06s; }
#siteContent:not([hidden]) main > :nth-child(3) { animation-delay: .12s; }
#siteContent:not([hidden]) main > :nth-child(4) { animation-delay: .18s; }
#siteContent:not([hidden]) main > :nth-child(5) { animation-delay: .24s; }
.hero h1 svg { animation: title-sway 5s ease-in-out infinite; transform-origin: center bottom; }
.portrait-grid::before, .portrait-grid::after { animation: film-travel 4s linear infinite; }
.portrait-grid::after { animation-direction: reverse; }
.film-frame { overflow: hidden; }
.film-frame img { animation: portrait-breathe 7s ease-in-out infinite alternate; }
.film-frame:nth-child(even) img { animation-delay: -3.5s; }
.film-frame:nth-child(3n) img { animation-delay: -1.8s; }
.day .sticker { animation: sticker-dance 4s ease-in-out infinite; }
.day:nth-child(3n) .sticker { animation-delay: -1.3s; }
.day:nth-child(3n + 1) .sticker { animation-delay: -2.6s; }
.day .num { transition: transform .18s ease; }
.day:enabled:hover .num { transform: translateY(-1px) scale(1.1); }
.feed::before { content: ""; position: absolute; inset: -35% 0 65%; z-index: 1; pointer-events: none; background: linear-gradient(transparent, #ffe4f012, transparent); animation: camera-scan 6s linear infinite; }
.rules-stamp { animation: stamp-sway 4.5s ease-in-out infinite; }
.photo-window img { transition: filter .3s ease, transform .3s ease; }
@keyframes soft-arrival { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heart-beat { 0%, 45%, 100% { transform: scale(1) rotate(-5deg); } 55% { transform: scale(1.13) rotate(5deg); } 67% { transform: scale(1.03) rotate(-3deg); } 77% { transform: scale(1.09) rotate(3deg); } }
@keyframes title-sway { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
@keyframes film-travel { to { background-position: 9px 0; } }
@keyframes portrait-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes sticker-dance { 0%, 65%, 100% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-1px) rotate(-10deg); } 88% { transform: translateY(0) rotate(8deg); } }
@keyframes camera-scan { to { transform: translateY(400%); } }
@keyframes stamp-sway { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}