@font-face{font-family:"Nunito";src:url("../fonts/nunito-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-800.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --bg:#FBF6FD;
  --bg2:#FFFAF7;
  --card:#FFFFFF;
  --ink:#4A3A52;
  --ink2:#8B7C93;
  --ink3:#B4A6BE;
  --body:#54445E;
  --main:#A96FC9;
  --main-d:#8A54AC;
  --main-l:#F0E4F9;
  --pink:#F7A8C8;
  --pink-d:#E27BA8;
  --pink-l:#FDEBF3;
  --mint:#6FD4BC;
  --mint-d:#3FA890;
  --line:rgba(169,111,201,.14);
  --radius:22px;
  --shadow:0 18px 40px -26px rgba(169,111,201,.55);
  --ff:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ffn:"Nunito",var(--ff);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.85 var(--ff);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--main-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:800}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(251,246,253,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.top__in{max-width:1180px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{width:42px;height:42px;display:block;flex:none}
.brand__txt{font-size:19px;font-weight:800;letter-spacing:.5px;color:var(--ink);line-height:1.15}
.brand__txt i{font-style:normal;display:block;font-family:var(--ffn);font-size:10.5px;font-weight:600;
  letter-spacing:2.2px;color:var(--ink3);margin-top:2px}
.brand:hover{text-decoration:none}
.burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:13px;border:1px solid var(--line);
  background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;padding:0}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--main-d)}
.topnav{margin-left:auto;display:flex;align-items:center;gap:26px}
.topnav a{font-size:15px;font-weight:600;color:var(--ink2);padding:5px 0;border-bottom:2px solid transparent}
.topnav a:hover{color:var(--main-d);text-decoration:none}
.topnav a[aria-current="page"]{color:var(--main-d);border-bottom-color:var(--pink)}

/* ---------- buttons (bookmark ribbon) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 30px;
  border-radius:15px;background:linear-gradient(100deg,var(--main),var(--pink));color:#fff;font-size:16.5px;
  font-weight:800;letter-spacing:.6px;box-shadow:0 16px 30px -14px rgba(169,111,201,.85)}
.btn:hover{text-decoration:none;color:#fff;box-shadow:0 20px 34px -14px rgba(169,111,201,.95)}
.btn::after{content:"";position:absolute;left:50%;bottom:-9px;width:0;height:0;margin-left:-9px;
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:10px solid var(--pink);opacity:.8}
.btn--sm{padding:9px 17px;font-size:14px;border-radius:12px;letter-spacing:.3px}
.btn--sm::after{display:none}

/* ---------- seam divider (rendering language) ---------- */
.stitch{max-width:1132px;margin:0 auto;height:2px;
  background-image:repeating-linear-gradient(90deg,rgba(169,111,201,.42) 0 7px,transparent 7px 16px)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:54px 0 64px;
  background:
    radial-gradient(680px 420px at 88% 20%,rgba(247,168,200,.44),transparent 70%),
    radial-gradient(560px 380px at 6% 86%,rgba(111,212,188,.20),transparent 72%),
    linear-gradient(180deg,var(--bg) 0%,#FDF1F8 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(169,111,201,.055) 0 1px,transparent 1px 14px)}
.hero::after{content:"";position:absolute;right:-5%;top:-12%;width:460px;height:460px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(169,111,201,.30),transparent 68%);
  animation:glowBreath 9s ease-in-out infinite}
.petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.petal{position:absolute;top:0;width:15px;height:15px;border-radius:50% 0 50% 50%;opacity:0;
  background:linear-gradient(140deg,#FBCFE4,#F7A8C8);animation:petalDrift 12s linear infinite}
.petal:nth-child(1){left:7%}
.petal:nth-child(2){left:27%;animation-delay:2.6s;animation-duration:15s}
.petal:nth-child(3){left:50%;animation-delay:5.2s;animation-duration:13s}
.petal:nth-child(4){left:71%;animation-delay:1.5s;animation-duration:16s}
.petal:nth-child(5){left:91%;animation-delay:6.4s;animation-duration:14s}
@keyframes petalDrift{
  0%{transform:translate3d(0,-34px,0) rotate(0);opacity:0}
  8%{opacity:.72}
  88%{opacity:.5}
  100%{transform:translate3d(-58px,560px,0) rotate(240deg);opacity:0}
}
@keyframes glowBreath{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.86;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  .petal,.hero::after{animation:none}
  .petal{opacity:.35}
  html{scroll-behavior:auto}
}

.hero__in{position:relative;max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1fr .8fr;gap:54px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 17px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:13px;font-weight:700;letter-spacing:2px;color:var(--main-d);margin-bottom:20px}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none}
.hero h1{font-size:clamp(32px,4.4vw,50px);letter-spacing:1.5px}
.lead{margin-top:20px;font-size:17px;line-height:1.95;color:var(--body)}
.hero .lead{max-width:33em}
.hero__cta{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cta-note{font-size:13.5px;color:var(--ink2)}
.hero__shot{position:relative;margin:0;width:100%;max-width:340px;margin-left:auto;margin-right:auto}
.hero__shot .frame{position:absolute;left:-16px;right:18px;top:22px;bottom:-22px;border-radius:30px;
  background:linear-gradient(150deg,rgba(169,111,201,.24),rgba(111,212,188,.24))}
.hero__shot img{position:relative;width:100%;max-width:340px;height:auto;border-radius:26px;
  box-shadow:0 32px 62px -30px rgba(110,60,140,.52);margin:0 auto}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;position:relative}
.fact{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:18px;padding:20px 22px;
  box-shadow:var(--shadow)}
.fact b{display:block;font-size:15.5px;color:var(--ink)}
.fact p{margin:8px 0 0;font-size:14px;color:var(--ink2);line-height:1.7}

/* ---------- section shell ---------- */
.sec{padding:62px 0}
.sec--alt{background:var(--bg2)}
.head{margin-bottom:32px}
.h2{font-size:clamp(23px,2.5vw,29px);display:flex;align-items:center;padding-bottom:15px;position:relative;letter-spacing:.5px}
.h2::after{content:"";position:absolute;left:0;bottom:0;width:76px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--main),var(--mint))}
.seal{width:15px;height:15px;border:2px solid var(--main);border-radius:50%;position:relative;
  margin-right:12px;flex:none}
