/* Г417 · «Выставка проектов»: витрина /works и стенд /works/<ключ>. Токены — family.css, рамка (шапка, небо, подвал) — site.css.
   Все классы с приставкой w-: у site.css свои .sec, .wrap, .dot, .nav, .crumbs, и общее имя здесь стёрло бы их вид на других страницах.
   Правило цвета: лёд — «Попробовать» и всё живое, жёлтый — единственная заливка «Хочу такое» (одна на экран). */
.w-page{max-width:1240px;margin:0 auto;padding:0 16px 72px;width:100%;min-width:0;box-sizing:border-box}   /* Г433: main — элемент flex-колонки .site с авто-полями: без явной ширины он сжимался по содержимому, и лента кадров виджетов (прокрутка внутри блока) растягивала страницу вширь */
.w-page h1,.w-page h2,.w-page h3{margin:0;font-family:var(--disp);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.01em}
.w-page h1{font-size:44px;line-height:1}
.w-page h2{font-size:24px;line-height:1.05}
.w-page h3{font-size:18px;line-height:1.1}
.w-page p{margin:0;color:var(--mu);max-width:68ch}
.w-page a.btn{text-decoration:none}

.w-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center;list-style:none;margin:6px 0 10px;padding:0;font:600 12px/1 var(--f);color:var(--fa)}
.w-crumbs li+li:before{content:"/";margin-right:6px}
.w-crumbs a{color:var(--mu);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.w-crumbs [aria-current]{color:var(--fa)}

/* ── общие куски ── */
/* Г439: рамка кадра — тонкая оболочка вокруг картинки: высота у картинки auto, поэтому пропорция рамки = пропорции файла и полей нет ни у горизонтального
   кадра, ни у вертикального. Размеры берёт сервер из самого файла (атрибуты width/height), класс .v — вертикальный кадр (телефон, виджет), .x — широкий
   на компьютере и вертикальный на телефоне. Кадр не растягивается и не обрезается. Тень и радиус — как у остальных панелей сайта. */
.w-frame{position:relative;display:block;border:1px solid var(--edge2);border-radius:var(--r2);background:var(--p1);overflow:hidden;box-shadow:var(--sh)}
/* Кадр не крупнее натурального размера (--nw — CSS-ширина файла с учётом плотности): иначе буквы мылятся; узкий кадр стоит по центру */
.w-frame{max-width:var(--nw,none)}
.w-frame.s{margin-inline:auto}
.w-frame picture{display:block}
.w-frame img{width:100%;height:auto;display:block}
.w-frame.v{width:min(100%,300px,var(--nw,300px));margin-inline:auto}
@media (max-width:600px){.w-frame.x{width:min(100%,280px);margin-inline:auto}}
.w-scr img.nr{object-fit:cover;object-position:top}
.w-meta{display:flex;gap:6px;flex-wrap:wrap}
.w-acts,.w-row{display:flex;gap:8px;flex-wrap:wrap}
.w-dot{width:8px;height:8px;border-radius:2px;background:var(--gr);flex:none;margin-top:5px}
.w-ibtn{flex:none;width:44px;height:44px;display:inline-grid;place-items:center;border-radius:var(--r2);border:1px solid var(--edge2);background:var(--p2);color:var(--fg);cursor:pointer;font:700 16px/1 var(--f)}
.w-ibtn:focus-visible,.w-ftab:focus-visible,.w-step:focus-visible{outline:2px solid var(--ice);outline-offset:2px}

/* ── витрина ── */
/* Г417/Г424: шапка витрины и первый экран стенда — на плотной поверхности семьи (как .w-sec ниже), а не прямо на небе: снег, луна и горы фона
   проходили под заголовком и метками (на 390 луна наезжала на метку «Telegram Mini App»). Заливка непрозрачная: --p1 без альфы. */
.w-hero,.w-shero{border:1px solid var(--edge);border-radius:var(--r1);background:var(--metal),var(--p1);box-shadow:var(--sh)}
.w-hero{padding:24px}
.w-hero h1{margin-top:8px}
.w-hero p{font-size:16px;margin-top:12px}
/* Сетка на 6 долей: карточка — 2 доли (три в ряд). Остаток 1 (один, четыре стенда) — первая карточка во всю ширину, остаток 2 (два, пять) —
   первые две по половине: пустых ячеек и сирот нет при любом числе готовых стендов. Остаток считает сервер (data-mod). */
.w-hall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:20px}
.w-hall>.w-ex{grid-column:span 2}
.w-hall[data-mod="1"]>.w-ex:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}
.w-hall[data-mod="2"]>.w-ex:nth-child(-n+2){grid-column:span 3}
.w-ex{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.w-ex .w-frame{margin:10px 10px 0}
/* Карточка витрины: ячейка кадра одной высоты в ряду (16:10), кадр внутри — целиком (contain). У вертикального кадра ячейка заливается его же цветом
   (--fc — средний цвет кромки файла), кадр стоит «телефоном» по высоте ячейки с радиусом и тенью; у широкого кадра 16:10 заполняет ячейку точно. */
.w-ex .w-frame{aspect-ratio:16/10;width:auto;max-width:none;display:flex;align-items:center;justify-content:center;box-shadow:none;
  background:linear-gradient(160deg,var(--fc,var(--p1)),color-mix(in srgb,var(--fc,var(--p1)) 62%,#000))}
.w-ex .w-frame picture{display:flex;justify-content:center;width:100%;height:100%}
.w-ex .w-frame img{width:auto;max-width:100%;height:100%;object-fit:contain}
.w-ex .w-frame.v{padding:12px}
.w-ex .w-frame.v picture{height:100%}
.w-ex .w-frame.v img{border-radius:var(--r2);box-shadow:var(--sh)}
@media (max-width:600px){.w-ex .w-frame.x{padding:12px}.w-ex .w-frame.x img{border-radius:var(--r2);box-shadow:var(--sh)}}
.w-hall[data-mod="1"]>.w-ex:first-child .w-frame{margin:10px}
.w-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;flex:1}
.w-hall[data-mod="1"]>.w-ex:first-child .w-body{padding:20px 24px}
.w-hall[data-mod="1"]>.w-ex:first-child h2{font-size:32px}
.w-ex h2{font-size:22px}
.w-ex .w-acts{margin-top:auto;padding-top:8px}
.w-ex .w-acts .btn{flex:1}

/* ── стенд: первый экран ── */
.w-shero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;padding:24px;margin-top:6px}
.w-idea{font:600 19px/1.4 var(--f);color:var(--fg)!important;margin-top:14px!important;max-width:46ch!important}
.w-shero h1{margin-top:14px}
.w-shero .w-acts{margin-top:20px}
.w-shero .w-acts .btn{height:48px;padding:0 22px;font-size:14px}
/* Раздел — плотная панель, а не текст по небу: горы фона (sky.css) иначе проходят под заголовками и мешают читать (замер кадров 12.11) */
.w-sec{padding:24px;margin-top:16px;border:1px solid var(--edge);border-radius:var(--r1);background:var(--metal),var(--p1);box-shadow:var(--sh)}
.w-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
.w-head h2{margin-top:6px}
.w-head p{margin-top:6px}

/* ── листание функций: вкладки слева (лентой сверху на узком), стрелки, свайп ── */
.w-feats{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px}
.w-ftabs{display:flex;flex-direction:column;gap:2px}
.w-ftab{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--mu);font:700 13px/1.25 var(--f);text-align:left;cursor:pointer}
.w-ftab .n{font:600 11.5px/1 var(--mono);color:var(--fa);width:20px}
.w-ftab[aria-selected="true"]{background:var(--p1);border-color:var(--edge2);color:var(--fg);box-shadow:inset 3px 0 0 var(--ice)}
.w-fmain{min-width:0}
.w-track{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scroll-behavior:smooth;min-width:0;scrollbar-width:none}
.w-track::-webkit-scrollbar{display:none}
.w-track{align-items:flex-start}
.w-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;min-width:0}
.w-txt{display:flex;flex-direction:column;gap:4px}
.w-fnav{display:flex;align-items:center;gap:8px;margin-top:10px}
.w-count{font:600 12px/1 var(--mono);color:var(--mu);min-width:44px;text-align:center}
.w-notin{margin-top:14px!important;font-size:13px}

