/*
 * Главная страница: стили.
 *
 * Переменные страницы объявлены на `.landing`, а не на `:root`, — тем же
 * приёмом и по той же причине, что в прежнем файле: токены сайта носят и
 * правовые страницы, и каталог, и переопределять их для соседей нельзя.
 *
 * Три цвета палитры приехали из прототипа литералами (#9befcf, #ae8dff,
 * #eb729c) и стояли рядом с обращениями к переменным, которых никто не
 * объявлял: сорок объявлений вида `background: var(--mint)` браузер выбрасывал
 * целиком, молча. Заметить это глазом нельзя — недействительное свойство просто
 * не применяется, а браузерная панель цвета не измеряет.
 *
 * Три цвета площадок — байт в байт из прежнего landing.css: их носят цветные
 * полоски в ленте чата, и больше нигде они не встречаются.
 */
.landing {
  /* Мятный переехал в shared/tokens.css: его просят и карточки тарифов, а их
     показывают две страницы. Здесь остались цвета, которые нужны только
     главной. */
  --purple: #ae8dff;
  --pink: #eb729c;
  --twitch: hsl(264, 100%, 74%);
  --youtube: hsl(0, 85%, 62%);
  --kick: hsl(96, 80%, 52%);

  /* Единственная защита от горизонтальной прокрутки: пульт ездит на ±100px. */
  overflow-x: hidden;
}

/*
 * Порядок склейки повторяет прототип: сперва база пульта и первого экрана из
 * его globals.css, затем переопределения из travel.css. Порядок ВАЖЕН —
 * .travel-stage объявлен в travel.css четырежды подряд, и каждое следующее
 * объявление снимает часть предыдущего (высота из sticky превращается в auto
 * с отступом). Схлопывать эти правила в одно нельзя: сцена сломается молча.
 *
 * Чего здесь НЕТ и не будет:
 * - копии токенов. app/original.css прототипа и shared/tokens.css совпадают
 *   байт в байт, поэтому токены подключаются своим файлом;
 * - своего фона. У сайта есть .backdrop; второй экземпляр дал бы шесть пятен;
 * - номеров глав в селекторах. В прототипе стояли [data-chapter="0"],
 *   [data-chapter="1"] и [data-chapter="4"], и вставка главы про карусель
 *   сдвинула бы их на соседа. Здесь глава помечает себя признаком.
 */
