/* Стиль клиентских документов ВИДНО: аудиты, кейсы-раздатки, коммерческие.
   Единый для всех страниц под /p/. Взят с раздатки MYGRIBS и вынесен сюда,
   чтобы следующий документ подключал его строкой, а не копировал заново.

   Подключение:  <link rel="stylesheet" href="/assets/doc.css">
   Специфику конкретного документа держим в <style> прямо на странице,
   но токены и базовые блоки не переопределяем. */

:root{
  --ground:#FAF8F4;
  --panel:#FFFFFF;
  --ink:#191917;
  --muted:#6E6A61;
  --line:#E4DFD4;
  --accent:#1F3F86;
  --accent-soft:#EAEFF9;
  --good:#1D6A48;
  --warn:#8A5B12;
  --bad:#A32036;
  --shadow:0 1px 2px rgba(25,25,23,.04), 0 8px 24px -16px rgba(25,25,23,.18);
  /* вариант B контактного листа, залочен 11.08.2026 (docs/design-lock.md):
     заголовки, числа и подписи тем же серифом, что и текст. Системный гротеск
     читается как «сделано нейросетью», Georgia — как редакционный документ. */
  --display:Georgia,"Iowan Old Style","Times New Roman",serif;
  --body:Georgia,"Iowan Old Style","Times New Roman",serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#131316; --panel:#1B1B20; --ink:#F0EDE7; --muted:#9A958B;
    --line:#2E2E35; --accent:#8FAAE8; --accent-soft:#1E2740;
    --good:#5FBF92; --warn:#D7A245; --bad:#FF7488;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#131316; --panel:#1B1B20; --ink:#F0EDE7; --muted:#9A958B;
  --line:#2E2E35; --accent:#8FAAE8; --accent-soft:#1E2740;
  --good:#5FBF92; --warn:#D7A245; --bad:#FF7488;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --ground:#FAF8F4; --panel:#FFFFFF; --ink:#191917; --muted:#6E6A61;
  --line:#E4DFD4; --accent:#1F3F86; --accent-soft:#EAEFF9;
  --good:#1D6A48; --warn:#8A5B12; --bad:#A32036;
  --shadow:0 1px 2px rgba(25,25,23,.04), 0 8px 24px -16px rgba(25,25,23,.18);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px; margin:0 auto; padding:0 24px}
/* Заголовки серифом (вариант B), а всё числовое — гротеском: у Georgia минускульные
   цифры, они скачут по высоте и в колонке чисел читаются рвано. */
