:root { color-scheme: dark; --night: #101b36; --accent: #bad1ff; }
* { box-sizing: border-box; }
body { margin: 0; color: #f7f9ff; background: var(--night); font: 28px/1.45 Tahoma, Arial, sans-serif; }
.slide { display: none; min-block-size: 100svh; padding: 5.5rem clamp(1.25rem, 7vw, 7rem) 6rem; background: radial-gradient(ellipse at 15% 15%, #253c79 0, var(--night) 65%); }
.slide.current { display: grid; align-items: center; animation: fade 200ms ease-out; }
.frame { inline-size: min(100%, 74rem); margin-inline: auto; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slide.current { animation: none; } }
h1, h2, p, ul { margin-block: 0 .7em; }
h1 { font-size: clamp(2.75rem, 7vw, 6rem); line-height: 1.12; }
h2 { font-size: clamp(2.4rem, 5vw, 4.7rem); line-height: 1.16; }
.kicker { color: var(--accent); font-weight: bold; }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1rem, 4vw, 3rem); align-items: center; }
.split img { display: block; inline-size: 100%; block-size: auto; border-radius: .9rem; }
.placeholder { background: #263e77; border: 1px solid #6c87c2; border-radius: .9rem; display: grid; place-items: center; min-block-size: 10rem; font-size: 2rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.action, button { display: inline-flex; align-items: center; min-block-size: 48px; padding: .3rem .85rem; color: #101b36; background: var(--accent); border: 0; border-radius: .6rem; text-decoration: none; font: inherit; cursor: pointer; }
button:disabled { opacity: .48; cursor: default; }
:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.counter { position: fixed; inset-block-start: .6rem; inset-inline-end: 1rem; margin: 0; padding-inline: .6rem; background: var(--night); border-radius: .4rem; }
nav { position: fixed; inset-inline: 0; inset-block-end: .55rem; display: flex; justify-content: center; gap: .55rem; pointer-events: none; }
nav button { pointer-events: auto; }
progress { position: fixed; inset-inline: 0; inset-block-end: 0; inline-size: 100%; block-size: .28rem; border: 0; accent-color: #80aaff; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } .slide { padding-block-start: 4.2rem; } }
@page { size: A4 landscape; margin: 0; }
@media print {
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .slide, .slide.current { display: grid; align-items: center; min-block-size: 0; block-size: 209mm; padding: 12mm 16mm; animation: none; break-after: page; }
  .slide:last-child { break-after: auto; }
  .counter, nav, progress { display: none; }
  .split { grid-template-columns: 1.1fr 1fr; }
}