.skip-link{position:fixed;left:20px;top:-80px;z-index:100;background:var(--mint);color:#090710;padding:12px}
.skip-link:focus{top:12px}
.status-dot{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px #9befcf55;flex:none}
.eyeline{font:500 12px/1.5 var(--font-mono);letter-spacing:.14em;display:flex;align-items:center;gap:10px;color:#c0b7d0}
.hero-section{position:relative;overflow:hidden;padding:78px 0 0}
.hero-grid{position:absolute;inset:0;background:linear-gradient(#ae8dff08 1px,transparent 1px),linear-gradient(90deg,#ae8dff08 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(transparent,#000,transparent);pointer-events:none}
.hero-section:before{content:'';position:absolute;inset:20% 0 0;background:radial-gradient(ellipse at 50% 65%,#673dc72b,transparent 58%);pointer-events:none}
.hero-content{position:relative;text-align:center;padding:0 24px}
.hero-content .eyeline{justify-content:center}
.hero-content h1{font-size:clamp(44px,5.8vw,82px);line-height:1.07;letter-spacing:-.058em;font-weight:650;margin:23px auto}
.hero-content h1 span{background:linear-gradient(105deg,#cbb8ff 4%,#a98aff 70%,#c4a3f5);background-clip:text;color:transparent}
.hero-lead{font-size:18px;line-height:1.75;color:#aaa3b7}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin:30px 0 17px}
.download{display:inline-flex;align-items:center;justify-content:center;gap:11px;background:#ae8dff;color:#110b20;border:1px solid #c8b1ff;padding:15px 21px;border-radius:8px;font-size:15px;font-weight:650;box-shadow:0 4px 30px #8b5cf627;transition:background .2s,transform .2s}
.download:hover{background:#c1a8ff;color:#100a1e;transform:translateY(-2px)}
.download>svg:last-child{margin-left:13px}
.text-link{display:inline-flex;gap:10px;align-items:center;color:#d2cadf;font-size:14px;line-height:1.5}
.text-link:hover{color:var(--mint)}
.hero-note{font-size:12px;color:#8e859f}
.hero-note span{margin:0 9px}
.hero-product{position:relative;max-width:840px;margin:58px auto 0;padding:0 40px}
.hero-console{transform:perspective(1400px) rotateX(7deg);transform-origin:center top;box-shadow:0 0 100px #8254cd15}
.console{position:relative;background:#100d17;border:1px solid #3c304e;border-radius:12px;box-shadow:0 26px 85px #0006;text-align:left;min-width:0}
.console-title{height:43px;display:flex;align-items:center;gap:23px;padding:0 16px;border-bottom:1px solid #292232;background:#181220;border-radius:12px 12px 0 0}
.console-title img{width:90px;height:auto}
.console-title>span{font-size:12px;color:#92859f}
.console-title .window-dots{margin-left:auto;letter-spacing:4px}
.console-layout{display:flex}
.console-rail{width:49px;flex:none;padding:20px 10px;display:flex;flex-direction:column;align-items:center;gap:24px;border-right:1px solid #292232;color:#80718e}
.console-rail svg{width:17px;height:17px}
.rail-active{color:var(--purple);position:relative}
.rail-active:before{content:'';position:absolute;inset:-7px;background:#ab7eff13;border-radius:6px}
.rail-bottom{margin-top:auto}
.console-content{padding:17px;width:calc(100% - 49px)}
.console-heading{display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:600;margin-bottom:15px}
.live-label{display:flex;gap:6px;align-items:center;color:#e8a5c6;font:10px var(--font-mono);letter-spacing:.08em}
.live-label i{width:5px;height:5px;border-radius:50%;background:#eb729c}
.module{position:relative;border:1px solid #32253f;border-radius:7px;padding:12px;background:linear-gradient(120deg,#1d1628,#14101e);will-change:transform,opacity}
.tile-heading{display:flex;align-items:center;gap:7px;font-size:12px;color:#c3b7d2;margin-bottom:11px}
.tile-heading svg{color:#a78dc8;flex:none}
.tile-heading .status-dot,.tile-status,.subtle{margin-left:auto}
.tile-status{font-size:10px;color:#a7d9c3}
.tile-heading>span:first-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-status{flex:none;white-space:nowrap}
.platforms{display:flex;gap:8px}
.platforms>span{display:flex;align-items:center;gap:7px;flex:1;background:#21192d;padding:6px 8px;border-radius:4px;font-size:11px}
.platforms b{width:19px;height:19px;display:grid;place-items:center;border-radius:4px;font-size:12px}
.platforms i{width:4px;height:4px;border-radius:50%;background:var(--mint);margin-left:auto}
.twitch{background:#9a61f52b;color:#bc97ff}
.youtube{background:#e26a7a20;color:#ff939e}
.kick{background:#93eaad20;color:#8befb1}
.twitch-text{color:#bc97ff}
.tile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:10px}
.chat-lines p{font-size:11px;line-height:2.05;color:#aaa1b6}
.chat-lines b{font-weight:500;margin-right:5px}
.chat-input{display:flex;justify-content:space-between;margin-top:13px;font-size:10px;color:#756a85;border-top:1px solid #2b2336;padding-top:8px}
.wave{height:108px;display:flex;align-items:center;justify-content:center;gap:4px}
.wave i{height:var(--h);width:3px;border-radius:4px;background:linear-gradient(#d5b9ff,#9c79e3);animation:wave 1.7s ease-in-out infinite alternate;animation-delay:var(--delay);opacity:.85}
.wave.small{height:65px;gap:3px}
.wave.small i{width:2px;height:calc(var(--h) * .57)}
.mini-phrase{text-align:center;font-size:12px;color:#d8cce9}
.voice-success{display:flex;justify-content:center;align-items:center;gap:5px;font-size:10px;color:var(--mint);margin-top:12px}
.scene-options{display:flex;gap:6px}
.scene-options span{font-size:10px;padding:7px 9px;border:1px solid #332840;border-radius:4px;color:#a697b7}
.scene-options .selected{color:var(--mint);border-color:#9befcf44;background:#9befcf0a;display:flex;gap:5px;align-items:center}
.console-foot{display:flex;justify-content:space-between;font-size:9px;color:#746780;margin-top:14px}
.console-foot>span:first-child{display:flex;align-items:center;gap:5px}
.console-foot .status-dot{width:4px;height:4px}
.dim{color:#81758f}
em{font-style:normal;color:var(--purple)}
.chapter-copy{z-index:3}
.chapter-number{font:11px var(--font-mono);letter-spacing:.14em;color:#a48dbd;margin-top:42px}
.chapter-text{animation:chapter-in .35s ease-out}
.chapter-copy h2{font-size:clamp(37px,3.8vw,53px);line-height:1.09;letter-spacing:-.045em;font-weight:550;margin:20px 0}
.chapter-copy p{font-size:16px;color:#aca0b8;line-height:1.8;max-width:370px}
.chapter-note{margin-top:24px;display:flex;align-items:center;gap:9px;font-size:12px;color:#c3addc}
.chapter-navigation{display:flex;gap:10px;margin-top:42px}
.chapter-navigation button{border:0;border-top:2px solid #3a2a49;background:none;text-align:left;padding:11px 0;width:52px;color:#79688b;font:11px var(--font-mono);cursor:pointer;min-height:44px}
.chapter-navigation button.active{border-color:var(--purple);color:var(--purple)}


.module-tags{margin-top:auto;padding-top:28px;font-size:12px;color:#a58bb7}
.hero-product{margin-top:64px}
.chapter-copy h2{font-size:38px}
.chapter-copy p{font-size:15px}
.hero-section{padding-top:52px}
.hero-content h1{font-size:44px;letter-spacing:-.055em}
.hero-lead{font-size:16px;line-height:1.7}
.eyeline{font-size:10px}
.hero-actions{flex-direction:column;gap:20px}
.hero-product{margin-top:43px;padding:0 20px}
.hero-console{transform:none}
.hero-product .console-title{height:34px}
.hero-product .console-title img{width:72px}
.hero-product .console-title>span{font-size:9px}
.hero-product .console-rail{display:none}
.hero-product .console-content{width:100%;padding:10px}
.hero-product .console-heading{font-size:14px}
.hero-product .tile-heading{font-size:9px;gap:4px}
.hero-product .tile-heading svg{width:12px}
.hero-product .module{padding:9px}
.hero-product .chat-lines p{font-size:9px}
.hero-product .mini-phrase{font-size:10px}
.hero-product .scene-options span{padding:5px;font-size:8px}
.hero-product .platforms>span{font-size:9px}
.hero-product .auction-row{font-size:8px}
.hero-product .voice-success{font-size:9px}
.chapter-copy{width:100%}
.chapter-copy>.eyeline{display:none}
.chapter-number{margin-top:0;font-size:10px}
.chapter-copy h2{font-size:33px;margin:12px 0}
.chapter-copy h2 br{display:none}
.chapter-copy p{font-size:14px;line-height:1.6;max-width:100%;min-height:90px}
.chapter-note{display:none}
.chapter-navigation{margin-top:15px;gap:9px}
.chapter-navigation button{padding:8px 0;width:44px}


.hero-note{font-size:11px}
.console .tile-grid{transition:grid-template-columns .55s cubic-bezier(.22,1,.36,1)}
.console-auction .tile-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.console-auction .mod-play{grid-column:2;grid-row:1 / 3}
.console-auction .mod-voice{display:none}
.console-record .mod-chat,.console-record .mod-play{display:none}
.console-record .mod-voice{grid-column:1 / -1;min-height:180px}
.console-record .mod-obs{grid-column:1 / -1}
.console-record .scene-options>span{flex:1;text-align:center}
.console-record .mod-voice{min-height:145px}

/* One persistent console, driven by the document scroll. */
.hero-section{padding-bottom:0;overflow:visible}.scroll-story{position:relative;height:660vh;margin-top:38px;background:radial-gradient(ellipse at 50% 15%,#8150c515,transparent 58%)}.travel-stage{position:sticky;top:84px;width:min(1240px,100%);height:calc(100svh - 100px);min-height:620px;max-height:850px;margin:auto;--panel-width:760px;--panel-scale:1;--panel-x:0px;--panel-y:40px;--copy-opacity:0}.travelling-console{position:absolute;left:50%;top:var(--panel-y);width:var(--panel-width);transform:translateX(calc(-50% + var(--panel-x))) scale(var(--panel-scale));transform-origin:center top;will-change:transform;z-index:3}/* Окно не меняет размер при переключении страницы — как не меняет его
   настоящее окно приложения. Раньше высота бралась от содержимого, и разные
   страницы давали от 505 до 774 пикселей: при переезде между главами окно
   заметно прыгало.

   Держится пропорцией, а не числом: ширину пульта считает скрипт от ширины
   экрана, и фиксированная высота разъехалась бы с ней на первом же размере. */
.travelling-console .console{aspect-ratio:766/774;min-height:0;display:flex;flex-direction:column;transform:none;overflow:hidden;background:#100d17}
.travelling-console .console-layout{flex:1;min-height:0}
.travelling-console .console-content{display:flex;flex-direction:column;min-height:0}
.travelling-console .tile-grid{flex:1;min-height:0}
.travelling-console .tile-grid>.module{min-height:0;overflow:hidden}.travelling-console .module{opacity:1;transform:none;will-change:auto}.travelling-console .console .tile-grid{min-height:251px;transition:none}.travelling-console .console .module{animation:tile-seat .38s cubic-bezier(.22,1,.36,1) both}.travelling-console .console-chat .mod-chat{grid-column:1 / -1}.travelling-console .console-chat .mod-voice,.travelling-console .console-chat .mod-obs,.travelling-console .console-chat .mod-play{display:none}.travelling-console .console-voice .mod-voice{grid-column:1 / -1;grid-row:1;min-height:172px;border-color:#9466ca}.travelling-console .console-voice .mod-chat,.travelling-console .console-voice .mod-play{display:none}.travelling-console .console-voice .mod-obs{grid-column:1 / -1}.travelling-console .console-record .mod-voice{min-height:172px}.travelling-console .console .console-title{height:42px}.travelling-console .console-record .scene-options span,.travelling-console .console-voice .scene-options span{flex:1;text-align:center}.console-tabs{display:flex;gap:5px;padding:0 0 12px;border-bottom:1px solid #2e233a;margin-bottom:12px}.console-tabs span{font-size:11px;padding:5px 9px;border-radius:5px;color:#9e8aaf;background:transparent;transition:background .25s,color .25s}.console-tabs span[data-active=true]{color:#d3b7f5;background:#3d2853;box-shadow:inset 0 0 0 1px #ac82d84a}.live-metrics{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:10px;margin-bottom:12px}.live-metrics>span:first-child{display:flex;gap:7px;align-items:center;color:#a698b4}.live-metrics b{color:#e1d7ec;font-weight:550;font-variant-numeric:tabular-nums}.live-metrics>span:first-child b{animation:counter-change .4s ease-out}.donation-event{display:flex;gap:7px;align-items:center;padding:5px 10px;background:#9befcf0b;border:1px solid #9befcf28;border-radius:5px;color:#b7c9c0;animation:donation-arrive 1.2s ease-out}.donation-event b,.donation-event>span{color:var(--mint)}.chat-window{overflow:hidden}.chat-lines{animation:chat-flow .42s ease-out}.console-chat .chat-lines p{font-size:13px;line-height:2.15}.console-chat .chat-input{font-size:12px}.console-voice .mini-phrase{font-size:17px}.console-voice .voice-success{font-size:12px}.travel-caption{display:flex;align-items:center;justify-content:space-between;padding:15px 8px;color:#9882ab;font:10px var(--font-mono);letter-spacing:.05em}.travel-caption>span{display:flex;gap:8px;align-items:center}.travel-caption button{border:1px solid #483256;border-radius:5px;padding:6px 9px;background:#160e20;color:#b59bc9;font-size:11px;cursor:pointer}.story-copy{position:absolute;top:70px;width:34%;left:24px;z-index:2;opacity:var(--copy-opacity);transition:none}.travel-stage[data-side=left] .story-copy{left:auto;right:24px}.travel-stage[data-intro=true] .story-copy{visibility:hidden}.story-copy .chapter-number{margin-top:0}.story-copy h2{font-size:clamp(32px,3.5vw,48px);line-height:1.12;letter-spacing:-.045em;font-weight:550;margin:23px 0}.story-copy p{font-size:16px;line-height:1.8;color:#b6a9c4}.story-copy .chapter-note{font-size:12px;margin-top:23px;color:#bca3d2}.story-copy .chapter-navigation{margin-top:30px}.travel-progress{position:absolute;left:24px;right:24px;bottom:20px;height:2px;background:#241b2f}.travel-progress i{display:block;background:linear-gradient(90deg,var(--purple),var(--mint));width:100%;height:100%;transform:scaleX(var(--progress,0));transform-origin:left}.demo-paused .wave i,.demo-paused .chat-lines,.demo-paused .demo-paused .donation-event,.demo-paused .live-metrics b{animation-play-state:paused}.travelling-console .wheel-diagram{width:132px;height:132px;margin:15px auto 20px;animation:wheel-arrive 1.8s cubic-bezier(.16,.8,.22,1)}
@keyframes chat-flow{from{transform:translateY(22px)}to{transform:translateY(0)}}@keyframes donation-arrive{0%{background:#9befcf35;border-color:#9befcfaa;box-shadow:0 0 22px #9befcf25;transform:translateY(-4px)}100%{background:#9befcf0b;border-color:#9befcf28;box-shadow:none;transform:none}}@keyframes counter-change{from{color:var(--mint);transform:translateY(3px)}to{color:#e1d7ec;transform:none}}@keyframes tile-seat{from{translate:0 12px}to{translate:0 0}}
@media(min-width:850px) and (max-height:760px){.travel-stage{min-height:560px}.story-copy{top:35px}.story-copy h2{font-size:36px}.story-copy p{font-size:15px}}
@media(max-width:849px){.platforms{gap:4px}.platforms>span{gap:4px;padding:5px;min-width:0}.scroll-story{height:640svh;margin-top:20px}.travel-stage{top:70px;height:calc(100svh - 80px);min-height:590px;max-height:none}.story-copy,.travel-stage[data-side=left] .story-copy{width:auto;left:24px;right:24px;top:12px}.story-copy h2{font-size:30px;margin:12px 0}.story-copy h2 br{display:none}.story-copy p{font-size:14px;line-height:1.55;max-width:630px}.story-copy .chapter-note{display:none}.story-copy .chapter-navigation{margin-top:10px;gap:10px}.story-copy .chapter-navigation button{min-height:36px;padding:6px 0}.story-copy .chapter-number{font-size:10px}.travelling-console .console{min-height:470px}.travelling-console .console-rail{display:none}.travelling-console .console-content{width:100%;padding:11px}.travelling-console .console-title{gap:12px}.travelling-console .console-title img{width:75px}.travelling-console .console-title>span{font-size:10px}.travelling-console .tile-heading{font-size:10px;gap:5px}.travelling-console .module{padding:9px}.travelling-console .scene-options span{padding:6px;font-size:9px}.travelling-console .chat-lines p{font-size:10px}.travelling-console .console-chat .chat-lines p{font-size:12px}.travelling-console .mini-phrase{font-size:11px}.travelling-console .wave.small{gap:2px}.travelling-console .console-foot{font-size:8px}.travelling-console .console .tile-grid{min-height:249px}.console-tabs{gap:2px}.console-tabs span{font-size:10px;padding:5px 7px}.live-metrics{font-size:10px}.donation-event{padding:5px 7px}.travel-progress{bottom:6px}.travelling-console .console-voice .mini-phrase{font-size:14px}.travelling-console .console-chat .chat-input{font-size:10px}}
@media(prefers-reduced-motion:reduce){.travelling-console,.story-copy{will-change:auto}.travelling-console .module,.chat-lines,.donation-event,.live-metrics b,.wheel-diagram{animation:none!important}.travel-stage .story-copy{opacity:1}.travel-stage[data-intro=true] .story-copy{opacity:0}}
/* Fill the viewport with the story, rather than an empty lower half. */
.scroll-story{height:560vh}.travel-stage{width:min(1440px,100%);max-height:none;min-height:640px;height:calc(100svh - 100px)}.story-copy{top:calc(var(--panel-y) + 18px);width:32%}.story-copy h2{font-size:clamp(34px,3.7vw,54px)}.travelling-console .console{box-shadow:0 28px 90px #0008,0 0 65px #a06bed0c}.travel-stage:before{content:'';position:absolute;inset:10px 24px 20px;background-image:radial-gradient(#b890f521 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(ellipse at center,#0008,transparent 72%);pointer-events:none}.travel-progress{bottom:6px}.travel-stage[data-assemble="true"] .console .module{border-color:#ac83d65c}.travel-stage[data-assemble="true"] .console .tile-grid{background-image:linear-gradient(#9977c015 1px,transparent 1px),linear-gradient(90deg,#9977c015 1px,transparent 1px);background-size:22px 22px;border-radius:7px}
@media(max-width:1100px) and (min-width:850px){.story-copy h2{font-size:36px}.story-copy p{font-size:14px}.story-copy .chapter-note{font-size:11px}}
@media(max-width:849px){.scroll-story{height:570svh}.travel-stage{height:calc(100svh - 80px);min-height:620px}.story-copy,.travel-stage[data-side=left] .story-copy{top:12px;width:auto}.story-copy h2{font-size:30px}}
/* Perspective belongs to the console shell, separate from its scroll travel. */
.depth-shell{position:relative;transform:perspective(1500px) rotateX(5deg) rotateY(var(--turn,0deg));transform-style:preserve-3d;transform-origin:center center}.depth-shell:before{content:'';position:absolute;inset:15px -4px -12px;border-radius:15px;background:#271936;border:1px solid #8758ba50;transform:translateZ(-16px);box-shadow:0 45px 80px #0009,0 0 100px #9563cf1c}.depth-shell .console{border-color:#8b65af65;box-shadow:inset 0 1px 0 #e2c3ff18,0 20px 60px #0006;isolation:isolate}.depth-shell .console-title{background:linear-gradient(110deg,#24192f,#171020)}.depth-shell .module{background:linear-gradient(135deg,#24192f,#16101f);box-shadow:inset 0 1px 0 #d8acff0d,0 7px 18px #0002}.depth-callout{position:absolute;display:flex;align-items:center;gap:10px;padding:13px 17px;border:1px solid #9a75c680;border-radius:9px;background:#291d3bee;box-shadow:0 16px 38px #0007;backdrop-filter:blur(12px);font-size:13px;color:#e1cbf8;transform:translateZ(55px) rotate(-5deg);pointer-events:none}.depth-command{left:-25px;top:170px}.depth-result{right:-20px;bottom:35px;transform:translateZ(70px) rotate(4deg);background:#192c25ee;border-color:#8fe1bd65;color:#baf2d9}.depth-result>svg{padding:5px;box-sizing:content-box;background:#9befcf15;border-radius:50%}.travel-stage[data-intro=false] .depth-command{left:10px;top:-15px}.travel-stage[data-intro=false] .depth-result{right:8px;bottom:-12px}.travel-caption{padding-top:25px}.travel-stage[data-callouts="false"] .depth-callout{display:none}.travel-stage[data-assemble="true"] .depth-shell .tile-grid{perspective:800px}.travel-stage[data-assemble="true"] .depth-command{color:#dab8ff}.travelling-console .depth-shell .console{overflow:visible}.depth-shell .console-layout{border-radius:0 0 12px 12px}.depth-shell .console-foot{padding-bottom:3px}
@media(max-width:849px){.depth-shell{transform:perspective(1200px) rotateX(3deg)}.depth-callout{font-size:10px;padding:9px 11px;gap:6px}.depth-command{left:2px;top:165px}.depth-result{right:2px;bottom:28px}.travel-stage[data-intro=false] .depth-command{top:-12px}.travel-stage[data-intro=false] .depth-result{bottom:-12px}}
@media(prefers-reduced-motion:reduce){.depth-shell{transform:none}.depth-callout{transform:none}}
/* The download row is in normal flow, beneath the measured console bounds. */
.travel-stage{height:auto;min-height:0;max-height:none;padding:var(--scene-body-height,680px) 24px 18px}.story-download{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 30px;margin:0;border-top:1px solid #9d70cb55;border-bottom:1px solid #9d70cb26;border-radius:10px;background:linear-gradient(110deg,#21132f,#161222);box-shadow:inset 0 1px 0 #d5b0ff08;z-index:4}.story-download .eyeline{font-size:10px}.story-download h3{font-size:27px;letter-spacing:-.035em;font-weight:550;margin:7px 0}.story-download p{font-size:14px;color:#ad9bbd}.story-download .download{flex:none}.travel-progress{position:relative;left:auto;right:auto;bottom:auto;margin-top:16px}.story-copy{top:58px}.travel-stage:before{bottom:0}.travel-caption{padding-top:32px}
@media(max-width:849px){.travel-stage{height:auto;min-height:0;padding:var(--scene-body-height,640px) 16px 12px}.story-copy,.travel-stage[data-side=left] .story-copy{top:12px}.story-download{padding:19px;flex-direction:column;align-items:flex-start;gap:16px}.story-download h3{font-size:23px}.story-download p{font-size:13px}.story-download .download{width:100%;font-size:14px}.story-download .eyeline{font-size:9px}}
.pricing-section{padding:20px 0 90px}.pricing-heading{max-width:780px;margin-bottom:32px}.pricing-heading h2{font-size:clamp(32px,3.5vw,48px);line-height:1.15;letter-spacing:-.04em;font-weight:550;margin:18px 0}.pricing-heading>p{font-size:16px;line-height:1.7;color:#b0a0bf;max-width:650px}.pricing-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.pricing-card{display:flex;flex-direction:column;padding:25px 22px;border:1px solid #533668;border-radius:10px;background:linear-gradient(145deg,#201429,#100c17)}.pricing-featured{border-color:#b58be2;background:linear-gradient(145deg,#352046,#16101f);box-shadow:0 0 35px #a479d410}.pricing-name{font-size:19px;font-weight:600;color:#d2b5ef}.pricing-purpose{font-size:13px;color:#a793b8;line-height:1.6;margin-top:8px;min-height:42px}.pricing-price{font-size:32px;letter-spacing:-.045em;margin-top:25px;white-space:nowrap}.pricing-price>span{font-size:12px;letter-spacing:0;color:#a795b8}.pricing-credits{font-size:13px;color:#a892b8;margin-top:12px}.pricing-credits b{font-size:17px;color:var(--mint);font-weight:550}.pricing-card ul{list-style:none;padding:0;margin:25px 0;font-size:12px;line-height:1.65;color:#bcaacd}.pricing-card li{display:flex;align-items:flex-start;gap:7px;margin:10px 0}.pricing-card li svg{flex:none;color:var(--mint);margin-top:3px}.pricing-card>a{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:12px 10px;border:1px solid #936cb44d;border-radius:6px;background:#aa7cdc12;color:#d9c2f0;font-size:13px}.pricing-card>a:hover{background:#aa7cdc28;border-color:var(--purple)}.pricing-notes{margin-top:25px;color:#9884aa;font-size:12px;line-height:1.8}.pricing-notes p:first-child{font-size:14px;color:#bdacd0;margin-bottom:10px}.pricing-notes a{color:#c3a2e1}
@media(max-width:1000px){.pricing-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.pricing-cards{grid-template-columns:1fr}.pricing-purpose{min-height:0}.pricing-card{padding:23px}.pricing-price{margin-top:18px}.pricing-heading h2{font-size:31px}.pricing-section{padding-bottom:60px}}

/*
 * Страницы пульта: какие тайлы видны и как разложены.
 *
 * Прототип задавал это классом `console-<страница>`; здесь атрибут
 * `data-page` — тот же смысл, но состояние живёт в одном месте с остальными
 * признаками пульта, а не половиной в классе.
 *
 * Тайлы не удаляются со страницы, а прячутся: перелёт с места на место должен
 * оставаться перелётом ОДНОГО элемента, иначе браузеру нечего анимировать и
 * раскладка мигает.
 */
.console .mod-carousel{display:none}
.console[data-page=chat] .mod-chat{grid-column:1 / -1}
.console[data-page=chat] .mod-voice,
.console[data-page=chat] .mod-obs,
.console[data-page=chat] .mod-play{display:none}
.console[data-page=voice] .mod-voice{grid-column:1 / -1;grid-row:1;min-height:172px;border-color:#9466ca}
.console[data-page=voice] .mod-chat,
.console[data-page=voice] .mod-play{display:none}
.console[data-page=voice] .mod-obs{grid-column:1 / -1}
.console[data-page=record] .mod-voice{min-height:172px}
.console[data-page=record] .scene-options span,
.console[data-page=voice] .scene-options span{flex:1;text-align:center}
.console[data-page=auction] .mod-play{min-height:300px}

/*
 * Карусель. Своя страница пульта, рядом с аукционом: в приложении у неё свой
 * раздел и свой тайл, поэтому глава показывает существующий экран, а не
 * придуманный. Колесо аукциона здесь скрыто — крутится не оно.
 */
.console[data-page=carousel] .mod-carousel{display:flex;flex-direction:column;grid-column:1 / -1;min-height:196px;border-color:#9466ca}
.console[data-page=carousel] .mod-chat,
.console[data-page=carousel] .mod-play{display:none}
.console[data-page=carousel] .mod-obs{grid-column:1 / -1}
.console[data-page=carousel] .mod-voice{display:none}
.mod-carousel .bar-label{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;color:#a698b4;margin:14px 0 7px}
.mod-carousel .bar-label b{color:#dfd2eb;font-weight:550;font-variant-numeric:tabular-nums}
.carousel-bar i{background:linear-gradient(90deg,var(--purple),var(--mint));transition:width .55s ease}
.mod-carousel .drops{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.mod-carousel .drop{display:flex;align-items:center;gap:8px;font-size:12px;color:#c6b6d5;
  padding:7px 10px;border:1px solid #6d4a8c40;border-radius:6px;background:#aa7cdc0d;
  animation:drop-arrive .42s cubic-bezier(.16,1,.3,1) both}
.mod-carousel .drop:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none}
@keyframes drop-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.mod-carousel .drop{animation:none}.carousel-bar i{transition:none}}


/*
 * Остальные блоки страницы: полоса совместимости, «знакомо?», раздел про голос,
 * три шага, «на твоём ПК», FAQ и финальный призыв.
 *
 * Взято из globals.css прототипа теми же правилами. Тарифы сюда не попали
 * намеренно: их карточки рисует общий `shared/plans.css` по живому каталогу, и
 * вторая витрина цен разошлась бы с первой молча.
 */
.wrap{width:min(1200px,calc(100% - 64px));margin-inline:auto}
.eyeline{font:500 12px/1.5 var(--font-mono);letter-spacing:.14em;display:flex;align-items:center;gap:10px;color:#c0b7d0}
.wave{height:108px;display:flex;align-items:center;justify-content:center;gap:4px}
.wave i{height:var(--h);width:3px;border-radius:4px;background:linear-gradient(#d5b9ff,#9c79e3);animation:wave 1.7s ease-in-out infinite alternate;animation-delay:var(--delay);opacity:.85}
.wave.small{height:65px;gap:3px}
.wave.small i{width:2px;height:calc(var(--h) * .57)}
.voice-success{display:flex;justify-content:center;align-items:center;gap:5px;font-size:10px;color:var(--mint);margin-top:12px}
.compatibility{max-width:1040px;padding:38px 20px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid #241c31}
.compatibility>span{font-size:11px;color:#80748e}
.compatibility>span:first-child{font:10px var(--font-mono);letter-spacing:.09em}
.platform-word{font-size:19px;letter-spacing:-.04em;font-weight:750}
.pain-intro{padding:100px 0 85px}
.pain-intro h2{margin-top:20px;font-size:clamp(31px,3.5vw,46px);letter-spacing:-.045em;line-height:1.2;font-weight:550}
.dim{color:#81758f}
.pain-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:38px;gap:30px}
.pain-row p{display:flex;gap:15px;color:#8e829d;line-height:1.6;font-size:15px}
.pain-row svg{width:20px;color:#9b80bc;flex:none;margin-top:3px}
.pain-row strong{color:#c9bfd6;font-weight:400}
.voice-section{padding:130px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:85px;align-items:center}
.voice-copy h2{font-size:clamp(32px,3.5vw,47px);font-weight:550;line-height:1.15;letter-spacing:-.045em;margin:0 0 18px}
.voice-copy>p{font-size:17px;line-height:1.8;color:#aa9db8;max-width:440px}
.voice-modes{display:flex;flex-direction:column;gap:12px;margin:25px 0 30px;color:#d1c2de;font-size:14px}
.voice-modes span{display:flex;gap:9px;align-items:center}
.voice-modes svg{color:var(--mint)}
.voice-demo{padding:24px;background:radial-gradient(ellipse at 50% 20%,#76509925,transparent 70%),#130e1b;border:1px solid #3a294b;border-radius:12px}
.demo-top{display:flex;justify-content:space-between;font-size:10px;color:#897a98}
.demo-top>span:first-child{display:flex;gap:8px;align-items:center;letter-spacing:.09em}
.demo-phrase{font-size:20px;letter-spacing:-.02em;text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center}
.demo-result{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--mint);font-size:12px;margin:8px 0 25px}
.demo-commands{display:flex;flex-direction:column;gap:7px}
.demo-commands button{display:flex;gap:10px;align-items:center;padding:12px 14px;color:#aa98bc;background:#201628;border:1px solid #362541;border-radius:5px;text-align:left;cursor:pointer;font-size:14px;transition:border-color .2s,background .2s}
.demo-commands button>svg:last-child{margin-left:auto}
.demo-commands button.active{color:#dcc7f3;background:#39244b;border-color:#9871bd}
.demo-commands button:hover{border-color:#c1a1dd}
.demo-disclaimer{color:#9786a6;font-size:12px;line-height:1.65;margin-top:18px}












.closing{position:relative;text-align:center;padding:100px 24px 110px;border-block:1px solid #2a2035;background:radial-gradient(ellipse at 50% 100%,#7240ab25,transparent 65%)}
.closing .eyeline{justify-content:center}
.closing h2{font-size:clamp(45px,6vw,76px);line-height:1.05;letter-spacing:-.055em;font-weight:550;margin:25px 0}
.closing p{color:#a99ab7;font-size:16px;margin-bottom:30px}
.closing .hero-note{margin-top:19px}

/* Три шага и вопросы */
.getting-started{padding:0 0 90px}.getting-started h2,.faq-heading h2{font-size:clamp(32px,3.5vw,48px);font-weight:550;line-height:1.15;letter-spacing:-.04em;margin:18px 0 30px}.start-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;list-style:none;margin:0 0 32px;padding:0}.start-steps li{padding-top:20px;border-top:1px solid #a67ec446}.start-marker{display:flex;align-items:center;justify-content:space-between;color:var(--purple);margin-bottom:22px}.start-marker span{font:12px var(--font-mono);color:#877299}.start-steps h3{font-size:20px;font-weight:550;margin-bottom:12px}.start-steps p{font-size:16px;line-height:1.75;color:#ad9aba}.faq-section{display:grid;grid-template-columns:.7fr 1.3fr;gap:65px;padding:5px 0 90px}.faq-heading h2{margin-bottom:15px}.faq-heading p{font-size:16px;color:#ad9aba;line-height:1.65;margin-bottom:25px}.faq-list{display:flex;flex-direction:column;width:100%}
/* Вопросы раскрываются тегом details. Иконка нарисована рамкой:
   так она поворачивается вместе с раскрытием и не требует ни картинки,
   ни строчки скрипта. */
.faq-list details{border-bottom:1px solid #65427655}
.faq-list details:first-child{border-top:1px solid #65427655}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0;color:#e1d1ee;font:500 16px/1.5 var(--font-sans);cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:9px;height:9px;margin-bottom:4px;border-right:1.5px solid var(--purple);border-bottom:1.5px solid var(--purple);transform:rotate(45deg);transition:transform .2s ease}
.faq-list details[open] summary::after{transform:rotate(-135deg);margin:4px 0 0}
.faq-list summary:hover{color:var(--purple)}
.faq-list summary:focus-visible{outline:2px solid var(--mint);outline-offset:5px}
.faq-list details>div{padding:0 20px 22px 0;font-size:15px;line-height:1.8;color:#b4a0c3}
@media(prefers-reduced-motion:reduce){.faq-list summary::after{transition:none}}

/* Узкий экран.
   Обёртки @media обязаны быть на месте: их содержимое схлопывает сетки в
   одну колонку, и без обёртки оно действует на любом экране. */
@media(max-width:1000px){.voice-section{gap:40px}.compatibility>span:last-child{display:none}}
@media(max-width:700px){.closing{padding:70px 20px}.closing h2{font-size:49px}.wrap{width:calc(100% - 40px)}.hero-section{padding-top:52px}.hero-content h1{font-size:44px;letter-spacing:-.055em}.hero-lead{font-size:16px;line-height:1.7}.eyeline{font-size:10px}.hero-actions{flex-direction:column;gap:20px}.compatibility{padding:30px 20px;gap:15px;flex-wrap:wrap;justify-content:center}.compatibility>span:first-child{width:100%;text-align:center;font-size:9px}.platform-word{font-size:17px}.pain-intro{padding:65px 0}.pain-intro h2{font-size:30px}.pain-row{grid-template-columns:1fr;gap:23px;margin-top:30px}.pain-row p{font-size:14px}.chapter-number{margin-top:0;font-size:10px}.chapter-note{display:none}.chapter-navigation{margin-top:15px;gap:9px}.chapter-navigation button{padding:8px 0;width:44px}.voice-section{padding:75px 0;grid-template-columns:1fr;gap:35px}.voice-copy>p{font-size:16px}.voice-demo{padding:20px}.demo-phrase{font-size:18px}.hero-note{font-size:11px}}
@media(max-width:700px){.start-steps{grid-template-columns:1fr;gap:23px}.start-marker{margin-bottom:14px}.getting-started{padding-bottom:65px}.faq-section{grid-template-columns:1fr;gap:24px;padding-bottom:65px}.faq-heading h2{font-size:33px}.faq-list [data-slot=accordion-trigger]{font-size:15px;padding:18px 0}.faq-list [data-slot=accordion-content]>div{padding-right:0}}

/* Стили перенесённых демонстраций, «с нами стримят» и тарифов.

   Взяты из landing.css правилом «каждый класс селектора встречается только
   внутри этих секций»: у боевой страницы и прототипа десятки общих имён, и
   подключить чужой файл рядом значило бы перекрасить блоки прототипа. */
.alert-text { font-size: 0.74rem; color: var(--text-secondary); }
.stage-chat {
  position: absolute;
  right: 14px; top: 14px; bottom: 58px;
  width: 42%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  overflow: hidden;
  font-size: 0.72rem;
}
.chat-line {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: rgba(10, 8, 22, 0.66);
  border-left: 2px solid var(--twitch);
  color: var(--text-secondary);
  animation: chat-in 0.35s var(--ease);
}
.chat-line b { color: var(--text-primary); }
.chat-line[data-platform="youtube"] { border-left-color: var(--youtube); }
.chat-line[data-platform="kick"] { border-left-color: var(--kick); }
.goal-row { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-secondary); margin-bottom: 6px; }
.goal-bar { height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.goal-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), hsl(153, 72%, 77%));
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width 0.9s var(--ease);
}
.section { padding-top: 64px; padding-bottom: 64px; }
.section-head { max-width: 720px; margin-bottom: 32px; }
.section h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; margin: 8px 0 12px; line-height: 1.15; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* min-width:0 обязателен: карточка — элемент грид-сетки, а у него минимальная
   ширина по умолчанию равна ширине содержимого. Лента карусели длиной в 24
   карточки задирала её до 3228px, колонка растягивалась следом, и страница
   на телефоне ездила вбок на девять экранов. overflow:hidden у окна ленты от
   этого не спасает: он обрезает показ, а не участие в расчёте ширины. */
.bento .card { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.bento .card h3 { margin: 6px 0 0; font-size: 1.1rem; letter-spacing: -0.01em; }
.bento .card p { margin: 0; font-size: 0.9rem; }
.bento .card .pill { align-self: flex-start; }
.bento-lg { grid-column: span 2; }
.bento-head { display: flex; flex-direction: column; gap: 10px; }
.bento code { font-family: var(--font-mono); font-size: 0.85em; color: var(--accent-hover); }
.demo {
  margin-top: auto;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hair);
  background: rgba(8, 6, 18, 0.55);
}
.demo-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.demo-label { font-size: 0.74rem; color: var(--success); font-weight: 600; }
.demo-timer { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-secondary); }
.lots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lot-num { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }
.lot-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.lot-sum.is-hit { color: var(--accent-hover); }
.pool-bar { height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pool-bar span {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), hsl(320, 71%, 79%));
  box-shadow: 0 0 12px rgba(239, 166, 216, 0.35);
  transition: width 0.9s var(--ease);
}
.ribbon-window {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.ribbon-window::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-hover), transparent);
  box-shadow: 0 0 10px var(--accent-glow);
  pointer-events: none;
}
.ribbon {
  display: flex;
  gap: 8px;
  width: max-content;
  will-change: transform;
}
.ribbon-card {
  --r: #b9b9c3;
  --rg: rgba(185, 185, 195, 0.32);
  flex: none;
  width: 124px;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.25));
  box-shadow: inset 0 -2px 0 0 var(--r);
  font-size: 0.74rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-secondary);
  opacity: 0.62;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ribbon-card[data-rarity="uncommon"]  { --r: #3ddc84; --rg: rgba(61, 220, 132, 0.38); }
.ribbon-card[data-rarity="rare"]      { --r: #4aa8ff; --rg: rgba(74, 168, 255, 0.38); }
.ribbon-card[data-rarity="epic"]      { --r: #c86bff; --rg: rgba(200, 107, 255, 0.4); }
.ribbon-card[data-rarity="legendary"] { --r: #ff9c3d;  --rg: rgba(255, 156, 61, 0.4); }
.ribbon-card[data-rarity="artifact"]  { --r: #ffd83d; --rg: rgba(255, 216, 61, 0.42); }
.ribbon-card.is-won {
  opacity: 1;
  transform: translateY(-2px);
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 0 var(--r), 0 0 18px var(--rg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2));
}
.debts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.debts li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.debts b { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.demo-tts { display: flex; flex-direction: column; gap: 6px; }
.tts-line {
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--hair);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.tts-line b { color: var(--text-secondary); font-weight: 600; }
.tts-line.is-now { border-left-color: var(--success); color: var(--text-primary); }
.tts-line.is-now b { color: var(--text-primary); }
.demo-wheel { position: relative; display: grid; place-items: center; padding: 18px; }
.wheel {
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 2px solid var(--card-border-active);
  box-shadow: var(--glow), inset 0 0 26px rgba(0, 0, 0, 0.55);
  /* Шесть секторов — три тона страницы, каждый в светлом и тёмном варианте.
     Соседние расходятся и по тону, и по светлоте, поэтому различимы сильнее,
     чем прежняя радуга, различавшаяся только тоном. */
  background: conic-gradient(
    hsl(262, 100%, 78%) 0deg 60deg,
    hsl(153, 40%, 42%) 60deg 120deg,
    hsl(320, 71%, 79%) 120deg 180deg,
    hsl(262, 48%, 48%) 180deg 240deg,
    hsl(153, 72%, 77%) 240deg 300deg,
    hsl(320, 45%, 52%) 300deg 360deg);
  transition: transform 4.2s cubic-bezier(0.16, 0.87, 0.28, 1);
}
.wheel-pin {
  position: absolute;
  top: 6px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid var(--text-primary);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.chain { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chain li {
  position: relative;
  padding: 7px 11px 7px 30px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.84rem;
  color: var(--text-muted);
  transition: color 0.25s, background 0.25s;
}
.chain li::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.25s, box-shadow 0.25s;
}
.chain li.is-on { color: var(--text-primary); background: var(--accent-soft); }
.chain li.is-on::before { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.demo-goal .goal-row { font-size: 0.8rem; }
.demo-chat { display: flex; flex-direction: column; gap: 6px; min-height: 168px; justify-content: flex-end; font-size: 0.82rem; }
.demo-cmd { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; }
.cmd-line b { font-family: var(--font-mono); color: var(--accent-hover); }
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-lg { grid-column: span 2; }
}
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; }
  .bento-lg { grid-column: span 1; }
  .section { padding-top: 48px; padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel { transition: none; }
  .chat-line { animation: none; }
}
.live-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.live-tile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.live-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.live-name {
  font-weight: 600;
}
.live-where, .live-game {
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.live-where::before, .live-game::before {
  content: '·';
  margin-right: 0.5rem;
  opacity: 0.55;
}
.live-tile.is-recent {
  opacity: 0.62;
}
.live-tile.is-recent:hover {
  opacity: 1;
}
.live-more {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.9rem;
}
.live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #eb729c;
  animation: live-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .live-tile:hover { transform: none; }
}
@keyframes chat-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Правила прототипа, потерянные при первой сборке.

   Отбирались так же, как стили демонстраций: правило берётся, если каждый класс
   его селектора есть на этой странице. Потерялись они молча — CSS не жалуется
   на отсутствующее правило, и страница выглядела собранной, пока владелец не
   увидел вместо колеса аукциона крутящуюся полосу. */
@media(min-width:850px) and (max-height:760px){.travel-stage{min-height:560px}.story-copy{top:35px}.story-copy h2{font-size:36px}.story-copy p{font-size:15px}}
@media(max-width:849px){.scroll-story{height:640svh;margin-top:20px}.travel-stage{top:70px;height:calc(100svh - 80px);min-height:590px;max-height:none}.story-copy,.travel-stage[data-side=left] .story-copy{width:auto;left:24px;right:24px;top:12px}.story-copy h2{font-size:30px;margin:12px 0}.story-copy h2 br{display:none}.story-copy p{font-size:14px;line-height:1.55;max-width:630px}.story-copy .chapter-note{display:none}.story-copy .chapter-navigation{margin-top:10px;gap:10px}.story-copy .chapter-navigation button{min-height:36px;padding:6px 0}.story-copy .chapter-number{font-size:10px}.travelling-console .console{min-height:470px}.travelling-console .console-rail{display:none}.travelling-console .console-content{width:100%;padding:11px}.travelling-console .console-title{gap:12px}.travelling-console .console-title img{width:75px}.travelling-console .console-title>span{font-size:10px}.travelling-console .tile-heading{font-size:10px;gap:5px}.travelling-console .module{padding:9px}.travelling-console .scene-options span{padding:6px;font-size:9px}.travelling-console .chat-lines p{font-size:10px}.travelling-console .mini-phrase{font-size:11px}.travelling-console .wave.small{gap:2px}.travelling-console .console-foot{font-size:8px}.travelling-console .console .tile-grid{min-height:249px}.console-tabs{gap:2px}.console-tabs span{font-size:10px;padding:5px 7px}.live-metrics{font-size:10px}.donation-event{padding:5px 7px}.travel-progress{bottom:6px}}
@media(prefers-reduced-motion:reduce){.travelling-console,.story-copy{will-change:auto}.travelling-console .module,.chat-lines,.donation-event,.live-metrics b{animation:none!important}.travel-stage .story-copy{opacity:1}.travel-stage[data-intro=true] .story-copy{opacity:0}}
@media(max-width:1100px) and (min-width:850px){.story-copy h2{font-size:36px}.story-copy p{font-size:14px}.story-copy .chapter-note{font-size:11px}}
@media(max-width:849px){.scroll-story{height:570svh}.travel-stage{height:calc(100svh - 80px);min-height:620px}.story-copy,.travel-stage[data-side=left] .story-copy{top:12px;width:auto}.story-copy h2{font-size:30px}}
@media(max-width:849px){.depth-shell{transform:perspective(1200px) rotateX(3deg)}.depth-callout{font-size:10px;padding:9px 11px;gap:6px}.depth-command{left:2px;top:165px}.depth-result{right:2px;bottom:28px}.travel-stage[data-intro=false] .depth-command{top:-12px}.travel-stage[data-intro=false] .depth-result{bottom:-12px}}
@media(prefers-reduced-motion:reduce){.depth-shell{transform:none}.depth-callout{transform:none}}
@media(max-width:849px){.travel-stage{height:auto;min-height:0;padding:var(--scene-body-height,640px) 16px 12px}.story-copy,.travel-stage[data-side=left] .story-copy{top:12px}.story-download{padding:19px;flex-direction:column;align-items:flex-start;gap:16px}.story-download h3{font-size:23px}.story-download p{font-size:13px}.story-download .download{width:100%;font-size:14px}.story-download .eyeline{font-size:9px}}
.live-background{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;--bg-scroll:0}
.live-background canvas{position:absolute;inset:0;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.live-background canvas{display:none}}
.platforms>span>i{margin-left:2px}
.auction-clock{font-variant-numeric:tabular-nums;letter-spacing:.07em}
.auction-wheel-wrap{position:relative;width:144px;height:144px;margin:14px auto 10px;isolation:isolate}
.auction-disc{position:absolute;inset:4px;border-radius:50%;border:5px solid #51356c;box-shadow:0 8px 24px #0004,inset 0 0 20px #fff1;will-change:transform}
.auction-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:39px;height:39px;display:grid;place-items:center;border:3px solid #7b549c;border-radius:50%;background:#261637;color:#dec6fc;box-shadow:0 3px 12px #0005}
.auction-pointer{position:absolute;z-index:2;top:-1px;left:calc(50% - 7px);width:14px;height:20px;background:#eedbff;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 4px #0008)}
.wheel-lot{position:absolute;font:bold 11px var(--font-mono);color:#241731}
.wheel-lot.one{right:15px;top:55%}
.wheel-lot.two{left:16px;top:35%}
.auction-phase{display:flex;gap:5px;align-items:center;justify-content:center;min-height:30px;margin-bottom:8px;font-size:10px;color:#b8a2c9}
.auction-demo[data-phase=winner] .auction-phase{color:var(--mint)}
.lot-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:5px;background:var(--purple)}
.lot-dot.other{background:var(--mint)}
.second-lot i{background:var(--mint)}
.auction-demo .auction-bar i{transition:width .55s ease}
.auction-demo .auction-row{font-variant-numeric:tabular-nums}
.auction-demo[data-phase=winner]{border-color:#98e0bd66}
@media(max-width:849px){.platforms>span{gap:4px;padding:5px}.auction-wheel-wrap{width:125px;height:125px}.auction-phase{font-size:9px}}
@media(prefers-reduced-motion:reduce){.auction-disc{will-change:auto}.auction-demo .auction-bar i{transition:none}}
@media(max-width:700px){.start-steps{grid-template-columns:1fr;gap:23px}.start-marker{margin-bottom:14px}.getting-started{padding-bottom:65px}.faq-section{grid-template-columns:1fr;gap:24px;padding-bottom:65px}.faq-heading h2{font-size:33px}}
.site-header{z-index:50}
.mint-text{color:var(--mint)}
.pink-text{color:var(--pink)}
.auction-row{font-size:10px;display:flex;justify-content:space-between;gap:5px;color:#bfb0d0}
.auction-row b{font-weight:500;white-space:nowrap}
.auction-bar{height:3px;margin:8px 0;background:#292030;border-radius:5px}
.auction-bar i{display:block;width:76%;height:100%;background:var(--purple);border-radius:5px}
@media(min-width:1500px){.hero-section{padding-top:95px}}
@media(max-width:1000px){.voice-section{gap:40px}.compatibility>span:last-child{display:none}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.hero-section{padding-top:52px}.hero-content h1{font-size:44px;letter-spacing:-.055em}.hero-lead{font-size:16px;line-height:1.7}.eyeline{font-size:10px}.hero-actions{flex-direction:column;gap:20px}.compatibility{padding:30px 20px;gap:15px;flex-wrap:wrap;justify-content:center}.compatibility>span:first-child{width:100%;text-align:center;font-size:9px}.platform-word{font-size:17px}.pain-intro{padding:65px 0}.pain-intro h2{font-size:30px}.pain-row{grid-template-columns:1fr;gap:23px;margin-top:30px}.pain-row p{font-size:14px}.chapter-number{margin-top:0;font-size:10px}.chapter-note{display:none}.chapter-navigation{margin-top:15px;gap:9px}.chapter-navigation button{padding:8px 0;width:44px}.voice-section{padding:75px 0;grid-template-columns:1fr;gap:35px}.voice-copy h2{font-size:33px}.voice-copy>p{font-size:16px}.voice-demo{padding:20px}.demo-phrase{font-size:18px}.hero-note{font-size:11px}}

.demo-source{display:none}

/* ── Жизнь внутри окна ───────────────────────────────────────────────────────

   Правило движения запрещает «дыхание» — бесконечные синусоиды, которыми
   занимают сцену: они читаются как «страница ждёт». Между входом и выходом
   сцена обязана делать что-то по делу, и здесь это «жизнь интерфейса»:
   продукт ведёт себя во времени, а не колышется.

   Три анимации ниже ссылались из правил, но описаны нигде не были — то есть
   волна не шевелилась, глава не появлялась, колесо не прилетало. CSS о таком
   молчит: неизвестное имя анимации просто игнорируется.                     */

@keyframes wave { to { transform: scaleY(.35); opacity: .5 } }
@keyframes chapter-in { from { opacity: .3; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes wheel-arrive { from { transform: rotate(-130deg) scale(.85) } to { transform: rotate(0) scale(1) } }

/* ── Такт голоса: слушает → говорит → пауза → отвечает ──────────────────────

   Полоска шевелится ТОЛЬКО пока идёт фраза. В покое она лежит ровной чертой,
   а не дышит: молчание должно выглядеть молчанием.

   Между фразой и ответом стоит пауза — «запятая перед развязкой». Без неё
   ответ появляется одновременно с речью и не читается как ответ на неё.     */

.wave i {
  /* Прежнее правило волны из прототипа анимировало столбики всегда. Здесь оно
     гасится явно: молчание обязано выглядеть молчанием. */
  animation: none;
  transform: scaleY(.14);
  opacity: .38;
  transform-origin: center;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}
[data-voice="speak"] .wave i {
  transform: none;
  opacity: .92;
  animation: wave 1.5s ease-in-out var(--delay) infinite alternate;
}

/* Фраза гаснет, пока её ещё не произнесли. */
.demo-phrase, .travelling-console .mini-phrase {
  transition: opacity .3s ease;
}
[data-voice="listen"] .demo-phrase,
[data-voice="listen"] .mini-phrase { opacity: .3 }

/* Ответ приходит после паузы и приподнимается — движение вверх читается как
   «получилось», в отличие от простого проявления. */
.demo-result, .voice-success {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
}
[data-voice="answer"] .demo-result, [data-voice="answer"] .voice-success,
[data-voice="hold"] .demo-result, [data-voice="hold"] .voice-success {
  opacity: 1;
  transform: none;
}

/* ── Лента чата ─────────────────────────────────────────────────────────────

   Реплика приходит одна и снизу, а список подтягивается на её высоту. Раньше
   лента пересобиралась целиком, и весь чат дёргался разом — это читалось как
   перерисовка, а не как разговор.                                           */

.chat-lines p[data-fresh] {
  animation: chat-say .42s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes chat-say {
  from { opacity: 0; transform: translateY(9px) }
  to { opacity: 1; transform: none }
}

/* ── Смайлики ───────────────────────────────────────────────────────────────

   Свои, нарисованные контуром: смайлики площадок принадлежат площадкам.
   Форма задана маской, цвет — обычным `color`, поэтому смайлик наследует
   размер строки и не ломает межстрочный интервал.

   Два из трёх оживлены. Это содержимое реплики — так смайлик и выглядит в
   настоящем чате, — а не способ занять паузу.                               */

.emote {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -.22em;
  background: currentColor;
  -webkit-mask: center / contain no-repeat var(--emote);
  mask: center / contain no-repeat var(--emote);
}
.emote-heart {
  color: #ef7ba8;
  --emote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S2.6 15.2 2.6 8.9C2.6 5.6 5.1 3.4 8 3.4c1.9 0 3.2 1 4 2.2.8-1.2 2.1-2.2 4-2.2 2.9 0 5.4 2.2 5.4 5.5C21.4 15.2 12 21 12 21z'/%3E%3C/svg%3E");
  animation: emote-beat 1.5s ease-in-out infinite;
}
.emote-fire {
  color: #ff9c3d;
  --emote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1.6 3.3.4 5-1 6.6-1.6 1.8-3 3.5-3 5.9A4.2 4.2 0 0 0 12 22a4.4 4.4 0 0 0 4.4-4.6c0-1.6-.8-2.7-1.6-3.7-.6-.8-.9-1.6-.6-2.6.9 1 1.6 1.5 2.4 3 .5-1 .8-2 .8-3.2C17.4 6.9 15 3.9 12 2z'/%3E%3C/svg%3E");
  animation: emote-flicker 1.1s ease-in-out infinite alternate;
}
.emote-spark {
  color: #9befcf;
  --emote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.3 6.9L21 11.2l-6.7 2.3L12 20.4l-2.3-6.9L3 11.2l6.7-2.3z'/%3E%3C/svg%3E");
}
@keyframes emote-beat {
  0%, 62%, 100% { transform: scale(1) }
  12% { transform: scale(1.22) }
  26% { transform: scale(1.04) }
  38% { transform: scale(1.15) }
}
@keyframes emote-flicker {
  from { transform: scale(.94) translateY(.5px); opacity: .82 }
  to { transform: scale(1.06) translateY(-.5px); opacity: 1 }
}

/* ── Меньше движения ────────────────────────────────────────────────────────

   Выключается всё, что движется само: волна, смайлики, приход реплики. Ответ
   и фраза остаются видимыми — иначе при отключённом движении демонстрация
   покажет пустую рамку.                                                     */

@media (prefers-reduced-motion: reduce) {
  .wave i { animation: none; transform: none; opacity: .8; transition: none }
  .chat-lines p[data-fresh] { animation: none }
  .emote-heart, .emote-fire { animation: none }
  .demo-result, .voice-success { opacity: 1; transform: none; transition: none }
  .demo-phrase, .mini-phrase { opacity: 1 }
}

/* ── Уведомление о донате ────────────────────────────────────────────────────

   Прилёт играет в тот такт, когда пришла сумма, а не один раз при загрузке.
   Признак ставит скрипт, поэтому анимация запускается заново каждый раз.

   И приход не остаётся без последствий: копилка карусели дёргается В ТОТ ЖЕ
   КАДР. Движение без видимой причины читается как случайное, а связка
   «донат → копилка подросла» и есть то, что демонстрация обещает словами. */

.donation-event{animation:none}
.donation-event[data-arrived]{animation:donation-arrive 1.15s cubic-bezier(.22,1,.36,1)}
[data-carousel-pot][data-bumped]{animation:pot-bump .5s cubic-bezier(.22,1,.36,1)}
[data-carousel-fill][data-bumped]{animation:fill-bump .55s cubic-bezier(.22,1,.36,1)}
@keyframes pot-bump{0%{transform:none}28%{transform:translateY(-3px) scale(1.06)}100%{transform:none}}
@keyframes fill-bump{0%{filter:none}30%{filter:brightness(1.5)}100%{filter:none}}
@media (prefers-reduced-motion: reduce){
  .donation-event[data-arrived]{animation:none}
  [data-carousel-pot][data-bumped],[data-carousel-fill][data-bumped]{animation:none}
}

/* ── Текст в пульте крупнее ──────────────────────────────────────────────────

   Подписи внутри окна достались от макета вдвое меньшего, а само окно на
   странице большое — и с тех пор стало ещё больше: у него теперь постоянная
   пропорция, и плитки растягиваются на всю высоту. Мелкий текст в большой
   плитке оставляет половину её пустой.

   Размеры заданы прямо, а не множителем: правила ниже перекрывают штук
   двадцать существующих, и множитель пришлось бы прописывать в каждом из них.
   Узкий экран возвращает пропорции своим блоком в конце — иначе на телефоне
   подписи остались бы десктопными.                                          */

.travelling-console .console-title > span { font-size: 15px }
.travelling-console .console-heading { font-size: 26px }
.travelling-console .console-tabs span { font-size: 15px; padding: 8px 13px }
.travelling-console .live-metrics { font-size: 16px }
.travelling-console .tile-heading { font-size: 17px; margin-bottom: 14px }
.travelling-console .tile-status { font-size: 14px }
.travelling-console .platforms > span { font-size: 15px; padding: 10px 12px }
.travelling-console .platforms b { font-size: 16px; width: 26px; height: 26px }
.travelling-console .chat-lines p { font-size: 17px }
.travelling-console .console-chat .chat-lines p { font-size: 18px }
.travelling-console .chat-input { font-size: 15px }
.travelling-console .mini-phrase { font-size: 21px }
.travelling-console .console-voice .mini-phrase { font-size: 25px }
.travelling-console .voice-success { font-size: 15px }
.travelling-console .console-foot { font-size: 13px }
.travelling-console .auction-row { font-size: 16px }
.travelling-console .auction-phase { font-size: 15px }
.travelling-console .mod-carousel .bar-label,
.travelling-console .mod-carousel .drop { font-size: 16px }
.travelling-console .donation-event { font-size: 15px; padding: 8px 14px }
.travelling-console .console-rail { width: 58px }
.travelling-console .console-content { width: calc(100% - 58px) }

/* ── Плитка сцен OBS ─────────────────────────────────────────────────────────

   Три кнопки в углу большой плитки оставляли её почти пустой. Теперь они
   занимают её целиком: столбик кнопок в полную ширину, каждая — строка, как в
   настоящем переключателе сцен. Содержимое то же, а пустоты нет.            */

.travelling-console .scene-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  min-height: 0;
}
.travelling-console .scene-options span {
  font-size: 16px;
  padding: 0 15px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  border-radius: 7px;
}
/* Живая сцена помечена точкой слева — так видно, какая идёт в эфир. */
.travelling-console .scene-options span.selected::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 11px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px #9befcf66;
  flex: none;
}
.travelling-console .mod-obs { display: flex; flex-direction: column }

/* Тайл голоса: полоска забирает свободную высоту, чтобы звук не жался в угол. */
.travelling-console .console-voice .wave,
.travelling-console .mod-voice .wave { flex: 1; min-height: 0; height: auto }
.travelling-console .mod-voice { display: flex; flex-direction: column }

/* Лента чата прижата к низу: новая реплика приходит снизу, а пустота, если
   строк меньше, копится сверху — как в настоящем чате. */
/* Окно ленты забирает высоту плитки целиком, а список прижат к его низу.
   Без этого окно оставалось высотой в содержимое: на странице аукциона оно
   схлопывалось до сорока пикселей, и число строк считалось по нему неверно. */
.travelling-console .chat-window { flex: 1; min-height: 0; display: flex; flex-direction: column }
.travelling-console .chat-lines { margin-top: auto }
.travelling-console .mod-chat { display: flex; flex-direction: column }

/* ── Узкий экран ────────────────────────────────────────────────────────────
   Возврат к прежним пропорциям: правила выше стоят позже мобильного блока и
   иначе перебили бы его. */

@media (max-width: 849px) {
  .travelling-console .console-title > span { font-size: 10px }
  .travelling-console .console-heading { font-size: 17px }
  .travelling-console .console-tabs span { font-size: 10px; padding: 5px 7px }
  .travelling-console .live-metrics { font-size: 10px }
  .travelling-console .tile-heading { font-size: 10px; margin-bottom: 8px }
  .travelling-console .tile-status { font-size: 9px }
  .travelling-console .platforms > span { font-size: 9px; padding: 5px }
  .travelling-console .platforms b { font-size: 10px; width: 19px; height: 19px }
  .travelling-console .chat-lines p { font-size: 10px }
  .travelling-console .console-chat .chat-lines p { font-size: 12px }
  .travelling-console .chat-input { font-size: 10px }
  .travelling-console .mini-phrase { font-size: 11px }
  .travelling-console .console-voice .mini-phrase { font-size: 14px }
  .travelling-console .voice-success { font-size: 10px }
  .travelling-console .console-foot { font-size: 8px }
  .travelling-console .auction-row { font-size: 10px }
  .travelling-console .auction-phase { font-size: 10px }
  .travelling-console .mod-carousel .bar-label,
  .travelling-console .mod-carousel .drop { font-size: 10px }
  .travelling-console .donation-event { font-size: 10px; padding: 5px 7px }
  .travelling-console .console-rail { width: 49px }
  .travelling-console .console-content { width: 100% }
  .travelling-console .scene-options span { font-size: 9px; padding: 0 8px }
  .travelling-console .scene-options span.selected::before { width: 5px; height: 5px; margin-right: 7px }
}

/* Колесо аукциона показывается только на своей странице.

   На остальных плитка аукциона второстепенная и получает от сетки вдвое
   меньше высоты: колесо в 144 пикселя туда не влезало и выдавливало ставки
   за край. Компактная плитка показывает то же, что показал бы настоящий
   пульт в этом размере, — фазу и ставки. */
.travelling-console .console:not([data-page="auction"]) .auction-wheel-wrap { display: none }
.travelling-console .console:not([data-page="auction"]) .auction-phase { margin-top: 2px; margin-bottom: 4px; min-height: 0 }

/* ── Страница карусели: полный круг ──────────────────────────────────────────

   Сверху лента, снизу два тайла — управление и челленджи. Плитка сцен OBS с
   этой страницы убрана: она к карусели отношения не имеет и занимала половину
   экрана.

   Три плитки вместо двух показывают цикл целиком: донат прилетает плашкой в
   шапке и дёргает копилку, копилка наполняется, лента прокручивается,
   выпавшее уходит в челленджи со своим счётчиком или таймером.              */

.mod-spin, .mod-donations { display: none }
.console[data-page=carousel] .mod-spin { display: flex; flex-direction: column; grid-column: 1 / -1; min-height: 150px }
.console[data-page=carousel] .mod-donations { display: flex; flex-direction: column }
.console[data-page=carousel] .mod-obs { display: none }
.console[data-page=carousel] .mod-carousel { grid-column: auto; min-height: 0 }

/* ── Лента прокрута ────────────────────────────────────────────────────────── */

.spin-window {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #150f1f;
  border: 1px solid #2c2139;
  display: flex;
  align-items: center;
  /* Края растворяются, чтобы лента не обрывалась ножом. */
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* Указатель — булавка сверху. Черта во всю высоту резала карточку победителя
   пополам: то, ради чего прокрут и делается, оказывалось перечёркнутым. */
.spin-pin {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #eedbff;
  filter: drop-shadow(0 3px 6px #0009);
}

/* Лента СТОИТ между прокрутами. Вечно ползущая читалась бы как заставка, а
   прокрут обязан быть событием — иначе непонятно, что именно выпало.
   Замедление задаёт переход, который ставит скрипт вместе со смещением. */
.spin-ribbon { display: flex; gap: 10px; padding: 0 12px; will-change: transform }

.spin-card {
  flex: none;
  width: 148px;
  padding: 13px 12px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  color: #d9cbe8;
  background: linear-gradient(160deg, #241a33, #1a1426);
  border: 1px solid var(--r, #3a2c4c);
  box-shadow: inset 0 0 18px #0004;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, color .5s ease;
}
/* Редкости — цвета самого приложения (--rarity-* в карусели). */
.spin-card[data-rarity="common"] { --r: #b9b9c366 }
.spin-card[data-rarity="uncommon"] { --r: #3ddc8466 }
.spin-card[data-rarity="rare"] { --r: #4aa8ff66 }
.spin-card[data-rarity="epic"] { --r: #c86bff77 }

/* Победитель подрастает и загорается — но ПОСЛЕ остановки: задержка равна
   длительности прокрута, иначе он вспыхивает на ходу и глаз его теряет. */
.spin-card[data-won] {
  transform: scale(1.11);
  color: #f1e6ff;
  box-shadow: 0 0 0 1px var(--r, #ae8dff), 0 0 26px #ae8dff55, inset 0 0 22px #ae8dff22;
  transition-delay: 2.05s;
}
/* ── Челленджи ─────────────────────────────────────────────────────────────── */

.challenge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-height: 0;
}
.challenge {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 7px;
  background: #1d1628;
  border: 1px solid #32253f;
  font-size: 15px;
  color: #b9a9c9;
}
/* Идущая задача помечена цветом рамки, а не отдельной надписью: место в плитке
   дороже, а состояние читается и так. */
.challenge[data-running="true"] {
  border-color: #9befcf55;
  color: #ded1ec;
  background: linear-gradient(120deg, #1f2a2a, #1b1728);
}
.challenge-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.challenge-meter { flex: none; font: 15px var(--font-mono); color: var(--mint) }
.challenge[data-fresh] { animation: chat-say .45s cubic-bezier(.22, 1, .36, 1) both }

/* ── Кнопки тайла ──────────────────────────────────────────────────────────── */

.tile-actions { display: flex; align-items: center; gap: 11px; margin: 8px 0 2px }
.tile-note { font-size: 13px; color: #8d7f9c }
.tile-btn {
  flex: none;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid #3d2d51;
  background: #241a33;
  color: #cbbadd;
  font: inherit;
  font-size: 14px;
  cursor: default;
}
.tile-btn.primary { border-color: #9871bd; background: #39244b; color: #e4d3f7 }
.tile-btn:disabled { opacity: .62 }

@media (prefers-reduced-motion: reduce) {
  .spin-ribbon { animation: none }
  .mod-spin[data-spinning="true"] .spin-ribbon { animation: none }
  .challenge[data-fresh] { animation: none }
}

@media (max-width: 849px) {
  .spin-card { width: 92px; padding: 9px 8px; font-size: 10px }
  .challenge { font-size: 10px; padding: 7px 9px; gap: 7px }
  .challenge-meter { font-size: 10px }
  .tile-btn { font-size: 10px; padding: 5px 9px }
  .tile-note { font-size: 9px }
}

/* ── Кнопки-иконки ───────────────────────────────────────────────────────────

   Владелец попросил кнопки без подписей: квадрат с иконкой «запустить» и
   квадрат с галочкой «выполнено». Подпись при этом не пропала — она ушла в
   `aria-label`: иконка без имени для скринридера просто пустая кнопка.

   Форма задана маской, а не картинкой: цвет наследуется от текста, значит
   состояние кнопки красит иконку заодно.                                    */

.icon-btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid #3d2d51;
  background: #241a33;
  color: #cbbadd;
  cursor: default;
  display: grid;
  place-items: center;
}
.icon-btn::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat var(--icon);
  mask: center / contain no-repeat var(--icon);
}
.icon-play {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15a1 1 0 0 0 1.54.84l11.5-7.5a1 1 0 0 0 0-1.68L8.54 3.66A1 1 0 0 0 7 4.5z'/%3E%3C/svg%3E");
}
.icon-done {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 4.8 11.4l-1.4 1.4 6.2 6.2L21.2 7.4l-1.4-1.4z'/%3E%3C/svg%3E");
}
.challenge[data-running="true"] .icon-done {
  border-color: #9befcf66;
  color: var(--mint);
  background: #1b2a26;
}
.icon-btn:disabled { opacity: .72 }

/* ── Донаты списком ──────────────────────────────────────────────────────────

   Тайл «Эфир: События» показывает донаты со всех подключённых сервисов сразу —
   ровно то, ради чего он и нужен: одна лента вместо пяти вкладок. Имена
   сервисов не переводятся, это названия чужих продуктов.                    */

.donation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.tip {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 7px;
  background: #1d1628;
  border: 1px solid #32253f;
  font-size: 15px;
}
.tip-amount { flex: none; color: var(--mint); font: 600 16px/1 var(--font-sans) }
.tip-from { color: #9d8fac; font-size: 14px }
/* Новый донат приходит СВЕРХУ и мигает три секунды.

   Так делает настоящий тайл «Эфир: События»: вставляет строку перед первой, а
   лишние срезает с конца. Мигание у него тоже есть и тоже конечное — настройка
   flashSeconds; частота 1.1 с взята оттуда же. Вечное мигание в демонстрации
   читалось бы как поломка, а не как «вот оно, новое». */
.tip[data-fresh] {
  animation: tip-in .4s cubic-bezier(.22, 1, .36, 1),
             tip-flash 1.1s ease-in-out .4s infinite;
}
@keyframes tip-in {
  from { opacity: 0; transform: translateY(-12px) }
  to { opacity: 1; transform: none }
}
@keyframes tip-flash {
  0%, 100% { background: #1d1628; border-color: #32253f }
  50% { background: #2b2142; border-color: #9befcf44 }
}
.donation-list { overflow: hidden }

@media (prefers-reduced-motion: reduce) {
  .tip[data-fresh] { animation: none; background: #2a2140 }
  .spin-card { transition: none }
}

@media (max-width: 849px) {
  .icon-btn { width: 22px; height: 22px; border-radius: 5px }
  .icon-btn::before { width: 10px; height: 10px }
  .tip { font-size: 10px; padding: 6px 8px; gap: 7px }
  .tip-amount { font-size: 11px }
  .tip-from { font-size: 9px }
}

/* Страница чата: слева лента, справа донаты.

   Раньше чат занимал всю ширину, и глава про площадки показывала только
   сообщения. Донаты — вторая половина того же обещания: они тоже приходят с
   разных сервисов и тоже сводятся в одно окно. Тайл тот же, что на странице
   карусели, — «Эфир: События». */
.console[data-page=chat] .mod-chat { grid-column: auto }
.console[data-page=chat] .mod-donations { display: flex; flex-direction: column }

/* ── Единый вид перенесённых секций ──────────────────────────────────────────

   Три жалобы владельца, и все три об одном: блоки, перенесённые со старой
   страницы, живут по её правилам, а не по правилам новой.

   1. КАРТОЧКИ СИНЕЕ ВЕРХА. Их красит `.card` из общего `tokens.css`
      (`--card-bg: rgba(18,14,38,.55)` — синий по составу), а блоки прототипа
      берут свой фиолетовый градиент. Токен трогать нельзя: он на весь сайт,
      включая каталог, помощь и кабинет. Поэтому карточка перекрашивается в
      пределах этой страницы — тем же градиентом, что у плиток пульта.

   2. ЗАГОЛОВОК РАЗДЕЛА ГОЛОСА БЫЛ 17px. Это моя правка: убирая из общего
      селектора чужие части, я оставил `.voice-copy h2,` висеть, и он слился с
      правилом абзаца. Починено выше по файлу.

   3. РАЗНЫЕ ШКАЛЫ. У секций прототипа заголовок clamp(32…47) весом 550, у
      перенесённых — clamp(1.6rem…2.2rem) весом 700. Приводим к первой: она и
      есть шкала страницы.

   Внутрь пульта и внутрь карточек демонстраций правила не лезут — там свои
   размеры, и владелец просил их не трогать.                                  */

/* Шкала заголовков страницы. */
.section h2,
.section-head h2,
.pricing-heading h2 {
  font-size: clamp(32px, 3.5vw, 47px);
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: -.045em;
  margin: 8px 0 14px;
}
.section-head p,
.pricing-heading p,
#play > .container > p {
  font-size: 17px;
  line-height: 1.8;
  color: #aa9db8;
}

/* Заголовок карточки — ступенью ниже раздела, той же насыщенности. */
.bento .card h3 {
  font-size: 20px;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 6px 0 0;
  color: #ece2f6;
}
.bento .card p {
  font-size: 16px;
  line-height: 1.75;
  color: #a99ab7;
}

/* Карточка получает то же оформление, что панель раздела голоса: тёмная
   основа и мягкое свечение сверху. Раньше её красил общий .card из
   tokens.css — плоский синеватый фон, и рядом с панелью голоса это читалось
   как два разных блока с двух разных страниц. */
.card {
  background: radial-gradient(ellipse at 50% 0%, #76509922, transparent 68%), #130e1b;
  border-color: #3a294b;
  backdrop-filter: none;
}
.card:hover { border-color: #55406f }

/* Ярлык раздела — тем же шрифтом и трекингом, что надзаголовки страницы. */
.pill {
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c7b0e8;
  background: #2a1f3c;
  border: 1px solid #3d2d51;
}

/* ── Строка лота ─────────────────────────────────────────────────────────────

   Правила у неё не было вовсе, и весь текст слипался в кучу: «#1Хоррор без
   света11 724 ₽». Проверка «класс без единого правила» этого не видела —
   строку лота создаёт скрипт, а проверка смотрела только разметку.          */

.lot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .03);
  font-size: 15px;
}
.lot.is-lead {
  border-color: #9871bd66;
  background: linear-gradient(120deg, #251b36, #1b1528);
}

/* ── Надзаголовок разделов ───────────────────────────────────────────────────

   Их было два вида: моноширинный светло-серый у секций прототипа и обычный
   фиолетовый капсом у перенесённых. Владелец выбрал второй — он и остаётся
   один на всю страницу.

   Тег меняется не везде: «01 / ОСНОВА» у глав истории — это НЕ надзаголовок,
   а номер главы, и он моноширинный по замыслу: цифра в моноширинном шрифте
   не пляшет при смене главы. */
.eyeline {
  font: 700 12px/1.5 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9c74fb;
}
/* Точка «в эфире» рядом с надписью остаётся мятной: она про состояние, а не
   про заголовок. */
.eyeline .status-dot { background: var(--mint) }

/* ── Окно приложения на телефоне ─────────────────────────────────────────────

   Плитки стояли в две колонки и не помещались: сетка требовала 431 пиксель
   при панели в 408, окно распирало до 470 и уезжало за экран. Одна колонка,
   и min-width:0 — чтобы содержимое больше не могло растянуть окно шире
   отведённого.

   Пропорция на телефоне другая: в столбик те же плитки занимают больше
   высоты, и квадратное окно резало бы их. Постоянной она остаётся — прыжка
   между главами, из-за которого её и заводили, нет. */
@media (max-width: 849px) {
  .travelling-console .console { aspect-ratio: 408/700; min-width: 0 }
  .travelling-console .tile-grid { grid-template-columns: minmax(0, 1fr) }
  .travelling-console .console-content { min-width: 0 }
}

/* ── Телефон: на каждой главе только её плитки ───────────────────────────────

   В столбик четыре плитки требуют до 750 пикселей, а в окне их помещается
   около пятисот: расти дальше некуда, окно и так под семьсот при экране в
   девятьсот. Растить его выше телефона бессмысленно — читатель не увидит
   низа.

   Поэтому на узком экране остаются те плитки, ради которых глава написана.
   Так поступил бы и настоящий пульт: на телефоне он не показывает четыре
   тайла разом. Смысл главы при этом не теряется — теряется фон вокруг него.
*/
@media (max-width: 849px) {
  .console[data-page=stream] .mod-obs,
  .console[data-page=stream] .mod-play,
  .console[data-page=record] .mod-obs,
  .console[data-page=record] .mod-play,
  .console[data-page=auction] .mod-voice,
  .console[data-page=auction] .mod-obs,
  .console[data-page=carousel] .mod-donations,
  /* На аукционе плитка чата сжималась в двадцать пикселей: соседняя занимает
     втрое больше, и вдвоём они в столбик не помещаются. Глава про аукцион —
     значит на телефоне остаётся аукцион. */
  .console[data-page=auction] .mod-chat { display: none }
  /* Подпись режима рядом с кнопкой на телефоне не помещается, а смысл несёт
     сама кнопка. */
  .travelling-console .tile-note { display: none }
  .travelling-console .tile-actions { margin: 6px 0 2px }
  /* Лента прокрута держала 150 пикселей — на телефоне это восьмая часть окна. */
  .console[data-page=carousel] .mod-spin { min-height: 106px }
}

.challenge-list { overflow: hidden }

/* Выноски истории на узком экране без объёма.

   translateZ(70px) при перспективе в 1200 увеличивает элемент примерно на
   шесть процентов — и правая выноска вылезала за экран на те самые шесть
   пикселей. Дальше срабатывало домино: страница становилась шире окна, и всё,
   что тянется на 100%, включая шапку сайта, «выезжало» следом. По виду это
   выглядело поломкой шапки, хотя причина была в одной выноске. */
@media (max-width: 849px) {
  .depth-result { transform: rotate(4deg) }
  .depth-command { transform: none }
}