:root {
  /* Colors */
  --color-violet-pulse: #a565ff;
  --color-indigo-ink: #5e5cff;
  --color-lavender-wash: #ebebff;
  --color-iris-glow: #e0c9ff;
  --color-ledger-green: #2e7317;
  --color-paper-white: #ffffff;
  --color-bone: #f7f7f7;
  --color-fog: #f1f1f1;
  --color-silver: #efefef;
  --color-marble: #fff6df;
  --color-graphite: #1d1d20;
  --color-slate: #42424a;
  --color-iron: #505050;
  --color-steel: #757575;
  --color-smoke: #92939e;
  --color-ash: #e5e7eb;
  --color-mist: #d1d9e4;
  --color-olive-gray: #808076;
  --color-noir: #000000;

  /* Typography — Font Families */
  --font-twk-lausanne: 'TWK Lausanne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-moderat-serif: 'Moderat Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-sf-mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.45;
  --tracking-caption: -0.022px;
  --text-body: 14px;
  --leading-body: 1.57;
  --text-body-lg: 16px;
  --leading-body-lg: 1.63;
  --text-subheading: 18px;
  --leading-subheading: 1.56;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.33;
  --tracking-heading-sm: -0.048px;
  --text-heading: 40px;
  --leading-heading: 1;
  --tracking-heading: -1px;
  --text-display: 46px;
  --leading-display: 1;
  --tracking-display: -1.15px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-160: 160px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-cards: 8px;
  --radius-badges: 9999px;
  --radius-inputs: 4px;
  --radius-buttons: 9999px;
  --radius-large-panels: 16px;

  /* Shadows */
  --shadow-subtle: rgba(58, 58, 64, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-2: rgba(29, 29, 32, 0.08) 0px 0px 0px 1px;
  --shadow-subtle-3: rgb(239, 239, 239) 0px 0px 0px 2px, rgba(0, 0, 0, 0.01) 0px 22px 9px 0px, rgba(0, 0, 0, 0.04) 0px 12px 7px 0px, rgba(0, 0, 0, 0.06) 0px 5px 5px 0px, rgba(0, 0, 0, 0.07) 0px 1px 3px 0px;
  --shadow-sm: rgba(99, 102, 241, 0.4) 0px 0px 8px 2px;
  --shadow-subtle-4: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  --shadow-subtle-5: rgba(117, 117, 117, 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-subtle-6: rgba(255, 255, 255, 0.14) 0px 1px 0px 0px inset, rgba(13, 25, 37, 0.08) 0px 1px 1px 0px, rgba(14, 26, 38, 0.05) 0px 0px 0px 1px, rgba(13, 25, 37, 0.05) 0px 2px 3px 0px;
  --shadow-subtle-7: rgba(80, 80, 80, 0.1) 0px 0px 0px 1px;
  --shadow-subtle-8: rgba(29, 29, 32, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-sm-2: rgba(0, 0, 0, 0.04) 0px 4px 6px 0px, rgb(242, 242, 242) 0px 0px 0px 4px, rgba(0, 0, 0, 0.03) 0px 0px 0px 1px;
  --shadow-subtle-9: rgba(29, 29, 32, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-subtle-10: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-subtle-11: rgba(117, 117, 117, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -4px;
  --shadow-subtle-12: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px inset;
  --shadow-subtle-13: rgb(165, 101, 255) 0px 0px 0px 1px;

  /* Surfaces */
  --surface-page-canvas: #ffffff;
  --surface-recessed-surface: #f7f7f7;
  --surface-tinted-surface: #ebebff;
  --surface-warm-accent: #fff6df;
}
/* Смысловые токены SaveBox (стиль Sequence). Палитра — palette.css, не менять. */
:root{
  /* Шрифты: сначала разрешённые (подключать через @font-face из своих файлов), затем запасные с кириллицей */
  --font-sans:'TT Norms Pro','TT Prosto Sans',var(--font-inter,'Inter'),'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-serif:'Crimson Text',var(--font-serif-next,'Source Serif 4'),'Source Serif 4',ui-serif,Georgia,serif;
  --font-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  --bg:var(--color-paper-white);--bg-recessed:var(--color-bone);--bg-tint:var(--color-lavender-wash);--bg-warm:var(--color-marble);
  --text:var(--color-graphite);--text-2:var(--color-iron);--text-muted:var(--color-steel);
  --border:var(--color-ash);--border-strong:var(--color-mist);
  --accent:var(--color-violet-pulse);      /* только главная кнопка экрана и активные значки */
  --on-accent:var(--color-graphite);       /* тёмный текст на violet: контраст 4.7:1 (белый дал бы 3.6) */
  --link:#4340d8;--ok:var(--color-ledger-green);
  --halo:0 0 0 4px rgba(224,201,255,.6);
  --hit:44px;--tabbar-h:64px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141416;--bg-recessed:#1b1b1f;--bg-tint:#26224a;--bg-warm:#2a2518;
  --text:#f2f2f5;--text-2:#c9c9d1;--text-muted:#9a9ba6;--border:#2b2b31;--border-strong:#3a3a42;
  --link:#a9a8ff;--ok:#7fcf63;--shadow-subtle:0 0 0 1px #2b2b31;--shadow-subtle-10:0 0 0 1px #2b2b31;--halo:0 0 0 4px rgba(165,101,255,.25);
}}



*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text-2);font:400 16px/1.6 var(--font-sans)}
a{color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.sb-wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-24)}
.sb-section{padding-top:var(--section-gap)}
/* Типографика: серифный — только .sb-display; всё от 24px — гротеск, вес 300 */
.sb-display{font:300 clamp(38px,6vw,46px)/1 var(--font-serif);letter-spacing:-.025em;color:var(--text);margin:0}
.sb-h1{font:300 40px/1.05 var(--font-sans);letter-spacing:-1px;color:var(--text);margin:0}
.sb-h2{font:300 24px/1.33 var(--font-sans);letter-spacing:-.002em;color:var(--text);margin:0}
.sb-h3{font:500 16px/1.4 var(--font-sans);color:var(--text);margin:0}
.sb-lead{font-size:18px;line-height:1.56;color:var(--text-2);max-width:56ch;margin:0}
.sb-eyebrow{font:500 12px/1.4 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.sb-muted{color:var(--text-muted);font-size:14px}
.sb-link{color:var(--link);font-weight:500;text-decoration:none}
/* Кнопки, теги, меню — пилюли. Violet только у одной главной кнопки на экране */
.sb-btn{min-height:var(--hit);padding:10px 20px;border-radius:var(--radius-buttons);border:1px solid transparent;font:500 14px/1 var(--font-sans);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;transition:background .15s}
.sb-btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--halo)}
.sb-btn--primary:hover{filter:brightness(1.06)}
.sb-btn--ghost{background:var(--bg);color:var(--text);border-color:var(--color-silver);box-shadow:var(--shadow-subtle)}
.sb-btn--ghost:hover{background:var(--bg-recessed)}
.sb-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--radius-badges);background:var(--bg-tint);border:1px solid var(--color-iris-glow);color:var(--text);font:500 12px/1 var(--font-sans)}
.sb-tag--ok{background:var(--bg);border-color:var(--border);color:var(--ok)}
.sb-tag--quiet{background:var(--bg-recessed);border-color:var(--border);color:var(--text-muted)}
.sb-tags{display:flex;flex-wrap:wrap;gap:6px}
/* Шапка сайта */
.sb-nav{border-bottom:1px solid transparent}
.sb-nav__in{display:flex;align-items:center;gap:var(--spacing-24);height:72px}
.sb-brand{display:flex;align-items:center;gap:8px;font:500 20px/1 var(--font-sans);letter-spacing:-.02em;color:var(--text);text-decoration:none}
.sb-brand::before{content:'';width:14px;height:14px;border-radius:5px;border:2px solid var(--text)}
.sb-nav__links{display:flex;gap:4px;margin:0 auto}.sb-nav__in>.sb-btn{margin-left:auto}
.sb-navlink{padding:10px 14px;border-radius:var(--radius-buttons);font:500 14px/1 var(--font-sans);color:var(--text-2);text-decoration:none}
.sb-navlink:hover,.sb-navlink[aria-current]{color:var(--text);background:var(--bg-recessed)}
/* Hero с мягкими фиолетово-синими «облаками» и точечной сеткой */
.sb-hero{position:relative;padding:var(--spacing-96) 0 var(--spacing-80);text-align:center;background:radial-gradient(50% 55% at 12% 100%,rgba(165,101,255,.14),transparent),radial-gradient(45% 55% at 92% 85%,rgba(94,92,255,.10),transparent),radial-gradient(rgba(94,92,255,.18) 1px,transparent 1.4px) 0 0/22px 22px}
.sb-hero>.sb-wrap{display:grid;justify-items:center;gap:var(--spacing-24)}
.sb-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-16);align-items:center;justify-content:center}
.sb-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--radius-badges);background:var(--bg);box-shadow:var(--shadow-subtle);font:500 12px/1 var(--font-sans);color:var(--text-2)}
.sb-chip::before{content:'✓';color:var(--ok);font-weight:700}
/* Карточки и плитки (границы Ash 1px, радиус 8, отступ 24) */
.sb-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-cards);box-shadow:var(--shadow-subtle-10);padding:var(--card-padding);display:grid;gap:var(--spacing-12);align-content:start;color:inherit;text-decoration:none}
.sb-card--tight{padding:var(--spacing-16)}
.sb-card--tint{background:var(--bg-tint);border-color:var(--color-iris-glow)}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-16)}
.sb-grid--3{grid-template-columns:repeat(3,1fr)}
.sb-tile{position:relative;overflow:hidden;background:linear-gradient(135deg,transparent 49.6%,var(--border) 50%,transparent 50.4%) 0 0/48px 48px,var(--bg-recessed)}
.sb-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sb-badge{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg);border:1px solid var(--border);color:var(--color-olive-gray)}
.sb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-16);counter-reset:s}
.sb-steps .sb-card::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);font:500 13px var(--font-sans);color:var(--text)}
.sb-footer{display:flex;flex-wrap:wrap;gap:var(--spacing-24);justify-content:center;padding:var(--spacing-48) 0;font-size:14px;color:var(--text-muted)}
/* Формы (поля 16px — iOS не увеличивает страницу) */
.sb-field{display:grid;gap:6px}
.sb-label{font:500 14px/1.4 var(--font-sans);color:var(--text)}
.sb-input{width:100%;min-height:var(--hit);padding:10px 12px;font:400 16px/1.4 var(--font-sans);color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-inputs)}
.sb-input::placeholder{color:var(--text-muted)}
.sb-input:focus{border-color:var(--text);box-shadow:var(--halo);outline:none}
.sb-hint{font-size:14px;color:var(--text-2)}
.sb-or{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:14px}.sb-or::before,.sb-or::after{content:'';flex:1;height:1px;background:var(--border)}
.sb-seg{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;background:var(--bg-recessed);border:1px solid var(--border);border-radius:var(--radius-buttons)}
.sb-seg button{min-height:36px;padding:0 16px;border:0;border-radius:var(--radius-buttons);background:transparent;color:var(--text-2);font:500 14px var(--font-sans);cursor:pointer}
.sb-seg [aria-selected=true]{background:var(--bg);color:var(--text);box-shadow:var(--shadow-subtle)}
/* Вход: форма слева, превью справа */
.sb-auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;background:radial-gradient(50% 50% at 15% 10%,rgba(165,101,255,.12),transparent),radial-gradient(40% 50% at 95% 40%,rgba(94,92,255,.10),transparent)}
.sb-auth__form{display:grid;align-content:center;justify-items:center;gap:var(--spacing-24);padding:var(--spacing-48) var(--spacing-24)}
.sb-auth__card{width:100%;max-width:420px;padding:0;overflow:hidden}
.sb-auth__card>header{padding:var(--spacing-24);border-bottom:1px solid var(--border);text-align:center;background:var(--bg)}
.sb-auth__card>div{padding:var(--spacing-24);display:grid;gap:var(--spacing-16);background:var(--bg-recessed)}
.sb-auth__side{position:relative;display:grid;align-content:center;padding:var(--spacing-48);border-left:1px solid var(--border);background:radial-gradient(rgba(94,92,255,.14) 1px,transparent 1.4px) 0 0/22px 22px}
.sb-toast{display:flex;align-items:center;gap:10px;margin-top:var(--spacing-24);padding:var(--spacing-12) var(--spacing-16);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-cards);box-shadow:var(--shadow-subtle);font-size:14px;color:var(--text)}
.sb-toast::before{content:'✓';color:var(--ok);font-weight:700}
/* Приложение: боковое меню + рабочая область (на телефоне — нижняя панель) */
.sb-app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.sb-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--spacing-4);padding:var(--spacing-16);background:var(--bg-recessed);border-right:1px solid var(--border)}
.sb-side .sb-brand{padding:var(--spacing-8) var(--spacing-12) var(--spacing-16)}
.sb-side a.sb-navlink{display:flex;align-items:center;gap:10px;min-height:var(--hit)}
.sb-side a[aria-current] .sb-icon{color:var(--accent)}
.sb-side a[aria-current]{background:var(--bg-tint);border:1px solid var(--color-iris-glow)}
.sb-main{padding:var(--spacing-32) var(--spacing-32) var(--spacing-64);display:grid;gap:var(--spacing-24);align-content:start}
.sb-bar{display:flex;flex-wrap:wrap;gap:var(--spacing-12);align-items:center}
.sb-bar .sb-input{flex:1;min-width:200px;max-width:360px}
.sb-list{display:grid;gap:var(--spacing-12);margin:0;padding:0;list-style:none}
.sb-row{display:flex;gap:var(--spacing-16);align-items:center}
.sb-row__body{flex:1;min-width:0;display:grid;gap:4px}
.sb-row__meta{font-size:12px;color:var(--text-muted)}
.sb-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.sb-status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--border-strong)}
.sb-status--pending::before{animation:sb-pulse 1.4s ease-in-out infinite}
@keyframes sb-pulse{50%{opacity:.25}}
.sb-meter{height:6px;border-radius:9999px;background:var(--border);overflow:hidden}.sb-meter>i{display:block;height:100%;width:8%;background:var(--text)}
.sb-table{width:100%;border-collapse:collapse;font-size:14px}
.sb-table th{text-align:left;font-weight:500;color:var(--text-muted);padding:10px 16px;border-bottom:1px solid var(--border)}
.sb-table td{padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text)}.sb-table tr:nth-child(even) td{background:var(--bg-recessed)}
.sb-banner{display:flex;gap:var(--spacing-12);align-items:center;justify-content:space-between;padding:var(--spacing-12) var(--spacing-16);background:var(--bg-warm);border-radius:var(--radius-cards);font-size:14px;color:var(--text)}
.sb-skeleton{border-radius:var(--radius-cards);min-height:76px;background:linear-gradient(90deg,var(--bg-recessed),var(--border),var(--bg-recessed));background-size:200% 100%;animation:sb-shimmer 1.6s linear infinite}
@keyframes sb-shimmer{to{background-position:-200% 0}}
.sb-tabbar{display:none}
/* Документация (раздел для админа) */
.sb-docs{display:grid;grid-template-columns:240px minmax(0,1fr) 200px;min-height:70vh}
.sb-docs aside{padding:var(--spacing-24) var(--spacing-16);border-right:1px solid var(--border);display:grid;gap:2px;align-content:start}
.sb-docs article{padding:var(--spacing-32) var(--spacing-48);display:grid;gap:var(--spacing-16);align-content:start;max-width:820px}
.sb-docs .toc{padding:var(--spacing-32) var(--spacing-16);font-size:14px;display:grid;gap:8px;align-content:start}
.sb-tabs{display:flex;gap:var(--spacing-24);border-bottom:1px solid var(--border)}.sb-tabs a{padding:12px 0;font:500 14px var(--font-sans);color:var(--text-2);text-decoration:none}.sb-tabs [aria-current]{color:var(--text);box-shadow:0 2px 0 var(--accent)}
.sb-code{margin:0;padding:var(--spacing-16);background:var(--bg-recessed);border:1px solid var(--border);border-radius:var(--radius-cards);font:400 13px/1.7 var(--font-mono);color:var(--text);overflow-x:auto}
@media (max-width:900px){
  .sb-nav__links,.sb-side,.sb-docs aside,.sb-docs .toc,.sb-auth__side{display:none}
  .sb-app,.sb-docs,.sb-auth{grid-template-columns:1fr}.sb-main{padding:var(--spacing-24) var(--spacing-16) calc(var(--tabbar-h) + 32px)}
  .sb-grid--3,.sb-steps{grid-template-columns:1fr}.sb-docs article{padding:var(--spacing-24) var(--spacing-16)}
  .sb-hero{padding:var(--spacing-64) 0}.sb-section{padding-top:var(--spacing-48)}.sb-h1{font-size:32px}
  .sb-tabbar{position:fixed;inset:auto 0 0 0;display:grid;grid-template-columns:repeat(4,1fr);min-height:var(--tabbar-h);padding-bottom:env(safe-area-inset-bottom);background:var(--bg);border-top:1px solid var(--border);z-index:5}
  .sb-tabbar a{display:grid;place-items:center;align-content:center;gap:2px;min-height:var(--hit);font:500 11px/1.2 var(--font-sans);color:var(--text-muted);text-decoration:none}
  .sb-tabbar a[aria-current]{color:var(--text)}.sb-tabbar a[aria-current] .sb-icon{color:var(--accent)}
  .sb-table .hide-m{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== v3: фото, анимации, компоненты 16 и 18 ===== */
.sb-ico{display:block;object-fit:contain}
.sb-icotile{display:grid;place-items:center;height:132px;border-radius:var(--radius-cards);background:var(--bg-tint)}
.sb-icotile img{height:96px}
.sb-hero--bg{background:linear-gradient(180deg,rgba(255,255,255,.35),#fff 96%),url(/static/img/sb/b38c9018.webp) center/cover;overflow:hidden;isolation:isolate}
.sb-hero--bg>.sb-wrap{position:relative;z-index:2}
/* Компонент 16: точечная сетка + плывущие размытые пятна (только цвета системы) */
.sb-dots{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.sb-dots::after{content:'';position:absolute;inset:0;background:radial-gradient(rgba(29,29,32,.28) 1px,transparent 1.7px) 0 0/10px 10px;-webkit-mask:linear-gradient(105deg,transparent 25%,#000 50%,transparent 75%) 0 0/300% 100%;mask:linear-gradient(105deg,transparent 25%,#000 50%,transparent 75%) 0 0/300% 100%;animation:sb-sweep 10s linear infinite}
.sb-blob{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(80px);opacity:.28;animation:sb-drift 16s ease-in-out infinite alternate}
.sb-blob--a{left:-8%;bottom:-30%;background:var(--color-violet-pulse)}
.sb-blob--b{right:-6%;bottom:-20%;background:var(--color-indigo-ink);animation-delay:-8s}
@keyframes sb-sweep{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:-100% 0;mask-position:-100% 0}}
@keyframes sb-drift{to{transform:translate(60px,-40px) scale(1.15)}}
.sb-float{position:absolute;z-index:2;animation:sb-bob 5s ease-in-out infinite}
.sb-float--l{left:12%;bottom:14%}.sb-float--r{right:12%;bottom:22%;animation-delay:-2.5s}
@keyframes sb-bob{50%{transform:translateY(-10px)}}
.sb-marquee{overflow:hidden;padding:var(--spacing-24) 0;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.sb-marquee__in{display:flex;gap:12px;width:max-content;animation:sb-m 32s linear infinite}
@keyframes sb-m{to{transform:translateX(-50%)}}
/* Компонент 18: 3D-карусель карточек */
.sb-ring{position:relative;height:400px;perspective:1500px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sb-ring__in{--w:150px;--h:200px;--z:250px;position:absolute;top:80px;left:calc(50% - var(--w)/2);width:var(--w);height:var(--h);transform-style:preserve-3d;animation:sb-rot 30s linear infinite}
.sb-ring:hover .sb-ring__in{animation-play-state:paused}
@keyframes sb-rot{from{transform:rotateX(-12deg) rotateY(0)}to{transform:rotateX(-12deg) rotateY(1turn)}}
.sb-ring__c{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-cards);box-shadow:var(--shadow-subtle);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(calc(360deg / var(--q) * var(--i))) translateZ(var(--z))}
.sb-ring__c img{height:84px}
.sb-ring__c span{font:500 14px var(--font-sans);color:var(--text)}
/* Появление при прокрутке */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}
a.sb-card{transition:transform .2s ease,box-shadow .2s ease}a.sb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-subtle-9)}
@keyframes sb-pg{from{opacity:0;transform:translateY(8px)}}
.sb-photo{border-radius:var(--radius-cards);box-shadow:var(--shadow-subtle-9);width:100%;display:block}
.sb-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-48);align-items:center}
.sb-banner-img{position:relative;display:grid;place-items:center;min-height:260px;border-radius:var(--radius-cards);border:1px solid var(--border);box-shadow:var(--shadow-subtle-10);background:var(--bg-tint) center/cover no-repeat;overflow:hidden}
.sb-values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-16)}
.sb-values .sb-card{background:linear-gradient(135deg,transparent 49.7%,var(--border) 50%,transparent 50.3%) 0 0/56px 56px,var(--bg-recessed);gap:var(--spacing-8)}
.sb-values .sb-card img{height:110px;margin:0 auto 12px}
.sb-values__title{display:grid;align-content:center;gap:8px;padding-right:var(--spacing-24)}
.sb-drop{display:grid;justify-items:center;gap:12px;padding:var(--spacing-48) var(--spacing-24);text-align:center;border:1px dashed var(--border-strong);border-radius:var(--radius-cards);background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.9)),url(/static/img/sb/85483bb5.webp) center/cover}
.sb-mini{display:grid;grid-template-columns:96px 1fr;border:1px solid var(--border);border-radius:var(--radius-cards);background:var(--bg);box-shadow:var(--shadow-subtle-9);overflow:hidden;max-width:520px}
.sb-mini aside{padding:12px;background:var(--bg-recessed);border-right:1px solid var(--border);display:grid;gap:6px;align-content:start;font-size:12px}
.sb-mini aside b{padding:6px 8px;border-radius:9999px;background:var(--bg-tint);color:var(--text);font-weight:500}.sb-mini aside span{padding:6px 8px}
.sb-mini div{padding:16px;display:grid;gap:8px}
.sb-toast{max-width:380px;animation:sb-toast .6s .8s both}@keyframes sb-toast{from{opacity:0;transform:translateY(16px)}}
.sb-steps--dots{display:flex;gap:6px}.sb-steps--dots i{width:28px;height:4px;border-radius:9999px;background:var(--border)}.sb-steps--dots i:first-child{background:var(--text)}
@media (max-width:900px){.sb-row{flex-wrap:wrap}.sb-split{grid-template-columns:1fr;gap:var(--spacing-24)}.sb-values{grid-template-columns:1fr 1fr}.sb-values__title{grid-column:1/-1}.sb-float{display:none}.sb-ring{height:330px}.sb-ring__in{--w:130px;--h:176px;--z:210px;top:70px}}
@media (max-width:560px){.sb-values{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.sb-ring__in,.sb-marquee__in,.sb-dots::after,.sb-blob,.sb-float{animation:none!important}}


/* ===== v4: вход, онбоардинг, продукт, общий доступ по референсам ===== */
.sb-display em{font-style:italic;font-weight:300}
.sb-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 14px;border-radius:var(--radius-badges);background:var(--bg);box-shadow:var(--shadow-subtle);font:500 13px var(--font-sans);color:var(--text)}
/* Вход: рамка с двумя панелями */
.sb-stage{min-height:100vh;display:grid;place-items:center;padding:var(--spacing-24);background:var(--bg-recessed)}
.sb-frame{width:min(1100px,100%);min-height:620px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--spacing-16);padding:var(--spacing-16);background:var(--bg);border-radius:var(--radius-large-panels);box-shadow:var(--shadow-subtle-9)}
.sb-frame__form{display:grid;align-content:center;gap:var(--spacing-24);padding:var(--spacing-32) clamp(24px,6vw,72px);position:relative}
.sb-frame__form .sb-btn{width:100%}
.sb-frame__foot{position:absolute;left:var(--spacing-24);right:var(--spacing-24);bottom:var(--spacing-8);display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}
.sb-art{position:relative;overflow:hidden;border-radius:12px;background:var(--bg-recessed) center/cover no-repeat;display:grid;place-items:center;min-height:420px}
.sb-art>.orb{width:min(70%,340px);animation:sb-bob 7s ease-in-out infinite}
.sb-glass{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);border-radius:16px;box-shadow:0 0 0 1px rgba(29,29,32,.05)}
.sb-art .sb-glass{position:absolute;left:16px;right:16px;bottom:16px;padding:16px;display:grid;gap:8px;max-width:360px}
.sb-art .sb-glass.sb-toast{animation:sb-toast .6s .6s both}
/* Телефон (онбоардинг) */
.sb-phones{display:flex;flex-wrap:wrap;gap:var(--spacing-32);justify-content:center;align-items:flex-start}
.sb-phone{position:relative;width:300px;height:620px;padding:56px 18px 18px;display:flex;flex-direction:column;gap:12px;border-radius:40px;border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-subtle-9),0 0 0 1px var(--border);background:radial-gradient(70% 40% at 50% 100%,rgba(165,101,255,.12),transparent),linear-gradient(180deg,#f3f1ff,#fff 70%);overflow:hidden}
.sb-phone::before{content:'';position:absolute;top:12px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:9999px;background:var(--text)}
.sb-phone .time{position:absolute;top:16px;left:26px;font:600 13px var(--font-sans);color:var(--text)}
.sb-phone .sb-display{font-size:40px;line-height:1.02;margin-top:auto}
.sb-phone .sb-display span{display:block;color:var(--text-muted)}
.sb-chips{display:flex;gap:8px;overflow:hidden;margin-top:auto}
.sb-chips span{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:9999px;background:var(--bg-tint);border:1px solid var(--color-iris-glow);font:500 13px var(--font-sans);color:var(--text)}
.sb-field-bar{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px 0 8px;border-radius:9999px;background:var(--bg);box-shadow:var(--shadow-subtle);font-size:14px;color:var(--text-muted)}
.sb-field-bar i{flex:none;width:34px;height:34px;border-radius:50%;background:url(/static/img/sb/4f48e980.webp) center/190% no-repeat,var(--bg-tint)}
.sb-field-bar .caret{display:inline-block;width:1px;height:16px;background:var(--text);vertical-align:middle;animation:sb-blink 1s steps(1) infinite}
@keyframes sb-blink{50%{opacity:0}}
.sb-phone .core{position:relative;margin:auto;width:176px;height:176px;display:grid;place-items:center}
.sb-phone .core img{width:176px;animation:sb-pulse2 3.2s ease-in-out infinite}
.sb-phone .core::before,.sb-phone .core::after{content:'';position:absolute;inset:-14px;border-radius:50%;border:1px solid var(--color-iris-glow);animation:sb-ring 3.2s ease-out infinite}
.sb-phone .core::after{animation-delay:1.6s}
@keyframes sb-pulse2{50%{transform:scale(1.06)}}@keyframes sb-ring{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.5)}}
.sb-result{display:grid;gap:6px;padding:14px;border-radius:12px;background:var(--bg);box-shadow:var(--shadow-subtle)}
.sb-cap{display:grid;justify-items:center;gap:4px;margin-bottom:12px;text-align:center}
/* Продукт: шаги 01–03, хаб источников, bento */
.sb-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spacing-48);align-items:center}
.sb-how__art{position:relative;display:grid;place-items:center;min-height:460px;border-radius:var(--radius-large-panels);background:linear-gradient(180deg,rgba(255,255,255,.2),#f5f4ff) ,url(/static/img/sb/650bf8b9.webp) center/cover;overflow:hidden;border:1px solid var(--border)}
.sb-how__art>img{width:min(86%,430px)}
.sb-how__art .sb-glass{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:var(--text);animation:sb-bob 6s ease-in-out infinite}
.sb-how__art .sb-glass:nth-of-type(1){left:6%;top:9%}.sb-how__art .sb-glass:nth-of-type(2){right:5%;top:30%;animation-delay:-3s}
.sb-dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.sb-num{display:grid;grid-template-columns:96px 1fr;gap:var(--spacing-16);align-items:start;padding:var(--spacing-24) 0;border-bottom:1px solid var(--border)}
.sb-num:last-child{border-bottom:0}.sb-num b{font:300 44px/1 var(--font-sans);color:var(--text);letter-spacing:-1px}
.sb-hub{display:grid;grid-template-columns:1fr minmax(260px,420px) 1fr;gap:0;align-items:center;padding:var(--spacing-32) 0;background:radial-gradient(40% 50% at 100% 0,rgba(94,92,255,.1),transparent),radial-gradient(40% 50% at 0 100%,rgba(165,101,255,.1),transparent)}
.sb-hub__col{display:grid;gap:var(--spacing-24)}.sb-hub__col .sb-pill{position:relative;justify-self:end;margin-right:56px}
.sb-hub__col:last-child .sb-pill{justify-self:start;margin:0 0 0 56px}
.sb-hub__col .sb-pill::after{content:'';position:absolute;top:50%;right:-56px;width:56px;height:1px;background:var(--border-strong)}
.sb-hub__col:last-child .sb-pill::after{right:auto;left:-56px}
.sb-hub__mid{text-align:center;display:grid;justify-items:center;gap:12px;padding:var(--spacing-32) var(--spacing-24);border:1px solid var(--border);border-radius:var(--radius-large-panels);background:var(--bg)}
.sb-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--spacing-16)}
.sb-bento>.sb-card{grid-column:span 2;padding:12px 12px 24px;border-radius:16px}.sb-bento>.sb-card:nth-child(-n+2){grid-column:span 3}
.sb-bento__art{display:grid;place-items:center;min-height:200px;border-radius:12px;background:var(--bg-tint) center/cover;overflow:hidden;position:relative}
.sb-bento__art img{max-height:170px;max-width:80%}.sb-bento .sb-h3,.sb-bento .sb-hint{padding:0 12px}.sb-bento .sb-h3{margin-top:8px;font-size:18px}
.sb-minisearch{width:80%;display:grid;gap:8px}.sb-minisearch .sb-input{border-radius:9999px;min-height:40px}.sb-minisearch .sb-glass{padding:10px 14px;font-size:13px;color:var(--text)}
/* Общий доступ: стеклянная панель */
.sb-main--glass{background:var(--bg-recessed) url(/static/img/sb/ef31a17b.webp) center/cover fixed}
.sb-share{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--spacing-16)}
.sb-share .col{display:grid;gap:var(--spacing-16);align-content:start}
.sb-share .sb-glass{padding:var(--spacing-24);display:grid;gap:var(--spacing-16)}
.sb-share .sb-glass header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sb-bubbles{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:12px;align-items:center}
.sb-bubble{display:grid;align-content:center;justify-items:center;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.9);font-size:12px;color:var(--text-2);text-align:center}
.sb-bubble b{font:300 28px/1.1 var(--font-sans);color:var(--text)}
.sb-bubble--main{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),var(--color-iris-glow) 70%);box-shadow:0 0 0 6px rgba(224,201,255,.35)}
.sb-bars{display:flex;gap:10px;align-items:flex-end;height:140px}
.sb-bars div{flex:1;display:grid;justify-items:center;align-content:end;gap:6px;height:100%;font-size:12px;color:var(--text-muted)}
.sb-bars i{display:block;width:100%;border-radius:10px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9)}
.sb-bars .on i{background:linear-gradient(180deg,var(--color-iris-glow),var(--bg-tint));position:relative}
.sb-bars .on i::after{content:'48';position:absolute;top:-30px;left:50%;transform:translateX(-50%);padding:2px 10px;border-radius:9999px;background:var(--text);color:#fff;font-size:12px}
.sb-health{background:linear-gradient(180deg,rgba(235,235,255,.9),rgba(224,201,255,.75))!important}
.sb-health svg{width:100%;height:96px}
.sb-share .sb-linkrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(29,29,32,.08);font-size:14px;color:var(--text)}
.sb-share .sb-linkrow:last-child{border:0}.sb-share .sb-linkrow small{display:block;font-size:12px;color:var(--text-muted)}
.sb-avatars{display:flex;gap:10px}.sb-avatars span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg);box-shadow:var(--shadow-subtle);font:500 13px var(--font-sans);color:var(--text)}
@media (max-width:900px){.sb-frame{grid-template-columns:1fr;min-height:0}.sb-art{min-height:300px;order:-1}.sb-frame__foot{position:static;margin-top:16px}.sb-how,.sb-share{grid-template-columns:1fr}.sb-how__art{min-height:340px}.sb-hub{grid-template-columns:1fr}.sb-hub__col{display:flex;flex-wrap:wrap;gap:8px}.sb-hub__col .sb-pill,.sb-hub__col:last-child .sb-pill{margin:0}.sb-hub__col .sb-pill::after{display:none}.sb-bento{grid-template-columns:1fr}.sb-bento>.sb-card,.sb-bento>.sb-card:nth-child(-n+2){grid-column:auto}.sb-num{grid-template-columns:64px 1fr}.sb-num b{font-size:36px}.sb-stage{padding:0}.sb-frame{border-radius:0;box-shadow:none}.sb-phone{width:100%;max-width:300px}}
@media (prefers-reduced-motion:reduce){.sb-art>.orb,.sb-phone .core img,.sb-phone .core::before,.sb-phone .core::after,.sb-how__art .sb-glass,.sb-field-bar .caret{animation:none!important}}
/* v5: мобильная доработка общего доступа */
.sb-share>*,.sb-share .col>*,.sb-main--glass{min-width:0}.sb-main--glass{overflow-x:hidden}
@media (max-width:900px){.sb-share2{grid-template-columns:1fr!important}.sb-share .sb-linkrow{grid-template-columns:1fr auto}.sb-share .sb-linkrow .sb-tag{display:none}.sb-bubbles{gap:8px}.sb-bubble b{font-size:22px}.sb-bar{flex-wrap:wrap;gap:8px}}
.sb-frame img{max-width:min(70%,280px);height:auto}.sb-frame .sb-wrap{max-width:100%}
.sb-bars div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.sb-bars i{min-height:8px}

