*{box-sizing:border-box}html,body{margin:0}body{font-family:Arial,"Microsoft YaHei",sans-serif;background:#161f24;color:var(--ink)}main{height:100vh;height:var(--height,100vh);max-width:520px;margin:auto;position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);padding:14px 18px 16px;padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid currentColor;padding-bottom:10px;flex:none}header strong{font:italic 900 20px/1 Arial;letter-spacing:-1.7px}header strong span{color:var(--accent)}small{font:700 10px/1.3 Arial,sans-serif;letter-spacing:1.6px}.title{padding:14px 0 12px}.title small{color:var(--kicker,var(--accent))}h1{font-size:44px;font-size:clamp(34px,10vw,60px);letter-spacing:-.065em;line-height:.99;margin:7px 0 0}figure{position:relative;flex:1 1 0;min-height:0;margin:0;overflow:hidden}img{width:100%;height:100%;display:block;object-fit:cover}footer{flex:none;padding-top:12px}p{font-size:14px;line-height:1.55;margin:0 0 12px}a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;border-radius:7px;background:var(--button);color:var(--label);font-weight:bold;font-size:16px;padding:0 18px;min-height:48px}a b{font:normal 24px Arial}.v1{--paper:#f4fadf;--ink:#163e35;--accent:#d95c1c;--button:#164d39;--label:#fff} .v1 figure{margin:0 -18px;clip-path:polygon(0 3%,100% 0,100% 97%,0 100%)}.v1 h1 br{display:none}.v1 .title{padding:22px 0}.v1 footer{padding-top:18px}
.v2{--paper:#f7ecd9;--ink:#3e4736;--accent:#88704c;--button:#424e3a;--label:#fff6dd}.v2 main{padding-left:22px;padding-right:22px}.v2 .title{order:2;text-align:center}.v2 .title h1{font-family:Georgia,"SimSun",serif;font-size:38px;letter-spacing:.03em}.v2 .title br{display:none}.v2 figure{order:1;margin-top:14px;border:1px solid #c2ae8d;border-radius:45% 45% 4px 4px;background:#e8d4b6}.v2 figure img{object-position:47% center}.v2 footer{order:3;text-align:center;padding-top:0}.v2 a{border-radius:40px}
.v3{--paper:#fae0a5;--ink:#252c43;--accent:#ba361f;--button:#aa3120;--label:#fff1c5}.v3 main{padding:14px;border:7px solid #243147}.v3 header{border-bottom:3px solid}.v3 .title{display:flex;justify-content:space-between;align-items:end;flex-direction:row-reverse}.v3 h1{font-size:clamp(48px,14vw,80px);transform:skew(-7deg)}.v3 figure{border:3px solid #28314b}.v3 a{border-radius:0;box-shadow:4px 4px #263047}.v3 footer{padding-bottom:6px}
.v4{--paper:#241830;--ink:#fff5ea;--accent:#ff9757;--button:#ffa76f;--label:#34182e}.v4 figure{position:absolute;inset:0;top:0;bottom:0;left:0;right:0;z-index:-1}.v4 figure:after{content:'';position:absolute;inset:0;top:0;bottom:0;left:0;right:0;background:linear-gradient(#140f32bb,transparent 38%,transparent 54%,#1b0923 92%)}.v4 header{border:0}.v4 footer{margin-top:auto}.v4 h1{font-size:clamp(42px,13vw,74px)}.v4 img{object-position:52% center}.v4 p{max-width:290px}
.v5{--paper:#e1f3f2;--ink:#184458;--accent:#277597;--button:#215a72;--label:white}.v5 header{order:0}.v5 figure{order:1;margin:12px -18px 0;clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}.v5 .title{order:2;padding:4px 0 0}.v5 h1{font-family:Georgia,"SimSun",serif;letter-spacing:.04em}.v5 footer{order:3}.v5 a{border-radius:0}
@media(max-height:580px){main{padding-top:8px;padding-bottom:8px}header{padding-bottom:6px}.title,.v1 .title{padding:8px 0}footer,.v1 footer{padding-top:6px}p{font-size:12px;margin-bottom:6px}a{min-height:44px}}