/* ── попробовать: телефон + сценарий / кнопка в проект ── */
.w-demo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start}
/* вертикальный кадр на стенде — узкая колонка рядом с текстом: в первом экране (2 колонки и на 768) и в слайдере «Что умеет» */
.w-shero.v{grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:40px}
.w-shero.s{grid-template-columns:minmax(0,1fr) minmax(0,var(--nw,360px));gap:40px}
.w-shero.v .w-hero-shot,.w-shero.s .w-hero-shot{width:100%}
@media (min-width:601px){.w-slide.v{flex-direction:row;align-items:center;gap:28px}.w-slide.v .w-frame{flex:none;width:min(300px,var(--nw,300px));margin:0}.w-slide.v .w-txt{flex:1;min-width:0}}
.w-phone{width:340px;padding:10px;border-radius:38px;background:var(--p3);border:1px solid var(--edge2);box-shadow:var(--sh)}
.w-scr{position:relative;aspect-ratio:390/844;border-radius:28px;overflow:hidden;background:var(--bg)}
.w-scr picture,.w-scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.w-scr iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
.w-cover{position:absolute;inset:0;display:grid;place-items:center;background:var(--shade)}
.w-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.w-steps li{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--edge)}
.w-steps li:last-child{border-bottom:0}
.w-steps-x li{display:block;padding:0;border:0}
.w-steps .k{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--ice-soft);color:var(--ice-t);font:700 13px/1 var(--mono)}
.w-steps b{display:block;color:var(--fg);font-size:14px}
.w-steps span>span{color:var(--mu);font-size:13px}
.w-step{width:100%;display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;text-align:left;min-height:44px;padding:9px 10px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--fg);font:inherit;cursor:pointer}
.w-step[aria-current="true"]{background:var(--p1);border-color:var(--edge2);box-shadow:inset 3px 0 0 var(--ice)}
.w-scen .lb{margin-bottom:6px}
.w-scen .w-row{margin-top:10px}
.w-rules{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:13px;color:var(--mu)}
.w-rules .row{align-items:flex-start}
.w-live{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}

