/* ─────────────────────────────────────────────────────────────
   Шрифты лежат у нас, а не забираются у Google.

   Нарезка по алфавитам и unicode-range взяты у Google как есть: браузер
   по ним качает только тот кусок, который реально нужен странице. Bebas
   Neue Cyrillic на Google нет, он нарезан из файла вручную.

   Bebas рисован в одном начертании. font-synthesis: style запрещает
   браузеру подделывать жирность и разрешает наклон: без этого заголовки
   с весом 600-900 расплывались бы.
   ───────────────────────────────────────────────────────────── */

@font-face{font-family:'Bebas Neue Cyrillic';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/BebasNeueCyrillic-400.woff2) format('woff2')}

@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/Montserrat-300-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/Montserrat-300-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/Montserrat-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/Montserrat-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/Montserrat-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/Montserrat-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/Montserrat-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/Montserrat-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/Montserrat-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/Montserrat-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/Montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/Montserrat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/Montserrat-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/Montserrat-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/Montserrat-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/Montserrat-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Jura';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/Jura-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Jura';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/Jura-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Jura';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/Jura-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Jura';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/Jura-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Jura';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/Jura-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Jura';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/Jura-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Jura';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/Jura-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'Jura';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/Jura-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-300-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-300-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family:'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/JetBrainsMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{font-synthesis:style}

:root{
  --bg:#141311; --bg2:#1C1A17;
  --ink:#EAE4D6; --dim:rgba(234,228,214,.5); --dim2:rgba(234,228,214,.72);
  --line:rgba(234,228,214,.12); --line2:rgba(234,228,214,.28);
  --accent:#F5A524;
  --disp:"Bebas Neue Cyrillic",system-ui,sans-serif;
  --latin:"Jura","Bebas Neue Cyrillic",system-ui,sans-serif;
  --ui:"Montserrat",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(18px,3vw,40px);
  /* градиента больше нет: один акцентный цвет, тёмный текст поверх него */
  --grad:#F5A524; --on-accent:#141311;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
::selection{background:#F5A524;color:#141311}
body{color:var(--ink);font-family:var(--ui);font-weight:300;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,video,canvas{display:block;max-width:100%}

.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* заголовок с градиентной заливкой букв */
.grad-text{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;
  color:var(--ink)}

/* ── кнопки-пилюли ── */
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 30px;transition:.3s;cursor:pointer;white-space:nowrap;border:0}
.pill.ghost{border:2px solid var(--ink);color:var(--ink);background:none}
.pill.ghost:hover{background:rgba(234,228,214,.1)}
.pill.grad{color:var(--on-accent);background:var(--accent);font-weight:500}
.pill.grad:hover{filter:brightness(1.1)}
.pill.big{padding:18px 44px;font-size:12px}
.pill.wide{width:100%}

#bgfx{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.55}
.page{position:relative;z-index:1;overflow-x:clip}


/* ══════════════ первый экран ══════════════ */
.hero{min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:clip;
  padding:0 var(--pad) calc(var(--pad) + 10px)}
.topnav{display:flex;justify-content:space-between;gap:20px;padding:26px 0 0}
.topnav a{font-family:var(--ui);font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(12px,1.4vw,22px);color:var(--ink);transition:opacity .2s}
.topnav a:hover{opacity:.7}
/* вход и кабинет: единственная кнопка в шапке, поэтому заметная */
.topnav .navbtn{padding:9px 22px;border-radius:999px;border:1.5px solid var(--line2);
  font-size:clamp(11px,1.15vw,15px);letter-spacing:.07em;white-space:nowrap;transition:.25s}
.topnav .navbtn:hover{opacity:1;background:rgba(234,228,214,.1)}
.topnav .navbtn.grad{background:var(--accent);border-color:transparent;color:var(--on-accent);
  box-shadow:0 4px 16px rgba(245,165,36,.32);outline:1.5px solid rgba(255,255,255,.9);outline-offset:-3px}
.topnav .navbtn.grad:hover{filter:brightness(1.12);background:var(--grad)}

.hero-mid{overflow:hidden;margin-top:auto}
.hero-mid h1{font-size:clamp(84px,17.5vw,300px);white-space:nowrap;width:100%;text-align:center;
  font-family:var(--latin);font-weight:900;line-height:.82;letter-spacing:-.04em}

.hero-visual{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(96px,14vh,180px);z-index:2;
  pointer-events:none}
.magnet{will-change:transform;transition:transform .6s ease-in-out}
.magnet.on{transition:transform .3s ease-out}

.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-top:auto;position:relative;z-index:3}
.hero-note{max-width:clamp(160px,22vw,300px);text-transform:uppercase;font-weight:300;letter-spacing:.03em;
  line-height:1.3;font-size:clamp(11px,1.3vw,17px);color:var(--ink)}
.hint{margin-top:12px;font-size:12px;color:var(--dim);position:relative;z-index:3}

.claim{display:flex;align-items:stretch;border:2px solid var(--line2);border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.04);max-width:440px;flex:1 1 320px;transition:.3s}
.claim:focus-within{border-color:#F5A524;box-shadow:0 0 40px -8px #F5A524}
.claim.free{border-color:#4dd08a}
.claim.taken{border-color:#e0555f}
.claim .pre{display:flex;align-items:center;padding:0 2px 0 20px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.claim input{flex:1;min-width:0;background:none;border:0;outline:none;padding:15px 6px;font-family:var(--mono);font-size:14px}
.claim input::placeholder{color:rgba(234,228,214,.35)}
.claim button{padding:0 26px;border:0;cursor:pointer;color:var(--on-accent);background:var(--accent);font-weight:500;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;will-change:transform}

/* ══════════════ о сервисе ══════════════ */
.about{min-height:100svh;display:grid;place-content:center;justify-items:center;text-align:center;gap:clamp(28px,5vw,54px);
  padding:clamp(60px,10vw,120px) var(--pad);position:relative}
.about h2{font-size:clamp(48px,12vw,160px)}
.reveal-text{max-width:600px;font-weight:500;line-height:1.55;font-size:clamp(16px,2vw,22px)}
/* переход здесь не нужен: прозрачность ведёт прокрутка, покадрово,
   и CSS-сглаживание только добавляло задержку */
.reveal-text span{opacity:.22}

/* угловые фигуры вместо чужих картинок: те же пятна света, но свои */
.deco{position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none;opacity:.5}
.d1{width:clamp(110px,16vw,210px);aspect-ratio:1;top:6%;left:3%;background:radial-gradient(circle at 35% 35%,#EAE4D6,#3a3733 60%,transparent 72%)}
.d2{width:clamp(90px,13vw,180px);aspect-ratio:1;bottom:10%;left:7%;background:radial-gradient(circle at 40% 40%,#F5A524,#3a2a10 60%,transparent 72%)}
.d3{width:clamp(110px,16vw,210px);aspect-ratio:1;top:6%;right:3%;background:radial-gradient(circle at 60% 40%,#8E877A,#2a2622 60%,transparent 72%)}
.d4{width:clamp(100px,15vw,200px);aspect-ratio:1;bottom:10%;right:7%;background:radial-gradient(circle at 50% 50%,#C7862A,#3a2a12 60%,transparent 72%)}

.counters{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,5vw,70px)}
.counters b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(24px,3.4vw,48px);
  line-height:1;letter-spacing:-.03em;margin-bottom:6px;font-variant-numeric:tabular-nums}

/* ══════════════ светлый блок ══════════════ */
.light{background:#EAE4D6;color:#141311;border-radius:clamp(40px,6vw,60px) clamp(40px,6vw,60px) 0 0;
  padding:clamp(60px,9vw,130px) var(--pad) clamp(80px,11vw,160px);position:relative;z-index:2}
.dark-head{font-family:var(--disp);font-weight:900;text-transform:uppercase;text-align:center;
  color:#141311;letter-spacing:-.03em;line-height:.9;font-size:clamp(48px,12vw,160px);
  margin-bottom:clamp(40px,7vw,110px)}
.ablist{max-width:1080px;margin:0 auto}
.ab{display:flex;align-items:flex-start;gap:clamp(16px,3vw,44px);padding:clamp(22px,3.5vw,48px) 0;
  border-top:1px solid rgba(20,19,17,.15)}
.ab:last-child{border-bottom:1px solid rgba(20,19,17,.15)}
.ab-n{font-family:var(--disp);font-weight:900;line-height:.8;color:#141311;
  font-size:clamp(38px,10vw,140px);letter-spacing:-.04em;flex:none}
.ab b{display:block;font-family:var(--ui);font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(16px,2.2vw,34px);margin-bottom:8px}
.ab p{font-weight:300;line-height:1.55;max-width:60ch;opacity:.6;font-size:clamp(13px,1.6vw,20px)}

/* ══════════════ примеры: стопка карточек ══════════════ */
.cases{background:var(--bg);border-radius:clamp(40px,6vw,60px) clamp(40px,6vw,60px) 0 0;
  margin-top:clamp(-56px,-6vw,-40px);position:relative;z-index:3;
  padding:clamp(60px,9vw,120px) var(--pad) clamp(40px,6vw,80px)}
.cases h2{font-size:clamp(48px,12vw,160px);text-align:center;margin-bottom:clamp(30px,5vw,70px)}
.stack-slot{height:86svh}
.scard{position:sticky;top:clamp(80px,12vh,130px);border:2px solid var(--ink);border-radius:clamp(30px,4vw,60px);
  background:var(--bg);padding:clamp(16px,2.4vw,34px);display:grid;gap:clamp(16px,2.5vw,30px);
  transform-origin:top center;will-change:transform}
.scard-top{display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap}
.scard-n{font-family:var(--disp);font-weight:900;line-height:.8;letter-spacing:-.04em;
  font-size:clamp(36px,7vw,100px);color:var(--ink);opacity:.9}
.scard-name{flex:1;min-width:180px}
.scard-name b{display:block;font-family:var(--disp);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(16px,2.2vw,30px);margin-top:6px;line-height:1.1}
.scard-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.5vw,30px);align-items:center}
.scard-body p{color:var(--dim2);font-size:clamp(13px,1.5vw,18px);line-height:1.55;max-width:44ch}
.scard-demo{display:grid;place-items:center}
.scard-demo .tile{width:min(100%,340px)}

/* ══════════════ цены и вопросы ══════════════ */
.price{padding:clamp(60px,9vw,130px) var(--pad) clamp(40px,6vw,80px)}
.price h2{font-size:clamp(48px,12vw,160px);text-align:center;margin-bottom:clamp(34px,6vw,80px)}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1000px;margin:0 auto}
.plan{border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3vw,38px);display:flex;flex-direction:column;gap:16px}
.plan.pro{border-color:rgba(245,165,36,.5);background:radial-gradient(120% 80% at 50% 0%,rgba(245,165,36,.10),transparent 60%)}
.pnum{font-family:var(--disp);font-weight:900;font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.04em}
.pnum small{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
/* Знак рубля ставим мельче цифры и чуть выше базовой линии: вровень он спорит
   с суммой за внимание, а сумма здесь главное. */
.pnum .cur{font-style:normal;font-size:.38em;font-weight:600;letter-spacing:0;color:var(--dim2);
  margin-left:.08em;vertical-align:.32em}
.plan .hint{margin-top:-4px}
.plan ul{list-style:none;display:grid;gap:10px;margin:2px 0 auto}
.plan li{font-size:14px;color:var(--dim2);padding-left:18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:1px;background:#F5A524}


footer:not(.foot){position:relative;z-index:3;border-top:1px solid var(--line);padding:26px var(--pad);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
footer a:hover{color:var(--ink)}

/* ══════════════ подвал ══════════════ */
.foot{position:relative;z-index:3;border-top:1px solid var(--line);padding:52px var(--pad) 28px;
  background:var(--bg);font-family:var(--ui);font-size:14px;color:var(--dim)}
.foot-top{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(0,3fr);gap:48px;max-width:1180px;margin:0 auto}
.foot-about p{margin:14px 0 20px;line-height:1.55;max-width:340px}
.foot .foot-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--latin);font-weight:800;font-size:20px;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.foot .foot-brand .mark{width:20px;height:20px;color:#F5A524}
.foot-lang{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);
  border-radius:11px;background:var(--bg2);color:var(--ink);transition:border-color .2s}
.foot-lang:hover{border-color:rgba(234,228,214,.3)}
.foot-lang svg{flex:none;color:var(--dim)}
.foot-lang select{appearance:none;-webkit-appearance:none;background:none;border:0;color:inherit;font:inherit;font-size:13.5px;
  padding:0 20px 0 0;cursor:pointer;outline:none}
.foot-lang select option{background:#1C1A17;color:#EAE4D6}
.foot-lang::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-5px;
  border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);pointer-events:none}
.foot-lang noscript button{margin-left:6px;font:inherit;background:none;border:1px solid var(--line);border-radius:7px;color:inherit;padding:2px 8px}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.foot-col{display:grid;gap:11px;align-content:start;min-width:0}
.foot-col b{font-weight:600;font-size:13px;color:var(--ink);margin-bottom:3px}
.foot-col a{color:var(--dim);text-decoration:none;font-size:14px;line-height:1.3;overflow-wrap:anywhere;transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{max-width:1180px;margin:40px auto 0;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px}
.foot-soc{display:flex;gap:8px}
.foot-soc a{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);color:var(--dim);transition:.2s}
.foot-soc a:hover{color:var(--ink);border-color:rgba(234,228,214,.3)}
@media(max-width:960px){.foot-top{grid-template-columns:1fr;gap:36px}.foot-cols{gap:24px}}
@media(max-width:560px){.foot{padding-top:40px}.foot-cols{grid-template-columns:1fr 1fr}}

/* ══════════════ условия и конфиденциальность ══════════════ */
.doc{max-width:760px}
.doc>.lead{margin:0 0 30px;font-size:17px;line-height:1.55}
.doc-part{margin:0 0 30px}
.doc-part h3{font-family:var(--ui);font-weight:600;font-size:17px;color:var(--ink);margin:0 0 10px}
.doc-part p,.doc-part li{font-size:15px;line-height:1.6;color:var(--dim2);margin:0 0 8px}
.doc-part ul{margin:0 0 8px;padding-left:20px}
.doc-part li{margin:0 0 4px}

/* ══════════════ страницы состояния ══════════════ */
.center{min-height:80svh;display:grid;place-items:center;padding:var(--pad);position:relative;z-index:1}
.note{max-width:540px;text-align:center;display:grid;gap:16px;justify-items:center}
.note h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(28px,5vw,54px);letter-spacing:-.02em}
.lead{font-size:16px;color:var(--dim2);max-width:52ch;line-height:1.55}
.hud{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:20px var(--pad)}
.hud .brand{font-family:var(--latin);font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:-.01em}
.hud nav{display:flex;gap:20px;margin-left:8px}
.hud nav a{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim2)}
.hud nav a:hover{color:var(--ink)}
.hud .btn,.hud .pill{margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:2px solid var(--line2);border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:.3s;cursor:pointer;background:none}
.btn:hover{background:rgba(234,228,214,.08)}
.btn.accent{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.btn.wide{width:100%;justify-content:center}
.wrap{padding:clamp(50px,8vw,110px) var(--pad);position:relative;z-index:1}
.top-line{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(16px,3vw,40px);
  border-top:1px solid var(--line);padding-top:16px;margin-bottom:clamp(26px,4vw,50px)}
.top-line h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
  line-height:.9;font-size:clamp(32px,6vw,88px)}
.top-line h2 i{font-style:normal;color:#F5A524}

/* ══════════════ рейтинг ══════════════ */
.tabs{display:flex;border-top:1px solid var(--line);margin-bottom:20px}
.tabs a{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:14px 24px;color:var(--dim);border-right:1px solid var(--line);border-bottom:1px solid transparent}
.tabs a.on{color:var(--ink);border-bottom-color:#F5A524}
.board{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.row{background:var(--bg);display:grid;grid-template-columns:38px 42px 1fr auto;gap:16px;align-items:center;
  padding:13px 18px;transition:background .3s,padding-left .3s}
.row:hover{background:var(--bg2);padding-left:26px}
.row img,.row .ava{width:42px;height:42px;border-radius:50%;object-fit:cover}
.row .who b{display:block;font-weight:500;font-size:15px}
.row .who i{font-style:normal;font-size:12px;color:var(--dim)}
.row .n{color:var(--dim)}
.row .v{color:#F5A524}
.ava.blank{display:grid;place-items:center;background:rgba(255,255,255,.07);
  font-family:var(--disp);font-weight:700;font-size:17px;color:var(--accent)}

/* ══════════════ страница профиля ══════════════ */
/* Высота по содержимому, а не ровно в экран: карточка на телефоне в один
   экран не влезает, и с запретом прокрутки её низ было нечем достать. */
.prof{background:var(--bg);font-family:var(--font,var(--ui));min-height:100svh;overflow-x:hidden}
/* С разделами страница становится длинной, и запрет прокрутки, поставленный
   ради вида «экран в экран», начинает мешать: листать нечем. Снимаем его
   только здесь — страницы без разделов ведут себя как прежде. */
.prof.long{overflow:visible;height:auto;min-height:100svh}
.enter{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(6,6,9,.92);
  backdrop-filter:blur(18px);cursor:pointer;transition:opacity .7s}
.enter div{text-align:center;display:grid;gap:10px}
.enter b{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:clamp(20px,3vw,34px)}
.enter.gone{opacity:0;pointer-events:none}
/* Экран растягивается вниз, если содержимое выше окна. Поля снизу — с
   запасом под нижнюю панель браузера и полоску дома на айфоне. */
.stage{position:relative;min-height:100svh;display:grid;place-items:center;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px))}
/* Фон, дымка и эффекты держатся за экран, а не за длину страницы: иначе
   при прокрутке они уезжали бы вместе с карточкой. */
.stage .bgm,.stage .veil,.stage #fx{position:fixed;inset:0}
.bgm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;
  filter:blur(var(--blur))}
/* Ролик с ютуба вместо картинки. Кадр у него всегда 16:9, а экран бывает
   любой, поэтому окно растягивается по большей стороне и обрезается по
   меньшей: так фон закрывает экран целиком, без чёрных полей по краям.
   Нажатия сквозь него не проходят - это фон, а не встроенный плеер. */
.ytbox{overflow:hidden}
.ytbg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;
  width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;pointer-events:none}
.veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent,rgba(0,0,0,var(--dim,.55)))}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.card{position:relative;z-index:2;width:min(440px,94vw);padding:clamp(22px,4vw,34px);text-align:center;
  border:1px solid rgba(255,255,255,.12);border-radius:22px;
  background:rgba(10,10,14,var(--card,.55));backdrop-filter:blur(16px);box-shadow:0 30px 90px rgba(0,0,0,.5)}
.card .ava{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto 14px;
  border:2px solid var(--accent);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 45%,transparent)}
.card .ava.blank{font-size:38px}
.card h1{font-size:clamp(22px,3vw,30px);font-weight:600;line-height:1.15}
.card .uid{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:2px}
/* Номер вместо адреса при наведении на имя. Обе надписи лежат в одной
   ячейке сетки и поворачиваются вокруг горизонтальной оси — строка при
   этом не прыгает, потому что высота её задаёт большая из двух.
   Наведение ловим и на имя, и на саму строку: целиться в мелкий шрифт
   ради этого никто не станет. */
.card .uid{display:inline-grid;justify-self:center;perspective:280px}
.card .uid > span{grid-area:1/1;backface-visibility:hidden;
  transition:transform .34s cubic-bezier(.2,.8,.3,1),opacity .22s ease}
.card .uid .u-id{transform:rotateX(-90deg);opacity:0;color:var(--accent)}
.card .nm:hover ~ .uid .u-at,.card .uid:hover .u-at{transform:rotateX(90deg);opacity:0}
.card .nm:hover ~ .uid .u-id,.card .uid:hover .u-id{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .card .uid > span{transition:opacity .2s ease}
  .card .uid .u-id{transform:none}
}
.typer{font-family:var(--mono);font-size:13px;color:var(--accent);min-height:20px;margin-top:10px}
.typer::after{content:"▌";opacity:.7;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.bio{margin-top:12px;font-size:14.5px;color:var(--dim2);line-height:1.5;white-space:pre-wrap}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.lnk{padding:9px 15px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  font-family:var(--mono);font-size:11px;transition:.28s;background:rgba(255,255,255,.04)}
.lnk:hover{background:var(--accent);border-color:var(--accent);color:#141311;transform:translateY(-2px)}
/* Своя картинка вместо нашего значка: место под неё то же самое, поэтому
   ряд ссылок не разъезжается, чем бы её ни заполнили. */
.lnk .li-own{width:20px;height:20px;flex:none;object-fit:contain;border-radius:4px}
/* Тег сервера Discord — рядом с ником в карточке Discord, как показывает
   его сам Discord. Ник ужимается многоточием, плашка не ужимается: она и
   так короткая, и обрезать её бессмысленно. */
.dcard .dname{display:flex;align-items:center;gap:6px;min-width:0}
.dcard .dname b{min-width:0}
.dcard .dctag{display:inline-flex;align-items:center;gap:4px;flex:none;
  padding:1px 6px 1px 4px;border-radius:6px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  font-family:var(--ui);font-size:11px;font-weight:600;line-height:1.6;
  letter-spacing:0;text-transform:none;white-space:nowrap}
.dcard .dctag img{width:14px;height:14px;display:block;flex:none}
.dcard .dctag i{font-style:normal}
/* «Только иконки»: подписи убраны, кнопка становится круглой. Подпись
   остаётся в title и aria-label — и наведение, и озвучка их видят. */
.card.lnk-bare .lnk{padding:11px;border-radius:50%}
.card.lnk-bare .lnk > span:not(.fct){display:none}
/* FACEIT внутри кнопки ссылки: иконка уровня (svg с cdn FACEIT), ELO моно-шрифтом, место в топе акцентом */
.lnk .fct{display:inline-flex;align-items:center;gap:6px;margin-left:2px;line-height:1}
.lnk .fct:empty{display:none}
.lnk .fct img{width:18px;height:18px;flex:none;border-radius:50%;display:block}
.lnk .fct b{font-family:var(--mono);font-weight:500;font-size:11px;color:inherit;opacity:.85;white-space:nowrap}
.lnk .fct s{display:block;width:1px;height:12px;background:currentColor;opacity:.25;text-decoration:none}
.lnk .fct em{font-family:var(--mono);font-style:normal;font-weight:600;font-size:11px;color:var(--accent);white-space:nowrap}
.lnk:hover .fct em{color:inherit}
.player{display:flex;align-items:center;gap:12px;margin-top:18px;padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);text-align:left}
.player .pp{width:34px;height:34px;flex:none;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent,#141311);
  cursor:pointer;font-size:12px;display:grid;place-items:center}
/* В кнопке лежат оба значка, виден один: так смена состояния не
   перестраивает разметку, а значок не мигает при каждом нажатии. */
.player .pp .pi{width:18px;height:18px;display:block}
.player .pp .pi-pause,.player.on .pp .pi-play{display:none}
.player.on .pp .pi-pause{display:block}
.player .track{flex:1;min-width:0}
.player .tline{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.player .tname{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Полоса стала выше: в три пикселя попасть пальцем нельзя, а тащить её
   тем более. Сама дорожка узкая, но область нажатия вокруг — нет. */
.player .bar{position:relative;height:4px;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.14);padding:0;touch-action:none}
.player .bar::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px}
.player .bar i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px}
/* Подгруженная часть: видно, что дальше перемотка будет мгновенной. */
.player .bar .buf{background:rgba(255,255,255,.16)}
.player .bar #barfill{background:var(--accent)}
.player .bar .knob{position:absolute;top:50%;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%) scale(0);transition:transform .15s;pointer-events:none}
.player .bar:hover .knob,.player .bar.drag .knob{transform:translate(-50%,-50%) scale(1)}

/* Кнопки соседних дорожек появляются только когда дорожек больше одной:
   стрелки в никуда честнее не показывать вовсе. */
.player .nav{width:22px;height:26px;flex:none;border:0;background:none;cursor:pointer;
  color:inherit;opacity:.55;font-size:19px;line-height:1;transition:opacity .2s;
  display:grid;place-items:center;padding:0}
.player .nav .pi{width:14px;height:14px;display:block}
.player .nav:hover{opacity:1}

/* Эквалайзер. Не показывает звук по-настоящему — для этого пришлось бы
   разбирать поток, — но честно отвечает на вопрос «играет ли сейчас»:
   на паузе он замирает, а не продолжает изображать движение. */
.player .eq{display:none;gap:2px;align-items:flex-end;height:11px;flex:none}
.player.on .eq{display:flex}
.player .eq i{width:2px;height:100%;border-radius:1px;background:var(--accent);
  transform-origin:bottom;animation:eqBar .9s ease-in-out infinite}
.player .eq i:nth-child(2){animation-delay:-.3s}
.player .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eqBar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.player .eq i{animation:none;transform:scaleY(.6)}}
.player .time{color:var(--dim);flex:none}
.card .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.1);color:var(--dim)}
.card .foot a:hover{color:var(--accent)}

