/* MAG 直擊 owns its card preview and viewing surface; other site media stay unchanged. */
.mag-live-card .mag-live-card-link { display: block; position: relative; overflow: hidden; border-radius: inherit; }
.mag-live-card .mag-live-card-link > img,
.mag-live-card .mag-live-card-link > picture,
.mag-live-card .mag-live-card-link > picture > img,
.mag-live-card .mag-live-card-link > video { width: 100%; height: 100%; display: block; object-fit: contain; }
.mag-live-card .mag-live-card-link > img,
.mag-live-card .mag-live-card-link > picture,
.mag-live-card .mag-live-card-link > picture > img { height: auto; }
.mag-live-card .card-summary { text-wrap: wrap; }
/* This video's square illustration remains the story-ring thumbnail.
   Reserve its native 3:4 video area from the first paint to prevent layout jumps. */
.mag-live-card[data-mag-live-card="content-1790613509454-5625f9"] .mag-live-card-link { aspect-ratio: 3 / 4; background: #fff; }
.mag-live-card[data-mag-live-card="content-1790613509454-5625f9"] .mag-live-card-link > img,
.mag-live-card[data-mag-live-card="content-1790613509454-5625f9"] .mag-live-card-link > picture,
.mag-live-card[data-mag-live-card="content-1790613509454-5625f9"] .mag-live-card-link > picture > img { height: 100%; object-fit: contain; }
.mag-live-overlay-plane { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; overflow: hidden; }
.mag-live-overlay-text { position: absolute; width: max-content; max-width: 90%; transform: translate(-50%,-50%); padding: .24em .4em; border-radius: 5px; font-family: Arial,"Microsoft JhengHei",sans-serif; font-weight: 400; line-height: 1.5; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.mag-live-overlay-text[data-font=hand] { font-family: 'DFKai-SB','KaiTi','BiauKai',serif; }
.mag-live-hand-arrow { display: none; pointer-events: none; }
.mag-live-overlay-text[data-kind=arrow] { width: 1em; height: .64em; padding: 0; line-height: 1; border-radius: 0; }
.mag-live-overlay-text[data-kind=arrow] .mag-live-layer-copy,
.mag-live-overlay-text[data-kind=arrow] .mag-live-bloom { display: none; }
.mag-live-overlay-text[data-kind=arrow] .mag-live-hand-arrow { display: block; width: 100%; height: 100%; }
.mag-live-hand-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mag-live-overlay-text[data-kind=arrow][data-effect=nudge] .mag-live-hand-arrow { animation: mag-arrow-nudge 1.35s ease-in-out infinite; }
/* Move in local X before the outer rotation, so motion always follows the tip. */
@keyframes mag-arrow-nudge { 0%,100% { transform: translateX(-.1em); } 48%,64% { transform: translateX(0); } }
.mag-live-viewer.is-paused .mag-live-overlay-text[data-kind=arrow] .mag-live-hand-arrow,
.mag-live-slide:not(.is-current) .mag-live-overlay-text[data-kind=arrow] .mag-live-hand-arrow,
.mag-live-card:not(.is-playing) .mag-live-overlay-text[data-kind=arrow] .mag-live-hand-arrow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mag-live-overlay-text[data-kind=arrow][data-effect=nudge] .mag-live-hand-arrow { animation: none; transform: none; } }
.mag-live-bloom { position: absolute; width: 3.8em; height: 3em; right: 0; bottom: calc(100% - .25em); pointer-events: none; font-size: max(1em,16px); color: #ef527c; }
.mag-live-overlay-text:not([data-effect=bloom]) .mag-live-bloom { display: none; }
.mag-live-bloom > span { position: absolute; left: 50%; top: 100%; width: 1em; height: 1em; opacity: 0; animation: mag-heart-bloom 3.4s calc(var(--petal) * .18s) ease-in-out infinite; --heart-x: 0em; --heart-y: -2.6em; --heart-tilt: 0deg; }
.mag-live-bloom > span:first-child { --heart-x: -1.25em; --heart-y: -1.8em; --heart-tilt: -12deg; color: #f07898; }
.mag-live-bloom > span:last-child { --heart-x: 1.25em; --heart-y: -1.75em; --heart-tilt: 12deg; color: #e94873; }
.mag-live-bloom svg { width: 100%; height: 100%; display: block; }
@keyframes mag-heart-bloom {
  0%,8% { opacity: 0; transform: translate(-50%,-.15em) scale(.72); }
  18% { opacity: 1; }
  40%,68% { opacity: 1; transform: translate(calc(-50% + var(--heart-x)),var(--heart-y)) rotate(var(--heart-tilt)) scale(1); }
  52% { opacity: 1; transform: translate(calc(-50% + var(--heart-x)),calc(var(--heart-y) - .08em)) rotate(var(--heart-tilt)) scale(1.08); }
  84%,100% { opacity: 0; transform: translate(calc(-50% + var(--heart-x)),calc(var(--heart-y) - .3em)) rotate(var(--heart-tilt)) scale(1); }
}
.mag-live-viewer.is-paused .mag-live-bloom > span { animation-play-state: paused; }
.mag-live-card:not(:hover) .mag-live-bloom > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mag-live-bloom > span { animation: none; opacity: 1; transform: translate(calc(-50% + var(--heart-x)),var(--heart-y)) rotate(var(--heart-tilt)); } }
.mag-live-card .mag-live-card-link > video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.mag-live-card .mag-live-card-link.has-played > video { opacity: 1; }
/* Keep the cover's layout space, but never show it behind a playing or paused video. */
.mag-live-card .mag-live-card-link.has-played > img,
.mag-live-card .mag-live-card-link.has-played > picture { visibility: hidden; }
.mag-live-card .mag-live-card-corner { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; z-index: 3; }
.mag-live-card .mag-live-card-corner .card-status-group { position: static; }
.mag-live-card .mag-live-card-sound { display: grid; place-items: center; width: 38px; height: 38px; padding: 8px; border: 1px solid #ffffff66; border-radius: 50%; color: #fff; background: #171614b3; cursor: pointer; }
.mag-live-card .mag-live-card-sound svg { width: 20px; height: 20px; pointer-events: none; }
.mag-live-card .mag-live-card-sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mag-live-direct { margin: 0; background: var(--surface-dark, #2f2925); color: #f3eee7; font-family: var(--sans); }
.listing-hero:has(.mag-live-story-rail) { position: relative; }
.mag-live-story-rail { --mag-story-unread: #b87588; width: min(100%, 520px); margin-top: 28px; min-width: 0; }
.mag-live-story-rail[hidden] { display: none; }
.mag-live-story-heading { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px; }
.mag-live-story-controls { display: flex; gap: 6px; }
.mag-live-story-controls button { display: grid; place-items: center; width: 24px; height: 24px; padding: 3px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.mag-live-story-controls button:disabled { opacity: .25; cursor: default; }
.mag-live-story-controls svg { width: 16px; height: 16px; }
/* 96px item - 88px ring + 10px gap leaves 18px between ring borders. */
.mag-live-story-list { display: flex; gap: 10px; padding: 2px 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; user-select: none; }
.mag-live-story-list.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.mag-live-story-list::-webkit-scrollbar { display: none; }
.mag-live-story { --mag-story-diameter: 88px; display: block; flex: 0 0 96px; min-width: 0; color: var(--muted); text-decoration: none; scroll-snap-align: start; cursor: inherit; }
.mag-live-story[hidden] { display: none; }
.mag-live-story[data-mag-read="false"] .mag-live-story-ring { border-color: var(--mag-story-unread); }
.mag-live-story-all .mag-live-story-ring { display: grid; place-items: stretch; }
.mag-live-story-all-label { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; text-align: center; font: 400 19px/1 var(--sans); letter-spacing: -.03em; }
.mag-live-story-ring { display: block; width: 88px; height: 88px; margin-inline: auto; box-sizing: border-box; padding: 4px; border: 2px solid #d8d7d4; border-radius: 50%; background: var(--surface); }
.mag-live-story-ring img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mag-live-story-ring > picture { display: block; width: 100%; height: 100%; border-radius: inherit; }
.mag-live-story-title { display: block; height: 18px; margin: 4px 0 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font: 400 12px/1.5 var(--sans-light, var(--sans)); }
.mag-live-story:hover .mag-live-story-ring,.mag-live-story:focus-visible .mag-live-story-ring { border-color: var(--accent); }
.mag-live-story:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1280px) {
  .mag-live-story-rail { position: absolute; right: 0; width: 520px; margin: 0; }
}
html[data-mag-tablet-rail] .mag-live-story-rail {
  position: relative; inset: auto; width: 100%; margin: 32px 0 0;
}
/* Wide touch rails keep the user's actual offset rather than forcing a snap after each move. */
html[data-mag-tablet-rail] .mag-live-story-list { scroll-snap-type: none; }
html[data-mag-tablet-rail] .mag-live-story-heading {
  position: absolute; right: 0; top: -30px; margin: 0;
}
html[data-mag-tablet-rail] .listing-page .listing-hero:has(.mag-live-story-rail:not([hidden])) {
  margin-bottom: 0;
}
html[data-mag-tablet-rail] .listing-hero:has(.mag-live-story-rail:not([hidden])) + .content-category-filters {
  margin-top: 32px; padding-right: 0;
}
@media (max-width: 760px) {
  .listing-page .listing-hero:has(.mag-live-story-rail:not([hidden])) { margin-bottom: 0; }
  .listing-page .listing-hero:has(.mag-live-story-rail:not([hidden])) + .content-category-filters { margin-top: 24px; }
  .mag-live-story-rail { width: var(--mag-rail-viewport-width, 100vw); margin: 24px 0 24px calc(-1 * var(--mag-rail-inset, 0px)); }
  .mag-live-story-heading { display: none; }
  .mag-live-story-list { box-sizing: border-box; gap: 15px; padding: 0 var(--mag-rail-inset, 0px); scroll-padding-inline: var(--mag-rail-inset, 0px); }
  .mag-live-story { --mag-story-diameter: clamp(79.8px, 22.8vw, 95px); flex-basis: var(--mag-story-diameter); }
  .mag-live-story-ring { width: var(--mag-story-diameter); height: var(--mag-story-diameter); aspect-ratio: 1; border: 2px solid #d8d7d4; background: #fff; }
  .mag-live-story-title { display: none; }
}
.mag-live-fallback { max-width: 480px; margin: 40px auto; padding: 24px; line-height: 1.8; }
.mag-live-fallback img { width: 100%; }
.mag-live-fallback a { color: #dac7aa; }
.mag-live-viewer {
  --mag-ink: #f3eee7; --mag-muted: #bdb5a9; --mag-accent: #ceb695;
  --mag-frame-width: min(calc(100vw - 180px), calc(100dvh * var(--mag-aspect, .75)));
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; background: var(--surface-dark, #2f2925); color: var(--mag-ink);
  font-family: var(--sans, "PingFang TC", "Microsoft JhengHei", sans-serif); font-size: 15px;
  box-sizing: border-box; overscroll-behavior: contain;
}
.mag-live-viewer::backdrop { background: #080908e8; }
/* Keep horizontal touch gestures available over the floating controls too. */
@media (pointer: coarse) { html:is([data-mag-phone],[data-duo-player-layout],[data-duo-listing-edge]) .mag-live-viewer { touch-action: pan-y pinch-zoom; } }
.mag-live-viewer * { box-sizing: border-box; }
.mag-live-viewer [hidden] { display: none !important; }
.mag-live-viewer button, .mag-live-viewer a { -webkit-tap-highlight-color: transparent; }
.mag-live-viewer button { color: inherit; font: inherit; font-weight: 400; cursor: pointer; touch-action: manipulation; }
.mag-live-viewer button:focus-visible, .mag-live-viewer a:focus-visible, .mag-live-viewer summary:focus-visible { outline: 2px solid var(--mag-accent); outline-offset: 4px; }
.mag-live-viewer button:disabled { opacity: .25; cursor: default; }
.mag-live-chrome { position: absolute; z-index: 9; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px; pointer-events: none; }
.mag-live-chrome > * { pointer-events: auto; }
.mag-live-brand { display: flex; align-items: center; min-height: 40px; color: var(--mag-ink); text-decoration: none; font-family: var(--sans-light, var(--sans)); font-size: var(--text-size-feature, 25px); font-weight: var(--text-display-weight, 300); line-height: 1.3; white-space: nowrap; }
.mag-live-viewer .mag-live-icon { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 9px; overflow: hidden; border: 0; border-radius: 50%; background: #181816a6; color: #fff; line-height: 1; }
.mag-live-viewer .mag-live-icon:hover, .mag-live-viewer .mag-live-copy:hover { background: #383834ee; }
.mag-live-icon svg { display: block; width: 22px; height: 22px; }
.mag-live-current { position: absolute; top: 0; left: 0; width: 100%; padding: 10px 18px 22px; z-index: 6; background: none; }
.mag-live-progress { display: flex; gap: 5px; height: 18px; align-items: center; }
.mag-live-progress button { flex: 1; height: 16px; min-width: 0; padding: 6px 0; border: 0; background: transparent; }
.mag-live-progress button > span { display: block; height: 3px; background: #ffffff30; border-radius: 3px; overflow: hidden; }
.mag-live-progress i { display: block; width: 100%; height: 100%; transform: scaleX(var(--progress, 0)); transform-origin: left; background: var(--mag-accent); }
.mag-live-toolbar { display: flex; align-items: center; justify-content: space-between; }
.mag-live-meta { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 12px; letter-spacing: .02em; text-shadow: none; }
.mag-live-meta [data-mag-counter] { color: #ffffffb8; }
.mag-live-tools { display: flex; align-items: center; gap: 4px; }
.mag-live-viewer .mag-live-copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; border-radius: 20px; color: #fff; background: #181816a6; white-space: nowrap; font-size: 12px; }
.mag-live-copy svg { width: 18px; height: 18px; }
.mag-live-volume { position: relative; }
/* Visible by default, including phones, tablets and touch-only computers. */
.mag-live-viewer .mag-live-volume, .mag-live-viewer [data-mag-pause] { opacity: 1; pointer-events: auto; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .mag-live-volume, .mag-live-viewer [data-mag-pause] { transition: opacity 180ms ease; }
  .mag-live-viewer:not(.is-paused):not(.is-controls-hovered):not(.is-volume-open) .mag-live-tools:not(:focus-within) .mag-live-volume,
  .mag-live-viewer:not(.is-paused):not(.is-controls-hovered):not(.is-volume-open) .mag-live-tools:not(:focus-within) [data-mag-pause] { opacity: 0; pointer-events: none; }
}
.mag-live-volume-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; width: 62px; border: 1px solid #ffffff45; border-radius: 12px; background: #20201ff5; color: #fff; box-shadow: none; }
.mag-live-volume-panel label { display: grid; justify-items: center; gap: 7px; font-size: 12px; font-weight: 400; }
.mag-live-volume-panel input[type="range"] { display: block; writing-mode: vertical-lr; direction: rtl; appearance: auto; width: 40px; height: 128px; padding: 0; margin: 0; border: 0; accent-color: #f3eee7; cursor: ns-resize; touch-action: none; }
.mag-live-volume-panel output { font-size: 12px; font-variant-numeric: tabular-nums; }
.mag-live-stage { position: absolute; inset: 0; overflow: clip; touch-action: none; user-select: none; -webkit-user-select: none; }
.mag-live-axis { position: absolute; z-index: 0; top: 50%; left: 24px; right: 24px; height: 2px; color: var(--constellation-line, rgba(228,198,108,.58)); background: radial-gradient(circle at 1px 1px,currentColor 1px,transparent 1.2px) 0 0 / 11px 2px repeat-x; pointer-events: none; }
.mag-live-axis::before,.mag-live-axis::after { content: ""; position: absolute; top: -3px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.mag-live-axis::before { left: -8px; border-right: 8px solid currentColor; }
.mag-live-axis::after { right: -8px; border-left: 8px solid currentColor; }
.mag-live-slides { position: absolute; z-index: 1; inset: 0; }
.mag-live-slide {
  position: absolute; left: 50%; top: var(--mag-frame-inset, 0px); height: var(--mag-frame-height, 100%); width: var(--mag-frame-width);
  border-radius: 14px; overflow: hidden; background: transparent;
  /* Composite video before clipping the rounded edge; this solid mask adds no shading. */
  mask-image: linear-gradient(#000, #000);
  transform: translateX(-50%) scale(.68); opacity: 0; pointer-events: none;
  transition: transform 460ms cubic-bezier(.22,.7,.2,1), opacity 360ms ease, filter 460ms ease;
}
.mag-live-slide img, .mag-live-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mag-live-slide video { z-index: 1; background: var(--surface-dark, #2f2925); }
/* Duo clips the media itself: its landscape slide also contains empty layout space. */
html:is([data-duo-device], [data-duo-player-layout="folded-top"], [data-duo-listing-edge]) .mag-live-slide > :is(img, video) {
  border-radius: 26px;
  clip-path: inset(0 round 26px);
}
/* The video owns its loading poster. Do not composite a second still beneath
   the moving frame, where fractional Safari edges can expose its pixels. */
.mag-live-slide:has(> video) > img { visibility: hidden; }
.mag-live-slide.is-current { transform: translateX(-50%) scale(1); opacity: 1; filter: none; z-index: 3; pointer-events: auto; box-shadow: none; }
.mag-live-slide.is-before { transform: translateX(calc(-50% - var(--mag-side-offset, 400px))) scale(var(--mag-side-scale, .4)); opacity: 1; filter: brightness(.4); pointer-events: auto; z-index: 2; cursor: pointer; }
.mag-live-slide.is-after { transform: translateX(calc(-50% + var(--mag-side-offset, 400px))) scale(var(--mag-side-scale, .4)); opacity: 1; filter: brightness(.4); pointer-events: auto; z-index: 2; cursor: pointer; }
.mag-live-slide.is-distant-before { transform: translateX(-240%) scale(.6); }
.mag-live-slide.is-distant-after { transform: translateX(140%) scale(.6); }
.mag-live-slide-caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: calc(30px / var(--mag-side-scale, .4)) calc(10px / var(--mag-side-scale, .4)) calc(12px / var(--mag-side-scale, .4)); color: #fff; font-size: calc(12px / var(--mag-side-scale, .4)); line-height: 1.5; background: none; }
.mag-live-slide-caption span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-live-slide.is-current .mag-live-slide-caption { display: none; }
.mag-live-viewer .mag-live-arrow { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #aaa39a; border-radius: 50%; background: #b8b2aa; color: #26231f; box-shadow: none; line-height: 1; }
.mag-live-arrow svg { display: block; width: 20px; height: 20px; }
.mag-live-viewer .mag-live-arrow:disabled { visibility: hidden; }
.mag-live-viewer .mag-live-arrow:hover { background: #c5bfb7; }
@media (hover: none) { .mag-live-viewer .mag-live-arrow:hover { background: #b8b2aa; } }
.mag-live-prev { right: calc(50% + var(--mag-frame-width) / 2 + 18px); }
.mag-live-next { left: calc(50% + var(--mag-frame-width) / 2 + 18px); }
.mag-live-caption { position: absolute; z-index: 6; left: 0; bottom: 0; width: 100%; padding: 24px 22px 18px; text-align: left; color: #fff; background: none; pointer-events: none; }
.mag-live-caption > * { pointer-events: auto; }
.mag-live-caption h1 { margin: 0 0 10px; font-size: 20px; line-height: 1.5; font-weight: 400; text-shadow: none; }
.mag-live-caption-preview { position: relative; }
.mag-live-caption [data-mag-excerpt] { max-width: 100%; margin: 0 0 8px; color: var(--mag-ink, #f3eee7); font-family: var(--sans-light, var(--sans)); font-size: var(--text-readable-small-size, 13px); line-height: 1.7; font-weight: var(--text-body-weight, 400); text-shadow: none; }
.mag-live-caption-copy { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.mag-live-caption [data-mag-more] { float: right; padding: 2px 0 4px 12px; margin-top: -4px; border: 0; background: transparent; font-family: var(--sans-light, var(--sans)); font-size: 14px; font-weight: 400; line-height: 1.5; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mag-live-description { position: fixed; inset: 0; box-sizing: border-box; margin: auto; width: min(560px,calc(100vw - 32px)); max-height: min(80dvh,calc(100dvh - 48px)); overflow: hidden; border: 1px solid var(--line,rgba(41,35,31,.14)); border-radius: 12px; background: var(--paper,#f7f3ec); color: var(--copy-ink,#514943); padding: 64px 40px 40px; box-shadow: none; }
.mag-live-description[open] { display: flex; flex-direction: column; }
.mag-live-description::backdrop { background: #090a098c; }
.mag-live-description > div { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; line-break: strict; text-wrap: wrap; font-family: var(--sans-light, var(--sans)); font-size: var(--text-size-story-caption, 18px); font-weight: 400; line-height: 1.85; }
.mag-live-viewer .mag-live-description > .dialog-close { position: absolute; right: 18px; top: 12px; display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; padding: 0; border: 0; outline: none; border-radius: 50%; background: transparent; color: var(--muted,#70665f); font-size: 0; box-shadow: none; }
.mag-live-description > .dialog-close::before,.mag-live-description > .dialog-close::after { content: ''; position: absolute; width: 13px; height: 1px; border-radius: 999px; background: currentColor; }
.mag-live-description > .dialog-close::before { transform: rotate(45deg); }
.mag-live-description > .dialog-close::after { transform: rotate(-45deg); }
.mag-live-description > .dialog-close:focus-visible { outline: none; color: var(--accent,#8f4054); }
@media (max-width: 760px) {
  .mag-live-description { padding: 64px 28px 36px; }
  .mag-live-viewer .mag-live-description > .dialog-close { right: 12px; }
}
.mag-live-caption nav { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; line-height: 1.4; padding: 0; margin: 0; }
.mag-live-caption a { color: #f0dfc6; text-decoration: none; text-shadow: none; }
.mag-live-message { position: absolute; z-index: 10; top: 55%; left: 50%; transform: translate(-50%,-50%); max-width: 80vw; padding: 12px 18px; border-radius: 10px; background: #171714ed; text-align: center; font-size: 14px; pointer-events: none; }
.mag-live-message:empty { display: none; }
.mag-live-end { position: absolute; z-index: 8; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: color-mix(in srgb, var(--surface-dark, #2f2925) 94%, transparent); }
.mag-live-end button { padding: 12px 28px; border: 1px solid #ceb695; border-radius: 30px; background: #ceb695; color: #252420; }
.mag-live-end a { color: var(--mag-accent); font-size: 14px; }
@media (max-width: 760px) {
  .mag-live-viewer { --mag-frame-width: 100%; }
  .mag-live-axis { display: none; }
  .mag-live-chrome { top: calc(max(8px, env(safe-area-inset-top)) + 18px); padding: 0 14px; justify-content: flex-end; background: none; }
  .mag-live-brand { display: none; }
  .mag-live-viewer [data-mag-close], .mag-live-viewer [data-mag-close]:focus-visible { border: 0; outline: none; box-shadow: none; }
  .mag-live-viewer [data-mag-close]:focus-visible svg { color: var(--mag-accent); }
  .mag-live-current { top: max(8px, env(safe-area-inset-top)); padding: 0 14px 20px; }
  .mag-live-toolbar { min-height: 40px; padding-right: 180px; }
  .mag-live-meta { gap: 8px; font-size: 11px; }
  .mag-live-slide { border-radius: 0; }
  .mag-live-slide.is-before { transform: translateX(-150%); opacity: 1; filter: none; }
  .mag-live-slide.is-after { transform: translateX(50%); opacity: 1; filter: none; }
  .mag-live-slide.is-distant-before { transform: translateX(-250%); }
  .mag-live-slide.is-distant-after { transform: translateX(150%); }
  .mag-live-viewer .mag-live-arrow { display: none; }
  .mag-live-caption { padding: 32px 18px max(18px, env(safe-area-inset-bottom)); border-radius: 0; }
  .mag-live-caption [data-mag-excerpt] { margin-bottom: 2px; }
  .mag-live-caption h1 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .mag-live-slide { transition: none; } }
/* Ordinary portrait phones: lower the copy slightly without changing its placement rules. */
@media (max-width: 620px) and (orientation: portrait) {
  html:is([data-mag-phone],[data-duo-listing-edge]) .mag-live-caption { padding-bottom: calc(max(18px, env(safe-area-inset-bottom)) - 5px); }
}
@media (max-width: 360px) { .mag-live-meta { flex-direction: column; align-items: flex-start; gap: 2px; } }
@media (max-width: 1000px) and (min-width: 761px) {
  .mag-live-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
}

@media (max-width: 620px) {
  .mag-live-card .mag-live-card-corner { right: 4px; bottom: 4px; gap: 4px; align-items: flex-end; }
  .mag-live-card .mag-live-card-sound { position: relative; box-sizing: border-box; width: 26px; height: 26px; padding: 5px; }
  .mag-live-card .mag-live-card-sound::before { content: ""; position: absolute; inset: -7px; }
  .mag-live-card .mag-live-card-sound svg { width: 14px; height: 14px; }
}

/* Approved phone landscape, independent of private Duo layouts. */
    html[data-mag-phone-landscape][data-mag-live-open="true"],
    html[data-mag-phone-landscape][data-mag-live-open="true"] body {
      background: var(--surface-dark, #2f2925);
    }
    html[data-mag-phone-landscape][data-mag-live-open="true"] body > :not(#magLiveViewer) {
      visibility: hidden;
    }
    html[data-mag-phone-landscape] #magLiveViewer::backdrop {
      background: var(--surface-dark, #2f2925);
    }
    html[data-mag-phone-landscape] .mag-live-viewer {
      height: 100dvh;
    }
    html[data-mag-phone-landscape] .mag-live-slide > img,
    html[data-mag-phone-landscape] .mag-live-slide > video {
      left: 40px; top: 12px;
      width: var(--mag-phone-media-width); height: calc(100% - 12px);
      object-fit: contain; object-position: center;
      background: var(--surface-dark, #2f2925);
    }
    html[data-mag-phone-landscape] .mag-live-overlay-plane {
      left: calc(40px + var(--mag-phone-media-width) / 2);
      top: calc(50% + 6px);
      transform: translate(-50%, -50%) scale(var(--mag-phone-overlay-scale, 1));
    }
    html[data-mag-phone-landscape] .mag-live-current {
      left: calc(var(--mag-phone-media-width) + 98px); top: 12px;
      width: calc(100% - var(--mag-phone-media-width) - 118px);
      padding: 0; background: none; display: flex; flex-direction: column;
    }
    html[data-mag-phone-landscape] .mag-live-toolbar {
      min-height: 24px; padding: 0; order: 0;
    }
    html[data-mag-phone-landscape] .mag-live-progress {
      order: 1;
    }
    html[data-mag-phone-landscape] .mag-live-chrome {
      left: calc(var(--mag-phone-media-width) + 98px); right: 20px;
      top: 62px; padding: 0; justify-content: flex-start;
    }
    html[data-mag-phone-landscape] .mag-live-caption {
      left: calc(var(--mag-phone-media-width) + 98px);
      width: calc(100% - var(--mag-phone-media-width) - 118px);
      top: 102px; bottom: 12px; padding: 0;
      display: grid; grid-template-rows: calc(var(--mag-phone-divider-y) - 102px) minmax(0, 1fr); gap: 0;
      background: none;
    }
    html[data-mag-phone-landscape] .mag-live-caption-preview {
      display: flow-root; grid-row: 1; align-self: center;
    }
    html[data-mag-phone-landscape] .mag-live-caption-copy {
      -webkit-line-clamp: var(--mag-phone-copy-lines, 4);
    }
    html[data-mag-phone-landscape] .mag-live-caption [data-mag-excerpt] {
      margin-bottom: 0; font-size: 16px; line-height: 1.625;
    }
    html[data-mag-phone-landscape] .mag-live-caption [data-mag-more] {
      margin-top: 2px; padding: 0;
    }
    html[data-mag-phone-landscape] .mag-live-caption nav {
      position: relative; gap: 5px 12px; grid-row: 2; align-self: start;
      margin-top: 0; padding-top: 18px;
    }
    html[data-mag-phone-landscape] .mag-live-caption nav::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: radial-gradient(circle at 1px 1px, var(--mag-accent, #ceb695) 1px, transparent 1.2px) 0 0 / 10px 2px repeat-x;
      opacity: .65; pointer-events: none;
    }
    html[data-mag-phone-landscape] .mag-live-arrow {
      display: grid; top: var(--mag-phone-arrow-y, 66%); bottom: auto; transform: translateY(-50%);
      background: #b8b2aa; border-color: #aaa39a; color: #26231f;
    }
    html[data-mag-phone-landscape] .mag-live-arrow:hover {
      background: #c5bfb7;
    }
    @media (hover: none) {
      html[data-mag-phone-landscape] .mag-live-arrow:hover { background: #b8b2aa; }
    }
    html[data-mag-phone-landscape] .mag-live-prev {
      left: 2px; right: auto;
    }
    html[data-mag-phone-landscape] .mag-live-next {
      left: calc(var(--mag-phone-media-width) + 50px);
    }
    /* Phone landscape keeps both columns inside the display cutouts. */
    html[data-mag-phone-landscape] .mag-live-stage {
      left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px);
    }
    html[data-mag-phone-landscape] .mag-live-slide {
      width: 100% !important; height: 100%; top: 0; border-radius: 0;
    }
    html[data-mag-phone-landscape] .mag-live-slide.is-before { transform: translateX(-150%); }
    html[data-mag-phone-landscape] .mag-live-slide.is-after { transform: translateX(50%); }
    html[data-mag-phone-landscape] :is(.mag-live-axis,.mag-live-brand) { display: none; }
    html[data-mag-phone-landscape] .mag-live-meta { flex-direction: row; align-items: center; font-size: 11px; }
    html[data-mag-phone-landscape] .mag-live-chrome {
      left: calc(env(safe-area-inset-left, 0px) + var(--mag-phone-media-width) + 98px);
      right: calc(env(safe-area-inset-right, 0px) + 20px);
    }
    html[data-mag-phone-landscape] :is(.mag-live-volume,[data-mag-pause]) { opacity: 1; pointer-events: auto; }
    html[data-mag-phone-landscape] .mag-live-caption {
      bottom: max(12px, env(safe-area-inset-bottom, 0px));
      overflow-y: auto; touch-action: pan-y;
    }

/* Desktop/tablet readability: close-set text shadow, never a media gradient.
   Phone and Duo retain their existing caption treatment. */

html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-caption-copy {
  display: -webkit-box;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Tablet metadata stays aligned with the three controls in either orientation. */
html[data-tablet-layout]:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer .mag-live-meta {
  flex-direction: row; align-items: center; gap: 12px; white-space: nowrap;
  font-size: 14px; font-weight: 500; line-height: 1.4;
  padding: 0; border-radius: 0; background: transparent;
  color: #fff; text-shadow: none;
}
html[data-tablet-layout]:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer .mag-live-toolbar { align-items: center; gap: 12px; }



/* Per-media desktop/tablet settings. Phone and Duo never consume these variables. */
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) .mag-live-meta,
.mag-studio .mag-studio-surface:not(.is-phone) .mag-live-meta,
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) [data-mag-counter],
.mag-studio .mag-studio-surface:not(.is-phone) [data-mag-counter],
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) #studioDate,
.mag-studio .mag-studio-surface:not(.is-phone) #studioDate { color:var(--mag-editor-meta-color,#fff);text-shadow:var(--mag-editor-shadow,none); }
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) .mag-live-caption [data-mag-excerpt],
.mag-studio .mag-studio-surface:not(.is-phone) .mag-live-caption [data-mag-excerpt],
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) .mag-live-caption h1,
.mag-studio .mag-studio-surface:not(.is-phone) .mag-live-caption h1 { color:var(--mag-editor-body-color,#f3eee7);text-shadow:var(--mag-editor-shadow,none); }
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) .mag-live-caption a,
.mag-studio .mag-studio-surface:not(.is-phone) .mag-live-caption a { color:var(--mag-editor-tag-color,#f0dfc6);text-shadow:var(--mag-editor-shadow,none); }
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) .mag-live-caption [data-mag-more],
.mag-studio .mag-studio-surface:not(.is-phone) .mag-live-caption [data-mag-more] { color:var(--mag-editor-more-color,#fff);text-shadow:var(--mag-editor-shadow,none); }
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) .mag-live-caption,
.mag-studio .mag-studio-surface:not(.is-phone) .mag-live-caption { padding-left:var(--mag-editor-inset,22px);padding-right:var(--mag-editor-inset,22px);padding-bottom:var(--mag-editor-bottom,10px); }
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) .mag-live-caption [data-mag-excerpt],
.mag-studio .mag-studio-surface:not(.is-phone) .mag-live-caption [data-mag-excerpt] { margin-bottom:var(--mag-editor-gap,4px); }
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) .mag-live-current,
.mag-studio .mag-studio-surface:not(.is-phone) .mag-live-current { transform:translateY(var(--mag-editor-top,0px)); }

/* Metadata outside the media, while controls stay inside the upper-right corner. */
html .mag-live-viewer[data-meta-outside] .mag-live-stage > .mag-live-meta,
.mag-studio .mag-studio-surface[data-meta-outside] > #studioDate {
  position:absolute;z-index:7;left:calc(50% - var(--mag-frame-width) / 2 + 12px);
  top:calc(var(--mag-frame-inset) - 26px);height:20px;line-height:20px;
  display:flex;flex-direction:row;align-items:center;gap:12px;padding:0;
  font-size:14px;background:none;text-shadow:none;
}
.mag-live-viewer[data-meta-outside] .mag-live-toolbar,
.mag-studio-surface[data-meta-outside] .mag-live-toolbar { justify-content:flex-end; }
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer[data-meta-outside] .mag-live-caption,
.mag-studio .mag-studio-surface[data-meta-outside] .mag-live-caption {
  padding-top:64px;
  background:none;
}
/* A separate scrim fades gently above the text without moving the text itself. */
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer:not(.mag-studio) .mag-live-caption::before,
.mag-studio .mag-studio-surface:not(.is-phone) .mag-live-caption::before {
  content:"";position:absolute;inset:-60px 0 0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.025) 16%,rgba(0,0,0,.10) 32%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.46) 70%,rgba(0,0,0,.64) 86%,rgba(0,0,0,.76) 100%);
}
.mag-live-caption[data-caption-expanded="true"] .mag-live-caption-copy {
  display:block !important;white-space:pre-wrap !important;-webkit-line-clamp:unset !important;
  overflow:visible;text-overflow:clip;animation:mag-caption-rise .18s ease-out;
}
@keyframes mag-caption-rise { from { opacity:.6;transform:translateY(6px); } to { opacity:1;transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .mag-live-caption[data-caption-expanded="true"] .mag-live-caption-copy { animation:none; } }
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer[data-meta-outside] .mag-live-meta,
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer[data-meta-outside] [data-mag-counter] { text-shadow:none; }

/* Outside metadata is deliberately secondary to the video. */
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge]) .mag-live-viewer[data-meta-outside] .mag-live-meta,
.mag-studio .mag-studio-surface[data-meta-outside] > #studioDate {
  font-size:12px;font-weight:400;opacity:.5;
}
/* Keep toolbar geometry stable; dates remain in data, never in player UI. */
.mag-live-viewer .mag-live-meta,
.mag-studio #studioDate { visibility:hidden !important;pointer-events:none; }
/* This approved two-line excerpt leaves the lower-right LINE reply unobscured. */
html:not([data-mag-phone]):not([data-duo-device]:not([data-duo-open-layout])):not([data-duo-player-layout]):not([data-duo-listing-edge])
[data-current-story="content-1789017813603-bb794b"] .mag-live-caption-copy {
  display:-webkit-box;white-space:pre-wrap;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;text-overflow:clip;
}

.mag-live-viewer [data-mag-close],
.mag-live-viewer [data-mag-close]:is(:hover,:focus,:focus-visible) {border:0;outline:none;box-shadow:none;}
.mag-live-viewer [data-mag-close]:focus-visible svg {color:var(--mag-accent);}