/* ── Г433: «Интерактив в Telegram» — кадры виджетов. Кадр в родном размере 2× (720 px) показывается шириной ≤ 320 px, как на телефоне; высоты разные,
   поэтому выравнивание по верху. На телефоне — лента с прокруткой внутри блока (страница вширь не растёт) и притяжкой к кадру ── */
.w-wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px 16px;align-items:start}
.w-wf{margin:0;display:flex;flex-direction:column;gap:10px;max-width:320px;min-width:0}
.w-wf img{display:block;width:100%;height:auto;border:1px solid var(--edge2);border-radius:var(--r2);background:var(--p1)}
.w-wf figcaption{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.w-wf figcaption b{font:700 14px/1.25 var(--f);color:var(--fg)}
.w-wf figcaption span:last-child{font-size:13px;line-height:1.45;color:var(--mu)}

/* ── как сделано: плотные строки, волосяные линии ── */
.w-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0}
.w-fr{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--edge);min-height:34px;align-items:baseline}
.w-fr dt{font:700 12px/1.3 var(--f);color:var(--mu)}
.w-fr dd{margin:0;color:var(--fg);font-size:13.5px;min-width:0}
.w-pathbox{margin-top:16px}
.w-path{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.w-path .tag{height:26px}

/* ── главное действие страницы: единственная жёлтая заливка ── */
.w-want{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px;margin-top:6px}
.w-want p{margin-top:6px}
.w-next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.w-next a{display:flex;flex-direction:column;gap:4px;padding:12px 14px;min-height:56px;text-decoration:none;color:inherit}
.w-next a:last-child{text-align:right}
.w-next a:only-child{grid-column:1/-1}

/* ── окно демо: iframe на адрес проекта; создаётся скриптом по нажатию ── */
.w-dlg{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--shade);padding:16px;opacity:0;pointer-events:none;transition:opacity var(--t2) var(--ease)}
.w-dlg.open{opacity:1;pointer-events:auto}
.w-box{width:min(1100px,100%);height:min(760px,100%);display:flex;flex-direction:column;overflow:hidden;transform:translateY(10px) scale(.985);transition:transform var(--t3) var(--ease);background:var(--p1)}
.w-dlg.open .w-box{transform:none}
.w-dh{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-bottom:1px solid var(--edge)}
.w-sp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-view{flex:1;min-height:0;background:var(--bg)}
.w-view iframe{width:100%;height:100%;border:0;display:block}
.w-note{padding:8px 14px;font-size:12px;color:var(--mu);border-top:1px solid var(--edge);display:flex;gap:8px;align-items:center}
.w-sticky{display:none}

