/* Посадочные реферата, эссе и доклада: свои интерактивные блоки в визуальном языке страницы диплома. */

/* ——— Карточка: текст слева, сцена справа ——— */
.wl-card {
  display: grid;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow:
    0 32px 72px rgba(15, 23, 42, 0.09),
    0 8px 20px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}

.wl-card__copy {
  padding: 28px 22px;
  min-width: 0;
}

.wl-card__copy h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.025em;
}

.wl-card__stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding: 24px 16px 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 15%, rgba(37, 99, 235, 0.12), transparent 58%),
    linear-gradient(165deg, #f0f5fb 0%, #e6edf7 100%);
}

.wl-card__stage > .ui-app {
  width: 100%;
  max-width: 600px;
}

.wl-card__stage--center {
  align-items: center;
  padding-bottom: 24px;
}

.wl-hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.wl-hint a,
.wl-step a,
.wl-calc__foot a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--blue-mist, #bfdbfe);
  text-underline-offset: 3px;
}

.wl-hint a:hover,
.wl-step a:hover,
.wl-calc__foot a:hover {
  text-decoration-color: currentColor;
}

/* Переключатели в карточке */
.wl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}

.wl-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.wl-tab:hover {
  border-color: #bfdbfe;
  color: var(--ink);
}

.wl-tab.is-active {
  background: linear-gradient(135deg, #3b82f6 0%, var(--blue) 100%);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.26);
}

.wl-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.wl-tab__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--blue));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

/* Пояснение под переключателями */
.wl-note {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 96px;
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--blue-soft), #fff 85%);
  border: 1px solid #dbeafe;
}

.wl-note__num {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #bfdbfe;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12);
}

