/* Standalone foundation: the page does not depend on the design preview host. */
:root{color-scheme:light;background:#FFF8EF}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-width:320px}
body{font-family:FWStoryNunito,FWStoryThai,sans-serif}
h1,h2,h3,h4,h5,h6,p{margin-block:0}
button,input,select,textarea{font:inherit}
b,strong{font-weight:500}
svg{display:inline-block;vertical-align:middle;flex-shrink:0}
a{cursor:pointer;text-underline-offset:3px}
:focus-visible{outline:3px solid #1F3A8A;outline-offset:4px}
/* Keep contact addresses readable and tappable even in the narrow footer card. */
:root #fw-postbox-story .fnm-contact-card>a{display:flex;width:fit-content;max-width:100%;min-height:40px}
:root #fw-postbox-story .fnm-contact-email span{min-width:0;overflow-wrap:anywhere}
:root #fw-postbox-story .fnm-legal-body a[href^="mailto:"]{color:var(--fp-down);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
/* A short invitation after the five stories, with a clear path into LINE. */
:root #fw-postbox-story .fpl-free{color:#407B59;font-size:14px;font-weight:600;line-height:1.6;margin:0 0 14px;letter-spacing:0}
:root #fw-postbox-story .fpl-free>span{display:inline-block;margin-right:4px;color:#407B59}
:root #fw-postbox-story .fpl-quickstart{font-size:13px;line-height:1.9;color:var(--fp-muted);margin:20px auto 0;max-width:640px;text-wrap:pretty}
:root #fw-postbox-story .fpl-quickstart>span[aria-hidden]{display:inline-block;margin-inline:6px;color:var(--fp-down)}
:root #fw-postbox-story .fpl-quickstep{display:inline-block;white-space:nowrap}
:root #fw-postbox-story .fpl-invitation{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 28px;text-align:left;max-width:980px;margin:34px auto 8px;padding:32px 36px 23px;border:2px solid var(--fp-border);border-radius:18px;background:var(--fp-bg);box-shadow:0 5px 0 #D9A98A55;overflow:hidden}
:root #fw-postbox-story .fpl-invitation:before{content:'';position:absolute;inset:0 0 auto;height:6px;background:repeating-linear-gradient(90deg,#FF582D 0 14px,#FFF8EF 14px 28px,#1F3A8A 28px 42px,#FFF8EF 42px 56px)}
:root #fw-postbox-story .fpl-overline{display:block;color:var(--fp-muted);font-size:12px;margin-bottom:8px;letter-spacing:.04em}
:root #fw-postbox-story .fpl-invitation h3{font-size:23px;line-height:1.55}
:root #fw-postbox-story .fpl-invitation-copy p{font-size:14px;color:var(--fp-muted);margin-top:8px}
:root #fw-postbox-story .fpl-invitation-action{text-align:center}
:root #fw-postbox-story .fpl-invitation .fpl-quickstart{grid-column:1/-1;text-align:center;max-width:none;width:100%;border-top:1px dashed var(--fp-border);padding-top:16px;margin-top:14px}
:root #fw-postbox-story .fp-ending>.fpl-free{margin:22px 0 0}
:root #fw-postbox-story .fpl-start-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;max-width:690px;padding:0;margin:30px auto 6px;z-index:1}
:root #fw-postbox-story .fpl-start-steps li{position:relative;padding:18px 10px;background:var(--fp-bg);border:1px solid var(--fp-border);border-radius:12px;box-shadow:0 3px 0 #D9A98A44}
:root #fw-postbox-story .fpl-start-steps li+li:before{content:'→';position:absolute;left:-16px;top:42%;width:16px;color:var(--fp-down)}
:root #fw-postbox-story .fpl-start-steps li>span{display:block;color:var(--fp-down);font:800 13px FWStoryNunito,sans-serif;margin-bottom:8px}
:root #fw-postbox-story .fpl-start-steps strong{display:block;font-size:16px;font-weight:600}
:root #fw-postbox-story .fpl-start-steps small{font-size:12px;line-height:1.7;margin:5px 0 0}
:root #fw-postbox-story .fnm-answer button[data-fnm-read]{border:0;padding:0;background:none;color:var(--fp-down);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media(max-width:650px){
 :root #fw-postbox-story .fpl-invitation{grid-template-columns:1fr;text-align:center;padding:27px 18px 20px;gap:22px;margin-top:28px}
 :root #fw-postbox-story .fpl-invitation h3{font-size:21px}
 :root #fw-postbox-story .fpl-invitation .fpl-quickstart{margin-top:0}
 :root #fw-postbox-story .fpl-quickstart{max-width:330px}
 :root #fw-postbox-story .fpl-start-steps{grid-template-columns:1fr;max-width:340px;gap:12px}
 :root #fw-postbox-story .fpl-start-steps li{display:grid;grid-template-columns:34px 1fr;text-align:left;gap:0 12px;padding:15px 20px}
 :root #fw-postbox-story .fpl-start-steps li>span{grid-row:1/3;align-self:center;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--fp-border);border-radius:50%;margin:0}
 :root #fw-postbox-story .fpl-start-steps small{grid-column:2}
 :root #fw-postbox-story .fpl-start-steps li+li:before{content:'↓';left:calc(50% - 8px);top:-17px;line-height:20px;text-align:center}
}
/* Full-width section backgrounds; constrain content instead of the entire site. */
#fw-postbox-story{max-width:none;margin-inline:auto}
:root #fw-postbox-story .fnm-header .fp-nav{max-width:1280px;margin-inline:auto}
@media(min-width:1280px){
  :root #fw-postbox-story .fnm-topline{padding-inline:max(29px,calc((100% - 1222px)/2))}
  :root #fw-postbox-story .fpp-wall-sign{left:max(7%,calc(50% - 550px))}
  :root #fw-postbox-story .fpp-postage{right:max(7%,calc(50% - 550px))}
  :root #fw-postbox-story .fna-inner{max-width:1040px;gap:60px}
  :root #fw-postbox-story .fp-chapter{max-width:960px;gap:70px}
  :root #fw-postbox-story .fhn-film{max-width:1080px}
  :root #fw-postbox-story .fnm-process,
  :root #fw-postbox-story .fnm-ticket,
  :root #fw-postbox-story .fnm-safe-points{max-width:980px}
  :root #fw-postbox-story .fnm-faq-layout,
  :root #fw-postbox-story .fnm-footer-top,
  :root #fw-postbox-story .fnm-footer-bottom{max-width:1040px}
}

/* Make the playable letter journey the first story after the hero mailbox. */
:root #fw-postbox-story #fp-journey{padding-top:48px;background:linear-gradient(180deg,#FFF0DF 0,#FFF8EF 470px);scroll-margin-top:24px}
:root #fw-postbox-story .fp-journey-intro{max-width:800px;margin:0 auto 28px}
:root #fw-postbox-story .fp-journey-intro .fp-overline{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;margin-bottom:18px;border:1px solid #E8B995;border-radius:999px;background:#FFFCF6;font-size:14px;letter-spacing:0;color:#9B4927}
:root #fw-postbox-story .fp-journey-intro .fp-overline svg{width:20px;height:20px}
:root #fw-postbox-story .fp-journey-intro h2{font-size:46px;line-height:1.45;text-wrap:balance}
:root #fw-postbox-story .fp-journey-phrase{display:inline-block}
:root #fw-postbox-story .fp-smile{position:relative;display:inline-block;color:#CB431B;isolation:isolate}
:root #fw-postbox-story .fp-smile:after{content:'';position:absolute;left:-3px;right:-3px;bottom:5px;height:13px;background:#FFD395;border-radius:35% 55% 45% 25%;transform:rotate(-2deg);z-index:-1}
:root #fw-postbox-story .fp-journey-intro p{margin:16px auto 0;font-size:18px;line-height:1.8;color:#805A3F}
:root #fw-postbox-story .fp-journey-break{display:none}
:root #fw-postbox-story #fp-journey .fpp-cases{max-width:760px;margin:0 auto 34px;padding:21px 24px 18px;border:1px solid #EAC4A4;border-radius:24px;background:#FFFCF7;box-shadow:0 5px 0 #E9C9AA55}
:root #fw-postbox-story #fp-journey .fpp-case-label{font-size:16px;font-weight:600;color:#60391F}
:root #fw-postbox-story #fp-journey .fpp-case-buttons{gap:10px;margin-top:14px}
:root #fw-postbox-story #fp-journey .fpp-case-button{min-height:48px;font-size:15px;padding:10px 16px}
:root #fw-postbox-story #fp-journey .fpp-case-caption{font-size:14px;line-height:1.7;margin-top:15px}
@media(max-width:650px){
 :root #fw-postbox-story #fp-journey{padding-top:34px}
 :root #fw-postbox-story .fp-journey-intro h2{font-size:34px;line-height:1.45}
 :root #fw-postbox-story .fp-journey-intro .fp-overline{font-size:12px;padding:8px 12px;gap:6px;margin-bottom:15px}
 :root #fw-postbox-story .fp-journey-intro .fp-overline svg{width:18px;height:18px}
 :root #fw-postbox-story .fp-journey-intro p{font-size:16px;margin-top:12px}
 :root #fw-postbox-story .fp-journey-break{display:block}
 :root #fw-postbox-story #fp-journey .fpp-cases{padding:18px 12px 14px;border-radius:20px}
 :root #fw-postbox-story #fp-journey .fpp-case-buttons{gap:8px}
 :root #fw-postbox-story #fp-journey .fpp-case-button{font-size:14px;padding:9px 12px}
}
@media(max-width:350px){
 :root #fw-postbox-story .fp-journey-intro h2{font-size:30px}
 :root #fw-postbox-story .fp-journey-intro .fp-overline{font-size:11px;padding-inline:9px}
 :root #fw-postbox-story #fp-journey .fpp-case-button{font-size:13px;padding-inline:9px}
}

/* Rubber-ink impressions: transparent paper, broken ink, cancellation lines. */
:root #fw-postbox-story .fpp-postage:after{
 content:'';width:171px;height:103px;left:-48px;bottom:-28px;
 border:0;border-radius:0;padding:0;background:url('/assets/2796d9956ac27747.svg') center/contain no-repeat;
 opacity:.92;transform:rotate(-22deg);pointer-events:none;
}
/* Raised orange wax seal, matching the original FAAKWAI postal emblem. */
:root #fw-postbox-story .fna-note>svg{display:none}
:root #fw-postbox-story .fna-note:after{
 content:'';position:absolute;width:59px;height:59px;right:9px;top:21px;
 background:url('/assets/497e7be708eab190.svg') center/contain no-repeat;transform:rotate(12deg);pointer-events:none;
}
:root #fw-postbox-story .fna-note>strong{padding-right:52px}
:root #fw-postbox-story .fnm-ticket-stamp{
 width:91px;height:57px;left:8px;bottom:12px;border:0;border-radius:0;
 font-size:0;color:transparent;background:url('/assets/df427b5b05712b21.svg') center/contain no-repeat;
 transform:rotate(-13deg);pointer-events:none;
}
/* Keep each story's existing label; add an engraved ring around it. */
:root #fw-postbox-story .fwn-postmark{
 border:0;background-color:transparent;
 background-image:radial-gradient(circle,transparent 55%,#b18361 56% 57%,transparent 58% 63%,#b18361 64% 65%,transparent 66%),repeating-conic-gradient(from 3deg,transparent 0deg 5deg,#b1836170 5deg 6deg,transparent 6deg 10deg);
 border-radius:50%;box-shadow:inset 0 0 0 6px var(--fp-bg);isolation:isolate;
}
:root #fw-postbox-story .fwn-postmark:before{content:'';position:absolute;inset:14%;border-radius:50%;background:var(--fp-bg);z-index:-1}
/* A second cancellation mark on the contact postcard, clear of its LINE link. */
:root #fw-postbox-story .fnm-contact-card:after{
 content:'';display:block;width:119px;height:71px;margin:13px 0 0 auto;
 background:url('/assets/2796d9956ac27747.svg') center/contain no-repeat;transform:rotate(-8deg);pointer-events:none;
}
/* The seal travels with the birthday envelope and lifts away when it opens. */
:root #fw-postbox-story .fwn-letter-heart{
 width:29px;height:29px;left:calc(50% - 14.5px);top:23px;
 background:url('/assets/497e7be708eab190.svg') center/contain no-repeat;pointer-events:none;
}
:root #fw-postbox-story .fwn-letter-heart svg{display:none}
/* Close both decorative envelopes beside the final invitation with wax. */
:root #fw-postbox-story .fp-ending:before,
:root #fw-postbox-story .fp-ending:after{
 background:url('/assets/497e7be708eab190.svg') center/34px 34px no-repeat,
 linear-gradient(32deg,transparent 49%,var(--fp-border) 49% 51%,transparent 51%),
 linear-gradient(-32deg,transparent 49%,var(--fp-border) 49% 51%,transparent 51%),var(--fp-bg);
 opacity:1;
}
@media(max-width:620px){
 :root #fw-postbox-story .fna-note:after{width:49px;height:49px;right:7px;top:27px}
 :root #fw-postbox-story .fna-note>strong{padding-right:40px}
 :root #fw-postbox-story .fnm-ticket-stamp{width:76px;height:46px;left:9px;bottom:9px}
 :root #fw-postbox-story .fnm-contact-card:after{width:102px;height:62px;margin-top:10px}
 :root #fw-postbox-story .fp-ending:before,
 :root #fw-postbox-story .fp-ending:after{background-size:23px 23px,auto,auto,auto}
}

