:root{
  color-scheme:light;
  --paper:#F2EEE5; --ink:#141414; --pink:#F3AFC8; --blue:#BCD3EA; --lime:#D6F26B; --note:#F6F28F; --outer:#E4DFD3;
  --anton:"Anton","Impact","Arial Narrow",sans-serif;
  --mono:"Space Mono","Courier New",monospace;
  --hand:"Ma Shan Zheng","Kaiti SC","STKaiti",cursive;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--outer);scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--outer);color:var(--ink);font-family:var(--sans);font-weight:500;-webkit-font-smoothing:antialiased}
.sheet{position:relative;max-width:440px;margin:0 auto;background:var(--paper);overflow:hidden}
.sheet::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background-image:url("/assets/paper.svg")}
@media (min-width:480px){.sheet{margin:28px auto;border-radius:30px;box-shadow:0 30px 60px -34px rgba(20,20,20,.45)}}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* hero */
.hero{padding:26px 22px 44px;position:relative}
.top{display:flex;justify-content:space-between;align-items:center}
.top .mono{font-weight:700}
.tape{display:inline-block;background:var(--pink);padding:7px 14px;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-3deg)}
h1{margin:34px 0 0;font:inherit;line-height:.95}
.l1,.l2,.l3{display:block}
.l1{font:900 34px/1.2 var(--sans)}
.l1 i{font:400 50px/1 var(--anton);font-style:normal;margin-left:6px;vertical-align:-2px;letter-spacing:.01em}
.l2{font:900 134px/1.02 var(--sans);letter-spacing:-.07em;margin:0 0 0 -6px}
.mk{background:linear-gradient(transparent 52%,var(--lime) 52%,var(--lime) 94%,transparent 94%);padding:0 8px 0 2px}
.l3{font:900 52px/1.1 var(--sans)}
.l3 i{font:400 100px/1 var(--anton);font-style:normal;margin-left:6px;vertical-align:-6px;letter-spacing:.01em}
.hand{display:inline-block;margin-top:26px;background:var(--lime);padding:5px 14px;font:400 22px/1.3 var(--hand);transform:rotate(-2deg)}
.lede{margin:26px 0 0;font-size:16px;line-height:1.9;max-width:27em}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:34px}
.meta small{display:block;font:400 11px/1 var(--mono);letter-spacing:.12em;opacity:.65}
.meta b{display:block;margin-top:8px;font:700 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* blocks */
.blk{position:relative;padding:44px 22px 40px}
.pink{background:var(--pink)} .blue{background:var(--blue)} .limeb{background:var(--lime)}
.strip{position:absolute;width:88px;height:24px;background:rgba(236,226,190,.88);transform:rotate(-4deg);top:-12px;left:26px;z-index:2}
.strip.r{left:auto;right:30px;transform:rotate(3deg)}
.blk h2{margin:26px 0 0;font:900 46px/1.08 var(--sans);letter-spacing:-.02em}
.blk h2 i{display:block;font:400 92px/1 var(--anton);font-style:normal;letter-spacing:.01em;margin-top:2px}

.field{display:block;width:100%;margin:24px 0 0;border:2px solid var(--ink);border-radius:14px;background:#FBF8F0;color:var(--ink);font:500 16px/1.7 var(--sans);padding:15px 16px;resize:none;outline:0;min-height:100px}
.field::placeholder{color:#6E675C}
.field:focus{box-shadow:0 0 0 3px var(--ink)}
.hint{margin:12px 2px 22px;font-size:14px;line-height:1.7}

.copy{display:flex;align-items:center;justify-content:space-between;width:100%;height:58px;border:0;border-radius:14px;background:var(--ink);color:#F6F1E6;font:700 15px/1 var(--mono);letter-spacing:.12em;padding:0 22px;cursor:pointer;text-transform:uppercase;transition:transform .15s,background .2s}
.copy:active{transform:scale(.985)}
.copy.done{background:#3C4A2A}

.note{margin:10px 0 0;font-size:14px;line-height:1.7}
.sheetp{position:relative;margin-top:26px;background:#FBF8F0;border-radius:10px;padding:34px 20px 22px;transform:rotate(-.5deg);box-shadow:0 14px 26px -18px rgba(20,20,20,.5)}
.prompt-text{margin:0;font:500 15px/1.95 var(--sans);white-space:pre-wrap;word-break:break-word}
.ph{background:var(--lime);padding:1px 6px;font-weight:700}
.sheetp .copy{margin-top:26px}

.step{display:grid;grid-template-columns:70px 1fr;align-items:center;padding:18px 0;border-bottom:1.5px solid var(--ink)}
.step:first-of-type{margin-top:22px;border-top:1.5px solid var(--ink)}
.step .n{font:400 46px/1 var(--anton)}
.step p{margin:0;font-size:17px;line-height:1.65;font-weight:700}
.tip{margin:24px 0 0;font-size:14px;line-height:1.85}

/* end */
.end{position:relative;padding:60px 22px 56px}
.end h3{margin:0;font:900 76px/1.05 var(--sans);letter-spacing:-.05em}
.sticky{margin:30px 6px 0 14px;background:var(--note);padding:24px 22px 26px;transform:rotate(2.5deg);box-shadow:0 14px 24px -16px rgba(20,20,20,.5);font:400 27px/1.55 var(--hand)}
.foot{background:var(--blue);padding:24px 22px calc(26px + 70px);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.foot b{font:400 30px/1 var(--anton);letter-spacing:.02em}

.bar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;pointer-events:none;transform:translateY(140%);transition:transform .3s ease;z-index:5}
.bar.show{transform:none}
.bar-in{width:100%;max-width:440px;padding:0 14px calc(14px + env(safe-area-inset-bottom,0px))}
.bar .copy{pointer-events:auto;box-shadow:0 0 0 2px var(--paper),0 14px 26px -12px rgba(20,20,20,.6)}
.hero{padding-bottom:56px}
.copy,.cta{display:flex;align-items:center;justify-content:space-between;width:100%;height:58px;border:0;border-radius:14px;background:var(--ink);color:#F6F1E6;font:700 15px/1 var(--mono);letter-spacing:.12em;padding:0 22px;text-decoration:none}
.cta-p{margin:28px 0 24px;font-size:16px;line-height:1.85}
.sticky{margin-top:30px}
.foot{padding-top:22px;padding-bottom:calc(26px + 70px)}
.step p .ph{padding:1px 6px}
.prompt-text{font-size:14.5px;line-height:1.85}
.pink .big{margin:24px 0 28px;font:900 27px/1.5 var(--sans);letter-spacing:-.01em}
.pink{padding-top:48px}
.pink .box{margin-top:22px;background:#FBF8F0;border-radius:24px;padding:26px 22px}
.pink .box p{margin:0;font:700 19px/1.8 var(--sans);letter-spacing:0}
.pink .copy{margin-top:18px}
.cta{background:var(--pink);color:var(--ink)}
.cta-p{font:700 20px/1.9 var(--sans);margin:30px 0 24px}
.cta-p .mk{padding:0 6px 0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.foot{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}

/* Production fixes: retain the approved palette, type, spacing and collage. */
.brand-case{text-transform:none}
.steps{list-style:none;padding:0;margin:0}
.steps .step:first-child{margin-top:22px;border-top:1.5px solid var(--ink)}
.step{grid-template-columns:70px minmax(0,1fr)}
.copy,.cta{min-height:58px;height:auto;padding-top:16px;padding-bottom:16px;gap:12px;line-height:1.35}
.copy .lbl,.cta span:first-child{min-width:0;overflow-wrap:anywhere}
.copy span[aria-hidden],.cta span[aria-hidden]{flex-shrink:0}
.prompt-text{overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.ph{box-decoration-break:clone;-webkit-box-decoration-break:clone}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.bar:not(.show){visibility:hidden}
.bar.show{visibility:visible}
html{scroll-padding-bottom:110px}
.copy,.cta{scroll-margin-block:18px 110px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.clipboard-helper{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;font-size:16px;pointer-events:none}
.manual-copy{position:fixed;inset:0;max-width:408px;width:calc(100% - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow:auto;z-index:10;box-shadow:0 12px 40px #14141440}
.manual-copy::backdrop{background:#14141480}
.manual-copy h2{font-size:22px;margin:0 0 12px}
.manual-copy p{font-size:15px;line-height:1.8;margin:0 0 16px}
.manual-copy textarea{display:block;width:100%;height:220px;max-height:35vh;max-height:35dvh;resize:vertical;font:400 16px/1.65 var(--sans);background:#FBF8F0;color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:12px}
.manual-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.manual-actions .copy{flex:1;justify-content:center;padding-inline:12px;letter-spacing:0}
.close-manual{min-width:64px;min-height:48px;padding:12px;border:2px solid var(--ink);border-radius:12px;color:var(--ink);background:var(--pink);font:700 16px var(--sans);cursor:pointer}
.no-script{max-width:440px;margin:0 auto;padding:18px 22px;background:var(--note);font-size:15px;line-height:1.8}
.utility{min-height:65vh}
.utility h1{font:900 36px/1.3 var(--sans);overflow-wrap:anywhere}
.utility p{font-size:17px;line-height:1.9;margin:28px 0 0}
@media(max-width:374px){
  .l1{font-size:30px}.l1 i{font-size:44px}
  .l2{font-size:118px}
  .l3{font-size:44px}.l3 i{font-size:86px}
  .blk h2{font-size:40px}.blk h2 i{font-size:80px}
  .step{grid-template-columns:54px minmax(0,1fr)}
  .sheetp{padding-inline:16px}
  .sticky{padding-inline:18px;font-size:25px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .copy:active{transform:none}
}