.wl-note strong {
  display: block;
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.wl-note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.wl-note.is-swap > * {
  animation: wl-text-in 0.45s var(--ease) both;
}

/* ——— Короткие возможности под карточкой ——— */
.wl-feats {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.wl-feats li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.wl-feats__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
}

.wl-feats strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.wl-feats p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* ——— Шаги ——— */
.wl-steps {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wl-step;
}

.wl-step {
  position: relative;
  padding: 22px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.wl-step:hover {
  transform: translateY(-3px);
  border-color: #bfdbfe;
  box-shadow: 0 24px 52px rgba(37, 99, 235, 0.1);
}

.wl-step__num {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.wl-step h3 {
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.wl-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.wl-after {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ——— Честные ограничения ——— */
.wl-limits {
  display: grid;
  gap: 12px;
}

.wl-limits__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.wl-limits__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.wl-limits--blue .wl-limits__item:not(.wl-limits__item--warn) .wl-limits__icon {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: #bfdbfe;
}

.wl-limits__item strong {
  display: block;
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.wl-limits__item p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.wl-prose {
  max-width: 760px;
  margin: 0 auto 24px;
  color: var(--ink-2);
  line-height: 1.65;
}

.wl-prose p {
  margin: 0 0 12px;
}

.wl-list {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 0 0 0 1.7rem;
  list-style: decimal;
  color: var(--ink-2);
  line-height: 1.6;
}

.wl-list li {
  padding-left: 6px;
}

.wl-list li::marker {
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 800;
}

#osobennosti .seo-table-wrap,
#osobennosti .seo-note {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

#osobennosti .seo-table-wrap {
  margin-bottom: 24px;
}

/* ================================================================
   РЕФЕРАТ · «Каждая мысль — со ссылкой»
   ================================================================ */
.wl-srcs {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
}

.wl-src {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.wl-src:hover {
  border-color: #bfdbfe;
}

.wl-src:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.wl-src__n {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.wl-src__type {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.wl-src__name {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-src.is-active {
  border-color: var(--blue);
  background: linear-gradient(180deg, #f5f9ff, #fff);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.14);
}

.wl-src.is-active .wl-src__n {
  background: var(--blue);
  color: #fff;
}

.wl-src__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blue);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.is-auto .wl-src.is-active .wl-src__timer {
  opacity: 0.5;
  animation: wl-timer var(--wl-auto, 4200ms) linear both;
}

.wl-refdoc .ui-app__body {
  display: block;
}

.wl-refdoc__page {
  padding: 20px 22px 22px;
  background: #fff;
}

.wl-refdoc__h {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.wl-refdoc__p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
  text-indent: 1.4em;
}

.wl-frag {
  border-radius: 4px;
  transition:
    background-color 0.35s var(--ease),
    color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.wl-frag b {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 700;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.wl-frag.is-hit {
  background: rgba(59, 130, 246, 0.14);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.14);
  color: var(--ink);
}

.wl-frag.is-hit b {
  background: var(--blue);
  color: #fff;
}

.wl-refdoc__lit {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
}

.wl-refdoc__lit-h {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.wl-refdoc__lit ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: wl-lit;
}

.wl-refdoc__lit li {
  position: relative;
  padding: 6px 8px 6px 30px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  counter-increment: wl-lit;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.wl-refdoc__lit li::before {
  content: counter(wl-lit) ".";
  position: absolute;
  left: 10px;
  top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue);
}

.wl-refdoc__lit li.is-hit {
  background: var(--blue-soft);
  color: var(--ink);
}

/* ================================================================
   РЕФЕРАТ · «Лист по ГОСТу»
   ================================================================ */
.wl-sheet-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.wl-sheet {
  --ml: 21.4%;
  --mr: 10.7%;
  --mt: 10.1%;
  --mb: 10.1%;
  position: relative;
  aspect-ratio: 210 / 297;
  border-radius: 6px;
  background: #fff;
  box-shadow:
    0 30px 60px rgba(15, 23, 42, 0.14),
    0 6px 16px rgba(15, 23, 42, 0.06);
}

.wl-sheet__area {
  position: absolute;
  top: var(--mt);
  right: var(--mr);
  bottom: var(--mb);
  left: var(--ml);
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  border: 1px dashed transparent;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}

.wl-sheet__title {
  align-self: center;
  width: 42%;
  height: 8px;
  margin: 4px 0 10px;
  border-radius: 999px;
  background: #1e293b;
  opacity: 0.8;
}

.wl-sheet__line {
  display: block;
  height: 5px;
  width: var(--w, 100%);
  border-radius: 999px;
  background: #cbd5e1;
  transition: background-color 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease);
}

.wl-sheet__line--first {
  margin-left: 12%;
  width: 88%;
}

.wl-sheet__gap {
  height: 6px;
}

.wl-sheet__num {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* Подсветка полей: заливка отступов */
.wl-sheet__margin {
  position: absolute;
  background: rgba(59, 130, 246, 0.12);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.wl-sheet__margin--l { top: 0; bottom: 0; left: 0; width: var(--ml); border-radius: 6px 0 0 6px; }
.wl-sheet__margin--r { top: 0; bottom: 0; right: 0; width: var(--mr); border-radius: 0 6px 6px 0; }
.wl-sheet__margin--t { top: 0; left: var(--ml); right: var(--mr); height: var(--mt); }
.wl-sheet__margin--b { bottom: 0; left: var(--ml); right: var(--mr); height: var(--mb); }

.wl-sheet__mm {
  position: absolute;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.wl-sheet__mm--l { left: calc(var(--ml) / 2); top: 50%; translate: -50% -50%; }
.wl-sheet__mm--r { right: calc(var(--mr) / 2); top: 50%; translate: 50% -50%; }
.wl-sheet__mm--t { left: 50%; top: calc(var(--mt) / 2); translate: -50% -50%; }
.wl-sheet__mm--b { left: 50%; bottom: calc(var(--mb) / 2); translate: -50% 50%; }

.wl-sheet[data-focus="margins"] .wl-sheet__margin,
.wl-sheet[data-focus="margins"] .wl-sheet__mm {
  opacity: 1;
  transform: none;
}

.wl-sheet[data-focus="margins"] .wl-sheet__area {
  border-color: #93c5fd;
}

/* Шрифт: строки темнеют, появляется образец */
.wl-sheet__font {
  position: absolute;
  top: 40%;
  left: 50%;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #bfdbfe;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.96);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}

.wl-sheet__font small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
}

.wl-sheet[data-focus="font"] .wl-sheet__font {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wl-sheet[data-focus="font"] .wl-sheet__line {
  background: #94a3b8;
}

/* Интервал: строки раздвигаются */
.wl-sheet[data-focus="spacing"] .wl-sheet__area {
  gap: 9px;
}

.wl-sheet[data-focus="spacing"] .wl-sheet__line {
  background: #93c5fd;
}

/* Абзацный отступ: пунктир на месте отступа первой строки */
.wl-sheet__line--first {
  position: relative;
}

.wl-sheet[data-focus="indent"] .wl-sheet__line--first::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 13.6%;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 7px);
  animation: wl-pop 0.4s var(--ease) both;
}

/* Номер страницы */
.wl-sheet[data-focus="number"] .wl-sheet__num {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3);
}

/* ================================================================
   ЭССЕ · «Эссе по слоям»
   ================================================================ */
.wl-layers-doc .ui-app__body {
  display: block;
}

.wl-essay {
  padding: 20px 22px 22px;
  background: #fff;
}

.wl-essay__h {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.wl-essay p {
  margin: 0 0 9px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
  text-indent: 1.4em;
}

.wl-essay p:last-child {
  margin-bottom: 0;
}

.wl-role {
  --c: 37, 99, 235;
  border-radius: 4px;
  transition:
    background-color 0.35s var(--ease),
    color 0.35s var(--ease),
    opacity 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.wl-essay [data-role="thesis"] { --c: 37, 99, 235; }
.wl-essay [data-role="arg"] { --c: 124, 58, 237; }
.wl-essay [data-role="example"] { --c: 5, 150, 105; }
.wl-essay [data-role="outro"] { --c: 234, 88, 12; }

.wl-tab[data-layer="thesis"] { --dot: rgb(37, 99, 235); }
.wl-tab[data-layer="arg"] { --dot: rgb(124, 58, 237); }
.wl-tab[data-layer="example"] { --dot: rgb(5, 150, 105); }
.wl-tab[data-layer="outro"] { --dot: rgb(234, 88, 12); }

.wl-essay[data-layer] .wl-role,
.wl-essay[data-layer] p {
  color: #94a3b8;
}

.wl-essay[data-layer="thesis"] .wl-role[data-role="thesis"],
.wl-essay[data-layer="arg"] .wl-role[data-role="arg"],
.wl-essay[data-layer="example"] .wl-role[data-role="example"],
.wl-essay[data-layer="outro"] .wl-role[data-role="outro"] {
  background: rgba(var(--c), 0.12);
  box-shadow: 0 0 0 2px rgba(var(--c), 0.12);
  color: var(--ink);
}

.wl-essay__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
}

.wl-essay__legend span {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-soft);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.wl-essay__legend span.is-on {
  background: rgba(var(--c), 0.12);
  color: rgb(var(--c));
}

/* ================================================================
   ЭССЕ · «Объём и пропорции» / ДОКЛАД · «Регламент»
   ================================================================ */
.wl-calc {
  display: grid;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow:
    0 32px 72px rgba(15, 23, 42, 0.09),
    0 8px 20px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}

.wl-calc__controls {
  padding: 28px 22px;
  min-width: 0;
}

.wl-calc__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.wl-calc__big {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.wl-calc__big small {
  margin-left: 4px;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--muted);
}

.wl-range {
  width: 100%;
  height: 28px;
  margin: 6px 0 4px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.wl-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) 0 var(--fill, 20%), #e2e8f0 var(--fill, 20%));
}

.wl-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
}

.wl-range::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
}

.wl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.wl-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.wl-range:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 8px;
}

.wl-range__scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.wl-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border-radius: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
}

.wl-seg button {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.wl-seg button small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
}

.wl-seg button:hover {
  color: var(--ink);
}

.wl-seg button.is-on {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.wl-seg button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.wl-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 0;
}

.wl-stat {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
}

.wl-stat span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.wl-stat strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wl-stat--accent {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, var(--blue-soft), #fff);
}

.wl-stat--accent strong {
  color: var(--blue-deep, var(--blue));
}

.wl-calc__result {
  position: relative;
  min-width: 0;
  padding: 28px 22px;
  background:
    radial-gradient(ellipse 70% 55% at 80% 10%, rgba(37, 99, 235, 0.12), transparent 58%),
    linear-gradient(165deg, #f0f5fb 0%, #e6edf7 100%);
}

.wl-calc__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

/* Полоса пропорций */
.wl-bar {
  display: flex;
  gap: 4px;
  height: 46px;
  margin: 0 0 18px;
}

.wl-bar__part {
  position: relative;
  flex: var(--share) 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--bg, #fff);
  color: var(--fg, var(--ink));
  overflow: hidden;
  transition: flex-grow 0.5s var(--ease);
}

.wl-bar__part:first-child { border-radius: 12px 6px 6px 12px; }
.wl-bar__part:last-child { border-radius: 6px 12px 12px 6px; }

.wl-bar__part b {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-bar__part em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wl-bar__part--intro { --bg: #dbeafe; --fg: #1e40af; }
.wl-bar__part--main { --bg: var(--blue); --fg: #fff; }
.wl-bar__part--outro { --bg: #ffedd5; --fg: #9a3412; }

.wl-plan {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wl-plan li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  font-size: 13.5px;
  color: var(--ink-2);
  animation: wl-row-in 0.4s var(--ease) both;
}

.wl-plan li b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.wl-plan li em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wl-plan li.is-sub {
  margin-left: 18px;
  padding: 7px 12px;
  font-size: 12.5px;
  background: rgba(255, 255, 255, 0.6);
}

.wl-plan li:nth-child(2) { animation-delay: 0.04s; }
.wl-plan li:nth-child(3) { animation-delay: 0.08s; }
.wl-plan li:nth-child(4) { animation-delay: 0.12s; }
.wl-plan li:nth-child(5) { animation-delay: 0.16s; }
.wl-plan li:nth-child(6) { animation-delay: 0.2s; }
.wl-plan li:nth-child(n + 7) { animation-delay: 0.24s; }

.wl-calc__foot {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ================================================================
   ДОКЛАД · «Проверка вслух»
   ================================================================ */
.wl-read .ui-app__body {
  display: block;
}

.wl-read__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: #fafbfc;
}

.wl-read__play {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
  transition: transform 0.2s var(--ease);
}

.wl-read__play:hover {
  transform: scale(1.06);
}

.wl-read__play:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.wl-read__play .wl-i-pause { display: none; }
.wl-read.is-playing .wl-read__play .wl-i-play { display: none; }
.wl-read.is-playing .wl-read__play .wl-i-pause { display: block; }

.wl-read__track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.wl-read__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blue);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform 0.2s linear;
}

.wl-read__time {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wl-read__time span {
  color: var(--muted-2);
  font-weight: 600;
}

.wl-read__text {
  padding: 20px 22px 24px;
  background: #fff;
}

.wl-read__part {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: color 0.3s var(--ease);
}

.wl-read__part.is-on {
  color: var(--blue);
}

.wl-read__text p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.75;
  color: #94a3b8;
}

.wl-read__text p:last-child {
  margin-bottom: 0;
}

.wl-w {
  border-radius: 4px;
  transition: color 0.2s linear, background-color 0.2s linear;
}

.wl-w.is-read {
  color: var(--ink);
}

.wl-w.is-now {
  color: var(--ink);
  background: rgba(59, 130, 246, 0.16);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.16);
}

.wl-pause-mark {
  display: inline-block;
  margin: 0 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}

/* ——— Анимации ——— */
@keyframes wl-text-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes wl-row-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes wl-timer {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes wl-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

/* ——— Раскладка ——— */
@media (min-width: 640px) {
  .wl-feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wl-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wl-limits {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (min-width: 900px) {
  .wl-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
  }

  .wl-card--flip {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
  }

  .wl-card--flip .wl-card__stage {
    order: -1;
  }

  .wl-card__copy {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .wl-card__stage {
    padding: 36px 30px 0;
  }

  .wl-card__stage--center {
    padding-bottom: 36px;
  }

  .wl-calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .wl-calc__controls,
  .wl-calc__result {
    padding: 36px 34px;
  }

  .wl-feats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wl-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wl-steps::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 42px;
    right: 42px;
    height: 2px;
    background: repeating-linear-gradient(90deg, #bfdbfe 0 8px, transparent 8px 14px);
    z-index: 0;
  }

  .wl-step {
    z-index: 1;
  }
}

@media (max-width: 639px) {
  .wl-card,
  .wl-calc {
    border-radius: 22px;
  }

  .wl-card__stage {
    padding: 18px 10px 0;
  }

  .wl-card__stage--center {
    padding-bottom: 18px;
  }

  .wl-src__name {
    white-space: normal;
  }

  .wl-note {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .wl-note__num {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .wl-tab {
    flex: 1 1 auto;
    justify-content: center;
  }

  .wl-bar {
    height: 52px;
  }

  .wl-bar__part {
    padding: 0 7px;
  }

  .wl-refdoc__page,
  .wl-essay,
  .wl-read__text {
    padding: 16px 14px 18px;
  }

  .wl-sheet-wrap {
    max-width: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wl-note.is-swap > *,
  .wl-plan li,
  .is-auto .wl-src.is-active .wl-src__timer,
  .wl-sheet[data-focus="indent"] .wl-sheet__line--first::after {
    animation: none !important;
  }

  .wl-step,
  .wl-frag,
  .wl-role,
  .wl-bar__part,
  .wl-read__fill,
  .wl-w {
    transition: none !important;
  }
}

/* ================================================================
   Единая ширина посадочных
   ================================================================ */
.seo-page .showcase__intro,
.seo-page .pricing__header,
.seo-page .faq__header,
.seo-page .benefits__header {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.seo-page .vkr-pick {
  max-width: none;
}

@media (min-width: 900px) {
  .seo-page .faq__list {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px 20px;
  }
}

/* «Коротко о жанре»: две колонки на всю сетку */
.wl-split {
  display: grid;
  gap: 24px;
}

.wl-split__col {
  min-width: 0;
}

.wl-split .wl-prose,
.wl-split .wl-list,
.wl-split .seo-table-wrap,
.wl-split .seo-note {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.wl-split .wl-prose {
  margin-bottom: 16px;
}

.wl-split .seo-table-wrap {
  margin-bottom: 20px;
}

#osobennosti .wl-split .seo-table-wrap,
#osobennosti .wl-split .seo-note {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 900px) {
  .wl-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 56px;
    align-items: start;
  }
}

/* ================================================================
   РЕФЕРАТ · лист А4 по ГОСТу
   ================================================================ */
.wl-card__stage--desk {
  align-items: center;
  justify-content: center;
  padding: 28px 16px 32px;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(37, 99, 235, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(147, 197, 253, 0.35), transparent 65%),
    linear-gradient(165deg, #eef3fb 0%, #dde7f6 100%);
}

.wl-paper-scene {
  --paper-w: 340px;
  --mm: calc(var(--paper-w) / 210);
  position: relative;
  width: var(--paper-w);
  max-width: 100%;
}

.wl-ruler {
  position: relative;
  height: 20px;
  margin-bottom: 8px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, #64748b 0 1px, transparent 1px calc(var(--mm) * 10)) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, #94a3b8 0 1px, transparent 1px calc(var(--mm) * 5)) left bottom / 100% 5px no-repeat,
    #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.wl-ruler > span:not(.wl-ruler__zone) {
  position: absolute;
  top: 1px;
  left: calc(var(--mm) * var(--x) + 3px);
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  color: #64748b;
}

.wl-ruler__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(37, 99, 235, 0.28);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.wl-ruler__zone--l { left: 0; width: calc(var(--mm) * 30); }
.wl-ruler__zone--r { right: 0; width: calc(var(--mm) * 15); }

.wl-paper-wrap {
  position: relative;
}

.wl-paper-back {
  position: absolute;
  inset: 0;
  transform: translate(10px, 10px) rotate(1.6deg);
  transform-origin: bottom left;
  background: #f8fafc;
  border-radius: 3px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.wl-paper {
  position: relative;
  width: var(--paper-w);
  max-width: 100%;
  height: calc(var(--mm) * 297);
  background: #fff;
  border-radius: 3px;
  box-shadow:
    0 30px 60px rgba(15, 23, 42, 0.18),
    0 6px 16px rgba(15, 23, 42, 0.08);
  font-family: "Times New Roman", Times, serif;
  color: #111827;
  overflow: hidden;
}

.wl-paper-back {
  height: calc(var(--mm) * 297);
}

.wl-paper__text {
  position: absolute;
  top: calc(var(--mm) * 20);
  right: calc(var(--mm) * 15);
  bottom: calc(var(--mm) * 20);
  left: calc(var(--mm) * 30);
  overflow: hidden;
  font-size: calc(var(--mm) * 4.94);
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
  outline: 1.5px dashed transparent;
  outline-offset: 3px;
  transition: outline-color 0.35s var(--ease);
}

.wl-paper__text p {
  margin: 0;
  text-indent: calc(var(--mm) * 12.5);
}

.wl-paper__text .wl-paper__h {
  font-weight: 700;
}

.wl-paper__text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--mm) * 7.41 - 1px), rgba(37, 99, 235, 0.4) calc(var(--mm) * 7.41 - 1px) calc(var(--mm) * 7.41));
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.wl-paper__band {
  position: absolute;
  background: rgba(59, 130, 246, 0.16);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.wl-paper__band--l { top: 0; bottom: 0; left: 0; width: calc(var(--mm) * 30); border-right: 1.5px dashed #3b82f6; }
.wl-paper__band--r { top: 0; bottom: 0; right: 0; width: calc(var(--mm) * 15); border-left: 1.5px dashed #3b82f6; }
.wl-paper__band--t { top: 0; left: calc(var(--mm) * 30); right: calc(var(--mm) * 15); height: calc(var(--mm) * 20); border-bottom: 1.5px dashed #3b82f6; }
.wl-paper__band--b { bottom: 0; left: calc(var(--mm) * 30); right: calc(var(--mm) * 15); height: calc(var(--mm) * 20); border-top: 1.5px dashed #3b82f6; }

.wl-paper__dim {
  position: absolute;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: 2;
}

.wl-paper__dim--l { left: calc(var(--mm) * 15); top: 50%; translate: -50% -50%; }
.wl-paper__dim--r { right: calc(var(--mm) * 7.5); top: 50%; translate: 50% -50%; }
.wl-paper__dim--t { left: 50%; top: calc(var(--mm) * 10); translate: -50% -50%; }
.wl-paper__dim--b { left: 50%; bottom: calc(var(--mm) * 10); translate: -50% 50%; }

.wl-paper__tag {
  position: absolute;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}

.wl-paper__tag--font { right: calc(var(--mm) * 15); top: calc(var(--mm) * 9); }
.wl-paper__tag--num { left: 50%; bottom: calc(var(--mm) * 15); translate: -50% 0; }
.wl-paper__tag--indent { left: calc(var(--mm) * 46); top: calc(var(--mm) * 9); }
.wl-paper__tag--gap { right: calc(var(--mm) * 15); top: calc(var(--mm) * 9); }

.wl-paper__brace {
  position: absolute;
  left: calc(var(--mm) * 24);
  top: calc(var(--mm) * (20 + 7.41 * 3));
  width: 7px;
  height: calc(var(--mm) * 7.41 * 2);
  border: 2px solid #2563eb;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.wl-paper__brace::before {
  content: "1,5";
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 5px;
  translate: 0 -50%;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 800;
}

.wl-paper__mark {
  position: absolute;
  left: calc(var(--mm) * 30);
  width: calc(var(--mm) * 12.5);
  height: calc(var(--mm) * 7.41);
  background: rgba(37, 99, 235, 0.22);
  border: 1.5px solid #2563eb;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.wl-paper__mark--1 { top: calc(var(--mm) * 20); }
.wl-paper__mark--2 { top: calc(var(--mm) * (20 + 7.41)); }

.wl-paper__num {
  position: absolute;
  left: 50%;
  bottom: calc(var(--mm) * 8);
  translate: -50% 0;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: "Times New Roman", Times, serif;
  font-size: calc(var(--mm) * 4.2);
  text-align: center;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.wl-paper[data-focus="margins"] .wl-paper__band,
.wl-paper[data-focus="margins"] .wl-paper__dim {
  opacity: 1;
  transform: none;
}

.wl-paper-scene:has(.wl-paper[data-focus="margins"]) .wl-ruler__zone {
  opacity: 1;
}

.wl-paper[data-focus="font"] .wl-paper__text {
  outline-color: #3b82f6;
}

.wl-paper[data-focus="font"] .wl-paper__tag--font,
.wl-paper[data-focus="spacing"] .wl-paper__tag--gap,
.wl-paper[data-focus="indent"] .wl-paper__tag--indent,
.wl-paper[data-focus="number"] .wl-paper__tag--num {
  opacity: 1;
  transform: none;
}

.wl-paper[data-focus="spacing"] .wl-paper__text::before,
.wl-paper[data-focus="spacing"] .wl-paper__brace,
.wl-paper[data-focus="indent"] .wl-paper__mark {
  opacity: 1;
}

.wl-paper[data-focus="number"] .wl-paper__num {
  background: var(--blue);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), 0 8px 16px rgba(37, 99, 235, 0.35);
}

@media (max-width: 639px) {
  .wl-paper-scene {
    --paper-w: 268px;
  }
}

/* ================================================================
   Шаги-«сцена» (эссе и доклад)
   ================================================================ */
.wl-flow {
  display: grid;
  gap: 20px;
}

.wl-flow__steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wl-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 22px;
  opacity: 0.62;
  overflow: hidden;
  transition:
    opacity 0.4s var(--ease),
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.wl-flow__step:hover {
  opacity: 0.88;
}

.wl-flow__step.is-active {
  opacity: 1;
  background: #fff;
  border-color: var(--line);
  box-shadow:
    0 24px 56px rgba(15, 23, 42, 0.08),
    0 4px 12px rgba(15, 23, 42, 0.03);
}

.wl-flow__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: inherit;
  cursor: pointer;
}

.wl-flow__hit:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.wl-flow__num {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.wl-flow__step.is-done .wl-flow__num {
  background: var(--blue-soft);
  border-color: #bfdbfe;
  color: var(--blue);
}

.wl-flow__step.is-active .wl-flow__num {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.wl-flow__copy h3 {
  margin: 2px 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.wl-flow__copy p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.wl-flow__copy a {
  position: relative;
  z-index: 2;
  color: var(--blue);
  font-weight: 600;
}

.wl-flow__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--blue);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.is-auto .wl-flow__step.is-active .wl-flow__timer {
  opacity: 0.45;
  animation: wl-timer var(--wl-auto, 4600ms) linear both;
}

.wl-flow__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 70% 55% at 75% 12%, rgba(37, 99, 235, 0.14), transparent 58%),
    linear-gradient(165deg, #f0f5fb 0%, #e3ebf8 100%);
  box-shadow:
    0 32px 72px rgba(15, 23, 42, 0.09),
    0 8px 20px rgba(15, 23, 42, 0.03);
  min-width: 0;
}

.wl-flow__stage > .ui-app {
  width: 100%;
  max-width: 560px;
}

@media (min-width: 900px) {
  .wl-flow {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: center;
  }

  .wl-flow__stage {
    padding: 32px 28px;
  }
}

/* ——— Эссе: документ собирается по слоям ——— */
.wl-doc__body {
  position: relative;
  min-height: 400px;
  padding: 16px 18px 18px;
  background: #fff;
  overflow: hidden;
}

.wl-doc__topic {
  padding: 12px 14px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--blue-soft), #fff 90%);
}

.wl-doc__topic > span {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

.wl-doc__topic b {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.wl-doc__topic b::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--blue);
  animation: wl-caret 1s steps(2) infinite;
}

.wl-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.wl-doc__meta i {
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dbeafe;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
}

.wl-doc__plan {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.wl-doc__plan li {
  --c: 37, 99, 235;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--c), 0.22);
  border-left: 4px solid rgb(var(--c));
  border-radius: 12px;
  background: rgba(var(--c), 0.06);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
}

.wl-doc__plan li[data-role="arg1"],
.wl-doc__plan li[data-role="arg2"] { --c: 124, 58, 237; }
.wl-doc__plan li[data-role="outro"] { --c: 234, 88, 12; }

.wl-doc__plan li > i {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: rgb(var(--c));
}

.wl-doc__plan b {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}

.wl-doc__plan small {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--muted);
}

.wl-doc__lines {
  display: grid;
  gap: 5px;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease), margin-top 0.6s var(--ease);
}

.wl-doc__lines i {
  display: block;
  width: var(--w);
  height: 5px;
  border-radius: 999px;
  background: rgba(var(--c), 0.32);
}

.wl-doc__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
}

.wl-doc__file b {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}

.wl-doc__file small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.wl-doc__file span {
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--blue);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.wl-flow[data-stage="2"] .wl-doc__plan li,
.wl-flow[data-stage="3"] .wl-doc__plan li,
.wl-flow[data-stage="4"] .wl-doc__plan li {
  opacity: 1;
  transform: none;
}

.wl-flow[data-stage="2"] .wl-doc__plan li:nth-child(2) { transition-delay: 0.08s; }
.wl-flow[data-stage="2"] .wl-doc__plan li:nth-child(3) { transition-delay: 0.16s; }
.wl-flow[data-stage="2"] .wl-doc__plan li:nth-child(4) { transition-delay: 0.24s; }
.wl-flow[data-stage="2"] .wl-doc__plan li:nth-child(5) { transition-delay: 0.32s; }

.wl-flow[data-stage="3"] .wl-doc__lines,
.wl-flow[data-stage="4"] .wl-doc__lines {
  max-height: 40px;
  margin-top: 8px;
}

.wl-flow[data-stage="4"] .wl-doc__file {
  opacity: 1;
  transform: none;
}

/* ——— Доклад: регламент выступления по шагам ——— */
.wl-talk {
  display: grid;
  min-height: 400px;
  background: #fff;
}

.wl-talk__panel {
  grid-area: 1 / 1;
  min-width: 0;
  padding: 18px 20px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(14px, 0, 0);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.3s;
}

.wl-flow[data-stage="1"] .wl-talk__panel[data-panel="1"],
.wl-flow[data-stage="2"] .wl-talk__panel[data-panel="2"],
.wl-flow[data-stage="3"] .wl-talk__panel[data-panel="3"],
.wl-flow[data-stage="4"] .wl-talk__panel[data-panel="4"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s var(--ease) 0.05s, transform 0.5s var(--ease) 0.05s, visibility 0s linear 0s;
}

.wl-talk__h {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.wl-talk__field {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.wl-talk__field span {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.wl-talk__field b {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.wl-talk__field b::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--blue);
  animation: wl-caret 1s steps(2) infinite;
}

.wl-talk__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.wl-talk__chips i {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.wl-talk__chips i.is-on {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

.wl-talk__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.wl-talk__bar {
  display: flex;
  gap: 4px;
  height: 46px;
  margin: 0 0 14px;
}

.wl-talk__bar div {
  flex: var(--share) 1 0;
  min-width: 0;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  background: var(--bg, #fff);
  color: var(--fg, var(--ink));
}

.wl-talk__bar div:first-child { border-radius: 12px 5px 5px 12px; }
.wl-talk__bar div:last-child { border-radius: 5px 12px 12px 5px; }
.wl-talk__bar b { font-family: var(--font-display); font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-talk__bar em { font-style: normal; font-size: 11px; font-weight: 700; opacity: 0.85; }
.wl-talk__bar .is-intro { --bg: #dbeafe; --fg: #1e40af; }
.wl-talk__bar .is-main { --bg: var(--blue); --fg: #fff; }
.wl-talk__bar .is-outro { --bg: #ffedd5; --fg: #9a3412; }

.wl-talk__parts {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wl-talk__parts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-soft);
  font-size: 13px;
  color: var(--ink-2);
}

.wl-talk__parts b {
  font-family: var(--font-display);
  color: var(--ink);
}

.wl-talk__parts em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.wl-talk__speech {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.75;
  color: #94a3b8;
}

.wl-talk__speech mark {
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.16);
  color: var(--ink);
}

.wl-talk__speech .is-read {
  color: var(--ink);
}

.wl-talk__time {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wl-talk__track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.wl-talk__track i {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: inherit;
  background: var(--blue);
}

.wl-talk__time b {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wl-talk__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
}

.wl-talk__file b {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.wl-talk__file small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}

.wl-talk__file span {
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--blue);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.wl-talk__checks {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.wl-talk__checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.wl-talk__checks li::before {
  content: "✓";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  border: 1px solid #bfdbfe;
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
}

@keyframes wl-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (max-width: 639px) {
  .wl-flow__step {
    padding: 14px;
    gap: 12px;
  }

  .wl-flow__stage {
    padding: 14px 8px;
    border-radius: 22px;
  }

  .wl-doc__body {
    min-height: 380px;
    padding: 12px;
  }

  .wl-talk__panel {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wl-doc__plan li,
  .wl-doc__file,
  .wl-doc__lines,
  .wl-talk__panel,
  .wl-flow__step,
  .wl-paper__band,
  .wl-paper__dim,
  .wl-paper__tag {
    transition: none !important;
  }

  .wl-doc__topic b::after,
  .wl-talk__field b::after,
  .is-auto .wl-flow__step.is-active .wl-flow__timer {
    animation: none !important;
  }
}

.seo-page .seo-block.pricing .pricing__header {
  max-width: 600px;
}

/* ================================================================
   РЕФЕРАТ · пачка листов собирается в файл
   ================================================================ */
.wl-pile-stage {
  position: relative;
  flex-direction: column;
  container-type: inline-size;
  min-height: 470px;
  padding: 56px 16px 28px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 18% 12%, rgba(37, 99, 235, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 92% 92%, rgba(147, 197, 253, 0.35), transparent 65%),
    linear-gradient(165deg, #eef3fb 0%, #dde7f6 100%);
}

.wl-pile-badge {
  position: absolute;
  top: 16px;
  left: 18px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dbeafe;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.wl-pile {
  --w: clamp(120px, calc((100cqw - 40px) / 2.4), 250px);
  --mm: calc(var(--w) / 210);
  --gap: 0.44;
  --spread: 0;
  --tilt: 1.8;
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.414);
  margin-bottom: 20px;
  transform: translateX(calc(var(--spread) * var(--gap) * var(--w) * -0.5));
  transition: transform 0.8s var(--ease);
}

.wl-pg {
  --n: 0;
  position: absolute;
  inset: 0;
  padding: calc(var(--mm) * 14) calc(var(--mm) * 12) calc(var(--mm) * 12) calc(var(--mm) * 20);
  border-radius: 3px;
  background: #fff;
  box-shadow:
    0 22px 44px rgba(15, 23, 42, 0.16),
    0 4px 10px rgba(15, 23, 42, 0.07);
  font-family: "Times New Roman", Times, serif;
  font-size: calc(var(--mm) * 4.94);
  line-height: 1.5;
  color: #111827;
  overflow: hidden;
  opacity: 0;
  transform: translate(calc(var(--i) * var(--gap) * var(--w)), 34px) scale(0.94) rotate(0deg);
  transition:
    transform 0.8s var(--ease),
    opacity 0.5s var(--ease);
}

.wl-pg p {
  margin: 0;
}

.wl-pg__c {
  text-align: center;
}

.wl-pg__cap {
  margin: 0 0 calc(var(--mm) * 6);
  text-align: center;
  font-weight: 700;
  font-size: calc(var(--mm) * 5.4);
}

.wl-pg__row {
  display: flex;
  gap: 4px;
  align-items: baseline;
}

.wl-pg__row span:first-child {
  flex: 0 1 auto;
}

.wl-pg__row i {
  flex: 1;
  min-width: 6px;
  border-bottom: 1px dotted #6b7280;
  transform: translateY(-2px);
}

.wl-pg__indent {
  text-indent: calc(var(--mm) * 12.5);
  text-align: justify;
}

.wl-pg cite {
  padding: 0 1.5px;
  border-radius: 2px;
  background: rgba(37, 99, 235, 0.16);
  font-style: normal;
  color: #1d4ed8;
  font-weight: 700;
}

.wl-pg__num {
  position: absolute;
  left: 50%;
  bottom: calc(var(--mm) * 6);
  translate: -50% 0;
  font-size: calc(var(--mm) * 4);
}

/* веер: появление листов по шагам */
.wl-flow[data-stage="1"] .wl-pg:nth-child(1),
.wl-flow[data-stage="2"] .wl-pg:nth-child(-n + 2),
.wl-flow[data-stage="3"] .wl-pg,
.wl-flow[data-stage="4"] .wl-pg {
  opacity: 1;
  transform:
    translate(calc(var(--i) * var(--gap) * var(--w)), calc(var(--i) * -4px))
    scale(1)
    rotate(calc((var(--i) - 1.5) * var(--tilt) * 1deg));
}

.wl-flow[data-stage="2"] .wl-pile { --spread: 1; }
.wl-flow[data-stage="3"] .wl-pile { --spread: 3; }

/* шаг 4: веер сходится в аккуратную стопку */
.wl-flow[data-stage="4"] .wl-pile {
  --gap: 0.06;
  --spread: 3;
  --tilt: 0;
}

.wl-pile__cites {
  position: absolute;
  top: 6%;
  right: -4%;
  z-index: 3;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.wl-pile__cites li {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}

.wl-flow[data-stage="3"] .wl-pile__cites li {
  opacity: 1;
  transform: none;
}

.wl-flow[data-stage="3"] .wl-pile__cites li:nth-child(2) { transition-delay: 0.15s; }
.wl-flow[data-stage="3"] .wl-pile__cites li:nth-child(3) { transition-delay: 0.3s; }

.wl-pile__stamp {
  position: absolute;
  top: 34%;
  left: 50%;
  z-index: 4;
  padding: 6px 16px;
  border: 3px solid var(--blue);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
  font-size: clamp(16px, 5cqw, 26px);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--blue);
  opacity: 0;
  translate: -50% -50%;
  transform: rotate(-9deg) scale(1.5);
  transition: opacity 0.35s var(--ease) 0.5s, transform 0.5s var(--ease) 0.5s;
  pointer-events: none;
}

.wl-flow[data-stage="4"] .wl-pile__stamp {
  opacity: 1;
  transform: rotate(-9deg) scale(1);
}

.wl-pile-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease) 0.6s, transform 0.5s var(--ease) 0.6s;
}

.wl-pile-file b {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.wl-pile-file small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}

.wl-pile-file span {
  padding: 6px 14px;
  border-radius: 9px;
  background: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}

.wl-flow[data-stage="4"] .wl-pile-file {
  opacity: 1;
  transform: none;
}

@media (max-width: 639px) {
  .wl-pile-stage {
    min-height: 400px;
    padding-top: 52px;
  }

  .wl-flow--pile[data-stage] .wl-pile {
    --gap: 0.3;
    --w: clamp(110px, calc((100cqw - 32px) / 1.95), 200px);
  }

  .wl-flow--pile[data-stage="4"] .wl-pile {
    --gap: 0.06;
  }

  .wl-pile__cites {
    right: -2%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wl-pile,
  .wl-pg,
  .wl-pile__cites li,
  .wl-pile__stamp,
  .wl-pile-file {
    transition: none !important;
  }
}

/* метки источников — рядом над листами, а не поверх текста */
.wl-pile__cites {
  top: -38px;
  right: auto;
  left: calc(var(--w) * var(--gap) * 2 - var(--w) * 0.06);
  display: flex;
  gap: 6px;
}

.wl-pile__cites li {
  padding: 3px 9px;
  font-size: 10.5px;
  transform: translateY(8px);
}

@media (max-width: 639px) {
  .wl-pile__cites {
    top: -34px;
    left: calc(var(--w) * var(--gap) * 2 - var(--w) * 0.2);
  }

  .wl-pile__cites li {
    padding: 3px 7px;
    font-size: 9.5px;
  }
}