h1,h2,h3,.label,.btn{font-family:var(--display)}
.num,th,td.n,.pill,.stat b,.stat span{font-family:var(--ui); font-variant-numeric:lining-nums tabular-nums}
h1{font-size:clamp(30px,4.6vw,46px); line-height:1.08; letter-spacing:-.022em; font-weight:750; margin:0; text-wrap:balance}
h2{font-size:clamp(21px,2.6vw,27px); line-height:1.2; letter-spacing:-.015em; font-weight:700; margin:0 0 6px; text-wrap:balance}
h3{font-size:17px; letter-spacing:-.005em; font-weight:680; margin:0 0 4px}
p{margin:0}
a{color:var(--accent)}
.label{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.muted{color:var(--muted)}
.lede{font-size:19px; color:var(--muted); line-height:1.6; max-width:62ch}
code{font-family:var(--mono); font-size:.9em; background:var(--accent-soft); padding:1px 5px; border-radius:4px}

header{padding:56px 0 34px; border-bottom:1px solid var(--line)}
/* логотип — картинка-блок, у неё нет текстового базлайна: при align-items:baseline
   подпись прижималась к нижней кромке лого и висела ниже его середины. Центрируем. */
.brandline{display:flex; align-items:center; gap:10px; margin-bottom:26px; flex-wrap:wrap}
.brandline b{font-family:var(--display); font-weight:750; letter-spacing:-.01em; font-size:15px; line-height:1.2}
.brandline span{color:var(--muted); font-family:var(--display); font-size:14px; line-height:1.2}
.brandline img{max-height:24px; width:auto; display:block}
.brandline .logo-dark{display:none}
@media (prefers-color-scheme: dark){
  .brandline .logo-light{display:none}
  .brandline .logo-dark{display:block}
}
:root[data-theme="dark"] .brandline .logo-light{display:none}
:root[data-theme="dark"] .brandline .logo-dark{display:block}
:root[data-theme="light"] .brandline .logo-light{display:block}
:root[data-theme="light"] .brandline .logo-dark{display:none}

/* боковое оглавление: видно, где ты в документе, и не давит на продажу.
   Появляется только там, где рядом с полосой есть свободное место */
.sidenav{display:none}
/* Порог был 1180 px, и на нём же меню упиралось в край: при ширине окна 1185
   левая кромка вставала на −7 px и нумерация пунктов срезалась. Считаем честно:
   полоса текста начинается на 50% − 410, меню шириной 150 плюс отступы требует
   1240 px. max() держит его в экране, если окно всё-таки уже. */
@media (min-width:1240px){
  /* Меню переросло экран: четырнадцать пунктов и три заголовка групп при ширине
     колонки 150 px дают 735 px, и в окне высотой 800 нижние пункты обрезались.
     Лечим в два хода. Первый — плотнее набор: кегль, интерлиньяж и поля пунктов
     ужаты, это снимает около сотни пикселей и в обычном окне меню помещается
     целиком. Второй — прокрутка внутри самого меню на случай низкого окна
     или отчёта длиннее этого; overscroll-behavior не даёт прокрутке
     перекинуться на страницу, когда список кончился. */
  .sidenav{display:block; position:fixed; top:96px; left:max(16px, calc(50% - 600px));
    width:150px; z-index:5;
    max-height:calc(100vh - 116px); overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:var(--line) transparent}
  .sidenav::-webkit-scrollbar{width:4px}
  .sidenav::-webkit-scrollbar-thumb{background:var(--line); border-radius:2px}
  .sidenav::-webkit-scrollbar-track{background:transparent}
  .sidenav ol{list-style:none; margin:0; padding:0; counter-reset:sn}
  .sidenav li{counter-increment:sn; margin:0}
  .sidenav li a{display:block; padding:3px 0 3px 18px; position:relative;
    font-family:var(--display); font-size:12.5px; line-height:1.25; color:var(--muted);
    text-decoration:none}
  .sidenav li a::before{content:counter(sn); position:absolute; left:0; font-size:10.5px;
    color:var(--line)}
  .sidenav li a:hover{color:var(--accent)}
  .sidenav li a:hover::before{color:var(--accent)}
  /* текущий пункт помечаем цветом, а не жирностью: жирный меняет ширину слов,
     строки переносятся иначе, и меню дёргается при скролле */
  .sidenav li a.cur{color:var(--ink)}
  .sidenav li a.cur::before{color:var(--accent); font-weight:700}
  /* состояние раздела в меню: тот же светофор, что стоит в заголовках находок.
     Точка, а не заливка и не слово: тринадцать цветных плашек в колонке шириной
     полтораста пикселей читаются как витраж, а точка сбоку — как метка на полях. */
  /* Точка не переносится под текст. Инлайновый ::after даёт браузеру право
     разорвать строку перед кружком, и у пункта в две строки под названием
     повисает одинокая точка. Поэтому она вынута из потока и прижата вправо —
     заодно все точки выстраиваются в колонку. */
  .sidenav li a.st-g,
  .sidenav li a.st-y,
  .sidenav li a.st-r{position:relative; padding-right:14px}
  .sidenav li a.st-g::after,
  .sidenav li a.st-y::after,
  .sidenav li a.st-r::after{content:""; position:absolute; right:2px; top:.62em;
    width:6px; height:6px; border-radius:50%}
  .sidenav li a.st-g::after{background:var(--good)}
  .sidenav li a.st-y::after{background:var(--warn)}
  .sidenav li a.st-r::after{background:var(--bad)}
  /* заголовок группы: длинный отчёт без деления читается как список слов */
  .sidenav li.grp{counter-increment:none; margin-top:12px; padding:8px 0 4px 18px;
    border-top:1px solid var(--line);
    font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.08em;
    line-height:1.2; text-transform:uppercase; color:var(--ink)}
  .sidenav li.grp:first-child{margin-top:0; padding-top:0; border-top:0}
}
@media print{ .sidenav{display:none} }

/* липкая навигация по разделам: документ длинный, шапка уезжает,
   а перемещаться и писать нам нужно с любого места */
.docnav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line)}
.docnav-in{max-width:820px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:14px}
.docnav ul{display:flex; gap:2px; margin:0; padding:0; list-style:none; overflow-x:auto;
  flex:1; scrollbar-width:none}
