@charset "utf-8";
/* ============================================================
   PROWID — плеер интерактивного урока (javascript/lesson-deck.js).
   Самодостаточный: свои токены и шрифты, работает и без style/style.css
   (страница урока в кабинете, предпросмотр в админке, tools/deck-preview.php).
   ============================================================ */

@font-face{font-family:'Roboto'; src:local('Roboto'), url('../fonts/Roboto-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'Roboto'; src:local('Roboto Medium'), url('../fonts/Roboto-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:'Roboto'; src:local('Roboto Bold'), url('../fonts/Roboto-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:'Roboto'; src:local('Roboto Black'), url('../fonts/Roboto-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap}

/* ---------- Токены ---------- */
.deck{
  --dk-primary:#2563EB;
  --dk-primary-d:#1D4ED8;
  --dk-indigo:#4F46E5;
  --dk-grad:linear-gradient(120deg,#2563EB 0%,#4F46E5 100%);
  --dk-grad-soft:linear-gradient(120deg,rgba(37,99,235,.08),rgba(79,70,229,.06));
  --dk-navy:#0B1226;
  --dk-navy-2:#111D42;
  --dk-amber:#F59E0B;
  --dk-amber-2:#FBBF24;
  --dk-ink:#0F172A;
  --dk-slate:#43526B;
  --dk-muted:#64748B;
  --dk-line:#E4EAF3;
  --dk-soft:#F4F7FC;
  --dk-green:#16A34A;
  --dk-green-bg:#ECFDF5;
  --dk-red:#DC2626;
  --dk-red-bg:#FEF2F2;
  --dk-r:14px;
  --dk-r-lg:22px;
  --dk-sh-sm:0 1px 3px rgba(15,23,42,.08);
  --dk-sh:0 10px 30px rgba(15,23,42,.10);
  --dk-sh-lg:0 24px 64px rgba(15,23,42,.18);
  --dk-mono:ui-monospace,'Cascadia Code','JetBrains Mono','SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --dk-code-bg:#0F1629;
  --dk-code-bar:#161F38;
  --dk-code-line:#1F2A47;

  position:relative;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  max-width:100%;
  min-width:0;
  padding:12px;
  border-radius:26px;
  background:linear-gradient(180deg,#F7F9FE 0%,#EEF2FA 100%);
  border:1px solid var(--dk-line);
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  overflow:hidden;
  overflow:clip;
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--dk-ink);
  text-align:left;
  scroll-margin-top:90px;
  -webkit-tap-highlight-color:transparent;
}
.deck *,.deck *::before,.deck *::after{box-sizing:border-box}
.deck [hidden]{display:none !important}
.deck h2,.deck h3,.deck p,.deck ul,.deck ol,.deck pre,.deck figure{margin:0}
.deck ul,.deck ol{padding:0; list-style:none}
.deck a{color:var(--dk-primary)}
.deck button{font-family:inherit; -webkit-appearance:none; appearance:none}
.deck svg{display:block; flex:none}
.deck :focus{outline:none}
.deck :focus-visible{outline:3px solid rgba(37,99,235,.55); outline-offset:2px}
.deck code{
  font-family:var(--dk-mono);
  font-size:.86em;
  font-weight:500;
  color:#3730A3;
  background:#EEF2FF;
  border:1px solid #E0E7FF;
  border-radius:6px;
  padding:.08em .38em;
  overflow-wrap:anywhere;
}
.deck code,.deck pre,.deck textarea,.deck .dk-chip{font-variant-ligatures:none; font-feature-settings:'liga' 0,'calt' 0}
.dk-sr,.dk-clip{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- Заглушка до запуска JS ---------- */
.dk-boot{display:flex; flex-direction:column; gap:10px}
.dk-boot i{display:block; border-radius:18px; background:linear-gradient(90deg,#E8EDF6 0%,#F6F8FC 50%,#E8EDF6 100%); background-size:200% 100%; animation:dk-shimmer 1.4s linear infinite}
.dk-boot .dk-boot-top{height:44px; width:60%}
.dk-boot .dk-boot-stage{height:clamp(420px,calc(100vh - 240px),820px)}
.dk-boot .dk-boot-nav{height:48px}
@keyframes dk-shimmer{from{background-position:200% 0} to{background-position:-200% 0}}

/* ---------- Верхняя панель ---------- */
.dk-top{display:flex; align-items:center; gap:12px; min-height:44px; padding:0 2px 0 6px}
.dk-top-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.25}
.dk-kicker{font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dk-primary)}
.dk-title{font-size:1rem; font-weight:700; color:var(--dk-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dk-top-tools{display:flex; align-items:center; gap:8px; flex:none}
.dk-pill{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:999px; background:#fff; border:1px solid var(--dk-line); font-size:.84rem; font-weight:600; color:var(--dk-slate); white-space:nowrap; font-variant-numeric:tabular-nums}
.dk-pill svg{width:15px; height:15px; color:var(--dk-amber)}
.dk-trpill.is-all{background:var(--dk-green-bg); border-color:#A7F3D0; color:#166534}
.dk-trpill.is-all svg{color:var(--dk-green)}
.dk-trpill-short{display:none}
.dk-ib{
  display:inline-grid; place-items:center; flex:none;
  width:40px; height:40px; padding:0;
  border-radius:12px; border:1px solid var(--dk-line); background:#fff; color:var(--dk-slate);
  cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.dk-ib svg{width:20px; height:20px}
.dk-ib:hover{color:var(--dk-primary); border-color:#BFD0F5; background:#F8FAFF}
.dk-ib:active{transform:scale(.96)}
.dk-langs{display:inline-flex; padding:3px; gap:2px; border-radius:12px; background:#fff; border:1px solid var(--dk-line)}
.dk-lang{min-width:38px; height:32px; padding:0 8px; border:0; border-radius:9px; background:none; font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--dk-muted); cursor:pointer}
.dk-lang:hover{color:var(--dk-primary)}
.dk-lang.is-on{background:var(--dk-grad); color:#fff}

.dk-bar{height:4px; border-radius:99px; background:#DFE6F2; overflow:hidden; margin:0 4px}
.dk-bar span{display:block; height:100%; width:0; border-radius:inherit; background:var(--dk-grad); transition:width .4s cubic-bezier(.2,.7,.2,1)}

/* ---------- Сцена и слайды ---------- */
.dk-stage{
  position:relative;
  container:dk / inline-size;
  height:clamp(460px,calc(100vh - 230px),860px);
  height:clamp(460px,calc(100svh - 230px),860px);
  border-radius:20px;
  background:#fff;
  border:1px solid var(--dk-line);
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 36px rgba(15,23,42,.08);
  overflow:hidden;
  transition:background .3s, border-color .3s;
}
.dk-stage.is-dark{background:var(--dk-navy); border-color:#1B2750}
.dk-slide{
  position:absolute; inset:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:clamp(22px,3.4vw,48px) clamp(18px,4vw,56px);
  scrollbar-width:thin;
  scrollbar-color:#CBD5E1 transparent;
}
.dk-slide:focus{outline:none}
.dk-in{position:relative; z-index:1; display:flex; flex-direction:column; gap:18px; min-height:100%; justify-content:center; max-width:1120px; margin:0 auto}
.dk-slide.dk-in-next{animation:dk-in-next .42s cubic-bezier(.2,.7,.2,1) both}
.dk-slide.dk-in-prev{animation:dk-in-prev .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes dk-in-next{from{opacity:0; transform:translateX(32px)} to{opacity:1; transform:none}}
@keyframes dk-in-prev{from{opacity:0; transform:translateX(-32px)} to{opacity:1; transform:none}}
.dk-wm{position:absolute; right:14px; bottom:10px; z-index:5; font-size:.72rem; letter-spacing:.02em; color:rgba(100,116,139,.5); pointer-events:none; user-select:none; max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dk-stage.is-dark .dk-wm{color:rgba(226,232,255,.35)}
.dk-err{color:var(--dk-red); font-weight:600}

/* Заголовки и текст слайдов */
.dk-head{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.dk-kick{display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; background:rgba(79,70,229,.08); color:var(--dk-indigo); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.dk-kick svg{width:15px; height:15px}
.dk-h{font-size:clamp(1.45rem,2.6vw,2.15rem); font-size:clamp(1.4rem,4.2cqi,2.2rem); font-weight:800; line-height:1.2; letter-spacing:-.015em; color:var(--dk-ink)}
.dk-h code{font-size:.82em}
.dk-lead{font-size:1.08rem; color:var(--dk-slate); max-width:72ch}
.dk-rich p{margin:0 0 .7em}
.dk-rich p:last-child,.dk-rich ul:last-child{margin-bottom:0}
.dk-rich ul{margin:0 0 .7em; display:grid; gap:.35em}
.dk-rich li{position:relative; padding-left:1.35em}
.dk-rich li::before{content:''; position:absolute; left:.3em; top:.62em; width:.45em; height:.45em; border-radius:50%; background:var(--dk-grad)}
.dk-rich a{color:var(--dk-primary); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.dk-rich strong{font-weight:700; color:var(--dk-ink)}

/* Плашки 💡 / ⚠️ */
.dk-call{display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-radius:var(--dk-r); border:1px solid; font-size:.98rem; line-height:1.55; max-width:860px}
.dk-call-i{flex:none; font-size:1.25rem; line-height:1.3}
.dk-call-tip{background:#EFF6FF; border-color:#BFDBFE; box-shadow:inset 4px 0 0 var(--dk-primary); color:#1E3A8A}
.dk-call-warn{background:#FFFBEB; border-color:#FDE68A; box-shadow:inset 4px 0 0 var(--dk-amber); color:#78350F}
.dk-call .dk-rich strong{color:inherit}

/* Кнопки */
.dk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px;
  border-radius:999px; border:1px solid #D5DEEC; background:#fff; color:var(--dk-ink);
  font-size:.95rem; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap;
  cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s, filter .2s;
}
.dk-btn svg{width:18px; height:18px}
.dk-btn:hover{border-color:#AFC2E8; background:#F8FAFF}
.dk-btn:active{transform:translateY(1px)}
.dk-btn-primary{background:var(--dk-grad); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(37,99,235,.3)}
.dk-btn-primary:hover{background:var(--dk-grad); filter:brightness(1.07); box-shadow:0 14px 30px rgba(37,99,235,.4); color:#fff}
.dk-btn-amber{background:linear-gradient(120deg,#F59E0B,#FBBF24); color:#241400; border-color:transparent; box-shadow:0 12px 30px rgba(245,158,11,.35)}
.dk-btn-amber:hover{background:linear-gradient(120deg,#F59E0B,#FBBF24); filter:brightness(1.05); transform:translateY(-1px)}
.dk-btn-ghost{background:transparent; border-color:transparent; color:var(--dk-slate)}
.dk-btn-ghost:hover{background:var(--dk-soft); border-color:var(--dk-line); color:var(--dk-ink)}
.dk-btn-lg{min-height:52px; padding:0 26px; font-size:1.02rem}
.dk-btn[aria-disabled="true"]{opacity:.4; cursor:default; box-shadow:none; filter:none; transform:none}
.dk-actions{display:flex; flex-wrap:wrap; gap:10px}

/* ---------- Нижняя навигация ---------- */
.dk-nav{display:flex; align-items:center; gap:14px; padding:0 2px}
.dk-nav .dk-btn{flex:none; min-height:48px; padding:0 20px}
.dk-prev svg,.dk-next svg{width:20px; height:20px}
.dk-dots{flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:4px}
.dk-dot{position:relative; flex:1 1 0; min-width:6px; max-width:44px; height:30px; padding:0; border:0; background:none; cursor:pointer}
.dk-dot::before{content:''; position:absolute; left:0; right:0; top:50%; height:6px; margin-top:-3px; border-radius:99px; background:#D9E1EF; transition:background .25s, height .2s, margin .2s}
.dk-dot:hover::before{background:#B4C4E6}
.dk-dot.is-seen::before{background:#A9BCF2}
.dk-dot.is-ok::before{background:#34D399}
.dk-dot.is-cur::before{height:10px; margin-top:-5px; background:var(--dk-grad); box-shadow:0 3px 10px rgba(37,99,235,.35)}
.dk-dot.is-trainer::after,.dk-dot.is-quiz::after{content:''; position:absolute; left:50%; top:1px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--dk-amber)}
.dk-dot.is-quiz::after{background:#A78BFA}
.dk-countm{display:none; flex:1 1 auto; min-height:44px; border:0; background:none; font-size:.95rem; font-weight:700; color:var(--dk-slate); font-variant-numeric:tabular-nums; cursor:pointer; border-radius:12px}

/* ---------- Оглавление ---------- */
.dk-scrim{position:absolute; inset:0; z-index:30; background:rgba(11,18,38,.34); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.dk-drawer{
  position:absolute; top:0; right:0; bottom:0; z-index:31;
  width:min(380px,92%);
  display:flex; flex-direction:column;
  background:#fff; border-left:1px solid var(--dk-line);
  box-shadow:var(--dk-sh-lg);
  transform:translateX(104%); visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.2,1), visibility .32s;
}
.deck.is-toc .dk-scrim{opacity:1; visibility:visible}
.deck.is-toc .dk-drawer{transform:none; visibility:visible}
.dk-drawer-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px 10px 20px; border-bottom:1px solid var(--dk-line)}
.dk-drawer-head strong{font-size:1.02rem}
.dk-toc{flex:1 1 auto; overflow:auto; padding:8px !important; display:grid; align-content:start; gap:2px; overscroll-behavior:contain}
.dk-toc-item{display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 10px; border:0; border-radius:12px; background:none; text-align:left; font-size:.92rem; line-height:1.35; color:var(--dk-slate); cursor:pointer; transition:background .15s}
.dk-toc-item:hover{background:var(--dk-soft); color:var(--dk-ink)}
.dk-toc-item[aria-current]{background:#EEF2FF; color:var(--dk-ink); font-weight:600; box-shadow:inset 3px 0 0 var(--dk-primary)}
.dk-toc-ic{font-size:1.05rem; text-align:center}
.dk-toc-n{color:#5A6A83; font-variant-numeric:tabular-nums; margin-right:2px}
.dk-toc-ok{font-size:.9rem}
.dk-drawer-foot{padding:12px 20px 16px !important; border-top:1px solid var(--dk-line); font-size:.82rem; color:var(--dk-muted)}

/* ---------- Уведомление ---------- */
.dk-toast{
  position:absolute; left:50%; bottom:78px; z-index:40;
  max-width:min(560px,calc(100% - 32px)); width:max-content;
  padding:11px 16px; border-radius:12px;
  background:var(--dk-navy); color:#fff; font-size:.92rem; line-height:1.4; box-shadow:0 14px 34px rgba(11,18,38,.35);
  opacity:0; transform:translate(-50%,16px); pointer-events:none; transition:opacity .25s, transform .25s;
  overflow-wrap:anywhere;
}
.dk-toast.is-on{opacity:1; transform:translate(-50%,0)}

/* ---------- cover (и lock — конец превью закрытого урока) ---------- */
.dk-t-cover,.dk-t-lock{
  color:#DCE4FF;
  overflow-x:hidden;
  background:
    radial-gradient(640px 420px at 88% 8%,rgba(79,70,229,.55),transparent 70%),
    radial-gradient(560px 380px at 0% 100%,rgba(37,99,235,.42),transparent 70%),
    radial-gradient(300px 220px at 72% 92%,rgba(251,191,36,.16),transparent 70%),
    linear-gradient(140deg,#0B1226 0%,#111D42 58%,#18236A 100%);
  scrollbar-color:#334170 transparent;
}
.dk-t-cover::before,.dk-t-lock::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 10%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 10%,transparent 75%);
}
.dk-t-cover::after,.dk-t-lock::after{
  content:''; position:absolute; width:340px; height:340px; right:0; top:-90px; pointer-events:none;
  border-radius:50%; background:radial-gradient(circle,rgba(96,165,250,.35),transparent 65%); filter:blur(10px);
  animation:dk-float 12s ease-in-out infinite alternate;
}
@keyframes dk-float{from{transform:translate(0,0) scale(1)} to{transform:translate(-60px,50px) scale(1.12)}}
.dk-cover{display:grid; grid-template-columns:minmax(0,1fr); align-content:center; gap:28px}
.dk-cover-main{display:flex; flex-direction:column; align-items:flex-start; gap:18px}
.dk-cover-kick{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.dk-cover-kick > span{display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#C7D2FE}
.dk-cover-kick .dk-cover-min{color:#FDE68A; letter-spacing:.04em}
.dk-cover-kick svg{width:15px; height:15px}
.dk-cover-title{font-size:clamp(2rem,4.6vw,3.4rem); font-size:clamp(1.9rem,6cqi,3.7rem); font-weight:900; line-height:1.06; letter-spacing:-.025em; color:#fff; text-wrap:balance}
.dk-cover-title code{font-size:.8em; background:rgba(251,191,36,.14); border-color:rgba(251,191,36,.3); color:#FDE68A}
.dk-cover-text{font-size:clamp(1.02rem,1.6vw,1.25rem); color:#C9D3F5; max-width:56ch}
.dk-t-cover .dk-rich code{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#E0E7FF}
.dk-cover-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:6px}
.dk-keys{font-size:.84rem; color:#8E9CC9}
.dk-goals{padding:22px 24px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 20px 50px rgba(0,0,0,.25)}
.dk-goals-h{font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A5B4FC; margin-bottom:12px !important}
.dk-goals ul{display:grid; gap:12px}
.dk-goals li{display:flex; align-items:flex-start; gap:12px; font-size:1.02rem; line-height:1.45; color:#EEF2FF}
.dk-goal-ic{flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(52,211,153,.16); color:#6EE7B7; margin-top:-1px}
.dk-goal-ic svg{width:15px; height:15px; stroke-width:3}
.dk-goals code{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#E0E7FF}
.dk-t-cover :focus-visible,.dk-t-lock :focus-visible{outline-color:#FBBF24}

/* ---------- lock ---------- */
.dk-lock{display:grid; grid-template-columns:minmax(0,1fr); align-content:center; gap:28px}
.dk-lock-main{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.dk-lock-ic{display:grid; place-items:center; width:64px; height:64px; border-radius:20px; background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(245,158,11,.1)); border:1px solid rgba(251,191,36,.35); color:#FDE68A; box-shadow:0 14px 34px rgba(0,0,0,.25)}
.dk-lock-ic svg{width:30px; height:30px}
.dk-lock-title{font-size:clamp(1.7rem,4vw,2.8rem); font-size:clamp(1.6rem,5cqi,3rem); font-weight:900; line-height:1.1; letter-spacing:-.02em; color:#fff; text-wrap:balance}
.dk-lock-text{font-size:clamp(1rem,1.5vw,1.18rem); color:#C9D3F5; max-width:56ch}
.dk-t-lock .dk-rich code{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#E0E7FF}
.dk-t-lock .dk-rich strong{color:#fff}
.dk-lock-stats{display:flex; flex-wrap:wrap; gap:10px}
.dk-lock-stats li{display:flex; flex-direction:column; gap:2px; min-width:104px; padding:10px 16px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13)}
.dk-lock-n{display:inline-flex; align-items:center; gap:8px; font-size:1.5rem; font-weight:800; line-height:1.2; color:#fff; font-variant-numeric:tabular-nums}
.dk-lock-n span{font-size:1.1rem}
.dk-lock-l{font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#A5B4FC}
.dk-lock-cta{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:4px}
.deck .dk-lock-cta a.dk-btn-amber{color:#241400}
.deck .dk-lock-cta a.dk-btn-glass{color:#fff}
.dk-lock-note{font-size:.92rem; font-weight:600; color:#FDE68A}
.dk-btn-glass{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:#fff}
.dk-btn-glass:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35); color:#fff}
.dk-lock-more{padding:20px 22px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 20px 50px rgba(0,0,0,.25)}
.dk-lock-more-h{font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A5B4FC; margin-bottom:12px !important}
.dk-lock-more ul{display:grid; gap:8px}
.dk-lock-more li{display:grid; grid-template-columns:24px minmax(0,1fr) 16px; align-items:center; gap:10px; font-size:.98rem; line-height:1.4; color:#E0E7FF}
.dk-lock-more-ic{text-align:center}
.dk-lock-more-lk{color:#8E9CC9}
.dk-lock-more-lk svg{width:15px; height:15px}
.dk-lock-more-n{margin-top:10px !important; font-size:.88rem; color:#8E9CC9}

/* ---------- text ---------- */
.dk-text{display:grid; grid-template-columns:minmax(0,1fr); align-content:center; gap:20px}
.dk-text-main{display:flex; flex-direction:column; gap:18px; min-width:0}
.dk-text-icon{display:grid; place-items:center; width:72px; height:72px; border-radius:22px; font-size:38px; line-height:1; background:linear-gradient(135deg,#EEF2FF,#E0F2FE); box-shadow:inset 0 0 0 1px rgba(79,70,229,.1),0 10px 24px rgba(37,99,235,.12)}
.dk-body{font-size:clamp(1.03rem,1.5vw,1.2rem); line-height:1.7; color:var(--dk-slate); max-width:70ch}
/* figure: схема (SVG из img/lessons/) */
.dk-in.dk-figure{height:100%; gap:14px}
.dk-figure .dk-lead{max-width:80ch}
.dk-fig{flex:1 1 auto; min-height:0; min-width:0; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px}
.dk-fig img{flex:1 1 auto; display:block; width:100%; max-width:1000px; min-height:220px; object-fit:contain}
.dk-fig figcaption{flex:none; max-width:72ch; font-size:.95rem; line-height:1.55; color:var(--dk-muted); text-align:center}
/* узкая сцена (телефон): схема не сжимается до нечитаемой — минимальная ширина и горизонтальная прокрутка */
@container dk (max-width:699px){
  .dk-in.dk-figure{height:auto}
  .dk-fig{display:block; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:6px}
  .dk-fig img{width:680px; max-width:none; min-height:0; height:auto}
  .dk-fig figcaption{margin-top:8px; text-align:left}
}

/* ---------- points ---------- */
.dk-cards{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
.dk-card{position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:4px 14px; align-items:start; padding:18px; border-radius:18px; background:#fff; border:1px solid var(--dk-line); box-shadow:var(--dk-sh-sm); overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s}
.dk-card::before{content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--dk-grad); opacity:0; transition:opacity .2s}
.dk-card:hover{transform:translateY(-3px); box-shadow:var(--dk-sh); border-color:#D3DDF0}
.dk-card:hover::before{opacity:1}
.dk-card-ic{display:grid; place-items:center; width:48px; height:48px; border-radius:14px; font-size:24px; font-weight:800; color:var(--dk-indigo); background:linear-gradient(135deg,#EEF2FF,#E0F2FE)}
.dk-card-b{display:flex; flex-direction:column; gap:6px; min-width:0}
.dk-card-t{font-size:1.08rem; font-weight:700; line-height:1.3; color:var(--dk-ink)}
.dk-card-x{font-size:.97rem; color:var(--dk-slate); line-height:1.55}

/* ---------- DNS Visual Interactive Simulator ---------- */
.dk-dns-sim{
  display:flex; flex-direction:column; gap:14px;
  padding:16px; border-radius:22px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFE 100%);
  border:1px solid #E2E8F0;
  box-shadow:0 8px 30px rgba(15,23,42,.06);
  margin-bottom:8px;
}
.dk-dns-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px;
  padding-bottom:12px; border-bottom:1px solid #EAEFF8;
}
.dk-dns-h-info{display:flex; align-items:center; gap:8px; font-size:1rem; color:var(--dk-ink)}
.dk-dns-h-ic{display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#EFF6FF; color:#2563EB; font-size:16px}
.dk-dns-presets{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.dk-dns-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:999px;
  background:#fff; border:1px solid #D8E2F0;
  font-family:var(--dk-mono); font-size:.82rem; font-weight:600; color:var(--dk-slate);
  cursor:pointer; transition:all .2s;
}
.dk-dns-chip:hover{border-color:#3B82F6; color:#1D4ED8; background:#F0F7FF}
.dk-dns-chip.is-active{
  background:linear-gradient(135deg,#EFF6FF,#DBEAFE);
  border-color:#3B82F6; color:#1D4ED8;
  box-shadow:0 2px 8px rgba(37,99,235,.2); font-weight:700;
}
.dk-dns-actions{display:flex; align-items:center; gap:8px}
.dk-dns-actions .dk-btn{min-height:36px; padding:0 14px; font-size:.86rem}

.dk-dns-stage{position:relative; display:flex; flex-direction:column; gap:12px}
.dk-dns-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
@container dk (min-width:780px){
  .dk-dns-grid{grid-template-columns:1.2fr 1fr 1fr; align-items:stretch}
}

.dk-dns-node{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:14px; border-radius:18px;
  background:#fff; border:1.5px solid #E2E8F0;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
  transition:border-color .3s, box-shadow .3s, transform .25s;
}
.dk-dns-node.is-highlight{
  border-color:#3B82F6;
  box-shadow:0 0 0 3px rgba(59,130,246,.16), 0 10px 24px rgba(37,99,235,.12);
  transform:translateY(-2px);
}
.dk-dns-node-h{display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--dk-ink)}
.dk-dns-node-ic{font-size:1.2rem; line-height:1}
.dk-dns-node-t{flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dk-dns-tag{
  padding:2px 8px; border-radius:6px;
  font-family:var(--dk-mono); font-size:.7rem; font-weight:700;
  background:#F1F5F9; color:#475569; border:1px solid #E2E8F0;
}
.dk-dns-live-pill{
  padding:3px 8px; border-radius:999px;
  font-size:.72rem; font-weight:700;
  background:#F1F5F9; color:#475569;
  transition:all .3s; white-space:nowrap;
}
.step-1 .dk-dns-live-pill{background:#EFF6FF; color:#1D4ED8; border:1px solid #BFDBFE}
.step-2 .dk-dns-live-pill{background:#F5F3FF; color:#6D28D9; border:1px solid #DDD6FE}
.step-3 .dk-dns-live-pill{background:#FFFBEB; color:#B45309; border:1px solid #FDE68A}
.step-4 .dk-dns-live-pill{background:#ECFDF5; color:#047857; border:1px solid #A7F3D0}

/* Client Window */
.dk-dns-client-win{display:flex; flex-direction:column; border-radius:12px; background:#F8FAFC; border:1px solid #E2E8F0; overflow:hidden}
.dk-dns-win-bar{display:flex; align-items:center; gap:8px; padding:6px 10px; background:#EEF2F6; border-bottom:1px solid #E2E8F0}
.dk-dns-win-dots{display:inline-flex; gap:4px}
.dk-dns-win-dots i{width:8px; height:8px; border-radius:50%; background:#CBD5E1}
.dk-dns-win-dots i:nth-child(1){background:#F87171}
.dk-dns-win-dots i:nth-child(2){background:#FBBF24}
.dk-dns-win-dots i:nth-child(3){background:#34D399}
.dk-dns-win-url{display:flex; align-items:center; gap:4px; flex:1 1 auto; height:24px; padding:0 8px; border-radius:6px; background:#fff; border:1px solid #CBD5E1; font-family:var(--dk-mono); font-size:.75rem; color:#64748B; overflow:hidden}
.dk-dns-url-lock{font-size:.7rem; color:#10B981}
.dk-dns-url-proto{color:#94A3B8}
.dk-dns-url-host{color:#1E293B}

.dk-dns-win-body{min-height:96px; padding:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center}
.dk-dns-win-idle{display:flex; flex-direction:column; align-items:center; gap:8px}
.dk-dns-pulse-dot{width:16px; height:16px; border-radius:50%; background:#3B82F6; animation:dk-dns-pulse 1.5s infinite}
@keyframes dk-dns-pulse{0%{transform:scale(.8); opacity:.5; box-shadow:0 0 0 0 rgba(59,130,246,.7)} 70%{transform:scale(1.1); opacity:1; box-shadow:0 0 0 8px rgba(59,130,246,0)} 100%{transform:scale(.8); opacity:.5; box-shadow:0 0 0 0 rgba(59,130,246,0)}}
.dk-dns-win-tip{font-size:.82rem; color:#64748B; line-height:1.3}

.dk-dns-win-page{width:100%; border-radius:8px; background:#fff; border:1px solid #E2E8F0; padding:10px; box-shadow:0 4px 12px rgba(15,23,42,.06); animation:dk-dns-appear .35s ease-out both}
@keyframes dk-dns-appear{from{opacity:0; transform:scale(.95)} to{opacity:1; transform:none}}
.dk-dns-page-badge{display:inline-block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 6px; border-radius:4px; background:#EFF6FF; color:#2563EB; margin-bottom:4px}
.dk-dns-page-title{font-size:.92rem; font-weight:800; color:#0F172A; margin:0 0 3px}
.dk-dns-page-desc{font-size:.76rem; color:#64748B; margin:0; line-height:1.3}

/* DNS Table */
.dk-dns-table-box{display:flex; flex-direction:column; border-radius:12px; background:#F8FAFC; border:1px solid #E2E8F0; overflow:hidden}
.dk-dns-tbl-h{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#64748B; padding:6px 10px; background:#EEF2F6; border-bottom:1px solid #E2E8F0}
.dk-dns-tbl{width:100%; border-collapse:collapse; font-size:.78rem}
.dk-dns-tbl th{padding:4px 8px; text-align:left; color:#94A3B8; font-weight:600; font-size:.7rem; border-bottom:1px solid #E2E8F0}
.dk-dns-tbl td{padding:6px 8px; border-bottom:1px solid #F1F5F9; font-family:var(--dk-mono)}
.dk-dns-rec{display:inline-block; padding:1px 5px; border-radius:4px; font-size:.68rem; font-weight:800; background:#E0E7FF; color:#4338CA}
.dk-dns-row.is-target{background:#F0FDF4}
.step-1 .dk-dns-row.is-target,.step-2 .dk-dns-row.is-target{
  background:#FEF3C7; animation:dk-dns-row-glow 1s ease-in-out infinite alternate;
}
@keyframes dk-dns-row-glow{from{background:#FEF3C7} to{background:#FDE68A}}
.dk-dns-ip{color:#059669; font-weight:700}
.step-2 .dk-dns-row.is-target .dk-dns-ip{color:#D97706; font-size:.85rem}

/* Server Box */
.dk-dns-server-box{position:relative; display:flex; flex-direction:column; border-radius:12px; background:#0B1226; color:#E2E8F0; padding:10px; border:1px solid #1E293B}
.dk-dns-files-h{font-family:var(--dk-mono); font-size:.72rem; color:#94A3B8; margin-bottom:6px}
.dk-dns-files{display:grid; gap:4px; margin:0}
.dk-dns-file{display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; background:#111D42; font-family:var(--dk-mono); font-size:.76rem; color:#CBD5E1}
.dk-dns-file.is-active-file{border:1px solid rgba(52,211,153,.3)}
.step-3 .dk-dns-file.is-active-file,.step-4 .dk-dns-file.is-active-file{
  background:#064E3B; color:#6EE7B7; border-color:#34D399; box-shadow:0 0 10px rgba(52,211,153,.25);
}
.dk-dns-file-sz{margin-left:auto; font-size:.68rem; color:#64748B}
.dk-dns-server-leds{display:flex; gap:6px; margin-top:8px; padding-top:6px; border-top:1px solid rgba(255,255,255,.08)}
.dk-dns-server-leds span{width:6px; height:6px; border-radius:50%; background:#22C55E; box-shadow:0 0 6px #22C55E; animation:dk-led-blink 1.2s infinite alternate}
.dk-dns-server-leds span:nth-child(2){background:#3B82F6; box-shadow:0 0 6px #3B82F6; animation-delay:.3s}
.dk-dns-server-leds span:nth-child(3){background:#F59E0B; box-shadow:0 0 6px #F59E0B; animation-delay:.6s}
@keyframes dk-led-blink{0%{opacity:.3} 100%{opacity:1}}

/* Animated Traffic Signals */
.dk-dns-traffic{
  display:grid; grid-template-columns:1fr; gap:6px; margin:4px 0;
}
@container dk (min-width:780px){
  .dk-dns-traffic{grid-template-columns:1fr 1fr; gap:10px}
}
.dk-dns-beam{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:38px; border-radius:10px; background:#F1F5F9; border:1px dashed #CBD5E1;
  overflow:hidden; opacity:.4; transition:opacity .3s;
}
.dk-dns-packet{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  font-family:var(--dk-mono); font-size:.76rem; font-weight:700;
  box-shadow:0 4px 12px rgba(15,23,42,.12);
  transform:scale(.92); transition:transform .2s;
}
.step-1 .dk-beam-c-dns{opacity:1; background:#EFF6FF; border-color:#93C5FD; border-style:solid}
.step-1 .packet-c-dns{background:#2563EB; color:#fff; animation:dk-fly-right 1.2s infinite ease-in-out; transform:scale(1)}

.step-2 .dk-beam-dns-c{opacity:1; background:#F5F3FF; border-color:#C4B5FD; border-style:solid}
.step-2 .packet-dns-c{background:#7C3AED; color:#fff; animation:dk-fly-left 1.2s infinite ease-in-out; transform:scale(1)}

.step-3 .dk-beam-c-host{opacity:1; background:#FFFBEB; border-color:#FCD34D; border-style:solid}
.step-3 .packet-c-host{background:#D97706; color:#fff; animation:dk-fly-right 1.2s infinite ease-in-out; transform:scale(1)}

.step-4 .dk-beam-host-c{opacity:1; background:#ECFDF5; border-color:#6EE7B7; border-style:solid}
.step-4 .packet-host-c{background:#059669; color:#fff; animation:dk-fly-left 1.2s infinite ease-in-out; transform:scale(1)}

@keyframes dk-fly-right{0%{transform:translateX(-24px); opacity:0} 30%{opacity:1} 70%{opacity:1} 100%{transform:translateX(24px); opacity:0}}
@keyframes dk-fly-left{0%{transform:translateX(24px); opacity:0} 30%{opacity:1} 70%{opacity:1} 100%{transform:translateX(-24px); opacity:0}}

/* Story Bar */
.dk-dns-story{
  display:flex; flex-direction:column; gap:8px;
  padding:12px 14px; border-radius:14px;
  background:#EFF6FF; border:1px solid #BFDBFE;
}
.dk-dns-steps-nav{display:flex; flex-wrap:wrap; gap:6px}
.dk-dns-st-btn{
  padding:4px 10px; border-radius:8px; border:1px solid #CBD5E1;
  background:#fff; font-size:.78rem; font-weight:600; color:#475569;
  cursor:pointer; transition:all .2s;
}
.dk-dns-st-btn:hover{background:#F8FAFC; color:#1E293B}
.dk-dns-st-btn.is-active{background:#2563EB; border-color:#2563EB; color:#fff; font-weight:700; box-shadow:0 2px 6px rgba(37,99,235,.25)}
.dk-dns-st-btn.is-done{background:#DBEAFE; border-color:#93C5FD; color:#1E40AF}

.dk-dns-desc-box{min-height:38px; display:flex; align-items:center}
.dk-dns-desc-p{margin:0; font-size:.9rem; line-height:1.5; color:#1E3A8A}
.dk-dns-desc-p code{background:#DBEAFE; border-color:#BFDBFE; color:#1E40AF}
.dk-dns-desc-p strong{color:#0F172A}
.dk-dns-desc-p em{color:#2563EB; font-style:normal; font-weight:600}

/* ============================================================
   INTERACTIVE VISUAL SIMULATORS & EXPLAINERS
   ============================================================ */

/* Shared visual wrapper */
.dk-points.has-visual, .dk-stepsl.has-visual {
  gap: 18px;
}
.dk-trio-sim, .dk-hb-sim, .dk-htree-sim, .dk-lnk-sim, .dk-fmt-sim, .dk-tbl-sim, .dk-sem-sim, .dk-frm-sim, .dk-og-sim, .dk-a11y-sim {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 820px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--dk-line);
  box-shadow: var(--dk-sh);
  box-sizing: border-box;
}

/* Headings in visual components */
.dk-trio-head, .dk-hb-head, .dk-htree-head, .dk-lnk-head, .dk-fmt-head, .dk-tbl-head, .dk-sem-head, .dk-frm-head, .dk-og-head, .dk-a11y-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dk-line);
}
.dk-trio-h-info, .dk-hb-h-info, .dk-htree-h-info, .dk-lnk-h-info, .dk-fmt-h-info, .dk-tbl-h-info, .dk-sem-h-info, .dk-frm-h-info, .dk-og-h-info, .dk-a11y-h-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dk-trio-h-ic, .dk-hb-h-ic, .dk-htree-h-ic, .dk-lnk-h-ic, .dk-fmt-h-ic, .dk-tbl-h-ic, .dk-sem-h-ic, .dk-frm-h-ic, .dk-og-h-ic, .dk-a11y-h-ic {
  font-size: 1.25rem;
}
.dk-trio-h-t, .dk-hb-h-t, .dk-htree-h-t, .dk-lnk-h-t, .dk-fmt-h-t, .dk-tbl-h-t, .dk-sem-h-t, .dk-frm-h-t, .dk-og-h-t, .dk-a11y-h-t {
  font-size: .95rem;
  font-weight: 700;
  color: var(--dk-ink);
}

/* Shared Story Bar */
.dk-trio-story, .dk-hb-story, .dk-htree-story, .dk-lnk-story, .dk-fmt-story, .dk-tbl-story, .dk-sem-story, .dk-frm-story, .dk-og-story, .dk-a11y-story {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
}
.dk-trio-story-p, .dk-hb-story-p, .dk-htree-story-p, .dk-lnk-story-p, .dk-fmt-story-p, .dk-tbl-story-p, .dk-sem-story-p, .dk-frm-story-p, .dk-og-story-p, .dk-a11y-story-p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: #1E3A8A;
}
.dk-trio-story-p code, .dk-hb-story-p code, .dk-htree-story-p code, .dk-lnk-story-p code, .dk-fmt-story-p code, .dk-tbl-story-p code, .dk-sem-story-p code, .dk-frm-story-p code, .dk-og-story-p code, .dk-a11y-story-p code {
  background: #DBEAFE;
  border-color: #BFDBFE;
  color: #1E40AF;
}

/* --- 1. TRIO SIMULATOR (HTML / CSS / JS) --- */
.dk-trio-toggles, .dk-sem-toggles, .dk-htree-toggles, .dk-tbl-toggles, .dk-frm-methods, .dk-og-tabs, .dk-a11y-ctrls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dk-trio-tog, .dk-sem-tog, .dk-htree-tog, .dk-tbl-tog, .dk-frm-m-btn, .dk-og-tab, .dk-a11y-c-btn {
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  background: #fff;
  font-size: .8rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all .2s ease;
}
.dk-trio-tog:hover, .dk-sem-tog:hover, .dk-htree-tog:hover, .dk-tbl-tog:hover, .dk-frm-m-btn:hover, .dk-og-tab:hover, .dk-a11y-c-btn:hover {
  background: #F8FAFC;
  color: #1E293B;
}
.dk-trio-tog.is-on, .dk-sem-tog.is-active, .dk-htree-tog.is-active, .dk-tbl-tog.is-active, .dk-frm-m-btn.is-active, .dk-og-tab.is-active, .dk-a11y-c-btn.is-on {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
}

.dk-trio-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  background: #F1F5F9;
  min-height: 200px;
}
.dk-trio-preview-wrap {
  width: 100%;
  max-width: 380px;
  transition: all .3s ease;
}
/* Raw HTML state (No CSS) */
.dk-trio-preview-wrap:not(.is-css) .dk-trio-card {
  background: transparent;
  border: 1px solid #94A3B8;
  border-radius: 0;
  box-shadow: none;
  padding: 10px;
  color: #000;
  font-family: serif;
}
.dk-trio-preview-wrap:not(.is-css) .dk-trio-card-badge { display: none; }
.dk-trio-preview-wrap:not(.is-css) .dk-trio-fav-btn { border: 1px solid #000; border-radius: 0; background: #ddd; }
.dk-trio-preview-wrap:not(.is-css) .dk-trio-card-img { font-size: 32px; filter: grayscale(1); }
.dk-trio-preview-wrap:not(.is-css) .dk-trio-title { font-size: 1.1rem; margin: 4px 0; text-decoration: underline; }
.dk-trio-preview-wrap:not(.is-css) .dk-trio-desc { font-size: .85rem; }
.dk-trio-preview-wrap:not(.is-css) .dk-trio-price-val { font-size: 1.1rem; }
.dk-trio-preview-wrap:not(.is-css) .dk-trio-qty-btn { border: 1px solid #000; border-radius: 0; background: #eee; }
.dk-trio-preview-wrap:not(.is-css) .dk-trio-order-btn { border: 2px outset #ccc; border-radius: 0; background: #eee; color: #000; padding: 2px 6px; }
.dk-trio-preview-wrap:not(.is-css) .dk-trio-theme-btn { border: 1px solid #000; background: #fff; padding: 2px 6px; }

/* Styled with CSS */
.dk-trio-preview-wrap.is-css .dk-trio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(15,23,42,.08);
  padding: 18px;
  color: #1E293B;
  font-family: inherit;
  transition: all .3s ease;
}
.dk-trio-preview-wrap.is-css.is-dark .dk-trio-card {
  background: #0F172A;
  border-color: #334155;
  color: #F8FAFC;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.dk-trio-preview-wrap.is-css .dk-trio-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #FEF3C7;
  color: #D97706;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.dk-trio-preview-wrap.is-css .dk-trio-fav-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: transform .2s;
}
.dk-trio-preview-wrap.is-css.is-dark .dk-trio-fav-btn {
  background: #1E293B;
  border-color: #334155;
}
.dk-trio-preview-wrap.is-css .dk-trio-card-img {
  text-align: center;
  font-size: 48px;
  padding: 10px 0 4px;
}
.dk-trio-preview-wrap.is-css .dk-trio-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: inherit;
}
.dk-trio-preview-wrap.is-css .dk-trio-desc {
  margin: 0;
  font-size: .82rem;
  color: #64748B;
  line-height: 1.4;
}
.dk-trio-preview-wrap.is-css.is-dark .dk-trio-desc {
  color: #94A3B8;
}
.dk-trio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.dk-trio-preview-wrap.is-css .dk-trio-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: #2563EB;
}
.dk-trio-preview-wrap.is-css.is-dark .dk-trio-price {
  color: #60A5FA;
}
.dk-trio-qty-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dk-trio-qty-lbl { font-size: .78rem; color: #64748B; }
.dk-trio-preview-wrap.is-css .dk-trio-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #CBD5E1;
  background: #F8FAFC;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.dk-trio-preview-wrap.is-css.is-dark .dk-trio-qty-btn {
  background: #1E293B;
  border-color: #334155;
  color: #fff;
}
.dk-trio-qty-num {
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
}
.dk-trio-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.dk-trio-preview-wrap.is-css .dk-trio-order-btn {
  flex: 1 1 auto;
  padding: 8px 14px;
  border-radius: 10px;
  border: 0;
  background: var(--dk-grad);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
}
.dk-trio-preview-wrap.is-css .dk-trio-order-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.dk-trio-preview-wrap.is-css .dk-trio-theme-btn {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #CBD5E1;
  background: #F8FAFC;
  color: #475569;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.dk-trio-preview-wrap.is-css.is-dark .dk-trio-theme-btn {
  background: #1E293B;
  border-color: #334155;
  color: #E2E8F0;
}

/* --- 2. HEAD VS BODY SIMULATOR --- */
.dk-hb-stage, .dk-sem-stage, .dk-lnk-stage, .dk-htree-stage, .dk-fmt-stage, .dk-tbl-stage, .dk-frm-stage, .dk-a11y-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@container dk (min-width:700px) {
  .dk-hb-stage, .dk-sem-stage, .dk-lnk-stage, .dk-htree-stage, .dk-fmt-stage, .dk-frm-stage, .dk-a11y-stage {
    grid-template-columns: 1fr 1fr;
  }
}
.dk-hb-box {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  overflow: hidden;
}
.dk-hb-box-t {
  padding: 6px 12px;
  background: #EEF2F6;
  border-bottom: 1px solid #E2E8F0;
  font-size: .76rem;
  font-weight: 700;
  color: #475569;
}
.dk-hb-meta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}
.dk-hb-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #E2E8F0;
  font-size: .8rem;
}
.dk-hb-meta-k {
  font-family: var(--dk-mono);
  font-weight: 700;
  color: #2563EB;
}
.dk-hb-meta-v {
  color: #64748B;
  font-size: .78rem;
}
.dk-hb-browser-bar {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: #E2E8F0;
  border-bottom: 1px solid #CBD5E1;
}
.dk-hb-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px 6px 0 0;
  background: #fff;
  font-size: .75rem;
  font-weight: 600;
  color: #1E293B;
  box-shadow: 0 -2px 6px rgba(0,0,0,.04);
}
.dk-hb-body-view {
  position: relative;
  padding: 14px;
  background: #fff;
  min-height: 120px;
  transition: transform .3s ease;
}
.dk-hb-body-view.is-vp-off .dk-hb-screen {
  transform: scale(0.65);
  transform-origin: top left;
  width: 150%;
}
.dk-hb-body-tag-lbl {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: var(--dk-mono);
  font-size: .65rem;
  color: #CBD5E1;
}
.dk-hb-h1 { margin: 0 0 6px; font-size: 1.05rem; color: #0F172A; }
.dk-hb-p { margin: 0 0 10px; font-size: .82rem; color: #64748B; line-height: 1.4; }
.dk-hb-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 0;
  background: #2563EB;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}

/* --- 3. HEADING TREE SIMULATOR --- */
.dk-htree-box, .dk-htree-reader {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  overflow: hidden;
}
.dk-htree-box-h, .dk-htree-r-h {
  padding: 6px 12px;
  background: #EEF2F6;
  border-bottom: 1px solid #E2E8F0;
  font-size: .76rem;
  font-weight: 700;
  color: #475569;
}
.dk-htree-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  margin: 0;
  list-style: none;
}
.dk-ht-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #E2E8F0;
  font-size: .82rem;
  cursor: pointer;
  transition: all .2s;
}
.dk-ht-item:hover { border-color: #93C5FD; }
.dk-ht-item.is-active {
  background: #EFF6FF;
  border-color: #3B82F6;
  box-shadow: 0 2px 8px rgba(37,99,235,.15);
}
.dk-ht-item.has-err {
  background: #FEF2F2;
  border-color: #FCA5A5;
}
.dk-lvl-1 { margin-left: 0; font-weight: 800; }
.dk-lvl-2 { margin-left: 16px; font-weight: 700; }
.dk-lvl-3 { margin-left: 32px; font-weight: 600; }
.dk-lvl-4 { margin-left: 48px; font-weight: 500; }
.dk-lvl-0 { margin-left: 16px; color: #991B1B; }

.dk-ht-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background: #E2E8F0;
  font-family: var(--dk-mono);
  font-size: .68rem;
  font-weight: 800;
  color: #475569;
}
.dk-ht-item.is-active .dk-ht-badge {
  background: #2563EB;
  color: #fff;
}
.dk-ht-err-pill {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 700;
  color: #DC2626;
  background: #FEE2E2;
  padding: 1px 6px;
  border-radius: 999px;
}
.dk-htree-cur-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  margin: 12px;
  border-radius: 10px;
  background: #0F172A;
  color: #38BDF8;
  font-family: var(--dk-mono);
  font-size: .82rem;
  min-height: 48px;
}
.dk-htree-step-btn {
  margin: 0 12px 12px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  background: #2563EB;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}

/* --- 4. LINKS NAVIGATOR SIMULATOR --- */
.dk-lnk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dk-lnk-chip {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  background: #fff;
  font-size: .78rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all .2s;
}
.dk-lnk-chip:hover { background: #F8FAFC; }
.dk-lnk-chip.is-active {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
}
.dk-lnk-tree-box, .dk-lnk-browser-view {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  overflow: hidden;
}
.dk-lnk-tree-h {
  padding: 6px 12px;
  background: #EEF2F6;
  border-bottom: 1px solid #E2E8F0;
  font-size: .76rem;
  font-weight: 700;
  color: #475569;
}
.dk-lnk-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  font-family: var(--dk-mono);
  font-size: .78rem;
  color: #334155;
}
.dk-lnk-item.is-cur-file {
  background: #EFF6FF;
  color: #1D4ED8;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 4px;
}
.type-rel .dk-lnk-item.is-target-rel, .type-sub .dk-lnk-item.is-target-sub {
  background: #FEF3C7;
  color: #B45309;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 4px;
}
.dk-lnk-url-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #EEF2F6;
  border-bottom: 1px solid #E2E8F0;
  font-family: var(--dk-mono);
  font-size: .75rem;
  color: #475569;
}
.dk-lnk-page-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  background: #fff;
  min-height: 110px;
}
.dk-lnk-action-tag {
  font-family: var(--dk-mono);
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #F1F5F9;
  color: #64748B;
}
.dk-lnk-demo-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 0;
  background: #2563EB;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: transform .15s;
}
.dk-lnk-demo-btn:hover { transform: scale(1.03); }

/* --- 5. IMAGE FORMATS COMPARATOR --- */
.dk-fmt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dk-fmt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  background: #fff;
  font-size: .78rem;
  color: #475569;
  cursor: pointer;
  transition: all .2s;
}
.dk-fmt-chip.is-active {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
}
.dk-fmt-sz-badge {
  font-family: var(--dk-mono);
  font-size: .7rem;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0,0,0,.08);
}
.dk-fmt-chip.is-active .dk-fmt-sz-badge {
  background: rgba(255,255,255,.2);
  color: #fff;
}
.dk-fmt-preview-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 14px;
  overflow: hidden;
}
.dk-fmt-canvas-wrap {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E2E8F0;
}
.dk-fmt-canvas-wrap.has-checker {
  background-image: repeating-linear-gradient(45deg, #E2E8F0 25%, transparent 25%, transparent 75%, #E2E8F0 75%, #E2E8F0),
                    repeating-linear-gradient(45deg, #E2E8F0 25%, #fff 25%, #fff 75%, #E2E8F0 75%, #E2E8F0);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}
.dk-fmt-svg-demo {
  width: 80px;
  height: 80px;
  transition: transform .2s ease;
}
.dk-fmt-canvas-wrap.is-z2 .dk-fmt-svg-demo { transform: scale(1.6); }
.dk-fmt-canvas-wrap.is-z4 .dk-fmt-svg-demo { transform: scale(2.8); }
.dk-fmt-canvas-wrap.is-z8 .dk-fmt-svg-demo { transform: scale(5); }
.dk-fmt-graphic.fmt-jpg .dk-fmt-svg-demo { filter: blur(0.6px) contrast(1.1); }
.dk-fmt-zoom-ctrls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.dk-fmt-z-lbl { font-size: .75rem; font-weight: 600; color: #64748B; }
.dk-fmt-z-btn {
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #CBD5E1;
  background: #fff;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}
.dk-fmt-z-btn.is-active {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
}
.dk-fmt-meta-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}
.dk-fmt-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #E2E8F0;
  font-size: .8rem;
}
.dk-fmt-m-lbl { color: #64748B; font-weight: 600; }
.dk-fmt-m-val { font-weight: 700; color: #1E293B; }
.fmt-cur-pct { color: #16A34A; font-style: normal; margin-left: 4px; }

/* --- 6. TABLE ANATOMY SIMULATOR --- */
.dk-tbl-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #CBD5E1;
}
.dk-demo-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.dk-demo-tbl caption {
  padding: 8px 12px;
  font-weight: 800;
  color: #1E293B;
  background: #F8FAFC;
  border-bottom: 1px solid #CBD5E1;
}
.dk-demo-tbl th, .dk-demo-tbl td {
  padding: 8px 12px;
  border: 1px solid #CBD5E1;
  text-align: left;
}
.dk-demo-tbl th { background: #F1F5F9; font-weight: 700; }
.zone-head .dk-zone-head { background: #FEF3C7; outline: 2px solid #F59E0B; }
.zone-body .dk-zone-body { background: #EFF6FF; outline: 2px solid #3B82F6; }
.zone-foot .dk-zone-foot { background: #ECFDF5; outline: 2px solid #10B981; }
.zone-merge .dk-cell-colspan { background: #EDE9FE; outline: 2px solid #8B5CF6; font-weight: 700; color: #5B21B6; }

/* --- 7. SEMANTIC LANDMARKS SIMULATOR --- */
.dk-sem-wireframe {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}
.dk-sem-box {
  position: relative;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px dashed #CBD5E1;
  background: #fff;
  font-size: .8rem;
}
.is-sem .dk-box-hdr { background: #EFF6FF; border-color: #93C5FD; }
.is-sem .dk-box-nav { background: #F5F3FF; border-color: #C4B5FD; }
.dk-sem-grid-main { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; }
.is-sem .dk-box-main { background: #FEF3C7; border-color: #FCD34D; }
.is-sem .dk-box-art { background: #FFFBEB; border-color: #FDE68A; margin-top: 4px; }
.is-sem .dk-box-aside { background: #F3F4F6; border-color: #D1D5DB; }
.is-sem .dk-box-ftr { background: #ECFDF5; border-color: #6EE7B7; }

.is-div .dk-sem-box { background: #F8FAFC; border-color: #94A3B8; }
.dk-sem-tag {
  display: inline-block;
  font-family: var(--dk-mono);
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0,0,0,.08);
  margin-bottom: 2px;
}
.dk-sem-content { font-weight: 600; color: #334155; }
.dk-sem-reader-box {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #0F172A;
  color: #E2E8F0;
  overflow: hidden;
}
.dk-sem-reader-h {
  padding: 6px 12px;
  background: #1E293B;
  font-size: .76rem;
  font-weight: 700;
  color: #94A3B8;
}
.dk-sem-voice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin: 0;
  list-style: none;
  font-family: var(--dk-mono);
  font-size: .8rem;
}
.dk-sem-voice-list li { display: flex; align-items: center; gap: 8px; }

/* --- 8. FORM SUBMISSION (GET vs POST) --- */
.dk-frm-ui-box, .dk-frm-net-box {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  overflow: hidden;
}
.dk-frm-ui-h, .dk-frm-net-h {
  padding: 6px 12px;
  background: #EEF2F6;
  border-bottom: 1px solid #E2E8F0;
  font-family: var(--dk-mono);
  font-size: .74rem;
  font-weight: 700;
  color: #475569;
}
.dk-frm-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.dk-frm-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dk-frm-lbl { font-size: .76rem; font-weight: 600; color: #475569; }
.dk-frm-inp, .dk-frm-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #CBD5E1;
  background: #fff;
  font-size: .82rem;
}
.dk-frm-submit-btn {
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 0;
  background: #2563EB;
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
}
.dk-frm-url-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: #fff;
  font-family: var(--dk-mono);
  font-size: .76rem;
  border-bottom: 1px solid #E2E8F0;
  overflow-x: auto;
}
.dk-frm-url-meth {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
  font-size: .68rem;
}
.dk-frm-url-meth.is-get { background: #DBEAFE; color: #1D4ED8; }
.dk-frm-url-meth.is-post { background: #DCFCE7; color: #15803D; }
.dk-frm-url-txt { color: #334155; }
.dk-frm-payload-box {
  padding: 10px;
  background: #0F172A;
  color: #38BDF8;
  font-family: var(--dk-mono);
  font-size: .75rem;
}
.dk-frm-pay-h { color: #94A3B8; font-size: .68rem; text-transform: uppercase; margin-bottom: 4px; }
.dk-frm-pay-code { margin: 0; white-space: pre; }

/* --- 9. OPEN GRAPH & SEO SOCIAL CARDS --- */
.dk-og-stage {
  display: flex;
  justify-content: center;
  padding: 14px;
  border-radius: 12px;
  background: #F1F5F9;
  min-height: 120px;
}
.dk-og-card { width: 100%; max-width: 520px; }
.dk-og-google {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.dk-g-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: #475569; margin-bottom: 4px; }
.dk-g-title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; color: #1A0DAB; }
.dk-g-desc { margin: 0; font-size: .84rem; color: #4D5156; line-height: 1.4; }

.dk-og-telegram {
  display: flex;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.dk-tg-border { width: 4px; background: #2AABEE; flex: none; }
.dk-tg-body { padding: 10px 14px; flex: 1 1 auto; }
.dk-tg-site { font-size: .72rem; font-weight: 700; color: #2AABEE; text-transform: uppercase; }
.dk-tg-title { margin: 2px 0 4px; font-size: .95rem; font-weight: 700; color: #000; }
.dk-tg-desc { margin: 0 0 8px; font-size: .8rem; color: #475569; line-height: 1.3; }
.dk-tg-thumb { height: 70px; border-radius: 6px; background: linear-gradient(120deg, #2563EB, #4F46E5); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }

.dk-og-twitter {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.dk-tw-img { height: 100px; background: linear-gradient(120deg, #2563EB, #4F46E5); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.dk-tw-body { padding: 10px 14px; }
.dk-tw-domain { font-size: .72rem; color: #64748B; }
.dk-tw-title { margin: 2px 0 4px; font-size: .95rem; font-weight: 700; color: #0F172A; }
.dk-tw-desc { margin: 0; font-size: .8rem; color: #475569; line-height: 1.3; }

/* --- 10. ACCESSIBILITY KEYBOARD & SKIP LINK --- */
.dk-a11y-mockup {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #CBD5E1;
}
.dk-a11y-skip {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 10;
  padding: 4px 8px;
  background: #000;
  color: #fff;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-130%);
  transition: transform .2s;
}
.dk-a11y-skip.is-focused { transform: translateY(0); }
.dk-a11y-hdr { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid #E2E8F0; }
.dk-a11y-logo { font-size: .82rem; font-weight: 800; color: #2563EB; }
.dk-a11y-nav { display: flex; gap: 8px; }
.dk-a11y-nav a, .dk-a11y-ftr a { font-size: .78rem; color: #475569; text-decoration: none; padding: 2px 6px; border-radius: 4px; }
.dk-a11y-main { padding: 8px 0; }
.dk-a11y-main h3 { margin: 0 0 4px; font-size: .95rem; }
.dk-a11y-main p { margin: 0 0 8px; font-size: .8rem; color: #64748B; }
.dk-a11y-btn-order { padding: 6px 12px; border-radius: 6px; border: 0; background: #2563EB; color: #fff; font-size: .78rem; font-weight: 700; cursor: pointer; }
.dk-a11y-ftr { padding-top: 6px; border-top: 1px solid #E2E8F0; }

/* Focus outline ring */
.has-outline .is-focused {
  outline: 3px solid #2563EB !important;
  outline-offset: 2px !important;
}
.no-outline .is-focused {
  outline: none !important;
}

.dk-a11y-voice-box {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #0F172A;
  color: #38BDF8;
  overflow: hidden;
}
.dk-a11y-voice-h { padding: 6px 12px; background: #1E293B; font-size: .76rem; font-weight: 700; color: #94A3B8; }
.dk-a11y-voice-txt { padding: 14px; font-family: var(--dk-mono); font-size: .82rem; }

/* появление по очереди (карточки, шаги, итоги) */
.dk-stagger.is-play > *{animation:dk-rise .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 90ms + 60ms)}
@keyframes dk-rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* ---------- steps ---------- */
.dk-steps{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
.dk-steps.is-play > *{animation-duration:.55s; animation-delay:calc(var(--i,0) * 280ms + 120ms)}
.dk-step{position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:start}
.dk-step:not(:last-child)::before{content:''; position:absolute; left:21px; top:48px; bottom:-14px; width:2px; background:linear-gradient(#C7D2FE,#E0E7FF)}
.dk-step-n{position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--dk-grad); color:#fff; font-weight:800; font-size:1.05rem; box-shadow:0 8px 18px rgba(37,99,235,.3), 0 0 0 5px #fff}
.dk-step-b{display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:16px; background:#fff; border:1px solid var(--dk-line); box-shadow:var(--dk-sh-sm); min-width:0}
.dk-step-ic{font-size:28px; line-height:1}
.dk-step-t{font-size:1.06rem; font-weight:700; color:var(--dk-ink)}
.dk-step-x{font-size:.96rem; color:var(--dk-slate); line-height:1.55}
.dk-step-arrow{display:none}

/* ---------- code: код + результат ---------- */
.dk-split{display:grid; grid-template-columns:minmax(0,1fr); gap:16px}
.dk-split-a,.dk-split-b{min-width:0; display:flex; flex-direction:column}

.dk-code{display:flex; flex-direction:column; min-width:0; border-radius:16px; background:var(--dk-code-bg); border:1px solid var(--dk-code-line); box-shadow:0 14px 34px rgba(11,18,38,.22); overflow:hidden}
.dk-code-bar,.dk-ed-bar{display:flex; align-items:center; gap:10px; min-height:42px; padding:5px 8px 5px 14px; background:var(--dk-code-bar); border-bottom:1px solid rgba(255,255,255,.06)}
.dk-code-name{display:inline-flex; align-items:center; gap:8px; font:700 .72rem/1 var(--dk-mono); letter-spacing:.1em; text-transform:uppercase; color:#94A3C4}
.dk-code-name i{width:8px; height:8px; border-radius:50%; background:#F97316; box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.dk-code-css .dk-code-name i{background:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.dk-code-bash .dk-code-name i{background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.dk-code-text .dk-code-name i{background:#94A3B8; box-shadow:none}
.dk-code-js .dk-code-name i{background:#F7DF1E; box-shadow:0 0 0 3px rgba(247,223,30,.16)}
.dk-code-python .dk-code-name i{background:#4B8BBE; box-shadow:0 0 0 3px rgba(75,139,190,.2)}
.dk-code-php .dk-code-name i{background:#8892BF; box-shadow:0 0 0 3px rgba(136,146,191,.2)}
.dk-code-copy{margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 10px; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#CBD5E1; font-size:.8rem; font-weight:500; cursor:pointer; transition:background .2s, color .2s}
.dk-code-copy svg{width:15px; height:15px}
.dk-code-copy:hover{background:rgba(255,255,255,.1); color:#fff}
.dk-code-copy.is-done{color:#86EFAC; border-color:rgba(134,239,172,.35)}
.dk-code :focus-visible,.dk-ed :focus-visible,.dk-ana-code :focus-visible{outline-color:#FBBF24}
.dk-pre{flex:1 1 auto; margin:0; padding:14px 0; overflow:auto; font-family:var(--dk-mono); font-size:14px; line-height:1.65; color:#D4D4D4; tab-size:2; -moz-tab-size:2; white-space:pre; scrollbar-width:thin; scrollbar-color:#334155 transparent}
.deck .dk-pre code,.deck .dk-ana-line{background:none; border:0; padding:0; color:inherit; font:inherit; overflow-wrap:normal; border-radius:0}
.deck .dk-pre code{display:block; width:max-content; min-width:100%}
.dk-l{display:block; padding-right:20px}
.dk-l.is-mark{background:rgba(250,204,21,.1); box-shadow:inset 3px 0 0 #FBBF24}
.dk-ln{display:inline-block; width:3.4em; padding-right:1.2em; text-align:right; color:#5E6E94; user-select:none; -webkit-user-select:none}
.dk-l.is-mark .dk-ln{color:#FBBF24}

/* подсветка в духе VS Code Dark+ */
.deck .tk-pun{color:#808DA6}
.deck .tk-tag{color:#569CD6}
.deck .tk-attr{color:#9CDCFE}
.deck .tk-val{color:#CE9178}
.deck .tk-str{color:#CE9178}
.deck .tk-com{color:#6A9955; font-style:italic}
.deck .tk-doc{color:#C586C0}
.deck .tk-ent{color:#D7BA7D}
.deck .tk-sel{color:#D7BA7D}
.deck .tk-prop{color:#9CDCFE}
.deck .tk-num{color:#B5CEA8}
.deck .tk-kw{color:#C586C0}
.deck .tk-fn{color:#DCDCAA}
.deck .tk-pro{color:#6A9955; font-weight:700}
.deck .tk-out{color:#94A3B8}
.deck .tk-var{color:#9CDCFE}
.deck .tk-dec{color:#569CD6}
.deck .tk-cls{color:#4EC9B0}

/* вывод программы (js / python / php): строки появляются по очереди, как при выполнении */
.dk-out{display:flex; flex-direction:column; min-width:0; border-radius:16px; background:#060B18; border:1px solid var(--dk-code-line); box-shadow:0 14px 34px rgba(11,18,38,.22); overflow:hidden}
.dk-out-bar{display:flex; align-items:center; min-height:42px; padding:5px 14px; background:var(--dk-code-bar); border-bottom:1px solid rgba(255,255,255,.06)}
.dk-out-name{display:inline-flex; align-items:center; gap:8px; font:700 .72rem/1 var(--dk-mono); letter-spacing:.1em; text-transform:uppercase; color:#94A3C4}
.dk-out-name svg{width:15px; height:15px; color:#4ADE80}
.dk-out-pre{flex:1 1 auto; margin:0; padding:14px 16px; overflow:auto; font-family:var(--dk-mono); font-size:14px; line-height:1.65; color:#E2E8F0; white-space:pre; scrollbar-width:thin; scrollbar-color:#334155 transparent}
.deck .dk-out-pre code{display:block; background:none; border:0; padding:0; color:inherit; font:inherit; border-radius:0}
.dk-out-l{display:block}
.dk-out-l::before{content:'› '; color:#4ADE80}
.dk-out .dk-stagger.is-play > *{animation-duration:.35s; animation-delay:calc(var(--i,0) * 160ms + 350ms)}
.dk-out :focus-visible{outline-color:#FBBF24}

/* окно браузера с результатом */
.dk-browser{display:flex; flex-direction:column; min-width:0; border-radius:16px; background:#fff; border:1px solid #DCE3EF; box-shadow:0 14px 34px rgba(15,23,42,.1); overflow:hidden}
.dk-browser-bar{display:flex; align-items:center; gap:12px; min-height:42px; padding:6px 12px; background:linear-gradient(#F8FAFD,#EEF2F8); border-bottom:1px solid var(--dk-line)}
.dk-dots3{display:inline-flex; gap:6px; flex:none}
.dk-dots3 i{width:11px; height:11px; border-radius:50%; background:#FF5F57}
.dk-dots3 i:nth-child(2){background:#FEBC2E}
.dk-dots3 i:nth-child(3){background:#28C840}
.dk-url{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:8px; background:#fff; border:1px solid var(--dk-line); font-size:.78rem; color:var(--dk-muted); white-space:nowrap; overflow:hidden}
.dk-url svg{width:12px; height:12px; color:#22A06B}
.dk-browser-t{flex:none; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#56657D}
.dk-frame{display:block; width:100%; height:var(--pvh,240px); border:0; background:#fff; flex:1 1 auto}

/* редактор */
.dk-ed{--dk-ed-h:300px; display:flex; flex-direction:column; min-width:0; border-radius:16px; background:var(--dk-code-bg); border:1px solid var(--dk-code-line); box-shadow:0 14px 34px rgba(11,18,38,.22); overflow:hidden; transition:box-shadow .2s, border-color .2s}
.dk-ed:focus-within{border-color:#3B5BDB; box-shadow:0 0 0 3px rgba(37,99,235,.35),0 14px 34px rgba(11,18,38,.22)}
.dk-ed-name{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:#E2E8F0}
.dk-ed-name svg{width:15px; height:15px; color:#FBBF24}
.dk-ed-keys{margin-left:auto; font-size:.72rem; color:#8B99BC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.dk-ed-body{position:relative; display:flex; height:var(--dk-ed-h); font-family:var(--dk-mono); font-size:14px; line-height:1.65}
.dk-ed-gut{flex:none; width:3.2em; overflow:hidden; padding:14px 0; background:rgba(0,0,0,.12); border-right:1px solid rgba(255,255,255,.05); color:#5E6E94; text-align:right; user-select:none; -webkit-user-select:none}
.dk-ed-gut > div{white-space:pre; padding-right:.8em; will-change:transform}
.dk-ed-view{position:relative; flex:1 1 auto; min-width:0; overflow:hidden}
.dk-ed-hl,.dk-ed-ta{margin:0; padding:14px 16px; border:0; font:inherit; letter-spacing:0; word-spacing:0; tab-size:2; -moz-tab-size:2; white-space:pre; overflow-wrap:normal; text-transform:none; text-indent:0}
.dk-ed-hl{position:absolute; top:0; left:0; min-width:100%; min-height:100%; color:#D4D4D4; pointer-events:none; will-change:transform}
.dk-ed-ta{position:absolute; inset:0; width:100%; height:100%; resize:none; overflow:auto; background:transparent; color:transparent; -webkit-text-fill-color:transparent; caret-color:#FBBF24; outline:none; border-radius:0; box-shadow:none; scrollbar-width:thin; scrollbar-color:#334155 transparent}
.dk-ed-ta::selection{background:rgba(96,165,250,.35); color:transparent; -webkit-text-fill-color:transparent}
.dk-ed-ta:focus,.dk-ed-ta:focus-visible{outline:none}
@media (pointer:coarse){ .dk-ed-body{font-size:16px} }

/* ---------- compare ---------- */
.dk-cmp{display:grid; grid-template-columns:minmax(0,1fr); gap:16px}
.dk-cmp-col{display:flex; flex-direction:column; gap:12px; min-width:0; padding:14px; border-radius:20px; border:1px solid}
.dk-cmp-bad{background:linear-gradient(180deg,#FFF5F5,#fff 70%); border-color:#FECACA}
.dk-cmp-good{background:linear-gradient(180deg,#F0FDF4,#fff 70%); border-color:#BBF7D0}
.dk-cmp-h{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1rem}
.dk-cmp-bad .dk-cmp-h{color:#B91C1C}
.dk-cmp-good .dk-cmp-h{color:#15803D}
.dk-cmp-ic{display:grid; place-items:center; width:30px; height:30px; border-radius:10px; font-size:.95rem; background:#fff; box-shadow:var(--dk-sh-sm)}
.dk-cmp-note{font-size:.95rem; color:var(--dk-slate); padding:0 4px}
.dk-cmp-bad .dk-code{box-shadow:inset 0 3px 0 #F87171,0 14px 34px rgba(11,18,38,.18)}
.dk-cmp-good .dk-code{box-shadow:inset 0 3px 0 #4ADE80,0 14px 34px rgba(11,18,38,.18)}

/* ---------- anatomy ---------- */
.dk-anatomy .dk-k-tag{--k:#60A5FA; --k2:#2563EB}
.dk-anatomy .dk-k-attr{--k:#FBBF24; --k2:#B45309}
.dk-anatomy .dk-k-value{--k:#4ADE80; --k2:#15803D}
.dk-anatomy .dk-k-text{--k:#F1F5F9; --k2:#475569}
.dk-anatomy .dk-k-punct{--k:#94A3B8; --k2:#94A3B8}
.dk-ana-code{position:relative; overflow-x:auto; padding:clamp(40px,6vw,58px) clamp(16px,3vw,32px) clamp(20px,3vw,30px); border-radius:20px; text-align:center; background:radial-gradient(420px 200px at 50% 0%,rgba(79,70,229,.3),transparent 70%),var(--dk-code-bg); border:1px solid var(--dk-code-line); box-shadow:0 18px 40px rgba(11,18,38,.22)}
.deck .dk-ana-line{display:block; font-family:var(--dk-mono); font-weight:500; font-size:clamp(1.05rem,2.6vw,1.9rem); font-size:clamp(1rem,3.8cqi,2rem); line-height:calc(1.5em + 36px)}
.dk-seg{position:relative; display:inline-block; white-space:pre; color:var(--k); line-height:1.5; padding:.05em .04em; border-radius:8px; transition:opacity .2s, background .2s, box-shadow .2s}
.dk-seg.has-label{cursor:help; box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--k) 55%,transparent)}
.dk-seg-mark{position:absolute; left:50%; bottom:100%; transform:translate(-50%,-6px); display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--k); color:#0B1226; font:800 12px/1 'Roboto',system-ui,sans-serif; box-shadow:0 4px 12px rgba(0,0,0,.35); transition:transform .2s}
.dk-seg-mark::after{content:''; position:absolute; left:50%; top:100%; width:2px; height:6px; margin-left:-1px; background:var(--k); opacity:.7}
.dk-anatomy.has-hot .dk-seg:not(.is-hot){opacity:.32}
.dk-seg.is-hot{background:rgba(255,255,255,.1); box-shadow:0 0 0 2px var(--k)}
.dk-seg.is-hot .dk-seg-mark{transform:translate(-50%,-6px) scale(1.18)}
.dk-legend{display:grid; grid-template-columns:minmax(0,1fr); gap:10px; counter-reset:none}
.dk-leg{display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; background:#fff; border:1px solid var(--dk-line); box-shadow:var(--dk-sh-sm); cursor:default; transition:border-color .2s, box-shadow .2s, transform .2s, opacity .2s}
.dk-leg-n{flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--k2); color:#fff; font-weight:800; font-size:.82rem}
.dk-k-text .dk-leg-n,.dk-k-punct .dk-leg-n{background:#E2E8F0; color:var(--dk-ink)}
.dk-leg-b{display:flex; flex-direction:column; gap:3px; min-width:0}
.dk-leg-t{font-size:.95rem; color:var(--dk-slate); line-height:1.4}
.deck .dk-leg .dk-chip{align-self:flex-start; color:var(--k)}
.dk-anatomy.has-hot .dk-leg:not(.is-hot){opacity:.55}
.dk-leg.is-hot{border-color:var(--k2); box-shadow:0 8px 22px rgba(15,23,42,.1); transform:translateY(-2px)}

/* код-«фишка»: ячейки таблицы, варианты ответа, легенда */
.deck .dk-chip{display:inline-block; font-family:var(--dk-mono); font-size:.88em; font-weight:500; color:#9CDCFE; background:var(--dk-code-bg); border:1px solid var(--dk-code-line); border-radius:7px; padding:.18em .55em; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45}

/* ---------- table ---------- */
.dk-table-wrap{overflow-x:auto; border-radius:18px; background:#fff; border:1px solid var(--dk-line); box-shadow:var(--dk-sh-sm)}
.dk-table{width:100%; border-collapse:collapse; font-size:1rem; line-height:1.5}
.dk-table thead th{padding:12px 18px; background:var(--dk-soft); border-bottom:1px solid var(--dk-line); text-align:left; font-size:.76rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#56657D; white-space:nowrap}
.dk-table tbody th,.dk-table td{padding:12px 18px; border-top:1px solid var(--dk-line); vertical-align:top; text-align:left; font-weight:400; color:var(--dk-slate)}
.dk-table tbody tr:first-child th,.dk-table tbody tr:first-child td{border-top:0}
.dk-table tbody tr{transition:background .15s}
.dk-table tbody tr:hover{background:#F8FAFF}

/* ---------- quiz ---------- */
.dk-q{font-size:clamp(1.12rem,1.9vw,1.4rem); font-weight:600; line-height:1.45; color:var(--dk-ink)}
.dk-opts{display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
.dk-opt{position:relative; display:flex; align-items:center; gap:14px; width:100%; min-height:58px; padding:12px 16px; text-align:left; background:#fff; border:2px solid var(--dk-line); border-radius:16px; font-size:1.04rem; line-height:1.4; color:var(--dk-ink); cursor:pointer; transition:border-color .2s, background .2s, transform .15s, box-shadow .2s}
.dk-opt:hover{border-color:#9DB7F2; background:#F7FAFF; box-shadow:0 8px 20px rgba(37,99,235,.1)}
.dk-opt-l{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--dk-soft); color:var(--dk-slate); font-weight:800; font-size:.92rem; transition:background .2s, color .2s}
.dk-opt-t{min-width:0}
.dk-opt.is-wrong{border-color:#FCA5A5; background:var(--dk-red-bg); animation:dk-shake .45s}
.dk-opt.is-wrong .dk-opt-l{background:var(--dk-red); color:#fff}
.dk-opt.is-right{border-color:#4ADE80; background:var(--dk-green-bg); box-shadow:0 10px 24px rgba(22,163,74,.14)}
.dk-opt.is-right .dk-opt-l{background:var(--dk-green); color:#fff}
.dk-opt[aria-disabled="true"]{cursor:default}
.dk-opt[aria-disabled="true"]:not(.is-right){opacity:.55; background:#fff; border-color:var(--dk-line); box-shadow:none}
.dk-opt[aria-disabled="true"]:not(.is-right) .dk-opt-l{background:var(--dk-soft); color:var(--dk-slate)}
@keyframes dk-shake{0%,100%{transform:none} 20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)}}
.dk-quiz-fb{min-height:1.5em; font-weight:700}
.dk-quiz-fb.is-bad{color:var(--dk-red)}
.dk-quiz-fb.is-ok{color:#15803D}
.dk-explain{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:16px; background:linear-gradient(120deg,#ECFDF5,#F0FDF4); border:1px solid #A7F3D0; color:#14532D; animation:dk-pop .4s cubic-bezier(.2,1.3,.4,1)}
.dk-explain-h{font-weight:800; color:#15803D}
@keyframes dk-pop{from{opacity:0; transform:scale(.96) translateY(6px)} to{opacity:1; transform:none}}

/* ---------- trainer ---------- */
.dk-trainer{display:grid; grid-template-columns:minmax(0,1fr); align-content:start; justify-content:stretch; gap:16px}
.dk-tr-side,.dk-tr-work{display:contents}
.dk-tr-head{order:1; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px}
.dk-task{order:2}
.dk-ed{order:3}
.dk-trainer .dk-browser,.dk-trainer .dk-out{order:4}
.dk-tr-actions{order:5; display:flex; flex-wrap:wrap; gap:8px}
.dk-hint{order:6}
.dk-results{order:7}
.dk-solved{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--dk-green-bg); border:1px solid #A7F3D0; color:#166534; font-size:.85rem; font-weight:700}
.dk-task{padding:16px 18px; border-radius:16px; background:var(--dk-grad-soft); border:1px solid #DCE4F7}
.dk-task-h{font-size:.74rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--dk-indigo); margin-bottom:8px !important}
.dk-task .dk-rich{font-size:1rem; color:var(--dk-ink); line-height:1.6}
.dk-hint{display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-radius:14px; background:#FFFBEB; border:1px solid #FDE68A; color:#78350F; font-size:.96rem; animation:dk-pop .3s ease-out}
.dk-hint-i{font-size:1.15rem; line-height:1.3}
.dk-results{position:relative; display:flex; flex-direction:column; gap:10px; transition:opacity .2s}
.dk-results:empty{display:none}
.dk-results.is-stale{opacity:.55}
.dk-banner{position:relative; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; font-weight:700; line-height:1.4}
.dk-banner.is-ok{background:linear-gradient(120deg,#DCFCE7,#ECFDF5); border:1px solid #86EFAC; color:#166534; animation:dk-pop .5s cubic-bezier(.2,1.5,.4,1)}
.dk-banner.is-bad{background:#FFF7ED; border:1px solid #FED7AA; color:#9A3412}
.dk-checks{display:grid; gap:6px}
.dk-checks li{display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border-radius:12px; background:#fff; border:1px solid var(--dk-line); font-size:.95rem; line-height:1.45; color:var(--dk-slate)}
.dk-checks li.is-bad{background:#FFF7F7; border-color:#FECACA; color:#7F1D1D}
.dk-check-ic{flex:none; font-size:.95rem; line-height:1.45}

/* конфетти */
.dk-burst{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:3}
.dk-burst i{position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:2px; background:var(--c); animation:dk-burst 1s cubic-bezier(.1,.75,.3,1) forwards}
.dk-burst i:nth-child(3n){border-radius:50%}
.dk-burst i:nth-child(4n){width:5px; height:10px}
@keyframes dk-burst{
  from{transform:rotate(var(--a)) translateY(0) scale(1); opacity:1}
  to{transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(160deg) scale(.5); opacity:0}
}

/* ---------- summary ---------- */
.dk-summary{display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-content:center; gap:20px; text-align:center}
.dk-sum-hero{display:flex; flex-direction:column; align-items:center; gap:14px}
.dk-summary .dk-head{align-items:center}
.dk-sum-body{display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; max-width:760px}
.dk-sum-badge{display:grid; place-items:center; width:84px; height:84px; border-radius:26px; font-size:44px; line-height:1; background:linear-gradient(135deg,#FEF3C7,#FDE68A); box-shadow:0 14px 34px rgba(245,158,11,.32),inset 0 0 0 1px rgba(245,158,11,.25)}
.dk-sum-stats{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:var(--dk-soft); border:1px solid var(--dk-line); font-size:.9rem; font-weight:600; color:var(--dk-slate)}
.dk-sum-stats svg{width:16px; height:16px; color:var(--dk-amber)}
.dk-sum-stats.is-all{background:var(--dk-green-bg); border-color:#A7F3D0; color:#166534}
.dk-take{display:grid; gap:10px; width:100%; max-width:760px; text-align:left}
.dk-take li{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:14px; background:#fff; border:1px solid var(--dk-line); box-shadow:var(--dk-sh-sm); font-size:1.02rem; line-height:1.5}
.dk-take-ic{flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#DCFCE7; color:var(--dk-green)}
.dk-take-ic svg{width:15px; height:15px; stroke-width:3}
.dk-upnext{display:flex; gap:14px; align-items:flex-start; width:100%; max-width:760px; padding:16px 18px; border-radius:16px; text-align:left; background:var(--dk-grad-soft); border:1px dashed #A5B4FC}
.dk-upnext-ic{font-size:1.6rem; line-height:1.1}
.dk-upnext-h{font-size:.75rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--dk-indigo); margin-bottom:4px !important}
.dk-sum-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px}
.dk-finished{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 20px; border-radius:999px; background:var(--dk-green-bg); border:1px solid #A7F3D0; color:#166534; font-weight:700}

/* ---------- Широкая сцена: колонки ---------- */
@container dk (min-width:560px){
  .dk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dk-card{grid-template-columns:minmax(0,1fr); gap:12px}
  .dk-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dk-opts.is-short{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container dk (min-width:760px){
  .dk-text.has-icon{grid-template-columns:auto minmax(0,1fr); gap:32px; align-items:start}
  .dk-text.has-icon .dk-text-icon{width:108px; height:108px; border-radius:30px; font-size:56px}
  .dk-cmp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dk-steps.dk-n2,.dk-steps.dk-n3,.dk-steps.dk-n4{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:34px}
  .dk-steps.dk-n2{--cols:2} .dk-steps.dk-n3{--cols:3} .dk-steps.dk-n4{--cols:4}
  .dk-steps.dk-n2 .dk-step,.dk-steps.dk-n3 .dk-step,.dk-steps.dk-n4 .dk-step{grid-template-columns:minmax(0,1fr)}
  .dk-steps.dk-n2 .dk-step::before,.dk-steps.dk-n3 .dk-step::before,.dk-steps.dk-n4 .dk-step::before{display:none}
  .dk-steps.dk-n2 .dk-step-n,.dk-steps.dk-n3 .dk-step-n,.dk-steps.dk-n4 .dk-step-n{position:absolute; top:-14px; left:-10px; width:38px; height:38px; font-size:.95rem}
  .dk-steps.dk-n2 .dk-step-b,.dk-steps.dk-n3 .dk-step-b,.dk-steps.dk-n4 .dk-step-b{height:100%; align-items:center; text-align:center; padding:26px 18px 20px}
  .dk-steps.dk-n2 .dk-step-ic,.dk-steps.dk-n3 .dk-step-ic,.dk-steps.dk-n4 .dk-step-ic{font-size:40px; margin-bottom:4px}
  .dk-steps.dk-n2 .dk-step-arrow,.dk-steps.dk-n3 .dk-step-arrow,.dk-steps.dk-n4 .dk-step-arrow{display:grid}
}
@container dk (min-width:820px){
  .dk-cover{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:44px}
  .dk-codeslide.has-preview .dk-split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:stretch}
  .dk-codeslide.has-preview .dk-split-a > *,.dk-codeslide.has-preview .dk-split-b > *{flex:1 1 auto}
  .dk-codeslide.has-preview .dk-frame{height:auto; min-height:var(--pvh,240px)}
  .dk-codeslide.has-out .dk-split{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:stretch}
  .dk-codeslide.has-out .dk-split-a > *,.dk-codeslide.has-out .dk-split-b > *{flex:1 1 auto}
  .dk-lock{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:44px}
}
@container dk (min-width:900px){
  .dk-cards.dk-n3,.dk-cards.dk-n5,.dk-cards.dk-n6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dk-cards.dk-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dk-legend{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dk-trainer{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:22px; align-items:start}
  .dk-tr-side,.dk-tr-work{display:flex; flex-direction:column; gap:14px; min-width:0}
  .dk-tr-work{position:sticky; top:0}
  .dk-trainer .dk-ed{--dk-ed-h:320px}
}
@container dk (min-width:900px){
  .dk-summary{grid-template-columns:minmax(0,4fr) minmax(0,6fr); grid-template-areas:"hero body" "actions body"; column-gap:48px; row-gap:22px; justify-items:stretch; align-items:start; text-align:left}
  .dk-sum-hero{grid-area:hero; align-items:flex-start; align-self:end}
  .dk-summary .dk-head{align-items:flex-start}
  .dk-sum-body{grid-area:body; align-self:center; max-width:none}
  .dk-sum-actions{grid-area:actions; justify-content:flex-start !important}
  .dk-take li{padding:12px 16px}
}
@container dk (min-width:1000px){
  .dk-steps.dk-n5,.dk-steps.dk-n6{grid-template-columns:repeat(var(--cols,5),minmax(0,1fr)); gap:30px}
  .dk-steps.dk-n5{--cols:5} .dk-steps.dk-n6{--cols:6}
  .dk-steps.dk-n5 .dk-step,.dk-steps.dk-n6 .dk-step{grid-template-columns:minmax(0,1fr)}
  .dk-steps.dk-n5 .dk-step::before,.dk-steps.dk-n6 .dk-step::before{display:none}
  .dk-steps.dk-n5 .dk-step-n,.dk-steps.dk-n6 .dk-step-n{position:absolute; top:-14px; left:-10px; width:36px; height:36px; font-size:.9rem}
  .dk-steps.dk-n5 .dk-step-b,.dk-steps.dk-n6 .dk-step-b{height:100%; align-items:center; text-align:center; padding:24px 12px 18px}
  .dk-steps.dk-n5 .dk-step-ic,.dk-steps.dk-n6 .dk-step-ic{font-size:36px}
  .dk-steps.dk-n5 .dk-step-arrow,.dk-steps.dk-n6 .dk-step-arrow{display:grid}
}
/* стрелка между шагами в горизонтальной схеме */
.dk-step-arrow{position:absolute; z-index:2; top:50%; right:-17px; width:28px; height:28px; margin-top:-14px; transform:translateX(50%); place-items:center; border-radius:50%; background:#fff; border:1px solid var(--dk-line); color:var(--dk-primary); box-shadow:var(--dk-sh-sm)}
.dk-steps.dk-n5 .dk-step-arrow,.dk-steps.dk-n6 .dk-step-arrow{right:-15px}
.dk-step-arrow svg{width:15px; height:15px; stroke-width:2.5}

/* ---------- Полный экран ---------- */
.deck.is-fs{width:100vw; max-width:none; height:100vh; height:100dvh; margin:0; padding:clamp(8px,1.4vw,16px); border-radius:0; border:0; background:linear-gradient(180deg,#EEF2FA,#E6ECF7)}
.deck.is-fs .dk-stage{flex:1 1 auto; height:auto; min-height:0}
.deck.is-fakefs{position:fixed; inset:0; z-index:2147483000}
html.dk-lock,html.dk-lock body{overflow:hidden}

/* ---------- Узкий экран ---------- */
@media (max-width:760px){
  .dk-top-tools .dk-count{display:none}
  .dk-dots{display:none}
  .dk-countm{display:block}
  .dk-prev{width:48px; min-width:48px; padding:0 !important}
  .dk-prev .dk-btn-t{display:none}
  .dk-ed-keys{display:none}
}
@media (max-width:640px){
  .deck{padding:6px; gap:8px; border-radius:20px}
  .dk-top{gap:8px; min-height:40px; padding:0 0 0 6px}
  .dk-title{font-size:.9rem}
  .dk-kicker{font-size:.66rem}
  .dk-top-tools{gap:6px}
  .dk-trpill{height:32px; padding:0 9px}
  .dk-trpill-full{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .dk-trpill-short{display:inline}
  .dk-ib{width:40px; height:40px; border-radius:11px}
  .dk-langs .dk-lang{min-width:32px; padding:0 4px}
  .dk-stage{height:calc(100vh - 214px); height:calc(100svh - 214px); min-height:400px; border-radius:16px}
  .dk-slide{padding:20px 16px 28px}
  .dk-in{gap:16px}
  .dk-nav{gap:8px}
  .dk-nav .dk-btn{padding:0 18px}
  .dk-toast{bottom:68px}
  .dk-pre,.dk-ed-body{font-size:13px}
  .dk-ln{width:2.6em; padding-right:.9em}
  .dk-ed-gut{width:2.6em}
  .dk-opt{min-height:52px; padding:10px 12px; gap:12px; font-size:1rem}
  .dk-cmp-col{padding:10px}
  .dk-goals{padding:18px}
  .dk-table thead th,.dk-table tbody th,.dk-table td{padding:10px 12px}
  .deck.is-fs .dk-stage{height:auto}
}
@media (max-width:640px) and (pointer:coarse){ .dk-ed-body{font-size:16px} }
@media (max-width:380px){
  .dk-kicker{display:none}
  .dk-trpill svg{display:none}
}

/* ---------- Меньше движения ---------- */
@media (prefers-reduced-motion:reduce){
  .deck *,.deck *::before,.deck *::after{animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .dk-t-cover::after{animation:none}
  .dk-burst{display:none}
}
/* MPLS walkthroughs reuse points/steps and their translated content. */
.dk-mpls-visual{padding:18px;border:1px solid #acc8d6;border-radius:14px;background:#f2f8fc;margin:16px 0;color:#153349}
.dk-mpls-path{display:flex;gap:12px;overflow-x:auto;padding:12px 4px;align-items:stretch}
.dk-mpls-node{position:relative;flex:1;min-width:110px;padding:12px;border:2px solid #bdd0dc;border-radius:10px;text-align:center;font-size:14px;background:#fff;transition:background .3s,transform .3s,border-color .3s}
.dk-mpls-node:not(:first-child)::before{content:'→';position:absolute;left:-15px;top:calc(50% - 12px);color:#267580;font-size:18px}
.dk-mpls-node.is-active{border-color:#007b79;background:#d5f1ec;transform:translateY(-4px)}
.dk-mpls-node.is-past{border-color:#78aaa5;background:#eaf6f3}
.dk-mpls-description{min-height:80px;padding:14px;background:#fff;border-radius:8px;line-height:1.6}
.dk-mpls-counter{font-size:14px;align-self:center}.dk-mpls-visual .dk-actions{flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.dk-mpls-node{transition:none;transform:none!important}}
/* Переключатель вендоров на слайдах с примерами команд */
.dk-vendor-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;padding:4px;background:rgba(15,23,42,.06);border:1px solid var(--dk-line,#E2E8F0);border-radius:12px}
.dk-vendor-btn{padding:8px 16px;border:0;border-radius:8px;background:transparent;color:var(--dk-text-dim,#475569);font-family:inherit;font-size:.88rem;font-weight:650;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.dk-vendor-btn:hover{background:rgba(255,255,255,.8);color:var(--dk-text,#0F172A)}
.dk-vendor-btn.is-active{background:#fff;color:var(--dk-primary,#2563EB);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.dk-vendor-btn:focus-visible{outline:3px solid rgba(37,99,235,.4);outline-offset:2px}

/* Диаграммы и топологии в тексте слайдов */
.dk-diagram{margin:14px 0;padding:14px 18px;background:#0f172a;border:1px solid #1e293b;border-radius:10px;color:#38bdf8;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.88rem;line-height:1.45;overflow-x:auto;box-shadow:0 4px 16px rgba(0,0,0,.25);white-space:pre}
.dk-diagram code{font-family:inherit;font-size:inherit;color:inherit;background:transparent;padding:0;border:0}