:root{
    --paper:#fffaf0;
    --paper2:#fff4e2;
    --ink:#241c1a;
    --ink-soft:#5a4c46;
    --line:#241c1a;
    --red:#e0422f;
    --red-deep:#b92c1c;
    --yellow:#ffcf4a;
    --blue:#2f6fd0;
    --green:#2fa96b;
    --purple:#7a5cc4;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background-color:var(--paper);
    background-image:radial-gradient(rgba(36,28,26,.07) 1px, transparent 1px);
    background-size:14px 14px;
    color:var(--ink);
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }
  img{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  .wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }

  /* ---------- 顶部导航 ---------- */
  .topbar{
    position:sticky; top:0; z-index:500;
    background:rgba(255,250,240,.94);
    border-bottom:3px solid var(--line);
    backdrop-filter:blur(6px);
  }
  .topbar-inner{
    display:flex; align-items:center; gap:18px;
    max-width:1200px; margin:0 auto; padding:10px 20px;
  }
  .brand{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .brand img{ height:34px; width:auto; }
  .brand b{ font-size:17px; letter-spacing:1px; }
  .navlinks{ display:flex; gap:4px; flex:1; overflow:hidden; }
  .navlinks a{
    padding:6px 10px; font-size:14px; font-weight:600;
    border-radius:8px; white-space:nowrap; color:var(--ink-soft);
  }
  .navlinks a:hover{ background:var(--yellow); color:var(--ink); }
  .search{
    display:flex; align-items:center; gap:6px;
    border:2px solid var(--line); border-radius:20px;
    padding:4px 10px; background:#fff; flex-shrink:0;
  }
  .search input{
    border:none; outline:none; width:110px; font-size:13px;
    background:transparent; color:var(--ink);
  }
  .search span{ font-size:13px; color:var(--ink-soft); }
  .dl-top{
    flex-shrink:0; background:var(--red); color:#fff;
    font-weight:700; font-size:14px; padding:8px 16px;
    border-radius:20px; border:2px solid var(--line);
    box-shadow:3px 3px 0 var(--line);
  }
  .dl-top:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--line); }

  /* ---------- 首屏封面页 ---------- */
  .cover{
    position:relative; overflow:hidden;
    padding:44px 0 64px;
    background:
      repeating-linear-gradient(90deg, transparent 0 78px, rgba(36,28,26,.05) 78px 79px),
      linear-gradient(160deg,#fff7e6 0%,#ffe9c9 100%);
    border-bottom:3px solid var(--line);
  }
  .cover::after{
    content:""; position:absolute; right:0; top:0; bottom:0; width:16px;
    background:repeating-linear-gradient(180deg,var(--line) 0 8px,transparent 8px 16px);
    opacity:.25;
  }
  .cover-grid{
    display:grid; grid-template-columns:1.25fr .95fr; gap:40px; align-items:center;
  }
  .cover-eyebrow{
    display:inline-block; background:var(--ink); color:var(--yellow);
    font-size:12px; font-weight:700; letter-spacing:2px;
    padding:4px 12px; border-radius:4px; margin-bottom:16px;
    transform:rotate(-1.5deg);
  }
  .cover h1{
    font-size:clamp(28px,4vw,46px); line-height:1.25; font-weight:900;
    letter-spacing:1px;
  }
  .cover h1 em{
    font-style:normal; color:var(--red);
    background:linear-gradient(transparent 62%,var(--yellow) 62%);
  }
  .cover-sub{
    margin-top:18px; font-size:16px; color:var(--ink-soft); max-width:32em;
  }
  .cover-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
  .cover-tags span{
    font-size:13px; font-weight:700; padding:4px 12px;
    border:2px solid var(--line); border-radius:16px; background:#fff;
  }
  .cover-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:28px; }
  .btn-open{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--red); color:#fff; font-weight:800; font-size:17px;
    padding:14px 30px; border-radius:12px; border:3px solid var(--line);
    box-shadow:5px 5px 0 var(--line);
    transition:transform .15s, box-shadow .15s;
  }
  .btn-open:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--line); }
  .cover-note{ font-size:13px; color:var(--ink-soft); }
  .cover-note a{ border-bottom:1px dashed var(--ink-soft); }
  .cover-note a:hover{ color:var(--red-deep); border-color:var(--red-deep); }

  .sticker-field{ position:relative; min-height:400px; }
  .sticker{
    position:absolute; border:3px solid var(--line); border-radius:8px;
    overflow:hidden; background:#fff;
    box-shadow:5px 6px 0 rgba(36,28,26,.85);
    transition:transform .25s ease, box-shadow .25s ease;
    transform-origin:center bottom;
  }
  .sticker img{ width:100%; height:100%; object-fit:cover; }
  .sticker:hover{ transform:rotate(0deg) scale(1.07) translateY(-4px); box-shadow:6px 9px 0 rgba(36,28,26,.9); z-index:9; }
  .sticker.s1{ width:34%; left:2%;  top:6%;  transform:rotate(-6deg); }
  .sticker.s2{ width:38%; left:36%; top:22%; transform:rotate(3deg); }
  .sticker.s3{ width:30%; left:66%; top:2%;  transform:rotate(7deg); }
  .sticker.s4{ width:32%; left:18%; top:58%; transform:rotate(-3deg); }
  .sticker.s5{ width:30%; left:58%; top:62%; transform:rotate(5deg); }
  .sticker::after{
    content:""; display:block; padding-top:140%;
  }
  .sticker img{ position:absolute; inset:0; }

  /* ---------- 通用区块头 ---------- */
  .sec{ padding:56px 0; border-bottom:3px solid var(--line); }
  .sec:nth-of-type(even){ background:var(--paper2); }
  .sec-head{ margin-bottom:28px; }
  .sec-kicker{
    display:inline-block; font-size:12px; font-weight:800; letter-spacing:2px;
    color:#fff; background:var(--ink); padding:3px 10px; border-radius:4px;
    margin-bottom:10px;
  }
  .sec h2{
    font-size:clamp(22px,2.8vw,32px); font-weight:900; line-height:1.3;
  }
  .sec h2 span{ color:var(--red); }
  .sec-desc{ margin-top:8px; color:var(--ink-soft); font-size:15px; }

  /* ---------- 排班表 ---------- */
  .schedule{ border:3px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; }
  .sched-row{
    display:grid; grid-template-columns:120px 1fr; gap:0;
    border-bottom:2px dashed rgba(36,28,26,.25);
  }
  .sched-row:last-child{ border-bottom:none; }
  .sched-day{
    padding:16px 14px; font-weight:800; font-size:15px;
    background:var(--paper2); border-right:2px solid var(--line);
    display:flex; flex-direction:column; justify-content:center; gap:2px;
  }
  .sched-day small{ font-weight:600; font-size:11px; color:var(--ink-soft); letter-spacing:1px; }
  .sched-row.today .sched-day{ background:var(--yellow); }
  .sched-row.today{ animation:breathe 2.4s ease-in-out infinite; }
  @keyframes breathe{ 0%,100%{ box-shadow:inset 0 0 0 0 rgba(224,66,47,0); } 50%{ box-shadow:inset 0 0 0 4px rgba(224,66,47,.28); } }
  .sched-items{ display:flex; flex-wrap:wrap; gap:14px; padding:14px; }
  .mini{
    display:flex; gap:10px; align-items:center; width:calc(50% - 7px); min-width:210px;
  }
  .mini .thumb{
    width:52px; height:72px; flex-shrink:0; border:2px solid var(--line);
    border-radius:6px; overflow:hidden;
  }
  .mini .thumb img{ width:100%; height:100%; object-fit:cover; }
  .mini h3{ font-size:14px; line-height:1.35; }
  .mini .ep{
    display:inline-block; margin-top:4px; font-size:11px; font-weight:700;
    color:#fff; background:var(--red); padding:1px 8px; border-radius:10px;
  }
  .countdown{
    display:inline-block; margin-top:4px; font-size:11px; font-weight:700;
    color:var(--ink-soft); border:1px dashed var(--ink-soft); padding:1px 8px; border-radius:10px;
  }

  /* ---------- 月票榜 ---------- */
  .ticket-layout{ display:grid; grid-template-columns:1.6fr .9fr; gap:28px; }
  .rank-list{ display:flex; flex-direction:column; gap:10px; }
  .rank-item{
    display:flex; align-items:center; gap:14px;
    background:#fff; border:2px solid var(--line); border-radius:12px;
    padding:10px 14px;
  }
  .rank-item.top3{ border-width:3px; }
  .rank-item.top3::before{
    content:""; position:absolute;
  }
  .rank-item.r1{ background:linear-gradient(90deg,#fff6d8,#fff); }
  .rank-item.r2{ background:linear-gradient(90deg,#f3f3f5,#fff); }
  .rank-item.r3{ background:linear-gradient(90deg,#fdece1,#fff); }
  .rank-no{ font-size:26px; font-weight:900; font-style:italic; width:42px; text-align:center; color:var(--ink-soft); }
  .r1 .rank-no{ color:#c8971b; }
  .r2 .rank-no{ color:#8b8b93; }
  .r3 .rank-no{ color:#b9642f; }
  .rank-item .thumb{ width:44px; height:60px; border:2px solid var(--line); border-radius:5px; overflow:hidden; flex-shrink:0; }
  .rank-item .thumb img{ width:100%; height:100%; object-fit:cover; }
  .rank-info{ flex:1; min-width:0; }
  .rank-info h3{ font-size:15px; }
  .rank-meta{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
  .up{ color:var(--green); font-weight:700; }
  .vote{
    font-size:12px; font-weight:800; padding:5px 12px; border-radius:16px;
    background:var(--yellow); border:2px solid var(--line); cursor:pointer; flex-shrink:0;
  }
  .vote:active{ transform:scale(.94); }
  .ticket-aside{
    background:#fff; border:3px solid var(--line); border-radius:14px;
    padding:22px; align-self:start;
    box-shadow:6px 6px 0 rgba(36,28,26,.12);
  }
  .ticket-aside h3{ font-size:18px; margin-bottom:10px; }
  .ticket-aside p{ font-size:14px; color:var(--ink-soft); }
  .ticket-aside ul{ margin:14px 0 0 18px; font-size:14px; color:var(--ink-soft); }
  .ticket-aside li{ margin-bottom:6px; }

  /* ---------- 分镜墙 ---------- */
  .grid-comic{
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
    grid-auto-rows:150px;
  }
  .panel{
    border:3px solid var(--line); border-radius:10px; background:#fff;
    padding:14px; position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:space-between;
    transition:transform .18s, box-shadow .18s;
  }
  .panel:hover{ transform:translate(-2px,-3px); box-shadow:6px 7px 0 rgba(36,28,26,.2); }
  .panel .t{ font-size:16px; font-weight:900; display:flex; align-items:center; gap:6px; }
  .panel .t i{ font-style:normal; font-size:18px; }
  .panel .covers{ display:flex; gap:8px; }
  .panel .covers img{
    width:38px; height:52px; object-fit:cover; border:2px solid var(--line); border-radius:4px;
  }
  .panel.tall{ grid-row:span 2; }
  .panel.wide{ grid-column:span 2; }
  .panel.pA{ background:#fff3df; }
  .panel.pB{ background:#e9f2ff; }
  .panel.pC{ background:#ffe9e5; }
  .panel.pD{ background:#e8f7ee; }
  .panel.pE{ background:#f2ecff; }
  .panel.pF{ background:#fff8d6; }

  /* ---------- 独家首发 ---------- */
  .exclusive{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
  .excl-card{
    border:3px solid var(--line); border-radius:16px; background:#fff;
    padding:20px; box-shadow:7px 7px 0 rgba(36,28,26,.14);
  }
  .excl-main{ display:flex; gap:16px; }
  .excl-main img{
    width:110px; flex-shrink:0; border:2px solid var(--line); border-radius:8px;
  }
  .excl-main h3{ font-size:19px; margin-bottom:8px; }
  .excl-main p{ font-size:14px; color:var(--ink-soft); }
  .flip-count{
    display:flex; gap:8px; margin:16px 0;
  }
  .flip-count span{
    flex:1; text-align:center; background:var(--ink); color:var(--yellow);
    font-size:20px; font-weight:900; border-radius:6px; padding:8px 0;
    font-variant-numeric:tabular-nums;
  }
  .flip-count span small{ display:block; font-size:10px; color:#fff; opacity:.7; font-weight:600; }
  .btn-sub{
    display:inline-block; background:var(--ink); color:#fff; font-weight:800;
    font-size:14px; padding:10px 22px; border-radius:10px; border:2px solid var(--line);
  }
  .btn-sub:hover{ background:var(--red); }
  .excl-list{ display:flex; flex-direction:column; gap:10px; }
  .excl-item{
    display:flex; align-items:center; gap:12px;
    background:#fff; border:2px solid var(--line); border-radius:10px; padding:8px 12px;
  }
  .excl-item .thumb{ width:40px; height:56px; border:2px solid var(--line); border-radius:4px; overflow:hidden; flex-shrink:0; }
  .excl-item .thumb img{ width:100%; height:100%; object-fit:cover; }
  .excl-item h3{ font-size:14px; }
  .excl-item p{ font-size:12px; color:var(--ink-soft); }
  .creator-entry{
    margin-top:16px; font-size:13px; text-align:center; color:var(--ink-soft);
    border:2px dashed var(--ink-soft); border-radius:10px; padding:10px;
  }

  /* ---------- 动态观感 ---------- */
  .motion{ display:grid; grid-template-columns:1.1fr 1fr; gap:34px; align-items:center; }
  .motion-demo{
    border:3px solid var(--line); border-radius:14px; background:#fff;
    padding:18px; position:relative; overflow:hidden;
  }
  .frames{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .frame{
    border:2px solid var(--line); border-radius:8px; overflow:hidden; position:relative;
    aspect-ratio:3/4; background:#eee;
  }
  .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
  .frame.still img{ filter:grayscale(.55); }
  .motion-demo:hover .frame.moving img{ transform:scale(1.12) rotate(.6deg); }
  .wave{
    display:flex; align-items:flex-end; gap:3px; height:28px; margin-top:14px;
    padding:0 4px;
  }
  .wave i{
    display:block; width:4px; background:var(--red); border-radius:2px; height:6px;
    animation:wv 1.1s ease-in-out infinite;
  }
  .wave i:nth-child(2n){ animation-delay:.15s; background:var(--blue); }
  .wave i:nth-child(3n){ animation-delay:.3s; background:var(--purple); }
  .wave i:nth-child(4n){ animation-delay:.45s; background:var(--green); }
  @keyframes wv{ 0%,100%{ height:5px; } 50%{ height:26px; } }
  .motion-feats{ display:flex; flex-direction:column; gap:16px; }
  .feat{ display:flex; gap:14px; }
  .feat .ico{
    width:42px; height:42px; flex-shrink:0; border-radius:10px;
    background:var(--yellow); border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:16px;
  }
  .feat h3{ font-size:16px; margin-bottom:3px; }
  .feat p{ font-size:14px; color:var(--ink-soft); }

  /* ---------- 评论气泡 ---------- */
  .stats{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:26px; }
  .stat{
    flex:1; min-width:150px; background:#fff; border:3px solid var(--line);
    border-radius:12px; padding:14px; text-align:center;
  }
  .stat b{ display:block; font-size:26px; color:var(--red); font-weight:900; }
  .stat span{ font-size:12px; color:var(--ink-soft); }
  .bubble-wall{
    columns:3; column-gap:16px;
  }
  .bubble{
    break-inside:avoid; margin-bottom:16px; padding:14px 16px;
    border:2px solid var(--line); background:#fff;
    border-radius:16px; position:relative;
    font-size:14px;
  }
  .bubble.think{ border-radius:22px; border-style:dashed; background:#fffaf0; }
  .bubble.strong{ background:#fff2d4; border-radius:6px; border-left-width:8px; border-left-color:var(--red); }
  .bubble .who{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .bubble .who img{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line); object-fit:contain; background:#fff; }
  .bubble .who b{ font-size:13px; }
  .bubble .stars{ color:#e8a71b; font-size:12px; letter-spacing:1px; }
  .bubble p{ color:var(--ink-soft); }

  /* ---------- 下载区 ---------- */
  .qa-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:32px; }
  .qa{
    border:2px solid var(--line); border-radius:10px; background:#fff;
    padding:14px 16px;
  }
  .qa h3{ font-size:15px; margin-bottom:4px; }
  .qa p{ font-size:14px; color:var(--ink-soft); }
  .dl-box{
    border:3px solid var(--line); border-radius:16px; background:var(--paper2);
    padding:28px; text-align:center;
  }
  .dl-box h3{ font-size:20px; margin-bottom:6px; }
  .dl-box p{ font-size:14px; color:var(--ink-soft); margin-bottom:18px; }
  .dl-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
  .dl-btn{
    display:inline-flex; align-items:center; gap:8px;
    border:2px solid var(--line); border-radius:12px; padding:10px 20px;
    font-weight:800; font-size:14px; background:#fff;
    box-shadow:3px 3px 0 var(--line);
  }
  .dl-btn.primary{ background:var(--red); color:#fff; }
  .dl-btn:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--line); }

  /* ---------- 页脚 ---------- */
  footer{
    background:var(--ink); color:#d8cfc9; padding:40px 0 26px;
    font-size:13px; text-align:center;
  }
  footer .foot-brand{ font-weight:800; color:#fff; margin-bottom:8px; font-size:15px; }
  footer .foot-cols{
    display:flex; justify-content:center; gap:48px; flex-wrap:wrap;
    margin:22px 0; text-align:left;
  }
  .foot-col h4{ font-size:13px; color:#fff; margin-bottom:8px; letter-spacing:1px; }
  .foot-col a{ display:block; color:#a99e97; font-size:12px; line-height:1.9; }
  .foot-col a:hover{ color:var(--yellow); }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:16px; color:#8c827b; font-size:12px; }
  .foot-bottom a{ color:#8c827b; }
  .foot-bottom a:hover{ color:var(--yellow); }
  .foot-update{ margin-top:6px; font-size:11px; color:#756c66; }

  /* ---------- 响应式 ---------- */
  @media (max-width:1200px){
    .grid-comic{ grid-template-columns:repeat(4,1fr); }
  }
  @media (max-width:992px){
    .cover-grid{ grid-template-columns:1fr; gap:24px; }
    .sticker-field{ min-height:360px; }
    .navlinks{ display:none; }
    .ticket-layout{ grid-template-columns:1fr; }
    .exclusive{ grid-template-columns:1fr; }
    .motion{ grid-template-columns:1fr; }
    .bubble-wall{ columns:2; }
    .grid-comic{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:768px){
    .search{ display:none; }
    .topbar-inner{ gap:10px; padding:8px 14px; }
    .brand b{ font-size:15px; }
    .brand img{ height:28px; }
    .sec{ padding:40px 0; }
    .sched-row{ grid-template-columns:1fr; }
    .sched-day{
      border-right:none; border-bottom:2px solid var(--line);
      flex-direction:row; justify-content:flex-start; gap:8px; align-items:center;
    }
    .mini{ width:100%; }
    .grid-comic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
    .panel.wide{ grid-column:span 2; }
    .panel.tall{ grid-row:span 1; }
    .bubble-wall{ columns:1; }
    .excl-main{ flex-direction:row; }
    .countdown{ display:inline-block; }
    .cover h1{ font-size:26px; }
    .sticker-field{ min-height:300px; }
  }
  @media (max-width:480px){
    .cover{ padding:28px 0 40px; }
    .cover-cta{ gap:10px; }
    .btn-open{ width:100%; justify-content:center; }
    .dl-btns{ flex-direction:column; }
    .dl-btn{ justify-content:center; }
    .sticker-field{ min-height:270px; }
    .stats{ gap:10px; }
    .stat{ min-width:100px; }
    .flip-count span{ font-size:16px; }
  }