/* Один фиксированный холст отъезжает назад при прокрутке; узкие закреплённые панели с текстом идут поверх; шкала масштаба слева — навигация. */
:root{
  --void:#05070b;
  --panel:rgba(8,12,19,.76);
  --ink:#e9eef3;
  --soft:#c9d2dc;
  --dim:#8f9bab;
  --line:rgba(169,212,255,.2);
  --cold:#a9d4ff;
  --warm:#ff9d63;
  --life:#86d99c;
  --f-display:'Unbounded','Arial Black',system-ui,sans-serif;
  --f-body:'Golos Text','Segoe UI',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --gutter:clamp(0px,calc(18vw + 40px),260px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
#sky{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.note{font-size:13.5px;color:var(--dim);margin:0}
a{color:var(--cold)}
:focus-visible{outline:2px solid var(--cold);outline-offset:3px}
.skip{position:absolute;left:16px;top:-60px;z-index:10;background:var(--cold);color:var(--void);padding:8px 12px;border-radius:4px}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* шапка */
.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;pointer-events:none}
.top>*{pointer-events:auto}
.logo{font-family:var(--f-display);font-weight:300;letter-spacing:.32em;font-size:13px;color:var(--ink);text-decoration:none}
.lang{display:flex;gap:18px}
.lang button{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--dim);background:transparent;border:0;border-bottom:1px solid transparent;padding:6px 2px;cursor:pointer}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}