.seal::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--mint)}
.sub{margin-top:16px;font-size:15.5px;color:var(--ink2);max-width:58em}

/* ---------- editor picks (doubles as issue index) ---------- */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:24px}
.pick{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px 26px;box-shadow:var(--shadow)}
.pick__no{position:absolute;right:24px;top:18px;font-family:var(--ffn);font-weight:800;font-size:38px;
  line-height:1;color:var(--main-l)}
.pick__kick{font-size:12.5px;font-weight:700;letter-spacing:1.6px;color:var(--main-d)}
.pick h3{font-size:18.5px;margin-top:12px}
.pick p{margin:14px 0 0;font-size:15px;color:var(--body)}
.pick__for{margin-top:18px;display:inline-block;font-size:13px;color:var(--mint-d);
  background:#EAF8F4;border-radius:10px;padding:8px 13px}
.pick__by{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.pick__by i{width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--main),var(--pink))}
.pick__by span{font-size:13px;color:var(--ink3)}

/* ---------- magazine notes (main + marginalia) ---------- */
.notes{display:grid;grid-template-columns:1.9fr 1fr;gap:44px;align-items:start}
.note{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 34px;box-shadow:var(--shadow)}
.note+.note{margin-top:26px}
.note__kick{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:1.6px;color:var(--main-d)}
.note__kick b{font-family:var(--ffn);font-weight:800;font-size:13.5px;letter-spacing:0;color:var(--main)}
.note h3{font-size:20.5px;margin-top:13px}
.note p{margin-top:15px;font-size:15.5px;color:var(--body)}
.note a{font-weight:700;border-bottom:2px solid var(--pink-l)}
.note a:hover{border-bottom-color:var(--pink)}
.side{position:sticky;top:96px;display:grid;gap:18px}
.side__card{background:linear-gradient(160deg,#fff,#FDF3F9);border:1px solid var(--line);
  border-radius:18px;padding:26px 22px;box-shadow:var(--shadow)}
.side__card h4{font-size:15px;color:var(--main-d);letter-spacing:.5px}
.side__card p{margin:12px 0 0;font-size:14.5px;color:var(--body)}
.side__card em{display:block;margin-top:12px;font-style:normal;font-family:var(--ffn);font-weight:800;
  font-size:32px;line-height:1;color:var(--main)}
.side__links{display:grid}
.side__links a{display:block;padding:12px 0;font-size:14.5px;font-weight:700;
  border-bottom:1px dashed var(--line)}
.side__links a:last-child{border-bottom:0}

/* ---------- preview shots ---------- */
.shots{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.shot{margin:0;background:var(--card);border:1px solid var(--line);border-radius:17px;padding:10px;
  box-shadow:var(--shadow)}
.shot img{width:100%;height:auto;border-radius:11px}
.shot__cap{margin:12px 3px 3px;font-size:12.5px;line-height:1.65;color:var(--ink2)}

/* ---------- steps ---------- */
.steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps li b{width:30px;height:30px;border-radius:50%;flex:none;background:var(--main-l);color:var(--main-d);
  font-family:var(--ffn);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.steps li span{font-size:15px;color:var(--body)}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:collapse;margin-top:16px;font-size:14.5px}
.cmp th,.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp th{color:var(--main-d);font-weight:700;background:#FCF6FE}
.cmp tr:last-child td{border-bottom:0}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:0 22px;
  box-shadow:var(--shadow);align-self:start}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-size:15.5px;font-weight:700;
  display:flex;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--ffn);font-weight:800;color:var(--main);flex:none;line-height:1.7}
.faq details[open] summary::before{color:var(--mint-d)}
.faq p{margin:0;padding:0 0 20px 28px;font-size:15px;color:var(--body)}

/* ---------- voices ---------- */
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:22px}
.voice{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow)}
.voice__who{font-size:13px;font-weight:700;color:var(--main-d)}
.voice__txt{margin-top:12px;font-size:15px;color:var(--body)}
.voice__star{margin-top:15px;font-family:var(--ffn);font-size:13px;letter-spacing:2px;color:#EFA93C}

/* ---------- page nav cards ---------- */
.pagenav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.pagenav a{display:block;background:#fff;border:1px solid var(--line);border-radius:19px;padding:26px 24px;
  box-shadow:var(--shadow)}
.pagenav a:hover{text-decoration:none}
.pagenav strong{display:block;font-size:16.5px;color:var(--ink)}
.pagenav span{display:block;margin-top:9px;font-size:14px;color:var(--ink2)}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;overflow:hidden;padding:50px 0 48px;
  background:linear-gradient(180deg,var(--bg),#FDF1F8)}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(169,111,201,.055) 0 1px,transparent 1px 14px)}
.page-hero__in{position:relative;max-width:1180px;margin:0 auto;padding:0 24px}
.crumb{font-size:13px;color:var(--ink3);margin-bottom:18px}
.page-hero h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:1px}
.page-hero .lead{font-size:16.5px;max-width:42em}
.page-hero .btn{margin-top:28px}

/* ---------- devices ---------- */
.devs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
.dev{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 22px;box-shadow:var(--shadow)}
.dev h4{font-size:15.5px;color:var(--main-d)}
.dev p{margin:10px 0 0;font-size:14.5px;color:var(--body)}

/* ---------- cta ---------- */
.cta{position:relative;overflow:hidden;padding:68px 0;text-align:center;
  background:linear-gradient(160deg,#FCEFF8,#F1E8FB 58%,#E9F8F4)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(169,111,201,.05) 0 1px,transparent 1px 14px)}
.cta__in{position:relative;max-width:1180px;margin:0 auto;padding:0 24px}
.cta .h2{justify-content:center}
.cta .h2::after{left:50%;margin-left:-38px}
.cta .sub{margin-left:auto;margin-right:auto;max-width:44em}
.cta .btn{margin-top:32px}

/* ---------- footer ---------- */
.foot{background:#fff;border-top:1px solid var(--line);padding:44px 0 40px}
.foot__in{max-width:1180px;margin:0 auto;padding:0 24px}
.foot__top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot__mark{width:38px;height:38px;flex:none}
.foot__name{font-size:16.5px;font-weight:800}
.foot__nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.foot__nav a{font-size:14px;color:var(--ink2)}
.foot__note{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line);
  font-size:13.5px;line-height:1.9;color:var(--ink2)}
.foot__cr{margin-top:12px;font-size:13px;color:var(--ink3)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{padding:40px 0 50px}
  .hero__in{grid-template-columns:1fr;gap:40px}
  .hero__shot{max-width:340px;margin:0 auto}
  .facts{grid-template-columns:1fr;gap:12px;margin-top:34px}
  .notes{grid-template-columns:1fr;gap:26px}
  .side{position:static;grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:repeat(3,1fr)}
  .faq{grid-template-columns:1fr}
  .pagenav{grid-template-columns:1fr}
  .devs{grid-template-columns:1fr}
  .sec{padding:48px 0}
  .burger{display:flex}
  .topnav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;
    gap:0;margin:0;background:#fff;border-bottom:1px solid var(--line);padding:6px 24px 16px;
    box-shadow:0 18px 30px -22px rgba(110,60,140,.5)}
  .burger[aria-expanded="true"] ~ .topnav{display:flex}
  .topnav a{padding:14px 0;width:100%;border-bottom:1px dashed var(--line)}
  .topnav a:last-child{border-bottom:0}
  .topnav a[aria-current="page"]{border-bottom-style:solid}
}
@media (max-width:620px){
  .wrap,.top__in,.hero__in,.page-hero__in,.cta__in,.foot__in{padding-left:18px;padding-right:18px}
  .brand__mark{width:36px;height:36px}
  .brand__txt{font-size:17px}
  .brand__txt i{display:none}
  .top .btn--sm{padding:8px 13px;font-size:13px;border-radius:11px}
  .shots{grid-template-columns:repeat(2,1fr);gap:12px}
  .side{grid-template-columns:1fr}
  .note{padding:24px 20px}
  .pick{padding:26px 20px 22px}
  .cta{padding:50px 0}
  .foot__nav{margin-left:0;width:100%}
  .cmp th,.cmp td{padding:10px 9px;font-size:13.5px}
}