:root{
  --bg:#0C0A09; --bg2:#13100E; --card:#1C1917; --card2:#24201C;
  --line:#292524; --line2:#3A3431;
  --ink:#FAFAF9; --ink2:#D6D3D1; --muted:#A8A29E; --subtle:#78716C;
  --amber:#F59E0B; --amber-hi:#FBBF24; --amber-deep:#D97706; --amber-ink:#1C1206;
  --glow:rgba(245,158,11,.28);
  --r:6px; --rc:12px;
  --spring:cubic-bezier(.22,1.2,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-gutter:stable}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;transition:opacity .3s}
body.loading{opacity:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
svg{flex:none}

/* ---------- верхняя полоса ---------- */
.top{position:sticky;top:0;z-index:10;background:linear-gradient(var(--bg) 70%,transparent);padding:14px 20px 18px}
.top-in{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:12px}
.back{width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;color:var(--muted);border:1px solid var(--line)}
.back:hover{color:var(--ink);border-color:var(--line2)}
.back.off{visibility:hidden}
.bar{flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber-deep),var(--amber-hi));box-shadow:0 0 12px var(--glow);transition:width .48s var(--spring)}

/* ---------- экран ---------- */
.wrap{max-width:680px;margin:0 auto;padding:4px 20px 24px}
.enter > *{opacity:0;transform:translateY(14px);animation:up .48s var(--spring) forwards}
.enter > *:nth-child(2){animation-delay:.06s}.enter > *:nth-child(3){animation-delay:.12s}
.enter > *:nth-child(n+4){animation-delay:.18s}
@keyframes up{to{opacity:1;transform:none}}

.shead{display:grid;grid-template-columns:1fr 168px;gap:12px;align-items:center;margin-bottom:8px}
.shead + .lead{margin-bottom:28px}
.shead.noart{margin-bottom:12px}
.shead.noart{grid-template-columns:1fr}
.sart{width:168px;height:168px;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
@media (max-width:560px){
  .shead{grid-template-columns:1fr 112px;align-items:center}
  .sart{width:112px;height:112px}
}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);font-weight:500;margin-bottom:12px}
h1.h{font-family:Lora,Georgia,serif;font-weight:500;font-size:32px;line-height:1.15;letter-spacing:-.01em;margin-bottom:12px}
@media (max-width:560px){h1.h{font-size:28px}}
.lead{color:var(--ink2)}
.lead b{color:var(--ink);font-weight:500}
.q{font-weight:500;margin:32px 0 12px}
.q.first{margin-top:0}
.hint{font-size:14px;color:var(--muted);margin:-6px 0 12px}

/* варианты ответа */
.opts{display:grid;gap:8px}
.field{display:block;width:100%;margin-top:8px;padding:12px 14px;border:1px solid var(--amber-deep);background:var(--card);color:var(--ink);border-radius:var(--r);font:inherit;font-size:16px;outline:none;animation:dcin .3s var(--spring) both}
.field:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.field::placeholder{color:var(--subtle)}
.opt{display:flex;align-items:flex-start;gap:12px;text-align:left;padding:12px 14px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);transition:border-color .18s,background .18s,transform .18s var(--spring)}
.opt:hover{border-color:var(--line2)}
.opt:active{transform:scale(.99)}
.opt .dot{flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;border:1.5px solid var(--line2);transition:all .18s}
.opt.sq .dot{border-radius:4px}
.opt.on{border-color:var(--amber-deep);background:linear-gradient(0deg,rgba(245,158,11,.07),rgba(245,158,11,.07)),var(--card)}
.opt.on .dot{border-color:var(--amber);background:var(--amber);box-shadow:0 0 10px var(--glow)}

/* сцена */
.scene{padding:16px 18px;border-left:2px solid var(--amber);background:var(--card);border-radius:0 var(--r) var(--r) 0;margin-bottom:20px;color:var(--ink2)}
.scene b{color:var(--ink);font-weight:500}
.task{font-weight:500;margin-bottom:12px}

/* ---------- ранжирование ---------- */
.rank-wrap{display:grid;grid-template-columns:6px minmax(0,1fr);gap:12px}
.rank-band{width:6px;border-radius:3px;background:linear-gradient(var(--amber-hi),var(--amber-deep) 35%,var(--line2));box-shadow:0 0 14px var(--glow)}
.rank-cap{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.rank-cap::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.rank-cap.rank-hi{color:var(--amber-hi);margin-bottom:10px}
.rank-cap.rank-lo{color:var(--muted);margin-top:10px}
.rank-axis{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rank-axis i{flex:1;width:2px;margin:8px 0;border-radius:2px;background:linear-gradient(var(--amber-hi),var(--line))}
.rank-axis span{writing-mode:vertical-rl;transform:rotate(180deg)}
.rank{display:grid;gap:8px;position:relative}
.rk{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px 8px 12px 6px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);transition:transform .2s var(--spring),border-color .18s,box-shadow .18s;user-select:none;-webkit-user-select:none}
.rank .rk:not(.me){border-left:3px solid var(--slot,var(--line))}
.rk.me{border-color:var(--amber);background:radial-gradient(120% 160% at 0% 50%,rgba(245,158,11,.16),transparent 60%),var(--card)}
.rk.me .rk-t{font-family:Lora,serif;font-weight:700;font-size:18px;color:var(--amber-hi)}
.rk.drag{z-index:5;transition:none;border-color:var(--amber-hi);box-shadow:0 24px 48px -12px rgba(0,0,0,.6),0 0 0 1px var(--amber-hi)}
.grip{touch-action:none;cursor:grab;color:var(--subtle);padding:6px 4px;display:grid;place-items:center}
.grip:active{cursor:grabbing}
.rk-t{font-size:15px;line-height:1.45}
.rk-arrows{display:flex;flex-direction:column;gap:2px}
.rk-arrows button{width:28px;height:24px;border-radius:4px;color:var(--subtle);display:grid;place-items:center}
.rk-arrows button:hover{color:var(--ink);background:var(--card2)}
.rk-arrows button:disabled{opacity:.2;pointer-events:none}

/* ---------- первый запрос ---------- */
.picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.picks{grid-template-columns:1fr}}
.pick{text-align:left;padding:14px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);font-size:15px;line-height:1.4;transition:all .18s var(--spring);min-height:60px}
.pick:hover{border-color:var(--line2)}
.pick.on{border-color:var(--amber);background:linear-gradient(0deg,rgba(245,158,11,.09),rgba(245,158,11,.09)),var(--card);box-shadow:0 0 0 1px var(--amber) inset}
.pick.full:not(.on){opacity:.4}
.tally{font-size:14px;color:var(--muted);margin-top:12px;font-variant-numeric:tabular-nums}
.tally b{color:var(--amber)}

