@font-face {
  font-family: "ChildFunSans";
  src: url("assets/fonts/ChildFunSans-CHS.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}

:root {
  --butter: #fff8d9;
  --butter-deep: #f8e8a9;
  --paper: #fffdf3;
  --caramel: #8a5a3b;
  --cocoa: #5b3a2a;
  --tan: #d6aa74;
  --pink: #e99292;
  --pink-soft: #f8d8d4;
  --sage: #91a77f;
  --line: #dcc5a0;
  --shadow: 0 12px 28px rgba(104, 72, 43, .12);
  --font-body: "ChildFunSans", "Microsoft YaHei", sans-serif;
  --font-hand: "ChildFunSans", "KaiTi", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--cocoa);
  font-family: var(--font-body);
  background-color: var(--butter);
  background-image: radial-gradient(circle, rgba(150, 105, 65, .18) 2px, transparent 2.5px);
  background-size: 26px 26px;
  animation: polka-drift 12s linear infinite;
  line-height: 1.75;
}

@keyframes polka-drift {
  from { background-position: 0 0; }
  to { background-position: 52px 52px; }
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(233, 146, 146, .48);
  outline-offset: 3px;
}

.top-ribbon { height: 7px; background: repeating-linear-gradient(90deg, var(--pink) 0 42px, var(--paper) 42px 55px, var(--sage) 55px 97px, var(--paper) 97px 110px); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 82px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(138, 90, 59, .14);
  background: rgba(255, 253, 243, .92);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 11px; width: max-content; }
.brand strong { display: block; font-family: var(--font-hand); font-size: 24px; line-height: 1.1; font-weight: 400; letter-spacing: 0; }
.brand small { display: block; margin-top: 3px; color: var(--tan); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; }
.brand-bear { width: 43px; height: 43px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(91,54,35,.12)); }
.nav-links { display: flex; gap: 38px; align-items: center; height: 100%; }
.nav-links a { position: relative; display: grid; place-items: center; height: 100%; font-size: 14px; font-weight: 600; }
.nav-links a::after { content: ""; position: absolute; bottom: 18px; width: 0; height: 5px; border-radius: 50%; background: var(--pink); transition: width .2s ease; }
.nav-links a:hover::after, .nav-links a.active::after { width: 22px; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 7px; }
.logout-btn { background: #f4ead6; }
.primary-btn, .secondary-btn {
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.primary-btn { color: #fffdf3; background: var(--caramel); box-shadow: 0 5px 0 #69432e; }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #69432e; }
.primary-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #69432e; }
.primary-btn svg, .text-link svg, .icon-btn svg, .search-wrap svg, .calendar-head svg { width: 18px; height: 18px; stroke-width: 2; }
.primary-btn.large { min-height: 52px; padding: 0 24px; }
.secondary-btn { background: #f3ead8; color: var(--caramel); }

.hero {
  position: relative;
  max-width: 1180px;
  min-height: 590px;
  margin: 0 auto;
  padding: 85px 30px 70px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 70px;
}
.hero::before { content: ""; position: absolute; left: 48%; bottom: 50px; width: 180px; height: 2px; background: repeating-linear-gradient(90deg, rgba(138,90,59,.3) 0 8px, transparent 8px 16px); transform: rotate(-8deg); }
.eyebrow { margin: 0 0 18px; color: var(--sage); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.4px; }
.eyebrow span { display: inline-block; width: 28px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--pink); }
h1, h2, h3, p { overflow-wrap: anywhere; }
.hero h1 { margin: 0; font-family: var(--font-hand); font-weight: 400; font-size: clamp(48px, 5vw, 64px); line-height: 1.25; letter-spacing: 0; }
.hero h1 em { color: var(--pink); font-style: normal; }
.hero-intro { max-width: 550px; margin: 25px 0 30px; color: #7c6858; font-size: 16px; }
.hero-actions { display: flex; align-items: center; gap: 26px; }
.text-link { display: inline-flex; gap: 7px; align-items: center; padding: 8px 0; color: var(--caramel); font-size: 14px; font-weight: 700; border-bottom: 1px dashed var(--tan); }

.hero-scene { position: relative; justify-self: center; width: min(100%, 430px); aspect-ratio: 1 / .92; transform: rotate(2deg); }
.sticker { position: absolute; display: block; pointer-events: none; user-select: none; }
.hero-sticker { z-index: 6; left: -24%; bottom: 16%; width: 82px; transform: rotate(-13deg); filter: drop-shadow(0 5px 4px rgba(102, 65, 40, .18)); }
.hero-scene::before { content: ""; position: absolute; inset: 18% -5% 2% 6%; border: 2px dashed rgba(138, 90, 59, .22); border-radius: 50%; transform: rotate(-4deg); }
.photo-note { position: absolute; inset: 8% 11% 2% 12%; display: flex; flex-direction: column; align-items: center; padding: 30px 30px 22px; background: var(--paper); border: 1px solid #ead9ba; box-shadow: 15px 18px 0 rgba(214, 170, 116, .22), var(--shadow); }
.photo-note::after { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(138,90,59,.18); pointer-events: none; }
.photo-note img { width: 64%; height: 70%; object-fit: contain; filter: drop-shadow(0 9px 5px rgba(97,59,35,.16)); }
.photo-note p { margin: auto 0 0; font-family: var(--font-hand); font-size: 25px; transform: rotate(-2deg); }
.photo-date { align-self: flex-end; color: var(--pink); font-weight: 700; font-size: 10px; letter-spacing: 2px; }
.tape { position: absolute; z-index: 2; width: 86px; height: 28px; opacity: .78; background: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px), #e8bd7b; }
.tape-one { top: 1%; left: 0; transform: rotate(-28deg); }.tape-two { right: 0; bottom: 8%; transform: rotate(-16deg); background-color: #efadad; }
.doodle { position: absolute; z-index: 3; font-family: var(--font-hand); }
.flower { top: 9%; right: 2%; color: var(--pink); font-size: 48px; transform: rotate(15deg); }.sparkle { left: 1%; bottom: 22%; color: #d3a13b; font-size: 35px; }.heart { right: 2%; top: 45%; color: var(--sage); font-size: 42px; }

.diary-section { border-top: 1px solid rgba(138, 90, 59, .18); background: rgba(255, 253, 243, .78); padding: 75px max(24px, calc((100vw - 1120px) / 2)) 100px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.section-heading .eyebrow { margin-bottom: 3px; }.section-heading h2 { margin: 0; font-family: var(--font-hand); font-size: 44px; font-weight: 400; }
.search-wrap { width: min(300px, 100%); height: 46px; padding: 0 15px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.search-wrap svg { color: var(--tan); flex: 0 0 auto; }.search-wrap input { width: 100%; border: 0; outline: 0; color: var(--cocoa); background: transparent; }
.search-wrap input::placeholder { color: #b8a48c; }
.filters { display: flex; gap: 8px; margin: 28px 0 32px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.filter { white-space: nowrap; border: 1px solid #dfc9aa; border-radius: 20px; padding: 8px 15px; color: #876b59; background: transparent; cursor: pointer; transition: .2s ease; }
.filter:hover, .filter.active { border-color: var(--caramel); color: var(--paper); background: var(--caramel); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 48px; align-items: start; }
.diary-list { display: grid; gap: 22px; }
.diary-card { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); min-height: 235px; border: 1px solid #e4d1b2; border-radius: 7px; background: var(--paper); box-shadow: 5px 6px 0 rgba(214, 170, 116, .16); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.diary-card:hover { transform: translateY(-3px) rotate(-.15deg); box-shadow: 7px 11px 0 rgba(214, 170, 116, .17); }
.date-block { padding: 26px 10px; text-align: center; color: var(--caramel); border-right: 1px dashed #d8bd98; background: #fff9df; }
.date-block strong { display: block; font-family: var(--font-hand); font-size: 42px; line-height: 1; font-weight: 400; }.date-block span { display: block; margin-top: 5px; font-size: 11px; letter-spacing: 1px; }.date-block i { display: block; width: 7px; height: 7px; margin: 18px auto 0; border-radius: 50%; background: var(--pink); box-shadow: 0 14px 0 var(--sage), 0 28px 0 #edc55c; }
.entry-body { min-width: 0; padding: 24px 28px 22px; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #a18b78; font-size: 11px; }
.category-tag { display: inline-flex; padding: 3px 9px; border-radius: 3px; color: var(--caramel); background: var(--pink-soft); font-weight: 700; }.weather { display: inline-flex; align-items: center; gap: 4px; }
.entry-body h3 { margin: 12px 0 8px; font-family: var(--font-hand); font-size: 28px; font-weight: 400; line-height: 1.25; }
.entry-body > p { display: -webkit-box; margin: 0; color: #79685b; font-size: 14px; line-height: 1.8; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.entry-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.mood-label { color: var(--pink); font-size: 12px; font-weight: 700; }
.card-actions { display: flex; gap: 5px; opacity: 0; transition: opacity .2s ease; }.diary-card:hover .card-actions, .card-actions:focus-within { opacity: 1; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--caramel); background: transparent; cursor: pointer; }
.icon-btn:hover { background: #f4ead6; }.icon-btn.danger:hover { color: #a54848; background: #f8dddd; }
.empty-state { padding: 70px 20px; text-align: center; border: 1px dashed var(--line); background: rgba(255,255,255,.48); }.empty-face { display: block; color: var(--caramel); font-size: 42px; }.empty-state h3 { font-family: var(--font-hand); font-size: 28px; font-weight: 400; margin: 8px 0; }.empty-state p { color: #8b7768; }

.sidebar { display: grid; gap: 24px; }
.profile-note, .calendar-note, .quote-note { position: relative; margin: 0; border: 1px solid #e1cba9; background: var(--paper); box-shadow: var(--shadow); }
.profile-note { padding: 35px 25px 25px; text-align: center; transform: rotate(1deg); }
.profile-sticker { z-index: 3; right: -28px; bottom: -28px; width: 78px; transform: rotate(11deg); filter: drop-shadow(0 5px 4px rgba(102, 65, 40, .16)); }
.clip { position: absolute; top: -10px; left: 49%; width: 20px; height: 52px; border: 3px solid var(--caramel); border-radius: 12px; transform: rotate(8deg); opacity: .65; }
.avatar { width: 90px; height: 90px; margin: 0 auto 13px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 5px solid #f4d5d3; background: var(--butter-deep); }.avatar img { width: 82%; height: 82%; object-fit: contain; }
.mini-label { margin: 0; color: var(--pink); font-size: 9px; font-weight: 700; letter-spacing: 2px; }
.profile-note h3 { margin: 3px 0 9px; font-family: var(--font-hand); font-weight: 400; font-size: 24px; }.profile-note > p:not(.mini-label) { margin: 0; color: #837164; font-size: 13px; }
.profile-stats { margin-top: 20px; padding-top: 16px; display: flex; justify-content: center; align-items: center; gap: 17px; border-top: 1px dashed var(--line); color: #9b8676; font-size: 11px; }.profile-stats strong { display: block; color: var(--caramel); font-family: var(--font-hand); font-size: 23px; line-height: 1; font-weight: 400; }.profile-stats i { width: 1px; height: 28px; background: var(--line); }
.calendar-note { padding: 22px; transform: rotate(-.8deg); }.calendar-head { display: flex; justify-content: space-between; align-items: center; color: var(--caramel); }.calendar-head div { display: flex; align-items: baseline; gap: 8px; }.calendar-head span { font-size: 11px; letter-spacing: 1px; }.calendar-head strong { font-family: var(--font-hand); font-size: 26px; font-weight: 400; }.calendar-head svg { color: var(--pink); }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 3px; }.weekdays { margin: 12px 0 6px; color: #b19a87; font-size: 9px; }.calendar-grid span { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: 10px; }.calendar-grid .muted { color: #d7caba; }.calendar-grid .today { z-index: 0; color: white; font-weight: 700; }.calendar-grid .today::before { content: ""; position: absolute; z-index: -1; width: 28px; height: 25px; border-radius: 48% 52% 43% 57%; background: var(--pink); transform: rotate(-7deg); }.calendar-note > p { margin: 15px 0 0; padding-top: 12px; text-align: center; border-top: 1px dashed var(--line); color: #917b6c; font-size: 11px; }.tiny-heart { color: var(--pink); }
.quote-note { padding: 25px 22px; font-family: var(--font-hand); color: var(--caramel); font-size: 21px; line-height: 1.6; background: #f7dfdf; transform: rotate(1.5deg); }.quote-note cite { display: block; margin-top: 7px; color: #9f8070; font-family: var(--font-body); font-size: 9px; font-style: normal; letter-spacing: 1px; }

.entry-location { display: inline-flex; align-items: center; gap: 4px; }.entry-location svg { width: 13px; height: 13px; }
.entry-photos { display: flex; gap: 7px; margin-top: 13px; overflow: hidden; }.entry-photo { width: 58px; height: 48px; flex: 0 0 auto; padding: 3px; border: 1px solid #e0c9a6; background: #fff; cursor: zoom-in; transform: rotate(-1deg); transition: transform .18s ease, box-shadow .18s ease; }.entry-photo:nth-child(even) { transform: rotate(2deg); }.entry-photo:hover { z-index: 1; transform: translateY(-2px) rotate(0); box-shadow: 3px 5px 0 rgba(138,90,59,.12); }.entry-photo img { width: 100%; height: 100%; object-fit: cover; }

.album-section { position: relative; padding: 80px max(24px, calc((100vw - 1120px) / 2)) 100px; border-top: 1px solid rgba(138, 90, 59, .16); background: rgba(248, 216, 212, .74); overflow: hidden; }
.album-sticker { top: 84px; right: max(18px, calc((100vw - 1120px) / 2)); width: 104px; transform: rotate(8deg); filter: drop-shadow(0 6px 5px rgba(102, 65, 40, .16)); }
.album-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 38px; }.album-heading h2 { margin: 0; font-family: var(--font-hand); font-size: 44px; font-weight: 400; }.album-heading > p { margin: 0 0 8px; color: #9a7c69; font-size: 12px; }.album-heading > p strong { color: var(--pink); font-family: var(--font-hand); font-size: 28px; font-weight: 400; }
.album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.album-photo { position: relative; margin: 0; padding: 10px 10px 30px; border: 1px solid #dfc8a6; background: #fffdf7; box-shadow: 6px 8px 0 rgba(138, 90, 59, .1); transform: rotate(-1deg); transition: transform .22s ease, box-shadow .22s ease; }.album-photo:nth-child(3n + 2) { transform: rotate(1.5deg); }.album-photo:nth-child(3n) { transform: rotate(-.3deg); }.album-photo:hover { z-index: 2; transform: translateY(-5px) rotate(0); box-shadow: 9px 13px 0 rgba(138, 90, 59, .12); }
.album-photo button { width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #f2eadc; cursor: zoom-in; overflow: hidden; }.album-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }.album-photo button:hover img { transform: scale(1.035); }.album-photo figcaption { position: absolute; left: 12px; right: 12px; bottom: 6px; display: flex; justify-content: space-between; gap: 8px; color: #8a725f; font-size: 10px; }.album-photo figcaption strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-hand); font-size: 15px; font-weight: 400; }
.album-empty { padding: 65px 20px; text-align: center; color: #907968; border: 1px dashed rgba(138,90,59,.3); background: rgba(255,253,243,.45); }.album-empty span { display: block; color: var(--pink); font-size: 38px; }.album-empty h3 { margin: 6px 0; font-family: var(--font-hand); font-size: 27px; font-weight: 400; }.album-empty p { margin: 0; font-size: 13px; }

footer { min-height: 150px; padding: 35px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #806a5a; background: #f2dca9; border-top: 1px dashed rgba(138,90,59,.3); text-align: center; }.footer-bear { font-size: 26px; }footer p { margin: 5px; font-family: var(--font-hand); font-size: 20px; }footer > span:last-child { font-size: 8px; letter-spacing: 2px; }

.editor-dialog { width: min(780px, calc(100% - 32px)); max-height: calc(100vh - 30px); padding: 0; border: 1px solid #d9bd94; border-radius: 7px; color: var(--cocoa); background-color: var(--paper); background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(145, 167, 127, .13) 31px 32px); box-shadow: 0 30px 80px rgba(61, 40, 27, .32); overflow: auto; }
.editor-dialog::backdrop { background: rgba(80, 56, 38, .36); backdrop-filter: blur(4px); }
.editor-dialog form { position: relative; padding: 36px 34px 32px 70px; }.editor-dialog form::before { content: ""; position: absolute; left: 12px; top: 24px; bottom: 24px; width: 24px; background: radial-gradient(circle, var(--paper) 0 5px, #c2a47e 5.5px 6.5px, transparent 7px) center top / 20px 32px repeat-y; }.editor-dialog form::after { content: ""; position: absolute; left: 49px; top: 0; bottom: 0; width: 2px; background: rgba(233, 146, 146, .4); }.dialog-head { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; margin-bottom: 22px; }.dialog-head h2 { margin: 0; font-family: var(--font-hand); font-size: 36px; font-weight: 400; }.dialog-head .icon-btn { background: #f4ead6; }
.journal-body-label { position: relative; }
.notebook-friend { position: absolute; z-index: 4; display: block; pointer-events: none; user-select: none; transform-origin: 50% 100%; filter: drop-shadow(0 4px 3px rgba(102, 65, 40, .18)); }
.notebook-bear { top: -15px; right: 14px; width: 76px; animation: bear-peek 3.2s ease-in-out infinite; }
.notebook-chick { top: -38px; right: 14px; width: 56px; animation: chick-peek 2.7s ease-in-out infinite; }
@keyframes bear-peek { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes chick-peek { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-4px) rotate(-3deg); } }
.editor-dialog label { position: relative; z-index: 1; display: grid; gap: 6px; color: #8a725f; font-size: 12px; font-weight: 600; }.editor-dialog input, .editor-dialog textarea, .editor-dialog select { width: 100%; border: 1px solid #ddc8a8; border-radius: 5px; padding: 11px 12px; color: var(--cocoa); background: rgba(255, 253, 247, .92); outline: 0; }.editor-dialog textarea { resize: vertical; line-height: 1.9; background: rgba(255,253,247,.76); }.editor-dialog input:focus, .editor-dialog textarea:focus, .editor-dialog select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(233,146,146,.15); }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 15px; }.location-field, .form-row + label { margin-bottom: 15px; }.input-with-icon { position: relative; }.input-with-icon svg { position: absolute; z-index: 2; left: 11px; top: 50%; width: 16px; height: 16px; color: var(--pink); transform: translateY(-50%); }.input-with-icon input { padding-left: 36px; }
.photo-field { position: relative; z-index: 1; margin-top: 18px; padding: 16px; border: 1px dashed #d6b88f; background: rgba(255, 249, 223, .72); }.photo-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 11px; color: #8a725f; font-size: 12px; font-weight: 600; }.photo-field-head small { color: #ad9885; font-size: 9px; font-weight: 400; }.photo-picker { width: max-content; min-height: 38px; display: inline-flex !important; grid-template-columns: auto auto; align-items: center; gap: 7px !important; padding: 0 13px; border: 1px solid #d7bb93; border-radius: 5px; color: var(--caramel) !important; background: var(--paper); cursor: pointer; }.photo-picker:hover { background: #f8ead9; }.photo-picker svg { width: 17px; }
.photo-preview-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }.photo-preview { position: relative; aspect-ratio: 1; padding: 4px; border: 1px solid #dfc9a9; background: #fff; transform: rotate(-1deg); }.photo-preview:nth-child(even) { transform: rotate(1.5deg); }.photo-preview img { width: 100%; height: 100%; object-fit: cover; }.photo-preview button { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: #9d594e; cursor: pointer; }.photo-preview button svg { width: 13px; }
.mood-picker { margin-top: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #8a725f; font-size: 12px; }.mood-picker > span { margin-right: 4px; font-weight: 600; }.mood-picker label { position: relative; display: flex; align-items: center; gap: 4px; padding: 7px 10px; border: 1px solid #e0cbae; border-radius: 18px; cursor: pointer; }.mood-picker input { position: absolute; opacity: 0; pointer-events: none; }.mood-picker label:has(input:checked) { border-color: var(--pink); background: var(--pink-soft); }.mood-picker b { font-size: 15px; }.mood-picker small { font-size: 10px; }
.dialog-actions { margin-top: 25px; display: flex; justify-content: flex-end; gap: 10px; }

.lightbox-dialog { width: min(900px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 14px 14px 18px; border: 1px solid #d4b990; border-radius: 6px; background: var(--paper); box-shadow: 0 30px 80px rgba(61,40,27,.4); }.lightbox-dialog::backdrop { background: rgba(53, 38, 28, .76); backdrop-filter: blur(5px); }.lightbox-dialog > .icon-btn { position: absolute; z-index: 2; top: 22px; right: 22px; color: #fff; background: rgba(61,40,27,.68); }.lightbox-dialog > img { width: 100%; max-height: calc(100vh - 120px); object-fit: contain; background: #eadfcd; }.lightbox-caption { display: flex; justify-content: space-between; gap: 15px; padding: 10px 5px 0; color: #8a725f; }.lightbox-caption strong { font-family: var(--font-hand); font-size: 20px; font-weight: 400; }.lightbox-caption span { font-size: 11px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; min-height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 18px; color: #fff; background: var(--cocoa); border-radius: 6px; box-shadow: var(--shadow); transform: translate(-50%, 120px); opacity: 0; transition: .28s ease; }.toast.show { transform: translate(-50%, 0); opacity: 1; }.toast svg { width: 18px; }

.login-dialog { width: min(410px, calc(100% - 32px)); padding: 0; border: 1px solid #d9bd94; border-radius: 8px; color: var(--cocoa); background: var(--paper); box-shadow: 0 30px 80px rgba(61, 40, 27, .32); }
.login-dialog::backdrop { background: rgba(80, 56, 38, .36); backdrop-filter: blur(4px); }
.login-dialog form { position: relative; padding: 32px; text-align: center; }
.login-close { position: absolute; top: 14px; right: 14px; background: #f4ead6; }
.login-bear { width: 96px; height: 96px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--butter-deep); }
.login-bear img { width: 76%; height: 76%; object-fit: contain; }
.login-dialog h2 { margin: 3px 0 4px; font-family: var(--font-hand); font-size: 34px; font-weight: 400; }
.login-dialog form > p:not(.mini-label):not(.form-error) { margin: 0 0 20px; color: #8a725f; font-size: 13px; }
.login-dialog label { display: grid; gap: 6px; text-align: left; color: #8a725f; font-size: 12px; font-weight: 600; }
.login-dialog input { width: 100%; border: 1px solid #ddc8a8; border-radius: 5px; padding: 11px 12px; color: var(--cocoa); background: #fffdf7; outline: 0; }
.login-dialog input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(233,146,146,.15); }
.login-dialog .primary-btn { width: 100%; margin-top: 18px; }
.form-error { margin: 8px 0 0; color: #a54848; font-size: 12px; text-align: left; }

.pet-widget { position: fixed; right: max(16px, calc((100vw - 1360px) / 2)); bottom: 16px; z-index: 18; width: 136px; display: grid; justify-items: center; pointer-events: none; }
.pet-button { width: 112px; height: 122px; padding: 0; display: grid; place-items: end center; border: 0; background: transparent; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 8px 5px rgba(91, 58, 42, .18)); transition: transform .2s ease; }
.pet-button:hover { transform: translateY(-4px); }
.pet-button img { width: 100%; height: 100%; object-fit: contain; }
.pet-bubble { position: relative; max-width: 136px; margin-bottom: -5px; padding: 7px 10px; border: 1px solid #d9bd94; border-radius: 6px; color: var(--caramel); background: var(--paper); box-shadow: 3px 4px 0 rgba(214, 170, 116, .18); font-size: 10px; line-height: 1.45; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.pet-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; border-right: 1px solid #d9bd94; border-bottom: 1px solid #d9bd94; background: var(--paper); transform: translateX(-50%) rotate(45deg); }
.pet-bubble.show { opacity: 1; transform: translateY(0); }

.auth-pending main, .auth-pending footer, .auth-pending .nav-links, .auth-pending .header-actions,
.auth-pending .pet-widget, .auth-locked main, .auth-locked footer, .auth-locked .nav-links, .auth-locked .header-actions,
.auth-locked .pet-widget { visibility: hidden; }
.auth-pending .site-header, .auth-locked .site-header { grid-template-columns: 1fr; }
.auth-pending .login-close, .auth-locked .login-close { display: none; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }.nav-links { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 65px; gap: 40px; }.hero-copy { text-align: center; }.hero-intro { margin-left: auto; margin-right: auto; }.hero-actions { justify-content: center; }.hero-scene { width: min(380px, 90vw); }
  .content-grid { grid-template-columns: 1fr; }.sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }.quote-note { grid-column: 1 / -1; }
  .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .site-header { height: 70px; padding: 0 16px; }.brand strong { font-size: 20px; }.brand small { display: none; }.header-actions .primary-btn { min-height: 40px; padding: 0 13px; }
  .hero { padding: 50px 18px 55px; }.hero h1 { font-size: 41px; }.hero-intro { font-size: 14px; }.hero-actions { flex-direction: column; gap: 14px; }.hero-scene { width: 330px; max-width: 95vw; }
  .hero-sticker, .profile-sticker, .album-sticker { display: none; }.notebook-bear { top: -10px; right: 8px; width: 60px; }.notebook-chick { top: -34px; right: 8px; width: 45px; }
  .diary-section { padding: 55px 16px 70px; }.section-heading { align-items: stretch; flex-direction: column; }.search-wrap { width: 100%; }.section-heading h2 { font-size: 38px; }
  .diary-card { grid-template-columns: 70px minmax(0, 1fr); }.date-block { padding: 24px 6px; }.date-block strong { font-size: 34px; }.entry-body { padding: 21px 18px; }.entry-body h3 { font-size: 25px; }.card-actions { opacity: 1; }
  .sidebar { grid-template-columns: 1fr; }.quote-note { grid-column: auto; }
  .album-section { padding: 55px 16px 70px; }.album-heading { align-items: start; flex-direction: column; gap: 5px; }.album-heading h2 { font-size: 38px; }.album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 12px; }.album-photo { padding: 7px 7px 27px; }
  .editor-dialog form { padding: 27px 17px 22px 43px; }.editor-dialog form::before { left: 5px; }.editor-dialog form::after { left: 32px; }.form-row { grid-template-columns: 1fr 1fr; }.form-row label:first-child { grid-column: 1 / -1; }.photo-field-head { align-items: start; flex-direction: column; gap: 2px; }.photo-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.dialog-actions { flex-direction: column-reverse; }.dialog-actions button { width: 100%; }
  .pet-widget { right: 6px; bottom: 5px; width: 104px; }.pet-button { width: 86px; height: 95px; }.pet-bubble { max-width: 104px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { body { animation: none; } .notebook-friend { animation: none; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Notebook library */
.app-shell main { min-height: calc(100vh - 220px); }
.app-header { position: sticky; top: 0; z-index: 20; }
.app-nav a { position: relative; border-bottom: 0; }
.app-nav a::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 0; height: 6px; border-radius: 50%; background: var(--pink); transform: translateX(-50%); transition: width .2s ease; }
.app-nav a:hover::after, .app-nav a.active::after { width: 34px; }
.app-view { padding: 72px max(24px, calc((100vw - 1120px) / 2)) 92px; }
.app-view[hidden] { display: none; }
.shelf-view { min-height: 660px; overflow: hidden; background: linear-gradient(180deg, rgba(255,253,243,.82), rgba(245,220,173,.6)); }
.shelf-view::after { content: ""; display: block; height: 60px; margin: 44px -5% -92px; border-top: 13px solid #af704a; background: repeating-linear-gradient(90deg, #8c5437 0 70px, #a76745 70px 72px); box-shadow: inset 0 10px 0 rgba(255,236,185,.27), 0 -8px 20px rgba(87,52,31,.12); }
.view-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; max-width: 1120px; margin: 0 auto 43px; }
.view-heading h1 { margin: 0; font-family: var(--font-hand); font-size: 48px; font-weight: 400; line-height: 1.15; }
.view-heading > div > p:last-child { max-width: 560px; margin: 12px 0 0; color: #806c5c; font-size: 14px; }
.view-heading .eyebrow { margin: 0 0 7px; }
.compact-heading { margin-bottom: 25px; }.view-tools { display: flex; align-items: center; gap: 10px; }.view-tools select, .compact-heading > select { min-height: 43px; border: 1px solid #ddc8a8; border-radius: 5px; padding: 0 28px 0 12px; color: var(--caramel); background: var(--paper); }
.notebook-shelf { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; max-width: 1080px; margin: 0 auto; align-items: end; }
.notebook-card { position: relative; min-width: 0; padding: 0 12px 14px 18px; animation: book-float 4.4s ease-in-out var(--delay) infinite; }
.notebook-card:nth-child(even) { animation-direction: reverse; }
.notebook-cover { position: relative; isolation: isolate; display: flex; min-height: 286px; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 16px; overflow: hidden; border: 0; border-radius: 6px 12px 12px 6px; padding: 33px 21px 29px 29px; color: #5d3f2d; cursor: pointer; background: linear-gradient(90deg, rgba(91,54,35,.24) 0 10px, transparent 10px 17px, rgba(255,255,255,.15) 18px 19px, transparent 20px), radial-gradient(circle, rgba(120,73,44,.18) 0 2px, transparent 2.7px) 5px 7px / 18px 18px, linear-gradient(135deg, rgba(255,255,255,.24), transparent 42%), var(--cover); box-shadow: inset 0 0 0 2px rgba(91,54,35,.15), inset -11px 0 0 rgba(255,251,231,.26), 12px 15px 0 rgba(113,68,42,.16), 0 18px 22px rgba(91,54,35,.16); transform: perspective(680px) rotateY(-5deg) rotateZ(-1deg); transition: transform .28s ease, box-shadow .28s ease; }
.notebook-cover::before { content: ""; position: absolute; z-index: -1; inset: 12px 11px 12px 21px; border: 1px solid rgba(91,54,35,.28); border-radius: 3px 7px 7px 3px; box-shadow: inset 0 0 0 5px rgba(255,254,239,.12); }
.notebook-cover::after { content: ""; position: absolute; z-index: -1; top: 24px; right: -2px; bottom: 24px; width: 7px; border-radius: 3px; background: repeating-linear-gradient(180deg, rgba(118,80,51,.28) 0 1px, rgba(255,255,240,.55) 1px 3px); }
.notebook-cover:hover { transform: translateY(-12px) perspective(680px) rotateY(-8deg) rotateZ(1deg); box-shadow: inset 0 0 0 2px rgba(91,54,35,.15), inset -11px 0 0 rgba(255,251,231,.26), 15px 23px 0 rgba(113,68,42,.17), 0 28px 28px rgba(91,54,35,.18); }
.notebook-cover i { position: relative; z-index: 2; width: 43px; height: 43px; padding: 10px; border: 1px solid rgba(91,54,35,.25); border-radius: 50%; background: rgba(255,251,231,.55); }
.notebook-cover strong { position: relative; z-index: 2; max-width: 100%; font-family: var(--font-hand); font-size: 31px; font-weight: 400; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }.notebook-cover small { position: relative; z-index: 2; min-height: 32px; color: rgba(79,50,34,.76); font-size: 11px; line-height: 1.45; text-align: center; }.notebook-cover em { position: relative; z-index: 2; margin-top: auto; color: rgba(79,50,34,.74); font-size: 10px; font-style: normal; letter-spacing: 1px; }
.cover-spine { position: absolute; top: 0; bottom: 0; left: -9px; width: 20px; border-radius: 5px 0 0 5px; background: linear-gradient(90deg, rgba(65,38,27,.36), rgba(255,255,255,.15) 45%, rgba(65,38,27,.2)); }.cover-print { position: absolute; z-index: 1; right: 16px; bottom: 13px; width: 102px; max-height: 112px; object-fit: contain; opacity: .28; mix-blend-mode: multiply; filter: sepia(.55) saturate(.68) contrast(.88); transform: rotate(-8deg); }.cover-pattern-1 { background: linear-gradient(90deg, rgba(91,54,35,.24) 0 10px, transparent 10px 17px, rgba(255,255,255,.15) 18px 19px, transparent 20px), radial-gradient(circle, rgba(255,251,227,.53) 0 2.2px, transparent 2.8px) 2px 1px / 18px 18px, var(--cover); }.cover-pattern-2 { background: linear-gradient(90deg, rgba(91,54,35,.24) 0 10px, transparent 10px 17px, rgba(255,255,255,.15) 18px 19px, transparent 20px), conic-gradient(from 90deg, rgba(255,250,224,.16) 25%, transparent 0 50%, rgba(255,250,224,.16) 0 75%, transparent 0) 0 0 / 20px 20px, var(--cover); }.cover-pattern-3 { background: linear-gradient(90deg, rgba(91,54,35,.24) 0 10px, transparent 10px 17px, rgba(255,255,255,.15) 18px 19px, transparent 20px), repeating-linear-gradient(-45deg, rgba(255,251,227,.2) 0 2px, transparent 2px 14px), var(--cover); }.cover-pattern-4 { background: linear-gradient(90deg, rgba(91,54,35,.24) 0 10px, transparent 10px 17px, rgba(255,255,255,.15) 18px 19px, transparent 20px), radial-gradient(ellipse, rgba(255,249,222,.34) 0 2px, transparent 2.8px) 4px 5px / 21px 17px, var(--cover); }.cover-pattern-1 .cover-print { right: 11px; bottom: 16px; width: 89px; transform: rotate(8deg); }.cover-pattern-2 .cover-print { right: 9px; bottom: 10px; width: 110px; transform: rotate(-4deg); }.cover-pattern-3 .cover-print { right: 12px; bottom: 17px; width: 96px; transform: rotate(5deg); }.cover-pattern-4 .cover-print { right: 7px; bottom: 13px; width: 114px; transform: rotate(-9deg); }.cover-corner { position: absolute; right: 0; bottom: 0; width: 31px; height: 31px; border-top: 1px solid rgba(91,54,35,.23); border-left: 1px solid rgba(91,54,35,.23); background: rgba(255,254,240,.38); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.notebook-card-actions { position: absolute; right: 15px; bottom: -5px; display: flex; gap: 1px; opacity: 0; transform: translateY(-5px); transition: .2s ease; }.notebook-card:hover .notebook-card-actions { opacity: 1; transform: translateY(0); }.notebook-card-actions .icon-btn { width: 30px; height: 30px; color: #6d4a35; background: var(--paper); box-shadow: 1px 2px 0 rgba(91,54,35,.1); }
.add-notebook-card { min-height: 286px; display: grid; align-content: center; justify-items: center; gap: 12px; border: 2px dashed #cda77c; border-radius: 7px; color: var(--caramel); background: rgba(255,253,243,.55); cursor: pointer; transition: .2s ease; }.add-notebook-card:hover { background: var(--paper); transform: translateY(-5px); }.add-notebook-card i { width: 32px; height: 32px; }.add-notebook-card span { font-family: var(--font-hand); font-size: 23px; }
@keyframes book-float { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-8px) rotate(.6deg); } }
.diary-view { background: rgba(255,253,243,.77); }.diary-search { max-width: 390px; margin: 0 0 28px; }.diary-view .diary-list { max-width: 870px; }.diary-view .empty-state { max-width: 870px; }.album-view { background: rgba(248,216,212,.64); }.album-view .album-grid { max-width: 1120px; }.profile-view { display: grid; min-height: 620px; place-items: center; background: rgba(255,253,243,.72); }.profile-paper { position: relative; width: min(560px, 100%); padding: 53px 55px 45px; text-align: center; border: 1px solid #e1cba9; background: var(--paper); box-shadow: 12px 14px 0 rgba(214,170,116,.18), var(--shadow); transform: rotate(-.6deg); }.profile-avatar { width: 110px; height: 110px; display: grid; place-items: center; margin: 0 auto 13px; overflow: hidden; border: 5px solid #f4d5d3; border-radius: 50%; background: var(--butter-deep); }.profile-avatar img { width: 85%; height: 85%; object-fit: contain; }.profile-paper h1 { margin: 8px 0 3px; font-family: var(--font-hand); font-size: 42px; font-weight: 400; }.profile-name { margin: 0; color: var(--pink); font-size: 16px; }.profile-bio { max-width: 390px; margin: 22px auto; color: #7e6b5c; line-height: 1.8; }.profile-paper blockquote { margin: 25px 0; padding: 15px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); color: var(--caramel); font-family: var(--font-hand); font-size: 25px; }.profile-paper .profile-sticker { right: -46px; bottom: -39px; width: 100px; }
.notebook-dialog, .profile-dialog { width: min(520px, calc(100% - 32px)); padding: 0; border: 1px solid #d9bd94; border-radius: 7px; color: var(--cocoa); background-color: var(--paper); box-shadow: 0 30px 80px rgba(61,40,27,.32); }.notebook-dialog::backdrop, .profile-dialog::backdrop { background: rgba(80,56,38,.36); backdrop-filter: blur(4px); }.notebook-dialog form, .profile-dialog form { display: grid; gap: 15px; padding: 30px; }.notebook-dialog label, .profile-dialog label { display: grid; gap: 6px; color: #8a725f; font-size: 12px; font-weight: 600; }.notebook-dialog input, .notebook-dialog textarea, .notebook-dialog select, .profile-dialog input, .profile-dialog textarea { width: 100%; border: 1px solid #ddc8a8; border-radius: 5px; padding: 11px 12px; color: var(--cocoa); background: rgba(255,253,247,.92); outline: 0; }.swatch-field { margin: 0; padding: 0; border: 0; color: #8a725f; font-size: 12px; font-weight: 600; }.swatch-field legend { margin-bottom: 8px; }#colorChoices { display: flex; gap: 11px; }#colorChoices label { display: block; }#colorChoices input { position: absolute; opacity: 0; }#colorChoices span { width: 31px; height: 31px; display: block; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 3px rgba(255,255,255,.4); cursor: pointer; }#colorChoices input:checked + span { border-color: var(--cocoa); }
.profile-actions { display: flex; justify-content: center; gap: 10px; }.avatar-picker { margin: 0; padding: 0; border: 0; color: #8a725f; font-size: 12px; font-weight: 600; }.avatar-picker legend { margin-bottom: 9px; }#avatarChoices { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }#avatarChoices label { position: relative; display: block; }#avatarChoices input { position: absolute; opacity: 0; }#avatarChoices img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 4px; border: 2px solid transparent; border-radius: 50%; background: #f6e4b8; cursor: pointer; }#avatarChoices input:checked + img { border-color: var(--pink); background: #fff7e6; }.person-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 3px 0 10px; }.person-choice { display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 7px; min-height: 58px; padding: 7px; border: 1px solid #dec6a4; border-radius: 6px; color: var(--caramel); background: rgba(255,253,247,.85); cursor: pointer; text-align: left; }.person-choice img { width: 39px; height: 39px; object-fit: contain; }.person-choice.active { border-color: var(--pink); background: var(--pink-soft); box-shadow: 0 0 0 2px rgba(233,146,146,.13); }.login-bear img { width: 88%; height: 88%; }
.album-view { background: #e7b8ac; }.photo-book { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 590px; max-width: 1120px; margin: 0 auto; border: 13px solid #8c563b; border-radius: 7px 13px 13px 7px; background: #8c563b; box-shadow: inset 0 0 0 2px rgba(255,238,187,.25), 18px 23px 0 rgba(96,54,37,.2), 0 27px 37px rgba(75,42,27,.22); transform: perspective(1400px) rotateX(1deg); }.photo-book::before { content: ""; position: absolute; z-index: 4; top: -13px; bottom: -13px; left: calc(50% - 12px); width: 25px; border-right: 2px solid rgba(79,43,28,.35); border-left: 2px solid rgba(255,237,191,.36); background: linear-gradient(90deg, #69412e, #bf7b50 50%, #71442f); box-shadow: 4px 0 10px rgba(55,30,20,.3); }.album-page { position: relative; min-width: 0; overflow: hidden; padding: 42px 37px; background-color: #fff9e7; background-image: repeating-linear-gradient(0deg, transparent 0 29px, rgba(126,164,115,.12) 29px 30px); }.album-page-left { border-radius: 2px 0 0 2px; }.album-page-right { display: block; border-radius: 0 7px 7px 0; background-color: #fff3cf; background-image: radial-gradient(circle, rgba(155,96,63,.15) 0 1.5px, transparent 2px); background-size: 19px 19px; }.book-ribbon { position: absolute; z-index: 6; top: -11px; right: 16%; width: 70px; height: 27px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 7px, transparent 7px 14px), #e69c9c; transform: rotate(4deg); }.page-label { position: relative; z-index: 2; margin: 0 0 19px; color: #a37860; font-size: 10px; font-weight: 700; letter-spacing: 2px; }.photo-book .album-grid { position: relative; z-index: 2; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 21px 17px; }.photo-book .album-photo { padding: 8px 8px 27px; box-shadow: 4px 6px 0 rgba(111,72,48,.13); }.photo-book .album-empty { position: relative; z-index: 2; min-height: 340px; display: grid; align-content: center; border: 2px dashed rgba(138,90,59,.27); background: rgba(255,253,243,.42); }.album-bear-print { position: absolute; z-index: 1; left: -20px; bottom: -17px; width: 134px; opacity: .18; mix-blend-mode: multiply; filter: sepia(.4) saturate(.7); }.album-chick-print { position: absolute; right: 32px; bottom: 24px; width: 110px; opacity: .72; filter: drop-shadow(0 4px 2px rgba(91,54,35,.16)); }.album-page-note { position: relative; z-index: 2; display: grid; max-width: 250px; gap: 16px; padding: 40px 28px; border: 1px dashed rgba(138,90,59,.34); background: rgba(255,250,226,.52); text-align: center; transform: rotate(1.5deg); }.album-page-note span { color: var(--pink); font-size: 9px; font-weight: 700; letter-spacing: 2px; }.album-page-note strong { font-family: var(--font-hand); color: var(--caramel); font-size: 38px; font-weight: 400; line-height: 1.3; }.album-page-note small { color: #947660; font-size: 12px; line-height: 1.7; }.album-stamp { position: absolute; z-index: 2; top: 37px; right: 36px; width: 37px; height: 37px; display: grid; place-items: center; border: 2px solid #d68b8e; border-radius: 50%; color: #d68b8e; font-size: 21px; transform: rotate(12deg); }
@media (max-width: 720px) { .photo-book { grid-template-columns: 1fr; min-height: auto; border-width: 9px; transform: none; }.photo-book::before { top: calc(50% - 8px); bottom: auto; left: -9px; width: auto; height: 16px; right: -9px; border-top: 2px solid rgba(255,237,191,.36); border-bottom: 2px solid rgba(79,43,28,.35); border-left: 0; border-right: 0; background: linear-gradient(#69412e, #bf7b50 50%, #71442f); }.album-page { min-height: 410px; padding: 30px 22px; }.album-page-left, .album-page-right { border-radius: 2px; }.photo-book .album-grid { gap: 15px 11px; }.album-page-note strong { font-size: 34px; }.book-ribbon { right: 13%; }.album-chick-print { right: 18px; width: 85px; } }

/* Preserve each character's original colors on notebook covers. */
.notebook-cover .cover-print { opacity: .8; mix-blend-mode: normal; filter: saturate(.9) contrast(.96); }

#colorChoices { flex-wrap: wrap; gap: 10px; }

.album-pagination { position: absolute; z-index: 4; right: 28px; bottom: 25px; display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: 1px solid rgba(138,90,59,.22); background: rgba(255,250,226,.72); color: #8c6c58; font-size: 11px; }.album-pagination .icon-btn { width: 31px; height: 31px; border-radius: 4px; background: #f8e7cf; }.album-pagination .icon-btn:disabled { cursor: default; opacity: .35; }.album-pagination .icon-btn:not(:disabled):hover { background: #f3d3ce; }
.album-view { background-color: #f8e8a9; background-image: radial-gradient(circle, rgba(138,90,59,.14) 0 2px, transparent 2.7px); background-size: 20px 20px; }.album-page-right .album-grid { position: relative; z-index: 2; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 21px 17px; }.page-label-right { text-align: left; padding-right: 0; }.album-page-right { background-color: #fff9e7; background-image: repeating-linear-gradient(0deg, transparent 0 29px, rgba(126,164,115,.12) 29px 30px); }.album-page-right .album-photo { padding: 8px 8px 27px; box-shadow: 4px 6px 0 rgba(111,72,48,.13); }
.photo-book .album-empty[hidden] { display: none; }.album-turn { position: absolute; z-index: 8; top: 50%; width: 88px; min-height: 96px; display: grid; align-content: center; justify-items: center; gap: 5px; border: 1px solid #d4b990; color: #8d6148; background: repeating-linear-gradient(180deg, transparent 0 16px, rgba(132,163,117,.13) 16px 17px), #fff9e7; box-shadow: 5px 7px 0 rgba(101,61,39,.14); cursor: pointer; font-family: var(--font-hand); font-size: 17px; transform: translateY(-50%); transition: transform .2s ease, box-shadow .2s ease; }.album-turn i { width: 21px; height: 21px; }.album-turn-prev { left: -84px; border-radius: 7px 0 0 7px; transform: translateY(-50%) rotate(-4deg); }.album-turn-next { right: -84px; border-radius: 0 7px 7px 0; transform: translateY(-50%) rotate(4deg); }.album-turn:not(:disabled):hover { box-shadow: 7px 10px 0 rgba(101,61,39,.16); }.album-turn-prev:not(:disabled):hover { transform: translateY(-50%) translateX(-5px) rotate(-4deg); }.album-turn-next:not(:disabled):hover { transform: translateY(-50%) translateX(5px) rotate(4deg); }.album-turn:disabled { cursor: default; opacity: .36; }.album-page-count { position: absolute; z-index: 3; right: 30px; bottom: 27px; color: #9a7961; font-family: var(--font-hand); font-size: 18px; }.album-pagination { display: none; }
@media (max-width: 1220px) { .album-turn-prev { left: 16px; }.album-turn-next { right: 16px; } }.album-page-count { right: 22px; bottom: 20px; }
@media (max-width: 720px) { .album-turn { top: auto; bottom: 14px; width: 74px; min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 0; }.album-turn-prev { left: 14px; transform: rotate(-3deg); }.album-turn-next { right: 14px; transform: rotate(3deg); }.album-turn-prev:not(:disabled):hover { transform: translateX(-2px) rotate(-3deg); }.album-turn-next:not(:disabled):hover { transform: translateX(2px) rotate(3deg); }.album-page-count { right: 50%; bottom: 22px; transform: translateX(50%); } }
.album-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: start; gap: 112px; max-width: 1360px; margin: 0 auto; }.album-layout .photo-book { width: 100%; margin: 0; }.album-calendar { position: sticky; top: 118px; padding: 28px 19px 21px; border: 1px solid #d8bd91; color: #755440; background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(126,164,115,.13) 27px 28px), #fff9df; box-shadow: 7px 9px 0 rgba(106,64,39,.14); transform: rotate(1.5deg); }.calendar-clip { position: absolute; top: -13px; left: 43%; width: 29px; height: 45px; border: 3px solid #9b6748; border-radius: 12px; transform: rotate(-8deg); opacity: .65; }.album-calendar > p { margin: 0; color: var(--pink); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-align: center; }.album-calendar h3 { margin: 5px 0 17px; font-family: var(--font-hand); font-size: 24px; font-weight: 400; text-align: center; }.calendar-week, .album-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }.calendar-week { margin-bottom: 7px; color: #a68770; font-size: 9px; }.album-calendar-grid { min-height: 154px; }.album-calendar-day { aspect-ratio: 1; display: grid; place-items: center; min-width: 0; border: 0; border-radius: 50%; color: #82634f; background: transparent; font-size: 10px; }.album-calendar-day.has-entry { position: relative; color: #fff; background: #d7878c; cursor: pointer; box-shadow: 0 2px 0 rgba(133,73,61,.2); }.album-calendar-day.has-entry::after { content: ""; position: absolute; right: -1px; top: -1px; width: 4px; height: 4px; border-radius: 50%; background: #f4ce69; }.album-calendar-day.has-entry:hover { background: #9c694d; transform: translateY(-1px); }.album-calendar small { display: block; margin-top: 14px; padding-top: 11px; border-top: 1px dashed #d7ba91; color: #967965; font-size: 9px; text-align: center; }.view-tools #clearDateFilter { min-height: 43px; white-space: nowrap; }.view-tools #clearDateFilter[hidden] { display: none; }
@media (max-width: 1180px) { .album-layout { grid-template-columns: 1fr; }.album-calendar { position: relative; top: auto; width: min(300px, 100%); justify-self: end; } }.album-view { background-color: #f8e8a9; background-image: radial-gradient(circle, rgba(138,90,59,.14) 0 2px, transparent 2.7px); background-size: 20px 20px; }
@media (max-width: 720px) { .album-calendar { width: 100%; justify-self: stretch; transform: rotate(.5deg); }.album-calendar-grid { min-height: auto; }.view-tools #clearDateFilter { flex: 0 0 auto; padding: 0 11px; } }
.album-layout .album-calendar { margin-top: 58px; }.diary-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 215px; align-items: start; gap: 30px; max-width: 1120px; }.diary-content-layout .diary-list, .diary-content-layout .empty-state { max-width: none; }.diary-calendar { position: sticky; top: 112px; margin-top: 5px; padding: 29px 19px 21px; border: 1px solid #d8bd91; color: #755440; background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(126,164,115,.13) 27px 28px), #fff9df; box-shadow: 7px 9px 0 rgba(106,64,39,.14); transform: rotate(-1.2deg); }.diary-calendar > p { margin: 0; color: var(--pink); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-align: center; }.diary-calendar h3 { margin: 5px 0 17px; font-family: var(--font-hand); font-size: 24px; font-weight: 400; text-align: center; }.diary-calendar small { display: block; margin-top: 14px; padding-top: 11px; border-top: 1px dashed #d7ba91; color: #967965; font-size: 9px; text-align: center; }.diary-calendar .calendar-clip { position: absolute; top: -13px; left: 43%; width: 29px; height: 45px; border: 3px solid #9b6748; border-radius: 12px; transform: rotate(8deg); opacity: .65; }
@media (max-width: 900px) { .diary-content-layout { grid-template-columns: 1fr; }.diary-calendar { position: relative; top: auto; width: min(300px, 100%); justify-self: end; margin-top: 5px; } }
@media (max-width: 620px) { .diary-calendar { width: 100%; justify-self: stretch; transform: rotate(.5deg); } }
@media (max-width: 900px) { .notebook-shelf { grid-template-columns: repeat(3, minmax(0,1fr)); }.app-nav { display: flex; gap: 14px; }.app-nav a { font-size: 13px; }.profile-paper { margin: 0 20px; } }
@media (max-width: 620px) { .app-header { height: auto; min-height: 70px; grid-template-columns: 1fr auto; padding: 10px 16px; }.app-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-around; width: 100%; padding-top: 6px; }.app-nav a::after { bottom: -3px; }.header-actions .logout-btn { display: none; }.header-actions .primary-btn { min-width: 40px; font-size: 0; gap: 0; }.header-actions .primary-btn i { margin: 0; }.app-view { padding: 47px 16px 65px; }.view-heading { align-items: stretch; flex-direction: column; margin-bottom: 30px; }.view-heading h1 { font-size: 40px; }.view-heading .large { width: 100%; }.notebook-shelf { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 19px 12px; }.notebook-card { padding: 0 6px 12px 10px; }.notebook-cover, .add-notebook-card { min-height: 225px; }.notebook-cover { gap: 10px; padding: 24px 13px 21px 20px; }.notebook-cover i { width: 34px; height: 34px; padding: 8px; }.notebook-cover strong { font-size: 25px; }.notebook-cover small { min-height: 44px; font-size: 10px; }.notebook-card-actions { opacity: 1; transform: none; right: 5px; }.shelf-view::after { margin-top: 25px; }.view-tools { width: 100%; }.view-tools select, .view-tools .primary-btn, .compact-heading > select { flex: 1; }.diary-search { max-width: none; }.profile-paper { padding: 40px 23px 35px; }.profile-paper .profile-sticker { right: -20px; bottom: -28px; width: 76px; }.profile-paper h1 { font-size: 36px; }.profile-paper blockquote { font-size: 21px; }.notebook-dialog form, .profile-dialog form { padding: 24px 20px; }.notebook-dialog .dialog-head, .profile-dialog .dialog-head { margin-bottom: 0; } }

/* Paper motion: page changes feel tactile while the reading surface stays calm. */
.app-view.view-entering { animation: view-page-in .42s cubic-bezier(.2, .78, .24, 1) both; }
.diary-card-enter { animation: diary-page-in .38s cubic-bezier(.2, .74, .24, 1) backwards; animation-delay: calc(var(--entry-order, 0) * 45ms); }
.photo-book { perspective: 1400px; transform-style: preserve-3d; }
.photo-book.is-turning .album-turn { pointer-events: none; }
.photo-book.is-turning .album-page { backface-visibility: hidden; will-change: transform, opacity; }
.photo-book.page-turn-next .album-page-right { transform-origin: left center; animation: album-page-next .46s cubic-bezier(.22, .7, .2, 1) both; }
.photo-book.page-turn-prev .album-page-left { transform-origin: right center; animation: album-page-prev .46s cubic-bezier(.22, .7, .2, 1) both; }
.album-page::after { content: ""; position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: 0; }
.photo-book.page-turn-next .album-page-right::after { background: linear-gradient(90deg, rgba(105, 65, 46, .2), rgba(255, 252, 231, .35) 22%, transparent 58%); animation: album-page-sheen .46s ease-out both; }
.photo-book.page-turn-prev .album-page-left::after { background: linear-gradient(270deg, rgba(105, 65, 46, .2), rgba(255, 252, 231, .35) 22%, transparent 58%); animation: album-page-sheen .46s ease-out both; }
.photo-book.is-turning .album-chick-print { animation: album-sticker-wobble .46s ease-out both; }
.album-calendar, .diary-calendar { animation: calendar-paper-float 6.8s ease-in-out infinite; }
.album-calendar { animation-delay: -2.4s; }
.album-calendar-day.has-entry { transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.album-calendar-day.has-entry:active { transform: translateY(1px) scale(.92); }
.album-calendar-day.is-selected { outline: 3px solid rgba(244, 206, 105, .78); outline-offset: 2px; background: #8f6249; box-shadow: 0 2px 0 rgba(133, 73, 61, .22), 0 0 0 1px #fff8df; }
dialog[open] { animation: dialog-paper-in .3s cubic-bezier(.2, .78, .22, 1) both; }
dialog[open]::backdrop { animation: dialog-backdrop-in .24s ease-out both; }
.lightbox-dialog[open] img { animation: lightbox-photo-in .38s cubic-bezier(.18, .78, .2, 1) both; }

@keyframes view-page-in { from { opacity: 0; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }
@keyframes diary-page-in { from { opacity: 0; translate: 0 13px; } to { opacity: 1; translate: 0 0; } }
@keyframes album-page-next { 0% { opacity: .58; transform: rotateY(-13deg) translateX(-8px); } 68% { opacity: 1; transform: rotateY(1.5deg) translateX(1px); } 100% { opacity: 1; transform: rotateY(0) translateX(0); } }
@keyframes album-page-prev { 0% { opacity: .58; transform: rotateY(13deg) translateX(8px); } 68% { opacity: 1; transform: rotateY(-1.5deg) translateX(-1px); } 100% { opacity: 1; transform: rotateY(0) translateX(0); } }
@keyframes album-page-sheen { 0% { opacity: .72; } 65% { opacity: .18; } 100% { opacity: 0; } }
@keyframes album-sticker-wobble { 0%, 100% { rotate: 0deg; } 42% { rotate: -4deg; } 72% { rotate: 2deg; } }
@keyframes calendar-paper-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes dialog-paper-in { from { opacity: 0; scale: .975; translate: 0 10px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes dialog-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-photo-in { from { opacity: 0; scale: .965; } to { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .notebook-card, .app-view.view-entering, .diary-card-enter, .photo-book.is-turning .album-page, .photo-book.is-turning .album-chick-print, .photo-book.is-turning .album-page::after, .album-calendar, .diary-calendar, dialog[open], dialog[open]::backdrop, .lightbox-dialog[open] img { animation: none !important; }
}
/* Compact diary cards and full-page reader. */
.diary-card { min-height: 178px; cursor: pointer; }
.entry-body h3 { margin: 12px 0 9px; }
.entry-title-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0; border: 0; color: var(--cocoa); background: transparent; cursor: pointer; text-align: left; }
.entry-title-button span { min-width: 0; overflow-wrap: anywhere; }
.entry-title-button svg { width: 21px; height: 21px; flex: 0 0 auto; color: #bd8a62; opacity: .72; transition: transform .2s ease, opacity .2s ease; }
.entry-title-button:hover svg, .entry-title-button:focus-visible svg { opacity: 1; transform: rotate(-5deg) translateY(-1px); }
.entry-title-button:focus-visible, .entry-read-button:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.entry-read-button { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 2px; border: 0; border-bottom: 1px dashed #cda77c; color: #946c50; background: transparent; cursor: pointer; font-size: 12px; }
.entry-read-button svg { width: 16px; height: 16px; }
.entry-read-button:hover { color: var(--pink); border-bottom-color: var(--pink); }
.entry-facts { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 9px 13px; }
.entry-author-compact, .entry-photo-count { display: inline-flex; align-items: center; gap: 5px; color: #9b8472; font-size: 10px; }
.entry-author-compact img { width: 22px; height: 22px; object-fit: contain; padding: 1px; border-radius: 50%; background: #f6e4b8; }
.entry-photo-count svg { width: 14px; height: 14px; color: #bd8a62; }

.reader-dialog { width: min(780px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: auto; border: 1px solid #d5b98f; border-radius: 7px; color: var(--cocoa); background-color: #fffaf0; background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(126, 164, 115, .13) 31px 32px); box-shadow: 0 30px 85px rgba(61, 40, 27, .42); }
.reader-dialog::backdrop { background: rgba(65, 46, 34, .58); backdrop-filter: blur(5px); }
.reader-paper { position: relative; min-height: 560px; padding: 42px 48px 36px 78px; overflow: hidden; }
.reader-paper::before { content: ""; position: absolute; z-index: 1; left: 13px; top: 24px; bottom: 24px; width: 24px; background: radial-gradient(circle, #fffaf0 0 5px, #b99670 5.5px 6.5px, transparent 7px) center top / 20px 32px repeat-y; }
.reader-paper::after { content: ""; position: absolute; z-index: 0; left: 51px; top: 0; bottom: 0; width: 2px; background: rgba(233, 146, 146, .42); }
.reader-head, .reader-byline, .reader-meta, .reader-content, .reader-gallery, .reader-actions { position: relative; z-index: 2; }
.reader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.reader-head h2 { max-width: 590px; margin: 2px 0 0; font-family: var(--font-hand); font-size: 42px; font-weight: 400; line-height: 1.22; overflow-wrap: anywhere; }
.reader-head .icon-btn { flex: 0 0 auto; background: #f4ead6; }
.reader-date { margin: 0; color: var(--pink); font-size: 10px; font-weight: 700; letter-spacing: 1.7px; }
.reader-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px; padding-bottom: 12px; border-bottom: 1px dashed #d8bd98; color: #967d69; font-size: 11px; }
.reader-byline img { width: 31px; height: 31px; object-fit: contain; padding: 2px; border-radius: 50%; background: #f6e4b8; }
.reader-byline strong { color: var(--caramel); }
.reader-byline em { margin-left: auto; color: #ad927d; font-style: normal; }
.reader-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.reader-meta-item { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #dfc8a5; border-radius: 3px; color: #8a6d58; background: rgba(255, 249, 223, .72); }
.reader-meta-item[hidden], .reader-gallery[hidden] { display: none; }
.reader-meta-item svg { width: 13px; height: 13px; color: var(--pink); }
.reader-meta-item b { font-size: 10px; font-weight: 500; }
.reader-content { min-height: 170px; margin: 25px 0 22px; color: #69584c; font-size: 15px; line-height: 2.05; white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 8px 0 27px; }
.reader-photo { aspect-ratio: 4 / 3; min-width: 0; padding: 6px; border: 1px solid #dbc19b; background: #fff; box-shadow: 3px 5px 0 rgba(111, 72, 48, .12); cursor: zoom-in; transform: rotate(-1deg); transition: transform .18s ease, box-shadow .18s ease; }
.reader-photo:nth-child(even) { transform: rotate(1.2deg); }
.reader-photo:hover { z-index: 1; transform: translateY(-3px) rotate(0); box-shadow: 5px 8px 0 rgba(111, 72, 48, .14); }
.reader-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.reader-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 17px; border-top: 1px dashed #d8bd98; }
.reader-mood { color: var(--pink); font-size: 13px; font-weight: 700; }
.reader-friends { position: relative; z-index: 3; height: 62px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 0; margin: 3px 6px -18px 0; pointer-events: none; }
.reader-sticker { position: relative; z-index: 3; pointer-events: none; user-select: none; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(102, 65, 40, .17)); transform-origin: 50% 100%; }
.reader-bear { width: 72px; opacity: .9; }
.reader-chick { width: 44px; margin-right: -4px; margin-bottom: 1px; }
.reader-dialog[open] .reader-bear { animation: bear-peek 3.2s ease-in-out infinite; }
.reader-dialog[open] .reader-chick { animation: chick-peek 2.7s ease-in-out -.8s infinite; }

@media (max-width: 620px) {
  .diary-card { grid-template-columns: 66px minmax(0, 1fr); min-height: 166px; }
  .entry-body { padding: 19px 15px 17px; }
  .entry-title-button svg { width: 18px; height: 18px; }
  .entry-bottom { align-items: flex-end; }
  .entry-facts { gap: 7px 10px; }
  .reader-dialog { width: calc(100% - 16px); max-height: calc(100vh - 16px); }
  .reader-paper { min-height: 520px; padding: 30px 19px 29px 47px; }
  .reader-paper::before { left: 4px; }
  .reader-paper::after { left: 33px; }
  .reader-head { gap: 10px; }
  .reader-head h2 { font-size: 33px; }
  .reader-byline em { width: 100%; margin-left: 39px; }
  .reader-content { min-height: 140px; font-size: 14px; line-height: 1.95; }
  .reader-friends { height: 52px; margin: 2px 2px -14px 0; }
  .reader-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .reader-actions { align-items: flex-start; flex-direction: column; padding-bottom: 0; }
  .reader-actions .secondary-btn { width: auto; }
  .reader-bear { width: 58px; }
  .reader-chick { width: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  .reader-dialog[open] .reader-sticker { animation: none !important; }
}
/* Keep the floating page controls clear of the calendar. */
@media (max-width: 1180px) {
  .album-layout { gap: 28px; }
  .album-layout .album-calendar { margin-top: 16px; }
}
/* The album owns its polka layer, so it needs its own seamless drift. */
.album-view { animation: album-polka-drift 12s linear infinite; }
@keyframes album-polka-drift {
  from { background-position: 0 0; }
  to { background-position: 40px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .album-view { animation: none !important; }
}