/* The LINE app's J1–J6 drawings, composed per scene rather than repeated circles. */
:root #fw-postbox-story{
 --stage-sun:url('/assets/42285f272d2ce0ae.svg');--stage-waves:url('/assets/98011f629b314f2b.svg');
 --stage-seal:url('/assets/5b17bd7981d7fa2d.svg');--stage-cloud:url('/assets/48d395cdee3bf226.svg');
 --stage-tape:url('/assets/706f46abbdd6b474.svg');--stage-fuji:url('/assets/9c567be8ee6c1dca.svg');
}
/* Keep the mascot/canvas geometry untouched; only replace the scenery behind it. */
:root #fw-postbox-story .fp-chapter .fp-mint{
 width:222px;height:199px;left:-23px;bottom:3px;border-radius:0;
 background:var(--stage-tape) center/contain no-repeat;pointer-events:none;
}
:root #fw-postbox-story .fp-chapter .fp-mint:after{display:none}
:root #fw-postbox-story .fp-chapter:nth-of-type(2) .fp-mint{background-image:var(--stage-fuji)}
:root #fw-postbox-story .fp-chapter:nth-of-type(3) .fp-mint{background-image:var(--stage-cloud)}
/* The alternate letters also get their own scenery, with no random layout shift. */
:root #fw-postbox-story #fp-journey[data-letter=firstday] .fp-chapter:nth-of-type(1) .fp-mint{background-image:var(--stage-sun)}
:root #fw-postbox-story #fp-journey[data-letter=firstday] .fp-chapter:nth-of-type(2) .fp-mint{background-image:var(--stage-waves)}
:root #fw-postbox-story #fp-journey[data-letter=firstday] .fp-chapter:nth-of-type(3) .fp-mint{background-image:var(--stage-seal)}
:root #fw-postbox-story #fp-journey[data-letter=thinking] .fp-chapter:nth-of-type(1) .fp-mint{background-image:var(--stage-cloud)}
:root #fw-postbox-story #fp-journey[data-letter=thinking] .fp-chapter:nth-of-type(2) .fp-mint{background-image:var(--stage-tape)}
:root #fw-postbox-story #fp-journey[data-letter=thinking] .fp-chapter:nth-of-type(3) .fp-mint{background-image:var(--stage-waves)}
/* Five case studies: taped work notes, a warm home, steady waves, growing up, a trip. */
:root #fw-postbox-story .fwn-desk-light{
 left:0;top:36px;width:79%;height:254px;border-radius:0;transform:none;
 background:var(--stage-tape) center/contain no-repeat;opacity:.65;pointer-events:none;
}
:root #fw-postbox-story [data-world=family] .fwn-desk-light{background-image:var(--stage-cloud)}
:root #fw-postbox-story [data-world=finance] .fwn-desk-light{background-image:var(--stage-waves)}
:root #fw-postbox-story [data-world=child] .fwn-desk-light{background-image:var(--stage-fuji)}
:root #fw-postbox-story [data-world=general] .fwn-desk-light{background-image:var(--stage-sun)}
/* The delivery-method ticket and FAQ use the same shared visual vocabulary. */
:root #fw-postbox-story .fnm-ticket-art:before{
 width:224px;height:201px;left:14px;top:27px;border-radius:0;
 background:var(--stage-waves) center/contain no-repeat;pointer-events:none;
}
:root #fw-postbox-story .fnm-how[data-method=inactivity] .fnm-ticket-art:before{background:var(--stage-fuji) center/contain no-repeat}
:root #fw-postbox-story .fnm-faq-buddy:before{
 width:196px;height:176px;left:-9px;bottom:0;border-radius:0;
 background:var(--stage-cloud) center/contain no-repeat;pointer-events:none;
}
@media(max-width:800px){
 :root #fw-postbox-story .fp-chapter .fp-mint{width:207px;height:186px;left:-24px}
}
@media(max-width:620px){
 :root #fw-postbox-story .fp-chapter .fp-mint{width:214px;height:192px;left:-25px}
 :root #fw-postbox-story .fp-chapter:first-of-type .fp-mint{width:174px;height:156px;left:-21px;bottom:2px}
 :root #fw-postbox-story .fnm-ticket-art:before{width:214px;height:192px;left:calc(50% - 113px);top:12px}
 :root #fw-postbox-story .fwn-desk-light{width:85%;height:230px;top:48px}
}