/* ---------- отчёт коллеги ---------- */
.chat-q{font-size:14px;color:var(--muted);margin-bottom:8px}
.chat-q b{color:var(--ink2);font-weight:500}
.answer{padding:20px;border:1px solid var(--line);border-radius:var(--rc);background:var(--card);line-height:1.9}
.answer .lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px;line-height:1.4}
.frag{cursor:pointer;padding:2px 3px;border-radius:4px;border-bottom:1px dashed var(--line2);transition:background .18s,color .18s,border-color .18s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.frag:hover{background:rgba(255,255,255,.05);border-bottom-color:var(--muted)}
.frag.on{background:rgba(245,158,11,.2);color:#FFF7E6;border-bottom:1.5px solid var(--amber)}

/* ---------- следующий ход ---------- */
.lanes{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lanes .l{display:flex;align-items:center;gap:6px}
.lanes .r{display:flex;align-items:center;gap:6px;justify-content:flex-end;color:var(--amber)}
.lanes .demo{width:56px;height:22px;border-radius:4px;border:1px dashed var(--line2);position:relative;overflow:hidden}
.lanes .demo i{position:absolute;top:3px;left:50%;width:22px;height:14px;margin-left:-11px;border-radius:3px;background:var(--ink2);animation:demo 3.2s var(--spring) infinite}
@keyframes demo{0%,12%{transform:none;background:var(--ink2)}30%,45%{transform:translateX(15px);background:var(--amber)}60%,62%{transform:none;background:var(--ink2)}78%,92%{transform:translateX(-15px);background:var(--subtle)}100%{transform:none}}
.mv-list{display:grid;gap:8px}

/* ---------- дуэли ---------- */
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin-top:8px}
@media (max-width:560px){.duel{grid-template-columns:1fr}}
.duel .or{align-self:center;justify-self:center;font-family:Lora,serif;font-style:italic;color:var(--subtle)}
.dc{min-height:150px;padding:20px;border:1px solid var(--line2);background:var(--card);border-radius:var(--rc);text-align:left;font-size:17px;line-height:1.45;transition:transform .32s var(--spring),border-color .18s,opacity .25s,box-shadow .25s;animation:dcin .45s var(--spring) both}
.dc:nth-of-type(2){animation-delay:.05s}
@media (max-width:560px){.dc{min-height:0}}
.dc:hover{border-color:var(--amber-deep);transform:translateY(-2px)}
.dc.pick-on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset,0 0 30px -6px var(--glow);transform:scale(1.02)}
.dc.pick-off{opacity:.25;transform:scale(.97)}
@keyframes dcin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.dots{display:flex;gap:5px;flex-wrap:wrap;margin-top:24px}
.dots i{width:16px;height:3px;border-radius:2px;background:var(--line)}
.dots i.done{background:var(--amber-deep)}
.dots i.cur{background:var(--amber-hi);box-shadow:0 0 8px var(--glow)}
.undo{margin-top:16px;font-size:14px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.undo:hover{color:var(--ink)}

/* ---------- нижняя кнопка ---------- */
.nav{position:sticky;bottom:0;margin-top:24px;padding:16px 0 calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 35%);z-index:10;pointer-events:none}
.nav-in{max-width:680px;margin:0 auto;display:flex;justify-content:flex-end}
.nav .btn{pointer-events:auto;white-space:nowrap}
.nav .more{white-space:nowrap}
@media (max-width:440px){.nav.long .btn{padding-left:18px;padding-right:18px}.nav.long .more{font-size:0;gap:0;width:44px;height:44px;padding:0;justify-content:center}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:var(--r);background:var(--amber);color:var(--amber-ink);font-weight:700;transition:transform .18s var(--spring),box-shadow .18s,opacity .18s;box-shadow:0 0 0 1px var(--amber-hi) inset,0 6px 24px -8px var(--glow);text-decoration:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--amber-hi) inset,0 10px 30px -8px rgba(245,158,11,.5)}
.btn:disabled{opacity:.3;pointer-events:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:0 0 0 1px var(--line2) inset}
.btn.ghost:hover{box-shadow:0 0 0 1px var(--muted) inset}

