/* Pastel gingham & outlined sticker edition. Prior v0.5 retained in 版本存檔. */
:root{--paper:#fff8f4;--pink:#f58abb;--yellow:#fff0a8;--blue:#a5edf1;--coral:#e77da8;--ink:#275a70;--muted:#416678;--line:#9bdce9;--lime:#f58abb;--sage:#e7f7ff;--orange:#fff0a8;--berry:#994367;--blush:#ffe4ef;--cyan:#20b5da;--gingham:linear-gradient(90deg,#f58abb22 50%,transparent 50%),linear-gradient(#f58abb22 50%,transparent 50%)}
body,body[data-page="home"]{background-color:var(--paper);background-image:var(--gingham);background-size:54px 54px;color:var(--ink)}
body[data-page="home"] .site-header{border-bottom:2px dashed #e77da850}
.brand-symbol{color:var(--cyan)}.brand-symbol>span{color:var(--pink)}
.site-header nav a{font-weight:700;color:var(--ink)}
.member-link,body[data-page="home"] .member-link{background:var(--paper);border:2px solid var(--cyan);box-shadow:3px 3px 0 var(--blue)}
.eyebrow{font-weight:800;letter-spacing:1.8px;color:var(--ink)}
.button,.note-presets button{font-weight:700;border-width:2px;box-shadow:4px 4px 0 var(--cyan)}
.button.dark{background:var(--yellow);border-color:var(--cyan);color:var(--ink)}
.button.dark:hover{background:var(--blue);border-color:var(--cyan);transform:translateY(-2px);color:var(--ink)}
.button.light{background:var(--paper);border-color:var(--cyan)}
.button:disabled{box-shadow:none}
.pocket-hero{background:transparent;min-height:765px}
.pocket-hero .hero-copy{padding-top:130px}
.pocket-hero .bunny-hero{top:7%;right:-1%;width:65%;transform:rotate(-5deg)}
.pocket-hero .bunny-hero img{filter:none;animation:none}
.pocket-hero .hero-copy>p{display:table;background:#fff8f4d9;padding:10px 14px;border-radius:14px;margin-left:-14px}
.hero-label{font-weight:700}.pocket-hero .hero-label span{background:var(--paper);border:1px solid var(--pink);border-radius:20px;padding:5px 10px}
.pocket-hero .floating-caption{color:var(--ink);background:var(--paper);border:2px solid var(--cyan);border-radius:25px;padding:7px 16px;font-size:15px;right:14%;top:0;transform:rotate(6deg)}
.bunny-hero figcaption{color:var(--ink);font-weight:700}
.dot{background:var(--cyan)}
.pocket-hero h1,.pocket-story h2,.letter-copy h2,.pocket-works>.section-heading h2,.pocket-try h2,.pocket-launch h2,.faq-section h2{background:var(--paper);border:3px solid var(--cyan);box-shadow:6px 7px 0 var(--pink);font-weight:700;color:var(--ink);border-radius:28px 23px 29px 22px}
.pocket-hero .underlined:after{background:var(--yellow);height:14px}
.pocket-story h2{box-shadow:6px 7px 0 var(--yellow)}
.letter-copy h2{border-color:var(--coral);box-shadow:6px 7px 0 var(--blue)}
.pocket-works>.section-heading h2{box-shadow:6px 7px 0 var(--pink);border-color:var(--cyan)}
.pocket-try h2{box-shadow:6px 7px 0 var(--yellow)}
.pocket-launch h2{border-color:var(--coral);box-shadow:6px 7px 0 var(--blue)}
.faq-section h2{border-color:var(--cyan);box-shadow:5px 6px 0 var(--yellow)}
.pocket-hero h1:before,.pocket-story h2:before,.letter-copy h2:before,.pocket-works>.section-heading h2:before,.pocket-try h2:before,.pocket-launch h2:before,.faq-section h2:before{background:var(--pink);width:43px;height:43px;clip-path:polygon(50% 0,61% 37%,100% 50%,61% 62%,50% 100%,38% 62%,0 50%,38% 38%);right:-18px;top:-19px;transform:rotate(10deg)}
.pocket-hero h1:after,.pocket-story h2:after,.letter-copy h2:after,.pocket-works>.section-heading h2:after,.pocket-try h2:after,.pocket-launch h2:after,.faq-section h2:after{background-color:var(--paper);background-image:var(--gingham);background-size:12px 12px;border:1px solid var(--pink);opacity:1;width:45px;height:18px}
.word-ribbon{background:var(--paper);border-top:2px dashed var(--pink);border-bottom:2px dashed var(--pink);color:var(--ink);padding:18px 0;font-weight:700;transform:rotate(-2deg)}
.word-ribbon b{color:var(--cyan)!important}.word-ribbon b:nth-of-type(even){color:var(--pink)!important}
.pocket-story{padding-top:100px;padding-bottom:125px}
.pocket-story:before{background:var(--blue);opacity:1;border:3px solid var(--cyan);width:40%;height:46%;right:2%;top:29%;border-radius:48% 52% 49% 51%}
.story-companion{top:20%;width:51%;right:-3%;animation:none;transform:none}
.story-signature{color:var(--berry);font-weight:700}
.story-body p{background:#fff8f4b8;border-radius:16px;padding:5px 10px;margin-left:-10px}
.letter-section{background:var(--paper);border-top:2px dashed var(--pink);padding-top:85px;padding-bottom:80px}
.glyph-sheet{border:3px solid var(--cyan);box-shadow:9px 12px 0 var(--pink);background:var(--paper)}
.glyph-sheet:before{background-color:var(--yellow);border:2px solid #d49a36;border-radius:5px}
.letter-copy article>span{border:2px solid var(--cyan);background:var(--yellow);border-radius:50%;padding:0;width:37px;height:37px;min-width:37px;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--ink)}
.letter-copy h3{font-weight:700;color:var(--ink)}
.pocket-works{background:linear-gradient(to bottom,var(--paper) 0 32vw,var(--blue) 32vw 100%)}
.flower-underlay{fill:var(--blue)}
.work-card:after{height:0;background:none;border-bottom:2px dashed var(--cyan)}
.work-scene:before{background:#e7f7ff80;border:2px dashed #20b5da80}
.journal-paper{border:2px solid var(--cyan);border-left:10px solid var(--pink);box-shadow:7px 9px 0 #20b5da55;background:var(--paper)}
.gift-note{border:3px solid var(--coral);outline-color:var(--pink);box-shadow:7px 9px 0 #e77da866;background:var(--paper)}
.work-caption h3{font-weight:700}.work-caption>span{display:inline-block;border:1px solid var(--cyan);border-radius:20px;padding:4px 13px;background:var(--paper)}
.sticker{border:3px solid var(--cyan);outline:5px solid var(--paper);box-shadow:8px 10px 0 #20b5da45;font-weight:700;color:var(--ink)}
.sticker-one{background:var(--pink)}.sticker-two{background:var(--yellow)}.sticker-three{background:var(--paper)}.sticker-flower{background:var(--yellow);color:var(--coral);border-color:#d49a36}.sticker-heart{background:var(--pink);color:var(--paper);border-color:var(--coral)}
.pocket-try{background-color:var(--paper);background-image:var(--gingham);background-size:54px 54px}
.pocket-try:before{background:var(--blue)}
.type-playground{border:3px solid var(--cyan);background:var(--yellow);box-shadow:8px 9px 0 var(--pink)}
.type-playground textarea{border:2px solid #9bdce9;background-color:var(--paper);background-image:repeating-linear-gradient(transparent 0 63px,#9bdce955 64px,transparent 65px)}
.playground-toolbar{border-color:var(--cyan)}.playground-toolbar select{border:1px solid var(--cyan);background:var(--paper)}
.note-presets button{border-color:var(--cyan);background:var(--paper)}.note-presets button:hover{background:var(--yellow)}
.try-caption{margin-top:22px}.try-caption span,.try-caption a{background:#fff8f4d9;padding:3px 6px;border-radius:5px}
.pocket-launch:after{background:var(--blue);border:3px dashed var(--cyan)}
.launch-companion{transform:rotate(8deg)}
.pocket-launch p{background:#fff8f4d9;border-radius:12px;padding:10px;margin-left:-10px}
.faq-section{background:var(--paper);border:2px dashed var(--pink)!important;border-radius:30px;padding:50px!important;margin-bottom:65px;max-width:1050px!important}
.faq-list details{border-color:var(--line)}.faq-doodle{color:var(--cyan)}
.site-footer{background:var(--blue);border-top:3px solid var(--cyan);color:var(--ink)}
.footer-bottom{border-color:var(--cyan);color:var(--ink)}
.auth-aside,.checkout-mini{background:var(--blue);border:2px solid var(--cyan)}
.panel,.metric,.table-wrap{border:2px solid var(--cyan);background:var(--paper)}
.auth-card{background:var(--paper);border-radius:25px;padding:28px}
.pill{background:var(--yellow);border:1px solid #d49a36;color:var(--ink)}
form label>input:not([type=checkbox]),form label>textarea,form label>select{border:2px solid var(--line);background:var(--paper)}
.legal-page{background:var(--paper)}
@media(max-width:1100px){.pocket-hero .hero-copy{padding-top:140px}.pocket-hero .floating-caption{font-size:12px;right:12%}.story-companion{top:27%}.faq-section{margin-left:30px;margin-right:30px}}
@media(max-width:760px){body,body[data-page="home"],.pocket-try{background-size:38px 38px}body[data-page="home"] .site-header{padding-left:20px;padding-right:20px}.member-link,body[data-page="home"] .member-link{padding:7px 10px;font-size:10px}.pocket-hero{min-height:0}.pocket-hero .hero-copy{padding-top:25px}.pocket-hero .bunny-hero{width:calc(100% + 48px);right:auto;top:auto;margin-top:32px;transform:rotate(-4deg)}.pocket-hero .floating-caption{font-size:11px;padding:5px 10px;top:-8px;right:8%}.pocket-hero .hero-copy>p{margin-left:auto;margin-right:auto;padding:8px 7px}.pocket-hero .hero-label span{padding:4px 7px}.pocket-hero .hero-copy h1{font-size:clamp(28px,7.3vw,42px)}.pocket-story{padding-top:65px;padding-bottom:310px}.pocket-story:before{top:auto;bottom:38px;height:195px;width:65%;right:13%}.story-companion{top:auto;bottom:10px;right:1%;width:96%}.letter-section{padding-top:55px;padding-bottom:55px}.letter-copy article>span{width:32px;height:32px;min-width:32px;font-size:17px}.type-playground{box-shadow:5px 6px 0 var(--pink)}.pocket-launch p{margin-left:0;padding:8px}.faq-section{padding:28px 22px!important;margin:20px 18px 45px!important}.faq-section h2{font-size:24px}.auth-card{padding:22px}.pocket-hero h1:before,.pocket-story h2:before,.letter-copy h2:before,.pocket-works>.section-heading h2:before,.pocket-try h2:before,.pocket-launch h2:before,.faq-section h2:before{width:35px;height:35px;right:-13px;top:-16px}}

@media(min-width:761px){.pocket-hero .hero-copy .eyebrow{max-width:420px;letter-spacing:1.4px}}
