:root {
  
  
  --mag-gd1:#211c12; --mag-gd2:#2e2617; --mag-gd3:#3e321c; --mag-gd4:#4d3e21;
  --mag-gd5:#5c4a26; --mag-gd6:#725a2c; --mag-gd7:#8d6f34; --mag-gd8:#ae873d;
  --mag-gd9:#d4a54a; --mag-gd10:#dcb365; --mag-gd11:#e0c88a; --mag-gd12:#f3ecdd;
  
  --mag-gl1:#fdfcf9; --mag-gl2:#fbf8f1; --mag-gl3:#f8f0e2; --mag-gl4:#f4e7cf;
  --mag-gl5:#efdbb9; --mag-gl6:#e5cc9e; --mag-gl7:#d9ba81; --mag-gl8:#cca866;
  --mag-gl9:#bf8a2a; --mag-gl10:#a67723; --mag-gl11:#8a6410; --mag-gl12:#4a3510;
  
  --mag-nd1:#14120e; --mag-nd2:#1c1913; --mag-nd3:#232019; --mag-nd4:#2b271e;
  --mag-nd5:#3a3428; --mag-nd6:#463f30; --mag-nd7:#544b39; --mag-nd8:#6a5f48;
  --mag-nd9:#847a63; --mag-nd10:#9a8f79; --mag-nd11:#c3b7a2; --mag-nd12:#efe6d5;
  
  --mag-nl1:#fffdf8; --mag-nl2:#f7f1e6; --mag-nl3:#f0e7d5; --mag-nl4:#e9dec7;
  --mag-nl5:#e0d3ba; --mag-nl6:#d4c4a5; --mag-nl7:#c2ad8a; --mag-nl8:#a8916b;
  --mag-nl9:#8f7a52; --mag-nl10:#7d6844; --mag-nl11:#5c4a30; --mag-nl12:#2f2417;

  
  
  --mag-bg: var(--mag-nd1);
  --mag-surface: var(--mag-nd2);
  --mag-surface-2: var(--mag-nd3);
  --mag-line: var(--mag-nd5);
  --mag-line-gold: rgba(212, 165, 74, .38);
  --mag-text: var(--mag-nd12);
  --mag-cream: #f3ecdd;
  --mag-text-soft: var(--mag-nd11);
  --mag-text-mute: var(--mag-nd10);
  --mag-gold: var(--mag-gd9);
  --mag-gold-ink: #d4a54a;
  --mag-gold-soft: #b98f3e;
  --mag-gold-weak: #2a2213;
  --mag-gold-hover: #e6b95c;
  --mag-on-gold: #14120e;
  --mag-on-media: #f3ecdd;
  --mag-media-dim: var(--mag-nd11);
  --mag-red: #8c2f2f;
  --mag-red-ink: #cf6a6a;

  
  --mag-r-xs: 1px;
  --mag-r: 2px;
  --mag-r-pill: 999px;

  
  --mag-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --mag-frame: 0 0 0 1px var(--mag-line-gold);

  
  --mag-serif: "Playfair Display", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --mag-sans: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  --mag-maxw: 1120px;
}



[data-mode="light"] {
  --mag-bg: var(--mag-nl2);
  --mag-surface: var(--mag-nl1);
  --mag-surface-2: var(--mag-nl3);
  --mag-line: var(--mag-nl5);
  --mag-line-gold: rgba(150, 110, 30, .34);
  --mag-text: var(--mag-nl12);
  --mag-cream: #241a0e;
  --mag-text-soft: var(--mag-nl11);
  --mag-text-mute: var(--mag-nl10);
  --mag-gold: var(--mag-gl9);
  --mag-gold-ink: #8a6410;
  --mag-gold-soft: #a9791e;
  --mag-gold-weak: #f0e3c8;
  --mag-gold-hover: #d29a34;
  --mag-on-gold: #2a1c08;
  --mag-on-media: #f3ecdd;
  --mag-media-dim: var(--mag-nd11);
  --mag-red: #a33232;
  --mag-red-ink: #8c2f2f;
}

