:root{--ink:#0e1113;--ink2:#161b1e;--ink3:#232a2e;--mist:#e8e8e3;--mist2:#b9c0c1;--paper:#ece6d8;--on:#23211c;--on2:#4d4a41;--metal:#aaa58f;--ver:#8e2f20;
 --sans:"Hanken Grotesk","Noto Sans TC",system-ui,sans-serif;--display:"Newsreader","Noto Serif SC",Georgia,serif;--han:"Noto Serif SC","Noto Sans TC",serif;--p:160px}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{font:400 17px/1.6 var(--sans);color:var(--mist);background:var(--ink);overflow-x:hidden}
html[lang=zh] body{line-height:1.8}
img{display:block;max-width:100%}a{color:inherit}
[hidden]{display:none!important}
.defs{position:absolute}
h1,h2{font-family:var(--display);font-weight:500}
html[lang=zh] h1,html[lang=zh] h2{font-family:var(--han);letter-spacing:.06em}
h2{font-size:33px;line-height:1.18}
html[lang=zh] h2{font-size:27px;line-height:1.4}
section{padding:64px 24px}
section>*{max-width:600px;margin-left:auto;margin-right:auto}
.lead{margin-top:10px;color:var(--mist2)}
.small{margin-top:12px;color:var(--mist2)}
.top{position:absolute;z-index:9;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 24px}
.brand{font:500 18px/1 var(--han);letter-spacing:.3em;text-decoration:none}
.lang{font:500 16px/1 var(--sans);color:var(--mist);background:none;border:0;padding:10px 0;display:flex;gap:8px;cursor:pointer}
.lang .sl{opacity:.35}.lang .on-zh{opacity:.55}html[lang=zh] .lang .on-zh{opacity:1}html[lang=zh] .lang .on-en{opacity:.55}

