@font-face{font-family:Cards;src:url(fonts/MarckScript-Regular.ttf);font-weight:400;font-style:normal}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#2c5592}
body,.screen{width:390px;max-width:100vw;height:844px;max-height:100dvh;overflow:hidden;font-family:Cards,cursive;font-synthesis:none}
.screen{position:relative;background:#fff}
button{appearance:none;border:0;margin:0;padding:0;background:none;color:inherit;font:inherit;cursor:pointer}
button:focus-visible,.board-scroll:focus-visible,textarea:focus-visible{outline:2px solid #397a96;outline-offset:2px}
.holiday-pattern{position:absolute;inset:0;background:#fff url(holiday-pattern.png) 0 0/390px 390px;pointer-events:none}
.paper{background:#fff;border:1px solid #efeeeb;box-shadow:1px 3px 5px #473b282b,0 1px 2px #473b281c;border-radius:.7px}
.board-title{position:absolute;left:28px;right:28px;top:32px;height:52px;display:flex;align-items:center;justify-content:center;transform:rotate(-.4deg)}
h1{font:400 29px/36px Cards,cursive;color:#6b4632;white-space:nowrap;margin:0}
.board{position:absolute;left:18px;right:18px;top:64px;bottom:18px}
.cork{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;clip-path:inset(1.25% 2.2% 1.8% 2.2%)}
.pin{position:absolute;z-index:3;width:9px;height:9px;left:calc(50% - 4.5px);top:-3px;border-radius:50%;background:radial-gradient(circle at 31% 26%,#f9f6e9 0,#d4d0bf 23%,#9c9b90 58%,#c6c2b0 77%,#6e7068 100%);box-shadow:1px 2px 2px #342b2952}
.board-scroll{position:absolute;left:14px;right:14px;top:91px;bottom:120px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:8px 8px 18px;scrollbar-width:thin;scrollbar-color:#aa8767 transparent;touch-action:pan-y}
.pairs{display:flex;flex-direction:column;gap:10px}
.pair{height:170px;flex:none;display:flex;align-items:center;justify-content:center;gap:3px}
.pair:nth-child(even){flex-direction:row-reverse}
.photo-card{position:relative;display:block;width:138px;aspect-ratio:9/10;flex:none;transform:rotate(-2deg);text-align:center}
.pair:nth-child(even) .photo-card{transform:rotate(2deg)}
.source-photo{position:absolute;left:5.5556%;top:4.375%;width:88.8889%;height:auto;aspect-ratio:625/589;display:block}
.thread-note{position:relative;width:122px;height:122px;flex:none;padding:13px 11px;background:linear-gradient(110deg,var(--paper-light),var(--paper-color));border:1px solid var(--paper-border);box-shadow:1px 4px 5px #5d3c2929,0 1px 2px #5d3c291a;transform:rotate(2deg);text-align:left;color:var(--ink)}
.pair:nth-child(even) .thread-note{transform:rotate(-3deg)}
.thread-note .preview{position:absolute;left:11px;right:11px;top:14px;height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:18px}
.reply-count{position:absolute;left:11px;right:11px;top:66px;font-size:14px;line-height:17px}
.open-label{position:absolute;left:11px;bottom:10px;font-size:15px;line-height:18px;text-decoration:underline;text-underline-offset:2px}
.thread-note.empty{display:flex;align-items:center;justify-content:center;text-align:center;font-size:20px;line-height:23px}
.theme-blue{--paper-light:#87bfe5;--paper-color:#68a7d7;--paper-border:#5897c4;--ink:#10344f;--meta:#15374e}
.theme-lime{--paper-light:#d1e977;--paper-color:#bad957;--paper-border:#a8c44a;--ink:#294632;--meta:#3b543c}
.theme-yellow{--paper-light:#ffe779;--paper-color:#ffd24c;--paper-border:#ddb33f;--ink:#29466a;--meta:#485b71}
.theme-pink{--paper-light:#f6b7c1;--paper-color:#ed9fad;--paper-border:#d68a99;--ink:#433650;--meta:#4c3b52}
.invite-sheet{position:absolute;left:44px;right:44px;bottom:40px;height:62px;padding:7px 12px;transform:rotate(-.4deg)}
.pin-left{left:calc(16% - 4.5px)}
.pin-right{left:calc(84% - 4.5px)}
.invite-friend{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:22px;line-height:26px}
.ring{width:30px;height:30px;border:1.2px solid #c7a04f;border-radius:50%;background:#d4b366;color:#34546e;display:grid;place-items:center;flex:none}
.ring svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.viewer{position:fixed;inset:0;margin:0;width:390px;max-width:100vw;height:844px;max-height:100dvh;max-inline-size:100vw;border:0;padding:0;font:400 18px/23px Cards,cursive;color:#2c5592;background:#fff url(holiday-pattern.png) 0 0/390px 390px;overflow:hidden}
.viewer::backdrop{background:#29393040}
.detail-cork{position:absolute;left:18px;top:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:fill;clip-path:inset(1.25% 2.2% 1.8% 2.2%)}
.close-view{position:absolute;left:35px;top:27px;height:44px;padding:0 10px;font-size:18px;line-height:24px;z-index:4}
.photo-stage{position:absolute;inset:90px 18px 86px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
.zoom-canvas{width:max-content;min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:10px}
.large-photo{display:block;flex:none;height:auto;aspect-ratio:625/589;box-sizing:content-box;border:8px solid #fff;box-shadow:1px 4px 7px #473b2840;background:white}
.zoom-controls{position:absolute;bottom:37px;left:calc(50% - 84px);width:168px;height:37px;display:flex;align-items:center;justify-content:space-around;font-size:18px}
.zoom-controls button{width:39px;height:35px;font-size:26px;line-height:30px}
.thread-sheet{position:absolute;top:82px;left:35px;width:calc(100% - 70px);height:calc(100% - 116px);padding:16px 15px 10px;background:linear-gradient(110deg,var(--paper-light),var(--paper-color));border:1px solid var(--paper-border);box-shadow:1px 4px 5px #5d3c2929;color:var(--ink);display:flex;flex-direction:column}
.thread-heading{flex:none;border-bottom:1px solid #314a5c30;padding:0 0 10px;margin-bottom:7px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.thread-heading h2{font:400 23px/27px Cards,cursive;margin:0}
.thread-count{font-size:14px;line-height:18px;white-space:nowrap}
.messages{flex:1;min-height:0;overflow-y:auto;padding:3px 0 10px;overscroll-behavior:contain;scrollbar-width:thin}
.message{display:grid;grid-template-columns:25px 1fr;column-gap:8px;margin:9px 0 20px}
.avatar{width:25px;height:25px;border:1px solid #ffffff99;border-radius:50%;background:#f9fbf8aa;color:var(--ink);display:grid;place-items:center;font-size:17px;line-height:20px}
.message-name{font-size:16px;line-height:20px;margin:0 0 5px}
.message-text{font-size:18px;line-height:23px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.message-status{font-size:14px;line-height:18px;margin-top:5px;color:var(--meta)}
.composer{flex:none;border-top:1px solid #314a5c40;padding-top:9px}
textarea{appearance:none;display:block;width:100%;height:67px;resize:none;border:1px solid #ffffffa8;border-radius:0;padding:8px 9px;background:#ffffffb8;color:var(--ink);font:400 18px/23px Cards,cursive}
textarea::placeholder{color:var(--meta);opacity:.85}
.composer-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:3px}
.composer-actions button{min-height:44px;display:flex;align-items:center;gap:6px;font-size:17px;line-height:22px}
.composer-actions svg{width:20px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.send-memory span{font-weight:600;font-synthesis:weight}
.send-memory:disabled{opacity:.75;cursor:default}
.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}
@media(max-width:375px){.board-title{left:24px;right:24px}.board{left:12px;right:12px}.board-scroll{left:9px;right:9px;padding-left:5px;padding-right:5px}.pair{gap:3px}.invite-sheet{left:44px;right:44px}.thread-sheet{left:28px;width:calc(100% - 56px)}}

/* v10: photo and story can each start an empty pair. */
.add-mark{display:block;width:28px;height:28px;border:1.3px solid currentColor;border-radius:50%;font:400 28px/25px Cards,cursive;text-align:center;margin:0 auto 7px}
.empty-label{display:block}
.photo-card.empty-photo .empty-image{position:absolute;inset:5.5556% 5.5556% 20%;border:1px solid #aeb8bd;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#2c5592;background:#fff}
.empty-photo .add-mark{margin:0}
.empty-photo .empty-label{font-size:19px;line-height:22px}
.illustration-card .source-photo{height:75%;aspect-ratio:auto;object-fit:cover}
.illustration-card .signature-row{top:82.5%}
.illustration-card .signature{font-size:11.4cqw}
.illustration-tag{position:absolute;left:8%;right:8%;top:66%;padding:2px 1px;background:#ffffffeb;color:#365264;font-size:12px;line-height:14px;text-align:center}
.thread-note.example .reply-count{font-size:13px}
.message-name,.voice-input span,textarea::placeholder{font-weight:600;font-synthesis:weight}
.message-name{-webkit-text-stroke:.16px currentColor}
textarea:placeholder-shown{-webkit-text-stroke:.1px currentColor}
.example-label{font-size:14px;line-height:18px;color:var(--meta);margin:0 0 8px}
@media(max-width:375px){h1{font-size:27px}.board-title{left:24px;right:24px}}

/* v11: clearer first action and persistent writing guidance. */
.invite-friend{gap:10px}
.invite-friend>span:last-child{-webkit-text-stroke:.15px currentColor}
.composer-label{display:block;font-size:19px;line-height:23px;margin-bottom:2px}
.composer-hint{font-size:15px;line-height:18px;margin:0 0 8px;color:var(--meta)}
@media(max-width:375px){.invite-friend{font-size:21px}}

/* Application controls retain the approved paper objects. */
html,body{width:100%;height:100dvh;max-height:none;display:grid;place-items:center;background:#f4f4f2}
body{max-width:none}.screen{height:min(844px,100dvh);max-height:100dvh;flex:none}
[hidden]{display:none!important}
.viewer{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);height:min(844px,100dvh)}
.board-tools{position:absolute;left:24px;right:24px;top:22px;height:34px;display:flex;justify-content:space-between;z-index:4;gap:8px}
.board-tools button{font-size:18px;line-height:24px;min-height:34px;padding:3px 10px}
.my-board{margin-left:auto}
.ornaments{position:absolute;width:91px;height:35px;right:3px;top:2px;z-index:3;pointer-events:none}
.pending-count{font-size:17px;color:#9b4137}
.service-sheet,.upload-sheet{position:absolute;left:35px;right:35px;top:82px;bottom:34px;padding:17px 15px;overflow:auto;overscroll-behavior:contain;color:#2c5592}
.service-sheet h2,.upload-sheet h2{font:400 26px/30px Cards,cursive;margin:0 0 15px}
h3{font:400 22px/26px Cards,cursive;margin:14px 0 8px}
p{overflow-wrap:anywhere}.service-sheet p{margin:8px 0}.form-hint,.processing-notice{font-size:14px;line-height:18px;color:#51667a}
.processing-notice{margin:0 0 6px;color:var(--meta)}
label{display:block}input{appearance:none;width:100%;min-height:44px;padding:7px 8px;border:1px solid #c0c8c8;background:#fff;color:#2c5592;border-radius:0;font:400 18px/23px Cards,cursive}
input::placeholder{color:#647382;opacity:1}
.action-button{display:block;width:100%;min-height:44px;margin:8px 0;padding:7px 9px;border:1px solid #afc2b5;border-radius:2px;background:#e8f0e8;color:#24553e;font-size:19px;line-height:24px;text-align:center}
.action-button:disabled{opacity:.65;cursor:default}
.upload-preview{display:block;width:100%;max-height:240px;object-fit:contain;margin:0 0 14px;background:#f9f9f7}
.queue-item,.feedback-item,.board-item{padding:10px 0 13px;border-bottom:1px solid #d7dddb}
.queue-item img{width:100%;max-height:150px;object-fit:contain;background:#f5f5f2}
.queue-item audio,.message audio,.recording-preview audio{width:100%;height:40px;margin:6px 0}
.queue-item textarea,.feedback-item textarea,.service-sheet textarea{margin:6px 0;height:70px;background:#fff;border-color:#c0c8c8;color:#2c5592}
.queue-actions{display:flex;gap:8px}.queue-actions button{font-size:17px;width:50%}
.meta{font-size:14px;line-height:18px;color:#51667a}.feedback-message{padding:5px 0}
.notice{position:absolute;left:28px;right:28px;bottom:112px;z-index:30;padding:10px 12px;color:#2c5592;font-size:17px;line-height:22px;pointer-events:none}
.viewer .notice{position:fixed}
.thread-heading{flex-wrap:wrap;gap:3px 8px}
.recording-preview{flex:none}.remove-audio{min-height:44px;font-size:16px;line-height:20px}
.message-edit,.caption-edit,.draw-story{min-height:44px;font-size:17px;line-height:22px;text-decoration:underline}
.message-status{font-size:15px}.recording .voice-input{color:#a52d32}
.pending-photo{position:absolute;left:6%;right:6%;top:57%;background:#ffffffed;font-size:13px;line-height:17px;padding:2px 3px;color:#765240}
.thread-note .processing-marker{position:absolute;left:11px;right:11px;bottom:10px;font-size:14px;line-height:18px;color:var(--ink)}
.photo-card .source-photo:not(svg){height:75%;aspect-ratio:auto;object-fit:cover}
.photo-card:not([data-photo="first"]) .signature{font-size:11cqw;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.invite-view input{font-family:system-ui,sans-serif;font-size:13px}
.service-sheet .back-section{font-size:17px;min-height:44px;text-decoration:underline}
@media(max-width:375px){.service-sheet,.upload-sheet{left:28px;right:28px}.board-tools{left:18px;right:18px}.composer-hint{font-size:14px}.processing-notice{font-size:13px}}
@media(max-height:600px){.thread-sheet{top:65px;height:calc(100% - 85px)}.thread-heading{padding-bottom:4px;margin-bottom:3px}.composer-label{font-size:17px;line-height:20px}.composer-hint{margin-bottom:4px;font-size:13px;line-height:16px}.processing-notice{display:none}textarea{height:52px}.composer-actions button{font-size:16px}.service-sheet,.upload-sheet{top:70px;bottom:20px}}
.caption-edit{position:absolute;bottom:80px;left:70px;right:70px;font-size:17px;padding:3px 6px}

.empty-image>span{display:flex;align-items:center;flex-direction:column;gap:6px}
.empty-photo .add-mark{margin:0 auto}

.replace-photo{position:absolute;bottom:129px;left:70px;right:70px;min-height:44px;font-size:17px;padding:3px 6px}