.docnav ul::-webkit-scrollbar{display:none}
.docnav li{margin:0; flex:0 0 auto}
.docnav li a{display:block; padding:11px 10px; font-family:var(--display); font-size:13.5px;
  color:var(--muted); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent}
.docnav li a:hover{color:var(--ink); border-bottom-color:var(--accent)}
/* справа — только служебное действие: документ не должен давить на продажу,
   иначе цифрам в нём верят меньше */
.docnav .util{flex:0 0 auto; font-family:var(--display); font-size:13px; color:var(--muted);
  background:none; border:1px solid var(--line); border-radius:8px; padding:5px 11px;
  cursor:pointer; white-space:nowrap}
.docnav .util:hover{color:var(--ink); border-color:var(--muted)}
@media (max-width:640px){ .docnav-in{padding:0 12px; gap:8px} .docnav li a{padding:10px 8px; font-size:13px} }
@media print{ .docnav{display:none} }

/* оглавление: документ длинный, без него не видно, что внутри */
.toc{margin-top:26px; padding:16px 20px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); box-shadow:var(--shadow)}
.toc b{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px}
.toc ol{margin:0; padding-left:20px; columns:2; column-gap:30px}
.toc li{margin:3px 0; font-size:15px; break-inside:avoid}
.toc a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent}
.toc a:hover{color:var(--accent); border-bottom-color:var(--accent)}
@media (max-width:640px){ .toc ol{columns:1} }

section{padding:40px 0; border-bottom:1px solid var(--line); scroll-margin-top:16px}
section:last-of-type{border-bottom:0}
.sec-head{display:flex; flex-direction:column; gap:8px; margin-bottom:22px}

/* сводка крупных чисел */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:2px;
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:24px}
.stat{background:var(--panel); padding:18px}
.stat b{display:block; font-size:30px; font-weight:750; letter-spacing:-.025em; line-height:1; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:6px; font-family:var(--display); font-size:12.5px; color:var(--muted)}
.stat.bad b{color:var(--bad)}
.stat.good b{color:var(--good)}

/* таблицы */
/* Тень у правого края: таблица шире экрана телефона почти всегда, а признака,
   что её листают вбок, не было — читатель видел обрезанные колонки и считал,
   что данные не поместились. Приём Lea Verou: маскирующий градиент прокручивается
   вместе с содержимым (local) и гасит тень, когда доехали до конца. */
.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow);
  background-image:
    linear-gradient(to left, var(--panel), transparent),
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent);
  background-position:right center, right center;
  background-size:36px 100%, 14px 100%;
  background-repeat:no-repeat;
  background-attachment:local, scroll}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px}
th{text-align:left; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:700; padding:13px 16px; border-bottom:1px solid var(--line)}
td{padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted)}
tr:last-child td{border-bottom:0}
td.q{color:var(--ink)}
td.n{white-space:nowrap; font-weight:680; font-size:14px; font-variant-numeric:tabular-nums}
td.n.no{color:var(--bad)}
td.n.yes{color:var(--good)}

/* строка «вопрос → вердикты» */
.now{display:grid; gap:12px}
.row{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px; box-shadow:var(--shadow)}
.row .q{font-size:16px}
.verdicts{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.pill{font-size:12px; font-weight:640; white-space:nowrap; padding:4px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted)}
/* плашка внутри заголовка: воздух от текста, посадка по центру строки; серифный
   заголовок крупный, и без сдвига вверх плашка тянет строку вниз */
h1 .pill,h2 .pill,h3 .pill{margin-left:12px; vertical-align:middle; position:relative; top:-2px}
/* На телефоне плашка вылезала за правый край заголовка на восемь пикселей: балансировка
   строк не умеет переносить неразрывный блок, а у плашки white-space:nowrap. Отчёты
   открывают с телефона, поэтому здесь плашка уходит на свою строку. */