@media (max-width:1080px){
  .w-hall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-hall>.w-ex,.w-hall[data-mod]>.w-ex:nth-child(-n+2){grid-column:auto}
  .w-hall[data-mod]>.w-ex:first-child{grid-column:auto;display:flex}
  .w-hall[data-mod]>.w-ex:first-child .w-frame{margin:10px 10px 0}
  .w-hall[data-mod]>.w-ex:first-child .w-body{padding:14px 16px 16px}
  .w-hall[data-mod]>.w-ex:first-child h2{font-size:22px}
  /* нечётное число — первая карточка во всю ширину, горизонтально */
  .w-hall[data-odd="1"]>.w-ex:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
  .w-hall[data-odd="1"]>.w-ex:first-child .w-frame{margin:10px}
  .w-hall[data-odd="1"]>.w-ex:first-child .w-body{padding:16px 18px}
  .w-shero{grid-template-columns:1fr;gap:20px}
  .w-shero.v,.w-shero.s{grid-template-columns:minmax(0,1fr) minmax(0,min(260px,var(--nw,260px)));gap:24px}
  .w-feats{grid-template-columns:1fr}
  .w-ftabs{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none}
  .w-ftab{white-space:nowrap;flex:none;border-color:var(--edge)}
  .w-ftab[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--ice)}
  .w-demo{grid-template-columns:1fr}
  .w-phone{margin:0 auto}
}
/* телефон: цели ≥44, одна колонка, «Попробовать · Хочу такое» — липкая полоса снизу; нижний отступ страницы = высота полосы */
@media (max-width:600px){
  .w-page{padding-bottom:84px}
  .w-page h1{font-size:32px} .w-page h2{font-size:21px}
  .w-page .btn{min-height:44px}
  .w-hall{grid-template-columns:1fr}
  .w-hall[data-odd="1"]>.w-ex:first-child{display:flex}
  .w-hall[data-odd="1"]>.w-ex:first-child .w-frame{margin:10px 10px 0}
  .w-hall[data-odd="1"]>.w-ex:first-child .w-body{padding:14px 16px 16px}
  .w-shero{gap:14px;padding:16px}
  .w-hero{padding:16px}
  .w-sec{padding:16px}
  .w-idea{font-size:17px}
  /* кадр в первом экране: телефонный кадр проекта, верх экрана виден целиком */
  .w-shero.v,.w-shero.s{grid-template-columns:1fr}
  .w-shero.v .w-hero-shot,.w-shero.s .w-hero-shot{width:min(100%,280px,var(--nw,280px))}
  .w-shero .w-acts .btn{flex:1}
  .w-phone{width:min(340px,100%)}
  .w-facts{grid-template-columns:1fr}
  .w-fr{grid-template-columns:110px 1fr}
  .w-wgrid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px;-webkit-overflow-scrolling:touch}
  .w-wf{flex:none;width:min(300px,78vw);scroll-snap-align:start}
  .w-want{grid-template-columns:1fr}
  .w-want .btn{width:100%}
  .w-live{grid-template-columns:1fr}
  .w-next{grid-template-columns:1fr}
  .w-next a:last-child{text-align:left}
  .w-dlg{padding:0}
  .w-box{height:100%;border-radius:0;border-width:0}
  .w-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--scrim);border-top:1px solid var(--edge);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .w-sticky .btn{flex:1;min-height:44px}   /* Г424: полоса вне .w-page, его правило 44 px сюда не дотягивалось — кнопки были 36 px */
}
/* «Меньше движения»: короче, но не выключено — листание без плавной прокрутки, окно без сдвига; страница не пустеет */
@media (prefers-reduced-motion:reduce){
  .w-track{scroll-behavior:auto}
  .w-box{transform:none;transition-duration:1ms}
  .w-dlg{transition-duration:80ms}
}

/* «Название — суть» (13.11): имя крупно, как было, суть — второй строкой обычным регистром. Тире остаётся в тексте, но не рисуется:
   copy-paste, поисковик и экранный диктор читают целую фразу «Небо зараз — оповещения о тревогах по городам в Telegram». */
.w-page .w-hd{display:block;margin-top:8px;font:700 16px/1.3 var(--f);font-style:normal;text-transform:none;letter-spacing:0;color:var(--mu)}
.w-page .w-shero h1 .w-hd{font-size:20px;max-width:34em}
.w-page .w-hd .w-dash{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:600px){.w-page .w-shero h1 .w-hd{font-size:16px}}
/* телефон ≤600px: мобильный кадр работы в карточке выставки — верх экрана на всю ширину рамки (владелец 13.11: «пустой серый телефон» — высокий кадр ужимался в рамку 16:10 до 85 px) */
@media (max-width:600px){.w-ex .w-frame.x{aspect-ratio:1/1;padding:0}.w-ex .w-frame.x picture{height:100%}.w-ex .w-frame.x img{width:100%;max-width:none;height:100%;object-fit:cover;object-position:top;border-radius:0;box-shadow:none}}