*{box-sizing:border-box}html{height:100%;color-scheme:dark;background:#100a0d}body{margin:0;background:#100a0d;color:#f6e7ec;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:1px solid #f5f5f5;outline-offset:5px}button{touch-action:manipulation}#playground{position:relative;height:100svh;height:100dvh;min-height:320px;overflow:hidden;isolation:isolate}#field{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pinch-zoom;outline-offset:-8px;cursor:grab}#field:active{cursor:grabbing}.wash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 25%,#100a0d45 76%,#100a0db3);pointer-events:none}header{position:absolute;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);top:max(20px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}h1{font-family:Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-1.5px;margin:0;display:flex;align-items:center;gap:15px}h1>span:first-child{font:12px ui-monospace,monospace;letter-spacing:-1px;color:#929292}.wordmark-dot{margin-left:-15px;color:#999}.actions{display:flex;gap:8px;pointer-events:auto}.actions button{min-width:44px;min-height:44px;padding:10px 14px;background:#21171d99;border:1px solid #442d37;border-radius:50px;transition:background .2s,border-color .2s}.actions button:hover{background:#1d1d1d;border-color:#666}.actions button span{margin-left:8px;color:#aaa}.actions button[hidden]{display:none}.corner{position:absolute;top:50%;font-size:14px;color:#63404d;pointer-events:none}.corner-a{left:clamp(20px,4vw,64px)}.corner-b{right:clamp(20px,4vw,64px)}footer{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:16px;right:16px;display:flex;flex-direction:column;align-items:center;pointer-events:none}#hint{margin:0 0 20px;font-size:10px;letter-spacing:.04em;color:#888;transition:opacity 1s}#hint>span{margin:0 7px;color:#63404d}nav{display:flex;gap:4px;padding:5px;background:#21171dd9;border:1px solid #4b323e;border-radius:50px;pointer-events:auto;box-shadow:0 6px 40px #0005;backdrop-filter:blur(12px)}nav button{border:1px solid transparent;background:transparent;min-height:46px;min-width:86px;padding:10px 16px;border-radius:40px;color:#909090;transition:background .35s,color .2s,box-shadow .35s}nav button>span{font-size:8px;margin-right:7px;color:#666}nav button[aria-pressed=true]{background:#edc8d4;color:#161616;box-shadow:0 1px 8px #0005}nav button[aria-pressed=true]>span{color:#777}nav button:hover:not([aria-pressed=true]){color:white;background:#222}.edition{font-size:7px;letter-spacing:.15em;color:#505050;margin:17px 0 0}.edition span{margin:0 8px}.interacted #hint{opacity:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.no-script{position:absolute;inset:25% 10%;text-align:center;color:#aaa}.no-script pre{font-size:clamp(10px,2vw,20px)}
@media(min-width:768px){header{top:36px}h1{font-size:34px}footer{bottom:30px}nav button{min-width:112px;min-height:48px}#hint{margin-bottom:26px;font-size:11px}.edition{margin-top:23px;font-size:8px}}
@media(max-height:520px){header{top:max(10px,env(safe-area-inset-top))}footer{bottom:max(10px,env(safe-area-inset-bottom))}#hint,.edition{display:none}nav{padding:3px}nav button{min-height:44px}.corner{display:none}}
@media(max-width:350px){header{left:16px;right:16px}h1{font-size:25px;gap:10px}.wordmark-dot{margin-left:-10px}.actions{gap:5px}.actions button{padding:8px 10px}nav button{min-width:80px;padding-inline:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
h1>button{display:flex;align-items:center;gap:15px;font:italic 34px/1 Georgia,serif;letter-spacing:-1.5px;color:#f6e7ec;min-height:44px;background:transparent;border:0;padding:0;pointer-events:auto}h1>button>span:first-child{font:12px ui-monospace,monospace;letter-spacing:-1px;color:#cfa0b2}h1>button .wordmark-dot{margin-left:-15px;color:#cfa0b2}.wash{background:radial-gradient(ellipse at 50% 44%,#8e34520b 0%,transparent 40%,#100a0d99 100%)}#love-note{position:absolute;top:62%;left:20px;right:20px;text-align:center;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s cubic-bezier(.16,1,.3,1);color:#f6d8e3;text-shadow:0 2px 20px #100a0d}#love-note.visible{opacity:1;transform:translateY(0)}#love-note p{font:italic clamp(19px,3.6vw,30px)/1.3 Georgia,serif;margin:12px auto 0;max-width:500px}.note-mark{font:13px ui-monospace,monospace;color:#d98fa9}.actions button:hover{border-color:#a66e83}.edition{color:#967382}#hint{color:#aa8b98}.corner{color:#704052}
@media(max-width:350px){h1>button{font-size:27px;gap:9px}h1>button .wordmark-dot{margin-left:-9px}#hint{font-size:9px}}
@media(max-height:520px){#love-note{top:65%}#love-note p{font-size:18px}.note-mark{display:none}}
body.paused *{transition:none!important}
.daily{position:absolute;top:15%;left:24px;right:24px;text-align:center;pointer-events:none}.daily>span:first-child{font-size:8px;letter-spacing:.16em;color:#c09ba9}.daily p{font:italic clamp(17px,2vw,24px)/1.4 Georgia,serif;max-width:440px;margin:12px auto;color:#e5c8d3;text-wrap:balance}.daily-rule{color:#895569;font-size:10px}.little-things{display:flex;gap:8px;pointer-events:auto;margin-bottom:13px}.little-things button,#merge{min-height:44px;border:1px solid #674351;background:#21171da8;border-radius:30px;padding:8px 14px;color:#d1aeba;font-size:10px;transition:background .2s,color .2s}.little-things button:hover,.little-things button[aria-pressed=true]{background:#edc8d4;color:#21171d}#merge{pointer-events:auto;margin-bottom:10px}#merge[hidden]{display:none}#hint{margin-bottom:12px}.drawing #field{cursor:crosshair}.daily,#love-note{z-index:1}footer{z-index:2}#love-note{top:59%}
dialog{width:min(430px,calc(100vw - 36px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #825766;background:#25181e;color:#f6e7ec;padding:28px 30px;border-radius:5px;box-shadow:0 40px 100px #0009}dialog::backdrop{background:#100a0dc9;backdrop-filter:blur(8px)}#close-letter{position:absolute;right:10px;top:10px;width:44px;height:44px;background:none;border:0;color:#cfa0b2}.envelope{text-align:center;padding:8px 0 24px;font:24px monospace;color:#be849b;transform-origin:top;animation:unfold .65s ease-out}.letter-paper{animation:paper-in .65s cubic-bezier(.16,1,.3,1) both}.letter-eyebrow{font-size:8px;letter-spacing:.13em;color:#b68c9d}dialog h2{font:italic 40px Georgia,serif;font-weight:400;margin:20px 0}dialog p{font:21px/1.5 Georgia,serif;color:#e3c5d0}dialog em{font-size:30px;color:#f3d9e3}dialog .sign-off{font-size:15px;font-style:italic;margin-top:26px}#forever{min-height:44px;border:1px solid #825766;background:#37232d;border-radius:30px;padding:10px 18px;margin:8px 0;color:#f3d9e3}dialog small{display:block;font-size:9px;color:#bc92a3;margin-top:12px}@keyframes unfold{from{transform:perspective(400px) rotateX(-80deg);opacity:0}to{transform:perspective(400px) rotateX(0);opacity:1}}@keyframes paper-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.daily{top:13%}.daily p{max-width:280px;font-size:18px}.little-things{gap:6px}.little-things button{padding:8px 12px}.edition{margin-top:10px}#hint{font-size:9px}#love-note{top:57%}#love-note p{font-size:20px;max-width:260px}}
@media(max-height:600px){.daily{top:18%;left:15px;right:auto;max-width:180px;text-align:left}.daily p{font-size:15px}.daily-rule{display:none}.little-things{position:fixed;right:15px;top:30%;flex-direction:column}.little-things button{min-height:44px}#merge{margin-bottom:5px}#love-note{top:64%}dialog{padding:20px}dialog p{font-size:17px}.envelope{padding-bottom:8px}dialog h2{margin:10px 0;font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#close-letter{padding:0;white-space:nowrap}.envelope{font:12px/1.1 ui-monospace,monospace;white-space:pre;color:#be849b}.letter-paper{animation-delay:.12s}