/* Lnyy UI section. */

:root {
  --app-vh: 1vh;
  --visual-vh: 1vh;
  --visual-vw: 1vw;
  --keyboard-inset: 0px;
  --viewport-offset-top: 0px;
  --input-area-height: 68px;
  --safe-top-inset: env(safe-area-inset-top, 0px);
  --safe-bottom-inset: env(safe-area-inset-bottom, 0px);
}

@font-face { font-family: 'DiaryNomNaTong'; src: url('../assets/diary-fonts/NomNaTong.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DiaryBailu'; src: url('../assets/diary-fonts/bailu.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DiaryHongleiNote'; src: url('../assets/diary-fonts/honglei-note.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DiaryHuiwenMincho'; src: url('../assets/diary-fonts/huiwen-mincho.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DiaryMomoDream'; src: url('../assets/diary-fonts/momo-dream.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DiaryPingfangShaohua'; src: url('../assets/diary-fonts/pingfang-shaohua.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DiaryXimiXihuan'; src: url('../assets/diary-fonts/ximi-xihuan.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DiarySeoulHangang'; src: url('../assets/diary-fonts/seoul-hangang-cl.ttf') format('truetype'); font-display: swap; }
.safe-top { padding-top: max(var(--safe-top-inset), 0px); }
.safe-bottom { padding-bottom: max(var(--safe-bottom-inset), 0px); }

/* Lnyy UI section. */
.phone-container {
  width: 100%;
  max-width: 430px;
  height: calc(var(--app-vh, 1vh) * 100);
  max-height: none;
  background: var(--phone-bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
}

/* Lnyy UI section. */
@media (min-width: 500px) and (max-width: 767px) {
  .phone-container {
    max-width: 480px;
    border-radius: 0;
    height: calc(var(--app-vh, 1vh) * 100);
  }
}

/* Lnyy UI section. */
@media (min-width: 768px) {
  .phone-container {
    border-radius: 40px;
    height: 90vh;
    max-height: 900px;
    box-shadow: 0 0 0 8px var(--phone-frame), 0 20px 60px rgba(0,0,0,0.5);
  }
}

/* Lnyy UI section. */
.status-bar {
  position: relative; z-index: 9800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 6px; font-size: 13px; font-weight: 600;
  color: var(--statusbar-text);
  background: var(--statusbar-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  pointer-events: none;
  isolation: isolate;
}
.status-bar .time-display { font-size: 14px; font-weight: 600; flex-shrink: 0; }
.status-bar .status-icons { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.status-bar .status-icons svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Lnyy UI section. */
.msg-banner {
  position: absolute; top: 52px; left: 14px; right: 14px; z-index: 5000;
  background: rgba(28,28,30,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: notifyIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
}
.msg-banner.stack-1 { top: 82px; opacity: 0.9; transform: scale(0.97); z-index: 4000; }
.msg-banner.stack-2 { top: 112px; opacity: 0.75; transform: scale(0.94); z-index: 3000; }
.msg-banner.stack-3 { top: 142px; opacity: 0.55; transform: scale(0.91); z-index: 2000; }
.msg-banner .mb-avatar { width: 40px; height: 40px; border-radius: 12px; background: #333; flex-shrink: 0; overflow: hidden; }
.msg-banner .mb-info { flex: 1; min-width: 0; }
.msg-banner .mb-name { font-size: 13px; font-weight: 600; color: #fff; }
.msg-banner .mb-msg { font-size: 13px; color: #ccc; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
@keyframes notifyIn { from { transform: translateY(-80px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Lnyy UI section. */
.pwa-update-banner {
  position: absolute;
  top: calc(52px + var(--safe-top-inset, 0px));
  left: 14px;
  right: 14px;
  z-index: 5200;
  box-sizing: border-box;
  max-width: calc(100% - 28px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  background: rgba(18, 18, 20, 0.9);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 48px rgba(0,0,0,0.34);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  animation: notifyIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.pwa-update-banner.compact {
  transform: translateY(-3px) scale(0.98);
  opacity: 0.92;
}

.pwa-update-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(145deg, rgba(10,132,255,0.95), rgba(88,86,214,0.95));
  box-shadow: inset 0 1px rgba(255,255,255,0.35), 0 8px 18px rgba(10,132,255,0.26);
}

.pwa-update-main {
  flex: 1;
  min-width: 0;
}

.pwa-update-title {
  font-size: 13px;
  font-weight: 750;
}

.pwa-update-desc,
.pwa-update-version {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-update-version {
  color: rgba(255,255,255,0.5);
}

.pwa-update-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

.pwa-update-actions button {
  min-width: 46px;
  border: none;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.16);
}

.pwa-update-actions button[data-pwa-action='apply'] {
  background: #0a84ff;
}

/* Lnyy UI section. */
.desktop {
  flex: 1;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--desktop-bg);
}

/* Lnyy UI section. */
.desktop::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--frost);
  backdrop-filter: var(--frost-strong-blur);
  -webkit-backdrop-filter: var(--frost-strong-blur);
  pointer-events: none;
  transition: all 0.4s ease;
}

/* Lnyy UI section. */
.desktop.has-bg::before {
  opacity: 0;
}

[data-theme="dark"] .desktop::before {
  background: rgba(28,28,30,0.55);
}

.desktop-pages {
  display: flex;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  will-change: transform;
  position: relative;
  z-index: 1;
}

.desktop-page {
  min-width: 100%;
  height: 100%;
  position: relative;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}

/* Lnyy UI section. */
.widgets-area {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.widget-card {
  background: var(--widget-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 14px 16px;
  color: var(--statusbar-text);
  min-height: 90px;
  flex: 1;
  min-width: 120px;
  max-width: 200px;
  position: relative;
  overflow: hidden;
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.widget-card .widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 6px;
}

.widget-card .widget-body {
  font-size: 14px;
  font-weight: 500;
}

.widget-clock .widget-body {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.widget-clock {
  display: flex;
  align-items: center;
}

.widget-notes textarea {
  width: 100%;
  height: 50px;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 12px;
  resize: none;
  outline: none;
  font-family: inherit;
}

.widget-card.edit-mode {
  outline: 1px solid rgba(255,255,255,0.55);
  animation: iconWiggle 0.42s ease-in-out infinite alternate;
}

.widget-delete {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.58);
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.widget-card.edit-mode .widget-delete {
  display: flex;
}

.widget-card .widget-header em,
.widget-subtitle {
  font-style: normal;
  font-size: 10px;
  opacity: 0.62;
}

.widget-date .widget-body,
.widget-music .widget-body {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-music {
  background:
    radial-gradient(circle at 20% 10%, rgba(252,60,68,0.18), transparent 42%),
    var(--widget-bg);
}

.widget-picker-overlay {
  position: absolute;
  inset: 0;
  z-index: 4500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.18);
}

.widget-picker-sheet {
  position: relative;
  width: min(100%, 340px);
  max-height: calc(100% - 12px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 14px;
  border-radius: 26px;
  background: rgba(245,245,247,0.82);
  border: 1px solid rgba(255,255,255,0.52);
  box-shadow: 0 22px 60px rgba(0,0,0,0.24);
  backdrop-filter: blur(28px) saturate(1.24);
  -webkit-backdrop-filter: blur(28px) saturate(1.24);
  color: #111;
}

.widget-picker-handle {
  width: 36px;
  height: 4px;
  border-radius: 99px;
  margin: 0 auto 10px;
  background: rgba(60,60,67,0.28);
}

.widget-picker-title {
  padding: 0 42px 12px 4px;
  font-size: 15px;
  font-weight: 700;
}

.widget-picker-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: rgba(60,60,67,0.72);
  background: rgba(255,255,255,0.62);
  font-size: 22px;
  line-height: 1;
}

.widget-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.widget-picker-grid button {
  border: none;
  border-radius: 18px;
  padding: 13px 12px;
  text-align: left;
  background: rgba(255,255,255,0.58);
  color: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.5);
}

.widget-picker-grid span {
  display: block;
  font-size: 14px;
  font-weight: 700;
}

.widget-picker-grid em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  opacity: 0.58;
}


@keyframes iconWiggle {
  from { transform: rotate(-0.7deg) translateY(0); }
  to { transform: rotate(0.7deg) translateY(-1px); }
}
/* Lnyy UI section. */
.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}

.app-icon-wrapper {
  width: 74px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease;
}

.app-icon-wrapper:active { transform: scale(0.85); }
.app-icon-wrapper.dragging {
  z-index: 100;
  opacity: 0.3;
  transition: none;
}
.app-icon-wrapper.drop-target {
  outline: 2px dashed rgba(255,255,255,0.6);
  outline-offset: 4px;
  border-radius: 16px;
  background: rgba(255,255,255,0.15);
  transform: scale(1.05);
}

/* Lnyy UI section. */
.dragging-ghost {
  pointer-events: none;
  transition: none !important;
}

.app-icon {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.08),
    inset 0 0.5px 0 rgba(255,255,255,0.5);
  overflow: hidden;
  position: relative;
  border: 0.5px solid rgba(255,255,255,0.35);
  transition: all 0.25s ease;
}

.app-icon:active {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* Lnyy UI section. */
.app-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.5) 0%,
    transparent 45%,
    transparent 55%,
    rgba(0,0,0,0.04) 100%
  );
  pointer-events: none;
}

.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-icon svg {
  width: 32px;
  height: 32px;
}

.app-label {
  font-size: 10px;
  color: var(--icon-label);
  margin-top: 4px;
  text-align: center;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0.2px;
  opacity: 0.85;
}

/* Lnyy UI section. */
.app-icon-wrapper .delete-badge {
  position: absolute;
  top: -2px;
  left: 6px;
  width: 20px;
  height: 20px;
  background: #ff3b30;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  z-index: 5;
}

.app-icon-wrapper.edit-mode .delete-badge { display: flex; }

/* Lnyy UI section. */
[data-theme="dark"] .app-icon {
  background: rgba(40,40,44,0.35);
  border: 0.5px solid rgba(255,255,255,0.1);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.2),
    inset 0 0.5px 0 rgba(255,255,255,0.08);
}
[data-theme="dark"] .app-icon::after {
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.12) 0%,
    transparent 45%,
    transparent 55%,
    rgba(0,0,0,0.15) 100%
  );
}
[data-theme="dark"] .app-icon:active {
  background: rgba(60,60,68,0.5);
}

/* Lnyy UI section. */
.dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 8px 20px calc(8px + var(--safe-bottom-inset, 8px));
  background: var(--dock-bg);
  backdrop-filter: var(--dock-blur);
  -webkit-backdrop-filter: var(--dock-blur);
  border-top: 0.5px solid var(--glass-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.dock .app-icon-wrapper {
  width: 60px;
  height: 76px;
}

.dock .app-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
}
.phone-keyboard-open .dock {
  transform: translateY(calc(100% + var(--safe-bottom-inset, 0px) + 8px));
  transition: transform 0.22s ease;
}

/* Lnyy UI section. */
.page-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
}

.page-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(128,128,128,0.4);
  transition: all 0.3s ease;
}

.page-dot.active {
  background: rgba(128,128,128,0.9);
  width: 8px;
  height: 8px;
}

/* Lnyy UI section. */
.page-swipe-hint {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(128,128,128,0.5);
  pointer-events: none;
}

/* Lnyy UI section. */
.app-view {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  will-change: transform;
}

.app-view.open {
  transform: translateY(0);
}
.keyboard-open .app-view .app-content,
.keyboard-open .wechat-content {
  scroll-padding-bottom: calc(var(--keyboard-inset, 0px) + var(--input-area-height, 68px));
}

.keyboard-open .app-view .app-content {
  padding-bottom: var(--keyboard-inset, 0px);
}

.keyboard-open .app-view:has(.chat-room) .app-content {
  padding-bottom: 0;
}

.keyboard-open .chat-room {
  min-height: 0;
  box-sizing: border-box;
  padding-bottom: 0;
}

/* The composer moves above the keyboard, so reserve the same space in the message scroller. */
.keyboard-open .wechat-app.open .messages-area {
  margin-bottom: var(--keyboard-inset, 0px);
  scroll-padding-bottom: var(--input-area-height, 56px);
  transition: margin-bottom 0.18s ease-out;
}

.keyboard-open .input-area {
  padding-bottom: calc(8px + var(--safe-bottom-inset, 0px));
}

/* Keep chat composers above the visual viewport while the OS keyboard is open. */
.keyboard-open .app-view.open .input-area,
.keyboard-open .wechat-app.open .input-area {
  position: relative;
  z-index: 3;
  transform: translate3d(0, calc(-1 * var(--keyboard-inset, 0px)), 0);
  transition: transform 0.18s ease-out;
  will-change: transform;
}

.app-view .app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--wechat-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--divider);
  flex-shrink: 0;
}

.app-view .app-header .back-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  color: var(--link);
  font-size: 15px;
}

.app-view .app-header .title {
  font-size: 17px;
  font-weight: 600;
  color: var(--app-text);
}

.app-view .app-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Lnyy UI section. */

#settingsModal .settings-app-sheet {
  width: 100%;
  height: min(56%, 520px);
  max-height: 56%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  background: rgba(242, 242, 247, 0.76);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  box-shadow: 0 -18px 45px rgba(0,0,0,.18);
}

#settingsModal .settings-app-header {
  min-height: 46px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  padding: 3px 16px 4px;
  box-sizing: border-box;
  background: rgba(248, 248, 250, 0.72);
  border-bottom: 0.5px solid rgba(60, 60, 67, 0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.52) inset;
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  flex: 0 0 auto;
}

#settingsModal .settings-app-header .title {
  justify-self: center;
  color: #111113;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0;
}

#settingsModal .settings-back-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  color: #007aff;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, transform .16s ease;
}

#settingsModal .settings-back-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(-1px);
}

#settingsModal .settings-back-btn:active {
  background: rgba(0, 122, 255, 0.12);
  transform: scale(0.96);
}

#settingsModal .settings-header-spacer {
  width: 36px;
  height: 36px;
}

[data-theme="dark"] #settingsModal .settings-app-sheet {
  background: rgba(28, 28, 30, 0.82);
  box-shadow: 0 -18px 45px rgba(0,0,0,.32);
}

[data-theme="dark"] #settingsModal .settings-app-header {
  background: rgba(28, 28, 30, 0.78);
  border-color: rgba(235,235,245,.14);
  box-shadow: none;
}

[data-theme="dark"] #settingsModal .settings-app-header .title {
  color: #f5f5f7;
}
#settingsModal .settings-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(18px + var(--safe-bottom-inset, 0px));
}
.settings-list {
  padding: 0;
}

.settings-section {
  margin: 24px 0;
}

.settings-section .section-title {
  font-size: 13px;
  color: var(--app-subtext);
  padding: 0 16px 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--setting-cell-bg);
  border-bottom: 0.5px solid var(--divider);
  cursor: pointer;
  min-height: 44px;
}

.settings-cell:first-child { border-top: 0.5px solid var(--divider); }

.settings-cell .cell-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--app-text);
}

.settings-cell .cell-right {
  font-size: 15px;
  color: var(--app-subtext);
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-cell .cell-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lnyy UI section. */
.toggle-switch {
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background: #e9e9ea;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
}

.toggle-switch.on {
  background: #34c759;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}

.toggle-switch.on::after {
  transform: translateX(20px);
}

.choice-toggle {
  width: 76px;
  height: 32px;
  padding: 2px;
  border-radius: 999px;
  background: #e9e9ea;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.24s ease, box-shadow 0.24s ease;
}

.choice-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.24s ease;
}

.choice-toggle.is-yes {
  background: #34c759;
}

.choice-toggle.is-yes::before {
  transform: translateX(36px);
}

.choice-option {
  position: relative;
  z-index: 1;
  height: 28px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-subtext);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 28px;
  cursor: pointer;
  transition: color 0.22s ease, transform 0.18s ease;
}

.choice-option.is-active {
  color: #111;
}

.choice-option:active {
  transform: scale(0.92);
}

[data-theme="dark"] .choice-toggle {
  background: #3a3a3c;
}

[data-theme="dark"] .choice-toggle.is-yes {
  background: #2fa84f;
}

/* Lnyy UI section. */
.keyboard-open .modal-overlay {
  align-items: flex-end;
  overflow-y: auto;
  padding-top: calc(18px + var(--safe-top-inset, 0px));
  padding-bottom: calc(18px + var(--safe-bottom-inset, 0px) + var(--keyboard-inset, 0px));
}

.modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 2000;
  background: var(--overlay-bg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.modal-sheet {
  width: 100%;
  max-height: 80%;
  background: var(--frost);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

.modal-sheet .sheet-handle {
  width: 36px;
  height: 5px;
  background: rgba(128,128,128,0.4);
  border-radius: 3px;
  margin: 0 auto 16px;
}

.modal-sheet .sheet-title {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
  color: var(--app-text);
}

/* Lnyy UI section. */
.context-menu {
  position: absolute;
  z-index: 3000;
  background: var(--frost);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 14px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.context-menu .menu-item {
  padding: 12px 20px;
  font-size: 15px;
  color: var(--app-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.context-menu .menu-item:active {
  background: rgba(128,128,128,0.2);
}

.context-menu .menu-item.danger {
  color: var(--danger);
}

/* Lnyy UI section. */
.app-exit-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 10px));
  pointer-events: none;
}

.app-exit-bar .home-indicator {
  width: 134px;
  height: 5px;
  border-radius: 100px;
  background: var(--home-indicator-bg);
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s ease;
}

.app-exit-bar .home-indicator:active {
  width: 160px;
  background: var(--app-text);
  opacity: 0.5;
}

/* Lnyy UI section. */
.app-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(128,128,128,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  color: var(--app-text);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.app-close-btn:active {
  background: rgba(128,128,128,0.45);
  transform: scale(0.9);
}

.app-close-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* Lnyy UI section. */
.status-bar {
  position: relative;
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--statusbar-text);
  background: var(--statusbar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  border-bottom: 0.5px solid var(--glass-border);
}

/* Lnyy UI section. */
.desktop-page .icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 14px 8px;
  width: 100%;
  padding: 8px 10px 18px;
}

.desktop-page .app-icon-wrapper {
  --icon-tint: 208, 216, 230;
  width: 100%;
  min-width: 0;
  height: 86px;
  gap: 6px;
}

.desktop-page .app-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 72% 78%, rgba(var(--icon-tint), 0.3), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(238, 242, 248, 0.11));
  border: 0.75px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    0 13px 26px rgba(10, 17, 29, 0.2),
    0 2px 5px rgba(10, 17, 29, 0.1),
    inset 0 1px rgba(255, 255, 255, 0.68),
    inset 0 -1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  overflow: hidden;
  transform: translateZ(0);
}

.desktop-page .app-icon::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 33%),
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.28), transparent 38%);
  pointer-events: none;
}

.desktop-page .app-icon::after {
  inset: auto 8px 5px;
  height: 1px;
  opacity: 0.5;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  filter: blur(0.5px);
}

.desktop-page .app-icon svg {
  width: 28px;
  height: 28px;
  opacity: 0.94;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.16));
}

/* Lnyy UI section. */
.desktop-page .app-icon-wrapper[data-app='music'] {
  --icon-tint: 224, 78, 83;
}

.desktop-page .app-icon-wrapper[data-app='gallery'],
.desktop-page .app-icon-wrapper[data-app='notes'] {
  --icon-tint: 224, 181, 92;
}

.desktop-page .app-icon-wrapper[data-app='forum'],
.desktop-page .app-icon-wrapper[data-app='files'],
.desktop-page .app-icon-wrapper[data-app='weather'] {
  --icon-tint: 79, 139, 196;
}

.desktop-page .app-icon-wrapper[data-app='tiktok'],
.desktop-page .app-icon-wrapper[data-app='clock'],
.desktop-page .app-icon-wrapper[data-app='calc'] {
  --icon-tint: 75, 80, 93;
}

.desktop-page .app-icon-wrapper[data-app='games'],
.desktop-page .app-icon-wrapper[data-app='contacts'] {
  --icon-tint: 128, 94, 170;
}

.desktop-page .app-label {
  max-width: 76px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.58);
}

.desktop-page .app-icon-wrapper:active .app-icon {
  transform: scale(0.94) translateZ(0);
  box-shadow: 0 6px 16px rgba(16, 23, 36, 0.16), inset 0 1px rgba(255, 255, 255, 0.5);
}

.desktop-page .app-icon-wrapper:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .desktop-page .app-icon-wrapper:hover .app-icon {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.58);
    box-shadow: 0 17px 32px rgba(10, 17, 29, 0.22), inset 0 1px rgba(255, 255, 255, 0.72);
  }
}

.dock {
  padding: 9px 18px calc(9px + var(--safe-bottom-inset, 0px));
  border: 0.75px solid rgba(255, 255, 255, 0.34);
  border-radius: 26px;
  background: rgba(228, 234, 243, 0.24);
  box-shadow: 0 20px 44px rgba(10, 17, 29, 0.2), inset 0 1px rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(26px) saturate(1.12);
  -webkit-backdrop-filter: blur(26px) saturate(1.12);
}

.dock .app-icon-wrapper { gap: 5px; }
.dock .app-icon {
  width: 51px;
  height: 51px;
  border-radius: 14px;
  border: 0.75px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(225, 231, 240, 0.13));
  box-shadow: 0 10px 22px rgba(12, 18, 28, 0.19), inset 0 1px rgba(255, 255, 255, 0.62);
}

.dock .app-icon svg { width: 27px; height: 27px; }
.dock .app-label { font-size: 9px; font-weight: 560; }

body.dark-mode .desktop-page .app-icon {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.24);
}

body.dark-mode .dock {
  background: rgba(18, 20, 25, 0.48);
  border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 370px) {
  .desktop-page .icon-grid { gap: 10px 4px; padding-left: 6px; padding-right: 6px; }
  .desktop-page .app-icon-wrapper { height: 82px; }
  .desktop-page .app-icon { width: 54px; height: 54px; border-radius: 15px; }
  .dock { padding-left: 13px; padding-right: 13px; }
}

/* Lnyy UI section. */
.memory-app-overlay {
  align-items: stretch;
  background: rgba(7, 10, 16, 0.36);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.memory-app-sheet {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #12141a;
  background:
    radial-gradient(circle at 16% 0%, rgba(105, 190, 135, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(247, 250, 247, 0.98), rgba(229, 236, 231, 0.96));
}

.memory-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  background: rgba(255, 255, 255, 0.52);
  border-bottom: 1px solid rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  flex-shrink: 0;
}
#memoryApp .memory-app-header {
  padding-top: calc(26px + env(safe-area-inset-top, 0px));
}


.memory-app-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.memory-app-title span {
  font-size: 11px;
  color: rgba(18, 20, 26, 0.52);
}

.memory-app-title strong {
  font-size: 17px;
  color: #111318;
}

.memory-add-btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #27ae60;
  font-size: 21px;
  line-height: 28px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(39, 174, 96, 0.28);
}

.memory-more-btn {
  color: #14171d;
  background: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(18, 20, 26, 0.1), inset 0 1px rgba(255, 255, 255, 0.86);
}
.memory-more-btn::before {
  content: '';
  width: 18px;
  height: 4px;
  background:
    radial-gradient(circle at 2px 2px, currentColor 0 2px, transparent 2.2px),
    radial-gradient(circle at 9px 2px, currentColor 0 2px, transparent 2.2px),
    radial-gradient(circle at 16px 2px, currentColor 0 2px, transparent 2.2px);
}

.memory-app-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(76px + env(safe-area-inset-bottom, 0px));
}

.memory-stats-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.memory-stats-card div,
.memory-filter-card,
.memory-card,
.memory-empty {
  border: 1px solid rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 18px 42px rgba(20, 32, 24, 0.1), inset 0 1px rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}


.memory-stats-card div {
  min-height: 70px;
  border-radius: 20px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.memory-stats-card span,
.memory-card-bottom,
.memory-scope,
.memory-importance {
  font-size: 11px;
  color: rgba(18, 20, 26, 0.54);
}

.memory-stats-card strong {
  font-size: 24px;
  line-height: 1;
}

.memory-filter-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  margin-bottom: 12px;
}

.memory-filter-card select,
.memory-filter-card input,
.memory-editor-sheet select,
.memory-editor-sheet input,
.memory-editor-sheet textarea {
  width: 100%;
  border: 0;
  outline: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  color: #111318;
  padding: 11px 12px;
  font: inherit;
  font-size: 13px;
}

.memory-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.memory-card {
  border-radius: 24px;
  padding: 14px;
}

.memory-card.is-pinned {
  border-color: rgba(39, 174, 96, 0.42);
  box-shadow: 0 20px 46px rgba(39, 174, 96, 0.13), inset 0 1px rgba(255, 255, 255, 0.76);
}

.memory-card-top,
.memory-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.memory-card-top strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: #111318;
}

.memory-card p {
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.58;
  color: rgba(17, 19, 24, 0.84);
  white-space: pre-wrap;
}

.memory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.memory-tags span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(39, 174, 96, 0.11);
  color: #1f7a46;
  font-size: 11px;
}

.memory-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.memory-actions button,
.memory-editor-actions button {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  color: #14171d;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  cursor: pointer;
}

.memory-actions button.danger {
  color: #ff3b30;
}

.memory-empty,
.memory-loading {
  border-radius: 24px;
  padding: 28px 18px;
  text-align: center;
  color: rgba(18, 20, 26, 0.6);
}

.memory-empty strong {
  display: block;
  color: #12141a;
  margin-bottom: 8px;
}

.memory-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.memory-editor-overlay {
  z-index: 4200;
  background: rgba(0, 0, 0, 0.22);
}

.memory-editor-sheet {
  width: 100%;
  max-height: 88%;
  overflow-y: auto;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 26px 26px 0 0;
  background: rgba(246, 249, 246, 0.96);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.22);
  animation: slideUp 0.28s ease;
}

.memory-editor-sheet h3 {
  margin: 4px 0 16px;
  text-align: center;
  font-size: 18px;
}

.memory-editor-sheet label {
  display: block;
  margin: 12px 0 7px;
  color: rgba(18, 20, 26, 0.58);
  font-size: 12px;
}

.memory-editor-sheet textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.55;
}

.memory-editor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.memory-pin-check {
  height: 43px;
  display: flex !important;
  align-items: center;
  gap: 7px;
  margin-top: 26px !important;
  border-radius: 14px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.6);
}

.memory-pin-check input {
  width: auto;
}

.memory-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.memory-editor-actions button {
  padding: 13px;
  font-size: 14px;
  border-radius: 16px;
}

.memory-editor-actions button.primary {
  color: #fff;
  background: #27ae60;
  box-shadow: 0 12px 24px rgba(39, 174, 96, 0.24);
}

[data-theme="dark"] .memory-app-sheet {
  color: #fff;
  background:
    radial-gradient(circle at 16% 0%, rgba(70, 150, 94, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(30, 34, 32, 0.98), rgba(12, 14, 13, 0.97));
}

[data-theme="dark"] .memory-app-header,
[data-theme="dark"] .memory-stats-card div,
[data-theme="dark"] .memory-filter-card,
[data-theme="dark"] .memory-card,
[data-theme="dark"] .memory-empty,
[data-theme="dark"] .memory-editor-sheet {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.13);
}

[data-theme="dark"] .memory-app-title strong,
[data-theme="dark"] .memory-card-top strong,
[data-theme="dark"] .memory-empty strong,
[data-theme="dark"] .memory-editor-sheet h3 {
  color: #fff;
}

[data-theme="dark"] .memory-app-title span,
[data-theme="dark"] .memory-stats-card span,
[data-theme="dark"] .memory-card-bottom,
[data-theme="dark"] .memory-scope,
[data-theme="dark"] .memory-importance,
[data-theme="dark"] .memory-empty,
[data-theme="dark"] .memory-editor-sheet label {
  color: rgba(255, 255, 255, 0.58);
}

[data-theme="dark"] .memory-card p {
  color: rgba(255, 255, 255, 0.82);
}

[data-theme="dark"] .memory-filter-card select,
[data-theme="dark"] .memory-filter-card input,
[data-theme="dark"] .memory-editor-sheet select,
[data-theme="dark"] .memory-editor-sheet input,
[data-theme="dark"] .memory-editor-sheet textarea,
[data-theme="dark"] .memory-actions button,
[data-theme="dark"] .memory-pin-check,
[data-theme="dark"] .memory-editor-actions button {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 370px) {
  .memory-app-content { padding-left: 10px; padding-right: 10px; }
  .memory-filter-card { grid-template-columns: 1fr; }
  .memory-card-bottom { align-items: flex-start; flex-direction: column; }
  .memory-actions { width: 100%; justify-content: flex-end; }
}
/* Lnyy UI section. */
.memory-film-wall {
  display: grid;
  gap: 12px;
}

.memory-film-contact {
  position: relative;
  width: 100%;
  min-height: 92px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 18px;
  padding: 12px 12px 12px 54px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: #12141a;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(17, 20, 28, 0.78) 0 34px, transparent 34px),
    rgba(255, 255, 255, 0.52);
  box-shadow: 0 18px 42px rgba(20, 32, 24, 0.1), inset 0 1px rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  cursor: pointer;
  overflow: hidden;
}

.memory-film-contact i {
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 16px;
  border-radius: 10px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.9) 0 7px, transparent 7px 15px);
  opacity: .9;
}

.memory-film-contact:active { transform: scale(.985); }

.memory-film-avatar {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #25342c, #6f8b75);
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(12, 20, 18, .18);
}

.memory-film-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-film-copy { min-width: 0; }
.memory-film-copy span,
.memory-film-copy small,
.memory-projector-head span,
.memory-projector-tip {
  color: rgba(18, 20, 26, 0.54);
  font-size: 11px;
}
.memory-film-copy strong {
  display: block;
  margin: 4px 0 3px;
  overflow: hidden;
  color: #111318;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-film-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-film-contact em {
  min-width: 42px;
  border-radius: 999px;
  padding: 7px 9px;
  color: #1f6b43;
  background: rgba(39, 174, 96, 0.12);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

.memory-projector-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.memory-projector-head button,
.memory-reel-btn,
.memory-day-bg-btn,
.memory-day-tone-grid button {
  border: 0;
  font: inherit;
  cursor: pointer;
}
.memory-projector-head button {
  min-height: 34px;
  border-radius: 17px;
  padding: 0 13px;
  color: #163f2b;
  background: rgba(39, 174, 96, 0.12);
}
.memory-projector-head div { min-width: 0; }
.memory-projector-head strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #111318;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-projector-stage {
  position: relative;
  min-height: min(58dvh, 470px);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
}
.memory-projector-stage::before,
.memory-projector-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  z-index: 0;
  width: min(76%, 300px);
  height: 34px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(14, 18, 22, .12);
  filter: blur(10px);
  pointer-events: none;
}
.memory-projector-stage::before { top: 18px; }
.memory-projector-stage::after { bottom: 18px; }
.memory-reel-btn {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 72px;
  border-radius: 19px;
  color: rgba(17, 19, 24, .72);
  background: rgba(255, 255, 255, .54);
  box-shadow: inset 0 1px rgba(255, 255, 255, .74), 0 10px 22px rgba(15, 20, 24, .08);
  font-size: 30px;
  line-height: 1;
}
.memory-reel-btn:disabled {
  opacity: .28;
  cursor: default;
}

.memory-day-card {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4.2;
  max-height: min(58dvh, 430px);
  border: 1px solid rgba(30, 30, 30, .14);
  border-radius: 12px;
  padding: 22px 20px 18px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-items: start;
  overflow: hidden;
  color: #171717;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(236,236,232,.88)),
    repeating-linear-gradient(0deg, rgba(15,15,15,.026) 0 1px, transparent 1px 7px),
    #f1f1ee;
  box-shadow: 0 24px 54px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.9);
  cursor: pointer;
  animation: memoryFilmSlide 760ms cubic-bezier(.2,.86,.18,1) both;
}
.memory-day-card.tone-moss,
.memory-day-card.tone-rose,
.memory-day-card.tone-amber,
.memory-day-card.tone-blue,
.memory-day-card.tone-noir {
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(232,232,228,.9)),
    radial-gradient(circle at 72% 16%, rgba(20,20,20,.07), transparent 18%),
    repeating-linear-gradient(0deg, rgba(15,15,15,.024) 0 1px, transparent 1px 7px),
    #f2f2ef;
}
.memory-day-card.is-prev { animation-name: memoryFilmSlidePrev; }
.memory-day-card-bg {
  position: absolute;
  inset: -4%;
  z-index: 0;
  width: 108%;
  height: 108%;
  display: block;
  object-fit: cover;
  opacity: .16;
  filter: grayscale(1) contrast(.86) blur(7px);
  transform: scale(1.04);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.memory-day-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 62% 34% at 18% 42%, rgba(0,0,0,.08), transparent 62%),
    radial-gradient(ellipse 46% 22% at 76% 60%, rgba(0,0,0,.07), transparent 64%),
    linear-gradient(90deg, rgba(0,0,0,.035), transparent 18%, transparent 82%, rgba(0,0,0,.026)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.028) 0 1px, transparent 1px 18px);
  opacity: .72;
  pointer-events: none;
}
.memory-day-card::after {
  content: '';
  position: absolute;
  inset: 6% -22% auto;
  z-index: 2;
  height: 48%;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(0,0,0,.16) 46%, rgba(0,0,0,.08) 52%, transparent 66%),
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.13), transparent 62%);
  filter: blur(12px);
  transform: rotate(-3deg);
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: memoryProjectorFlash 760ms cubic-bezier(.2,.86,.18,1) both;
}
.memory-day-card.is-prev::after { animation-name: memoryProjectorFlashPrev; }
.memory-day-frame {
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgba(20,20,20,.16);
  border-radius: 7px;
  pointer-events: none;
}
.memory-day-frame::before,
.memory-day-frame::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.memory-day-frame::before {
  left: 15px;
  right: 45%;
  top: 43px;
  height: 1px;
  background: rgba(20,20,20,.26);
}
.memory-day-frame::after {
  right: 19px;
  bottom: 20px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(18,18,18,.44);
  box-shadow: -12px 0 0 rgba(18,18,18,.2), -24px 0 0 rgba(18,18,18,.1);
}
.memory-day-kicker,
.memory-day-year,
.memory-day-main,
.memory-day-caption,
.memory-day-meta,
.memory-day-bg-btn {
  position: relative;
  z-index: 4;
}
.memory-day-kicker {
  align-self: start;
  color: rgba(20,20,20,.62);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.memory-day-year {
  justify-self: end;
  margin-top: 4px;
  color: rgba(20,20,20,.46);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  line-height: 1;
}
.memory-day-main {
  position: relative;
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 10px 0 8px;
  color: #101010;
  font-family: Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif;
  font-size: 48px;
  font-weight: 600;
  line-height: .92;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.memory-day-main::before {
  content: attr(data-date);
  position: absolute;
  left: -15px;
  top: -18px;
  z-index: -1;
  color: rgba(0,0,0,.12);
  filter: blur(5px);
  transform: scale(1.08);
  white-space: nowrap;
}
.memory-day-main span:first-child { transform: translateY(-8px); }
.memory-day-main span:last-child { transform: translateY(9px); }
.memory-day-main i {
  color: rgba(16,16,16,.36);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  transform: translateY(2px);
}
.memory-day-empty-title {
  max-width: 100%;
  font-size: 30px;
  line-height: 1.1;
  text-align: center;
  word-break: keep-all;
}
.memory-day-empty-title::before { content: none; }
.memory-day-caption,
.memory-day-meta {
  color: rgba(20,20,20,.58);
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}
.memory-day-caption {
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(20,20,20,.14);
}
.memory-day-meta { margin-top: 5px; }
.memory-day-bg-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  min-height: 26px;
  border: 1px solid rgba(20,20,20,.16);
  border-radius: 999px;
  padding: 0 10px;
  color: rgba(18,18,18,.68);
  background: rgba(247,247,244,.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
}
.memory-day-bg-btn {
  position: absolute;
  top: 17px;
  right: 17px;
  min-height: 30px;
  border-radius: 15px;
  padding: 0 11px;
  color: #fff;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
}
.memory-projector-tip {
  margin-top: 14px;
  text-align: center;
}
.memory-day-detail-list { padding-bottom: 8px; }

.memory-day-bg-sheet { max-height: 82%; }
.memory-day-bg-preview {
  width: min(100%, 170px);
  aspect-ratio: 5 / 7;
  height: auto;
  border-radius: 22px;
  margin: 0 auto 13px;
  overflow: hidden;
  background-size: 100% 100%;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 14px 28px rgba(20,24,26,.12);
}
.memory-day-bg-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}
.memory-day-bg-preview.tone-moss,
.memory-day-tone-grid .tone-moss { background: linear-gradient(145deg, #6f8d74, #23372e); }
.memory-day-bg-preview.tone-rose,
.memory-day-tone-grid .tone-rose { background: linear-gradient(145deg, #c98f9a, #6f4752); }
.memory-day-bg-preview.tone-amber,
.memory-day-tone-grid .tone-amber { background: linear-gradient(145deg, #c3a15c, #6a5431); }
.memory-day-bg-preview.tone-blue,
.memory-day-tone-grid .tone-blue { background: linear-gradient(145deg, #6e98ad, #344e62); }
.memory-day-bg-preview.tone-noir,
.memory-day-tone-grid .tone-noir { background: linear-gradient(145deg, #8d8d88, #111); }
.memory-day-tone-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.memory-day-tone-grid button {
  min-width: 0;
  border-radius: 14px;
  padding: 7px 5px;
  color: rgba(18,20,26,.66);
  background: rgba(255,255,255,.56);
}
.memory-day-tone-grid button.is-active {
  color: #163f2b;
  background: rgba(39,174,96,.14);
}
.memory-day-tone-grid i {
  width: 100%;
  height: 28px;
  display: block;
  border-radius: 10px;
  margin-bottom: 5px;
}
.memory-day-tone-grid span {
  display: block;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-day-bg-actions { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.memory-day-crop-overlay {
  z-index: 5450;
  padding: calc(16px + var(--safe-top-inset, 0px)) 12px calc(16px + var(--safe-bottom-inset, 0px));
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.memory-day-crop-card {
  width: min(100%, 380px);
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #171719;
  background: rgba(250, 250, 252, .98);
  border-radius: 24px;
  box-shadow: 0 26px 72px rgba(0,0,0,.32);
}
.memory-day-crop-head {
  min-height: 50px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 82px;
  align-items: center;
  gap: 8px;
  border-bottom: .5px solid rgba(120,120,128,.18);
}
.memory-day-crop-head strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-day-crop-head button {
  min-height: 34px;
  border: 0;
  border-radius: 11px;
  padding: 0 7px;
  color: #66666c;
  background: transparent;
  font: inherit;
  font-size: 13px;
}
.memory-day-crop-head button[data-action="confirm"] {
  color: #fff;
  background: #1f1f22;
  font-weight: 650;
}
.memory-day-crop-body {
  padding: 16px 16px 18px;
  display: grid;
  justify-items: center;
  gap: 12px;
  overflow-y: auto;
}
.memory-day-crop-stage {
  position: relative;
  width: min(68vw, 242px);
  aspect-ratio: 5 / 7;
}
.memory-day-crop-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.1) 42%, rgba(0,0,0,.34) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 15px);
  pointer-events: none;
}
.memory-day-crop-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 22px;
  background: #111318;
  box-shadow: 0 0 0 1px rgba(120,120,128,.18), 0 16px 34px rgba(0,0,0,.16);
  touch-action: none;
  cursor: grab;
}
.memory-day-crop-canvas:active { cursor: grabbing; }
.memory-day-crop-sprocket {
  position: absolute;
  inset: 10px auto 10px 9px;
  z-index: 2;
  width: 13px;
  border-radius: 9px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.78) 0 7px, transparent 7px 15px);
  opacity: .78;
  pointer-events: none;
}
.memory-day-crop-zoom {
  width: min(100%, 282px);
  display: grid;
  gap: 8px;
  color: rgba(18,20,26,.58);
  font-size: 12px;
}
.memory-day-crop-zoom input {
  width: 100%;
  accent-color: #1f1f22;
}
.memory-day-crop-body p {
  max-width: 280px;
  margin: 0;
  color: rgba(18,20,26,.52);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
[data-theme="dark"] .memory-day-crop-card {
  color: #f3f3f5;
  background: rgba(35,35,38,.98);
}
[data-theme="dark"] .memory-day-crop-head { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .memory-day-crop-head button { color: #b6b6bc; }
[data-theme="dark"] .memory-day-crop-head button[data-action="confirm"] { color: #171719; background: #f1f1f3; }
[data-theme="dark"] .memory-day-crop-zoom,
[data-theme="dark"] .memory-day-crop-body p { color: rgba(255,255,255,.58); }
@keyframes memoryFilmSlide {
  0% { opacity: .24; transform: translateX(48px) scale(.976) rotate(.18deg); filter: brightness(1.16) saturate(.9) blur(.25px); }
  22% { opacity: .78; transform: translateX(18px) scale(.992) rotate(-.08deg); filter: brightness(1.32) saturate(.94); }
  48% { opacity: 1; transform: translateX(-4px) scale(1.004) rotate(.06deg); filter: brightness(1.06) saturate(1.02); }
  72% { opacity: 1; transform: translateX(1px) scale(1) rotate(-.03deg); filter: brightness(1.02) saturate(1); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); filter: brightness(1) saturate(1); }
}
@keyframes memoryFilmSlidePrev {
  0% { opacity: .24; transform: translateX(-48px) scale(.976) rotate(-.18deg); filter: brightness(1.16) saturate(.9) blur(.25px); }
  22% { opacity: .78; transform: translateX(-18px) scale(.992) rotate(.08deg); filter: brightness(1.32) saturate(.94); }
  48% { opacity: 1; transform: translateX(4px) scale(1.004) rotate(-.06deg); filter: brightness(1.06) saturate(1.02); }
  72% { opacity: 1; transform: translateX(-1px) scale(1) rotate(.03deg); filter: brightness(1.02) saturate(1); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); filter: brightness(1) saturate(1); }
}
@keyframes memoryProjectorFlash {
  0% { opacity: 0; transform: translateX(-24%); }
  16% { opacity: .28; }
  30% { opacity: .06; }
  44% { opacity: .38; }
  64% { opacity: .08; }
  100% { opacity: 0; transform: translateX(24%); }
}
@keyframes memoryProjectorFlashPrev {
  0% { opacity: 0; transform: translateX(24%); }
  16% { opacity: .28; }
  30% { opacity: .06; }
  44% { opacity: .38; }
  64% { opacity: .08; }
  100% { opacity: 0; transform: translateX(-24%); }
}

[data-theme="dark"] .memory-film-contact,
[data-theme="dark"] .memory-reel-btn,
[data-theme="dark"] .memory-day-tone-grid button {
  color: #fff;
  background-color: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] .memory-film-copy strong,
[data-theme="dark"] .memory-projector-head strong { color: #fff; }
[data-theme="dark"] .memory-film-copy span,
[data-theme="dark"] .memory-film-copy small,
[data-theme="dark"] .memory-projector-head span,
[data-theme="dark"] .memory-projector-tip { color: rgba(255,255,255,.58); }
[data-theme="dark"] .memory-film-contact em,
[data-theme="dark"] .memory-projector-head button,
[data-theme="dark"] .memory-day-tone-grid button.is-active {
  color: #9af0b6;
  background: rgba(52,199,89,.16);
}

@media (max-width: 370px) {
  .memory-film-contact { grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 84px; padding-left: 48px; gap: 9px; }
  .memory-film-avatar { width: 48px; height: 48px; border-radius: 13px; }
  .memory-projector-stage { min-height: min(55dvh, 405px); grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 6px; }
  .memory-reel-btn { width: 32px; height: 60px; font-size: 25px; }
  .memory-day-card { border-radius: 10px; padding: 20px 17px 17px; }
  .memory-day-main { font-size: 42px; }
  .memory-day-empty-title { font-size: 26px; }
  .memory-day-tone-grid { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .memory-day-card,
  .memory-day-card::after,
  .memory-film-contact:active {
    animation: none !important;
    transform: none !important;
    transition-duration: 120ms !important;
  }
  .memory-day-card::after { opacity: 0 !important; }
}
[data-reduce-motion="true"] .memory-day-card,
[data-reduce-motion="true"] .memory-day-card::after,
[data-reduce-motion="true"] .memory-film-contact:active {
  animation: none !important;
  transform: none !important;
}
[data-reduce-motion="true"] .memory-day-card::after { opacity: 0 !important; }
/* Lnyy UI section. */
.memory-auto-card {
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 24px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 18px 42px rgba(20, 32, 24, 0.1), inset 0 1px rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.memory-auto-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.memory-auto-head span,
.memory-auto-grid span,
.memory-auto-subtitle,
.memory-auto-row span,
.memory-auto-row em {
  color: rgba(18, 20, 26, 0.54);
  font-size: 11px;
  font-style: normal;
}

.memory-auto-head strong {
  display: block;
  margin-top: 3px;
  color: #111318;
  font-size: 16px;
}

.memory-auto-head button {
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  color: #fff;
  background: #27ae60;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(39, 174, 96, 0.22);
}

.memory-auto-card.is-off .memory-auto-head button {
  background: #8e8e93;
  box-shadow: none;
}

.memory-auto-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.memory-auto-grid div {
  min-height: 58px;
  border-radius: 18px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.46);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.memory-auto-grid strong {
  font-size: 18px;
  color: #111318;
  line-height: 1.1;
}

.memory-auto-subtitle {
  margin: 10px 2px 7px;
  letter-spacing: 0.04em;
}

.memory-auto-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.memory-auto-row,
.memory-auto-empty {
  border-radius: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.46);
}

.memory-auto-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.memory-auto-row strong {
  display: block;
  color: #111318;
  font-size: 13px;
  margin-bottom: 3px;
}

.memory-auto-row span {
  display: block;
  line-height: 1.35;
}

.memory-auto-row em {
  flex-shrink: 0;
  min-width: 42px;
  text-align: right;
}

.memory-auto-empty {
  color: rgba(18, 20, 26, 0.52);
  font-size: 12px;
  line-height: 1.45;
}

[data-theme="dark"] .memory-auto-card,
[data-theme="dark"] .memory-auto-grid div,
[data-theme="dark"] .memory-auto-row,
[data-theme="dark"] .memory-auto-empty {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.13);
}

[data-theme="dark"] .memory-auto-head strong,
[data-theme="dark"] .memory-auto-grid strong,
[data-theme="dark"] .memory-auto-row strong {
  color: #fff;
}

[data-theme="dark"] .memory-auto-head span,
[data-theme="dark"] .memory-auto-grid span,
[data-theme="dark"] .memory-auto-subtitle,
[data-theme="dark"] .memory-auto-row span,
[data-theme="dark"] .memory-auto-row em,
[data-theme="dark"] .memory-auto-empty {
  color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 370px) {
  .memory-auto-grid { grid-template-columns: 1fr; }
  .memory-auto-row { align-items: flex-start; flex-direction: column; }
  .memory-auto-row em { text-align: left; }
}






/* Lnyy UI section. */

/* Lnyy UI section. */
.desktop::before,
.desktop.has-bg::before,
[data-theme="dark"] .desktop::before {
  content: none;
  display: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.desktop {
  isolation: isolate;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Lnyy UI section. */
.status-bar {
  min-height: calc(28px + var(--safe-top-inset, 0px));
  padding: calc(7px + var(--safe-top-inset, 0px)) 20px 5px;
  background: var(--glass-medium-bg);
  border-bottom-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 1px 0 rgba(17, 17, 19, 0.05);
  backdrop-filter: var(--glass-medium-blur);
  -webkit-backdrop-filter: var(--glass-medium-blur);
}

/* Lnyy UI section. */
.desktop-page .app-icon {
  background:
    radial-gradient(circle at 72% 78%, rgba(var(--icon-tint), 0.18), transparent 58%),
    var(--glass-soft-bg);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.48);
  backdrop-filter: var(--glass-soft-blur);
  -webkit-backdrop-filter: var(--glass-soft-blur);
}

.desktop-page .app-icon::before {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.38), transparent 38%),
    radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.22), transparent 34%);
}

/* Lnyy UI section. */
.dock {
  background: var(--glass-medium-bg);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.48);
  backdrop-filter: var(--glass-medium-blur);
  -webkit-backdrop-filter: var(--glass-medium-blur);
}

.dock .app-icon {
  background: var(--glass-soft-bg);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: var(--glass-soft-blur);
  -webkit-backdrop-filter: var(--glass-soft-blur);
}

[data-theme="dark"] .status-bar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .desktop-page .app-icon,
[data-theme="dark"] .dock,
[data-theme="dark"] .dock .app-icon {
  border-color: rgba(255, 255, 255, 0.16);
}

/* Lnyy UI section. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .status-bar,
  .dock {
    background: rgba(244, 244, 246, 0.92);
  }

  .desktop-page .app-icon,
  .dock .app-icon {
    background: rgba(255, 255, 255, 0.78);
  }

  [data-theme="dark"] .status-bar,
  [data-theme="dark"] .dock,
  [data-theme="dark"] .desktop-page .app-icon,
  [data-theme="dark"] .dock .app-icon {
    background: rgba(28, 28, 30, 0.92);
  }
}

[data-performance-mode="true"] .status-bar,
[data-performance-mode="true"] .dock,
[data-performance-mode="true"] .desktop-page .app-icon,
[data-performance-mode="true"] .dock .app-icon {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Lnyy UI section. */
.phone-container {
  background-color: var(--lnyy-bg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.phone-container.has-desktop-wallpaper {
  background-position: center center;
  background-size: cover;
}

.phone-container.has-desktop-wallpaper .desktop,
.phone-container.has-desktop-wallpaper .dock {
  background-color: transparent;
}

.status-bar {
  height: calc(28px + var(--safe-top-inset, 0px));
  min-height: calc(28px + var(--safe-top-inset, 0px));
  padding: var(--safe-top-inset, 0px) 18px 0;
  color: var(--statusbar-text);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.status-bar .time-display {
  min-width: 42px;
  font-size: 14px;
  font-weight: 650;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.status-bar .status-icons {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: inherit;
}

.status-bar .status-icons svg {
  display: block;
  width: auto;
  height: 15px;
  overflow: visible;
  flex: 0 0 auto;
}

.status-bar .status-icons .status-silent-icon {
  width: 16px;
  height: 16px;
  margin-right: 1px;
}

.status-bar .status-icons .status-signal-icon {
  width: 17px;
  height: 15px;
}

.status-bar .status-icons .status-wifi-icon {
  width: 18px;
  height: 16px;
  stroke-width: 1.55;
}

.status-bar .status-icons .status-5g-icon {
  width: 17px;
  height: 15px;
  stroke-width: 0;
}

.status-bar .status-icons .status-battery-icon {
  width: 27px;
  height: 15px;
  stroke-width: 1.25;
}

.status-bar .status-icons svg[hidden] {
  display: none;
}

/* Lnyy UI section. */
@supports (mix-blend-mode: difference) {
  .status-bar .time-display,
  .status-bar .status-icons {
    color: #fff;
    mix-blend-mode: difference;
  }
}

@media (max-width: 370px) {
  .status-bar {
    padding-left: 16px;
    padding-right: 16px;
  }

  .status-bar .status-icons {
    gap: 4px;
  }
}

/* Lnyy UI section. */
.desktop-page {
  padding: 14px 16px 12px;
}

.desktop-page .icon-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  column-gap: 9px;
  row-gap: 13px;
  padding: 7px 4px 32px;
}

.desktop-page .app-icon-wrapper {
  --icon-symbol: #202126;
  width: 100%;
  height: 84px;
  gap: 6px;
  justify-content: flex-start;
}

.desktop-page .app-icon,
.dock .app-icon {
  color: var(--icon-symbol);
  border-radius: 17px;
}

.desktop-page .app-icon {
  width: 58px;
  height: 58px;
}

.desktop-page .app-icon::before,
.dock .app-icon::before {
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), transparent 40%),
    radial-gradient(circle at 18% 6%, rgba(255, 255, 255, 0.3), transparent 34%);
}

.desktop-page .app-icon::after,
.dock .app-icon::after {
  inset: 1px 2px auto;
  height: 45%;
  border-radius: inherit;
  opacity: 0.34;
  background: linear-gradient(180deg, rgba(255,255,255,0.62), transparent);
  filter: none;
}

.desktop-page .app-icon svg,
.dock .app-icon svg {
  position: relative;
  z-index: 2;
  width: 27px;
  height: 27px;
  color: inherit;
  fill: currentColor !important;
  filter: drop-shadow(0 2px 4px rgba(10, 12, 18, 0.14));
}

/* Lnyy UI section. */
.app-icon-wrapper[data-app='phone'],
.app-icon-wrapper[data-app='sms'] { --icon-symbol: #3f8d68; }
.app-icon-wrapper[data-app='wechat'] { --icon-symbol: #202126; }
.app-icon-wrapper[data-app='contacts'] { --icon-symbol: #5c6f91; }
.app-icon-wrapper[data-app='music'],
.app-icon-wrapper[data-app='listen'] { --icon-symbol: #c44f61; }
.app-icon-wrapper[data-app='moments'] { --icon-symbol: #bb7188; }
.app-icon-wrapper[data-app='reminders'] { --icon-symbol: #c0788d; }
.app-icon-wrapper[data-app='files'] { --icon-symbol: #4d78a8; }
.app-icon-wrapper[data-app='reader'] { --icon-symbol: #765b77; }
.app-icon-wrapper[data-app='roles'] { --icon-symbol: #74649a; }
.app-icon-wrapper[data-app='api'] { --icon-symbol: #4b8790; }
.app-icon-wrapper[data-app='memory'] { --icon-symbol: #56806b; }
.app-icon-wrapper[data-app='settings'] { --icon-symbol: #5e626b; }

.desktop-page .app-label {
  max-width: 76px;
  margin-top: 0;
  color: rgba(255, 255, 255, 0.98);
  font-size: 10.5px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: 0;
  opacity: 1;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.72);
}

@supports (mix-blend-mode: difference) {
  .desktop-page .app-label {
    color: #fff;
    mix-blend-mode: difference;
    text-shadow: none;
  }
}

.dock {
  width: min(78%, 318px);
  min-width: 236px;
  min-height: calc(76px + var(--safe-bottom-inset, 0px));
  align-self: center;
  justify-content: center;
  gap: clamp(18px, 6vw, 28px);
  margin: 0 auto 10px;
  padding: 10px 16px calc(10px + var(--safe-bottom-inset, 0px));
  border: 0;
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 36px rgba(10, 12, 18, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  overflow: visible;
}

.phone-container.has-desktop-wallpaper .dock {
  background: rgba(255, 255, 255, 0.16);
}

.dock .app-icon-wrapper {
  width: 58px;
  height: 56px;
  gap: 0;
  justify-content: center;
}

.dock .app-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}

.dock .app-label {
  display: none;
}

.dock .app-badge {
  top: -2px;
  right: -1px;
}

.page-indicator {
  bottom: 8px;
  gap: 7px;
  padding: 0;
}

.page-dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.34);
}

.page-dot.active {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.96);
}

[data-theme="dark"] .desktop-page .app-icon-wrapper,
[data-theme="dark"] .dock .app-icon-wrapper {
  --icon-symbol: #f5f5f7;
}

[data-theme="dark"] .phone-container.has-desktop-wallpaper .dock {
  background: rgba(24, 24, 27, 0.26);
}

@media (max-width: 370px) {
  .desktop-page {
    padding-left: 10px;
    padding-right: 10px;
  }

  .desktop-page .icon-grid {
    column-gap: 4px;
    row-gap: 10px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .desktop-page .app-icon-wrapper {
    height: 79px;
  }

  .desktop-page .app-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .dock {
    width: min(78%, 286px);
    min-width: 228px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-height: 650px) {
  .desktop-page {
    padding-top: 8px;
  }

  .desktop-page .icon-grid {
    row-gap: 6px;
  }

  .desktop-page .app-icon-wrapper {
    height: 74px;
  }

  .desktop-page .app-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }

  .dock {
    min-height: calc(70px + var(--safe-bottom-inset, 0px));
    margin-bottom: 7px;
    padding-top: 8px;
    padding-bottom: calc(8px + var(--safe-bottom-inset, 0px));
  }

  .dock .app-icon,
  .dock .app-icon-wrapper {
    width: 50px;
    height: 50px;
  }
}

/* Lnyy UI section. */
.desktop-page .app-icon::before,
.dock .app-icon::before {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* Lnyy UI section. */
.msg-banner {
  top: calc(34px + var(--safe-top-inset, 0px));
  left: 12px;
  right: 12px;
  z-index: 9100;
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  padding: 11px 13px;
  color: var(--lnyy-text);
  background: var(--glass-strong-bg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 21px;
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255,255,255,0.48);
  backdrop-filter: var(--glass-strong-blur);
  -webkit-backdrop-filter: var(--glass-strong-blur);
  cursor: pointer;
  touch-action: manipulation;
  transform-origin: top center;
  transition:
    top 260ms cubic-bezier(.2,.8,.2,1),
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity 220ms ease;
  animation: none;
}

.msg-banner.stack-0 { top: calc(34px + var(--safe-top-inset, 0px)); transform: scale(1); opacity: 1; z-index: 9104; }
.msg-banner.stack-1 { top: calc(45px + var(--safe-top-inset, 0px)); transform: scale(.985); opacity: .96; z-index: 9103; }
.msg-banner.stack-2 { top: calc(56px + var(--safe-top-inset, 0px)); transform: scale(.968); opacity: .88; z-index: 9102; }
.msg-banner.stack-3 { top: calc(67px + var(--safe-top-inset, 0px)); transform: scale(.95); opacity: .76; z-index: 9101; }
.msg-banner.is-overflow { opacity: 0; pointer-events: none; visibility: hidden; }

.msg-banner.is-entering {
  animation: lnyyNotificationIn 340ms cubic-bezier(.2,.9,.25,1.08) both;
}

.msg-banner.is-leaving {
  opacity: 0 !important;
  transform: translateY(-18px) scale(.96) !important;
  pointer-events: none;
}

@keyframes lnyyNotificationIn {
  from { opacity: 0; transform: translateY(-22px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.msg-banner .mb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--lnyy-text);
  background: var(--glass-medium-bg);
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
}

.msg-banner .mb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg-banner .mb-avatar svg {
  width: 23px;
  height: 23px;
}

.msg-banner .mb-info {
  min-width: 0;
  align-self: center;
}

.msg-banner .mb-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--lnyy-text);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.2;
}

.msg-banner .mb-time {
  margin-left: auto;
  color: var(--lnyy-text-secondary);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.msg-banner .mb-msg {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: var(--lnyy-text-secondary);
  font-size: 12.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.msg-banner .mb-detail {
  margin-top: 3px;
  overflow: hidden;
  color: var(--lnyy-text-secondary);
  font-size: 10.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-banner .mb-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 8px;
}

.msg-banner .mb-action {
  min-width: 54px;
  min-height: 30px;
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  color: var(--lnyy-text);
  background: rgba(120,120,128,.14);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}

.msg-banner .mb-action.is-success {
  color: #26733a;
  background: rgba(52,199,89,.15);
}

.msg-banner--reminder .mb-avatar {
  color: var(--lnyy-accent);
}

.msg-banner:focus-visible {
  outline: 2px solid var(--lnyy-link);
  outline-offset: 2px;
}

/* Lnyy UI section. */
.app-icon {
  overflow: visible;
}

.app-unread-badge,
.wechat-unread-total {
  top: -5px !important;
  right: -6px !important;
  z-index: 8 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border: 1.5px solid rgba(255,255,255,.94) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: #ff3b30 !important;
  box-shadow: 0 3px 9px rgba(140,18,28,.28) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  line-height: 15px !important;
}

.wechat-moment-dot {
  width: 8px !important;
  height: 8px !important;
  border: 1.5px solid var(--lnyy-surface) !important;
  background: #ff3b30 !important;
}

[data-theme="dark"] .msg-banner {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 48px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.12);
}

[data-theme="dark"] .msg-banner .mb-action.is-success {
  color: #6ee58b;
}

@media (max-width: 370px) {
  .msg-banner {
    left: 9px;
    right: 9px;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 9px;
    padding: 10px 11px;
    border-radius: 19px;
  }

  .msg-banner .mb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msg-banner,
  .msg-banner.is-entering,
  .msg-banner.is-leaving {
    animation: none !important;
    transition: opacity 140ms ease !important;
  }
}

/* Lnyy UI section. */
.phone-container .desktop {
  transform: none;
  filter: brightness(1);
  transition: opacity 180ms ease, filter 180ms ease;
  will-change: opacity, filter;
}

.phone-container.lnyy-app-active .desktop {
  transform: none;
  filter: brightness(.92);
  pointer-events: none;
}

.lnyy-app-transition {
  transform-origin: center center !important;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1) !important,
    opacity 180ms ease !important;
}

.lnyy-app-transition:not(.open):not(.lnyy-app-visible),
.lnyy-app-transition.lnyy-app-closing {
  transform: translate3d(0, 10px, 0) scale(1) !important;
  opacity: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}

.lnyy-app-transition.open,
.lnyy-app-transition.lnyy-app-visible {
  transform: translate3d(0, 0, 0) scale(1) !important;
  opacity: 1;
  border-radius: 0;
}

/* Lnyy UI section. */
.lnyy-app-overlay-transition,
.lnyy-app-overlay-transition > .modal-sheet,
.lnyy-app-overlay-transition > .memory-app-sheet {
  animation: none !important;
}

.phone-container.lnyy-app-launching .lnyy-app-transition {
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  .phone-container .desktop {
    transform: none !important;
    filter: none !important;
    transition: opacity 150ms ease !important;
  }

  .lnyy-app-transition {
    transition: opacity 150ms ease !important;
  }

  .lnyy-app-transition:not(.open):not(.lnyy-app-visible),
  .lnyy-app-transition.lnyy-app-closing {
    transform: none !important;
    border-radius: 0 !important;
    opacity: 0 !important;
  }
}

[data-reduce-motion="true"] .phone-container .desktop,
[data-performance-mode="true"] .phone-container .desktop {
  transform: none !important;
  filter: none !important;
}

[data-reduce-motion="true"] .lnyy-app-transition {
  transition: opacity 150ms ease !important;
}

[data-reduce-motion="true"] .lnyy-app-transition:not(.open):not(.lnyy-app-visible),
[data-reduce-motion="true"] .lnyy-app-transition.lnyy-app-closing,
[data-performance-mode="true"] .lnyy-app-transition:not(.open):not(.lnyy-app-visible),
[data-performance-mode="true"] .lnyy-app-transition.lnyy-app-closing {
  transform: none !important;
  border-radius: 0 !important;
  opacity: 0 !important;
}

[data-performance-mode="true"] .lnyy-app-transition {
  transition: none !important;
}

/* Lnyy UI section. */
.recent-apps-trigger {
  position: absolute;
  right: 10px;
  bottom: calc(94px + var(--safe-bottom-inset, 0px));
  z-index: 470;
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 999px;
  color: var(--lnyy-text);
  background: var(--glass-medium-bg);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.42);
  backdrop-filter: var(--glass-medium-blur);
  -webkit-backdrop-filter: var(--glass-medium-blur);
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease;
}

.recent-apps-trigger svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.recent-apps-trigger:active { transform: scale(.94); }
.phone-container.lnyy-app-active .recent-apps-trigger,
.phone-container.lnyy-recent-open .recent-apps-trigger { opacity: 0; pointer-events: none; }

.recent-apps-gesture-zone {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 480;
  display: none;
  width: 132px;
  height: calc(20px + var(--safe-bottom-inset, 0px));
  transform: translateX(-50%);
  align-items: flex-start;
  justify-content: center;
  touch-action: none;
}

.recent-apps-gesture-zone span {
  width: 86px;
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--home-indicator-bg);
  opacity: .55;
  transition: width 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.recent-apps-gesture-zone.is-touching span {
  width: 108px;
  transform: translateY(-3px);
  opacity: .84;
}

.phone-container.lnyy-app-active .recent-apps-gesture-zone,
.phone-container.lnyy-recent-open .recent-apps-gesture-zone { pointer-events: none; opacity: 0; }

.app-exit-bar.is-recent-gesture .home-indicator {
  width: 166px;
  transform: translateY(-5px);
  opacity: .82;
}

.recent-apps-overlay {
  position: absolute;
  inset: 0;
  z-index: 9700;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #f8f8fa;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.16), transparent 40%),
    rgba(20,20,24,.78);
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity 240ms ease, transform 300ms cubic-bezier(.2,.8,.2,1);
}

.recent-apps-overlay.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.recent-apps-overlay.is-closing {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  pointer-events: none;
}

.recent-apps-header {
  min-height: calc(17vh + var(--safe-top-inset, 0px));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: calc(16px + var(--safe-top-inset, 0px)) 18px 12px;
  flex: 0 0 auto;
}

.recent-apps-header > div { display: flex; flex-direction: column; gap: 2px; }
.recent-apps-header span { color: rgba(255,255,255,.55); font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.recent-apps-header strong { font-size: 22px; font-weight: 720; letter-spacing: -.03em; }

.recent-apps-dismiss,
.recent-app-card-close {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.11);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
}

.recent-apps-dismiss { width: 34px; height: 34px; }
.recent-apps-dismiss svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.recent-apps-track {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px max(24px, calc((100% - min(82%, 330px)) / 2)) 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(24px, calc((100% - min(82%, 330px)) / 2));
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.recent-apps-track::-webkit-scrollbar { display: none; }

.recent-app-card {
  --recent-swipe-y: 0px;
  position: relative;
  flex: 0 0 min(82%, 330px);
  width: min(82%, 330px);
  height: min(58vh, 500px);
  min-height: 310px;
  max-height: calc(100% - 8px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 29px;
  color: #202126;
  background: rgba(249,249,251,.94);
  box-shadow: 0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.72);
  transform: translateY(var(--recent-swipe-y)) scale(1);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
  outline: none;
  touch-action: pan-x;
}

.recent-app-card:focus-visible { box-shadow: 0 0 0 3px rgba(216,143,160,.7), 0 24px 60px rgba(0,0,0,.34); }
.recent-app-card.is-current { box-shadow: 0 0 0 1px rgba(216,143,160,.55), 0 28px 68px rgba(0,0,0,.4); }
.recent-app-card.is-swiping { transition: none; }
.recent-app-card.is-removing { transform: translateY(-115%) scale(.94) rotate(.8deg); opacity: 0; pointer-events: none; }

.recent-app-card-head {
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 10px;
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(60,60,67,.08);
}

.recent-app-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 11px;
  color: #25262b;
  background: rgba(255,255,255,.72);
  box-shadow: 0 5px 14px rgba(20,20,25,.1), inset 0 1px 0 #fff;
}

.recent-app-icon svg { width: 20px; height: 20px; fill: currentColor !important; }
.recent-app-card-head > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.recent-app-card-head strong { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.recent-app-card-head small { color: #8a8a91; font-size: 9.5px; }

.recent-app-card-close { width: 29px; height: 29px; color: #5f6067; background: rgba(118,118,128,.11); border-color: transparent; }
.recent-app-card-close svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.recent-app-card-close:active { transform: scale(.9); }

.recent-app-card-preview {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f7f7f9, #ededf1);
}

.recent-preview-content { position: absolute; inset: 0; padding: 24px 20px; transition: filter 220ms ease, opacity 220ms ease; }
.recent-app-card.is-sensitive .recent-preview-content { filter: blur(9px) saturate(.55); opacity: .72; transform: scale(1.035); }

.recent-privacy-shield {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #3f4046;
  background: rgba(245,245,248,.3);
  pointer-events: none;
}

.recent-privacy-shield svg { width: 27px; height: 27px; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.recent-privacy-shield strong { font-size: 13px; font-weight: 700; }
.recent-privacy-shield span { color: #85868d; font-size: 10px; }

.recent-preview-music { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #f5f5f7; background: radial-gradient(circle at 45% 28%, #4c4b53, #18181d 58%, #0d0d10); }
.recent-preview-disc { position: relative; width: min(54vw, 174px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 24px; border-radius: 50%; background: repeating-radial-gradient(circle, #23242a 0 3px, #15161a 4px 7px); box-shadow: 0 18px 34px rgba(0,0,0,.42); }
.recent-preview-disc::before { content: ''; width: 38%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, #d98fa0, #7f4e5c); box-shadow: inset 0 0 0 8px rgba(255,255,255,.07); }
.recent-preview-disc span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #111; }
.recent-preview-music strong { max-width: 90%; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.recent-preview-subline { width: 44%; height: 5px; margin: 9px 0 25px; border-radius: 9px; background: rgba(255,255,255,.2); }
.recent-preview-controls { display: flex; align-items: center; gap: 24px; }
.recent-preview-controls i { width: 18px; height: 3px; border-radius: 4px; background: rgba(255,255,255,.7); }
.recent-preview-controls b { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); }

.recent-preview-settings { color: #1f2025; background: #f2f2f7; }
.recent-preview-settings > strong { display: block; margin: 10px 0 22px; font-size: 24px; }
.recent-preview-setting-row { height: 52px; display: grid; grid-template-columns: 30px 1fr 28px; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid rgba(60,60,67,.08); background: #fff; }
.recent-preview-setting-row:first-of-type { border-radius: 13px 13px 0 0; }
.recent-preview-setting-row:nth-of-type(3) { border-radius: 0 0 13px 13px; border-bottom: 0; }
.recent-preview-setting-row i { width: 26px; height: 26px; border-radius: 7px; background: #a9a9af; }
.recent-preview-setting-row span { height: 7px; width: 72%; border-radius: 7px; background: #d0d0d5; }
.recent-preview-setting-row em { width: 22px; height: 12px; border-radius: 8px; background: #d8d8dc; }
.recent-preview-settings small { display: block; margin-top: 20px; color: #8d8d94; font-size: 10px; }

.recent-preview-docs { color: #222328; background: linear-gradient(180deg, #fbfafc, #f0edf4); }
.recent-preview-docs > strong { display: block; margin: 8px 0 24px; font-size: 22px; }
.recent-preview-document { display: grid; grid-template-columns: 34px 1fr; gap: 7px 10px; margin-bottom: 12px; padding: 15px; border-radius: 15px; background: rgba(255,255,255,.86); box-shadow: 0 8px 22px rgba(56,45,70,.07); }
.recent-preview-document i { grid-row: 1 / 4; width: 30px; height: 38px; border-radius: 7px; background: #d9d0df; }
.recent-preview-document span { height: 6px; border-radius: 7px; background: #d9d9de; }
.recent-preview-document span:last-child { width: 64%; }
.recent-preview-document.compact { opacity: .72; }
.recent-preview-docs small { color: #8f8996; font-size: 10px; }

.recent-preview-chat { background: linear-gradient(180deg, #f4f4f6, #e7e7eb); }
.recent-preview-chat-head { display: flex; align-items: center; justify-content: space-between; margin: -24px -20px 28px; padding: 19px 16px 13px; background: rgba(249,249,250,.88); }
.recent-preview-chat-head i,
.recent-preview-chat-head em { width: 24px; height: 8px; border-radius: 6px; background: #b8b8be; }
.recent-preview-chat-head strong { font-size: 14px; }
.recent-preview-bubble { width: 64%; height: 40px; margin-bottom: 18px; border-radius: 8px 16px 16px 16px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.recent-preview-bubble.right { width: 58%; margin-left: auto; border-radius: 16px 8px 16px 16px; background: #17171a; }
.recent-preview-bubble.short { width: 42%; }
.recent-preview-chat small { position: absolute; left: 20px; bottom: 18px; color: #85858c; font-size: 10px; }

.recent-apps-footer {
  min-height: calc(54px + var(--safe-bottom-inset, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 4px 16px calc(9px + var(--safe-bottom-inset, 0px));
  flex: 0 0 auto;
  color: rgba(255,255,255,.58);
  font-size: 10px;
}

.recent-apps-footer i { width: 116px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.82); cursor: pointer; }

.recent-apps-empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.92);
  text-align: center;
}
.recent-apps-empty svg { width: 44px; height: 44px; margin-bottom: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .74; }
.recent-apps-empty strong { font-size: 15px; }
.recent-apps-empty span { color: rgba(255,255,255,.58); font-size: 11px; }

@media (min-width: 768px) {
  .recent-apps-trigger { display: flex; }
}

@media (max-width: 767px) {
  .recent-apps-gesture-zone { display: flex; }
}

@media (max-width: 370px) {
  .recent-apps-header { min-height: calc(15vh + var(--safe-top-inset, 0px)); padding-left: 14px; padding-right: 14px; }
  .recent-apps-header strong { font-size: 20px; }
  .recent-apps-track { gap: 11px; padding-left: max(18px, calc((100% - 84%) / 2)); padding-right: max(18px, calc((100% - 84%) / 2)); scroll-padding-inline: max(18px, calc((100% - 84%) / 2)); }
  .recent-app-card { flex-basis: 84%; width: 84%; min-height: 286px; height: min(57vh, 430px); border-radius: 25px; }
  .recent-app-card-head { min-height: 54px; padding: 9px 10px; }
  .recent-app-icon { width: 34px; height: 34px; }
  .recent-preview-content { padding: 19px 16px; }
  .recent-preview-chat-head { margin: -19px -16px 22px; }
  .recent-preview-disc { width: min(48vw, 150px); margin-bottom: 18px; }
  .recent-apps-footer { min-height: calc(48px + var(--safe-bottom-inset, 0px)); }
}

[data-theme="dark"] .recent-app-card { color: #f5f5f7; background: rgba(36,36,40,.95); border-color: rgba(255,255,255,.13); }
[data-theme="dark"] .recent-app-card-head { border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .recent-app-icon { color: #f4f4f6; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .recent-app-card-close { color: #d5d5d9; background: rgba(255,255,255,.09); }

@media (prefers-reduced-motion: reduce) {
  .recent-apps-overlay,
  .recent-app-card,
  .recent-apps-trigger,
  .recent-apps-gesture-zone span { transition-duration: 150ms !important; }
  .recent-apps-overlay { transform: none !important; }
  .recent-app-card.is-removing { transform: none !important; }
}

[data-performance-mode="true"] .recent-apps-overlay,
[data-performance-mode="true"] .recent-apps-trigger,
[data-performance-mode="true"] .recent-apps-dismiss {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Lnyy UI section. */

/* ===== Lnyy UI v3: pearl iridescent system shell ===== */
.status-bar {
  color: var(--lnyy-status-text, var(--statusbar-text));
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.08));
  box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(52,45,68,.08);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}
.status-bar .time-display,
.status-bar .status-icons { color: inherit; mix-blend-mode: normal; }
.desktop-page .app-icon,
.dock .app-icon,
.recent-apps-trigger,
.app-close-btn,
.recent-apps-dismiss,
.recent-app-card-close {
  position: relative;
  overflow: hidden;
  background: var(--glass-soft-bg);
  border: 1px solid var(--lnyy-glass-border);
  box-shadow: var(--lnyy-glass-shadow);
  backdrop-filter: var(--glass-soft-blur);
  -webkit-backdrop-filter: var(--glass-soft-blur);
}
.desktop-page .app-icon::before,
.dock .app-icon::before,
.recent-apps-trigger::before,
.app-close-btn::before,
.recent-apps-dismiss::before,
.recent-app-card-close::before,
.dock::before,
.msg-banner::before,
.pwa-update-banner::before,
.modal-sheet::before,
.context-menu::before,
.recent-app-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--lnyy-iridescent-sheen);
  background-size: 220% 220%;
  opacity: .62;
  mix-blend-mode: screen;
  animation: lnyyPearlSheen 18s ease-in-out infinite;
}
.desktop-page .app-icon::after,
.dock .app-icon::after { background: var(--lnyy-iridescent-glow); opacity: .72; }
.dock {
  position: relative;
  isolation: isolate;
  background: var(--glass-medium-bg);
  border: 1px solid var(--lnyy-glass-border);
  box-shadow: var(--shadow-float);
  backdrop-filter: var(--glass-medium-blur);
  -webkit-backdrop-filter: var(--glass-medium-blur);
}
.dock::before { z-index: 0; }
.dock .app-icon-wrapper { position: relative; z-index: 1; }
.msg-banner,
.modal-sheet,
.context-menu {
  position: relative;
  overflow: hidden;
  background: var(--glass-strong-bg);
  border: 1px solid var(--lnyy-glass-border);
  box-shadow: var(--shadow-float);
  backdrop-filter: var(--glass-strong-blur);
  -webkit-backdrop-filter: var(--glass-strong-blur);
}

/* Glass clipping must not disable wheel or trackpad scrolling in tall dialogs. */
.modal-sheet {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-sheet.lnyy-library-modal-sheet {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.modal-sheet.lnyy-library-modal-sheet > .app-header {
  flex: 0 0 auto;
}

.modal-sheet.lnyy-library-modal-sheet > .app-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.msg-banner > *,
.pwa-update-banner > *,
.modal-sheet > *,
.context-menu > * { position: relative; z-index: 1; }
.phone-container > .msg-banner { position: absolute; }
.app-exit-bar .home-indicator,
.recent-apps-gesture-zone span,
.recent-apps-footer i {
  background: linear-gradient(90deg, rgba(255,255,255,.76), rgba(243,183,202,.56), rgba(201,184,255,.5), rgba(255,255,255,.72));
  box-shadow: 0 0 18px rgba(243,183,202,.24), inset 0 1px 0 rgba(255,255,255,.72);
}
.recent-apps-overlay {
  background:
    radial-gradient(circle at 18% 10%, rgba(243,183,202,.22), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(201,184,255,.2), transparent 32%),
    rgba(16,16,22,.74);
  backdrop-filter: blur(32px) saturate(1.24);
  -webkit-backdrop-filter: blur(32px) saturate(1.24);
}
.recent-app-card {
  background: var(--glass-strong-bg);
  border-color: var(--lnyy-glass-border);
  box-shadow: 0 28px 70px rgba(28,24,42,.34), var(--lnyy-glass-highlight);
  backdrop-filter: var(--glass-medium-blur);
  -webkit-backdrop-filter: var(--glass-medium-blur);
}
.recent-app-card::before { z-index: 1; opacity: .36; }
.recent-app-card-head,
.recent-app-card-preview { position: relative; z-index: 2; }
.recent-app-icon { background: var(--glass-soft-bg); border-color: var(--lnyy-glass-border); box-shadow: var(--shadow-soft); }
.recent-privacy-shield { background: rgba(248,248,252,.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-theme="dark"] .status-bar { background: linear-gradient(180deg, rgba(36,36,44,.56), rgba(24,24,30,.18)); }
[data-theme="dark"] .recent-app-card { color: #f5f5f7; background: var(--glass-strong-bg); border-color: var(--lnyy-glass-border); }
[data-theme="dark"] .recent-privacy-shield { color: #f5f5f7; background: rgba(18,18,24,.42); }
@media (prefers-reduced-motion: reduce) {
  .desktop-page .app-icon::before,
  .dock .app-icon::before,
  .recent-apps-trigger::before,
  .app-close-btn::before,
  .recent-apps-dismiss::before,
  .recent-app-card-close::before,
  .dock::before,
  .msg-banner::before,
  .pwa-update-banner::before,
  .modal-sheet::before,
  .context-menu::before,
  .recent-app-card::before { animation: none; }
}
[data-performance-mode="true"] .desktop-page .app-icon::before,
[data-performance-mode="true"] .dock .app-icon::before,
[data-performance-mode="true"] .dock::before,
[data-performance-mode="true"] .msg-banner::before,
[data-performance-mode="true"] .pwa-update-banner::before,
[data-performance-mode="true"] .modal-sheet::before,
[data-performance-mode="true"] .context-menu::before,
[data-performance-mode="true"] .recent-app-card::before { display: none; }
.lnyy-library-overlay{background:rgba(9,12,18,.32);backdrop-filter:blur(18px) saturate(1.05);-webkit-backdrop-filter:blur(18px) saturate(1.05)}
.lnyy-library-sheet{background:linear-gradient(180deg,rgba(247,249,252,.98),rgba(235,239,244,.97));color:#151922}.lnyy-library-header{background:rgba(249,251,253,.72);border-bottom:1px solid rgba(31,40,54,.08)}.lnyy-library-title span,.lnyy-library-kicker{color:rgba(42,51,66,.52);font-size:11px;font-weight:650;letter-spacing:0}.lnyy-library-title strong{color:#131720}.lnyy-library-header-actions{display:flex;align-items:center;gap:8px}.lnyy-pill-btn,.lnyy-primary-pill,.lnyy-add-btn{border:1px solid rgba(31,40,54,.08);color:#151922;background:rgba(255,255,255,.72);box-shadow:0 8px 20px rgba(22,31,44,.08),inset 0 1px rgba(255,255,255,.82)}.lnyy-pill-btn{min-height:30px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:700}.lnyy-primary-pill{min-height:34px;border-radius:999px;padding:0 14px;font-size:13px;font-weight:800}.lnyy-add-btn{background:#202734;color:#fff;box-shadow:0 10px 22px rgba(15,24,36,.22)}.lnyy-library-content{padding:14px 14px calc(78px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(226,231,238,.34))}
.lnyy-library-hero,.lnyy-continue-card,.lnyy-library-filter,.lnyy-file-card,.lnyy-study-hero,.lnyy-study-filter,.lnyy-study-card,.lnyy-draft-panel,.lnyy-bookmark-card,.lnyy-source-panel,.lnyy-question-card{border:1px solid rgba(31,40,54,.08);border-radius:8px;background:rgba(255,255,255,.72);box-shadow:0 18px 38px rgba(24,34,48,.09),inset 0 1px rgba(255,255,255,.78)}.lnyy-library-hero,.lnyy-study-hero{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;margin-bottom:10px}.lnyy-library-hero h3,.lnyy-study-hero h3{margin:4px 0 0;color:#111620;font-size:22px;line-height:1.05;font-weight:800}.lnyy-library-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:10px}.lnyy-library-stats div{min-height:54px;padding:9px;border:1px solid rgba(31,40,54,.07);border-radius:8px;background:rgba(255,255,255,.58)}.lnyy-library-stats span,.lnyy-file-card span,.lnyy-file-foot,.lnyy-filter-top span,.lnyy-book-open small,.lnyy-continue-main span,.lnyy-continue-main small,.lnyy-study-card-top span,.lnyy-study-card-top em,.lnyy-answer-meta{color:rgba(38,47,61,.54);font-size:11px;font-style:normal}.lnyy-library-stats strong{display:block;margin-top:6px;color:#141923;font-size:18px;line-height:1;overflow:hidden;text-overflow:ellipsis}
.lnyy-book-cover{position:relative;display:flex;min-height:150px;aspect-ratio:.72;flex-direction:column;justify-content:space-between;padding:12px 10px 10px;border-radius:8px;overflow:hidden;color:#f9fbfd;background:#202734;box-shadow:0 18px 30px rgba(17,24,36,.18),inset 8px 0 rgba(255,255,255,.08),inset 0 1px rgba(255,255,255,.2)}.lnyy-book-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 18%),linear-gradient(180deg,rgba(255,255,255,.16),transparent 42%);pointer-events:none}.lnyy-book-cover-steel{background:linear-gradient(145deg,#566173,#232b38)}.lnyy-book-cover-sage{background:linear-gradient(145deg,#547066,#22322e)}.lnyy-book-cover-violet{background:linear-gradient(145deg,#625b7d,#282535)}.lnyy-book-cover-paper{background:linear-gradient(145deg,#75756d,#2b2d2e)}.lnyy-book-cover-ink{background:linear-gradient(145deg,#2c3544,#111720)}.lnyy-book-cover strong,.lnyy-book-cover span,.lnyy-book-cover small,.lnyy-book-cover i{position:relative;z-index:1}.lnyy-book-cover strong{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.22;font-weight:760}.lnyy-book-kind,.lnyy-book-cover small{font-size:10px;font-weight:750;color:rgba(255,255,255,.76)}.lnyy-book-cover i{width:28px;height:2px;border-radius:999px;background:rgba(255,255,255,.52)}.lnyy-book-cover.is-compact{width:58px;min-width:58px;min-height:82px;padding:8px 7px}.lnyy-book-cover.is-compact strong{font-size:10px;-webkit-line-clamp:3}.lnyy-book-cover.is-compact small{font-size:9px}
.lnyy-file-list,.lnyy-study-list,.lnyy-draft-list,.lnyy-source-list,.lnyy-bookmark-list{display:grid;gap:9px}.lnyy-file-card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:11px;padding:10px}.lnyy-file-main,.lnyy-file-head,.lnyy-file-foot,.lnyy-study-card-top,.lnyy-draft-head,.lnyy-bookmark-card div,.lnyy-source-list article div{min-width:0}.lnyy-file-head,.lnyy-file-foot,.lnyy-study-card-top,.lnyy-draft-head,.lnyy-bookmark-card div,.lnyy-source-list article div,.lnyy-filter-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.lnyy-file-head strong,.lnyy-study-card-top strong{display:block;margin-top:3px;color:#141923;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lnyy-file-head em{flex-shrink:0;color:rgba(38,47,61,.42);font-size:10px;font-style:normal}.lnyy-file-main p,.lnyy-study-question,.lnyy-study-preview,.lnyy-bookmark-card p,.lnyy-source-list p{margin:7px 0 9px;color:rgba(31,39,51,.66);font-size:12px;line-height:1.48;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lnyy-card-actions{gap:5px;flex-wrap:wrap;justify-content:flex-end}.lnyy-card-actions button{padding:6px 9px}
.lnyy-continue-card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;padding:10px;margin-bottom:10px}.lnyy-continue-main strong{display:block;margin-top:4px;color:#111620;font-size:17px;line-height:1.2}.lnyy-continue-main p{margin:7px 0;color:rgba(31,39,51,.62);font-size:12px;line-height:1.46;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lnyy-continue-main div{display:flex;align-items:center;justify-content:space-between;gap:8px}.lnyy-continue-main button,.lnyy-filter-pills button,.lnyy-reader-toolbar button{border:0;border-radius:999px;color:#151922;background:rgba(255,255,255,.78);font-weight:760}.lnyy-continue-main button{padding:7px 12px}.lnyy-library-filter{display:grid;gap:8px;padding:10px;margin-bottom:11px}.lnyy-filter-top strong{font-size:13px;color:#141923}.lnyy-filter-pills{display:flex;gap:6px;overflow-x:auto;padding-bottom:1px}.lnyy-filter-pills button{flex:0 0 auto;padding:7px 10px;font-size:12px;background:rgba(31,40,54,.08);color:rgba(32,39,52,.68)}.lnyy-filter-pills button.is-active{color:#fff;background:#202734}.lnyy-library-filter input,.lnyy-study-filter select,.lnyy-study-filter input,.lnyy-question-form select,.lnyy-question-form textarea{width:100%;min-width:0;border:1px solid rgba(31,40,54,.08);border-radius:8px;background:rgba(255,255,255,.74);color:#141923;outline:none;box-sizing:border-box;font:inherit;font-size:13px}.lnyy-library-filter input{height:36px;padding:0 11px}.lnyy-book-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}.lnyy-book-card{min-width:0}.lnyy-book-open{width:100%;display:grid;gap:7px;border:0;padding:0;background:transparent;text-align:left;color:#141923}.lnyy-book-open .lnyy-book-cover{width:100%}.lnyy-book-open span{min-height:28px;color:#141923;font-size:12px;font-weight:720;line-height:1.18;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lnyy-book-open small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnyy-reader-page-overlay{align-items:stretch;background:rgba(8,10,14,.34);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.lnyy-reader-sheet{position:relative;width:100%;height:100%;max-height:none!important;display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));border-radius:0;background:linear-gradient(180deg,#f6f7f3,#ecefe9);color:#171911;overflow:hidden}.lnyy-reader-head{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;flex-shrink:0}.lnyy-reader-close{width:32px;height:32px;border:1px solid rgba(24,28,20,.08);border-radius:50%;background:rgba(255,255,255,.64);color:#171911;font-size:20px;line-height:1}.lnyy-reader-head span,.lnyy-reader-meta{color:rgba(36,40,31,.5);font-size:11px}.lnyy-reader-head strong{display:block;margin-top:2px;color:#161910;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lnyy-reader-head em{color:rgba(36,40,31,.58);font-size:12px;font-style:normal;font-weight:800}.lnyy-reader-progress{height:3px;margin:10px 0 6px;border-radius:999px;background:rgba(40,44,34,.1);overflow:hidden;flex-shrink:0}.lnyy-reader-progress span{display:block;height:100%;border-radius:inherit;background:#202734}.lnyy-reader-meta{margin-bottom:8px;flex-shrink:0}.lnyy-reader-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:20px 18px 88px;border:1px solid rgba(58,52,40,.08);border-radius:8px;background:rgba(255,255,250,.76);color:#202016;font-size:15px;line-height:1.88;white-space:pre-wrap;box-shadow:inset 0 1px rgba(255,255,255,.74),0 14px 30px rgba(31,34,24,.08)}.lnyy-reader-toolbar{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(calc(100% - 28px),360px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:6px;border:1px solid rgba(31,40,54,.1);border-radius:999px;background:rgba(247,249,250,.78);backdrop-filter:blur(22px) saturate(1.08);-webkit-backdrop-filter:blur(22px) saturate(1.08);box-shadow:0 16px 36px rgba(17,24,34,.15),inset 0 1px rgba(255,255,255,.76)}.lnyy-reader-toolbar button{min-width:0;min-height:32px;padding:0 5px;font-size:12px;background:transparent}
.lnyy-draft-panel{flex-shrink:0;margin-top:9px;margin-bottom:56px;padding:10px;max-height:148px;overflow:auto}.lnyy-draft-head strong,.lnyy-bookmark-card strong,.lnyy-source-list strong{color:#141923;font-size:13px}.lnyy-draft-head span,.lnyy-bookmark-card span,.lnyy-source-list span{color:rgba(38,47,61,.5);font-size:11px}.lnyy-draft-card{padding:9px;border-radius:8px;background:rgba(255,255,255,.62);border:1px solid rgba(31,40,54,.07)}.lnyy-draft-card div:first-child{display:flex;justify-content:space-between;gap:8px}.lnyy-draft-card p{margin:6px 0 8px;color:rgba(31,39,51,.68);font-size:12px;line-height:1.45}.lnyy-library-modal{background:rgba(8,10,14,.34)}.lnyy-library-modal-sheet{max-width:390px;max-height:90%;padding-bottom:18px;background:rgba(246,248,251,.94);color:#141923}.lnyy-modal-actions{margin-top:12px}.lnyy-compact-actions{justify-content:flex-end;gap:6px;flex-wrap:wrap}.lnyy-compact-actions .btn{padding:6px 9px;font-size:12px}.lnyy-study-hero{margin-bottom:10px}.lnyy-study-stats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.lnyy-study-stats span{padding:6px 8px;border-radius:999px;background:rgba(31,40,54,.08);color:rgba(31,40,54,.64);font-size:11px}.lnyy-study-filter{display:grid;gap:8px;padding:10px;margin-bottom:10px}.lnyy-study-filter>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lnyy-study-filter>div:last-child{grid-template-columns:minmax(0,1fr) auto}.lnyy-study-filter select,.lnyy-study-filter input{height:36px;padding:0 10px}.lnyy-study-filter button{width:auto;padding:8px 10px}.lnyy-study-card{padding:11px}.lnyy-study-question{color:rgba(20,25,35,.78)}.lnyy-study-preview{color:rgba(31,39,51,.56)}.lnyy-bookmark-list{max-height:48vh;overflow:auto}.lnyy-bookmark-card{padding:10px}.lnyy-question-form{gap:10px}.lnyy-question-form label span{color:rgba(38,47,61,.58);font-size:12px}.lnyy-question-form textarea{min-height:82px;padding:10px;line-height:1.5;resize:vertical}.lnyy-question-form select{height:38px;padding:0 10px}.lnyy-excerpt-box,.lnyy-answer-body{border:1px solid rgba(31,40,54,.08);border-radius:8px;background:rgba(255,255,255,.68);color:rgba(25,31,42,.74);white-space:pre-wrap}.lnyy-excerpt-box{max-height:120px;overflow:auto;padding:10px;font-size:12px;line-height:1.62}.lnyy-answer-meta{margin-bottom:10px;line-height:1.5}.lnyy-question-card{padding:10px;margin-bottom:10px;color:rgba(25,31,42,.72);font-size:12px;line-height:1.58}.lnyy-source-panel{padding:10px;margin-bottom:10px}.lnyy-source-list article{padding:8px;border-radius:8px;background:rgba(255,255,255,.62);border:1px solid rgba(31,40,54,.06)}.lnyy-answer-body{max-height:48vh;overflow:auto;padding:14px;color:#171b24;font-size:14px;line-height:1.72}.lnyy-library-empty{padding:24px 16px}.lnyy-library-empty .btn{width:auto;margin-top:12px}
@media(max-width:370px){.lnyy-library-content{padding-left:10px;padding-right:10px}.lnyy-library-hero,.lnyy-study-hero{min-height:72px;padding:12px}.lnyy-library-hero h3,.lnyy-study-hero h3{font-size:19px}.lnyy-library-stats{gap:5px}.lnyy-library-stats div{min-height:48px;padding:7px}.lnyy-library-stats strong{font-size:15px}.lnyy-book-shelf{gap:10px 8px}.lnyy-book-cover{min-height:124px;padding:10px 8px 8px}.lnyy-book-cover strong{font-size:12px}.lnyy-file-card,.lnyy-continue-card{grid-template-columns:52px minmax(0,1fr);gap:9px}.lnyy-book-cover.is-compact{width:52px;min-width:52px;min-height:74px}.lnyy-reader-sheet{padding-left:10px;padding-right:10px}.lnyy-reader-meta{display:none}.lnyy-reader-body{padding:16px 14px 78px;font-size:14px;line-height:1.78}.lnyy-reader-toolbar{width:calc(100% - 20px);bottom:calc(10px + env(safe-area-inset-bottom,0px))}.lnyy-reader-toolbar button{min-height:30px;font-size:11px}.lnyy-draft-panel{max-height:118px}}
[data-theme="dark"] .lnyy-library-sheet,body.dark-mode .lnyy-library-sheet{background:linear-gradient(180deg,rgba(32,36,43,.98),rgba(18,21,26,.98));color:#f4f6f8}[data-theme="dark"] .lnyy-library-header,body.dark-mode .lnyy-library-header,[data-theme="dark"] .lnyy-library-hero,body.dark-mode .lnyy-library-hero,[data-theme="dark"] .lnyy-continue-card,body.dark-mode .lnyy-continue-card,[data-theme="dark"] .lnyy-library-filter,body.dark-mode .lnyy-library-filter,[data-theme="dark"] .lnyy-file-card,body.dark-mode .lnyy-file-card,[data-theme="dark"] .lnyy-study-hero,body.dark-mode .lnyy-study-hero,[data-theme="dark"] .lnyy-study-filter,body.dark-mode .lnyy-study-filter,[data-theme="dark"] .lnyy-study-card,body.dark-mode .lnyy-study-card,[data-theme="dark"] .lnyy-draft-panel,body.dark-mode .lnyy-draft-panel,[data-theme="dark"] .lnyy-bookmark-card,body.dark-mode .lnyy-bookmark-card,[data-theme="dark"] .lnyy-source-panel,body.dark-mode .lnyy-source-panel,[data-theme="dark"] .lnyy-question-card,body.dark-mode .lnyy-question-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}[data-theme="dark"] .lnyy-library-title strong,body.dark-mode .lnyy-library-title strong,[data-theme="dark"] .lnyy-library-hero h3,body.dark-mode .lnyy-library-hero h3,[data-theme="dark"] .lnyy-file-head strong,body.dark-mode .lnyy-file-head strong,[data-theme="dark"] .lnyy-book-open span,body.dark-mode .lnyy-book-open span,[data-theme="dark"] .lnyy-study-card-top strong,body.dark-mode .lnyy-study-card-top strong{color:#f7f8fa}
/* iOS-style desktop widget system. */
.desktop-layout-grid {
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(64px, 20vw, 78px);
  grid-auto-flow: row;
  gap: 8px;
  align-content: start;
  padding: 8px 2px 18px;
}

.desktop-layout-grid > .widgets-area,
.desktop-layout-grid > .icon-grid {
  display: contents;
}

.desktop-layout-grid .app-icon-wrapper {
  width: 100%;
  height: 100%;
  min-width: 0;
  align-self: stretch;
}

.widget-card {
  --widget-ink: #111;
  --widget-muted: rgba(17,17,17,.58);
  position: relative;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 22px;
  color: var(--widget-ink);
  background: rgba(245,245,247,.94);
  box-shadow: 0 10px 28px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.58);
  overflow: visible;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}

.widget-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,.34), transparent 44%);
}

.widget-card.widget-theme-dark {
  --widget-ink: #f7f7f7;
  --widget-muted: rgba(247,247,247,.62);
  color: var(--widget-ink);
  background: rgba(27,27,29,.96);
  border-color: rgba(255,255,255,.12);
}

.widget-card.widget-theme-glass {
  --widget-ink: #fff;
  --widget-muted: rgba(255,255,255,.7);
  color: var(--widget-ink);
  background: rgba(40,40,44,.3);
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 12px 30px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.34);
  backdrop-filter: blur(22px) saturate(0);
  -webkit-backdrop-filter: blur(22px) saturate(0);
  text-shadow: 0 1px 5px rgba(0,0,0,.24);
}

.widget-card.edit-mode {
  outline: 1px solid rgba(255,255,255,.7);
  outline-offset: 2px;
  animation: iconWiggle .42s ease-in-out infinite alternate;
}

.widget-card .widget-delete {
  top: -8px;
  left: -8px;
  right: auto;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  z-index: 30;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #fff;
  background: rgba(38,38,40,.92);
  font-size: 18px;
  line-height: 24px;
  pointer-events: none;
}

.widget-card.edit-mode .widget-delete { display: flex; pointer-events: auto; }
.widget-kicker { color: var(--widget-muted); font-size: 10px; font-weight: 650; line-height: 1.2; }
.widget-caption, .widget-updated { color: var(--widget-muted); font-size: 10px; line-height: 1.25; }
.widget-updated:empty { display: none; }

.widget-clock { align-items: stretch; }
.widget-clock-small { align-items: center; justify-content: center; }
.widget-clock.widget-small { align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 1px 5px rgba(0,0,0,.24); }
.widget-clock.widget-small::before { display: none; }
.widget-clock.widget-small .widget-clock-time { margin: 0; font-size: clamp(32px, 10vw, 42px); }
.widget-clock.widget-small .widget-clock-time-thin { font-weight: 300; }
.widget-clock.widget-small .widget-clock-time-regular { font-weight: 500; }
.widget-clock.widget-small .widget-clock-time-bold { font-weight: 700; }
.widget-clock-face {
  --hour-angle: 0deg;
  --minute-angle: 0deg;
  --second-angle: 0deg;
  position: relative;
  width: min(92%, 112px);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .92;
  background: radial-gradient(circle, currentColor 0 2px, transparent 3px), repeating-conic-gradient(from -1deg, currentColor 0 1deg, transparent 1deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 51%, transparent 52% 100%);
  mask-image: radial-gradient(circle, #000 0 51%, transparent 52% 100%);
}
.widget-clock-face::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: inherit;
  opacity: .16;
}
.clock-hand { position: absolute; left: 50%; bottom: 50%; z-index: 2; width: 2px; border-radius: 2px; background: currentColor; transform-origin: 50% 100%; }
.clock-hand.hour { height: 25%; transform: translateX(-50%) rotate(var(--hour-angle)); }
.clock-hand.minute { height: 34%; transform: translateX(-50%) rotate(var(--minute-angle)); }
.clock-hand.second { width: 1px; height: 38%; background: #d64036; transform: translateX(-50%) rotate(var(--second-angle)); }
.widget-clock-face b { position: absolute; left: 50%; top: 50%; z-index: 3; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translate(-50%,-50%); }
.widget-clock-time { margin-top: auto; font-size: clamp(36px, 12vw, 52px); font-weight: 300; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.widget-weather-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.widget-weather-main strong { display: block; margin-top: 4px; font-size: 38px; font-weight: 350; line-height: 1; }
.widget-weather-main span { display: block; margin-top: 4px; color: var(--widget-muted); font-size: 11px; }
.weather-glyph { position: relative; width: 38px; height: 38px; flex: 0 0 38px; border: 2px solid currentColor; border-radius: 50%; opacity: .82; }
.weather-glyph::before, .weather-glyph::after { content: ''; position: absolute; }
.weather-glyph::before { left: -7px; bottom: -4px; width: 32px; height: 15px; border: 2px solid currentColor; border-radius: 14px; background: inherit; }
.weather-glyph::after { left: 2px; bottom: 6px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.weather-code-0::before, .weather-code-0::after { display: none; }
.widget-forecast { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-top: auto; padding-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.widget-forecast span { min-width: 0; text-align: center; }
.widget-forecast b, .widget-forecast em { display: block; overflow: hidden; color: var(--widget-muted); font-size: 9px; font-style: normal; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.widget-forecast b { color: currentColor; }
.widget-empty-line { grid-column: 1 / -1; align-self: center; color: var(--widget-muted); font-size: 10px; }

.widget-photo { padding: 0; overflow: visible; background: #171717; }
.widget-photo-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.widget-photo-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.widget-photo-placeholder { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; color: rgba(255,255,255,.72); background: #262628; font-size: 11px; }
.widget-photo-placeholder i { width: 30px; height: 24px; border: 1.5px solid currentColor; border-radius: 5px; transform: rotate(-2deg); }
.widget-photo-count { position: absolute; right: 9px; bottom: 9px; z-index: 2; padding: 3px 6px; border-radius: 9px; color: #fff; background: rgba(0,0,0,.42); font-size: 9px; }
.widget-photo-count:empty { display: none; }

.widget-music { display: grid; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: 1fr; align-items: center; gap: 10px; }
.widget-music-medium { grid-template-columns: 74px minmax(0,1fr) auto; }
.widget-music-cover { width: 48px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 11px; color: var(--widget-muted); background: color-mix(in srgb, currentColor 10%, transparent); }
.widget-music-medium .widget-music-cover { width: 74px; }
.widget-music-cover img { width: 100%; height: 100%; object-fit: cover; }
.widget-music-cover i { width: 17px; height: 17px; border: 2px solid currentColor; border-radius: 50%; }
.widget-music-copy { min-width: 0; }
.widget-music-copy strong, .widget-music-copy span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.widget-music-copy strong { margin-top: 4px; font-size: 13px; line-height: 1.2; }
.widget-music-copy span { margin-top: 3px; color: var(--widget-muted); font-size: 10px; }
.widget-music-controls { display: flex; align-items: center; gap: 2px; }
.widget-music-controls button { width: 40px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; color: inherit; background: transparent; }
.widget-music-controls i { position: relative; display: block; width: 16px; height: 16px; }
.widget-music-controls .is-play::before { content: ''; position: absolute; inset: 1px 0 1px 3px; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.widget-music-controls .is-pause::before, .widget-music-controls .is-pause::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: 4px; border-radius: 1px; background: currentColor; }
.widget-music-controls .is-pause::before { left: 2px; }
.widget-music-controls .is-pause::after { right: 2px; }
.widget-music-controls .is-next::before { content: ''; position: absolute; inset: 1px 3px 1px 0; border-left: 10px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.widget-music-controls .is-next::after { content: ''; position: absolute; right: 1px; top: 1px; bottom: 1px; width: 2px; background: currentColor; }

.widget-notes { justify-content: flex-start; }
.widget-note-pin { width: 18px; height: 3px; margin-bottom: 10px; border-radius: 3px; background: currentColor; opacity: .28; }
.widget-note-text { margin-top: 8px; overflow: hidden; font-size: 13px; font-weight: 550; line-height: 1.42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.widget-notes-medium .widget-note-text { font-size: 16px; -webkit-line-clamp: 3; }
.widget-notes.widget-medium { padding: 0; overflow: hidden; border-radius: 22px; background: var(--note-accent, #d9d0ca); }
.widget-notes.widget-medium::before { display: none; }
.widget-note-hero { position: relative; display: grid; grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); width: 100%; height: 100%; min-height: 128px; overflow: hidden; color: #fff; background: var(--note-accent, #fff); text-shadow: 0 1px 3px rgba(0,0,0,.28); }
.widget-note-background { position: relative; min-height: 0; overflow: hidden; cursor: pointer; background: #fff; }
.widget-note-background::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 60%, rgba(0,0,0,.12)); pointer-events: none; }
.widget-note-background img, .widget-note-avatar img { position: absolute; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(var(--note-zoom, 1)); object-position: center; left: var(--note-x, 50%); top: var(--note-y, 50%); }
.widget-note-background span { position: absolute; inset: 10px 18px auto; z-index: 2; overflow: hidden; color: #222; cursor: text; font-size: 11px; font-weight: 650; line-height: 1.35; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.widget-note-background:has(img) span { color: #fff; }
.widget-note-lower { position: relative; z-index: 1; min-height: 0; padding: 0; color: #222; background: #fff; text-shadow: none; }
.widget-note-avatars { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; justify-items: center; padding: 0 18px; transform: translateY(-50%); pointer-events: none; }
.widget-note-avatar { position: relative; width: 58px; aspect-ratio: 1; overflow: hidden; border: 3px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,255,255,.22); box-shadow: 0 4px 12px rgba(0,0,0,.18); cursor: pointer; }
.widget-note-avatar, .widget-note-heart { pointer-events: auto; }
.widget-note-heart { color: #fff; font-size: 31px; font-family: Georgia, serif; line-height: 1; transform: translateY(-1px); }
.widget-note-days { position: absolute; left: 0; right: 0; top: 32%; display: flex; align-items: baseline; justify-content: center; gap: 3px; padding: 0 8px; cursor: text; transform: translateY(-50%); }
.widget-note-days strong { font-size: 22px; font-weight: 700; line-height: 1.05; }
.widget-note-days span { font-size: 12px; font-weight: 650; }
.widget-note-footer { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 18px; padding: 0 12px; cursor: text; font-size: 10px; font-weight: 650; line-height: 1.1; }
.widget-note-footer em { overflow: hidden; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.widget-note-footer span { font-size: 12px; }
.widget-editor-field + .widget-editor-field { margin-top: 10px; }
.widget-editor-note { padding: 14px 4px; color: rgba(17,17,17,.55); font-size: 13px; line-height: 1.5; text-align: center; }

.desktop-edit-toolbar { position: absolute; top: calc(34px + env(safe-area-inset-top,0px)); left: 16px; right: 16px; z-index: 4200; display: flex; justify-content: space-between; pointer-events: none; }
.desktop-edit-toolbar button { min-width: 44px; height: 36px; padding: 0 13px; border: 1px solid rgba(255,255,255,.4); border-radius: 18px; color: #111; background: rgba(246,246,248,.78); box-shadow: 0 6px 18px rgba(0,0,0,.16); backdrop-filter: blur(18px) saturate(0); -webkit-backdrop-filter: blur(18px) saturate(0); font-size: 13px; font-weight: 650; pointer-events: auto; }
.desktop-edit-toolbar [data-add] { width: 36px; min-width: 36px; padding: 0; font-size: 24px; font-weight: 350; }

.widget-picker-overlay { padding: 0; background: rgba(0,0,0,.26); }
.widget-picker-sheet { width: 100%; max-width: none; max-height: min(82%, 660px); padding: 10px 16px calc(18px + env(safe-area-inset-bottom,0px)); border-radius: 24px 24px 0 0; background: rgba(245,245,247,.94); backdrop-filter: blur(28px) saturate(0); -webkit-backdrop-filter: blur(28px) saturate(0); }
.widget-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.widget-picker-grid button { min-height: 106px; display: grid; grid-template-columns: 40px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; gap: 3px 10px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.widget-picker-grid .widget-picker-icon { grid-row: 1 / 3; width: 38px; height: 38px; display: block; align-self: center; border: 1px solid rgba(17,17,17,.18); border-radius: 11px; background: #f1f1f3; }
.widget-picker-grid .widget-picker-icon.is-clock { border-radius: 50%; }
.widget-picker-grid .widget-picker-icon.is-photo { background: linear-gradient(145deg,#d9d9dd,#85858b); }
.widget-picker-grid .widget-picker-icon.is-music::after { content: ''; display: block; width: 12px; height: 12px; margin: 12px; border: 2px solid #333; border-radius: 50%; }
.widget-picker-grid span, .widget-picker-grid em { min-width: 0; }

.widget-editor-sheet { overflow-y: auto; }
.widget-editor-head { display: grid; grid-template-columns: 44px minmax(0,1fr) 58px; align-items: center; margin-bottom: 8px; }
.widget-editor-head strong { text-align: center; font-size: 15px; }
.widget-editor-head button { height: 40px; border: 0; color: #111; background: transparent; font-size: 14px; font-weight: 650; }
.widget-editor-head [data-back] { font-size: 30px; font-weight: 300; text-align: left; }
.widget-editor-preview { min-height: 188px; display: grid; place-items: center; margin: 0 -16px 14px; padding: 16px; background: #d8d8dc; }
.widget-editor-preview .widget-card { width: min(44%, 164px); height: 144px; box-sizing: border-box; }
.widget-editor-preview .widget-card.widget-medium { width: min(86%, 336px); }
.widget-editor-section { margin-top: 13px; }
.widget-editor-section > span, .widget-editor-field label { display: block; margin-bottom: 7px; color: rgba(17,17,17,.56); font-size: 11px; font-weight: 650; }
.widget-segments { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: rgba(118,118,128,.12); }
.widget-segments button, .widget-theme-options button { min-height: 38px; border: 0; border-radius: 8px; color: #111; background: transparent; font-size: 12px; }
.widget-segments button.is-active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 650; }
.widget-theme-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.widget-theme-options button { display: grid; place-items: center; gap: 5px; padding: 8px 4px; border: 1px solid rgba(17,17,17,.1); }
.widget-theme-options button.is-active { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.widget-theme-options i { width: 28px; height: 28px; border: 1px solid rgba(0,0,0,.12); border-radius: 9px; background: #f5f5f7; }
.widget-theme-options [data-theme="dark"] i { background: #1c1c1e; }
.widget-theme-options [data-theme="glass"] i { background: rgba(90,90,94,.42); backdrop-filter: blur(8px); }
.widget-editor-fields { margin-top: 14px; }
.widget-editor-field input, .widget-editor-field textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(17,17,17,.1); border-radius: 10px; color: #111; background: #fff; font: inherit; font-size: 13px; outline: none; }
.widget-clock-weight-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.widget-clock-weight-options button { min-height: 40px; border: 1px solid rgba(17,17,17,.1); border-radius: 10px; color: #111; background: rgba(118,118,128,.1); font-size: 13px; }
.widget-clock-weight-options button.is-active { border-color: #111; background: #fff; box-shadow: inset 0 0 0 1px #111; font-weight: 650; }
.widget-editor-field input { height: 42px; padding: 0 11px; }
.widget-editor-field textarea { min-height: 76px; padding: 10px 11px; resize: vertical; }
.widget-editor-field small, .widget-city-current, .widget-editor-status { display: block; margin-top: 6px; color: rgba(17,17,17,.48); font-size: 10px; }
.widget-city-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.widget-city-search button, .widget-photo-picker { min-width: 64px; min-height: 42px; border: 0; border-radius: 10px; color: #fff; background: #111; font-size: 12px; }
.widget-city-results { display: grid; gap: 5px; margin-top: 7px; }
.widget-city-results button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 7px 10px; border: 0; border-radius: 10px; color: #111; background: rgba(118,118,128,.1); text-align: left; }
.widget-city-results button strong { font-size: 12px; }
.widget-city-results button span { overflow: hidden; color: rgba(17,17,17,.5); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.widget-photo-picker { width: 100%; }

@media (max-width: 370px) {
  .desktop-page { padding-left: 14px; padding-right: 14px; }
  .desktop-layout-grid { grid-auto-rows: 64px; gap: 7px; padding-left: 0; padding-right: 0; }
  .desktop-layout-grid .app-icon { width: 52px; height: 52px; }
  .widget-card { padding: 11px; border-radius: 19px; }
  .widget-clock-time { font-size: 38px; }
  .widget-weather-main strong { font-size: 32px; }
  .widget-music { grid-template-columns: 40px minmax(0,1fr); gap: 7px; }
  .widget-music-medium { grid-template-columns: 60px minmax(0,1fr) auto; }
  .widget-music-cover { width: 40px; }
  .widget-music-medium .widget-music-cover { width: 60px; }
  .widget-music-controls button { width: 34px; }
  .widget-picker-grid button { min-height: 92px; padding: 11px; }
}

@media (max-height: 650px) {
  .desktop-layout-grid { grid-auto-rows: 62px; gap: 6px; padding-top: 4px; }
  .desktop-layout-grid .app-icon-wrapper { height: 62px; }
  .desktop-layout-grid .app-icon { width: 48px; height: 48px; border-radius: 14px; }
  .desktop-layout-grid .app-label { margin-top: 2px; font-size: 9px; }
  .widget-card { padding: 10px; border-radius: 18px; }
  .widget-editor-preview { min-height: 156px; }
  .widget-editor-preview .widget-card { height: 124px; }
}

@media (prefers-reduced-motion: reduce) {
  .widget-card.edit-mode { animation: none; }
}

[data-performance-mode="true"] .widget-card,
[data-performance-mode="true"] .desktop-edit-toolbar button,
[data-performance-mode="true"] .widget-picker-sheet { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* iOS Messages-style information app. */
.sms-app {
  --input-area-height: 68px;
  --sms-bg: var(--lnyy-bg, #f5f5f5);
  --sms-surface: var(--lnyy-surface, #fff);
  --sms-text: var(--lnyy-text, #111);
  --sms-secondary: var(--lnyy-text-secondary, #6b6b6b);
  --sms-divider: var(--lnyy-divider, rgba(60, 60, 67, .16));
  --sms-control: #e9e9eb;
  --sms-other: #e9e9eb;
  --sms-self: var(--imessage-self, #111);
  --sms-self-text: #fff;
  color: var(--sms-text);
  background: var(--sms-bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

.sms-app .app-header {
  min-height: 52px;
  padding: 4px 8px !important;
  box-sizing: border-box;
  background: rgba(250, 250, 250, .84) !important;
  border-bottom: .5px solid var(--sms-divider) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58);
  backdrop-filter: blur(22px) saturate(0) !important;
  -webkit-backdrop-filter: blur(22px) saturate(0) !important;
}

.sms-app .app-header .title {
  color: var(--sms-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}

.sms-app .sms-icon-button,
.sms-app .back-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--sms-text) !important;
  background: transparent !important;
  cursor: pointer;
}

.sms-app .sms-icon-button svg,
.sms-app .back-btn svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sms-app .sms-icon-button:active,
.sms-app .back-btn:active { background: rgba(120, 120, 128, .14) !important; transform: scale(.94); }
.sms-app .sms-icon-button:focus-visible,
.sms-app .back-btn:focus-visible,
.sms-app #smsSendBtn:focus-visible { outline: 2px solid var(--sms-text); outline-offset: -3px; }

.sms-app #smsContent {
  background: var(--sms-bg) !important;
  overscroll-behavior: contain;
}

.sms-app.chat-open > .app-header { display: none; }
.sms-app.chat-open #smsContent { overflow: hidden; }

.sms-app .search-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 12px;
  background: var(--sms-bg);
}

.sms-app .search-bar input {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  border: 0;
  border-radius: 10px;
  padding: 0 34px;
  color: var(--sms-text);
  background: var(--sms-control);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 36px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.sms-app .search-bar input::-webkit-search-cancel-button { display: none; }
.sms-app .search-bar input::placeholder { color: var(--sms-secondary); opacity: 1; }
.sms-app .search-bar input:focus { box-shadow: inset 0 0 0 1px rgba(120, 120, 128, .32); }

.sms-app .search-bar::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 24px;
  top: 19px;
  width: 12px;
  height: 12px;
  border: 1.7px solid var(--sms-secondary);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

.sms-app .search-bar::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 35px;
  top: 30px;
  width: 6px;
  height: 1.7px;
  border-radius: 2px;
  background: var(--sms-secondary);
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}

.sms-app .chat-list {
  margin: 0;
  padding: 0 0 0 14px;
  background: var(--sms-surface);
  border-top: .5px solid var(--sms-divider);
  border-bottom: .5px solid var(--sms-divider);
}

.sms-app .chat-item {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 8px 13px 8px 0;
  color: var(--sms-text);
  background: transparent !important;
  border: 0;
  border-bottom: .5px solid var(--sms-divider);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sms-app .chat-item:last-child { border-bottom: 0; }
.sms-app .chat-item:active { background: rgba(120, 120, 128, .1) !important; }
.sms-app .chat-item:focus-visible { outline: 2px solid var(--sms-text); outline-offset: -3px; }

.sms-app .chat-avatar,
.sms-app .sms-room-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50% !important;
  color: var(--sms-secondary);
  background: var(--sms-control);
  box-shadow: inset 0 0 0 .5px var(--sms-divider);
  font-size: 17px;
  font-weight: 600;
}

.sms-app .chat-avatar { width: 48px; height: 48px; }
.sms-app .chat-avatar img,
.sms-app .sms-room-avatar img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
.sms-app .chat-info { min-width: 0; }
.sms-app .chat-name { overflow: hidden; color: var(--sms-text); font-size: 16px; font-weight: 550; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.sms-app .chat-preview { margin-top: 4px; overflow: hidden; color: var(--sms-secondary); font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.sms-app .chat-meta { align-self: stretch; padding-top: 4px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sms-app .chat-time { color: var(--sms-secondary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sms-app .unread-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; color: var(--sms-surface); background: var(--sms-text); font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; box-sizing: border-box; }

.sms-app .sms-empty-state { gap: 10px; padding: 40px 22px; text-align: center; }
.sms-app .sms-empty-state .empty-icon { width: 58px; height: 58px; margin: 0 auto; display: grid; place-items: center; border-radius: 18px; color: var(--sms-text); background: var(--sms-control); }
.sms-app .sms-empty-state .empty-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sms-app .sms-empty-state .empty-sub { max-width: 260px; color: var(--sms-secondary); font-size: 13px; line-height: 1.55; }
.sms-app .sms-primary-button { min-width: 132px; min-height: 44px; border: 0; border-radius: 12px; color: var(--sms-surface); background: var(--sms-text); font-size: 14px; font-weight: 650; }

.sms-app .chat-room {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sms-surface) !important;
}

.sms-app .chat-room-header {
  min-height: 68px;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  padding: 4px 4px 5px;
  box-sizing: border-box;
  background: rgba(250, 250, 250, .86) !important;
  border-bottom: .5px solid var(--sms-divider);
  backdrop-filter: blur(22px) saturate(0);
  -webkit-backdrop-filter: blur(22px) saturate(0);
  flex: 0 0 auto;
}

.sms-app .room-info { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sms-app .sms-room-avatar { width: 32px; height: 32px; font-size: 13px; }
.sms-app .room-name { max-width: 100%; overflow: hidden; color: var(--sms-text); font-size: 12px; font-weight: 500; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.sms-app .sms-header-spacer { width: 44px; height: 44px; justify-self: end; }

.sms-app #smsMessagesArea {
  flex: 1;
  min-height: 0;
  gap: 4px;
  padding: 10px 10px 8px;
  background: var(--sms-surface) !important;
  scroll-padding-bottom: calc(var(--keyboard-inset, 0px) + var(--input-area-height, 68px));
}

.sms-app #smsMessagesArea .chat-empty-state { display: none; }
.sms-app #smsMessagesArea .message-wrapper { width: fit-content; max-width: 78%; margin: 1px 0; gap: 0; }
.sms-app #smsMessagesArea .msg-avatar { display: none; }
.sms-app #smsMessagesArea .msg-body { max-width: 100%; gap: 1px; }
.sms-app #smsMessagesArea .msg-bubble {
  min-height: 20px;
  padding: 7px 12px;
  border: 0 !important;
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  box-shadow: none !important;
}

.sms-app #smsMessagesArea .message-wrapper.self .msg-bubble { color: var(--sms-self-text) !important; background: var(--sms-self) !important; border-bottom-right-radius: 5px; }
.sms-app #smsMessagesArea .message-wrapper.other .msg-bubble { color: #111 !important; background: var(--sms-other) !important; border-bottom-left-radius: 5px; }
.sms-app #smsMessagesArea .msg-meta { display: none; }
.sms-app #smsMessagesArea .time-divider { padding: 7px 0 5px; color: var(--sms-secondary); font-size: 10px; font-weight: 500; }
.sms-app #smsMessagesArea .time-divider span { padding: 0; color: inherit; background: transparent; border: 0; }

.sms-app .input-area {
  min-height: calc(68px + var(--safe-bottom-inset, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 4px;
  align-items: end;
  padding: 4px 6px max(20px, calc(4px + var(--safe-bottom-inset, 0px))) 10px !important;
  box-sizing: border-box;
  background: rgba(250, 250, 250, .88) !important;
  border-top: .5px solid var(--sms-divider);
  backdrop-filter: blur(22px) saturate(0);
  -webkit-backdrop-filter: blur(22px) saturate(0);
}

.sms-app #smsInput {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--sms-divider) !important;
  border-radius: 19px !important;
  padding: 7px 13px;
  box-sizing: border-box;
  color: var(--sms-text);
  background: var(--sms-surface);
  font-size: 16px;
  line-height: 20px;
  outline: none;
}

.sms-app #smsInput::placeholder { color: var(--sms-secondary); opacity: 1; }
.sms-app #smsInput:focus { border-color: rgba(120, 120, 128, .45) !important; }

.sms-app #smsSendBtn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--sms-self-text) !important;
  background: transparent !important;
  cursor: pointer;
}

.sms-app #smsSendBtn svg {
  width: 32px;
  height: 32px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: var(--sms-self);
  transition: transform 160ms ease, opacity 160ms ease;
}

.sms-app #smsSendBtn:active svg { transform: scale(.9); }
.sms-app #smsSendBtn:disabled { color: var(--sms-secondary) !important; cursor: default; }
.sms-app #smsSendBtn:disabled svg { background: var(--sms-control); opacity: .72; }

[data-theme="dark"] .sms-app {
  --sms-control: #2c2c2e;
  --sms-other: #2c2c2e;
  --sms-self-text: #111;
}

[data-theme="dark"] .sms-app .app-header,
[data-theme="dark"] .sms-app .chat-room-header,
[data-theme="dark"] .sms-app .input-area { background: rgba(17, 17, 17, .88) !important; }
[data-theme="dark"] .sms-app #smsMessagesArea .message-wrapper.other .msg-bubble { color: #f7f7f7 !important; }

@media (max-width: 370px) {
  .sms-app .chat-item { min-height: 66px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; }
  .sms-app .chat-avatar { width: 44px; height: 44px; font-size: 16px; }
  .sms-app #smsMessagesArea .msg-bubble { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .sms-app .sms-icon-button:active,
  .sms-app .back-btn:active,
  .sms-app #smsSendBtn:active svg { transform: none; }
}





/* ===== Diary App visual prototype v1 ===== */
.app-icon-wrapper[data-app='diary'] { --icon-symbol: #bb7188; }

.recent-preview-diary { align-items: center; justify-content: center; gap: 9px; }
.recent-preview-diary strong { font-size: 15px; }
.recent-preview-diary small { color: rgba(255,255,255,.58); font-size: 10px; }
.recent-preview-envelope { width: 74px; height: 45px; position: relative; border-radius: 6px; background: #eadbd5; box-shadow: inset 0 0 0 1px rgba(60,38,42,.16), 0 12px 24px rgba(0,0,0,.2); }
.recent-preview-envelope i,
.recent-preview-envelope span { position: absolute; inset: 0; pointer-events: none; }
.recent-preview-envelope i { clip-path: polygon(0 0,50% 58%,100% 0); background: rgba(255,255,255,.42); }
.recent-preview-envelope span { clip-path: polygon(0 100%,50% 43%,100% 100%); background: rgba(190,130,142,.24); }

.diary-app-overlay { background: rgba(18, 14, 15, .2); }
.diary-app-sheet { height: 100%; max-height: none; border-radius: 0; overflow: hidden; color: #342d2d; background:
  radial-gradient(circle at 18% 12%, rgba(220,150,165,.16), transparent 28%),
  linear-gradient(180deg, #f6f0ec 0%, #efe5df 48%, #e9ddd6 100%); }
.diary-app-sheet::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .44; background-image: linear-gradient(rgba(82,54,58,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(82,54,58,.026) 1px, transparent 1px); background-size: 26px 26px, 32px 32px; }
.diary-app-header { position: relative; z-index: 2; background: rgba(248,241,237,.78); border-bottom-color: rgba(128,86,91,.14); backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); }
.diary-app-title span { color: rgba(88,68,70,.56); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.diary-app-title strong { color: #2f2929; font-family: Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif; font-size: 22px; font-weight: 600; letter-spacing: 0; }
.diary-refresh-btn { width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #9d6571; background: rgba(255,255,255,.46); }
.diary-refresh-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.diary-app-content { position: relative; z-index: 1; height: calc(100% - 54px); padding: 14px 16px calc(38px + var(--safe-bottom-inset, 0px)); overflow: hidden; }
.diary-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 2px 0 12px; }
.diary-hero div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.diary-hero span { color: rgba(72,58,60,.48); font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.diary-hero strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #332b2c; font: 600 25px/1.08 Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif; letter-spacing: 0; }
.diary-hero p { max-width: 118px; margin: 0; color: rgba(61,50,51,.58); font-size: 11px; line-height: 1.45; text-align: right; }
.diary-contact-strip { display: flex; gap: 8px; margin: 0 -16px 12px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.diary-contact-strip::-webkit-scrollbar { display: none; }
.diary-contact-chip { min-width: 72px; height: 34px; border: 1px solid rgba(126,88,94,.14); border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; color: rgba(63,48,50,.68); background: rgba(255,255,255,.34); white-space: nowrap; }
.diary-contact-chip span { max-width: 62px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.diary-contact-chip em { min-width: 15px; height: 15px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(165,105,118,.64); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; }
.diary-contact-chip.is-active { color: #2d2425; background: rgba(255,255,255,.7); border-color: rgba(164,103,116,.34); box-shadow: 0 8px 18px rgba(80,50,55,.1); }
.diary-stack { position: relative; height: min(468px, calc(100dvh - 214px)); min-height: 330px; perspective: 1200px; }
.diary-envelope-card { --paper-main: #ead7d6; --paper-side: #d9bfc0; --ink: #3a2f31; position: absolute; left: 50%; top: calc(var(--diary-offset) * 44px); width: min(88%, 318px); height: 154px; transform: translateX(-50%) translateY(calc(var(--diary-offset) * -3px)) scale(calc(1 - var(--diary-offset) * .018)); transform-origin: center top; border: 0; border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 20px 16px; overflow: hidden; color: var(--ink); background:
  linear-gradient(135deg, rgba(255,255,255,.3), transparent 36%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 5px),
  linear-gradient(160deg, var(--paper-main), var(--paper-side)); box-shadow: 0 16px 34px rgba(73,45,50,.19), inset 0 0 0 1px rgba(255,255,255,.34), inset 0 -1px 0 rgba(70,45,48,.08); text-align: left; cursor: pointer; transition: transform 260ms cubic-bezier(.22,.8,.24,1), box-shadow 260ms ease, filter 260ms ease; }
.diary-stack--shifting .diary-envelope-card { transition: top 260ms cubic-bezier(.22,.82,.18,1), transform 260ms cubic-bezier(.22,.82,.18,1); }
.diary-scroll-counter { margin: -2px 0 8px; text-align: center; font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; color: rgba(72,58,60,.46); min-height: 16px; }
.diary-envelope-card:active { transform: translateX(-50%) translateY(calc(var(--diary-offset) * -3px + 3px)) scale(calc(.98 - var(--diary-offset) * .018)); }
.diary-envelope-card:hover { box-shadow: 0 20px 44px rgba(73,45,50,.24), inset 0 0 0 1px rgba(255,255,255,.42); }
.diary-envelope-card.tone-ivory { --paper-main: #efe3d5; --paper-side: #d8c6b7; --ink: #40342d; }
.diary-envelope-card.tone-warm { --paper-main: #f0d8ca; --paper-side: #d9b8a9; --ink: #49342f; }
.diary-envelope-card.tone-mauve { --paper-main: #e6d8e0; --paper-side: #cdb8c7; --ink: #372f37; }
.diary-envelope-card.tone-ash { --paper-main: #e0ded9; --paper-side: #c4c1bb; --ink: #303132; }
.diary-envelope-flap { position: absolute; inset: 0; clip-path: polygon(0 0,50% 48%,100% 0); background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.08)); border-bottom: 1px solid rgba(120,76,82,.16); }
.diary-envelope-card::before,
.diary-envelope-card::after { content: ''; position: absolute; bottom: 0; width: 58%; height: 64%; background: rgba(255,255,255,.16); pointer-events: none; }
.diary-envelope-card::before { left: 0; clip-path: polygon(0 0,100% 100%,0 100%); }
.diary-envelope-card::after { right: 0; clip-path: polygon(100% 0,100% 100%,0 100%); }
.diary-envelope-meta { position: relative; z-index: 1; display: flex; width: 100%; justify-content: space-between; gap: 8px; margin-bottom: auto; color: rgba(48,39,40,.56); font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.diary-envelope-meta i { font-style: normal; }
.diary-envelope-card strong { position: relative; z-index: 1; margin-top: 22px; font: 600 20px/1.1 Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif; letter-spacing: 0; }
.diary-envelope-card small { position: relative; z-index: 1; margin-top: 5px; color: rgba(55,43,45,.62); font-size: 11px; }
.diary-envelope-preview { position: relative; z-index: 1; max-width: 86%; margin-top: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(55,43,45,.56); font-size: 11px; line-height: 1.25; }
.diary-envelope-card.is-opened { filter: saturate(.78) brightness(.98); }
.diary-envelope-card.is-opened .diary-envelope-flap { transform: translateY(-3px) rotateX(18deg); opacity: .66; }
.diary-envelope-card.is-opened::after { opacity: .48; }
.diary-empty-stack { padding: 52px 20px; border: 1px dashed rgba(112,78,84,.28); border-radius: 18px; color: rgba(58,45,48,.56); text-align: center; }

.diary-letter-view { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: calc(42px + var(--safe-top-inset, 0px)) 16px calc(46px + var(--safe-bottom-inset, 0px)); background: rgba(37,29,30,.28); opacity: 0; transition: opacity 240ms ease; }
.diary-letter-view.is-open { opacity: 1; }
.diary-letter-view.is-leaving { opacity: 0; }
.diary-letter-close { position: absolute; top: calc(12px + var(--safe-top-inset, 0px)); right: 14px; z-index: 4; width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #4d3c3e; background: rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(42,28,30,.12); }
.diary-letter-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.diary-unseal-scene { position: absolute; left: 50%; top: 19%; width: 170px; height: 105px; transform: translateX(-50%); pointer-events: none; opacity: 0; }
.diary-open-envelope { position: absolute; inset: 0; border-radius: 12px; background: #dec8c6; box-shadow: 0 18px 36px rgba(36,24,26,.18); transform: translateY(24px) scale(.92); transition: transform 800ms cubic-bezier(.18,.84,.24,1), opacity 800ms ease; }
.diary-open-envelope i { position: absolute; inset: 0; clip-path: polygon(0 0,50% 48%,100% 0); background: rgba(255,255,255,.46); transform-origin: top center; transition: transform 780ms cubic-bezier(.18,.84,.24,1); }
.diary-open-envelope span { position: absolute; inset: auto 0 0; height: 58%; clip-path: polygon(0 100%,50% 10%,100% 100%); background: rgba(188,132,140,.22); }
.diary-letter-view.is-open .diary-unseal-scene { opacity: 1; }
.diary-letter-view.is-open .diary-open-envelope { opacity: .96; transform: translateY(-52px) scale(.72); }
.diary-letter-view.is-open .diary-open-envelope i { transform: rotateX(128deg); }
.diary-paper { position: relative; z-index: 2; width: min(82vw, 292px); aspect-ratio: 3 / 5; max-height: min(76dvh, 486px); display: grid; grid-template-rows: auto auto auto minmax(0,1fr); gap: 12px; padding: clamp(24px, 6.4vw, 32px) clamp(22px, 6vw, 30px); box-sizing: border-box; overflow: hidden; color: #332b2b; background:
  radial-gradient(circle at 85% 10%, rgba(204,142,150,.13), transparent 24%),
  linear-gradient(90deg, rgba(106,75,78,.04) 1px, transparent 1px),
  repeating-linear-gradient(0deg, rgba(60,42,44,.027), rgba(60,42,44,.027) 1px, transparent 1px, transparent 8px),
  linear-gradient(180deg, #fbf5ed, #efe2d8 56%, #eadbd2); background-size: auto, 22px 22px, auto, auto; border-radius: 3px; box-shadow: 0 26px 64px rgba(28,18,20,.28), inset 0 0 0 1px rgba(97,67,72,.12); transform: translateY(44px) scale(.94); opacity: 0; transition: transform 860ms cubic-bezier(.18,.84,.24,1) 140ms, opacity 640ms ease 140ms; }
.diary-letter-view.is-open .diary-paper { transform: translateY(0) scale(1); opacity: 1; }
.diary-paper header { display: flex; justify-content: space-between; gap: 10px; color: rgba(60,48,50,.58); font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.diary-paper header em { font-style: normal; text-align: right; }
.diary-paper-image { width: 44px; height: 44px; justify-self: center; display: grid; place-items: center; margin-top: 3px; border: 1px solid rgba(121,82,88,.18); background: rgba(255,255,255,.36); transform: rotate(-2deg); }
.diary-paper-image i { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, rgba(184,112,126,.55), transparent 34%), linear-gradient(135deg, rgba(120,90,96,.42), rgba(244,232,221,.2)); }
.diary-letter-view.image-photo .diary-paper-image { width: 58px; height: 42px; padding: 5px; box-shadow: 0 7px 16px rgba(80,55,60,.1); }
.diary-letter-view.image-photo .diary-paper-image i { width: 100%; height: 100%; border-radius: 2px; }
.diary-letter-view.image-line .diary-paper-image { width: 54px; height: 34px; border-style: dashed; transform: none; }
.diary-letter-view.image-line .diary-paper-image i { width: 28px; height: 1px; border-radius: 0; background: rgba(98,70,76,.45); box-shadow: 0 8px 0 rgba(98,70,76,.22), 0 -8px 0 rgba(98,70,76,.22); }
.diary-paper h2 { margin: 0; color: #332a2b; text-align: center; font: 600 15px/1.25 Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif; letter-spacing: 0; }
.diary-paper-body { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(9px, 1.5vh, 14px); overflow: hidden; text-align: center; }
.diary-paper-body p { margin: 0; color: rgba(44,36,37,.86); font: 12px/1.72 Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif; letter-spacing: 0; }
.diary-letter-view.font-mono .diary-paper-body p { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 11px; line-height: 1.68; }
.diary-letter-view.font-type .diary-paper-body p { font-family: 'Courier New', 'Songti SC', 'SimSun', monospace; font-size: 11.5px; line-height: 1.72; }
.diary-letter-view.tone-ivory .diary-paper { background: linear-gradient(180deg, #fbf4e8, #efe1cf); }
.diary-letter-view.tone-warm .diary-paper { background: linear-gradient(180deg, #fbefe8, #ead3c6); }
.diary-letter-view.tone-mauve .diary-paper { background: linear-gradient(180deg, #f3ecf1, #e2d4dd); }
.diary-letter-view.tone-ash .diary-paper { background: linear-gradient(180deg, #f2f0eb, #dedbd3); }

@media (max-width: 370px), (max-height: 650px) {
  .diary-app-content { padding-left: 12px; padding-right: 12px; }
  .diary-hero strong { font-size: 22px; }
  .diary-hero p { max-width: 106px; font-size: 10px; }
  .diary-stack { min-height: 304px; height: min(418px, calc(100dvh - 198px)); }
  .diary-envelope-card { width: min(92%, 294px); height: 136px; top: calc(var(--diary-offset) * 37px); padding: 17px 17px 14px; }
  .diary-envelope-card strong { margin-top: 16px; font-size: 18px; }
  .diary-envelope-preview { max-width: 92%; font-size: 10px; }
  .diary-paper { width: min(82vw, 268px); padding: 21px 20px; gap: 9px; }
  .diary-paper-body p { font-size: 11px; line-height: 1.62; }
  .diary-paper-image { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .diary-envelope-card,
  .diary-letter-view,
  .diary-open-envelope,
  .diary-open-envelope i,
  .diary-paper { transition-duration: 120ms !important; transform: none !important; }
  .diary-unseal-scene { display: none; }
}

/* ===== Diary App v2 refinements ===== */
.diary-stack { perspective: none; }
.diary-envelope-card { top: calc(var(--diary-offset) * 42px); transform: translateX(-50%); border-radius: 10px; }
.diary-envelope-card:active { transform: translateX(-50%) translateY(3px); }
.diary-envelope-card:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 20px 44px rgba(73,45,50,.24), inset 0 0 0 1px rgba(255,255,255,.42); }
.diary-envelope-card.is-opened .diary-envelope-flap { transform: translateY(-2px); opacity: .62; }
.diary-paper { grid-template-rows: auto auto auto minmax(0,1fr) auto; gap: clamp(8px, 1.45dvh, 12px); background:
  radial-gradient(circle at 88% 12%, rgba(197,137,146,.12), transparent 22%),
  radial-gradient(circle at 14% 86%, rgba(142,103,87,.08), transparent 25%),
  repeating-linear-gradient(90deg, rgba(92,65,58,.026), rgba(92,65,58,.026) 1px, transparent 1px, transparent 19px),
  repeating-linear-gradient(0deg, rgba(74,52,48,.024), rgba(74,52,48,.024) 1px, transparent 1px, transparent 8px),
  linear-gradient(180deg, #fbf3ea 0%, #f2e5db 55%, #ead9cf 100%); box-shadow: 0 26px 64px rgba(28,18,20,.28), inset 0 0 0 1px rgba(97,67,72,.13), inset 0 0 42px rgba(120,82,72,.11); }
.diary-paper::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .3; background-image:
  radial-gradient(circle, rgba(91,66,62,.16) 0 1px, transparent 1.4px),
  radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.5px); background-size: 17px 23px, 29px 31px; background-position: 3px 7px, 11px 13px; mix-blend-mode: multiply; }
.diary-paper::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(91,61,58,.08), transparent 14%, transparent 86%, rgba(91,61,58,.07)); box-shadow: inset 0 0 34px rgba(85,57,54,.1); }
.diary-paper > * { position: relative; z-index: 1; }
.diary-paper-body { align-self: stretch; justify-content: center; gap: clamp(10px, 1.6dvh, 15px); overflow: visible; padding: 2px 0 4px; }
.diary-paper-body.is-turning { animation: diaryPageInkIn 180ms ease both; }
.diary-paper-body p { max-width: 100%; color: rgba(42,34,35,.88); }
.diary-page-controls { align-self: end; min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 14px; color: rgba(58,46,47,.58); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.diary-page-controls button { width: 28px; height: 28px; border: 1px solid rgba(116,83,82,.18); border-radius: 50%; display: grid; place-items: center; padding: 0; color: rgba(65,49,50,.74); background: rgba(255,255,255,.34); font: 20px/1 Georgia, 'Times New Roman', serif; }
.diary-page-controls button:disabled { opacity: .28; }
.diary-page-controls em { font-style: normal; }
.diary-letter-view.tone-ivory .diary-paper { background:
  radial-gradient(circle at 86% 12%, rgba(181,130,95,.1), transparent 22%), repeating-linear-gradient(90deg, rgba(92,65,58,.023), rgba(92,65,58,.023) 1px, transparent 1px, transparent 19px), repeating-linear-gradient(0deg, rgba(74,52,48,.022), rgba(74,52,48,.022) 1px, transparent 1px, transparent 8px), linear-gradient(180deg, #fbf4e8, #efe1cf); }
.diary-letter-view.tone-warm .diary-paper { background:
  radial-gradient(circle at 86% 12%, rgba(192,120,111,.12), transparent 22%), repeating-linear-gradient(90deg, rgba(92,65,58,.023), rgba(92,65,58,.023) 1px, transparent 1px, transparent 19px), repeating-linear-gradient(0deg, rgba(74,52,48,.022), rgba(74,52,48,.022) 1px, transparent 1px, transparent 8px), linear-gradient(180deg, #fbefe8, #ead3c6); }
.diary-letter-view.tone-mauve .diary-paper { background:
  radial-gradient(circle at 86% 12%, rgba(170,115,142,.11), transparent 22%), repeating-linear-gradient(90deg, rgba(92,65,58,.023), rgba(92,65,58,.023) 1px, transparent 1px, transparent 19px), repeating-linear-gradient(0deg, rgba(74,52,48,.022), rgba(74,52,48,.022) 1px, transparent 1px, transparent 8px), linear-gradient(180deg, #f3ecf1, #e2d4dd); }
.diary-letter-view.tone-ash .diary-paper { background:
  radial-gradient(circle at 86% 12%, rgba(115,105,95,.1), transparent 22%), repeating-linear-gradient(90deg, rgba(92,65,58,.023), rgba(92,65,58,.023) 1px, transparent 1px, transparent 19px), repeating-linear-gradient(0deg, rgba(74,52,48,.022), rgba(74,52,48,.022) 1px, transparent 1px, transparent 8px), linear-gradient(180deg, #f2f0eb, #dedbd3); }
@keyframes diaryPageInkIn { from { opacity: .42; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 370px), (max-height: 650px) {
  .diary-envelope-card { top: calc(var(--diary-offset) * 39px); transform: translateX(-50%); }
  .diary-envelope-card:active { transform: translateX(-50%) translateY(3px); }
  .diary-envelope-card:hover { transform: translateX(-50%) translateY(-2px); }
  .diary-paper { grid-template-rows: auto auto auto minmax(0,1fr) auto; padding: 19px 18px 18px; gap: 8px; }
  .diary-paper-body { gap: 9px; padding-bottom: 2px; }
  .diary-page-controls { min-height: 28px; gap: 12px; }
  .diary-page-controls button { width: 26px; height: 26px; font-size: 18px; }
}

/* ===== Diary App v3 layout guards ===== */
.diary-paper header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; }
.diary-paper header span,
.diary-paper header em { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.diary-paper header span { text-align: left; }
.diary-paper header em { text-align: right; }
.diary-paper h2 { overflow-wrap: anywhere; word-break: keep-all; }
.diary-paper-body { overflow: hidden; }
.diary-paper-body p { overflow-wrap: anywhere; word-break: break-word; text-wrap: pretty; }
.diary-page-controls[hidden] { display: none; }

@media (max-width: 370px), (max-height: 650px) {
  .diary-paper header { font-size: 9px; line-height: 1.32; gap: 6px; }
  .diary-paper h2 { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .diary-paper-body.is-turning { animation: none; }
}
/* ===== Diary App v4 envelope interaction ===== */
.diary-app-overlay.is-picking-letter .diary-contact-strip,
.diary-app-overlay.is-picking-letter .diary-hero { opacity: .72; filter: saturate(.82); transition: opacity 360ms ease, filter 360ms ease; }
.diary-app-overlay.is-picking-letter .diary-envelope-card { pointer-events: none; transition-duration: 420ms; transition-timing-function: cubic-bezier(.2,.82,.18,1); }
.diary-app-overlay.is-picking-letter .diary-envelope-card:not(.is-selected) { opacity: .46; filter: saturate(.68) blur(.2px); transform: translateX(-50%) translateY(18px) scale(.982); box-shadow: 0 10px 22px rgba(73,45,50,.11), inset 0 0 0 1px rgba(255,255,255,.28); }
.diary-envelope-card.is-selected { z-index: 24; transform: translateX(-50%) translateY(-34px) scale(1.026); box-shadow: 0 28px 64px rgba(72,45,49,.3), inset 0 0 0 1px rgba(255,255,255,.52), inset 0 -1px 0 rgba(70,45,48,.08); }
.diary-envelope-card.is-selected .diary-envelope-flap { transform: translateY(-7px) rotateX(34deg); transform-origin: top center; opacity: .78; transition: transform 420ms cubic-bezier(.2,.82,.18,1), opacity 420ms ease; }
.diary-envelope-card.is-selected::before,
.diary-envelope-card.is-selected::after { background: rgba(255,255,255,.2); }

.diary-letter-stage { position: relative; width: min(92vw, 360px); height: min(82dvh, 568px); display: grid; place-items: center; perspective: 1200px; }
.diary-letter-stage .diary-unseal-scene { position: absolute; left: 50%; top: auto; bottom: clamp(18px, 4dvh, 34px); z-index: 1; width: min(86vw, 330px); height: clamp(122px, 24dvh, 168px); opacity: 0; transform: translateX(-50%) translateY(60px) scale(.92); transition: transform 1500ms cubic-bezier(.18,.84,.2,1), opacity 920ms ease; }
.diary-letter-stage .diary-open-envelope { inset: 0; overflow: visible; border-radius: 14px 14px 7px 7px; background:
  radial-gradient(circle at 18% 20%, rgba(255,255,255,.34), transparent 26%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.055), rgba(255,255,255,.055) 1px, transparent 1px, transparent 7px),
  linear-gradient(180deg, rgba(247,242,232,.92), rgba(226,213,202,.72)); box-shadow: 0 24px 46px rgba(40,27,28,.16), inset 0 0 0 1px rgba(255,255,255,.52), inset 0 -18px 34px rgba(126,92,84,.08); transform: translateY(32px) scale(.96); transition: transform 1500ms cubic-bezier(.18,.84,.2,1), opacity 1000ms ease; }
.diary-letter-stage .diary-open-envelope i { inset: -64% 0 auto; height: 96%; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 16px 16px 0 0; background:
  radial-gradient(circle at 48% 30%, rgba(255,255,255,.36), transparent 32%),
  linear-gradient(180deg, rgba(252,249,242,.88), rgba(218,204,194,.58)); border-bottom: 1px solid rgba(122,91,83,.12); transform: rotateX(0deg); transform-origin: bottom center; transition: transform 1180ms cubic-bezier(.18,.84,.2,1) 160ms, opacity 900ms ease; }
.diary-letter-stage .diary-open-envelope b { position: absolute; left: 50%; bottom: 28%; width: 88%; height: 78%; transform: translateX(-50%); clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(188,142,132,.14)); pointer-events: none; }
.diary-letter-stage .diary-open-envelope span { height: 64%; clip-path: polygon(0 100%, 50% 10%, 100% 100%); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(174,124,116,.18)); }
.diary-letter-view.is-open .diary-letter-stage .diary-unseal-scene { opacity: .7; transform: translateX(-50%) translateY(12px) scale(1); }
.diary-letter-view.is-open .diary-letter-stage .diary-open-envelope { opacity: .92; transform: translateY(0) scale(1); }
.diary-letter-view.is-open .diary-letter-stage .diary-open-envelope i { transform: rotateX(126deg); opacity: .68; }

.diary-letter-stage .diary-paper { z-index: 3; clip-path: polygon(1% 0, 28% .45%, 50% 0, 72% .38%, 99% 0, 100% 24%, 99.45% 48%, 100% 72%, 99% 100%, 68% 99.55%, 44% 100%, 21% 99.45%, 0 100%, .5% 72%, 0 45%, .45% 18%); background:
  radial-gradient(circle at 86% 14%, rgba(191,137,128,.1), transparent 22%),
  radial-gradient(circle at 12% 82%, rgba(116,92,80,.08), transparent 26%),
  repeating-linear-gradient(105deg, rgba(255,255,255,.18), rgba(255,255,255,.18) 1px, transparent 1px, transparent 12px),
  repeating-linear-gradient(0deg, rgba(70,54,49,.025), rgba(70,54,49,.025) 1px, transparent 1px, transparent 7px),
  linear-gradient(180deg, #fbf6ed 0%, #f0e5d9 54%, #e8d8cc 100%); box-shadow: 0 32px 72px rgba(29,19,20,.3), inset 0 0 0 1px rgba(118,85,77,.12), inset 0 0 54px rgba(118,82,72,.12); transform: translateY(78px) scale(.93) rotateX(4deg); transform-origin: center bottom; transition: transform 1500ms cubic-bezier(.18,.84,.2,1) 180ms, opacity 1120ms ease 180ms; }
.diary-letter-view.is-open .diary-letter-stage .diary-paper { transform: translateY(-18px) scale(1) rotateX(0deg); }
.diary-letter-stage .diary-paper::before { opacity: .38; background-image:
  radial-gradient(circle, rgba(82,64,60,.16) 0 1px, transparent 1.25px),
  radial-gradient(circle, rgba(255,255,255,.56) 0 1px, transparent 1.45px),
  linear-gradient(12deg, transparent 0 16%, rgba(92,73,66,.035) 16.2% 16.8%, transparent 17% 100%); background-size: 16px 21px, 28px 32px, 100% 100%; background-position: 2px 6px, 9px 13px, 0 0; }
.diary-letter-stage .diary-paper::after { background:
  linear-gradient(90deg, rgba(88,64,57,.09), transparent 13%, transparent 87%, rgba(88,64,57,.08)),
  radial-gradient(ellipse at 50% 8%, rgba(255,255,255,.22), transparent 42%); box-shadow: inset 0 0 36px rgba(86,61,54,.13); }
.diary-letter-stage .diary-paper-body p { color: rgba(42,34,33,.9); text-shadow: 0 .35px 0 rgba(255,255,255,.28); }
.diary-letter-view.tone-ivory .diary-letter-stage .diary-paper,
.diary-letter-view.tone-warm .diary-letter-stage .diary-paper,
.diary-letter-view.tone-mauve .diary-letter-stage .diary-paper,
.diary-letter-view.tone-ash .diary-letter-stage .diary-paper { background:
  radial-gradient(circle at 86% 14%, rgba(191,137,128,.1), transparent 22%),
  radial-gradient(circle at 12% 82%, rgba(116,92,80,.08), transparent 26%),
  repeating-linear-gradient(105deg, rgba(255,255,255,.18), rgba(255,255,255,.18) 1px, transparent 1px, transparent 12px),
  repeating-linear-gradient(0deg, rgba(70,54,49,.025), rgba(70,54,49,.025) 1px, transparent 1px, transparent 7px),
  linear-gradient(180deg, #fbf6ed 0%, #f0e5d9 54%, #e8d8cc 100%); }

@media (max-width: 370px), (max-height: 650px) {
  .diary-letter-stage { height: min(82dvh, 510px); }
  .diary-letter-stage .diary-unseal-scene { bottom: 12px; width: min(88vw, 300px); height: 116px; }
  .diary-letter-view.is-open .diary-letter-stage .diary-paper { transform: translateY(-12px) scale(1) rotateX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .diary-app-overlay.is-picking-letter .diary-envelope-card,
  .diary-envelope-card.is-selected,
  .diary-letter-stage .diary-unseal-scene,
  .diary-letter-stage .diary-open-envelope,
  .diary-letter-stage .diary-open-envelope i,
  .diary-letter-stage .diary-paper { transition-duration: 120ms !important; transform: none !important; }
  .diary-app-overlay.is-picking-letter .diary-envelope-card:not(.is-selected) { opacity: .58; filter: saturate(.72); }
  .diary-letter-stage .diary-unseal-scene { opacity: .5; }
}
/* ===== Diary App v5 paper picker ===== */
.diary-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.diary-style-btn { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid rgba(126,88,94,.13); border-radius: 50%; display: grid; place-items: center; color: #94616d; background: rgba(255,255,255,.48); box-shadow: 0 8px 18px rgba(80,50,55,.09), inset 0 1px rgba(255,255,255,.62); }
.diary-style-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.diary-style-panel { position: absolute; left: 12px; right: 12px; bottom: calc(48px + var(--safe-bottom-inset, 0px)); z-index: 35; max-height: min(52dvh, 360px); overflow: auto; padding: 14px; border: 1px solid rgba(115,82,82,.12); border-radius: 8px; color: #342d2d; background: rgba(249,244,238,.9); backdrop-filter: blur(22px) saturate(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.08); box-shadow: 0 24px 58px rgba(45,30,32,.2), inset 0 1px rgba(255,255,255,.68); animation: diaryPanelIn 180ms ease both; }
.diary-style-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.diary-style-head span,
.diary-style-section > span { color: rgba(70,54,56,.52); font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.diary-style-head strong { display: block; margin-top: 3px; color: #302829; font: 600 18px/1.1 Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif; }
.diary-style-head button { width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; color: rgba(57,45,46,.7); background: rgba(255,255,255,.54); }
.diary-style-head svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.diary-style-section { display: grid; gap: 8px; margin-top: 10px; }
.diary-paper-kind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.diary-paper-kind-grid button { min-width: 0; min-height: 54px; border: 1px solid rgba(120,84,84,.12); border-radius: 8px; display: grid; gap: 3px; place-content: center; padding: 8px 5px; color: rgba(57,45,46,.72); background: rgba(255,255,255,.43); }
.diary-paper-kind-grid button strong { font-size: 13px; line-height: 1; }
.diary-paper-kind-grid button em { color: rgba(57,45,46,.48); font-size: 10px; font-style: normal; white-space: nowrap; }
.diary-paper-kind-grid button.is-active { color: #33292a; border-color: rgba(150,96,106,.32); background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 18px rgba(80,50,55,.08); }
.diary-color-grid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.diary-color-grid button,
.diary-color-custom { width: 32px; height: 32px; border: 1px solid rgba(88,62,62,.13); border-radius: 50%; display: grid; place-items: center; padding: 0; background: rgba(255,255,255,.48); box-shadow: inset 0 1px rgba(255,255,255,.74); }
.diary-color-grid button::before,
.diary-color-custom i { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(60,42,42,.12); }
.diary-color-grid button.is-active { outline: 2px solid rgba(150,96,106,.44); outline-offset: 2px; }
.diary-color-custom { position: relative; overflow: hidden; }
.diary-color-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.diary-style-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.diary-style-actions button { border: 1px solid rgba(120,84,84,.12); border-radius: 999px; padding: 8px 11px; color: rgba(57,45,46,.7); background: rgba(255,255,255,.48); font-size: 12px; }
.diary-envelope-card.paper-water { background: linear-gradient(135deg, rgba(255,255,255,.32), transparent 34%), radial-gradient(circle at 80% 22%, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 28%, transparent), transparent 30%), linear-gradient(160deg, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 52%, #f8f1ea), var(--paper-side)); }
.diary-envelope-card.paper-magnetic { background: radial-gradient(circle at 24% 22%, rgba(68,58,58,.1) 0 1px, transparent 1.5px), radial-gradient(circle at 76% 30%, rgba(68,58,58,.08) 0 1px, transparent 1.7px), linear-gradient(160deg, color-mix(in srgb, var(--diary-paper-color, #e6d7df) 48%, #f8f1ea), var(--paper-side)); background-size: auto, 13px 11px, auto; }
.diary-letter-view.paper-aged .diary-letter-stage .diary-paper { background: radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--diary-paper-color, #ead9cf) 34%, transparent), transparent 22%), radial-gradient(circle at 12% 82%, rgba(116,92,80,.08), transparent 26%), repeating-linear-gradient(105deg, rgba(255,255,255,.18), rgba(255,255,255,.18) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(0deg, rgba(70,54,49,.025), rgba(70,54,49,.025) 1px, transparent 1px, transparent 7px), linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #ead9cf) 26%, #fbf6ed), #f0e5d9 54%, #e8d8cc 100%); }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper { background: radial-gradient(ellipse at 24% 18%, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 30%, transparent), transparent 34%), radial-gradient(ellipse at 76% 78%, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 22%, transparent), transparent 38%), repeating-radial-gradient(ellipse at 42% 38%, rgba(118,124,114,.045) 0 2px, transparent 3px 15px), repeating-linear-gradient(110deg, rgba(84,99,93,.035), rgba(84,99,93,.035) 1px, transparent 1px, transparent 18px), linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 22%, #fbf7ef), #eef0e8 55%, #e3dad0 100%); }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::before { opacity: .42; background-image: radial-gradient(ellipse at 18% 20%, rgba(90,116,108,.16), transparent 22%), radial-gradient(ellipse at 78% 64%, rgba(90,116,108,.1), transparent 26%), repeating-linear-gradient(96deg, transparent 0 15px, rgba(91,111,103,.055) 16px 17px, transparent 18px 32px); background-size: 120% 120%, 130% 130%, 58px 100%; animation: diaryWaterDrift 15s ease-in-out infinite alternate; }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::after { background: linear-gradient(90deg, rgba(74,91,83,.1), transparent 16%, transparent 84%, rgba(74,91,83,.09)), radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.26), transparent 44%); box-shadow: inset 0 0 40px rgba(75,91,83,.14); }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper { background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--diary-paper-color, #e6d7df) 24%, transparent), transparent 28%), radial-gradient(circle at 76% 72%, rgba(80,70,75,.08), transparent 32%), repeating-linear-gradient(0deg, rgba(70,54,49,.018), rgba(70,54,49,.018) 1px, transparent 1px, transparent 7px), linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #e6d7df) 22%, #fbf5ed), #eee4dc 56%, #e6d8cf 100%); }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::before { opacity: .36; background-image: radial-gradient(circle, rgba(42,42,43,.34) 0 .7px, transparent 1.15px), radial-gradient(circle, rgba(42,42,43,.18) 0 1px, transparent 1.45px), radial-gradient(ellipse at 50% 50%, rgba(70,62,67,.1), transparent 36%); background-size: 11px 13px, 21px 19px, 100% 100%; background-position: 0 0, 7px 5px, 0 0; animation: diaryMagneticDust 12s ease-in-out infinite alternate; }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::after { background: linear-gradient(90deg, rgba(74,65,68,.09), transparent 14%, transparent 86%, rgba(74,65,68,.08)), radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.2), transparent 42%); box-shadow: inset 0 0 38px rgba(72,62,65,.13); }
@keyframes diaryPanelIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes diaryWaterDrift { from { background-position: 0 0, 16px 12px, 0 0; } to { background-position: 12px 18px, 0 4px, 18px 0; } }
@keyframes diaryMagneticDust { from { background-position: 0 0, 7px 5px, 0 0; filter: contrast(1); } to { background-position: 5px 8px, 1px 12px, 0 0; filter: contrast(1.08); } }

@media (max-width: 370px), (max-height: 650px) {
  .diary-style-panel { left: 10px; right: 10px; bottom: calc(42px + var(--safe-bottom-inset, 0px)); max-height: min(58dvh, 330px); padding: 12px; }
  .diary-paper-kind-grid { gap: 5px; }
  .diary-paper-kind-grid button { min-height: 48px; padding: 7px 4px; }
  .diary-paper-kind-grid button em { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .diary-style-panel { animation: none; }
  .diary-letter-view.paper-water .diary-letter-stage .diary-paper::before,
  .diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::before { animation: none; }
}
/* ===== Diary App v6 animated paper backgrounds ===== */
.diary-letter-view.paper-water .diary-letter-stage .diary-paper { isolation: isolate; }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::before { opacity: .54; background-image:
  radial-gradient(ellipse at 20% 16%, rgba(74,112,104,.22), transparent 24%),
  radial-gradient(ellipse at 76% 68%, rgba(78,120,112,.16), transparent 28%),
  repeating-radial-gradient(ellipse at 48% 44%, rgba(70,105,98,.08) 0 1px, transparent 2px 13px),
  repeating-linear-gradient(104deg, transparent 0 12px, rgba(84,115,107,.075) 13px 14px, transparent 15px 30px); background-size: 130% 120%, 140% 130%, 76px 58px, 70px 100%; animation: diaryWaterCurrent 7.5s cubic-bezier(.45,0,.55,1) infinite alternate; }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::after { opacity: .9; background:
  radial-gradient(ellipse at 30% 26%, rgba(255,255,255,.26), transparent 18%),
  radial-gradient(ellipse at 68% 72%, rgba(82,112,103,.13), transparent 24%),
  linear-gradient(90deg, rgba(74,91,83,.12), transparent 18%, transparent 82%, rgba(74,91,83,.1)); box-shadow: inset 0 0 42px rgba(75,91,83,.15); animation: diaryWaterRipple 5.8s ease-in-out infinite alternate; }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper { isolation: isolate; }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::before { opacity: .5; background-image:
  radial-gradient(circle, rgba(33,33,34,.44) 0 .75px, transparent 1.15px),
  radial-gradient(circle, rgba(33,33,34,.28) 0 1px, transparent 1.55px),
  radial-gradient(ellipse at 34% 38%, rgba(58,52,56,.18), transparent 30%),
  radial-gradient(ellipse at 70% 62%, rgba(58,52,56,.14), transparent 28%); background-size: 10px 12px, 18px 20px, 100% 100%, 100% 100%; background-position: 0 0, 7px 5px, 0 0, 0 0; animation: diaryMagneticCluster 5.2s cubic-bezier(.55,0,.2,1) infinite alternate; }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::after { opacity: .72; background:
  repeating-conic-gradient(from 18deg at 50% 48%, transparent 0 12deg, rgba(38,38,39,.055) 14deg 16deg, transparent 18deg 34deg),
  radial-gradient(ellipse at 52% 50%, rgba(52,47,50,.13), transparent 36%),
  linear-gradient(90deg, rgba(74,65,68,.1), transparent 14%, transparent 86%, rgba(74,65,68,.08)); box-shadow: inset 0 0 38px rgba(72,62,65,.13); animation: diaryMagneticField 6.4s ease-in-out infinite alternate; }
.diary-paper-kind-grid button[data-paper-kind="water"] { background:
  radial-gradient(ellipse at 30% 30%, rgba(120,160,151,.18), transparent 36%),
  repeating-radial-gradient(ellipse at 52% 44%, rgba(90,120,112,.12) 0 1px, transparent 2px 10px),
  rgba(255,255,255,.5); }
.diary-paper-kind-grid button[data-paper-kind="magnetic"] { background:
  radial-gradient(circle, rgba(40,40,42,.18) 0 1px, transparent 1.6px),
  radial-gradient(ellipse at 50% 50%, rgba(70,62,66,.14), transparent 42%),
  rgba(255,255,255,.5); background-size: 10px 10px, auto, auto; }
@keyframes diaryWaterCurrent { 0% { background-position: 0 0, 20px 12px, 0 0, 0 0; filter: saturate(1) contrast(1); } 45% { background-position: 18px 10px, 4px 28px, 16px 12px, 24px 0; filter: saturate(1.08) contrast(1.04); } 100% { background-position: 34px 22px, -10px 40px, 34px 20px, 46px 0; filter: saturate(1.04) contrast(1.02); } }
@keyframes diaryWaterRipple { 0% { transform: translate3d(-6px, 4px, 0) scale(1); opacity: .62; } 50% { transform: translate3d(8px, -7px, 0) scale(1.018); opacity: .88; } 100% { transform: translate3d(2px, 9px, 0) scale(1.01); opacity: .7; } }
@keyframes diaryMagneticCluster { 0% { background-position: 0 0, 7px 5px, -8px -4px, 10px 8px; filter: contrast(1) saturate(.9); } 38% { background-position: 8px 14px, 1px 18px, 10px 6px, -6px -4px; filter: contrast(1.26) saturate(.75); } 100% { background-position: 15px 3px, 12px -2px, 16px 12px, -12px 4px; filter: contrast(1.08) saturate(.85); } }
@keyframes diaryMagneticField { 0% { transform: rotate(-1deg) scale(1.01); opacity: .48; filter: contrast(1); } 50% { transform: rotate(1.5deg) scale(1.035); opacity: .78; filter: contrast(1.18); } 100% { transform: rotate(-.5deg) scale(1.018); opacity: .58; filter: contrast(1.06); } }
/* ===== Diary App v7 softer animated paper backgrounds ===== */
.diary-letter-view.paper-water .diary-letter-stage .diary-paper { background: radial-gradient(ellipse at 18% 14%, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 24%, transparent), transparent 34%), radial-gradient(ellipse at 82% 72%, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 18%, transparent), transparent 38%), linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 20%, #fbf8f1), #eef0e8 56%, #e4ddd4 100%); }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::before { opacity: .46; background-image:
  radial-gradient(ellipse 72% 26% at 20% 18%, rgba(88,122,113,.16), transparent 68%),
  radial-gradient(ellipse 64% 22% at 82% 46%, rgba(88,122,113,.11), transparent 70%),
  radial-gradient(ellipse 58% 20% at 34% 84%, rgba(255,255,255,.22), transparent 72%),
  linear-gradient(112deg, transparent 0 24%, rgba(77,105,98,.045) 34%, transparent 48% 100%); background-size: 118% 112%, 126% 118%, 112% 106%, 150% 100%; background-position: -12px -8px, 18px 20px, 8px 12px, -28px 0; filter: blur(.2px) saturate(.92); animation: diaryWaterSoak 16s ease-in-out infinite alternate; }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::after { opacity: .62; background:
  linear-gradient(90deg, rgba(74,91,83,.11), transparent 18%, transparent 82%, rgba(74,91,83,.09)),
  radial-gradient(ellipse 86% 18% at 50% 6%, rgba(255,255,255,.24), transparent 72%),
  radial-gradient(ellipse 92% 12% at 52% 98%, rgba(85,103,96,.08), transparent 70%); box-shadow: inset 0 0 42px rgba(75,91,83,.13); animation: diaryWaterBreath 12s ease-in-out infinite alternate; }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::before { opacity: .44; background-image:
  radial-gradient(circle at 9% 17%, rgba(34,34,35,.24) 0 .7px, transparent 1.25px),
  radial-gradient(circle at 17% 64%, rgba(34,34,35,.2) 0 .65px, transparent 1.2px),
  radial-gradient(circle at 26% 38%, rgba(34,34,35,.3) 0 .75px, transparent 1.35px),
  radial-gradient(circle at 39% 81%, rgba(34,34,35,.18) 0 .58px, transparent 1.15px),
  radial-gradient(circle at 48% 22%, rgba(34,34,35,.26) 0 .7px, transparent 1.3px),
  radial-gradient(circle at 61% 56%, rgba(34,34,35,.32) 0 .78px, transparent 1.36px),
  radial-gradient(circle at 73% 31%, rgba(34,34,35,.2) 0 .62px, transparent 1.2px),
  radial-gradient(circle at 86% 74%, rgba(34,34,35,.24) 0 .68px, transparent 1.26px),
  radial-gradient(ellipse 34% 18% at 28% 46%, rgba(52,48,51,.13), transparent 72%),
  radial-gradient(ellipse 28% 16% at 70% 62%, rgba(52,48,51,.11), transparent 74%); background-size: 86px 112px, 132px 94px, 118px 156px, 96px 126px, 144px 104px, 104px 148px, 128px 118px, 112px 136px, 100% 100%, 100% 100%; background-position: 0 0, 32px 18px, -18px 42px, 20px -24px, -36px 6px, 16px 28px, 44px -10px, -28px 36px, -10px 0, 12px 18px; filter: contrast(1.08) saturate(.7); animation: diaryMagneticMist 10s cubic-bezier(.5,0,.2,1) infinite alternate; }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::after { opacity: .54; background:
  radial-gradient(ellipse 42% 12% at 24% 36%, rgba(38,38,39,.09), transparent 72%),
  radial-gradient(ellipse 34% 10% at 76% 58%, rgba(38,38,39,.075), transparent 74%),
  radial-gradient(ellipse 72% 28% at 52% 50%, rgba(52,47,50,.08), transparent 68%),
  linear-gradient(90deg, rgba(74,65,68,.09), transparent 14%, transparent 86%, rgba(74,65,68,.075)); box-shadow: inset 0 0 38px rgba(72,62,65,.12); animation: diaryMagneticGather 11.5s ease-in-out infinite alternate; }
.diary-paper-kind-grid button[data-paper-kind="water"] { background:
  radial-gradient(ellipse 70% 24% at 22% 25%, rgba(120,160,151,.16), transparent 68%),
  radial-gradient(ellipse 58% 20% at 78% 68%, rgba(120,160,151,.1), transparent 72%),
  rgba(255,255,255,.5); }
.diary-paper-kind-grid button[data-paper-kind="magnetic"] { background:
  radial-gradient(circle at 18% 28%, rgba(40,40,42,.2) 0 1px, transparent 1.5px),
  radial-gradient(circle at 44% 68%, rgba(40,40,42,.16) 0 .8px, transparent 1.3px),
  radial-gradient(circle at 76% 38%, rgba(40,40,42,.18) 0 .9px, transparent 1.4px),
  radial-gradient(ellipse at 52% 54%, rgba(70,62,66,.13), transparent 46%),
  rgba(255,255,255,.5); }
@keyframes diaryWaterSoak { 0% { background-position: -12px -8px, 18px 20px, 8px 12px, -28px 0; opacity: .38; filter: blur(.2px) saturate(.9); } 48% { background-position: 4px 8px, 4px 28px, 16px 4px, 8px 0; opacity: .5; filter: blur(.45px) saturate(.96); } 100% { background-position: 18px 16px, -10px 10px, 2px 18px, 26px 0; opacity: .42; filter: blur(.25px) saturate(.92); } }
@keyframes diaryWaterBreath { 0% { transform: translate3d(-3px, 2px, 0) scale(1); opacity: .5; } 50% { transform: translate3d(4px, -3px, 0) scale(1.01); opacity: .66; } 100% { transform: translate3d(1px, 4px, 0) scale(1.006); opacity: .56; } }
@keyframes diaryMagneticMist { 0% { background-position: 0 0, 32px 18px, -18px 42px, 20px -24px, -36px 6px, 16px 28px, 44px -10px, -28px 36px, -10px 0, 12px 18px; filter: contrast(1.02) saturate(.68); } 42% { background-position: 8px 12px, 24px 5px, -2px 34px, 34px -10px, -18px 22px, 3px 14px, 30px 4px, -12px 24px, 4px 6px, -2px 8px; filter: contrast(1.18) saturate(.62); } 100% { background-position: 18px 4px, 14px 28px, 10px 48px, 26px -2px, -28px 12px, 24px 5px, 54px 12px, -20px 16px, 10px -2px, -12px 20px; filter: contrast(1.08) saturate(.66); } }
@keyframes diaryMagneticGather { 0% { transform: translate3d(-2px, 1px, 0) scale(1.01); opacity: .42; } 52% { transform: translate3d(3px, -2px, 0) scale(1.025); opacity: .6; } 100% { transform: translate3d(1px, 3px, 0) scale(1.012); opacity: .48; } }
/* ===== Diary App v8 rain bloom and time aging ===== */
.diary-envelope-card.age-settled { filter: sepia(calc(var(--diary-age, 0) * .08)) saturate(.94) brightness(.99); }
.diary-envelope-card.age-aged,
.diary-envelope-card.age-faded { filter: sepia(calc(var(--diary-age, 0) * .18)) saturate(.82) brightness(.97); }
.diary-envelope-card.is-unread-aged { box-shadow: 0 18px 38px rgba(73,45,50,.2), inset 0 0 0 1px rgba(118,88,58,.18), inset 0 -18px 34px rgba(145,106,63,.08); }
.diary-envelope-card.age-faded .diary-envelope-preview,
.diary-envelope-card.age-faded small { color: rgba(82,65,48,.5); }
.diary-letter-view.age-settled .diary-paper { filter: sepia(calc(var(--diary-age, 0) * .08)) saturate(.96) brightness(.995); }
.diary-letter-view.age-aged .diary-paper,
.diary-letter-view.age-faded .diary-paper { filter: sepia(calc(var(--diary-age, 0) * .24)) saturate(calc(1 - var(--diary-age, 0) * .16)) brightness(calc(1 - var(--diary-age, 0) * .025)); box-shadow: 0 26px 64px rgba(28,18,20,.28), inset 0 0 0 1px rgba(123,87,58,.16), inset 0 0 48px rgba(150,109,58, calc(var(--diary-age, 0) * .15)); }
.diary-letter-view.age-aged .diary-paper-body p,
.diary-letter-view.age-faded .diary-paper-body p { color: rgba(55,43,34, calc(.9 - var(--diary-age, 0) * .14)); }
.diary-letter-view.age-faded .diary-paper header,
.diary-letter-view.age-faded .diary-paper h2,
.diary-letter-view.age-faded .diary-paper-image { opacity: .88; }
.diary-letter-view.age-faded .diary-paper-image { filter: saturate(.68) sepia(.16); }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper { background:
  radial-gradient(ellipse at 12% 8%, rgba(255,255,255,.28), transparent 30%),
  radial-gradient(ellipse at 88% 88%, rgba(120,96,62, calc(var(--diary-age, 0) * .09)), transparent 34%),
  linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 18%, #fbf7ef), color-mix(in srgb, var(--diary-paper-color, #d8e4df) 12%, #ece8dd) 58%, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 10%, #e2d7c7)); }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::before { opacity: .55; background-image:
  radial-gradient(circle at 30% 28%, rgba(82,112,104,.18) 0 2.5%, rgba(82,112,104,.105) 10%, rgba(82,112,104,.045) 20%, transparent 34%),
  radial-gradient(circle at 68% 46%, rgba(80,108,100,.14) 0 2%, rgba(80,108,100,.078) 11%, rgba(80,108,100,.035) 22%, transparent 35%),
  radial-gradient(circle at 46% 76%, rgba(82,112,104,.12) 0 1.8%, rgba(82,112,104,.065) 9%, rgba(82,112,104,.028) 19%, transparent 31%),
  linear-gradient(178deg, transparent 0 32%, rgba(75,101,94,.05) 41%, transparent 54% 100%); background-size: 96% 96%, 104% 104%, 98% 98%, 100% 130%; background-position: 0 0, 6px 10px, -8px 4px, 0 -28px; filter: blur(.35px) saturate(.9); animation: diaryRainBloom 15s ease-in-out infinite; }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::after { opacity: .58; background:
  radial-gradient(ellipse 22% 54% at 33% 34%, rgba(255,255,255,.18), transparent 68%),
  radial-gradient(ellipse 16% 46% at 70% 52%, rgba(255,255,255,.12), transparent 72%),
  linear-gradient(90deg, rgba(74,91,83,.1), transparent 18%, transparent 82%, rgba(74,91,83,.08)),
  radial-gradient(ellipse 90% 12% at 50% 100%, rgba(112,89,54, calc(var(--diary-age, 0) * .1)), transparent 72%); box-shadow: inset 0 0 42px rgba(75,91,83,.12); animation: diaryRainTrace 13s ease-in-out infinite alternate; }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper { background:
  radial-gradient(ellipse at 20% 14%, color-mix(in srgb, var(--diary-paper-color, #e6d7df) 18%, transparent), transparent 34%),
  radial-gradient(ellipse at 76% 72%, rgba(104,82,76,.06), transparent 38%),
  linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #e6d7df) 18%, #fbf5ed), #eee5dc 56%, #e4d6ca 100%); }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::before { opacity: .2; background-image:
  radial-gradient(ellipse 46% 12% at 30% 35%, rgba(68,58,55,.06), transparent 74%),
  radial-gradient(ellipse 38% 10% at 72% 62%, rgba(68,58,55,.05), transparent 76%); background-size: 100% 100%; background-position: 0 0; filter: none; animation: none !important; }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::after { opacity: .42; background:
  linear-gradient(90deg, rgba(74,65,68,.075), transparent 14%, transparent 86%, rgba(74,65,68,.06)),
  radial-gradient(ellipse 90% 12% at 50% 100%, rgba(112,89,54, calc(var(--diary-age, 0) * .08)), transparent 72%); box-shadow: inset 0 0 36px rgba(72,62,65,.1); animation: none !important; transform: none !important; }
.diary-paper-kind-grid button[data-paper-kind="water"] { background:
  radial-gradient(circle at 34% 36%, rgba(98,132,124,.17) 0 6%, rgba(98,132,124,.08) 18%, transparent 38%),
  radial-gradient(circle at 68% 62%, rgba(98,132,124,.11) 0 5%, rgba(98,132,124,.055) 16%, transparent 34%),
  rgba(255,255,255,.5); }
.diary-paper-kind-grid button[data-paper-kind="magnetic"] { background:
  radial-gradient(ellipse at 26% 34%, rgba(70,62,66,.075), transparent 42%),
  radial-gradient(ellipse at 72% 62%, rgba(70,62,66,.055), transparent 40%),
  rgba(255,255,255,.5); }
@keyframes diaryRainBloom { 0%, 100% { background-size: 94% 94%, 102% 102%, 96% 96%, 100% 130%; background-position: 0 0, 6px 10px, -8px 4px, 0 -28px; opacity: .46; } 36% { background-size: 116% 116%, 110% 110%, 106% 106%, 100% 130%; background-position: -10px -8px, 1px 4px, -3px 1px, 0 -8px; opacity: .6; } 68% { background-size: 124% 124%, 126% 126%, 118% 118%, 100% 130%; background-position: -18px -14px, -8px -4px, 4px -6px, 0 6px; opacity: .5; } }
@keyframes diaryRainTrace { 0% { transform: translate3d(0, -5px, 0) scaleY(.98); opacity: .42; } 54% { transform: translate3d(0, 6px, 0) scaleY(1.018); opacity: .62; } 100% { transform: translate3d(0, 2px, 0) scaleY(1.006); opacity: .52; } }
/* ===== Diary App v9 visible rain stain motion ===== */
.diary-letter-view.paper-water .diary-letter-stage .diary-paper { background:
  radial-gradient(ellipse at 12% 8%, rgba(255,255,255,.3), transparent 30%),
  radial-gradient(ellipse at 88% 88%, rgba(120,96,62,.05), transparent 34%),
  linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 18%, #fbf7ef), color-mix(in srgb, var(--diary-paper-color, #d8e4df) 12%, #ece8dd) 58%, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 10%, #e2d7c7)); }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::before { opacity: .68; background-image:
  radial-gradient(circle at 31% 27%, rgba(76,108,101,.2) 0 2.2%, rgba(76,108,101,.11) 10%, rgba(76,108,101,.045) 22%, transparent 39%),
  radial-gradient(circle at 70% 43%, rgba(78,108,101,.16) 0 1.8%, rgba(78,108,101,.09) 10%, rgba(78,108,101,.038) 23%, transparent 38%),
  radial-gradient(circle at 48% 76%, rgba(78,108,101,.14) 0 1.8%, rgba(78,108,101,.07) 9%, rgba(78,108,101,.032) 22%, transparent 36%); background-size: 82% 82%, 88% 88%, 84% 84%; background-position: 20px 2px, -6px 18px, 10px -6px; filter: blur(.2px) saturate(.92); mix-blend-mode: multiply; animation: diaryRainDropBloom 8.8s ease-in-out infinite; }
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::after { opacity: .7; background:
  linear-gradient(180deg, transparent 0 18%, rgba(78,105,98,.055) 33%, rgba(78,105,98,.025) 50%, transparent 66% 100%),
  radial-gradient(ellipse 16% 52% at 34% 38%, rgba(255,255,255,.2), transparent 70%),
  radial-gradient(ellipse 12% 44% at 70% 54%, rgba(255,255,255,.15), transparent 72%),
  linear-gradient(90deg, rgba(74,91,83,.1), transparent 18%, transparent 82%, rgba(74,91,83,.08)); box-shadow: inset 0 0 42px rgba(75,91,83,.13); animation: diaryRainStreakFall 7.6s ease-in-out infinite alternate; }
.diary-letter-view.age-aged.paper-water .diary-letter-stage .diary-paper,
.diary-letter-view.age-faded.paper-water .diary-letter-stage .diary-paper { background:
  radial-gradient(ellipse at 12% 8%, rgba(255,255,255,.24), transparent 30%),
  radial-gradient(ellipse at 88% 88%, rgba(120,96,62,.08), transparent 34%),
  linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 12%, #f6eedf), #e9dfcf 58%, #ddcdb9 100%); }
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::before,
.diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::after { animation: none !important; transform: none !important; }
.diary-paper-kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.diary-paper-kind-grid button[data-paper-kind="magnetic"] { display: none; }
@keyframes diaryRainDropBloom { 0% { background-size: 66% 66%, 72% 72%, 68% 68%; background-position: 30px -4px, -14px 10px, 16px -12px; opacity: .28; } 24% { background-size: 84% 84%, 90% 90%, 82% 82%; background-position: 22px 2px, -8px 18px, 10px -4px; opacity: .72; } 62% { background-size: 118% 118%, 124% 124%, 112% 112%; background-position: 0 -16px, -28px 0, -4px -22px; opacity: .52; } 100% { background-size: 132% 132%, 136% 136%, 126% 126%; background-position: -16px -28px, -36px -14px, -16px -30px; opacity: .34; } }
@keyframes diaryRainStreakFall { 0% { transform: translate3d(0, -12px, 0) scaleY(.94); opacity: .42; } 45% { transform: translate3d(0, 3px, 0) scaleY(1.04); opacity: .72; } 100% { transform: translate3d(0, 14px, 0) scaleY(1.08); opacity: .52; } }
/* ===== Diary App v10 opening rain stain ===== */
.diary-letter-view.paper-water .diary-letter-stage .diary-paper {
  --diary-water-soft: rgba(84, 108, 124, .17);
  --diary-water-mid: rgba(72, 96, 112, .24);
  --diary-water-deep: rgba(58, 82, 98, .34);
  background:
    radial-gradient(ellipse at 12% 8%, rgba(255,255,255,.3), transparent 30%),
    radial-gradient(ellipse at 88% 88%, rgba(120,96,62,.05), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 18%, #fbf7ef), color-mix(in srgb, var(--diary-paper-color, #d8e4df) 12%, #ece8dd) 58%, color-mix(in srgb, var(--diary-paper-color, #d8e4df) 10%, #e2d7c7));
}
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::before {
  opacity: .28;
  background:
    radial-gradient(ellipse 42% 16% at 34% 38%, var(--diary-water-soft), transparent 72%),
    radial-gradient(ellipse 30% 12% at 69% 56%, rgba(84,108,124,.11), transparent 74%),
    linear-gradient(180deg, transparent 0 25%, rgba(84,108,124,.055) 42%, transparent 63% 100%);
  background-size: 100% 100%;
  background-position: 0 0;
  mix-blend-mode: multiply;
  filter: blur(.15px);
  animation: none;
  transform: none;
}
.diary-letter-view.paper-water .diary-letter-stage .diary-paper::after {
  opacity: .18;
  background:
    radial-gradient(circle at 35% 39%, rgba(72,96,112,.14) 0 8%, rgba(72,96,112,.07) 17%, transparent 34%),
    radial-gradient(circle at 68% 57%, rgba(72,96,112,.09) 0 7%, rgba(72,96,112,.045) 16%, transparent 32%),
    linear-gradient(90deg, rgba(74,91,83,.085), transparent 18%, transparent 82%, rgba(74,91,83,.07));
  box-shadow: inset 0 0 42px rgba(75,91,83,.12);
  mix-blend-mode: multiply;
  animation: none;
  transform: none;
}
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::before {
  background:
    radial-gradient(circle at 35% 5%, rgba(245,250,252,.78) 0 1.8%, var(--diary-water-deep) 2.2%, rgba(72,96,112,.12) 4.8%, transparent 7.5%),
    radial-gradient(ellipse 18% 44% at 35% 23%, rgba(84,108,124,.18), rgba(84,108,124,.075) 34%, transparent 72%),
    radial-gradient(circle at 35% 42%, var(--diary-water-mid) 0 4%, rgba(84,108,124,.11) 14%, rgba(84,108,124,.045) 26%, transparent 44%);
  opacity: .92;
  filter: blur(.05px);
  animation: diaryWaterDropFall 2400ms cubic-bezier(.18,.76,.16,1) both;
}
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::after {
  background:
    radial-gradient(circle at 35% 42%, rgba(58,82,98,.26) 0 3.5%, rgba(72,96,112,.16) 12%, rgba(72,96,112,.06) 25%, transparent 45%),
    radial-gradient(circle at 68% 58%, rgba(72,96,112,.17) 0 2.8%, rgba(72,96,112,.085) 12%, rgba(72,96,112,.04) 23%, transparent 39%),
    radial-gradient(ellipse 18% 50% at 46% 65%, rgba(84,108,124,.1), transparent 72%),
    linear-gradient(180deg, transparent 0 28%, rgba(84,108,124,.07) 44%, rgba(84,108,124,.03) 61%, transparent 78% 100%);
  opacity: .82;
  animation: diaryWaterBloomOpen 2600ms ease-out both;
}
.diary-letter-view.paper-water.is-water-settled .diary-letter-stage .diary-paper::before {
  opacity: .32;
  animation: diaryWaterQuietBreath 9000ms ease-in-out infinite alternate;
}
.diary-letter-view.paper-water.is-water-settled .diary-letter-stage .diary-paper::after {
  opacity: .24;
  animation: diaryWaterQuietBreath 11000ms ease-in-out infinite alternate-reverse;
}
.diary-paper-kind-grid button[data-paper-kind="water"] { background:
  radial-gradient(circle at 36% 42%, rgba(84,108,124,.2) 0 8%, rgba(84,108,124,.08) 22%, transparent 42%),
  linear-gradient(180deg, rgba(255,255,255,.58), rgba(236,240,238,.46)); }
@keyframes diaryWaterDropFall {
  0% { transform: translate3d(0, -34%, 0) scale(.72); opacity: 0; }
  20% { transform: translate3d(0, -20%, 0) scale(.82); opacity: .74; }
  38% { transform: translate3d(0, 0, 0) scale(1); opacity: .98; }
  58% { transform: translate3d(0, 3%, 0) scale(1.12); opacity: .72; filter: blur(.25px); }
  100% { transform: translate3d(0, 5%, 0) scale(1.2); opacity: .32; filter: blur(.55px); }
}
@keyframes diaryWaterBloomOpen {
  0%, 28% { transform: scale(.56); opacity: 0; filter: blur(.1px); }
  46% { transform: scale(.78); opacity: .78; filter: blur(.25px); }
  72% { transform: scale(1.12); opacity: .66; filter: blur(.55px); }
  100% { transform: scale(1.25); opacity: .28; filter: blur(.8px); }
}
@keyframes diaryWaterQuietBreath {
  from { opacity: .2; filter: blur(.55px); }
  to { opacity: .34; filter: blur(.35px); }
}

@media (prefers-reduced-motion: reduce) {
  .diary-letter-view.paper-water .diary-letter-stage .diary-paper::before,
  .diary-letter-view.paper-water .diary-letter-stage .diary-paper::after,
  .diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::before,
  .diary-letter-view.paper-magnetic .diary-letter-stage .diary-paper::after { animation: none !important; transform: none !important; }
}
[data-theme="dark"] .diary-app-sheet { color: #f0e7e2; background: linear-gradient(180deg, #262020, #171414); }
[data-theme="dark"] .diary-app-header { background: rgba(32,27,28,.82); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .diary-app-title strong,
[data-theme="dark"] .diary-hero strong { color: #f4ece8; }
[data-theme="dark"] .diary-app-title span,
[data-theme="dark"] .diary-hero span,
[data-theme="dark"] .diary-hero p { color: rgba(244,236,232,.58); }
[data-theme="dark"] .diary-contact-chip { color: rgba(244,236,232,.68); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .diary-contact-chip.is-active { color: #fff; background: rgba(255,255,255,.16); }




/* Lnyy UI section. */
.memory-contact-picker {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.memory-contact-picker.is-home {
  min-height: calc(100dvh - 190px);
  justify-content: center;
  padding: 18px 0 56px;
}
.memory-contact-picker.is-home .memory-contact-search {
  width: min(100%, 310px);
  margin: 0 auto;
}
.memory-contact-picker.is-home .memory-contact-strip {
  width: 100%;
  justify-content: flex-start;
  padding-top: 8px;
}
.memory-contact-search {
  height: 48px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: rgba(18,20,26,.48);
  background: rgba(255,255,255,.56);
  box-shadow: 0 16px 38px rgba(20,32,24,.09), inset 0 1px rgba(255,255,255,.72);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}
.memory-contact-search span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}
.memory-contact-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  color: #111318;
  background: transparent;
  font: inherit;
  font-size: 15px;
}
.memory-contact-search input::placeholder { color: rgba(18,20,26,.38); }
.memory-film-wall.memory-contact-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.memory-contact-strip::-webkit-scrollbar { display: none; }
.memory-contact-strip .memory-film-contact {
  flex: 0 0 76px;
  width: 76px;
  min-height: 108px;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: #111318;
  text-align: center;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  scroll-snap-align: start;
}
.memory-contact-strip .memory-film-contact[hidden] { display: none; }
.memory-contact-strip .memory-film-contact.is-empty { opacity: .58; }
.memory-contact-strip .memory-film-contact:active { transform: translateY(2px) scale(.96); }
.memory-contact-strip .memory-film-avatar {
  width: 68px;
  height: 68px;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 50%;
  font-size: 25px;
  box-shadow: 0 14px 30px rgba(16,24,22,.14), inset 0 1px rgba(255,255,255,.5);
}
.memory-contact-strip .memory-film-name {
  width: 100%;
  overflow: hidden;
  color: #111318;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-contact-no-results {
  align-self: center;
  margin-top: 24px;
  color: rgba(18,20,26,.48);
  font-size: 13px;
}
.memory-contact-empty { min-width: 100%; }

.memory-projector-head-film {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.memory-projector-head-film > button:not(.memory-film-sound-btn),
.memory-film-title strong {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.15;
}
.memory-film-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}
.memory-film-title strong {
  max-width: 100%;
  margin: 0;
}
.memory-film-title small {
  display: block;
  overflow: hidden;
  color: rgba(18,20,26,.46);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-film-sound-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #163f2b;
  background: rgba(39,174,96,.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.memory-film-sound-btn.is-muted {
  color: rgba(18,20,26,.48);
  background: rgba(120,120,128,.14);
}
.memory-film-sound-icon {
  position: relative;
  width: 22px;
  height: 20px;
  display: block;
  flex: 0 0 22px;
}

/* Keep media and call composers above the visual viewport while the OS keyboard is open. */
html.keyboard-open #musicApp[data-music-ui="v10"] .listen-room-overlay.v10 .listen-v10-chatbar {
  bottom: max(10px, calc(var(--keyboard-inset, 0px) + 8px)) !important;
}
html.keyboard-open #musicApp[data-music-ui="v10"] .listen-room-overlay.v10 {
  padding-bottom: calc(62px + var(--safe-bottom-inset, 0px) + var(--keyboard-inset, 0px)) !important;
}
html.keyboard-open #musicApp[data-music-ui="v10"] .listen-room-overlay.v10 .listen-room-chat-status {
  bottom: max(62px, calc(var(--keyboard-inset, 0px) + 60px)) !important;
}
html.keyboard-open #redlineApp .rl-watch-controls {
  bottom: calc(13px + var(--safe-bottom-inset, 0px) + var(--keyboard-inset, 0px)) !important;
}
html.keyboard-open #redlineApp .rl-watch-subtitle {
  bottom: calc(135px + var(--keyboard-inset, 0px)) !important;
}
html.keyboard-open #redlineApp .rl-watch-ending {
  padding-bottom: calc(22px + var(--safe-bottom-inset, 0px) + var(--keyboard-inset, 0px)) !important;
}
html.keyboard-open #redlineApp .rl-watch-ending-dialogue {
  padding-bottom: calc(4px + var(--keyboard-inset, 0px)) !important;
}
html.keyboard-open .phone-live-call {
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--keyboard-inset, 0px)) !important;
}
html.keyboard-open .phone-live-call .phone-live-call-head {
  gap: 3px;
}
html.keyboard-open .phone-live-call .phone-call-avatar-ring {
  width: 68px;
  height: 68px;
  padding: 4px;
}
html.keyboard-open .phone-live-call .phone-call-name {
  margin-top: 1px;
  font-size: 21px;
}
html.keyboard-open .phone-live-call .phone-call-duration {
  min-height: 24px;
  font-size: 20px;
}
html.keyboard-open .phone-live-call .phone-call-mode {
  min-height: 0;
  padding: 3px 8px;
}
html.keyboard-open .phone-live-call .phone-call-subtitle {
  min-height: 36px;
  margin-top: 6px;
  padding: 5px 8px;
  font-size: 13px;
}
html.keyboard-open .phone-live-call .phone-call-spacer {
  min-height: 0;
}
html.keyboard-open .phone-live-call .phone-call-fallback {
  margin-bottom: 8px;
}
html.keyboard-open .phone-live-call .phone-call-controls {
  grid-template-columns: repeat(var(--call-control-count, 4), minmax(0, 48px));
  gap: 6px;
}
html.keyboard-open .phone-live-call .phone-call-control {
  max-width: 48px;
}
.memory-film-sound-icon i {
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 10px;
  border-radius: 1px;
  background: currentColor;
  clip-path: polygon(0 28%, 38% 28%, 100% 0, 100% 100%, 38% 72%, 0 72%);
}
.memory-film-sound-icon i::after {
  content: none;
}
.memory-film-sound-icon b {
  position: absolute;
  top: 50%;
  display: block;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 999px 999px 0;
  transform: translateY(-50%);
}
.memory-film-sound-icon b:nth-child(2) {
  left: 11px;
  width: 5px;
  height: 10px;
}
.memory-film-sound-icon b:nth-child(3) {
  left: 13px;
  width: 8px;
  height: 16px;
  opacity: .72;
}
.memory-film-sound-btn.is-muted .memory-film-sound-icon b { opacity: 0; }
.memory-film-sound-btn.is-muted .memory-film-sound-icon::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 9px;
  width: 19px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-42deg);
  transform-origin: center;
}
[data-theme="dark"] .memory-more-btn {
  color: #f5f5f7;
  background: rgba(255,255,255,.12);
  box-shadow: 0 8px 18px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.12);
}
[data-theme="dark"] .memory-film-sound-btn {
  color: #bde7ce;
  background: rgba(69,190,118,.18);
}
[data-theme="dark"] .memory-film-sound-btn.is-muted {
  color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.1);
}
[data-theme="dark"] .memory-film-title small { color: rgba(255,255,255,.58); }
.memory-projector-stage.memory-vertical-projector {
  min-height: min(64dvh, 520px);
  display: block;
  overflow: hidden;
  padding: 4px 0 10px;
}
.memory-vertical-film {
  --memory-reel-drag: 0px;
  position: relative;
  height: min(64dvh, 520px);
  min-height: 410px;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  perspective: 900px;
}
.memory-vertical-film::before {
  content: '';
  position: absolute;
  inset: 0 34px;
  z-index: 0;
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(12,14,18,.92) 0 34px, transparent 34px calc(100% - 34px), rgba(12,14,18,.92) calc(100% - 34px) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 18%, rgba(0,0,0,.18) 100%),
    #15171d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 36px rgba(0,0,0,.44), 0 26px 70px rgba(12,16,18,.2);
}
.memory-vertical-film::after {
  content: '';
  position: absolute;
  inset: 16px 46px;
  z-index: 1;
  border-radius: 24px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.78) 0 12px, transparent 12px 28px) left top / 15px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.78) 0 12px, transparent 12px 28px) right top / 15px 100% no-repeat,
    linear-gradient(180deg, transparent, rgba(255,255,255,.08) 48%, transparent 64%);
  opacity: .78;
  pointer-events: none;
}
.memory-vertical-film .memory-day-card {
  width: min(68%, 266px);
  aspect-ratio: 5 / 7;
  max-height: min(50dvh, 400px);
  z-index: 3;
  border-color: rgba(22,22,22,.16);
  border-radius: 12px;
  box-shadow: 0 24px 54px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.82);
  animation: memoryFilmSlide 760ms cubic-bezier(.2,.86,.18,1) both;
}
.memory-vertical-film .memory-day-card.is-current {
  transform: translateY(calc(var(--memory-reel-drag) * .22));
}
.memory-vertical-film.is-dragging .memory-day-card.is-current {
  animation: none;
  transition: none;
  transform: translateY(calc(var(--memory-reel-drag) * .38)) scale(1);
}
.memory-vertical-film .memory-day-card-peek {
  position: absolute;
  width: min(58%, 224px);
  max-height: min(36dvh, 310px);
  z-index: 2;
  opacity: .36;
  filter: grayscale(1) brightness(.82) blur(.2px);
  pointer-events: none;
  box-shadow: 0 16px 36px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.62);
  animation: none;
}
.memory-vertical-film .memory-day-card-peek.is-above {
  transform: translateY(calc(-76% + var(--memory-reel-drag) * .2)) scale(.84);
}
.memory-vertical-film .memory-day-card-peek.is-below {
  transform: translateY(calc(76% + var(--memory-reel-drag) * .2)) scale(.84);
}
.memory-vertical-film .memory-day-card-peek.is-empty {
  opacity: .16;
  filter: grayscale(1) brightness(.86);
}
.memory-vertical-film .memory-day-card::after {
  inset: 4% -20% auto;
  background:
    linear-gradient(180deg, transparent 0 22%, rgba(0,0,0,.12) 44%, rgba(0,0,0,.06) 54%, transparent 72%),
    linear-gradient(90deg, rgba(0,0,0,.08), transparent 18%, transparent 82%, rgba(0,0,0,.06));
  animation: memoryProjectorFlash 760ms cubic-bezier(.2,.86,.18,1) both;
}
.memory-vertical-film.is-edge-top .memory-day-card.is-current { animation: memoryFilmEdgeTop 260ms ease-out both; }
.memory-vertical-film.is-edge-bottom .memory-day-card.is-current { animation: memoryFilmEdgeBottom 260ms ease-out both; }

@keyframes memoryFilmSlide {
  0% { opacity: .22; transform: translateY(58px) scale(.975) rotateX(-2deg); filter: brightness(1.16) saturate(.88) blur(.25px); }
  22% { opacity: .78; transform: translateY(20px) scale(.992) rotateX(1deg); filter: brightness(1.32) saturate(.94); }
  48% { opacity: 1; transform: translateY(-5px) scale(1.004) rotateX(-.4deg); filter: brightness(1.06) saturate(1.02); }
  72% { opacity: 1; transform: translateY(1px) scale(1) rotateX(.2deg); filter: brightness(1.02) saturate(1); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: brightness(1) saturate(1); }
}
@keyframes memoryFilmSlidePrev {
  0% { opacity: .22; transform: translateY(-58px) scale(.975) rotateX(2deg); filter: brightness(1.16) saturate(.88) blur(.25px); }
  22% { opacity: .78; transform: translateY(-20px) scale(.992) rotateX(-1deg); filter: brightness(1.32) saturate(.94); }
  48% { opacity: 1; transform: translateY(5px) scale(1.004) rotateX(.4deg); filter: brightness(1.06) saturate(1.02); }
  72% { opacity: 1; transform: translateY(-1px) scale(1) rotateX(-.2deg); filter: brightness(1.02) saturate(1); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: brightness(1) saturate(1); }
}
@keyframes memoryProjectorFlash {
  0% { opacity: 0; transform: translateY(-20%); }
  18% { opacity: .22; }
  34% { opacity: .05; }
  48% { opacity: .34; }
  66% { opacity: .08; }
  100% { opacity: 0; transform: translateY(20%); }
}
@keyframes memoryProjectorFlashPrev {
  0% { opacity: 0; transform: translateY(20%); }
  18% { opacity: .22; }
  34% { opacity: .05; }
  48% { opacity: .34; }
  66% { opacity: .08; }
  100% { opacity: 0; transform: translateY(-20%); }
}
@keyframes memoryFilmEdgeTop {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(12px) scale(.992); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes memoryFilmEdgeBottom {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-12px) scale(.992); }
  100% { transform: translateY(0) scale(1); }
}

[data-theme="dark"] .memory-contact-search {
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
}
[data-theme="dark"] .memory-contact-search input,
[data-theme="dark"] .memory-contact-strip .memory-film-name { color: #fff; }
[data-theme="dark"] .memory-contact-search input::placeholder,
[data-theme="dark"] .memory-contact-no-results { color: rgba(255,255,255,.42); }
[data-theme="dark"] .memory-vertical-film::before {
  background:
    linear-gradient(90deg, rgba(5,6,8,.96) 0 34px, transparent 34px calc(100% - 34px), rgba(5,6,8,.96) calc(100% - 34px) 100%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 20%, rgba(0,0,0,.28) 100%),
    #0b0c10;
}

@media (max-width: 370px) {
  .memory-contact-strip .memory-film-contact { flex-basis: 70px; width: 70px; }
  .memory-contact-strip .memory-film-avatar { width: 62px; height: 62px; }
  .memory-projector-stage.memory-vertical-projector { min-height: min(62dvh, 470px); }
  .memory-vertical-film { min-height: 370px; height: min(62dvh, 470px); }
  .memory-vertical-film::before { inset: 0 24px; }
  .memory-vertical-film .memory-day-card { width: min(70%, 236px); }
  .memory-vertical-film .memory-day-main { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .memory-vertical-film .memory-day-card,
  .memory-vertical-film .memory-day-card::after,
  .memory-vertical-film.is-edge-top .memory-day-card.is-current,
  .memory-vertical-film.is-edge-bottom .memory-day-card.is-current {
    animation: none !important;
    transform: none !important;
    transition-duration: 120ms !important;
  }
  .memory-vertical-film .memory-day-card::after { opacity: 0 !important; }
}
[data-reduce-motion="true"] .memory-vertical-film .memory-day-card,
[data-reduce-motion="true"] .memory-vertical-film .memory-day-card::after,
[data-reduce-motion="true"] .memory-vertical-film.is-edge-top .memory-day-card.is-current,
[data-reduce-motion="true"] .memory-vertical-film.is-edge-bottom .memory-day-card.is-current {
  animation: none !important;
  transform: none !important;
}
[data-reduce-motion="true"] .memory-vertical-film .memory-day-card::after { opacity: 0 !important; }


/* Diary tear stain restoration: soft center bloom below the letter text */
.diary-tear-effect {
  position: absolute;
  inset: -9% -11%;
  z-index: 0;
  display: none;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(0) scale(.98);
  mix-blend-mode: multiply;
}
.diary-paper > .diary-tear-effect { z-index: 0; }
.diary-letter-view.paper-water .diary-tear-effect { display: block; }
.diary-tear-effect::before,
.diary-tear-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 46% 54% 51% 49%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 50% 47%;
  opacity: 0;
}
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::before,
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::after {
  transform: none !important;
  border-radius: inherit;
}
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::before {
  opacity: .24;
  background:
    radial-gradient(ellipse 74% 46% at 50% 49%, rgba(84,108,124,.08), rgba(84,108,124,.035) 56%, transparent 80%),
    linear-gradient(180deg, transparent 0 26%, rgba(84,108,124,.045) 46%, transparent 72% 100%) !important;
  filter: blur(.24px) saturate(.92);
  animation: diaryTearPaperSoften 6400ms cubic-bezier(.2,.72,.18,1) both !important;
}
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::after {
  opacity: .16;
  background:
    radial-gradient(ellipse 88% 64% at 50% 51%, rgba(84,108,124,.048), transparent 78%),
    linear-gradient(90deg, rgba(74,91,83,.06), transparent 20%, transparent 80%, rgba(74,91,83,.052)) !important;
  box-shadow: inset 0 0 42px rgba(75,91,83,.11);
  filter: blur(.28px) saturate(.9);
  animation: diaryTearPaperSoften 6400ms cubic-bezier(.2,.72,.18,1) both !important;
}
.diary-letter-view.paper-water.is-water-arriving .diary-tear-effect {
  animation: diaryTearEffectArrive 6400ms cubic-bezier(.2,.72,.18,1) both;
}
.diary-letter-view.paper-water.is-water-arriving .diary-tear-effect::before {
  background-image:
    radial-gradient(ellipse 5% 7% at 50% 39%, rgba(255,255,255,.58), rgba(120,145,154,.18) 42%, transparent 72%),
    radial-gradient(ellipse 18% 12% at 50% 47%, rgba(58,82,98,.18), rgba(72,96,112,.095) 42%, transparent 74%),
    radial-gradient(ellipse 58% 38% at 50% 49%, rgba(84,108,124,.105), rgba(84,108,124,.046) 55%, transparent 78%),
    radial-gradient(ellipse 86% 62% at 50% 52%, rgba(84,108,124,.055), transparent 76%);
  background-size: 8% 7%, 18% 12%, 34% 22%, 46% 30%;
  animation: diaryTearWetBloom 6400ms cubic-bezier(.18,.72,.16,1) both;
}
.diary-letter-view.paper-water.is-water-arriving .diary-tear-effect::after {
  background-image:
    radial-gradient(ellipse at 50% 47%, transparent 0 25%, rgba(64,92,110,.16) 26% 26.8%, transparent 28.5%),
    radial-gradient(ellipse at 50% 47%, transparent 0 39%, rgba(64,92,110,.105) 40% 40.8%, transparent 42.5%),
    radial-gradient(ellipse at 50% 47%, transparent 0 53%, rgba(64,92,110,.07) 54% 54.6%, transparent 56.6%);
  background-size: 20% 14%, 28% 20%, 36% 26%;
  filter: blur(.12px);
  animation: diaryTearOuterBloom 6400ms cubic-bezier(.2,.76,.18,1) both;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect {
  opacity: .72;
  transform: translateZ(0) scale(1.015);
  animation: diaryTearSettledBreath 12000ms ease-in-out infinite alternate;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before {
  opacity: .42;
  background-image:
    radial-gradient(ellipse 20% 13% at 50% 47%, rgba(58,82,98,.12), rgba(72,96,112,.06) 48%, transparent 76%),
    radial-gradient(ellipse 82% 56% at 50% 51%, rgba(84,108,124,.072), rgba(84,108,124,.032) 54%, transparent 78%);
  background-size: 26% 18%, 86% 62%;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
  opacity: .16;
  background-image:
    radial-gradient(ellipse at 50% 47%, transparent 0 45%, rgba(64,92,110,.09) 46% 46.6%, transparent 48.4%),
    radial-gradient(ellipse at 50% 47%, transparent 0 61%, rgba(64,92,110,.055) 62% 62.5%, transparent 64.2%);
  background-size: 124% 88%, 156% 112%;
  filter: blur(.55px);
}
@keyframes diaryTearEffectArrive {
  0% { opacity: 0; transform: translate3d(0, -9px, 0) scale(.9); }
  14% { opacity: .38; transform: translate3d(0, -1px, 0) scale(.96); }
  38% { opacity: .88; transform: translate3d(0, 0, 0) scale(1.02); }
  100% { opacity: .72; transform: translate3d(0, 0, 0) scale(1.015); }
}
@keyframes diaryTearWetBloom {
  0% { opacity: 0; background-size: 4% 4%, 8% 6%, 15% 10%, 22% 15%; filter: blur(.05px); }
  18% { opacity: .72; background-size: 7% 6%, 22% 15%, 46% 30%, 62% 43%; filter: blur(.12px); }
  46% { opacity: .66; background-size: 4% 4%, 30% 20%, 76% 50%, 98% 70%; filter: blur(.36px); }
  78% { opacity: .48; background-size: 2% 2%, 25% 17%, 86% 58%, 118% 84%; filter: blur(.58px); }
  100% { opacity: .42; background-size: 0 0, 22% 15%, 82% 56%, 126% 92%; filter: blur(.66px); }
}
@keyframes diaryTearOuterBloom {
  0%, 16% { opacity: 0; background-size: 18% 13%, 22% 16%, 28% 20%; filter: blur(.08px); }
  42% { opacity: .36; background-size: 78% 56%, 96% 70%, 114% 82%; filter: blur(.28px); }
  72% { opacity: .22; background-size: 118% 86%, 142% 104%, 164% 120%; filter: blur(.55px); }
  100% { opacity: .14; background-size: 132% 96%, 158% 116%, 182% 132%; filter: blur(.78px); }
}
@keyframes diaryTearPaperSoften {
  0% { filter: blur(.12px) saturate(.94); opacity: .18; }
  42% { filter: blur(.28px) saturate(.9); opacity: .28; }
  100% { filter: blur(.22px) saturate(.92); opacity: .22; }
}
@keyframes diaryTearSettledBreath {
  from { opacity: .62; filter: blur(.2px) saturate(.92); }
  to { opacity: .76; filter: blur(.34px) saturate(.88); }
}
@media (prefers-reduced-motion: reduce) {
  .diary-letter-view.paper-water .diary-tear-effect,
  .diary-letter-view.paper-water .diary-tear-effect::before,
  .diary-letter-view.paper-water .diary-tear-effect::after {
    animation: none !important;
    transform: none !important;
  }
  .diary-letter-view.paper-water .diary-tear-effect { opacity: .64; }
  .diary-letter-view.paper-water .diary-tear-effect::before {
    opacity: .34;
    background-image: radial-gradient(ellipse 82% 56% at 50% 51%, rgba(84,108,124,.07), rgba(84,108,124,.03) 54%, transparent 78%);
    background-size: 86% 62%;
  }
  .diary-letter-view.paper-water .diary-tear-effect::after { opacity: 0; }
}
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect,
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::before,
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::after {
  animation: none !important;
  transform: none !important;
}
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect { opacity: .64; }
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::before {
  opacity: .34;
  background-image: radial-gradient(ellipse 82% 56% at 50% 51%, rgba(84,108,124,.07), rgba(84,108,124,.03) 54%, transparent 78%);
  background-size: 86% 62%;
}
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::after { opacity: 0; }



/* ===== Diary tear stain v2: multi-center wet bloom ===== */
.diary-letter-view.paper-water .diary-tear-effect {
  inset: -11% -13%;
  mix-blend-mode: multiply;
  transform-origin: 50% 48%;
}
.diary-letter-view.paper-water .diary-tear-effect::before,
.diary-letter-view.paper-water .diary-tear-effect::after {
  background-position: 0 0;
  border-radius: 45% 55% 52% 48%;
}
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::before {
  opacity: .28;
  background:
    radial-gradient(ellipse 48% 24% at 43% 42%, rgba(82,106,122,.075), rgba(82,106,122,.032) 58%, transparent 82%),
    radial-gradient(ellipse 32% 18% at 58% 49%, rgba(82,106,122,.058), rgba(82,106,122,.026) 60%, transparent 84%),
    radial-gradient(ellipse 28% 16% at 48% 61%, rgba(82,106,122,.052), transparent 78%),
    repeating-linear-gradient(102deg, transparent 0 10px, rgba(74,97,110,.045) 11px 12px, transparent 13px 27px) !important;
  filter: blur(.22px) saturate(.9);
  animation: diaryTearFiberWake 7600ms cubic-bezier(.2,.72,.18,1) both !important;
}
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::after {
  opacity: .2;
  background:
    radial-gradient(ellipse 14% 42% at 45% 49%, rgba(255,255,255,.18), transparent 72%),
    radial-gradient(ellipse 12% 36% at 59% 57%, rgba(255,255,255,.13), transparent 72%),
    linear-gradient(180deg, transparent 0 26%, rgba(72,96,112,.052) 43%, rgba(72,96,112,.025) 62%, transparent 82% 100%),
    linear-gradient(90deg, rgba(74,91,83,.055), transparent 22%, transparent 78%, rgba(74,91,83,.048)) !important;
  box-shadow: inset 0 0 46px rgba(75,91,83,.12), inset 0 18px 38px rgba(255,255,255,.08);
  filter: blur(.24px) saturate(.9);
  animation: diaryTearLightSheen 7600ms ease-in-out both !important;
}
.diary-letter-view.paper-water.is-water-arriving .diary-tear-effect {
  animation: diaryTearMultiArrive 7600ms cubic-bezier(.18,.72,.16,1) both;
}
.diary-letter-view.paper-water.is-water-arriving .diary-tear-effect::before {
  opacity: .86;
  background-image:
    radial-gradient(ellipse 4.8% 6.2% at 43% 38%, rgba(255,255,255,.7), rgba(142,164,170,.23) 42%, transparent 73%),
    radial-gradient(ellipse 3.4% 4.6% at 57% 43%, rgba(255,255,255,.56), rgba(142,164,170,.16) 46%, transparent 76%),
    radial-gradient(ellipse 3.8% 5.2% at 49% 55%, rgba(255,255,255,.42), rgba(142,164,170,.13) 46%, transparent 76%),
    radial-gradient(ellipse 21% 15% at 43% 47%, rgba(58,82,98,.155), rgba(72,96,112,.082) 45%, transparent 76%),
    radial-gradient(ellipse 18% 13% at 58% 53%, rgba(58,82,98,.12), rgba(72,96,112,.06) 48%, transparent 78%),
    radial-gradient(ellipse 16% 23% at 50% 63%, rgba(74,98,112,.075), rgba(74,98,112,.036) 46%, transparent 80%),
    radial-gradient(ellipse 74% 55% at 50% 53%, rgba(84,108,124,.078), rgba(84,108,124,.034) 56%, transparent 81%);
  background-size: 10% 9%, 8% 7%, 9% 8%, 34% 25%, 31% 22%, 28% 35%, 88% 66%;
  filter: blur(.06px) saturate(.92);
  animation: diaryTearMultiWetBloom 7600ms cubic-bezier(.18,.72,.16,1) both;
}
.diary-letter-view.paper-water.is-water-arriving .diary-tear-effect::after {
  opacity: .34;
  background-image:
    radial-gradient(ellipse at 43% 47%, transparent 0 20%, rgba(64,92,110,.13) 21% 21.8%, transparent 23.8%),
    radial-gradient(ellipse at 58% 53%, transparent 0 20%, rgba(64,92,110,.1) 21% 21.7%, transparent 24%),
    radial-gradient(ellipse at 50% 61%, transparent 0 25%, rgba(64,92,110,.075) 26% 26.6%, transparent 29%),
    radial-gradient(ellipse at 48% 53%, transparent 0 44%, rgba(64,92,110,.075) 45% 45.6%, transparent 48%),
    radial-gradient(ellipse 16% 42% at 46% 62%, rgba(255,255,255,.12), transparent 72%);
  background-size: 35% 26%, 32% 24%, 34% 36%, 96% 70%, 40% 66%;
  filter: blur(.2px);
  mix-blend-mode: multiply;
  animation: diaryTearMultiOuterBloom 7600ms cubic-bezier(.2,.76,.18,1) both;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect {
  opacity: .74;
  transform: translateZ(0) scale(1.018);
  animation: diaryTearSettledBreath 12500ms ease-in-out infinite alternate;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before {
  opacity: .46;
  background-image:
    radial-gradient(ellipse 28% 20% at 43% 48%, rgba(58,82,98,.095), rgba(72,96,112,.045) 50%, transparent 78%),
    radial-gradient(ellipse 24% 18% at 58% 54%, rgba(58,82,98,.075), rgba(72,96,112,.036) 52%, transparent 80%),
    radial-gradient(ellipse 22% 35% at 50% 65%, rgba(72,96,112,.052), transparent 78%),
    radial-gradient(ellipse 86% 64% at 50% 54%, rgba(84,108,124,.061), rgba(84,108,124,.028) 56%, transparent 80%);
  background-size: 42% 30%, 38% 28%, 36% 52%, 94% 70%;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
  opacity: .2;
  background-image:
    radial-gradient(ellipse at 43% 48%, transparent 0 46%, rgba(64,92,110,.07) 47% 47.6%, transparent 49.5%),
    radial-gradient(ellipse at 58% 54%, transparent 0 48%, rgba(64,92,110,.052) 49% 49.6%, transparent 51.4%),
    radial-gradient(ellipse at 50% 61%, transparent 0 58%, rgba(64,92,110,.04) 59% 59.5%, transparent 61.5%);
  background-size: 74% 54%, 68% 50%, 116% 86%;
  filter: blur(.5px);
}
@keyframes diaryTearMultiArrive {
  0% { opacity: 0; transform: translate3d(0, -13px, 0) scale(.9); }
  12% { opacity: .32; transform: translate3d(-1px, -4px, 0) scale(.94); }
  24% { opacity: .72; transform: translate3d(0, 0, 0) scale(.98); }
  54% { opacity: .86; transform: translate3d(0, 1px, 0) scale(1.012); }
  100% { opacity: .74; transform: translate3d(0, 2px, 0) scale(1.018); }
}
@keyframes diaryTearMultiWetBloom {
  0% { background-size: 4% 4%, 3% 3%, 3% 4%, 10% 8%, 8% 6%, 7% 12%, 20% 16%; opacity: 0; filter: blur(.04px) saturate(1); }
  18% { background-size: 9% 8%, 6% 5%, 6% 6%, 22% 16%, 18% 13%, 16% 23%, 44% 33%; opacity: .82; filter: blur(.08px) saturate(.95); }
  42% { background-size: 13% 11%, 9% 8%, 10% 9%, 42% 31%, 38% 27%, 34% 44%, 78% 58%; opacity: .7; filter: blur(.28px) saturate(.91); }
  72% { background-size: 15% 13%, 11% 9%, 12% 11%, 58% 42%, 50% 36%, 48% 58%, 105% 78%; opacity: .54; filter: blur(.5px) saturate(.88); }
  100% { background-size: 16% 14%, 12% 10%, 13% 12%, 66% 48%, 58% 42%, 56% 66%, 118% 88%; opacity: .42; filter: blur(.62px) saturate(.86); }
}
@keyframes diaryTearMultiOuterBloom {
  0%, 14% { background-size: 12% 9%, 10% 8%, 9% 12%, 22% 16%, 14% 24%; opacity: 0; transform: scale(.76); }
  34% { background-size: 30% 22%, 27% 20%, 28% 30%, 70% 52%, 30% 50%; opacity: .34; transform: scale(.92); }
  68% { background-size: 58% 42%, 52% 38%, 58% 58%, 126% 92%, 46% 72%; opacity: .25; transform: scale(1.04); }
  100% { background-size: 72% 52%, 64% 46%, 76% 72%, 148% 108%, 54% 82%; opacity: .17; transform: scale(1.09); }
}
@keyframes diaryTearFiberWake {
  0% { opacity: .12; filter: blur(.12px) saturate(.96); }
  36% { opacity: .31; filter: blur(.28px) saturate(.9); }
  100% { opacity: .22; filter: blur(.34px) saturate(.88); }
}
@keyframes diaryTearLightSheen {
  0% { opacity: .04; transform: translate3d(0, -6px, 0); }
  28% { opacity: .24; transform: translate3d(0, 0, 0); }
  74% { opacity: .16; transform: translate3d(0, 5px, 0); }
  100% { opacity: .1; transform: translate3d(0, 8px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .diary-letter-view.paper-water .diary-tear-effect::before {
    background-image:
      radial-gradient(ellipse 32% 22% at 43% 48%, rgba(58,82,98,.08), rgba(72,96,112,.038) 52%, transparent 80%),
      radial-gradient(ellipse 28% 20% at 58% 54%, rgba(58,82,98,.06), rgba(72,96,112,.03) 54%, transparent 82%),
      radial-gradient(ellipse 86% 64% at 50% 54%, rgba(84,108,124,.055), transparent 80%);
    background-size: 44% 32%, 40% 30%, 94% 70%;
  }
  .diary-letter-view.paper-water .diary-tear-effect::after { opacity: .08; }
}
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::before {
  background-image:
    radial-gradient(ellipse 32% 22% at 43% 48%, rgba(58,82,98,.08), rgba(72,96,112,.038) 52%, transparent 80%),
    radial-gradient(ellipse 28% 20% at 58% 54%, rgba(58,82,98,.06), rgba(72,96,112,.03) 54%, transparent 82%),
    radial-gradient(ellipse 86% 64% at 50% 54%, rgba(84,108,124,.055), transparent 80%);
  background-size: 44% 32%, 40% 30%, 94% 70%;
}
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::after { opacity: .08; }

/* ===== Diary tear stain v3: scattered sheet blooms ===== */
.diary-letter-view.paper-water .diary-tear-effect {
  inset: -12% -14%;
  transform-origin: 50% 52%;
}
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::before {
  opacity: .25;
  background:
    radial-gradient(ellipse 44% 24% at 22% 28%, rgba(82,106,122,.07), rgba(82,106,122,.028) 58%, transparent 82%),
    radial-gradient(ellipse 34% 20% at 74% 25%, rgba(82,106,122,.055), rgba(82,106,122,.022) 62%, transparent 84%),
    radial-gradient(ellipse 32% 38% at 18% 62%, rgba(82,106,122,.05), rgba(82,106,122,.02) 58%, transparent 83%),
    radial-gradient(ellipse 48% 34% at 57% 68%, rgba(82,106,122,.056), rgba(82,106,122,.024) 60%, transparent 84%),
    radial-gradient(ellipse 34% 26% at 82% 80%, rgba(82,106,122,.046), transparent 78%),
    repeating-linear-gradient(103deg, transparent 0 9px, rgba(74,97,110,.038) 10px 11px, transparent 12px 28px) !important;
  filter: blur(.24px) saturate(.9);
  animation: diaryTearScatteredFibers 7600ms cubic-bezier(.2,.72,.18,1) both !important;
}
.diary-letter-view.paper-water.is-water-arriving .diary-letter-stage .diary-paper::after {
  opacity: .18;
  background:
    radial-gradient(ellipse 16% 40% at 28% 46%, rgba(255,255,255,.16), transparent 72%),
    radial-gradient(ellipse 14% 36% at 67% 50%, rgba(255,255,255,.13), transparent 74%),
    radial-gradient(ellipse 10% 30% at 82% 72%, rgba(255,255,255,.11), transparent 72%),
    linear-gradient(180deg, transparent 0 24%, rgba(72,96,112,.04) 42%, rgba(72,96,112,.022) 66%, transparent 86% 100%),
    linear-gradient(90deg, rgba(74,91,83,.05), transparent 24%, transparent 76%, rgba(74,91,83,.042)) !important;
  box-shadow: inset 0 0 48px rgba(75,91,83,.11), inset 0 22px 42px rgba(255,255,255,.08);
  filter: blur(.26px) saturate(.9);
  animation: diaryTearScatteredLight 7600ms ease-in-out both !important;
}
.diary-letter-view.paper-water.is-water-arriving .diary-tear-effect {
  animation: diaryTearScatteredArrive 7600ms cubic-bezier(.18,.72,.16,1) both;
}
.diary-letter-view.paper-water.is-water-arriving .diary-tear-effect::before {
  opacity: .84;
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,.7) 0 7%, rgba(142,164,170,.22) 25%, rgba(58,82,98,.12) 46%, transparent 76%),
    radial-gradient(ellipse at center, rgba(255,255,255,.48) 0 8%, rgba(142,164,170,.15) 26%, rgba(58,82,98,.08) 48%, transparent 78%),
    radial-gradient(ellipse at center, rgba(255,255,255,.42) 0 7%, rgba(142,164,170,.13) 25%, rgba(58,82,98,.07) 48%, transparent 79%),
    radial-gradient(ellipse at center, rgba(255,255,255,.36) 0 6%, rgba(142,164,170,.12) 27%, rgba(58,82,98,.065) 49%, transparent 80%),
    radial-gradient(ellipse at center, rgba(255,255,255,.31) 0 6%, rgba(142,164,170,.1) 28%, rgba(58,82,98,.052) 50%, transparent 82%),
    radial-gradient(ellipse at center, rgba(255,255,255,.26) 0 6%, rgba(142,164,170,.085) 28%, rgba(58,82,98,.045) 50%, transparent 82%),
    radial-gradient(ellipse at center, rgba(84,108,124,.075), rgba(84,108,124,.032) 58%, transparent 82%);
  background-position: 17% 22%, 74% 18%, 8% 57%, 53% 69%, 91% 78%, 28% 90%, 50% 54%;
  background-size: 10% 8%, 8% 7%, 9% 10%, 10% 8%, 8% 7%, 7% 6%, 74% 58%;
  background-repeat: no-repeat;
  filter: blur(.06px) saturate(.92);
  animation: diaryTearScatteredWetBloom 7600ms cubic-bezier(.18,.72,.16,1) both;
}
.diary-letter-view.paper-water.is-water-arriving .diary-tear-effect::after {
  opacity: .32;
  background-image:
    radial-gradient(ellipse at center, transparent 0 28%, rgba(64,92,110,.12) 29% 29.8%, transparent 32%),
    radial-gradient(ellipse at center, transparent 0 31%, rgba(64,92,110,.095) 32% 32.7%, transparent 35%),
    radial-gradient(ellipse at center, transparent 0 34%, rgba(64,92,110,.082) 35% 35.7%, transparent 38%),
    radial-gradient(ellipse at center, transparent 0 35%, rgba(64,92,110,.07) 36% 36.6%, transparent 39%),
    radial-gradient(ellipse at center, transparent 0 38%, rgba(64,92,110,.055) 39% 39.6%, transparent 42%),
    radial-gradient(ellipse 18% 42% at 38% 64%, rgba(255,255,255,.12), transparent 74%),
    radial-gradient(ellipse 16% 36% at 72% 70%, rgba(255,255,255,.09), transparent 74%);
  background-position: 17% 22%, 74% 18%, 8% 57%, 53% 69%, 91% 78%, 38% 64%, 72% 70%;
  background-size: 20% 15%, 18% 13%, 20% 24%, 25% 18%, 18% 15%, 34% 58%, 28% 48%;
  background-repeat: no-repeat;
  filter: blur(.22px);
  mix-blend-mode: multiply;
  animation: diaryTearScatteredRings 7600ms cubic-bezier(.2,.76,.18,1) both;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect {
  opacity: .72;
  transform: translateZ(0) scale(1.012);
  animation: diaryTearSettledBreath 13000ms ease-in-out infinite alternate;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before {
  opacity: .44;
  background-image:
    radial-gradient(ellipse at center, rgba(58,82,98,.078), rgba(72,96,112,.036) 52%, transparent 80%),
    radial-gradient(ellipse at center, rgba(58,82,98,.056), rgba(72,96,112,.027) 54%, transparent 82%),
    radial-gradient(ellipse at center, rgba(58,82,98,.052), rgba(72,96,112,.025) 54%, transparent 82%),
    radial-gradient(ellipse at center, rgba(58,82,98,.06), rgba(72,96,112,.028) 54%, transparent 82%),
    radial-gradient(ellipse at center, rgba(58,82,98,.046), transparent 80%),
    radial-gradient(ellipse at center, rgba(58,82,98,.035), transparent 80%),
    radial-gradient(ellipse at center, rgba(84,108,124,.055), rgba(84,108,124,.024) 58%, transparent 82%);
  background-position: 17% 22%, 74% 18%, 8% 57%, 53% 69%, 91% 78%, 28% 90%, 50% 54%;
  background-size: 48% 34%, 38% 28%, 42% 52%, 58% 44%, 42% 32%, 32% 24%, 112% 86%;
  background-repeat: no-repeat;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
  opacity: .18;
  background-image:
    radial-gradient(ellipse at center, transparent 0 55%, rgba(64,92,110,.055) 56% 56.6%, transparent 58.5%),
    radial-gradient(ellipse at center, transparent 0 56%, rgba(64,92,110,.045) 57% 57.6%, transparent 59.4%),
    radial-gradient(ellipse at center, transparent 0 60%, rgba(64,92,110,.038) 61% 61.5%, transparent 63.5%),
    radial-gradient(ellipse at center, transparent 0 62%, rgba(64,92,110,.035) 63% 63.5%, transparent 65.2%),
    radial-gradient(ellipse at center, transparent 0 64%, rgba(64,92,110,.028) 65% 65.5%, transparent 67.2%);
  background-position: 17% 22%, 74% 18%, 8% 57%, 53% 69%, 91% 78%;
  background-size: 60% 44%, 48% 36%, 58% 68%, 78% 58%, 58% 44%;
  background-repeat: no-repeat;
  filter: blur(.5px);
}
@keyframes diaryTearScatteredArrive {
  0% { opacity: 0; transform: translate3d(0, -10px, 0) scale(.96); }
  18% { opacity: .56; transform: translate3d(-1px, -2px, 0) scale(.985); }
  48% { opacity: .82; transform: translate3d(0, 1px, 0) scale(1.006); }
  100% { opacity: .72; transform: translate3d(0, 2px, 0) scale(1.012); }
}
@keyframes diaryTearScatteredWetBloom {
  0% {
    background-size: 4% 3%, 3% 3%, 4% 5%, 4% 3%, 3% 3%, 3% 2%, 24% 18%;
    opacity: 0;
    filter: blur(.03px) saturate(1);
  }
  24% {
    background-size: 18% 13%, 14% 10%, 16% 22%, 22% 16%, 16% 12%, 12% 9%, 62% 48%;
    opacity: .82;
    filter: blur(.1px) saturate(.95);
  }
  58% {
    background-size: 37% 26%, 30% 22%, 34% 42%, 46% 34%, 34% 26%, 24% 18%, 96% 74%;
    opacity: .58;
    filter: blur(.4px) saturate(.9);
  }
  100% {
    background-size: 48% 34%, 38% 28%, 42% 52%, 58% 44%, 42% 32%, 32% 24%, 112% 86%;
    opacity: .44;
    filter: blur(.62px) saturate(.86);
  }
}
@keyframes diaryTearScatteredRings {
  0%, 12% {
    background-size: 7% 5%, 6% 4%, 7% 8%, 8% 6%, 6% 5%, 12% 20%, 10% 18%;
    opacity: 0;
    transform: scale(.98);
  }
  38% {
    background-size: 28% 20%, 22% 16%, 28% 32%, 34% 25%, 24% 19%, 28% 46%, 23% 40%;
    opacity: .32;
    transform: scale(1);
  }
  72% {
    background-size: 50% 36%, 40% 30%, 50% 58%, 66% 48%, 48% 36%, 42% 66%, 34% 58%;
    opacity: .22;
    transform: scale(1.016);
  }
  100% {
    background-size: 60% 44%, 48% 36%, 58% 68%, 78% 58%, 58% 44%, 48% 72%, 40% 64%;
    opacity: .16;
    transform: scale(1.028);
  }
}
@keyframes diaryTearScatteredFibers {
  0% { opacity: .04; filter: blur(.08px) saturate(1); }
  28% { opacity: .25; filter: blur(.18px) saturate(.94); }
  70% { opacity: .18; filter: blur(.28px) saturate(.9); }
  100% { opacity: .11; filter: blur(.32px) saturate(.88); }
}
@keyframes diaryTearScatteredLight {
  0% { opacity: .03; transform: translate3d(0, -7px, 0); }
  30% { opacity: .22; transform: translate3d(0, 0, 0); }
  72% { opacity: .15; transform: translate3d(0, 6px, 0); }
  100% { opacity: .09; transform: translate3d(0, 9px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .diary-letter-view.paper-water .diary-tear-effect::before {
    background-image:
      radial-gradient(ellipse at center, rgba(58,82,98,.07), rgba(72,96,112,.034) 52%, transparent 80%),
      radial-gradient(ellipse at center, rgba(58,82,98,.052), rgba(72,96,112,.026) 54%, transparent 82%),
      radial-gradient(ellipse at center, rgba(58,82,98,.047), rgba(72,96,112,.023) 54%, transparent 82%),
      radial-gradient(ellipse at center, rgba(58,82,98,.055), rgba(72,96,112,.026) 54%, transparent 82%),
      radial-gradient(ellipse at center, rgba(58,82,98,.04), transparent 80%),
      radial-gradient(ellipse at center, rgba(84,108,124,.05), rgba(84,108,124,.022) 58%, transparent 82%);
    background-position: 17% 22%, 74% 18%, 8% 57%, 53% 69%, 91% 78%, 50% 54%;
    background-size: 48% 34%, 38% 28%, 42% 52%, 58% 44%, 42% 32%, 112% 86%;
    background-repeat: no-repeat;
  }
  .diary-letter-view.paper-water .diary-tear-effect::after { opacity: .07; }
}
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::before {
  background-image:
    radial-gradient(ellipse at center, rgba(58,82,98,.07), rgba(72,96,112,.034) 52%, transparent 80%),
    radial-gradient(ellipse at center, rgba(58,82,98,.052), rgba(72,96,112,.026) 54%, transparent 82%),
    radial-gradient(ellipse at center, rgba(58,82,98,.047), rgba(72,96,112,.023) 54%, transparent 82%),
    radial-gradient(ellipse at center, rgba(58,82,98,.055), rgba(72,96,112,.026) 54%, transparent 82%),
    radial-gradient(ellipse at center, rgba(58,82,98,.04), transparent 80%),
    radial-gradient(ellipse at center, rgba(84,108,124,.05), rgba(84,108,124,.022) 58%, transparent 82%);
  background-position: 17% 22%, 74% 18%, 8% 57%, 53% 69%, 91% 78%, 50% 54%;
  background-size: 48% 34%, 38% 28%, 42% 52%, 58% 44%, 42% 32%, 112% 86%;
  background-repeat: no-repeat;
}
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::after { opacity: .07; }


/* ===== Diary tear stain v4: endless crying ripple loop ===== */
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect {
  opacity: .76;
  transform: translateZ(0) scale(1.012);
  animation: diaryTearCryingBreath 18000ms ease-in-out infinite alternate;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before {
  opacity: .5;
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,.62) 0 7%, rgba(142,164,170,.18) 24%, rgba(58,82,98,.09) 48%, transparent 78%),
    radial-gradient(ellipse at center, rgba(58,82,98,.13), rgba(72,96,112,.062) 48%, transparent 80%),
    radial-gradient(ellipse at center, rgba(84,108,124,.078), rgba(84,108,124,.034) 55%, transparent 82%),
    radial-gradient(ellipse at center, rgba(84,108,124,.052), rgba(84,108,124,.022) 58%, transparent 84%);
  background-position: 18% 24%, 18% 24%, 18% 24%, 50% 54%;
  background-size: 0 0, 0 0, 0 0, 112% 86%;
  background-repeat: no-repeat;
  filter: blur(.42px) saturate(.88);
  animation: diaryTearCryingWet 26000ms cubic-bezier(.2,.72,.18,1) infinite;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
  opacity: .22;
  background-image:
    radial-gradient(ellipse at center, transparent 0 31%, rgba(64,92,110,.105) 32% 32.8%, transparent 35%),
    radial-gradient(ellipse at center, transparent 0 48%, rgba(64,92,110,.06) 49% 49.7%, transparent 52%),
    radial-gradient(ellipse 16% 42% at center, rgba(255,255,255,.13), transparent 74%);
  background-position: 18% 24%, 18% 24%, 18% 38%;
  background-size: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  filter: blur(.28px);
  mix-blend-mode: multiply;
  animation: diaryTearCryingRings 26000ms cubic-bezier(.22,.76,.18,1) infinite;
}
@keyframes diaryTearCryingBreath {
  from { opacity: .68; filter: blur(.22px) saturate(.9); }
  to { opacity: .8; filter: blur(.38px) saturate(.86); }
}
@keyframes diaryTearCryingWet {
  0% {
    opacity: .34;
    background-position: 18% 24%, 18% 24%, 18% 24%, 50% 54%;
    background-size: 0 0, 0 0, 0 0, 112% 86%;
  }
  4% {
    opacity: .62;
    background-position: 18% 24%, 18% 24%, 18% 24%, 50% 54%;
    background-size: 11% 8%, 18% 13%, 30% 22%, 112% 86%;
  }
  16% {
    opacity: .44;
    background-position: 18% 24%, 18% 24%, 18% 24%, 50% 54%;
    background-size: 28% 20%, 48% 34%, 72% 52%, 112% 86%;
  }
  20% {
    opacity: .3;
    background-position: 18% 24%, 18% 24%, 18% 24%, 50% 54%;
    background-size: 0 0, 0 0, 0 0, 112% 86%;
  }
  20.01% {
    background-position: 73% 19%, 73% 19%, 73% 19%, 50% 54%;
  }
  24% {
    opacity: .6;
    background-position: 73% 19%, 73% 19%, 73% 19%, 50% 54%;
    background-size: 9% 7%, 16% 12%, 26% 20%, 112% 86%;
  }
  36% {
    opacity: .42;
    background-position: 73% 19%, 73% 19%, 73% 19%, 50% 54%;
    background-size: 24% 18%, 40% 30%, 62% 46%, 112% 86%;
  }
  40% {
    opacity: .3;
    background-position: 73% 19%, 73% 19%, 73% 19%, 50% 54%;
    background-size: 0 0, 0 0, 0 0, 112% 86%;
  }
  40.01% {
    background-position: 10% 58%, 10% 58%, 10% 58%, 50% 54%;
  }
  44% {
    opacity: .58;
    background-position: 10% 58%, 10% 58%, 10% 58%, 50% 54%;
    background-size: 10% 12%, 18% 24%, 30% 42%, 112% 86%;
  }
  56% {
    opacity: .4;
    background-position: 10% 58%, 10% 58%, 10% 58%, 50% 54%;
    background-size: 28% 34%, 46% 58%, 68% 76%, 112% 86%;
  }
  60% {
    opacity: .3;
    background-position: 10% 58%, 10% 58%, 10% 58%, 50% 54%;
    background-size: 0 0, 0 0, 0 0, 112% 86%;
  }
  60.01% {
    background-position: 56% 70%, 56% 70%, 56% 70%, 50% 54%;
  }
  64% {
    opacity: .6;
    background-position: 56% 70%, 56% 70%, 56% 70%, 50% 54%;
    background-size: 12% 9%, 22% 16%, 34% 25%, 112% 86%;
  }
  76% {
    opacity: .42;
    background-position: 56% 70%, 56% 70%, 56% 70%, 50% 54%;
    background-size: 34% 25%, 58% 44%, 82% 62%, 112% 86%;
  }
  80% {
    opacity: .3;
    background-position: 56% 70%, 56% 70%, 56% 70%, 50% 54%;
    background-size: 0 0, 0 0, 0 0, 112% 86%;
  }
  80.01% {
    background-position: 90% 78%, 90% 78%, 90% 78%, 50% 54%;
  }
  84% {
    opacity: .56;
    background-position: 90% 78%, 90% 78%, 90% 78%, 50% 54%;
    background-size: 9% 7%, 16% 12%, 24% 18%, 112% 86%;
  }
  96% {
    opacity: .38;
    background-position: 90% 78%, 90% 78%, 90% 78%, 50% 54%;
    background-size: 24% 18%, 42% 32%, 60% 44%, 112% 86%;
  }
  100% {
    opacity: .3;
    background-position: 90% 78%, 90% 78%, 90% 78%, 50% 54%;
    background-size: 0 0, 0 0, 0 0, 112% 86%;
  }
}
@keyframes diaryTearCryingRings {
  0%, 2% {
    opacity: 0;
    background-position: 18% 24%, 18% 24%, 18% 40%;
    background-size: 0 0, 0 0, 0 0;
  }
  7% {
    opacity: .26;
    background-position: 18% 24%, 18% 24%, 18% 40%;
    background-size: 28% 20%, 44% 32%, 20% 42%;
  }
  18% {
    opacity: .12;
    background-position: 18% 24%, 18% 24%, 18% 44%;
    background-size: 56% 40%, 78% 56%, 26% 54%;
  }
  20%, 22% {
    opacity: 0;
    background-position: 73% 19%, 73% 19%, 73% 34%;
    background-size: 0 0, 0 0, 0 0;
  }
  27% {
    opacity: .24;
    background-position: 73% 19%, 73% 19%, 73% 34%;
    background-size: 24% 18%, 40% 30%, 18% 38%;
  }
  38% {
    opacity: .11;
    background-position: 73% 19%, 73% 19%, 73% 39%;
    background-size: 48% 36%, 68% 50%, 24% 50%;
  }
  40%, 42% {
    opacity: 0;
    background-position: 10% 58%, 10% 58%, 16% 72%;
    background-size: 0 0, 0 0, 0 0;
  }
  47% {
    opacity: .23;
    background-position: 10% 58%, 10% 58%, 16% 72%;
    background-size: 28% 34%, 42% 54%, 22% 48%;
  }
  58% {
    opacity: .1;
    background-position: 10% 58%, 10% 58%, 22% 78%;
    background-size: 56% 66%, 76% 86%, 28% 58%;
  }
  60%, 62% {
    opacity: 0;
    background-position: 56% 70%, 56% 70%, 62% 82%;
    background-size: 0 0, 0 0, 0 0;
  }
  67% {
    opacity: .25;
    background-position: 56% 70%, 56% 70%, 62% 82%;
    background-size: 32% 24%, 52% 40%, 22% 46%;
  }
  78% {
    opacity: .11;
    background-position: 56% 70%, 56% 70%, 66% 86%;
    background-size: 66% 50%, 90% 68%, 28% 56%;
  }
  80%, 82% {
    opacity: 0;
    background-position: 90% 78%, 90% 78%, 84% 88%;
    background-size: 0 0, 0 0, 0 0;
  }
  87% {
    opacity: .22;
    background-position: 90% 78%, 90% 78%, 84% 88%;
    background-size: 24% 18%, 42% 32%, 18% 34%;
  }
  98% {
    opacity: .09;
    background-position: 90% 78%, 90% 78%, 78% 91%;
    background-size: 50% 38%, 72% 54%, 22% 42%;
  }
  100% {
    opacity: 0;
    background-position: 90% 78%, 90% 78%, 78% 91%;
    background-size: 0 0, 0 0, 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diary-letter-view.paper-water.is-water-settled .diary-tear-effect,
  .diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before,
  .diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
    animation: none !important;
  }
}
[data-reduce-motion="true"] .diary-letter-view.paper-water.is-water-settled .diary-tear-effect,
[data-reduce-motion="true"] .diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before,
[data-reduce-motion="true"] .diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
  animation: none !important;
}


/* ===== Diary tear stain v5: irregular unfixed crying loop ===== */
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect {
  opacity: .76;
  transform: translateZ(0) scale(1.01);
  animation: diaryTearUnfixedBreath 21000ms ease-in-out infinite alternate;
  will-change: opacity, filter;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before {
  opacity: .52;
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,.66) 0 6%, rgba(142,164,170,.2) 23%, rgba(58,82,98,.1) 48%, transparent 79%),
    radial-gradient(ellipse at center, rgba(58,82,98,.13), rgba(72,96,112,.06) 48%, transparent 80%),
    radial-gradient(ellipse at center, rgba(84,108,124,.076), rgba(84,108,124,.032) 56%, transparent 83%),
    radial-gradient(ellipse at center, rgba(84,108,124,.048), rgba(84,108,124,.02) 58%, transparent 84%);
  background-position: 14% 18%, 14% 18%, 14% 18%, 50% 54%;
  background-size: 0 0, 0 0, 0 0, 112% 86%;
  background-repeat: no-repeat;
  filter: blur(.36px) saturate(.88);
  animation: diaryTearUnfixedWet 47000ms linear infinite;
  will-change: background-position, background-size, opacity, filter;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
  opacity: .2;
  background-image:
    radial-gradient(ellipse at center, transparent 0 30%, rgba(64,92,110,.1) 31% 31.7%, transparent 34.6%),
    radial-gradient(ellipse at center, transparent 0 47%, rgba(64,92,110,.058) 48% 48.7%, transparent 51.5%),
    radial-gradient(ellipse 15% 40% at center, rgba(255,255,255,.12), transparent 75%);
  background-position: 47% 22%, 47% 22%, 47% 36%;
  background-size: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  filter: blur(.24px) saturate(.9);
  mix-blend-mode: multiply;
  animation: diaryTearUnfixedRings 39000ms linear infinite;
  will-change: background-position, background-size, opacity, filter;
}
@keyframes diaryTearUnfixedBreath {
  0% { opacity: .66; filter: blur(.18px) saturate(.92); }
  45% { opacity: .78; filter: blur(.3px) saturate(.88); }
  100% { opacity: .71; filter: blur(.24px) saturate(.9); }
}
@keyframes diaryTearUnfixedWet {
  0%, 1.2% { opacity: .26; background-position: 14% 18%, 14% 18%, 14% 18%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  3.8% { opacity: .62; background-position: 14% 18%, 14% 18%, 14% 18%, 50% 54%; background-size: 10% 8%, 18% 13%, 31% 22%, 112% 86%; }
  8.4% { opacity: .42; background-position: 14% 18%, 14% 18%, 14% 18%, 50% 54%; background-size: 30% 21%, 50% 35%, 73% 53%, 112% 86%; }
  10%, 10.01% { opacity: .24; background-position: 68% 14%, 68% 14%, 68% 14%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  12.8% { opacity: .58; background-position: 68% 14%, 68% 14%, 68% 14%, 50% 54%; background-size: 8% 7%, 15% 11%, 26% 19%, 112% 86%; }
  18.5% { opacity: .4; background-position: 68% 14%, 68% 14%, 68% 14%, 50% 54%; background-size: 25% 18%, 42% 30%, 63% 45%, 112% 86%; }
  20%, 20.01% { opacity: .24; background-position: 31% 36%, 31% 36%, 31% 36%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  23.2% { opacity: .64; background-position: 31% 36%, 31% 36%, 31% 36%, 50% 54%; background-size: 11% 9%, 20% 15%, 34% 25%, 112% 86%; }
  28.8% { opacity: .43; background-position: 31% 36%, 31% 36%, 31% 36%, 50% 54%; background-size: 32% 23%, 54% 39%, 78% 56%, 112% 86%; }
  30%, 30.01% { opacity: .24; background-position: 86% 33%, 86% 33%, 86% 33%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  33% { opacity: .57; background-position: 86% 33%, 86% 33%, 86% 33%, 50% 54%; background-size: 8% 7%, 16% 12%, 27% 21%, 112% 86%; }
  38.6% { opacity: .38; background-position: 86% 33%, 86% 33%, 86% 33%, 50% 54%; background-size: 25% 19%, 45% 34%, 65% 49%, 112% 86%; }
  40%, 40.01% { opacity: .24; background-position: 12% 55%, 12% 55%, 12% 55%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  43.4% { opacity: .62; background-position: 12% 55%, 12% 55%, 12% 55%, 50% 54%; background-size: 10% 13%, 18% 25%, 31% 43%, 112% 86%; }
  48.7% { opacity: .41; background-position: 12% 55%, 12% 55%, 12% 55%, 50% 54%; background-size: 30% 36%, 48% 60%, 70% 80%, 112% 86%; }
  50%, 50.01% { opacity: .24; background-position: 58% 51%, 58% 51%, 58% 51%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  53.1% { opacity: .6; background-position: 58% 51%, 58% 51%, 58% 51%, 50% 54%; background-size: 9% 8%, 18% 13%, 30% 22%, 112% 86%; }
  58.2% { opacity: .4; background-position: 58% 51%, 58% 51%, 58% 51%, 50% 54%; background-size: 29% 21%, 52% 38%, 76% 55%, 112% 86%; }
  60%, 60.01% { opacity: .24; background-position: 38% 73%, 38% 73%, 38% 73%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  63.5% { opacity: .63; background-position: 38% 73%, 38% 73%, 38% 73%, 50% 54%; background-size: 12% 10%, 22% 18%, 36% 28%, 112% 86%; }
  68.6% { opacity: .42; background-position: 38% 73%, 38% 73%, 38% 73%, 50% 54%; background-size: 36% 28%, 60% 46%, 84% 64%, 112% 86%; }
  70%, 70.01% { opacity: .24; background-position: 76% 69%, 76% 69%, 76% 69%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  72.9% { opacity: .56; background-position: 76% 69%, 76% 69%, 76% 69%, 50% 54%; background-size: 8% 7%, 16% 12%, 28% 20%, 112% 86%; }
  78.8% { opacity: .39; background-position: 76% 69%, 76% 69%, 76% 69%, 50% 54%; background-size: 27% 20%, 48% 36%, 69% 52%, 112% 86%; }
  80%, 80.01% { opacity: .24; background-position: 24% 88%, 24% 88%, 24% 88%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  83.7% { opacity: .59; background-position: 24% 88%, 24% 88%, 24% 88%, 50% 54%; background-size: 8% 7%, 15% 12%, 25% 18%, 112% 86%; }
  88.4% { opacity: .36; background-position: 24% 88%, 24% 88%, 24% 88%, 50% 54%; background-size: 24% 18%, 41% 30%, 58% 42%, 112% 86%; }
  90%, 90.01% { opacity: .24; background-position: 91% 83%, 91% 83%, 91% 83%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
  93.2% { opacity: .55; background-position: 91% 83%, 91% 83%, 91% 83%, 50% 54%; background-size: 8% 6%, 15% 11%, 24% 17%, 112% 86%; }
  98.6% { opacity: .35; background-position: 91% 83%, 91% 83%, 91% 83%, 50% 54%; background-size: 22% 16%, 39% 29%, 56% 41%, 112% 86%; }
  100% { opacity: .24; background-position: 91% 83%, 91% 83%, 91% 83%, 50% 54%; background-size: 0 0, 0 0, 0 0, 112% 86%; }
}
@keyframes diaryTearUnfixedRings {
  0%, 1.5% { opacity: 0; background-position: 47% 22%, 47% 22%, 47% 35%; background-size: 0 0, 0 0, 0 0; }
  4.7% { opacity: .22; background-position: 47% 22%, 47% 22%, 47% 35%; background-size: 24% 18%, 42% 31%, 18% 38%; }
  9% { opacity: .08; background-position: 47% 22%, 47% 22%, 50% 41%; background-size: 54% 40%, 78% 58%, 23% 50%; }
  10.6%, 10.61% { opacity: 0; background-position: 82% 17%, 82% 17%, 78% 31%; background-size: 0 0, 0 0, 0 0; }
  14% { opacity: .21; background-position: 82% 17%, 82% 17%, 78% 31%; background-size: 22% 16%, 38% 28%, 16% 34%; }
  18.5% { opacity: .08; background-position: 82% 17%, 82% 17%, 76% 37%; background-size: 48% 36%, 68% 50%, 21% 46%; }
  21.2%, 21.21% { opacity: 0; background-position: 17% 39%, 17% 39%, 22% 54%; background-size: 0 0, 0 0, 0 0; }
  24.8% { opacity: .24; background-position: 17% 39%, 17% 39%, 22% 54%; background-size: 26% 22%, 44% 38%, 20% 42%; }
  29.1% { opacity: .09; background-position: 17% 39%, 17% 39%, 27% 61%; background-size: 56% 48%, 80% 68%, 26% 54%; }
  31.8%, 31.81% { opacity: 0; background-position: 62% 39%, 62% 39%, 58% 53%; background-size: 0 0, 0 0, 0 0; }
  35.2% { opacity: .22; background-position: 62% 39%, 62% 39%, 58% 53%; background-size: 25% 18%, 44% 32%, 18% 38%; }
  40% { opacity: .08; background-position: 62% 39%, 62% 39%, 55% 59%; background-size: 56% 42%, 82% 60%, 24% 50%; }
  42.4%, 42.41% { opacity: 0; background-position: 27% 61%, 27% 61%, 34% 76%; background-size: 0 0, 0 0, 0 0; }
  46.1% { opacity: .23; background-position: 27% 61%, 27% 61%, 34% 76%; background-size: 26% 25%, 45% 48%, 20% 46%; }
  50.3% { opacity: .09; background-position: 27% 61%, 27% 61%, 40% 82%; background-size: 58% 62%, 82% 88%, 26% 58%; }
  53%, 53.01% { opacity: 0; background-position: 93% 57%, 93% 57%, 84% 70%; background-size: 0 0, 0 0, 0 0; }
  56.8% { opacity: .2; background-position: 93% 57%, 93% 57%, 84% 70%; background-size: 21% 16%, 39% 30%, 15% 34%; }
  61% { opacity: .075; background-position: 93% 57%, 93% 57%, 78% 76%; background-size: 48% 36%, 70% 52%, 21% 44%; }
  63.6%, 63.61% { opacity: 0; background-position: 45% 82%, 45% 82%, 52% 92%; background-size: 0 0, 0 0, 0 0; }
  67.2% { opacity: .23; background-position: 45% 82%, 45% 82%, 52% 92%; background-size: 28% 21%, 50% 38%, 20% 42%; }
  71.8% { opacity: .08; background-position: 45% 82%, 45% 82%, 58% 96%; background-size: 60% 45%, 86% 64%, 25% 50%; }
  74.2%, 74.21% { opacity: 0; background-position: 70% 91%, 70% 91%, 65% 96%; background-size: 0 0, 0 0, 0 0; }
  78% { opacity: .2; background-position: 70% 91%, 70% 91%, 65% 96%; background-size: 22% 16%, 42% 30%, 16% 34%; }
  82.6% { opacity: .07; background-position: 70% 91%, 70% 91%, 60% 98%; background-size: 50% 36%, 74% 54%, 20% 42%; }
  84.8%, 84.81% { opacity: 0; background-position: 8% 78%, 8% 78%, 16% 90%; background-size: 0 0, 0 0, 0 0; }
  88.5% { opacity: .22; background-position: 8% 78%, 8% 78%, 16% 90%; background-size: 24% 20%, 42% 38%, 18% 40%; }
  93% { opacity: .08; background-position: 8% 78%, 8% 78%, 24% 95%; background-size: 52% 48%, 76% 70%, 24% 54%; }
  95.4%, 95.41% { opacity: 0; background-position: 55% 66%, 55% 66%, 60% 79%; background-size: 0 0, 0 0, 0 0; }
  98.4% { opacity: .2; background-position: 55% 66%, 55% 66%, 60% 79%; background-size: 22% 16%, 40% 30%, 16% 34%; }
  100% { opacity: 0; background-position: 55% 66%, 55% 66%, 64% 85%; background-size: 44% 32%, 66% 48%, 20% 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .diary-letter-view.paper-water.is-water-settled .diary-tear-effect,
  .diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before,
  .diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
    animation: none !important;
    will-change: auto;
  }
}
[data-reduce-motion="true"] .diary-letter-view.paper-water.is-water-settled .diary-tear-effect,
[data-reduce-motion="true"] .diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before,
[data-reduce-motion="true"] .diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
  animation: none !important;
  will-change: auto;
}


/* ===== Diary tear stain v6: real falling tear events ===== */
.diary-letter-view.paper-water .diary-tear-effect {
  inset: -12% -14%;
  overflow: hidden;
  opacity: .72;
  transform: translateZ(0);
  will-change: auto;
}
.diary-letter-view.paper-water:not(.is-water-arriving) .diary-tear-effect {
  animation: none !important;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before,
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after {
  animation: none !important;
  transform: none !important;
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::before {
  opacity: .18;
  background-image:
    radial-gradient(ellipse 62% 48% at 45% 54%, rgba(84,108,124,.048), rgba(84,108,124,.02) 58%, transparent 82%),
    radial-gradient(ellipse 42% 30% at 72% 76%, rgba(84,108,124,.032), transparent 78%);
  background-size: 100% 100%, 100% 100%;
  background-position: center;
  filter: blur(.46px) saturate(.88);
}
.diary-letter-view.paper-water.is-water-settled .diary-tear-effect::after { opacity: 0; }
.diary-tear-bed,
.diary-tear-live,
.diary-tear-memory {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.diary-tear-bed {
  opacity: .24;
  background:
    radial-gradient(ellipse 56% 42% at 27% 29%, rgba(84,108,124,.035), transparent 78%),
    radial-gradient(ellipse 48% 36% at 74% 32%, rgba(84,108,124,.028), transparent 80%),
    radial-gradient(ellipse 72% 52% at 50% 75%, rgba(84,108,124,.03), transparent 84%),
    repeating-linear-gradient(104deg, transparent 0 10px, rgba(74,97,110,.026) 11px 12px, transparent 13px 30px);
  filter: blur(.22px) saturate(.88);
  mix-blend-mode: multiply;
}
.diary-tear-memory { mix-blend-mode: multiply; }
.diary-tear-live { z-index: 2; mix-blend-mode: multiply; }
.diary-tear-drop,
.diary-tear-stain {
  position: absolute;
  left: var(--tear-x, 50%);
  top: var(--tear-y, 50%);
  display: block;
  pointer-events: none;
  border-radius: 48% 52% 54% 46%;
  transform-origin: center;
}
.diary-tear-drop {
  width: calc(46px * var(--tear-size, 1) * var(--tear-wide, 1));
  height: calc(38px * var(--tear-size, 1));
  margin-left: calc(-23px * var(--tear-size, 1) * var(--tear-wide, 1));
  margin-top: calc(-19px * var(--tear-size, 1));
  opacity: 0;
  background:
    radial-gradient(ellipse 12% 13% at 50% 48%, rgba(255,255,255,.72), rgba(166,188,194,.3) 34%, transparent 64%),
    radial-gradient(ellipse 36% 26% at 50% 50%, rgba(58,82,98,.16), rgba(72,96,112,.075) 48%, transparent 78%),
    radial-gradient(ellipse 74% 56% at 50% 52%, rgba(84,108,124,.09), rgba(84,108,124,.035) 56%, transparent 83%);
  filter: blur(.08px) saturate(.92);
  transform: rotate(var(--tear-tilt, 0deg)) scale(.16);
  animation: diaryTearDropTouch 3200ms cubic-bezier(.17,.78,.16,1) both;
}
.diary-tear-drop::before,
.diary-tear-drop::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.diary-tear-drop::before {
  background:
    radial-gradient(ellipse at center, transparent 0 28%, rgba(64,92,110,.16) 29% 29.8%, transparent 32%),
    radial-gradient(ellipse at center, transparent 0 45%, rgba(64,92,110,.082) 46% 46.7%, transparent 49%);
  filter: blur(.12px);
  animation: diaryTearDropRing 3200ms cubic-bezier(.2,.78,.18,1) both;
}
.diary-tear-drop::after {
  inset: -38% 18% auto;
  height: 86%;
  border-radius: 48% 52% 60% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(112,140,150,.075) 38%, transparent 84%);
  opacity: 0;
  transform: translateY(-8px) scaleY(.62);
  animation: diaryTearTouchGleam 1100ms ease-out both;
}
.diary-tear-stain {
  width: calc(58px * var(--tear-size, 1) * var(--tear-wide, 1));
  height: calc(46px * var(--tear-size, 1));
  margin-left: calc(-29px * var(--tear-size, 1) * var(--tear-wide, 1));
  margin-top: calc(-23px * var(--tear-size, 1));
  opacity: var(--stain-alpha, .1);
  background:
    radial-gradient(ellipse 48% 36% at 50% 48%, rgba(58,82,98,.22), rgba(72,96,112,.09) 45%, transparent 76%),
    radial-gradient(ellipse 94% 72% at 50% 52%, rgba(84,108,124,.12), rgba(84,108,124,.044) 58%, transparent 86%);
  filter: blur(.58px) saturate(.86);
  mix-blend-mode: multiply;
  transform: rotate(var(--tear-tilt, 0deg)) scale(.72);
  animation: diaryTearStainSettle 1700ms cubic-bezier(.22,.72,.18,1) both;
}
@keyframes diaryTearDropTouch {
  0% { opacity: 0; transform: rotate(var(--tear-tilt, 0deg)) translateY(-5px) scale(.08); filter: blur(.02px) saturate(1.02); }
  8% { opacity: .68; transform: rotate(var(--tear-tilt, 0deg)) translateY(0) scale(.34); filter: blur(.02px) saturate(1); }
  18% { opacity: var(--tear-alpha, .52); transform: rotate(var(--tear-tilt, 0deg)) scale(.76); filter: blur(.08px) saturate(.94); }
  46% { opacity: .36; transform: rotate(var(--tear-tilt, 0deg)) scale(1.74); filter: blur(.34px) saturate(.88); }
  76% { opacity: .15; transform: rotate(var(--tear-tilt, 0deg)) scale(2.35); filter: blur(.68px) saturate(.84); }
  100% { opacity: 0; transform: rotate(var(--tear-tilt, 0deg)) scale(2.72); filter: blur(.9px) saturate(.82); }
}
@keyframes diaryTearDropRing {
  0%, 7% { opacity: 0; transform: scale(.28); }
  16% { opacity: .46; transform: scale(.72); }
  48% { opacity: .22; transform: scale(1.75); }
  100% { opacity: 0; transform: scale(2.85); }
}
@keyframes diaryTearTouchGleam {
  0% { opacity: 0; transform: translateY(-8px) scaleY(.42); }
  18% { opacity: .34; transform: translateY(0) scaleY(.86); }
  100% { opacity: 0; transform: translateY(10px) scaleY(1.08); }
}
@keyframes diaryTearStainSettle {
  0% { opacity: 0; transform: rotate(var(--tear-tilt, 0deg)) scale(.36); filter: blur(.2px) saturate(.94); }
  55% { opacity: var(--stain-alpha, .1); transform: rotate(var(--tear-tilt, 0deg)) scale(1.06); filter: blur(.52px) saturate(.88); }
  100% { opacity: var(--stain-alpha, .1); transform: rotate(var(--tear-tilt, 0deg)) scale(1.16); filter: blur(.68px) saturate(.84); }
}
@media (prefers-reduced-motion: reduce) {
  .diary-tear-live,
  .diary-tear-memory { display: none !important; }
  .diary-letter-view.paper-water .diary-tear-effect,
  .diary-letter-view.paper-water .diary-tear-effect::before,
  .diary-letter-view.paper-water .diary-tear-effect::after {
    animation: none !important;
  }
}
[data-reduce-motion="true"] .diary-tear-live,
[data-reduce-motion="true"] .diary-tear-memory { display: none !important; }
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect,
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::before,
[data-reduce-motion="true"] .diary-letter-view.paper-water .diary-tear-effect::after {
  animation: none !important;
}


/* ===== Diary tear stain v7: softer organic tear motion ===== */
.diary-letter-view.paper-water .diary-tear-effect {
  opacity: .7;
}
.diary-tear-bed {
  opacity: .18;
  filter: blur(.34px) saturate(.86);
}
.diary-tear-drop {
  width: calc(50px * var(--tear-size, 1) * var(--tear-wide, 1));
  height: calc(42px * var(--tear-size, 1));
  margin-left: calc(-25px * var(--tear-size, 1) * var(--tear-wide, 1));
  margin-top: calc(-21px * var(--tear-size, 1));
  border-radius: 54% 46% 59% 41% / 46% 54% 48% 52%;
  background:
    radial-gradient(ellipse 10% 11% at 48% 44%, rgba(255,255,255,.68), rgba(170,190,196,.24) 42%, transparent 70%),
    radial-gradient(ellipse 26% 21% at 50% 50%, rgba(58,82,98,.13), rgba(72,96,112,.062) 52%, transparent 80%),
    radial-gradient(ellipse 86% 66% at 52% 54%, rgba(84,108,124,.076), rgba(84,108,124,.028) 60%, transparent 86%),
    radial-gradient(ellipse 34% 76% at 56% 70%, rgba(255,255,255,.08), transparent 82%);
  filter: blur(.06px) saturate(.9);
  transform: rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.08);
  animation: diaryTearDropTouchNatural var(--tear-duration, 4100ms) cubic-bezier(.12,.64,.14,1) both;
}
.diary-tear-drop::before {
  background:
    radial-gradient(ellipse at center, transparent 0 27%, rgba(64,92,110,.118) 28.2% 29.2%, transparent 32.5%),
    radial-gradient(ellipse at center, transparent 0 43%, rgba(64,92,110,.06) 44.5% 45.2%, transparent 49%),
    radial-gradient(ellipse 68% 42% at 52% 56%, rgba(255,255,255,.075), transparent 76%);
  filter: blur(.2px);
  animation: diaryTearDropRingNatural var(--tear-duration, 4100ms) cubic-bezier(.16,.72,.18,1) both;
}
.diary-tear-drop::after {
  inset: -46% 24% auto 20%;
  height: 104%;
  border-radius: 42% 58% 64% 36%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(112,140,150,.055) 42%, transparent 86%);
  transform: translate3d(var(--tear-flow-x-soft-neg, 0px), -10px, 0) scaleY(.46) rotate(var(--tear-tilt-glow, 0deg));
  animation: diaryTearTouchGleamNatural 1500ms cubic-bezier(.18,.68,.18,1) both;
}
.diary-tear-stain {
  width: calc(66px * var(--tear-size, 1) * var(--tear-wide, 1));
  height: calc(52px * var(--tear-size, 1));
  margin-left: calc(-33px * var(--tear-size, 1) * var(--tear-wide, 1));
  margin-top: calc(-26px * var(--tear-size, 1));
  border-radius: 58% 42% 62% 38% / 44% 58% 42% 56%;
  background:
    radial-gradient(ellipse 36% 27% at 48% 47%, rgba(58,82,98,.15), rgba(72,96,112,.058) 48%, transparent 78%),
    radial-gradient(ellipse 104% 76% at 52% 53%, rgba(84,108,124,.1), rgba(84,108,124,.036) 60%, transparent 88%),
    repeating-linear-gradient(106deg, transparent 0 8px, rgba(74,97,110,.018) 9px 10px, transparent 11px 23px);
  filter: blur(.74px) saturate(.82);
  transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-soft, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(.54);
  animation: diaryTearStainSettleNatural var(--stain-duration, 2800ms) cubic-bezier(.18,.66,.2,1) both;
}
@keyframes diaryTearDropTouchNatural {
  0% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-soft-neg, 0px), -4px, 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.06);
    filter: blur(.01px) saturate(1.02);
  }
  7% {
    opacity: .56;
    transform: translate3d(0, 0, 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.28);
    filter: blur(.02px) saturate(.98);
  }
  18% {
    opacity: var(--tear-alpha, .48);
    transform: translate3d(var(--tear-flow-x-tiny, 0px), var(--tear-flow-y-tiny, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.72, .62);
    filter: blur(.08px) saturate(.92);
  }
  39% {
    opacity: .34;
    transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-mid, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-strong, 0deg)) scale(1.56, 1.26);
    filter: blur(.34px) saturate(.87);
  }
  68% {
    opacity: .16;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(2.2, 1.76);
    filter: blur(.76px) saturate(.82);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x, 0px), var(--tear-flow-y, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(0deg) scale(2.7, 2.08);
    filter: blur(1.05px) saturate(.8);
  }
}
@keyframes diaryTearDropRingNatural {
  0%, 8% { opacity: 0; transform: rotate(var(--tear-tilt-ring, 0deg)) scale(.18, .14); }
  17% { opacity: .31; transform: rotate(var(--tear-tilt-ring, 0deg)) scale(.68, .48); }
  43% { opacity: .16; transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-soft, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) scale(1.62, 1.12); }
  100% { opacity: 0; transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) rotate(0deg) scale(2.74, 1.82); }
}
@keyframes diaryTearTouchGleamNatural {
  0% { opacity: 0; transform: translate3d(var(--tear-flow-x-soft-neg, 0px), -10px, 0) scaleY(.42); }
  22% { opacity: .22; transform: translate3d(0, 0, 0) scaleY(.82); }
  72% { opacity: .06; transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-glow, 0px), 0) scaleY(1.04); }
  100% { opacity: 0; transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y, 0px), 0) scaleY(1.12); }
}
@keyframes diaryTearStainSettleNatural {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.32, .25);
    filter: blur(.2px) saturate(.92);
  }
  38% {
    opacity: .085;
    transform: translate3d(var(--tear-flow-x-tiny, 0px), var(--tear-flow-y-tiny, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-strong, 0deg)) scale(.92, .78);
    filter: blur(.62px) saturate(.84);
  }
  100% {
    opacity: var(--stain-alpha, .09);
    transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-soft, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-soft, 0deg)) scale(1.18, 1.02);
    filter: blur(.9px) saturate(.8);
  }
}



/* ===== Diary tear stain v8: slow downward absorption ===== */
.diary-letter-view.paper-water .diary-tear-effect {
  opacity: .62;
}
.diary-letter-view.paper-water .diary-tear-bed {
  opacity: .13;
  filter: blur(.5px) saturate(.78);
}
.diary-letter-view.paper-water .diary-tear-drop {
  width: calc(46px * var(--tear-size, 1) * var(--tear-wide, 1));
  height: calc(58px * var(--tear-size, 1));
  margin-left: calc(-23px * var(--tear-size, 1) * var(--tear-wide, 1));
  margin-top: calc(-29px * var(--tear-size, 1));
  border-radius: 51% 49% 57% 43% / 38% 42% 66% 62%;
  background:
    radial-gradient(ellipse 12% 9% at 48% 28%, rgba(255,255,255,.52), rgba(196,208,204,.16) 45%, transparent 74%),
    radial-gradient(ellipse 30% 24% at 50% 39%, rgba(70,92,100,.088), rgba(80,104,112,.038) 58%, transparent 84%),
    radial-gradient(ellipse 38% 74% at 52% 66%, rgba(62,88,98,.086), rgba(84,108,116,.035) 55%, transparent 88%),
    linear-gradient(176deg, transparent 0 31%, rgba(78,102,110,.055) 45%, rgba(78,102,110,.026) 72%, transparent 100%);
  box-shadow:
    0 2px 8px rgba(72,96,104,.035),
    inset 0 1px 8px rgba(255,255,255,.14);
  filter: blur(.12px) saturate(.82);
  mix-blend-mode: multiply;
  transform: translate3d(var(--tear-flow-x-soft-neg, 0px), -3px, 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.08, .06);
  animation: diaryTearDropSeep var(--tear-duration, 7000ms) cubic-bezier(.16,.54,.18,1) both;
}
.diary-letter-view.paper-water .diary-tear-drop::before {
  inset: -58% -70% -46%;
  border-radius: 46% 54% 58% 42% / 42% 50% 60% 58%;
  background:
    radial-gradient(ellipse 46% 34% at 50% 42%, rgba(255,255,255,.08), rgba(82,108,116,.042) 44%, transparent 76%),
    radial-gradient(ellipse 74% 58% at 51% 58%, rgba(70,94,104,.052), rgba(86,110,120,.022) 58%, transparent 89%);
  filter: blur(1.35px) saturate(.78);
  opacity: 0;
  transform: translate3d(var(--tear-flow-x-tiny, 0px), 0, 0) scale(.28, .2) rotate(var(--tear-tilt-ring, 0deg));
  animation: diaryTearSoftWetEdge var(--tear-duration, 7000ms) cubic-bezier(.18,.62,.22,1) both;
}
.diary-letter-view.paper-water .diary-tear-drop::after {
  inset: 20% 32% -18% 34%;
  border-radius: 46% 54% 68% 32% / 34% 40% 72% 66%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(124,146,148,.062) 34%, rgba(72,96,104,.038) 72%, transparent 100%),
    radial-gradient(ellipse 80% 30% at 54% 18%, rgba(255,255,255,.18), transparent 70%);
  filter: blur(.42px);
  opacity: 0;
  transform: translate3d(var(--tear-flow-x-soft, 0px), 0, 0) scale(.54, .18) rotate(var(--tear-tilt-glow, 0deg));
  animation: diaryTearDownTrace 3600ms cubic-bezier(.2,.62,.28,1) both;
}
.diary-letter-view.paper-water .diary-tear-stain {
  width: calc(58px * var(--tear-size, 1) * var(--tear-wide, 1));
  height: calc(72px * var(--tear-size, 1));
  margin-left: calc(-29px * var(--tear-size, 1) * var(--tear-wide, 1));
  margin-top: calc(-34px * var(--tear-size, 1));
  border-radius: 53% 47% 59% 41% / 39% 44% 68% 62%;
  opacity: 0;
  background:
    radial-gradient(ellipse 34% 48% at 50% 44%, rgba(56,78,88,.1), rgba(70,94,104,.044) 48%, transparent 80%),
    radial-gradient(ellipse 54% 88% at 52% 61%, rgba(82,106,116,.086), rgba(82,106,116,.03) 61%, transparent 90%),
    repeating-linear-gradient(102deg, transparent 0 9px, rgba(68,92,102,.015) 10px 11px, transparent 12px 25px),
    repeating-linear-gradient(5deg, transparent 0 14px, rgba(255,255,255,.018) 15px 16px, transparent 17px 31px);
  filter: blur(.92px) saturate(.76);
  mix-blend-mode: multiply;
  transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-soft, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(.42, .36);
  animation: diaryTearAbsorbStain var(--stain-duration, 6500ms) cubic-bezier(.18,.58,.22,1) both;
}
@keyframes diaryTearDropSeep {
  0% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-soft-neg, 0px), -3px, 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.08, .06);
    filter: blur(.02px) saturate(.95);
  }
  8% {
    opacity: .36;
    transform: translate3d(0, 0, 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.28, .2);
    filter: blur(.03px) saturate(.9);
  }
  22% {
    opacity: var(--tear-alpha, .34);
    transform: translate3d(var(--tear-flow-x-tiny, 0px), var(--tear-flow-y-tiny, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-soft, 0deg)) scale(.74, .9);
    filter: blur(.16px) saturate(.84);
  }
  48% {
    opacity: .18;
    transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-mid, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(1.16, 1.68);
    filter: blur(.52px) saturate(.78);
  }
  74% {
    opacity: .075;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) skew(var(--tear-skew-strong, 0deg)) scale(1.34, 2.18);
    filter: blur(1.12px) saturate(.72);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(1.42, 2.38);
    filter: blur(1.65px) saturate(.68);
  }
}
@keyframes diaryTearSoftWetEdge {
  0%, 6% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-tiny, 0px), 0, 0) scale(.2, .14) rotate(var(--tear-tilt-ring, 0deg));
  }
  24% {
    opacity: .13;
    transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-soft, 0px), 0) scale(.92, .72) rotate(var(--tear-tilt-ring, 0deg));
  }
  58% {
    opacity: .07;
    transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-mid, 0px), 0) scale(1.7, 1.42) rotate(var(--tear-tilt-ring, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) scale(2.18, 1.84) rotate(var(--tear-tilt-soft, 0deg));
  }
}
@keyframes diaryTearDownTrace {
  0%, 12% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-soft, 0px), -1px, 0) scale(.48, .16) rotate(var(--tear-tilt-glow, 0deg));
  }
  30% {
    opacity: .18;
    transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-tiny, 0px), 0) scale(.62, .78) rotate(var(--tear-tilt-glow, 0deg));
  }
  62% {
    opacity: .055;
    transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-glow, 0px), 0) scale(.82, 1.42) rotate(var(--tear-tilt-soft, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) scale(.98, 1.9) rotate(var(--tear-tilt-soft, 0deg));
  }
}
@keyframes diaryTearAbsorbStain {
  0% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-soft, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(.38, .32);
    filter: blur(.38px) saturate(.84);
  }
  20% {
    opacity: var(--stain-alpha, .075);
    transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-mid, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(.92, 1.08);
    filter: blur(.72px) saturate(.78);
  }
  58% {
    opacity: var(--stain-alpha, .075);
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) skew(var(--tear-skew-strong, 0deg)) scale(1.16, 1.48);
    filter: blur(1.08px) saturate(.72);
  }
  100% {
    opacity: .035;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(1.26, 1.66);
    filter: blur(1.5px) saturate(.68);
  }
}


/* ===== Diary tear stain v9: softened fall-in and handoff ===== */
.diary-letter-view.paper-water .diary-tear-drop {
  opacity: 0;
  background:
    radial-gradient(ellipse 10% 7% at 48% 22%, rgba(255,255,255,.42), rgba(202,212,208,.11) 46%, transparent 78%),
    radial-gradient(ellipse 26% 20% at 50% 38%, rgba(68,90,98,.072), rgba(80,104,112,.032) 58%, transparent 86%),
    radial-gradient(ellipse 36% 78% at 52% 67%, rgba(60,86,96,.074), rgba(84,108,116,.03) 57%, transparent 90%),
    linear-gradient(178deg, transparent 0 29%, rgba(78,102,110,.046) 46%, rgba(78,102,110,.022) 76%, transparent 100%);
  filter: blur(.24px) saturate(.78);
  animation: diaryTearDropFallSeep var(--tear-duration, 8400ms) cubic-bezier(.2,.58,.18,1) both;
}
.diary-letter-view.paper-water .diary-tear-drop::before {
  opacity: 0;
  background:
    radial-gradient(ellipse 40% 30% at 50% 38%, rgba(255,255,255,.065), rgba(82,108,116,.032) 48%, transparent 80%),
    radial-gradient(ellipse 76% 62% at 51% 61%, rgba(70,94,104,.04), rgba(86,110,120,.018) 60%, transparent 91%);
  filter: blur(1.8px) saturate(.72);
  animation: diaryTearWetEdgeHandoff var(--tear-duration, 8400ms) cubic-bezier(.22,.6,.18,1) both;
}
.diary-letter-view.paper-water .diary-tear-drop::after {
  inset: 8% 36% -28% 37%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(124,146,148,.045) 38%, rgba(72,96,104,.032) 78%, transparent 100%),
    radial-gradient(ellipse 76% 28% at 52% 14%, rgba(255,255,255,.13), transparent 76%);
  filter: blur(.7px);
  animation: diaryTearFallingThread 5200ms cubic-bezier(.22,.62,.28,1) both;
}
.diary-letter-view.paper-water .diary-tear-stain {
  opacity: 0;
  filter: blur(1.1px) saturate(.72);
  animation: diaryTearMemoryAbsorbSoft var(--stain-duration, 7800ms) cubic-bezier(.22,.56,.2,1) both;
}
@keyframes diaryTearDropFallSeep {
  0% {
    opacity: 0;
    transform: translate3d(var(--tear-fall-x, 0px), var(--tear-fall-y-neg, -20px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.06, .10);
    filter: blur(1.6px) saturate(.7);
  }
  10% {
    opacity: .028;
    transform: translate3d(var(--tear-fall-x, 0px), var(--tear-fall-y-soft, -12px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-soft, 0deg)) scale(.10, .19);
    filter: blur(1.1px) saturate(.72);
  }
  22% {
    opacity: .12;
    transform: translate3d(var(--tear-flow-x-tiny, 0px), -1px, 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-soft, 0deg)) scale(.22, .30);
    filter: blur(.5px) saturate(.76);
  }
  34% {
    opacity: var(--tear-alpha, .28);
    transform: translate3d(0, 0, 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew, 0deg)) scale(.50, .56);
    filter: blur(.18px) saturate(.82);
  }
  44% {
    opacity: .19;
    transform: translate3d(var(--tear-flow-x-tiny, 0px), var(--tear-flow-y-tiny, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-soft, 0deg)) scale(.74, .82);
    filter: blur(.32px) saturate(.79);
  }
  56% {
    opacity: .13;
    transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-soft, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(.98, 1.14);
    filter: blur(.62px) saturate(.75);
  }
  70% {
    opacity: .072;
    transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-mid, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(1.10, 1.42);
    filter: blur(1.05px) saturate(.72);
  }
  86% {
    opacity: .030;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) skew(var(--tear-skew-strong, 0deg)) scale(1.20, 1.68);
    filter: blur(1.58px) saturate(.69);
  }
  100% {
    opacity: .012;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(1.26, 1.82);
    filter: blur(1.96px) saturate(.64);
  }
}
@keyframes diaryTearWetEdgeHandoff {
  0%, 12% {
    opacity: 0;
    transform: translate3d(var(--tear-fall-x, 0px), var(--tear-fall-y-light, -8px), 0) scale(.16, .18) rotate(var(--tear-tilt-ring, 0deg));
  }
  34% {
    opacity: .075;
    transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-tiny, 0px), 0) scale(.72, .58) rotate(var(--tear-tilt-ring, 0deg));
  }
  62% {
    opacity: .048;
    transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-mid, 0px), 0) scale(1.34, 1.28) rotate(var(--tear-tilt-soft, 0deg));
  }
  90% {
    opacity: .018;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) scale(1.92, 1.8) rotate(var(--tear-tilt-soft, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y, 0px), 0) scale(2.06, 1.94) rotate(var(--tear-tilt-soft, 0deg));
  }
}
@keyframes diaryTearFallingThread {
  0%, 14% {
    opacity: 0;
    transform: translate3d(var(--tear-fall-x, 0px), var(--tear-fall-y-long, -16px), 0) scale(.26, .08) rotate(var(--tear-tilt-glow, 0deg));
  }
  28% {
    opacity: .095;
    transform: translate3d(var(--tear-flow-x-tiny, 0px), -2px, 0) scale(.42, .42) rotate(var(--tear-tilt-glow, 0deg));
  }
  49% {
    opacity: .075;
    transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-soft, 0px), 0) scale(.58, 1.02) rotate(var(--tear-tilt-soft, 0deg));
  }
  76% {
    opacity: .025;
    transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-glow, 0px), 0) scale(.76, 1.72) rotate(var(--tear-tilt-soft, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) scale(.86, 2.12) rotate(var(--tear-tilt-soft, 0deg));
  }
}
@keyframes diaryTearMemoryAbsorbSoft {
  0% {
    opacity: .014;
    transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-tiny, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(.58, .64);
    filter: blur(.72px) saturate(.76);
  }
  18% {
    opacity: var(--stain-alpha, .072);
    transform: translate3d(var(--tear-flow-x-soft, 0px), var(--tear-flow-y-soft, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(.84, .96);
    filter: blur(.96px) saturate(.74);
  }
  42% {
    opacity: .063;
    transform: translate3d(var(--tear-flow-x-mid, 0px), var(--tear-flow-y-mid, 0px), 0) rotate(var(--tear-tilt, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(1.02, 1.12);
    filter: blur(1.14px) saturate(.72);
  }
  72% {
    opacity: .052;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y-long, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) skew(var(--tear-skew-strong, 0deg)) scale(1.12, 1.26);
    filter: blur(1.44px) saturate(.69);
  }
  100% {
    opacity: .042;
    transform: translate3d(var(--tear-flow-x-long, 0px), var(--tear-flow-y, 0px), 0) rotate(var(--tear-tilt-soft, 0deg)) skew(var(--tear-skew-mid, 0deg)) scale(1.18, 1.36);
    filter: blur(1.72px) saturate(.66);
  }
}

/* ===== 2026-07-20 AI companion reading drawer ===== */
.lnyy-reader-pulse{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 10px;padding:11px;border:1px solid rgba(31,40,54,.08);border-radius:8px;background:rgba(255,255,255,.72);box-shadow:0 18px 38px rgba(24,34,48,.08),inset 0 1px rgba(255,255,255,.78)}
.lnyy-reader-pulse div:first-child{min-width:0}.lnyy-reader-pulse span,.lnyy-reader-pulse small{display:block;color:rgba(38,47,61,.52);font-size:11px;line-height:1.35}.lnyy-reader-pulse strong{display:block;margin:3px 0;color:#141923;font-size:14px;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lnyy-reader-pulse p{margin:0 0 4px;color:rgba(31,39,51,.64);font-size:12px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lnyy-reader-pulse-actions{display:flex;gap:6px;align-items:center}.lnyy-reader-pulse-actions .btn{width:auto;padding:7px 10px;font-size:12px;white-space:nowrap}
.lnyy-companion-drawer{flex-shrink:0;margin:8px 0 7px;padding:10px;border:1px solid rgba(58,52,40,.09);border-radius:8px;background:rgba(255,255,250,.72);box-shadow:0 12px 26px rgba(31,34,24,.08),inset 0 1px rgba(255,255,255,.74)}
.lnyy-companion-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.lnyy-companion-head div{min-width:0}.lnyy-companion-head span,.lnyy-companion-foot small{color:rgba(36,40,31,.5);font-size:11px;line-height:1.3}.lnyy-companion-head strong{display:block;margin-top:2px;color:#171911;font-size:14px;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lnyy-companion-head em{flex-shrink:0;color:rgba(36,40,31,.58);font-size:12px;font-style:normal;font-weight:800}.lnyy-companion-drawer p{margin:7px 0;color:rgba(32,34,26,.68);font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lnyy-companion-foot{margin-bottom:8px}.lnyy-companion-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.lnyy-companion-actions button{min-width:0;min-height:30px;padding:0 6px;border:0;border-radius:999px;background:rgba(31,40,54,.08);color:#151922;font-size:11px;font-weight:760;line-height:1.15;white-space:normal}
.lnyy-followup-card{margin-top:10px;padding:10px;border:1px solid rgba(31,40,54,.08);border-radius:8px;background:rgba(255,255,255,.68);color:rgba(25,31,42,.72)}.lnyy-followup-card strong{display:block;margin-bottom:4px;color:#141923;font-size:13px}.lnyy-followup-card p{margin:0;font-size:12px;line-height:1.55}
@media(max-width:370px){.lnyy-reader-pulse{grid-template-columns:1fr;padding:9px}.lnyy-reader-pulse-actions{justify-content:flex-end}.lnyy-companion-drawer{padding:8px;margin-top:7px}.lnyy-companion-drawer p{margin:5px 0;-webkit-line-clamp:1}.lnyy-companion-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.lnyy-companion-actions button{min-height:28px;font-size:11px}.lnyy-draft-panel{max-height:92px}}
[data-theme="dark"] .lnyy-reader-pulse,body.dark-mode .lnyy-reader-pulse,[data-theme="dark"] .lnyy-companion-drawer,body.dark-mode .lnyy-companion-drawer,[data-theme="dark"] .lnyy-followup-card,body.dark-mode .lnyy-followup-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);box-shadow:none}[data-theme="dark"] .lnyy-reader-pulse strong,body.dark-mode .lnyy-reader-pulse strong,[data-theme="dark"] .lnyy-companion-head strong,body.dark-mode .lnyy-companion-head strong,[data-theme="dark"] .lnyy-followup-card strong,body.dark-mode .lnyy-followup-card strong{color:#f7f8fa}[data-theme="dark"] .lnyy-reader-pulse p,body.dark-mode .lnyy-reader-pulse p,[data-theme="dark"] .lnyy-companion-drawer p,body.dark-mode .lnyy-companion-drawer p,[data-theme="dark"] .lnyy-followup-card,body.dark-mode .lnyy-followup-card{color:rgba(244,246,248,.72)}[data-theme="dark"] .lnyy-companion-actions button,body.dark-mode .lnyy-companion-actions button{background:rgba(255,255,255,.12);color:#f7f8fa}
/* ===== Diary App v10: art long-letter layouts ===== */
.diary-hero-actions { display: flex; align-items: center; gap: 10px; }
.diary-hero-buttons { display: flex; gap: 7px; justify-content: flex-end; }
.diary-hero-buttons .diary-style-btn { flex: 0 0 auto; }
.diary-style-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.diary-layout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.diary-layout-grid button { min-height: 58px; border: 1px solid rgba(98,78,76,.15); border-radius: 13px; padding: 9px 10px; display: grid; gap: 4px; text-align: left; background: rgba(255,255,255,.36); color: rgba(55,43,43,.74); }
.diary-layout-grid button strong { font-size: 13px; line-height: 1.2; }
.diary-layout-grid button em { font-style: normal; font-size: 10px; line-height: 1.3; color: rgba(62,49,49,.48); }
.diary-layout-grid button.is-active { color: #2f2929; border-color: rgba(125,91,91,.36); background: rgba(255,255,255,.78); box-shadow: 0 8px 18px rgba(80,50,55,.1); }
.diary-gallery-panel { position: absolute; left: 12px; right: 12px; top: calc(66px + var(--safe-top-inset, 0px)); z-index: 35; max-height: calc(100% - 96px - var(--safe-bottom-inset, 0px)); overflow: auto; padding: 14px; border-radius: 22px; color: #312b2b; background: rgba(250,247,242,.94); border: 1px solid rgba(96,72,70,.12); box-shadow: 0 24px 58px rgba(42,30,30,.2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.diary-gallery-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.diary-gallery-tools button { border: 0; border-radius: 999px; padding: 9px 13px; color: #fff; background: #3f3b3b; font-size: 12px; font-weight: 700; }
.diary-gallery-tools small { min-width: 0; color: rgba(51,43,43,.56); font-size: 11px; line-height: 1.35; text-align: right; }
.diary-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.diary-gallery-grid figure { position: relative; aspect-ratio: 1; margin: 0; border-radius: 8px; overflow: hidden; background: #e9e6e1; }
.diary-gallery-grid img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1) contrast(.88) brightness(1.05); }
.diary-gallery-grid button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.48); font-size: 15px; line-height: 1; }
.diary-gallery-empty { grid-column: 1 / -1; padding: 24px 10px; color: rgba(56,46,46,.52); border: 1px dashed rgba(98,78,76,.18); border-radius: 14px; text-align: center; font-size: 12px; }
.diary-letter-view.art-long { align-items: stretch; justify-items: center; padding: calc(42px + var(--safe-top-inset, 0px)) 12px calc(24px + var(--safe-bottom-inset, 0px)); overflow: hidden; background: rgba(22,22,22,.34); }
.diary-letter-view.art-long .diary-letter-stage { position: relative; width: min(100%, 390px); height: 100%; overflow-y: auto; overflow-x: hidden; padding: 18px 10px 30px; box-sizing: border-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.diary-letter-view.art-long .diary-letter-stage::-webkit-scrollbar { display: none; }
.diary-letter-view.art-long .diary-unseal-scene { top: 10%; }
.diary-letter-view.art-long .diary-art-paper { width: min(100%, 342px); min-height: 760px; max-height: none; aspect-ratio: auto; display: block; margin: 0 auto; padding: 0; overflow: hidden; color: #2f2f2f; border-radius: 2px; clip-path: none; background:
  radial-gradient(circle at 24% 12%, rgba(0,0,0,.025), transparent 18%),
  radial-gradient(circle at 84% 52%, rgba(0,0,0,.02), transparent 20%),
  repeating-linear-gradient(91deg, rgba(30,30,30,.018) 0 1px, transparent 1px 9px),
  linear-gradient(180deg, #f8f8f6, #ededeb 48%, #f7f7f5 100%);
  box-shadow: 0 28px 70px rgba(16,16,16,.32), inset 0 0 0 1px rgba(20,20,20,.07), inset 0 0 80px rgba(80,80,80,.08); }
.diary-letter-view.art-long .diary-art-paper::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .34; background-image:
  radial-gradient(circle, rgba(40,40,40,.13) 0 1px, transparent 1.4px),
  radial-gradient(circle, rgba(255,255,255,.64) 0 1px, transparent 1.6px); background-size: 19px 27px, 31px 35px; background-position: 2px 8px, 11px 14px; mix-blend-mode: multiply; }
.diary-letter-view.art-long .diary-art-paper::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.05), transparent 12%, transparent 88%, rgba(0,0,0,.045)); }
.diary-letter-view.art-long .diary-art-paper > * { position: relative; z-index: 1; }
.diary-letter-view.art-long .diary-art-paper header { display: flex; justify-content: space-between; gap: 12px; padding: 22px 24px 0; color: rgba(40,40,40,.48); font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.diary-letter-view.art-long .diary-art-paper h2 { margin: 0; color: rgba(28,28,28,.82); font: 600 25px/1.22 Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif; letter-spacing: 0; text-align: left; }
.diary-art-body { display: block; padding: 0 42px 28px; text-align: left; }
.diary-art-body p { margin: 0 0 18px; color: rgba(32,32,32,.78); font: 14px/2.05 Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif; letter-spacing: 0; overflow-wrap: anywhere; word-break: break-word; }
.diary-art-body p:last-child { margin-bottom: 0; }
.diary-art-figure { position: relative; margin: 0; overflow: hidden; background: linear-gradient(135deg, #dadada, #f6f6f6); }
.diary-art-figure img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1) contrast(.82) brightness(1.08); mix-blend-mode: multiply; }
.diary-art-figure figcaption { position: absolute; right: 8px; bottom: 6px; color: rgba(24,24,24,.36); font: italic 10px/1.2 Georgia, serif; letter-spacing: 0; }
.diary-art-figure.is-empty span { width: 100%; height: 100%; display: block; background: repeating-linear-gradient(105deg, rgba(0,0,0,.04) 0 1px, transparent 1px 9px), radial-gradient(circle at 42% 38%, rgba(0,0,0,.08), transparent 34%); }
.layout-banner .diary-art-banner-head { padding: 18px 0 30px; }
.layout-banner .banner-main { width: 72%; height: 138px; margin-left: 28%; border-top: 1px solid rgba(30,30,30,.22); border-bottom: 1px solid rgba(30,30,30,.12); }
.layout-banner .banner-main figcaption { left: 8px; right: auto; bottom: 8px; width: auto; text-align: left; }
.layout-banner .diary-art-banner-head > div { padding: 34px 42px 0; }
.layout-banner .diary-art-banner-head small,
.diary-art-title-center small,
.diary-art-fragment-head small { display: block; margin-bottom: 9px; color: rgba(40,40,40,.42); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.layout-banner .diary-art-banner-head p { max-width: 230px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(20,20,20,.2); color: rgba(45,45,45,.46); font: italic 13px/1.55 Georgia, serif; letter-spacing: 0; }
.layout-fragments .diary-art-fragment-head { display: grid; grid-template-columns: 1fr 132px; gap: 14px; align-items: end; padding: 34px 28px 18px; }
.layout-fragments .diary-art-fragment-head > div { min-width: 0; }
.layout-fragments .diary-art-fragment-head i { display: block; width: 92%; height: 1px; margin-top: 16px; background: rgba(20,20,20,.22); }
.layout-fragments .fragment-main { height: 172px; border-radius: 1px; box-shadow: 10px 12px 22px rgba(0,0,0,.08); }
.layout-fragments .fragment-main figcaption { margin-top: 6px; text-align: right; }
.diary-art-decor { margin: 0 42px 34px; color: rgba(28,28,28,.42); font: italic 13px/1.6 Georgia, serif; letter-spacing: 0; }
.diary-art-slices { display: grid; grid-template-columns: 1fr .72fr 1.1fr; gap: 2px; width: 72%; height: 74px; margin: 6px auto 30px; opacity: .62; }
.diary-art-slices i { background: linear-gradient(135deg, rgba(0,0,0,.12), rgba(255,255,255,.1)), repeating-linear-gradient(90deg, rgba(0,0,0,.11) 0 1px, transparent 1px 8px); }
.layout-film .diary-art-title-center { padding: 72px 38px 36px; text-align: center; }
.layout-film .diary-art-title-center h2 { text-align: center; font-size: 23px; }
.layout-film .diary-art-title-center p { max-width: 240px; margin: 18px auto 0; padding-top: 14px; border-top: 1px solid rgba(20,20,20,.22); color: rgba(40,40,40,.48); font: italic 13px/1.55 Georgia, serif; }
.diary-art-film-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 74%; height: 70px; margin: 4px auto 32px; }
.diary-art-film-strip .film-cell { height: 70px; border-radius: 1px; }
.diary-art-film-strip .film-cell figcaption { display: none; }
.layout-film .diary-art-body.is-tail { padding-top: 0; padding-bottom: 54px; }
@media (max-width: 370px), (max-height: 650px) {
  .diary-hero-actions { gap: 7px; }
  .diary-hero-buttons { gap: 5px; }
  .diary-gallery-panel { left: 8px; right: 8px; padding: 12px; }
  .diary-letter-view.art-long { padding-left: 8px; padding-right: 8px; }
  .diary-letter-view.art-long .diary-letter-stage { padding-left: 6px; padding-right: 6px; }
  .diary-letter-view.art-long .diary-art-paper { width: min(100%, 318px); min-height: 700px; }
  .diary-letter-view.art-long .diary-art-paper header { padding-left: 20px; padding-right: 20px; font-size: 9px; }
  .diary-letter-view.art-long .diary-art-paper h2 { font-size: 21px; }
  .diary-art-body { padding-left: 30px; padding-right: 30px; }
  .diary-art-body p { font-size: 13px; line-height: 1.95; }
  .layout-fragments .diary-art-fragment-head { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; }
  .layout-fragments .fragment-main { height: 116px; }
  .layout-banner .banner-main { width: 78%; margin-left: 22%; height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .diary-letter-view.art-long .diary-letter-stage { scroll-behavior: auto; }
}
/* ===== Diary App v11 gallery layout previews ===== */
.diary-hero-actions { flex-direction: column; align-items: flex-end; gap: 6px; }
.diary-hero p { max-width: 154px; }
.diary-gallery-tools { align-items: flex-start; }
.diary-gallery-tool-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.diary-gallery-tool-actions button:nth-child(2) { background: #6f5f61; }
.diary-art-photo-stack { width: 78%; margin: -5px auto 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.diary-art-photo-stack .banner-thumb { height: 54px; border-radius: 1px; transform: rotate(-.6deg); }
.diary-art-photo-stack .banner-thumb:nth-child(2n) { transform: translateY(8px) rotate(.8deg); }
.diary-art-photo-stack .banner-thumb figcaption,
.diary-art-slices .fragment-slice figcaption,
.diary-art-film-strip .film-cell figcaption { display: none; }
.diary-art-slices { grid-template-columns: .9fr 1.12fr .72fr .96fr; width: 82%; height: 84px; gap: 3px; opacity: .74; }
.diary-art-slices .fragment-slice { height: 84px; border-radius: 1px; box-shadow: 0 8px 16px rgba(0,0,0,.055); }
.diary-art-slices .fragment-slice:nth-child(2) { transform: translateY(9px); }
.diary-art-slices .fragment-slice:nth-child(3) { transform: translateY(-5px); }
.diary-art-film-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 84%; height: 68px; gap: 2px; }
.diary-art-film-strip .film-cell { height: 68px; border-radius: 1px; }
.diary-art-film-strip .film-cell::before,
.diary-art-photo-stack .banner-thumb::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.2), transparent 46%, rgba(0,0,0,.08)); }

@media (max-width: 370px), (max-height: 650px) {
  .diary-hero p { max-width: 132px; }
  .diary-gallery-tools { display: grid; gap: 8px; }
  .diary-gallery-tools small { text-align: left; }
  .diary-art-photo-stack { width: 82%; gap: 2px; }
  .diary-art-photo-stack .banner-thumb { height: 44px; }
  .diary-art-slices { width: 84%; height: 68px; }
  .diary-art-slices .fragment-slice { height: 68px; }
  .diary-art-film-strip { width: 86%; height: 56px; }
  .diary-art-film-strip .film-cell { height: 56px; }
}
/* ===== Diary App v12 cinematic letter layouts ===== */
.diary-letter-view.art-long .diary-art-paper {
  background:
    radial-gradient(circle at 18% 10%, rgba(0,0,0,.022), transparent 24%),
    radial-gradient(circle at 88% 64%, rgba(0,0,0,.018), transparent 22%),
    linear-gradient(180deg, #faf9f5 0%, #ecebe7 49%, #f7f6f2 100%);
}
.diary-letter-view.art-long .diary-art-paper h2 { font-size: 24px; line-height: 1.18; }
.diary-art-body { padding: 0 44px 34px; }
.diary-art-body p { margin-bottom: 22px; line-height: 2.18; color: rgba(30,30,30,.74); }
.diary-art-figure img { filter: grayscale(1) contrast(.76) brightness(1.12) saturate(.8); opacity: .92; }
.diary-art-figure figcaption { display: none; }
.diary-cinema-banner-title { padding: 46px 42px 20px; }
.diary-cinema-banner-title small,
.diary-cinema-copy small,
.diary-cinema-end-title small { display: block; margin-bottom: 12px; color: rgba(30,30,30,.38); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.diary-cinema-banner-title p,
.diary-cinema-copy p,
.diary-cinema-end-title p { margin: 16px 0 0; color: rgba(32,32,32,.42); font: italic 13px/1.65 Georgia, serif; letter-spacing: 0; }
.layout-banner .banner-main { width: 76%; height: 132px; margin: 28px 0 42px 24%; border: 0; box-shadow: -18px 18px 0 rgba(0,0,0,.035), inset 0 0 0 1px rgba(20,20,20,.08); }
.layout-banner .diary-art-body { padding-top: 4px; }
.diary-cinema-side { display: grid; grid-template-columns: minmax(0,1fr) 126px; gap: 18px; align-items: end; padding: 48px 28px 28px 42px; }
.diary-cinema-copy { min-width: 0; padding-bottom: 18px; }
.layout-fragments .side-main { height: 224px; border-radius: 1px; box-shadow: -12px 16px 0 rgba(0,0,0,.035), 0 18px 34px rgba(0,0,0,.08); }
.layout-fragments .side-secondary { width: 44%; height: 82px; margin: -10px 42px 34px auto; opacity: .66; box-shadow: 0 10px 22px rgba(0,0,0,.055); }
.layout-fragments .diary-art-body { padding-bottom: 18px; }
.layout-fragments .diary-art-body.is-tail { padding-top: 0; }
.diary-cinema-end-title { padding: 74px 42px 30px; text-align: left; }
.layout-film .diary-cinema-end-title h2 { max-width: 230px; font-size: 23px; text-align: left; }
.layout-film .diary-cinema-end-title p { max-width: 214px; padding-top: 14px; border-top: 1px solid rgba(20,20,20,.18); }
.layout-film .end-main { width: 52%; height: 156px; margin: 0 42px 28px auto; box-shadow: -16px 18px 0 rgba(0,0,0,.035), 0 18px 34px rgba(0,0,0,.07); }
.layout-film .end-secondary { width: 36%; height: 74px; margin: -78px auto 54px 42px; opacity: .62; box-shadow: 0 10px 24px rgba(0,0,0,.055); }
.layout-film .diary-art-body { padding-top: 6px; }
.layout-film .diary-art-body.is-tail { padding-top: 0; padding-bottom: 68px; }
.diary-art-photo-stack,
.diary-art-slices,
.diary-art-film-strip { display: none; }

@media (max-width: 370px), (max-height: 650px) {
  .diary-letter-view.art-long .diary-art-paper h2 { font-size: 21px; }
  .diary-art-body { padding-left: 30px; padding-right: 30px; padding-bottom: 28px; }
  .diary-art-body p { margin-bottom: 18px; line-height: 2.02; }
  .diary-cinema-banner-title { padding: 38px 30px 18px; }
  .layout-banner .banner-main { width: 78%; height: 112px; margin: 24px 0 34px 22%; }
  .diary-cinema-side { grid-template-columns: 1fr; gap: 18px; padding: 38px 30px 22px; }
  .diary-cinema-copy { padding-bottom: 0; }
  .layout-fragments .side-main { height: 168px; }
  .layout-fragments .side-secondary { width: 48%; height: 64px; margin: -4px 30px 28px auto; }
  .diary-cinema-end-title { padding: 58px 30px 26px; }
  .layout-film .end-main { width: 58%; height: 124px; margin-right: 30px; margin-bottom: 24px; }
  .layout-film .end-secondary { width: 42%; height: 58px; margin: -62px auto 42px 30px; }
}
/* ===== Diary App v13 cinematic paper fit and tears ===== */
.diary-app-sheet {
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.18), transparent 32%),
    radial-gradient(circle at 15% 18%, rgba(120,132,148,.08), transparent 26%),
    linear-gradient(180deg, #201f22 0%, #141416 54%, #0f0f10 100%);
}
.diary-app-sheet::before { opacity: .18; }
.diary-app-title span,
.diary-hero span { letter-spacing: .14em; }
.diary-hero strong { font-family: Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif; }
.diary-envelope-card {
  border-radius: 4px 16px 16px 4px;
  background:
    linear-gradient(90deg, rgba(42,36,38,.16) 0 18px, transparent 18px),
    linear-gradient(135deg, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(160deg, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 70%, #ffffff), color-mix(in srgb, var(--diary-paper-color, #f8fafc) 78%, #d9dde4));
}
.diary-envelope-card::before { width: 40px; height: 100%; clip-path: none; background: repeating-linear-gradient(0deg, rgba(30,28,30,.12) 0 1px, transparent 1px 8px); opacity: .34; }
.diary-envelope-card::after { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.03)); }
.diary-letter-view.art-long {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.16), transparent 38%),
    radial-gradient(ellipse at 50% 108%, rgba(0,0,0,.36), transparent 54%),
    rgba(8,8,10,.72);
}
.diary-letter-view.art-long .diary-letter-stage {
  height: 100%;
  min-height: 0;
  align-content: start;
  place-items: start center;
  padding-bottom: 76px;
}
.diary-letter-view.art-long .diary-art-paper {
  min-height: 0;
  height: auto;
  overflow: visible;
  isolation: isolate;
  color: rgba(24,25,27,.9);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 22%, transparent), transparent 24%),
    radial-gradient(circle at 86% 66%, rgba(20,24,30,.025), transparent 28%),
    repeating-linear-gradient(90deg, rgba(40,45,52,.018) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 88%, #ffffff) 0%, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 74%, #eef2f6) 52%, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 86%, #ffffff) 100%);
  box-shadow: 0 34px 82px rgba(0,0,0,.42), inset 0 0 0 1px rgba(28,32,38,.08), inset 0 0 56px rgba(90,106,124,.055);
}
.diary-letter-view.art-long .diary-art-paper::before { z-index: 0; opacity: .22; mix-blend-mode: multiply; }
.diary-letter-view.art-long .diary-art-paper::after { z-index: 1; opacity: .36; }
.diary-letter-view.art-long .diary-art-paper > * { z-index: 3; }
.diary-letter-view.art-long .diary-art-paper h2 {
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: 'Courier New', 'Songti SC', 'SimSun', monospace;
  font-weight: 500;
  letter-spacing: 0;
}
.diary-letter-view.art-long .diary-art-paper header {
  color: rgba(28,31,36,.45);
  font-family: 'Courier New', 'SFMono-Regular', Consolas, monospace;
}
.diary-cinema-banner-title,
.diary-cinema-side,
.diary-cinema-end-title { position: relative; z-index: 4; }
.diary-cinema-banner-title small,
.diary-cinema-copy small,
.diary-cinema-end-title small {
  color: rgba(26,29,34,.42);
  font-family: 'Courier New', 'SFMono-Regular', Consolas, monospace;
}
.diary-cinema-banner-title p,
.diary-cinema-copy p,
.diary-cinema-end-title p {
  max-width: 100%;
  color: rgba(26,29,34,.52);
  font-family: 'Courier New', 'Songti SC', 'SimSun', monospace;
  font-style: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.diary-art-body {
  position: relative;
  z-index: 5;
  overflow: visible;
  padding-bottom: 42px;
}
.diary-art-body p {
  color: rgba(22,24,27,.78);
  font-family: 'Courier New', 'Songti SC', 'SimSun', monospace;
  font-size: 13px;
  line-height: 2.12;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.layout-banner .banner-main {
  display: block;
  width: calc(100% - 82px);
  height: 128px;
  margin: 36px 40px 48px 42px;
  box-shadow: 0 18px 34px rgba(0,0,0,.07), inset 0 0 0 1px rgba(20,24,30,.08);
}
.layout-fragments .side-main,
.layout-film .end-main,
.layout-film .end-secondary,
.layout-fragments .side-secondary { position: relative; z-index: 4; }
.layout-fragments .side-secondary,
.layout-film .end-secondary {
  margin-top: 0;
  margin-bottom: 36px;
}
.layout-film .end-secondary { margin-left: 42px; }
.layout-film .diary-art-body.is-tail { padding-bottom: 80px; }
.diary-letter-view.paper-aged .diary-letter-stage .diary-art-paper,
.diary-letter-view.paper-water .diary-letter-stage .diary-art-paper {
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 22%, transparent), transparent 24%),
    radial-gradient(circle at 86% 66%, rgba(20,24,30,.025), transparent 28%),
    repeating-linear-gradient(90deg, rgba(40,45,52,.018) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 88%, #ffffff) 0%, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 74%, #eef2f6) 52%, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 86%, #ffffff) 100%);
}
.diary-letter-view.paper-water .diary-tear-effect {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: .72;
  mix-blend-mode: multiply;
}
.diary-letter-view.paper-water .diary-tear-effect::before {
  content: '';
  position: absolute;
  left: 12%;
  top: 12%;
  width: 54%;
  height: 34%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 24%, rgba(70,92,108,.18), transparent 34%),
    radial-gradient(ellipse at 68% 58%, rgba(70,92,108,.12), transparent 42%);
  filter: blur(.4px);
  opacity: .72;
}
.diary-letter-view.paper-water .diary-tear-effect::after {
  content: '';
  position: absolute;
  left: 58%;
  top: 18%;
  width: 18%;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(58,82,98,.22), rgba(58,82,98,.08) 54%, transparent);
  filter: blur(.6px);
  opacity: .42;
}
.diary-tear-bed,
.diary-tear-live,
.diary-tear-memory { z-index: 1; }
.diary-letter-view:not(.paper-water) .diary-tear-effect { display: none !important; }

@media (max-width: 370px), (max-height: 650px) {
  .diary-letter-view.art-long .diary-letter-stage { padding: 14px 6px 64px; }
  .diary-letter-view.art-long .diary-art-paper { width: min(100%, 318px); }
  .diary-art-body { padding-left: 28px; padding-right: 28px; padding-bottom: 36px; }
  .diary-art-body p { font-size: 12px; line-height: 2.04; }
  .layout-banner .banner-main { width: calc(100% - 58px); height: 108px; margin: 30px 28px 40px 30px; }
  .layout-film .end-secondary { margin-left: 30px; margin-bottom: 34px; }
  .layout-film .diary-art-body.is-tail { padding-bottom: 68px; }
}
/* ===== Diary App v14 mist archive ink controls ===== */
.diary-app-overlay { background: rgba(236, 240, 244, .32); }
.diary-app-sheet {
  color: #20242a;
  background:
    radial-gradient(circle at 18% 6%, rgba(255,255,255,.96), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(202,211,222,.24), transparent 30%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f5 48%, #f7f8f6 100%);
}
.diary-app-sheet::before {
  opacity: .5;
  background-image:
    linear-gradient(rgba(43,50,62,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,50,62,.026) 1px, transparent 1px),
    radial-gradient(circle at 24% 20%, rgba(95,105,118,.08), transparent 22%);
  background-size: 28px 28px, 34px 34px, 100% 100%;
}
.diary-app-header {
  background: rgba(250,252,253,.8);
  border-bottom-color: rgba(45,55,70,.09);
  box-shadow: 0 12px 28px rgba(37,45,58,.06);
}
.diary-app-title span,
.diary-hero span,
.diary-style-head span,
.diary-style-section > span { color: rgba(39,48,61,.48); }
.diary-app-title strong,
.diary-hero strong { color: #171c24; }
.diary-hero { align-items: flex-start; margin: 4px 0 14px; }
.diary-hero p { max-width: 166px; color: rgba(40,49,62,.62); }
.diary-style-btn {
  color: #273342;
  background: rgba(255,255,255,.68);
  border-color: rgba(38,48,62,.1);
  box-shadow: 0 10px 24px rgba(36,45,58,.1), inset 0 1px rgba(255,255,255,.82);
}
.diary-contact-chip {
  color: rgba(32,40,52,.68);
  background: rgba(255,255,255,.54);
  border-color: rgba(42,52,66,.1);
}
.diary-contact-chip em { background: rgba(44,57,74,.62); }
.diary-contact-chip.is-active {
  color: #171d25;
  background: rgba(255,255,255,.88);
  border-color: rgba(44,57,74,.2);
  box-shadow: 0 10px 24px rgba(37,46,58,.09);
}
.diary-stack {
  height: min(482px, calc(100dvh - 212px));
  min-height: 340px;
}
.diary-envelope-card {
  --ink: var(--diary-ink-color, #20242a);
  border-radius: 3px 13px 13px 3px;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(31,39,50,.12) 0 16px, transparent 16px),
    radial-gradient(circle at 11px 18px, rgba(255,255,255,.72) 0 2px, transparent 2.4px),
    radial-gradient(circle at 11px 42px, rgba(255,255,255,.72) 0 2px, transparent 2.4px),
    linear-gradient(135deg, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(160deg, color-mix(in srgb, var(--diary-paper-color, #f8fafc) 86%, #ffffff), color-mix(in srgb, var(--diary-paper-color, #f8fafc) 72%, #dce3ea));
  box-shadow: 0 18px 42px rgba(37,46,58,.13), inset 0 0 0 1px rgba(43,54,68,.075), inset 0 1px rgba(255,255,255,.72);
}
.diary-envelope-card::before {
  width: 32px;
  background: repeating-linear-gradient(0deg, rgba(35,43,54,.13) 0 1px, transparent 1px 7px);
  opacity: .3;
}
.diary-envelope-card::after { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(33,41,52,.025)); }
.diary-envelope-meta {
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  align-items: flex-start;
}
.diary-envelope-meta i { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diary-envelope-card strong { color: color-mix(in srgb, var(--ink) 92%, #000); }
.diary-envelope-card small,
.diary-envelope-card p { color: color-mix(in srgb, var(--ink) 58%, transparent); }
.diary-envelope-card[data-letter-id^="diary-layout-preview:"] {
  border-radius: 3px 9px 9px 3px;
  box-shadow: 0 20px 46px rgba(36,45,58,.16), inset 0 0 0 1px rgba(43,54,68,.08), inset 0 1px rgba(255,255,255,.78);
}
.diary-envelope-card[data-letter-id^="diary-layout-preview:"] .diary-envelope-meta em {
  min-width: 42px;
  padding: 3px 6px;
  border: 1px solid rgba(34,43,56,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  text-align: center;
}
.diary-style-panel,
.diary-gallery-panel {
  color: #20242a;
  background: rgba(250,252,253,.94);
  border-color: rgba(38,48,62,.11);
  box-shadow: 0 26px 64px rgba(37,46,58,.16), inset 0 1px rgba(255,255,255,.84);
}
.diary-style-head strong { color: #171c24; }
.diary-layout-grid button {
  color: rgba(31,39,51,.74);
  background: rgba(255,255,255,.52);
  border-color: rgba(40,50,64,.1);
}
.diary-layout-grid button em { color: rgba(31,39,51,.48); }
.diary-layout-grid button.is-active {
  color: #171c24;
  background: rgba(255,255,255,.9);
  border-color: rgba(39,50,66,.24);
  box-shadow: 0 10px 22px rgba(37,46,58,.09);
}
.diary-color-grid button,
.diary-color-custom {
  background: rgba(255,255,255,.68);
  border-color: rgba(37,47,60,.12);
  box-shadow: inset 0 1px rgba(255,255,255,.84), 0 6px 14px rgba(37,46,58,.055);
}
.diary-color-grid button.is-active { outline-color: rgba(39,50,66,.38); }
.diary-ink-grid button::before,
.diary-ink-grid .diary-color-custom i {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 1px rgba(24,30,39,.1);
}
.diary-letter-view.art-long {
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.58), transparent 38%),
    linear-gradient(180deg, rgba(236,240,244,.82), rgba(211,218,226,.64));
}
.diary-letter-close {
  color: #202936;
  background: rgba(255,255,255,.84);
  box-shadow: 0 10px 24px rgba(37,46,58,.13);
}
.diary-letter-view.art-long .diary-art-paper {
  color: var(--diary-ink-color, #20242a);
  box-shadow: 0 30px 72px rgba(37,46,58,.24), inset 0 0 0 1px rgba(35,45,58,.08), inset 0 0 56px rgba(86,101,118,.045);
}
.diary-letter-view.art-long .diary-art-paper header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  color: color-mix(in srgb, var(--diary-ink-color, #20242a) 48%, transparent);
  font: 9px/1.45 'Courier New', 'SFMono-Regular', Consolas, monospace;
  letter-spacing: .03em;
  padding: 23px 24px 0;
}
.diary-letter-view.art-long .diary-art-paper header span {
  min-width: 0;
  white-space: nowrap;
}
.diary-letter-view.art-long .diary-art-paper header em {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 5px 7px;
  flex-wrap: wrap;
  text-align: right;
  font-style: normal;
  overflow: visible;
}
.diary-letter-view.art-long .diary-art-paper header b,
.diary-letter-view.art-long .diary-art-paper header i {
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font: inherit;
  font-style: normal;
  font-weight: 400;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.diary-letter-view.art-long .diary-art-paper h2 {
  color: color-mix(in srgb, var(--diary-ink-color, #20242a) 88%, #000);
}
.diary-cinema-banner-title small,
.diary-cinema-copy small,
.diary-cinema-end-title small {
  margin-bottom: 9px;
  color: color-mix(in srgb, var(--diary-ink-color, #20242a) 34%, transparent);
  font: 8px/1 'Courier New', 'SFMono-Regular', Consolas, monospace;
  letter-spacing: .08em;
  text-transform: lowercase;
}
.diary-cinema-banner-title p,
.diary-cinema-copy p,
.diary-cinema-end-title p {
  color: color-mix(in srgb, var(--diary-ink-color, #20242a) 42%, transparent);
  font-size: 10.5px;
  line-height: 1.48;
  letter-spacing: .03em;
}
.diary-art-body p {
  color: color-mix(in srgb, var(--diary-ink-color, #20242a) 78%, transparent);
  line-height: 2.16;
}
.diary-art-figure figcaption { color: color-mix(in srgb, var(--diary-ink-color, #20242a) 28%, transparent); }
.diary-letter-view.age-aged .diary-paper-body p,
.diary-letter-view.age-faded .diary-paper-body p { color: color-mix(in srgb, var(--diary-ink-color, #20242a) 70%, transparent); }

@media (max-width: 370px), (max-height: 650px) {
  .diary-hero { gap: 10px; }
  .diary-hero p { max-width: 142px; font-size: 10px; }
  .diary-stack { min-height: 318px; height: min(430px, calc(100dvh - 202px)); }
  .diary-envelope-meta i { max-width: 42%; }
  .diary-letter-view.art-long .diary-art-paper header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 8.5px;
  }
  .diary-cinema-banner-title small,
  .diary-cinema-copy small,
  .diary-cinema-end-title small { font-size: 7.5px; }
.diary-cinema-banner-title p,
  .diary-cinema-copy p,
  .diary-cinema-end-title p { font-size: 10px; line-height: 1.45; }
}
/* ===== Memory Film tactile refinement 2026-07-22 ===== */
.memory-vertical-film {
  --memory-reel-strength: 0;
}
.memory-vertical-film .memory-day-card {
  animation: memoryFilmSlide 420ms cubic-bezier(.18,.82,.22,1) both;
  will-change: transform, opacity, filter;
}
.memory-vertical-film .memory-day-card::after {
  animation: memoryProjectorFlash 420ms cubic-bezier(.18,.82,.22,1) both;
}
.memory-vertical-film .memory-day-card.is-current {
  transform: translate3d(0, calc(var(--memory-reel-drag) * .28), 0) scale(1);
  transition: transform 420ms cubic-bezier(.18,.82,.22,1), filter 300ms ease;
}
.memory-vertical-film.is-dragging .memory-day-card.is-current {
  animation: none;
  transition: none;
  transform: translate3d(0, calc(var(--memory-reel-drag) * .64), 0) scale(calc(1 + var(--memory-reel-strength) * .018));
  filter: brightness(calc(1 + var(--memory-reel-strength) * .08));
}
.memory-vertical-film.is-dragging .memory-day-card-peek {
  opacity: calc(.36 + var(--memory-reel-strength) * .18);
  filter: grayscale(1) brightness(calc(.82 + var(--memory-reel-strength) * .12)) blur(.2px);
}
.memory-vertical-film.is-dragging .memory-day-card-peek.is-above {
  transform: translate3d(0, calc(-76% + var(--memory-reel-drag) * .36), 0) scale(calc(.84 + var(--memory-reel-strength) * .035));
}
.memory-vertical-film.is-dragging .memory-day-card-peek.is-below {
  transform: translate3d(0, calc(76% + var(--memory-reel-drag) * .36), 0) scale(calc(.84 + var(--memory-reel-strength) * .035));
}
.memory-vertical-film.is-edge-top .memory-day-card.is-current,
.memory-vertical-film.is-edge-bottom .memory-day-card.is-current {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.18,.82,.22,1);
}
.memory-app-overlay.is-opening-memory-day .memory-projector-stage.memory-vertical-projector::before,
.memory-app-overlay.is-opening-memory-day .memory-projector-stage.memory-vertical-projector::after {
  opacity: .32;
  transform: translateX(-50%) scaleX(1.08);
}
.memory-app-overlay.is-opening-memory-day .memory-vertical-film::before {
  filter: brightness(.72) saturate(.86);
}
.memory-app-overlay.is-opening-memory-day .memory-vertical-film .memory-day-card.is-current {
  animation: memoryDayOpenZoom 360ms cubic-bezier(.18,.82,.22,1) both;
}
.memory-day-card.is-memory-fresh {
  animation: memoryFreshFilmSettle 680ms cubic-bezier(.18,.82,.22,1) both;
}
.memory-day-card.is-memory-fresh::after {
  animation: memoryFreshFilmGlow 680ms cubic-bezier(.18,.82,.22,1) both;
}
.memory-day-detail-head {
  animation: memoryDetailHeadIn 280ms cubic-bezier(.18,.82,.22,1) both;
}
.memory-day-detail-list.memory-negative-strip {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 16px 14px 18px;
  border-radius: 24px;
  overflow: hidden;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.62) 0 10px, transparent 10px 25px) left 16px top 16px / 12px calc(100% - 32px) no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.62) 0 10px, transparent 10px 25px) right 16px top 16px / 12px calc(100% - 32px) no-repeat,
    linear-gradient(180deg, rgba(16,17,20,.96), rgba(31,33,37,.94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 42px rgba(0,0,0,.42), 0 24px 54px rgba(12,14,18,.18);
  animation: memoryDayDetailRise 360ms cubic-bezier(.18,.82,.22,1) both;
}
.memory-day-detail-list.memory-negative-strip::before {
  content: '';
  position: absolute;
  inset: 10px 36px;
  z-index: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 36%, rgba(255,255,255,.035));
  pointer-events: none;
}
.memory-day-detail-list.memory-negative-strip .memory-card {
  position: relative;
  z-index: 1;
  margin: 0 22px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  color: #f6f0df;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(42,45,48,.96), rgba(19,21,24,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.26);
}
.memory-day-detail-list.memory-negative-strip .memory-card p,
.memory-day-detail-list.memory-negative-strip .memory-card strong,
.memory-day-detail-list.memory-negative-strip .memory-card span,
.memory-day-detail-list.memory-negative-strip .memory-card em {
  color: inherit;
}
.memory-day-detail-list.memory-negative-strip .memory-card .memory-actions button {
  color: #f8f2e6;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.12);
}
.memory-day-detail-list.memory-negative-strip .memory-card .memory-actions button.danger,
.memory-day-detail-list.memory-negative-strip .memory-card .memory-actions .danger {
  color: #ffd7d7;
  background: rgba(255,76,76,.14);
}
@keyframes memoryFilmSlide {
  0% { opacity: .34; transform: translate3d(0, 54px, 0) scale(.962) rotateX(-4deg); filter: brightness(1.12) saturate(.86) blur(.18px); }
  34% { opacity: .9; transform: translate3d(0, 10px, 0) scale(.992) rotateX(1.4deg); filter: brightness(1.22) saturate(.94); }
  58% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.006) rotateX(-.45deg); filter: brightness(1.05) saturate(1.02); }
  76% { opacity: 1; transform: translate3d(0, 1px, 0) scale(1.001) rotateX(.18deg); filter: brightness(1.01) saturate(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotateX(0); filter: brightness(1) saturate(1); }
}
@keyframes memoryFilmSlidePrev {
  0% { opacity: .34; transform: translate3d(0, -54px, 0) scale(.962) rotateX(4deg); filter: brightness(1.12) saturate(.86) blur(.18px); }
  34% { opacity: .9; transform: translate3d(0, -10px, 0) scale(.992) rotateX(-1.4deg); filter: brightness(1.22) saturate(.94); }
  58% { opacity: 1; transform: translate3d(0, 3px, 0) scale(1.006) rotateX(.45deg); filter: brightness(1.05) saturate(1.02); }
  76% { opacity: 1; transform: translate3d(0, -1px, 0) scale(1.001) rotateX(-.18deg); filter: brightness(1.01) saturate(1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotateX(0); filter: brightness(1) saturate(1); }
}
@keyframes memoryProjectorFlash {
  0% { opacity: 0; transform: translate3d(0, -22%, 0) skewY(-.8deg); }
  18% { opacity: .18; }
  36% { opacity: .035; }
  52% { opacity: .24; }
  72% { opacity: .055; }
  100% { opacity: 0; transform: translate3d(0, 22%, 0) skewY(.4deg); }
}
@keyframes memoryProjectorFlashPrev {
  0% { opacity: 0; transform: translate3d(0, 22%, 0) skewY(.8deg); }
  18% { opacity: .18; }
  36% { opacity: .035; }
  52% { opacity: .24; }
  72% { opacity: .055; }
  100% { opacity: 0; transform: translate3d(0, -22%, 0) skewY(-.4deg); }
}
@keyframes memoryFilmEdgeTop {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  38% { transform: translateY(18px) scale(.988); filter: brightness(1.12); }
  64% { transform: translateY(-4px) scale(1.002); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes memoryFilmEdgeBottom {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  38% { transform: translateY(-18px) scale(.988); filter: brightness(1.12); }
  64% { transform: translateY(4px) scale(1.002); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes memoryDayOpenZoom {
  0% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); opacity: 1; }
  62% { transform: translate3d(0, -4px, 0) scale(1.06); filter: brightness(1.08); opacity: .96; }
  100% { transform: translate3d(0, -8px, 0) scale(1.12); filter: brightness(.72) blur(.35px); opacity: 0; }
}
@keyframes memoryDayDetailRise {
  0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(.985); filter: brightness(.86) blur(.2px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1) blur(0); }
}
@keyframes memoryDetailHeadIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes memoryFreshFilmSettle {
  0% { transform: translate3d(0, 10px, 0) scale(.992); filter: brightness(1.26); }
  48% { transform: translate3d(0, -2px, 0) scale(1.012); filter: brightness(1.16); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}
@keyframes memoryFreshFilmGlow {
  0% { opacity: 0; transform: translateY(-18%); }
  24% { opacity: .46; }
  52% { opacity: .16; }
  76% { opacity: .3; }
  100% { opacity: 0; transform: translateY(18%); }
}
@media (max-width: 370px) {
  .memory-day-detail-list.memory-negative-strip { padding-left: 10px; padding-right: 10px; }
  .memory-day-detail-list.memory-negative-strip .memory-card { margin-left: 18px; margin-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .memory-app-overlay.is-opening-memory-day .memory-vertical-film .memory-day-card.is-current,
  .memory-day-card.is-memory-fresh,
  .memory-day-card.is-memory-fresh::after,
  .memory-day-detail-head,
  .memory-day-detail-list.memory-negative-strip {
    animation: none !important;
    transform: none !important;
  }
}
[data-reduce-motion="true"] .memory-app-overlay.is-opening-memory-day .memory-vertical-film .memory-day-card.is-current,
[data-reduce-motion="true"] .memory-day-card.is-memory-fresh,
[data-reduce-motion="true"] .memory-day-card.is-memory-fresh::after,
[data-reduce-motion="true"] .memory-day-detail-head,
[data-reduce-motion="true"] .memory-day-detail-list.memory-negative-strip {
  animation: none !important;
  transform: none !important;
}
/* ===== Memory day cover presets 2026-07-22 ===== */
.memory-day-card.tone-cover,
.memory-day-card.tone-type,
.memory-day-card.tone-water,
.memory-day-card.tone-press,
.memory-day-card.tone-archive {
  border-radius: 11px;
  letter-spacing: 0;
}
.memory-day-card.tone-cover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(232,232,229,.94)),
    radial-gradient(circle at 75% 17%, rgba(20,20,20,.06), transparent 19%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.024) 0 1px, transparent 1px 8px),
    #f3f3f0;
}
.memory-day-card.tone-cover .memory-day-main { transform: translateY(-2px); }
.memory-day-card.tone-cover .memory-day-frame::before { right: 42%; }
.memory-day-card.tone-cover .memory-day-card-bg { opacity: .14; filter: grayscale(1) contrast(.86) blur(7px); mix-blend-mode: multiply; }

.memory-day-card.tone-type {
  padding: 20px 18px 17px;
  background:
    linear-gradient(180deg, rgba(248,248,246,.9), rgba(226,226,222,.94)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 14px),
    #eeeeea;
}
.memory-day-card.tone-type::before {
  background:
    linear-gradient(90deg, transparent 0 27%, rgba(0,0,0,.1) 27% 28%, transparent 28% 100%),
    radial-gradient(ellipse 58% 26% at 52% 47%, rgba(0,0,0,.16), transparent 67%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.032) 0 1px, transparent 1px 15px);
  opacity: .82;
}
.memory-day-card.tone-type .memory-day-year { justify-self: start; margin-top: 10px; writing-mode: vertical-rl; }
.memory-day-card.tone-type .memory-day-main { justify-self: start; align-self: center; margin-left: 9px; font-size: 55px; transform: rotate(-2deg); }
.memory-day-card.tone-type .memory-day-main::before { left: 17px; top: 12px; color: rgba(0,0,0,.18); filter: blur(6px); transform: scale(1.22) skewX(-9deg); }
.memory-day-card.tone-type .memory-day-main span:first-child { transform: translate(-7px, -16px); }
.memory-day-card.tone-type .memory-day-main span:last-child { transform: translate(7px, 16px); }
.memory-day-card.tone-type .memory-day-main i { font-size: 20px; transform: translateY(0) rotate(18deg); }
.memory-day-card.tone-type .memory-day-caption { width: 70%; margin-left: auto; }
.memory-day-card.tone-type .memory-day-card-bg { opacity: .2; filter: grayscale(1) contrast(1.2) blur(11px); transform: scale(1.12) rotate(-2deg); mix-blend-mode: multiply; }

.memory-day-card.tone-water {
  background:
    radial-gradient(ellipse 78% 46% at 48% 46%, rgba(65,77,82,.1), transparent 74%),
    radial-gradient(ellipse 38% 24% at 70% 64%, rgba(35,45,50,.08), transparent 72%),
    linear-gradient(180deg, rgba(250,251,249,.72), rgba(226,229,226,.92)),
    #eef0ed;
}
.memory-day-card.tone-water::before { background: radial-gradient(ellipse 58% 38% at 52% 48%, rgba(40,55,62,.13), transparent 72%), radial-gradient(circle at 42% 36%, rgba(255,255,255,.56), transparent 11%), repeating-linear-gradient(0deg, rgba(20,30,34,.02) 0 1px, transparent 1px 9px); filter: blur(.35px); opacity: .7; }
.memory-day-card.tone-water::after { filter: blur(18px); opacity: .06; }
.memory-day-card.tone-water .memory-day-main { color: rgba(13,19,22,.82); filter: blur(.08px); }
.memory-day-card.tone-water .memory-day-main::before { color: rgba(34,51,59,.14); filter: blur(9px); }
.memory-day-card.tone-water .memory-day-caption,
.memory-day-card.tone-water .memory-day-meta,
.memory-day-card.tone-water .memory-day-kicker { color: rgba(20,30,34,.5); }
.memory-day-card.tone-water .memory-day-card-bg { opacity: .18; filter: grayscale(1) contrast(.72) blur(15px); transform: scale(1.18); mix-blend-mode: multiply; }

.memory-day-card.tone-press { background: linear-gradient(90deg, rgba(0,0,0,.065) 0 1px, transparent 1px 33%, rgba(0,0,0,.05) 33% calc(33% + 1px), transparent calc(33% + 1px) 66%, rgba(0,0,0,.05) 66% calc(66% + 1px), transparent calc(66% + 1px)), repeating-linear-gradient(0deg, rgba(0,0,0,.042) 0 1px, transparent 1px 6px), linear-gradient(180deg, #f1efe9, #dfddd5); }
.memory-day-card.tone-press::before { background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, transparent 0 13px, rgba(0,0,0,.07) 13px 14px), radial-gradient(circle at 72% 24%, rgba(0,0,0,.14), transparent 17%); opacity: .4; }
.memory-day-card.tone-press .memory-day-kicker { border-bottom: 2px solid rgba(0,0,0,.56); padding-bottom: 4px; color: rgba(0,0,0,.7); font-weight: 700; }
.memory-day-card.tone-press .memory-day-year { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.memory-day-card.tone-press .memory-day-main { justify-self: stretch; justify-content: space-between; font-family: 'Times New Roman', Georgia, serif; font-size: 45px; }
.memory-day-card.tone-press .memory-day-main::before { content: 'DAILY ' attr(data-date); top: -24px; left: 3px; color: rgba(0,0,0,.15); filter: blur(2px); transform: none; }
.memory-day-card.tone-press .memory-day-caption { border-top-style: double; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.memory-day-card.tone-press .memory-day-card-bg { opacity: .22; filter: grayscale(1) contrast(1.7) blur(1.2px); mix-blend-mode: multiply; }

.memory-day-card.tone-archive { border-color: rgba(255,255,255,.16); color: #f3f3ef; background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 8px, transparent 8px 18px), radial-gradient(ellipse 68% 36% at 48% 44%, rgba(255,255,255,.1), transparent 68%), linear-gradient(180deg, #0f1012, #242426 58%, #0a0b0d); box-shadow: 0 24px 54px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 42px rgba(0,0,0,.48); }
.memory-day-card.tone-archive .memory-day-frame { border-color: rgba(255,255,255,.18); }
.memory-day-card.tone-archive .memory-day-frame::before { background: rgba(255,255,255,.34); }
.memory-day-card.tone-archive .memory-day-frame::after { background: rgba(255,255,255,.62); box-shadow: -12px 0 0 rgba(255,255,255,.3), -24px 0 0 rgba(255,255,255,.14); }
.memory-day-card.tone-archive .memory-day-kicker,
.memory-day-card.tone-archive .memory-day-year,
.memory-day-card.tone-archive .memory-day-caption,
.memory-day-card.tone-archive .memory-day-meta { color: rgba(255,255,255,.66); }
.memory-day-card.tone-archive .memory-day-main { color: #f8f8f1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 0 16px rgba(255,255,255,.16); }
.memory-day-card.tone-archive .memory-day-main::before { color: rgba(255,255,255,.18); filter: blur(4px); }
.memory-day-card.tone-archive .memory-day-caption { border-top-color: rgba(255,255,255,.2); }
.memory-day-card.tone-archive .memory-day-bg-btn { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.memory-day-card.tone-archive .memory-day-card-bg { opacity: .22; filter: grayscale(1) invert(1) contrast(1.28) blur(3px); mix-blend-mode: screen; }

.memory-day-bg-btn { min-height: 26px; border: 1px solid rgba(20,20,20,.16); border-radius: 999px; padding: 0 10px; color: rgba(18,18,18,.68); background: rgba(247,247,244,.76); font-size: 10px; }
.memory-day-bg-preview.tone-cover,
.memory-day-cover-grid .tone-cover { background: linear-gradient(145deg, #fafaf7, #dcdcd7); }
.memory-day-bg-preview.tone-type,
.memory-day-cover-grid .tone-type { background: linear-gradient(135deg, #f2f2ef 0 45%, #151515 45% 48%, #e1e1dc 48%); }
.memory-day-bg-preview.tone-water,
.memory-day-cover-grid .tone-water { background: radial-gradient(ellipse at center, rgba(80,100,110,.28), transparent 62%), linear-gradient(145deg, #f4f5f3, #dfe3df); }
.memory-day-bg-preview.tone-press,
.memory-day-cover-grid .tone-press { background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 7px), #ebe7dd; }
.memory-day-bg-preview.tone-archive,
.memory-day-cover-grid .tone-archive { background: linear-gradient(145deg, #151517, #3a3a3d 52%, #08090a); }
.memory-day-bg-preview.tone-cover img { opacity: .18; filter: grayscale(1) blur(5px); mix-blend-mode: multiply; }
.memory-day-bg-preview.tone-type img { opacity: .24; filter: grayscale(1) contrast(1.35) blur(7px); mix-blend-mode: multiply; }
.memory-day-bg-preview.tone-water img { opacity: .22; filter: grayscale(1) contrast(.75) blur(11px); mix-blend-mode: multiply; }
.memory-day-bg-preview.tone-press img { opacity: .28; filter: grayscale(1) contrast(1.7) blur(.6px); mix-blend-mode: multiply; }
.memory-day-bg-preview.tone-archive img { opacity: .32; filter: grayscale(1) invert(1) contrast(1.25) blur(1px); mix-blend-mode: screen; }
.memory-day-cover-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.memory-day-cover-grid button { display: grid; gap: 4px; align-content: start; }
.memory-day-cover-grid small { display: block; overflow: hidden; color: rgba(18,20,26,.44); font-size: 8.5px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.memory-day-cover-grid button.is-active small { color: rgba(22,63,43,.7); }
@media (max-width: 370px) {
  .memory-day-card.tone-type .memory-day-main { font-size: 47px; }
  .memory-day-cover-grid { gap: 6px; }
  .memory-day-cover-grid small { display: none; }
}

/* Memory film detail action reveal 2026-07-22 */
.memory-day-detail-list.memory-negative-strip .memory-card {
  cursor: pointer;
}
.memory-day-detail-list.memory-negative-strip .memory-card .memory-card-bottom {
  align-items: center;
}
.memory-day-detail-list.memory-negative-strip .memory-card .memory-actions {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  flex-wrap: wrap;
  transform: translateY(-4px);
  transition: max-height 220ms ease, opacity 180ms ease, transform 220ms ease;
  pointer-events: none;
}
.memory-day-detail-list.memory-negative-strip .memory-card.is-actions-open .memory-actions {
  max-height: 112px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .memory-day-detail-list.memory-negative-strip .memory-card .memory-actions {
    transition: none !important;
    transform: none !important;
  }
}
[data-reduce-motion="true"] .memory-day-detail-list.memory-negative-strip .memory-card .memory-actions {
  transition: none !important;
  transform: none !important;
}

/* ===== Diary App v15 layout restore guard ===== */
.diary-letter-view.art-long {
  display: grid;
  align-items: stretch;
  justify-items: center;
  overflow: hidden;
  padding: calc(42px + var(--safe-top-inset, 0px)) 10px calc(18px + var(--safe-bottom-inset, 0px));
}
.diary-letter-view.art-long .diary-letter-stage {
  position: relative;
  width: min(100%, 396px);
  height: 100%;
  min-height: 0;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 8px 72px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.diary-font-sample.font-mood-nomnatong strong { font-family: 'DiaryNomNaTong', 'Songti SC', 'SimSun', serif; }
.diary-font-sample.font-mood-bailu strong { font-family: 'DiaryBailu', 'Songti SC', 'SimSun', serif; }
.diary-font-sample.font-mood-honglei-note strong { font-family: 'DiaryHongleiNote', 'Songti SC', 'SimSun', serif; }
.diary-font-sample.font-mood-huiwen-mincho strong { font-family: 'DiaryHuiwenMincho', 'Songti SC', 'SimSun', serif; }
.diary-font-sample.font-mood-momo-dream strong { font-family: 'DiaryMomoDream', 'Songti SC', 'SimSun', serif; }
.diary-font-sample.font-mood-pingfang-shaohua strong { font-family: 'DiaryPingfangShaohua', 'Songti SC', 'SimSun', serif; }
.diary-font-sample.font-mood-ximi-xihuan strong { font-family: 'DiaryXimiXihuan', 'Songti SC', 'SimSun', serif; }
.diary-font-sample.font-mood-seoul-hangang strong { font-family: 'DiarySeoulHangang', 'Apple SD Gothic Neo', 'Malgun Gothic', serif; }
.diary-letter-view.art-long .diary-paper.diary-art-paper {
  position: relative;
  width: min(100%, 342px);
  min-height: 0;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  display: block;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  opacity: 1;
  color: var(--diary-ink-color, #20242a);
  clip-path: none;
  border-radius: 3px;
  transform: translateY(12px) scale(.985);
}
.diary-letter-view.art-long.is-open .diary-paper.diary-art-paper {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.diary-letter-view.art-long .diary-paper.diary-art-paper > * {
  position: relative;
  z-index: 3;
}
.diary-letter-view.art-long .diary-art-meta {
  display: grid;
  grid-template-columns: minmax(54px, auto) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 22px 24px 0;
  color: color-mix(in srgb, var(--diary-ink-color, #20242a) 48%, transparent);
  font: 9px/1.45 'Courier New', 'SFMono-Regular', Consolas, monospace;
  letter-spacing: .03em;
}
.diary-letter-view.art-long .diary-art-meta span {
  min-width: 0;
  white-space: nowrap;
}
.diary-letter-view.art-long .diary-art-meta em {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 5px 8px;
  flex-wrap: wrap;
  text-align: right;
  font-style: normal;
}
.diary-letter-view.art-long .diary-art-meta b,
.diary-letter-view.art-long .diary-art-meta i {
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.diary-art-figure {
  min-width: 0;
  box-sizing: border-box;
}
.diary-art-figure img,
.diary-art-figure.is-empty span {
  width: 100%;
  height: 100%;
  display: block;
}
.diary-art-figure img {
  object-fit: cover;
  object-position: center;
}
.diary-art-figure.is-empty {
  border: 1px solid rgba(32, 39, 49, .08);
  background:
    repeating-linear-gradient(105deg, rgba(28, 34, 42, .035) 0 1px, transparent 1px 10px),
    radial-gradient(circle at 38% 42%, rgba(31, 39, 48, .055), transparent 34%),
    rgba(255,255,255,.38);
}
.diary-art-body {
  overflow: visible;
  box-sizing: border-box;
}
.diary-art-body p {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: pretty;
}
.layout-banner .diary-cinema-banner-title {
  padding-top: 56px;
}
.layout-banner .banner-main {
  width: calc(100% - 76px);
  height: 132px;
  margin: 34px 34px 44px 42px;
}
.layout-fragments .diary-cinema-side {
  grid-template-columns: minmax(0, 1fr) 128px;
}
.layout-fragments .side-main {
  height: 230px;
}
.layout-fragments .side-secondary,
.layout-film .end-secondary {
  display: block;
}
.layout-film .end-main {
  display: block;
  height: 154px;
}
.diary-letter-view.paper-water .diary-paper.diary-art-paper > .diary-tear-effect {
  display: block;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
}
.diary-letter-view:not(.paper-water) .diary-paper.diary-art-paper > .diary-tear-effect {
  display: none !important;
}

@media (max-width: 370px), (max-height: 650px) {
  .diary-letter-view.art-long { padding-left: 6px; padding-right: 6px; }
  .diary-letter-view.art-long .diary-letter-stage { padding: 14px 4px 64px; }
.diary-letter-view.art-long .diary-paper.diary-art-paper { width: min(100%, 318px); }
  .diary-letter-view.art-long .diary-art-meta {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .diary-letter-view.art-long .diary-art-meta em { justify-content: flex-start; text-align: left; }
  .layout-banner .diary-cinema-banner-title,
  .diary-cinema-side,
  .diary-cinema-end-title { padding-left: 28px; padding-right: 28px; }
  .layout-banner .banner-main { width: calc(100% - 56px); height: 108px; margin: 28px 28px 38px; }
  .layout-fragments .diary-cinema-side { grid-template-columns: 1fr; }
  .layout-fragments .side-main { height: 168px; }
  .layout-fragments .side-secondary { width: 48%; height: 64px; margin-right: 28px; }
  .layout-film .end-main { width: 58%; height: 124px; margin-right: 28px; }
  .layout-film .end-secondary { width: 42%; height: 58px; margin-left: 28px; }
}