@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) {
    --mag-bg: var(--mag-nl2);
    --mag-surface: var(--mag-nl1);
    --mag-surface-2: var(--mag-nl3);
    --mag-line: var(--mag-nl5);
    --mag-line-gold: rgba(150, 110, 30, .34);
    --mag-text: var(--mag-nl12);
    --mag-cream: #241a0e;
    --mag-text-soft: var(--mag-nl11);
    --mag-text-mute: var(--mag-nl10);
    --mag-gold: var(--mag-gl9);
    --mag-gold-ink: #8a6410;
    --mag-gold-soft: #a9791e;
    --mag-gold-weak: #f0e3c8;
    --mag-gold-hover: #d29a34;
    --mag-on-gold: #2a1c08;
    --mag-on-media: #f3ecdd;
    --mag-media-dim: var(--mag-nd11);
    --mag-red: #a33232;
    --mag-red-ink: #8c2f2f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--mag-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--mag-text);
  background: var(--mag-bg);
}
a { color: var(--mag-gold-ink); text-decoration: none; }
a:hover { color: var(--mag-cream); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-family: var(--mag-serif); font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.mag-wrap { max-width: var(--mag-maxw); margin: 0 auto; padding: 0 20px; }


.mag-flourish { text-align: center; color: var(--mag-gold); font-size: 20px; letter-spacing: 6px; margin: 26px 0; position: relative; }
.mag-flourish::before, .mag-flourish::after { content: ""; position: absolute; top: 50%; width: 34%; height: 1px; background: var(--mag-line-gold); }
.mag-flourish::before { left: 0; }
.mag-flourish::after { right: 0; }


.mag-nav { background: var(--mag-surface); border-bottom: 1px solid var(--mag-line-gold); position: sticky; top: 0; z-index: 30; }
.mag-nav__inner { max-width: var(--mag-maxw); margin: 0 auto; padding: 0 20px; height: 66px; display: flex; align-items: center; gap: 22px; }
.mag-brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--mag-serif); font-weight: 700; font-size: 24px; color: var(--mag-cream); letter-spacing: .02em; }
.mag-brand__ver { font-family: var(--mag-sans); font-size: 11px; color: var(--mag-text-mute); letter-spacing: 0; }
.mag-links { display: flex; gap: 2px; }
.mag-links a { padding: 9px 14px; color: var(--mag-text-soft); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.mag-links a:hover { color: var(--mag-gold-ink); }
.mag-links a[aria-current] { color: var(--mag-gold-ink); border-bottom: 2px solid var(--mag-gold); }
.mag-nav__cta { margin-left: auto; background: transparent; color: var(--mag-gold-ink); border: 1px solid var(--mag-gold); border-radius: var(--mag-r); padding: 9px 18px; font-family: var(--mag-sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.mag-nav__cta:hover { background: var(--mag-gold); color: var(--mag-on-gold); }
.mag-burger { display: none; width: 42px; height: 40px; background: transparent; border: 1px solid var(--mag-line-gold); color: var(--mag-gold); border-radius: var(--mag-r); font-size: 18px; cursor: pointer; }


.mag-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--mag-text-mute); padding: 18px 0 0; letter-spacing: .04em; }
.mag-crumb i { font-style: normal; color: var(--mag-gold-soft); }


.mag-hero { position: relative; margin: 18px 0 6px; border: 1px solid var(--mag-line-gold); border-radius: var(--mag-r); overflow: hidden; }
.mag-hero__img { aspect-ratio: 21/9; background: radial-gradient(120% 140% at 20% 10%, #3a2f18 0%, #14120e 60%), linear-gradient(120deg, #2a2213, #14120e); }
.mag-hero__body { position: absolute; left: 0; bottom: 0; right: 0; padding: 30px; background: linear-gradient(0deg, rgba(20,18,14,.94), rgba(20,18,14,0)); }
.mag-kicker { color: var(--mag-gold-ink); font-family: var(--mag-sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.mag-hero .mag-kicker { color: var(--mag-gold); }
.mag-hero__title { font-size: 34px; color: var(--mag-on-media); margin: 8px 0 4px; max-width: 640px; }
.mag-hero__meta { font-size: 12px; color: var(--mag-media-dim); }


.mag-layout { display: grid; grid-template-columns: 1fr 300px; gap: 34px; padding: 20px 0 44px; }
@media (max-width: 940px) { .mag-layout { grid-template-columns: 1fr; } }
.mag-aside { align-self: start; display: grid; gap: 22px; }


.mag-card { background: var(--mag-surface); border: 1px solid var(--mag-line-gold); border-radius: var(--mag-r); }
.mag-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 14px; border-bottom: 1px solid var(--mag-line); padding-bottom: 8px; }
.mag-sec-head h2 { font-size: 22px; color: var(--mag-cream); }
.mag-sec-head a { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }


.mag-tool { padding: 22px; }
.mag-tool h2 { font-size: 19px; }
.mag-field { margin-bottom: 14px; }
.mag-field label { display: block; font-family: var(--mag-sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mag-text-mute); margin-bottom: 6px; }
.mag-input, .mag-select { width: 100%; font-family: var(--mag-sans); font-size: 14px; color: var(--mag-text); padding: 11px 13px; border: 1px solid var(--mag-line); border-radius: var(--mag-r); background: var(--mag-bg); }
.mag-input:focus, .mag-select:focus { outline: 1px solid var(--mag-gold); border-color: var(--mag-gold); }
.mag-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.mag-radio { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--mag-line); border-radius: var(--mag-r); cursor: pointer; font-size: 13px; color: var(--mag-text-soft); }
.mag-radio input { accent-color: var(--mag-gold); }
.mag-actions { display: flex; gap: 12px; margin-top: 4px; }
.mag-btn { font-family: var(--mag-sans); font-size: 14px; font-weight: 600; letter-spacing: .03em; cursor: pointer; border-radius: var(--mag-r); padding: 11px 22px; border: 1px solid transparent; }
.mag-btn--primary { background: var(--mag-gold); color: var(--mag-on-gold); }
.mag-btn--primary:hover { background: var(--mag-gold-hover); }
.mag-btn--ghost { background: transparent; color: var(--mag-gold-ink); border-color: var(--mag-gold); }
.mag-btn--ghost:hover { background: var(--mag-gold-weak); }


.mag-post { padding: 22px; }
.mag-post__top { display: flex; align-items: center; gap: 12px; }
.mag-avatar { width: 46px; height: 46px; border-radius: var(--mag-r); border: 1px solid var(--mag-gold); background: var(--mag-surface-2); color: var(--mag-gold-ink); display: grid; place-items: center; font-family: var(--mag-serif); font-size: 20px; flex: none; }
.mag-post__name { font-family: var(--mag-serif); font-size: 17px; color: var(--mag-cream); }
.mag-post__sub { font-size: 12px; color: var(--mag-text-mute); }
.mag-post__id { margin-left: auto; font-family: var(--mag-sans); font-size: 11px; color: var(--mag-text-mute); border: 1px solid var(--mag-line); padding: 3px 9px; border-radius: var(--mag-r); letter-spacing: .04em; }
.mag-chip { display: inline-block; font-family: var(--mag-sans); font-size: 11px; letter-spacing: .04em; padding: 2px 9px; border-radius: var(--mag-r); background: var(--mag-gold-weak); color: var(--mag-gold-ink); }
.mag-post__body { margin: 14px 0; color: var(--mag-text-soft); }
.mag-result { border: 1px solid var(--mag-line-gold); border-left: 3px solid var(--mag-red); border-radius: var(--mag-r); padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 24px; background: var(--mag-surface-2); }
.mag-result .mk { font-family: var(--mag-sans); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mag-text-mute); }
.mag-result .mv { font-family: var(--mag-serif); font-size: 20px; color: var(--mag-cream); }
.mag-stars { color: var(--mag-gold); letter-spacing: 3px; margin-top: 12px; }
.mag-stars .off { color: var(--mag-line); }
.mag-post-actions { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mag-line); }
.mag-act { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; font-family: var(--mag-sans); font-size: 13px; color: var(--mag-text-soft); padding: 6px 10px; border-radius: var(--mag-r); cursor: pointer; letter-spacing: .03em; }
.mag-act:hover { color: var(--mag-gold-ink); }


.mag-stats { padding: 20px; text-align: center; }
.mag-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.mag-stat { padding: 6px; border-left: 1px solid var(--mag-line); }
.mag-stat:first-child { border-left: 0; }
.mag-stat__n { font-family: var(--mag-serif); font-size: 26px; color: var(--mag-gold); }
.mag-stat__l { font-family: var(--mag-sans); font-size: 11px; letter-spacing: .04em; color: var(--mag-text-mute); }


.mag-rank { padding: 6px 20px 18px; }
.mag-rank li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--mag-line); }
.mag-rank li:last-child { border-bottom: 0; }
.mag-rank__no { font-family: var(--mag-serif); font-size: 22px; color: var(--mag-gold-soft); width: 26px; flex: none; }
.mag-rank li:nth-child(-n+3) .mag-rank__no { color: var(--mag-gold); }
.mag-rank__name { font-size: 14px; color: var(--mag-text); }
.mag-rank__val { margin-left: auto; font-size: 12px; color: var(--mag-text-mute); }


