/* Paper / Motion — editorial pages and standalone format tools.
   Screen-only layer: the existing print layout and code artwork stay intact.
   Repeated .article-modern intentionally outranks the legacy triple .lime-site skin,
   including when the palette stylesheet is switched after page load. */
@media screen {
  html:root body.paper-site.article-modern.article-modern {
    --article-bg: var(--paper-bg, #f6f7f9);
    --article-panel: var(--paper-panel, #fff);
    --article-soft: var(--paper-bg, #f6f7f9);
    --article-text: var(--paper-ink, #1d1d1f);
    --article-heading: var(--paper-ink, #1d1d1f);
    --article-muted: var(--paper-muted, #64666d);
    --article-line: var(--paper-line, #e0e2e7);
    --article-accent: var(--paper-accent, #0071e3);
    --article-accent-soft: var(--paper-soft, #eef5ff);
    color: var(--article-text);
    background: var(--article-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  }
  html:root body.paper-site.article-modern.article-modern .content-shell { width: min(1360px, calc(100% - 96px)); margin-inline: auto; padding: 18px 0 72px; }
  html:root body.paper-site.article-modern.article-modern .breadcrumbs { margin: 0 0 24px 2px; color: var(--article-muted); font-size: 12px; }
  html:root body.paper-site.article-modern.article-modern .article-hero {
    padding: clamp(30px, 4.5vw, 64px);
    margin-bottom: 28px;
    border: 1px solid var(--article-line);
    border-radius: 32px;
    background: var(--article-panel);
    box-shadow: 0 12px 40px #00000003;
  }
  html:root body.paper-site.article-modern.article-modern .article-hero::before { content: none; }
  html:root body.paper-site.article-modern.article-modern .article-hero .eyebrow {
    padding: 0; margin-bottom: 20px; border-radius: 0;
    color: var(--article-muted); background: transparent;
    font-size: 11px; letter-spacing: .12em; font-weight: 650;
  }
  html:root body.paper-site.article-modern.article-modern .article-hero h1 {
    max-width: 1100px; margin-bottom: 22px;
    font-size: clamp(34px, 4.1vw, 60px); line-height: 1.06;
    font-weight: 650; letter-spacing: -.047em; overflow-wrap: normal;
  }
  html:root body.paper-site.article-modern.article-modern .article-hero .hero-copy { max-width: 850px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; }
  html:root body.paper-site.article-modern.article-modern .article-hero__actions { margin-top: 30px; gap: 16px 26px; }
  html:root body.paper-site.article-modern.article-modern :is(.article-primary-action, .article a.primary-button, .guide-actions .button, .article-cta .button) {
    min-height: 46px; padding: 12px 22px; border-radius: 100px;
    color: var(--paper-button-ink, #fff); background: var(--paper-button-bg, #0071e3); border-color: var(--paper-button-bg, #0071e3);
    box-shadow: none; font-size: 14px; font-weight: 600; text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
  }
  html:root body.paper-site.article-modern.article-modern :is(.article-primary-action, .article a.primary-button, .guide-actions .button, .article-cta .button):hover {
    color: var(--paper-button-ink, #fff); background: var(--paper-button-hover, #0064ca); border-color: var(--paper-button-hover, #0064ca); box-shadow: 0 5px 18px #0071e31a;
  }
  html:root body.paper-site.article-modern.article-modern .article-reading-link { font-weight: 500; font-size: 14px; }
  html:root body.paper-site.article-modern.article-modern .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
  html:root body.paper-site.article-modern.article-modern .article { background:var(--paper-panel); color:var(--paper-ink); border-color:var(--paper-line); padding: clamp(28px, 3.5vw, 52px); border-radius: 28px; box-shadow: none; min-width: 0; }
  html:root body.paper-site.article-modern.article-modern .article h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 650; letter-spacing: -.035em; line-height: 1.18; margin-top: 44px; }
  html:root body.paper-site.article-modern.article-modern .article h2:first-child { margin-top: 0; }
  html:root body.paper-site.article-modern.article-modern .article h3 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
  html:root body.paper-site.article-modern.article-modern .article :is(p, li) { line-height: 1.8; }
  html:root body.paper-site.article-modern.article-modern .article :is(th, td) { border-color: var(--article-line); padding: 16px; }
  html:root body.paper-site.article-modern.article-modern .article th { background: var(--article-soft); font-weight: 650; }
  html:root body.paper-site.article-modern.article-modern .article tbody tr:nth-child(even) { background: color-mix(in srgb, var(--article-soft) 60%, transparent); }
  html:root body.paper-site.article-modern.article-modern .article table { border-radius: 12px; }
  html:root body.paper-site.article-modern.article-modern .side-nav { padding: 24px 18px; border-radius: 24px; border-color: var(--article-line); background: var(--article-panel); box-shadow: none; }
  html:root body.paper-site.article-modern.article-modern .side-nav a { padding: 9px 12px; font-size: 12px; border-radius: 10px; transition: color .18s, background-color .18s; }
  html:root body.paper-site.article-modern.article-modern .side-nav > strong { padding-inline: 12px; color: var(--article-heading); font-size: 14px; font-weight: 650; }
  html:root body.paper-site.article-modern.article-modern .side-nav__label { padding-inline: 12px; font-size: 10px; letter-spacing: .09em; }
  html:root body.paper-site.article-modern.article-modern .side-nav summary { font-weight: 600; }
  html:root body.paper-site.article-modern.article-modern :is(.guide-card, .guide-toc, .ean-scan-guide) { background: var(--article-soft); border-radius: 22px; border-color: var(--article-line); box-shadow: none; }
  html:root body.paper-site.article-modern.article-modern .guide-card { padding: 26px; gap: 12px; transition: border-color .22s, background-color .22s, box-shadow .22s; }
  html:root body.paper-site.article-modern.article-modern .guide-card:hover { background: var(--article-panel); border-color: color-mix(in srgb, var(--article-accent) 40%, var(--article-line)); box-shadow: 0 12px 32px #00000006; }
  html:root body.paper-site.article-modern.article-modern .guide-card strong { font-size: 22px; font-weight: 600; letter-spacing: -.028em; }
  html:root body.paper-site.article-modern.article-modern .guide-card span { color: var(--article-muted); }
  html:root body.paper-site.article-modern.article-modern .guide-card .guide-card-link { color: var(--article-accent); font-weight: 600; }
  html:root body.paper-site.article-modern.article-modern .guide-code-sample { border-color: var(--article-line); border-radius: 14px; }
  html:root body.paper-site.article-modern.article-modern .guide-steps > li { padding-top: 24px; padding-bottom: 24px; border-radius: 20px; background: var(--article-soft); }
  html:root body.paper-site.article-modern.article-modern .guide-steps > li::before { top: 24px; border-radius: 50%; background: var(--article-panel); color: var(--article-heading); border: 1px solid var(--article-line); font-weight: 600; }
  html:root body.paper-site.article-modern.article-modern .guide-steps > li > strong { font-weight: 600; }
  html:root body.paper-site.article-modern.article-modern :is(.guide-flow li, .marking-flow li) { background: var(--article-soft); border-radius: 18px; border-color: var(--article-line); }
  html:root body.paper-site.article-modern.article-modern .guide-figure { padding: 14px; border-radius: 22px; background: var(--article-soft); }
  html:root body.paper-site.article-modern.article-modern .guide-figure img { border-color: var(--article-line); }
  html:root body.paper-site.article-modern.article-modern :is(.guide-note, .callout) { border-radius: 16px; border-left-width: 3px; background: var(--article-accent-soft); }
  html:root body.paper-site.article-modern.article-modern .guide-lightbox { border-radius: 24px; }
  html:root body.paper-site.article-modern.article-modern .guide-lightbox-view { background: var(--article-bg); }
  html:root body.paper-site.article-modern.article-modern .guide-lightbox button { border-radius: 100px; }
  html:root body.paper-site.article-modern.article-modern .article-cta { padding: 32px; border-color: var(--article-line); border-radius: 24px; background: var(--article-soft); }
  html:root body.paper-site.article-modern.article-modern .article .article-cta h2 { color: var(--article-heading); font-weight: 650; }
  html:root body.paper-site.article-modern.article-modern .article .article-cta p { color: var(--article-muted); }
  html:root body.paper-site.article-modern.article-modern .article-cta .button-outline { color: var(--article-accent); background: var(--article-panel); border-color: var(--article-line); }
  html:root body.paper-site.article-modern.article-modern .article-cta .button-outline:hover { color: var(--article-accent); background: var(--article-accent-soft); border-color: var(--article-accent); }
  html:root body.paper-site.article-modern.article-modern .article-cta .guide-actions > a:not(.button) { color: var(--article-accent); }
  html:root body.paper-site.article-modern.article-modern .article :is(.faq-list details, details), html:root body.paper-site.article-modern.article-modern .faq-list > details { padding: 22px 24px; border-radius: 18px; background: var(--article-soft); border-color: var(--article-line); }
  html:root body.paper-site.article-modern.article-modern .article details summary { font-weight: 600; letter-spacing: -.012em; }
  html:root body.paper-site.article-modern.article-modern .article details[open] { background: var(--article-panel); border-color: color-mix(in srgb, var(--article-accent) 35%, var(--article-line)); }
  html:root body.paper-site.article-modern.article-modern .ean-tool { padding: 26px; border-radius: 22px; background: var(--article-soft); box-shadow: none; }
  html:root body.paper-site.article-modern.article-modern .ean-tool__field input { color: var(--article-heading); background: var(--paper-input, var(--article-panel)); border-radius: 12px; font-size: 16px; }
  html:root body.paper-site.article-modern.article-modern .ean-tool__field input[aria-invalid="true"] { border-color: #c13751; background: var(--paper-input, var(--article-panel)); }
  html:root body.paper-site.article-modern.article-modern .ean-tool__button { transition: box-shadow .2s, transform .2s; border-radius: 100px; color: var(--paper-button-ink, #fff); background: var(--paper-button-bg, #0071e3); border-color: var(--paper-button-bg, #0071e3); font-weight: 600; }
  html:root body.paper-site.article-modern.article-modern .ean-tool__button:hover:not(:disabled) { background: var(--paper-button-hover, #0064ca); border-color: var(--paper-button-hover, #0064ca); transform: none; box-shadow: 0 5px 18px #0071e31a; }
  html:root body.paper-site.article-modern.article-modern .ean-tool__result { border-radius: 12px; }
  html:root body.paper-site.article-modern.article-modern .ean-scan-checklist strong { color: var(--article-heading); }
  html:root body.paper-site.article-modern.article-modern .ean-scan-guide > p { color: var(--article-muted); }
  html:root body.paper-site.article-modern.article-modern .format-generator { padding: clamp(26px, 3.5vw, 48px); border-radius: 28px; }
  html:root body.paper-site.article-modern.article-modern .format-generator h2 { font-size: clamp(25px, 2.7vw, 36px); letter-spacing: -.035em; font-weight: 650; }
  html:root body.paper-site.article-modern.article-modern .format-generator > p { color: var(--article-muted); }
  html:root body.paper-site.article-modern.article-modern .format-generator__layout { gap: 36px; }
  html:root body.paper-site.article-modern.article-modern .format-generator__field { font-size: 14px; font-weight: 600; }
  html:root body.paper-site.article-modern.article-modern .format-generator :is(input, textarea) { color: var(--article-heading); background: var(--paper-input, var(--article-panel)); border-radius: 12px; }
  html:root body.paper-site.article-modern.article-modern .format-generator button { border-radius: 100px; font-weight: 600; color: var(--paper-button-ink, #fff); background: var(--paper-button-bg, #0071e3); border-color: var(--paper-button-bg, #0071e3); transition: box-shadow .2s, transform .2s; }
  html:root body.paper-site.article-modern.article-modern .format-generator button:hover:not(:disabled) { background: var(--paper-button-hover, #0064ca); border-color: var(--paper-button-hover, #0064ca); }
  html:root body.paper-site.article-modern.article-modern .format-generator__preview { padding: 24px; border-radius: 22px; background: var(--article-soft); }
  html:root body.paper-site.article-modern.article-modern .format-generator__image { border-radius: 12px; }
  html:root body.paper-site.article-modern.article-modern .format-generator__downloads button + button { color: var(--article-heading); border-color: var(--article-line); background: var(--article-panel); }
  html:root body.paper-site.article-modern.article-modern .format-generator__downloads button + button:hover:not(:disabled) { color: var(--article-accent); border-color: var(--article-accent); background: var(--article-accent-soft); }
  html:root body.paper-site.article-modern.article-modern :is(a, summary, button, input, textarea):focus-visible { outline: 3px solid var(--article-accent); outline-offset: 4px; }
}
@media screen and (max-width: 1100px) {
  html:root body.paper-site.article-modern.article-modern .content-shell { width: calc(100% - 56px); }
  html:root body.paper-site.article-modern.article-modern .article-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; }
  html:root body.paper-site.article-modern.article-modern .guide-groups { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 960px) {
  html:root body.paper-site.article-modern.article-modern .article-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
  html:root body.paper-site.article-modern.article-modern .side-nav { position: static; grid-row: auto; padding: 20px; max-height: none; }
  html:root body.paper-site.article-modern.article-modern .article { grid-row: auto; }
}
@media screen and (max-width: 900px) {
  html:root body.paper-site.article-modern.article-modern .format-generator__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media screen and (max-width: 600px) {
  html:root body.paper-site.article-modern.article-modern .content-shell { width: calc(100% - 32px); padding: 4px 0 44px; }
  html:root body.paper-site.article-modern.article-modern .breadcrumbs { margin: 0 2px 18px; }
  html:root body.paper-site.article-modern.article-modern .article-hero { padding: 28px 22px; border-radius: 24px; margin-bottom: 20px; }
  html:root body.paper-site.article-modern.article-modern .article-hero h1 { font-size: clamp(29px, 8.4vw, 42px); line-height: 1.12; letter-spacing: -.04em; overflow-wrap: anywhere; }
  html:root body.paper-site.article-modern.article-modern .article-hero .eyebrow { font-size: 10px; margin-bottom: 16px; }
  html:root body.paper-site.article-modern.article-modern .article-hero__actions { gap: 8px; margin-top: 24px; }
  html:root body.paper-site.article-modern.article-modern .article-reading-link { margin: 0; min-height: 44px; width: 100%; }
  html:root body.paper-site.article-modern.article-modern .article { padding: 28px 20px; border-radius: 24px; }
  html:root body.paper-site.article-modern.article-modern .article h2 { font-size: 25px; line-height: 1.24; margin-top: 36px; }
  html:root body.paper-site.article-modern.article-modern .article h3 { font-size: 19px; }
  html:root body.paper-site.article-modern.article-modern .article table { display: block; max-width: 100%; overflow-x: auto; }
  html:root body.paper-site.article-modern.article-modern .article :is(th, td) { padding: 13px 12px; }
  html:root body.paper-site.article-modern.article-modern .guide-card { padding: 22px; }
  html:root body.paper-site.article-modern.article-modern .guide-card strong { font-size: 21px; }
  html:root body.paper-site.article-modern.article-modern .guide-steps > li { padding: 20px 16px 20px 56px; }
  html:root body.paper-site.article-modern.article-modern .guide-steps > li::before { top: 20px; }
  html:root body.paper-site.article-modern.article-modern .guide-figure { padding: 8px; border-radius: 16px; }
  html:root body.paper-site.article-modern.article-modern .article :is(.faq-list details, details), html:root body.paper-site.article-modern.article-modern .faq-list > details { padding: 18px; }
  html:root body.paper-site.article-modern.article-modern .article .article-cta { padding: 24px 20px; border-radius: 20px; }
  html:root body.paper-site.article-modern.article-modern .ean-tool { padding: 20px 16px; }
  html:root body.paper-site.article-modern.article-modern .format-generator { padding: 26px 20px; border-radius: 24px; }
  html:root body.paper-site.article-modern.article-modern .format-generator__preview { padding: 16px; border-radius: 18px; }
}
@media screen and (prefers-reduced-motion: reduce) {
  html:root body.paper-site.article-modern.article-modern :is(.guide-card, .side-nav a, .article-primary-action, .ean-tool__button, .format-generator button) { transition: none; }
}

/* CTA color pairs deliberately switch atomically: only shadow and movement animate. */
/* Keep text/surface pairs together: the current site has legacy dark CTA text,
   status colors and blue buttons which otherwise survive a palette switch. */
@media screen {
  html:root body.paper-site.article-modern.article-modern {
    --ls-bg: var(--paper-bg); --ls-panel: var(--paper-panel); --ls-soft: var(--paper-bg);
    --ls-ink: var(--paper-ink); --ls-muted: var(--paper-muted); --ls-line: var(--paper-line);
    --ls-link: var(--paper-accent); --ls-selected: var(--paper-soft);
  }
  html:root body.paper-site.article-modern.article-modern :is(.article-hero h1, .article h2, .article h3, .article-cta strong) { color: var(--article-heading); }
  html:root body.paper-site.article-modern.article-modern .article :is(p, li, th, td) { color: var(--article-text); }
  html:root body.paper-site.article-modern.article-modern .article-cta { color: var(--article-text); }
  html:root body.paper-site.article-modern.article-modern .article-cta p { color: var(--article-muted); }
  html:root body.paper-site.article-modern.article-modern .article :is(code, pre) { color: var(--article-heading); background: var(--article-soft); overflow-wrap: anywhere; white-space: pre-wrap; }
  html:root body.paper-site.article-modern.article-modern .article pre { max-width: 100%; overflow: auto; }
  html:root body.paper-site.article-modern.article-modern .article table { width: 100%; background: var(--article-panel); }
  html:root body.paper-site.article-modern.article-modern :is(.article, .guide-card, .guide-flow li, .marking-flow li, .guide-steps li, .article-hero) { min-width: 0; overflow-wrap: anywhere; }
  html:root body.paper-site.article-modern.article-modern .article-hero h1 { overflow-wrap: anywhere; }
  html:root body.paper-site.article-modern.article-modern .side-nav { border: 1px solid var(--article-line); }
  html:root body.paper-site.article-modern.article-modern .side-nav a { color: var(--article-muted); }
  html:root body.paper-site.article-modern.article-modern .side-nav a:is(:hover, [aria-current]) { color: var(--article-accent); background: var(--article-accent-soft); }
  html:root body.paper-site.article-modern.article-modern :is(.guide-note, .callout) { color: var(--article-text); border-left-color: var(--article-accent); }
  html:root body.paper-site.article-modern.article-modern .article :is(.ean-tool__intro, .ean-tool__privacy, .ean-tool__notice, .ean-tool__hint) { color: var(--article-muted); }
  html:root body.paper-site.article-modern.article-modern .article .ean-tool__result { color: var(--article-text); background: var(--article-panel); border-color: var(--article-line); }
  html:root body.paper-site.article-modern.article-modern .article .ean-tool__result--success { color: #16633e; background: #effaf4; border-color: #b1dcc1; }
  html:root body.paper-site.article-modern.article-modern .article .ean-tool__result--error { color: #a42440; background: #fff2f5; border-color: #efb6c1; }
  html:root[data-theme=dark] body.paper-site.article-modern.article-modern .article .ean-tool__result--success { color: #98e0b7; background: #193a2d; border-color: #35684e; }
  html:root[data-theme=dark] body.paper-site.article-modern.article-modern .article .ean-tool__result--error { color: #ffb4c4; background: #422537; border-color: #7a4055; }
  html:root body.paper-site.article-modern.article-modern .format-generator .format-generator__status[data-error=true] { color: #a42440; }
  html:root[data-theme=dark] body.paper-site.article-modern.article-modern .format-generator .format-generator__status[data-error=true] { color: #ffb4c4; }
  html:root body.paper-site.article-modern.article-modern .format-generator__layout > *,
  html:root body.paper-site.article-modern.article-modern .ean-tool__form > * { min-width: 0; }
  html:root body.paper-site.article-modern.article-modern :is(.format-generator button, .ean-tool__button, .article-primary-action, .article-cta .button) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  html:root body.paper-site.article-modern.article-modern .guide-lightbox-header p { color: var(--article-text); }
  html:root body.paper-site.article-modern.article-modern .guide-lightbox button { color: var(--article-heading); background: var(--article-soft); }
}
@media screen and (max-width: 960px) {
  html:root body.paper-site.article-modern.article-modern .side-nav__group { display: block; width: auto; margin-right: 0; }
}