/* ---------- подвал и карточка автора ---------- */
.foot{display:flex;align-items:center;gap:6px;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.who{position:relative;cursor:pointer;margin-right:6px;border-bottom:1px dotted var(--subtle);outline:none}
.who:hover,.who:focus-visible{color:var(--ink)}
.ic{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r);color:var(--muted);transition:color .18s,background .18s}
.ic:hover{color:var(--amber-hi);background:var(--card)}
.hcard{position:absolute;left:-12px;bottom:calc(100% + 12px);width:300px;padding:16px;border:1px solid var(--line2);border-radius:var(--rc);background:var(--card);box-shadow:0 24px 48px -12px rgba(0,0,0,.7);display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .3s var(--spring);cursor:default;z-index:20}
.who:hover .hcard,.who.open .hcard{opacity:1;transform:none;pointer-events:auto}
.hcard img{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--amber-deep)}
.hcard b{display:block;color:var(--ink);font-weight:700;font-size:15px}
.hcard p{font-size:13px;line-height:1.4;color:var(--ink2);margin-top:2px}
.hcard .hl{grid-column:1/-1;display:flex;gap:16px;font-size:13px;padding-top:12px;border-top:1px solid var(--line)}
.hcard .hl a{text-decoration:none;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.hcard .hl a:hover{color:var(--amber-hi)}

/* ---------- вход ---------- */
.intro{min-height:100vh;display:grid;grid-template-rows:1fr auto;position:relative;overflow:hidden}
.intro-bg{position:absolute;inset:0;background:url(img/hero.webp) right bottom/min(100vh,1000px) no-repeat}
.intro-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 18%,rgba(12,10,9,.55) 55%,rgba(12,10,9,.1)),linear-gradient(0deg,var(--bg) 2%,transparent 30%)}
@media (max-width:720px){.intro-bg{background-size:135vw;background-position:12% 100%}.intro-bg::after{background:linear-gradient(180deg,var(--bg) 30%,rgba(12,10,9,.6) 60%,rgba(12,10,9,.2) 85%,var(--bg))}}
.intro-in{position:relative;max-width:1080px;width:100%;margin:0 auto;padding:12vh 32px 32px;align-self:start}
.logo{font-family:Lora,serif;font-weight:500;font-size:clamp(88px,16vw,168px);line-height:.9;letter-spacing:-.02em;color:#F3E8CC;text-shadow:0 0 40px rgba(245,158,11,.15)}
.intro h2{font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.2;margin:16px 0 16px;max-width:14em}
.intro p{max-width:28em;color:var(--ink2);margin-bottom:28px}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted);margin-bottom:32px}
.meta span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);margin:0 8px 2px 0;box-shadow:0 0 8px var(--amber)}
.intro .foot{position:relative;max-width:1080px;width:100%;margin:0 auto;padding:20px 32px calc(20px + env(safe-area-inset-bottom));border-top:0}

/* ---------- отчёт ---------- */
.rep{max-width:760px;margin:0 auto;padding:0 20px 40px}
.rep-hero{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:8px;align-items:end;padding:40px 0 20px}
@media (max-width:640px){.rep-hero{grid-template-columns:1fr;padding-top:16px}}
.rep-hero img{width:100%;max-width:380px;display:block;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%)}
.rep-hero .glow{position:absolute;left:-10%;bottom:0;width:60%;height:70%;background:radial-gradient(closest-side,rgba(245,158,11,.22),transparent);pointer-events:none}
.lvl-k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lvl-n{font-family:Lora,serif;font-weight:500;font-size:clamp(48px,9vw,64px);line-height:1;color:var(--amber-hi);text-shadow:0 0 30px rgba(245,158,11,.35);margin:8px 0 8px;display:flex;align-items:baseline;gap:14px}
.lvl-n small{font-size:.5em;color:var(--amber);opacity:.8}
.near{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--amber);margin-bottom:12px}
.near::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.lvl-d{color:var(--ink2)}
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:20px 0 8px}
.step{position:relative;padding-top:14px}
.step i{position:absolute;top:0;left:0;right:0;height:4px;border-radius:4px;background:var(--line)}
.step.past i{background:var(--amber-deep);opacity:.6}
.step.cur i{background:var(--amber-hi);box-shadow:0 0 14px var(--amber)}
.step.next i{background:linear-gradient(90deg,rgba(245,158,11,.55),var(--line))}
.step.ghost i{background:repeating-linear-gradient(90deg,var(--amber-deep) 0 6px,transparent 6px 10px);opacity:.7}
.step b{display:block;font-size:12px;color:var(--subtle);font-weight:500}
.step span{display:block;font-size:13px;color:var(--muted);line-height:1.3}
.step.cur b,.step.cur span{color:var(--ink)}
.creator{font-size:14px;color:var(--muted);margin-top:8px}