.morning{position:relative;min-height:100vh;min-height:100svh;padding:84px 24px 48px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.back{position:absolute;inset:0 0 auto;height:100vh;height:100svh;max-width:none;overflow:hidden}
.back img{width:100%;height:100%;max-width:none;object-fit:cover;animation:settle 14s ease-out both}
.back:after{content:"";position:absolute;inset:0;background:linear-gradient(#0e1113b8 0,#0e111340 34%,#0e111330 62%,#0e1113 100%)}
@keyframes settle{from{transform:scale(1.05)}}
.head{position:relative;text-align:center}
.date{color:var(--mist);font-weight:500}
.head h1{font-size:44px;line-height:1.14;margin-top:4px}
html[lang=zh] .head h1{font-size:36px;line-height:1.4}
.sub{margin-top:6px;color:var(--mist)}

/* the folded note. The sheet is three panels; two flaps fold back on their creases */
.note{position:relative;width:100%;max-width:342px;height:var(--p);margin:auto;perspective:1500px;cursor:pointer;transition:height 1.05s cubic-bezier(.3,.1,.2,1),margin-top 1.05s cubic-bezier(.3,.1,.2,1)}
.note.open{height:calc(var(--p)*3);cursor:default}
.sheet{position:absolute;left:0;right:0;top:50%;height:calc(var(--p)*3);transform:translateY(-50%);transform-style:preserve-3d}
.base{position:absolute;inset:0;color:var(--on);background:var(--paper) url(paper.jpg) center/100% 100%;clip-path:inset(33.34% 0)}
.note.open .base{clip-path:inset(0);transition:clip-path 0s 1s}
.base:before,.base:after{content:"";position:absolute;left:0;right:0;height:7px;margin-top:-3px;background:linear-gradient(#23211c00,#23211c0b 50%,#ffffff14 55%,#23211c00);pointer-events:none}
.base:before{top:33.33%}.base:after{top:66.66%}
.body{position:absolute;left:0;right:0;top:0;padding:30px 24px 24px;opacity:0;visibility:hidden}
.flap{position:absolute;left:0;right:0;height:33.34%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.45,.05,.25,1)}
.flap.t{top:0;transform-origin:50% 100%;transform:translateZ(1px) rotateX(-180deg);transition-delay:.26s}
.flap.b{bottom:0;transform-origin:50% 0;transform:translateZ(2px) rotateX(180deg)}
.note.open .flap{transform:translateZ(0) rotateX(0)}
.flap i{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper) url(paper.jpg);background-size:100% 300%;font-style:normal}
.flap.t i{background-position:0 0}.flap.b i{background-position:0 100%}
.flap .out{transform:rotateX(180deg);box-shadow:0 18px 40px #0009,inset 0 0 0 1px #23211c10;display:flex;align-items:flex-start;justify-content:center;padding-top:16px;color:var(--on2);font-weight:500}
.note.done{height:auto;perspective:none}
.note.done .sheet{position:relative;top:auto;height:auto;transform:none}
.note.done .base{position:relative;clip-path:none;box-shadow:0 18px 44px #0009}
.note.done .body{position:relative;opacity:1;visibility:visible;animation:rise 1.2s ease-out both}
.note.done .flap,.note.done .seal{display:none}
@keyframes rise{from{opacity:0}}
.seal{position:absolute;left:50%;top:60%;width:68px;height:68px;margin:-34px 0 0 -34px;transform:translateZ(3px);border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .42s ease,transform .42s ease}
.seal span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--ver);color:var(--paper);font:700 40px/1 var(--han);box-shadow:inset 0 0 0 3px var(--ver),inset 0 0 0 4.5px #ece6d8aa;filter:url(#rough)}
.seal:focus-visible{outline:1px solid var(--mist);outline-offset:4px}
.seal.gone{opacity:0;transform:translateZ(3px) scale(.92)}
.hint{position:absolute;left:24px;right:24px;bottom:44px;color:var(--mist);text-align:center;transition:opacity .4s}
.line{font:500 27px/1.32 var(--display);color:var(--on);letter-spacing:.002em}
html[lang=zh] .line{font:500 25px/1.6 var(--han);letter-spacing:.03em}
.you{margin-top:18px;padding-top:14px;border-top:1px solid #23211c30;color:var(--on)}
.you b{display:block;font-weight:600}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:20px}
.facts div{border-top:1px solid #23211c30;padding:8px 0 10px}
.facts dt{color:var(--on2);font-size:16px}
.facts dd b{display:block;font:700 23px/1.3 var(--han)}
.facts dd{font-size:17px;line-height:1.35}
.off{margin-top:4px;color:var(--on)}
.keep{position:relative;width:100%;max-width:342px;margin-top:26px;text-align:center;animation:rise 1.2s ease-out both}
.next{margin-top:14px;color:var(--mist2)}
.btn{display:block;width:100%;min-height:54px;padding:14px 20px;font:600 17px/1.3 var(--sans);color:var(--on);background:var(--paper);border:0;cursor:pointer;transition:background .4s;-webkit-tap-highlight-color:transparent}
.btn:hover{background:#fff8e8}
.plain{font:500 17px/1.4 var(--sans);color:var(--mist);background:none;border:0;border-bottom:1px solid var(--metal);padding:6px 0;cursor:pointer}

.card{padding-top:0;text-align:center}
.card img{width:100%;max-width:440px;height:auto;margin:auto;box-shadow:0 20px 50px #000a}
.cardBtns{max-width:342px;margin:22px auto 0;display:grid;gap:14px;justify-items:center}

.chart{background:var(--ink2);border-top:1px solid #aaa58f33}
form{margin-top:22px}
label{display:block;font-weight:500;margin-bottom:8px}
input[type=date]{display:block;width:100%;min-height:54px;padding:12px 14px;font:400 17px/1.3 var(--sans);color:var(--mist);background:var(--ink);border:1px solid #aaa58f77;border-radius:0;color-scheme:dark;-webkit-appearance:none;appearance:none}
input[type=date]:focus{outline:1px solid var(--mist);outline-offset:1px}
form .btn{margin-top:16px}
.err{margin-top:10px;color:#e6a093}
.saved{margin-top:20px}
.saved p{margin-bottom:8px}

.scroll{padding-top:0;padding-left:0;padding-right:0;background:var(--ink)}
.scrollPic{max-width:none;height:62vw;max-height:420px;overflow:hidden}
.scrollPic img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.wall{padding:34px 24px 0}
.wall ul{list-style:none;margin:20px 0;border-top:1px solid #aaa58f44}
.wall li{padding:10px 0;border-bottom:1px solid #aaa58f44}
.price{margin:18px 0 14px;font-family:var(--display)}
.price b{font-weight:500;font-size:40px;line-height:1.1}
.scrollBody{padding:0 24px}
.roll{color:var(--on);background:var(--paper) url(paper-roll.jpg) 0 0/100% auto repeat-y;padding:30px 22px 26px;box-shadow:0 18px 44px #0009}
.roll h3{font:600 20px/1.3 var(--sans);margin:26px 0 8px;color:var(--on)}
.roll h3:first-child{margin-top:0}
.roll p{color:var(--on)}
.days{list-style:none;border-top:1px solid #23211c30}
.days li{padding:10px 0;border-bottom:1px solid #23211c24}
.days .dh{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.days .dh span:last-child{font-family:var(--han);font-weight:700;white-space:nowrap}
.days .dn{color:var(--on2)}
.days li.clear .dn:before,.days li.gentle .dn:before{font-weight:600;color:var(--on)}
.days li.clear .dn:before{content:attr(data-m) " "}
.days li.gentle .dn:before{content:attr(data-m) " ";color:var(--ver)}
.pick{list-style:none}
.pick li{padding:6px 0}
.pick b{font-weight:600}
.nexts{margin-top:28px;display:grid;gap:12px}
.nexts h3{font:600 20px/1.3 var(--sans)}
.nexts a{display:block;padding:14px 16px;text-decoration:none;border:1px solid #aaa58f55;color:var(--mist)}
.nexts a b{display:block;margin-top:4px;font-weight:600;border-bottom:0}
.fine{margin-top:22px;color:var(--mist2)}
.how{padding-top:18px}
details{border-top:1px solid #aaa58f44;padding-top:16px}
summary{cursor:pointer;font-weight:600}
details p{margin-top:12px;color:var(--mist2)}
@media(min-width:760px){
  .note{max-width:420px}.keep{max-width:420px}
  .line{font-size:30px}
  .scrollPic{height:420px}
  .wall,.scrollBody{padding-left:0;padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  .back img{animation:none}.note,.flap,.seal{transition:none}.body{animation:none}
}