/* v6: правки по скриншотам */
.sb-hero--landing{min-height:calc(100vh - 180px);display:grid;align-content:center;padding:var(--spacing-96) 0}
.sb-main--recent{background:linear-gradient(180deg,rgba(255,255,255,.1),var(--bg) 420px),url(/static/img/sb/fd14f313.webp) top center/100% 420px no-repeat;background-color:var(--bg)}
.sb-how__art{background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(246,246,250,.78))!important}
.sb-statswrap{display:grid;gap:16px;padding:16px;border-radius:var(--radius-large-panels);background:var(--bg-recessed) url(/static/img/sb/ef31a17b.webp) center/cover;border:1px solid var(--border)}
.sb-statswrap .sb-bar{padding:8px 8px 0}.sb-statswrap .sb-share>*{min-width:0}
@media (max-width:900px){.sb-statswrap .sb-share2{grid-template-columns:1fr!important}}
.sb-glass>img{max-width:150px;height:auto}

/* v7: правки по скриншотам 3 */
.sb-how__art{background:linear-gradient(180deg,#fbfbff,#f1f2fa)!important}
.sb-main--glass{background:var(--bg-recessed) url(/static/img/sb/ef31a17b.webp) center/cover fixed}
.sb-statswrap{background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)),url(/static/img/sb/e7c2b776.webp) center/cover}
#developers{background:linear-gradient(180deg,#f5f7fc,#fff 520px)}
.sb-devart{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:12px;margin:16px 0}
.sb-stage--bg{background:url(/static/img/sb/9c7e8328.webp) center/cover no-repeat}
.sb-logincard{width:min(440px,100%);display:grid;gap:24px;padding:40px;border-radius:24px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 60px rgba(60,60,110,.12)}
.sb-logincard__foot{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}
.sb-stage--404{background:url(/static/img/sb/67f06f4f.webp) center/cover no-repeat}
.sb-404{width:min(520px,100%);overflow:hidden;border-radius:24px;background:rgba(255,255,255,.9);box-shadow:0 24px 60px rgba(60,60,110,.12);text-align:center}
.sb-404>img{display:block;width:100%;height:auto;max-width:none}
.sb-404__body{display:grid;gap:12px;justify-items:center;padding:8px 32px 40px}
.sb-404__num{font:300 88px/1 var(--font-sans);letter-spacing:-3px;color:var(--text)}
@media (max-width:900px){.sb-stage--bg,.sb-stage--404{padding:16px}.sb-logincard{padding:28px 22px}}

/* v8: новые фоны, картинка разработчика без обрезки */
.sb-main--glass{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(/static/img/sb/ef31a17b.webp) center/cover fixed,var(--bg-recessed)}
.sb-statswrap{background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),url(/static/img/sb/e7c2b776.webp) center/cover}
.sb-devart{width:100%;height:auto;max-height:none;object-fit:contain;aspect-ratio:735/410;border:1px solid var(--border);background:#f3f6fd}