:root{--k:#111;--w:#fff;--paper:#f7f5ef;--y:#ffd400;--r:#e8322b;--g:#6d6d6d;--g2:#d9d6cc;--b:5px;--font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;--heavy:"Arial Black","PingFang SC","Microsoft YaHei",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.mg{margin:0;font-family:var(--font);font-size:16px;line-height:1.75;color:var(--k);background:var(--paper);background-image:radial-gradient(rgba(0,0,0,.07) 1.2px,transparent 1.6px);background-size:10px 10px;overflow-x:hidden}
:where(.mg) a{color:inherit;text-decoration:none}
:where(.mg) img{display:block;max-width:100%;height:auto}
.mg h1,.mg h2,.mg h3{margin:0;font-weight:900;line-height:1.25;color:var(--k)}
.mg-grid{max-width:1260px;margin:0 auto;padding-left:24px;padding-right:24px}
/* strip */
.mg-strip{background:var(--y);border-bottom:var(--b) solid var(--k);position:sticky;top:0;z-index:30}
.mg-strip__row{display:flex;align-items:center;gap:20px;min-height:72px}
.mg-badge{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 8px;background:var(--k);color:var(--y);font-family:var(--heavy);font-size:19px;font-weight:900;transform:skew(-8deg);box-shadow:4px 4px 0 var(--r)}
.mg-badge>*{transform:skew(8deg)}
.mg-badge svg{flex:none}
.mg-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.mg-tabs a{padding:8px 14px;font-weight:900;font-size:15px;border:3px solid transparent;transition:background .15s,color .15s}
.mg-tabs a:hover,.mg-tabs a[aria-current]{background:var(--k);color:var(--y);border-color:var(--k);transform:rotate(-2deg)}
.mg-strip__btn{display:none;margin-left:auto;min-height:44px;padding:0 18px;border:3px solid var(--k);background:var(--w);font:inherit;font-weight:900;font-size:15px;box-shadow:3px 3px 0 var(--k);cursor:pointer}
/* pow buttons */
.mg-pow{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;color:var(--k);border:var(--b) solid var(--k);font-weight:900;font-size:18px;letter-spacing:.06em;box-shadow:6px 6px 0 var(--k);transition:transform .12s,box-shadow .12s}
.mg-pow:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--k)}
.mg-pow--yel{background:var(--y)}
.mg-pow--white{background:var(--w)}
.mg-pow--red{background:var(--r);color:var(--w)}
.mg-say{position:relative;display:inline-block;margin:0 0 20px;padding:8px 18px;background:var(--w);border:4px solid var(--k);border-radius:50% 46% 52% 44%/60% 50% 50% 40%;font-weight:900}
.mg-say::after{content:"";position:absolute;left:22px;bottom:-16px;border:10px solid transparent;border-top:14px solid var(--k);border-left:4px solid transparent}
/* panels */
.mg-panel{border:var(--b) solid var(--k);background:var(--w);overflow:hidden}
.mg-panel img{width:100%;height:100%;object-fit:cover}
.mg-page{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:16px;padding-top:28px;padding-bottom:56px}
.mg-panel--art{grid-row:1/3;min-height:520px;transform:rotate(-.6deg)}
.mg-panel--title{padding:36px 34px;background:var(--w);background-image:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(0,0,0,.04) 14px 16px)}
.mg-panel--title h1{font-family:var(--heavy);font-size:clamp(30px,3.8vw,52px);line-height:1.15;letter-spacing:.01em}
.mg-panel--act{padding:30px 34px;background:var(--k);color:#eee;transform:rotate(.8deg)}
.mg-panel--act p{margin:0;font-size:17px}
.mg-panel__btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}
.mg-panel--act .mg-pow{border-color:var(--w);box-shadow:6px 6px 0 var(--r)}
/* slash heading */
.mg .mg-slash{display:inline-block;margin-bottom:36px;padding:8px 26px;background:var(--k);color:var(--y);font-family:var(--heavy);font-size:clamp(24px,3vw,36px);transform:skew(-10deg);box-shadow:6px 6px 0 var(--r)}
.mg .mg-slash--inv{background:var(--y);color:var(--k);box-shadow:6px 6px 0 var(--w)}
/* issues */
.mg-issues{padding:56px 0 72px}
.mg-issues__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:mg}
.mg-issues__grid .content-card{counter-increment:mg;position:relative;display:flex;flex-direction:column;background:var(--w);border:var(--b) solid var(--k);box-shadow:8px 8px 0 var(--k);transition:transform .15s}
.mg-issues__grid .content-card:hover{transform:translate(-3px,-3px) rotate(-.6deg)}
.mg-issues__grid .content-card::before{content:"#" counter(mg,decimal-leading-zero);position:absolute;top:-16px;left:14px;z-index:2;padding:2px 12px;background:var(--y);border:3px solid var(--k);font-family:var(--heavy);font-weight:900;font-size:16px}
.mg-issues__grid .content-card__media{border-bottom:var(--b) solid var(--k)}
.mg-issues__grid .content-card__media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mg-issues__grid time{margin:14px 20px 0;font-weight:800;font-size:13px;color:var(--r)}
.mg-issues__grid h2{margin:6px 20px 0;font-size:20px}
.mg-issues__grid h2 a:hover{background:var(--y)}
.mg-issues__grid p{margin:10px 20px 14px;font-size:15px;color:#444;flex:1}
.mg-issues__grid .content-link{align-self:flex-start;margin:0 20px 20px;padding:6px 14px;background:var(--k);color:var(--y);font-weight:900;font-size:14px}
/* cast */
.mg-cast{padding:64px 0 80px;background:var(--k);background-image:repeating-conic-gradient(from 0deg at 50% 0,rgba(255,255,255,.06) 0 4deg,transparent 4deg 12deg)}
.mg-cast__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:16px}
.mg-cast__grid .content-card{position:relative;display:grid;grid-template-areas:"x";min-height:260px;border:var(--b) solid var(--w);background:var(--k);overflow:hidden}
.mg-cast__grid .content-card:nth-child(5n+1){grid-column:span 2;grid-row:span 2}
.mg-cast__grid .content-card:nth-child(5n+4){grid-column:span 2}
.mg-cast__grid .content-card>*{grid-area:x}
.mg-cast__grid .content-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.mg-cast__grid .content-card:hover img{transform:scale(1.06)}
.mg-cast__grid h2{align-self:start;justify-self:start;margin:14px;padding:6px 14px;background:var(--y);border:3px solid var(--k);font-size:20px;transform:skew(-8deg);z-index:1}
.mg-cast__grid time{display:none}
.mg-cast__grid p{align-self:end;margin:0 14px 60px;padding:8px 12px;background:var(--w);border:3px solid var(--k);font-size:14px;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mg-cast__grid .content-link{align-self:end;justify-self:end;margin:14px;padding:6px 14px;background:var(--r);color:var(--w);border:3px solid var(--k);font-weight:900;font-size:14px;z-index:1}
/* origin */
.mg-origin{padding:72px 0 88px;background:linear-gradient(170deg,var(--y) 0 58%,var(--paper) 58%)}
.mg-origin__row{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.mg-origin__pic{transform:rotate(1.4deg);box-shadow:10px 10px 0 var(--k)}
.mg-cloud{position:relative;margin:0 0 28px;padding:22px 26px;background:var(--w);border:4px solid var(--k);border-radius:40px;font-size:17px;font-weight:600}
/* back */
.mg-back{background:var(--k);color:#cfcfcf;border-top:8px solid var(--y);font-size:15px}
.mg-back__cols{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:start;padding-top:56px;padding-bottom:44px}
.mg-badge--inv{box-shadow:4px 4px 0 var(--y)}
.mg-back__nav{display:flex;flex-wrap:wrap;gap:8px}
.mg-back__nav a{padding:6px 12px;border:2px solid #444;font-weight:800}
.mg-back__nav a:hover{border-color:var(--y);color:var(--y)}
.mg-back__info p{margin:0 0 6px}
.mg-back__info .mg-pow{margin-top:12px;min-height:46px;font-size:16px;box-shadow:5px 5px 0 var(--r);border-color:var(--w)}
.mg-back__copy{margin:0;padding:16px;text-align:center;border-top:2px dashed #333;font-size:13px}
/* inner */
.mg-chapter{padding:44px 0 48px;background:var(--y);border-bottom:var(--b) solid var(--k);background-image:repeating-linear-gradient(-45deg,transparent 0 18px,rgba(0,0,0,.06) 18px 21px)}
.mg-chapter h1{margin-top:18px;display:inline-block;padding:10px 24px;background:var(--w);border:var(--b) solid var(--k);box-shadow:8px 8px 0 var(--k);font-family:var(--heavy);font-size:clamp(26px,4vw,48px);max-width:100%}
.mg-chapter .mg-cloud{margin:28px 0 0;max-width:760px}
.mg .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-weight:800;font-size:14px}
.mg .breadcrumb a{padding:2px 10px;background:var(--k);color:var(--y)}
.mg-body{padding-top:52px;padding-bottom:88px}
.mg-body__intro{max-width:880px;margin-bottom:44px;background:var(--w);border:var(--b) solid var(--k);padding:30px 34px}
.mg .pagination{grid-column:1/-1;margin-top:28px;padding:12px;text-align:center;background:var(--w);border:4px solid var(--k);font-weight:900}
.mg .pagination a{display:inline-block;padding:4px 12px;margin:0 3px;background:var(--y);border:3px solid var(--k)}
.mg-body--two{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.mg-sheet{background:var(--w);border:var(--b) solid var(--k);box-shadow:10px 10px 0 var(--k);padding:44px 48px}
.mg-sheet--solo{max-width:920px;margin:0 auto}
.mg-sheet__pic{margin-bottom:30px}
.mg-sheet__end{margin:36px 0 0;text-align:center}
.mg-flip{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-top:44px}
.mg-flip>*{display:flex;align-items:center;min-height:54px;padding:8px 16px;border:4px solid var(--k);font-weight:900;font-size:15px;background:var(--w)}
.mg-flip .next{justify-content:flex-end;text-align:right}
.mg-flip a:hover{background:var(--y)}
.mg-flip .back{background:var(--k);color:var(--y)}
.mg-flip .back:hover{background:var(--r);color:var(--w)}
.mg-flip .is-disabled{color:#aaa;border-style:dashed}
.mg-side{position:sticky;top:100px;background:var(--y);border:var(--b) solid var(--k);box-shadow:8px 8px 0 var(--k);padding:22px}
.mg-side h2{display:inline-block;margin-bottom:10px;padding:4px 12px;background:var(--k);color:var(--y);font-size:18px}
.mg-side article{padding:10px 0;border-top:3px solid var(--k)}
.mg-side h3{font-size:15px;line-height:1.6}
.mg-side h3 a:hover{background:var(--w)}
/* copy */
.mg-copy{font-size:17px;line-height:1.9;overflow-wrap:anywhere}
.mg-copy>*:first-child{margin-top:0}
.mg-copy h2{display:inline-block;margin:1.6em 0 .7em;padding:6px 16px;background:var(--y);border:4px solid var(--k);font-size:24px;transform:skew(-6deg)}
.mg-copy h3{font-size:20px;margin:1.4em 0 .6em;padding-left:12px;border-left:8px solid var(--r)}
.mg-copy p{margin:0 0 1.1em}
.mg-copy ul,.mg-copy ol{margin:0 0 1.2em;padding-left:1.4em}
.mg-copy li::marker{color:var(--r);font-weight:900}
.mg-copy a{color:var(--k);background:linear-gradient(transparent 60%,var(--y) 60%)}
.mg-copy blockquote{margin:1.6em 0;padding:20px 26px;background:var(--w);border:4px solid var(--k);border-radius:40px;font-weight:800;font-size:19px}
.mg-copy img{border:4px solid var(--k);margin:1.4em 0}
.mg-copy table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px;display:block;overflow-x:auto}
.mg-copy th{background:var(--k);color:var(--y);text-align:left}
.mg-copy th,.mg-copy td{padding:10px 14px;border:3px solid var(--k)}
/* responsive */
@media (max-width:1100px){
  .mg-strip__btn{display:inline-flex;align-items:center}
  .mg-strip__row{flex-wrap:wrap;min-height:66px;padding-top:8px;padding-bottom:8px}
  .mg-tabs{display:none;order:3;width:100%;flex-direction:column;margin:6px 0 4px}
  .mg-tabs[data-open]{display:flex}
  .mg-tabs a{background:var(--w);border-color:var(--k)}
  .mg-tabs a:hover,.mg-tabs a[aria-current]{transform:none}
}
@media (max-width:980px){
  .mg-page{grid-template-columns:1fr}
  .mg-panel--art{grid-row:auto;min-height:0;transform:none}
  .mg-panel--art img{aspect-ratio:16/10}
  .mg-panel--act{transform:none}
  .mg-issues__grid{grid-template-columns:repeat(2,1fr)}
  .mg-cast__grid{grid-template-columns:repeat(2,1fr)}
  .mg-cast__grid .content-card:nth-child(5n+1){grid-row:auto}
  .mg-origin__row{grid-template-columns:1fr}
  .mg-origin{background:linear-gradient(180deg,var(--y) 0 50%,var(--paper) 50%)}
  .mg-back__cols{grid-template-columns:1fr}
  .mg-body--two{grid-template-columns:1fr}
  .mg-side{position:static}
}
@media (max-width:640px){
  body.mg{font-size:15px}
  .mg-grid{padding-left:16px;padding-right:16px}
  .mg-badge{font-size:16px}
  .mg-page{padding-top:18px;padding-bottom:40px}
  .mg-panel--title,.mg-panel--act{padding:24px 20px}
  .mg-panel--act p{font-size:16px}
  .mg-panel__btns .mg-pow{flex:1 1 100%}
  .mg-issues__grid{grid-template-columns:1fr;gap:30px}
  .mg-issues__grid .content-card{box-shadow:5px 5px 0 var(--k)}
  .mg-cast__grid{grid-template-columns:1fr}
  .mg-cast__grid .content-card,.mg-cast__grid .content-card:nth-child(5n+1),.mg-cast__grid .content-card:nth-child(5n+4){grid-column:auto;min-height:240px}
  .mg-origin__pic{box-shadow:6px 6px 0 var(--k)}
  .mg-chapter h1{box-shadow:5px 5px 0 var(--k);padding:8px 14px}
  .mg-body__intro{padding:22px 18px}
  .mg-sheet{padding:26px 18px;box-shadow:6px 6px 0 var(--k)}
  .mg-copy{font-size:16px}
  .mg-flip{grid-template-columns:1fr}
  .mg-flip .next{justify-content:flex-start;text-align:left}
}
