:root { --font-sans: "Noto Sans", "Segoe UI", sans-serif; --ink: #172033; --muted: #5f6979; --line: #d8dde6; --paper: #ffffff; --wash: #f3f6fa; --accent: #0b6e75; --accent-dark: #075158; --l0: #65758b; --l1: #4263a3; --l2: #376f9e; --l3: #16828d; --l4: #207d5b; --l5: #547a35; --shadow: 0 20px 50px rgba(25, 35, 55, .10); --header-h: 76px; /* Separados de --ink porque no cambian igual en el tema oscuro: */ --band: #172033; /* fondo de las bandas oscuras (pie, franja, títulos de nivel) */ --surface: #ffffff; /* fondo de tarjetas, botones y campos */ --header-bg: rgba(255, 255, 255, .96); --ink-soft: #445067; /* texto secundario de párrafos destacados */ --line-strong: #bbc4d1; /* bordes de botones y campos */ color-scheme: light; } /* Tema oscuro: el del dispositivo, salvo que se elija otro con el botón de la cabecera (data-theme en ). Solo en pantalla: al imprimir y en los PDF sale siempre claro. Los colores de los niveles no cambian: llevan texto blanco encima. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #e6ebf2; --muted: #a7b2c3; --line: #2d3b50; --paper: #121a26; --wash: #0e1520; --accent: #45b8c0; --accent-dark: #86d4da; --band: #0a101a; --surface: #1a2433; --header-bg: rgba(18, 26, 38, .96); --ink-soft: #c3cbd8; --line-strong: #44546c; --shadow: 0 20px 50px rgba(0, 0, 0, .35); color-scheme: dark; } } @media screen { :root[data-theme="dark"] { --ink: #e6ebf2; --muted: #a7b2c3; --line: #2d3b50; --paper: #121a26; --wash: #0e1520; --accent: #45b8c0; --accent-dark: #86d4da; --band: #0a101a; --surface: #1a2433; --header-bg: rgba(18, 26, 38, .96); --ink-soft: #c3cbd8; --line-strong: #44546c; --shadow: 0 20px 50px rgba(0, 0, 0, .35); color-scheme: dark; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font: 17px/1.66 var(--font-sans); } a { color: var(--accent-dark); text-underline-offset: .18em; } a:hover { color: var(--accent); } .skip-link { position: fixed; left: 1rem; top: -5rem; padding: .7rem 1rem; background: var(--band); color: white; z-index: 20; } .skip-link:focus { top: 1rem; } /* La cabecera queda fija al desplazarse; lo que se ancla o se pega debajo cuenta con su altura. */ .site-header { height: var(--header-h); padding: 0 clamp(1rem, 4vw, 4rem); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--header-bg); backdrop-filter: blur(6px); box-shadow: 0 1px 12px rgba(25, 35, 55, .06); position: sticky; top: 0; z-index: 5; } .brand { display: inline-flex; gap: .8rem; align-items: center; text-decoration: none; color: var(--ink); } .brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--band); color: white; font: 700 1.2rem/1 var(--font-sans); } .brand strong, .brand small { display: block; } .brand strong { font: 700 1rem/1.2 var(--font-sans); letter-spacing: .08em; } .brand small { color: var(--muted); font-size: .72rem; margin-top: .15rem; } .header-actions { display: flex; align-items: center; gap: 1.5rem; font-size: .9rem; } .header-actions > a { color: var(--ink); text-decoration: none; font-weight: 650; } .language-picker { display: flex; align-items: center; gap: .6rem; color: var(--muted); } .theme-toggle { flex: 0 0 auto; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .theme-toggle:hover { border-color: var(--line-strong); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle[hidden] { display: none; } [data-theme="dark"] .theme-toggle .i-moon, :root:not([data-theme="dark"]) .theme-toggle .i-sun { display: none; } select { min-height: 42px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); color: var(--ink); padding: .45rem 2rem .45rem .7rem; font: inherit; font-size: .9rem; } .version-strip { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: .75rem; background: var(--band); color: white; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } .version-strip strong { padding: .15rem .5rem; background: #ffffff; color: #172033; } .version-strip time { color: #bfc8d8; } .document-layout { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 820px); gap: clamp(2rem, 6vw, 6rem); width: min(1220px, calc(100% - 2rem)); margin: 0 auto; padding: 4.5rem 0 7rem; align-items: start; } .document-tools { position: sticky; top: calc(var(--header-h) + 1rem); } .tools-card { padding: 1.6rem; background: var(--wash); border-top: 5px solid var(--accent); } .eyebrow { margin: 0 0 .55rem; color: var(--accent-dark); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .tools-card h2 { margin: 0 0 1.2rem; font: 700 1.35rem/1.25 var(--font-sans); } .button { display: block; padding: .7rem .85rem; margin-top: .65rem; border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface); text-decoration: none; font-size: .84rem; font-weight: 700; } .button.primary { background: #075158; color: white; border-color: #075158; } .level-key { margin-top: 1.3rem; border-top: 1px solid var(--line); } .level-key a { display: flex; align-items: center; gap: .7rem; padding: .58rem .2rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .78rem; line-height: 1.2; } .level-dot { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; color: white; font-size: .72rem; font-weight: 800; } .level-0 { background: var(--l0); }.level-1 { background: var(--l1); }.level-2 { background: var(--l2); }.level-3 { background: var(--l3); }.level-4 { background: var(--l4); }.level-5 { background: var(--l5); } .document-heading { margin-bottom: 1.8rem; } .heading-rule { display: grid; grid-template-columns: repeat(6, 1fr); height: 5px; } .heading-rule span:nth-child(1) { background: var(--l0); }.heading-rule span:nth-child(2) { background: var(--l1); }.heading-rule span:nth-child(3) { background: var(--l2); }.heading-rule span:nth-child(4) { background: var(--l3); }.heading-rule span:nth-child(5) { background: var(--l4); }.heading-rule span:nth-child(6) { background: var(--l5); } .framework-document > h1 { margin: 0 0 1.5rem; max-width: 800px; font: 700 clamp(2.25rem, 5vw, 4.15rem)/1.04 var(--font-sans); letter-spacing: -.035em; } .framework-document > h1 + p { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); border-left: 4px solid var(--accent); padding-left: 1.25rem; } .framework-document h2 { scroll-margin-top: calc(var(--header-h) + 1rem); margin: 4rem 0 1.2rem; font: 700 2rem/1.15 var(--font-sans); letter-spacing: -.02em; } .framework-document h3 { scroll-margin-top: calc(var(--header-h) + 1rem); margin: 3.2rem 0 1rem; padding: .8rem 1rem; color: white; font: 700 1.5rem/1.2 var(--font-sans); background: var(--band); } .framework-document h3[id="nivel-0"] { border-left: 10px solid var(--l0); }.framework-document h3[id="nivel-1"] { border-left: 10px solid var(--l1); }.framework-document h3[id="nivel-2"] { border-left: 10px solid var(--l2); }.framework-document h3[id="nivel-3"] { border-left: 10px solid var(--l3); }.framework-document h3[id="nivel-4"] { border-left: 10px solid var(--l4); }.framework-document h3[id="nivel-5"] { border-left: 10px solid var(--l5); } .framework-document h4 { margin: 2rem 0 .7rem; color: var(--accent-dark); font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; } .framework-document p, .framework-document li { max-width: 76ch; } .framework-document li { margin-bottom: .4rem; } .framework-document hr { margin: 3rem 0; border: 0; border-top: 1px solid var(--line); } .framework-document blockquote { margin: 2rem 0; padding: 1rem 1.3rem; border-left: 5px solid var(--accent); background: var(--wash); } .resource-panel, .citation-box { margin-top: 4rem; padding: 2rem; background: var(--wash); border-top: 5px solid var(--accent); } .resource-panel h2, .citation-box h2 { margin-top: 0; } .citation-note { margin-bottom: 0; color: var(--muted); font-size: .85rem; line-height: 1.6; } .resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .resource-grid a { min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.2rem; background: var(--surface); color: var(--ink); text-decoration: none; } .resource-grid strong { font: 700 1.15rem/1.2 var(--font-sans); } .resource-grid span { color: var(--muted); font-size: .8rem; } /* Pódcast y vídeo incrustados: solo existen en español. */ .resource-panel .resource-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .media-grid { display: grid; grid-template-columns: 1.55fr 1fr; align-items: start; gap: 1.5rem; margin: 1.5rem 0 2rem; } .media-item { display: flex; flex-direction: column; gap: .9rem; margin: 0; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); } .media-frame { position: relative; padding-top: 56.25%; background: var(--band); } .media-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .media-item audio { width: 100%; min-height: 54px; } .media-item figcaption { display: flex; flex-direction: column; gap: .3rem; } .media-item figcaption strong { font: 700 1.15rem/1.2 var(--font-sans); } .media-item figcaption span { color: var(--muted); font-size: .8rem; } footer { min-height: 96px; padding: 2rem clamp(1rem, 4vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; background: var(--band); color: #c9d1df; font-size: .82rem; } footer a { color: white; } .home-page { background: var(--wash); } .home-page main { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; } .home-intro { padding: 5rem 0 4rem; } .home-intro h1 { margin: 0 0 1.5rem; max-width: 800px; font: 700 clamp(2.8rem, 7vw, 5.8rem)/.97 var(--font-sans); letter-spacing: -.045em; } .home-lead { max-width: 650px; margin: 0; color: var(--ink-soft); font-size: 1.15rem; } .language-entry, .home-resources { padding: 4rem 0; border-top: 1px solid var(--line); } .language-entry > div:first-child, .home-resources > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; } .language-entry h2, .home-resources h2 { margin: 0 0 1.5rem; font: 700 2.2rem/1.1 var(--font-sans); } .language-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); } .language-grid a { min-height: 150px; display: flex; flex-direction: column; padding: 1.2rem; background: var(--surface); color: var(--ink); text-decoration: none; } .language-grid strong { font: 700 1.15rem/1.2 var(--font-sans); } .language-grid span { margin-top: .35rem; color: var(--muted); font-size: .78rem; } .language-grid b { margin-top: auto; color: var(--accent); font-size: 1.5rem; } .home-resources .resource-grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 850px) { .media-grid { grid-template-columns: 1fr; } :root { --header-h: 72px; } .site-header { height: auto; min-height: var(--header-h); padding-block: .7rem; } .brand small, .language-picker > span, .header-actions > a { display: none; } .document-layout { display: block; padding-top: 2.5rem; } .document-tools { position: static; margin-bottom: 3rem; } .level-key { display: none; } .framework-document > h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); } .resource-grid, .home-resources .resource-grid { grid-template-columns: 1fr 1fr; } .home-intro { padding-top: 4rem; } .language-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { body { font-size: 16px; } .version-strip span { display: none; } .resource-grid, .home-resources .resource-grid, .language-grid { grid-template-columns: 1fr; } .home-intro h1 { font-size: 1.95rem; } .resource-panel, .citation-box { padding: 1.2rem; margin-inline: -.25rem; } } @media print { @page { size: A4; margin: 18mm 17mm 20mm; @bottom-center { content: counter(page); color: #687386; font-size: 9pt; } } body { font-size: 10pt; line-height: 1.48; color: #111827; } .site-header, .version-strip, .document-tools, footer, .resource-panel, .media-grid, .skip-link { display: none !important; } .document-layout { display: block; width: auto; margin: 0; padding: 0; } .framework-document { max-width: none; } .framework-document > h1 { font-size: 27pt; margin: 20mm 0 10mm; page-break-after: avoid; } .framework-document > h1 + p { font-size: 12pt; } .framework-document h2 { font-size: 18pt; margin-top: 12mm; page-break-after: avoid; } .framework-document h3 { font-size: 14pt; margin-top: 9mm; break-after: avoid; print-color-adjust: exact; } .framework-document h4 { font-size: 10pt; break-after: avoid; } .framework-document p, .framework-document li { max-width: none; } .framework-document li { margin-bottom: 1.5mm; } .framework-document hr { margin: 8mm 0; } .document-heading { margin: 0; } .heading-rule { print-color-adjust: exact; } .citation-box { display: block; break-inside: avoid; background: #f3f6fa; print-color-adjust: exact; } a { color: inherit; text-decoration: none; } } .home-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } .home-actions .button { margin: 0; } .home-page noscript nav { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 0; } @media (max-width: 520px) { .header-actions { gap: .5rem; } .language-picker select { max-width: 215px; } } /* Guided introduction and practical resources. */ .home-intro { display: grid; grid-template-columns: 1.35fr .85fr; gap: 3.5rem; align-items: center; padding: 3.5rem 0; } .level-spectrum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; box-shadow: var(--shadow); } .level-spectrum a { min-height: 116px; display: flex; flex-direction: column; gap: .5rem; padding: 1rem; color: white; text-decoration: none; } .level-spectrum a b { font: 700 2rem/1 var(--font-sans); } .level-spectrum a span { font: 600 .88rem/1.35 var(--font-sans); } .level-spectrum a:hover, .level-spectrum a:focus-visible { color: white; } .level-spectrum a:hover span, .level-spectrum a:focus-visible span { text-decoration: underline; } .home-intro h1 { max-width: 24ch; font-size: clamp(1.9rem, 3.4vw, 3.05rem); line-height: 1.14; } @media (max-width: 850px) { .home-intro { grid-template-columns: 1fr; gap: 2.5rem; } .level-spectrum { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .level-spectrum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .level-spectrum a { min-height: 100px; } } .guide-section { padding: 3.5rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); } .guide-section h2 { margin: 0 0 1rem; font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.2 var(--font-sans); } .guide-section p, .guide-section li { max-width: 78ch; } .section-intro { color: var(--ink-soft); } /* Los tres pasos: tarjetas numeradas encadenadas por una flecha. */ .guide-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5rem; padding: 0; margin-block: 2.25rem; counter-reset: paso; } .guide-steps li { position: relative; counter-increment: paso; padding: 1.4rem 1.4rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--accent); } .guide-steps li::before { content: counter(paso, decimal-leading-zero); display: block; margin-bottom: .5rem; font: 800 2.5rem/1 var(--font-sans); color: var(--accent); letter-spacing: -.03em; } .guide-steps li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -2.35rem; width: 1rem; height: 1rem; border-top: 3px solid var(--accent); border-right: 3px solid var(--accent); transform: translate(0, -50%) rotate(45deg); } .guide-steps h3 { margin: 0; font-size: 1.08rem; } .guide-steps p { margin: .55rem 0 0; } .principle { padding: 1rem 1.3rem; border-left: 4px solid var(--accent); background: var(--surface); } .guide-section details { border-top: 1px solid var(--line); padding: 1rem 0; } summary { cursor: pointer; font-weight: 700; padding: .25rem 0; } .guide-section details > p { margin-bottom: .25rem; } .template-editor { max-width: 850px; padding-bottom: 1.5rem; } .template-editor label { display: block; } .template-editor textarea { display: block; width: 100%; resize: vertical; border: 1px solid var(--line-strong); padding: 1rem; font: inherit; font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--surface); } button.button { font-family: inherit; cursor: pointer; } .filled-example { max-width: 78ch; } .filled-example dt { font-weight: 700; margin-top: 1rem; } .filled-example dd { margin: .25rem 0 0; } .interactive-only { display: none; } .interactive-ready .interactive-only { display: flex; } .interactive-ready button.interactive-only { display: block; } .editor-status:empty { display: none; } .document-index { margin-top: 1.2rem; } .document-index a { display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .82rem; line-height: 1.35; } .document-tools { grid-column: 1; grid-row: 1; max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; } .framework-document { grid-column: 2; grid-row: 1; } .mobile-index { display: none; } :where(a, button, select, textarea, input, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; } @media (max-width: 850px) { .document-layout { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1.5rem; } .mobile-index { display: block; order: 0; width: 100%; padding: .6rem 1rem; background: var(--wash); border: 1px solid var(--line); } .framework-document { order: 1; width: 100%; min-width: 0; } .document-tools { order: 2; width: 100%; max-height: none; overflow: visible; margin: 0; } .document-tools .document-index { display: none; } .framework-document > h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.15; } .framework-document > h1 + p { font-size: 1rem; } .document-heading { margin-bottom: 1rem; } .guide-steps { grid-template-columns: 1fr; gap: 2.75rem; } .guide-steps li:not(:last-child)::after { top: auto; right: auto; bottom: -1.9rem; left: 50%; transform: translate(-50%, 0) rotate(135deg); } } @media (max-width: 600px) { .guide-section { padding: 2.5rem 0; } .home-intro h1 { font-size: 2.3rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @media print { .mobile-index, .document-index, .interactive-only { display: none !important; } .document-tools { display: none !important; } .guide-section { break-inside: avoid; } } @media screen and (max-width: 520px) { .site-header { gap: 1rem; } .brand { flex-shrink: 0; } .header-actions { min-width: 0; flex: 0 1 215px; } .language-picker { min-width: 0; width: 100%; } .language-picker select { min-width: 0; width: 100%; max-width: 100%; } } .framework-document { overflow-wrap: anywhere; } /* Compartir un nivel: el botón copia un enlace que abre su resumen en la portada. */ .level-spectrum > div { position: relative; display: flex; } .level-spectrum > div > a { flex: 1 1 auto; } .share-level { position: absolute; top: .6rem; right: .6rem; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: white; cursor: pointer; opacity: .75; transition: opacity .2s, background-color .2s; } .share-level:hover, .share-level:focus-visible { opacity: 1; background: rgba(255, 255, 255, .3); color: white; } .share-level svg { display: block; width: 17px; height: 17px; } .share-toast { position: absolute; top: calc(100% + .2rem); right: .6rem; z-index: 6; max-width: min(90vw, 26rem); padding: .4rem .7rem; background: var(--band); color: white; font-size: .8rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; pointer-events: none; } .share-toast.is-visible { opacity: 1; transform: none; } .framework-document h3 { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .framework-document h3 .share-level { position: static; flex: 0 0 auto; } .framework-document h3 .share-toast { top: calc(100% + .3rem); right: 1rem; } .level-dialog { width: min(92vw, 640px); max-height: min(88vh, 720px); margin: auto; padding: 0; border: 0; color: var(--ink); background: var(--paper); box-shadow: 0 30px 80px rgba(25, 35, 55, .35); overflow: auto; } .level-dialog::backdrop { background: rgba(23, 32, 51, .55); backdrop-filter: blur(2px); } .level-dialog[open] { animation: dialog-in .28s ease-out; } .level-dialog[open]::backdrop { animation: backdrop-in .28s ease-out; } @keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } .level-card { padding: 2.4rem 2.6rem 2.2rem; border-top: 6px solid var(--accent); outline: none; } .level-card[data-level-card="0"] { border-top-color: var(--l0); }.level-card[data-level-card="1"] { border-top-color: var(--l1); }.level-card[data-level-card="2"] { border-top-color: var(--l2); }.level-card[data-level-card="3"] { border-top-color: var(--l3); }.level-card[data-level-card="4"] { border-top-color: var(--l4); }.level-card[data-level-card="5"] { border-top-color: var(--l5); } .level-card-label { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.1rem; padding-right: 3rem; color: var(--muted); font-size: .9rem; font-weight: 600; } .level-card-label .level-dot { width: 34px; height: 34px; font-size: 1rem; } .level-card h2 { margin: 0 0 1.1rem; font: 700 1.55rem/1.3 var(--font-sans); letter-spacing: -.01em; } .level-card > p { margin: 0; max-width: 58ch; font-size: 1.02rem; line-height: 1.72; color: var(--ink-soft); } .level-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; } .level-card-actions .button { margin: 0; padding: .8rem 1.2rem; } .level-card { position: relative; } .level-card-close { position: absolute; top: 1.1rem; right: 1.1rem; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: background-color .2s, color .2s; } .level-card-close:hover, .level-card-close:focus-visible { background: var(--wash); color: var(--ink); } .level-card-close svg { display: block; } @media (max-width: 520px) { .level-card { padding: 1.6rem 1.4rem 1.5rem; } .level-card h2 { font-size: 1.28rem; } .level-card > p { font-size: 1rem; } .level-card-actions { gap: 1.1rem; } .level-card-actions .button { flex: 1 1 100%; text-align: center; } .level-card-close { top: .8rem; right: .8rem; } } @media (prefers-reduced-motion: reduce) { .level-dialog[open], .level-dialog[open]::backdrop { animation: none; } .share-level, .share-toast { transition: none; } } @media print { .share-level, .share-toast, .level-dialog { display: none !important; } }