@font-face {font-family:'Patrick Hand';font-weight:400;font-display:swap;src:url('assets/fonts/patrick-hand.ttf') format('truetype')}
@font-face {font-family:'ZCOOL KuaiLe';font-weight:400;font-display:swap;src:url('assets/fonts/zcool-kuaile-title.ttf') format('truetype')}
@font-face {font-family:'DM Sans';font-weight:400;font-display:swap;src:url('assets/fonts/dm-sans-regular.ttf') format('truetype')}
@font-face {font-family:'DM Sans';font-weight:500;font-display:swap;src:url('assets/fonts/dm-sans-medium.ttf') format('truetype')}
@font-face {font-family:'DM Sans';font-weight:700;font-display:swap;src:url('assets/fonts/dm-sans-bold.ttf') format('truetype')}

:root {--paper:#fff9e9;--ink:#725444;--muted:#a08970;--line:#d3b999;--accent:#c77c68;--sage:#9bad94;--blue:#a9c3bc;--yellow:#eac77e;font-family:'DM Sans','KaiTi','STKaiti','Microsoft YaHei',sans-serif;color:var(--ink);background:#eee3ce;font-synthesis:none;scrollbar-color:#c5ad8a #eee3ce}
* {box-sizing:border-box}
body {margin:0;padding:25px 25px 32px;background:radial-gradient(ellipse at 9% 4%,#f8eed7 0,transparent 42%),radial-gradient(#ac896c1d .7px,transparent .7px),#eee3ce;background-size:auto,7px 7px,auto}
button,a {-webkit-tap-highlight-color:transparent}
button {font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible {outline:2px dashed #bd7864;outline-offset:4px}
a {color:inherit}
.page-shell {position:relative;max-width:1530px;margin:auto;padding:0 48px;background-color:var(--paper);background-image:url('assets/paper-grain.svg');border:1.6px solid #b69978;border-radius:11px 6px 12px 8px / 8px 12px 7px 11px;box-shadow:7px 9px 0 #d3bea0,8px 10px 0 1px #b99c7c,0 15px 35px #95765916}
.page-shell:before {content:'';pointer-events:none;position:absolute;inset:11px;border:1px dashed #cfbda05c;border-radius:5px;z-index:0}
.masthead {position:relative;height:77px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px dashed #c7aa87}
.wordmark {display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:'Patrick Hand','KaiTi',cursive;font-size:27px;transform:rotate(-2deg)}
.wordmark svg {width:28px;height:28px;fill:#f1dba8;stroke:var(--ink);stroke-width:1.3}
.wordmark i {font-size:21px;color:#ae8870;margin:0 2px}
.masthead-note {font-family:'KaiTi','STKaiti',serif;font-size:13px;letter-spacing:2px;color:#a08770;transform:rotate(1deg)}
.tiny-heart {font-family:'Patrick Hand',cursive;color:var(--accent);font-size:23px;margin-left:8px;vertical-align:-2px}
.intro {position:relative;text-align:center;padding:31px 0 32px;isolation:isolate}
.eyebrow {display:inline-flex;align-items:center;gap:15px;background:#f4dfac;box-shadow:1px 2px 0 #c6a97a26;border-radius:47% 3% 45% 5% / 12% 29% 9% 30%;padding:6px 16px;margin:0 0 15px;font-family:'Patrick Hand',cursive;font-size:13px;letter-spacing:1.2px;transform:rotate(-2deg)}
.eyebrow span {font-size:15px;color:#be8c59}
h1 {position:relative;margin:0;font-family:'Patrick Hand','KaiTi',cursive;font-size:clamp(62px,6.8vw,103px);font-weight:400;line-height:1.06;letter-spacing:1px;color:#725444;text-shadow:2px 3px 0 #ecd49d;transform:rotate(-1deg)}
.title-second {display:block;margin-top:2px;font-size:.58em;text-shadow:none;line-height:1.35}
.title-second i {font-style:normal;font-size:.7em;color:#aa9176;padding-right:6px}
.chinese-name {position:relative;display:inline-block;font-family:'ZCOOL KuaiLe','KaiTi','STKaiti',cursive;font-weight:400;letter-spacing:6px;color:#bd7762;z-index:0}
.chinese-name:after {content:'';position:absolute;bottom:6px;left:-4px;right:0;height:10px;background:#f1dab2;border-radius:70% 10% 50% 15%;transform:rotate(-2deg);z-index:-1}
.title-spark {width:34px;height:34px;margin-left:12px;vertical-align:6px;fill:#f0d28f;stroke:#b38c61;stroke-width:1.5;transform:rotate(12deg)}
.intro-description {font-family:'KaiTi','STKaiti','Microsoft YaHei',serif;font-size:15px;line-height:1.9;letter-spacing:1.2px;margin:14px 0 0;color:#8e765f}
.intro-description>span {display:block;font-size:12px;color:#b09a7e;letter-spacing:1px}
.story-friend {position:absolute;bottom:13px;width:clamp(130px,16.5vw,210px);height:auto;z-index:-1;pointer-events:none}
.story-cat {left:3%;transform:rotate(-6deg)}
.story-bear {right:3%;transform:rotate(5deg)}
.intro-doodle {position:absolute;top:48px;right:21%;font-family:'Patrick Hand',cursive;font-size:32px;color:#d4aa8d;transform:rotate(19deg)}
.keyboard-section {position:relative;margin:9px auto 0;padding:19px 17px 15px;background:#fffdf5;border:1.6px solid #b69979;border-radius:8px 13px 7px 12px / 12px 7px 13px 8px;box-shadow:4px 5px 0 #dbc5a3;transform:rotate(-.25deg)}
.keyboard-section:before,.keyboard-section:after {content:'';pointer-events:none;position:absolute;z-index:2;width:92px;height:25px;background:repeating-linear-gradient(90deg,#c8b8917d 0 3px,#e2d5b17d 3px 7px);clip-path:polygon(2% 0,98% 0,100% 25%,97% 51%,100% 79%,98% 100%,1% 100%,4% 74%,0 38%)}
.keyboard-section:before {left:32px;top:-12px;transform:rotate(-9deg)}
.keyboard-section:after {right:33px;bottom:-10px;background:#a5c0b283;transform:rotate(-7deg);width:75px;height:22px}
.keyboard-caption {display:flex;align-items:center;gap:14px;margin:3px 13px 9px}
.handwritten {font-family:'ZCOOL KuaiLe','KaiTi','STKaiti',cursive;font-size:19px;letter-spacing:1px;color:#96705a;transform:rotate(-2deg)}
.caption-line {font-family:'Patrick Hand',cursive;font-size:35px;line-height:16px;color:#d2b68f;transform:rotate(-7deg)}
.caption-instruction {font-family:'KaiTi','STKaiti',serif;font-size:12px;color:#a48b70;margin-left:auto}
.cursor-icon {font-family:'Patrick Hand',cursive;color:var(--accent);font-size:24px;vertical-align:-3px;display:inline-block;margin-right:5px;transform:rotate(-8deg)}
.keyboard-scroll {padding-top:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#d1b894 transparent}
.keyboard-board {position:relative;aspect-ratio:1700/620;overflow:hidden;background:#fffdf5}
.keyboard-art {position:absolute;width:108.5882353%;height:auto;max-width:none;left:-4.7058824%;top:-14.516129%;mix-blend-mode:multiply;filter:sepia(.16) saturate(.82);pointer-events:none;user-select:none}
.key-hotspots {position:absolute;inset:0}
.key-hotspot {position:absolute;padding:0;border:1.8px solid transparent;border-radius:7px 11px 8px 6px / 9px 7px 11px 6px;background:transparent;transition:background .16s,box-shadow .16s,transform .16s,border-color .16s}
.key-hotspot:hover {background:#ecc88e34;border-color:#bd8b64;border-style:dashed;box-shadow:2px 3px 0 #9c795932;transform:translateY(-2px) rotate(-1deg)}
.key-hotspot:active,.key-hotspot.is-pressed {transform:translateY(2px);background:#d2a07d44;box-shadow:inset 0 2px 6px #8b725e2a}
.key-hotspot:focus-visible {outline:2px dashed #bd7864;outline-offset:-1px;background:#cc615022}
.key-hotspot.is-visited:after {content:'';position:absolute;right:6%;top:7%;width:6px;height:6px;border:1px solid #fff9e9;border-radius:40% 60% 45% 55%;background:#b18a77;box-shadow:0 1px 2px #6b4e3525}
.keyboard-under {display:flex;align-items:center;gap:15px;margin:10px 14px 1px;font-family:'KaiTi','STKaiti',serif}
.keyboard-help {font-size:12px;letter-spacing:.25px;color:#aa947b}
.little-star {font-size:17px;color:#bf9373;vertical-align:-1px;margin-right:6px}
.visit-status {font-family:'Patrick Hand','KaiTi',cursive;font-size:12px;color:#ae9b81;margin-left:auto;white-space:nowrap}
.visit-status b {font-weight:400;color:#987359;font-size:15px;margin-left:6px}
.visit-status>span {font-size:12px}
.directory-toggle {border:1px dashed #c4aa88;border-radius:3px 5px 3px 7px;padding:4px 8px;font-size:11px;background:#f8f0d9;color:#9b8065;white-space:nowrap;min-height:28px}
.directory-toggle span {margin-left:5px}
.directory-toggle:hover {background:#f0dfba}
.key-directory {margin:18px 14px 0;border-top:1px dashed var(--line);padding-top:10px}
.key-directory>p {font-family:'KaiTi','STKaiti',serif;font-size:13px;color:#a08970}
.key-directory>div {display:flex;flex-wrap:wrap;gap:8px}
.directory-key {font-family:'Patrick Hand','KaiTi',cursive;font-size:16px;min-width:43px;min-height:40px;padding:6px 10px;border:1.3px solid #b69a79;border-bottom:3px solid #b69a79;border-radius:6px 9px 5px 8px;background:#fff7e3;transform:rotate(-1deg)}
.directory-key:nth-child(3n) {transform:rotate(2deg);background:#edf1e6}
.directory-key:hover {background:#f1d4b1}
.mobile-help {display:none}
.secret-section {position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:13px;margin:29px auto 25px;padding:12px 21px 13px;width:fit-content;max-width:100%;border:1px dashed #c4a47b;border-radius:4px 8px 3px 6px;background:#f6e7bd;box-shadow:2px 3px 0 #ccb18a31;transform:rotate(-1.2deg)}
.secret-section>p:not(.sr-only) {font-family:'KaiTi','STKaiti',serif;font-size:15px;letter-spacing:1px;margin:0;color:#997a57}
.secret-ornament {color:#c29561;font-size:21px;line-height:1}
.secret-dots {display:flex;gap:6px}
.secret-dots>span {width:7px;height:7px;border:1px solid #c3a475;border-radius:40% 60% 45% 55%;transition:background .2s,transform .2s}
.secret-dots>span.filled {background:#b0bd97;border-color:#93a279;transform:scale(1.15)}
.secret-dots.found>span {background:var(--accent);border-color:var(--accent)}
.site-footer {position:relative;border-top:1px dashed #c7aa87;display:flex;align-items:center;justify-content:space-between;padding:18px 0 22px;color:#ae987c;font-family:'KaiTi','STKaiti',serif;font-size:11px;letter-spacing:.3px}
.footer-dot {padding:0 5px}
.site-footer i {font-family:'Patrick Hand',cursive;color:#c28c73;font-size:20px;vertical-align:-2px;margin-left:4px}
.book-page-number {position:absolute;left:50%;transform:translateX(-50%);font-family:'Patrick Hand',cursive;font-size:15px;color:#b39673}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

dialog {padding:0;max-height:calc(100dvh - 44px);overflow:auto;border:2px solid #9e7d5d;border-radius:11px 7px 15px 8px / 7px 12px 8px 15px;background:var(--paper) url('assets/paper-grain.svg');color:var(--ink);box-shadow:6px 7px 0 #9a785850,0 25px 90px #59452c2d}
dialog::backdrop {background:#675a477a;backdrop-filter:blur(5px)}
dialog[open] {animation:page-open .2s ease-out}
.memory-dialog {width:min(910px,calc(100vw - 48px))}
.modal-close {position:absolute;right:13px;top:11px;z-index:2;display:grid;place-items:center;width:35px;height:34px;padding:0;border:1.5px solid #b09273;border-radius:48% 52% 44% 56%;background:#fff7df;font-family:'Patrick Hand',cursive;font-size:26px;line-height:1;transform:rotate(8deg)}
.modal-close:hover {background:#ecd8b1;transform:rotate(-7deg)}
.memory-layout {display:grid;grid-template-columns:45% 55%;min-height:495px}
.memory-visual {position:relative;display:flex;align-items:center;justify-content:center;padding:52px 31px;overflow:hidden;background:linear-gradient(#a1b6a721 1px,transparent 1px),linear-gradient(90deg,#a1b6a721 1px,transparent 1px),#dfebe3;background-size:24px 24px;border-right:1px dashed #a7a58a}
.memory-visual:after {content:'a little moment, a lot of love';position:absolute;bottom:17px;left:0;right:0;text-align:center;font-family:'Patrick Hand',cursive;color:#a0ae9b;font-size:15px;letter-spacing:.3px;transform:rotate(-2deg)}
.photo-paper {position:relative;width:100%;max-width:310px;padding:11px 11px 0;background:#fffcf2;border:1px solid #d5c6a9;box-shadow:3px 5px 0 #9f987235,0 6px 14px #7d8b6b18;transform:rotate(-5deg)}
.photo-paper:before {content:'';position:absolute;z-index:1;width:81px;height:25px;left:calc(50% - 40px);top:-12px;background:repeating-linear-gradient(-40deg,#d0a58c9c 0 5px,#e5bd9e9c 5px 10px);transform:rotate(3deg);clip-path:polygon(2% 0,98% 0,100% 16%,97% 37%,100% 64%,98% 100%,1% 100%,3% 74%,0 44%)}
.photo-paper img {display:block;width:100%;aspect-ratio:4/4.65;object-fit:contain;background:#f2ead6}
.photo-expand {display:block;position:relative;width:100%;padding:0;border:0;background:transparent;text-align:inherit}
.photo-expand:not(:disabled) {cursor:zoom-in}
.photo-expand:disabled {cursor:default}
.photo-zoom-hint {position:absolute;right:6px;bottom:6px;padding:4px 7px;border:1px dashed #c4aa88;border-radius:4px;background:#fff9e9ed;color:#a18666;font-family:'KaiTi','STKaiti',serif;font-size:11px;line-height:1.3;transform:rotate(2deg)}
.photo-zoom-hint[hidden] {display:none}
.photo-dialog {width:min(1260px,calc(100vw - 32px));padding:24px 22px 15px}
.photo-dialog-title {font-family:'KaiTi','STKaiti',serif;font-size:24px;font-weight:400;line-height:1.5;color:#977356;text-align:center;padding:0 35px;margin:0 0 15px}
.photo-dialog-stage {display:flex;align-items:center;justify-content:center;min-height:120px;border:1px dashed #cfb995;border-radius:6px;background:#f5ecda;overflow:auto}
.photo-dialog-image {display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 170px);object-fit:contain}
.photo-dialog-hint {font-family:'KaiTi','STKaiti',serif;font-size:12px;text-align:center;color:#b49b7a;line-height:1.5;margin:12px 0 0}
.photo-handwriting {display:block;text-align:center;font-family:'KaiTi','STKaiti',serif;font-size:12px;letter-spacing:.3px;color:#a78d70;padding:15px 0 17px}
.photo-star {position:absolute;right:18px;bottom:40px;color:#bd9e69;font-size:36px;transform:rotate(17deg)}
.memory-content {position:relative;padding:43px 36px 20px;display:flex;flex-direction:column;background:linear-gradient(90deg,#b4a1820c,transparent 9%)}
.memory-content:before {content:'';position:absolute;top:0;bottom:0;left:6px;width:1px;background:#c7b28d26}
.memory-eyebrow {display:flex;justify-content:space-between;gap:12px;margin:0 0 25px;color:#b19a7d;font-family:'Patrick Hand','KaiTi',cursive;font-size:11px;letter-spacing:.5px}
.memory-eyebrow>span {white-space:nowrap;font-variant-numeric:tabular-nums}
.key-badge {display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;min-width:40px;min-height:39px;padding:3px 11px;margin-bottom:15px;border:1.5px solid #bba37b;border-bottom:3px solid #bba37b;border-radius:6px 9px 4px 8px;background:#f4e1ac;font-family:'Patrick Hand',cursive;font-size:23px;color:#9a7752;transform:rotate(-4deg)}
.memory-content h2 {font-family:'KaiTi','STKaiti','Songti SC',serif;font-size:29px;line-height:1.5;font-weight:400;letter-spacing:.3px;margin:0 0 15px;color:#8b6650}
.memory-text {font-family:'KaiTi','STKaiti','Microsoft YaHei',serif;font-size:15px;line-height:2;letter-spacing:.15px;color:#947b61;margin:0;white-space:pre-line;overflow-wrap:anywhere}
.memory-signature {font-family:'Patrick Hand','KaiTi','STKaiti',cursive;font-size:17px;color:#b19474;text-align:right;margin:23px 0 27px;transform:rotate(-3deg)}
.memory-signature span {font-size:24px;color:#c4846e;margin-left:3px;vertical-align:-2px}
.memory-nav {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;border-top:1px dashed #cfb995;padding-top:10px}
.memory-nav>span {font-family:'KaiTi','STKaiti',serif;font-size:10px;color:#bda789;white-space:nowrap}
.memory-nav button {display:flex;align-items:center;gap:5px;min-height:37px;padding:7px 0;border:0;background:transparent;font-family:'Patrick Hand','KaiTi',cursive;font-size:23px;color:#ae8767}
.memory-nav button span {font-size:13px}
.memory-nav button:hover {color:#bf7b62;transform:rotate(-2deg)}
.birthday-dialog {width:min(790px,calc(100vw - 44px));text-align:center;padding:32px 43px 27px}
.surprise-eyebrow {display:inline-block;margin:5px 0 15px;padding:5px 15px;background:#f4dfac;transform:rotate(-3deg);font-family:'Patrick Hand',cursive;font-size:14px;letter-spacing:1px;color:#ac8a5e}
.surprise-eyebrow span {color:#c88e68;font-size:19px;margin-left:4px}
.birthday-dialog h2 {font-family:'KaiTi','STKaiti',serif;font-size:35px;line-height:1.4;font-weight:400;margin:0;color:#b6775f}
.birthday-dialog h2 span {font-family:'Patrick Hand',cursive;color:#c78e71;font-size:40px}
.surprise-message {font-family:'KaiTi','STKaiti',serif;font-size:14px;line-height:1.9;color:#ae9374;margin:13px 0 22px}
.video-frame {position:relative;width:100%;aspect-ratio:16/9;border:1.7px solid #c0a27a;border-radius:8px 5px 11px 6px;overflow:hidden;background:#f2e6c7;box-shadow:3px 4px 0 #d8bf985c;transform:rotate(-.4deg)}
.video-frame video {display:block;width:100%;height:100%}
.video-frame>video:not([src]) {visibility:hidden}
.video-frame:has(video:not([src])) {background-image:url('assets/video-poster.svg');background-size:cover}
.video-placeholder {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;background:transparent;color:#ad8b61}
.video-placeholder[hidden] {display:none}
.film-icon {display:grid;place-items:center;width:58px;height:58px;padding-left:5px;border:1.7px solid #b89a74;border-radius:47% 53% 46% 54%;background:#fff4d882;font-family:'Patrick Hand',cursive;font-size:30px;transform:rotate(-4deg)}
.video-placeholder strong {font-family:'KaiTi','STKaiti',serif;font-size:23px;font-weight:400;letter-spacing:1px}
.video-placeholder>span:last-child {font-family:'KaiTi','STKaiti',serif;font-size:12px;color:#b7a07c}
.birthday-wish {font-family:'KaiTi','STKaiti',serif;font-size:15px;letter-spacing:.5px;margin:22px 0;color:#b39671}
.back-to-keyboard {padding:10px 17px;border:1.5px solid #9c7d5a;border-bottom:3px solid #9c7d5a;border-radius:6px 9px 4px 7px;background:#d8e1c7;color:#896e4f;font-family:'KaiTi','STKaiti',serif;font-size:13px;letter-spacing:.5px;transform:rotate(-1deg)}
.back-to-keyboard span {padding-left:10px}
.back-to-keyboard:hover {background:#cad9b8}
.confetti-layer {pointer-events:none;position:fixed;inset:0;z-index:1000;overflow:hidden}
.confetti {position:absolute;top:-30px;width:7px;height:14px;animation:confetti-fall 3s ease-in forwards}
.confetti:nth-child(3n) {width:8px;height:8px;border-radius:50%}
@keyframes page-open {from{opacity:0;transform:translateY(9px) rotate(-.6deg)}to{opacity:1;transform:none}}
@keyframes confetti-fall {to{transform:translate(var(--drift),110vh) rotate(var(--rotation));opacity:.15}}

@media (min-width:1600px) {.intro{padding-top:36px;padding-bottom:35px}.story-cat{left:5%}.story-bear{right:5%}}
@media (max-width:1100px) {
  body{padding:20px 19px 29px}.page-shell{padding:0 28px}.masthead{height:71px}.story-friend{width:145px;bottom:14px}.story-cat{left:0}.story-bear{right:0}.intro-doodle{right:17%;top:51px;font-size:27px}.keyboard-section{padding:17px 12px 13px}.keyboard-caption{margin:3px 9px 8px}.handwritten{font-size:17px}.caption-instruction{font-size:11px}.keyboard-under{margin-left:9px;margin-right:9px}.keyboard-help{font-size:11px}.memory-dialog{width:min(870px,calc(100vw - 36px))}.memory-content{padding-left:29px;padding-right:29px}
}
@media (max-width:700px) {
  body{padding:12px 10px 20px}.page-shell{padding:0 17px;border-width:1.3px;box-shadow:4px 5px 0 #d3bea0,5px 6px 0 1px #b99c7c}.page-shell:before{inset:6px}.masthead{height:62px}.wordmark{font-size:23px;gap:6px}.wordmark svg{width:22px;height:22px}.wordmark i{font-size:18px}.masthead-note{font-size:10px;letter-spacing:1px}.tiny-heart{font-size:18px;margin-left:4px}.intro{padding:26px 0 99px}.eyebrow{font-size:10px;letter-spacing:.3px;gap:9px;padding:5px 9px;margin-bottom:15px}.eyebrow span{font-size:12px}h1{font-size:clamp(47px,11.2vw,75px);letter-spacing:0;line-height:1.1;text-shadow:1px 2px 0 #ecd49d}.title-second{font-size:.7em;margin-top:6px;line-height:1.4}.title-second i{font-size:.66em;padding-right:3px}.chinese-name{letter-spacing:3px}.chinese-name:after{bottom:5px;height:7px}.title-spark{width:23px;height:23px;vertical-align:3px;margin-left:6px}.intro-description{font-size:13px;letter-spacing:.4px;line-height:1.8;margin-top:12px}.intro-description>span{font-size:10px;letter-spacing:.2px}.story-friend{width:105px;bottom:-5px}.story-cat{left:2%;transform:rotate(-8deg)}.story-bear{right:2%;transform:rotate(8deg)}.intro-doodle{top:auto;bottom:30px;right:46%;font-size:27px}.keyboard-section{margin-top:2px;padding:16px 9px 13px;border-radius:6px 9px 6px 11px;box-shadow:3px 4px 0 #dbc5a3;transform:none}.keyboard-section:before{width:66px;height:20px;left:18px;top:-11px}.keyboard-section:after{width:59px;height:17px;right:17px;bottom:-8px}.keyboard-caption{margin:3px 1px 9px;gap:6px;flex-wrap:wrap}.handwritten{font-size:16px;letter-spacing:0;flex-basis:100%}.caption-line{display:none}.caption-instruction{font-size:10px;margin-left:auto;line-height:1.4}.cursor-icon{font-size:18px;margin-right:2px}.keyboard-scroll{padding:5px 2px 5px;margin:0 -3px}.keyboard-board{min-width:850px}.keyboard-under{margin:10px 1px 0;flex-wrap:wrap;gap:8px}.keyboard-help{font-size:11px;flex:1 0 100%;line-height:1.6}.mobile-help{display:block;font-size:10px;margin-left:20px;color:#b9a386}.little-star{font-size:15px}.directory-toggle{min-height:34px;padding:5px 9px;font-size:11px}.visit-status{font-size:11px}.visit-status b{font-size:14px}.visit-status>span{font-size:11px}.key-directory{margin:14px 1px 0}.key-directory>div{gap:7px}.directory-key{min-height:42px;min-width:42px;font-size:16px;padding:5px 9px}.secret-section{gap:8px;padding:10px 12px;margin:26px auto 22px}.secret-section>p:not(.sr-only){font-size:12px;letter-spacing:.4px}.secret-ornament{font-size:17px}.secret-dots{gap:4px}.secret-dots>span{width:6px;height:6px}.site-footer{padding:15px 0 19px;gap:10px;font-size:9px;letter-spacing:0}.site-footer>span:last-child{font-size:9px}.site-footer i{font-size:15px;margin-left:1px}.footer-dot{padding:0 3px}.book-page-number{display:none}
  dialog{max-height:calc(100dvh - 30px);border-width:1.5px;box-shadow:4px 5px 0 #9a785850,0 20px 60px #59452c25}.memory-dialog{width:calc(100vw - 28px)}.memory-layout{grid-template-columns:1fr;min-height:auto}.memory-visual{min-height:221px;padding:24px 30px 32px;border-right:0;border-bottom:1px dashed #b2b39a}.memory-visual:after{font-size:12px;bottom:8px}.photo-paper{max-width:191px;padding:7px 7px 0;transform:rotate(-4deg)}.photo-paper img{aspect-ratio:5/4;object-fit:contain;object-position:center}.photo-paper:before{width:59px;height:20px;left:calc(50% - 29px);top:-10px}.photo-handwriting{font-size:10px;padding:10px 0 11px}.photo-star{right:29px;bottom:27px;font-size:28px}.memory-content{padding:22px 23px 13px}.memory-content:before{display:none}.memory-eyebrow{font-size:9px;letter-spacing:0;margin-bottom:15px}.key-badge{min-width:34px;min-height:33px;font-size:20px;padding:1px 9px;margin-bottom:11px}.memory-content h2{font-size:25px;line-height:1.45;margin-bottom:11px}.memory-text{font-size:14px;line-height:1.9;letter-spacing:0}.memory-signature{font-size:15px;margin:15px 0 19px}.memory-signature span{font-size:21px}.memory-nav{padding-top:6px;gap:6px}.memory-nav button{font-size:20px;min-height:40px}.memory-nav button span{font-size:12px}.memory-nav>span{font-size:9px}.modal-close{right:9px;top:8px;width:32px;height:31px;font-size:24px}.birthday-dialog{padding:34px 18px 23px;width:calc(100vw - 26px)}.surprise-eyebrow{font-size:11px;padding:4px 10px;margin-bottom:16px}.surprise-eyebrow span{font-size:15px}.birthday-dialog h2{font-size:27px}.birthday-dialog h2 span{font-size:30px}.surprise-message{font-size:12px;margin:10px 0 18px}.video-placeholder{gap:9px}.film-icon{width:41px;height:41px;font-size:24px}.video-placeholder strong{font-size:18px}.video-placeholder>span:last-child{font-size:10px}.birthday-wish{font-size:13px;letter-spacing:0;margin:19px 0}.back-to-keyboard{font-size:12px;padding:10px 12px}.back-to-keyboard span{padding-left:5px}
}
@media (prefers-reduced-motion:reduce) {*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti-layer{display:none}}