/* Стили страницы манифеста. Каркас, шапка и фон - в общем style.css */
:root{
    --bg:#000;
    --ink:#fafafa;
    --soft:#dcdcdc;
    --dim:#8a8a8a;
    --line:rgba(255,255,255,.08);
    --accent:#ff2bd6;
    --cyan:#00ffd1;
    --laser-c:#00ffd1;
    --laser-m:#ff2bd6;
    --laser-u:#b026ff;
    --maxw:1200px;
    --pad: clamp(20px, 4vw, 56px);
  }
*{box-sizing:border-box}
/* ── СЦЕНА ───────────────────────────────────── */
  .stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
@keyframes drift{
    0%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(-3%, 2%, 0) scale(1.06)}
    100%{transform:translate3d(2%,-2%,0) scale(1.03)}
  }
@keyframes sweep1{0%{transform:rotate(-38deg)}100%{transform:rotate(28deg)}}
@keyframes sweep2{0%{transform:rotate(42deg)}100%{transform:rotate(-22deg)}}
@keyframes sweep3{0%{transform:rotate(-12deg)}100%{transform:rotate(46deg)}}
@keyframes sweep4{0%{transform:rotate(60deg)}100%{transform:rotate(-60deg)}}
@keyframes sweep5{0%{transform:rotate(-55deg)}100%{transform:rotate(15deg)}}
@keyframes sweep6{0%{transform:rotate(20deg)}100%{transform:rotate(-50deg)}}
@keyframes flash{
    0%,98%{opacity:0}
    98.4%{opacity:.18}98.8%{opacity:0}
    99.2%{opacity:.22}99.6%{opacity:0}
  }
/* ── КАРКАС ──────────────────────────────────── */
  .wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
.eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--dim);
  }
.eyebrow b{color:var(--accent);font-weight:500}
.goal{
    max-width:760px;
    font-size: clamp(15px, 1.8vw, 20px);
    font-weight:300;line-height:1.5;color:var(--soft);
  }
.goal::before{
    content:"⟶ ЦЕЛЬ";
    display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--accent);margin-bottom:10px;
  }
/* ── РЕФРЕН ────────────────────────────────── */
  .refrain{
    position:relative;z-index:2;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    overflow:hidden;padding:14px 0;
    background:rgba(255,255,255,.015);
  }
.refrain .run{
    display:flex;gap:0;white-space:nowrap;width:max-content;
    animation:run 34s linear infinite;
  }
.refrain span{
    font-family:'Unbounded',sans-serif;font-weight:800;text-transform:uppercase;
    font-size:clamp(15px,2.4vw,26px);letter-spacing:.04em;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);
    padding-right:34px;
  }
.refrain span:nth-child(3n+2){-webkit-text-stroke-color:var(--accent)}
.refrain span:nth-child(3n+3){-webkit-text-stroke-color:var(--cyan)}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ── СЕКЦИИ ──────────────────────────────── */
  section.chapter{
    padding:72px 0;
    border-top:1px solid var(--line);
    position:relative;
  }
.chapter-grid{
    display:grid;
    grid-template-columns: minmax(80px, 140px) 1fr;
    gap: clamp(24px, 5vw, 80px);
    align-items:start;
  }
@media (max-width:760px){.chapter-grid{grid-template-columns:1fr;gap:24px}}
.num{
    font-family:'Unbounded',sans-serif;font-weight:800;
    font-size:clamp(38px,5vw,62px);line-height:1;
    color:transparent;-webkit-text-stroke:1.5px var(--accent);
    letter-spacing:-.04em;
    position:sticky;top:90px;
  }
@media (max-width:760px){.num{position:static}}
.chapter h2{
    font-family:'Unbounded',sans-serif;font-weight:800;
    font-size:clamp(22px,3vw,38px);line-height:1.06;
    letter-spacing:-.025em;
    margin:0 0 22px;text-transform:uppercase;
  }
