/* ── 3D-гид по интерфейсу (портирован из studio/lite2) ── */

/* кнопка запуска обучения — плавающая */
.guidebtn{position:fixed;right:16px;bottom:16px;z-index:905;cursor:pointer;
  background:var(--primary);color:#fff;border:none;border-radius:22px;
  padding:11px 18px;font:600 14px/1 'Fira Sans',system-ui,sans-serif;box-shadow:var(--shadow-lg)}
.guidebtn:hover{background:var(--primary-dark)}
.guidebtn.loading::after{content:"";display:inline-block;width:10px;height:10px;margin-left:8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-1px;animation:gspin .8s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}

/* канвас с 3D-маскотом поверх страницы */
.guide-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:900;pointer-events:none}

/* подсветка активного элемента */
.guide-hl{position:fixed;z-index:901;pointer-events:none;
  border:3px solid var(--accent);border-radius:12px;animation:ghl 1.4s ease-in-out infinite}
@keyframes ghl{50%{box-shadow:0 0 0 10px rgba(141,178,229,.28)}}

/* модалка-подсказка */
.guide-modal{position:fixed;z-index:902;pointer-events:auto;
  background:var(--card);color:var(--text);border:1px solid var(--grey-300);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:15px 15px 0;max-width:min(320px,calc(100vw - 30px));overflow:hidden}
.guide-modal .gm-h{display:flex;align-items:baseline;gap:10px}
.guide-modal .gm-n{font:600 12px/1 'Fira Sans',sans-serif;background:var(--primary-light);color:var(--accent);
  padding:5px 7px;border-radius:999px;white-space:nowrap}
.guide-modal b{font:600 17px/1.2 'Fira Sans',sans-serif}
.guide-modal p{font:400 14.5px/1.5 'Fira Sans',sans-serif;margin:10px 0 12px;color:var(--text)}
.guide-modal .gm-a{display:flex;flex-wrap:wrap;gap:10px}
.guide-modal .gm-a .btn{min-height:36px;padding:6px 14px;font-size:13px;width:auto;border-radius:10px}
.guide-modal .gm-bar{height:5px;margin:12px -15px 0;background:transparent}
.guide-modal .gm-bar i{display:block;height:100%;background:var(--accent);transform-origin:left}
@keyframes guide-read{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (pointer:coarse){ .guide-modal .gm-a .btn{min-height:44px} }