:root {
    color-scheme: light;
    --paper: #f7f1e6;
    --ink: #3f3529;
    --muted: #81715f;
    --accent: #a35d3e;
    --rule: #ded3c1;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #30291f; color: var(--paper); font-family: "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .35; }
button:focus-visible, a:focus-visible, summary:focus-visible, canvas:focus-visible { outline: 2px solid #f1bf79; outline-offset: 5px; }
a { color: inherit; }
[hidden] { display: none !important; }
.cafe { position: relative; width: 100%; height: 100%; height: 100dvh; isolation: isolate; }
.scene-fallback, #cafe-canvas, .scene-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-fallback { object-fit: cover; object-position: center 62%; filter: brightness(.68); }
#cafe-canvas { display: block; opacity: 0; transition: opacity 1s ease; touch-action: none; cursor: grab; }
#cafe-canvas:active { cursor: grabbing; }
.scene-ready #cafe-canvas { opacity: 1; }
.scene-ready .scene-fallback { visibility: hidden; }
.scene-shade { z-index: 1; pointer-events: none; background: linear-gradient(180deg, #1d180e55, transparent 21%, transparent 72%, #1b160e80), radial-gradient(ellipse at 50% 44%, transparent 48%, #20180f2b); }
.scene-header { position: absolute; z-index: 3; top: 32px; left: 36px; right: 42px; display: flex; align-items: center; gap: 18px; pointer-events: none; }
.scene-header > * { pointer-events: auto; }
.scene-header h1 { font: italic 30px/1 Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.9px; margin: 0; color: #fff6e5; text-shadow: 0 2px 12px #231c2150; }
.scene-header h1 span { color: #e8bc87; }
.birthday-mark { margin-left: auto; font: 31px Georgia, serif; color: #f5dcc0; text-shadow: 0 2px 12px #231c2150; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 11px; border: 0; border-radius: 50%; background: transparent; text-decoration: none; flex-shrink: 0; transition: background .2s; }
.icon-button svg { height: 20px; width: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:hover:not(:disabled) { background: #ffefd019; }
.back-link { border: 1px solid #ffefd033; background: #372c2220; backdrop-filter: blur(12px); }
.scene-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 19px; background: #29221b88; font: italic 19px Georgia, serif; letter-spacing: .2px; }
.loading-ring { width: 25px; height: 25px; border: 1px solid #ebd8b433; border-top-color: #ebd8b4; border-radius: 50%; animation: loading 1.4s linear infinite; }
@keyframes loading { to { transform: rotate(360deg); } }
.letter-hotspot { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px; border: 0; background: none; transform: translate(-50%, -26px); }
.hotspot-dot { width: 11px; height: 11px; background: #fff5dd; border: 2px solid #c6a074; border-radius: 50%; box-shadow: 0 0 0 7px #fff5dd20, 0 0 18px #ffe6b080; transition: box-shadow .2s; }
.hotspot-label { display: flex; align-items: center; gap: 9px; white-space: nowrap; padding: 12px 17px; border: 1px solid #fff2d840; border-radius: 3px; background: #362b21c4; backdrop-filter: blur(16px); font-size: 11px; letter-spacing: .4px; box-shadow: 0 5px 25px #1d140c22; }
.hotspot-label > span { color: #e8c596; font-size: 16px; }
.glyph { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.letter-hotspot:hover .hotspot-dot { box-shadow: 0 0 0 10px #fff5dd25, 0 0 22px #ffe6b0aa; }
.object-hint { position: absolute; z-index: 3; pointer-events: none; background: #362b21da; padding: 8px 12px; border: 1px solid #ead1ad44; border-radius: 3px; font-size: 11px; transform: translate(16px, -50%); }
.scene-bottom { position: absolute; z-index: 3; bottom: max(30px, env(safe-area-inset-bottom)); left: 42px; right: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; pointer-events: none; }
.scene-bottom > * { pointer-events: auto; }
.scene-instructions { margin: 0; font-size: 10px; letter-spacing: .25px; color: #f0e3cede; line-height: 1.9; text-shadow: 0 1px 9px #1b160e; }
.scene-instructions > span:first-child { font-size: 17px; margin-right: 8px; vertical-align: -1px; }
.scene-controls { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #d4bb934d; border-radius: 8px; background: #30271ed9; backdrop-filter: blur(20px); box-shadow: 0 6px 32px #20160924; }
.control-divider { width: 1px; height: 20px; background: #d4bb9333; margin: 0 4px; }
.read-button, .video-button { border: 0; background: transparent; padding: 13px 15px; min-height: 44px; font-size: 12px; letter-spacing: .15px; white-space: nowrap; border-radius: 3px; }
.read-button span { margin-left: 8px; font-size: 16px; color: #ebc697; }
.read-button:hover, .video-button:hover { background: #ffefd00d; }
.scene-signature { justify-self: end; font: italic 17px "Snell Roundhand", "Segoe Print", Georgia, serif; color: #f3dec1; text-shadow: 0 2px 10px #21170b; }
.scene-notice, .noscript-note { position: absolute; z-index: 4; left: 50%; bottom: 106px; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100% - 40px); border: 1px solid #cdbb9955; border-radius: 4px; background: #34281ee8; color: #f5e6d0; padding: 13px 18px; font-size: 12px; line-height: 1.7; text-align: center; }
.noscript-note { bottom: 30%; }
.scene-unavailable #cafe-canvas, .scene-unavailable .scene-instructions { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gallery-bar { position: absolute; z-index: 3; left: 50%; bottom: max(30px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 7px 9px; border: 1px solid #d4bb934d; border-radius: 8px; background: #30271ed9; backdrop-filter: blur(20px); box-shadow: 0 6px 32px #20160924; animation: gallery-in .5s ease both; }
.gallery-count { margin: 0 6px; min-width: 44px; text-align: center; font: italic 14px Georgia, serif; font-variant-numeric: tabular-nums; color: #f3dec1; }
.gallery-bar kbd { margin-left: 14px; padding: 2px 6px; border: 1px solid #ebc69755; border-radius: 3px; font: 9px "Helvetica Neue", Arial, sans-serif; letter-spacing: .6px; color: #ebc697; }
.gallery-mode .scene-bottom { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.gallery-mode #cafe-canvas { cursor: default; }
@keyframes gallery-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* The laptop opens the video in 3D; this button serves the 2D fallback and keyboard visitors. */
.scene-controls { position: relative; }
.video-button svg { width: 12px; height: 12px; margin-left: 21px; vertical-align: -1px; fill: none; stroke: #ebc697; stroke-width: 1.6; stroke-linejoin: round; }
body:not(.scene-unavailable) .video-divider { display: none; }
body:not(.scene-unavailable) .video-button { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); border: 1px solid #d4bb934d; border-radius: 8px; background: #30271ee6; backdrop-filter: blur(20px); }
body:not(.scene-unavailable) .video-button:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
dialog.video-viewer { --pad: 18px; --chrome: 150px; width: min(1000px, calc(100% - 32px), calc((100dvh - var(--chrome)) * 16 / 9 + var(--pad) * 2 + 2px)); max-height: calc(100dvh - 24px); padding: 14px var(--pad) 18px; border: 1px solid #d4bb9340; border-radius: 12px; background: linear-gradient(180deg, #342a20, #261e17); color: #f5e6d0; box-shadow: 0 40px 120px #0c0804b3, inset 0 1px 0 #ffefd012; overflow: auto; }
dialog.video-viewer[open] { animation: video-in .5s cubic-bezier(.2, .7, .2, 1) both; }
dialog.video-viewer::backdrop { background: #140f09d9; backdrop-filter: blur(12px); }
dialog.video-viewer:focus { outline: none; }
.video-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 12px 4px; }
.video-header h2 { margin: 0; font: italic 400 24px/1.25 Georgia, "Times New Roman", serif; letter-spacing: -.4px; color: #fff6e5; }
.video-close { border: 1px solid #ffefd02e; }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #120d08; box-shadow: 0 0 0 1px #ffefd00f; }
.video-frame video { display: block; width: 100%; height: 100%; background: #120d08; }
.video-frame video:focus-visible { outline: 2px solid #f1bf79; outline-offset: -2px; }
.video-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: #1a130de0; text-align: center; font-size: 13px; line-height: 1.7; }
.video-error p { margin: 0; max-width: 340px; }
.video-error button { min-height: 44px; padding: 10px 20px; border: 1px solid #ebc69766; border-radius: 3px; background: transparent; font-size: 12px; letter-spacing: .2px; }
.video-error button:hover { background: #ffefd014; }
.video-caption { margin: 14px 0 0; font: italic 14px/1.6 Georgia, serif; text-align: center; color: #e3cfae; }
@keyframes video-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.eyebrow { margin: 0; font-size: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; line-height: 1.8; color: var(--accent); }
.handwritten { font-family: "Snell Roundhand", "Segoe Print", "Bradley Hand", cursive; font-weight: 400; }
dialog { border: 1px solid #dcd1bd; padding: 0; border-radius: 8px; width: min(850px, calc(100% - 32px)); max-height: calc(100dvh - 48px); background: var(--paper); color: var(--ink); box-shadow: 0 30px 120px #20170c60; }
dialog::backdrop { background: #211b12b5; backdrop-filter: blur(10px); }
.reader-shell { display: flex; flex-direction: column; max-height: calc(100dvh - 50px); }
.reader-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 30px; border-bottom: 1px solid var(--rule); gap: 16px; }
.reader-header h2 { font: 28px Georgia, serif; margin: 7px 0 0; }
.close-button { border: 1px solid var(--rule); border-radius: 50%; width: 44px; height: 44px; flex-shrink: 0; background: transparent; font-size: 17px; }
.close-button:hover { background: #e8e0d1; }
.reader-content { padding: 24px 30px; overflow-y: auto; overscroll-behavior: contain; }
.reader-content figure { margin: 0; }
.reader-image { display: block; max-width: 100%; width: auto; height: auto; max-height: 65dvh; margin-inline: auto; object-fit: contain; border-radius: 2px; }
.letter-reader .reader-image { width: 100%; max-height: none; }
figcaption { text-align: center; font: italic 14px/1.7 Georgia, serif; color: #736453; margin-top: 17px; }
.reader-navigation { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 30px; border-top: 1px solid var(--rule); }
.reader-navigation button { min-height: 44px; border: 0; background: transparent; padding: 10px 0; font-size: 12px; }
.reader-navigation button span { margin: 0 8px; }
#page-status { font-size: 11px; color: var(--muted); margin: 0; }
.letter-empty { max-width: 430px; margin: 30px auto 50px; padding: 20px; }
.empty-greeting { font-size: 39px; margin: 0 0 35px; color: var(--accent); }
.empty-title { font: 26px/1.3 Georgia, serif; }
.empty-description { font-size: 14px; color: #776b5d; line-height: 1.9; }
.empty-signature { margin-top: 37px; font-size: 26px; }
details { margin-top: 24px; font-size: 14px; line-height: 1.8; }
summary { cursor: pointer; color: var(--accent); padding-block: 10px; }
.transcription { white-space: pre-wrap; }
.image-error { text-align: center; padding: 40px 15px; color: #873b2b; line-height: 1.8; }
.eink-toolbar { display: none; }

/* reMarkable-style e-ink tablet for the letters. */
dialog.letter-reader { --eink: #e9e7df; --eink-ink: #1d1d1b; width: min(760px, calc(100% - 32px)); height: calc(100dvh - 48px); max-height: 1000px; padding: 26px 26px 26px 68px; border: 0; border-radius: 26px; background: linear-gradient(145deg, #d8d7d1, #b9b8b1); box-shadow: inset 0 0 0 1px #ffffff80, inset 0 -2px 0 #8f8e8780, 0 40px 120px #120c0690, 0 6px 18px #120c0650; overflow: visible; }
dialog.letter-reader::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 46px; border-radius: 26px 0 0 26px; background: linear-gradient(90deg, #3d3d3a, #57574f 70%, #2e2e2b); }
dialog.letter-reader::backdrop { background: #140f09cc; backdrop-filter: blur(12px); }
.letter-reader .reader-shell { position: relative; height: 100%; max-height: none; background: var(--eink); color: var(--eink-ink); border-radius: 3px; box-shadow: inset 0 0 0 1px #00000026, inset 0 2px 6px #0000001c; overflow: hidden; }
.letter-reader .reader-shell::after { content: ""; position: absolute; inset: 0; background: var(--eink-ink); opacity: 0; pointer-events: none; }
.letter-reader.eink-wake .reader-shell::after { animation: eink-flash .55s steps(1, end); }
.letter-reader .eink-toolbar { position: absolute; z-index: 1; left: 68px; top: 26px; bottom: 26px; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 72px; border-right: 1px solid #1d1d1b1f; }
.letter-reader .eink-toolbar svg { width: 20px; height: 20px; fill: none; stroke: #1d1d1b; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.letter-reader .reader-header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 14px 16px; border: 0; justify-content: flex-end; pointer-events: none; }
.letter-reader .reader-header > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.letter-reader .close-button { pointer-events: auto; width: 40px; height: 40px; border: 1px solid #1d1d1b; border-radius: 50%; color: var(--eink-ink); background: var(--eink); font-size: 15px; }
.letter-reader .close-button:hover { background: var(--eink-ink); color: var(--eink); }
.letter-reader .reader-content { flex: 1; padding: 64px 36px 24px 88px; scrollbar-width: thin; scrollbar-color: #1d1d1b55 transparent; }
.letter-reader .reader-content.eink-refresh { animation: eink-page .42s steps(1, end); }
.letter-reader .reader-image { height: auto; filter: none; mix-blend-mode: normal; border-radius: 0; }
.letter-reader details { margin-top: 26px; border-top: 1px solid #1d1d1b26; padding-top: 6px; }
.letter-reader summary { color: var(--eink-ink); font-size: 13px; letter-spacing: .2px; list-style-position: outside; }
.letter-reader .transcription { font: 16px/1.85 Georgia, serif; color: var(--eink-ink); }
.letter-reader .reader-navigation { padding: 10px 24px 12px 88px; border-top: 1px solid #1d1d1b1f; }
.letter-reader .reader-navigation button { color: var(--eink-ink); font-size: 13px; }
.letter-reader #page-status { color: var(--eink-ink); font-size: 12px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.letter-reader :focus-visible { outline-color: var(--eink-ink); }
@keyframes eink-flash { 0% { opacity: 1; } 35% { opacity: 0; background: #fff; } 60% { opacity: .9; background: var(--eink-ink); } 100% { opacity: 0; } }
@keyframes eink-page { 0% { filter: invert(1); } 45% { filter: none; opacity: .15; } 100% { opacity: 1; } }

@media (max-width: 900px) {
    .desktop-instruction { display: none; }
    .scene-bottom { left: 25px; right: 25px; gap: 12px; }
    .scene-signature { font-size: 14px; }
}
@media (max-width: 600px) {
    .scene-header { top: max(22px, env(safe-area-inset-top)); left: 20px; right: 24px; gap: 13px; }
    .scene-header h1 { font-size: 27px; }
    .birthday-mark { font-size: 27px; }
    .scene-bottom { left: 16px; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); grid-template-columns: 1fr; justify-items: center; gap: 12px; }
    .scene-instructions { font-size: 9px; order: 1; }
    .scene-instructions > span:first-child { font-size: 14px; }
    .scene-signature { display: none; }
    .scene-controls { padding: 5px 7px; gap: 2px; }
    .read-button, .video-button { padding-inline: 12px; }
    .read-button span { margin-left: 7px; }
    .video-button svg { margin-left: 15px; }
    .letter-hotspot { gap: 9px; }
    .hotspot-label { font-size: 10px; padding: 10px 13px; gap: 8px; }
    .scene-notice { bottom: 135px; font-size: 11px; }
    .gallery-bar { left: 12px; right: 12px; bottom: max(20px, env(safe-area-inset-bottom)); margin-inline: auto; transform: none; width: fit-content; max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center; animation-name: gallery-in-compact; }
    @keyframes gallery-in-compact { from { opacity: 0; transform: translateY(10px); } }
    .gallery-bar kbd { display: none; }
    .gallery-action { order: -1; flex-basis: 100%; justify-content: center; border-bottom: 1px solid #d4bb9333; border-radius: 3px 3px 0 0; }
    #gallery-action-divider { display: none; }
    .reader-header { padding: 20px; }
    .reader-header h2 { font-size: 24px; }
    .reader-content { padding: 20px 15px; }
    .reader-navigation { padding: 10px 20px; }
    /* A fixed-size tablet that fits the first letter; longer pages scroll inside the screen. */
    dialog.letter-reader { --tablet-height: min(560px, calc(100dvh - 24px)); width: calc(100% - 20px); height: var(--tablet-height); max-height: none; padding: 14px 14px 14px 36px; border-radius: 18px; }
    .letter-reader .reader-shell { height: calc(var(--tablet-height) - 28px); max-height: none; }
    .letter-reader .reader-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .letter-reader details { padding-inline: 4px; }
    .letter-reader summary { list-style-position: inside; padding-inline: 2px; }
    dialog.letter-reader::before { width: 24px; border-radius: 18px 0 0 18px; }
    .letter-reader .eink-toolbar { display: none; }
    .letter-reader .reader-content { padding: 58px 16px 18px; }
    .letter-reader .reader-navigation { padding: 8px 16px; }
    dialog.video-viewer { --pad: 10px; --chrome: 130px; width: min(calc(100% - 16px), calc((100dvh - var(--chrome)) * 16 / 9 + var(--pad) * 2 + 2px)); padding: 10px var(--pad) 14px; border-radius: 10px; }
    .video-header { padding: 0 0 8px 6px; }
    .video-header h2 { font-size: 20px; }
    .video-caption { margin-top: 10px; font-size: 13px; }
    .scene-unavailable #reset-view, .scene-unavailable #reset-view + .control-divider { display: none; }
}
@media (max-width: 380px) {
    .scene-unavailable .video-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .scene-unavailable .video-button { min-width: 44px; }
    .scene-unavailable .video-button svg { margin-left: 0; }
}
@media (max-height: 500px) {
    dialog.video-viewer { --chrome: 88px; padding-block: 8px 10px; }
    .video-header { padding-bottom: 6px; }
    .video-header h2 { font-size: 18px; }
    .video-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}