.block{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:var(--rc);background:var(--card)}
.block h3{font-family:Lora,serif;font-weight:700;font-size:22px;line-height:1.25;margin-bottom:8px}
.block .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);font-weight:500;margin-bottom:8px}
.block p{color:var(--ink2)}
.mirror{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:16px 0}
.mirror div{padding:14px;border-radius:var(--r);border:1px solid var(--line2);text-align:center}
.mirror small{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.mirror strong{font-family:Lora,serif;font-weight:700;font-size:20px}
.mirror .m-real{border-color:var(--amber-deep)}.mirror .m-real strong{color:var(--amber-hi)}
.mirror em{font-style:normal;color:var(--subtle);font-size:20px}
.meters{display:grid;gap:18px;margin-top:16px}
.meter-h{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.meter-h b{font-weight:500}
.meter-h span{font-size:14px;color:var(--amber-hi);white-space:nowrap}
.meter-t{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.meter-t i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--amber-deep),var(--amber-hi));width:0;transition:width .9s var(--spring)}
.meter-s{font-size:14px;color:var(--muted);margin-top:6px}
.prof{display:grid;gap:10px;margin-top:16px}
.prow{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;font-size:14px}
@media (max-width:480px){.prow{grid-template-columns:140px 1fr;font-size:13px}}
.prow span{color:var(--ink2)}
.prow.hi span{color:var(--amber-hi);font-weight:500}
.pbar{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.pbar i{height:8px;border-radius:2px;background:var(--line)}
.pbar i.on{background:var(--amber-deep)}
.prow.hi .pbar i.on{background:var(--amber-hi);box-shadow:0 0 8px var(--glow)}
.verdict{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.verdict p+p{margin-top:8px}
.tip{border-color:var(--amber-deep);background:radial-gradient(120% 140% at 0% 0%,rgba(245,158,11,.14),transparent 60%),var(--card)}
.tip p{font-size:18px;line-height:1.5;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
/* На телефоне кнопки столбиком одной ширины: разная ширина друг под другом выглядит рвано */
/* На десктопе три кнопки делят ширину столбца поровну */
@media (min-width:561px){.actions{display:grid;grid-template-columns:repeat(2,1fr)}.actions .btn{width:100%;padding-left:16px;padding-right:16px}.actions .card-btn{padding-left:68px;padding-right:10px}.actions .card-btn .lamp{left:4px;width:60px;height:42px}.actions .card-btn::before{width:76px;height:52px}}
@media (max-width:560px){.actions{flex-direction:column;gap:10px}.actions .btn{width:100%}.card-btn{padding-right:90px}}
/* Кнопка карточки: миелофон сидит на кнопке и выступает над ней, купол дышит светом, при нажатии вспыхивает */
.card-btn{position:relative;padding-left:90px;box-shadow:0 0 0 1px rgba(245,158,11,.35) inset}
.card-btn:hover{box-shadow:0 0 0 1px rgba(251,191,36,.7) inset,0 10px 30px -12px rgba(245,158,11,.55)}
.card-btn::before{content:'';position:absolute;left:0;bottom:-6px;width:96px;height:64px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,158,11,.3),rgba(245,158,11,0));pointer-events:none;animation:lamp-halo 3.2s ease-in-out infinite}
.card-btn .lamp{position:absolute;left:8px;bottom:3px;width:76px;height:53px;background:url(img/art/lamp.webp) center/contain no-repeat;transition:transform .25s var(--spring)}
.card-btn:hover .lamp{transform:translateY(-2px) rotate(-3deg)}
.card-btn .lamp::after{content:'';position:absolute;left:46%;top:29%;width:36px;height:26px;margin:-13px 0 0 -18px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,224,150,.95),rgba(245,158,11,.4) 55%,rgba(245,158,11,0));mix-blend-mode:screen;animation:lamp 3.2s ease-in-out infinite}
.card-btn.flash .lamp::after{animation:lamp-flash .8s ease-out}
.card-btn.flash::before{animation:lamp-halo-flash .8s ease-out}
@keyframes lamp{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes lamp-halo{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes lamp-flash{0%{opacity:1;transform:scale(2.6)}100%{opacity:.8;transform:scale(1)}}
@keyframes lamp-halo-flash{0%{opacity:1;transform:scale(1.7)}100%{opacity:.8;transform:scale(1)}}
.cta{margin-top:24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:24px;border-radius:var(--rc);border:1px solid var(--line2);background:var(--bg2)}
@media (max-width:560px){.cta{grid-template-columns:1fr}}
.cta h3{font-family:Lora,serif;font-weight:700;font-size:22px;margin-bottom:6px}
.cta p{color:var(--ink2);font-size:15px}
.frame{margin-top:24px;font-size:14px;color:var(--muted)}
.frame a{color:var(--amber-hi)}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r);font-size:14px;font-weight:500;transition:all .3s var(--spring);z-index:50;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- PDF: один лист A4 ---------- */
#print{display:none}
/* Сборка PDF-файла: лист рисуется за краем экрана шириной A4, html2canvas снимает его в картинку */
#print.render{display:block;position:absolute;left:-10000px;top:0;width:210mm;background:#fff}
.btn.busy{opacity:.6;pointer-events:none}
@page{size:A4;margin:0}
@media print{
  body{background:#fff;opacity:1!important}
  body > *:not(#print){display:none!important}
  #print{display:block}
}
/* Высота по содержимому, а не ровно 297 мм: Safari на телефоне добавляет свои поля, и лист во всю высоту A4
   переезжал на вторую страницу. Ширина тоже подстраивается под поля браузера */
.pp{width:100%;max-width:210mm;margin:0 auto;padding:9mm 12mm 7mm;color:#1C1917;font:400 9pt/1.4 Inter,sans-serif;display:flex;flex-direction:column;background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid;page-break-inside:avoid}
.pp-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:.3mm solid #E7E5E4;padding-bottom:3mm}
.pp-logo{font-family:Lora,serif;font-weight:500;font-size:22pt;line-height:1}
.pp-logo small{font-family:Inter,sans-serif;font-size:9pt;color:#78716C;margin-left:3mm}
.pp-date{font-size:8.5pt;color:#78716C}
.pp-hero{display:grid;grid-template-columns:46mm 1fr;gap:5mm;align-items:center;margin-top:4mm;padding:3mm 5mm;border-radius:3mm;background:#0C0A09;color:#FAFAF9}
/* Без маски: при печати её поддерживают не все браузеры, а фон картинки и так почти совпадает с плашкой */
.pp-hero img{width:40mm;margin:0 auto;display:block;border-radius:2mm}
.pp-k{font-size:7.5pt;letter-spacing:.08em;text-transform:uppercase;color:#A8A29E}
.pp-n{font-family:Lora,serif;font-weight:500;font-size:30pt;line-height:1.05;color:#FBBF24;margin:1.5mm 0}
.pp-n small{font-size:14pt;color:#F59E0B;margin-right:2.5mm}
.pp-near{font-size:8.5pt;color:#F59E0B;margin-bottom:1.5mm}
.pp-d{font-size:9.5pt;color:#D6D3D1}
.pp-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5mm;margin-top:3mm}
.pp-ladder div{border-top:1.2mm solid #E7E5E4;padding-top:1.5mm;font-size:7.5pt;color:#A8A29E}
.pp-ladder .past{border-color:#F3C77A}
.pp-ladder .cur{border-color:#D97706;color:#1C1917;font-weight:700}
.pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:3mm;margin-top:3mm;align-content:start}
.pp-box{border:.3mm solid #E7E5E4;border-radius:2.5mm;padding:3mm 3.5mm;background:#fff}
.pp-box h4{font-size:7.5pt;letter-spacing:.08em;text-transform:uppercase;color:#B45309;font-weight:700;margin-bottom:2mm}
.pp-box h5{font-family:Lora,serif;font-size:12pt;font-weight:700;margin-bottom:1.5mm;line-height:1.25}
.pp-box p{color:#44403C}
.pp-m{margin-top:2.5mm}
.pp-m div{display:flex;justify-content:space-between;font-size:9pt}
.pp-m div span{color:#B45309}
.pp-m i{display:block;height:1.4mm;border-radius:1mm;background:#E7E5E4;margin-top:1mm;overflow:hidden}
.pp-m i b{display:block;height:100%;background:#D97706}
.pp-mirror{display:flex;gap:2mm;align-items:center;margin:2mm 0}
.pp-mirror span{flex:1;text-align:center;border:.3mm solid #E7E5E4;border-radius:1.5mm;padding:1.5mm;font-size:8pt;color:#78716C}
.pp-mirror span b{display:block;font-family:Lora,serif;font-size:11pt;color:#1C1917}
.pp-mirror span.r{border-color:#D97706}.pp-mirror span.r b{color:#B45309}
.pp-prof{display:grid;gap:1.6mm;margin-top:2mm}
.pp-prof div{display:grid;grid-template-columns:30mm 1fr;gap:2mm;align-items:center;font-size:8.5pt}
.pp-prof u{text-decoration:none;display:grid;grid-template-columns:repeat(5,1fr);gap:.6mm}
.pp-prof u i{height:1.6mm;border-radius:.5mm;background:#E7E5E4}
.pp-prof u i.on{background:#D97706}
.pp-tip{grid-column:1/-1;border-color:#F3C77A;background:#FFFBEB}
.pp-tip p{font-size:10pt;color:#1C1917}
.pp-plan{margin:0;padding-left:5mm;display:grid;gap:1.5mm;font-size:9.5pt;color:#1C1917}
.pp-lock{margin-top:1.5mm;font-size:9pt!important;color:#57534E!important}
.pp-lock a{color:#B45309;font-weight:600;text-decoration:none}
.pp-foot{margin-top:4mm;padding-top:2.5mm;border-top:.3mm solid #E7E5E4;display:flex;justify-content:space-between;gap:6mm;font-size:8.5pt;color:#57534E}
.pp-foot b{color:#1C1917}
.pp-foot .c{text-align:right}
.pp-foot .c a{color:inherit;text-decoration:none}
.pp-chan{color:#B45309;font-weight:600;text-decoration:none;white-space:nowrap}
/* QR на тест с меткой p7d: отчёт пересылают и печатают, ссылка должна работать и с бумаги */
.pp-qr{flex:none;display:flex;flex-direction:column;align-items:center;gap:1mm;color:#57534E;text-decoration:none;font-size:7.5pt}
.pp-qr img{width:22mm;height:22mm;display:block}

/* ---------- второй круг: копирайт, ранжирование, лунки, состояния ---------- */
.foot .copy{margin-left:auto;font-size:12px;color:var(--subtle)}
.frame.small{font-size:12px;color:var(--subtle);margin-top:8px}
.pp-copy{margin-top:2mm;font-size:7pt;color:#A8A29E}
.cta-btns{display:flex;flex-direction:column;gap:8px}
.btn.sm{padding:8px 14px;font-size:14px}

.rank.loose .rk{transition:transform .5s var(--spring)}
.rank.loose{padding:4px 0}
.rank-hint{margin:16px 0 0 32px;padding:12px 14px;border-radius:var(--r);background:var(--card2);box-shadow:0 0 0 1px var(--amber-deep) inset;color:var(--ink);font-size:15px;line-height:1.45;animation:hintIn .35s var(--spring)}
.rank-hint.mv-hint{margin-left:22px}
@media (max-width:480px){.rank-hint.mv-hint{margin-left:18px}}
@keyframes hintIn{from{opacity:0;transform:translateY(6px)}}



.state{min-height:50vh;display:grid;place-content:center;justify-items:center;text-align:center;gap:16px}
.pulse{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,var(--amber-hi),var(--amber-deep));box-shadow:0 0 30px var(--glow);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.8);opacity:.6}}

/* следующий ход: две метки */
.chips{position:sticky;top:52px;z-index:8;display:flex;gap:10px;padding:10px 0 12px;margin:0 0 4px;background:linear-gradient(var(--bg) 75%,transparent)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 14px 9px 11px;border-radius:9999px;font-size:14px;font-weight:700;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .2s var(--spring),opacity .2s,box-shadow .2s}
.chip svg{width:16px;height:16px}
.chip.b{background:var(--amber);color:var(--amber-ink);box-shadow:0 0 0 1px var(--amber-hi) inset,0 6px 20px -8px var(--glow)}
.chip.w{background:#3A3431;color:var(--ink);box-shadow:0 0 0 1px var(--line2) inset}
.chip:not(.used):hover{transform:translateY(-1px)}
.chip.used{background:transparent;color:var(--subtle);box-shadow:0 0 0 1px var(--line) inset;border:0;cursor:default;opacity:.7}
.chip.lifted{opacity:.35}
.chip.dragging{cursor:grabbing;box-shadow:0 18px 36px -10px rgba(0,0,0,.7),0 0 0 1px var(--amber-hi) inset}
.chip.w.dragging{box-shadow:0 18px 36px -10px rgba(0,0,0,.7),0 0 0 1px var(--muted) inset}
.mv{position:relative;padding:14px 16px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);font-size:15px;line-height:1.45;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}
.mv:hover{border-color:var(--line2)}
.mv.open{border-color:var(--amber-deep)}
.mv.target.t-b{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.mv.target.t-w{border-color:var(--muted);box-shadow:0 0 0 1px var(--muted)}
.mv.best{border-color:var(--amber-deep);box-shadow:inset 3px 0 0 var(--amber);background:radial-gradient(120% 140% at 0% 50%,rgba(245,158,11,.14),transparent 60%),var(--card);padding-top:40px}
.mv.worst{border-color:var(--line2);box-shadow:inset 3px 0 0 var(--muted);padding-top:40px}
.mv.worst .mv-t{color:var(--ink2)}
.mark{position:absolute;top:10px;left:14px;display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border-radius:9999px;font-size:12px;font-weight:700;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.mark svg{width:13px;height:13px}
.mark.b{background:var(--amber);color:var(--amber-ink)}
.mark.w{background:#3A3431;color:var(--ink);box-shadow:0 0 0 1px var(--line2) inset}
.mark button{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:inherit;opacity:.7}
.mark button:hover{opacity:1;background:rgba(0,0,0,.15)}
.mark.lifted{opacity:.35}
.mv-t{display:block}
.mv-acts{display:none;gap:8px;margin-top:12px}
.mv.open .mv-acts{display:flex}
.mv-acts button{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:8px 12px;border-radius:9999px}
.mv-acts button svg{width:14px;height:14px}
.mv-acts button:first-child{background:var(--amber);color:var(--amber-ink)}
.mv-acts button:last-child{background:#3A3431;color:var(--ink);box-shadow:0 0 0 1px var(--line2) inset}

/* частота: неделя-индикатор */
.opt .wk{margin-left:auto;align-self:center;display:grid;grid-template-columns:repeat(7,7px);gap:3px;padding-left:12px;flex:none}
.opt .wk i{width:7px;height:12px;border-radius:2px;background:var(--line);transition:background .2s}
.opt:hover .wk i.f{background:var(--line2)}
.opt.on .wk i.f{background:var(--amber);animation:wkfill .36s var(--spring) both;animation-delay:calc(var(--d) * 45ms)}
.opt.on .wk.all i{box-shadow:0 0 8px var(--glow)}
.opt > span:nth-child(2){display:flex;flex:1;gap:8px}
@keyframes wkfill{from{transform:scaleY(.2);background:var(--line)}to{transform:none}}

/* команда: ссылка и заявка на отчёт */
.cta{align-items:start}
.cta-link{font-size:14px;color:var(--muted);text-align:center;text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.cta-link:hover{color:var(--ink)}
.team-out:empty{display:none}
.team-out{margin-top:14px;display:grid;gap:12px}
.team-link{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px dashed var(--amber-deep);border-radius:var(--r);background:var(--card)}
.team-link code{font:500 15px Inter;color:var(--amber-hi);word-break:break-all;flex:1;min-width:0}
.team-form{display:grid;gap:8px;animation:dcin .3s var(--spring) both}
.team-form .field{margin-top:0}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.4}
.consent input{margin-top:2px;accent-color:var(--amber)}
.consent a{color:var(--ink2)}
.team-form .btn{justify-self:start}
.tf-msg{resize:vertical;min-height:84px;line-height:1.45}
.team-ok{color:var(--amber-hi);font-weight:500}
@media (max-width:640px){.cta{grid-template-columns:1fr}}

/* пояса: лестница в цветах поясов, значок у уровня */
.step i{height:8px;border-radius:3px;background:var(--bc);opacity:.18}
.step.black i{box-shadow:inset 0 0 0 1px #57534E}
.step.past i{background:var(--bc);opacity:.75}
.step.cur i{background:var(--bc);opacity:1;box-shadow:0 0 16px rgba(245,158,11,.45)}
.step.cur.black i{box-shadow:inset 0 0 0 1px #A8A29E,0 0 16px rgba(245,158,11,.5)}
.step.cur i::after{content:"";position:absolute;left:50%;top:-4px;width:12px;height:16px;margin-left:-6px;border-radius:3px;background:var(--bc);box-shadow:0 0 0 1px rgba(250,250,249,.45)}
.step.next i{background:var(--bc);opacity:.4}
.step{padding-top:18px}
/* 2.1: на заставке пояса загораются по очереди, будто прибор ищет ваш; в отчёте лестница заполняется до вашего уровня */
.intro-ladder{max-width:28em;margin:-8px 0 26px}
.intro-ladder .step span{font-size:12px}
.intro-ladder .step i{animation:beltScan 5s calc(var(--n) * .45s) infinite}
@keyframes beltScan{0%,100%{opacity:.18}8%{opacity:1;box-shadow:0 0 14px rgba(245,158,11,.5)}24%{opacity:.18;box-shadow:none}}
@media (max-width:420px){.intro-ladder{gap:4px}.intro-ladder .step span{font-size:11px}}
.rep .ladder .step.past i,.rep .ladder .step.cur i{animation:beltOn .5s var(--spring) calc(var(--n) * .3s + .3s) both}
.rep .ladder .step.cur i::after{animation:beltMark .6s var(--spring) calc(var(--n) * .3s + .7s) both}
@keyframes beltOn{from{opacity:.18;transform:scaleX(.5)}}
@keyframes beltMark{from{opacity:0;transform:translateY(-12px) scale(.4)}}
@media (prefers-reduced-motion:reduce){.intro-ladder .step i,.rep .ladder .step i,.rep .ladder .step i::after{animation:none}}
.belt-tag{display:inline-flex;align-items:center;gap:10px;margin:2px 0 10px;padding:4px 14px 4px 8px;border-radius:9999px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--line2) inset;font-size:14px;font-weight:500;color:var(--ink)}
.belt-ic{display:block;flex:none}
.pp-belt{display:flex;align-items:center;gap:2mm;font-size:9pt;color:#E7E5E4;margin:-.5mm 0 1.5mm}
.pp-ladder div{border-top-color:var(--bc)}
.pp-ladder .past{border-top-color:var(--bc);opacity:.75}
.pp-ladder .cur{border-top-color:var(--bc)}

/* кнопка «Начать»: молочная керамика и латунный тумблер, как у миелофона */
.btn-toggle{display:inline-flex;align-items:center;gap:14px;padding:13px 20px 13px 16px;border-radius:14px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#F7EDD3,#E8DAB8);color:#1C1917;font:700 17px Inter,system-ui,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(120,100,70,.18),0 10px 30px -12px rgba(245,158,11,.55);transition:transform .18s var(--spring),box-shadow .2s}
.btn-toggle:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(120,100,70,.18),0 14px 36px -12px rgba(245,158,11,.7)}
.btn-toggle:active{transform:translateY(1px)}
/* рычажок миелофона: три кадра одной лентой (вверх, посередине, вниз). Выключен - смотрит вниз, щелчок поднимает его вверх */
.btn-toggle .tg{flex:none;width:44px;height:44px;margin:-10px -6px -10px -8px;
  background:url(img/art/lever.webp) 100% 0/300% 100% no-repeat;filter:drop-shadow(0 1px 1.5px rgba(60,40,10,.45));transition:background-position .22s steps(2,end)}
.btn-toggle .tg i{display:none}
.btn-toggle.on .tg{background-position:0 0}
.btn-toggle .led{flex:none;width:9px;height:9px;border-radius:50%;background:#A8A29E;box-shadow:inset 0 1px 2px rgba(0,0,0,.45);transition:background .2s,box-shadow .2s}
.btn-toggle.on .led{background:#FBBF24;box-shadow:0 0 0 2px rgba(251,191,36,.25),0 0 12px #F59E0B}

/* пояс значком у названия; блок команды - одна форма */
.belt-inl{display:inline-flex;align-self:center;margin-left:16px;transform:translateY(4px)}
.belt-inl .belt-ic{width:clamp(44px,8vw,56px);height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.pp-belt{display:inline-flex;vertical-align:middle;margin-left:3mm}
.cta.team{display:block}
.cta.chan .btn{white-space:nowrap}
.cta.chan .btn svg path{fill:var(--amber)}
@media (max-width:560px){.cta.chan .btn{width:100%}}
.team-line{margin-top:20px;font-size:15px;color:var(--ink2)}
/* план до следующего уровня (2.3): шаги 2-3 размыты до подписки, подписи шагов видны */
.plan{margin-top:24px;border:1px solid var(--amber-deep);border-radius:var(--rc);background:radial-gradient(140% 120% at 0% 0%,rgba(245,158,11,.12),transparent 55%),var(--card);padding:24px}
.plan .cmp{font-size:15px;color:var(--ink2);margin-bottom:14px}
.plan .cmp b{color:var(--ink);font-weight:500}
.plan h3{font-family:Lora,serif;font-weight:700;font-size:22px;line-height:1.25;margin-bottom:4px;text-wrap:balance}
.plan .sub{font-size:14px;color:var(--muted);margin-bottom:16px}
.pl{display:grid;gap:14px;list-style:none}
.pl li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.pl .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--amber);color:var(--amber-ink)}
.pl .tx{font-size:15px;line-height:1.5}
.pl .tx small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);margin-bottom:2px}
.pl .body{display:block}
.pl li.lock .n{background:var(--card2);color:var(--muted);box-shadow:0 0 0 1px var(--line2) inset}
.pl li.lock .body{filter:blur(6px);user-select:none;-webkit-user-select:none}
.pl li.open-anim .body{animation:unblur .9s ease-out both}
@keyframes unblur{from{filter:blur(6px);opacity:.6}to{filter:none;opacity:1}}
.plan .gate{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line2);display:grid;gap:10px;justify-items:start}
.plan .gate p{font-size:14px;color:var(--ink2)}
.plan .btn svg path{fill:var(--amber)}
@media (max-width:560px){.plan{padding:20px 18px}.plan .gate{justify-items:stretch}}
.plan-consent{font-size:12px!important;color:var(--subtle)!important}
.plan-consent a{color:inherit}
.plan .done{color:var(--amber-hi)!important;font-weight:500}
@media (prefers-reduced-motion:reduce){.pl li.open-anim .body{animation:none}}
.after-pdf{margin-top:14px;padding:12px 14px;border:1px dashed var(--amber-deep);border-radius:var(--r);font-size:15px;color:var(--ink2);animation:dcin .3s var(--spring) both}
.after-pdf a{color:var(--amber-hi);font-weight:500;text-underline-offset:3px}
.team-line a{color:var(--amber-hi);font-weight:500;text-underline-offset:3px}
/* 2.0.4: заявка раскрывается кнопкой, рядом - Telegram. На телефоне кнопки во всю ширину, одна под другой */
.team-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.team-btns .btn.ghost svg{width:20px;height:20px;color:#A8A29E;transition:color .18s}
.team-btns .btn.ghost:hover svg{color:#2AABEE}
@media (max-width:560px){.team-btns{flex-direction:column}.team-btns .btn{width:100%}}
.team-form{margin-top:14px}
.tf-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.tf-row .btn{white-space:nowrap}
.team-form .consent{margin-top:10px}
@media (max-width:640px){.tf-row{grid-template-columns:1fr}.tf-row .btn{justify-self:stretch}}
/* карточка для сторис на телефоне: на весь экран, сохранить долгим нажатием */
.card-view{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 16px;background:rgba(12,10,9,.94)}
.card-view img{max-width:100%;max-height:78vh;border-radius:var(--rc);box-shadow:0 0 0 1px var(--line2);-webkit-touch-callout:default}
.card-view p{color:var(--ink2);font-size:14px;text-align:center}
.card-view button{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink);background:var(--card)}
/* «Листайте вниз» слева в нижней полосе, напротив «Дальше» */
.more{pointer-events:auto;margin-right:auto;align-self:center;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:9999px;background:var(--card2);color:var(--ink2);font-size:14px;font-weight:600;box-shadow:0 0 0 1px var(--line2) inset;animation:moreNudge 1.8s ease-in-out infinite}
.more[hidden]{display:none}
.more svg{flex:none}
@keyframes moreNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.more,.card-btn .lamp::after,.card-btn::before{animation:none}}

/* Плотность экранов (07.10): на обычном ноутбуке и телефоне задание с вариантами должно помещаться целиком,
   без прокрутки ради последней карточки. Ужаты шапка с картинкой, сцена, отступы между вопросами и карточки */
.top{padding:10px 20px 12px}
.shead{grid-template-columns:1fr 100px;margin-bottom:4px}
.sart{width:100px;height:100px}
.task .hint-in{font-weight:400;font-size:14px;color:var(--muted)}
.eyebrow{margin-bottom:8px}
h1.h{margin-bottom:8px}
.shead + .lead{margin-bottom:18px}
.scene{padding:12px 16px;margin-bottom:14px}
.task{margin-bottom:6px}
.hint{margin:-2px 0 8px}
.chips{padding:6px 0 8px}
.q{margin:24px 0 10px}
.opt{padding:10px 14px}
.mv{padding:9px 14px}
.answer{padding:14px 18px;line-height:1.8}
.chat-q{margin-bottom:6px}
.pick{padding:11px 14px;min-height:52px}
.rk{padding:9px 8px 9px 6px}
.foot{margin-top:40px}
.nav + .foot{margin-top:8px}
@media (max-width:560px){
  .shead{grid-template-columns:1fr 84px}
  .sart{width:84px;height:84px}
  h1.h{font-size:26px}
}
/* На широком экране короткие пункты - в две колонки, число заходов - в один ряд */
@media (min-width:720px){.opts.two{grid-template-columns:1fr 1fr}.opts.four{grid-template-columns:repeat(4,1fr)}}

/* Включение миелофона по тумблеру «Начать» (2.6 с, синхронно со звуком в app.js):
   до 0.85 с лампа разгорается с мерцанием, до 1.6 с держит свет, затем мигает дважды и начинается тест.
   В покое картинка чуть приглушена, чтобы включение было видно */
.intro-bg{filter:brightness(.8) saturate(.9)}
.intro.ignite .intro-bg{animation:ignite 2.6s linear forwards}
.intro.ignite .btn-toggle .led{animation:led-ignite 2.6s linear forwards}
.intro.ignite .btn-toggle{animation:btn-ignite 2.6s linear forwards}
.intro.ignite .logo{opacity:1;transform:none;animation:logo-ignite 2.6s linear forwards}  /* сама держит видимость: входная анимация .enter снята */
@keyframes ignite{
  0%{filter:brightness(.8) saturate(.9)} 4%{filter:brightness(.45) saturate(.8)} 7%{filter:brightness(1.15) saturate(1.05)}
  10%{filter:brightness(.55) saturate(.85)} 14%{filter:brightness(1.3) saturate(1.1)} 17%{filter:brightness(.7) saturate(.9)}
  21%{filter:brightness(1.25) saturate(1.1)} 26%{filter:brightness(.95) saturate(1)} 32%,62%{filter:brightness(1.2) saturate(1.1)}
  66%{filter:brightness(.5) saturate(.85)} 70%{filter:brightness(1.3) saturate(1.12)} 75%{filter:brightness(.5) saturate(.85)}
  80%{filter:brightness(1.35) saturate(1.15)} 100%{filter:brightness(1.2) saturate(1.1)}}
@keyframes led-ignite{
  0%,4%{opacity:.35} 7%{opacity:1} 10%{opacity:.3} 14%{opacity:1} 17%{opacity:.45} 21%,62%{opacity:1}
  66%{opacity:.35} 70%{opacity:1} 75%{opacity:.35} 80%,100%{opacity:1}}
@keyframes btn-ignite{
  0%,4%,10%,17%{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 24px -10px rgba(245,158,11,.3)}
  7%,14%,21%,32%,62%,70%,80%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 44px -6px rgba(245,158,11,.85)}
  66%,75%{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 24px -10px rgba(245,158,11,.3)}}
@keyframes logo-ignite{
  0%,26%{text-shadow:0 0 40px rgba(245,158,11,.15)} 32%,62%,70%,80%,100%{text-shadow:0 0 50px rgba(245,158,11,.5)}
  66%,75%{text-shadow:0 0 40px rgba(245,158,11,.1)}}

/* Продолжение сохранённого теста (07.10): «Начать заново» - тихая ссылка рядом с тумблером */
.start-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.restart{background:none;border:0;padding:6px 0;font:inherit;font-size:15px;color:var(--ink2);cursor:pointer;
  text-decoration:underline dotted;text-underline-offset:4px}
.restart:hover{color:var(--ink)}

/* Задание 4 и 5, перетаскивание наверх и вниз (07.10). Экран плотный: на телефоне все шесть плашек должны быть видны сразу */
.mhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mhead .eyebrow{margin:0;font-size:12px;line-height:1.3}
.mart{width:36px;height:36px;flex:none;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.mscreen .scene{padding:9px 13px;margin-bottom:10px;font-size:15px;line-height:1.45}
.mscreen .task{font-size:15px;font-weight:400;color:var(--ink2);margin-bottom:10px}
.mscreen .task b{color:var(--ink);font-weight:500}
.mrank-wrap{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px}
.mrank-wrap .rank-axis{font-size:10px;padding:2px 0}
.mrank-wrap .rank-axis i{margin:6px 0;background:linear-gradient(var(--amber-hi),var(--line) 50%,var(--subtle))}
.mrank-wrap .rank-axis span:first-child{color:var(--amber)}
.mrank{display:grid;gap:6px;min-width:0;align-content:start}
.mk{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;user-select:none;-webkit-user-select:none;gap:4px;align-items:center;padding:8px 4px 8px 2px;border:1px solid var(--line2);background:var(--card);border-radius:var(--r);
  font-size:15px;line-height:1.38;transition:transform .2s var(--spring),border-color .2s,background .2s,color .2s;user-select:none;-webkit-user-select:none}
.mrank.loose .mk{transition:transform .5s var(--spring)}
.mk .grip{padding:6px 4px}
@media (pointer:fine){.mk{cursor:grab}.mk.drag{cursor:grabbing}}
.mk .rk-arrows button{width:26px;height:22px}
.mk.mid{background:transparent;border-color:var(--line);color:var(--muted)}
.mk.mid .grip{color:var(--line2)}
.mk.best{border-color:var(--amber);background:linear-gradient(0deg,rgba(245,158,11,.13),rgba(245,158,11,.13)),var(--card);color:var(--ink)}
.mk.best .grip{color:var(--amber)}
.mk.worst{border-color:var(--muted);background:linear-gradient(0deg,rgba(168,162,158,.12),rgba(168,162,158,.12)),var(--card);color:var(--ink)}
.mk.best::before,.mk.worst::before{content:attr(data-cap);position:absolute;left:30px;top:-8px;padding:0 6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--bg);border-radius:4px}
.mk.best::before{color:var(--amber)}
.mk.worst::before{color:var(--ink2)}
.mk.drag{z-index:5;transition:none;color:var(--ink);background:var(--card2);border-color:var(--amber-hi);box-shadow:0 24px 48px -12px rgba(0,0,0,.6),0 0 0 1px var(--amber-hi)}
@media (max-width:720px){
  .mart{width:30px;height:30px}
  .mhead .eyebrow{font-size:11px}
  .mscreen .scene{padding:8px 12px;font-size:14px;line-height:1.42}
  .mscreen .task{font-size:14px;line-height:1.4;margin-bottom:8px}
  .mrank-wrap{grid-template-columns:12px minmax(0,1fr);gap:6px}
  .mk{font-size:14px;line-height:1.34;padding:6px 4px 6px 2px}
  .mrank{gap:5px}
}

/* Повторно открытый отчёт: тихая ссылка «Пройти тест заново» под кнопками */
.retake{margin:-4px 0 8px;text-align:center}