/* ---------- palette D «Дашборд» + creo market (26.10, БРИФ_гамма_D.md, БРИФ_маркет_D.md) ----------
   Graphite, white text, ONE accent (--acc: D1 lime #C8FF2E or D2 electric blue #4D7CFF; html[data-acc=blue] switches it).
   Onest for everything (headings 800, tight), a monospace for numbers, labels and chips — "data". No serif, no italics, no glows.
   Loads last, after theme.css (whose colours tools/palette_D.py turned into neutral greys). Scale ×1.25: 11·14·16·20·25·31·39·49·61; grid 8 px. */
/* JetBrains Mono (OFL 1.1, github.com/JetBrains/JetBrainsMono v2.304, «да» Евгения 26.10 через Продюсера): 400 chips and labels, 500 numbers and prices, 700 SPIN.
   The fallback is a system monospace of the same width (0.6 em), so a swap moves nothing. */
@font-face{font-family:"JetBrains Mono";src:url('/fonts/JetBrainsMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url('/fonts/JetBrainsMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url('/fonts/JetBrainsMono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Fallback";src:local("SF Mono"),local("SFMono-Regular"),local("Menlo"),local("Consolas"),local("DejaVu Sans Mono");size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
body.ig-page,body.sp-page{--bg:#0B0B0D;--panel:#141417;--panel-2:#1A1A1E;--card:#141417;--text:#F5F5F7;--soft:#D1D1D6;--muted:#8E8E93;--dim:#6E6E73;
  --line:#26262B;--line-2:#34343A;--acc:#C8FF2E;--on-acc:#0B0B0D;--accent:var(--acc);--light:#F5F5F7;--ink:#0B0B0D;--mag:var(--acc);--grad:var(--acc);
  --f-body:Onest,"Onest Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--f-head:var(--f-body);
  --mono:"JetBrains Mono","JetBrains Fallback",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;background:var(--bg);color:var(--text)}
html[data-acc=blue] body.ig-page,html[data-acc=blue] body.sp-page{--acc:#4D7CFF;--on-acc:#FFFFFF}
.ig-page ::selection,.sp-page ::selection{background:var(--acc);color:var(--on-acc)}
/* type: Onest 800 headings, tight; one plain voice (no italics); numbers in the monospace, lining and tabular */
.ig-page :is(h1,h2,h3),.sp-page :is(h1,h2,h3){font-family:var(--f-body);font-weight:800;letter-spacing:-.03em;font-style:normal}
.ig-page h3,.sp-page h3{font-weight:700;letter-spacing:-.02em}
.ig-page h1>span,.sp-page h1>span,.hm-page .hm-hero h1 span{font-style:normal;color:var(--muted);background:none;-webkit-background-clip:border-box;background-clip:border-box}
.ig-page .v9-simple-head h2,.ig-page .v9-sec h2,.sp-page .sp-block-head h2,.hm-page .hm-end h2{font-size:clamp(31px,7vw,49px);line-height:1.08}
.ig-page :is(.hm-nums b,.hm-price-v,.th-win,.hm-s-price dd,.hm-s-flag,.hm-s-id code,.hm-s-ids code,.hm-s-prog-t,.hm-s-lab em),.sp-page .hm-price-v{font-family:var(--mono);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.03em;font-style:normal}
.ig-page .eyebrow,.sp-page .eyebrow{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ig-page .line-mark{background:var(--acc)}
/* buttons: the accent, dark text, square-ish */
.ig-page :is(.button-light,.hm-tg-big,.hm-s-cta,.pl-btn,.th-sticky,.hm-s-case-open,.hm-s-spin,.hm-s-rev-more),.sp-page .button-light{background:var(--acc);color:var(--on-acc);border-color:transparent;border-radius:12px;box-shadow:none;font-family:var(--f-body);font-weight:700;letter-spacing:0}
.ig-page :is(.button-light,.hm-tg-big,.hm-s-cta,.pl-btn,.th-sticky,.hm-s-case-open,.hm-s-spin,.hm-s-rev-more):hover,.sp-page .button-light:hover{background:var(--acc);filter:brightness(1.08);box-shadow:none}
.ig-page .hm-tg-big b,.ig-page .hm-tg-big i{color:var(--on-acc)}
.ig-page .header,.sp-page .header{border-bottom-color:var(--line)}
.ig-page .header .nav-contact,.sp-page .header .nav-contact{background:var(--acc);border-color:var(--acc);color:var(--on-acc);border-radius:10px;font-weight:600}
.ig-page .header .nav-contact:hover{background:var(--acc);filter:brightness(1.08)}
.ig-page .header nav .lang-switch a[aria-current],.sp-page .header nav .lang-switch a[aria-current]{background:var(--text);color:var(--bg)}
.ig-page .text-link{border-bottom-color:var(--line-2)}
.th-progress{background:var(--acc)!important}
.th-win{background:#0B0B0DD9;border-color:var(--line-2);color:var(--text)}

/* ---------- first screen: the promise, four facts in mono, the live card ---------- */
.hm-page .hm-hero-c .hm-hero-in{padding:40px 0 8px;gap:32px}
.hm-page .hm-hero-c .eyebrow{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px}
.hm-page .hm-hero-c .eyebrow .line-mark{width:6px;height:6px;border-radius:50%}
.hm-page .hm-hero-c h1{margin-top:24px;font-size:clamp(39px,10.4vw,61px);line-height:1.04;letter-spacing:-.035em}
.hm-page .hm-hero-c h1 span{display:inline}
.hm-page .hm-hero-c .hm-sub{font-size:16px;line-height:1.5;color:var(--muted);max-width:520px}
.hm-page .hm-hero-c .hm-sub b{color:var(--text);font-weight:500}
.hm-page .hm-hero-c .hm-ctas{gap:8px}
.hm-page .hm-hero-c .hm-ctas .button-light{height:48px;padding:0 24px;border-radius:12px;font-size:16px}
.hm-page .hm-hero-c .hm-ctas .text-link{height:48px;padding:0 24px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-size:16px;font-weight:500}
.hm-page .hm-hero-card{border-radius:20px;border:1px solid var(--line);box-shadow:none}
.hm-page .hm-hero-cap{background:#0B0B0DCC;border-radius:8px;font:400 11px/1 var(--mono);padding:10px 12px;letter-spacing:.02em}
.hm-page .hm-hero-cap::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--acc);vertical-align:1px}
.hm-page .hm-hero-nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line)}
.hm-page .hm-hero-nums li,.hm-page .hm-hero-nums li+li{padding:16px;background:var(--panel);border:0}
.hm-page .hm-hero-nums b{font-size:31px;font-weight:500;line-height:1.1;color:var(--text)}
.hm-page .hm-hero-nums li:first-child b{color:var(--acc)}
.hm-page .hm-hero-nums span{margin-top:8px;font-size:14px;color:var(--muted)}
@media(min-width:900px){
  .hm-page .hm-hero-c .hm-hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:64px;row-gap:32px;padding:64px 0 8px}
  .hm-page .hm-hero-c .hm-sub{font-size:20px}
  .hm-page .hm-hero-nums{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hm-page .hm-hero-nums li,.hm-page .hm-hero-nums li+li{padding:24px}
  .hm-page .hm-hero-nums b{font-size:39px}
}

/* ---------- prices: a clear table; steps with hours ---------- */
.hm-page .hm-prices{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hm-page .hm-price{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:16px;border:0;border-top:1px solid var(--line);border-radius:0;background:var(--panel);box-shadow:none}
.hm-page .hm-price:first-child{border-top:0}
.hm-page .hm-price h3{font-size:16px}
.hm-page .hm-price p:not(.hm-price-v){grid-column:1;font-size:14px;color:var(--muted)}
.hm-page .hm-price-v{grid-column:2;grid-row:1/span 2;font-size:25px;font-weight:500;text-align:right;color:var(--text)}
.hm-page .hm-price-main .hm-price-v{color:var(--acc)}
@media(min-width:900px){.hm-page .hm-price{grid-template-columns:240px 1fr 160px;padding:24px}.hm-page .hm-price p:not(.hm-price-v){grid-column:2;grid-row:1;font-size:16px}.hm-page .hm-price-v{grid-column:3;grid-row:1;font-size:31px}}
.hm-page .hm-steps li{border-color:var(--line);border-radius:16px;background:transparent}
.hm-page .hm-steps span{background:var(--panel);color:var(--text);border:1px solid var(--line);font-family:var(--mono);font-weight:500}
.hm-page .hm-seal{border-color:var(--acc);color:var(--acc);box-shadow:none;font-family:var(--mono)}
.hm-page .hm-guarantee{border-color:var(--line);background:var(--panel);border-radius:16px}

/* ---------- the slot: symbols of the studio set on graphite cells, the accent on the wait and the win ---------- */
.ig-page .hm-s-machine{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:none}
.ig-page .hm-s-top h2{font-family:var(--f-body);font-weight:800;letter-spacing:-.03em;color:var(--text)}
.ig-page .hm-s-kick{font-family:var(--mono);color:var(--muted)}.ig-page .hm-s-kick i{background:var(--acc)}
.ig-page .hm-s-lab{font-family:var(--mono);letter-spacing:.04em;color:var(--muted)}
.ig-page .hm-s-lab em{color:var(--text)}
.ig-page .hm-s-reel.on .hm-s-lab::after{background:var(--acc)}
.ig-page .hm-s-win{background:#121215;box-shadow:inset 0 0 0 1px var(--line);border-radius:12px}
.ig-page .hm-s-reel.on:not(.held) .hm-s-win{box-shadow:inset 0 0 0 1px var(--line-2)}
.ig-page .held .hm-s-win{box-shadow:inset 0 0 0 1.5px var(--acc)}
.ig-page .hm-s-hold{font-family:var(--mono);letter-spacing:.06em}
.ig-page .hm-s-hold[aria-pressed="true"] i{background:var(--acc);box-shadow:none}
.ig-page .hm-s-cell.sym,.ig-page .hm-s-cell.gem{background:radial-gradient(82% 60% at 50% 38%,#26262C,#141417 72%)}
.ig-page .hm-s-cell .hm-s-svg{position:absolute;left:50%;top:41%;width:66%;height:auto;transform:translate(-50%,-50%);display:block}
.ig-page .hm-s-cell .hm-s-svg svg.sy{width:100%;height:auto;stroke:none;fill:initial;filter:drop-shadow(0 6px 10px #0009)}
.ig-page :is(.hm-s-cell.sym,.hm-s-cell.gem) b{font-family:var(--f-body);font-weight:600;text-shadow:0 1px 8px #000}
.ig-page :is(.hm-s-cell.sym,.hm-s-cell.gem) small{font-family:var(--mono);color:var(--muted);letter-spacing:-.02em}
.ig-page .hm-s-gem{background:radial-gradient(circle at 34% 27%,#ffffff40,transparent 24%),#2A2A30;box-shadow:inset 0 0 0 1.5px var(--line-2),0 8px 18px #0009}
/* every stop: the symbol jumps once and a thin accent shine runs over it */
.ig-page .hm-s-cell.hit .hm-s-svg{animation:dJump .42s cubic-bezier(.3,1.6,.5,1)}
.ig-page .hm-s-cell.hit::before{background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--acc) 38%,transparent) 50%,transparent 65%) no-repeat;background-size:250% 100%;animation:dShine .55s ease-out forwards;opacity:1}
@keyframes dJump{40%{translate:0 -9%}70%{translate:0 2%}}
@keyframes dShine{from{background-position:120% 0}to{background-position:-30% 0}}
.ig-page .hm-s-cell.boom .hm-s-svg{animation:slBoom .46s cubic-bezier(.3,0,.6,1) forwards;animation-delay:inherit}
.ig-page .hm-s-cell.boom::after{border-color:var(--acc)}
.ig-page .hm-s-cell.drop .hm-s-svg{animation:slDrop .55s cubic-bezier(.3,1.35,.5,1) both}
.ig-page .hm-s-win.tease{box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent),0 0 28px color-mix(in srgb,var(--acc) 30%,transparent)}
.ig-page .hm-s-meter b{background:var(--acc)}
.ig-page .hm-s-prog.full .hm-s-prog-l{color:var(--acc)}
@keyframes slFull{40%{box-shadow:0 0 14px var(--acc)}}
.ig-page .hm-s-spin{font-family:var(--mono);font-weight:700;letter-spacing:.24em;border-radius:12px}
.ig-page .hm-s-sound{border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.ig-page .hm-s-rev{background:#0B0B0DE6}
.ig-page .hm-s-rev-flag{font-family:var(--f-body);font-weight:800;letter-spacing:-.03em;font-style:normal}
.ig-page .hm-s-rev-flag.jack{font-style:normal;color:var(--acc)}
.ig-page .hm-s-rev-parts [aria-pressed="true"] img{box-shadow:0 0 0 1.5px var(--acc)}
.ig-page .hm-s-rev-play span{background:var(--acc);color:var(--on-acc)}
.ig-page .hm-s-rev-again{border-radius:12px}.ig-page .hm-s-rev-more{border-radius:12px}
.ig-page .hm-s-say{background:#F5F5F7;color:#0B0B0D}
.hm-s-fx i{background:var(--acc)!important;box-shadow:none!important}
.ig-page .hm-s-flag.jack{color:var(--acc)}
.ig-page .hm-s-row button[aria-pressed="true"]{background:var(--text);color:var(--bg)}

/* ---------- the market ---------- */
.mk{--r:16px}
.mk-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px}
.mk-kick{font:400 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mk-head h2{margin-top:8px;font-size:clamp(31px,7vw,49px);line-height:1.08}
.mk-count{font:400 14px/1.4 var(--mono);color:var(--muted)}.mk-count b{color:var(--text);font-weight:500}
.mk-for a{display:flex;align-items:center;gap:12px;margin-top:24px;padding:16px;border-radius:var(--r);background:var(--acc);color:var(--on-acc);font-weight:600}
.mk-for .ic-d{width:20px;height:20px}.mk-for .sy-l{fill:var(--on-acc)}.mk-for i{margin-left:auto;font-style:normal}
.mk-for .sy-kc{stroke:var(--on-acc)}
.mk-drop{margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.mk-drop-h{display:flex;align-items:center;gap:8px;font-size:14px}.mk-drop-h .ic-d{width:20px;height:20px}
.mk-drop-h span{font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mk-drop ul{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.mk-drop ul::-webkit-scrollbar{display:none}
.mk-drop button{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:14px;white-space:nowrap;transition:border-color .2s ease-out}
.mk-drop button:hover{border-color:var(--acc)}
.mk-drop time{font:500 11px/1 var(--mono);color:var(--acc)}.mk-drop button span{color:var(--muted)}
.mk-types{display:flex;gap:8px;margin-top:24px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.mk-types::-webkit-scrollbar{display:none}
.mk-types button{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:14px;font-weight:500;color:var(--soft);transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out}
.mk-types button .ic-d{width:18px;height:18px}
.mk-types button i{font:400 11px/1 var(--mono);font-style:normal;color:var(--muted)}
.mk-types button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.mk-types button[aria-pressed="true"] i{color:var(--bg)}
.mk-filters{display:grid;gap:8px;margin-top:8px}
.mk-f{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}.mk-f::-webkit-scrollbar{display:none}
.mk-f span{flex:none;width:72px;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mk-f button{flex:none;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font:400 11px/1 var(--mono);color:var(--soft);transition:border-color .2s ease-out,background .2s ease-out}
.mk-f button[aria-pressed="true"]{border-color:var(--acc);color:var(--text);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.mk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:24px}
.mk-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:border-color .25s ease-out,transform .25s ease-out}
.mk-card[hidden]{display:none}
.mk-card:hover{border-color:var(--line-2)}
.mk-card.lit{animation:mkLit 1.2s ease-out}
@keyframes mkLit{0%,40%{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}}
.mk-type{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 6px;border-radius:8px;background:#0B0B0DCC;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 11px/1 var(--f-body);color:var(--text)}
.mk-type .ic-d{width:16px;height:16px}
.mk-pic{position:relative;display:block;width:100%;aspect-ratio:9/13;overflow:hidden;background:#121215}
.mk-pic img,.mk-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-loop{opacity:0;transition:opacity .3s ease-out}.mk-loop.on{opacity:1}
.mk-play{position:absolute;right:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:8px;background:#0B0B0DCC;font:400 11px/1 var(--mono);color:var(--text)}
.mk-soon{display:grid;place-items:center;align-content:center;gap:8px;background:repeating-linear-gradient(135deg,#141417 0 10px,#17171B 10px 20px)}
.mk-soon-ic .ic-d{width:48px;height:48px;opacity:.5}
.mk-soon-l{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mk-body{display:flex;flex-direction:column;flex:1;gap:8px;padding:12px}
.mk-body h3{font-size:16px;line-height:1.2}
.mk-line{font-size:14px;line-height:1.4;color:var(--muted)}
.mk-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.mk-chips li{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px 0 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);font:400 11px/1 var(--mono);letter-spacing:-.02em;color:var(--soft);white-space:nowrap;max-width:100%;overflow:hidden}
.mk-chips li span{overflow:hidden;text-overflow:ellipsis}
.mk-chips .ic-d{flex:none;width:14px;height:14px}
.mk-buy{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.mk-price{font:500 20px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.mk-price small{font-size:11px;color:var(--muted);margin-right:2px;letter-spacing:0}
.mk-p-soon{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.mk-add,.mk-ask{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:10px;background:var(--acc);color:var(--on-acc);font-size:14px;font-weight:700;white-space:nowrap;transition:filter .2s ease-out,transform .2s ease-out}
.mk-add .ic-d{width:16px;height:16px}.mk-add .sy-kc{stroke:var(--on-acc);stroke-width:3}
.mk-add:hover,.mk-ask:hover{filter:brightness(1.08)}
.mk-add:active{transform:scale(.96)}
.mk-add[aria-pressed="true"]{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--acc)}
.mk-add[aria-pressed="true"] .sy-kc{stroke:var(--acc)}
.mk-ask{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:500}
.mk-empty{margin-top:16px;color:var(--muted)}
@media(max-width:420px){.mk-buy{flex-direction:column;align-items:stretch}.mk-add,.mk-ask{justify-content:center}.mk-line{display:none}}
@media(min-width:900px){
  .mk-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .mk-body{padding:16px}
  .mk-card:first-child{grid-column:span 2;grid-row:span 2}
  .mk-card:first-child .mk-pic{aspect-ratio:auto;flex:1;min-height:420px}
  .mk-card:first-child .mk-body{flex:none}
  .mk-card:first-child h3{font-size:25px}
  .mk-card:hover{transform:translateY(-2px)}
}
@media(min-width:1280px){.mk-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* the pack bar: floats at the bottom while something is in the pack */
.mk-cart{position:fixed;left:50%;bottom:16px;z-index:60;display:none;align-items:center;gap:8px;width:min(calc(100% - 32px),640px);padding:8px;border:1px solid var(--line-2);border-radius:16px;background:#141417F2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px #000a;transform:translateX(-50%);flex-wrap:wrap;color:var(--text);font-family:var(--f-body)}
.mk-cart.on{display:flex}
.mk-cart.bump{animation:mkBump .32s ease-out}
@keyframes mkBump{40%{transform:translateX(-50%) scale(1.03)}}
.mk-cart-list{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:40px;padding:0 8px;font:400 14px/1.2 var(--mono);letter-spacing:-.02em;text-align:left;color:var(--text);background:none;border:0}
.mk-cart-list b{font-family:var(--f-body);font-weight:700;letter-spacing:0}
.mk-cart-list .ic-d{flex:none;width:20px;height:20px}
.mk-cart-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;background:var(--acc);color:var(--on-acc);font-weight:700;font-size:14px;white-space:nowrap}
.mk-cart-go .ic-d{width:18px;height:18px}.mk-cart-go .sy-l{fill:var(--on-acc)}.mk-cart-go .sy-a{fill:var(--acc);filter:brightness(.6)}
.mk-cart-items{list-style:none;flex-basis:100%;margin:0;padding:8px;display:grid;gap:4px;border-top:1px solid var(--line)}
.mk-cart-items[hidden]{display:none}
.mk-cart-items li{display:flex;align-items:center;gap:8px;font-size:14px}.mk-cart-items small{font:400 11px/1 var(--mono);color:var(--muted)}
.mk-cart-items button{margin-left:auto;width:32px;height:32px;border-radius:8px;color:var(--muted);font-size:20px;background:none;border:0}
.mk-cart-note{display:block!important;margin-top:4px;font-size:11px!important;color:var(--muted);line-height:1.4}
@media(max-width:480px){.mk-cart{bottom:8px;padding:8px}.mk-cart-list{flex-basis:100%}.mk-cart-go{flex:1}}
body.has-pack .th-sticky{display:none!important}
body.has-pack{padding-bottom:96px}
@media(prefers-reduced-motion:reduce){.mk-card,.mk-cart{transition:none;animation:none}.ig-page .hm-s-cell :is(.hm-s-svg){animation:none!important}}

/* /for/ pages: on a phone the Telegram link sits on its own line under the download button — the row never re-wraps when the font arrives (CLS) */
@media(max-width:560px){.sp-page .sp-ctas .text-link{flex-basis:100%;width:max-content;max-width:100%}}

/* the main visual of the first screen (26.10, Евгений chooses H1 автомат / H2 прорыв / H3 стена — визуал/превью/): a 16:9 picture with
   our real recordings in its screens; when it is on (the figure is not [hidden]) it takes the card's place and the live card sits in its corner */
.hm-page .hm-hero-vis{position:relative;margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/2;background:var(--panel)}
.hm-page .hm-hero-vloop{position:absolute;left:0;top:0;transform-origin:0 0;object-fit:cover;opacity:0;transition:opacity .4s ease-out;pointer-events:none}
.hm-page .hm-hero-vloop.ready{opacity:1}
.hm-page .hm-hero-vis :is(img,picture){display:block;width:100%;height:100%;object-fit:cover}
.hm-page .hm-hero-c:has(.hm-hero-vis:not([hidden])) .hm-hero-card{width:min(34%,150px);justify-self:end;margin-top:-104px;margin-right:12px;z-index:2;border-radius:14px;box-shadow:0 16px 40px #000c}
.hm-page .hm-hero-c:has(.hm-hero-vis:not([hidden])) .hm-hero-cap{left:6px;right:6px;bottom:6px;padding:6px 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:900px){
  .hm-page .hm-hero-c:has(.hm-hero-vis:not([hidden])) .hm-hero-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .hm-page .hm-hero-c:has(.hm-hero-vis:not([hidden])) .hm-hero-vis{grid-column:2;grid-row:1}
  .hm-page .hm-hero-c:has(.hm-hero-vis:not([hidden])) .hm-hero-card{grid-column:2;grid-row:1;align-self:end;max-width:200px;margin:0 -16px -32px 0}
}
/* the statics gallery (market.js) */
.mk-gal{width:min(calc(100% - 32px),720px);max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line-2);border-radius:20px;background:var(--panel);color:var(--text);overflow:auto}
.mk-gal::backdrop{background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mk-gal-in{position:relative;display:grid;gap:16px;padding:16px}
.mk-gal-x{position:absolute;top:8px;right:8px;z-index:2;width:40px;height:40px;border-radius:10px;background:#0B0B0DCC;color:var(--text);font-size:24px;line-height:1}
.mk-gal-fig{margin:0;display:grid;gap:8px;justify-items:center}
.mk-gal-fig img{display:block;width:auto;max-width:100%;height:auto;max-height:min(62dvh,640px);border-radius:12px;background:#121215}
.mk-gal-fig figcaption{font:400 14px/1.4 var(--mono);color:var(--soft);text-align:center}
.mk-gal-nav{display:flex;align-items:center;justify-content:center;gap:16px;font:500 14px/1 var(--mono)}
.mk-gal-nav button{width:48px;height:40px;border-radius:10px;border:1px solid var(--line-2);color:var(--text);font-size:18px;transition:border-color .2s ease-out}
.mk-gal-nav button:hover{border-color:var(--acc)}
.mk-gal-th{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.mk-gal-th::-webkit-scrollbar{display:none}
.mk-gal-th button{display:block;width:56px;height:70px;border-radius:8px;overflow:hidden;border:1px solid var(--line);opacity:.6;transition:opacity .2s ease-out,border-color .2s ease-out}
.mk-gal-th button[aria-pressed="true"]{opacity:1;border-color:var(--acc)}
.mk-gal-th img{width:100%;height:100%;object-fit:cover}
.mk-gal-note{font:400 11px/1.4 var(--mono);letter-spacing:.04em;color:var(--muted);text-align:center}

/* the wall on a phone (26.10, Продюсер: «мелкая, не разъёбывает»): full bleed, a tight 4:5 crop with big phones; a tiny blurred placeholder
   (LQIP, ~200 B inline) shows the same wall until the picture arrives — no dark block. The live card is smaller and lower, off the lime centre */
.hm-page .hm-hero-vis{background:var(--lq) center/cover no-repeat}
@media(max-width:899px){
  .hm-page .hm-hero-c:has(.hm-hero-vis:not([hidden])) .hm-hero-vis{margin-inline:calc(var(--gutter) * -1);aspect-ratio:4/5;border-radius:0;border-inline:0;background-image:var(--lqm)}
  .hm-page .hm-hero-c:has(.hm-hero-vis:not([hidden])) .hm-hero-card{width:min(26%,120px);margin-top:-72px;margin-right:0;border-radius:12px}
  .hm-page .hm-hero-c:has(.hm-hero-vis:not([hidden])) .hm-hero-cap{display:none}
}
/* logo 2.0 L3 «Глаз» (26.10, «да» Евгения): the eye mark comes alive once on load (CSS inside the SVG, respects reduced motion),
   the two-line wordmark in curves next to it; the old .identity img size rule of style.css is overridden */
.ig-page .identity,.sp-page .identity{gap:10px}
.ig-page .identity .identity-eye,.sp-page .identity .identity-eye{width:30px;height:30px}
.ig-page .identity .identity-word,.sp-page .identity .identity-word{width:auto;height:26px}
@media(max-width:480px){.ig-page .identity .identity-word,.sp-page .identity .identity-word{height:22px}}
/* the wordmark goes where there is room: on narrow phones (≤ 420 px) the header keeps the mark alone, the language switch and Telegram need the width */
@media(max-width:420px){.ig-page .identity .identity-word,.sp-page .identity .identity-word{display:none}.ig-page .identity .identity-eye,.sp-page .identity .identity-eye{width:32px;height:32px}}
/* the footer: the static mark (no animation down there) with the wordmark — it has room on every width */
.ig-page .footer .identity .identity-eye{width:26px;height:26px}
.ig-page .footer .identity .identity-word{display:block;height:22px;width:auto}
/* «1:47 · one creo → any GEO» (26.10, Евгений: «быстро адаптируем под разное гео — выразить явно»): one full-width card;
   a computer — text left, two captioned phones (US · MX) right + a Quincena chip; a phone — the switch US · MX · Quincena over one phone */
.mk-geo.mk-card{grid-column:1/-1;grid-row:auto;display:grid;grid-template-areas:"head" "vis" "body"}
.mk-geo-head{grid-area:head;padding:16px 16px 0}
.mk-geo-type{display:inline-flex;align-items:center;gap:6px;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mk-geo-type .ic-d{width:16px;height:16px}
.mk-geo.mk-card .mk-geo-head h3{margin-top:8px;font-size:22px;line-height:1.15;letter-spacing:-.02em}
.mk-geo-vis{grid-area:vis;min-width:0;padding:12px 16px 0}
.mk-geo-lead{font-size:14px;line-height:1.4;color:var(--soft);text-wrap:balance}
.mk-geo-tabs{display:flex;gap:4px;margin-top:12px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.mk-geo-tabs button{flex:1;height:36px;border-radius:8px;font:500 13px/1 var(--mono);color:var(--soft);transition:background .2s ease-out,color .2s ease-out}
.mk-geo-tabs button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.mk-geo-ph{margin-top:12px}
.mk-geo-f{display:none;margin:0}
.mk-geo[data-gsel="us"] .mk-geo-f[data-gk="us"],.mk-geo[data-gsel="mx"] .mk-geo-f[data-gk="mx"],.mk-geo[data-gsel="q"] .mk-geo-f[data-gk="q"]{display:block}
.mk-geo.mk-card .mk-pic{aspect-ratio:9/16;min-height:0;flex:none;max-width:280px;margin:0 auto;border-radius:12px}
.mk-geo-f figcaption{margin-top:8px;text-align:center;font:400 12px/1.3 var(--mono);letter-spacing:-.02em;color:var(--text)}
.mk-geo-chip{display:none}
.mk-geo-body{grid-area:body;display:flex;flex-direction:column;gap:12px;padding:16px}
.mk-geo-pr{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.mk-geo-pr li{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:12px;color:var(--muted)}
.mk-geo-pr b{font:500 20px/1 var(--mono);letter-spacing:-.03em;color:var(--text)}
.mk-geo .mk-buy{margin-top:0;padding-top:0}
@media(min-width:900px){
  .mk-geo.mk-card{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head vis" "body vis";column-gap:32px;align-items:start}
  .mk-geo.mk-card:hover{transform:none}
  .mk-geo-head{padding:32px 0 0 32px}
  .mk-geo.mk-card .mk-geo-head h3{font-size:39px;letter-spacing:-.03em}
  .mk-geo-body{align-self:end;padding:0 0 32px 32px;max-width:520px}
  .mk-geo-vis{padding:32px 32px 32px 0;width:520px}
  .mk-geo-tabs{display:none}
  .mk-geo-ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
  .mk-geo .mk-geo-f{display:block}.mk-geo .mk-geo-fq{display:none!important}
  .mk-geo.mk-card .mk-pic{max-width:none}
  .mk-geo-chip{display:flex;align-items:center;gap:8px;width:100%;height:44px;margin-top:16px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:14px;transition:border-color .2s ease-out}
  .mk-geo-chip:hover{border-color:var(--acc)}.mk-geo-chip .ic-d{width:18px;height:18px}.mk-geo-chip span{flex:1;text-align:left}.mk-geo-chip i{font-style:normal;color:var(--acc)}
}
/* the Mexico card of «Ваше гео» opens the MX film (26.10) */
.geo-watch{font:500 12px/1.3 var(--mono);letter-spacing:-.02em;color:var(--acc)}
/* Prices as value cards (26.10, tools/build_prices.py): the path switch → 6 cards of one structure → a compact comparison table */
.pv{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.pv>*{min-width:0}
.pv-path{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
/* 28.10 (Евгений): no public prices — the block opens with what we do and what the price depends on, then the free spec and the guarantee */
.pv-lead{padding:20px 20px 18px;border-radius:16px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line)}
.pv-lead-1{margin:0;font:600 18px/1.35 var(--sans);color:var(--text)}
.pv-lead-2{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--soft)}
.pv-lead-2 a{color:var(--acc);font-weight:500;white-space:nowrap}
.pv-lead-3{margin:10px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
@media (min-width:600px){.pv-lead{padding:24px 28px}.pv-lead-1{font-size:20px}}
.pv-path-l{font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pv-path-b{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.pv-path-b::-webkit-scrollbar{display:none}
.pv-path-b button{flex:none;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:14px;font-weight:500;color:var(--soft);white-space:nowrap;transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out}
.pv-path-b button:hover{border-color:var(--line-2);color:var(--text)}
.pv-path-b button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.pv-grid{display:grid;grid-template-columns:1fr;gap:8px}
.pv-card{display:flex;flex-direction:column;gap:16px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);transition:border-color .25s ease-out,opacity .25s ease-out,box-shadow .25s ease-out}
.pv.has-pick .pv-card:not(.is-pick){opacity:.55}
.pv-card.is-pick{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.pv-top{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px}
.pv-top h3{font-size:18px;line-height:1.2}
.pv-price{grid-row:1/span 2;grid-column:2;font:500 31px/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;color:var(--text)}
.pv-main .pv-price{color:var(--acc)}
.pv-time{font:400 12px/1 var(--mono);color:var(--muted)}
.pv-dl{display:grid;gap:4px;margin:0}
.pv-dl dt{margin-top:8px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pv-dl dt:first-child{margin-top:0}
.pv-dl dd{margin:0;font-size:14px;line-height:1.45;color:var(--soft)}
.pv-dl dd:first-of-type{color:var(--text)}
.pv-n{font-family:var(--mono);font-size:.94em;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.pv-ex{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;font-size:14px;font-weight:500;color:var(--acc);text-align:left}
.pv-ex i{font-style:normal;transition:transform .2s ease-out}.pv-ex:hover i{transform:translateX(3px)}
.pv-cmp{margin-top:8px}
.pv-cmp-h{font-size:18px}
.pv-cmp-w{margin-top:12px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.pv-cmp table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px}
.pv-cmp th,.pv-cmp td{padding:10px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.pv-cmp thead th,.pv-cmp thead td{border-top:0;font-weight:600;color:var(--text)}
.pv-cmp tbody th{position:sticky;left:0;z-index:1;background:var(--panel);font-weight:400;color:var(--muted);min-width:132px}
.pv-cmp td{color:var(--soft)}
.pv-more{margin-top:12px;font-size:14px;color:var(--muted)}.pv-more a{color:var(--acc);font-weight:500}
@media(min-width:700px){.pv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.pv-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pv-card{padding:24px}.pv-cmp table{font-size:14px}}
@media(prefers-reduced-motion:reduce){.pv-card,.pv-ex i{transition:none}}
.mk-geo{scroll-margin-top:88px}
.mk-geo-how{display:grid;gap:8px;margin:12px 0 0}
.mk-geo-how div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.mk-geo-how dt{font:400 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mk-geo-how dd{margin:0;font-size:14px;line-height:1.45;color:var(--soft)}
@media(min-width:900px){.mk-geo-how{margin-top:24px;max-width:480px}.mk-geo-how dd{font-size:16px}}
.th-sticky.on.off{opacity:0;transform:translateY(8px);pointer-events:none}
/* the comparison table on a phone (26.10, Продюсер): sticky first column, the right edge fades + «scroll →» while there is more */
.pv-cmp-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pv-cmp-hint{font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);transition:opacity .2s ease-out}
.pv-cmp-w{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.pv-cmp-w.at-end{-webkit-mask-image:none;mask-image:none}
.pv-cmp:has(.at-end) .pv-cmp-hint{opacity:0}
@media(max-width:699px){.pv-cmp tbody th{min-width:112px;max-width:112px;box-shadow:1px 0 0 var(--line)}.pv-cmp table{min-width:720px}}
/* 26.10 evening (Продюсер): the geo card — a language/currency tag on each phone, the benefit line, chips and prices right under the text */
.mk-geo-tag{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;background:#0B0B0DCC;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--text)}
.mk-geo-win{margin-top:12px;font-size:15px;line-height:1.4;font-weight:600;color:var(--text);text-wrap:balance}
@media(min-width:900px){.mk-geo.mk-card{grid-template-rows:auto 1fr}.mk-geo-body{align-self:start;padding-top:24px}.mk-geo-win{margin-top:24px;max-width:480px;font-size:18px}}
/* prices: «Products» and «Add-ons to a video» (smaller cards in one row); «Start here» on the first pack with the per-version anchor */
.pv-group{margin-top:8px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pv-badge{align-self:flex-start;display:inline-flex;align-items:center;height:24px;margin-bottom:-4px;padding:0 10px;border-radius:999px;background:var(--acc);color:var(--on-acc);font:600 12px/1 var(--f-body)}
.pv-anchor{margin-top:-8px;font-size:13px;color:var(--soft)}
.pv-add{gap:12px;padding:16px}
.pv-add .pv-price{font-size:25px}
@media(min-width:1100px){.pv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pv-grid-add{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-add{padding:20px 24px}.pv-add .pv-dl{grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:20px}.pv-add .pv-dl dt{margin-top:0}}
/* «Any GEO in 24 h» (26.10, tools/build_geo.py): the four ready versions as examples, then the made-to-order grid with the language and the currency */
.geo-k{margin:16px 0 8px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.geo-more{margin-top:24px}
.geo-more .geo-k{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid var(--acc);border-radius:999px;color:var(--acc)}
.geo-grid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.geo-grid li{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.geo-grid b{font-size:14px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geo-grid span{font:400 11px/1.2 var(--mono);letter-spacing:-.02em;color:var(--muted)}
.geo-grid .geo-you{padding:0;border-color:var(--acc);background:transparent}
.geo-grid .geo-you a{display:flex;flex-direction:column;gap:4px;height:100%;padding:10px 12px}
.geo-grid .geo-you b{color:var(--acc)}
.geo-legal{margin-top:12px;font-size:12px;line-height:1.45;color:var(--muted)}
@media(min-width:700px){.geo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1100px){.geo-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* positioning (26.10, Евгений): the catalogue = examples; one line on the first screen; «Any format for the task» after the catalogue */
.hm-any{margin-top:12px;font-size:15px;line-height:1.45;color:var(--soft);max-width:560px}
.mk-how{margin-top:12px;font-size:14px;line-height:1.45;color:var(--muted);max-width:720px}
/* the wall as a way into the work (26.10, assets/wall.js): a tap target over every phone, the lime frame walks with «▶ Tap to watch» */
.hm-hero-vis .wl-svg{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible}
.wl-tile{fill:rgba(0,0,0,0);stroke:transparent;stroke-width:2.5px;vector-effect:non-scaling-stroke;stroke-linejoin:round;pointer-events:all;cursor:pointer;outline:none;transition:stroke .3s ease-out}
.wl-tile.on,.wl-tile:focus-visible{stroke:var(--acc);filter:drop-shadow(0 0 6px rgba(200,255,46,.55))}
.wl-tag{position:absolute;z-index:4;translate:-50% 8px;padding:5px 10px;border-radius:999px;background:#0B0B0DE6;border:1px solid var(--acc);font:500 11px/1 var(--mono);color:var(--acc);white-space:nowrap;pointer-events:none;transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}
.wl-tag.up{translate:-50% calc(-100% - 8px)}
@media(prefers-reduced-motion:reduce){.wl-tag{transition:none}}
/* «Game mechanics: prelanders and playable» (26.10, tools/build_playable_block.py): three scenarios — where → who → what → delivery */
.pl-scen{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.pl-sc{padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.pl-sc h3{font-size:17px;line-height:1.2}
.pl-sc dl{display:grid;gap:4px;margin:12px 0 0}
.pl-sc dt{margin-top:8px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.pl-sc dt:first-child{margin-top:0}
.pl-sc dd{margin:0;font-size:14px;line-height:1.45;color:var(--soft)}
.pl-bundle{margin:12px 0 16px;font-size:14px;color:var(--muted)}
@media(min-width:900px){.pl-scen{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pl-sc{padding:20px}}
/* the catalogue on a phone (26.10): one row of formats, «Showing: Stream · 3» under it, the cards come in, the pack bar folds while scrolling */
.mk-shown{min-height:20px;margin-top:8px;font:500 12px/20px var(--mono);color:var(--acc)}
.mk-card.pop{animation:mkPop .38s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes mkPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.mk-cart{transition:width .25s ease-out,left .25s ease-out,transform .25s ease-out,padding .25s ease-out}
.mk-cart.mini{left:auto;right:12px;width:auto;transform:none;padding:6px}
.mk-cart.mini .mk-cart-go,.mk-cart.mini .mk-cart-items,.mk-cart.mini .mk-cart-list span{display:none}
.mk-cart.mini .mk-cart-list{flex-basis:auto}
@media(prefers-reduced-motion:reduce){.mk-card.pop{animation:none}}
/* «Coming soon» + signs of life (26.10, assets/soon.js, tools/soon.json) */
.mk-upd{font:400 12px/1.4 var(--mono);color:var(--acc)}
.sn{margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.sn-h{display:flex;align-items:center;gap:8px;font-size:14px}.sn-h .ic-d{width:20px;height:20px}.sn-cd{margin-left:auto;font:500 12px/1 var(--mono);color:var(--acc)}
.sn-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.sn-card{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.sn-card.is-next{border-color:var(--acc)}
.sn-pic{flex:none;display:grid;place-items:center;width:40px;height:52px;border-radius:8px;background:linear-gradient(160deg,#2A2A31,#141417)}
.sn-pic .ic-d{width:20px;height:20px;opacity:.55;filter:blur(.4px)}
.sn-card div{min-width:0;flex:1}.sn-card b{display:block;font-size:14px;line-height:1.25}.sn-card small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.sn-card time{flex:none;font:500 12px/1 var(--mono);color:var(--soft)}.sn-card.is-next time{color:var(--acc)}
.sn-remind{display:inline-flex;align-items:center;min-height:40px;margin-top:12px;padding:0 14px;border:1px solid var(--acc);border-radius:10px;color:var(--acc);font-size:14px;font-weight:600}
.sn-note{margin-top:6px;font-size:12px;color:var(--muted)}
@media(min-width:900px){.sn-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sn-card{padding:0}.sn-card a{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px}.sn-card:hover{border-color:var(--line-2)}

/* ---------- first screen: the pack machine v2 «Люкс-аркада» (27.10, Евгений chose C; СПЕЦ — визуал/машина_v2/СПЕЦ_машина_v2.md, mock-up winner.html;
   assets/machine.js, markup — tools/build_hero_machine.py). Lacquer chassis, a machined SPIN puck, the lime current only on an event. ---------- */
.hm-machine .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* =====================================================================
   MACHINE — luxury arcade
   ===================================================================== */
.hm-machine{
  --acc-rgb:200,255,46;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);--beat:480ms;
  --sans:"Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"JetBrains Mono","JetBrains Fallback",ui-monospace,monospace;
  --pad:10px;--rg:10px;--wr:10px;--lh:20px;--lg:8px;--gap:4px;--oh:50px;--d:80px;
  --tw:calc((min(100vw,560px) - 2*var(--gutter,16px) - 2*var(--pad) - 2*var(--rg))/3);
  --th:calc(var(--tw)*16/9);
  position:relative;isolation:isolate;margin:0;width:100%;min-width:0
}
@media (min-width:600px){
  .hm-machine{--pad:20px;--rg:14px;--wr:12px;--lh:22px;--lg:10px;--gap:6px;--oh:62px;--d:100px;
    --tw:min(150px,calc((100vw - 2*var(--gutter,16px) - 2*var(--pad) - 2*var(--rg))/3));justify-self:center;
    width:calc(3*var(--tw) + 2*var(--rg) + 2*var(--pad))}   /* fixed: the chassis never changes width with the result line */
}
@media(min-width:900px){.hm-machine{--rg:16px;--pad:24px;--tw:clamp(104px,min(11.4vw,calc((100vh - 400px)*.5625)),176px)}}
/* light spill on the "floor" under the machine on a win */
.hm-machine::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;bottom:-30px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--acc-rgb),.2),rgba(var(--acc-rgb),0));opacity:0;pointer-events:none}
.hm-machine.win::after{animation:mc-spill 1.7s var(--ease) both}
@keyframes mc-spill{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* chassis: deep black lacquer with a clear-coat sheen */
.mc-body{
  position:relative;isolation:isolate;padding:12px var(--pad) 14px;border-radius:24px;
  background:
    radial-gradient(130% 55% at 50% -12%,rgba(255,255,255,.085),rgba(255,255,255,0) 60%),
    linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.03) 44%,rgba(255,255,255,0) 53%),
    linear-gradient(180deg,#1A1A1E 0%,#121215 42%,#0D0D0F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -14px 28px -14px rgba(0,0,0,.75),
    0 0 0 1px #000,
    0 2px 6px rgba(0,0,0,.5),
    0 40px 80px -30px rgba(0,0,0,.95)
}
@media (min-width:600px){.mc-body{padding:18px var(--pad) 20px;border-radius:30px}}
/* lime contour that charges while the reels spin (JS sets --chg 0..100 on this element only) */
.mc-contour{
  --chg:0;position:absolute;inset:0;z-index:6;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from 135deg,rgba(var(--acc-rgb),.28) 0%,rgba(var(--acc-rgb),.95) calc(var(--chg)*1% - 2.5%),#F7FFE3 calc(var(--chg)*1%),rgba(var(--acc-rgb),0) calc(var(--chg)*1% + .2%));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude
}
.mc-halo{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 0 1px rgba(var(--acc-rgb),.4),0 0 36px 2px rgba(var(--acc-rgb),.2),inset 0 0 48px rgba(var(--acc-rgb),.07)}
.mc-fx{position:absolute;left:-14px;top:-14px;z-index:7;width:calc(100% + 28px);height:calc(100% + 28px);max-width:none;pointer-events:none}

/* top bar: pack, status, sound */
.mc-top{display:flex;align-items:center;gap:10px;height:24px;margin:0 2px 12px;font:500 14px/1 var(--sans);color:var(--muted);white-space:nowrap}
.mc-id{display:inline-flex;align-items:center;gap:8px;flex:none}
.mc-id b{font-weight:600;color:var(--soft)}
.mc-chip{display:none;align-items:center;height:22px;padding:0 7px;border-radius:6px;font:500 14px/1 var(--mono);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
@media (min-width:430px){.mc-chip{display:inline-flex}}
.mc-st{display:inline-flex;align-items:center;gap:8px;min-width:0;margin-left:auto;overflow:hidden}
.mc-st>span{overflow:hidden;text-overflow:ellipsis}
.mc-st .st-x{display:none}
@media (min-width:430px){.mc-st .st-x{display:inline}}   /* m2: «Нажмите на барабан — со звуком» does not fit 390 px */
.mc-led{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:#2E2E33;box-shadow:inset 0 1px 1px rgba(0,0,0,.6);transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.is-spinning .mc-st .mc-led{background:var(--text);animation:mc-blink var(--beat) steps(1,end) infinite}
.is-ready .mc-st .mc-led{background:var(--text);box-shadow:0 0 6px rgba(255,255,255,.5)}
@keyframes mc-blink{50%{opacity:.25}}
.mc-snd{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;margin-right:-2px;border-radius:50%;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line-2);transition:color .2s var(--ease)}
.mc-snd::before{content:"";position:absolute;inset:-7px}
.mc-snd svg{width:15px;height:15px}
.mc-snd .x{opacity:0}
.mc-snd.off{color:var(--muted)}
.mc-snd.off .w{opacity:0}
.mc-snd.off .x{opacity:1}
@media (min-width:600px){.mc-top{margin:0 4px 16px}}

/* reels row */
.mc-reels{position:relative;display:grid;grid-template-columns:repeat(3,var(--tw));column-gap:var(--rg);width:max-content;margin:0 auto}
.mc-reel{position:relative;z-index:1;min-width:0}
.mc-lbl{display:flex;align-items:center;justify-content:space-between;gap:6px;height:var(--lh);margin-bottom:var(--lg);padding:0 2px;font:500 14px/1 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;transition:color .25s var(--ease)}
.mc-lbl span{overflow:hidden;text-overflow:ellipsis}
.landed .mc-lbl{color:var(--soft)}
.landed .mc-lbl .mc-led{background:var(--text);box-shadow:0 0 6px rgba(255,255,255,.55)}

/* window: recessed bezel; the glow frame lives on the wrapper so it can spill out */
.mc-wwrap{position:relative;border-radius:var(--wr);box-shadow:0 0 0 1px rgba(0,0,0,.95),0 0 0 2px rgba(255,255,255,.055),0 10px 18px -10px rgba(0,0,0,.9)}
.mc-wwrap::after{content:"";position:absolute;inset:-2px;z-index:5;border-radius:calc(var(--wr) + 2px);pointer-events:none;box-shadow:0 0 0 1.5px var(--acc),0 0 22px rgba(var(--acc-rgb),.45);opacity:0;transition:opacity .25s var(--ease)}
.mc-wwrap.lit::after{opacity:.38}
.hm-machine.win .mc-wwrap::after{animation:mc-flash 1.3s cubic-bezier(.2,.7,.3,1) both}
@keyframes mc-flash{0%{opacity:.4}12%{opacity:1}100%{opacity:0}}
.mc-win{position:relative;isolation:isolate;height:var(--th);border-radius:var(--wr);overflow:hidden;background:#050506;transform:translateZ(0)}
.mc-strip{position:absolute;left:0;top:0;width:100%;display:flex;flex-direction:column;gap:var(--gap);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mc-strip.sharp{z-index:0}
.mc-strip.blur{z-index:1;opacity:0;visibility:hidden;filter:blur(4px) brightness(.85) saturate(1.1)}
.is-spinning .mc-strip{will-change:transform}
.is-spinning .mc-strip.blur{visibility:visible;will-change:transform,opacity}
.mc-tile{flex:none;position:relative;height:var(--th);overflow:hidden;background:var(--panel)}
.mc-tile img{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
/* the landed clip: covers the whole window, a tap opens that exact version with sound */
.mc-live{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.mc-live video,.mc-live img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .32s var(--ease)}
.mc-live.on video,.mc-live.rdy img{opacity:1}
.mc-live:focus-visible{outline:2px solid var(--text);outline-offset:-2px;border-radius:var(--wr)}
.is-spinning .mc-live{pointer-events:none}
/* glass cylinder: curvature shade to top and bottom, a highlight band, a reflection wedge */
.mc-glass{position:absolute;inset:0;z-index:3;overflow:hidden;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 26%,rgba(255,255,255,0) 26.4%),
    linear-gradient(180deg,rgba(255,255,255,0) 7%,rgba(255,255,255,.07) 11%,rgba(255,255,255,0) 17%),
    linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.34) 10%,rgba(0,0,0,.06) 24%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 66%,rgba(0,0,0,.06) 76%,rgba(0,0,0,.34) 90%,rgba(0,0,0,.78) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.6),inset 7px 0 10px -8px rgba(0,0,0,.7),inset -7px 0 10px -8px rgba(0,0,0,.7);
  opacity:.5;transition:opacity .5s var(--ease)}   /* m2: .6 → .5 — at rest the clip reads edge to edge (Евгений 27.10: «серые полосы») */
.is-spinning .mc-glass{opacity:1;transition-duration:.2s}
.mc-glass::after{content:"";position:absolute;inset:-10% -60%;background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.24) 50%,rgba(255,255,255,0) 58%);transform:translateX(-70%);opacity:0}
.hm-machine.win .mc-glass::after{animation:mc-glint .9s var(--ease) both;animation-delay:calc(var(--i)*70ms)}
@keyframes mc-glint{0%{transform:translateX(-70%);opacity:1}100%{transform:translateX(70%);opacity:1}}
.mc-play{position:absolute;z-index:4;right:7px;bottom:7px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(11,11,13,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:var(--text);opacity:0;transform:scale(.8);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mc-play svg{width:10px;height:10px;margin-left:1px}
/* m2 (from B): after the first version the ▶ marks pulse twice — after the CTA ring: win → Telegram → «watch with sound» */
.mc-play::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.75);opacity:0;pointer-events:none}
.hm-machine.badge .mc-reel.rdy .mc-play::after{animation:mc-pring 1.1s var(--ease) 1.4s 2}
@keyframes mc-pring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.mc-reel.rdy .mc-play{opacity:1;transform:none}
@media (min-width:600px){.mc-play{right:9px;bottom:9px;width:34px;height:34px}.mc-play svg{width:11px;height:11px}}
@media (hover:hover){.mc-reel.rdy:hover .mc-play{transform:scale(1.1)}}

/* payline: a beam behind the glass (visible between reels) and four pins; the pins flick on every tick */
.mc-beam{position:absolute;z-index:0;left:calc(var(--rg)/-2 - 4px);right:calc(var(--rg)/-2 - 4px);top:calc(var(--lh) + var(--lg) + var(--th)/2 - 1px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(var(--acc-rgb),0),var(--acc) 8%,#F4FFD0 50%,var(--acc) 92%,rgba(var(--acc-rgb),0));
  box-shadow:0 0 10px 1px rgba(var(--acc-rgb),.7);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
.hm-machine.win .mc-beam{animation:mc-beam 1.25s var(--ease) both}
@keyframes mc-beam{0%{transform:scaleX(0);opacity:1}24%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.mc-pin{position:absolute;z-index:2;left:calc(var(--k)*(var(--tw) + var(--rg)) - var(--rg)/2 - 1.5px);top:calc(var(--lh) + var(--lg) + var(--th)/2 - 7px);width:3px;height:14px;border-radius:2px;background:#3A3A40;transform-origin:50% 0;pointer-events:none;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.mc-pin.on{background:var(--text);box-shadow:0 0 5px rgba(255,255,255,.4)}
.hm-machine.win .mc-pin{animation:mc-pin 1.4s var(--ease) both}
@keyframes mc-pin{0%{background:var(--acc);box-shadow:0 0 12px 2px rgba(var(--acc-rgb),.9)}100%{background:var(--text);box-shadow:0 0 5px rgba(255,255,255,.4)}}

/* deck: version odometer + progress dots + the SPIN button */
.mc-deck{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:14px 2px 0}
.mc-deck::before{content:"";position:absolute;left:-2px;right:-2px;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08) 18%,rgba(255,255,255,.08) 82%,rgba(255,255,255,0))}
.mc-res{flex:1;min-width:0}
.mc-vl{margin:0 0 6px;font:600 14px/18px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mc-odo-row{display:flex;align-items:center}
.mc-odo{position:relative;flex:none;width:calc(var(--oh)*.88);height:var(--oh);border-radius:10px;overflow:hidden;font:500 calc(var(--oh)*.76)/var(--oh) var(--mono);text-align:center;
  background:linear-gradient(180deg,#040405 0%,#0F0F12 50%,#040405 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 3px 6px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06)}
.mc-odo::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.72)),linear-gradient(180deg,rgba(255,255,255,0) 14%,rgba(255,255,255,.07) 20%,rgba(255,255,255,0) 28%)}
.mc-odo-s{display:block;opacity:.28;transition:opacity .3s var(--ease)}
.hm-machine.has-v .mc-odo-s,.is-spinning .mc-odo-s{opacity:1}
.mc-odo-s b{display:block;height:var(--oh);font-weight:500;background:linear-gradient(180deg,#FFFFFF 22%,#B8B8BE 86%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.mc-odo-s.roll{animation:mc-roll .38s linear infinite;filter:blur(.7px)}
@keyframes mc-roll{from{transform:translateY(0)}to{transform:translateY(calc(var(--oh)*-6))}}
.hm-machine.win .mc-odo{animation:mc-odo-win 1.2s var(--ease) both}
@keyframes mc-odo-win{
  0%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 3px 6px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06),0 0 0 1.5px rgba(var(--acc-rgb),.95),0 0 24px rgba(var(--acc-rgb),.5)}
  100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 3px 6px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06),0 0 0 1.5px rgba(var(--acc-rgb),0),0 0 24px rgba(var(--acc-rgb),0)}}
.mc-of{align-self:flex-end;margin:0 0 calc(var(--oh)*.16) 8px;font:500 calc(var(--oh)*.44)/1 var(--mono);color:var(--muted)}
.mc-dots{display:flex;gap:6px;margin-left:16px}
.mc-dots i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #3A3A40;transition:background-color .3s var(--ease),box-shadow .3s var(--ease),transform .45s var(--spring)}
.mc-dots i.seen{background:#6E6E73;box-shadow:none}
.mc-dots i.on{background:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.14),0 0 10px rgba(var(--acc-rgb),.75);transform:scale(1.15)}
.mc-rd{margin:8px 0 0;font:500 14px/18px var(--sans);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-rd b{font:500 14px/18px var(--mono);color:var(--text)}
.mc-rd .rd-s{display:none}
.mc-rd2{display:block;margin:4px 0 0;font:400 14px/18px var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-machine.all .mc-rd2{color:var(--soft)}   /* 28.10: the second line (hook · ending) is always on; «all 6 = one pack» replaces it once earned */
@media (min-width:600px){
  .mc-deck{margin-top:18px;padding-top:18px;gap:20px}
  .mc-dots{margin-left:20px;gap:8px}
  .mc-dots i{width:9px;height:9px}
  .mc-rd{margin-top:10px;font-size:15px}
  .mc-rd .rd-s{display:inline}
  .mc-rd2{display:block}
}

/* SPIN: a machined puck in a lacquer well; white attract light at rest, lime charge ring while spinning */
.mc-spin{position:relative;flex:none;width:var(--d);height:var(--d);border-radius:50%;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.mc-spin::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.mc-spin:focus-visible{outline-offset:5px;border-radius:50%}
.sp-well{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 42%,#070708 58%,#141417 100%);box-shadow:inset 0 2px 6px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.8)}
.sp-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;pointer-events:none}
.sp-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.2;transition:stroke .3s var(--ease)}
.sp-prog{fill:none;stroke:var(--acc);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 3px rgba(var(--acc-rgb),.9))}
.is-spinning .sp-prog{opacity:1}
.sp-attract{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 200deg,rgba(255,255,255,.55) 312deg,rgba(var(--acc-rgb),.95) 348deg,#F4FFD6 360deg);   /* m2 (from B): white tail, lime head — a light on the edge, not a fill */
  -webkit-mask:radial-gradient(farthest-side,transparent 89%,#000 90%,#000 94%,transparent 95%);
  mask:radial-gradient(farthest-side,transparent 89%,#000 90%,#000 94%,transparent 95%)}
.mc-spin.attract .sp-attract{animation:sp-attract 3.6s var(--ease) infinite}
.mc-spin.attract .sp-track{animation:sp-breathe 3.6s ease-in-out infinite}
.hm-machine:not(.vis) .mc-spin.attract .sp-attract,.hm-machine:not(.vis) .mc-spin.attract .sp-track{animation-play-state:paused}   /* m2: the attract light sleeps off-screen (from B) */
@keyframes sp-attract{0%{opacity:0;transform:rotate(0)}8%{opacity:1}36%{opacity:1;transform:rotate(360deg)}46%,100%{opacity:0;transform:rotate(360deg)}}
@keyframes sp-breathe{0%,100%{stroke:rgba(255,255,255,.12)}30%{stroke:rgba(255,255,255,.3)}}
.sp-cap{position:absolute;inset:11%;display:grid;place-items:center;overflow:hidden;border-radius:50%;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.17),rgba(255,255,255,0) 55%),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.028) 0 1px,rgba(255,255,255,0) 1px 3px),
    radial-gradient(100% 100% at 50% 100%,rgba(0,0,0,.4),rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#2D2D32 0%,#1C1C20 55%,#141417 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 3px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.85),0 4px 0 -1px #08080A,0 9px 16px -4px rgba(0,0,0,.9);
  transform:translateY(-2px);transition:transform .55s var(--spring),box-shadow .55s var(--spring)}
.sp-cap::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(60% 60% at 50% 55%,rgba(var(--acc-rgb),.3),rgba(var(--acc-rgb),0) 72%);opacity:0;transition:opacity .3s var(--ease)}
.sp-t{position:relative;z-index:1;margin-right:-.16em;font:700 calc(var(--d)*.2)/1 var(--sans);letter-spacing:.16em;color:var(--text);text-shadow:0 1px 0 rgba(0,0,0,.7);transition:color .3s var(--ease),text-shadow .3s var(--ease)}
@media (hover:hover){
  .mc-spin:hover .sp-cap{transform:translateY(-3px)}
  .mc-spin:hover .sp-track{stroke:rgba(255,255,255,.34)}
}
.mc-spin.dn .sp-cap{transform:translateY(1px);transition-duration:.07s;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 2px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.85),0 1px 0 -1px #08080A,0 2px 4px -2px rgba(0,0,0,.8)}
.hm-machine.is-spinning .mc-spin .sp-cap{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 2px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.85),0 1px 0 -1px #08080A,0 2px 4px -2px rgba(0,0,0,.8)}
.mc-spin.dn .sp-track{stroke:rgba(255,255,255,.5);transition-duration:.07s}
.is-spinning .sp-cap::after{opacity:1}
.is-spinning .sp-t{color:#F2FFD0;text-shadow:0 0 10px rgba(var(--acc-rgb),.8)}
.is-spinning .mc-spin{cursor:default;pointer-events:none}

/* the reel label of the slot: «Реальный слот» on a desktop, «Слот» on a phone */
.mc-lbl .l-m{display:none}
@media(max-width:599px){.mc-lbl .l-d{display:none}.mc-lbl .l-m{display:inline}}
/* «+ Add to pack» for the landed version (the pack step of the retired «Собери крео»): quiet, under the result line */
.mc-add{display:inline-flex;align-items:center;height:32px;margin-top:10px;padding:0 14px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px var(--line-2);font:500 14px/1 var(--sans);color:var(--soft);white-space:nowrap;cursor:pointer;transition:color .2s ease-out,box-shadow .2s ease-out}
.mc-add[aria-pressed="true"]{color:var(--text);box-shadow:inset 0 0 0 1px var(--soft)}
@media(hover:hover){.mc-add:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--soft)}}
/* in the hero: under the text on a phone, the right column on a desktop (the nums stay under the text) */
@media(min-width:900px){
  .hm-page .hm-hero-c:has(.hm-machine) .hm-hero-in{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,5vw,88px);align-items:center}
  .hm-page .hm-hero-c:has(.hm-machine) .hm-machine{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end}
  .hm-page .hm-hero-c:has(.hm-machine) .hm-hero-nums{grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1200px){.hm-page .hm-hero-c:has(.hm-machine) .hm-hero-nums{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the lime current from the machine reaches the main button after every win; its arrow nods once */
.hm-hero .button-light{position:relative}
.hm-hero .button-light.mc-nudge::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1.5px var(--acc),0 0 26px rgba(200,255,46,.55);pointer-events:none;animation:mc-cta-ring 1.1s cubic-bezier(.22,1,.36,1) both}
.hm-hero .button-light.mc-nudge span[aria-hidden]{display:inline-block;animation:mc-cta-arr 1.1s cubic-bezier(.22,1,.36,1) 1}
@keyframes mc-cta-ring{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.06,1.4)}}
@keyframes mc-cta-arr{0%,50%,100%{transform:none}25%,75%{transform:translate(3px,-3px)}}
/* the end of a film in the film window: one step to the brief */
.video-stage{position:relative}
.ig-done{position:absolute;left:12px;right:12px;bottom:56px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 16px;border-radius:14px;background:#0B0B0DE6;border:1px solid var(--line-2)}
.ig-done[hidden]{display:none}
.ig-done p{margin:0;font-size:16px;font-weight:600;color:var(--text)}
.ig-done .button-light{flex:none;height:44px;padding:0 16px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;background:var(--acc);color:var(--on-acc);font-weight:600}
/* the pack bar (market.js) steps aside while the machine is on screen (body.mc-on from machine.js) */
.mk-cart{transition:width .25s ease-out,left .25s ease-out,transform .25s ease-out,padding .25s ease-out,opacity .25s ease-out,visibility .25s}
body.mc-on .mk-cart.on{opacity:0;visibility:hidden;pointer-events:none}
/* reduced motion: no spin, no sparks, no attract — a quiet crossfade */
@media(prefers-reduced-motion:reduce){
  .hm-machine .mc-spin.attract .sp-attract,.hm-machine .mc-spin.attract .sp-track{animation:none}
  .hm-machine.win::after,.hm-machine.win .mc-wwrap::after,.hm-machine.win .mc-beam,.hm-machine.win .mc-glass::after,.hm-machine.win .mc-odo,.hm-machine.win .mc-pin{animation:none}
  .is-spinning .mc-st .mc-led{animation:none}
  .hm-hero .button-light.mc-nudge::after,.hm-hero .button-light.mc-nudge span[aria-hidden],.hm-machine.badge .mc-reel.rdy .mc-play::after{animation:none}
  .sp-cap,.mc-dots i,.mc-play,.mc-add{transition:none}
}
/* 27.10: a card of our own promo — no price, one quiet line to Telegram instead of the pack */
.mk-ask.mk-ask-wide{width:100%;height:auto;min-height:44px;padding:10px 12px;justify-content:space-between;gap:10px;white-space:normal;line-height:1.3;text-align:left}
.mk-ask.mk-ask-wide b{flex:none;font-weight:700;white-space:nowrap}
/* ---------- catalogue v11 «Подборка» (28.10, ТЗ визуал/каталог_v11/РЕШЕНИЕ.md; assets/formats.js) ----------
   Lime only in three places: the «example» dot, the Telegram button, the bar of the chosen row. The chosen entry and chip are a light plate. */
.rt{--rt-r:20px}
/* the reset has zero weight (:where), so every rt-* class below wins over it */
:where(.rt) :is(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0;padding:0}
:where(.rt) :is(ul,ol){list-style:none}
:where(.rt) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.rt-k,.rt-m,.rt-st,.rt-odo,.rt-cnt,.rt-top,.rt-code{font-family:var(--mono);font-variant-numeric:lining-nums tabular-nums}
.rt-k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
.rt h2{font-size:31px;line-height:1.1;letter-spacing:-.03em;font-weight:700}
.rt h2 span,.rt h1 span{color:var(--muted)}
.rt-lead{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.5;max-width:520px}
.rt-d{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.rt-d.r{background:var(--acc)}
.rt-d.s{border:1.5px solid var(--soft);background:linear-gradient(90deg,var(--soft) 50%,transparent 50%)}
.rt-d.o{border:1.5px solid var(--dim)}
.rt-st{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* entry + chips */
.rt-ent{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-top:28px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.rt-ent button{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:12px;transition:background .25s,color .25s}
.rt-ent b{font-size:16px;font-weight:600}
.rt-ent span{font:400 11px/1.3 var(--mono);color:var(--muted)}
.rt-ent [aria-pressed="true"]{background:var(--text);color:var(--bg)}
.rt-ent [aria-pressed="true"] span{color:#55555B}
.rt-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.rt-chip{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;min-height:60px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--soft);transition:background .2s,color .2s,border-color .2s}
.rt-chip:hover{border-color:var(--line-2);color:var(--text)}
.rt-chip b{font-size:15px;font-weight:600;line-height:1.2}
.rt-chip small{grid-column:1;font:400 11px/1.25 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-chip i{grid-column:2;grid-row:1/3;font:400 12px/1 var(--mono);font-style:normal;color:var(--muted)}
.rt-chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.rt-chip[aria-pressed="true"] :is(small,i){color:#55555B}
.rt-chip.zero{opacity:.55}
.rt-bridge{display:flex;gap:12px;margin-top:20px;font-size:14px;line-height:1.45;color:var(--muted)}
.rt-bridge b{color:var(--soft);font-weight:500}
.rt-bridge svg{flex:none;margin-top:2px}
/* the picks */
.rt-bd{position:relative;min-height:480px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#161619,#111114);overflow:hidden}
.rt-all{display:block;padding:20px;color:var(--soft)}
.rt-top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:0 20px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rt-top b{color:var(--text);font-weight:500}
.rt-cnt{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.rt-led{width:6px;height:6px;border-radius:50%;background:var(--soft)}
.rt-bd.spinning .rt-led{animation:rtBlink .3s steps(2) infinite}
@keyframes rtBlink{50%{opacity:.2}}
.rt-beam{position:absolute;left:0;right:0;top:51px;height:1px;background:linear-gradient(90deg,transparent,var(--soft),transparent) no-repeat;background-size:40% 100%;opacity:0;pointer-events:none}
.rt-bd.spinning .rt-beam{opacity:.6;animation:rtBeam .7s linear infinite}
@keyframes rtBeam{from{background-position:-40% 0}to{background-position:140% 0}}
.rt-r{border-bottom:1px solid var(--line)}
.rt-r:last-child{border-bottom:0}
.rt-rb{position:relative;width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto 128px;align-items:center;gap:16px;padding:12px 20px;transition:background .2s}
.rt-rb:hover{background:#ffffff05}
.rt-r.sel .rt-rb{background:#ffffff08}
.rt-r.sel .rt-rb::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--acc)}
.rt-th{display:grid;place-items:center;width:40px;height:56px;border-radius:8px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line-2)}
.rt-th img{width:100%;height:100%;object-fit:cover}
.rt-sch{border-style:dashed;color:var(--dim)}
.rt-th svg{width:26px;height:46px}
.rt-rm{display:flex;flex-direction:column;gap:5px;min-width:0}
.rt-rt{font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.rt-rs{font:400 12px/1.35 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-rp{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-family:var(--mono);text-align:right}
.rt-rp b{font-size:16px;font-weight:500}
.rt-rp small{font-size:12px;color:var(--muted)}
.rt .na{color:var(--muted);font-weight:400}
.rt-std{justify-self:end}
.rt-stm{display:none}
.rt-bd.spinning .rt-r.roll .rt-rt{opacity:.5;filter:blur(.6px)}
.rt-bd.spinning .rt-r.roll :is(.rt-th,.rt-rs,.rt-rp,.rt-st){opacity:.15}
.rt-r.land .rt-rb{animation:rtLand .14s ease-out}
@keyframes rtLand{from{transform:translateY(-6px)}to{transform:none}}
.rt-bd.pre .rt-r{opacity:0;transform:translateY(8px)}
.rt-r{transition:opacity .3s ease-out,transform .3s ease-out}
.rt-det{padding:4px 20px 20px 76px}
.rt-det .rt-pv{width:150px;margin-bottom:14px}
.rt-more{width:100%;padding:12px 20px;border-top:1px solid var(--line);font:400 12px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.rt-more:hover{color:var(--text)}
.rt-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;border-top:1px solid var(--line);font-size:14px}
.rt-odo{font-size:13px;color:var(--muted)}
.rt-odo b{color:var(--text);font-weight:500;font-size:16px}
.rt-foot a{color:var(--text);font-weight:500;text-align:right}
.rt-foot a:hover{color:var(--soft)}
.rt-anyrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 20px;border-top:1px solid var(--line);background:#0E0E11;font-size:13px;color:var(--soft)}
.rt-anyrow span:not(.rt-k){display:inline-flex;align-items:center;gap:6px}
.rt-anyrow .rt-d{width:6px;height:6px}
.rt-empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px 20px;color:var(--soft)}
.rt-empty p{max-width:420px}
/* the card: always one order */
.rt-dl{display:grid;margin-top:4px}
.rt-dl div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45}
.rt-dl dt{font:400 11px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rt-dl dd{color:var(--soft)}
.rt-dl dd .rt-m{color:var(--text);font-weight:500}
.rt-dl small{display:block;margin-top:2px;font:400 12px/1.4 var(--mono);color:var(--dim)}
.rt-exb{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.rt-exb:hover{text-decoration-color:var(--text)}
.rt-off{color:var(--muted)}
.rt-code{font-size:12px;color:var(--text);word-break:break-all}
.rt-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rt-add{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line-2)!important;border-radius:999px;font-size:14px;font-weight:500;color:var(--text)}
.rt-add:hover,.rt-add[aria-pressed="true"]{border-color:var(--text)!important}
.rt-tgb{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:10px;background:var(--acc);color:var(--on-acc);font-size:14px;font-weight:700;white-space:nowrap}
.rt-tgb:hover{filter:brightness(1.06)}
.rt-pv{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:#0E0E11}
.rt-pv :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rt-pv.rt-sch{display:grid;place-items:center;border-style:dashed;color:var(--dim)}
.rt-pv.rt-sch svg{width:44%;height:auto;margin-bottom:18%}
.rt-cap{position:absolute;left:8px;right:8px;bottom:8px;padding:8px 10px;border-radius:8px;background:#0B0B0DD9;font:400 11px/1.35 var(--mono);color:var(--soft)}
.rt-sch .rt-cap{background:none;color:var(--dim);text-align:center}
.rt-pvp{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:#0B0B0DB3!important;border:1px solid #ffffff33!important;color:var(--text);font-size:12px;text-align:center!important}
/* the home block */
.rt-home{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.rt-home h2{margin-top:16px}
@media(min-width:1001px){.rt h2{font-size:39px}}
@media(max-width:1000px){.rt-home{grid-template-columns:1fr;gap:28px}}
@media(max-width:640px){.rt-bd{border-radius:20px;min-height:420px}.rt-top{padding:0 16px;font-size:10px;letter-spacing:.1em;min-height:48px}.rt-beam{top:47px}.rt-rb{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:12px 16px;align-items:start}.rt-std{display:none}.rt-stm{display:inline-flex;margin-top:3px}.rt-rs{white-space:normal}.rt-det{padding:0 16px 18px}.rt-det .rt-pv{width:132px}.rt-dl div{grid-template-columns:92px minmax(0,1fr);gap:10px}.rt-foot{padding:12px 16px;flex-wrap:wrap}.rt-anyrow,.rt-more{padding:12px 16px}}
@media(max-width:480px){.rt-chips{display:flex;flex-wrap:wrap;gap:6px}.rt-chip{display:inline-flex;gap:8px;min-height:38px;padding:0 12px;border-radius:10px}.rt-chip small{display:none}.rt-chip b{font-size:14px;font-weight:500}.rt-ent button{padding:10px 12px}.rt-ent b{font-size:15px}.rt-ent span{font-size:10.5px}}
body.has-pack .rt{padding-bottom:72px}
@media(prefers-reduced-motion:reduce){.rt *{animation:none!important;transition:none!important}}
.rt-pvb{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:zoom-in}
.rt-lb{width:min(1100px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line-2);border-radius:16px;background:#0B0B0D;color:var(--text);overflow:auto}.rt-lb::backdrop{background:#000000d0}
.rt-lb img{display:block;width:100%;height:auto}.rt-lb-x{position:sticky;top:8px;float:right;margin:8px 8px -48px 0;z-index:1;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:#0B0B0DE0;color:var(--text);font:500 14px/1 var(--f-body);cursor:pointer}