/* TangPlay preview — Muse baseline (mint bg, white rounded header, pill chips, white square-cover cards) + cute candy touches.
   Fonts: ZCOOL KuaiLe + Baloo 2 (OFL), subset & self-hosted; system fallback. */
@font-face{font-family:"TP Cute";src:url(/assets/fonts/zcool-sub.woff2) format("woff2");font-display:swap}
@font-face{font-family:"TP Round";src:url(/assets/fonts/baloo-sub.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--bg:#7ce8d8;--navy:#1a2b4a;--ink:#1a2b4a;--ink2:#5b6b85;--pink:#FF6B9D;--pinkS:#FFD9E6;--soft:#f0f4f8;
  --sh:0 4px 14px rgba(0,0,0,.08);--spring:cubic-bezier(.34,1.56,.64,1);
  --fh:"TP Round","Baloo 2","Nunito",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --fb:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif}
.lang-zh{--fh:"TP Cute","TP Round",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.5 var(--fb);background:var(--bg);
  background-image:radial-gradient(rgba(255,255,255,.35) 1.5px,transparent 1.7px);background-size:26px 26px;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:6px 10px;border-radius:10px}
.preview-bar{color:rgba(26,43,74,.7);font-size:11px;text-align:center;padding:4px 10px 2px}
/* header (Muse: white, rounded bottom, sticky, inset 12px) */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;margin:0 12px;padding:10px 12px 10px 10px;background:#fff;border-radius:0 0 24px 24px;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.logo{display:flex;align-items:center;gap:6px;min-width:0;flex:1}.logo svg{flex:0 0 auto;animation:bob 3.2s ease-in-out infinite}
.wm{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.wm b{font:800 22px "TP Round",var(--fh);letter-spacing:-.3px;background:linear-gradient(135deg,#0a3d62,#1e90ff);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.wm b .cn{font:400 17px "TP Cute",var(--fh);background:linear-gradient(135deg,#FF6B9D,#FF9EC4);-webkit-background-clip:text;background-clip:text}
.wm em{font-style:normal;font-size:10.5px;line-height:1.25;font-weight:700;color:var(--ink2);white-space:nowrap;margin-top:2px}
.top-r{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.code-btn{display:flex;align-items:center;gap:4px;border:0;background:var(--navy);color:#fff;border-radius:20px;padding:8px 11px;font:700 13px var(--fb);transition:transform .15s}
.langbtn{background:var(--soft);border-radius:20px;padding:8px 13px;font:800 13px var(--fb)}
.code-btn:active,.langbtn:active{transform:scale(.95)}
/* featured carousel */
.feat{padding:14px 0 0}
.track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 12px;scrollbar-width:none;scroll-behavior:smooth}
.track::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 86%;scroll-snap-align:center;background:#fff;border-radius:22px;box-shadow:var(--sh);overflow:hidden;display:grid;grid-template-columns:42% 1fr;min-height:168px}
.s-art{display:flex;align-items:center;justify-content:center;padding:6px}.s-art svg{width:100%;height:100%;max-height:170px}
.s-txt{padding:14px 14px 14px 6px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
.s-txt h2{margin:0;font:400 21px/1.15 var(--fh)}.lang-en .s-txt h2{font-weight:800;font-size:19px}
.s-txt p{margin:0;font-size:13px;color:var(--ink2)}
.s-txt .tags{display:flex;flex-wrap:wrap;gap:4px}.s-txt .tags i{font-style:normal;font-size:11px;font-weight:700;background:var(--soft);border-radius:999px;padding:1px 8px}
.dots{display:flex;justify-content:center;gap:6px}
.dot{width:8px;height:8px;border-radius:999px;border:0;background:rgba(255,255,255,.7);padding:0;transition:all .3s var(--spring)}.dot.on{width:22px;background:var(--navy)}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--pink);color:#fff;font:700 15px var(--fh);padding:8px 16px;box-shadow:0 3px 0 #E2457A;transition:transform .2s var(--spring)}
.lang-en .btn{font-weight:800}.btn.big{margin-top:3px}.btn .arr{transition:transform .3s var(--spring)}
.btn.ghost{background:#fff;color:var(--pink);box-shadow:0 3px 0 var(--pinkS);border:2px solid var(--pinkS)}
.btn:active{transform:translateY(2px) scale(.96);box-shadow:0 1px 0 #E2457A}
@media (hover:hover){.btn:hover{transform:scale(1.05)}.btn:hover .arr{transform:translateX(3px)}}
/* category chips (Muse: translucent white pills, active navy) */
.chips{display:flex;gap:8px;padding:10px 16px 4px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:5px;border:0;background:rgba(255,255,255,.7);border-radius:20px;padding:8px 15px;font:700 14px var(--fb);color:var(--navy);transition:transform .15s,background .2s}
.chip svg{color:var(--pink)}.chip.on{background:var(--navy);color:#fff}.chip.on svg{color:#FFB8D2}.chip:active{transform:scale(.95)}
/* grid (Muse: 2 / 3 / 4 columns, white cards, square cover, centered bold title) */
.sec{padding:10px 16px 16px;max-width:900px;margin:0 auto}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{position:relative;display:block;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--sh);transition:transform .15s;padding-bottom:10px}
.card:active{transform:scale(.96)}
@media (hover:hover){.card{transition:transform .3s var(--spring),box-shadow .3s}.card:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 10px 22px rgba(0,0,0,.12)}.card:hover .cov svg{animation:wiggle .6s var(--spring)}}
.cov{position:relative;aspect-ratio:1/1;overflow:hidden;background:#e8eef4}
.cov img{width:100%;height:100%;object-fit:cover}.cov svg{width:100%;height:100%;padding:6%}
.card .t{padding:9px 10px 0;font:400 15px/1.25 var(--fh);text-align:center}.lang-en .card .t{font-weight:800;font-size:14.5px}
.card .h{padding:2px 10px 0;font-size:11.5px;color:var(--ink2);text-align:center;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.badge{position:absolute;top:8px;left:8px;font:800 11px "TP Round",var(--fb);border-radius:999px;padding:2px 9px;color:#fff;background:var(--pink);z-index:2}
.badge.new{background:#FF5C8A}.badge.hot{background:#FFB020}.badge.soon{background:#8D9AB5}
.slide .badge{position:static}
.ptag{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:800;background:rgba(255,255,255,.92);color:var(--navy);border-radius:999px;padding:2px 8px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.card.is-soon .cov>img,.card.is-soon .cov>svg{filter:saturate(.7);opacity:.8}
.want{display:block;margin:8px auto 0;border:2px solid var(--pinkS);border-radius:999px;background:#fff;color:var(--pink);font:700 12.5px var(--fb);padding:4px 12px;transition:transform .2s var(--spring)}
.want.on{background:var(--pink);border-color:var(--pink);color:#fff}.want:active{transform:scale(.94)}.want.pop{animation:pop .45s var(--spring)}
.card.hide{display:none}
/* cover color backgrounds for SVG art */
.c-lav{background:linear-gradient(160deg,#EEE7FF,#C9B6FF)}.c-red{background:linear-gradient(160deg,#FFE7E7,#FFADAD)}.c-peach{background:linear-gradient(160deg,#FFF0E9,#FFC6B3)}
.c-pink{background:linear-gradient(160deg,#FFEAF2,#FFBCD5)}.c-mint{background:linear-gradient(160deg,#E6FBF6,#A7EADB)}.c-butter{background:linear-gradient(160deg,#FFF8DE,#FFE391)}.c-sky{background:linear-gradient(160deg,#E8F4FF,#B9DEFF)}
.slide.c-lav,.slide.c-red,.slide.c-peach,.slide.c-butter{background:#fff}.slide .s-art{border-radius:18px;margin:8px}
.slide.c-lav .s-art{background:linear-gradient(160deg,#EEE7FF,#C9B6FF)}.slide.c-red .s-art{background:linear-gradient(160deg,#FFE7E7,#FFADAD)}
.slide.c-peach .s-art{background:linear-gradient(160deg,#FFF0E9,#FFC6B3)}.slide.c-butter .s-art{background:linear-gradient(160deg,#FFF8DE,#FFE391)}
/* how-to strip */
.how-box{background:#fff;border-radius:22px;padding:12px;box-shadow:var(--sh);display:grid;gap:6px}
.phones{width:100%;max-width:300px;margin:0 auto;display:block;font-family:var(--fb)}.phones .dash{animation:dash 1.4s linear infinite}
.sh{font:400 19px var(--fh);margin:2px 2px 8px;display:flex;align-items:center;gap:7px}.lang-en .sh{font-weight:800}
.sh::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--pink);transform:rotate(45deg)}
.sh.sm{font-size:17px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.steps li{display:grid;grid-template-columns:30px 1fr;column-gap:9px;align-items:center;background:var(--soft);border-radius:14px;padding:7px 9px}
.steps .num{grid-row:span 2;width:30px;height:30px;border-radius:10px;background:var(--pink);color:#fff;font:800 15px "TP Round",var(--fb);display:flex;align-items:center;justify-content:center;transform:rotate(-6deg)}
.steps li:nth-child(2) .num{background:#9B7BFF;transform:rotate(5deg)}.steps li:nth-child(3) .num{background:#FFB020}
.steps b{font:400 15px var(--fh)}.lang-en .steps b{font-weight:800}.steps small{font-size:12px;color:var(--ink2)}
.howtags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}.howtags i{font-style:normal;font-weight:700;font-size:12px;background:#E3FAF5;color:#16806d;border-radius:999px;padding:3px 10px}
/* lists */
.lists{display:grid;gap:12px}
.list-card{background:#fff;border-radius:22px;padding:12px 12px 8px;box-shadow:var(--sh)}
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.rows a,.row-soon{display:flex;align-items:center;gap:10px;padding:5px;border-radius:14px;transition:background .2s}
.rows a:active{transform:scale(.97)}@media (hover:hover){.rows a:hover{background:var(--soft)}}
.rk{width:22px;height:22px;flex:0 0 22px;border-radius:8px;background:var(--soft);font:800 12px "TP Round",var(--fb);display:flex;align-items:center;justify-content:center}
.rows li:nth-child(1) .rk{background:var(--pink);color:#fff}.rows li:nth-child(2) .rk{background:#FF9EC4;color:#fff}.rows li:nth-child(3) .rk{background:#FFB020;color:#fff}
.ra{width:44px;height:44px;flex:0 0 44px;border-radius:12px;overflow:hidden}.ra img,.ra svg{width:100%;height:100%;object-fit:cover}
.rt{flex:1;min-width:0;display:flex;flex-direction:column}.rt b{font:400 15px var(--fh)}.lang-en .rt b{font-weight:800}.rt small{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.go{font-size:20px;color:#9aa6bd}.want.mini{margin:0;flex:0 0 auto}
.note{font-size:11px;color:var(--ink2);margin:6px 4px 4px}
/* photo wall: horizontal strip */
.sub{margin:-4px 2px 8px;font-size:12px;color:rgba(26,43,74,.75)}
.wall .sh{color:var(--navy)}
.wall-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;scrollbar-width:none}.wall-grid::-webkit-scrollbar{display:none}
.tile{position:relative;flex:0 0 40%;max-width:180px;scroll-snap-align:start;margin:0;border-radius:18px;overflow:hidden;border:3px solid #fff;box-shadow:var(--sh);aspect-ratio:3/4;background:#fff}
.tile img{width:100%;height:100%;object-fit:cover}
.stag{position:absolute;top:7px;left:7px;background:rgba(26,43,74,.72);color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:1px 7px}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 7px;background:linear-gradient(rgba(0,0,0,0),rgba(20,20,40,.62));color:#fff;font-size:11px;display:flex;flex-direction:column}
.tile figcaption b{font:400 12.5px var(--fh)}.lang-en .tile figcaption b{font-weight:800}
.tile.slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px;background:rgba(255,255,255,.75);border:3px dashed #fff;font-size:11.5px;color:var(--ink2);box-shadow:none}
/* footer */
.foot{text-align:center;color:rgba(26,43,74,.62);font-size:12px;padding:10px 16px 34px;line-height:1.8}
.f-top{display:flex;gap:8px;align-items:center;justify-content:center}.f-top>div{text-align:left}.f-top b{font:800 15px "TP Round",var(--fh);color:var(--navy)}.f-top p{margin:0}
.f-links{margin:8px 0 0;font-weight:700}.f-links a{color:var(--navy)}.f-links.small{font-weight:400;margin-top:2px}.f-co{margin:4px 0 0}
/* dialog */
dialog{border:0;border-radius:24px;padding:0;box-shadow:0 20px 60px rgba(26,43,74,.25);max-width:340px;width:calc(100% - 40px);color:var(--ink)}
dialog::backdrop{background:rgba(26,43,74,.35)}
.dlg{padding:20px;display:flex;flex-direction:column;gap:8px}.dlg h3{margin:0;font:400 20px var(--fh)}.dlg p{margin:0;font-size:13.5px;color:var(--ink2)}
.dlg input{border:2px solid #dbe3ee;border-radius:14px;padding:10px 12px;font:800 20px "TP Round",var(--fb);text-transform:uppercase;letter-spacing:.2em;text-align:center;color:var(--ink);outline:none}
.dlg input:focus{border-color:var(--navy)}.dlg-msg{color:var(--pink)!important;font-weight:700}
.dlg-b{display:flex;gap:8px;justify-content:center;margin-top:4px}
dialog[open]{animation:pop .35s var(--spring)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@keyframes wiggle{0%{transform:rotate(0)}30%{transform:rotate(-3deg) scale(1.04)}60%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes dash{to{stroke-dashoffset:-24}}
@keyframes tw{0%,100%{opacity:1}50%{opacity:.35}}.tw{animation:tw 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:370px){.code-btn span{display:none}.wm em{font-size:10px}}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}.slide{flex-basis:60%}.lists{grid-template-columns:1fr 1fr}.how-box{grid-template-columns:300px 1fr;align-items:center;gap:16px}.tile{flex-basis:22%}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}.top{max-width:900px;margin:0 auto}.track{padding-left:max(16px,calc((100vw - 900px)/2 + 16px));padding-right:max(16px,calc((100vw - 900px)/2 + 16px))}.slide{flex-basis:440px}
  .chips{max-width:900px;margin:0 auto}}