@font-face{font-family:Maplestory;src:url(/fonts/Maplestory%20Light.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Maplestory;src:url(/fonts/Maplestory%20Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{font-family:Maplestory,system-ui,sans-serif;color:#292725;background:#f5f4f1;font-synthesis:none}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,textarea,input{font:inherit}a{color:inherit;text-decoration:none}button,.button{cursor:pointer;border:1.5px solid #302e2c;border-radius:16px 19px 15px 18px;background:#fff;padding:15px 22px;font-size:15px;font-weight:700;color:inherit;display:inline-block}button:hover,.button:hover{background:#fff6d7;transform:translateY(-1px)}.primary{background:#ffe784;box-shadow:2px 3px #302e2c}button:disabled{opacity:.4;cursor:wait}:focus-visible{outline:3px solid #f1a6b8;outline-offset:4px}.phone{max-width:430px;margin:auto;background:#fff;height:var(--app-height, 100dvh)}.home,.stage{min-height:0;height:var(--app-height, 100dvh);position:relative;overflow:hidden}.logo{position:absolute;width:218px;height:auto;top:26%;left:50%;transform:translate(-50%) rotate(-4deg);transition:top .5s,width .5s}.composing .logo{top:9%;width:174px}.character{width:180px;height:180px;position:absolute}canvas{display:block;width:100%;height:100%}.splash-character{top:47%;left:calc(50% - 90px)}.text-button{border:0;font-size:13px;font-weight:400;color:#8a8580;background:none}#skip{position:absolute;bottom:12%;left:50%;transform:translate(-50%);white-space:nowrap}#message-form label{position:absolute;top:29%;width:100%;text-align:center;font-size:19px;font-weight:700;letter-spacing:-.7px}#entry{position:absolute;top:36%;left:30px;right:30px;height:23%}textarea{width:100%;height:100%;resize:none;border:0;border-bottom:2px dashed #e1dcd5;border-radius:0;padding:12px 10px;background:transparent;text-align:center;font-size:24px;line-height:1.5;color:#35302b;caret-color:#f7e662}textarea:focus{outline:none;border-bottom-color:#ecb354}.fake-caret{position:absolute;top:17px;left:50%;width:2px;height:26px;background:#e799ab;animation:blink 1s steps(1) infinite;pointer-events:none}.has-text .fake-caret,#entry:focus-within .fake-caret{display:none}#message-hint{position:absolute;top:60%;left:30px;color:#aaa29a;font-size:11px}.home-character{right:23px;bottom:123px;width:140px;height:140px;transform:rotate(-8deg)}.form-footer{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:26px;right:26px}.form-actions{display:flex;gap:12px}.form-actions button{flex:1}#feedback{min-height:18px;margin:14px 0 0;font-size:11px;text-align:center;color:#867c70}#share-url{width:100%;font-size:12px;padding:8px;border:1px solid #ddd;margin-top:8px}header{position:absolute;top:max(25px,env(safe-area-inset-top));left:25px;right:25px;display:flex;align-items:center;justify-content:space-between}#back{font-size:13px;color:#777}.wordmark{margin-left:auto;display:block}.wordmark img{display:block;width:88px;height:auto}#message{position:absolute;top:20%;left:28px;right:28px;height:25%;margin:0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;text-align:center;font-size:29px;line-height:1.55;font-weight:700;letter-spacing:-1px}#actor{top:46%;left:0;will-change:transform}.controls{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));width:100%;text-align:center}#status{color:#aaa;font-size:11px;min-height:18px;margin:0 0 10px}.playback-buttons button{border:0;padding:6px 12px;font-size:11px;color:#999;font-weight:400}.reply-label{margin:22px 0 12px;font-size:13px;color:#867f77}#reply{min-width:170px}.doodles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-family:Maplestory,cursive;font-weight:700}.doodles b{position:absolute;font-size:22px;letter-spacing:-3px;text-shadow:.6px .6px #555;animation:giggle .5s steps(2,end) infinite}.giggle{top:-10px;left:-6px;transform:rotate(-18deg)}.hehe{right:-4px;top:13px;transform:rotate(18deg);animation-delay:-.25s!important}.doodles svg{position:absolute;width:42px;height:42px;right:-7px;bottom:35px;fill:none;stroke:#d7b44f;stroke-width:3;stroke-linecap:round;animation:rays .65s steps(2) infinite}.writing{display:none;position:absolute;top:-5px;right:0;font-size:18px;transform:rotate(15deg);animation:giggle .8s steps(2) infinite}.home-character .giggle{font-size:17px}.home-character .hehe{font-size:18px}.home-character .doodles svg{width:27px}[data-phase=enter] .doodles{opacity:0}[data-phase=write] .doodles b,[data-phase=write] .doodles svg{display:none}[data-phase=write] .writing{display:block}.paused .doodles *{animation-play-state:paused}@keyframes blink{50%{opacity:0}}@keyframes giggle{50%{translate:2px -4px;rotate:7deg}}@keyframes rays{50%{scale:.85;rotate:-9deg;opacity:.5}}@media(max-height:720px){.home,.stage{min-height:0}.home-character{width:110px;height:110px;bottom:112px}#actor{width:140px;height:140px}.reply-label{margin-top:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}#composer,#message-form{height:100%}#message-form{display:grid;grid-template-rows:auto minmax(60px,1fr) auto minmax(60px,.8fr) auto;padding:calc(var(--app-height, 100dvh) * .27) 26px max(12px,env(safe-area-inset-bottom));gap:8px}#message-form label,#entry,#message-hint,.home-character,.form-footer{position:relative;inset:auto;width:auto;height:auto;margin:0}#entry{min-height:0}#message-hint{font-size:11px}.home-character{justify-self:end;align-self:end;width:min(120px,18vh);height:min(120px,18vh)}.form-footer{align-self:end}.composing .logo{width:min(174px,28vh);top:5%}#feedback{margin-top:8px}#actor{width:min(180px,24vh);height:min(180px,24vh)}.controls{bottom:max(12px,env(safe-area-inset-bottom))}.reply-label{margin-top:10px}.compact .composing .logo{display:none}.compact #message-form{padding-top:12px;grid-template-rows:auto minmax(50px,1fr) auto}.compact .home-character,.compact #message-hint{display:none}.compact #message-form label{font-size:16px}.compact .form-actions button{padding:10px 12px}.compact #message{top:22%;height:27%;font-size:22px}.compact #actor{top:49%;width:80px;height:80px}.compact .controls{width:50%;right:0}.compact #status,.compact .reply-label{display:none}.compact #reply{min-width:0;padding:10px 15px}