/* MRKeliawebModernBlog 3.1 article reading layer: byline, floating rail, listen player, reading tools, magnifier,
   comments and the copyright line. Loaded on article pages only. Colours come from the theme tokens, so the active
   skin (or this module's "Look and theme" page) decides them. Motion stops for visitors who ask for less motion. */
.eb-module { --eb-glass: color-mix(in srgb, var(--eb-surface, #fff) 78%, transparent); --eb-lift: 0 18px 50px -18px rgb(10 20 40 / .35), 0 2px 8px -2px rgb(10 20 40 / .12); --eb-spring: cubic-bezier(.23, 1, .32, 1); }
.eb-module .eb-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eb-module .eb-i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; inline-size: 1.15em; block-size: 1.15em; flex: none; }

/* ---------- avatars ---------- */
.eb-module .eb-ava { --h: 210; display: inline-grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 800; font-size: 1rem;
  background: linear-gradient(135deg, hsl(var(--h) 70% 58%), hsl(calc(var(--h) + 40) 70% 45%)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--eb-surface, #fff) 85%, transparent), 0 6px 16px -6px hsl(var(--h) 60% 40% / .6); }
.eb-module .eb-ava img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.eb-module .eb-ava--lg { inline-size: 46px; block-size: 46px; font-size: 1.1rem; }

/* ---------- byline ---------- */
.eb-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.2rem; margin: 0 0 1.4rem; padding: .85rem 1rem; border-radius: calc(var(--eb-radius, 14px) + 4px);
  background: var(--eb-glass); border: 1px solid color-mix(in srgb, var(--eb-text, #111) 8%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  animation: eb-rise .45s var(--eb-ease, ease) both; }
.eb-byline__who { display: flex; align-items: center; gap: .75rem; min-inline-size: 0; }
.eb-byline__text { display: grid; gap: .15rem; min-inline-size: 0; }
.eb-byline__name { font-size: .98rem; color: var(--eb-text); }
.eb-byline__meta { display: flex; flex-wrap: wrap; gap: .1rem .55rem; color: var(--eb-muted); font-size: .8rem; }
.eb-byline__meta > * + *::before { content: ""; display: inline-block; inline-size: 4px; block-size: 4px; border-radius: 50%; background: currentColor; opacity: .45; margin-inline-end: .55rem; vertical-align: middle; }
.eb-byline__acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.eb-module .eb-chipbtn { appearance: none; display: inline-flex; align-items: center; gap: .45rem; min-block-size: 40px; padding: .45rem .95rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 700;
  color: var(--eb-text); background: color-mix(in srgb, var(--eb-brand) 9%, var(--eb-surface, #fff)); border: 1px solid color-mix(in srgb, var(--eb-brand) 22%, transparent);
  transition: transform .2s var(--eb-spring), background-color .25s ease, box-shadow .25s ease; }
@media (hover: hover) and (pointer: fine) { .eb-module .eb-chipbtn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--eb-brand) 16%, var(--eb-surface, #fff)); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--eb-brand) 70%, transparent); } }
.eb-module .eb-chipbtn:active { transform: scale(.96); }
.eb-module .eb-chipbtn--listen { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--eb-brand), var(--eb-accent, var(--eb-brand))); background-size: 180% 100%; }
.eb-module .eb-chipbtn--listen:hover { background-position: 100% 0; color: #fff; }
.eb-eq { display: none; align-items: flex-end; gap: 2px; block-size: 14px; }
.eb-eq i { inline-size: 3px; border-radius: 2px; background: currentColor; animation: eb-eq 1s ease-in-out infinite; }
.eb-eq i:nth-child(2) { animation-delay: -.3s; } .eb-eq i:nth-child(3) { animation-delay: -.6s; }
.is-playing .eb-eq { display: inline-flex; }
.eb-gpill { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-block-size: 40px; padding: .4rem 1rem; border-radius: 999px; font-size: .84rem; font-weight: 800; text-decoration: none !important;
  color: var(--eb-text) !important; background: var(--eb-surface, #fff); isolation: isolate; transition: transform .2s var(--eb-spring), box-shadow .3s ease; }
.eb-gpill::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--eb-ga, 0deg), #4285F4, #34A853, #FBBC05, #EA4335, #4285F4); animation: eb-spin 6s linear infinite; }
.eb-gpill::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--eb-surface, #fff); }
@media (hover: hover) and (pointer: fine) { .eb-gpill:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgb(66 133 244 / .8); } }
.eb-gpill__g { inline-size: 18px; block-size: 18px; }
@property --eb-ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- floating rail ---------- */
.eb-reader:empty { display: none; }
.eb-module .eb-rail { z-index: 40; display: flex; gap: .3rem; align-items: center; padding: .4rem; border-radius: 999px; background: var(--eb-glass); border: 1px solid color-mix(in srgb, var(--eb-text, #111) 9%, transparent);
  box-shadow: var(--eb-lift); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.eb-module .eb-rail__btn { appearance: none; position: relative; display: inline-grid; place-items: center; inline-size: 44px; min-block-size: 44px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; font: inherit;
  color: var(--eb-text); background: transparent; text-decoration: none !important; transition: transform .2s var(--eb-spring), background-color .25s ease, color .25s ease; }
.eb-module .eb-rail__btn .eb-i { inline-size: 21px; block-size: 21px; transition: transform .2s var(--eb-spring); }
.eb-module .eb-rail__btn:hover { background: color-mix(in srgb, var(--eb-brand) 12%, transparent); color: var(--eb-brand); }
@media (hover: hover) and (pointer: fine) { .eb-module .eb-rail__btn:hover .eb-i { transform: scale(1.14) rotate(-6deg); } }
.eb-module .eb-rail__btn:active { transform: scale(.9); }
.eb-module .eb-rail__btn[aria-pressed="true"], .eb-module .eb-rail__btn.is-recorded, .eb-module .eb-rail__btn.is-playing { color: #fff; background: var(--eb-brand); }
.eb-module .eb-rail__btn--like[aria-pressed="true"], .eb-module .eb-rail__btn--like.is-recorded { background: #e0245e; }
.eb-module .eb-rail__btn[aria-pressed="true"] .eb-i, .eb-module .eb-rail__btn.is-recorded .eb-i { fill: currentColor; }
.eb-module .eb-rail__n { font-size: .68rem; font-weight: 800; line-height: 1; color: inherit; font-variant-numeric: tabular-nums; }
.eb-module .eb-rail__n:empty { display: none; }
.eb-module .eb-rail__btn::after { content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; translate: -6px -50%; white-space: nowrap; pointer-events: none; opacity: 0;
  padding: .35rem .6rem; border-radius: 8px; background: var(--eb-text, #111); color: var(--eb-surface, #fff); font-size: .75rem; font-weight: 700; transition: opacity .2s ease, translate .2s var(--eb-spring); }
.eb-module .eb-rail__btn:is(:hover, :focus-visible)::after { opacity: 1; translate: 0 -50%; }
.eb-module .eb-rail__track { position: relative; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--eb-text, #111) 10%, transparent); }
.eb-module .eb-rail__fill { position: absolute; inset: 0; background: linear-gradient(var(--eb-accent, var(--eb-brand)), var(--eb-brand)); transform-origin: top; transform: scaleY(var(--p, 0)); }
.eb-module .is-pop { animation: eb-pop .5s var(--eb-spring); }

/* Wide screens: a column beside the text that stays in view while you read. */
@media (min-width: 1024px) {
  .eb-module .eb-article__body--rail { display: grid; grid-template-columns: minmax(0, 1fr) 60px; column-gap: clamp(16px, 2.5vw, 34px); align-items: start; }
  .eb-module .eb-article__body--rail > :not(.eb-reader) { grid-column: 1; }
  .eb-module .eb-article__body--rail > .eb-reader { grid-column: 2; grid-row: 1 / span 20; position: sticky; top: calc(var(--eb-sticky-top, var(--eb-top-offset, 0px)) + 96px); align-self: start; }
  .eb-module .eb-rail { flex-direction: column; border-radius: 30px; animation: eb-slide-in .4s var(--eb-ease, ease) .2s both; }
  .eb-module .eb-rail__btn { min-block-size: 48px; gap: 1px; }
  .eb-module .eb-rail__btn:has(.eb-rail__n:not(:empty)) { padding-block: 6px; }
  .eb-module .eb-rail__track { inline-size: 3px; block-size: 90px; margin-block: .35rem .5rem; }
  .eb-module[dir="rtl"] .eb-rail__btn::after { inset-inline-start: auto; inset-inline-end: calc(100% + 10px); translate: 6px -50%; }
  .eb-module[dir="rtl"] .eb-rail__btn:is(:hover, :focus-visible)::after { translate: 0 -50%; }
  .eb-module[dir="ltr"] .eb-rail__btn::after, .eb-module:not([dir]) .eb-rail__btn::after { inset-inline-start: auto; inset-inline-end: calc(100% + 10px); }
}
/* Phones and tablets: a floating bar at the bottom that slides in once you start reading. */
@media (max-width: 1023.98px) {
  .eb-module .eb-rail { position: fixed; inset-block-end: calc(max(14px, env(safe-area-inset-bottom)) + var(--eb-bottom-offset, 0px)); inset-inline-start: 50%; translate: -50% 160%; max-inline-size: calc(100vw - 92px); overflow-x: auto; scrollbar-width: none;
    transition: translate .3s var(--eb-spring), opacity .3s ease; opacity: 0; }
  .eb-module[dir="rtl"] .eb-rail { translate: 50% 160%; }
  .eb-module .eb-rail.is-shown { translate: -50% 0; opacity: 1; }
  .eb-module[dir="rtl"] .eb-rail.is-shown { translate: 50% 0; }
  .eb-module .eb-rail__btn { inline-size: 42px; min-block-size: 42px; grid-auto-flow: column; gap: 3px; }
  .eb-module .eb-rail__btn:has(.eb-rail__n:not(:empty)) { inline-size: auto; padding-inline: 10px; }
  .eb-module .eb-rail__btn::after { display: none; }
  .eb-module .eb-rail__track { position: absolute; inset: auto 18px 3px; block-size: 3px; }
  .eb-module .eb-rail__fill { transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--eb-brand), var(--eb-accent, var(--eb-brand))); }
  .eb-module[dir="rtl"] .eb-rail__fill { transform-origin: right; }
}

.eb-module .eb-rail__btn--mode .eb-i--moon, .eb-module .eb-rail__btn--mode[aria-pressed="true"] .eb-i--sun { display: none; }
.eb-module .eb-rail__btn--mode[aria-pressed="true"] .eb-i--moon { display: block; fill: currentColor; }
.eb-module .eb-rail__btn--mode[aria-pressed="true"] { background: #2b2f45; color: #ffd76a; }
.eb-module.eb-mode-anim, .eb-module.eb-mode-anim * { transition: background-color .5s ease, color .5s ease, border-color .5s ease !important; }
/* ---------- listen player ---------- */
.eb-module .eb-player { position: fixed; z-index: 60; inset-block-end: calc(max(16px, env(safe-area-inset-bottom)) + var(--eb-bottom-offset, 0px)); inset-inline: 50% auto; translate: -50% 140%; opacity: 0; display: flex; align-items: center; gap: .55rem;
  inline-size: min(560px, calc(100vw - 24px)); padding: .55rem .7rem .75rem; border-radius: 22px; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, color-mix(in srgb, var(--eb-brand) 88%, #000), color-mix(in srgb, var(--eb-accent, var(--eb-brand)) 80%, #000)); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .55);
  transition: translate .3s var(--eb-spring), opacity .3s ease; }
.eb-module[dir="rtl"] .eb-player { translate: 50% 140%; }
.eb-module .eb-player.is-on { translate: -50% 0; opacity: 1; }
.eb-module[dir="rtl"] .eb-player.is-on { translate: 50% 0; }
.eb-player__wave { display: inline-flex; align-items: center; gap: 3px; block-size: 26px; padding-inline: .3rem; }
.eb-player__wave i { inline-size: 3px; block-size: 100%; border-radius: 3px; background: #fff; animation: eb-eq 1.1s ease-in-out infinite; transform-origin: center; }
.eb-player__wave i:nth-child(2) { animation-delay: -.2s; } .eb-player__wave i:nth-child(3) { animation-delay: -.5s; } .eb-player__wave i:nth-child(4) { animation-delay: -.7s; } .eb-player__wave i:nth-child(5) { animation-delay: -.35s; }
.eb-player.is-paused .eb-player__wave i { animation-play-state: paused; }
.eb-player__text { display: grid; flex: 1; min-inline-size: 0; line-height: 1.25; }
.eb-player__text b { font-size: .92rem; } .eb-player__text small { font-size: .74rem; opacity: .85; }
.eb-module .eb-player__btn { appearance: none; display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgb(255 255 255 / .16); transition: transform .2s var(--eb-spring), background-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .eb-module .eb-player__btn:hover { background: rgb(255 255 255 / .28); transform: scale(1.08); } }
.eb-module .eb-player__btn svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.eb-module .eb-player__btn--main { inline-size: 48px; block-size: 48px; color: var(--eb-brand); background: #fff; }
.eb-module .eb-player__btn--main:hover { background: #fff; }
.eb-module .eb-player__speed select { appearance: none; border: 0; border-radius: 999px; padding: .45rem .7rem; font: inherit; font-size: .8rem; font-weight: 800; color: #fff; background: rgb(255 255 255 / .16); cursor: pointer; }
.eb-module .eb-player__speed option { color: #111; }
.eb-player__bar { position: absolute; inset: auto 0 0; block-size: 4px; background: rgb(255 255 255 / .2); }
.eb-player__bar span { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .5s ease; }
.eb-module[dir="rtl"] .eb-player__bar span { transform-origin: right; }
.eb-module .eb-speaking { border-radius: 8px; background: color-mix(in srgb, var(--eb-brand) 12%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--eb-brand) 12%, transparent); transition: background-color .4s ease, box-shadow .4s ease; }

.eb-module[dir="rtl"] .eb-player__btn[data-a="next"] svg { transform: scaleX(-1); }
@media (max-width: 1023.98px) { .eb-module.eb-listening .eb-rail, .eb-module .eb-listening .eb-rail { inset-block-end: calc(max(16px, env(safe-area-inset-bottom)) + 84px + var(--eb-bottom-offset, 0px)); } }
/* ---------- reading tools panel ---------- */
.eb-module .eb-rtools { position: fixed; z-index: 70; inline-size: 288px; padding: .9rem; border-radius: 20px; color: var(--eb-text); background: var(--eb-surface, #fff); border: 1px solid color-mix(in srgb, var(--eb-text, #111) 10%, transparent);
  box-shadow: var(--eb-lift); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transform-origin: top center; transition: opacity .25s ease, transform .22s var(--eb-spring), visibility 0s .25s; }
.eb-module .eb-rtools.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .22s var(--eb-spring); }
@media (max-width: 720px) { .eb-module .eb-rtools { inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px; inline-size: auto; transform: translateY(40px); border-radius: 24px 24px 20px 20px; } }
.eb-rtools__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .7rem; }
.eb-module .eb-rtools__x { appearance: none; inline-size: 32px; block-size: 32px; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.2rem; color: var(--eb-muted); background: color-mix(in srgb, var(--eb-text, #111) 6%, transparent); }
.eb-rtools__size { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .6rem; margin-block-end: .5rem; border-radius: 14px; background: color-mix(in srgb, var(--eb-brand) 6%, transparent); font-size: .86rem; font-weight: 700; }
.eb-rtools__size > div { display: flex; align-items: center; gap: .35rem; }
.eb-module .eb-rtools__size button { appearance: none; inline-size: 38px; block-size: 38px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 900; color: var(--eb-text); background: var(--eb-surface, #fff); box-shadow: 0 2px 8px -3px rgb(0 0 0 / .25); transition: transform .3s var(--eb-spring); }
.eb-module .eb-rtools__size button:active { transform: scale(.88); }
.eb-module .eb-rtools__size button[data-k="plus"] { font-size: 1.15rem; }
.eb-rtools__size output { min-inline-size: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.eb-module .eb-rtools__opt { appearance: none; display: flex; align-items: center; gap: .6rem; inline-size: 100%; min-block-size: 46px; padding: .4rem .6rem; margin-block-start: .3rem; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 700; text-align: start; color: var(--eb-text); background: transparent; transition: background-color .2s ease; }
.eb-module .eb-rtools__opt:hover { background: color-mix(in srgb, var(--eb-text, #111) 5%, transparent); }
.eb-rtools__ico { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 10px; background: color-mix(in srgb, var(--eb-brand) 10%, transparent); color: var(--eb-brand); font-size: 1.05rem; }
.eb-rtools__ico svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.eb-rtools__opt i { margin-inline-start: auto; position: relative; inline-size: 40px; block-size: 24px; border-radius: 999px; background: color-mix(in srgb, var(--eb-text, #111) 18%, transparent); transition: background-color .25s ease; }
.eb-rtools__opt i::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 18px; block-size: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .3); transition: inset-inline-start .2s var(--eb-spring); }
.eb-rtools__opt[aria-pressed="true"] i { background: var(--eb-brand); }
.eb-rtools__opt[aria-pressed="true"] i::after { inset-inline-start: 19px; }
.eb-module .eb-rtools__reset { appearance: none; inline-size: 100%; margin-block-start: .6rem; padding: .55rem; border: 1px dashed color-mix(in srgb, var(--eb-text, #111) 22%, transparent); border-radius: 12px; cursor: pointer; font: inherit; font-size: .8rem; color: var(--eb-muted); background: none; }
/* 3.4: text size and spacing apply to the whole article page (summary, text, FAQ, sources, comments), not only the body text */
.eb-module.eb-module .eb-read-scaled :is(.eb-sg-glance, .eb-prose, .eb-faq, .eb-sources, .eb-media, .eb-comments, .eb-author-card):not(:is(.eb-sg-glance, .eb-prose, .eb-faq, .eb-sources, .eb-media, .eb-comments, .eb-author-card) *) { zoom: var(--eb-read-scale, 1); }
.eb-module.eb-module .eb-read-airy :is(.eb-prose, .eb-faq, .eb-sources, .eb-comments, .eb-sg-glance) { line-height: 2.15; word-spacing: .08em; letter-spacing: .01em; }
.eb-module.eb-module .eb-read-airy :is(.eb-prose, .eb-faq, .eb-comments) :is(p, li) { margin-block-end: 1.4em; }

/* Magnifier lens and the tap sheet. */
.eb-mag-on .eb-prose { cursor: zoom-in; }
.eb-module .eb-lens { position: fixed; z-index: 65; inset: 0 auto auto 0; inline-size: 180px; block-size: 180px; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; scale: .6;
  background: var(--eb-surface, #fff); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--eb-brand), 0 22px 50px -10px rgb(0 0 0 / .45); transition: opacity .2s ease, scale .2s var(--eb-spring); }
.eb-module .eb-lens.is-on { opacity: 1; scale: 1; }
.eb-module .eb-lens__in { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; margin: 0 !important; max-inline-size: none !important; pointer-events: none; }
.eb-module .eb-magsheet { position: fixed; z-index: 75; inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px; max-block-size: 60vh; overflow: auto; padding: 1.2rem 1.2rem 1.4rem; border-radius: 24px;
  color: var(--eb-text); background: var(--eb-surface, #fff); box-shadow: var(--eb-lift); border-block-start: 4px solid var(--eb-brand); transform: translateY(120%); transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.eb-module .eb-magsheet.is-on { transform: none; }
.eb-magsheet__text { font-size: 1.55rem; line-height: 1.9; font-weight: 600; }
.eb-module .eb-magsheet__x { appearance: none; float: inline-end; inline-size: 36px; block-size: 36px; border: 0; border-radius: 50%; cursor: pointer; font-size: 1.3rem; background: color-mix(in srgb, var(--eb-text, #111) 7%, transparent); color: var(--eb-text); }
.eb-module .eb-ruler { position: fixed; z-index: 30; inset: 0 0 auto; block-size: 44px; pointer-events: none; background: color-mix(in srgb, var(--eb-accent, var(--eb-brand)) 13%, transparent); box-shadow: 0 -100vh 0 100vh rgb(0 0 0 / .14); }

/* Toast */
.eb-module .eb-toast { position: fixed; z-index: 80; inset-block-start: max(16px, env(safe-area-inset-top)); inset-inline-start: 50%; translate: -50% -150%; padding: .65rem 1.1rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--eb-surface, #fff); background: var(--eb-text, #111); box-shadow: var(--eb-lift); transition: translate .3s var(--eb-spring); inline-size: max-content; max-inline-size: calc(100vw - 32px); text-align: center; }
.eb-module[dir="rtl"] .eb-toast { translate: 50% -150%; }
.eb-module .eb-toast.is-on { translate: -50% 0; } .eb-module[dir="rtl"] .eb-toast.is-on { translate: 50% 0; }

/* ---------- comments ---------- */
.eb-module .eb-cmt-head h2 { display: flex; align-items: center; gap: .55rem; }
.eb-module .eb-cmt-head h2 .eb-i { color: var(--eb-accent, var(--eb-brand)); inline-size: 1.3em; block-size: 1.3em; }
.eb-cmt-head__n { display: inline-grid; place-items: center; min-inline-size: 1.9em; block-size: 1.9em; padding-inline: .4em; border-radius: 999px; font-size: .7em; color: #fff; background: var(--eb-accent, var(--eb-brand)); }
.eb-module .eb-cmt { border: 0 !important; padding: 0 !important; margin-block: .85rem !important; background: none !important; box-shadow: none !important; animation: eb-rise .6s var(--eb-ease, ease) both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
.eb-module .eb-cmt__card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0; border-radius: calc(var(--eb-radius, 14px) + 2px); background: color-mix(in srgb, var(--eb-text, #111) 4%, var(--eb-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--eb-text, #111) 7%, transparent); transition: transform .2s var(--eb-spring), box-shadow .3s ease, border-color .3s ease; }
@media (hover: hover) and (pointer: fine) { .eb-module .eb-cmt__card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--eb-brand) 30%, transparent); box-shadow: 0 16px 34px -22px rgb(0 0 0 / .45); } }
.eb-module .eb-cmt__who { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1rem .6rem; text-align: center; border-inline-end: 1px solid color-mix(in srgb, var(--eb-text, #111) 8%, transparent); }
.eb-module .eb-cmt__who .eb-ava { inline-size: 52px; block-size: 52px; font-size: 1.2rem; }
.eb-cmt__id { display: grid; gap: .2rem; } .eb-cmt__id b { font-size: .9rem; overflow-wrap: anywhere; } .eb-cmt__id time { color: var(--eb-muted); font-size: .74rem; }
.eb-module .eb-cmt__main { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.2rem .9rem; min-inline-size: 0; }
.eb-module .eb-cmt__text { margin: 0; line-height: 1.85; white-space: normal; overflow-wrap: anywhere; font-weight: 500; }
.eb-cmt__files { display: flex; flex-wrap: wrap; gap: .5rem; } .eb-cmt__files img { border-radius: 10px; block-size: auto; }
.eb-module .eb-cmt__bar { display: flex; align-items: center; gap: .3rem; margin-block-start: auto; padding-block-start: .3rem; }
.eb-module .eb-vote, .eb-module .eb-cmt__reply { appearance: none; display: inline-flex; align-items: center; gap: .35rem; min-block-size: 38px; padding: .3rem .7rem; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
  color: var(--eb-muted); background: transparent; transition: transform .2s var(--eb-spring), color .2s ease, background-color .2s ease; }
.eb-module .eb-vote:hover { color: var(--eb-text); background: color-mix(in srgb, var(--eb-text, #111) 6%, transparent); }
.eb-module .eb-vote:active { transform: scale(.88); }
.eb-module .eb-vote--down .eb-i { transform: scaleY(-1); }
.eb-module .eb-vote--up.is-recorded, .eb-module .eb-vote--up[aria-pressed="true"] { color: #12a150; } .eb-module .eb-vote--down.is-recorded, .eb-module .eb-vote--down[aria-pressed="true"] { color: #e0245e; }
.eb-module .eb-vote.is-recorded .eb-i { fill: currentColor; fill-opacity: .2; }
.eb-module .eb-cmt__reply { margin-inline-start: auto; color: var(--eb-text); background: color-mix(in srgb, var(--eb-text, #111) 7%, transparent); padding-inline: .95rem; }
@media (hover: hover) and (pointer: fine) { .eb-module .eb-cmt__reply:hover { color: #fff; background: var(--eb-brand); transform: translateY(-2px); } }
@media (hover: hover) and (pointer: fine) { .eb-module .eb-cmt__reply:hover .eb-i { animation: eb-nudge .6s ease; } }
.eb-module .eb-cmt__spoiler { border-radius: 12px; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--eb-accent, #f5b301) 10%, transparent) 0 10px, transparent 10px 20px); padding: .7rem .8rem; }
.eb-module .eb-cmt__spoiler summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; list-style: none; font-size: .85rem; color: var(--eb-muted); }
.eb-module .eb-cmt__spoiler summary::-webkit-details-marker { display: none; }
.eb-module .eb-cmt__spoiler summary b { padding: .25rem .8rem; border-radius: 999px; color: #111; background: var(--eb-accent, #f5b301); font-size: .78rem; }
.eb-module .eb-cmt__spoiler[open] summary { display: none; }
.eb-module .eb-cmt__spoiler[open] .eb-cmt__text { animation: eb-unblur .6s ease both; }
.eb-module .eb-comment-thread:empty { display: none; }
.eb-module .eb-cmt .eb-comment-thread { margin-inline-start: clamp(14px, 6%, 56px); padding-inline-start: 14px; border-inline-start: 2px dashed color-mix(in srgb, var(--eb-brand) 25%, transparent); }
@container (max-width: 560px) { .eb-module .eb-cmt__card { grid-template-columns: 1fr; } .eb-module .eb-cmt__who { flex-direction: row; justify-content: flex-start; text-align: start; padding: .9rem 1rem 0; border: 0; } .eb-module .eb-cmt__who .eb-ava { inline-size: 40px; block-size: 40px; } }
@media (max-width: 560px) { .eb-module .eb-cmt__card { grid-template-columns: 1fr; } .eb-module .eb-cmt__who { flex-direction: row; justify-content: flex-start; text-align: start; padding: .9rem 1rem 0; border: 0; } .eb-module .eb-cmt__who .eb-ava { inline-size: 40px; block-size: 40px; } }

/* Comment form: the text first, name and e-mail side by side, switches, a round send button. */
.eb-module .eb-comment-form .eb-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .8rem; }
.eb-module .eb-comment-form .eb-field--wide { grid-column: 1 / -1; order: -1; }
.eb-module .eb-comment-form :is(.eb-input, .eb-textarea) { border-radius: 14px; transition: border-color .2s ease, box-shadow .3s ease, transform .3s var(--eb-spring); }
.eb-module .eb-comment-form :is(.eb-input, .eb-textarea):focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--eb-brand) 18%, transparent); }
.eb-module .eb-comment-form .eb-textarea { min-block-size: 120px; resize: vertical; }
.eb-module .eb-switch input[type="checkbox"] { appearance: none; position: relative; flex: none; inline-size: 44px; block-size: 26px; margin: 0; margin-inline-end: .6rem; vertical-align: middle; border-radius: 999px; cursor: pointer; background: color-mix(in srgb, var(--eb-text, #111) 20%, transparent); transition: background-color .25s ease; }
.eb-module .eb-switch input[type="checkbox"]::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .3); transition: inset-inline-start .2s var(--eb-spring); }
.eb-module .eb-switch input[type="checkbox"]:checked { background: var(--eb-accent, var(--eb-brand)); }
.eb-module .eb-switch input[type="checkbox"]:checked::after { inset-inline-start: 21px; }
.eb-module .eb-comment-form .eb-button--primary { border-radius: 999px; padding-inline: 1.6rem; min-block-size: 46px; transition: transform .2s var(--eb-spring), box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) { .eb-module .eb-comment-form .eb-button--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--eb-brand) 80%, transparent); } }

/* ---------- copyright line ---------- */
.eb-module .eb-rights { display: flex; gap: .9rem; align-items: flex-start; max-inline-size: 760px; inline-size: 100%; margin: 2rem auto 0; padding: 1rem 1.2rem; border-radius: 18px; font-size: .84rem; color: var(--eb-muted);
  background: color-mix(in srgb, var(--eb-brand) 5%, transparent); border: 1px dashed color-mix(in srgb, var(--eb-brand) 30%, transparent); }
.eb-rights__ico { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 12px; flex: none; color: var(--eb-brand); background: color-mix(in srgb, var(--eb-brand) 12%, transparent); }
.eb-rights p { margin: 0 0 .35rem; line-height: 1.8; } .eb-rights__links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; } .eb-rights a { font-weight: 700; }

/* ---------- motion ---------- */
@keyframes eb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes eb-slide-in { from { opacity: 0; transform: translateX(20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes eb-pop { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes eb-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes eb-spin { to { --eb-ga: 360deg; } }
@keyframes eb-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(-4px); } }
@keyframes eb-unblur { from { filter: blur(6px); opacity: .3; } to { filter: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .eb-module :is(.eb-byline, .eb-rail, .eb-cmt, .eb-player__wave i, .eb-eq i, .eb-gpill::before, .eb-cmt__text) { animation: none !important; }
  .eb-module :is(.eb-rail, .eb-player, .eb-rtools, .eb-lens, .eb-magsheet, .eb-toast, .eb-cmt__card, .eb-chipbtn, .eb-rail__btn, .eb-vote) { transition: none !important; }
}
@media print { .eb-module :is(.eb-reader, .eb-player, .eb-rtools, .eb-lens, .eb-ruler, .eb-toast, .eb-byline__acts) { display: none !important; } }

/* 3.4: the floating layer in <body> (see reader.js): no box of its own, never a containing block */
.eb-module.eb-layer { container-type: normal !important; contain: none !important; position: static !important; inline-size: 0 !important; block-size: 0 !important; min-block-size: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; transform: none !important; animation: none !important; color: var(--eb-text); }

.eb-module.eb-layer .eb-rail, .eb-module.eb-layer .eb-player { z-index: 2147482000; }

/* 3.4: wide screens: the rail floats beside the article over the whole article page (cover, text, FAQ, comments) */
@media (min-width: 1024px) {
  .eb-module.eb-layer.is-wide .eb-rail { position: fixed; inset-block-start: calc(var(--eb-sticky-top, var(--eb-top-offset, 0px)) + 96px); inset-inline-start: auto; left: var(--eb-rail-x, auto); right: auto;
    opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity .35s ease, translate .3s var(--eb-spring, ease), visibility 0s linear .35s; }
  .eb-module.eb-layer.is-wide .eb-rail.is-shown { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .35s ease, translate .3s var(--eb-spring, ease), visibility 0s; }
  .eb-module.eb-layer.is-wide[dir="ltr"] .eb-rail__btn::after { inset-inline: auto; left: auto; right: calc(100% + 10px); translate: 6px -50%; }
  .eb-module.eb-layer.is-wide[dir="rtl"] .eb-rail__btn::after { inset-inline: auto; right: auto; left: calc(100% + 10px); translate: -6px -50%; }
  .eb-module.eb-layer.is-wide .eb-rail__btn:is(:hover, :focus-visible)::after { translate: 0 -50%; }
  .eb-module .eb-article__body--rail { grid-template-columns: minmax(0, 1fr) 60px; }
}
@media (prefers-reduced-motion: reduce) { .eb-module.eb-layer.is-wide .eb-rail { transition: none; translate: none; } }

/* 3.4: byline actions redesigned: one quiet segmented bar (Listen · Reading tools · Follow on Google), no endless animation */
.eb-module .eb-byline__acts { gap: 0; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--eb-text) 5%, var(--eb-surface, #fff)); border: 1px solid color-mix(in srgb, var(--eb-text) 9%, transparent); }
.eb-module .eb-byline__acts > * + * { margin-inline-start: 2px; }
.eb-module .eb-byline__acts .eb-chipbtn, .eb-module .eb-byline__acts .eb-gpill { min-block-size: 40px; padding: .45rem 1rem; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--eb-text) !important; font-size: .84rem; font-weight: 700; transform: none; transition: background .2s ease, color .2s ease; }
@media (hover: hover) and (pointer: fine) { .eb-module .eb-byline__acts .eb-chipbtn:hover, .eb-module .eb-byline__acts .eb-gpill:hover { background: var(--eb-surface, #fff); box-shadow: 0 6px 16px -10px rgb(0 0 0 / .35); transform: none; } }
.eb-module .eb-byline__acts .eb-chipbtn--listen { background: var(--eb-ink); color: #fff !important; }
.eb-module .eb-byline__acts .eb-chipbtn--listen:hover { background: color-mix(in srgb, var(--eb-ink) 85%, #000); }
.eb-module .eb-byline__acts .eb-chipbtn--listen.is-playing { background: var(--eb-accent, var(--eb-brand)); }
.eb-module .eb-byline__acts .eb-chipbtn[aria-expanded="true"] { background: var(--eb-surface, #fff); box-shadow: inset 0 0 0 1.5px var(--eb-brand); }
.eb-module .eb-byline__acts .eb-gpill::before, .eb-module .eb-byline__acts .eb-gpill::after { display: none; }
.eb-module .eb-byline__acts .eb-gpill { gap: .45rem; }
@container (max-width: 560px) {
  .eb-module .eb-byline__acts { inline-size: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 22px; }
  .eb-module .eb-byline__acts > * + * { margin-inline-start: 0; }
  .eb-module .eb-byline__acts .eb-chipbtn, .eb-module .eb-byline__acts .eb-gpill { justify-content: center; padding-inline: .5rem; font-size: .8rem; white-space: nowrap; border-radius: 18px; }
  .eb-module .eb-byline__acts .eb-gpill { grid-column: 1 / -1; }
}

/* 3.4: reading tools panel, modern look (glass, clear steps, big touch targets) */
.eb-module .eb-rtools { inline-size: 300px; padding: 14px; border-radius: 24px; background: color-mix(in srgb, var(--eb-surface, #fff) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--eb-text, #111) 10%, transparent); box-shadow: 0 30px 70px -28px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .5); }
.eb-module .eb-rtools__head { padding: 2px 4px 10px; }
.eb-module .eb-rtools__head b { font-size: .95rem; letter-spacing: -.01em; }
.eb-module .eb-rtools__size { border-radius: 18px; padding: 10px 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--eb-brand) 12%, var(--eb-surface, #fff)), color-mix(in srgb, var(--eb-accent, var(--eb-brand)) 8%, var(--eb-surface, #fff))); }
.eb-module .eb-rtools__size button { inline-size: 40px; block-size: 40px; border-radius: 12px; border: 0; background: var(--eb-surface, #fff); box-shadow: 0 4px 12px -6px rgb(0 0 0 / .35); font-weight: 800; transition: transform .2s ease; }
.eb-module .eb-rtools__size button:active { transform: scale(.92); }
.eb-module .eb-rtools__size output { min-inline-size: 3.2em; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.eb-module .eb-rtools__opt { border-radius: 14px; padding: 10px 8px; transition: background .2s ease; }
.eb-module .eb-rtools__opt:hover { background: color-mix(in srgb, var(--eb-text, #111) 5%, transparent); }
.eb-module .eb-rtools__opt[aria-pressed="true"] { background: color-mix(in srgb, var(--eb-brand) 9%, transparent); }
.eb-module .eb-rtools__ico { border-radius: 10px; }
.eb-module .eb-rtools__reset { border-radius: 14px; border-style: solid; border-color: color-mix(in srgb, var(--eb-text, #111) 10%, transparent); font-weight: 700; }
.eb-module .eb-rtools__reset:hover { background: var(--eb-ink); color: #fff; border-color: transparent; }