:root{--ink:#f1ead8;--muted:#9b99b2;--paper:#fff2d9;--rose:#ef5788;--rose-dark:#d8386c;--line:#3a3550;--green:#c4e97a;--night:#121321}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--night);color:var(--ink);font-family:"Trebuchet MS",Arial,sans-serif;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid var(--green);outline-offset:4px}[hidden]{display:none!important}
.app{height:100svh;display:flex;flex-direction:column;padding:0 22px}.topbar{height:68px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 5px;gap:12px}.brand{display:flex;align-items:center;gap:10px;font:700 12px "Courier New",monospace;letter-spacing:.1em}.brand svg{width:28px;height:28px}.top-actions{display:flex;align-items:center;gap:22px}.dedication{font:10px "Courier New",monospace;letter-spacing:.13em;color:#a9a1bc}.dedication span{color:var(--rose);font-size:18px}.sound{display:flex;align-items:center;gap:8px;border:1px solid #47405a;background:#1d1c2d;padding:9px 13px;font:10px "Courier New",monospace;color:var(--ink)}.sound svg{height:15px;width:15px}
.stage{position:relative;isolation:isolate;flex:1;min-height:0;border:2px solid #443855;border-radius:3px;overflow:hidden;background:#191a30;box-shadow:0 0 30px #08091855}canvas{display:block;width:100%;height:100%;touch-action:none}.intro{position:absolute;inset:0;display:flex;align-items:center;padding:5.4%;pointer-events:none;background:linear-gradient(90deg,#11132280,transparent 65%)}.intro-copy{width:57%;max-width:650px;pointer-events:auto;transform:translateY(-10px)}.eyebrow{font:700 9px "Courier New",monospace;letter-spacing:.15em;color:var(--green);display:flex;align-items:center;gap:10px}.eyebrow:before{content:"";width:8px;height:8px;background:var(--rose);box-shadow:3px 3px 0 #0a0c17}h1{font-family:Impact,"Arial Narrow","Arial Black",sans-serif;font-weight:900;font-size:clamp(66px,8vw,112px);line-height:.9;letter-spacing:-.01em;margin:23px 0 24px;color:#f7f0d7;text-shadow:5px 6px 0 #090b17;transform:rotate(-2deg)}h1 em{font-style:normal;color:var(--green)}.intro-description{font-size:14px;line-height:1.8;color:#b9b3ca;margin:0 0 28px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:23px;background:var(--rose);color:#1a1325;border:2px solid #080b15;padding:17px 25px;border-radius:2px;box-shadow:5px 5px 0 #090b16;font:900 12px "Courier New",monospace;letter-spacing:.04em;transition:transform .12s,box-shadow .12s;min-height:51px}.primary:hover{background:#ff729d;transform:translate(-2px,-2px);box-shadow:7px 7px 0 #090b16}.primary:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #090b16}.primary .arrow{font-size:21px}.tiny-note{font:8px "Courier New",monospace;color:#8f8ba9;margin-top:22px;letter-spacing:.07em}.intro-stamp{position:absolute;bottom:24px;right:25px;transform:rotate(-4deg);border:1px solid #87728d;padding:9px 12px;font:9px "Courier New",monospace;color:#af91a9;background:#17182e88}
.footer{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 5px;color:#74748e;font:8px "Courier New",monospace;letter-spacing:.1em;flex:none}.footer-heart{color:#ec7195}.footer-right{text-align:right}
.hud{position:absolute;top:22px;left:24px;right:24px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none}.chapter{font:700 17px "Trebuchet MS",sans-serif;line-height:1.35;color:#eae3dc;text-shadow:2px 2px #111226}.chapter small{display:block;font:9px "Courier New",monospace;letter-spacing:.13em;color:#e97e9e;margin-bottom:7px}.status-hud{display:flex;align-items:center;gap:16px;background:#101320c9;border:1px solid #53435f;padding:9px 14px}.health{font-size:18px;color:#f47597;letter-spacing:2px;white-space:nowrap}.health .empty{color:#50465c}.keepsakes{display:flex;gap:7px;align-items:center}.keepsake{display:grid;place-items:center;width:22px;height:22px;opacity:.24;transition:transform .3s,opacity .3s}.keepsake svg{width:22px;height:22px}.keepsake.found{opacity:1;transform:rotate(-8deg) scale(1.1)}
.toast{position:absolute;left:50%;bottom:92px;transform:translate(-50%,12px);background:#141626ed;border:1px solid #9b769e;border-left:4px solid var(--green);padding:12px 18px;text-align:center;max-width:430px;width:max-content;box-shadow:4px 4px 0 #090c1b99;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;color:#ede5da;font:12px "Courier New",monospace;line-height:1.6}.toast.show{opacity:1;transform:translate(-50%,0)}
.play-tools{position:absolute;bottom:20px;left:23px;right:23px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.key-help{font:9px "Courier New",monospace;color:#a19cb2;display:flex;align-items:center;gap:6px}kbd{border:1px solid #6b587a;border-bottom-width:3px;border-radius:2px;min-width:23px;padding:5px 7px;background:#1d1d34;text-align:center;font:9px "Courier New",monospace;color:#ece5d9}.text-button{pointer-events:auto;background:#1a1b2de6;color:#ad9fb6;border:1px solid #554363;padding:8px 11px;font:9px "Courier New",monospace}.text-button:hover{color:white;background:#39314b}.touch-controls{display:none;gap:8px;align-items:center;pointer-events:auto;user-select:none}.touch-controls button{border:2px solid #797081;background:#1a1d33ee;color:#f3ead9;border-radius:4px;height:58px;min-width:56px;font-size:22px;touch-action:none;box-shadow:3px 4px 0 #080b19}.touch-controls .jump,.touch-controls .dash{padding:0 16px;font:700 11px "Courier New",monospace;background:#ddec9eee;color:#18202d;border-color:#c8db8d}.touch-controls .dash{background:#ce7ea6ee;border-color:#dc8aaa}.touch-controls button:active,.touch-controls button.held{transform:translate(2px,3px);box-shadow:1px 1px 0 #080b19}.touch-controls .dash.cooldown{opacity:.4}.right-tools{display:flex;gap:9px;align-items:center}
.letter-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#090b1cbb;backdrop-filter:blur(6px);padding:26px;animation:reveal .4s ease both;overflow:auto}.letter{position:relative;width:min(100%,475px);margin:auto;flex-shrink:0;background:#fff2da;border:3px solid #171728;padding:30px 35px 25px;text-align:center;color:#32273b;box-shadow:9px 10px 0 #090b16;transform:rotate(-1deg)}.letter:before{content:"";position:absolute;width:96px;height:23px;background:#ed8eaccc;top:-13px;left:calc(50% - 48px);transform:rotate(-5deg)}.letter-icon{height:48px;display:block;margin:0 auto 12px}.letter .eyebrow{font-size:8px;color:#9b5a74;justify-content:center;margin:10px 0 15px}.letter .eyebrow:before{display:none}.letter h2{font:900 49px Impact,"Arial Narrow",sans-serif;letter-spacing:.01em;line-height:1.04;margin:5px 0 16px;color:#4b304b}.letter p{font-size:12px;line-height:1.8;color:#806a78;margin:0 0 18px}.letter .question{font:italic 27px Georgia,serif;line-height:1.25;color:#694563;margin:20px 0 24px}.letter .primary{width:100%;padding:14px;min-height:48px}.secondary{background:transparent;border:1px solid #ad8395;color:#8c5872;padding:12px 15px;width:100%;font:10px "Courier New",monospace;margin-top:14px;min-height:41px}.secondary:hover{background:#f0d2d3}.letter .signature{font:italic 12px Georgia,serif;color:#ae8191;margin:20px 0 0}.letter .small{font:9px/1.6 "Courier New",monospace;color:#9e7e8c;margin:19px 0 0}.date-options{display:flex;gap:8px;margin:22px 0}.date-option{flex:1;border:1px solid #d3b3c2;padding:14px 5px;background:#fff7e7;color:#886777;font:9px/1.6 "Courier New",monospace}.date-option span{display:block;font-size:24px;margin-bottom:6px}.date-option[aria-pressed="true"]{border:2px solid #b65d83;background:#f6d9dc;padding:13px 4px}.reply-text{font:italic 14px/1.6 Georgia,serif!important;padding:14px;border:1px dashed #bb839f;background:#f5dfd9;color:#915d78!important;user-select:text}.reply-actions{display:flex;gap:10px}.reply-actions .primary{flex:1;font-size:10px}.reply-actions .secondary{width:auto;margin:0;flex:1}.replay{border:0;background:none;color:#9a768a;text-decoration:underline;text-underline-offset:4px;font:9px "Courier New",monospace;margin:20px auto 0;padding:4px}.heart-divider{display:flex;align-items:center;justify-content:center;gap:12px;color:#c96e96;margin:15px 0}.heart-divider:before,.heart-divider:after{content:"";height:1px;width:40px;background:#d3a8b9}.paused{position:absolute;inset:0;background:#101327e3;backdrop-filter:blur(7px);display:grid;place-items:center;z-index:4;text-align:center}.paused h2{font:48px Impact,sans-serif;color:var(--green);margin:0 0 12px}.paused p{color:#a6a0bd;font-size:13px;margin-bottom:25px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(pointer:coarse){.touch-controls{display:flex}.key-help{display:none}.right-tools .text-button{position:absolute;bottom:78px;right:0}.right-tools #skip{right:42px}.right-tools{margin-left:auto}}
@media(max-width:700px){
 .app{padding:0 9px}.topbar{height:56px;padding:0 3px}.brand{font-size:9px;gap:6px}.brand svg{width:24px;height:24px}.dedication{display:none}.sound{padding:7px 9px;font-size:9px}.stage{border-radius:2px}.intro{align-items:flex-start;justify-content:center;padding:28px 18px;background:linear-gradient(#11132220,transparent 65%)}.intro-copy{width:100%;text-align:center;transform:none}.intro .eyebrow{justify-content:center;font-size:7px;letter-spacing:.05em}.eyebrow:before{width:6px;height:6px}h1{font-size:67px;line-height:.91;margin:22px 0 20px}.intro-description{font-size:11px;line-height:1.7;margin-bottom:22px}.intro .primary{padding:14px 22px;min-height:47px;font-size:11px}.tiny-note{font-size:7px;margin-top:19px}.intro-stamp{right:16px;bottom:17px;font-size:7px;padding:7px 9px}.footer{height:34px;font-size:7px;letter-spacing:.025em;padding:0 2px}.footer-right{max-width:50%;text-align:right}.hud{top:16px;left:14px;right:14px}.chapter{font-size:14px;max-width:54%}.chapter small{font-size:7px;letter-spacing:.04em}.status-hud{padding:8px;gap:7px;flex-direction:column;align-items:flex-end}.health{font-size:15px;letter-spacing:1px}.keepsakes{gap:5px}.keepsake,.keepsake svg{width:16px;height:16px}.play-tools{left:13px;right:13px;bottom:19px}.key-help{display:none}.touch-controls{display:flex;gap:7px}.touch-controls button{min-width:48px;height:53px;font-size:20px}.touch-controls .dash,.touch-controls .jump{font-size:9px;padding:0 10px;min-width:57px}.right-tools{margin-left:auto;gap:7px}.right-tools .text-button{position:absolute;bottom:72px;right:0}.right-tools #skip{right:39px}.toast{top:100px;bottom:auto;font-size:10px;padding:10px 12px;max-width:calc(100% - 28px)}.letter-overlay{padding:23px 16px}.letter{padding:25px 22px 23px;box-shadow:5px 6px 0 #090b16}.letter h2{font-size:39px}.letter .question{font-size:25px}.letter p{font-size:11px}.letter-icon{height:41px}.date-option{font-size:8px}.letter .small{font-size:8px}.letter .signature{font-size:11px}
}
@media(max-height:740px) and (max-width:700px){.intro{padding-top:21px}h1{font-size:54px;margin:17px 0 15px}.intro-description{font-size:10px;margin-bottom:16px}.intro .primary{min-height:42px;padding:11px 19px}.tiny-note{margin-top:15px}.letter{padding:21px 19px 19px}.letter h2{font-size:32px;margin:5px 0 10px}.letter-icon{height:32px}.letter .question{font-size:22px;margin:16px 0 20px}.letter p{font-size:10px;margin-bottom:11px}.letter .eyebrow{font-size:7px;margin:8px 0 10px}.letter .primary{min-height:42px;padding:10px;font-size:10px}.letter .signature{margin-top:16px;font-size:10px}.heart-divider{margin:8px 0}.date-options{margin:14px 0;gap:5px}.date-option{padding:9px 3px}.date-option[aria-pressed="true"]{padding:8px 2px}.date-option span{font-size:20px;margin-bottom:3px}.letter .reply-text{padding:10px;font-size:12px!important}.letter .small{margin-top:13px}.replay{margin-top:14px}.secondary{min-height:35px;padding:9px}}
@media(max-height:550px) and (min-width:701px){.topbar{height:44px}.footer{height:27px}.intro{padding:4%}.intro-copy{transform:none}h1{font-size:55px;margin:15px 0}.intro-description{font-size:11px;line-height:1.7;margin-bottom:15px}.intro .primary{padding:10px 16px;min-height:40px;font-size:10px}.tiny-note{margin-top:15px;font-size:7px}.intro .eyebrow{font-size:7px}.intro-stamp{font-size:7px;bottom:14px}.letter{padding:23px 28px}.letter h2{font-size:35px}.letter-icon{height:32px}.letter .question{font-size:24px;margin:14px 0 19px}.letter p{font-size:11px}.letter .signature{margin-top:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:700px){.touch-controls .dash,.touch-controls .jump{font-size:11px}.toast{font-size:11px}.date-option{font-size:9px}}

.garden .keepsakes{display:none}.garden .chapter{color:#174a39;text-shadow:1px 1px #e3f5cb}.garden .chapter small{color:#2b6950}.garden .status-hud{background:#f3f9d9df;border-color:#70a578}.garden .health{color:#b9587c}.garden .key-help{color:#244e3c;background:#f4f8dcdd;padding:8px;border-radius:3px}.garden .paused{background:#194f3ddd}
.garden .city-only{display:none}

/* A personal postcard, with the same bold edges and colors as the city. */
.letter-overlay{background:#182b4ac4;backdrop-filter:blur(4px);padding:28px}
.letter{width:min(100%,520px);background:#fff9e8;border:3px solid #192a4b;border-top:10px solid #f15892;padding:27px 34px 25px;text-align:left;color:#192a4b;box-shadow:9px 9px 0 #65d8c5;transform:none}
.letter:before{display:none}
.note-address{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:21px;border-bottom:2px solid #d6decf;font:700 12px/1.4 "Courier New",monospace;letter-spacing:.07em;color:#32566b}
.letter h2{font:900 55px/.98 Impact,"Arial Narrow",sans-serif;color:#234c87;letter-spacing:0;margin:0 0 18px}
.letter p{font:16px/1.55 "Trebuchet MS",Arial,sans-serif;color:#384c61;margin:0 0 18px}
.letter .note-intro{font-size:17px;line-height:1.55}
.letter .question{font:900 40px/1.08 Impact,"Arial Narrow",sans-serif;letter-spacing:.005em;color:#192a4b;margin:22px 0 25px}
.note-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;align-items:stretch}
.letter .primary,.letter .secondary{font:700 15px/1.3 "Trebuchet MS",Arial,sans-serif;letter-spacing:0;min-height:49px;padding:13px 16px;border:2px solid #192a4b;border-radius:2px}
.letter .primary{background:#f6719d;color:#19233d;box-shadow:4px 4px 0 #192a4b;gap:14px}
.letter .primary:hover{background:#ff90b3}
.letter .secondary{background:#dbf4e8;color:#234550;margin-top:12px;box-shadow:none}
.letter .secondary:hover{background:#bcebd8}
.note-actions .secondary{margin-top:0}
.letter .note-foot{margin:24px 0 0;padding-top:15px;border-top:2px solid #d6decf;font-size:14px;line-height:1.5;color:#425870}
.letter .small{font:14px/1.5 "Trebuchet MS",Arial,sans-serif;color:#425870;margin:18px 0 0}
.date-options{gap:8px;margin:18px 0}
.date-option{font:700 14px/1.4 "Trebuchet MS",Arial,sans-serif;color:#28435e;background:#fffdf4;border:2px solid #a6b9be;padding:12px 5px}
.date-option[aria-pressed="true"]{background:#d8f4df;border:2px solid #287357;padding:12px 5px;box-shadow:0 3px 0 #287357}
.date-option span{font-size:25px;margin-bottom:8px}
.letter .reply-text{font:15px/1.5 "Trebuchet MS",Arial,sans-serif!important;color:#294e59!important;border:2px dashed #83aaa6;background:#eef6e8;padding:13px;margin-bottom:18px}
.reply-actions .primary,.reply-actions .secondary{font-size:14px}
.reply-actions .secondary{margin:0}
.replay{font:14px/1.4 "Trebuchet MS",Arial,sans-serif;color:#32566b;margin-top:21px;min-height:36px;padding:6px 0}
.toast{font:14px/1.5 "Trebuchet MS",Arial,sans-serif;color:#fff8e8;background:#152942f5;border-color:#82dccc;max-width:490px}
.paused p{font-size:16px;line-height:1.5;color:#edf4e4;padding:0 18px}
.chapter{font-size:17px;color:#fff8e8}.chapter small{font-size:11px;color:#ffcfdf}
.key-help{font-size:12px;color:#f3f0df;background:#17283dde;padding:8px 10px;border-radius:3px}.key-help kbd{font-size:11px}
.text-button{font-size:13px;min-width:40px;min-height:40px;color:#fff8e8;border-color:#99a6c7}
.intro-description{color:#fff4e3;font-size:16px;text-shadow:0 1px 3px #17223c}.tiny-note{color:#e4e4ed;font-size:10px}
.garden .chapter{color:#143c2a}.garden .chapter small{color:#235c3c}.garden .key-help{color:#183c2a}
@media(max-width:700px){
 .letter-overlay{padding:20px 17px}.letter{padding:22px 21px 20px;box-shadow:5px 5px 0 #65d8c5;border-top-width:8px}
 .note-address{font-size:12px;margin-bottom:20px;padding-bottom:13px}.letter h2{font-size:47px;margin-bottom:16px}
 .letter p,.letter .note-intro{font-size:15px;line-height:1.55}.letter .question{font-size:35px;margin:21px 0 24px}
 .letter .primary,.letter .secondary{font-size:14px;min-height:48px;padding:12px 10px}.note-actions{gap:10px;grid-template-columns:1.25fr 1fr}
 .letter .note-foot,.letter .small{font-size:14px}.date-option{font-size:14px;padding:11px 3px}.date-option[aria-pressed="true"]{padding:11px 3px}
 .letter .reply-text{font-size:14px!important;padding:11px}.replay{font-size:14px}.desktop-break{display:none}
 .toast{font-size:14px;max-width:calc(100% - 28px);padding:11px 13px;top:106px}.chapter{font-size:15px}.chapter small{font-size:10px}
 .touch-controls .dash,.touch-controls .jump{font-size:13px}.intro-description{font-size:14px;line-height:1.55}.tiny-note{font-size:9px}
}
@media(max-height:600px){.letter-overlay{align-items:flex-start}.letter{margin:6px auto}.letter h2{font-size:40px}.letter .question{font-size:32px}.note-address{margin-bottom:16px}.letter p{font-size:14px}.letter .small{font-size:14px}.letter .primary,.letter .secondary{font-size:14px}.letter .eyebrow{font-size:11px}}