:root{--paper:#f1e4cc;--paper2:#e9d6b4;--ink:#1a1210;--red:#c8102e;--red2:#8f0a17;--gold:#d9a23a;--serif:"Fraunces","Noto Serif TC","Songti TC","PMingLiU",Georgia,"Times New Roman",serif;--disp:"Anton","Noto Sans TC","PingFang TC","Microsoft JhengHei","Impact","Arial Narrow",sans-serif;--mono:"IBM Plex Mono","Noto Sans TC",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}
html,body{background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
code{font-family:var(--mono);background:var(--ink);color:var(--paper);padding:0 .3em}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:60;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr 1s steps(4) infinite}
@keyframes gr{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:45}
section{position:relative}
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,3vw,36px);mix-blend-mode:normal}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:20px;letter-spacing:-.02em}.logo sup{font-family:var(--mono);font-size:10px;color:var(--red);font-weight:600}
.chop{display:grid;place-items:center;width:32px;height:32px;background:var(--red);color:var(--paper);border-radius:4px;transform:rotate(-6deg);font-size:18px;filter:url(#ink)}
.nav nav{display:flex;gap:22px;align-items:center;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.nav nav a{text-decoration:none}
.go{background:var(--ink);color:var(--paper);padding:10px 14px;display:inline-block}
.btn{display:inline-flex;align-items:center;gap:18px;text-decoration:none;background:var(--ink);color:var(--paper);font-family:var(--disp);font-size:22px;letter-spacing:.03em;text-transform:uppercase;padding:18px 24px;box-shadow:6px 6px 0 var(--red);transition:box-shadow .2s}
.btn b{font-family:var(--serif);font-weight:400}.btn:hover{box-shadow:10px 10px 0 var(--red)}.btn.red{background:var(--red);box-shadow:6px 6px 0 var(--ink)}
.hero{min-height:100svh;padding:110px clamp(16px,4vw,56px) 60px;display:grid;grid-template-columns:1fr minmax(260px,360px);grid-template-rows:auto 1fr auto;gap:20px;overflow:hidden}
.meta{grid-column:1/-1;display:flex;justify-content:space-between;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 0}
.ht{grid-column:1/2;font-weight:900;font-size:clamp(64px,13.5vw,220px);line-height:.86;letter-spacing:-.045em;align-self:center}
.ht .l{display:block;overflow:hidden;padding-bottom:.04em}.ht .l2{padding-left:8vw}.ht i{font-weight:400;font-style:italic}.ht em{color:var(--red);font-style:italic;font-weight:800}
.ht .w{display:inline-block}
.stamp{position:absolute;right:clamp(10px,24vw,380px);top:16vh;width:clamp(110px,14vw,190px);color:var(--red);opacity:.85;mix-blend-mode:multiply;transform:rotate(-14deg)}
.side{grid-column:2/3;align-self:end;display:flex;flex-direction:column;gap:28px}
.dropcap{font-size:19px;line-height:1.45}.dropcap::first-letter{float:left;font-size:4.2em;line-height:.8;padding:4px 8px 0 0;color:var(--red);font-weight:900}
.doodle{position:absolute;width:120px;color:var(--red)}.d1{right:clamp(200px,30vw,440px);bottom:22vh;transform:rotate(10deg)}
.scroll{grid-column:1/-1;align-self:end}
.marquee{background:var(--red);color:var(--paper);overflow:hidden;border-block:2px solid var(--ink);transform:rotate(-2deg) scale(1.05);margin:20px 0;position:relative;z-index:2}
.mq{white-space:nowrap;display:inline-block;font-family:var(--disp);font-size:clamp(34px,6vw,72px);text-transform:uppercase;padding:10px 0;animation:mq 26s linear infinite}@keyframes mq{to{transform:translateX(-50%)}}
.pin{height:100svh}.stage{height:100svh;display:grid;place-items:center;overflow:hidden;perspective:1400px}
.bigbg{position:absolute;font-weight:900;font-size:min(90vh,90vw);color:var(--paper2);line-height:1;user-select:none}
.env{position:relative;width:min(62vw,290px);aspect-ratio:280/400;transform-style:preserve-3d;filter:drop-shadow(14px 18px 0 rgba(26,18,16,.85))}
.env .body,.env .strip{position:absolute;left:0;width:100%}.env .body{top:0;height:100%;z-index:3}.env .strip{top:10%;height:15%;z-index:4;transform-origin:0% 50%}
.letter{position:absolute;left:8%;right:8%;top:14%;height:78%;background:#fbf4e4;border:1px solid var(--ink);z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink)}
.letter b{font-family:var(--disp);font-size:58px;color:var(--red);font-weight:400}
.caps{list-style:none;position:absolute;left:clamp(16px,5vw,70px);bottom:9vh;max-width:min(420px,88vw)}.caps li{position:absolute;bottom:0;opacity:0;font-size:14px;line-height:1.5;background:var(--paper);border:2px solid var(--ink);padding:12px 14px;text-transform:none;letter-spacing:0}.caps b{color:var(--red)}
.hpin{height:100svh;overflow:hidden;background:var(--ink);color:var(--paper)}.track{display:flex;height:100%;align-items:center;gap:5vw;padding:0 8vw;width:max-content}
.intro h2{font-weight:900;font-size:clamp(60px,10vw,150px);line-height:.88;letter-spacing:-.04em}.intro h2 i{color:var(--gold);font-weight:400}.intro p{color:var(--gold);margin-bottom:20px}
.act{position:relative;width:min(80vw,400px);height:min(66svh,500px);background:var(--paper);color:var(--ink);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 62%,12px 60%,0 58%)}
.act:nth-child(odd){transform:rotate(1.5deg);margin-top:8vh}.act:nth-child(even){transform:rotate(-2deg);margin-top:-6vh}
.act .no{position:absolute;top:10px;left:24px;font-family:var(--disp);font-size:130px;line-height:1;color:var(--red)}
.act h3{font-size:42px;font-weight:900;letter-spacing:-.03em;margin-bottom:12px}.act p{font-size:16px;line-height:1.5}
.ill{position:absolute;top:24px;right:20px;width:90px;color:var(--ink)}
.collage{display:grid;grid-template-columns:1fr 1fr;padding:18vh clamp(16px,4vw,56px)}
.sticky{position:sticky;top:18vh;align-self:start;perspective:900px}
.fold{font-weight:900;font-size:clamp(54px,9vw,140px);line-height:.88;letter-spacing:-.045em}.fold span{display:block;transform-origin:50% 0%;backface-visibility:hidden}.fold em{color:var(--red)}
.notes{display:flex;flex-direction:column;gap:12vh;padding-top:20vh}
.note{position:relative;background:#fbf4e4;border:2px solid var(--ink);padding:24px;max-width:360px;box-shadow:8px 8px 0 var(--ink)}
.note p{font-size:22px;line-height:1.35;margin-top:10px}.note b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(64px,9vw,120px);color:var(--red);line-height:1}
.n1{transform:rotate(-3deg)}.n2{transform:rotate(2deg);margin-left:12%}.n3{transform:rotate(-1deg);background:var(--red);color:var(--paper)}.n3 b{color:var(--paper)}.n4{transform:rotate(3deg);margin-left:20%}.n5{transform:rotate(-2deg)}
.tape:before{content:"";position:absolute;top:-14px;left:40%;width:90px;height:26px;background:rgba(217,162,58,.55);transform:rotate(-4deg)}
.final{min-height:100svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:48px;padding:12vh clamp(16px,4vw,56px) 40px;background:var(--red);color:var(--paper);perspective:900px}
.final .big{font-size:clamp(72px,17vw,280px)}.final .big i{font-weight:400;color:var(--ink)}.final .btn.red{background:var(--ink);box-shadow:8px 8px 0 var(--paper)}
.final footer{display:flex;gap:24px;flex-wrap:wrap;border-top:2px solid var(--paper);padding-top:14px;width:100%;margin-top:auto}
.cursor{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px;border-radius:50%;background:var(--red);mix-blend-mode:multiply;pointer-events:none;z-index:70;transition:width .2s,height .2s,margin .2s}.cursor.big{width:64px;height:64px;margin:-32px}
@media (max-width:760px){.nav nav a:not(.go){display:none}.hero{grid-template-columns:1fr}.side{grid-column:1}.stamp{right:12px;top:auto;bottom:34vh}.d1{display:none}.collage{grid-template-columns:1fr}.sticky{position:relative;top:0}.notes{padding-top:8vh;gap:6vh}.n2,.n4{margin-left:6%}.meta span:last-child{display:none}.cursor{display:none}}
@media (prefers-reduced-motion:reduce){.grain,.mq{animation:none}.caps li{position:static;opacity:1;margin-top:8px}.hpin{height:auto}.track{flex-direction:column;width:auto;padding:60px 20px;gap:30px}.act{margin:0!important}.stamp{transform:none}}
.ht i{margin-right:.12em}.caps{width:min(420px,88vw)}.caps li{width:100%}
@media (max-width:760px){.track{gap:14vw}.act:nth-child(odd){margin-top:4vh}.act:nth-child(even){margin-top:-4vh}}

.lang{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;border:1.5px solid var(--ink);padding:3px 6px;background:var(--paper)}
.lang button{all:unset;cursor:pointer;padding:1px 4px;letter-spacing:.06em}.lang button.on{background:var(--ink);color:var(--paper)}.lang button:focus-visible{outline:2px solid var(--red)}
.lang span{opacity:.4}
html.zh .ht{letter-spacing:-.02em;line-height:1.02;font-size:clamp(56px,11.5vw,190px)}
html.zh h2,html.zh .fold{letter-spacing:-.01em;line-height:1.06}
html.zh h3{letter-spacing:0}
html.zh .ht i,html.zh h2 i,html.zh .fold i{font-style:normal;font-weight:400}
html.zh .dropcap,html.zh .act p,html.zh .note p{line-height:1.75;letter-spacing:.02em}
html.zh .mono{letter-spacing:.12em}
.nav nav a.ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1.5px solid var(--ink);background:var(--paper);transition:background .2s,color .2s}.nav nav a.ico:hover{background:var(--ink);color:var(--paper)}
@media(max-width:520px){.nav nav{gap:8px}.nav nav a.ico{width:26px;height:26px}}
footer a.fl{display:inline-flex;align-items:center;gap:6px}

.nav nav a.tk{color:var(--red);font-weight:600}
.token{padding:120px clamp(16px,4vw,56px) 90px;border-top:3px double var(--ink);background:linear-gradient(var(--paper),var(--paper2))}
.tk-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 24px;border-bottom:2px solid var(--ink);padding-bottom:18px}
.tk-head .mono{grid-column:1/-1;color:var(--red)}
.token .fold{font-family:var(--disp);font-size:clamp(64px,12vw,180px);line-height:.9;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:0 .25em;align-items:baseline}
.token .fold .zhn{color:var(--red);filter:url(#ink)}.token .fold i{font-family:var(--serif);text-transform:none;font-weight:400;font-size:.55em}
.tick{font-family:var(--mono);font-weight:600;font-size:clamp(20px,3vw,34px);background:var(--red);color:var(--paper);padding:6px 14px;transform:rotate(-3deg);box-shadow:5px 5px 0 var(--ink)}
.tk-ca{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0;border:2px dashed var(--ink);padding:14px 18px;max-width:640px}
.tk-ca code{font-size:15px;padding:4px 10px;flex:1}.tk-ca button{background:var(--paper);border:2px solid var(--ink);padding:8px 14px;cursor:not-allowed;opacity:.6}
.plan{display:inline-block;border:2px solid var(--red);color:var(--red);padding:4px 10px;transform:rotate(-2deg);margin-bottom:18px}
.tk-mech ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border-top:1px solid var(--ink)}
.tk-mech li{padding:22px 18px 26px 0;border-bottom:1px solid var(--ink);display:flex;gap:14px}
.tk-mech li b{font-family:var(--disp);font-size:42px;color:var(--red);line-height:1}.tk-mech li p{font-size:19px;line-height:1.4}
.gold{color:var(--paper);background:var(--gold);padding:0 .25em}
.tk-dis{margin-top:28px;opacity:.75}
@media (max-width:720px){.tk-head{grid-template-columns:1fr}.tick{justify-self:start}.nav nav a.tk{display:none}}
.tk-ca.tr{max-width:900px}.tk-ca.tr code{word-break:break-all;font-size:13px}.tk-ca.tr button{cursor:pointer;opacity:1}.tk-ca.tr a{color:var(--red)}.tk-trn{flex-basis:100%;opacity:.75;text-transform:none}