.mag-arts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 640px) { .mag-arts { grid-template-columns: 1fr; } }
.mag-art { overflow: hidden; }
.mag-art__thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, #2a2213, #14120e); border-bottom: 1px solid var(--mag-line-gold); }
.mag-art--b .mag-art__thumb { background: linear-gradient(135deg, #3a1a1a, #14120e); }
.mag-art--c .mag-art__thumb { background: radial-gradient(120% 120% at 30% 20%, #4a3a1c, #14120e); }
.mag-art__body { padding: 18px; }
.mag-art__cat { font-family: var(--mag-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mag-red-ink); }
.mag-art__title { font-size: 19px; color: var(--mag-cream); margin: 8px 0; }
.mag-art__meta { font-family: var(--mag-sans); font-size: 12px; color: var(--mag-text-mute); }


.mag-article { padding: 26px; max-width: 720px; }
.mag-article > p:first-of-type::first-letter { font-family: var(--mag-serif); float: left; font-size: 62px; line-height: .82; padding: 6px 12px 0 0; color: var(--mag-gold); }
.mag-article h2 { font-size: 24px; color: var(--mag-cream); margin-top: 1.3em; }
.mag-article h3 { font-size: 18px; color: var(--mag-gold-ink); margin-top: 1.2em; }
.mag-article p { color: var(--mag-text-soft); }
.mag-article table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-family: var(--mag-sans); font-size: 13px; }
.mag-article th, .mag-article td { border: 1px solid var(--mag-line); padding: 10px 13px; text-align: left; }
.mag-article th { background: var(--mag-surface-2); color: var(--mag-cream); font-weight: 600; }
.mag-article td { color: var(--mag-text-soft); }
.mag-article blockquote { margin: 1.4em 0; padding: 6px 24px; border-left: 2px solid var(--mag-gold); font-family: var(--mag-serif); font-size: 20px; font-style: italic; color: var(--mag-cream); }
.mag-faq { border-top: 1px solid var(--mag-line); padding: 0; margin: 0; }
.mag-faq summary { cursor: pointer; font-family: var(--mag-serif); font-size: 16px; color: var(--mag-cream); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; }
.mag-faq summary::-webkit-details-marker { display: none; }
.mag-faq summary::after { content: "❧"; color: var(--mag-gold-ink); }
.mag-faq[open] summary::after { content: "✕"; }
.mag-faq p { padding-bottom: 14px; margin: 0; color: var(--mag-text-soft); }


.mag-toolwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px) { .mag-toolwall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .mag-toolwall { grid-template-columns: 1fr; } }
.mag-tw { padding: 18px; text-align: center; }
.mag-tw__icon { font-family: var(--mag-serif); font-size: 26px; color: var(--mag-gold); margin-bottom: 8px; }
.mag-tw__name { font-family: var(--mag-serif); font-size: 15px; color: var(--mag-cream); }
.mag-tw__desc { font-family: var(--mag-sans); font-size: 12px; color: var(--mag-text-mute); }


.mag-video { position: relative; aspect-ratio: 16/9; border: 1px solid var(--mag-line-gold); border-radius: var(--mag-r); overflow: hidden; background: radial-gradient(120% 140% at 50% 30%, #2a2213, #14120e); }
.mag-video__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: var(--mag-r-pill); background: rgba(212,165,74,.94); color: #14120e; border: 0; font-size: 22px; display: grid; place-items: center; cursor: pointer; }
.mag-video__time { position: absolute; right: 12px; bottom: 12px; font-family: var(--mag-sans); background: rgba(0,0,0,.72); color: var(--mag-on-media); font-size: 11px; padding: 3px 8px; border-radius: var(--mag-r); }


.mag-imggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mag-imggrid > i { display: block; aspect-ratio: 4/3; border: 1px solid var(--mag-line-gold); border-radius: var(--mag-r); }
.mag-imggrid > i:nth-child(1) { background: linear-gradient(135deg, #2a2213, #14120e); }
.mag-imggrid > i:nth-child(2) { background: linear-gradient(135deg, #3a1a1a, #14120e); }
.mag-imggrid > i:nth-child(3) { background: radial-gradient(120% 120% at 30% 20%, #4a3a1c, #14120e); }
.mag-imggrid > i:nth-child(4) { background: linear-gradient(135deg, #1c1913, #2a2213); }


.mag-pager { display: flex; gap: 8px; justify-content: center; margin: 28px 0; }
.mag-pager a, .mag-pager span { min-width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--mag-line-gold); border-radius: var(--mag-r); font-family: var(--mag-serif); font-size: 15px; color: var(--mag-text-soft); background: var(--mag-surface); }
.mag-pager a:hover { border-color: var(--mag-gold); color: var(--mag-gold); }
.mag-pager [aria-current] { background: var(--mag-gold); color: var(--mag-on-gold); border-color: var(--mag-gold); }


.mag-footer { background: var(--mag-surface); border-top: 1px solid var(--mag-line-gold); margin-top: 34px; }
.mag-footer__inner { max-width: var(--mag-maxw); margin: 0 auto; padding: 34px 20px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; }
@media (max-width: 700px) { .mag-footer__inner { grid-template-columns: 1fr 1fr; } }
.mag-footer h4 { font-family: var(--mag-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mag-text-mute); }
.mag-footer a { display: block; padding: 4px 0; color: var(--mag-text-soft); font-size: 13px; }
.mag-footer__bottom { border-top: 1px solid var(--mag-line); text-align: center; font-size: 12px; color: var(--mag-text-mute); padding: 18px; }

.mag-muted { color: var(--mag-text-mute); }


.mag-note { border: 1px solid var(--mag-line-gold); border-radius: var(--mag-r); padding: 14px 18px; margin: 16px 0; background: var(--mag-surface-2); }
.mag-note__label { font-family: var(--mag-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mag-gold-ink); margin-bottom: 6px; }
.mag-note p { margin: 0; color: var(--mag-text-soft); font-size: 13px; }


.mag-pull { font-family: var(--mag-serif); font-size: 24px; font-style: italic; color: var(--mag-cream); text-align: center; padding: 22px 8%; position: relative; }
.mag-pull::before, .mag-pull::after { content: ""; display: block; width: 60px; height: 1px; background: var(--mag-gold); margin: 0 auto 14px; }
.mag-pull::after { margin: 14px auto 0; }


.mag-byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--mag-line); border-bottom: 1px solid var(--mag-line); margin: 18px 0; }
.mag-byline__name { font-family: var(--mag-serif); font-size: 15px; color: var(--mag-cream); }
.mag-byline__role { font-size: 12px; color: var(--mag-text-mute); }


.mag-tag { display: inline-block; font-family: var(--mag-sans); font-size: 11px; letter-spacing: .08em; padding: 3px 11px; border: 1px solid var(--mag-line-gold); border-radius: var(--mag-r); color: var(--mag-gold-ink); margin: 0 6px 6px 0; }
.mag-tag:hover { background: var(--mag-gold-weak); }


.mag-btn:disabled { opacity: .45; cursor: not-allowed; }
.mag-btn:focus-visible, .mag-act:focus-visible, .mag-nav__cta:focus-visible { outline: 2px solid var(--mag-gold); outline-offset: 2px; }
.mag-input:disabled, .mag-select:disabled { opacity: .55; cursor: not-allowed; }


.mag-smallcaps { font-family: var(--mag-sans); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; color: var(--mag-text-mute); }
hr.mag-rule { border: 0; border-top: 1px solid var(--mag-line-gold); margin: 24px 0; }


@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


.mag-mode { background: transparent; border: 1px solid var(--mag-line-gold); color: var(--mag-gold-ink); border-radius: var(--mag-r); width: 40px; height: 40px; font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; flex: none; }
.mag-mode:hover { border-color: var(--mag-gold); color: var(--mag-gold); }

@media (max-width: 768px) {
  .mag-links { display: none; }
  .mag-burger { display: block; }
  .mag-nav__cta { margin-left: auto; }
  .mag-hero__title { font-size: 26px; }
}





.mag-insert[hidden] { display: none !important; }


.mag-insert { position: relative; border: 1px solid var(--mag-line-gold); border-radius: var(--mag-r); background: var(--mag-surface); box-shadow: inset 0 0 0 3px var(--mag-surface), inset 0 0 0 4px var(--mag-line-gold); }


.mag-insert__tag { display: inline-block; font-family: var(--mag-serif); font-style: italic; font-size: 12px; letter-spacing: .16em; color: var(--mag-gold-ink); }
.mag-insert__cta { font-family: var(--mag-sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mag-gold-ink); font-weight: 600; }
.mag-insert__ttl { font-family: var(--mag-serif); font-size: 18px; color: var(--mag-cream); margin: 8px 0 6px; }
.mag-insert__desc { font-size: 13px; color: var(--mag-text-soft); margin: 0 0 6px; }


.mag-insert--banner { padding: 14px 16px; margin: 18px 0; }
.mag-insert--top { margin: 20px 0 4px; }
.mag-insert--banner .mag-insert__body { margin-top: 8px; min-height: 62px; border: 1px dashed var(--mag-line-gold); border-radius: var(--mag-r); background: repeating-linear-gradient(45deg, var(--mag-surface-2), var(--mag-surface-2) 10px, var(--mag-surface) 10px, var(--mag-surface) 20px); display: grid; place-items: center; color: var(--mag-text-mute); font-family: var(--mag-sans); font-size: 12px; text-align: center; padding: 6px; }
.mag-insert--side { margin: 0; }
.mag-insert--side .mag-insert__body { min-height: 250px; }


.mag-insert--native, .mag-insert--article, .mag-insert--end { padding: 16px 20px; margin: 18px 0; }
.mag-insert--feed .mag-insert__ttl { font-size: 20px; }
.mag-insert--article .mag-insert__ttl, .mag-insert--end .mag-insert__ttl { font-size: 16px; margin: 6px 0; }


.mag-insert--result { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.mag-insert--result .mag-insert__seal { width: 58px; height: 58px; flex: none; border-radius: var(--mag-r); border: 1px solid var(--mag-gold); background: radial-gradient(120% 120% at 30% 20%, #4a3a1c, #14120e); display: grid; place-items: center; font-family: var(--mag-serif); color: var(--mag-gold); font-size: 22px; }
.mag-insert--result .mag-insert__main { flex: 1 1 170px; }


.mag-insert--sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; align-items: center; gap: 12px; background: var(--mag-surface); border: 0; border-top: 1px solid var(--mag-line-gold); border-radius: 0; box-shadow: 0 -6px 22px rgba(0,0,0,.45); padding: 8px 14px; }
.mag-insert--sticky .mag-insert__tag { flex: none; }
.mag-insert--sticky .mag-insert__body { flex: 1; min-height: 46px; border: 1px dashed var(--mag-line-gold); border-radius: var(--mag-r); background: repeating-linear-gradient(45deg, var(--mag-surface-2), var(--mag-surface-2) 10px, var(--mag-surface) 10px, var(--mag-surface) 20px); display: grid; place-items: center; color: var(--mag-text-mute); font-family: var(--mag-sans); font-size: 12px; }
.mag-insert__close { flex: none; width: 30px; height: 30px; border-radius: var(--mag-r); border: 1px solid var(--mag-line-gold); background: transparent; color: var(--mag-gold-ink); font-size: 15px; line-height: 1; cursor: pointer; }
.mag-insert__close:hover { border-color: var(--mag-gold); color: var(--mag-gold); }
@media (max-width: 768px) {
  
  .mag-insert--sticky { display: flex; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1300; }
}


body { background-image:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--mag-line-gold) 24%,transparent) 50%,transparent 50.3%); background-size:86px 100%; }
.mag-nav { position:sticky; top:0; z-index:80; backdrop-filter:blur(16px); background:color-mix(in srgb,var(--mag-surface) 88%,transparent); box-shadow:0 12px 38px rgba(48,31,15,.12); }
.mag-wrap { max-width:1280px; }
.mag-hero { min-height:520px; border-radius:4px; box-shadow:0 30px 70px rgba(31,21,11,.26); }
.mag-hero__body { max-width:760px; padding:54px; }
.mag-hero__title { text-wrap:balance; text-shadow:0 3px 18px rgba(0,0,0,.45); }
.mag-card { border-color:color-mix(in srgb,var(--mag-gold) 14%,var(--mag-line)); box-shadow:0 12px 32px rgba(55,39,20,.08); }
.mag-art,.mag-tw { transition:transform .2s ease,box-shadow .2s ease; }
.mag-art:hover,.mag-tw:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(55,39,20,.14); }
.mag-btn--primary,.mag-nav__cta { box-shadow:0 9px 22px color-mix(in srgb,var(--mag-gold) 26%,transparent); }



.mag-insert--reflow { display: none; }


.mag-insert--sticky .mag-insert__ico { flex: none; width: 32px; height: 32px; border-radius: var(--mag-r); border: 1px solid var(--mag-gold); background: radial-gradient(120% 120% at 30% 20%, var(--mag-gold-weak), var(--mag-surface)); color: var(--mag-gold); display: grid; place-items: center; font-family: var(--mag-serif); font-size: 15px; }
.mag-insert--sticky .mag-insert__line { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; }
.mag-insert--sticky .mag-insert__msg { font-family: var(--mag-sans); font-size: 13px; color: var(--mag-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mag-insert__cta-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 15px; border-radius: var(--mag-r); background: var(--mag-gold); color: var(--mag-on-gold); font-family: var(--mag-sans); font-size: 15px; font-weight: 600; letter-spacing: .04em; text-decoration: none; }


.mag-insert--interstitial { position: fixed; inset: 0; z-index: 9999; }
.mag-insert__scrim { position: absolute; inset: 0; background: rgba(8,7,5,.74); backdrop-filter: blur(2px); }
.mag-insert__modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(92vw, 360px); max-height: 86vh; overflow: auto; background: var(--mag-surface); border: 1px solid var(--mag-line-gold); border-radius: var(--mag-r); box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 0 3px var(--mag-surface), inset 0 0 0 4px var(--mag-line-gold); padding: 18px; text-align: center; }
.mag-insert__x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: var(--mag-r); border: 1px solid var(--mag-line-gold); background: transparent; color: var(--mag-gold-ink); font-family: var(--mag-sans); font-size: 17px; line-height: 1; cursor: pointer; }
.mag-insert__hero { height: 130px; border-radius: var(--mag-r); border: 1px solid var(--mag-line-gold); background: radial-gradient(120% 140% at 25% 15%, var(--mag-gold-weak), var(--mag-surface-2)); margin-bottom: 12px; }
.mag-insert--interstitial .mag-insert__ttl { font-size: 19px; margin: 8px 0 4px; }
.mag-insert__cta--lg { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 12px; border-radius: var(--mag-r); background: var(--mag-gold); color: var(--mag-on-gold); font-family: var(--mag-sans); font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.mag-insert__skip { display: block; width: 100%; margin-top: 8px; min-height: 40px; background: transparent; border: 0; color: var(--mag-text-mute); font-family: var(--mag-sans); font-size: 13px; cursor: pointer; }


.mag-insert__demo { display: none; }

@media (max-width: 768px) {
  
  .mag-insert--side { display: none; }
  .mag-insert--reflow { display: block; margin: 18px 0; }

  
  .mag-insert--result { gap: 12px; cursor: pointer; }
  .mag-insert--result .mag-insert__main { flex: 1 1 100%; }
  [data-zone].mag-insert--result .mag-insert__cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 4px; border: 1px solid var(--mag-gold); border-radius: var(--mag-r); font-size: 15px; }

  
  [data-zone] .mag-insert__cta,
  [data-zone] .mag-btn { min-height: 44px; font-size: 15px; }
  [data-zone] .mag-insert__cta { display: inline-flex; align-items: center; }
  .mag-insert--feed { cursor: pointer; }

  
  .mag-insert--sticky { max-height: 56px; padding: 6px calc(104px + env(safe-area-inset-right)) 6px 12px; }

  
  .mag-insert__demo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; margin: 4px 0 2px; border: 1px dashed var(--mag-line-gold); border-radius: var(--mag-r); background: transparent; color: var(--mag-gold-ink); font-family: var(--mag-sans); font-size: 14px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
}