@media (max-width:700px){
  h2{text-wrap:pretty}
  h2 .pill{display:inline-block; margin-left:0; top:0}
}
.pill.yes{color:var(--good); border-color:color-mix(in srgb, var(--good) 40%, transparent);
  background:color-mix(in srgb, var(--good) 8%, transparent)}
.pill.no{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 30%, transparent)}
/* жёлтый светофора рычагов: «работает частично». Без него состояний два, а их три,
   и половина рычагов красилась красным только потому, что не была зелёной. */
.pill.warn{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, transparent);
  background:color-mix(in srgb, var(--warn) 8%, transparent)}

/* замок: цифра существует, но без гостевого доступа её не снять. Ставится в ячейку
   вместо прочерка и вместо оценки на глаз — продаёт выдачу доступа, а не прячет дыру. */
.lock{color:var(--muted); font-family:var(--display); font-size:13px; white-space:nowrap;
  border-bottom:1px dashed var(--line); cursor:help}
.lock::before{content:'🔒 '; font-size:11px}

/* скриншот-доказательство: рамка, чтобы снимок не сливался со страницей,
   подпись обязательна — запрос, система, дата. Снимок без даты не доказательство. */
.shot{margin:18px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--panel); box-shadow:var(--shadow)}
.shot img{display:block; width:100%; height:auto}
.shot figcaption{padding:10px 16px; font-family:var(--display); font-size:13.5px;
  color:var(--muted); border-top:1px solid var(--line)}

/* график: инлайн-SVG, максимум два на аудит, числа дублируются текстом —
   в печати и PDF график живёт хуже таблицы */
.chart{margin:18px 0; padding:16px 20px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); box-shadow:var(--shadow)}
.chart svg{display:block; width:100%; height:auto}
.chart .bar{fill:var(--accent)}
.chart .bar.dim{fill:var(--line)}
.chart .bar.bad{fill:var(--bad)}
.chart .bar.goal{fill:none; stroke:var(--accent); stroke-width:1.5; stroke-dasharray:5 4}
/* точки состояния в боковом меню живут в блоке .sidenav внутри @media — меню только там и видно */
.chart text{font-family:var(--ui); font-size:13px; fill:var(--muted);
  font-variant-numeric:lining-nums tabular-nums}
.chart text.val{fill:var(--ink); font-weight:640}
.chart figcaption{margin-top:10px; font-family:var(--display); font-size:13.5px; color:var(--muted)}

/* вывод-врезка */
.finding{margin-top:18px; padding:16px 20px; border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 10px 10px 0}
.finding p + p{margin-top:8px}

/* карточки */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; box-shadow:var(--shadow)}
.card p{color:var(--muted); font-size:15.5px; margin-top:4px}

