/* Polibeli — teljes képernyős bemutató (/bemutato).
   1920×1080-as színpad, amelyet a motor (deck.js) az ablakhoz méretez; a diák a weboldal arculatát követik
   (bordó + meleg papír, Newsreader + Schibsted Grotesk), a termékképernyők ugyanazok, mint a főoldalon (site.css .ui-*).
   Az animációk a .is-active diához és a lépésekhez (data-step → .is-in) kötődnek; mozgáscsökkentésnél, nyomtatásnál
   és a ?statikus=1 módban minden dia a végállapotában jelenik meg. */

html.dk-html, .dk-body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #0d0508; }
.dk-body { min-height: 0; background-image: none; font: 400 16px/1.4 var(--sans); color: var(--ink); -webkit-user-select: none; user-select: none; }
:where(.dk-body) :is(p, h1, h2, h3, ul, ol, dl, dd, figure) { margin: 0; }
:where(.dk-body) :is(ul, ol) { padding: 0; list-style: none; }
.dk-body button { cursor: pointer; }
.dk-noscript { position: fixed; left: 0; right: 0; top: 0; z-index: 10; margin: 0; padding: 14px 20px; background: #fff7d6; color: #3F0C15; font: 600 16px var(--sans); text-align: center; }

:root { --dk-oxblood: #7B1D2A; --dk-ink: #3F0C15; --dk-gold: #E8CD9E; }
.dk { position: fixed; inset: 0; --s: 1; }
.dk-viewport { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(1300px 900px at 50% 38%, #2b0d14, #0d0508 70%); }
.dk-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; margin: -540px 0 0 -960px; transform: scale(var(--s)); transform-origin: 50% 50%; background: var(--paper); overflow: hidden; box-shadow: 0 40px 140px rgba(0, 0, 0, .55); outline: none; }

/* ---------- Diák ---------- */
.dk-slide {
  position: absolute; inset: 0; overflow: hidden; color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0; visibility: hidden; translate: var(--dx, 0) 0;
  transition: opacity .55s var(--ease), translate .7s var(--ease), visibility 0s linear .55s;
}
.dk-slide.is-before { --dx: -56px; }
.dk-slide.is-after { --dx: 56px; }
.dk-slide.is-active { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.dk-slide__body { position: absolute; inset: 0; padding: 84px 128px 150px; display: flex; flex-direction: column; }
.dk-slide--full .dk-slide__body { padding: 0; }
.dk-note { display: none; }

.dk-theme-dark { color: #fff; background: #3F0C15; background-image: none; }
.dk-theme-youth { background: #FFF4E4; background-image: none; }

/* Lábléc: logó, szakasz, sorszám */
.dk-foot { position: absolute; left: 128px; right: 128px; bottom: 32px; height: 54px; display: flex; align-items: center; gap: 28px; padding-top: 14px; border-top: 1px solid var(--line-2); font: 500 21px/1 var(--sans); color: var(--ink-3); }
.dk-foot__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--oxblood); }
.dk-logo { height: 26px; width: auto; }
.dk-foot__section { letter-spacing: .08em; text-transform: uppercase; font-size: 19px; font-weight: 600; color: var(--brass-700); }
.dk-foot__n { margin-left: auto; font-variant-numeric: tabular-nums; }
.dk-theme-youth .dk-foot { border-color: #E9D8C0; }
.dk-illu { position: absolute; left: 128px; bottom: 104px; font: 500 21px/1.2 var(--sans); color: var(--ink-3); }

/* ---------- Tipográfia ---------- */
.dk-head { flex: none; max-width: 1664px; }
.dk-eyebrow { display: flex; align-items: center; gap: 22px; margin: 0 0 26px; font: 600 24px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brass-700); }
.dk-eyebrow::after { content: ''; width: 96px; height: 2px; background: currentColor; opacity: .5; }
.dk-eyebrow--gold { color: var(--dk-gold); }
.dk-h2, .dk-h1 { font-family: var(--serif-display); font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.dk-h2 { max-width: 1560px; font-size: 88px; line-height: 1.03; color: var(--oxblood); }
.dk-h1 { font-size: 104px; line-height: 1.01; letter-spacing: -.025em; color: #fff; }
.dk-text { max-width: 1180px; font: 400 36px/1.42 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.dk-lede { max-width: 1100px; font: 400 46px/1.32 var(--serif); color: var(--ink-2); text-wrap: pretty; }
.dk-lede--light { color: #F3DDD8; }

/* ---------- Lépések (fragmentek) ---------- */
html.js .dk:not(.is-static) [data-step] { opacity: 0; translate: 0 28px; transition: opacity .6s var(--ease), translate .75s var(--ease); }
html.js .dk:not(.is-static) [data-step].is-in { opacity: 1; translate: none; }
html.js .dk:not(.is-static) .dk-edge[data-step], html.js .dk:not(.is-static) .dk-packet[data-step] { translate: none; }
html.js .dk:not(.is-static) .dk-drawer[data-step]:not(.is-in) { translate: 70px 0; }

/* ---------- Hullámsávok ---------- */
.dk-wave { display: inline-flex; align-items: center; gap: .2em; height: 1.7em; font-size: 20px; color: var(--oxblood); }
.dk-wave i { display: block; width: .24em; height: calc(var(--h, .5) * 100%); border-radius: 3px; background: currentColor; transform-origin: center; }
.dk-slide.is-active .dk-wave i { animation: dk-bar 1.15s ease-in-out var(--d, 0s) infinite alternate; }
.dk-wave--small { height: 1.5em; font-size: 18px; }
.dk-wave--white { color: #fff; font-size: 17px; height: 1.4em; }
@keyframes dk-bar { from { transform: scaleY(.22); } to { transform: scaleY(1); } }

/* ============================================================ 1. Nyitó */
.dk-cover__bg, .dk-cover__veil { position: absolute; inset: 0; }
.dk-cover__photo { position: absolute; inset: 0; margin: 0; border-radius: 0; box-shadow: none; background: #3F0C15; }
.dk-cover__photo img { width: 100%; height: 100%; object-fit: cover; }
.dk-cover__veil { background: linear-gradient(98deg, #2c0a11 0%, rgba(44, 10, 17, .97) 34%, rgba(63, 12, 21, .82) 60%, rgba(63, 12, 21, .5) 100%), linear-gradient(0deg, rgba(44, 10, 17, .9), rgba(44, 10, 17, 0) 38%); }
.dk-cover__bars { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; display: flex; align-items: flex-end; justify-content: center; opacity: .5; -webkit-mask-image: linear-gradient(0deg, #000 15%, transparent); mask-image: linear-gradient(0deg, #000 15%, transparent); }
.dk-wave--cover { width: 100%; height: 100%; justify-content: space-between; align-items: flex-end; padding: 0 40px; font-size: 20px; color: #E8CD9E; gap: 0; }
.dk-wave--cover i { width: 9px; height: calc(var(--h) * 100%); transform-origin: bottom; }
.dk-cover__brand { display: flex; align-items: flex-end; gap: 18px; color: #fff; }
.dk-cover__brand .dk-logo { height: 46px; }
.dk-cover__brand span { margin-bottom: 7px; font: 600 17px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--dk-gold); }
.dk-cover__main { position: absolute; left: 128px; top: 176px; bottom: 150px; width: 1130px; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.dk-cover__main .dk-cover__brand { position: absolute; left: 0; top: -84px; }
.dk-cover__main .dk-eyebrow { margin-bottom: 30px; }
.dk-cover__main .dk-h1 { margin-bottom: 34px; }
.dk-trust { display: flex; gap: 48px; margin-top: 64px; }
.dk-trust li { display: flex; align-items: center; gap: 18px; max-width: 290px; font: 600 21px/1.35 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #F3DDD8; }
.dk-trust .ico { width: 40px; height: 40px; color: var(--dk-gold); stroke-width: 1.4; }
.dk-cover__aud { position: absolute; right: 128px; bottom: 60px; font: 500 23px/1 var(--sans); letter-spacing: .06em; color: var(--dk-gold); }
.dk-cover__card { position: absolute; right: 128px; top: 300px; width: 560px; padding: 34px 38px 34px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 22px; background: rgba(44, 10, 17, .74); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.dk-cover__card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font: 600 20px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #F3DDD8; }
.dk-cover__card-head .dk-wave { margin-left: auto; color: var(--dk-gold); }
.dk-cover__q { margin-bottom: 18px; font: italic 400 27px/1.38 var(--serif); color: #E7C9C3; }
.dk-cover__a { font: 400 30px/1.42 var(--serif); color: #fff; }
.dk-cover__a mark { padding: 0 .08em; color: inherit; background: linear-gradient(transparent 62%, rgba(232, 205, 158, .55) 62%) 0 0 / 0 100% no-repeat; }
.dk-slide.is-active .dk-cover__a mark { animation: dk-mark 1s 1.4s var(--ease) forwards; }
.dk-cover__chip { display: flex; align-items: center; gap: 14px; margin-top: 24px; font: 600 20px/1 var(--sans); }
.dk-cover__chip span { padding: 8px 14px; border-radius: 6px; background: #DDEBE4; color: #2E5E4D; }
.dk-cover__chip em { font-style: normal; color: #D7B7B1; font-weight: 500; }
@keyframes dk-mark { to { background-size: 100% 100%; } }
.dk-cover__card > * { opacity: 0; translate: 0 18px; }
.dk-slide.is-active .dk-cover__card > * { animation: dk-rise .8s var(--ease) forwards; }
.dk-slide.is-active .dk-cover__card > :nth-child(2) { animation-delay: .35s; }
.dk-slide.is-active .dk-cover__card > :nth-child(3) { animation-delay: .9s; }
.dk-slide.is-active .dk-cover__card > :nth-child(4) { animation-delay: 2.3s; }
@keyframes dk-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.dk-cover__main > :not(.dk-cover__brand) { opacity: 0; translate: 0 26px; }
.dk-slide.is-active .dk-cover__main > :not(.dk-cover__brand) { animation: dk-rise .9s var(--ease) forwards; }
.dk-slide.is-active .dk-cover__main > :nth-child(3) { animation-delay: .1s; }
.dk-slide.is-active .dk-cover__main > :nth-child(4) { animation-delay: .2s; }
.dk-slide.is-active .dk-cover__main > :nth-child(5) { animation-delay: .35s; }

/* ============================================================ 2. A probléma: az AI-kor */
.dk-problem__stage { flex: none; display: grid; grid-template-columns: 1fr 92px 1fr; align-items: stretch; height: 392px; margin-top: 30px; }
.dk-doc, .dk-voice { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; box-shadow: var(--shadow-ui); overflow: hidden; }
.dk-doc__bar, .dk-voice__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 68px; padding: 0 28px; border-bottom: 1px solid var(--line); font: 600 27px/1 var(--sans); color: var(--ink); }
.dk-doc__bar span, .dk-voice__bar span { display: inline-flex; align-items: center; gap: 14px; }
.dk-doc__bar .ico, .dk-voice__bar .ico { color: var(--oxblood); }
.dk-doc__bar b { padding: 7px 14px; border-radius: 99px; background: var(--amber-100); color: #7d5a14; font: 600 20px/1 var(--sans); }
.dk-doc__page { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 26px 30px 0; }
.dk-doc__title { display: block; width: 46%; height: 20px; margin-bottom: 20px; border-radius: 4px; background: var(--ink-2); transform-origin: left; }
.dk-doc__line { display: block; width: var(--w); height: 14px; margin-bottom: 12px; border-radius: 4px; background: var(--paper-3); transform-origin: left; }
.dk-doc__gap { display: block; height: 14px; }
html.js .dk:not(.is-static) .dk-doc__line, html.js .dk:not(.is-static) .dk-doc__title { transform: scaleX(0); }
html.js .dk:not(.is-static) .dk-doc.is-in .dk-doc__line, html.js .dk:not(.is-static) .dk-doc.is-in .dk-doc__title { animation: dk-fill .26s calc(var(--i, 0) * .2s + .3s) var(--ease) forwards; }
@keyframes dk-fill { to { transform: scaleX(1); } }
.dk-doc__stamp { position: absolute; right: 44px; top: 62px; padding: 8px 28px; border: 5px solid #B42318; border-radius: 12px; color: #B42318; font: 700 56px/1 var(--sans); letter-spacing: .02em; text-transform: uppercase; rotate: -9deg; background: rgba(255, 255, 255, .86); }
html.js .dk:not(.is-static) .dk-doc__stamp { opacity: 0; translate: 0 0; scale: 1.7; transition: opacity .25s ease, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
html.js .dk:not(.is-static) .dk-doc__stamp.is-in { opacity: 1; scale: 1; }
.dk-doc__clock { display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 30px; border-top: 1px solid var(--line); background: var(--paper-2); font: 500 24px/1 var(--sans); color: var(--ink-2); }
.dk-doc__clock .ico { color: var(--ink-3); }
.dk-doc__clock b { font: 600 34px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.dk-vs { align-self: center; justify-self: center; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--brass); color: var(--brass-700); font: 600 44px/1 var(--serif-display); padding-bottom: 6px; }
.dk-voice__body { flex: 1; display: flex; gap: 24px; padding: 28px 30px 0; }
.dk-voice__avatar { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--oxblood-50); color: var(--oxblood); }
.dk-voice__body p { font: 400 30px/1.42 var(--serif); color: var(--ink); }
.dk-voice__text { padding: 0 30px; display: flex; align-items: center; height: 100px; border-top: 1px solid var(--line); background: var(--paper-2); font: 500 25px/1.3 var(--sans); color: var(--ink-2); }
.dk-source { position: absolute; left: 128px; right: 128px; bottom: 112px; display: flex; align-items: center; gap: 26px; padding-top: 18px; border-top: 1px solid var(--line-2); font: 500 26px/1.3 var(--sans); color: var(--ink-2); }
.dk-source b { font: 600 64px/1 var(--serif-display); color: var(--oxblood); }
.dk-source small { display: block; margin-top: 4px; font-size: 20px; color: var(--ink-3); }
.dk-problem__text { margin-top: 26px; }
.dk-slide[data-id='problem'] .dk-illu { bottom: 104px; left: auto; right: 128px; }

/* ============================================================ 3. A probléma: kapacitás */
.dk-cap { flex: 1; display: flex; flex-direction: column; gap: 26px; margin-top: 34px; min-height: 0; }
.dk-lane { display: flex; flex-direction: column; padding: 28px 36px 26px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; box-shadow: var(--shadow-ui); }
.dk-lane--classic { flex: 1.25; }
.dk-lane--parallel { flex: 1; }
.dk-lane__head { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; margin-bottom: 18px; }
.dk-lane__head h3 { font: 600 36px/1.1 var(--serif-display); color: var(--ink); }
.dk-lane__head p { display: flex; align-items: baseline; gap: 14px; font: 500 26px/1 var(--sans); color: var(--ink-2); }
.dk-lane__head p b { font-weight: 600; color: var(--ink); }
.dk-lane__head p i { font-style: normal; color: var(--brass-700); }
.dk-lane__row { flex: 1; display: flex; align-items: center; gap: 44px; }
.dk-blocks { flex: 1; display: grid; grid-template-columns: repeat(40, 1fr); gap: 5px; }
.dk-blocks i { display: block; height: 84px; border-radius: 5px; background: var(--paper-3); transition: background .25s; }
.dk-blocks i.is-on { background: var(--oxblood); }
.dk-lane__result { flex: none; width: 470px; display: flex; flex-direction: column; gap: 6px; }
.dk-lane__result b { font: 600 64px/1 var(--serif-display); letter-spacing: -.01em; color: var(--oxblood); font-variant-numeric: tabular-nums; }
.dk-lane__result span { font: 500 23px/1.2 var(--sans); color: var(--ink-3); }
.dk-lane__result--accent { width: auto; flex: 1; }
.dk-lane__result--accent b { color: var(--sage); font-size: 56px; }
.dk-lane__result--accent span { color: var(--ink-2); font-size: 26px; }
.dk-lane__clock { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 500 23px/1 var(--sans); color: var(--ink-3); }
.dk-lane__clock b { font: 600 28px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.dk-par { flex: none; width: 420px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px 8px; }
.dk-par i { display: block; height: 15px; border-radius: 5px; background: var(--sage-100); position: relative; overflow: hidden; }
.dk-par i::after { content: ''; position: absolute; inset: 0; background: var(--sage); transform-origin: left; transform: scaleX(0); }
.dk-lane--parallel.is-in .dk-par i::after { animation: dk-fill 1.5s calc(var(--d, 0s) + .2s) var(--ease) forwards; }
html.js .dk.is-static .dk-par i::after, .dk.is-static .dk-par i::after { transform: scaleX(1); }

/* ============================================================ 4. A megoldás */
.dk-room { flex: 1; display: flex; flex-direction: column; gap: 30px; min-height: 0; }
.dk-room__grid { flex: 1; display: grid; grid-template-columns: 660px 1fr; gap: 64px; align-items: center; min-height: 0; }
.dk-room__text { display: flex; flex-direction: column; gap: 28px; }
.dk-room__text .dk-text { font-size: 34px; }
.dk-facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px; border-top: 1px solid var(--line-2); }
.dk-facts div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line); }
.dk-facts div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.dk-facts dt { font: 600 60px/1 var(--serif-display); color: var(--oxblood); margin-bottom: 8px; }
.dk-facts dd { margin: 0; font: 400 23px/1.3 var(--sans); color: var(--ink-2); }
.dk-room__map { align-self: center; }
.dk .ui-map { font-size: 22px; padding: 32px 38px 28px; }
.dk .ui-map__front { font-size: 1.5em; margin-bottom: .9em; padding-bottom: .6em; }
.dk .ui-map__row { gap: 14px; }
.dk .ui-map__desks { gap: 14px; }
.dk .ui-map__legend { font-size: 1em; gap: .6em 1.6em; }
.dk .ui-desk__dot { width: 15px; height: 15px; }
.dk .map-figure { container-type: normal; }

/* ============================================================ 5. Három szerep */
.dk-roles { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 40px; min-height: 0; }
.dk-role { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dk-role header { display: flex; align-items: flex-start; gap: 20px; }
.dk-role header .ico { flex: none; width: 56px; height: 56px; color: var(--oxblood); stroke-width: 1.3; margin-top: 4px; }
.dk-role h3 { font: 600 46px/1.05 var(--serif-display); color: var(--oxblood); }
.dk-role header p { margin-top: 8px; font: 400 25px/1.3 var(--sans); color: var(--ink-2); }
.dk-role__panel { flex: none; min-height: 440px; }
.dk-role__text { font: 400 25px/1.4 var(--sans); color: var(--ink-2); }
.dk .panel-figure { container-type: normal; }
.dk .panel-figure > .ui { font-size: 16px; }
.dk-role--teacher .ui-quote { display: none; }
.dk-role--student .ui-student-screen { grid-template-columns: 1.25fr 1fr; }
.dk-role--student .ui-timer--md { font-size: 1.9em; }

/* ============================================================ 6. A vizsgamenet */
.dk-flow { flex: 1; display: grid; grid-template-columns: 590px 1fr; gap: 24px; min-height: 0; }
.dk-flow__side { display: flex; flex-direction: column; gap: 22px; }
.dk-flow__side .dk-h2 { font-size: 66px; }
.dk-stepper { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dk-stepper li { display: grid; grid-template-columns: 62px 1fr; gap: 20px; align-items: start; padding: 11px 16px 11px 0; border-radius: 12px; color: var(--ink-3); transition: background .4s, color .4s; }
.dk-stepper__n { display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid var(--line-2); border-radius: 50%; font: 600 26px/1 var(--sans); background: #fff; transition: all .4s var(--ease); }
.dk-stepper h3 { font: 600 34px/1.15 var(--serif-display); padding-top: 9px; transition: color .4s; }
.dk-stepper p { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; font: 400 25px/1.35 var(--sans); color: var(--ink-2); transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.dk-stepper li.is-done .dk-stepper__n { background: var(--sage-100); border-color: var(--sage-100); color: var(--sage); }
.dk-stepper li.is-current { padding-left: 0; color: var(--ink); }
.dk-stepper li.is-current .dk-stepper__n { background: var(--oxblood); border-color: var(--oxblood); color: #fff; box-shadow: 0 8px 18px -8px rgba(123, 29, 42, .7); }
.dk-stepper li.is-current h3 { color: var(--oxblood); }
.dk-stepper li.is-current p { max-height: 120px; opacity: 1; margin-top: 8px; }
.dk-flow__device { align-self: center; margin-right: -128px; }
.dk-flow__device .device { width: 1100px; }
.dk-flow__device .device__screen { aspect-ratio: 16 / 10 !important; }
.dk-flow__device .device__lid { border-radius: 22px 22px 6px 6px; }
.dk-flow__device figcaption { display: none; }
/* Belépés és eszközellenőrzés: két további jelenet a vizsgaképernyőben */
.ui-exam[data-phase='login'] .ui-scene--login, .ui-exam[data-phase='equip'] .ui-scene--equip { opacity: 1; visibility: visible; transition: opacity .55s ease; }
.dk-login, .dk-equip { display: flex; flex-direction: column; align-items: center; gap: .3em; }
.dk-login .ui-eyebrow, .dk-equip .ui-eyebrow { text-align: center; }
.dk-login__card, .dk-equip .dk-checks { width: 31em; margin-top: .9em; display: flex; flex-direction: column; gap: .6em; padding: 1.6em 1.8em; border: 1px solid var(--line); border-radius: .6em; background: #fff; box-shadow: var(--shadow-ui); }
.dk-login__card .ui-label { margin-top: .5em; }
.dk-login__card .ui-btn, .dk-equip > .ui-btn { align-self: center; margin-top: 1em; }
.dk-login__field { display: flex; align-items: center; min-height: 3em; padding: 0 1em; border: 1.5px solid var(--oxblood); border-radius: .35em; font: 500 1.35em/1 var(--sans); letter-spacing: .06em; color: var(--ink); background: var(--paper); }
.dk-login__modes { display: flex; gap: .7em; }
.dk-mode { flex: 1; display: flex; align-items: center; justify-content: center; gap: .55em; padding: .9em .6em; border: 1px solid var(--line-2); border-radius: .4em; font-size: .86em; font-weight: 600; color: var(--ink-2); background: #fff; }
.dk-mode.is-on { border-color: var(--oxblood); background: var(--oxblood-50); color: var(--oxblood); }
.dk-mode .ico { width: 1.2em; height: 1.2em; }
.dk-equip .dk-checks { margin-top: .9em; }
.dk-checks li { display: flex; align-items: center; gap: .8em; padding: .75em .9em; border: 1px solid var(--line); border-radius: .4em; font-size: .95em; color: var(--ink-2); transition: border-color .3s, background .3s; }
.dk-checks li > span:nth-child(2) { flex: 1; }
.dk-checks__ico { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); }
.dk-checks__ico .ico { width: 1.15em; height: 1.15em; }
.dk-checks li.is-ok { border-color: #bfd6cb; background: #f2f8f5; }
.dk-checks li.is-ok .dk-checks__ico { background: var(--sage); color: #fff; }
.dk-checks .dk-wave { height: 1.4em; font-size: 1em; color: var(--sage); }
.dk-meter { display: inline-flex; gap: .18em; align-items: flex-end; height: 1.3em; }
.dk-meter i { display: block; width: .34em; height: 100%; border-radius: 2px; background: var(--paper-3); }
.dk-meter i.is-on { background: var(--sage); }
.dk-box { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: 1.5px solid var(--line-2); border-radius: .3em; color: transparent; background: #fff; transition: all .3s; }
.dk-box .ico { width: 1.1em; height: 1.1em; stroke-width: 2.4; }
.dk-checks li.is-ok .dk-box { background: var(--sage); border-color: var(--sage); color: #fff; }
.dk-checks li:not(.is-ok) .dk-wave i { animation: none !important; transform: scaleY(.25); }

/* ============================================================ 7. A virtuális vizsgáztató */
.dk-exr { flex: 1; display: grid; grid-template-columns: 560px 1fr; gap: 88px; min-height: 0; }
.dk-exr__stage { display: flex; flex-direction: column; gap: 22px; align-self: start; padding-top: 6px; }
.dk-exr__frame { position: relative; width: 500px; height: 600px; border-radius: 22px; overflow: hidden; background: #cbd2cb; box-shadow: 0 40px 70px -40px rgba(63, 12, 21, .6); transition: box-shadow .4s; }
.dk-exr__frame[data-speaking='true'] { box-shadow: 0 0 0 6px var(--brass), 0 40px 70px -40px rgba(63, 12, 21, .6); }
.dk-exr__video { width: 100%; height: 100%; object-fit: cover; }
.dk-exr__tag { position: absolute; left: 20px; bottom: 20px; padding: 8px 16px; border-radius: 6px; background: rgba(23, 19, 19, .74); color: #fff; font: 500 22px/1 var(--sans); }
.dk-exr__talk { position: absolute; right: 22px; bottom: 18px; transition: opacity .3s; }
.dk-exr__frame[data-speaking='false'] .dk-exr__talk { opacity: 0; }
.dk-exr__bubble { position: relative; width: 500px; min-height: 150px; padding: 20px 26px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-ui); }
.dk-exr__bubble::before { content: ''; position: absolute; left: 70px; top: -13px; width: 24px; height: 24px; rotate: 45deg; background: #fff; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); }
.dk-exr__state { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font: 600 18px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.dk-exr__state .ico { width: 22px; height: 22px; }
.dk-exr__bubble p { font: 500 31px/1.3 var(--serif); color: var(--ink); min-height: 2.6em; }
.dk-exr__text { display: flex; flex-direction: column; gap: 40px; padding-top: 6px; }
.dk-exr__text .dk-h2 { font-size: 66px; }
.dk-exr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.dk-exr__col h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--line-2); font: 600 38px/1 var(--serif-display); }
.dk-exr__col--do h3 { color: var(--sage); }
.dk-exr__col--dont h3 { color: var(--alert); }
.dk-exr__col h3 .ico { width: 36px; height: 36px; stroke-width: 2.2; }
.dk-marks { display: flex; flex-direction: column; gap: 22px; }
.dk-marks li { position: relative; padding-left: 40px; font: 400 31px/1.36 var(--sans); color: var(--ink-2); }
.dk-marks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 20px; height: 20px; border-radius: 50%; background: var(--sage); }
.dk-marks--dont li::before { background: var(--alert); }

/* ============================================================ 8. Célzott kérdések */
.dk-tg { flex: none; display: grid; grid-template-columns: 1020px 1fr; gap: 40px; margin-top: 34px; height: 500px; }
.dk-board, .dk-dialog { border: 1px solid var(--line-2); border-radius: 16px; background: #fff; box-shadow: var(--shadow-ui); }
.dk-board { padding: 22px 28px 20px; }
.dk-board header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dk-board h3 { font: 600 33px/1 var(--serif-display); color: var(--ink); }
.dk-legend { display: flex; gap: 22px; font: 500 20px/1 var(--sans); color: var(--ink-2); }
.dk-legend li { display: inline-flex; align-items: center; gap: 10px; }
.dk-lvl { display: inline-grid; place-items: center; min-width: 46px; height: 36px; padding: 0 8px; border-radius: 6px; font: 700 20px/1 var(--sans); font-style: normal; flex: none; }
.dk-lvl--k { background: var(--oxblood); color: #fff; }
.dk-lvl--e { background: var(--oxblood-100); color: var(--oxblood); }
.dk-lvl--n { background: var(--paper-3); color: var(--ink-2); }
.dk-legend .dk-lvl { min-width: 32px; height: 30px; font-size: 17px; }
.dk-reqs { position: relative; }
.dk-reqs li { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; height: 68px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 500 26px/1.2 var(--sans); color: var(--ink); }
.dk-reqs li:last-of-type { border-bottom: 0; }
.dk-reqs__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-status { margin-left: auto; padding: 8px 14px; border-radius: 6px; font: 600 20px/1 var(--sans); font-style: normal; white-space: nowrap; background: var(--grey-100); color: #57616a; transition: background .4s, color .4s; }
.dk-status--demonstrated, [data-status='demonstrated'] > .dk-status { background: var(--sage-100); color: var(--sage); }
.dk-status--partial, [data-status='partial'] > .dk-status { background: var(--amber-100); color: #7d5a14; }
.dk-status--missing, [data-status='missing'] > .dk-status { background: var(--grey-100); color: #57616a; }
.dk-status--uncertain, [data-status='uncertain'] > .dk-status { background: var(--blue-100); color: var(--blue); }
[data-status='open'] > .dk-status { background: transparent; color: var(--ink-3); font-weight: 500; border: 1.5px dashed var(--line-2); }
.dk-reqs__target { position: absolute; z-index: 0; left: -6px; right: -6px; top: 0; height: 68px; border-radius: 10px; border: 3px solid var(--brass); background: rgba(176, 128, 64, .1); opacity: 0; transform: translateY(var(--y, 0px)); transition: transform .55s var(--ease), opacity .3s; }
.dk-reqs__target.is-on { opacity: 1; }
.dk-dialog { position: relative; padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; }
.dk-dialog__who { display: flex; align-items: center; gap: 18px; }
.dk-portrait { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; background: #cbd2cb; }
.dk-dialog__who b { display: block; font: 600 26px/1.1 var(--sans); }
.dk-dialog__who span { font: 500 20px/1.2 var(--sans); color: var(--brass-700); }
.dk-bubble { padding: 14px 22px 16px; border-radius: 14px; min-height: 118px; opacity: .25; transition: opacity .4s; }
.dk-bubble.is-on { opacity: 1; }
.dk-bubble span { display: block; margin-bottom: 4px; font: 700 16px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.dk-bubble p { font: 400 25px/1.3 var(--serif); }
.dk-bubble--q { background: var(--oxblood-50); color: var(--oxblood-900); }
.dk-bubble--q span { color: var(--oxblood); }
.dk-bubble--a { background: var(--paper-2); color: var(--ink); }
.dk-bubble--a span { color: var(--ink-3); }
.dk-cover-ring { position: absolute; right: 26px; bottom: 20px; display: flex; align-items: center; gap: 14px; flex-direction: row-reverse; font: 600 20px/1.2 var(--sans); color: var(--ink-2); max-width: 190px; text-align: right; }
.dk-cover-ring .ui-ring { font-size: 15px; width: 6.4em; height: 6.4em; flex: none; }
.dk-rules { position: absolute; left: 128px; bottom: 104px; display: flex; gap: 46px; font: 500 26px/1.2 var(--sans); color: var(--ink-2); }
.dk-rules li { display: flex; align-items: center; gap: 12px; }
.dk-rules .ico { color: var(--sage); stroke-width: 2.2; }

/* ============================================================ 9. Idézetekkel alátámasztott értékelés */
.dk-evidence__text { margin-top: 22px; max-width: 1500px; font-size: 33px; }
.dk-ev { position: relative; flex: none; display: grid; grid-template-columns: 1.18fr 1fr; gap: 36px; margin-top: 30px; height: 500px; }
.dk-card { border: 1px solid var(--line-2); border-radius: 16px; background: #fff; box-shadow: var(--shadow-ui); padding: 22px 30px; }
.dk-card h3 { font: 600 30px/1 var(--serif-display); color: var(--ink); }
.dk-tr h3 { margin-bottom: 8px; }
.dk-tr ol { display: flex; flex-direction: column; }
.dk-tr__line { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font: 400 22.5px/1.36 var(--sans); color: var(--ink-2); }
.dk-tr__line:last-child { border-bottom: 0; }
.dk-tr__line time { padding-top: 3px; font: 500 19px/1.4 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dk-tr__line small { display: block; font: 700 15px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dk-tr__line--examiner small { color: var(--oxblood); }
.dk-tr mark { padding: 1px 3px; margin: 0 -3px; border-radius: 4px; color: inherit; background: linear-gradient(var(--brass-100), var(--brass-100)) 0 0 / 0 100% no-repeat; transition: background-size .5s var(--ease), box-shadow .3s; }
.dk-tr mark.is-hot { background-size: 100% 100%; box-shadow: 0 0 0 2px var(--brass); }
.dk-tr mark.is-done { background-size: 100% 100%; box-shadow: none; }
.dk-an header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.dk-an__cover { display: flex; align-items: center; gap: 14px; flex-direction: row-reverse; font: 600 19px/1.2 var(--sans); color: var(--ink-2); max-width: 260px; text-align: right; }
.dk-an__cover .ui-ring { font-size: 12.5px; width: 5.6em; height: 5.6em; flex: none; }
.dk-an__rows { position: relative; }
.dk-an__rows li { display: flex; align-items: center; gap: 14px; height: 68px; border-bottom: 1px solid var(--line); font: 500 26px/1.2 var(--sans); color: var(--ink); transition: opacity .4s; }
.dk-an__rows li:last-child { border-bottom: 0; }
.dk-an__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-an__rows li.is-pending { opacity: .38; }
.dk-an__rows li.is-pending .dk-status { visibility: hidden; }
.dk-an__rows li.is-flash { background: linear-gradient(90deg, rgba(176, 128, 64, .16), transparent 70%); }
.dk-an__fail { position: absolute; right: 30px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 99px; background: var(--alert-100); color: var(--alert); font: 600 21px/1 var(--sans); opacity: 0; translate: 0 8px; transition: opacity .3s, translate .3s; }
.dk-an__fail.is-on { opacity: 1; translate: 0 0; }
.dk-an__fail .ico { stroke-width: 2.4; }
.dk-chip { position: absolute; z-index: 5; left: 0; top: 0; padding: 8px 16px; border-radius: 8px; background: var(--brass); color: #fff; font: 600 21px/1.2 var(--sans); box-shadow: 0 10px 30px rgba(63, 12, 21, .35); pointer-events: none; white-space: nowrap; max-width: 460px; overflow: hidden; text-overflow: ellipsis; }
.dk-chip--bad { background: var(--alert); }
.dk-slide[data-id='evidence'] .dk-illu { bottom: 104px; }

/* ============================================================ 10. Tanári kontroll */
.dk-ctl { flex: 1; display: grid; grid-template-columns: 770px 1fr; gap: 72px; min-height: 0; }
.dk-ctl__text { display: flex; flex-direction: column; gap: 28px; }
.dk-ctl__text .dk-h2 { font-size: 66px; }
.dk-principles { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.dk-principles li { display: grid; grid-template-columns: 74px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.dk-principles li > span { font: 600 46px/1 var(--serif-display); color: var(--brass); padding-top: 2px; }
.dk-principles h3 { font: 600 36px/1.15 var(--serif-display); color: var(--oxblood); margin-bottom: 6px; }
.dk-principles p { font: 400 25px/1.35 var(--sans); color: var(--ink-2); }
.dk-ctl__scene { position: relative; align-self: start; padding-top: 4px; }
.dk-topic { position: relative; padding: 30px 36px 26px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff; box-shadow: var(--shadow-ui); }
.dk-topic__status { position: relative; height: 44px; margin-bottom: 18px; }
.dk-topic__chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 99px; font: 600 21px/1 var(--sans); opacity: 0; transition: opacity .4s, translate .4s; translate: 0 6px; }
.dk-topic__chip .ico { stroke-width: 2; }
.dk-topic__chip--draft { border: 2px dashed var(--line-2); color: var(--ink-3); }
.dk-topic__chip--review { background: var(--amber-100); color: #7d5a14; }
.dk-topic__chip--ok { background: var(--sage-100); color: var(--sage); }
.dk-topic__eyebrow { font: 600 19px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-700); }
.dk-topic h3 { margin: 12px 0 18px; font: 600 40px/1.12 var(--serif-display); color: var(--ink); }
.dk-topic__crit { display: flex; flex-direction: column; gap: 4px; }
.dk-topic__crit li { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 4px; border-bottom: 1px solid var(--line); font: 500 24px/1.2 var(--sans); color: var(--ink); opacity: .25; transition: opacity .5s; }
.dk-topic__crit li:last-child { border-bottom: 0; }
.dk-topic__nots { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dk-topic__nots li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: var(--alert-100); color: var(--alert); font: 600 21px/1 var(--sans); opacity: 0; translate: 0 -14px; transition: opacity .4s, translate .5s cubic-bezier(.3, 1.4, .5, 1); }
.dk-topic__nots .ico { stroke-width: 2.4; }
.dk-topic__stamp { position: absolute; right: 36px; top: 24px; display: flex; align-items: center; gap: 12px; padding: 10px 22px; border: 4px solid var(--sage); border-radius: 12px; color: var(--sage); font: 700 30px/1 var(--sans); text-transform: uppercase; rotate: -7deg; opacity: 0; scale: 1.6; transition: opacity .25s, scale .35s cubic-bezier(.3, 1.6, .5, 1); background: rgba(255, 255, 255, .9); }
.dk-snap { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; opacity: 0; translate: 0 20px; transition: opacity .5s, translate .6s var(--ease); }
.dk-snap__card { position: relative; padding: 18px 24px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; box-shadow: var(--shadow-ui); display: flex; flex-direction: column; gap: 6px; }
.dk-snap__card span { display: flex; align-items: center; gap: 10px; font: 600 19px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dk-snap__card b { font: 600 27px/1.15 var(--serif-display); color: var(--ink); }
.dk-snap__card em { font: 500 20px/1.2 var(--sans); font-style: normal; color: var(--ink-3); }
.dk-snap__card--run { border-color: #bfd6cb; background: #f4f9f6; }
.dk-snap__card--run span { color: var(--sage); }
.dk-snap p { grid-column: 1 / -1; font: 500 22px/1.3 var(--sans); color: var(--ink-2); }
.dk-snap__card--edit b { transition: color .3s; }
.dk-snap.is-edited .dk-snap__card--edit b { color: var(--oxblood); }
/* A lépéshez kötött állapotok */
.dk-slide[data-id='control'][data-at='1'] .dk-topic__chip--ok, .dk-slide[data-id='control'][data-at='2'] .dk-topic__chip--ok, .dk-slide[data-id='control'][data-at='3'] .dk-topic__chip--ok, .dk-slide[data-id='control'][data-at='4'] .dk-topic__chip--ok { opacity: 1; translate: 0 0; }
.dk-slide[data-id='control'][data-at='0'] .dk-topic__chip--draft { opacity: 1; translate: 0 0; }
.dk-slide[data-id='control'][data-at='1'] .dk-topic__stamp { opacity: 1; scale: 1; }
.dk-slide[data-id='control']:is([data-at='2'], [data-at='3'], [data-at='4']) .dk-topic__crit li { opacity: 1; }
.dk-slide[data-id='control']:is([data-at='3'], [data-at='4']) .dk-topic__nots li { opacity: 1; translate: 0 0; }
.dk-slide[data-id='control']:is([data-at='3'], [data-at='4']) .dk-topic__nots li:nth-child(2) { transition-delay: .15s; }
.dk-slide[data-id='control']:is([data-at='3'], [data-at='4']) .dk-topic__nots li:nth-child(3) { transition-delay: .3s; }
.dk-slide[data-id='control'][data-at='4'] .dk-snap { opacity: 1; translate: 0 0; }
.dk-slide[data-id='control'][data-at='2'] .dk-topic__crit li { transition-delay: calc(var(--i, 0) * .12s); }
.dk-slide[data-id='control'][data-at='1'] .dk-topic__crit li { opacity: .25; }
.dk-slide[data-id='control'] .dk-topic__crit li:nth-child(1) { --i: 0; } .dk-slide[data-id='control'] .dk-topic__crit li:nth-child(2) { --i: 1; } .dk-slide[data-id='control'] .dk-topic__crit li:nth-child(3) { --i: 2; } .dk-slide[data-id='control'] .dk-topic__crit li:nth-child(4) { --i: 3; }
.dk-slide[data-id='control'] .dk-topic__chip--review { display: none; }

/* ============================================================ 11. Felügyelői nézet */
.dk-sup { flex: 1; display: grid; grid-template-columns: 720px 1fr; gap: 64px; min-height: 0; }
.dk-sup__text { display: flex; flex-direction: column; gap: 34px; }
.dk-sup__text .dk-h2 { font-size: 66px; }
.dk-points { display: flex; flex-direction: column; gap: 6px; }
.dk-points li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); font: 400 28px/1.3 var(--sans); color: var(--ink-2); }
.dk-points .ico { color: var(--oxblood); stroke-width: 1.4; width: 40px; height: 40px; }
.dk-sup__note { display: flex; align-items: center; gap: 14px; font: 500 24px/1.3 var(--sans); color: var(--ink-2); padding: 16px 20px; border-left: 4px solid var(--brass); background: var(--brass-100); border-radius: 6px; }
.dk-sup__note .ico { color: var(--brass-700); }
.dk-sup__panel { position: relative; align-self: start; }
.dk-sup__panel .panel-figure > .ui { font-size: 21px; }
.dk-slide[data-id='supervisor'][data-at='3'] .dk-callout--help { opacity: 0 !important; }
.dk-sup__panel .ui-seats { gap: .6em; }
.dk-callout { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 99px; background: var(--alert); color: #fff; font: 600 24px/1 var(--sans); box-shadow: 0 14px 30px -10px rgba(180, 35, 24, .7); }
.dk-callout .ico { stroke-width: 2; }
.dk-callout--help { right: 16px; bottom: 120px; }
.dk-drawer { position: absolute; z-index: 4; right: -14px; top: 54px; bottom: -10px; width: 470px; padding: 20px 26px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; box-shadow: -30px 30px 80px -30px rgba(63, 12, 21, .5); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.dk-drawer header { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dk-drawer header b { font: 600 28px/1.1 var(--serif-display); color: var(--ink); }
.dk-live { display: inline-flex; align-items: center; gap: 8px; font: 600 18px/1 var(--sans); color: var(--sage); }
.dk-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--sage); animation: pulse 1.6s ease-in-out infinite; }
.dk-drawer ol { display: flex; flex-direction: column; gap: 14px; }
.dk-drawer li small { display: block; margin-bottom: 4px; font: 700 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dk-drawer li p { font: 400 21px/1.35 var(--sans); color: var(--ink-2); }
.dk-drawer__examiner small { color: var(--oxblood); }
.dk-drawer__live p { color: var(--ink-3); font-style: italic; min-height: 3.6em; }

/* ============================================================ 12. Jegyzőkönyv */
.dk-rep { flex: 1; display: grid; grid-template-columns: 780px 1fr; gap: 60px; min-height: 0; }
.dk-rep__text { display: flex; flex-direction: column; gap: 26px; }
.dk-rep__text .dk-h2 { font-size: 64px; }
.dk-sections { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.dk-sections li { display: grid; grid-template-columns: 62px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); transition: background .4s; }
.dk-sections li > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--oxblood); color: var(--oxblood); font: 600 25px/1 var(--sans); transition: all .4s; }
.dk-sections h3 { font: 600 33px/1.15 var(--serif-display); color: var(--ink); margin-bottom: 4px; }
.dk-sections p { font: 400 24px/1.3 var(--sans); color: var(--ink-2); }
.dk-slide[data-id='report'][data-at='1'] .dk-sections li:nth-child(1) > span, .dk-slide[data-id='report'][data-at='2'] .dk-sections li:nth-child(2) > span, .dk-slide[data-id='report'][data-at='3'] .dk-sections li:nth-child(3) > span, .dk-slide[data-id='report'][data-at='4'] .dk-sections li:nth-child(4) > span { background: var(--oxblood); color: #fff; }
.dk-chips { display: flex; flex-direction: column; gap: 12px; }
.dk-chips li { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; padding: 12px 20px; border: 1px solid var(--line-2); border-radius: 99px; background: #fff; font: 500 23px/1 var(--sans); color: var(--ink-2); }
.dk-chips .ico { color: var(--oxblood); }
.dk-rep__pages { position: relative; align-self: start; height: 760px; }
.dk-pg { position: absolute; top: 20px; width: 470px; height: 668px; padding: 36px 36px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; box-shadow: 0 30px 60px -28px rgba(63, 12, 21, .5); overflow: hidden; font: 400 15px/1.35 var(--sans); color: var(--ink-2); transition: translate .6s var(--ease), rotate .6s var(--ease), scale .6s var(--ease), box-shadow .5s; }
.dk-pg--1 { left: 0; rotate: -3deg; z-index: 1; }
.dk-pg--2 { left: 160px; rotate: 1.5deg; z-index: 2; top: 40px; }
.dk-pg--3 { left: 320px; rotate: -1deg; z-index: 3; top: 28px; }
.dk-pg--4 { left: 430px; rotate: 3.5deg; z-index: 4; top: 56px; }
.dk-slide[data-id='report'][data-at='1'] .dk-pg--1, .dk-slide[data-id='report'][data-at='2'] .dk-pg--2, .dk-slide[data-id='report'][data-at='3'] .dk-pg--3, .dk-slide[data-id='report'][data-at='4'] .dk-pg--4 { z-index: 9; scale: 1.06; rotate: 0deg; translate: 0 -16px; box-shadow: 0 44px 80px -30px rgba(63, 12, 21, .65), 0 0 0 3px var(--brass); }
.dk-pg__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.dk-pg__head b { font: 600 34px/1 var(--serif-display); color: var(--ink); }
.dk-pg__head span { font: 400 26px/1 var(--serif-display); color: var(--ink-2); }
.dk-pg__badge { margin-bottom: 18px; font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
.dk-pg dl { display: grid; gap: 10px; margin: 0 0 18px; }
.dk-pg dt { font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dk-pg dd { margin: 2px 0 0; font: 500 16px/1.2 var(--sans); color: var(--ink); }
.dk-pg__score { display: flex; align-items: baseline; gap: 14px; padding: 16px 18px 6px; border-radius: 8px 8px 0 0; background: #eef3f1; }
.dk-pg__score b { font: 700 46px/1 var(--sans); color: var(--sage); }
.dk-pg__score span { font: 600 15px/1.2 var(--sans); color: var(--ink); }
.dk-pg__bar { display: block; height: 10px; margin-bottom: 14px; border-radius: 0 0 8px 8px; background: #dfe9e4; }
.dk-pg__bar i { display: block; height: 100%; width: var(--w); background: var(--sage); border-radius: inherit; }
.dk-pg__h { margin-bottom: 14px; font: 700 18px/1.2 var(--sans); color: var(--ink); }
.dk-pg ul li, .dk-pg ol li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dk-pg ul li span { flex: 1; }
.dk-pg .dk-lvl { min-width: 24px; height: 22px; font-size: 12px; }
.dk-pg .dk-status { padding: 4px 8px; font-size: 11px; }
.dk-pg__quote { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--brass); background: var(--paper); font: italic 400 15px/1.4 var(--serif); }
.dk-pg ol { display: flex; flex-direction: column; }
.dk-pg ol li { display: block; }
.dk-pg ol small { display: block; font: 700 10px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dk-pg ol li.examiner small { color: var(--oxblood); }
.dk-pg__log li { gap: 14px; }
.dk-pg__log time { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; }
.dk-rep__pdf { position: absolute; z-index: 12; right: 20px; bottom: 28px; display: inline-flex; align-items: center; gap: 14px; padding: 18px 28px; border-radius: 14px; background: var(--oxblood); color: #fff; font: 600 28px/1 var(--sans); box-shadow: 0 24px 40px -18px rgba(63, 12, 21, .7); opacity: 0; translate: 0 14px; transition: opacity .4s, translate .5s var(--ease), scale .15s; }
.dk-slide[data-id='report'][data-at='4'] .dk-rep__pdf { opacity: 1; translate: 0 0; animation: dk-press 1.2s 1s ease both; }
@keyframes dk-press { 0%, 40% { scale: 1; } 50% { scale: .94; } 62%, 100% { scale: 1; } }

/* ============================================================ 13. Adatok és működés */
.dk-dia { position: relative; flex: none; width: 1664px; height: 470px; margin-top: 26px; }
.dk-dia__edges { position: absolute; inset: 0; width: 1664px; height: 470px; overflow: visible; }
.dk-edge { fill: none; stroke: #C4B49A; color: #C4B49A; stroke-width: 3; }
.dk-node { position: absolute; width: 420px; padding: 20px 26px 18px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff; box-shadow: var(--shadow-ui); }
.dk-node--browser { left: 0; top: 125px; height: 220px; }
.dk-node--server { left: 622px; top: 125px; height: 220px; border-color: var(--oxblood); box-shadow: 0 0 0 4px rgba(123, 29, 42, .08), var(--shadow-ui); }
.dk-node--llm { left: 1244px; top: 0; height: 190px; }
.dk-node--tts { left: 1244px; top: 280px; height: 190px; }
.dk-node__ico { position: absolute; right: 22px; top: 18px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--oxblood-50); color: var(--oxblood); }
.dk-node__ico .ico { width: 32px; height: 32px; stroke-width: 1.4; }
.dk-node h3 { margin-right: 70px; font: 600 31px/1.1 var(--serif-display); color: var(--oxblood); }
.dk-node b { display: block; margin: 8px 0 8px; font: 600 21px/1.2 var(--sans); color: var(--ink); }
.dk-node p { font: 400 21px/1.3 var(--sans); color: var(--ink-2); }
.dk-flowtag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: var(--brass-100); color: var(--brass-700); font: 600 20px/1 var(--sans); white-space: nowrap; }
.dk-flowtag--0 { left: 20px; top: 70px; }
.dk-flowtag--1 { left: 428px; top: 160px; }
.dk-flowtag--2 { left: 1020px; top: 10px; }
.dk-flowtag--3 { left: 1020px; top: 438px; }
.dk-flowtag--4 { left: 428px; top: 306px; }
.dk-flowtag .ico { stroke-width: 2; }
.dk-packet { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--oxblood); box-shadow: 0 0 0 6px rgba(123, 29, 42, .18); offset-rotate: 0deg; offset-distance: 0%; opacity: 0; }
.dk-packet--1 { offset-path: path('M420 215H622'); }
.dk-packet--2 { offset-path: path('M1042 205C1150 205 1150 95 1244 95'); background: var(--brass); box-shadow: 0 0 0 6px rgba(176, 128, 64, .22); }
.dk-packet--3 { offset-path: path('M1042 285C1150 285 1150 395 1244 395'); background: var(--sage); box-shadow: 0 0 0 6px rgba(59, 106, 89, .22); }
.dk-packet--4 { offset-path: path('M622 295H420'); background: var(--sage); box-shadow: 0 0 0 6px rgba(59, 106, 89, .22); }
.dk-packet--3 { --dly: .3s; }
.dk-packet--4 { --dly: 1.2s; }
.dk-slide.is-active .dk-packet.is-in { animation: dk-travel 2.4s linear var(--dly, 0s) infinite; }
@keyframes dk-travel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.dk-facts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 30px; }
.dk-facts3 li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-left: 4px solid var(--brass); background: var(--brass-100); border-radius: 6px; font: 500 23px/1.35 var(--sans); color: var(--ink-2); }
.dk-facts3 .ico { flex: none; margin-top: 2px; color: var(--brass-700); }

/* ============================================================ 14. Amit az intézmény nyer */
.dk-ben { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 30px; }
.dk-ben__card { padding: 24px 36px 28px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff; box-shadow: var(--shadow-ui); }
.dk-ben__art { height: 124px; margin-bottom: 16px; }
.dk-ben__art svg { width: 100%; height: 100%; }
.dk-ben__card h3 { margin-bottom: 10px; font: 600 46px/1.05 var(--serif-display); color: var(--oxblood); }
.dk-ben__card p { font: 400 26px/1.38 var(--sans); color: var(--ink-2); }
.dk-dot { fill: var(--oxblood-100); }
.dk-slide.is-active .dk-dot { animation: dk-dot 3.6s ease-in-out calc(var(--i) * .11s) infinite; }
@keyframes dk-dot { 0%, 55%, 100% { fill: var(--oxblood-100); } 20%, 35% { fill: var(--oxblood); } }
.dk-lines rect { fill: var(--paper-3); }
.dk-hit { fill: var(--brass-100); stroke: var(--brass); stroke-width: 2; opacity: 0; }
.dk-slide.is-active .dk-hit { animation: dk-hit 4.8s ease-in-out infinite; }
.dk-lens { fill: rgba(255, 255, 255, .5); stroke: var(--oxblood); stroke-width: 6; stroke-linecap: round; transform: translate(60px, 66px); }
.dk-slide.is-active .dk-lens { animation: dk-lens 4.8s ease-in-out infinite; }
@keyframes dk-lens { 0% { transform: translate(60px, 40px); } 30%, 62% { transform: translate(80px, 66px); } 100% { transform: translate(60px, 40px); } }
@keyframes dk-hit { 0%, 20% { opacity: 0; } 34%, 62% { opacity: 1; } 78%, 100% { opacity: 0; } }
.dk-pillar { fill: var(--oxblood); transform-origin: 0 130px; transform-box: view-box; transform: scaleY(1); }
.dk-slide.is-active .dk-pillar { animation: dk-bars 4.2s ease-in-out calc(var(--i) * .06s) infinite; }
@keyframes dk-bars { 0%, 12% { transform: scaleY(var(--h0)); fill: var(--oxblood-100); } 45%, 80% { transform: scaleY(1); fill: var(--oxblood); } 100% { transform: scaleY(var(--h0)); fill: var(--oxblood-100); } }
.dk-ruler { stroke: var(--brass); stroke-width: 3; stroke-dasharray: 8 7; }
.dk-uses { display: flex; align-items: center; gap: 28px; margin-top: 26px; padding: 18px 28px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); }
.dk-uses h3 { flex: none; font: 600 22px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-700); }
.dk-uses__list { display: flex; flex-wrap: wrap; gap: 14px; }
.dk-uses__list li { padding: 12px 20px; border: 1px solid var(--line-2); border-radius: 99px; background: #fff; font: 500 24px/1 var(--sans); color: var(--ink); }

/* ============================================================ 15. Érettségizőknek (fiatalos változat) */
.dk-theme-youth .dk-slide__body { padding-top: 70px; }
.dk-mat { flex: 1; position: relative; display: grid; grid-template-columns: 840px 1fr; gap: 40px; color: #3F0C15; }
.dk-mat__sticker { display: inline-block; margin: 0 0 30px; padding: 12px 28px; border: 3px solid #3F0C15; border-radius: 999px; background: #F2B84B; font: 700 26px/1 var(--sans); letter-spacing: .06em; rotate: -2deg; box-shadow: 4px 4px 0 #3F0C15; }
.dk-mat__h { margin: 0 0 28px; font: 700 100px/1 var(--sans); letter-spacing: -.045em; color: #3F0C15; text-wrap: balance; }
.dk-mat__h mark { padding: 0 .06em; color: inherit; background: linear-gradient(transparent 58%, #F2B84B 58% 92%, transparent 92%); }
.dk-mat__lede { max-width: 760px; font: 400 36px/1.42 var(--sans); color: #4A2B30; }
.dk-mat__chips { display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 34px; }
.dk-mat__chip { padding: 12px 24px; border: 3px solid #3F0C15; border-radius: 18px; font: 700 26px/1.1 var(--sans); box-shadow: 4px 4px 0 #3F0C15; }
.dk-mat__chip--gold { background: #F9D88A; rotate: -3deg; }
.dk-mat__chip--mint { background: #BFE8D6; rotate: 2deg; }
.dk-mat__chip--rasp { background: #F6A3B1; rotate: -2deg; }
.dk-mat__privacy { display: flex; align-items: center; gap: 14px; margin-top: 34px; max-width: 760px; padding: 16px 22px; border: 3px dashed #D9BF9A; border-radius: 18px; font: 500 24px/1.35 var(--sans); color: #4A2B30; }
.dk-mat__privacy .ico { flex: none; color: #2F7A5E; }
.dk-mat__stage { position: relative; }
.dk-mat__blob { position: absolute; right: -80px; top: -20px; width: 880px; height: 820px; }
.dk-mat__blob path { fill: #E2475F; }
.dk-mat__student { position: absolute; right: 70px; bottom: -6px; width: 560px; }
.dk-mat__student img { width: 100%; height: auto; }
.dk-mat__stick { position: absolute; width: 190px; filter: drop-shadow(5px 7px 0 rgba(63, 12, 21, .25)); }
.dk-mat__stick img { width: 100%; height: auto; }
.dk-mat__stick--s1 { left: 0; top: 40px; rotate: -8deg; }
.dk-mat__stick--s2 { left: 150px; top: 330px; rotate: 6deg; }
.dk-mat__stick--s3 { right: 30px; top: 0; rotate: 7deg; }
.dk-mat__stick--s4 { right: 10px; top: 270px; rotate: -6deg; }
.dk-slide.is-active .dk-mat__stick { animation: dk-bob 4.4s ease-in-out infinite alternate; }
.dk-slide.is-active .dk-mat__stick--s2 { animation-delay: -1.2s; }
.dk-slide.is-active .dk-mat__stick--s3 { animation-delay: -2.4s; }
.dk-slide.is-active .dk-mat__stick--s4 { animation-delay: -3.3s; }
@keyframes dk-bob { from { translate: 0 0; } to { translate: 0 -14px; } }
.dk-mat__sheet { position: absolute; left: 30px; bottom: 40px; width: 410px; padding: 20px 24px 22px; border: 3px solid #3F0C15; border-radius: 22px; background: #fff; box-shadow: 6px 6px 0 #3F0C15; rotate: -3deg; }
.dk-mat__sheet p { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font: 700 26px/1 var(--sans); }
.dk-mat__sheet p .ico { color: #2F7A5E; stroke-width: 2.4; width: 32px; height: 32px; }
.dk-mat__row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 2px solid #F0E2CB; font: 600 22px/1.2 var(--sans); }
.dk-mat__row i { width: 14px; height: 14px; border-radius: 50%; background: #2F7A5E; }
.dk-mat__row em { margin-left: auto; padding: 5px 12px; border-radius: 8px; background: #BFE8D6; font: 700 18px/1 var(--sans); font-style: normal; }
.dk-mat__row em.is-partial { background: #F9D88A; }
.dk-mat__qr { position: absolute; right: 20px; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 270px; padding: 18px 18px 16px; border: 3px solid #3F0C15; border-radius: 22px; background: #fff; box-shadow: 6px 6px 0 #3F0C15; rotate: 2deg; }
.dk-qr { width: 216px; height: 216px; padding: 0; }
.dk-mat__qr span { font: 700 21px/1.2 var(--sans); text-align: center; }
.dk-mat__qr b { font: 600 17px/1.2 var(--sans); color: #7B1D2A; }

/* ============================================================ 16. Hol tartunk */
.dk-road { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 48px 0 0; padding-top: 4px; }
.dk-road::before { content: ''; position: absolute; left: 36px; right: 36px; top: 30px; height: 3px; background: repeating-linear-gradient(90deg, var(--line-2) 0 12px, transparent 12px 20px); }
.dk-road li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.dk-road i { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--line-2); background: var(--paper); color: #fff; }
.dk-road .is-here i { background: var(--sage); border-color: var(--sage); }
.dk-road b { font: 600 34px/1.1 var(--serif-display); color: var(--ink); }
.dk-road em { padding: 6px 16px; border-radius: 99px; background: var(--sage-100); color: var(--sage); font: 700 20px/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.dk-road .is-here i::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid var(--sage); opacity: 0; }
.dk-slide.is-active .dk-road .is-here i::after { animation: dk-ping 2.2s ease-out infinite; }
@keyframes dk-ping { 0% { scale: .8; opacity: .8; } 100% { scale: 1.5; opacity: 0; } }
.dk-stat { display: grid; grid-template-columns: 1.2fr 1fr; gap: 90px; margin-top: 60px; }
.dk-stat__col h3 { margin-bottom: 26px; padding-bottom: 16px; border-bottom: 2px solid var(--line-2); font: 700 24px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.dk-ticks { display: flex; flex-direction: column; gap: 22px; }
.dk-ticks li { display: grid; grid-template-columns: 40px 1fr; gap: 18px; font: 400 32px/1.3 var(--sans); color: var(--ink-2); }
.dk-ticks .ico { width: 34px; height: 34px; margin-top: 4px; color: var(--sage); stroke-width: 2.2; }
.dk-dashes { display: flex; flex-direction: column; gap: 22px; }
.dk-dashes li { position: relative; padding-left: 44px; font: 400 32px/1.3 var(--sans); color: var(--ink-2); }
.dk-dashes li::before { content: ''; position: absolute; left: 0; top: .72em; width: 26px; height: 3px; background: var(--brass); }

/* ============================================================ 17. A pilot menete */
.dk-tl { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 46px; }
.dk-tl__line { position: absolute; left: 33px; width: calc((100% - 112px) * .8 + 112px); top: 32px; height: 4px; border-radius: 2px; background: var(--line-2); }
.dk-tl__line::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: var(--oxblood); transition: width .7s var(--ease); }
.dk-tl li { position: relative; z-index: 1; }
.dk-tl__n { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 20px; border-radius: 50%; border: 3px solid var(--oxblood); background: var(--paper); color: var(--oxblood); font: 600 32px/1 var(--sans); transition: background .4s, color .4s; }
.dk-tl li.is-in .dk-tl__n { background: var(--oxblood); color: #fff; }
.dk-tl h3 { margin-bottom: 8px; font: 600 38px/1.1 var(--serif-display); color: var(--ink); }
.dk-tl p { font: 400 25px/1.35 var(--sans); color: var(--ink-2); }
.dk-needs { display: grid; grid-template-columns: 1fr 640px; gap: 56px; align-items: end; margin-top: 40px; }
.dk-needs h3 { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--line-2); font: 700 22px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.dk-ticks--sm { gap: 12px; }
.dk-ticks--sm li { font-size: 25px; grid-template-columns: 34px 1fr; }
.dk-ticks--sm .ico { width: 28px; height: 28px; margin-top: 3px; }
.dk-needs__photo { height: 330px; margin: 0; border-radius: 14px; }
.dk-needs__photo img { width: 100%; height: 100%; object-fit: cover; }
.dk-tl__dot { display: none; }

/* ============================================================ 18. Zárás */
.dk-close__bars { position: absolute; left: 0; right: 0; bottom: 0; height: 240px; opacity: .4; -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent); mask-image: linear-gradient(0deg, #000 10%, transparent); }
.dk-close { position: absolute; inset: 0; padding: 0 128px; display: grid; grid-template-columns: 1fr 440px; gap: 96px; align-items: center; background: radial-gradient(1000px 700px at 80% 40%, rgba(176, 128, 64, .18), transparent 70%); }
.dk-close__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.dk-close__text .dk-cover__brand { margin-bottom: 70px; }
.dk-close__text .dk-eyebrow { margin-bottom: 28px; }
.dk-close__text .dk-h1 { margin-bottom: 32px; font-size: 112px; }
.dk-close__text .dk-lede { margin-bottom: 52px; }
.dk-cta { display: inline-flex; align-items: center; gap: 22px; padding: 28px 48px; border-radius: 6px; background: #FBF8F3; color: var(--oxblood); font: 600 40px/1 var(--sans); text-decoration: none; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.dk-cta .ico { width: 36px; height: 36px; stroke-width: 2; }
.dk-close__thanks { margin-top: 60px; font: italic 500 46px/1.2 var(--serif); color: var(--dk-gold); }
.dk-close__qr { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 36px 30px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.dk-close__qr .dk-qr { width: 340px; height: 340px; }
.dk-close__qr span { font: 700 28px/1.2 var(--sans); color: var(--oxblood); text-align: center; }
.dk-close__qr b { font: 500 23px/1.2 var(--sans); color: var(--ink-2); }

/* ============================================================ Vezérlők, jegyzetek, áttekintés */
.dk-chrome { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none; }
.dk-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .08); }
.dk-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #B08040, #E8CD9E); transition: width .5s var(--ease); }
.dk-bar { position: absolute; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 14px; background: rgba(20, 8, 12, .86); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); color: #fff; opacity: 0; translate: -50% 16px; transition: opacity .3s, translate .3s; pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dk.is-awake .dk-bar, .dk-bar:focus-within { opacity: 1; translate: -50% 0; pointer-events: auto; }
.dk-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; transition: background .2s; }
.dk-btn:hover { background: rgba(255, 255, 255, .14); }
.dk-btn:focus-visible { outline: 2px solid var(--dk-gold); outline-offset: 0; }
.dk-btn[aria-pressed='true'] { background: rgba(232, 205, 158, .22); color: var(--dk-gold); }
.dk-btn .ico { width: 24px; height: 24px; }
.dk-btn:disabled { opacity: .35; cursor: default; }
.dk-count { min-width: 74px; text-align: center; font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; color: #F3DDD8; }
.dk-sep { width: 1px; height: 26px; margin: 0 6px; background: rgba(255, 255, 255, .22); }
.dk:not(.is-awake) { cursor: none; }
.dk-hint { position: fixed; left: 50%; bottom: 26px; z-index: 19; translate: -50% 0; margin: 0; padding: 10px 20px; border-radius: 99px; background: rgba(20, 8, 12, .78); color: #F3DDD8; font: 500 15px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .6s; }
.dk-hint.is-on { opacity: 1; }
.dk.is-awake .dk-hint { opacity: 0; }
.dk-notes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; max-height: 46vh; overflow: auto; padding: 22px max(28px, 6vw) 26px; background: rgba(20, 8, 12, .96); color: #fff; box-shadow: 0 -30px 80px rgba(0, 0, 0, .55); }
.dk-notes h2 { margin: 0 0 12px; font: 600 14px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-gold); }
.dk-notes ul { display: grid; gap: 10px; max-width: 1100px; }
.dk-notes li { position: relative; padding-left: 20px; font: 400 clamp(17px, 1.7vw, 24px)/1.45 var(--serif); color: #F6E9E6; }
.dk-notes li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--dk-gold); }
.dk-overview { position: fixed; inset: 0; z-index: 30; overflow: auto; background: rgba(13, 5, 8, .985); }
.dk-overview__inner { max-width: 1500px; margin: 0 auto; padding: 48px 40px 80px; }
.dk-overview h2 { margin: 0 0 28px; font: 600 15px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--dk-gold); }
.dk-overview ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.dk-overview li button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; min-height: 120px; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; text-align: left; font: 600 19px/1.3 var(--sans); transition: background .2s, border-color .2s; }
.dk-overview li button:hover, .dk-overview li button:focus-visible { background: rgba(255, 255, 255, .12); border-color: var(--dk-gold); outline: none; }
.dk-overview li button small { font: 700 14px/1 var(--sans); letter-spacing: .14em; color: var(--dk-gold); }
.dk-overview li.is-current button { border-color: var(--dk-gold); background: rgba(232, 205, 158, .14); }
.dk-blank { position: fixed; inset: 0; z-index: 40; background: #000; }

/* ---------- Előadói nézet (?nezet=eloado) ---------- */
html.dk-presenter .dk-viewport, html.dk-presenter .dk-chrome, html.dk-presenter .dk-hint { display: none; }
html.dk-presenter, html.dk-presenter .dk-body { overflow: auto; background: #140a0d; }
.dk-pres { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 340px 1fr; grid-template-rows: auto 1fr; gap: 0; background: #140a0d; color: #fff; font-family: var(--sans); }
.dk-pres__top { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 14px 24px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dk-pres__top h1 { margin: 0; font: 600 15px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-gold); }
.dk-pres__timer { margin-left: auto; display: flex; align-items: center; gap: 12px; font: 600 15px/1 var(--sans); color: #F3DDD8; }
.dk-pres__timer b { font: 600 30px/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; }
.dk-pres__btn { padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; background: transparent; color: #fff; font: 600 15px/1 var(--sans); }
.dk-pres__btn:hover { background: rgba(255, 255, 255, .12); }
.dk-pres__list { overflow: auto; padding: 14px 10px 24px 16px; border-right: 1px solid rgba(255, 255, 255, .12); }
.dk-pres__list li button { display: flex; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #D7B7B1; text-align: left; font: 500 16px/1.3 var(--sans); }
.dk-pres__list li button small { flex: none; width: 24px; font: 600 14px/1.5 var(--sans); color: #8d6f6a; font-variant-numeric: tabular-nums; }
.dk-pres__list li.is-current button { background: rgba(232, 205, 158, .16); color: #fff; }
.dk-pres__list li.is-current button small { color: var(--dk-gold); }
.dk-pres__main { display: flex; flex-direction: column; gap: 18px; padding: 24px 32px; min-height: 0; overflow: auto; }
.dk-pres__now small, .dk-pres__next small { display: block; margin-bottom: 8px; font: 700 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dk-gold); }
.dk-pres__now h2 { margin: 0; font: 600 clamp(30px, 3.4vw, 52px)/1.1 var(--serif-display); }
.dk-pres__step { margin-top: 8px; font: 500 17px/1 var(--sans); color: #D7B7B1; }
.dk-pres__notes ul { display: grid; gap: 12px; max-width: 1000px; }
.dk-pres__notes li { position: relative; padding-left: 22px; font: 400 clamp(19px, 1.9vw, 27px)/1.45 var(--serif); color: #F6E9E6; }
.dk-pres__notes li::before { content: ''; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; border-radius: 50%; background: var(--dk-gold); }
.dk-pres__next { padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .05); }
.dk-pres__next b { font: 600 22px/1.2 var(--sans); }
.dk-pres__nav { display: flex; gap: 12px; margin-top: auto; padding-top: 8px; }
.dk-pres__nav .dk-pres__btn { padding: 16px 26px; font-size: 18px; }
.dk-pres__nav .dk-pres__btn:last-child { background: var(--dk-gold); color: #3F0C15; border-color: var(--dk-gold); }
.dk-pres__hint { font: 400 14px/1.3 var(--sans); color: #8d6f6a; }

/* ---------- Beágyazott mód (a weboldal „Prezentáció” gombja) ---------- */
html.dk-embed .dk-bar { bottom: 18px; }

/* ---------- JavaScript nélkül: a diák egymás alatt, olvashatóan ---------- */
html.no-js, html.no-js .dk-body { overflow: auto; height: auto; background: #1a0c10; }
html.no-js .dk { position: static; }
html.no-js .dk-viewport { position: static; background: none; overflow: visible; }
html.no-js .dk-stage { position: static; width: 1920px; height: auto; margin: 0 auto; transform: none; zoom: .5; box-shadow: none; background: none; }
html.no-js .dk-slide { position: relative; height: 1080px; margin-bottom: 24px; opacity: 1; visibility: visible; translate: none; }
html.no-js .dk-chrome, html.no-js .dk-hint { display: none; }
html.no-js .dk-cover__card > *, html.no-js .dk-cover__main > :not(.dk-cover__brand) { opacity: 1; translate: none; }
html.no-js .dk-cover__a mark { background-size: 100% 100%; }
html.no-js .dk-topic__chip--draft { display: none; }
html.no-js .dk-doc__stamp { opacity: 1; }

/* ---------- Mozgáscsökkentés ---------- */
@media (prefers-reduced-motion: reduce) {
  .dk-slide { transition: opacity .01ms, visibility 0s !important; translate: none !important; }
  .dk-cover__card > *, .dk-cover__main > :not(.dk-cover__brand) { opacity: 1 !important; translate: none !important; animation: none !important; }
  .dk-cover__a mark { background-size: 100% 100% !important; animation: none !important; }
  .dk-wave i { animation: none !important; }
  .dk-slide.is-active .dk-mat__stick, .dk-slide.is-active .dk-dot, .dk-slide.is-active .dk-lens, .dk-slide.is-active .dk-hit, .dk-slide.is-active .dk-pillar { animation: none !important; }
}

/* ---------- Nyomtatás / PDF: egy dia egy oldal, minden lépés látszik ---------- */
@page { size: 1920px 1080px; margin: 0; }
@media print {
  html.dk-html, .dk-body { height: auto; overflow: visible; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dk { position: static; }
  .dk-viewport { position: static; overflow: visible; background: none; }
  .dk-stage { position: static; width: 1920px; height: auto; margin: 0; transform: none; box-shadow: none; overflow: visible; }
  .dk-slide { position: relative; width: 1920px; height: 1080px; opacity: 1 !important; visibility: visible !important; translate: none !important; break-after: page; page-break-after: always; transition: none !important; }
  .dk-slide:last-child { break-after: auto; page-break-after: auto; }
  [data-step] { opacity: 1 !important; translate: none !important; }
  .dk-slide { background-image: none !important; }
  .dk-cover__card > *, .dk-cover__main > :not(.dk-cover__brand) { opacity: 1 !important; translate: none !important; }
  .dk-cover__a mark { background-size: 100% 100% !important; }
  .dk-doc__line, .dk-doc__title { transform: none !important; }
  .dk-par i::after { transform: none !important; }
  .dk-topic__chip--ok, .dk-topic__crit li, .dk-topic__nots li, .dk-snap { opacity: 1 !important; translate: none !important; }
  .dk-topic__chip--draft { display: none; }
  .dk-chrome, .dk-hint, .dk-notes, .dk-overview, .dk-blank, .skip-link, .dk-pres { display: none !important; }
  .dk-slide *, .dk-slide *::before, .dk-slide *::after { animation: none !important; transition: none !important; }
}
.dk.is-static .dk-slide { transition: none !important; }
.dk.is-static .dk-cover__card > *, .dk.is-static .dk-cover__main > :not(.dk-cover__brand) { opacity: 1 !important; translate: none !important; animation: none !important; }
.dk.is-static .dk-cover__a mark { background-size: 100% 100% !important; animation: none !important; }