.chapter .tag{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.25em;text-transform:uppercase;
    color:var(--accent);margin-bottom:28px;
  }
.chapter p.intro{margin:0 0 26px;color:var(--soft);max-width:68ch}
.items{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.item{
    background:#050505;
    padding:22px 24px;
    display:grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap:24px;align-items:start;
    transition:background .2s ease;
  }
.item:hover{background:#0a0a0a}
.item .k{
    font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:500;letter-spacing:.1em;
    line-height:1.4;color:var(--accent);padding-top:2px;
    word-break:break-word;
  }
.item .v{color:var(--soft)}
.item .v b{color:#fff;font-weight:600}
.item .v em{font-style:normal;color:#fff;font-weight:500}
.item .v ul{margin:8px 0 0;padding:0;list-style:none}
.item .v ul li{position:relative;padding-left:18px;margin-top:6px}
.item .v ul li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--accent)}
.callout{
    margin-top:28px;padding:22px 26px;
    border:1px solid rgba(255,43,214,.35);
    background:linear-gradient(135deg, rgba(255,43,214,.06), rgba(255,43,214,.02));
    font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;letter-spacing:.02em;
    color:#fff;
  }
.callout::before{content:"// ";color:var(--accent)}
.callout.cyan{border-color:rgba(0,255,209,.35);background:linear-gradient(135deg, rgba(0,255,209,.06), rgba(0,255,209,.02))}
.callout.cyan::before{color:var(--cyan)}
/* ── МИКШЕР: ДВА РЕЖИМА ────────────────────── */
  .mixer{margin-top:10px}
.mixer input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.deck{
    border:1px solid var(--line);
    background:linear-gradient(180deg,#080808,#030303);
    padding:clamp(18px,3vw,30px);
  }
.fader{
    display:grid;grid-template-columns:1fr minmax(90px,180px) 1fr;
    align-items:center;gap:clamp(10px,2vw,22px);
  }
.ch{
    cursor:pointer;display:block;padding:14px 16px;border:1px solid var(--line);
    background:#000;transition:border-color .25s ease, background .25s ease;
  }
.ch .cn{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.ch .cl{font-family:'Unbounded',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(15px,2.4vw,26px);line-height:1.05;margin-top:6px;color:#4a4a4a;transition:color .25s ease}
.ch.b{text-align:right}
.ch:hover{border-color:rgba(255,255,255,.2)}
.track{position:relative;height:46px;border:1px solid var(--line);background:#000}
.track::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 9px)}
.knob{
    position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 7px);
    background:linear-gradient(180deg,#1a1a1a,#0a0a0a);
    border:1px solid var(--accent);
    box-shadow:0 0 14px rgba(255,43,214,.35), inset 0 1px 0 rgba(255,255,255,.12);
    transition:transform .38s cubic-bezier(.2,.7,.2,1), border-color .38s ease, box-shadow .38s ease;
  }
.knob::after{content:"";position:absolute;left:50%;top:9px;bottom:9px;width:1px;background:rgba(255,255,255,.35)}
#m-group:checked ~ .deck .ch.a{border-color:rgba(255,43,214,.5);background:rgba(255,43,214,.05)}
#m-group:checked ~ .deck .ch.a .cl{color:var(--accent)}
#m-solo:checked ~ .deck .ch.b{border-color:rgba(0,255,209,.5);background:rgba(0,255,209,.05)}
#m-solo:checked ~ .deck .ch.b .cl{color:var(--cyan)}
#m-solo:checked ~ .deck .knob{transform:translateX(calc(100% + 4px));border-color:var(--cyan);box-shadow:0 0 14px rgba(0,255,209,.35), inset 0 1px 0 rgba(255,255,255,.12)}
#m-group:focus-visible ~ .deck .ch.a,
  #m-solo:focus-visible ~ .deck .ch.b{outline:2px solid var(--cyan);outline-offset:3px}
.panes{margin-top:22px}
.pane{display:none}
#m-group:checked ~ .deck .pane.group{display:block}
#m-solo:checked ~ .deck .pane.solo{display:block}
.pane.solo{--accent:var(--cyan)}
.pane.solo .num,.pane.solo .item .k{color:var(--cyan)}
.pane .lead{color:#fff;font-size:clamp(16px,2vw,21px);line-height:1.45;margin:0 0 18px;max-width:60ch}
.pane .who{
    margin-top:20px;padding:18px 20px;border:1px dashed var(--line);
    font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.75;color:var(--soft);
  }
.pane .who b{color:#fff;font-weight:500}
.mode-note{margin-top:26px;color:var(--dim);font-size:15px;max-width:70ch}
/* ── ФИНАЛ ─────────────────────────────────── */
  .outro{padding:130px 0 100px;text-align:center;border-top:1px solid var(--line);position:relative}
.outro h3{
    font-family:'Unbounded',sans-serif;font-weight:900;
    font-size:clamp(34px,6vw,84px);line-height:.95;letter-spacing:-.03em;
    margin:0;text-transform:uppercase;
  }
.outro h3 span{
    background:linear-gradient(180deg, #fff 0%, var(--accent) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
.outro p{margin:28px auto 0;max-width:660px;color:var(--soft)}
.outro .signoff{margin-top:32px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.25em;color:var(--accent);text-transform:uppercase}
.reveal{transform:translateY(22px);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){
    .laser,.smoke,.strobe,header.top .dot,.hero-meta .pill.live::before,.refrain .run{animation:none !important}
    .reveal{transform:none;transition:none}
    .knob{transition:none}
  }
@media (max-width:760px){
    :root{ --pad: 18px }
    header.top{padding:12px var(--pad);font-size:10px;letter-spacing:.14em}
    header.top .right{display:none}
    section.chapter{padding:74px 0}
    .chapter-grid{gap:18px}
    .num{font-size:64px;-webkit-text-stroke-width:1.2px}
    .chapter h2{font-size:clamp(28px,7vw,40px)}
    .chapter .tag{margin-bottom:18px;font-size:10px;letter-spacing:.18em}
    .hero{padding:72px 0 28px;gap:18px}
    .eyebrow{font-size:10px;letter-spacing:.22em;line-height:1.5}
    h1.title{font-size:clamp(40px, 11vw, 80px)}
    .hero-meta{gap:6px}
    .hero-meta .pill{padding:5px 10px;font-size:10px;letter-spacing:.14em}
    .goal{font-size:15px}
    .goal::before{font-size:10px;letter-spacing:.22em;margin-bottom:8px}
    .item{padding:16px;gap:8px;grid-template-columns:1fr}
    .item .k{padding-top:0;font-size:13px;letter-spacing:.08em}
    .item .v ul li{padding-left:14px}
    .callout{padding:16px;font-size:12px;line-height:1.6;margin-top:22px}
    .fader{grid-template-columns:1fr;gap:10px}
    .ch.b{text-align:left}
    .track{height:34px}
    .knob{width:calc(50% - 7px)}
    .outro{padding:84px 0 64px}
    .outro h3{font-size:clamp(48px,15vw,90px)}
    .outro p{font-size:15px;padding:0 4px}
    .outro .signoff{font-size:11px;letter-spacing:.18em}
    footer{padding:28px 18px 40px;font-size:10px;letter-spacing:.16em}
  }
@media (max-width:380px){
    body{font-size:15px}
    h1.title{font-size:clamp(36px, 11vw, 64px)}
    .num{font-size:54px}
    .chapter h2{font-size:26px}
    .item{padding:14px}
    .hero{gap:14px;padding:64px 0 24px}
    .goal{font-size:14px}
  }
.item .v, .goal, .eyebrow{overflow-wrap:break-word;word-break:normal}
.item .v, .goal, .chapter p.intro{hyphens:auto}