/* этапы: недели плана, шаги, рычаги */
.steps{display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.step{display:grid; grid-template-columns:132px 1fr; gap:22px; background:var(--panel); padding:20px}
.step .when{display:flex; flex-direction:column; gap:4px}
.num{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.when small{color:var(--muted); font-family:var(--display); font-size:12.5px}

/* Чья работа: три корзины плана — наше, ваше, за отдельные деньги. Раньше это
   стояло серой подписью под сроком и читалось как уточнение, а не как граница
   ответственности. Клиент соглашается на план целиком и ждёт, что всё в нём
   сделаем мы; выясняется обратное на втором замере, когда доверие уже потрачено.
   Поэтому метка цветная и стоит в каждом этапе, а не только там, где мы решили
   пояснить. Цвета те же, что у светофора находок: синий — наша зона, жёлтый —
   не наша, серый — сверх месяца. */
.who{display:inline-block; align-self:flex-start; font-family:var(--ui); font-size:10.5px;
  font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  padding:3px 8px; border-radius:999px; border:1px solid transparent}
.who.us{color:var(--accent); background:var(--accent-soft);
  border-color:color-mix(in srgb, var(--accent) 25%, transparent)}
.who.you{color:var(--warn); background:color-mix(in srgb, var(--warn) 10%, transparent);
  border-color:color-mix(in srgb, var(--warn) 35%, transparent)}
.who.extra{color:var(--muted); background:color-mix(in srgb, var(--muted) 8%, transparent);
  border-color:var(--line)}
/* Метка внутри строки списка: в блоке «ваша сторона» иногда попадается пункт,
   который делаем мы, и наоборот. Тогда помечается сама строка. */
li > .who{margin-right:8px; position:relative; top:-1px}
ul{margin:8px 0 0; padding-left:20px}
li{margin:5px 0}
li::marker{color:var(--muted)}

/* нумерованный список «что нужно от вас» */
ol.need{counter-reset:n; list-style:none; padding:0; margin:0; display:grid; gap:12px}
ol.need li{counter-increment:n; display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start; margin:0}
ol.need li::before{content:counter(n); font-family:var(--display); font-weight:700; font-size:13px;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-top:2px}

/* чек-лист с галками */
ul.check{list-style:none; padding:0; margin:0; display:grid; gap:12px}
ul.check li{display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start; margin:0}
ul.check li::before{content:"✓"; font-weight:700; font-size:14px;
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-top:2px}

/* «что даст» — итог шага */
.gives{margin-top:12px; font-size:15.5px}
.gives b{font-family:var(--display); font-weight:700; color:var(--accent)}

/* свёртка с подробностями: не мешает бегло читать, но всё объяснено */
details{margin-top:10px; border-top:1px solid var(--line); padding-top:10px}
details summary{
  font-family:var(--display); font-size:13.5px; font-weight:640; color:var(--muted);
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+"; font-weight:700; color:var(--accent); width:12px}
details[open] summary::before{content:"–"}
details summary:hover{color:var(--ink)}
details .body-text{margin-top:10px; font-size:15.5px; color:var(--muted)}
details .body-text p + p{margin-top:8px}

footer{padding:34px 0 60px; color:var(--muted); font-size:14.5px; font-family:var(--display)}
footer p + p{margin-top:10px}

/* Таблица на узком экране: первая колонка — название строки, и без неё
   отлистанные вбок числа теряют смысл. Прижимаем её к левому краю, остальное
   уезжает под неё. Заодно ужимаем поля и кегль: 520 px превращаются в ~430,
   и за экраном остаётся вдвое меньше. */
@media (max-width:640px){
  th:first-child, td:first-child{position:sticky; left:0; z-index:1;
    background:var(--panel); border-right:1px solid var(--line)}
  table{min-width:430px; font-size:14.5px}
  th{padding:11px 10px; letter-spacing:.06em}
  td{padding:10px 10px}
  td.n{font-size:13.5px}

  body{font-size:16px}
  .grid2{grid-template-columns:1fr}
  .step{grid-template-columns:1fr; gap:10px}
  .row{grid-template-columns:1fr; align-items:start}
  .verdicts{justify-content:flex-start}
}

@media print{
  :root{--ground:#fff; --panel:#fff; --shadow:none}
  header{padding-top:0}
  section{break-inside:avoid}
  .scroll{overflow:visible}
}

/* Цена и состав пакета. Перенесено из раздатки MYGRIBS при её миграции на общий файл. */
.price{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  flex-wrap:wrap; padding:22px 24px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
}
.price .amount{font-family:var(--display); font-size:34px; font-weight:750; letter-spacing:-.02em}
.price .note{color:var(--muted); font-size:14.5px; max-width:44ch; border:0; background:none; padding:0; margin:0}
.incl{display:grid; gap:8px; margin-top:18px}
.incl div{display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:15.5px}
.incl b{font-family:var(--display); font-weight:640; font-size:13.5px; color:var(--accent); white-space:nowrap; padding-top:2px}

/* Врезка-заметка: тише, чем .finding, для оговорок и сносок по ходу текста. */
.note{
  border:1px solid var(--line); border-left:2px solid var(--accent);
  background:var(--panel); border-radius:10px; padding:19px 21px; margin:24px 0;
}

/* Совместимость: раздатки, свёрстанные до общего файла, зовут этапы .weeks/.week. */
.weeks{display:grid; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.week{display:grid; grid-template-columns:132px 1fr; gap:22px; background:var(--panel); padding:22px 20px}
.week .when{display:flex; flex-direction:column; gap:4px}
@media (max-width:640px){ .week{grid-template-columns:1fr; gap:10px} }