.card{animation:cardIn .9s cubic-bezier(.16,1,.3,1) both}
.card .ava{animation:avaIn 1s cubic-bezier(.16,1,.3,1) .1s both}
.card h1,.card .uid,.card .bio,.card .links,.card .player,.card .foot{animation:upIn .8s cubic-bezier(.16,1,.3,1) both}
.card h1{animation-delay:.18s}.card .uid{animation-delay:.24s}
.card .typer{animation:upIn .8s cubic-bezier(.16,1,.3,1) .3s both}
.card .bio{animation-delay:.34s}.card .links{animation-delay:.42s}
.card .player{animation-delay:.5s}.card .foot{animation-delay:.58s}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes avaIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes upIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ══════════════ настройка ══════════════ */
.edit-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:1px;background:var(--line);
  border-top:1px solid var(--line);min-height:calc(100svh - 62px)}
.pane{background:var(--bg);padding:clamp(18px,2.4vw,32px);display:grid;gap:20px;align-content:start}
.pane.preview{position:sticky;top:62px;height:calc(100svh - 62px);align-content:start}
.frame{border:1px solid var(--line);border-radius:20px;aspect-ratio:9/16;max-height:64svh;overflow:hidden;background:#000}
.frame iframe{width:100%;height:100%;border:0}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.stat-row>div{background:var(--bg);padding:15px 17px}
.stat-row b{display:block;font-family:var(--disp);font-weight:700;font-size:21px;line-height:1;margin-bottom:5px}
.box{border:1px solid var(--line);border-radius:18px;padding:clamp(15px,2vw,24px);display:grid;gap:14px}
.lbl.head{color:#F5A524;border-bottom:1px solid var(--line);padding-bottom:10px}
.field{display:grid;gap:7px}
.field input,.field textarea,.field select{background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;outline:none;font-size:14px;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#F5A524}
.field textarea{resize:vertical;font-family:var(--ui)}
.field input[type=color]{height:42px;padding:3px;cursor:pointer}
.field input[type=range]{accent-color:var(--accent);padding:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.up{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.up button{padding:9px 16px;border:1px solid var(--line2);border-radius:999px;background:none;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.up button:hover{background:rgba(255,255,255,.06)}
.up .mono{color:var(--dim)}
.del{width:28px;height:28px;flex:none;border:1px solid var(--line2);border-radius:50%;background:none;cursor:pointer;color:var(--dim)}
.del:hover{border-color:#e0555f;color:#e0555f}
.lrow{display:grid;grid-template-columns:1fr 150px 28px;gap:8px;align-items:center}
.lrow input{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;outline:none;font-size:13.5px;width:100%}
.lrow input:focus{border-color:#F5A524}
.add{padding:11px 18px;border:1px dashed var(--line2);border-radius:999px;background:none;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}
.add:hover{border-color:#F5A524;color:var(--ink)}
.save-row{display:flex;align-items:center;gap:14px;position:sticky;bottom:0;background:var(--bg);padding:14px 0;border-top:1px solid var(--line)}
.save-row .btn{max-width:260px}
#msg.ok{color:#4dd08a}
#msg.err{color:#e0555f}

/* ══════════════ узкие экраны ══════════════ */
@media(max-width:1000px){
  .plans{grid-template-columns:1fr}
  .scard-body{grid-template-columns:1fr}
  .edit-wrap{grid-template-columns:1fr}
  .pane.preview{position:static;height:auto}
  .top-line{grid-template-columns:1fr}
}
@media(max-width:700px){
  /* на телефоне в строке помещаются три ссылки и кнопка входа;
     «О сервисе» и «Примеры» убираем — до них дойдут прокруткой */
  .topnav{gap:8px;align-items:center}
  .topnav a{font-size:11px;letter-spacing:.02em}
  .topnav .skinny{display:none}
  .topnav .navbtn{padding:8px 15px;font-size:11px}
  .hero-visual{bottom:auto;top:44%;transform:translate(-50%,-50%)}
  .hero-mid h1{font-size:clamp(64px,22vw,140px)}
  .hero-bottom{flex-direction:column;align-items:stretch;gap:14px}
  .hero-note{max-width:100%}
  .claim{max-width:100%}
  .ab{flex-direction:column;gap:6px}
  .ab-n{font-size:44px}
  .stack-slot{height:auto;margin-bottom:16px}
  .scard{position:static}
  .row{grid-template-columns:28px 36px 1fr auto;gap:10px}
  .lrow{grid-template-columns:1fr 28px}
  .hud nav{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal-text span{opacity:1!important}
}

/* ══════════════ фоновые элементы первого экрана ══════════════ */
/* кольца вокруг карточки: тонкие эллипсы с призматической обводкой */
.orbits{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(420px,58vw,760px);aspect-ratio:1;pointer-events:none;overflow:visible;opacity:.85}
.orbits ellipse{fill:none;stroke-width:1.2;transform-origin:350px 350px}
.orbits .o1{animation:spin 28s linear infinite}
.orbits .o2{animation:spin 46s linear infinite reverse;stroke-dasharray:3 9}
.orbits .o3{animation:spin 36s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* призрак названия за содержимым */
.ghost-word{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:0;pointer-events:none;
  font-family:var(--latin);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;
  font-size:clamp(140px,26vw,420px);line-height:.8;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(234,228,214,.07);opacity:.9}

/* дымка у нижней кромки, как свет из-за горизонта */
.fog{position:absolute;left:50%;bottom:-14%;transform:translateX(-50%);z-index:0;pointer-events:none;
  width:150%;height:46%;filter:blur(60px);
  background:radial-gradient(60% 100% at 50% 100%,rgba(245,165,36,.14),rgba(245,165,36,.05) 45%,transparent 72%)}

.hero-visual{z-index:2}
.hero-visual .magnet{position:relative;z-index:2}

@media(max-width:700px){
  .orbits{width:130vw}
  .ghost-word{font-size:34vw;bottom:16%}
  .fog{height:38%}
}
@media(prefers-reduced-motion:reduce){.orbits ellipse{animation:none}}



/* ══════════════ трёхмерный объект на фоне ══════════════ */
/* Слой лежит под содержимым и занимает весь первый экран: объект больше
   не карточка по центру, а фон, поверх которого читается название. */
.hero-visual{position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  pointer-events:none;bottom:auto;transform:none;left:0;width:100%;height:100%}
#orb{position:relative;width:min(1180px,94vw);height:min(78svh,860px)}

/* Свечение отдельным пятном, а не тенью объекта: ролик прямоугольный и
   непрозрачный, тень от него легла бы прямоугольником. */
#orb::before{content:"";position:absolute;left:50%;top:50%;pointer-events:none;
  width:min(62vh,580px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(245,165,36,.16),transparent 72%);
  filter:blur(24px)}

/* У ролика собственный альфа-канал: чёрный фон вырезан в самом файле.

   Сначала здесь стояло mix-blend-mode: screen — вычитать чёрное наложением.
   Не сработало, и причина была выше по дереву: у родителя .hero-visual стоит
   transform (его ставит GSAP для параллакса), а transform делает элемент
   корнем наложения. Ролик смешивался не со страницей, а с этим прозрачным
   родителем — вычитать оказалось не из чего, и чёрный прямоугольник
   оставался на месте.

   С настоящей прозрачностью вопрос снят целиком: никаких наложений, и
   неважно, кто и где создаёт корень. */
#orb video{position:relative;width:100%;height:100%;display:block;
  object-fit:contain;opacity:0;transition:opacity 1s ease}
#orb.ready video{opacity:1}

/* Неподвижный кадр там, где ролик не нужен или машина его не потянет.
   Он тоже с прозрачностью — иначе на его месте был бы чёрный прямоугольник
   ровно по той же причине. */
#orb.still::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(/static/orb-poster-a.webp) center/contain no-repeat}

/* запасной вид, если сцена не собралась или машина слабая */
#orb.flat::before{content:"";position:absolute;left:50%;top:50%;
  width:min(46vh,420px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:
    radial-gradient(38% 34% at 34% 28%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(90% 90% at 60% 65%,#F5A524,#8a5a14 45%,#1C1A17 78%);
  box-shadow:inset -18px -22px 60px rgba(0,0,0,.6), 0 0 80px rgba(245,165,36,.22)}

/* название и содержимое поверх объекта */
.hero-mid,.hero-bottom,.topnav,.hero .hint{position:relative;z-index:2}
.hero-mid h1{mix-blend-mode:screen}
.orbits{z-index:1}

/* ══════════════ переход к следующему блоку ══════════════ */
/* Внизу первого экрана цвет обрывался ступенькой. Растушёвываем: свечение
   гаснет плавно, а сам экран сводится к цвету фона. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34vh;z-index:1;
  pointer-events:none;background:linear-gradient(to bottom,rgba(20,19,17,0) 0%,
    rgba(20,19,17,.55) 46%,var(--bg) 100%)}
.fog{bottom:-4%;height:52%;opacity:.85}
.about{position:relative}
/* растяжка сверху убрана: блок сам прозрачный, и тёмная полоса перед ним
   читалась как шов «тёмное, потом светлое» */
.about::before{content:none}

@media(max-width:700px){
  #orb{width:96vw;height:52svh}
  .hero::after{height:26vh}
  /* Два лишних слоя для телефона: наложение имени поверх ролика и размытие
     пятна заставляют композитор пересобирать кадр целиком. Пятно рисуем
     градиентом пошире — выглядит так же, стоит ничего. */
  .hero-mid h1{mix-blend-mode:normal}
  #orb::before{filter:none;width:min(78vw,520px);
    background:radial-gradient(closest-side,rgba(245,165,36,.17),rgba(245,165,36,.07) 55%,transparent 78%)}
}

/* ══════════════ лента примеров ══════════════ */
/* Раньше строки резались по краям экрана и обрывались сверху и снизу.
   Маска гасит все четыре кромки, поэтому лента растворяется в фоне,
   а не упирается в него ступенькой. */
.marquee{position:relative;z-index:2;padding:clamp(30px,6vw,80px) 0;
  display:grid;gap:14px;overflow:clip;margin-top:-8vh;
  transform:rotate(-1.2deg);transform-origin:center;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 20%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.mrow{display:flex;gap:14px;width:max-content;will-change:transform}
.mrow:nth-child(2){opacity:.72;transform-origin:left center}

/* плитка читается как настоящая страница: полоса с акцентом,
   аватар внахлёст на ней, ниже имя, адрес и ссылки */
.tile{width:clamp(250px,27vw,340px);flex:none;border-radius:22px;padding:0 18px 18px;
  background:#1C1A17;border:1px solid rgba(255,255,255,.09);position:relative;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 20px 50px -24px rgba(0,0,0,.9)}
.tile-top{display:block;height:74px;margin:0 -18px 0;position:relative;
  background:
    radial-gradient(120% 140% at 22% 0%,color-mix(in srgb,var(--a,#F5A524) 75%,transparent),transparent 70%),
    linear-gradient(120deg,color-mix(in srgb,var(--a,#F5A524) 45%,#1C1A17),#1C1A17 85%)}
.tile-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(to bottom,transparent,#1C1A17)}
.tile-ava{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  margin:-26px 0 10px;position:relative;z-index:1;border:3px solid #1C1A17;
  background:var(--a,#F5A524);color:#141311;font-family:var(--disp);font-weight:800;font-size:18px}
.tile b{font-family:var(--disp);font-weight:600;font-size:clamp(15px,1.6vw,20px);letter-spacing:-.01em;line-height:1.1}
.tile i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:3px}
.tile-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tile-links span{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);color:var(--dim2);background:rgba(255,255,255,.03)}

@media(max-width:700px){
  .marquee{transform:none;margin-top:-4vh;gap:10px}
  .tile{width:74vw;border-radius:18px}
  .mrow:nth-child(2){opacity:.85}
}

/* ══════════════ правки под телефон ══════════════ */
@media(max-width:700px){
  /* В колонке flex-basis задаёт высоту, а не ширину: поле вытягивалось
     на треть экрана. Ширину здесь и так даёт растяжка контейнера. */
  .claim{flex:none;width:100%}
  .claim input{padding:14px 6px;font-size:16px}   /* 16px, иначе iOS зумит форму */
  .claim button{padding:0 20px}
  .hero-bottom{gap:12px}
  .hero-note{order:-1}
  .authbox{width:100%;padding:22px 18px}
  .field input{font-size:16px}
  .tile{width:78vw}
}

/* ══════════════ вопросы ══════════════ */
/* Раньше это была стопка тёмных коробок с волосяными швами и пустотой
   справа. Теперь та же плотная сетка, что у списка возможностей: номер,
   вопрос слева, ответ справа, ширина используется целиком. */
.faq{max-width:1080px;margin:clamp(50px,8vw,110px) auto 0}
.qa{display:grid;grid-template-columns:52px minmax(0,4fr) minmax(0,6fr);
  gap:clamp(12px,2.4vw,36px);align-items:baseline;
  padding:clamp(18px,2.6vw,30px) 0;border-top:1px solid var(--line);position:relative}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:#F5A524;
  transition:width .6s cubic-bezier(.2,.8,.2,1)}
.qa:hover::before{width:100%}
.qn{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--dim);
  font-variant-numeric:tabular-nums}
/* Вопрос задумывался обычным предложением: text-transform тут нет.
   Дисплейный шрифт рисован капителью и превращал его в крик, а плотный
   межбуквенный был подобран под узкое начертание. */
.qa b{font-family:var(--ui);font-weight:600;letter-spacing:-.005em;line-height:1.28;
  font-size:clamp(15px,1.9vw,26px);transition:color .3s}
.qa:hover b{color:#F7EBD2}
.qa p{color:var(--dim2);font-size:clamp(13.5px,1.4vw,16.5px);line-height:1.55;max-width:62ch}

@media(max-width:1000px){
  .qa{grid-template-columns:38px minmax(0,1fr);gap:8px 14px}
  .qa p{grid-column:2/3}
}

/* ══════════════ вход и регистрация ══════════════ */
.auth .page{min-height:100svh;display:grid;place-items:center;padding:calc(var(--pad) + 10px) var(--pad)}
.authbox{width:min(430px,94vw);display:grid;gap:14px;padding:clamp(24px,4vw,34px);
  border:1px solid var(--line);border-radius:26px;background:rgba(18,18,22,.78);backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}

/* плитка знака с тёмным фоном и свечением - файл владельца */
.authmark{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;overflow:hidden;
  background:#141311 url(/static/mark-tile.png) center/cover no-repeat;border:1px solid var(--line)}
.authmark .mark{display:none}

.authbox h1{font-family:var(--disp);font-weight:700;font-size:clamp(21px,2.6vw,28px);
  letter-spacing:-.02em;line-height:1.15;margin-top:4px}
.asub{color:var(--dim2);font-size:14px;line-height:1.5;margin-top:-6px}
.aback{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);
  justify-self:start;padding:4px 0;transition:color .25s}
.aback:hover{color:var(--ink)}

/* обе формы входа: без этого правила у новой не было ни сетки, ни отступов,
   и подписи слипались с полями */
#af,#nf{display:grid;gap:15px}

/* занятое имя показывается плашкой, а не полем: менять его нужно осознанно */
.namebox{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.03)}
.namebox b{display:block;font-family:var(--mono);font-size:14px;margin-top:4px;word-break:break-all}
.namebox .edit{border:0;background:none;cursor:pointer;color:var(--dim2);flex:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;transition:color .25s}
.namebox .edit:hover{color:#F7EBD2}
.hide{display:none!important}

.field .opt{font-style:normal;color:rgba(234,228,214,.32);text-transform:none;letter-spacing:0}
.withicon{position:relative;display:block}
.withicon svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.withicon input{padding-left:38px!important}

.only-reg{display:none}
body.reg .only-reg{display:grid}
body.reg .only-log{display:none}
.swap .only-reg,.swap .only-log{display:inline}
body.reg .swap .only-log{display:none}
body:not(.reg) .swap .only-reg{display:none}
.swap{text-align:center;font-size:13px;color:var(--dim2)}
.swap a{color:#c9a6ff;border-bottom:1px solid rgba(201,166,255,.35)}
.swap a:hover{color:#fff}

.msg{min-height:16px;color:var(--dim2);font-size:11.5px;line-height:1.5}
.msg.err{color:#e0555f}

.orline{display:flex;align-items:center;gap:12px;color:var(--dim);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)}
.pill.oauth{gap:10px;text-transform:none;letter-spacing:.02em;font-family:var(--ui);font-size:14px;font-weight:500}

.fineprint{font-size:11px;color:rgba(234,228,214,.38);line-height:1.5;text-align:center}

@media(max-width:700px){
  .authbox{width:100%;padding:22px 18px;border-radius:22px}
  .field input{font-size:16px}
}

/* ══════════════ сборщик ══════════════ */
.builder{padding:clamp(60px,9vw,120px) var(--pad);position:relative;z-index:2}
.try-head{max-width:640px;margin:0 auto clamp(30px,5vw,60px);text-align:center;display:grid;gap:14px;justify-items:center}
.try-head h2{font-size:clamp(38px,8vw,110px)}
.try-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(20px,4vw,60px);
  max-width:1080px;margin:0 auto;align-items:center}
.try-ctl{display:grid;gap:clamp(16px,2.4vw,26px)}
.try-row{display:grid;gap:9px}
.try-name{display:flex;align-items:center;border:2px solid var(--line2);border-radius:999px;
  background:rgba(255,255,255,.04);overflow:hidden;transition:.3s}
.try-name:focus-within{border-color:#F5A524;box-shadow:0 0 40px -10px #F5A524}
.try-name .pre{padding:0 2px 0 20px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.try-name input{flex:1;min-width:0;background:none;border:0;outline:none;padding:14px 18px 14px 6px;
  font-family:var(--mono);font-size:15px}

.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatches button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  background:var(--s);transition:.25s}
.swatches button:hover{transform:scale(1.08)}
.swatches button.on{border-color:var(--ink);box-shadow:0 0 24px -4px var(--s)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--dim2);transition:.25s}
.chips button:hover{border-color:var(--line2);color:var(--ink)}
.chips button.on{border-color:transparent;color:#141311;font-weight:500}

/* телефон с живой карточкой */
.try-view{display:grid;place-items:center}
.phone{position:relative;width:min(360px,86vw);aspect-ratio:9/16;border-radius:34px;overflow:hidden;
  border:1px solid var(--line2);background:radial-gradient(120% 90% at 50% 0%,#24201a,#141311 70%);
  display:grid;place-items:center;padding:22px;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
#b-fxcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.card.demo{width:100%;position:relative;z-index:1;text-align:center;padding:22px 18px;
  border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(10,10,14,.55);
  backdrop-filter:blur(14px);animation:none}
.card.demo .ava{width:64px;height:64px;font-size:24px;margin:0 auto 12px;animation:none;
  border:2px solid var(--bcol,#F5A524);
  box-shadow:0 0 26px color-mix(in srgb,var(--bcol,#F5A524) 50%,transparent);
  background:rgba(255,255,255,.07);color:var(--bcol,#F5A524)}
.card.demo h1{font-size:20px;animation:none}
.card.demo .uid,.card.demo .bio,.card.demo .links,.card.demo .foot{animation:none}
.card.demo .bio{font-size:13px;margin-top:8px}
.card.demo .links{margin-top:14px}
.card.demo .lnk{padding:7px 12px;font-size:10px;animation:none}
.card.demo .lnk:hover{background:var(--bcol,#F5A524);border-color:var(--bcol,#F5A524);color:#141311}
.card.demo .foot{margin-top:14px;padding-top:11px;font-size:10px}

@media(max-width:1000px){
  .try-grid{grid-template-columns:1fr}
  .try-view{order:-1}
}

/* ══════════════ страница профиля: значки, эффекты, громкость ══════════════ */
/* Цвет текста и цвет иконок задаются владельцем, поэтому всё, что было жёстко
   белым, теперь берёт --ink2 и --icon. Значения приходят в head страницы. */
.prof .card{color:var(--ink2,#fff)}
.prof .card h1{color:var(--ink2,#fff)}
.card .loc{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:12px;opacity:.6}
.bdgs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:8px}
.bdg{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 32%,transparent)}
.card.glow-b .bdg{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 32%,transparent),
  0 0 14px color-mix(in srgb,var(--c) 45%,transparent)}

.card .lnk{display:inline-flex;align-items:center;gap:7px;color:var(--ink2,#fff)}
.card .lnk svg{flex:none}
.card.mono-i .lnk svg{color:var(--icon)}
.card.glow-l .lnk{box-shadow:0 0 16px color-mix(in srgb,var(--accent) 40%,transparent)}
.card.glow-l .lnk:hover{box-shadow:0 0 26px color-mix(in srgb,var(--accent) 65%,transparent)}

/* эффекты ника */
.nm.glow{text-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent),
  0 0 42px color-mix(in srgb,var(--accent) 40%,transparent)}
.nm.fx-rainbow{background:linear-gradient(90deg,#ff5f6d,#ffc371,#47e0a0,#3fa9f5,#FFB84D,#ff5f6d);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rainbow 6s linear infinite}
@keyframes rainbow{to{background-position:300% 0}}
.nm.fx-wave span{display:inline-block;animation:wave 2.2s ease-in-out infinite}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.nm.fx-glitch{position:relative}
.nm.fx-glitch::before,.nm.fx-glitch::after{content:attr(data-t);position:absolute;inset:0;
  clip-path:inset(0 0 55% 0);opacity:.75}
.nm.fx-glitch::before{color:#ff3b6b;animation:gl1 2.6s steps(2) infinite}
.nm.fx-glitch::after{color:#3ff0ff;clip-path:inset(52% 0 0 0);animation:gl2 3.1s steps(2) infinite}
@keyframes gl1{0%,92%,100%{transform:none}94%{transform:translateX(-2px)}97%{transform:translateX(2px)}}
@keyframes gl2{0%,90%,100%{transform:none}93%{transform:translateX(2px)}96%{transform:translateX(-2px)}}

.player .vol{width:58px;flex:none;accent-color:var(--accent);cursor:pointer}
/* На телефоне ползунка нет намеренно: громкость там меняют кнопками самого
   телефона, а на iPhone программно она и не меняется вовсе. Класс no-vol
   ставит скрипт там, где браузер громкость не отдаёт (iPad, например). */
@media(max-width:520px){.player .vol{display:none}}
.player.no-vol .vol{display:none}

/* ══════════════ кнопки на акценте ══════════════ */
/* Раньше здесь ехала полоса градиента с бликом. Один цвет, при наведении чуть светлее. */
.pill.grad,.topnav .navbtn.grad,.claim button,.btn.accent{background:var(--accent);color:var(--on-accent);box-shadow:none;outline:0}
.pill.grad:hover,.topnav .navbtn.grad:hover,.claim button:hover,.btn.accent:hover{background:#FFB84D;filter:none}

/* ══════════════ выбор адреса страницы ══════════════ */
/* Поле с приклеенным слева доменом: человек должен видеть, что вводит только
   хвост ссылки, а не весь адрес целиком. */
.namefield{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.04);padding:0 13px;transition:.25s}
.namefield:focus-within{border-color:#F5A524;box-shadow:0 0 30px -12px #F5A524}
.namefield .pre{font-family:var(--mono);font-size:12px;color:var(--dim);font-style:normal;flex:none}
.namefield input{flex:1;min-width:0;background:none;border:0;outline:none;padding:13px 2px;
  font-family:var(--mono);font-size:14px}
.msg.ok{color:#4dd08a}
.ideas{display:grid;gap:9px;margin-top:2px}
.ideas-row{display:flex;flex-wrap:wrap;gap:7px}
.idea{padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);
  cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--dim2);transition:.2s}
.idea:hover{border-color:#F5A524;color:var(--ink);background:rgba(245,165,36,.12)}

/* ══════════════ выделенное слово в заголовке ══════════════ */
/* У заголовочного шрифта нет кириллического курсива, и браузер подделывал его
   наклоном — на крупном кегле это бросалось в глаза. Выделяем слово заливкой. */
h1 i,h2 i{font-style:normal}
.grad-text i{color:var(--accent)}

.namefield+.msg,#nmsg{margin-top:-4px}
.authbox .fineprint{margin-top:2px}

/* ══════════════ карточка Discord на странице ══════════════ */
.dcard{display:flex;align-items:center;gap:10px;margin-top:16px;padding:9px 11px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);text-align:left}
.dcard .dava{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:rgba(255,255,255,.08)}
.dcard .dwho{flex:1;min-width:0;display:grid}
.dcard b{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcard .dact{font-style:normal;font-size:11px;color:rgba(255,255,255,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* точка состояния: цвета те же, что в самом Discord, чтобы не переучивать */
.dcard .ddot{width:9px;height:9px;border-radius:50%;flex:none;background:#747f8d}
.dcard .ddot[data-status=online]{background:#3ba55d;box-shadow:0 0 10px rgba(59,165,93,.7)}
.dcard .ddot[data-status=idle]{background:#faa81a;box-shadow:0 0 10px rgba(250,168,26,.6)}
.dcard .ddot[data-status=dnd]{background:#ed4245;box-shadow:0 0 10px rgba(237,66,69,.6)}

/* ══════════════ новые эффекты ника ══════════════ */
/* Все на CSS: они идут поверх текста, который уже нарисован, поэтому даже
   если что-то не поддержано браузером, имя остаётся читаемым. */
.nm.fx-shine{background:linear-gradient(100deg,var(--ink2,#fff) 30%,#fff 45%,var(--accent) 55%,var(--ink2,#fff) 70%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:nmShine 3.5s linear infinite}
@keyframes nmShine{to{background-position:250% 0}}
.nm.fx-pulse{animation:nmPulse 2.2s ease-in-out infinite}
@keyframes nmPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.045);opacity:.86}}
.nm.fx-neon{color:#fff;text-shadow:0 0 4px #fff,0 0 11px var(--accent),0 0 22px var(--accent),0 0 42px var(--accent);
  animation:nmFlicker 4s steps(1) infinite}
@keyframes nmFlicker{0%,92%,96%,100%{opacity:1}94%{opacity:.72}98%{opacity:.85}}
.nm.fx-shake{animation:nmShake 3s ease-in-out infinite}
@keyframes nmShake{0%,88%,100%{transform:translate(0,0) rotate(0)}
  90%{transform:translate(-1.5px,1px) rotate(-.5deg)}92%{transform:translate(2px,-1px) rotate(.5deg)}
  94%{transform:translate(-1px,-1.5px) rotate(-.3deg)}96%{transform:translate(1px,1px) rotate(.3deg)}}
.nm.fx-chrome{background:linear-gradient(180deg,#fff 0%,#b9c6d2 38%,#5f6b78 52%,#e8f0f6 68%,#8e9aa6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.nm.fx-shadow{text-shadow:1px 1px 0 color-mix(in srgb,var(--accent) 70%,#000),
  2px 2px 0 color-mix(in srgb,var(--accent) 55%,#000),3px 3px 0 color-mix(in srgb,var(--accent) 40%,#000),
  4px 4px 0 color-mix(in srgb,var(--accent) 25%,#000),5px 5px 12px rgba(0,0,0,.5)}
.nm.fx-fade{animation:nmFade 3.4s ease-in-out infinite}
@keyframes nmFade{0%,100%{opacity:1}50%{opacity:.42}}

/* ══════════════ раскладки карточки ══════════════ */
/* Карточка стала колонкой: так порядок блоков задаётся свойством order,
   и раскладку можно менять, не трогая разметку. */
.card{display:flex;flex-direction:column}
.card > *{flex:none}
.card .ava{order:1}
.card .nm{order:2}
.card .bdgs{order:3}
.card .uid{order:4}
.card .loc{order:5}
.card .typer{order:6}
.card .bio{order:7}
.card .dcard{order:8}
.card .links{order:9}
.card .player{order:10}
.card .foot{order:11}

/* плеер сразу под именем */
.lay-player-top .player{order:5;margin-top:14px}
.lay-player-top .uid{order:4}

/* соцсети под именем, описание ниже */
.lay-links-top .links{order:5;margin-top:14px}
.lay-links-top .bio{order:7}

/* аватар слева, имя и адрес справа */
.lay-side{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
  align-items:center;justify-items:start;text-align:left}
.lay-side .ava{grid-column:1;grid-row:1/3;margin:0}
.lay-side .nm{grid-column:2;grid-row:1;align-self:end}
.lay-side .uid{grid-column:2;grid-row:2;align-self:start}
.lay-side > *:not(.ava):not(.nm):not(.uid){grid-column:1/3;justify-self:stretch}
.lay-side .bdgs,.lay-side .links{justify-content:flex-start}
.lay-side .loc{margin-top:10px}
.lay-side .foot{text-align:left}
@media(max-width:420px){
  .lay-side{grid-template-columns:1fr;justify-items:center;text-align:center}
  .lay-side .ava{grid-column:1;grid-row:1}
  .lay-side .nm,.lay-side .uid{grid-column:1}
  .lay-side .bdgs,.lay-side .links{justify-content:center}
}

/* шире, ссылки в строку без переноса на больших экранах */
.lay-wide{width:min(640px,94vw)}
.lay-wide .links{flex-wrap:wrap;gap:9px}

/* без подложки: только содержимое поверх фона */
.lay-bare{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:10px}
.lay-bare .foot{border-top-color:rgba(255,255,255,.14)}

/* ══════════════ живой блок под ссылками ══════════════ */
.wbox{display:flex;align-items:center;gap:10px;margin-top:14px;padding:9px 11px;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);
  text-align:left;opacity:.55;transition:opacity .3s}
.wbox.ready{opacity:1}
.wbox .wico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:rgba(255,255,255,.07);color:var(--accent);overflow:hidden}
.wbox .wico img{width:100%;height:100%;object-fit:cover}
.wbox .wbody{flex:1;min-width:0;display:grid}
.wbox .wt{font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbox .ws{font-style:normal;font-size:11px;color:rgba(255,255,255,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbox .wextra{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.45);flex:none;
  max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .wbox{order:8}
/* Spotify: полоса под названием идёт по времени трека */
.wbox .wbar{display:block;height:3px;margin-top:6px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.wbox .wbar b{display:block;height:100%;width:0;border-radius:2px;background:var(--accent);transition:width 1s linear}
.wbox.playing .wextra{color:rgba(255,255,255,.6)}
/* несколько живых блоков: столбиком; на широкой карточке и с аватаром сбоку — в ряд */
.wrow{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.wrow .wbox,.wrow .dcard{margin-top:0}
.card .wrow{order:8}
.lay-wide .wrow,.lay-side .wrow{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
/* музыка без плеера: звук идёт, органов управления нет */
.player.hidden-player{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}


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

/* Имя заливкой из двух цветов. Эффекты ника, которые сами красят текст
   заливкой, исключены: две заливки на одном элементе — спор, в котором
   побеждает та, что ниже в файле, а не та, что выбрал владелец. */
.card.grad-name .nm:not(.fx-rainbow):not(.fx-shine):not(.fx-chrome){
  background-image:linear-gradient(100deg,var(--g1,var(--accent)),var(--g2,var(--accent)));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* Заливка идёт по ширине блока, а короткое имя стоит посередине — на всю
   строку оно берёт только середину перехода, и второй цвет не виден. Сужаем
   блок до самого имени. У раскладки «аватар сбоку» карточка — сетка, там имя
   и так по ширине текста, и ширина в сетке отменяет выравнивание. */
.card.grad-name:not(.lay-side) .nm{width:fit-content;max-width:100%;align-self:center}

/* Та же пара цветов на подложке карточки. Кладём поверх основной заливки,
   поэтому ползунок прозрачности продолжает работать. */
.card.grad-card{
  background-image:linear-gradient(160deg,
    color-mix(in srgb,var(--g1,var(--accent)) 40%,transparent),
    color-mix(in srgb,var(--g2,var(--accent)) 40%,transparent));
  border-color:color-mix(in srgb,var(--g1,var(--accent)) 34%,rgba(255,255,255,.12))}
/* у раскладки без подложки заливать нечего */
.card.lay-bare.grad-card{background-image:none;border-color:transparent}

/* Обмен цветов у блоков ссылок: подложка берёт цвет текста и наоборот. */
.card.lnk-inv .lnk{background:var(--ink2,#fff);border-color:var(--ink2,#fff);color:var(--bg,#141311)}
.card.lnk-inv .lnk:hover{background:var(--accent);border-color:var(--accent);color:var(--bg,#141311)}
/* Фирменные цвета соцсетей на светлой подложке частью пропадают — синий
   «телеграм» на белом ещё виден, а белый значок исчезает совсем. В обмене
   значки идут цветом текста блока. */
.card.lnk-inv .lnk svg{color:currentColor;fill:currentColor}

/* Декор аватара. Вид «обычный» не добавляет класса — это то, что было. */
.card.ava-none .ava{border:0;box-shadow:none}
.card.ava-ring .ava{border:3px solid var(--accent);box-shadow:none}
.card.ava-glow .ava{border:0;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent),
    0 0 26px color-mix(in srgb,var(--accent) 55%,transparent),
    0 0 60px color-mix(in srgb,var(--accent) 30%,transparent)}
/* Градиентное кольцо: рамка прозрачная, заливка идёт от края рамки. Картинка
   лежит внутри и закрывает середину, наружу выходит только кольцо. */
.card.ava-grad .ava{border:3px solid transparent;box-shadow:none;
  background-image:linear-gradient(135deg,var(--g1,var(--accent)),var(--g2,var(--accent)));
  background-origin:border-box;background-clip:border-box}
/* у аватара-заглушки заливка видна целиком, поэтому буква идёт тёмной */
.card.ava-grad .ava.blank{color:#141311}


/* ─────────────────────────────────────────────────────────────
   Оформление расширенного доступа: наклон карточки, появление
   блоков и спутник за курсором.

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

/* Наклон. Поворачивается карточка, а не вся сцена: фон должен остаться на
   месте, объём нужен тому, что человек читает. Перспектива обязана быть на
   родителе, иначе поворот выродится в плоский сдвиг. */
.stage.tilted{perspective:1000px}
/* Появление карточки заканчивается на transform:none и держит это
   значение дальше. Анимация в каскаде выше строчного стиля, поэтому
   она затирала наклон и смещение: обработчик считал углы, а браузер
   их не показывал. Там, где движение за курсором включено, карточка
   появляется одной прозрачностью и transform не занимает. */
.stage.tilted .card{animation-name:cardFade}
@keyframes cardFade{from{opacity:0}to{opacity:1}}
.stage.tilted .card{transform-style:preserve-3d;will-change:transform}

/* Появление блоков. Лесенка задержек по порядковому номеру: так блоки входят
   один за другим, а не вспыхивают разом. Дальше двенадцатого не растёт —
   иначе низ карточки заставлял бы себя ждать. */
.card[class*="rv-"]>*{animation-duration:.55s;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.7,.3,1)}
.card[class*="rv-"]>*:nth-child(1){animation-delay:.03s}
.card[class*="rv-"]>*:nth-child(2){animation-delay:.09s}
.card[class*="rv-"]>*:nth-child(3){animation-delay:.15s}
.card[class*="rv-"]>*:nth-child(4){animation-delay:.21s}
.card[class*="rv-"]>*:nth-child(5){animation-delay:.27s}
.card[class*="rv-"]>*:nth-child(6){animation-delay:.33s}
.card[class*="rv-"]>*:nth-child(7){animation-delay:.39s}
.card[class*="rv-"]>*:nth-child(8){animation-delay:.45s}
.card[class*="rv-"]>*:nth-child(9){animation-delay:.51s}
.card[class*="rv-"]>*:nth-child(n+10){animation-delay:.57s}

@keyframes rvFade{from{opacity:0}}
.rv-fade>*{animation-name:rvFade}
@keyframes rvUp{from{opacity:0;transform:translateY(16px)}}
.rv-up>*{animation-name:rvUp}
@keyframes rvZoom{from{opacity:0;transform:scale(.9)}}
.rv-zoom>*{animation-name:rvZoom}
@keyframes rvBlur{from{opacity:0;filter:blur(12px)}}
.rv-blur>*{animation-name:rvBlur}
@keyframes rvDrop{from{opacity:0;transform:translateY(-20px)}}
.rv-drop>*{animation-name:rvDrop}
@keyframes rvFlip{from{opacity:0;transform:perspective(700px) rotateX(-65deg)}}
.rv-flip>*{animation-name:rvFlip}

/* Спутник. Лежит поверх всего, но нажатия проходят сквозь: он не должен
   мешать попасть по ссылке, за которой сам же и бегает. */
.pet{position:fixed;left:0;top:0;width:46px;height:40px;z-index:40;pointer-events:none;
  transform:translate(-50%,-50%);color:var(--ink2,#fff);
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.55))}
.pet svg{width:100%;height:100%;display:block}
.pet.flip svg{transform:scaleX(-1)}

/* Лапы переступают только на ходу: топтание на месте выглядит поломкой.
   Сдвиг по фазе, иначе все четыре шагают разом и получается прыжок. */
.pet.run .plegs line{animation:petStep .26s linear infinite}
.pet.run .plegs line:nth-child(2){animation-delay:-.065s}
.pet.run .plegs line:nth-child(3){animation-delay:-.13s}
.pet.run .plegs line:nth-child(4){animation-delay:-.195s}
@keyframes petStep{50%{transform:translateY(-3px)}}

.pet .ptail{transform-box:fill-box;transform-origin:100% 50%;
  animation:petTail 1.6s ease-in-out infinite}
@keyframes petTail{50%{transform:rotate(-16deg)}}

.pet .pwing{transform-box:fill-box;transform-origin:50% 100%;
  animation:petWing .16s ease-in-out infinite alternate}
@keyframes petWing{to{transform:scaleX(.5)}}

/* Летающие покачиваются на месте, чтобы не висеть неподвижной наклейкой. */
.pet.float{animation:petFloat 2.6s ease-in-out infinite}
@keyframes petFloat{50%{transform:translate(-50%,-62%)}}

/* Кому движение мешает — не показываем ничего из этого. */
@media (prefers-reduced-motion:reduce){
  .card[class*="rv-"]>*{animation:none}
  .pet{display:none}
}

/* Рамка из Discord. Класс оболочки — тот же `ava`: к аватарке обращается
   десяток правил (раскладки, кольца, порядок в карточке), и все они должны
   попадать в один и тот же элемент. Сама рамка нарисована с запасом по
   краям, поэтому выходит за круг: обрезанная по нему, она выглядит поломкой. */
.ava.deco-wrap{position:relative;display:block;overflow:visible;padding:0}
.ava.deco-wrap .avaimg{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
/* Рамка из Discord шире аватара на 26%, и общее правило img{max-width:100%}
   резало её по ширине: выходило 104x131 вместо 131x131, украшение съезжало
   влево на тринадцать точек. Снимаем ограничение именно здесь. */
.ava.deco-wrap .avadeco{position:absolute;left:-13%;top:-13%;width:126%;height:126%;max-width:none;max-height:none;
  object-fit:contain;pointer-events:none}

/* Караоке. Подсвечена та строка, что уже началась: подсветить следующую
   заранее — значит выдать её раньше песни, а с опозданием текст отстаёт от
   голоса. Соседние держим приглушёнными, чтобы было видно, куда всё идёт.
   Высота задана намертво в три строки: если дать ей плясать от длины фразы,
   карточка будет дёргаться на каждой строчке. */
.lyr{margin-top:10px;display:grid;gap:2px;text-align:center;min-height:58px;
  align-content:center;overflow:hidden}
.lyr i,.lyr b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Дальние строки приглушены сильнее ближних: видно направление, но
   взгляд не спорит с тем, что поётся сейчас. */
.lyr i{font-style:normal;font-size:11px;opacity:.35;filter:blur(.9px);
  transition:opacity .25s,filter .25s}
.lyr .lp2,.lyr .ln2{opacity:.16;font-size:10.5px;filter:blur(1.8px)}
.lyr b{font-size:13.5px;font-weight:500;color:var(--accent);opacity:1;min-height:17px}
.lyr.pause b{color:inherit;opacity:.4}

/* Мест всегда пять, лишние прячет стиль: перекраивать разметку при
   смене настройки незачем, а браузеру — заводить и убивать узлы
   посреди песни. */
.lyr.n1{min-height:22px}
.lyr.n1 i{display:none}
.lyr.n3 .lp2,.lyr.n3 .ln2{display:none}
.lyr.n5{min-height:94px}

/* Двигается вся стопка, а не одна текущая строка: соседние менялись
   мгновенно, и вместе это читалось как обычная подмена текста.
   Лесенка задержек — строки входят одна за другой, снизу вверх. */
@keyframes lyrFade{from{opacity:0;filter:blur(4px)}}
@keyframes lyrSlide{from{opacity:0;transform:translateY(14px)}}
@keyframes lyrPop{from{opacity:0;transform:scale(.9)}}
.lyr.step > *{animation-duration:.38s;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.2,.8,.3,1)}
.lyr.step > *:nth-child(2){animation-delay:.03s}
.lyr.step > *:nth-child(3){animation-delay:.06s}
.lyr.step > *:nth-child(4){animation-delay:.09s}
.lyr.step > *:nth-child(5){animation-delay:.12s}
.lyr.fx-fade.step > *{animation-name:lyrFade}
.lyr.fx-slide.step > *{animation-name:lyrSlide}
.lyr.fx-pop.step > *{animation-name:lyrPop}
.lyr.fx-glow b{text-shadow:0 0 16px var(--accent),0 0 3px var(--accent)}

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

   Размеры у соседних строк выравниваем: когда строка едет, разъезжаться
   должна она сама, а не её кегль. */
.lyr.fx-scroll > *{transition:opacity .34s ease,color .34s ease;
  will-change:transform}
.lyr.fx-scroll i{font-size:12px}
.lyr.fx-scroll .lp2,.lyr.fx-scroll .ln2{font-size:12px}
.lyr.fx-scroll{overflow:hidden}

/* Заливка: строка окрашивается слева направо по мере пения. Долю
   считает скрипт и кладёт в --p, поэтому сам стиль ничего не знает о
   времени. Отметки в LRC стоят на строку, не на слово, — доля берётся
   от начала строки до начала следующей. */
.lyr.fx-fill b{background-image:linear-gradient(90deg,
  var(--accent) 0 calc(var(--p,0) * 100%),
  rgba(255,255,255,.42) calc(var(--p,0) * 100%) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.lyr.fx-fill.pause b{background-image:none;color:rgba(255,255,255,.4);
  -webkit-text-fill-color:rgba(255,255,255,.4)}
@media (prefers-reduced-motion:reduce){.lyr.step > *{animation:none}}

/* ─────────────────────────────────────────────────────────────
   Длинная страница.

   Пока разделов нет, сцена занимает ровно экран и ничего не
   прокручивается — так было всегда. С разделами она становится
   обычным потоком, а фон, затемнение и эффект переезжают в
   неподвижный слой: иначе картинка уезжала бы вместе с текстом.
   ───────────────────────────────────────────────────────────── */
.stage.long{position:relative;inset:auto;display:block;padding:0;min-height:100svh}
.stage.long .bgm,.stage.long .veil,.stage.long #fx{position:fixed;inset:0}
.stage.long .hero{position:relative;z-index:2;min-height:100svh;display:grid;
  place-items:center;padding:20px}
.stage.long .card{margin:0 auto}

/* Подсказка о прокрутке гаснет после первого же движения: оставленная
   насовсем, она превращается в мусор поверх содержимого. */
.scrollhint{position:absolute;left:0;right:0;bottom:22px;text-align:center;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.45;
  color:var(--ink2,#fff);transition:opacity .5s;pointer-events:none}
.scrollhint span{display:block;width:1px;height:22px;margin:0 auto 8px;
  background:currentColor;transform-origin:top;animation:hintDrop 1.8s ease-in-out infinite}
@keyframes hintDrop{0%,100%{transform:scaleY(.35);opacity:.3}50%{transform:scaleY(1);opacity:.9}}
.scrolled .scrollhint{opacity:0}

/* Разделы. Колонка чуть шире карточки, но не во весь экран: строка длиннее
   семидесяти знаков читается заметно хуже, чем кажется. */
/* Ширина ровно как у карточки, и скругление с тенью те же: разделы
   должны читаться её продолжением, а не соседней страницей. Прежние
   720 пикселей были вдвое шире карточки — оттого и смотрелись пришитыми. */
/* Ширину берём у карточки: единственная раскладка, которая её меняет, —
   «широкая». Без этого разделы вставали колонкой чужого размера, и
   страница разваливалась на две несвязанные половины. */
.more.w{width:min(640px,94vw)}
/* «Без подложки» — значит без подложки и здесь, иначе низ страницы
   выглядит тяжелее верха. */
.more.bare .blk{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:10px}
/* Две колонки: во всю ширину раздел занимает обе, половинный — одну,
   и половинки встают парами. На узком экране всё разворачивается
   обратно: две колонки на телефоне — это две нечитаемые колонки. */
.more{position:relative;z-index:2;width:min(440px,94vw);margin:0 auto;
  padding:0 0 80px;display:grid;gap:14px;color:var(--ink2,#fff);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.more > .blk{grid-column:span 2}
.more > .blk.half{grid-column:span 1;padding:14px}
.more > .blk.half .bh{font-size:14px;margin-bottom:8px}
.more > .blk.half .dsv{gap:9px}
.more > .blk.half .dsvi{width:34px;height:34px;border-radius:11px}
.more > .blk.half .dsvn{font-size:12.5px}
.more > .blk.half .dsvc{font-size:10.5px}
.more > .blk.half .bgo{padding:6px 11px;font-size:11px}
@media(max-width:560px){.more > .blk.half{grid-column:span 2}}
.blk{border:1px solid rgba(255,255,255,.12);border-radius:22px;
  padding:clamp(16px,2.6vw,22px);background:rgba(10,10,14,var(--card,.55));
  backdrop-filter:blur(16px);box-shadow:0 30px 90px rgba(0,0,0,.5);text-align:left}

/* Внутри карточки рамка и подложка не нужны — они уже есть под ним. */
.card .blk.in{border:0;background:none;backdrop-filter:none;box-shadow:none;
  padding:0;margin-top:14px;width:100%}
.card .blk.in .bh{text-align:center}
.card .blk.at-name{order:5}
.card .blk.at-bio{order:7}
.card .blk.at-links{order:9}

.bh{margin:0 0 10px;font-size:clamp(15px,2vw,18px);font-weight:600;letter-spacing:-.01em}
.blk-text p{margin:0 0 10px;font-size:14px;line-height:1.6;opacity:.85}
.blk-text p:last-child{margin:0}

.bgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.bcard{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.bcard b{font-size:14px;font-weight:600}
.bcard p{margin:0;font-size:12.5px;line-height:1.5;opacity:.75}
.btags{display:flex;flex-wrap:wrap;gap:6px}
.btags i{font-style:normal;font-size:10.5px;padding:3px 8px;border-radius:20px;
  background:rgba(255,255,255,.08);opacity:.8}

.bgo{margin-top:auto;align-self:flex-start;font-size:12px;text-decoration:none;
  padding:7px 14px;border-radius:20px;border:1px solid var(--accent);color:var(--accent);
  transition:background .2s,color .2s}
.bgo:hover{background:var(--accent);color:#0b0b10}
.bgo.big{padding:10px 22px;font-size:13px}

/* Баннер. Затемнение слева направо, а не сплошное: текст должен читаться,
   но и картинку прятать целиком незачем — её ради того и ставили. */
.blk-banner{position:relative;overflow:hidden;min-height:180px;display:grid;
  align-items:center;background-size:cover;background-position:center}
.blk-banner::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,6,10,.88),rgba(6,6,10,.3))}
.blk-banner .bwrap{position:relative;display:grid;gap:10px;justify-items:start}
/* Картинка целиком: она содержимое, а не подложка, поэтому затемнение
   не нужно и высоту задаёт она сама. */
.blk-banner.whole{padding:0;min-height:0;display:block;overflow:hidden}
.blk-banner.whole::before{display:none}
.bpic{width:100%;height:auto;display:block}
.blk-banner.whole .bwrap{padding:clamp(14px,2.4vw,20px)}
.blk-banner p{margin:0;font-size:13.5px;line-height:1.5;opacity:.85;max-width:46ch}

.dsv{display:flex;align-items:center;gap:12px}
.dsvi{width:44px;height:44px;border-radius:14px;flex:none;background:rgba(255,255,255,.08);
  background-size:cover;background-position:center}
.dsvb{flex:1;min-width:0;display:grid}
.dsvn{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsvc{font-style:normal;font-size:11.5px;opacity:.6}

@media (max-width:560px){.more{padding-bottom:56px}}

/* ── подсказка при наведении ──
   Встроенная подсказка браузера ждёт секунду, рисуется системой и на тёмной
   странице выглядит белым ярлыком из другого мира. Эта появляется быстрее и
   выезжает от того места, к которому относится.

   Нажатия сквозь неё проходят: подсказка не должна перехватывать то, что
   человек как раз собирался нажать. */
.tip{position:fixed;z-index:200;display:none;pointer-events:none;
  max-width:min(320px,calc(100vw - 24px));padding:8px 11px;border-radius:10px;
  font-size:12px;line-height:1.45;font-weight:400;letter-spacing:0;
  color:#e9edf2;background:#17171c;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 36px rgba(0,0,0,.6);
  opacity:0;transform:translateY(5px);
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.3,1)}
.tip.ready{display:block}
.tip.under{transform:translateY(-5px)}
.tip.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tip{transition:none;transform:none}}

/* Встроенный проигрыватель службы. Размеры разные: у SoundCloud и Spotify
   это узкая полоса, у ютуба — настоящее видео, и меньше 16:9 его не сделать. */
.emb{margin-top:14px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.emb iframe{display:block;width:100%;border:0}
.emb.sc iframe{height:120px}
.emb.sp iframe{height:152px}
.emb.yt{aspect-ratio:16/9}
.emb.yt iframe{height:100%}
.card .emb{order:10}

/* ── место проигрывателя ──
   Карточка расставляет части через order, поэтому и проигрыватель получает
   номер. Караоке и уровни идут следом за ним: разъедутся — текст окажется в
   одном конце карточки, а музыка в другом.

   Оплошность, которую это чинит: у блока караоке номера не было вовсе, а без
   него он ноль — то есть выше аватара. */
.card .lyr{order:10}
.card .viz{order:10}
.card.pa-top .player,.card.pa-top .emb,.card.pa-top .lyr,.card.pa-top .viz{order:1}
.card.pa-name .player,.card.pa-name .emb,.card.pa-name .lyr,.card.pa-name .viz{order:5}
.card.pa-bio .player,.card.pa-bio .emb,.card.pa-bio .lyr,.card.pa-bio .viz{order:7}

/* ── уровни ──
   Холст низкий и во всю ширину карточки: это подпись под музыкой, а не
   отдельная картина. Нажатия сквозь него проходят. */
.viz{display:block;width:100%;height:38px;margin-top:10px;pointer-events:none}

/* Холст у аватара. Лежит за ним и вне потока, поэтому раскладку карточки
   не двигает: наводится на аватар скриптом. Аватар приподнят над ним,
   иначе кольцо рисовалось бы поверх лица. */
.avz{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
.card.viz-ring .ava,.card.viz-halo .ava{position:relative;z-index:1}
/* У аватара своя анимация появления, и она заканчивается на
   transform:none. Анимация в каскаде выше строчного стиля, поэтому она
   затирала бы пульс — там, где он включён, оставляем только проявление. */
.card.viz-pulse .ava{animation-name:avaFade}
@keyframes avaFade{from{opacity:0}to{opacity:1}}
.card.viz-pulse .ava{transition:box-shadow .12s linear}

/* ── текст поверх видео ──
   Кладём на нижнюю треть кадра и подкладываем затемнение: белый текст на
   светлом кадре не читается, а прямоугольник под ним закрыл бы картинку. */
/* Поверх проигрывателя — любого: у рамки службы контейнер уже есть, а
   свой проигрыватель плоская строка, и его заворачиваем в оболочку,
   иначе тексту не на что лечь.

   Затемнение снизу обязательно: белый текст на светлом кадре не
   читается, а сплошная плашка закрыла бы картинку. Нажатия проходят
   сквозь — под текстом лежат кнопки проигрывателя. */
.pwrap,.emb.with-lyr{position:relative}
.emb.with-lyr .lyr.over,.pwrap .lyr.over{position:absolute;left:0;right:0;bottom:0;
  margin:0;padding:24px 12px 10px;min-height:0;z-index:3;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
.emb.with-lyr .lyr.over b,.pwrap .lyr.over b{font-size:14px;color:#fff;
  -webkit-text-fill-color:currentColor}
.emb.with-lyr .lyr.over.fx-fill b,.pwrap .lyr.over.fx-fill b{-webkit-text-fill-color:transparent}
.emb.with-lyr .lyr.over i,.pwrap .lyr.over i{color:rgba(255,255,255,.65)}
.card .pwrap{order:10}
.card.pa-top .pwrap{order:1}
.card.pa-name .pwrap{order:5}
.card.pa-bio .pwrap{order:7}

/* Холст следа лежит поверх всей страницы, но нажатия проходят сквозь: он не
   должен перехватывать то, по чему человек целится. Ниже спутника — зверёк
   бежит по следу, а не под ним. */
.trail{position:fixed;inset:0;width:100%;height:100%;z-index:38;pointer-events:none}


/* ══════════════ живая страница-пример ══════════════ */
/* Не картинка, а настоящая страница в рамке: подгружается своим адресом
   с preview=1, поэтому заставка «нажмите, чтобы войти» не показывается,
   а просмотр не засчитывается. Рамка наклонена, как карточка в руке;
   нажатия сквозь неё не проходят, для этого рядом ссылка «Открыть». */
.show{position:relative;z-index:2;padding:clamp(30px,6vw,90px) var(--pad) clamp(50px,8vw,120px);
  display:grid;gap:clamp(22px,4vw,40px);justify-items:center}
.show-head{text-align:center;display:grid;gap:10px;max-width:540px;justify-items:center}
.show-head p{font-size:15px;color:var(--dim2)}
.show-stage{display:grid;gap:22px;justify-items:center;perspective:1500px}
.show-frame{width:min(760px,92vw);aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  border:1px solid var(--line2);background:var(--bg2);transform-style:preserve-3d;
  transform:rotateY(-13deg) rotateX(5deg) rotateZ(-1.5deg);
  box-shadow:0 70px 120px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.04) inset;
  transition:transform .9s cubic-bezier(.2,.8,.3,1)}
.show-stage:hover .show-frame{transform:rotateY(-5deg) rotateX(2deg) rotateZ(-.5deg)}
.show-frame iframe{width:100%;height:100%;border:0;display:block;pointer-events:none;background:var(--bg2)}
.show-open{gap:10px}
@media(max-width:700px){
  .show-frame{transform:none;aspect-ratio:9/14;border-radius:14px}
  .show-stage:hover .show-frame{transform:none}
}
@media(prefers-reduced-motion:reduce){.show-frame,.show-stage:hover .show-frame{transform:none}}

/* телефон в сборщике: внутри настоящая страница, а не копия карточки */
.phone{padding:0}
.phone iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:var(--bg2)}

/* шов: первый экран гаснет к цвету фона ровно по своей границе, а блок с
   рамкой начинался сразу с тумана. Растягиваем переход вниз. */
.show::before{content:"";position:absolute;left:0;right:0;top:-1px;height:28vh;pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,var(--bg),transparent)}

/* ══════════════ знак сайта ══════════════ */
.mark{display:inline-block;width:1em;height:1em;vertical-align:-.12em;color:var(--accent)}
.topnav .navmark{display:inline-flex;align-items:center}
.topnav .navmark .mark{width:30px;height:30px}
.hud .brand{display:inline-flex;align-items:center;gap:9px}
.hud .brand .mark{width:22px;height:22px}
.foot-brand{display:inline-flex;align-items:center;gap:7px}
.foot-brand .mark{width:14px;height:14px}
.enter-mark .mark{width:44px;height:44px;margin:0 auto 6px;color:#F5A524}
.enter div .enter-mark{display:block}
.card-brand{display:inline-flex;align-items:center;gap:5px}
.card-brand .mark{width:11px;height:11px;color:currentColor;opacity:.8}
@media(max-width:700px){.topnav .navmark .mark{width:26px;height:26px}}

/* шапка главной на узком экране: кнопка входа упиралась в край */
@media(max-width:480px){.topnav{gap:10px}.topnav a{font-size:11px;letter-spacing:.03em}.topnav .navbtn{padding:8px 14px}}
/* на телефоне в шапке главной не помещались все ссылки: убираем «Попробовать», до блока и так доезжают */
@media(max-width:480px){.topnav a[href="#try"]{display:none}.topnav .navbtn{padding:8px 12px}}
/* растяжка снизу первого экрана главной (.hero::after) цеплялась и за .hero
   длинной страницы визитки: под карточкой темнела полоса шириной в карточку */
.stage.long .hero::after{content:none}
/* «Волна» режет имя на буквы-спаны, а градиент имени красит только сам .nm:
   буквы становились прозрачными и имя пропадало. Красим каждую букву. */
.card.grad-name .nm.fx-wave span{background:inherit;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* слово в эффекте «волна»: не рвётся посередине */
.nm.fx-wave .ww{display:inline-block;white-space:nowrap;font-weight:inherit}
.card.grad-name .nm.fx-wave .ww{background:inherit}
/* Текст «поверх проигрывателя» у своего плеера: он в разы ниже блока строк,
   и абсолютный блок вылезал вверх на соседние разделы. Своему плееру строки
   идут под ним обычным потоком; поверх ложатся только на видео и рамку службы. */
.pwrap .lyr.over{position:static;margin-top:8px;padding:6px 8px 0;min-height:58px;background:none;text-shadow:none;pointer-events:auto}
.pwrap .lyr.over.n5{min-height:94px}
.pwrap .lyr.over.n1{min-height:22px}
/* блок строк караоке скрыт атрибутом hidden, но .lyr{display:grid} его перебивал:
   пустая полоса под плеером висела и без музыки */
.lyr[hidden]{display:none}
/* Прокрутка караоке: раньше строки одного кегля сдвигались на 18 px за
   0,4 с и читалось это как смена яркости. Текущая строка крупнее соседних,
   промежутки шире, движение дольше: видно, что стопка едет. */
.lyr.fx-scroll{gap:7px}
.lyr.fx-scroll b{font-size:16px;line-height:1.25}
/* Соседние строки не в фокусе — в буквальном смысле: чем дальше строка от
   той, что поётся, тем сильнее размыта. Прежние 0,4 точки не видел никто,
   а в режиме трёх строк размытые места вообще скрыты — размытия не
   оставалось совсем. */
.lyr.fx-scroll i{font-size:13px;line-height:1.25;opacity:.42;filter:blur(1.1px)}
.lyr.fx-scroll .lp2,.lyr.fx-scroll .ln2{font-size:12px;opacity:.2;filter:blur(2.2px)}
/* Стопка едет, а текст внутри мест подменяется мгновенно. Поэтому на
   смене строки текст проявляется из размытия: конечное значение берётся
   из самого места, поэтому соседние возвращаются к своему размытию, а
   текущая — к резкости. */
@keyframes lyrSwap{from{opacity:.12;filter:blur(4px)}}
.lyr.fx-scroll.swap > *{animation:lyrSwap .5s cubic-bezier(.2,.8,.3,1) both}
@media (prefers-reduced-motion:reduce){.lyr.fx-scroll.swap > *{animation:none}}
.lyr.fx-scroll.n5{min-height:124px}
.lyr.fx-scroll.n3{min-height:76px}
.pwrap .lyr.over.fx-scroll.n5{min-height:124px}

/* ══════════════ плашка внизу страницы без премиума ══════════════ */
.claimbar{position:fixed;left:16px;bottom:16px;z-index:80;display:flex;align-items:center;gap:12px;
  max-width:min(420px,calc(100vw - 32px));padding:11px 12px 11px 14px;border-radius:14px;
  background:rgba(20,19,17,.92);border:1px solid rgba(234,228,214,.14);backdrop-filter:blur(14px);
  color:#EAE4D6;text-decoration:none;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
  transform:translateY(calc(100% + 24px));opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.claimbar:not([hidden]).in{transform:none;opacity:1}
.claimbar .mark{width:26px;height:26px;flex:none;color:#F5A524}
.claimbar .cb-t{display:grid;gap:2px;min-width:0}
.claimbar .cb-t b{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:-.01em}
.claimbar .cb-t span{font-family:var(--ui);font-size:12.5px;color:rgba(234,228,214,.72);line-height:1.3}
.claimbar .cb-x{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;
  font-style:normal;font-size:18px;color:rgba(234,228,214,.55);cursor:pointer;transition:.2s}
.claimbar .cb-x:hover{background:rgba(255,255,255,.08);color:#fff}
/* строка караоке в режиме прокрутки внутри обёртки плеера: общее правило .pwrap .lyr.over b перебивало кегль */
.pwrap .lyr.over.fx-scroll b{font-size:16px}
@media(max-width:700px){.claimbar{left:10px;right:10px;bottom:10px;max-width:none}}
/* подсказка с длинным адресом без пробелов вылезала за край: рвём где угодно */
.tip{overflow-wrap:anywhere;word-break:break-word;background:#1C1A17;color:#EAE4D6;border-color:rgba(234,228,214,.14)}

/* подвал: колонки не сжимаются до обрыва слов; шапка не просвечивает текст под собой */
.foot-col a{overflow-wrap:normal}
.foot-col a[href^="mailto:"]{overflow-wrap:anywhere}
@media(max-width:1100px){.foot-top{grid-template-columns:1fr;gap:36px}}
.land .hud{background:rgba(20,19,17,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* баннер внутри карточки: общий сброс отступов для блоков в карточке оставлял текст вплотную к краю картинки */
.card .blk.in.blk-banner{padding:clamp(14px,2.4vw,20px)}
.card .blk.in.blk-banner.whole{padding:0}

/* Подпись карточки и подвал сайта делят класс .foot: подвал тянул в карточку
   свой фон и отступы, на светлых страницах это чёрная полоса. Возвращаем
   подписи её вид. */
.card .foot{background:none;padding:14px 0 0;position:static;z-index:auto;border-top:1px solid rgba(255,255,255,.1);font-family:inherit;font-size:inherit;color:var(--dim)}

/* Ник занимал всю ширину карточки, и номер показывался при наведении на
   пустое место в строке. Заголовок теперь по ширине текста. */
.card .nm{width:fit-content;max-width:100%}
.card:not(.lay-side) .nm{margin-left:auto;margin-right:auto}

/* значок премиума в рейтинге */
.board .who .tb{display:inline-grid;place-items:center;vertical-align:-2px;margin-left:2px;color:#F5A524}
/* Конструктор «Соберите за минуту»: тот же кадр, что и в блоке «Так выглядит страница» */
.try-view{perspective:1500px}
.phone{width:min(640px,100%);aspect-ratio:4/3;border-radius:16px;padding:0;background:var(--bg2);
  transform-style:preserve-3d;transform:rotateY(-13deg) rotateX(5deg) rotateZ(-1.5deg);
  box-shadow:0 70px 120px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.04) inset;
  transition:transform .9s cubic-bezier(.2,.8,.3,1)}
.try-view:hover .phone{transform:rotateY(-5deg) rotateX(2deg) rotateZ(-.5deg)}
@media(max-width:700px){.phone,.try-view:hover .phone{transform:none;aspect-ratio:9/14;border-radius:14px}}
@media(prefers-reduced-motion:reduce){.phone,.try-view:hover .phone{transform:none}}
.try-grid{grid-template-columns:minmax(0,1fr) minmax(0,640px);align-items:center}
@media(max-width:1000px){.try-grid{grid-template-columns:1fr}}
/* кадры превью стоят ровно и наклоняются за курсором (сценарий в land.js), а не набок */
.show-frame,.show-stage:hover .show-frame,.phone,.try-view:hover .phone{transform:none;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.show-frame.live,.phone.live{transition:transform .12s ease-out}
/* вход и выбор адреса: знак не плиткой в окне, а большим на фоне за окном */
.auth .page{position:relative}
.authbg{position:fixed;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none}
.authbg .mark{display:block;width:min(64vw,560px);height:auto;color:#F5A524;opacity:.07;
  filter:drop-shadow(0 0 60px rgba(245,165,36,.35));animation:authbg-drift 14s ease-in-out infinite alternate}
.authbox{position:relative;z-index:1}
@keyframes authbg-drift{from{transform:rotate(-4deg) scale(.98)}to{transform:rotate(4deg) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.authbg .mark{animation:none}}
/* знак на фоне входа: меньше окна, ровно за ним, без покачивания, чтобы не торчал по бокам */
.authbg .mark{width:min(56vw,300px);opacity:.09;animation:none;transform:none;filter:drop-shadow(0 0 80px rgba(245,165,36,.45))}
/* ссылки-переключатели на входе в цвет палитры, а не фиолетовые */
.swap a{color:#F5A524;border-bottom:1px solid rgba(245,165,36,.35)}
/* знак в левом верхнем углу страницы входа, как в шапке главной; ведёт на главную */
.authtop{position:fixed;top:22px;left:var(--pad);z-index:5;display:grid;place-items:center;color:#F5A524;transition:transform .25s}
.authtop .mark{display:block;width:30px;height:30px}
.authtop:hover{transform:scale(1.08)}

/* строка @ник/UID была на всю ширину карточки (inline-grid во flex-колонке растягивается), и подсказка с UID вспыхивала при наведении далеко от ника */
.card .uid{align-self:center;width:fit-content;max-width:100%}

/* ══════════════ выбор языка в подвале ══════════════ */
.foot-lang{position:relative;display:inline-block;padding:0;border:0;background:none}
.foot-lang summary{list-style:none;display:inline-flex;align-items:center;gap:9px;padding:9px 12px 9px 12px;border:1px solid var(--line);
  border-radius:11px;background:var(--bg2);color:var(--ink);font-size:13.5px;cursor:pointer;user-select:none;transition:border-color .2s,background .2s}
.foot-lang summary::-webkit-details-marker{display:none}
.foot-lang summary svg{color:var(--dim)}
.foot-lang summary:hover,.foot-lang[open] summary{border-color:rgba(245,165,36,.5);background:#211e1a}
.foot-lang .chev{width:6px;height:6px;margin:-3px 2px 0 4px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .2s}
.foot-lang[open] .chev{transform:rotate(225deg);margin-top:2px}
.foot-lang::after{content:none}
.lang-menu{position:absolute;left:0;bottom:calc(100% + 8px);min-width:190px;padding:6px;border-radius:14px;z-index:30;
  background:rgba(28,26,23,.96);border:1px solid rgba(234,228,214,.14);backdrop-filter:blur(14px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.85);display:grid;gap:2px;animation:lang-in .18s ease-out}
@keyframes lang-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 11px;border-radius:9px;
  color:var(--ink);text-decoration:none;font-size:13.5px;transition:background .15s}
.lang-menu a small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim)}
.lang-menu a:hover{background:rgba(245,165,36,.12)}
.lang-menu a.on{background:rgba(245,165,36,.18);color:#FFB84D}
.lang-menu a.on small{color:#FFB84D}
[dir="rtl"] .lang-menu{left:auto;right:0}
/* значки состояния Discord: как в самом Discord, а не просто цветные точки */
.dcard .ddot{position:relative;width:11px;height:11px;border-radius:50%;background:transparent;border:2px solid #80848e;box-sizing:border-box;box-shadow:none}
.dcard .ddot[data-status=online]{border:0;background:#23a55a;box-shadow:0 0 10px rgba(35,165,90,.55)}
.dcard .ddot[data-status=idle]{border:0;background:#f0b232;box-shadow:0 0 10px rgba(240,178,50,.5);overflow:hidden}
.dcard .ddot[data-status=idle]::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#1C1A17;left:-2.5px;top:-2.5px}
.dcard .ddot[data-status=dnd]{border:0;background:#f23f43;box-shadow:0 0 10px rgba(242,63,67,.55)}
.dcard .ddot[data-status=dnd]::after{content:"";position:absolute;left:2px;right:2px;top:4px;height:3px;border-radius:2px;background:#1C1A17}

/* фон с ютуба показывается только когда ролик пошёл: иначе видна заставка с кнопкой и заголовком */
.ytbox{opacity:0;transition:opacity .9s ease}
.ytbox.live{opacity:1}
/* иконка почты на регистрации была слишком тусклой */
.withicon svg{color:#c9c2b4;opacity:.9}
.withicon:focus-within svg{color:#F5A524;opacity:1}
/* кнопки служебных страниц и вкладки рейтинга: 10px моноширинным читались с трудом */
.btn{font-size:12.5px;padding:13px 26px;letter-spacing:.12em}
.tabs a{font-size:11.5px}

/* дополнения под тарифами: три маленькие карточки в стиле .plan */
.addons-h{max-width:1000px;margin:clamp(28px,4vw,48px) auto 14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:14px}
.addons-h::after{content:"";flex:1;height:1px;background:var(--line)}
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:0 auto}
.addon{border:1px solid var(--line);border-radius:22px;padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:10px;min-width:0}
.addon .aname{font-size:17px;font-weight:600;margin-top:-2px}
.addon .anum{font-family:var(--disp);font-weight:900;font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.03em}
.addon .anum small{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.1em;color:#F5A524;text-transform:uppercase;margin-left:8px}
.addon p{font-size:14px;color:var(--dim2);line-height:1.45;margin:0 0 auto}
@media(max-width:820px){.addons{grid-template-columns:1fr}}

/* свой логотип на заставке */
.enter-logo{display:block;max-width:min(60vw,220px);max-height:110px;margin:0 auto 8px;object-fit:contain}

/* сборщик на телефоне: колонка сетки не должна расти шире экрана из-за min-content полей, иначе кадр уезжает вправо */
.try-grid>*{min-width:0}
.try-view{min-width:0;max-width:100%}
.phone{max-width:100%}
@media(max-width:700px){.builder{overflow-x:clip}}

/* карточка не должна быть шире сцены за вычетом её отступов: иначе на узком экране она прижимается к левому краю и вылезает справа */
.stage>.card,.stage .hero>.card{max-width:100%}

/* сцена - grid без явных колонок: дорожка растёт до ширины карточки и вылезает за отступы, так что ширину задаём от экрана минус отступы сцены */
.stage{grid-template-columns:minmax(0,1fr)}
.stage>.card,.stage .hero>.card{width:min(440px,94vw,calc(100vw - 40px))}

/* объект первого экрана на телефоне: квадратные файлы, обрезанные вокруг объекта, и анимированный WebP на iPhone */
#orb.m{height:min(96vw,52svh)}
#orb.m.still::after{background-image:url(/static/orb-m-poster.webp)}
#orb img{position:relative;width:100%;height:100%;display:block;object-fit:contain;opacity:0;transition:opacity 1s ease}
#orb.ready img{opacity:1}

/* флаги в списке языков подвала (circle-flags, MIT) */
.lang-menu a span{display:inline-flex;align-items:center;gap:8px}
.lang-menu .fl{width:16px;height:16px;border-radius:50%}

/* кольцо и ореол визуализатора выходят за край аватара примерно на пятую часть его размера: даём имени под ним место, чтобы столбики не липли к нику */
.card.viz-ring .ava,.card.viz-halo .ava{margin-bottom:30px}
.card.lay-side.viz-ring .ava,.card.lay-side.viz-halo .ava{margin-bottom:0;margin-right:16px}

/* на длинной странице карточка лежит внутри .hero, а perspective действует только на прямых детей: без этого правила наклон за курсором вырождался в плоский сдвиг */
.stage.long.tilted .hero{perspective:1000px}

/* полоса прокрутки: тонкая и тёмная, а не системная белая; на страницах-визитках ползунок в цвет акцента */
html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32);background-clip:padding-box}
.prof{scrollbar-color:color-mix(in srgb,var(--accent,#F5A524) 55%,transparent) transparent}
.prof ::-webkit-scrollbar-thumb,.prof::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent,#F5A524) 55%,transparent);background-clip:padding-box}

/* на длинной странице perspective на самой сцене превращал fixed-фон (картинку, видео, YouTube) в absolute: фон переставал быть закреплённым и вёл себя странно; перспектива остаётся только на .hero */
.stage.long.tilted{perspective:none}


/* ══════════════ соцсети в подвале ══════════════ */
.foot-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-tools .foot-lang{margin:0}
.foot-soc{display:flex;gap:8px}
.foot-soc a{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);
  background:var(--bg2);color:var(--dim);transition:color .2s,border-color .2s,transform .2s}
.foot-soc a svg{width:24px;height:24px;display:block}
.foot-soc a:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-1px)}

/* ══════════════ QR-код визитки ══════════════ */
.qr-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(10,10,14,.45);backdrop-filter:blur(10px);
  color:var(--ink2,#EAE4D6);opacity:.55;transition:opacity .2s,color .2s,border-color .2s,transform .2s}
.qr-btn svg{width:20px;height:20px;display:block}
.qr-btn:hover,.qr-btn:focus-visible{opacity:1;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);outline:none}
.qr-fab{position:fixed;top:18px;right:18px;z-index:60}
[dir=rtl] .qr-fab{right:auto;left:18px}
.qr-in{display:none;width:30px;height:30px;border-radius:9px;margin-left:auto;background:none;backdrop-filter:none;border-color:rgba(255,255,255,.1);opacity:.7}
.qr-in svg{width:16px;height:16px}
[dir=rtl] .qr-in{margin-left:0;margin-right:auto}
@media(max-width:700px){.qr-fab{display:none}.qr-in{display:grid}}

.qr-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;
  background:rgba(6,6,9,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .26s ease}
.qr-modal[hidden]{display:none}
.qr-modal.on{opacity:1}
.qr-box{position:relative;width:min(360px,100%);padding:22px 22px 20px;border-radius:24px;text-align:center;
  border:1px solid rgba(255,255,255,.1);background:rgba(16,15,13,.94);color:#EAE4D6;font-family:var(--font,var(--ui));
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.96);opacity:0;transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .26s ease}
.qr-modal.on .qr-box{transform:none;opacity:1}
.qr-x{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:9px;
  background:none;color:rgba(234,228,214,.55);font-size:22px;line-height:1;cursor:pointer;transition:color .2s,background .2s}
[dir=rtl] .qr-x{right:auto;left:12px}
.qr-x:hover{color:#EAE4D6;background:rgba(255,255,255,.07)}
.qr-title{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,228,214,.5);margin:2px 0 16px}
.qr-tile{position:relative;width:min(280px,100%);aspect-ratio:1;margin:0 auto;border-radius:20px;background:#141311;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 60px color-mix(in srgb,var(--accent) 14%,transparent)}
.qr-tile canvas{display:block;width:100%;height:100%;border-radius:20px;opacity:0;transition:opacity .35s ease}
.qr-modal.ready .qr-tile canvas{opacity:1}
.qr-tile::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:2px solid rgba(234,228,214,.15);border-top-color:var(--accent);animation:spin .8s linear infinite}
.qr-modal.ready .qr-tile::before,.qr-modal.fail .qr-tile::before{display:none}
.qr-mark{display:none}
.qr-url{margin:16px 0 4px;font-family:var(--mono);font-size:14px;letter-spacing:.02em;color:#EAE4D6;overflow-wrap:anywhere;direction:ltr}
.qr-url b{color:var(--accent);font-weight:400}
.qr-hint{font-size:12px;color:rgba(234,228,214,.5);margin:0 0 16px}
.qr-acts{display:flex;flex-wrap:wrap;gap:8px}
.qr-acts button{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 12px;border-radius:12px;
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.qr-acts button svg{width:15px;height:15px;flex:none}
#qr-copy{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#EAE4D6}
#qr-copy:hover{background:rgba(255,255,255,.09)}
#qr-copy.ok{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}
#qr-dl{border:1px solid transparent;background:var(--accent);color:#141311}
#qr-dl:hover{filter:brightness(1.08)}
#qr-share{flex:1 1 100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#EAE4D6}
#qr-share:hover{background:rgba(255,255,255,.09)}
#qr-share[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.qr-modal,.qr-box,.qr-tile canvas{transition:none}}

/* ══════════════ объект внутри колец ══════════════
   Кольца считались от ширины экрана, а ролик от высоты, и на широких экранах
   объект вылезал за них. Теперь оба размера идут от одной величины H — высоты
   кадра ролика (16:9, contain). Объект занимает ~0,85 H, его радиус ~0,45 H;
   кольца шириной 1,4 H: круг o2 радиусом 0,6 H и эллипс o3 шириной 0,5 H
   проходят снаружи, плоское кольцо o1 пересекает объект, как у планеты. */
#orb{height:min(70svh,860px)}
.orbits{width:calc(1.4 * min(70svh, 663px, 52.9vw))}
@media(max-width:700px){
  #orb{height:min(70svh,52svh)}
  .orbits{width:calc(1.4 * min(96vw, 52svh))}
}

#own-sfx[hidden]{display:none}

/* «Аватар сбоку»: ник и адрес прижаты к левому краю своей колонки (раньше
   адрес центрировался и уезжал вправо), градиент ника по ширине текста, а
   вокруг аватара с кольцом или ореолом визуализатора оставлено место под
   кольцо, иначе оно наезжало на ник. */
.card.lay-side .nm,.card.lay-side .uid{justify-self:start;text-align:left;margin-left:0;margin-right:0}
.card.lay-side.grad-name .nm{width:fit-content;max-width:100%}
.card.lay-side.viz-ring .ava,.card.lay-side.viz-halo .ava{margin:26px}
@media(max-width:420px){
  .card.lay-side .nm,.card.lay-side .uid{justify-self:center;text-align:center}
  .card.lay-side.viz-ring .ava,.card.lay-side.viz-halo .ava{margin:26px auto}
}

/* «Широкая»: общее правило ширины карточки выше (.stage>.card) её перебивало. */
.stage>.card.lay-wide,.stage .hero>.card.lay-wide{width:min(640px,94vw,calc(100vw - 40px))}
/* «Плеер сверху»: раскладка важнее настройки «где стоит проигрыватель»,
   иначе при выбранном «под описанием» плеер оставался внизу. */
.card.lay-player-top .player,.card.lay-player-top .emb,.card.lay-player-top .lyr,
.card.lay-player-top .viz,.card.lay-player-top .pwrap{order:4}
/* Холст кольца визуализатора позиционируется абсолютно. В сетке «Аватар
   сбоку» ему доставалась колонка 1/3, и отсчёт шёл от этой области, а не от
   карточки: кольцо съезжало вправо и вверх. Сбрасываем размещение в сетке. */
.card.lay-side > .avz.avz.avz{grid-column:auto;grid-row:auto}

/* виджет Twitch: идёт стрим — подсветка и красная точка */
.wbox.live{border-color:rgba(145,70,255,.55);background:rgba(145,70,255,.10)}
.wbox.live .wextra{color:#ff5a5f;font-weight:600}
.wbox.live .wico{box-shadow:0 0 0 2px #9146ff}
.wbox[data-kind="twitch"] .wico{color:#9146ff}
.wbox[data-kind="telegram"] .wico{color:#29a9eb}
.wbox[data-kind="vk"] .wico{color:#0077ff}
.wbox[data-kind="twitch"] .wico img,.wbox[data-kind="telegram"] .wico img,.wbox[data-kind="vk"] .wico img{border-radius:inherit}

/* виджет Steam: в игре — зелёная подсветка, в сети — синяя точка */
.wbox[data-kind="steam"] .wico{color:#c7d5e0}
.wbox.ingame{border-color:rgba(144,186,60,.55);background:rgba(144,186,60,.10)}
.wbox.ingame .wextra{color:#a4d007;font-size:12px}
.wbox.ingame .ws{color:#a4d007}
.wbox.online .ws{color:#57cbde}

/* четыре виджета в широкой карточке: две колонки, иначе тексты обрезаются */
.lay-wide .wrow{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* значки: единый цвет и режим без подложки (настройки badgeColor, badgeBg) */
/* цвет у каждого значка задан в style, поэтому единый цвет с !important */
.bdgs.bdg-mono .bdg{--c:var(--bc)!important}
.card.bdg-nobg .bdgs{gap:8px}
.card.bdg-nobg .bdg{width:auto;height:auto;min-width:18px;padding:2px 1px;background:none;box-shadow:none}
.card.bdg-nobg.glow-b .bdg{box-shadow:none;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 70%,transparent))}

/* место на карточке ведёт в Google Карты */
.card a.loc{color:inherit;text-decoration:none;cursor:pointer;transition:opacity .2s}
.card a.loc:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
/* ссылка места — ровно по тексту, а не во всю ширину карточки: иначе наведение ловится по всей строке */
.card a.loc{width:fit-content;max-width:100%;align-self:flex-start}
.card.lay-side > a.loc{justify-self:start}

/* ══════════════ баннер сверху карточки (Премиум) ══════════════
   Полоса 3:1 во всю ширину карточки, аватар наполовину заходит на неё,
   как в профиле Discord. Отступы карточки — тот же clamp, что у .card. */
.card .cbnr{order:0;flex:none;position:relative;overflow:hidden;aspect-ratio:3/1;
  margin:calc(-1 * clamp(22px,4vw,34px)) calc(-1 * clamp(22px,4vw,34px)) 0;border-radius:21px 21px 0 0;
  background:color-mix(in srgb,var(--accent) 18%,#0b0b0f)}
.card .cbnr img,.card .cbnr video{display:block;width:100%;height:100%;object-fit:cover}
.card .cbnr::after{content:"";position:absolute;inset:auto 0 0;height:40%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(10,10,14,.35))}
.card.has-bnr .ava{position:relative;z-index:1;margin-top:-52px;
  outline:5px solid rgba(12,12,16,.9);outline-offset:0}
.card.has-bnr .ava.deco-wrap{outline:none}
/* «Аватар сбоку»: полоса над всем, аватар под ней без наезда */
.card.lay-side.has-bnr > .cbnr{grid-column:1/-1;grid-row:1;margin-bottom:6px}
.card.lay-side.has-bnr > .ava{grid-row:2/4;margin-top:0;outline:none}
.card.lay-side.has-bnr > .nm{grid-row:2}
.card.lay-side.has-bnr > .uid{grid-row:3}
@media(max-width:420px){
  .card.lay-side.has-bnr > .ava{grid-row:2;margin-top:-40px;outline:4px solid rgba(12,12,16,.9)}
  .card.lay-side.has-bnr > .nm{grid-row:3}
  .card.lay-side.has-bnr > .uid{grid-row:4}
}
/* «Без подложки»: баннер отдельной скруглённой полосой, без рамки карточки */
.card.lay-bare .cbnr{margin:0 0 4px;border-radius:16px}
.card.lay-bare.has-bnr .ava{outline:none;margin-top:-44px}
/* «Широкая»: полоса ниже, чтобы не занимала полэкрана */
.card.lay-wide .cbnr{aspect-ratio:4/1}

/* главная, тариф «Расширенное»: остальные возможности раскрываются по нажатию */
.plan ul{margin-bottom:0}
.plan .plan-more{margin:-4px 0 auto}
.plan .plan-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;color:#F5A524;padding-left:18px;user-select:none}
.plan .plan-more summary::-webkit-details-marker{display:none}
.plan .plan-more summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.plan .plan-more[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.plan .plan-more .c,.plan .plan-more[open] .o{display:none}
.plan .plan-more[open] .c{display:inline}
.plan .plan-more ul{margin-top:12px}

/* заставка-загрузчик: пока всё качается — проценты и полоска, потом приглашение войти */
.enter .enter-go{display:none}
.enter.ready .enter-go{display:block;animation:enterIn .5s ease both}
.enter .enter-wait{display:flex;align-items:baseline;justify-content:center;gap:10px;opacity:.85}
.enter.ready .enter-wait{display:none}
.enter .enter-pct{font-style:normal;font-family:var(--mono);font-size:.55em;opacity:.7;min-width:3.2em;text-align:left}
.enter .enter-load{display:block;width:min(240px,56vw);height:2px;margin:4px auto 0;border-radius:2px;
  background:rgba(255,255,255,.12);overflow:hidden;transition:opacity .4s}
.enter .enter-load i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent,#F5A524);transition:width .2s ease}
.enter.ready .enter-load{opacity:0}
@keyframes enterIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* заставка v2: тонкое кольцо прогресса вокруг знака и мелкая подпись вместо
   крупного слова и полоски (прежние правила enter-wait/enter-load перекрыты) */
.enter .enter-load{display:none}
.enter .enter-ring{position:relative;display:grid;place-items:center;width:92px;height:92px;margin:0 auto 2px}
.enter .enter-ring svg.ering{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);transition:opacity .6s ease}
.enter .enter-ring circle{fill:none;stroke-width:1.6}
.enter .enter-ring .tr{stroke:rgba(255,255,255,.08)}
.enter .enter-ring .pr{stroke:var(--accent,#F5A524);stroke-linecap:round;stroke-dasharray:100;
  stroke-dashoffset:calc(100 - var(--p,0) * 100);transition:stroke-dashoffset .3s ease;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent,#F5A524) 60%,transparent))}
.enter.ready .enter-ring svg.ering{opacity:0}
.enter .enter-ring .enter-mark{display:block;line-height:0}
.enter .enter-ring .enter-mark .mark{width:42px;height:42px;margin:0}
.enter .enter-ring .enter-logo{max-width:56px;max-height:56px;margin:0}
.enter:not(.ready) .enter-ring .enter-mark,.enter:not(.ready) .enter-ring .enter-logo{animation:enterPulse 1.6s ease-in-out infinite}
@keyframes enterPulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}
.enter .enter-wait{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.42);opacity:1;margin-top:2px}
.enter .enter-wait .enter-pct{display:inline;font:inherit;font-size:inherit;min-width:0;opacity:1;color:rgba(255,255,255,.75);letter-spacing:.08em}
.enter.ready .enter-wait{display:none}
@media(prefers-reduced-motion:reduce){.enter .enter-ring .enter-mark,.enter .enter-ring .enter-logo{animation:none}}

/* нижняя строка выключена: плавающая кнопка QR нужна и на телефоне */
@media(max-width:700px){body.nofoot .qr-fab{display:grid}}
/* Нижняя панель Safari наезжает на содержимое, поэтому на телефоне снизу
   добавлено место — к полоске дома ещё немного воздуха. */
@media(max-width:700px){
  .stage{padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
  .stage.long .hero{padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
  .stage.long .blocks,.stage.long .card{padding-bottom:0}
}

/* кнопка «Сохранить контакт» в окне QR: ссылка, а не кнопка, поэтому
   правила .qr-acts button её не касались */
.qr-acts a{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 12px;border-radius:12px;
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.qr-acts a svg{width:15px;height:15px;flex:none}
#qr-vcf{flex:1 1 100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#EAE4D6}
#qr-vcf:hover{background:rgba(255,255,255,.09)}

#qr-ios,#qr-gw{flex:1 1 100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#EAE4D6}
#qr-ios:hover,#qr-gw:hover{background:rgba(255,255,255,.09)}

/* страница записи метки (/w/КОД) */
.wnote{max-width:420px}
.wnote h2{margin:2px 0 0}
.wnote .lead b{color:var(--accent,#F5A524);font-weight:600}
.w-url{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.w-url code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:13px;color:#EAE4D6}
.w-url .ibtn{flex:none;padding:6px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:#EAE4D6;font:inherit;font-size:12.5px;cursor:pointer}
.w-url .ibtn:hover{background:rgba(255,255,255,.09)}
.w-state{min-height:18px;margin:0;font-size:13px;color:rgba(255,255,255,.7)}
.wnote.done .w-state{color:var(--accent,#F5A524)}
.w-hint{margin:0;font-size:13px;color:rgba(255,255,255,.6)}
.w-ios{width:100%;text-align:left}
.w-ios summary{cursor:pointer;font-size:13.5px;color:rgba(255,255,255,.72);padding:6px 0}
.w-ios ol{margin:6px 0 0;padding-left:20px;display:grid;gap:5px;font-size:13px;color:rgba(255,255,255,.66);line-height:1.5}
/* своё display у кнопки сильнее браузерного [hidden]: прячем явно, иначе
   «Записать на метку» висит и там, где записывать нечем */
.wnote .btn[hidden],.wnote .w-hint[hidden],.wnote .w-url[hidden]{display:none}

/* ══ виджеты YouTube, Roblox, Last.fm, stats.fm (wxmore.js, 29.09.2026) ══
   Блок переносится на строки: сверху как у всех, ниже последний ролик и
   строка с подписью и кнопкой на профиль. */
.wbox.wx2{flex-wrap:wrap;row-gap:9px}
.wbox.wx2 .wfoot{flex:0 0 100%;display:flex;align-items:center;gap:8px;min-width:0}
.wbox.wx2 .wmeta{flex:1;min-width:0;font-size:11px;color:rgba(255,255,255,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbox.wx2 .wgo{flex:none;font-size:11.5px;font-weight:500;line-height:1;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:inherit;text-decoration:none;
  transition:background .2s,border-color .2s}
.wbox.wx2 .wgo:hover,.wbox.wx2 .wgo:focus-visible{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.wbox.wx2 .wgo[hidden]{display:none}
.wbox.wx2 .wvid{flex:0 0 100%;display:flex;align-items:center;gap:10px;min-width:0;padding:6px;
  border-radius:9px;background:rgba(255,255,255,.05);color:inherit;text-decoration:none;transition:background .2s}
.wbox.wx2 .wvid:hover{background:rgba(255,255,255,.1)}
.wbox.wx2 .wth{flex:none;width:96px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.08)}
.wbox.wx2 .wth img{width:100%;height:100%;object-fit:cover;display:block}
.wbox.wx2 .wvt{flex:1;min-width:0;display:grid;gap:2px}
.wbox.wx2 .wvt b{font-size:12.5px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.wbox.wx2 .wvt i{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbox[data-kind="youtube"] .wico{color:#ff3040}
.wbox[data-kind="roblox"] .wico{color:#e8e8e8}
.wbox[data-kind="lastfm"] .wico{color:#e0242b}
.wbox[data-kind="statsfm"] .wico{color:#1ed760}
.wbox.wx2 .wico img{border-radius:inherit}
.wbox.wx2.playing .wextra{color:#1ed760}
.wbox[data-kind="lastfm"].playing .wextra{color:#ff4d55}
[dir="rtl"] .wbox.wx2 .wvid,[dir="rtl"] .wbox.wx2 .wfoot{text-align:right}

/* ─── ссылки-копии и окно кошелька (links_x.js, public/links.js) ───
   Копия рисуется кнопкой, а не ссылкой: значение не должно становиться
   переходом. Браузерное оформление кнопки снимаем, остальное берётся у .lnk,
   поэтому копия в ряду ничем не отличается от обычной ссылки. */
button.lnk{cursor:pointer;margin:0;line-height:inherit;font-weight:inherit;letter-spacing:inherit;
  text-transform:inherit;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.lx-tip{position:fixed;z-index:120;left:0;top:0;padding:6px 10px;border-radius:8px;pointer-events:none;
  background:var(--accent,#F5A524);color:var(--on-accent,#141311);font:500 12px/1.2 var(--ui,system-ui);
  opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;white-space:nowrap}
.lx-tip.on{opacity:1;transform:none}
.lx-tip.bad{background:#b3261e;color:#fff}
.lx-pop{position:fixed;z-index:119;left:0;top:0;width:min(280px,calc(100vw - 16px));display:grid;gap:10px;
  padding:12px;border-radius:14px;background:var(--bg,#141311);color:var(--ink2,#fff);
  border:1px solid color-mix(in srgb,var(--ink2,#fff) 18%,transparent);font-family:var(--ui,system-ui)}
.lx-ph{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lx-ph b{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.lx-x{width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.7}
.lx-x:hover{opacity:1}
.lx-qr{justify-self:center;width:176px;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#fff}
.lx-qr:empty{display:none}
.lx-qr svg{display:block;width:100%;height:100%}
.lx-addr{display:block;font-family:var(--mono,monospace);font-size:11.5px;line-height:1.45;word-break:break-all;
  padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--ink2,#fff) 7%,transparent);user-select:all}
.lx-cp{padding:9px 12px;border-radius:9px;border:0;cursor:pointer;background:var(--accent,#F5A524);color:var(--on-accent,#141311);
  font:600 12.5px/1 var(--ui,system-ui)}
@media(prefers-reduced-motion:reduce){.lx-tip{transition:none}}

/* ══ часы: стрелочный циферблат и строка для посетителя (wxmore.js, 29.09.2026) ══ */
.wbox.wclock .wfoot .wmeta{font-size:10.5px}
.wbox.wclock.analog .wico{width:58px;height:58px;border-radius:50%;background:none;padding:0}
.wbox.wclock.analog .cface{width:100%;height:100%;display:block;overflow:visible}
.wbox.wclock.analog .wt{font-variant-numeric:normal}
.wbox.wclock.analog .ws{font-variant-numeric:tabular-nums}
.cface .cf-bg{stroke-width:1.2}
.cface .cf-tk{stroke-width:1.4;stroke-linecap:round}
.cface .cf-tk.big{stroke-width:2.6}
.cface .cf-h{stroke-width:4.2;stroke-linecap:round}
.cface .cf-m{stroke-width:2.8;stroke-linecap:round}
.cface .cf-s{stroke-width:1.1;stroke-linecap:round;stroke:var(--accent)}
.cface .cf-c{fill:var(--accent)}
.face-dark .cface .cf-bg{fill:#121212;stroke:rgba(255,255,255,.14)}
.face-dark .cface .cf-tk{stroke:rgba(255,255,255,.45)}
.face-dark .cface .cf-tk.big{stroke:rgba(255,255,255,.85)}
.face-dark .cface .cf-h,.face-dark .cface .cf-m{stroke:#f2f2f2}
.face-light .cface .cf-bg{fill:#f4f3ef;stroke:rgba(0,0,0,.12)}
.face-light .cface .cf-tk{stroke:rgba(0,0,0,.4)}
.face-light .cface .cf-tk.big{stroke:rgba(0,0,0,.8)}
.face-light .cface .cf-h,.face-light .cface .cf-m{stroke:#161616}

/* ══ ссылки-кнопки, окна перехода и 18+, обложка дорожки (links_x2.js, public/lx2.js, 29.09.2026) ══
   Кнопки: во всю ширину карточки, одна под другой, значок слева, название
   посередине и строка под ним. Средняя колонка в сетке окружена двумя
   равными, поэтому название стоит ровно по центру кнопки, а не по центру
   того, что осталось справа от значка. Скругление приходит от карточки (--lbr). */
.card .links.lx-btns{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px}
.card .links.lx-btns .lnk{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;align-content:center;column-gap:12px;
  width:100%;min-height:50px;padding:10px 14px;border-radius:var(--lbr,12px);text-align:center;
  font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:0;line-height:1.25;
  background:color-mix(in srgb,var(--ink2,#fff) 6%,transparent);border-color:color-mix(in srgb,var(--ink2,#fff) 16%,transparent)}
.card .links.lx-btns .lnk > svg,.card .links.lx-btns .lnk > .li-own{grid-column:1;grid-row:1/3;justify-self:center}
.card .links.lx-btns .lnk > span:not(.fct){display:block;grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .links.lx-btns .lnk .lsub{display:block;grid-column:2;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-style:normal;font-weight:400;font-size:11px;opacity:.62;margin-top:2px}
.card .links.lx-btns .lnk .fct{grid-column:3;grid-row:1/3;margin:0}
/* без строки под названием название встаёт по середине высоты кнопки */
.card .links.lx-btns .lnk:not(:has(.lsub)) > span:not(.fct){grid-row:1/3}
.card .links.lx-btns .lnk:hover{transform:translateY(-1px)}
.card .links.lx-btns.lx-a-left .lnk{text-align:start}
.card .links.lx-btns.lx-a-right .lnk{text-align:end}
/* «только иконки» к кнопкам не относится: у кнопки подпись и есть её смысл */
.card.lnk-bare .links.lx-btns .lnk{padding:10px 14px;border-radius:var(--lbr,12px)}
.card.lnk-bare .links.lx-btns .lnk > span:not(.fct){display:block}
.lnk .lsub{display:none}
.card .links.lx-btns .lnk .lsub{display:block}

/* окно «вы уходите» и окно 18+: в цветах самой страницы, как окно кошелька */
.lx2-dlg{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px;
  background:rgba(0,0,0,.55);animation:lx2in .16s ease-out}
.lx2-box{width:min(360px,100%);display:grid;gap:12px;padding:20px;border-radius:14px;text-align:start;
  background:var(--bg,#141311);color:var(--ink2,#fff);font-family:var(--ui,system-ui);
  border:1px solid color-mix(in srgb,var(--ink2,#fff) 18%,transparent)}
.lx2-18{justify-self:start;direction:ltr;unicode-bidi:isolate;padding:3px 8px;border-radius:6px;font:700 12px/1 var(--mono,monospace);letter-spacing:.04em;
  color:#fff;background:#b3261e}
.lx2-h{font-size:16px;font-weight:600;line-height:1.3}
.lx2-p{margin:0;font-size:13.5px;line-height:1.5;opacity:.85;overflow-wrap:anywhere}
.lx2-dom{font-family:var(--mono,monospace);font-size:13px;font-weight:600;color:var(--accent,#F5A524);unicode-bidi:isolate}
.lx2-note{margin:0;font-size:12.5px;line-height:1.5;opacity:.7}
.lx2-act{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.lx2-act button{min-height:38px;padding:9px 14px;border-radius:9px;cursor:pointer;font:600 13px/1 var(--ui,system-ui)}
.lx2-no{border:1px solid color-mix(in srgb,var(--ink2,#fff) 20%,transparent);background:transparent;color:inherit}
.lx2-yes{border:0;background:var(--accent,#F5A524);color:var(--on-accent,#141311)}
.lx2-act button:focus-visible{outline:2px solid var(--accent,#F5A524);outline-offset:2px}
@keyframes lx2in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.lx2-dlg{animation:none}}

/* обложка текущей дорожки в плеере; нет обложки у этой дорожки - плеер как был */
.player .pcov{width:44px;height:44px;flex:none;border-radius:8px;object-fit:cover;display:block;
  background:color-mix(in srgb,var(--ink2,#fff) 8%,transparent)}
.player .pcov[hidden]{display:none}
@media(max-width:380px){.player .pcov{width:38px;height:38px}}

/* ══════════════ ряд виджетов: пары одной высоты (29.09.2026) ══════════════
   Раскладку считает wxmore.js (и сервер заранее): data-full — блок один в
   строке. Так соседи не тянутся до самого высокого и короткий блок не
   превращается в пустую рамку с текстом посередине. */
.wrow > [data-full]{grid-column:1/-1}
/* в паре двухэтажных блоков низ с кнопкой стоит внизу, а не плавает */
.wrow .wbox.wx2[data-sz="2"]{align-content:space-between}

/* ══════════════ телефон: имя не наезжает на аватар и не вылезает за карточку (29.09.2026) ══════════════
   Только узкие экраны, на компьютере всё как было. */
@media(max-width:520px){
  /* Длинное имя без пробелов (ник с цифрами, широкие декоративные шрифты)
     шире карточки: раньше оно выходило за рамку. Переносим внутри слова. */
  .card .nm{overflow-wrap:anywhere}
  .card .uid,.card .bio,.card .loc{overflow-wrap:anywhere}
}
@media(max-width:420px){
  /* «Аватар сбоку» на телефоне идёт столбиком, но имя оставалось в первой
     строке сетки вместе с аватаром и ложилось на него. Даём имени и адресу
     свои строки. Колонка minmax(0,1fr), а не 1fr: иначе длинное слово
     раздувало колонку шире экрана. Остальные блоки на всю ширину (1/-1):
     прежнее 1/3 при одной колонке достраивало невидимую вторую, и центр
     съезжал на полщели вправо. Кольцо визуализатора (.avz) не трогаем: у него своё правило. С баннером свои строки ниже, они сильнее. */
  .card.lay-side{grid-template-columns:minmax(0,1fr)}
  .card.lay-side > .ava{grid-row:1}
  .card.lay-side > .nm{grid-row:2}
  .card.lay-side > .uid{grid-row:3}
  .card.lay-side > *:not(.ava):not(.nm):not(.uid):not(.avz){grid-column:1/-1}
}

/* ══════════════ цвета часов владельца (29.09.2026) ══════════════
   wxmore.js ставит на блок класс ck-* и переменную --ck-*, только если цвет
   выбран. Без них действуют правила тёмного и светлого циферблата выше. */
.wbox.wclock.ck-face .cface .cf-bg{fill:var(--ck-face)}
.wbox.wclock.ck-hand .cface .cf-tk{stroke:color-mix(in srgb,var(--ck-hand) 50%,transparent)}
.wbox.wclock.ck-hand .cface .cf-tk.big,.wbox.wclock.ck-hand .cface .cf-h,.wbox.wclock.ck-hand .cface .cf-m{stroke:var(--ck-hand)}
.wbox.wclock.ck-sec .cface .cf-s{stroke:var(--ck-sec)}
.wbox.wclock.ck-sec .cface .cf-c{fill:var(--ck-sec)}
.wbox.wclock.ck-digit:not(.analog) .wt{color:var(--ck-digit)}