/* Страница «Световые мечи» (/lightsabers/). Токены, шапка, меню языков и подвал — из style.css.
   --saber / --saber-core — «ваш кристалл»: цвет, выбранный на первом экране; им подсвечена вся страница.
   Состояния «до появления на экране» и анимации включаются только с JS (.ls-js) и без prefers-reduced-motion.
   3D-сцены (canvas.ls-3d) видны только когда sabers-3d.js запустился (.ls-3d-on), иначе — SVG (.ls-fallback). */
.ls-page {
  --saber: #2f8dff;
  --saber-core: #eaf4ff;
  --ls-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --ls-ease: cubic-bezier(.2, .8, .2, 1);
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--saber) 14%, transparent), transparent 70%),
    var(--bg);
}
.ls-page svg { direction: ltr; }
/* длинные составные слова (нем., фин., венг.) переносятся по слогам, а не рвутся посередине */
.ls-page :is(h2, h3, .ls-rack-n, .ls-toc a, .ls-bstep-h) { -webkit-hyphens: auto; hyphens: auto; }
.ls-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ls-page .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- клинки в SVG: ореол, свечение, сердцевина ---------- */
.lsB { --g: var(--glow, var(--saber)); --c: var(--core, var(--saber-core)); }
.lsB-halo { fill: var(--g); opacity: .6; }
.lsB-glow { fill: var(--g); opacity: .95; }
.lsB-core { fill: var(--c); }
.lsB-dark .lsB-halo { fill: #f4f6ff; opacity: .55; }
.lsB-dark .lsB-glow { fill: #f4f6ff; opacity: .85; }
.lsB-dark .lsB-core { fill: #050505; }
.lsB-rough .lsB-halo { opacity: .8; }
.ls-js .lsB-rough { animation: ls-crackle .18s steps(2, jump-none) infinite; }
@keyframes ls-crackle { 50% { opacity: .78; } }
@keyframes ls-hum { 0%, 100% { opacity: 1; } 40% { opacity: .9; } 70% { opacity: .97; } }

/* ---------- 3D или SVG ---------- */
.ls-3d { display: none; width: 100%; height: 100%; touch-action: pan-y; }
.ls-3d-on .ls-3d { display: block; }
.ls-js.ls-3d-on .ls-fallback { display: none; }

/* ---------- полоса прогресса: клинок вашего цвета ---------- */
.ls-progress { position: fixed; z-index: 40; inset: 0 0 auto 0; height: 3px; pointer-events: none; }
.ls-progress i {
  display: block;
  height: 100%;
  background: var(--saber-core);
  box-shadow: 0 0 6px 1px var(--saber), 0 0 16px 2px var(--saber);
  border-radius: 0 3px 3px 0;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
[dir="rtl"] .ls-progress i { transform-origin: 100% 50%; border-radius: 3px 0 0 3px; }

/* ---------- первый экран ---------- */
.ls-hero { position: relative; min-height: min(100svh, 940px); display: flex; align-items: stretch; overflow: clip; isolation: isolate; }
.ls-hero-stage { position: absolute; inset: 0; z-index: -1; }
.ls-hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 4, 10, .78), rgba(3, 4, 10, .2) 45%, transparent 70%),
    linear-gradient(0deg, var(--bg), transparent 26%);
}
[dir="rtl"] .ls-hero-stage::after { background: linear-gradient(-90deg, rgba(3, 4, 10, .78), rgba(3, 4, 10, .2) 45%, transparent 70%), linear-gradient(0deg, var(--bg), transparent 26%); }
.ls-hero .ls-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 4% 0 30%; }
.ls-hero-svg { width: 100%; max-width: 1100px; transform: rotate(-24deg); overflow: visible; }
.ls-hero-svg .lsB-alt { display: none; }
.ls-hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto;
  gap: 14px;
  padding-top: clamp(40px, 9vh, 110px);
  padding-bottom: 28px;
  pointer-events: none;
}
.ls-hero-in > * { pointer-events: auto; }
.ls-hero-text { max-width: 640px; align-self: start; pointer-events: none; }
.ls-kicker { margin: 0 0 12px; font-family: var(--ls-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--crawl-blue); }
.ls-h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  /* --em — ширина самого длинного слова заголовка в em (считает build.mjs): длинное слово («Lichtschwerter»)
     уменьшает кегль, чтобы не вылезти за экран */
  font-size: min(clamp(36px, 10.5vw, 158px), calc((100vw - 44px) / var(--em, 8)));
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 0 34px rgba(255, 232, 31, .25);
  /* японский и китайский переносятся где угодно: заголовок держим словом целиком («ライトセ / ーバー» — нельзя) */
  word-break: keep-all;
  line-break: strict;
}
/* заголовок из одного слова (тайский, японский, «LIGHTSABERS») не переносим вовсе: кегль и так ограничен шириной экрана */
.ls-h1-one { white-space: nowrap; }
.ls-h1::after {
  content: '';
  display: block;
  width: min(100%, 520px);
  height: 5px;
  margin-top: 18px;
  border-radius: 5px;
  background: var(--saber-core);
  box-shadow: 0 0 8px 2px var(--saber), 0 0 26px 4px var(--saber);
  transform-origin: 0 50%;
}
[dir="rtl"] .ls-h1::after { transform-origin: 100% 50%; }
.ls-js .ls-h1::after { animation: ls-ignite-line 1.1s var(--ls-ease) .5s both; }
@keyframes ls-ignite-line { from { transform: scaleX(0); } }
.ls-lead { margin: 20px 0 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: #cfd6e4; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }

/* пульт: зажечь, кристаллы, звук */
.ls-console {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  justify-self: start;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(8, 11, 20, .62);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.ls-ignite, .ls-sound, .ls-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px 0 12px;
  border: 1px solid color-mix(in srgb, var(--saber) 60%, transparent);
  border-radius: 23px;
  background: color-mix(in srgb, var(--saber) 12%, transparent);
  color: var(--text);
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s, box-shadow .25s, border-color .2s;
}
.ls-ignite:hover, .ls-sound:hover, .ls-fab:hover { background: color-mix(in srgb, var(--saber) 22%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--saber) 40%, transparent); }
.ls-ignite-ico { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--saber-core); box-shadow: 0 0 8px var(--saber); }
.ls-ignite-ico::after { content: ''; position: absolute; left: 50%; top: -5px; width: 2px; height: 12px; margin-left: -1px; border-radius: 2px; background: var(--saber-core); box-shadow: 0 0 6px var(--saber); }
.ls-ignite[aria-pressed="false"] .ls-ignite-ico { border-color: var(--muted); box-shadow: none; }
.ls-ignite[aria-pressed="false"] .ls-ignite-ico::after { background: var(--muted); box-shadow: none; }
.ls-gems { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-gem {
  position: relative;
  width: 30px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
}
.ls-gem i {
  position: absolute;
  inset: 4px 7px;
  clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
  background: linear-gradient(135deg, var(--core) 0%, var(--glow) 45%, color-mix(in srgb, var(--glow) 55%, #000) 100%);
  transition: transform .2s, filter .2s;
}
.ls-gem[data-color="black"] i { background: linear-gradient(135deg, #fff 0%, #222 40%, #000 100%); }
.ls-gem::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.ls-gem:hover i { transform: scale(1.12); filter: brightness(1.2); }
.ls-gem[aria-pressed="true"]::before { border-color: var(--glow); box-shadow: 0 0 14px color-mix(in srgb, var(--glow) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--glow) 35%, transparent); }
.ls-gem[aria-pressed="true"] i { filter: drop-shadow(0 0 6px var(--glow)); }
.ls-sound-ico { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.ls-sound-ico i { width: 3px; height: 30%; border-radius: 2px; background: var(--muted); }
[aria-pressed="true"] .ls-sound-ico i { background: var(--saber-core); box-shadow: 0 0 6px var(--saber); animation: ls-eq .9s ease-in-out infinite alternate; }
[aria-pressed="true"] .ls-sound-ico i:nth-child(2) { animation-delay: -.3s; }
[aria-pressed="true"] .ls-sound-ico i:nth-child(3) { animation-delay: -.6s; }
[aria-pressed="true"] .ls-sound-ico i:nth-child(4) { animation-delay: -.15s; }
@keyframes ls-eq { from { height: 25%; } to { height: 100%; } }
.ls-hint { margin: 0; font-family: var(--ls-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ls-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; }
.ls-facts div { padding: 10px 14px; border-top: 2px solid color-mix(in srgb, var(--saber) 55%, transparent); background: linear-gradient(180deg, rgba(10, 14, 26, .7), rgba(10, 14, 26, .25)); border-radius: 0 0 12px 12px; }
.ls-facts dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ls-facts dd { margin: 3px 0 0; font-weight: 700; font-size: 15px; line-height: 1.3; }

/* ---------- оглавление ---------- */
.ls-toc { margin-top: 26px; }
.ls-toc-h { margin: 0 0 10px; font-family: var(--ls-mono); font-weight: 400; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
/* 12 глав и источники — 13 пунктов: 7 + 6, на узких 2 × 7 и столбик; «Источники» занимают две колонки,
   чтобы ряды всегда были полные */
.ls-toc ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.ls-toc li:last-child { grid-column: span 2; }
.ls-toc a { height: 100%; }
.ls-toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-inline-start: 2px solid var(--line-2);
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.ls-toc a span { font-family: var(--f-display); font-weight: 400; font-size: 13px; color: var(--saber); }
.ls-toc a:hover { color: var(--text); border-color: var(--saber); background: linear-gradient(90deg, color-mix(in srgb, var(--saber) 10%, transparent), transparent); }

/* ---------- главы ---------- */
.ls-chap { position: relative; padding: 96px 0 8px; scroll-margin-top: 0; }
.ls-chap-head { position: relative; margin: 0 0 22px; }
.ls-chap-num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(64px, 10vw, 130px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--saber) 75%, transparent);
  opacity: .55;
}
.ls-chap-head h2 {
  position: relative;
  margin: -0.42em 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--yellow);
  overflow-wrap: break-word;
}
.ls-chap-in > p { margin: 14px 0; font-size: 18px; line-height: 1.65; color: #d3d9e6; }
.ls-chap-in > p.ls-lead-p { font-size: clamp(19px, 2vw, 23px); line-height: 1.55; color: var(--text); }
.ls-ref { line-height: 0; font-size: .68em; margin-inline-start: 1px; }
.ls-ref a { color: var(--saber); text-decoration: none; font-weight: 700; filter: brightness(1.25); }
.ls-ref a:hover { text-decoration: underline; }
.ls-quote { position: relative; margin: 34px 0; padding: 6px 0 6px 28px; }
.ls-quote::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 4px; background: var(--saber-core); box-shadow: 0 0 8px 1px var(--saber), 0 0 22px 3px var(--saber); }
[dir="rtl"] .ls-quote { padding: 6px 28px 6px 0; }
[dir="rtl"] .ls-quote::before { inset: 0 0 0 auto; }
.ls-quote blockquote { margin: 0; }
.ls-quote p { margin: 0; font-family: var(--f-display); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.2; letter-spacing: .01em; color: var(--text); }
.ls-quote figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }
.ls-h3 { margin: 34px 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.ls-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--dim); }
.ls-label { font-family: var(--ls-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.ls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--saber) 50%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--saber) 8%, transparent);
  color: var(--text);
  font-weight: 700;
  font-size: 14.5px;
  transition: background .2s, box-shadow .2s, border-color .2s, opacity .2s;
}
.ls-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--saber) 18%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--saber) 30%, transparent); }
.ls-btn[aria-pressed="true"] { border-color: var(--saber); background: color-mix(in srgb, var(--saber) 22%, transparent); box-shadow: inset 0 0 0 1px var(--saber); }
.ls-btn:disabled { opacity: .35; cursor: default; }
.ls-btn-big { min-height: 48px; padding: 0 22px; font-family: var(--f-display); font-weight: 400; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.ls-btn-red { --saber: #ff3344; }
.ls-btn-white { --saber: #dfe9ff; }
.ls-btn-ghost { border-color: var(--line-2); background: none; color: var(--muted); }

.ls-fig {
  position: relative;
  margin: 30px 0;
  padding: 46px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(13, 18, 33, .9), rgba(6, 8, 15, .9));
}
.ls-fig-tag { position: absolute; top: 15px; inset-inline-start: 22px; font-family: var(--ls-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--saber); filter: brightness(1.3); }
.ls-fig figcaption { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ls-nojs { margin: 0; color: var(--dim); font-size: 14px; }
.ls-js .ls-nojs { display: none; }

/* заголовок главы проявляется, когда до него доходит прокрутка */
.ls-js .ls-chap-head .ls-chap-num { transition: opacity .9s, transform .9s var(--ls-ease); }
.ls-js .ls-chap-head h2 { transition: clip-path .9s var(--ls-ease) .15s; }
.ls-js .ls-chap-head:not(.in) .ls-chap-num { opacity: 0; transform: translateY(18px); }
.ls-js .ls-chap-head:not(.in) h2 { clip-path: inset(0 100% 0 0); }
[dir="rtl"].ls-js .ls-chap-head:not(.in) h2 { clip-path: inset(0 0 0 100%); }
.ls-js .ls-chap-head h2 { clip-path: inset(0 0 0 0); }

/* ---------- 02. Рукоять: прокрутка разбирает её ---------- */
.ls-scrolly { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 40px; }
.ls-sticky { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100svh; max-height: 920px; display: flex; flex-direction: column; justify-content: center; }
.ls-view { position: relative; flex: 1 1 auto; max-height: 82svh; border-radius: 24px; overflow: hidden; background: radial-gradient(60% 50% at 50% 45%, rgba(24, 34, 58, .55), transparent 70%); }
.ls-view .ls-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; }
.ls-view-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 6px 0; }
.ls-drag-hint { font-family: var(--ls-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ls-xray { display: none; }
.ls-3d-on .ls-xray { display: inline-flex; }
.ls-drag-hint { display: none; }
.ls-3d-on .ls-drag-hint { display: inline; }
.ls-steps { grid-column: 1; grid-row: 1; margin: 0; padding: 14vh 0 20vh; list-style: none; }
.ls-step {
  position: relative;
  margin: 0 0 30vh;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(10, 14, 26, .78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: border-color .4s, box-shadow .4s, opacity .4s;
}
.ls-step:last-child { margin-bottom: 0; }
.ls-js .ls-step { opacity: .45; }
.ls-js .ls-step.on { opacity: 1; border-color: color-mix(in srgb, var(--saber) 55%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--saber) 14%, transparent); }
.ls-step-n { font-family: var(--f-display); font-size: 15px; color: var(--saber); filter: brightness(1.3); }
.ls-step h3 { margin: 4px 0 8px; font-family: var(--f-display); font-weight: 400; font-size: 24px; letter-spacing: .03em; text-transform: uppercase; }
.ls-step p { margin: 0; font-size: 16.5px; line-height: 1.6; color: #cdd4e3; }
.ls-tags { position: absolute; inset: 0; pointer-events: none; display: none; }
.ls-3d-on .ls-tags { display: block; }
.ls-tag {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 3px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: rgba(5, 7, 13, .78);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s, border-color .3s;
  will-change: transform;
}
.ls-tag b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--saber); color: #02040a; font-family: var(--f-display); font-weight: 400; font-size: 11px; }
.ls-tag.focus { border-color: var(--saber); box-shadow: 0 0 16px color-mix(in srgb, var(--saber) 45%, transparent); }
/* SVG-схема без WebGL */
.lsA { width: 100%; height: auto; max-height: 100%; overflow: visible; }
.lsA .lsP { transform: translate(calc(var(--x) * var(--dx) * 1px), calc(var(--x) * var(--dy) * 1px)); }
.lsA-axis path { stroke: rgba(255, 255, 255, .08); stroke-dasharray: 4 6; }
.lsA-call path { stroke: rgba(233, 237, 246, .4); stroke-width: 1.2; fill: none; }
.lsA-call circle { fill: #03040a; stroke: var(--saber); stroke-width: 1.6; }
.lsA-call text { fill: var(--text); font-family: var(--f-display); font-size: 13px; text-anchor: middle; }
.lsP-crystal-body { fill: var(--saber); }
.lsP-crystal-glow { fill: var(--saber); opacity: .7; }

/* ---------- 03. Сбор на Илуме ---------- */
.ls-cave { position: relative; margin: 6px 0 0; border-radius: 26px; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; }
.ls-cave-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transform-origin: 50% 70%; }
.ls-js .ls-cave-img { transform: translateY(var(--py, 0)) scale(1.12); }
.ls-cave::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 4, 10, .94) 8%, rgba(3, 4, 10, .55) 46%, transparent 75%); }
.ls-cave-text { position: relative; z-index: 1; padding: 160px 28px 34px; }
.ls-cave-text p { margin: 0; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.6; color: #e3e8f2; text-shadow: 0 1px 14px rgba(0, 0, 0, .9); }
.ls-cave-cap { position: absolute; z-index: 1; top: 14px; inset-inline-end: 16px; max-width: 46%; font-size: 11.5px; line-height: 1.35; color: rgba(233, 237, 246, .6); text-align: end; }
.ls-build-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 30px; align-items: center; }
.ls-build-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.ls-bsteps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ls-bstep {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(10, 14, 26, .5);
  color: var(--muted);
  font-weight: 700;
  font-size: 15.5px;
  text-align: start;
  transition: border-color .2s, color .2s, background .2s;
}
.ls-bstep:hover { color: var(--text); border-color: var(--line-2); }
.ls-bstep[aria-pressed="true"] { color: var(--text); border-color: var(--saber); background: color-mix(in srgb, var(--saber) 10%, transparent); }
.ls-bstep-n { display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--f-display); font-weight: 400; font-size: 12px; }
.ls-bstep[aria-pressed="true"] .ls-bstep-n { border-color: var(--saber); color: var(--saber); filter: brightness(1.3); }
.ls-bstep-p { margin: 6px 4px 8px 50px; font-size: 15px; line-height: 1.55; color: #cdd4e3; }
[dir="rtl"] .ls-bstep-p { margin: 6px 50px 8px 4px; }
.ls-js .ls-bstep-p { display: none; }
.ls-js .ls-bstep[aria-pressed="true"] + .ls-bstep-p { display: block; }
.ls-replay { margin-top: 12px; }
/* сцена сборки: шаг задаёт data-step */
.lsC .lsP { transition: transform 1.15s cubic-bezier(.55, 0, .2, 1) calc(var(--i) * .1s), opacity .7s; }
.lsC .lsP-crystal { transform-origin: 224px 0; }
.lsC-blade .lsB { transform-origin: 300px 0; transform: scaleX(1); transition: transform .5s var(--ls-ease); }
.lsC-aura { opacity: 0; transition: opacity .8s; }
.lsC-ring { fill: none; stroke: #dff3ff; stroke-width: 1.4; opacity: 0; transform-origin: 370px -6px; }
.ls-build-art:not([data-step="5"]) .lsC-blade .lsB { transform: scaleX(0); }
.ls-build-art:is([data-step="1"], [data-step="2"]) .lsP:not(.lsP-crystal) { opacity: 0; }
.ls-build-art:is([data-step="1"], [data-step="2"], [data-step="3"]) .lsP { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
.ls-build-art:is([data-step="1"], [data-step="2"], [data-step="3"]) .lsP-crystal { transform: translate(var(--sx), var(--sy)) scale(3.4); }
.ls-build-art[data-step="1"] .lsP-crystal-body { fill: #e9f6ff; }
.ls-build-art[data-step="1"] .lsP-crystal-glow { fill: #cfe8ff; opacity: .35; }
.ls-build-art[data-step="1"] .lsC-ring { animation: ls-call 2.4s ease-out var(--d) infinite; }
@keyframes ls-call { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
.ls-build-art[data-step="3"] .lsP { animation: ls-bob 3s ease-in-out calc(var(--i) * -.4s) infinite; }
@keyframes ls-bob { 50% { translate: 0 -5px; } }
.ls-build-art[data-step="4"] .lsC-aura { opacity: 1; }
.ls-build-art:is([data-step="3"], [data-step="4"]) .lsP { filter: drop-shadow(0 0 5px rgba(127, 243, 255, .55)); }
/* «На экране»: два кадра и абзац рядом — строка занята целиком, без пустого места сбоку */
.ls-onscreen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.ls-onscreen > p { margin: 0; font-size: 18px; line-height: 1.65; color: #d3d9e6; }
.ls-stills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ls-stills li { display: grid; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.ls-still { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2), 0 10px 28px rgba(0, 0, 0, .5); }
.ls-still img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 169; object-fit: cover; transition: transform .4s; }
.ls-still:hover img { transform: scale(1.05); }

/* ---------- 04. Кайбер ---------- */
.ls-lab-grid { --k: #dfeaff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px 32px; align-items: center; }
.ls-lab-grid[data-state="jedi"] { --k: var(--lab-color, #2f8dff); }
.ls-lab-grid:is([data-state="bled"], [data-state="cracked"]) { --k: #ff1f2d; }
.ls-lab-grid[data-state="healed"] { --k: #f2f6ff; }
.ls-lab-view { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--k) 16%, transparent), transparent 66%); transition: background .8s; }
.ls-lab-view .ls-3d { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 71%); mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 71%); }
.ls-lab-view .ls-fallback svg { display: block; width: 100%; height: auto; }
.ls-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ls-chain li { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); }
.ls-chain li + li::before { content: '→'; color: var(--line-2); }
.ls-chain li[data-state="cracked"]::before { content: '↘'; }
.ls-chain span { padding: 4px 9px; border: 1px solid var(--line); border-radius: 20px; transition: all .4s; }
.ls-lab-grid[data-state="raw"] .ls-chain [data-state="raw"] span,
.ls-lab-grid[data-state="jedi"] .ls-chain [data-state="jedi"] span,
.ls-lab-grid[data-state="bled"] .ls-chain [data-state="bled"] span,
.ls-lab-grid[data-state="healed"] .ls-chain [data-state="healed"] span,
.ls-lab-grid[data-state="cracked"] .ls-chain [data-state="cracked"] span { color: #02040a; background: var(--k); border-color: var(--k); box-shadow: 0 0 16px color-mix(in srgb, var(--k) 60%, transparent); }
.ls-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ls-attune { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); border-radius: 12px; }
.ls-dots { display: inline-flex; gap: 6px; }
.ls-dot { width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--core), var(--glow) 55%); box-shadow: 0 0 8px var(--glow); }
.ls-dot[aria-pressed="true"] { border-color: #fff; }
.ls-states { margin: 0; padding: 0; list-style: none; }
.ls-state { padding: 14px 16px; border-inline-start: 3px solid var(--k); background: linear-gradient(90deg, color-mix(in srgb, var(--k) 10%, transparent), transparent); border-radius: 0 12px 12px 0; }
.ls-state + .ls-state { margin-top: 8px; }
.ls-state h3 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 400; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; }
.ls-state p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #cdd4e3; }
.ls-js .ls-state { display: none; }
.ls-lab-grid[data-state="raw"] .ls-state[data-state="raw"],
.ls-lab-grid[data-state="jedi"] .ls-state[data-state="jedi"],
.ls-lab-grid[data-state="bled"] .ls-state[data-state="bled"],
.ls-lab-grid[data-state="healed"] .ls-state[data-state="healed"],
.ls-lab-grid[data-state="cracked"] .ls-state[data-state="cracked"] { display: block; animation: ls-in .5s var(--ls-ease); }
@keyframes ls-in { from { opacity: 0; transform: translateY(8px); } }
.ls-preview { position: relative; margin-top: 16px; min-height: 44px; }
.lsK-saber { display: block; width: 100%; height: auto; overflow: visible; }
.ls-preview .lsB { --glow: var(--k); --core: #fff; }
.lsK-blade .lsB, .lsK-blade-rough .lsB { transform-origin: 300px 0; transition: transform .45s var(--ls-ease); }
.lsK-blade-rough { display: none; }
.ls-lab-grid[data-state="cracked"] .lsK-blade { display: none; }
.ls-lab-grid[data-state="cracked"] .lsK-blade-rough { display: inline; }
.ls-lab-grid[data-state="raw"] .lsK-blade .lsB { transform: scaleX(0); }
.ls-preview-none { position: absolute; inset-inline-start: 46%; top: 50%; transform: translateY(-50%); font-family: var(--ls-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); opacity: 0; transition: opacity .4s; }
.ls-lab-grid[data-state="raw"] .ls-preview-none { opacity: 1; }
/* SVG-кристалл без WebGL */
.lsK-aura { fill: var(--k); opacity: .22; transition: fill .8s; }
.lsK-f { fill: var(--k); transition: fill .8s; }
.lsK-f1 { opacity: .95; }
.lsK-f2 { opacity: .7; }
.lsK-f3 { opacity: .5; }
.lsK-edge { fill: none; stroke: #fff; stroke-width: 1.6; opacity: .7; stroke-linejoin: round; }
.lsK-shine { stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .55; }
.lsK-veins path { fill: none; stroke: #5a0008; stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .8s; }
.lsK-crack { fill: none; stroke: #fff6e8; stroke-width: 3; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 4px #ffb070); }
.lsK-stars path { fill: #fff; opacity: 0; }
.ls-lab-grid:is([data-state="bled"], [data-state="cracked"]) .lsK-veins path { opacity: .85; }
.ls-lab-grid[data-state="cracked"] .lsK-crack { opacity: 1; }
.ls-lab-grid[data-state="healed"] .lsK-stars path { opacity: 1; }
.ls-js .ls-lab-grid[data-state="healed"] .lsK-stars path { animation: ls-twinkle 1.6s ease-in-out infinite alternate; }
@keyframes ls-twinkle { from { opacity: .2; } }

/* ---------- 05. Цвета: стойка ---------- */
/* 9 мечей — сетка 3 × 3 (на узких 2 и 1 колонка): меч слева, текст справа, без полупустых рядов */
.ls-rack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0 8px; padding: 0; list-style: none; }
.ls-rack-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 16px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: rgba(8, 11, 20, .55); }
.ls-rack-btn { grid-row: 1 / 3; }
.ls-rack-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 20, 36, .9), rgba(5, 7, 12, .95));
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.ls-rack-btn::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 45%, color-mix(in srgb, var(--glow, #fff) 22%, transparent), transparent 70%); opacity: .8; transition: opacity .3s; }
.ls-rack-btn:hover { border-color: color-mix(in srgb, var(--glow, #fff) 55%, transparent); }
.ls-rack-btn[aria-pressed="true"] { border-color: var(--glow, #fff); box-shadow: 0 0 28px color-mix(in srgb, var(--glow, #fff) 35%, transparent), inset 0 0 0 1px var(--glow, #fff); }
.lsCol-svg { position: relative; display: block; width: 70px; height: auto; overflow: visible; }
.lsCol-b .lsB { transform-origin: 50% 206px; transform-box: view-box; transition: transform .45s var(--ls-ease) calc(var(--i, 0) * .07s); }
.ls-js .ls-rack:not(.in) .lsCol-b .lsB { transform: scaleY(0); }
.ls-js .ls-rack.in .ls-rack-btn:hover .lsB-halo { animation: ls-hum .35s steps(3) infinite; }
.lsc-blue { --glow: #2f8dff; --core: #eaf4ff; }
.lsc-green { --glow: #2fff5a; --core: #effff1; }
.lsc-purple { --glow: #b04bff; --core: #f7eeff; }
.lsc-yellow { --glow: #ffcc1f; --core: #fffbe8; }
.lsc-red { --glow: #ff1f2d; --core: #fff0f0; }
.lsc-white { --glow: #cfe3ff; --core: #ffffff; }
.lsc-orange { --glow: #ff5a14; --core: #fff3ea; }
.lsc-black { --glow: #f4f4f4; --core: #050505; }
.lsc-cyan { --glow: #2ff0ff; --core: #eefeff; }
.lsc-indigo { --glow: #5a4bff; --core: #f0eeff; }
.lsc-magenta { --glow: #ff2fd0; --core: #ffeefb; }
.lsc-lime { --glow: #c6ff2f; --core: #fbffe9; }
.ls-rack-n { position: relative; margin-top: 8px; font-family: var(--f-display); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.ls-rack-who { margin: 6px 0 4px; font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--text); }
.ls-rack-note { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* ---------- 06. Формы клинков ---------- */
.ls-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.ls-var {
  padding: 8px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 18, 33, .85), rgba(6, 8, 15, .9));
  outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.ls-var:hover, .ls-var:focus-visible, .ls-var.on { border-color: color-mix(in srgb, var(--glow) 55%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--glow) 18%, transparent); }
.lsV-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ls-var h3 { margin: 2px 0 2px; font-family: var(--f-display); font-weight: 400; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; }
.ls-var-who { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--saber); filter: brightness(1.3); }
.ls-var-who a { color: inherit; text-decoration: none; }
.ls-var-who a:hover { text-decoration: underline; }
.ls-var p:last-child { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.lsV-b { transform-box: fill-box; transform-origin: 0% 50%; }
.lsV-b2 { transform-origin: 100% 50%; }
.lsV-q .lsB { transform-box: fill-box; transform-origin: 50% 100%; }
.lsV-q .lsB + .lsB { transform-origin: 50% 0%; }
.ls-js .ls-var:is(:hover, :focus-visible, .on) .lsV-b { animation: ls-pop .42s var(--ls-ease); }
@keyframes ls-pop { from { transform: scaleX(0); } }
.lsV-spin { transform-box: fill-box; transform-origin: 50% 50%; }
.ls-js .ls-var:is(:hover, :focus-visible, .on) .lsV-spin { animation: ls-spin .9s linear infinite; }
.ls-js .ls-var:is(:hover, :focus-visible, .on) .lsV-spin .lsV-b { animation: none; }
@keyframes ls-spin { to { transform: rotate(360deg); } }
.lsW-halo { fill: none; stroke: var(--glow); stroke-width: 14; opacity: .6; stroke-linecap: round; }
.lsW-glow { fill: none; stroke: var(--glow); stroke-width: 6; stroke-linecap: round; }
.lsW-core { fill: none; stroke: var(--core); stroke-width: 2.4; stroke-linecap: round; }
.ls-js .ls-var:is(:hover, :focus-visible, .on) .lsV-whip { animation: none; }
.ls-js .ls-var:is(:hover, :focus-visible, .on) .lsV-whip path { animation: ls-whip 1.1s ease-in-out infinite alternate; }
@keyframes ls-whip {
  from { d: path('M104 80C150 40 190 120 240 80S330 40 386 92'); }
  to { d: path('M104 80C150 116 200 44 250 84S338 118 380 60'); }
}
.lsV-l, .lsV-r { transition: transform .5s var(--ls-ease); }
.ls-var:is(:hover, :focus-visible, .on) .lsV-l { transform: translate(-16px, 10px) rotate(-6deg); }
.ls-var:is(:hover, :focus-visible, .on) .lsV-r { transform: translate(16px, -10px) rotate(-6deg); }
.lsV-l, .lsV-r { transform-box: fill-box; transform-origin: 50% 50%; }
.lsV-dim { opacity: .55; }
.lsV-bolt { fill: #ff4a3a; opacity: 0; filter: drop-shadow(0 0 4px #ff4a3a); }
.ls-js .ls-var:is(:hover, :focus-visible, .on) .lsV-bolt { animation: ls-bolt .7s linear .2s infinite; }
@keyframes ls-bolt { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(250px, 0); } }

/* ---------- 07. Тренировка ---------- */
.ls-game { position: relative; margin: 26px 0 10px; border: 1px solid color-mix(in srgb, var(--saber) 30%, var(--line)); border-radius: 22px; overflow: hidden; background: #02030a; aspect-ratio: 16 / 9; max-height: 80svh; touch-action: none; user-select: none; }
.ls-game canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.ls-game-hud { position: absolute; inset: 12px 16px auto; display: flex; gap: 18px; align-items: center; font-family: var(--ls-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.ls-game-hud b { font-family: var(--f-display); font-weight: 400; font-size: 20px; color: var(--text); }
.ls-lives { margin-inline-start: auto; display: inline-flex; gap: 6px; }
.ls-lives i { width: 12px; height: 12px; border-radius: 50%; background: var(--saber); box-shadow: 0 0 8px var(--saber); }
.ls-lives i.off { background: #2a2f38; box-shadow: none; }
.ls-game-menu {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(60% 70% at 50% 50%, rgba(3, 4, 10, .82), rgba(3, 4, 10, .94));
}
.ls-game-menu[hidden] { display: none; }
.ls-game-menu h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 4vw, 44px); letter-spacing: .04em; text-transform: uppercase; color: var(--yellow); }
.ls-game-menu p { max-width: 560px; margin: 0; font-size: 16px; line-height: 1.5; color: #cdd4e3; }
.ls-game-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 8px; }
.ls-game-help { font-size: 13.5px !important; color: var(--dim) !important; }
.ls-game .ls-nojs { position: absolute; inset: auto 0 16px; text-align: center; }
.ls-js .ls-game .ls-nojs { display: none; }
.ls-game:not(.ready) .ls-game-menu { display: none; }
.ls-switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); cursor: pointer; }
.ls-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ls-switch-t { position: relative; width: 44px; height: 24px; border-radius: 12px; background: #1d222c; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s; }
.ls-switch-t::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.ls-switch input:checked + .ls-switch-t { background: color-mix(in srgb, var(--saber) 40%, #1d222c); }
.ls-switch input:checked + .ls-switch-t::after { transform: translateX(20px); background: var(--saber-core); box-shadow: 0 0 8px var(--saber); }
.ls-switch input:focus-visible + .ls-switch-t { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ---------- 08. Что не режет меч ---------- */
.ls-mats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lsT { display: block; width: 100%; height: auto; max-height: 360px; overflow: hidden; border-radius: 14px; background: radial-gradient(60% 80% at 60% 50%, rgba(30, 38, 60, .5), transparent 70%); }
.lsT-target { display: none; }
.ls-cut-view[data-target="door"] .lsT-door, .ls-cut-view[data-target="beskar"] .lsT-beskar, .ls-cut-view[data-target="cortosis"] .lsT-cortosis,
.ls-cut-view[data-target="saber"] .lsT-saber, .ls-cut-view[data-target="bolt"] .lsT-bolt { display: inline; }
.lsT-red { --glow: #ff1f2d; --core: #fff0f0; }
.lsT-shot { fill: #ff4a3a; filter: drop-shadow(0 0 5px #ff2a1a); }
.lsT-me { transform-origin: 100px 120px; transform: rotate(0deg); }
.lsT-melt { opacity: .9; transform-box: fill-box; transform-origin: center; }
.lsT-flash { opacity: 0; transform-box: fill-box; transform-origin: center; }
.lsT-sparks path { stroke: #ffd27a; stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.lsT-fx { transform: translate(0, 0); }
.ls-cut-view[data-target="saber"] .lsT-fx { transform: translate(-52px, 0); }
.ls-cut-view[data-target="bolt"] .lsT-fx { transform: translate(-260px, -80px); }
.lsT-enemy { transform: translate(0, 0); }
.lsT-shot { transform: translate(-439px, -80px); }
.ls-cut-view[data-target="bolt"] .lsT-me { transform: rotate(-75deg); }
.ls-js .ls-cut-view .lsT-melt { opacity: 0; }
.ls-js .ls-cut-view[data-target="door"].run .lsT-me { animation: ls-strike 2.6s var(--ls-ease) forwards; }
.ls-js .ls-cut-view[data-target="door"].run .lsT-melt { animation: ls-melt 2.6s ease-in forwards; }
.ls-js .ls-cut-view:is([data-target="beskar"], [data-target="cortosis"]).run .lsT-me { animation: ls-strike 2.2s var(--ls-ease) forwards; }
.ls-js .ls-cut-view:is([data-target="beskar"], [data-target="saber"]).run .lsT-sparks path { animation: ls-spark .5s ease-out .42s 3; }
.ls-js .ls-cut-view:is([data-target="beskar"], [data-target="saber"]).run .lsT-flash { animation: ls-flash .5s ease-out .42s 3; }
.ls-js .ls-cut-view[data-target="cortosis"].run .lsT-me .lsB { animation: ls-short 2.2s linear forwards; transform-box: fill-box; transform-origin: 0 50%; }
.ls-js .ls-cut-view[data-target="cortosis"].run .lsT-flash { animation: ls-flash .4s ease-out .42s 1; }
.ls-js .ls-cut-view[data-target="saber"].run .lsT-me { animation: ls-strike 2.2s var(--ls-ease) forwards; }
.ls-js .ls-cut-view[data-target="saber"].run .lsT-enemy { animation: ls-enemy 2.2s var(--ls-ease) forwards; }
.ls-js .ls-cut-view[data-target="bolt"].run .lsT-shot { animation: ls-shot 1.4s linear 2 forwards; }
.ls-js .ls-cut-view[data-target="bolt"].run .lsT-flash { animation: ls-flash .3s ease-out .55s 2; }
@keyframes ls-strike { 0% { transform: rotate(-38deg); } 22% { transform: rotate(0deg); } 30% { transform: rotate(-1.5deg); } 100% { transform: rotate(0deg); } }
@keyframes ls-melt { 0%, 18% { opacity: 0; transform: scale(.2); } 40% { opacity: .9; } 100% { opacity: 1; transform: scale(1.3); } }
@keyframes ls-spark { 0% { opacity: 1; stroke-dasharray: 6 40; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dasharray: 6 40; stroke-dashoffset: -34; } }
@keyframes ls-flash { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes ls-short { 0%, 20% { transform: scaleX(1); opacity: 1; } 22%, 26% { opacity: .3; } 24%, 28% { opacity: 1; } 34% { transform: scaleX(0); } 70% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
@keyframes ls-enemy { 0% { transform: translate(90px, -110px); } 22% { transform: translate(0, 0); } 30% { transform: translate(5px, -4px); } 100% { transform: translate(0, 0); } }
@keyframes ls-shot { 0% { transform: translate(0, -80px); } 55% { transform: translate(-439px, -80px); } 100% { transform: translate(60px, -230px); } }
.ls-results { margin: 14px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.55; color: #d3d9e6; }
.ls-results li + li { margin-top: 6px; }
.ls-js .ls-results li { display: none; }
.ls-js .ls-results li.on { display: block; animation: ls-in .4s var(--ls-ease); }

/* ---------- 09. Как снимали ---------- */
.ls-plate { margin: 28px 0; }
.ls-plate img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.ls-plate figcaption { margin-top: 10px; font-size: 13.5px; color: var(--dim); }
.lsR { display: block; width: 100%; height: auto; border-radius: 12px; }
.lsR-holes rect { fill: #1b1915; }
.lsR-frame { fill: #14100c; stroke: #2c261d; }
.lsR-raw, .lsR-glow { transition: opacity .4s; }
.lsR-glow .lsB { --glow: #f5f2ea; --core: #fff; }
.ls-roto-view[data-layers~="color"] .lsR-glow .lsB { --glow: #2f8dff; --core: #eaf4ff; }
.ls-roto-view:not([data-layers~="raw"]) .lsR-raw { opacity: 0; }
.ls-roto-view:not([data-layers~="glow"]) .lsR-glow { opacity: 0; }
.ls-js .ls-roto-view[data-layers~="flicker"][data-layers~="glow"] .lsR-glow { animation: ls-shin .5s steps(1) infinite; }
@keyframes ls-shin { 0% { opacity: .92; } 34% { opacity: 1; filter: brightness(1.6); } 40% { opacity: .9; filter: none; } 70% { opacity: .96; } }
.lsR-grain { fill: url(#lsg-door); opacity: 0; pointer-events: none; }
.ls-layers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- 10. Звук ---------- */
.ls-slab-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.ls-slab-layers { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-slab-pad { position: relative; border-radius: 16px; overflow: hidden; background: #03050c; box-shadow: inset 0 0 0 1px var(--line); touch-action: none; cursor: grab; }
.ls-slab-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 260; }
.ls-pad-hint { position: absolute; inset: auto 0 10px; text-align: center; font-family: var(--ls-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); pointer-events: none; }

/* ---------- 11. Пламя ---------- */
.ls-flame-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.ls-flame-view { border-radius: 16px; overflow: hidden; background: #020308; }
.ls-flame-view canvas { display: block; width: 100%; height: auto; aspect-ratio: 640 / 300; }
.ls-flame-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ls-flame-btn::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 8px var(--fc); }

/* ---------- 12. Вопросы ---------- */
.ls-faq { display: grid; gap: 8px; margin-top: 10px; }
.ls-faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color .2s; }
.ls-faq details[open] { border-color: color-mix(in srgb, var(--saber) 45%, transparent); }
.ls-faq summary { position: relative; padding: 14px 44px 14px 18px; font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; }
[dir="rtl"] .ls-faq summary { padding: 14px 18px 14px 44px; }
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after { content: '+'; position: absolute; inset-inline-end: 18px; top: 50%; transform: translateY(-50%); font-family: var(--f-display); font-size: 20px; color: var(--saber); transition: transform .2s; }
.ls-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ls-faq p { margin: 0; padding: 0 18px 16px; font-size: 16px; line-height: 1.6; color: #cdd4e3; }

/* ---------- источники и призыв ---------- */
.ls-sources { padding-top: 80px; }
.ls-sources h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ls-refs { margin: 0; padding-inline-start: 26px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ls-refs a { color: var(--crawl-blue); text-decoration: none; }
.ls-refs a:hover { text-decoration: underline; }
.ls-refs li:target { color: var(--text); }
.ls-cta { padding-top: 40px; }
.ls-cta-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding: 26px 28px;
  border: 1px solid color-mix(in srgb, var(--saber) 40%, transparent);
  border-radius: 22px;
  background: radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--saber) 14%, transparent), transparent 60%), var(--panel);
}
.ls-cta-in h2 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 3vw, 30px); letter-spacing: .03em; text-transform: uppercase; color: var(--yellow); }
.ls-cta-in p { margin: 0; color: var(--muted); }
.ls-cta-btn { padding: 12px 20px; border: 1px solid var(--saber); border-radius: 12px; background: color-mix(in srgb, var(--saber) 14%, transparent); color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ls-cta-btn:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--saber) 40%, transparent); }

/* плавающий звук и всплывашка */
.ls-fab { position: fixed; z-index: 35; inset: auto 16px 16px auto; height: 42px; font-size: 12.5px; background: rgba(8, 11, 20, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[dir="rtl"] .ls-fab { inset: auto auto 16px 16px; }
.ls-toast { position: fixed; z-index: 36; left: 50%; bottom: 22px; padding: 10px 18px; border: 1px solid var(--saber); border-radius: 14px; background: rgba(8, 11, 20, .92); color: var(--text); font-weight: 700; box-shadow: 0 0 26px color-mix(in srgb, var(--saber) 35%, transparent); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: transform .3s var(--ls-ease), opacity .3s; }
.ls-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- узкие экраны ---------- */
@media (max-width: 980px) {
  .ls-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-scrolly { grid-template-columns: minmax(0, 1fr); }
  .ls-sticky { grid-column: 1; height: 62svh; top: 0; z-index: 1; padding-top: 8px; }
  .ls-view { max-height: none; background: radial-gradient(60% 60% at 50% 50%, rgba(24, 34, 58, .7), #03040a 80%); }
  .ls-steps { grid-column: 1; grid-row: 2; position: relative; z-index: 2; padding: 0 0 20svh; }
  .ls-step { margin: 0 0 56svh; }
  .ls-js .ls-step { opacity: .7; }
  .ls-build-grid, .ls-lab-grid, .ls-flame-grid, .ls-onscreen { grid-template-columns: minmax(0, 1fr); }
  .ls-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ls-hero { min-height: 100svh; }
  .ls-h1 { font-size: min(clamp(34px, 11.2vw, 60px), calc((100vw - 40px) / var(--em, 8))); }
  /* место для меча между абзацем и пультом: зону измеряет sabers.js */
  .ls-hero-text { margin-bottom: max(220px, 30svh); }
  .ls-fab { width: 42px; padding: 0; justify-content: center; }
  .ls-fab-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ls-hero-stage::after { background: linear-gradient(180deg, rgba(3, 4, 10, .7), rgba(3, 4, 10, .1) 40%, rgba(3, 4, 10, .25) 62%, var(--bg) 96%); }
  .ls-hero .ls-fallback { padding: 30% 4% 0; }
  .ls-console { justify-self: stretch; }
  .ls-gems { order: 3; width: 100%; justify-content: space-between; }
  .ls-chap { padding-top: 70px; }
  .ls-chap-in > p { font-size: 17px; }
  .ls-fig { padding: 42px 12px 14px; }
  .ls-cave { min-height: 360px; }
  .ls-cave-text { padding: 140px 18px 22px; }
  .ls-cave-cap { max-width: 70%; }
  .ls-rack { grid-template-columns: minmax(0, 1fr); }
  .ls-toc ol { grid-template-columns: minmax(0, 1fr); }
  .ls-toc li:last-child { grid-column: auto; }
  .ls-rack-item { grid-template-columns: 92px minmax(0, 1fr); }
  .lsCol-svg { width: 56px; }
  .ls-game { aspect-ratio: 3 / 4; }
  .ls-game-menu p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-page *, .ls-page *::before, .ls-page *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ---------- без JavaScript: прячем пульты, которые ничего не сделают ---------- */
html:not(.ls-js) :is(.ls-console, .ls-hint, .ls-slab-ui, .ls-slab-pad, .ls-layers, .ls-mats, .ls-flame-grid, .ls-game canvas, .ls-game-hud, .ls-replay) { display: none; }
html:not(.ls-js) .ls-game { aspect-ratio: auto; padding: 22px; }
html:not(.ls-js) .ls-game .ls-nojs { position: static; }