:root {
  color-scheme: dark;
  --ink: #f2ddce;
  --muted: #b9a3a5;
  --wine: #8d2947;
  --rose: #d8a098;
  --display: Baskerville, 'Iowan Old Style', 'Palatino Linotype', serif;
  --body: 'Avenir Next', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { font-family: var(--body); background: #09060a; }

body { margin: 0; color: var(--ink); }

button, input { font: inherit; }

.lock-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  padding: 32px 18px;
  isolation: isolate;
  background: radial-gradient(circle at 50% -10%, rgba(117,36,62,.34), transparent 42%), radial-gradient(circle at 10% 80%, rgba(64,25,63,.24), transparent 34%), linear-gradient(145deg, #08060a, #130b14 48%, #080508);
}

.lock-page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle, black, transparent 82%);
}

.ambient { position: absolute; z-index: -1; width: 360px; height: 360px; border-radius: 50%; filter: blur(90px); opacity: .18; animation: breathe 7s ease-in-out infinite alternate; }
.ambient-one { top: -160px; right: -90px; background: #9c284b; }
.ambient-two { bottom: -180px; left: -100px; background: #6f2a70; animation-delay: -3.5s; }

.lock-card {
  width: min(100%, 520px);
  position: relative;
  text-align: center;
  padding: clamp(52px,8vw,76px) clamp(26px,7vw,64px) 44px;
  border: 1px solid rgba(188,107,121,.42);
  border-radius: 30px 30px 18px 18px;
  background: linear-gradient(180deg, rgba(38,18,31,.92), rgba(16,10,18,.96)), #160d17;
  box-shadow: 0 40px 120px rgba(0,0,0,.56), inset 0 0 0 5px rgba(255,255,255,.012), inset 0 0 70px rgba(133,41,67,.08);
}

.lock-card::before, .lock-card::after { content: ''; position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgba(203,148,144,.1); border-radius: 23px 23px 13px 13px; }
.lock-card::after { inset: 17px; border-color: rgba(203,148,144,.05); }

.flower-corner { position: absolute; top: -25px; display: flex; align-items: center; gap: 7px; color: #8f304b; font-family: var(--display); font-size: 41px; line-height: 1; text-shadow: 0 8px 22px rgba(124,28,61,.6); animation: float 5s ease-in-out infinite; }
.flower-corner span { color: #d09b8e; font-size: 15px; }
.flower-corner-left { left: 28px; transform: rotate(-12deg); }
.flower-corner-right { right: 28px; transform: rotate(12deg); animation-delay: -2.4s; }

.eyebrow { margin: 0 0 18px; color: #c88b8c; font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.lock-medallion { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid rgba(218,160,145,.38); border-radius: 50%; color: var(--rose); background: radial-gradient(circle at 35% 30%, #4b2638, #1a101c 68%); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.lock-medallion svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

.lock-card h1 { margin: 0; font-family: var(--display); font-size: clamp(3.15rem,12vw,5.2rem); font-weight: 400; line-height: .94; letter-spacing: -.045em; color: var(--ink); text-shadow: 0 8px 32px rgba(190,75,102,.18); }
.lock-copy { max-width: 350px; margin: 22px auto 32px; color: var(--muted); font-family: var(--display); font-size: 1.05rem; font-style: italic; line-height: 1.55; }
.password-form { display: grid; gap: 12px; }
.password-form label { color: #b67a80; font-family: var(--display); font-size: .9rem; letter-spacing: .025em; }
.password-form input { width: 100%; height: 48px; border-radius: 999px; border: 1px solid rgba(184,116,123,.34); outline: none; background: rgba(5,3,7,.42); padding: 0 20px; text-align: center; color: #f4ded0; transition: border-color .2s, box-shadow .2s; }
.password-form input:focus { border-color: #b95069; box-shadow: 0 0 0 4px rgba(185,80,105,.12); }
.password-form input::placeholder { color: #715d64; }
.password-form button { height: 48px; margin-top: 2px; border-radius: 999px; border: 1px solid rgba(247,182,173,.18); background: linear-gradient(135deg, #8d2947, #60203d); color: #fff0e8; cursor: pointer; box-shadow: 0 11px 30px rgba(107,25,55,.34); transition: transform .2s, filter .2s; }
.password-form button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.password-form button:focus-visible { outline: 2px solid #d49095; outline-offset: 3px; }
.password-form button span { margin-left: 3px; font-size: 1rem; }
.password-form button:disabled { cursor: wait; opacity: .68; }
.form-status { min-height: 1.2em; margin: 0; color: #d28b97; font-family: var(--display); font-size: .85rem; }
.private-note { margin: 24px 0 0; color: #66535c; font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; }

/* The letter */
.letter-body { min-height: 100svh; background: #09060a; color: #e9d7ca; }
.page-noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 20%, black, transparent 78%); }

.letter-nav { position: fixed; inset: 0 0 auto; z-index: 15; min-height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 14px clamp(18px,4vw,56px); border-bottom: 1px solid rgba(194,125,126,.16); background: rgba(8,5,9,.78); backdrop-filter: blur(20px); }
.letter-nav p { margin: 0; color: #816b72; font-family: var(--display); font-size: .83rem; font-style: italic; letter-spacing: .035em; }
.monogram { justify-self: start; color: #d7a29a; font-family: var(--display); font-size: 1.2rem; text-decoration: none; letter-spacing: .06em; }
.monogram span { color: #84304a; margin: 0 3px; }
.nav-button, .back-button { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border: 1px solid rgba(200,135,134,.28); border-radius: 999px; background: rgba(79,34,55,.28); color: #ddbab0; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.nav-button:hover, .back-button:hover { background: rgba(111,42,67,.45); border-color: rgba(200,135,134,.46); transform: translateY(-1px); }
.nav-button svg, .back-button svg, .memory-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.letter-page { position: relative; overflow: hidden; }
.letter-hero { position: relative; min-height: min(860px,100svh); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 130px 24px 70px; text-align: center; isolation: isolate; background: #0b070c; }
.letter-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,4,8,.1), rgba(7,4,8,.18) 50%, #09060a 100%), radial-gradient(ellipse at center, rgba(9,6,10,.96) 0%, rgba(9,6,10,.9) 24%, rgba(9,6,10,.36) 58%, rgba(8,4,9,.48) 78%); }
.gothic-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .74; filter: saturate(.86) contrast(1.06); }
.letter-hero .eyebrow { margin-bottom: 22px; text-shadow: 0 2px 12px #080508; }
.letter-hero h1 { margin: 0; font-family: var(--display); font-size: clamp(4.6rem,12vw,9.5rem); font-weight: 400; line-height: .82; letter-spacing: -.06em; color: #f2dfd0; text-shadow: 0 14px 70px rgba(0,0,0,.8), 0 0 40px rgba(129,39,68,.28); }
.hero-note { max-width: 510px; margin: 30px auto 0; color: #cab6b2; font-family: var(--display); font-size: clamp(1rem,2.1vw,1.28rem); font-style: italic; line-height: 1.55; text-shadow: 0 3px 18px #080508; }
.scroll-cue { position: absolute; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #9d777d; font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-decoration: none; text-transform: uppercase; }
.scroll-cue svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; animation: drift-down 2s ease-in-out infinite; }

.flower-rail { position: absolute; top: 820px; bottom: 360px; z-index: 2; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #6c253e; opacity: .65; pointer-events: none; }
.flower-rail-left { left: clamp(8px,3vw,46px); }
.flower-rail-right { right: clamp(8px,3vw,46px); }
.flower-rail span { font-family: var(--display); font-size: 30px; animation: float 6s ease-in-out infinite; }
.flower-rail i { width: 1px; flex: 1; min-height: 160px; background: linear-gradient(transparent, rgba(166,79,94,.45), transparent); }
.flower-rail-right span { animation-delay: -3s; }

.letter-content { position: relative; width: min(100% - 48px, 790px); margin: 0 auto; padding: clamp(78px,11vw,140px) 0 120px; text-align: center; }
.letter-content::before { content: ''; position: absolute; top: 0; bottom: 50px; left: 50%; width: min(1120px,100vw); translate: -50% 0; z-index: -1; background: radial-gradient(ellipse at 50% 18%, rgba(84,28,58,.14), transparent 42%), radial-gradient(ellipse at 50% 82%, rgba(120,36,57,.09), transparent 34%); }
.letter-content > p, .memory-chapter > p:last-child { margin: 0 0 32px; color: #cdbbb5; font-family: var(--display); font-size: clamp(1.08rem,2.1vw,1.28rem); line-height: 1.87; }
.letter-content > p:first-of-type::first-letter { float: left; margin: .08em .13em 0 0; color: #be7377; font-size: 4.8em; line-height: .72; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 52px; color: #8d3a52; }
.ornament i { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, #6f3244); }
.ornament i:last-of-type { background: linear-gradient(90deg, #6f3244, transparent); }
.ornament b { font-family: var(--display); font-size: 2rem; font-weight: 400; }
.ornament span { color: #b58372; font-size: .68rem; }
.memory-chapter { position: relative; margin: clamp(76px,11vw,120px) 0; padding: 52px clamp(18px,5vw,48px) 20px; border-top: 1px solid rgba(183,103,112,.2); }
.memory-chapter::before { content: ''; position: absolute; top: 0; left: 50%; width: 100px; height: 1px; translate: -50% 0; background: #a75267; box-shadow: 0 0 22px rgba(171,64,91,.45); }
.chapter-number { margin: 0 0 14px; color: #b16a72; font-family: var(--display); font-size: .73rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.memory-chapter h2 { margin: 0 0 34px; color: #eddbce; font-family: var(--display); font-size: clamp(2.35rem,6vw,4.25rem); font-weight: 400; line-height: 1.05; letter-spacing: -.035em; }
.letter-content blockquote { position: relative; margin: clamp(90px,13vw,150px) auto; padding: 40px 20px; color: #edd8ca; font-family: var(--display); font-size: clamp(3rem,8vw,6.4rem); font-style: italic; line-height: .98; letter-spacing: -.045em; }
.letter-content blockquote::before, .letter-content blockquote::after { content: '✦'; position: absolute; left: 50%; translate: -50% 0; color: #965065; font-family: var(--body); font-size: .72rem; font-style: normal; }
.letter-content blockquote::before { top: 0; }
.letter-content blockquote::after { bottom: 0; }
.letter-content blockquote span { position: absolute; top: -18px; left: 4%; color: rgba(143,48,75,.28); font-size: 10rem; line-height: 1; }
.signature { margin: 76px auto 0; color: #b9a0a0; font-family: var(--display); }
.signature p { margin: 0 0 10px; font-size: 1.12rem; font-style: italic; }
.signature strong { display: block; color: #efdbc9; font-size: 3.6rem; font-weight: 400; line-height: 1; }
.signature span { display: block; margin-top: 12px; color: #a73451; font-size: 1.8rem; filter: drop-shadow(0 8px 12px rgba(142,34,65,.4)); }

.question-card { width: min(100% - 32px, 900px); min-height: 410px; display: grid; place-items: center; position: relative; margin: 0 auto 100px; padding: clamp(50px,8vw,90px) clamp(22px,7vw,70px); overflow: hidden; border: 1px solid rgba(192,112,122,.35); border-radius: 30px 30px 16px 16px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(137,45,70,.22), transparent 48%), linear-gradient(145deg, rgba(39,17,32,.95), rgba(16,9,17,.97)); box-shadow: 0 45px 100px rgba(0,0,0,.35), inset 0 0 0 8px rgba(255,255,255,.012); }
.question-card::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(204,150,145,.09); border-radius: 22px 22px 10px 10px; pointer-events: none; }
.question-flowers { position: absolute; top: -9px; left: 50%; translate: -50% 0; color: #8f304b; font-family: var(--display); font-size: 2.6rem; letter-spacing: .18em; text-shadow: 0 8px 24px rgba(124,28,61,.55); }
.question-card h2 { max-width: 680px; margin: 12px auto 38px; color: #f0ddce; font-family: var(--display); font-size: clamp(2.8rem,7vw,5.3rem); font-weight: 400; line-height: 1; letter-spacing: -.045em; }
.answer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.answer { min-width: 128px; min-height: 48px; padding: 0 22px; border: 1px solid rgba(200,133,133,.34); border-radius: 999px; background: rgba(75,34,53,.25); color: #d9beba; cursor: pointer; transition: transform .2s, background .2s, border-color .2s; }
.answer:hover { transform: translateY(-2px); background: rgba(103,41,64,.42); border-color: rgba(213,148,145,.52); }
.answer-yes { background: linear-gradient(135deg, #922e4b, #69213f); color: #fff0e8; box-shadow: 0 12px 32px rgba(111,30,56,.34); }
.answer-status { min-height: 1.2em; margin: 18px 0 0; color: #c47987; font-family: var(--display); font-size: .9rem; }
.response-message { max-width: 680px; margin: 0; color: #f0d9c9; font-family: var(--display); font-size: clamp(2.15rem,6vw,4.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; animation: bloom-in .7s cubic-bezier(.2,.8,.2,1) both; }

.memory-invite { width: min(100% - 32px, 1040px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 34px; margin: 0 auto 110px; padding: clamp(35px,6vw,62px); border-top: 1px solid rgba(169,90,103,.28); border-bottom: 1px solid rgba(169,90,103,.15); background: radial-gradient(circle at 0 50%, rgba(92,35,62,.18), transparent 44%); }
.memory-invite h2 { margin: 8px 0 14px; color: #ead6c8; font-family: var(--display); font-size: clamp(2.3rem,5vw,4rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
.memory-invite > div > p:last-child { max-width: 650px; margin: 0; color: #9f888b; line-height: 1.7; }
.memory-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid rgba(222,158,151,.2); border-radius: 999px; background: linear-gradient(135deg, #8d2947, #60203d); color: #fff0e8; cursor: pointer; box-shadow: 0 13px 34px rgba(96,26,50,.28); transition: filter .2s, transform .2s; }
.memory-button:hover { filter: brightness(1.13); transform: translateY(-1px); }

/* Encrypted memory garden */
.memories-view { min-height: 100svh; padding: 26px clamp(16px,4vw,58px) 90px; background: radial-gradient(circle at 16% 0, rgba(95,32,65,.22), transparent 34%), radial-gradient(circle at 90% 38%, rgba(109,32,55,.13), transparent 35%), #0a060b; }
.memories-view[hidden] { display: none; }
.memory-header { max-width: 1240px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin: 0 auto 44px; padding: 14px 0 28px; border-bottom: 1px solid rgba(173,91,105,.2); text-align: center; }
.memory-header .back-button { justify-self: start; }
.memory-header h1 { margin: 4px 0 0; color: #efdccd; font-family: var(--display); font-size: clamp(2.4rem,5vw,4.8rem); font-weight: 400; line-height: .92; letter-spacing: -.045em; }
.encryption-badge { justify-self: end; display: inline-flex; align-items: center; gap: 7px; color: #8d777c; font-size: .74rem; letter-spacing: .03em; }
.encryption-badge svg { width: 16px; fill: none; stroke: #a45a6e; stroke-width: 1.6; }
.memory-main { max-width: 1080px; display: grid; gap: 28px; margin: auto; }
.memory-panel { position: relative; padding: clamp(26px,5vw,52px); border: 1px solid rgba(175,97,111,.25); border-radius: 24px 24px 13px 13px; background: linear-gradient(145deg, rgba(30,15,27,.92), rgba(15,9,16,.95)); box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.panel-heading { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
.panel-heading .chapter-number { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; margin: 2px 0 0; border: 1px solid rgba(185,105,115,.34); border-radius: 50%; }
.panel-heading h2 { margin: 0; color: #e7d1c4; font-family: var(--display); font-size: clamp(1.8rem,4vw,3rem); font-weight: 400; line-height: 1; }
.panel-heading p { margin: 8px 0 0; color: #89747b; font-size: .9rem; line-height: 1.5; }
.photo-form { display: grid; grid-template-columns: minmax(240px,1fr) minmax(220px,1fr) auto; align-items: center; gap: 14px; }
.drop-zone { grid-row: span 2; min-height: 154px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; border: 1px dashed rgba(184,106,119,.48); border-radius: 18px; color: #bd9297; cursor: pointer; background: rgba(59,25,46,.18); transition: border-color .2s, background .2s; }
.drop-zone:hover { border-color: #b75c72; background: rgba(77,29,51,.26); }
.drop-zone input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.drop-zone svg { width: 28px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.drop-zone small { color: #6f5d64; font-size: .7rem; text-align: center; }
.memory-input, .journal-form textarea { width: 100%; border: 1px solid rgba(172,103,113,.28); border-radius: 14px; outline: none; background: rgba(6,3,8,.34); color: #e2cfc4; transition: border-color .2s, box-shadow .2s; }
.memory-input { height: 48px; padding: 0 15px; }
.memory-input:focus, .journal-form textarea:focus { border-color: #ad536b; box-shadow: 0 0 0 4px rgba(173,83,107,.1); }
.panel-status { grid-column: 2 / -1; min-height: 1.2em; margin: 0; color: #bf7583; font-family: var(--display); font-size: .84rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgba(185,106,117,.26); border-radius: 14px; background: #0c090c; animation: bloom-in .5s ease both; }
.gallery-item img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gallery-caption { position: absolute; inset: auto 0 0; margin: 0; padding: 34px 13px 12px; color: #f2e0d2; font-family: var(--display); font-size: .9rem; background: linear-gradient(transparent, rgba(7,4,8,.86)); }
.empty-memory { grid-column: 1 / -1; min-height: 190px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed rgba(160,87,105,.24); border-radius: 15px; color: #6f5b63; text-align: center; }
.empty-memory span { color: #793048; font-size: 2rem; }
.empty-memory p { margin: 0; font-family: var(--display); font-style: italic; }
.journal-form textarea { min-height: 150px; resize: vertical; padding: 16px; line-height: 1.65; }
.journal-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.journal-actions > span { color: #6e5c63; font-size: .72rem; }
.journal-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 28px; }
.journal-entry-card { position: relative; padding: 24px; border: 1px solid rgba(164,90,104,.2); border-radius: 16px; background: rgba(58,25,45,.18); }
.journal-entry-card time { display: block; margin-bottom: 12px; color: #8e6670; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.journal-entry-card p { margin: 0; color: #cab8b1; font-family: var(--display); font-size: 1.02rem; line-height: 1.7; white-space: pre-wrap; }
.loading-memory { grid-column: 1 / -1; padding: 40px; color: #806a72; font-family: var(--display); text-align: center; }

@keyframes drift-down { 0%,100% { translate: 0 -2px; } 50% { translate: 0 5px; } }
@keyframes bloom-in { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: none; } }

@keyframes breathe { from { transform: scale(.9); } to { transform: scale(1.15); } }
@keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }

@media (max-width: 860px) {
  .letter-nav { grid-template-columns: auto 1fr; }
  .letter-nav > p { display: none; }
  .nav-button { font-size: .78rem; }
  .flower-rail { display: none; }
  .memory-invite { grid-template-columns: 1fr; text-align: center; }
  .memory-invite .memory-button { justify-self: center; }
  .memory-header { grid-template-columns: 1fr auto; text-align: left; }
  .memory-header > div { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .photo-form { grid-template-columns: 1fr; }
  .drop-zone { grid-row: auto; }
  .panel-status { grid-column: auto; }
  .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .lock-page { padding: 22px 13px; }
  .lock-card { padding-inline: 24px; }
  .flower-corner { font-size: 34px; }
  .letter-nav { min-height: 66px; padding: 12px 14px; }
  .nav-button { padding-inline: 12px; }
  .nav-button svg { display: none; }
  .letter-hero { min-height: 780px; padding-top: 120px; }
  .gothic-art { object-position: center; opacity: .58; }
  .letter-content { width: min(100% - 34px,790px); }
  .letter-content > p, .memory-chapter > p:last-child { font-size: 1.04rem; line-height: 1.78; }
  .memory-chapter { padding-inline: 0; }
  .answer-actions { flex-direction: column; }
  .answer { width: min(100%,280px); }
  .memory-invite { width: min(100% - 24px,1040px); }
  .memories-view { padding-inline: 12px; }
  .memory-header { gap: 10px; }
  .back-button { padding-inline: 10px; font-size: .72rem; }
  .encryption-badge { font-size: .65rem; }
  .memory-panel { padding: 24px 16px; }
  .panel-heading { gap: 12px; }
  .gallery-grid, .journal-list { grid-template-columns: 1fr; }
  .journal-actions { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }