:root{
    --paper:#FDFCF9;
    --ink:#1a1a1a;
    --line:#333;
    --blue:#2f6bff;
    --pink:#ff7aa2;
    --cyan:#28d6c8;
    --muted:#666;
    --cream:#fbf6ea;
    --sky:#eef4fb;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    background-color:var(--paper);
    background-image:radial-gradient(#e8e6e0 0.7px, transparent 0.7px);
    background-size:7px 7px;
    color:var(--ink);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;}

  /* ---------- header ---------- */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(253,252,249,.94);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(6px);
  }
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;max-width:1180px;margin:0 auto;}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:1px;flex-shrink:0;}
  .brand img{height:34px;width:auto;border-radius:8px;border:1.5px solid var(--line);background:#fff;padding:2px;}
  .nav-toggle{display:none;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:6px 10px;font-size:16px;cursor:pointer;}
  .main-nav ul{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;font-size:14px;}
  .main-nav a{position:relative;padding:2px 0;color:#2a2a2a;}
  .main-nav a:hover{color:var(--blue);}
  .main-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--pink);transition:width .25s;}
  .main-nav a:hover::after{width:100%;}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:60px 0 70px;overflow:hidden;}
  .hero::before{
    content:"";position:absolute;left:-40px;top:20px;width:220px;height:160px;
    background:radial-gradient(circle,#cfe0ff 0 1.6px,transparent 1.8px);
    background-size:12px 12px;opacity:.55;pointer-events:none;
  }
  .hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
  .hero-tag{
    display:inline-block;background:#fff;border:1.5px solid var(--line);border-radius:999px;
    padding:4px 14px;font-size:13px;font-weight:700;color:var(--blue);
    transform:rotate(-1.5deg);margin-bottom:18px;
  }
  .hero h1{
    font-size:clamp(34px,5.4vw,62px);line-height:1.15;font-weight:900;letter-spacing:2px;
    color:#111;text-shadow:4px 4px 0 rgba(47,107,255,.22),8px 8px 0 rgba(255,122,162,.18);
    margin-bottom:18px;
  }
  .hero h1 .accent-blue{color:var(--blue);}
  .hero h1 .accent-pink{color:var(--pink);}
  .hero-lead{font-size:16px;color:#3a3a3a;max-width:34em;margin-bottom:22px;}
  .hero-points{display:flex;flex-wrap:wrap;gap:10px 12px;margin-bottom:28px;list-style:none;font-size:14px;}
  .hero-points li{background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 12px;font-weight:600;}
  .hero-points li::before{content:"✦ ";color:var(--cyan);}

  .btn-download{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--blue);color:#fff;font-weight:800;font-size:17px;
    padding:14px 30px;border:2px solid var(--line);border-radius:22px 22px 22px 4px;
    box-shadow:4px 4px 0 var(--ink);
    transition:transform .18s,box-shadow .18s;
  }
  .btn-download:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--pink);}
  .btn-download:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
  .hero-note{font-size:13px;color:var(--muted);margin-top:12px;}

  .hero-visual{position:relative;}
  .hero-visual .frame{
    border:2px solid var(--line);border-radius:10px;background:#fff;padding:10px;
    box-shadow:8px 8px 0 rgba(47,107,255,.35);
    transform:rotate(1.5deg);
  }
  .hero-visual .frame img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;border:1px solid var(--line);}
  .boom{
    position:absolute;right:-6px;top:-18px;font-weight:900;font-size:20px;color:#fff;
    background:var(--pink);border:2px solid var(--line);border-radius:14px;
    padding:2px 14px;transform:rotate(8deg);letter-spacing:1px;
  }
  .small-frame{
    position:absolute;left:-24px;bottom:-26px;width:44%;border:2px solid var(--line);
    border-radius:8px;background:#fff;padding:6px;box-shadow:5px 5px 0 rgba(40,214,200,.4);
    transform:rotate(-4deg);
  }
  .small-frame img{aspect-ratio:3/4;object-fit:cover;border-radius:3px;}

  /* ---------- section base ---------- */
  section{padding:64px 0;}
  .sec-head{margin-bottom:36px;}
  .eyebrow{
    font-family:"Comic Sans MS","Segoe Print",cursive;
    font-size:15px;font-weight:700;color:var(--pink);letter-spacing:1px;display:inline-block;
    transform:rotate(-1deg);margin-bottom:6px;
  }
  .sec-head h2{font-size:clamp(24px,3.4vw,36px);font-weight:900;letter-spacing:1px;}
  .sec-head p{color:var(--muted);max-width:40em;margin-top:8px;font-size:15px;}

  /* ---------- masonry explore ---------- */
  .masonry{
    columns:3;column-gap:22px;
  }
  .card{
    break-inside:avoid;margin:0 0 22px;background:#fff;border:1px solid var(--line);
    border-radius:4px;padding:9px;position:relative;
    box-shadow:3px 3px 0 rgba(0,0,0,.06);
    transition:transform .22s ease,box-shadow .22s ease;
  }
  .card:hover{transform:rotate(-1.5deg) translateY(-4px);box-shadow:6px 8px 0 rgba(47,107,255,.28);}
  .card .cover{
    width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line);border-radius:2px;background:#eee;
  }
  .card .card-label{font-size:13px;font-weight:700;padding:8px 2px 2px;display:flex;justify-content:space-between;align-items:center;gap:8px;}
  .card .card-label small{font-weight:500;color:var(--muted);font-size:12px;flex-shrink:0;}
  .card .sfx{
    position:absolute;top:-10px;right:-6px;background:var(--cyan);color:#08343a;
    border:1.5px solid var(--line);border-radius:10px;font-size:11px;font-weight:900;
    padding:1px 8px;transform:rotate(6deg);letter-spacing:.5px;
  }
  .card:nth-child(3n+2) .sfx{background:var(--pink);color:#fff;}

  /* ---------- features ---------- */
  .features{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  .feature-card{
    background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px 24px;
    position:relative;box-shadow:4px 4px 0 rgba(0,0,0,.05);
  }
  .feature-card .icon{
    width:52px;height:52px;border:1.5px solid var(--line);border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;
    background:var(--sky);
  }
  .feature-card:nth-child(2) .icon{background:#ffeef4;}
  .feature-card:nth-child(3) .icon{background:#e9fbf8;}
  .feature-card:nth-child(4) .icon{background:#fdf7e4;}
  .feature-card h3{font-size:19px;font-weight:800;margin-bottom:8px;}
  .feature-card p{font-size:14.5px;color:#444;}
  .feature-num{
    position:absolute;right:16px;top:12px;font-weight:900;font-size:15px;
    color:#ccc;letter-spacing:1px;
  }

  /* ---------- advantages ---------- */
  .adv{background:var(--sky);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .adv-list{display:grid;gap:20px;}
  .adv-item{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center;}
  .adv-bubble{
    position:relative;background:#fff;border:1.5px solid var(--line);border-radius:16px;
    padding:12px 18px;font-weight:800;font-size:16px;text-align:center;
    box-shadow:4px 4px 0 rgba(47,107,255,.2);
  }
  .adv-bubble::after{
    content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
    width:14px;height:14px;background:#fff;border-right:1.5px solid var(--line);
    border-top:1.5px solid var(--line);rotate:45deg;
  }
  .adv-item:nth-child(even) .adv-bubble{box-shadow:4px 4px 0 rgba(255,122,162,.28);}
  .adv-text{font-size:15px;color:#333;}

  /* ---------- notebook rankings ---------- */
  .notebook-wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px;}
  .notebook{
    background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px 22px;
    background-image:repeating-linear-gradient(to bottom,transparent 0 33px,#e7e6e1 33px 34px);
    box-shadow:5px 5px 0 rgba(0,0,0,.05);
  }
  .notebook h2,.notebook h3{font-size:20px;font-weight:900;margin-bottom:14px;display:inline-block;border-bottom:2px solid var(--pink);padding-bottom:2px;}
  .rank-list{list-style:none;}
  .rank-list li{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14.5px;min-height:34px;}
  .rank-no{
    flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:14px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  }
  .r1 .rank-no{background:var(--pink);color:#fff;border-radius:48% 52% 55% 45%;transform:rotate(-6deg);}
  .r2 .rank-no{background:var(--blue);color:#fff;border-radius:52% 48% 45% 55%;transform:rotate(5deg);}
  .r3 .rank-no{background:var(--cyan);color:#08343a;border-radius:50% 50% 47% 53%;transform:rotate(-4deg);}
  .rank-name{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .trend{font-size:12px;color:#2e9e57;flex-shrink:0;}
  .trend.down{color:#d24a4a;}
  .status{font-size:12px;color:var(--muted);flex-shrink:0;}

  /* ---------- comments ---------- */
  .comments{border-top:1px solid var(--line);}
  .comment-list{display:grid;gap:20px;max-width:820px;}
  .comment{display:flex;gap:14px;align-items:flex-start;}
  .avatar{
    width:46px;height:46px;flex-shrink:0;border:2px solid var(--line);border-radius:50%;
    background:#fff;padding:2px;overflow:hidden;
  }
  .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
  .bubble{
    background:#fff;border:1.5px solid var(--line);border-radius:14px 14px 14px 4px;
    padding:12px 16px;font-size:14.5px;box-shadow:3px 3px 0 rgba(0,0,0,.05);max-width:100%;
  }
  .bubble strong{display:block;font-size:13px;color:var(--blue);margin-bottom:2px;}

  /* ---------- faq ---------- */
  .faq{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .faq-list{max-width:820px;display:grid;gap:12px;}
  .faq-item{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:3px 3px 0 rgba(0,0,0,.04);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    padding:16px 18px;font-size:15.5px;font-weight:800;color:var(--ink);
    display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:inherit;
  }
  .faq-q .mark{color:var(--pink);font-size:18px;transition:transform .25s;flex-shrink:0;}
  .faq-item.open .faq-q .mark{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;background:linear-gradient(#fff,#fbfaf6);}
  .faq-a p{padding:0 18px 16px;font-size:14.5px;color:#444;border-top:1px dashed #ddd;padding-top:12px;margin:0 18px 16px;}

  /* ---------- bookmark download ---------- */
  .bookmark{
    position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
    max-width:760px;margin:0 auto;padding:38px 28px 34px;text-align:center;
    box-shadow:8px 8px 0 rgba(40,214,200,.28);
  }
  .bookmark::before{
    content:"";position:absolute;left:50%;top:-22px;transform:translateX(-50%) rotate(45deg);
    width:28px;height:28px;background:var(--blue);border:2px solid var(--line);border-radius:50%;
  }
  .bookmark h2{font-size:clamp(22px,3vw,30px);font-weight:900;margin-bottom:10px;}
  .bookmark > p{color:var(--muted);font-size:15px;margin-bottom:24px;}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;text-align:left;list-style:none;}
  .steps li{border:1px solid var(--line);border-radius:8px;padding:14px;background:var(--paper);font-size:14px;}
  .steps li b{display:block;color:var(--pink);font-size:13px;margin-bottom:4px;}
  .dl-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;}

  /* ---------- footer ---------- */
  .site-footer{border-top:1px solid var(--line);background:var(--paper);padding:34px 0 30px;}
  .footer-inner{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);}
  .footer-brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);}
  .footer-brand img{height:26px;width:auto;border-radius:6px;}
  .footer-inner time{font-size:12px;color:#999;}

  /* ---------- baidu modal ---------- */
  .baidu-mask{
    display:none;position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:200;
    align-items:center;justify-content:center;padding:20px;
  }
  .baidu-mask.show{display:flex;}
  .baidu-box{
    background:#fff;border:2px solid var(--line);border-radius:12px;max-width:400px;width:100%;
    padding:26px 22px;text-align:center;box-shadow:8px 8px 0 var(--pink);
  }
  .baidu-box h3{font-size:19px;margin-bottom:8px;}
  .baidu-box p{font-size:14px;color:#555;margin-bottom:14px;}
  .copy-link{
    display:flex;gap:8px;align-items:center;justify-content:center;margin-bottom:14px;
  }
  .copy-link input{
    flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13px;
    background:var(--paper);color:#333;font-family:inherit;
  }
  .copy-link button{
    border:1.5px solid var(--line);background:var(--blue);color:#fff;border-radius:8px;
    padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0;
  }
  .baidu-close{
    border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 22px;
    font-size:14px;cursor:pointer;font-family:inherit;font-weight:700;
  }

  /* ---------- responsive ---------- */
  @media (max-width:1024px){
    .hero-inner{grid-template-columns:1fr;gap:34px;}
    .hero-visual{max-width:420px;margin:0 auto;width:100%;}
    .masonry{columns:2;}
    .adv-item{grid-template-columns:240px 1fr;gap:18px;}
    .notebook-wrap{grid-template-columns:1fr;}
  }
  @media (max-width:768px){
    section{padding:46px 0;}
    .nav-toggle{display:block;}
    .main-nav{
      position:absolute;left:0;right:0;top:100%;background:var(--paper);
      border-bottom:1px solid var(--line);max-height:0;overflow:hidden;
      transition:max-height .3s ease;
    }
    .main-nav.open{max-height:420px;}
    .main-nav ul{flex-direction:column;gap:0;padding:8px 20px 16px;font-size:15px;}
    .main-nav li{border-bottom:1px dashed #ddd;}
    .main-nav a{display:block;padding:11px 0;}
    .site-header{position:relative;}
    .masonry{columns:1;}
    .feature-grid{grid-template-columns:1fr;}
    .adv-item{grid-template-columns:1fr;gap:10px;}
    .adv-bubble::after{right:auto;left:24px;top:auto;bottom:-8px;transform:rotate(135deg);}
    .steps{grid-template-columns:1fr;}
    .hero-visual .small-frame{left:-10px;bottom:-18px;width:40%;}
    .hero h1{text-shadow:3px 3px 0 rgba(47,107,255,.2),5px 5px 0 rgba(255,122,162,.18);}
    .footer-inner{flex-direction:column;align-items:flex-start;}
  }