/* выбор языка на сайте: текущий код, по клику — список языков игры */
.langs{position:relative;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em}
.langs summary{list-style:none;cursor:pointer;color:var(--ink);padding:6px 2px;border-bottom:1px solid var(--ink);display:flex;justify-content:flex-start;align-items:center;gap:8px;font-size:12px}
.langs summary::-webkit-details-marker{display:none}
/* стрелка рамкой; background:none гасит «плюс» общего правила summary::after из блока вопросов */
.langs summary::after{content:'';flex:none;background:none;width:5px;height:5px;border-right:1px solid var(--dim);border-bottom:1px solid var(--dim);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.langs[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.langs ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px 0;list-style:none;min-width:160px;background:var(--panel);border:1px solid var(--line);border-radius:6px;backdrop-filter:blur(8px)}
.langs a{display:flex;justify-content:space-between;gap:16px;padding:7px 14px;color:var(--soft);text-decoration:none;letter-spacing:.04em;font-family:var(--f-body);font-size:14px}
.langs a:hover,.langs a:focus-visible{color:var(--ink);background:rgba(169,212,255,.08)}
.langs a[aria-current="true"]{color:var(--ink)}
.langs a span{font-family:var(--f-mono);font-size:11px;color:var(--dim);letter-spacing:.14em}

/* предложение языка браузера: только предлагает, сам никуда не переводит */
.lang-offer{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:10px 12px 10px 16px;background:var(--panel);border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(8px);font-size:14px;color:var(--soft)}
.lang-offer[hidden]{display:none}
.lang-offer a{color:var(--cold);white-space:nowrap}
.lang-offer button{all:unset;cursor:pointer;color:var(--dim);padding:2px 6px;font-size:16px;line-height:1}
.lang-offer button:hover,.lang-offer button:focus-visible{color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* шкала масштаба */
.ruler{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:4;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ruler button{all:unset;cursor:pointer;display:grid;grid-template-columns:14px auto;column-gap:10px;align-items:center;padding:6px 8px;border-radius:4px}
.ruler button:focus-visible{outline:2px solid var(--cold)}
.ruler li{position:relative}
.ruler li:not(:last-child)::after{content:'';position:absolute;left:12.5px;top:24px;bottom:-6px;width:1px;background:var(--line);pointer-events:none}
.ruler .nm{font-size:13px;color:var(--dim);transition:color .3s}
.ruler .sc{grid-column:2;font-family:var(--f-mono);font-size:10.5px;color:rgba(143,155,171,.6);letter-spacing:.04em}
.ruler li.on .nm{color:var(--ink)}
.ruler li.on .sc{color:var(--cold)}
.mk{display:inline-block;width:9px;height:9px;border-radius:50%;justify-self:center;grid-row:span 2;flex:none}
.mk.game{background:var(--cold)}
.mk.dev{border:1.5px solid var(--cold)}
.mk.vision{border:1.5px dashed var(--dim)}
.legend{position:fixed;left:28px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:4;display:flex;gap:14px;align-items:center}
.legend>span{display:inline-flex;gap:6px;align-items:center}
.hud{position:fixed;right:20px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:4;text-align:right;font-variant-numeric:tabular-nums}
.legend,.hud{transition:opacity .4s,visibility .4s}
body.at-end .legend,body.at-end .hud{opacity:0;visibility:hidden}
.hud b{display:block;font-family:var(--f-mono);font-weight:400;font-size:15px;color:var(--ink);letter-spacing:.04em}

/* главы */
main{position:relative;z-index:2;padding-inline:16px}
.ch{position:relative;min-height:185vh}
.ch.tall{min-height:240vh}
.ch[data-ch="0"]{min-height:150vh}
.panel{position:sticky;top:22vh;margin-left:var(--gutter);max-width:400px;background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:4px;padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.panel.wide{max-width:430px;top:14vh}
.panel h2{font-family:var(--f-display);font-weight:300;font-size:clamp(20px,2.1vw,26px);line-height:1.25;letter-spacing:.01em;margin:0;text-wrap:balance}
.panel p{margin:0;color:var(--soft)}
/* первый экран: всё по центру, пылинка на орбите рисуется на холсте в .hero-spot */
.hero{position:sticky;top:max(72px,12vh);margin:0 auto;max-width:780px;display:flex;flex-direction:column;align-items:center;text-align:center}
.kicker{letter-spacing:.24em;margin-bottom:22px}
.hero h1{font-family:var(--f-display);font-weight:300;font-size:clamp(40px,7vw,96px);letter-spacing:.16em;line-height:1;margin:0 0 22px;padding-left:.16em}
.hero .lead{font-family:var(--f-display);font-weight:300;font-size:clamp(18px,1.8vw,24px);line-height:1.4;margin:0}
.hero-spot{width:min(420px,80vw);height:clamp(140px,22vh,220px)}
.start{display:inline-flex;align-items:center;gap:14px;font:inherit;font-size:17px;font-weight:500;color:var(--void);background:#cfe6ff;border:0;border-radius:99px;padding:15px 34px;cursor:pointer;box-shadow:0 0 34px rgba(169,212,255,.45),0 0 0 1px rgba(255,255,255,.4) inset;transition:transform .2s,box-shadow .2s}
.start:hover{transform:translateY(-1px);box-shadow:0 0 46px rgba(169,212,255,.6),0 0 0 1px rgba(255,255,255,.5) inset}
.start .arr{font-size:18px;line-height:1}
.hint{margin:16px 0 0;font-size:14px;color:var(--dim)}
.tag{align-self:flex-start;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--dim)}
.tag.game{color:var(--cold);border-color:rgba(169,212,255,.45)}

/* состав */
.mix{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.mix label{display:grid;grid-template-columns:92px 1fr 40px;gap:10px;align-items:center;font-size:14px}
.mix input{width:100%;accent-color:var(--cold)}
.mix output{font-family:var(--f-mono);font-size:12px;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}
.sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.result{border-top:1px solid var(--line);padding-top:12px}
.result strong{font-family:var(--f-display);font-weight:500;font-size:17px;display:block;margin:2px 0 4px}
.found{display:flex;flex-direction:column;gap:8px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:12.5px;padding:3px 9px;border-radius:99px;border:1px dashed var(--line);color:var(--dim)}
.chips li.on{border-style:solid;border-color:rgba(169,212,255,.5);color:var(--ink)}
.chips li.new{animation:pop .6s ease-out}
@keyframes pop{0%{background:rgba(169,212,255,.35)}100%{background:transparent}}

/* финал «Новый цикл»: всё по центру, звезда рисуется на холсте над заголовком */
.final{position:relative;z-index:2;max-width:940px;margin:0 auto;padding:0 16px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.spot{width:100%;height:clamp(150px,24vh,260px)}
.eyebrow{letter-spacing:.32em;margin:0 0 14px}
.final>h2{font-family:var(--f-display);font-weight:300;font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-.01em;margin:0 0 20px;text-wrap:balance;max-width:14ch}
.sub{margin:0 0 30px;font-size:clamp(16px,1.5vw,19px);color:var(--soft);line-height:1.5}
.final form{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:540px}
.row{display:flex;gap:10px;flex-wrap:wrap;width:100%}
.row input{flex:1 1 240px;min-width:0;font:inherit;color:var(--ink);background:rgba(5,8,14,.7);border:1px solid rgba(169,212,255,.22);border-radius:5px;padding:13px 16px}
.row input:focus{border-color:rgba(169,212,255,.6);outline:none}
.row button{flex:1 1 auto;font:inherit;font-weight:500;color:var(--void);background:var(--cold);border:0;border-radius:5px;padding:13px 24px;cursor:pointer;box-shadow:0 0 26px rgba(169,212,255,.25)}
.row button:disabled{opacity:.6;cursor:wait}
.consent{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--soft);text-align:left}
.consent input{accent-color:var(--cold);flex:none;width:16px;height:16px}
.msg{min-height:1.4em;font-size:14px;margin:0}
.msg.ok{color:var(--life)}
.msg.err{color:var(--warm)}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.links:empty{display:none}
.links a{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:7px 12px}
.status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;width:100%;margin-top:48px;text-align:left}
.status>div{border-top:1px solid var(--line);padding-top:22px;min-width:0}
.status h3{margin:0 0 12px;font-size:17px;font-weight:500;display:flex;gap:14px;align-items:center}
.status .mk{width:14px;height:14px;grid-row:auto}
.status .mk.game{box-shadow:0 0 10px rgba(169,212,255,.6)}
.status ul{list-style:none;margin:0;padding-left:28px;color:var(--soft);font-size:15px;display:flex;flex-direction:column;gap:5px}
.faq{width:100%;margin-top:52px;text-align:left}
.faq h2{font-family:var(--f-display);font-weight:300;font-size:clamp(24px,2.6vw,32px);margin:0 0 14px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 2px;font-size:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:'';flex:none;width:14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) center/14px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 14px no-repeat;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 14px;color:var(--soft);max-width:62ch}

footer{position:relative;z-index:2;display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:28px 36px calc(28px + env(safe-area-inset-bottom,0px));font-size:14px}
footer a{color:var(--soft);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .sep{width:1px;height:22px;background:var(--line)}
.foot-end{margin-left:auto;text-transform:none;letter-spacing:.06em}

/* страница текста (конфиденциальность) */
.doc{position:relative;z-index:2;max-width:68ch;margin:0 auto;padding:110px 16px 80px}
.doc h1{font-family:var(--f-display);font-weight:300;font-size:clamp(24px,3vw,34px);margin:0 0 8px}
.doc h2{font-family:var(--f-display);font-weight:300;font-size:18px;margin:32px 0 8px}
.doc p,.doc li{color:var(--soft)}

@media (max-width:900px){
  :root{--gutter:0px}
  .ruler{left:auto;right:6px}
  .ruler .nm,.ruler .sc{display:none}
  .ruler button{grid-template-columns:14px;padding:7px}
  .legend{display:none}
  .hud{right:16px;bottom:auto;top:calc(56px + env(safe-area-inset-top,0px))}
  .ch{display:flex;flex-direction:column;justify-content:flex-end;min-height:210vh}
  .ch.tall{min-height:260vh}
  .panel,.panel.wide{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:none;margin-right:28px}
  .ch[data-ch="0"]{justify-content:flex-start}
  .hero{top:auto;position:relative;padding-top:16vh}
  .status{grid-template-columns:1fr;gap:20px}
  footer{padding-inline:16px;gap:14px}
  .foot-end{margin-left:0;width:100%}
  .mix label{grid-template-columns:80px 1fr 36px}
  .panel.wide{padding:16px 18px;gap:8px}
  .panel.wide>p{display:none}
  .panel.wide .mix{gap:4px}
  .result{padding-top:8px}
  .result p{font-size:14px}
}