/* Сцены разделов «Сито» (сценарий на всю страницу, R9 правки 05.10): очередь предметов, отметки, шкала, кадры Blender,
   выноски, счётчик, смена снимков у тарифов, отклик формы на ввод. Ведёт scenes.js, линию — timeline.js. */

/* 6. лента ситуаций: карточки въезжают по очереди и сжимаются в нечитаемую стопку */
.feed-col{position:relative}
.feed{border:1px solid #373b3e;background:rgba(33,37,41,.94);padding:18px 18px 16px;max-width:460px}
@media (min-width:980px){.feed{position:sticky;top:120px}}
.feed-head{display:flex;align-items:center;gap:10px;color:#adb5bd;font-size:11px;padding-bottom:14px;border-bottom:1px solid #343a40}
.feed-head i{width:7px;height:7px;background:#0d6efd}
.feed-head span{margin-left:auto;color:#6c757d}
.feed-stack{position:relative;height:300px;margin-top:16px}
.fc{position:absolute;left:0;right:0;top:0;height:112px;border:1px solid #495057;background:#2b3035;padding:16px 18px;transform-origin:50% 0;
  will-change:transform,opacity;opacity:0}
.fc b{display:block;width:34%;height:7px;background:#6c757d;margin-bottom:14px}
.fc u{display:block;height:6px;background:#495057;margin-top:9px;width:92%}
.fc u:nth-of-type(2){width:74%}.fc u:nth-of-type(3){width:83%}
.fc em{position:absolute;right:14px;top:12px;font:11px/1 var(--mono);font-style:normal;color:#8f969d;letter-spacing:.1em}
.feed-count{margin-top:6px;padding-top:12px;border-top:1px solid #343a40;color:#8f969d;font-size:11px;text-align:right}
.feed-count span{color:#dee2e6}
@media (max-width:979px){.feed{margin:0 auto 6px}.feed-col{order:-1}.sit-grid{display:flex;flex-direction:column}.feed-stack{height:230px}.fc{height:96px}}

/* 7. QR собирается из квадратов, шаги получают отметки */
.qr-box{border:1px solid #373b3e;padding:26px;max-width:380px;background:rgba(33,37,41,.94)}
.qr{width:100%;height:auto;display:block}
.qr rect{fill:#dee2e6}
.qr .fp rect{fill:#4b8eff}
.qr g{transition:none}
.qr-cap{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:#adb5bd;font-size:11px}
.qr-cap i{width:9px;height:9px;background:#373b3e;transition:background .4s,box-shadow .4s}
.qr-box.ok .qr-cap i{background:#0d6efd;box-shadow:0 0 10px rgba(13,110,253,.7)}
.chk{flex:none;width:22px;height:22px;border:1px solid #495057;position:relative;top:3px;transition:border-color .4s,background .4s}
.chk::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .35s}
.step.done .chk{border-color:#0d6efd;background:#0d6efd}
.step.done .chk::after{transform:rotate(45deg) scale(1)}
.step.done>.sn{opacity:.5;color:#6ea8fe}
@media (max-width:979px){.qr-box{max-width:300px;margin:0 auto}}

/* 8. шкала 0–100: карточки едут к своему числу и встают в зону; строгость гасит шум */
.scale{position:relative;height:330px;border:1px solid #373b3e;background:rgba(33,37,41,.94);margin-top:4px}
.sc-track{position:absolute;left:24px;right:24px;bottom:70px;height:4px;display:flex}
.sc-track i{display:block;height:100%}
.sc-track .z0{width:30%;background:#495057}.sc-track .z1{width:30%;background:#adb5bd}.sc-track .z2{width:40%;background:#0d6efd}
.sc-ticks{position:absolute;left:24px;right:24px;bottom:50px;height:14px;
  background:repeating-linear-gradient(90deg,#6c757d 0 1px,transparent 1px 10%);opacity:.9}
.sc-zl{position:absolute;left:24px;right:24px;bottom:22px;display:grid;grid-template-columns:30% 30% 40%;font-size:10.5px;color:#8f969d}
.sc-zl span:last-child{color:#6ea8fe}
.sc-cards{position:absolute;inset:18px 24px 86px}
.sc-card{position:absolute;left:0;top:0;width:66px;height:46px;margin-left:-33px;border:1px solid #495057;background:#2b3035;padding:6px 8px;
  will-change:transform;transition:opacity .45s,border-color .4s,background .4s,filter .4s}
.sc-card b{display:block;font:500 14px/1 var(--mono);color:#dee2e6}
.sc-card u{display:block;height:4px;background:#495057;margin-top:6px}
.sc-card u+u{width:70%}
.sc-card.hi{border-color:#0d6efd;background:#0b2a57;box-shadow:0 0 14px rgba(13,110,253,.25)}
.sc-card.hi b{color:#6ea8fe}
.sc-card.lo b{color:#8f969d}
.sc-card.off{opacity:.12;filter:grayscale(1)}
.strict{margin-top:22px;border:1px solid #373b3e;padding:18px 20px}
.strict label{display:flex;justify-content:space-between;color:#ced4da;font-size:11.5px}
.strict output{color:#6ea8fe}
.strict input{width:100%;margin:14px 0 10px;accent-color:#0d6efd;height:24px;cursor:pointer}
.strict p{color:#adb5bd;font-size:14.5px}
@media (max-width:760px){
  .scale{height:440px}
  .sc-track{left:auto;right:auto;left:20px;top:20px;bottom:20px;width:4px;height:auto;flex-direction:column-reverse}
  .sc-track .z0{width:100%;height:30%}.sc-track .z1{width:100%;height:30%}.sc-track .z2{width:100%;height:40%}
  .sc-ticks{left:30px;top:20px;bottom:20px;width:12px;height:auto;background:repeating-linear-gradient(0deg,#6c757d 0 1px,transparent 1px 10%)}
  .sc-zl{left:auto;right:12px;top:20px;bottom:20px;width:auto;grid-template-columns:none;grid-template-rows:40% 30% 30%;text-align:right}
  .sc-zl span:first-child{order:3}.sc-zl span:nth-child(2){order:2}.sc-zl span:last-child{order:1}
  .sc-cards{inset:20px 70px 20px 56px}
  .sc-card{margin-left:0;margin-top:-23px}
}

/* 9. файлы: сцена кадрами Blender */
.files-scene{aspect-ratio:4/3;border:1px solid #373b3e}
.files-scene picture{display:contents}
@media (max-width:760px){.files-scene{aspect-ratio:1/1}}

/* 10. длинный пост сворачивается в карточку, выноски указывают на поля */
.fold{position:relative;min-height:420px;border:1px solid #373b3e;background:rgba(33,37,41,.94);padding:30px 26px}
.fold-card{position:relative;width:min(300px,62%);border:1px solid #495057;background:#2b3035;padding:18px 18px 16px;transition:border-color .5s,box-shadow .5s}
.fold.done .fold-card{border-color:#0d6efd;box-shadow:0 0 0 1px rgba(13,110,253,.35),0 0 30px rgba(13,110,253,.12)}
.fold .ln{display:block;height:6px;background:#495057;margin-top:9px;width:100%}
.fc-title .ln{height:9px;background:#adb5bd;margin-top:0}
.fold.done .fc-title .ln{background:#dee2e6}
.fc-long{overflow:hidden;height:calc(var(--long,1) * 200px);opacity:var(--long,1)}
.fc-row{opacity:var(--o,1)}
.fc-sum,.fc-meta,.fc-links{opacity:var(--show,0);transform:translateY(calc((1 - var(--show,0)) * 10px))}
.fc-sum .ln{background:#8f969d}
.fc-meta{display:flex;align-items:center;gap:10px;margin-top:14px}
.fc-score{font:500 20px/1 var(--mono);color:#6ea8fe}
.fc-cat{border:1px solid #6c757d;padding:4px 7px;font:10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#ced4da}
.fc-links{display:flex;gap:8px;margin-top:12px}
.fc-links span{font:11px/1 var(--mono);color:#adb5bd;border-bottom:1px solid #6c757d;padding-bottom:3px}
.callouts{position:absolute;left:calc(26px + min(300px,62%));right:22px;top:0;bottom:0;pointer-events:none}
.co{position:absolute;left:0;right:0;display:flex;align-items:center;gap:10px;opacity:var(--k,0);transform:translateX(calc((1 - var(--k,0)) * 14px))}
.co i{flex:1;height:1px;background:#0d6efd;max-width:90px;transform-origin:0 50%;transform:scaleX(var(--k,0))}
.co span{font:11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6ea8fe;white-space:nowrap}
@media (max-width:760px){
  .fold{padding:22px 18px;min-height:0}
  .fold-card{width:100%}
  .callouts{position:static;display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:16px}
  .co{position:static}
  .co i{flex:none;width:12px}
}

/* 11. счётчик */
.counter{--p:0}
.counter .num-big span{display:inline-block}

/* 13. тарифы: предмет поднимается и набирает объём по мере прокрутки */
.plan .obj img{will-change:transform,opacity}

/* 17. отклик формы: карточка-пост набирает оценку по мере заполнения полей */
.grade{margin-top:34px;max-width:460px}
.gr-card{border:1px solid #495057;background:#2b3035;padding:18px 20px;transition:border-color .5s,background .5s,box-shadow .5s}
.gr-head{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center}
.gr-ico{position:relative;width:56px;height:56px}
.gr-logo{width:56px;height:56px;border-radius:12px;filter:grayscale(1) brightness(.6);transition:filter .6s}
.gr-pro{position:absolute;right:-8px;bottom:-6px;font:700 10px/1 var(--mono);color:#212529;background:#ffc107;border-radius:3px;padding:3px 5px;opacity:0;transform:scale(.6);transition:opacity .4s,transform .4s}
.gr-n{display:block;font:300 46px/1 var(--serif);color:#6c757d;transition:color .5s}
.gr-u{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6c757d;margin-top:6px}
.gr-price{text-align:right}.gr-price span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6c757d}
.gr-price b{display:block;font:400 15px/1.3 var(--serif);color:#adb5bd;margin-top:4px}
.gr-feat{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #373b3e;display:grid;gap:9px;font-size:11.5px;letter-spacing:.04em}
.gr-feat li{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;color:#6c757d;transition:color .4s}
.gr-feat i{width:8px;height:8px;border:1px solid #495057;transition:background .4s,border-color .4s}
.gr-feat em{font-style:normal;color:#6c757d}
.gr-feat li.on{color:#dee2e6}.gr-feat li.on i{background:#0d6efd;border-color:#0d6efd}.gr-feat li.on em{color:#6ea8fe}
.grade.chosen .gr-logo{filter:none}
.grade.chosen .gr-n{color:#dee2e6}.grade.chosen .gr-price b{color:#fff}
.grade[data-lvl="2"] .gr-n,.grade[data-lvl="3"] .gr-n{color:#6ea8fe}
.grade[data-lvl="3"] .gr-pro{opacity:1;transform:none}
.grade[data-lvl="3"] .gr-card{border-color:#0d6efd}
.grade.ready .gr-card{border-color:#0d6efd;background:#0b2a57;box-shadow:0 0 26px rgba(13,110,253,.18)}
.grade.swap .gr-n,.grade.swap .gr-u{animation:grSwap .45s ease}
@keyframes grSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gr-bar{height:3px;background:#343a40;margin-top:14px;position:relative}
.gr-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#0d6efd;transition:width .5s}
.gr-zl{display:grid;grid-template-columns:repeat(3,1fr);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6c757d;margin-top:8px}
.gr-zl span{transition:color .3s}.gr-zl span.ok{color:#6ea8fe}.gr-zl span.ok::before{content:"\2713  "}
@media (prefers-reduced-motion:reduce){.grade.swap .gr-n,.grade.swap .gr-u{animation:none}}
@media (max-width:979px){.grade{margin:26px 0 0}}

/* линия страницы: шкала времени канала */
.tl-wrap{position:relative}
.tl-line{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.tl-tip{position:absolute;left:0;top:0;z-index:7;width:46px;height:30px;margin:-15px 0 0 -23px;border:1px solid #6c757d;background:#2b3035;pointer-events:none;opacity:0;
  font:500 12px/28px var(--mono);color:#dee2e6;text-align:center;will-change:transform;transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
.tl-tip.lit{background:#0d6efd;border-color:#0d6efd;color:#fff;box-shadow:0 0 18px rgba(13,110,253,.6)}
@media (max-width:760px){.tl-tip{width:34px;height:22px;margin:-11px 0 0 -17px;font-size:10px;line-height:20px}}
@media (prefers-reduced-motion:reduce){.tl-tip{display:none}}
#lead .btn[type=submit]{transition:background .45s,color .45s,box-shadow .45s}
#lead.lead-lit .btn[type=submit]{box-shadow:0 0 0 1px rgba(13,110,253,.6),0 0 34px rgba(13,110,253,.55)}

/* окно программы: тот же вид, что у самой программы (боковая панель, синие кнопки, метка PRO) */
.appwin{margin-top:56px;border:1px solid #495057;border-radius:12px;overflow:hidden;background:#2b3035;display:grid;grid-template-columns:190px 1fr;max-width:1000px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.aw-side{background:#212529;border-right:1px solid #495057;padding:18px 12px;display:flex;flex-direction:column;gap:4px;font:14px/1.3 system-ui,"Segoe UI",sans-serif;color:#dee2e6}
.aw-brand{text-align:center;font-weight:600;margin-bottom:14px}
.aw-brand img{width:52px;height:52px;margin:0 auto 6px;border-radius:10px}
.aw-link{padding:9px 11px;border-radius:8px;color:#dee2e6}
.aw-link.on{background:linear-gradient(135deg,#0d6efd,#4b8eff);color:#fff;box-shadow:0 2px 8px rgba(13,110,253,.3)}
.aw-link.low{margin-top:auto;color:#adb5bd}
.aw-main{font:14px/1.45 system-ui,"Segoe UI",sans-serif;color:#dee2e6;min-width:0}
.aw-head{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#212529;border-bottom:1px solid #495057;padding:14px 20px}
.aw-head b{font-size:18px;font-weight:500;color:#fff}
.aw-badges{display:flex;gap:8px}
.aw-badge{font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px;background:#6c757d;color:#fff}
.aw-badge.pro{background:#ffc107;color:#1a1d20}
.aw-body{padding:18px 20px;display:grid;gap:12px}
.aw-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:#adb5bd}
.aw-sel{border:1px solid #495057;border-radius:6px;padding:5px 10px;background:#212529;color:#dee2e6}
.aw-btn{border-radius:6px;padding:6px 12px;background:#0d6efd;color:#fff;font-weight:500;margin-left:auto}
.aw-post{border:1px solid #495057;border-radius:10px;background:#212529;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.aw-post .sc{font-size:13px;font-weight:700;padding:3px 8px;border-radius:6px;color:#fff;background:#198754}
.aw-post .sc.noise{background:#6c757d}
.aw-post i{display:block;height:7px;border-radius:4px;background:#495057;margin:4px 0}
.aw-post i.t{background:#adb5bd;width:62%}
.aw-post small{display:block;color:#8f969d;font-size:12px;margin-top:6px}
@media (max-width:760px){
  .appwin{grid-template-columns:1fr;margin-top:40px}
  .aw-side{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid #495057;padding:12px}
  .aw-brand{display:flex;align-items:center;gap:8px;margin:0 8px 0 0;width:100%}
  .aw-brand img{width:32px;height:32px;margin:0}
  .aw-link{padding:6px 9px;font-size:13px}.aw-link.low{display:none}
  .aw-btn{margin-left:0}
}