@view-transition { navigation: auto; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { color-scheme: light; }
html { min-height: 100%; }
body { margin: 0; }
button, input, select { font: inherit; }
button, a, input, summary, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #a54366; outline-offset: 5px; }
.visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.home-page { padding: 30px 24px; color:#111; background:#fff; font:17px/1.55 Georgia,'Times New Roman',serif; }
.home-page #app { max-width:720px; }
.home-page h1 { margin:0 0 12px;font-size:2em; }
.home-page h2 { font-size:1.25em; }
.home-page hr { margin:25px 0;border:0;border-top:1px solid #bbb; }
.home-page a { color:#0000ee;text-decoration:underline; }
.home-page a:visited { color:#551a8b; }
.home-page .moment-list { padding-left:24px; }
.home-page .moment-list li { margin:20px 0; }
.home-page .moment-list p { margin:3px 0;color:#444;font-size:.92em; }
.home-page small { color:#777;font:12px/1.5 monospace; }
.home-page footer { color:#555;font-size:.88em; }
.tiny-heart { color:#a54366; }
.archive-nav { margin:24px 0; }
.replay-picker { display:block;margin-top:14px; }
.replay-picker select { padding:4px 10px;background:white;border:1px solid #aaa;border-radius:3px; }
.preview-banner { display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;padding:10px 14px;margin-bottom:24px;border:1px dashed #caa18c;background:#fff8e7;color:#654936;font:12px/1.5 ui-monospace,monospace; }
.preview-banner a { color:inherit; }
.moment-page { --ink:#513b38;--muted:#856c64;--accent:#a94d64;--paper:#fffdf8;min-height:100vh;color:var(--ink);background:#f5eee7;font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.moment-page #app { min-height:100svh;overflow:hidden;position:relative;background:radial-gradient(ellipse at 20% 20%,#fff8e9c4,transparent 52%),radial-gradient(ellipse at 95% 60%,#efd6d385,transparent 50%); }
.moment-page .preview-banner { position:relative;z-index:10;margin:12px;border-radius:4px; }
.widget-header { display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:auto;padding:34px 5vw;position:relative;z-index:5; }
.back-link { color:var(--muted);font-size:13px;text-decoration:none;letter-spacing:.01em; }
.back-link:hover { color:var(--accent); }
.wordmark { font:italic 20px Georgia,serif;color:var(--accent); }
.widget-intro { padding:35px 24px 0;text-align:center;max-width:800px;margin:auto;animation:arrive .85s ease both; }
.eyebrow { text-transform:uppercase;letter-spacing:.22em;color:var(--muted);font-size:10px;font-weight:600;margin:0 0 20px; }
.widget-intro h1 { font:normal clamp(35px,5vw,64px)/1.12 Georgia,'Times New Roman',serif;letter-spacing:-.045em;margin:0;text-wrap:balance; }
.intro-description { max-width:450px;margin:24px auto 0;color:var(--muted);font-size:14px; }
.widget-body { padding:50px 24px 35px;max-width:1180px;margin:auto;animation:arrive 1s .12s ease both; }
.widget-footer { text-align:center;color:var(--muted);font:italic 13px Georgia,serif;letter-spacing:.04em;padding:25px 24px 35px; }
.handwritten { font:italic 19px Georgia,serif;color:var(--muted); }
.letter-body { min-height:450px;display:flex;flex-direction:column;align-items:center;padding-top:110px; }
.envelope { width:min(420px,86vw);height:260px;position:relative;perspective:1000px;transition:height .8s ease,margin-top .8s ease; }
.envelope-back { position:absolute;inset:0;background:#d8baa6;box-shadow:0 30px 65px #684b3826;border-radius:4px; }
.envelope-front { position:absolute;inset:0;z-index:3;background:linear-gradient(32deg,#e7cab4 50%,transparent 50%) left/51% 100% no-repeat,linear-gradient(-32deg,#edd3bf 50%,transparent 50%) right/51% 100% no-repeat;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);border-radius:4px;pointer-events:none;transition:opacity .4s; }
.envelope-flap { position:absolute;inset:0;z-index:5;background:#e8cbb5;clip-path:polygon(0 0,100% 0,50% 55%);transform-origin:top;transition:transform .65s ease,opacity .5s,z-index .65s;filter:drop-shadow(0 3px 2px #684b3812);pointer-events:none; }
.wax-seal { position:absolute;left:calc(50% - 27px);top:109px;z-index:6;border:1px solid #b15d6c;border-radius:50%;width:54px;height:54px;background:radial-gradient(circle at 35% 25%,#c9727e,#9f3f54);box-shadow:0 3px 8px #54253135,inset 0 0 0 4px #ffffff18;color:#ffebdc;font:33px Georgia,serif;cursor:pointer;transition:transform .3s,top .8s; }
.wax-seal:hover { transform:scale(1.08); }
.letter-paper { position:relative;width:92%;margin:0 auto;background:var(--paper);padding:34px 30px 30px;box-shadow:0 7px 30px #5a3e3220;border:1px solid #eee4d8;font:16px/1.8 Georgia,serif;z-index:4;transform:translateY(0);animation:letter-rise .8s ease both; }
.paper-date { display:block;text-align:right;font:10px/1.5 -apple-system,sans-serif;letter-spacing:.12em;color:#9a8272;margin-bottom:25px; }
.letter-paper p { margin:0 0 18px; }
.letter-paper .signature { margin:25px 0 0;font-style:italic;color:var(--accent); }
.envelope.is-open { height:auto;min-height:340px;margin-top:0;padding-bottom:20px; }
.is-open .envelope-flap { transform:rotateX(180deg);opacity:0;z-index:1; }
.is-open .envelope-front { opacity:.18;z-index:2; }
.is-open .wax-seal { top:auto;bottom:-12px; }
.envelope-note { position:relative;margin:40px 0 0;text-align:center; }
.theme-song { --ink:#453a3a;--muted:#8e7473;--accent:#b55368;background:#f8eceb; }
.theme-song #app { background:radial-gradient(ellipse at 10% 45%,#fce5d9,transparent 65%),radial-gradient(ellipse at 90% 75%,#e5d9e7,transparent 60%); }
.song-body { max-width:980px;padding-top:55px; }
.record-player { display:grid;grid-template-columns:1fr .9fr;gap:65px;align-items:center; }
.record-sleeve { position:relative;aspect-ratio:1;background:linear-gradient(135deg,#e5b4ab,#f1d8c7);border:1px solid #ffffff8c;border-radius:4px;box-shadow:0 25px 60px #76535024,0 1px 4px #76535018;padding:26px;transform:rotate(-3deg); }
.sleeve-mark { position:absolute;right:12px;bottom:8px;color:#b1756c;font:30px Georgia,serif; }
.vinyl { display:block;width:100%;aspect-ratio:1;border:0;border-radius:50%;background:repeating-radial-gradient(circle at center,#242020 0 1px,#151414 2px 3px,#302a2a 4px,#1b1818 5px 7px);box-shadow:2px 7px 12px #2f222b45;position:relative;cursor:pointer;padding:0;animation:spin 13s linear infinite;animation-play-state:paused; }
.vinyl::after { content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent,#ffffff20 15deg,transparent 60deg,transparent 180deg,#ffffff15 200deg,transparent 245deg);pointer-events:none; }
.vinyl:disabled { cursor:default; }
.is-playing .vinyl { animation-play-state:running; }
.record-label { position:absolute;inset:33%;background:#eec5b1;border:1px solid #d7a38f;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#6d453d; }
.record-label>span { font:7px/1.2 -apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase; }
.record-label strong { font:italic clamp(11px,1.6vw,18px)/1.2 Georgia,serif;max-width:90%; }
.record-hole { width:7px;height:7px;border-radius:50%;background:#241c1c;margin-top:5px; }
.track-kicker { font-size:9px;letter-spacing:.2em;color:var(--muted);margin:0 0 12px; }
.track-info h2 { font:normal 35px/1.2 Georgia,serif;letter-spacing:-.03em;margin:0 0 8px; }
.artist { color:var(--muted);font-size:13px;margin:0 0 28px; }
.play-button { border:1px solid #b1717e;background:#af5268;color:#fff8ef;border-radius:99px;padding:13px 26px;cursor:pointer;font-size:13px;min-height:46px;transition:transform .2s,background .2s; }
.play-button:hover:not(:disabled) { background:#96435a;transform:translateY(-2px); }
.play-button:disabled { background:#e3c7c5;border-color:#d5b3b2;color:#75545b;cursor:default; }
.track-position { display:block;width:100%;height:24px;margin:24px 0 2px;accent-color:#ae5267;cursor:pointer; }
.time-row { display:flex;justify-content:space-between;color:var(--muted);font:11px/1.5 ui-monospace,monospace; }
.player-status { font-size:12px;color:var(--muted);margin-top:20px;min-height:36px; }
.lyrics { max-width:480px;margin:45px auto 0;color:var(--muted);font:italic 17px/1.8 Georgia,serif;text-align:center; }
.lyrics summary { cursor:pointer;margin-bottom:20px;font:12px -apple-system,sans-serif; }
.lyrics p { white-space:pre-wrap;margin:7px 0; }
.theme-gallery { background:#f3f0e7;--ink:#424b3e;--muted:#78806c;--accent:#667650; }
.theme-gallery #app { background:radial-gradient(ellipse at top,#fdfbf5,transparent 80%); }
.memory-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start; }
.memory-card { margin:0;background:#fffefa;padding:12px 12px 20px;box-shadow:0 8px 20px #4b493b13,0 1px 4px #4b493b10;transform:rotate(-3deg);transition:transform .4s;position:relative; }
.memory-card:nth-child(3n + 2) { transform:rotate(3deg);margin-top:28px; }
.memory-card:nth-child(3n) { transform:rotate(-1deg); }
.memory-card:hover { transform:translateY(-6px) rotate(0);z-index:2; }
.memory-card::before { content:'';position:absolute;top:-9px;left:calc(50% - 30px);width:60px;height:22px;background:#d7cfb17a;transform:rotate(-6deg);z-index:2; }
.memory-image { display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#e9e6dc; }
video.memory-image { object-fit:contain; }
.photo-button { border:0;padding:0;background:none;width:100%;cursor:zoom-in;display:block; }
.memory-card figcaption { font:italic 15px/1.5 Georgia,serif;margin:15px 6px 0;min-height:24px; }
.placeholder-art { width:100%;aspect-ratio:4/5;background:linear-gradient(150deg,#f1d3b5,#d4ac95);display:grid;place-items:center;position:relative;overflow:hidden; }
.placeholder-art span { font:70px Georgia,serif;color:#fff4dfc9; }
.placeholder-1 .placeholder-art { background:linear-gradient(160deg,#c8d0bf,#8b9b84); }
.placeholder-2 .placeholder-art { background:linear-gradient(150deg,#e6c4bf,#c3929c); }
.empty-gallery { text-align:center;color:var(--muted);font-size:13px;margin:0 0 45px; }
.lightbox { border:0;padding:24px;background:#fffdf8;color:#513b38;border-radius:8px;max-width:min(95vw,1000px);max-height:95svh;box-shadow:0 30px 90px #0005; }
.lightbox::backdrop { background:#29231ed9;backdrop-filter:blur(10px); }
.lightbox-close { display:block;border:0;background:none;color:#513b38;margin:0 0 15px auto;padding:6px;cursor:pointer;font-size:13px; }
.lightbox-image { display:block;max-width:100%;max-height:72svh;object-fit:contain;margin:auto; }
.lightbox-caption { text-align:center;font:italic 16px Georgia,serif;margin:18px 0 2px; }
@keyframes arrive { from { opacity:0;transform:translateY(20px); } to { opacity:1;transform:translateY(0); } }
@keyframes letter-rise { from { opacity:0;transform:translateY(65px); } to { opacity:1;transform:translateY(-25px); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:650px) {
  .home-page { padding:22px 18px;font-size:16px; }
  .widget-header { padding:24px 22px; }
  .widget-intro { padding-top:25px; }
  .widget-intro h1 { font-size:38px; }
  .intro-description { font-size:13px;max-width:320px; }
  .widget-body { padding:40px 22px 25px; }
  .letter-body { padding-top:100px;min-height:430px; }
  .letter-paper { padding:28px 23px;font-size:15px; }
  .envelope { height:220px; }
  .wax-seal { top:92px; }
  .record-player { display:flex;flex-direction:column;gap:35px; }
  .record-sleeve { width:min(300px,78vw);padding:22px; }
  .record-label strong { font-size:16px; }
  .track-info { width:min(340px,100%);text-align:center; }
  .track-info h2 { font-size:30px; }
  .artist { margin-bottom:22px; }
  .track-position { margin-top:20px; }
  .memory-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }
  .memory-card { padding:8px 8px 14px; }
  .memory-card figcaption { font-size:13px;margin:12px 2px 0; }
  .memory-card:nth-child(3n + 2) { margin-top:0; }
  .memory-card:nth-child(even) { margin-top:20px; }
  .placeholder-art span { font-size:50px; }
}
@media(max-width:360px) { .memory-grid { grid-template-columns:1fr;gap:30px;padding:0 18px; } }
.theme-food { --ink:#59433b;--muted:#856b60;--accent:#a65064;background:#fbf6ed; }
.theme-food #app { background:radial-gradient(ellipse at 95% 8%,#f4ded788,transparent 35%),#fbf6ed; }
.theme-food .widget-header { max-width:1120px;padding-bottom:22px; }
.theme-food .widget-intro { max-width:1000px;position:relative;min-height:265px;text-align:left;padding:35px 310px 35px 36px; }
.theme-food .eyebrow { color:#9a625e;letter-spacing:.15em;margin-bottom:17px; }
.theme-food .widget-intro h1 { font-size:clamp(42px,5.4vw,66px);max-width:560px;line-height:1.08; }
.theme-food .intro-description { margin:20px 0 0;max-width:430px;font-size:14px;line-height:1.8; }
.food-hero-art { position:absolute;right:8px;top:10px;width:285px;height:auto;transform:rotate(3deg); }
.food-body { max-width:1000px;padding-top:12px;padding-bottom:15px; }
.food-day-nav { display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid #e6d9ca;border-bottom:1px solid #e6d9ca;padding:18px 0; }
.food-day-nav a { text-decoration:none;font-size:13px;color:#685047;border:1px solid #e5d4c5;padding:9px 17px;border-radius:30px;background:#fffcf5;transition:background .2s,transform .2s;min-height:42px;display:flex;align-items:center;gap:7px; }
.food-day-nav a:hover { background:#f5e5da;transform:translateY(-2px); }
.food-little-note { color:var(--muted);font:italic 15px/1.7 Georgia,serif;margin:21px 0 40px; }
.food-stage { display:grid;grid-template-columns:190px minmax(0,1fr);gap:25px;margin-bottom:30px;scroll-margin-top:24px; }
.food-stage-label { position:relative;padding:7px 0 0 27px; }
.food-stage-label::before { content:'';position:absolute;left:0;top:14px;width:10px;height:10px;border:2px solid #b57f78;border-radius:50%;background:#fbf6ed; }
.food-stage-label::after { content:'';position:absolute;left:5px;top:33px;bottom:-12px;border-left:1px dashed #d9bfb0; }
.food-stage:last-of-type .food-stage-label::after { display:none; }
.food-stage-number { font:11px/1.5 ui-monospace,monospace;letter-spacing:.12em;color:#8d6958; }
.food-stage-label h2 { font:normal 25px/1.2 Georgia,serif;letter-spacing:-.025em;margin:9px 0 12px;text-wrap:balance; }
.food-stage-label p { font-size:12px;line-height:1.7;color:var(--muted);margin:0;max-width:135px; }
.food-places { display:grid;gap:16px;min-width:0; }
.food-card { display:flex;align-items:flex-start;gap:18px;background:#fffdf8;border:1px solid #e9ddd0;border-radius:19px;padding:25px 27px;box-shadow:0 4px 0 #eee3d63b;position:relative; }
.food-place-icon { flex:0 0 47px;width:47px;height:52px;display:grid;place-items:center;border-radius:15px;background:#f5e7da;font-size:27px;transform:rotate(-5deg); }
.food-card-pims .food-place-icon { background:#eaeedc;transform:rotate(5deg); }
.food-card-jpan .food-place-icon { background:#f7e6ca; }
.food-card-vanlav .food-place-icon { background:#f7e0e4;transform:rotate(5deg); }
.food-place-content { min-width:0;flex:1; }
.food-place-tag { margin:0 0 5px;color:#80665b;font-size:10px;letter-spacing:.04em; }
.food-card h3 { font:normal 29px/1.2 Georgia,serif;letter-spacing:-.03em;margin:0 0 8px; }
.food-address { font-size:12px;line-height:1.6;color:var(--muted);text-decoration-color:#d5bca9;text-underline-offset:4px; }
.food-address:hover { color:var(--accent); }
.food-gift { margin:22px 0 0; }
.food-gift>span { display:block;color:#a36366;font-size:9px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:5px; }
.food-gift strong { display:block;font-size:16px;font-weight:600;line-height:1.55; }
.food-condition { margin:7px 0 0;font-size:12px;color:var(--muted);line-height:1.7; }
.food-love-note { font:italic 14px/1.7 Georgia,serif;background:#f8e9e9;padding:12px 15px;border-radius:2px 12px 12px 12px;color:#8f5360;margin:15px 0 0; }
.food-actions { display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin-top:20px; }
.food-walk,.food-map summary { display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 17px;font-size:12px;line-height:1.6;border-radius:30px;text-decoration:none;cursor:pointer;white-space:nowrap; }
.food-walk { background:#a45063;color:#fffdf8;border:1px solid #a45063;transition:background .2s; }
.food-walk:hover { background:#8e3c50; }
.food-map { display:contents; }
.food-map summary { list-style:none;color:#755a4e;border:1px solid #ddcbbc;background:#fffcf5; }
.food-map summary::-webkit-details-marker { display:none; }
.food-map summary::after { content:'＋';margin-left:10px;color:#a77964; }
.food-map[open] summary::after { content:'−'; }
.food-map summary:hover { background:#f6eade; }
.food-map-frame { width:100%;height:310px;flex-basis:100%;border:1px solid #e5d6c6;border-radius:12px;background:#f4eee2;margin-top:6px; }
.food-map-external { font-size:12px;color:var(--accent);text-underline-offset:4px;padding:5px 0; }
.food-ending { text-align:center;border:1px dashed #d8b8ab;border-radius:20px;margin:45px auto 5px;padding:24px;background:#f5e7df70; }
.food-ending-heart { font:36px/1 Georgia,serif;color:#b87480; }
.food-ending p { font:italic 21px/1.5 Georgia,serif;margin:11px 0 4px;text-wrap:balance; }
.food-ending>span:last-child { color:var(--muted);font-size:12px; }
@media(max-width:760px) {
  .theme-food .widget-intro { padding:20px 230px 25px 24px;min-height:240px; }
  .theme-food .widget-intro h1 { font-size:46px; }
  .food-hero-art { width:220px;right:4px;top:35px; }
  .food-stage { grid-template-columns:150px minmax(0,1fr);gap:16px; }
  .food-card { padding:23px 20px;gap:14px; }
  .food-stage-label h2 { font-size:23px; }
}
@media(max-width:550px) {
  .theme-food .widget-header { padding:22px 22px 12px; }
  .theme-food .widget-intro { text-align:center;padding:20px 22px 0;min-height:0; }
  .theme-food .eyebrow { font-size:9px;margin-bottom:14px; }
  .theme-food .widget-intro h1 { font-size:43px;max-width:340px;margin:auto; }
  .theme-food .intro-description { font-size:13px;line-height:1.8;margin:17px auto 0;max-width:315px; }
  .food-hero-art { position:static;display:block;width:210px;margin:0 auto -1px; }
  .food-body { padding:0 18px 10px; }
  .food-day-nav { display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 0; }
  .food-day-nav a { justify-content:center;font-size:12px;padding:10px 8px;min-height:44px; }
  .food-little-note { text-align:center;font-size:14px;line-height:1.6;margin:18px 8px 30px; }
  .food-stage { display:block;margin-bottom:30px; }
  .food-stage-label { padding:0 0 15px 26px; }
  .food-stage-label::before { top:7px; }
  .food-stage-label::after { display:none; }
  .food-stage-number { float:left;margin:3px 9px 0 0;font-size:10px; }
  .food-stage-label h2 { font-size:24px;margin:0 0 6px; }
  .food-stage-label p { max-width:none;font-size:11px; }
  .food-card { padding:21px 18px;gap:13px;border-radius:17px; }
  .food-place-icon { flex-basis:37px;width:37px;height:44px;font-size:23px;border-radius:12px; }
  .food-place-tag { font-size:10px;line-height:1.6;margin-bottom:4px; }
  .food-card h3 { font-size:28px; }
  .food-address { font-size:11px; }
  .food-gift { margin-top:18px; }
  .food-gift strong { font-size:15px; }
  .food-actions { margin-left:-50px;gap:8px;margin-top:19px; }
  .food-walk,.food-map summary { padding:10px 12px;font-size:12px;flex:1; }
  .food-map-frame { height:300px; }
  .food-map-external { padding:8px 3px; }
  .food-ending { margin-top:35px;padding:23px 19px; }
  .food-ending p { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }