html:not(.js) .final{height:auto}
html:not(.js) .final .stage{position:relative;min-height:100vh;padding-top:96px;padding-bottom:96px}
html:not(.js) .final .txt > *{opacity:1;transform:none}

html:not(.js) .top{position:absolute;color:var(--on-dark)}

.final .txt:focus-within > *{opacity:1;transform:none}

.top.has-bg{background:var(--bg)}
.top.has-bg.is-dark{background:var(--surface-dark)}

.final h2{font:700 clamp(28px,3vw,46px)/1.08 var(--d);letter-spacing:-.02em}

@media (max-width:759.98px) and (max-height:620px){
  .final .stage{padding-top:52px;padding-bottom:64px;gap:14px}
  .final .cube{width:22vw}
  .final .txt p{margin:10px 0 16px;font-size:15px}
  .final .row{gap:8px}
}

@media (max-height:440px) and (orientation:landscape){
  .final .stage{grid-template-columns:auto minmax(0,1fr);align-content:center;column-gap:clamp(24px,5vw,56px);row-gap:12px;padding-top:64px;padding-bottom:12px}
  .final .cube{width:auto;height:min(52svh,220px);max-width:30vw}
  .final .txt{max-width:none}
  .final .txt p{margin:10px 0 16px;font-size:15px}
  .final .row{gap:8px}
  .final .foot{position:static;grid-column:1 / -1}
}

.stol{position:relative}
.stol .stage{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;padding:clamp(104px,15vh,148px) var(--gut) 56px}

html.js .stol:not(.still) .stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
html:not(.js) .stol .stage{min-height:0;padding-bottom:64px}
.stol .hero{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,64px);will-change:opacity,transform}
.stol .hero-t{max-width:820px}
.stol .lead{margin-top:20px;max-width:58ch}

.stol .who{margin-top:12px;color:var(--on-dark-2);font-size:clamp(15px,1.1vw,17px);line-height:1.4;max-width:58ch}
.stol .who b{color:var(--on-dark);font-weight:600}
.stol .who-d{display:none}
.stol .who-o{display:block}

html.js .stol.tone-dark{background-image:none}
.stol .count{display:flex;gap:clamp(28px,3.4vw,56px);flex:none}
.stol .count > div{display:flex;flex-direction:column;gap:10px;max-width:17ch}
.stol .count span:last-child{color:var(--on-dark-2);font-size:15px;line-height:1.35}
.stol .hint{position:absolute;z-index:6;right:max(var(--gut),env(safe-area-inset-right));display:flex;align-items:center;gap:12px;color:var(--on-dark-dim)}
.stol .hint b{display:block;width:44px;height:1px;position:relative;overflow:hidden;background:rgba(255,255,255,.18)}
.stol .hint b::after{content:"";position:absolute;inset:0;background:var(--on-dark);animation:kjDraw 2.6s var(--out) 3}
@keyframes kjDraw{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

.gorod.live:not(.gm) .hint{right:auto;left:max(var(--gut),env(safe-area-inset-left))}

.stol .scanline{z-index:4}

.gorod.live:not(.gm) .scanline{right:auto;bottom:0;width:2px;height:auto}
.gorod .stage{display:flex;flex-direction:column}
.gorod .hero{order:-1}

.stol .info{position:absolute;z-index:5;left:max(var(--gut),env(safe-area-inset-left));bottom:calc(clamp(24px,4.5vh,44px) + env(safe-area-inset-bottom));
  width:min(380px,calc(100% - 2 * var(--gut)));display:flex;flex-direction:column;gap:8px;
  padding:14px 14px 16px 18px;border-radius:12px;background:var(--surface-dark);border:1px solid var(--edge-dark);opacity:0;visibility:hidden;
  transition:opacity .3s var(--out),visibility .3s}
.stol .info-r{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stol .info b{font:600 clamp(22px,2vw,30px)/1.1 var(--d);letter-spacing:-.015em;color:var(--on-dark);min-width:0}
.stol .info-go{flex:none;min-height:44px;padding:0 16px;font-size:14px}

.stol .info.two .info-r{flex-wrap:wrap;justify-content:flex-start;gap:8px 10px}
.stol .info.two .info-r b{flex:0 0 100%}
.stol .info .task{color:var(--on-dark-2);font-size:15px;line-height:1.4;padding-right:4px}
.stol .info .xlabel{color:var(--amber)}

.gorod .info .vnutri,.gorod .info .note{color:var(--on-dark-2);font-size:15px;line-height:1.45}
.gorod .info .note[hidden],.gorod .info-go[hidden]{display:none}
.stol.still .scanline,.stol.still .info{display:none}
html.js .stol.still .stage{min-height:0}

html.js .gorod.live.short .stage{padding-top:64px}
.gorod.short .hero{gap:14px;max-width:min(360px,40vw)}
.gorod.short .h1{font-size:26px}
.gorod.short .lead{margin-top:10px;font-size:14px;line-height:1.4}
.gorod.short .who,.gorod.short .hint{display:none}
.gorod.short .count .num{font-size:30px}
.gorod.short .count > div{gap:4px}
.gorod.short .count span:last-child{font-size:13px}
.stol.short .info{bottom:calc(12px + env(safe-area-inset-bottom));width:min(380px,48%);padding:10px 10px 10px 14px;gap:4px}
.stol.short .info b{font-size:20px}
.stol.short .info .task,.gorod.short .info .vnutri,.gorod.short .info .note{display:none}
html:not(.js) .stol .scanline,html:not(.js) .stol .info,html:not(.js) .stol .hint,.gorod.still .hint{display:none}

.kj-work{margin-top:clamp(64px,8vw,112px)}
.kj-work-p{color:var(--ink-2);margin:14px 0 clamp(24px,3vw,36px);max-width:60ch}

.kj-pv .pv-d{margin:8px 0 0;color:var(--ink-2);font-size:14px;line-height:1.5;max-width:60ch}

.kj-line{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge-light)}
.kj-line li{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2.4fr) auto;gap:12px clamp(20px,3vw,40px);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--edge-light)}
.kj-line b{display:block;font:600 18px/1.25 var(--t)}
.kj-line .kl-k{display:block;color:var(--ink-2);font-size:14px;line-height:1.4;margin-top:4px}
.kj-line p{margin:0;color:var(--ink-2);line-height:1.55;max-width:68ch}
.kj-line .kl-a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font:500 14px/1.2 var(--t);white-space:nowrap}
.kj-line .kl-a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.kj-line li{grid-template-columns:1fr;gap:8px}}
.gz-cam{position:relative;z-index:2}
html.js .gorod.live .gz-cam{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.gz-city{position:relative;width:100%;aspect-ratio:var(--ar)}
.gz{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:864/990;z-index:var(--z);display:block;
  clip-path:polygon(5.9% 73%,5.9% 20%,50% 0,94.1% 20%,94.1% 73%,50% 95.5%);transition:translate .3s var(--out)}
.gz.dev{clip-path:none}

html.js .gz{pointer-events:none;clip-path:none}
.gz img{position:absolute;inset:0;width:100%;height:100%;display:block}
.gz-x{clip-path:inset(0 100% 0 0)}

.gz.cur{translate:0 -6px}
.gz.dev:not(.cur) .gz-x{opacity:.5}

.gz-p{position:absolute;left:4%;right:4%;top:0;height:2px;margin-top:-1px;background:var(--accent-bright);
  box-shadow:var(--glow);opacity:0;pointer-events:none}

.gorod .gz-tag{position:absolute;left:var(--tx);top:var(--ty);z-index:45;transform:translate(-88%,0);transform-origin:0 0;scale:var(--is,1);
  white-space:nowrap;color:var(--on-dark-2);border-color:var(--edge-dark);background:var(--surface-dark);cursor:pointer;
  transition:opacity .3s var(--out),color .3s var(--out),border-color .3s var(--out)}

.gorod .gz-tag::before{content:"";position:absolute;inset:-12px -8px}
.gorod .gz-tag.cur{color:var(--amber);border-color:var(--amber)}
html.js .gorod.live .gz-tag{opacity:0;pointer-events:none}
html.js .gorod.live .gz-tag.in{opacity:1;pointer-events:auto}
.gz.free{clip-path:none;pointer-events:none;display:none}
.gz.free.on{display:block}

.gz.free{display:block}
.gz.free:not(.on) .gz-free{display:none}

.gorod .gz.free{z-index:calc(30 + var(--fz, 0))}
.gorod .gz.free .gz-free{top:95%;transform:translate(-50%,0);background:var(--surface-dark);border:1px solid var(--edge-dark);
  border-radius:4px;padding:5px 9px 6px;line-height:1.25}

.gorod .gz.free .gz-free i{margin-top:1px}

.gorod .gz.free.on .gz-free{pointer-events:auto;cursor:pointer}

.gz-vw{position:absolute;inset:0;z-index:1;pointer-events:none}
.gz-vw[hidden]{display:none}
.gz-vc,.gz-v0{position:absolute;inset:0;width:100%;height:100%}
.gz-v0[hidden]{display:none}
.gz-v{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0}
html:not(.js) .gz-vw{display:none}

.gz.tile{clip-path:none;pointer-events:none}
.gz.tile.m{display:none}
.gorod.gm .gz.tile.d{display:none}
.gorod.gm .gz.tile.m{display:block}
.gz-lot{position:absolute;inset:0;width:100%;height:100%}
.gz-lot polygon{fill:rgba(71,126,245,.05);stroke:var(--accent-bright);stroke-width:1.5;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
.gz-free{position:absolute;left:50%;top:70.7%;transform:translate(-50%,-50%);transform-origin:0 0;scale:var(--is,1);text-align:center;color:var(--on-dark-2);
  white-space:nowrap;transition:opacity .4s var(--out)}
.gz-free b{display:block;font:600 14px/1.3 var(--t);color:var(--on-dark)}
.gz-free i{display:block;font-style:normal;font-size:11px;margin-top:2px}

html.js .gorod.live:not(.built) .gz-free{opacity:0}
.gorod.tiny .gz-free,.gorod.tiny .gz-tag{display:none}
.gz-plates{position:absolute;inset:0;pointer-events:none;z-index:40}
.gz-s{position:absolute;left:0;top:0;transform-origin:0 0;background-size:cover;background-position:top center;
  outline:1px solid var(--accent-pastel);opacity:0;transition:opacity .45s var(--out),translate .3s var(--out)}
.gz-s.on{opacity:1}
.gz-s.dev{outline:1px dashed var(--accent-pastel)}
.gz-s.cur{outline:2px solid var(--amber);translate:0 -6px;opacity:1}

.gz-plates .gz-s.on,.gz-plates .gz-s.cur{pointer-events:auto;cursor:pointer}

.gz-viz{position:relative;z-index:5;order:-1;align-self:flex-start;margin:24px 0 0;padding:6px 9px;border-radius:4px;
  background:var(--surface-dark);border:1px solid var(--edge-dark);color:var(--on-dark-2);pointer-events:none}
.gz-viz span{display:none}
html.js .gorod.live .gz-viz{position:absolute;top:72px;right:max(var(--gut),env(safe-area-inset-right));margin:0}
html.js .gorod.live .gz-viz span{display:inline}
html.js .gorod.live.short .gz-viz span{display:none}

.gorod .hero{flex-direction:column;align-items:flex-start;max-width:min(440px,34vw);gap:28px}
.gorod.gm .hero{max-width:none}
.gorod .count{gap:clamp(24px,2.6vw,40px)}
html.js .gorod:not(.still) .stage{padding-top:clamp(96px,14vh,140px)}
html:not(.js) .gz-x,html:not(.js) .gz-plates,.gorod.still .gz-plates{display:none}
html:not(.js) .gz-cam,.gorod.still .gz-cam{margin-top:24px}

.gorod.gm .gz{left:var(--mx);top:var(--my);width:var(--mw);z-index:var(--mz)}

.gorod.gm .gz.free{z-index:calc(30 + var(--fz,0))}
.gorod.gm .gz-city{aspect-ratio:var(--mar)}
.gorod.gm .gz-tag{left:var(--mtx);top:var(--mty)}
.gorod.gl .info .vnutri{display:none}
.gorod.gm .gz-free b{font-size:15px}
@media (max-width:759.98px){
  html:not(.js) .gz,.gorod.still .gz{left:var(--mx);top:var(--my);width:var(--mw);z-index:var(--mz)}
  html:not(.js) .gz.free,.gorod.still .gz.free{z-index:calc(30 + var(--fz,0))}
  html:not(.js) .gz-city,.gorod.still .gz-city{aspect-ratio:var(--mar)}
  html:not(.js) .gorod .gz-tag,.gorod.still .gz-tag{left:var(--mtx);top:var(--mty)}
  html:not(.js) .gz-free b,.gorod.still .gz-free b{font-size:15px}
  html:not(.js) .gz.tile.d,.gorod.still .gz.tile.d{display:none}
  html:not(.js) .gz.tile.m,.gorod.still .gz.tile.m{display:block}
  .gorod .hero{max-width:none}
  html.js .gorod.live .gz-viz span{display:none}
}

html.js .gorod:not(.live):not(.still) :is(.gz-tag,.gz-free,.gz-viz,.hint){display:none}
html.js .gorod:not(.live):not(.still) .gz-cam{position:absolute;left:0;top:0;visibility:hidden}
html.js .stol .num:not(.is-counted){visibility:hidden}

html.js .gorod:not(.live):not(.still){min-height:260vh}
@media (max-width:759.98px){html.js .gorod:not(.live):not(.still){min-height:240svh}}
@media (max-width:759.98px) and (orientation:portrait),(max-aspect-ratio:5/6){
  html.js .gorod:not(.live):not(.still) .gz-cam{position:relative;visibility:visible;margin:28px calc(12px - var(--gut)) 0}
  html.js .gorod:not(.live):not(.still) .gz{left:var(--mx);top:var(--my);width:var(--mw);z-index:var(--mz)}
  html.js .gorod:not(.live):not(.still) .gz.free{z-index:calc(30 + var(--fz,0))}
  html.js .gorod:not(.live):not(.still) .gz-city{aspect-ratio:var(--mar)}
  html.js .gorod:not(.live):not(.still) .gz.tile.d{display:none}
  html.js .gorod:not(.live):not(.still) .gz.tile.m{display:block}
  html.js .gorod:not(.live):not(.still) .hero{max-width:none}
}

@media (min-width:760px) and (max-aspect-ratio:5/6) and (min-resolution:2dppx) and (max-resolution:2.99dppx){
  html.js .gorod:not(.live):not(.still) .gz-cam{width:486px;margin:28px auto 0}
}

.kj-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
.kj-grid .wk{grid-column:span 12;container-type:inline-size}
@media (min-width:360px) and (max-width:759.98px){
  .kj-grid .wk.ph{grid-column:span 6}
}
@media (min-width:760px){
  .kj-grid .wk{grid-column:span 4}
  .kj-grid .wk.pair{grid-column:span 6}
  .kj-grid .wk.mini{grid-column:span 3}
  
  .kj-grid .wk.mini.m3{grid-column:span 4}
  .kj-grid .wk.mini.m2{grid-column:span 6}
}
.kj-b{padding-top:clamp(64px,7vw,112px)}
.kj-b .sec-head{margin-bottom:clamp(24px,3vw,40px)}
.kj-b .sec-head .kj-work-p,.nw-head .kj-work-p{margin:0}
.wk-tile{display:block;border-radius:12px}
.wk .meta{align-items:flex-start}

.wk .acts{display:flex;align-items:center;flex:none;margin:-10px -10px 0 0}
.wk .acts a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:500 14px/1.2 var(--t);white-space:nowrap}
.wk .acts .go{color:var(--accent)}
.wk .acts .go2{color:var(--ink-2)}
.wk .acts a:hover{text-decoration:underline;text-underline-offset:4px}
.wk:hover .go{text-decoration:none}
.wk-tile:hover .xtile{outline-color:var(--accent)}

@container (max-width:340px){
  .wk .meta{flex-direction:column;gap:2px}
  .wk .acts{flex-wrap:wrap;max-width:calc(100% + 8px);margin:0 0 0 -8px}
  .wk .acts a{padding:0 8px}
}

.wk-tel{display:none}
@media (max-width:759.98px){
  .kj-grid .wk.has-tel .xtile{display:none}
  .wk-tel{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:12px;background:var(--line);outline:1px solid var(--edge-light)}
  .wk-tel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
  .wk-tile:hover .wk-tel{outline-color:var(--accent)}
}
@media (min-width:360px) and (max-width:759.98px){
  .kj-grid .wk.has-tel{grid-column:span 6}
}

.kj-more{margin-top:28px;text-align:center}
.kj-more .btn-line{min-width:min(100%,260px);justify-content:center}

.kj-more .btn-line[hidden],.c-more .btn-line[hidden]{display:none}

.kj-more-n{color:var(--ink-2)}
@media (max-width:759.98px){html.js .kj-grid.fold > .wk.later{display:none}}
@media (min-width:760px){.kj-more{display:none}}

.kj-new{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,7vw,112px)}
.nw-head{margin-bottom:clamp(28px,3.5vw,48px)}
.nw-big{display:grid;gap:clamp(48px,6vw,96px)}
.nw{position:relative}
.nw-vis{display:block;position:relative}

html.js .nw-vis[data-reveal].is-in{clip-path:inset(0 -64px -64px -64px)}
.nw-tel{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:16px;background:var(--line);outline:1px solid var(--edge-light);
  transition:outline-color .3s var(--out)}
.nw-tel img,.nw-tel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}

.nw-tel.fit{display:flex;align-items:center;justify-content:center;background:var(--surface-dark);outline-color:var(--surface-dark)}
.nw-scr{position:relative;display:block;height:92%;aspect-ratio:540/1168;overflow:hidden;border-radius:18px;outline:1px solid var(--edge-dark)}
.nw-pc{display:none}
.nw-vis:hover .nw-tel,.nw-vis:hover .nw-pc{outline-color:var(--accent)}
.nw-t{margin-top:16px}
.nw-st{margin-bottom:12px}
.nw-nm{font:600 clamp(24px,2.4vw,32px)/1.12 var(--d);letter-spacing:-.015em}
.ns .nw-nm{font-size:20px;line-height:1.2}
.nw-kd{color:var(--ink-2);font-size:14px;margin-top:6px}
.nw-d{color:var(--ink-2);margin-top:12px;max-width:52ch;line-height:1.55}
.ns .nw-d{font-size:15px;margin-top:8px}
.nw .acts{display:flex;flex-wrap:wrap;margin:8px 0 0 -10px}
.nw .acts a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:500 15px/1.2 var(--t);white-space:nowrap}
.nw .acts .go{color:var(--accent)}
.nw .acts .go2{color:var(--ink-2)}
.nw .acts a:hover{text-decoration:underline;text-underline-offset:4px}

@media (min-width:760px) and (max-width:899.98px),(max-height:500px) and (max-width:899.98px){
  .nw.nb .nw-tel{width:min(100%,calc(70svh * .8));margin-inline:auto}
}
@media (min-width:900px){
  .nw.nb{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(40px,5vw,88px);align-items:center}
  .nw.nb:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
  .nw.nb:nth-child(even) .nw-vis{order:2}
  .nw.nb .nw-vis{padding-bottom:5%}
  .nw-pc{display:block;position:relative;width:84%;aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:var(--line);
    outline:1px solid var(--edge-light);transition:outline-color .3s var(--out)}
  .nw-pc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
  .nw.nb .nw-tel{position:absolute;right:0;bottom:0;width:29%;border-radius:14px;box-shadow:0 18px 44px rgba(15,23,32,.24),0 2px 6px rgba(15,23,32,.12)}
  .nw.nb .nw-tel.fit{width:21%;aspect-ratio:540/1168;background:none;outline:0}
  .nw.nb .nw-tel.fit .nw-scr{height:100%;border-radius:14px}
  .nw.nb .nw-t{margin-top:0}
}
.nw-lh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:clamp(56px,7vw,104px) 0 clamp(20px,2.5vw,32px)}
.nw-hint{color:var(--ink-2)}

.kj-grid .wk .kd{color:var(--ink-2)}

.nw-lenta{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.nw-lenta .nw-tel{border-radius:12px}
@media (min-width:1100px){.nw-hint{display:none}}
@media (max-width:1099.98px){
  .nw-lenta{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:16px;
    margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 8px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .nw-lenta::-webkit-scrollbar{display:none}
  .nw-lenta > li{flex:0 0 clamp(236px,68vw,300px);scroll-snap-align:start}
}

@media (max-width:759.98px){
  .kj-pv .kj-grid{position:relative;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:16px;
    margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 8px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .kj-pv .kj-grid::-webkit-scrollbar{display:none}
  .kj-pv .kj-grid > .wk{flex:0 0 min(82%,340px);scroll-snap-align:start}
}

.final{height:170vh}

@media (max-width:759.98px){.final{height:118svh}}
@media (prefers-reduced-motion:reduce){.final{height:auto}}

.kj-note{margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:1px solid var(--edge-light);color:var(--ink-2);font-size:13px;line-height:1.5;max-width:72ch}

.pl{position:relative}

.pl-head{position:relative;z-index:6;padding:clamp(56px,8vh,104px) var(--gut) 0}
.pl-hin{max-width:440px}
html.js .pl.live .stage > .pl-head{position:absolute;left:var(--gut);top:clamp(88px,14vh,132px);padding:0}
.pl .stage{position:relative;overflow:hidden;padding:0 var(--gut) 64px}
html.js .pl.live .stage{position:sticky;top:0;height:100vh;height:100svh;padding:0}
html.js .pl.still{overflow:hidden}
html.js .pl.still .stage{height:100vh;height:100svh;min-height:600px;padding:0}

.pl-k{color:var(--on-dark-2);font-size:14px;margin-top:10px}
.pl-p{color:var(--on-dark-2);margin-top:16px;max-width:36ch}
.pl-go{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pl-slab{position:absolute;left:0;top:0;width:0;height:0}
.ply{position:absolute;left:0;top:0;width:1600px;height:1000px;transform-origin:0 0;background:var(--surface-dark-2);overflow:hidden;
  outline:6px solid var(--edge-dark);will-change:transform}
.ply img{width:100%;height:100%;object-fit:cover;object-position:top}

.ply.on{outline:10px solid var(--amber)}
.pl .ply.ghost{opacity:.16}
.ply,.ply > *,.ply::after{transition:opacity .35s var(--out),background-color .35s var(--out),outline-color .35s var(--out)}

.ply::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background-color:rgba(15,23,32,.75);
  background-image:var(--grid-dark);background-size:64px 64px,64px 64px,8px 8px,8px 8px}
.pl .ply.ghost::after{opacity:1}
.ply .pl-x{position:absolute;inset:0;opacity:0}
.pl .ply.ghost .pl-x{opacity:1}
.pl .ply[data-k="land"].ghost::after{opacity:.3}

.ply[data-k="app"]{background:var(--bg);background-image:var(--grid-light);background-size:64px 64px}

.pl .ply[data-k="app"].ghost{background-color:var(--surface-dark-2)}
.pl-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:96px}
.pl-ph img{width:auto;height:86%;border-radius:44px;outline:3px solid rgba(15,23,32,.16);object-fit:contain}
.ply[data-k="eng"]{background:var(--surface-dark-2);background-image:var(--grid-dark);background-size:64px 64px,64px 64px,8px 8px,8px 8px}
.pl-code{position:absolute;inset:0;padding:110px 120px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:30px 64px;
  font:500 56px/1.1 var(--m);color:var(--accent-pastel);white-space:normal}

html.js .pl.live .ply[data-k="eng"]:not(.on) .pl-code{opacity:0}
.pl-legend{list-style:none;position:relative;z-index:5;display:flex;flex-direction:column;gap:22px;margin-top:40px;max-width:440px}
.pl-legend li{display:flex;gap:14px;align-items:flex-start;transition:opacity .4s var(--out)}
.pl-legend .xtag{flex:none;margin-top:2px;transition:color .25s,border-color .25s}
.pl-legend b{display:block;font:600 20px/1.15 var(--d);letter-spacing:-.01em;color:var(--on-dark)}
.pl-legend .pl-lb{display:block;color:var(--on-dark-dim);font-size:13px;margin-top:4px}
.pl-legend p{color:var(--on-dark-2);font-size:14px;line-height:1.45;margin-top:6px;max-width:34ch}

.pl-legend li.on .xtag{color:var(--amber);border:2px solid var(--amber);padding:3px 4px}
html.js .pl.live .pl-legend{position:absolute;left:var(--gut);margin:0}
html.js .pl.live .pl-legend p{display:none}
html.js .pl.live .pl-legend li.on p{display:block}
html.js .pl.still .pl-legend{position:absolute;left:var(--gut);top:48px;margin:0}

html.js .pl.tight .pl-legend{gap:8px}
html.js .pl.tight .pl-legend .pl-lb{display:none}
html.js .pl.tight .pl-legend p{max-width:42ch;margin-top:4px}

html.js .pl.live.pm .pl-head{padding:64px var(--gut) 24px}
html.js .pl.live.pm .pl-legend{right:var(--gut);bottom:20px;gap:0}
html.js .pl.live.pm .pl-legend li{position:absolute;left:0;right:0;bottom:0;opacity:0}
html.js .pl.live.pm .pl-legend li.on{opacity:1}
html.js .pl.live.pm .pl-legend li p{display:block}

html.js .pl.live.pm .ply[data-k="eng"] .pl-code{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:30px 64px;padding:110px 120px;font-size:84px;line-height:1.1}

html.js .pl.live.side .pl-legend{max-width:min(440px,42%)}

html:not(.js) .pl-slab{position:relative;width:auto;height:auto;margin-top:32px}

.pl-flat{display:none}
html.js .pl.live.pf .pl-flat{display:block;position:absolute;inset:0;pointer-events:none}

html.js .pl.live.pf .ply{will-change:auto}
html.js .pl.live.pf .ply,html.js .pl.live.pf .ply > *,html.js .pl.live.pf .ply::after{transition:none}
.plf{position:absolute;opacity:0;border-radius:12px;overflow:hidden;outline:2px solid var(--amber);outline-offset:-1px;background:var(--surface-dark-2);
  transition:opacity .35s var(--out)}
.plf.on{opacity:1}
.plf-im,.plf-ph{position:absolute;inset:0}
.plf-im img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.plf[data-k="app"]{background:var(--bg);background-image:var(--grid-light);background-size:32px 32px}
.plf-ph{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px}
.plf-ph img{display:block;height:100%;width:auto;border-radius:16px;outline:1px solid rgba(15,23,32,.16)}
.plf[data-k="eng"]{background-image:var(--grid-dark);background-size:32px 32px,32px 32px,8px 8px,8px 8px}
.plf-code{position:absolute;inset:0;padding:18px;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:10px 16px}
.plf-code span{font:400 13px/1.35 var(--m);color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plf-code span:nth-child(-n+6){color:var(--accent-pastel)}
@media (prefers-reduced-motion:reduce){.plf{transition:none}}
html:not(.js) .ply{display:none}
html:not(.js) .ply[data-k="land"]{display:block;position:relative;width:100%;max-width:720px;height:auto;border-radius:12px;outline:1px solid var(--edge-dark)}
html:not(.js) .ply[data-k="land"] img{height:auto}
html:not(.js) .ply .pl-x,html:not(.js) .ply::after{display:none}

.cases{position:relative;padding:clamp(56px,7vw,96px) var(--gut);--c-fg:var(--ink);--c-fg2:var(--ink-2);--c-dim:var(--ink-2);--c-edge:var(--edge-light)}
.cases.tone-dark{--c-fg:var(--on-dark);--c-fg2:var(--on-dark-2);--c-dim:var(--on-dark-dim);--c-edge:rgba(71,126,245,.32)}
.cv-bar,.cv-line{display:none}
.case{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:clamp(32px,4.4vw,80px);
  grid-template-areas:"fw head" "fw body";align-items:start;padding:clamp(40px,5vw,72px) 0;color:var(--c-fg)}
.case + .case{border-top:1px solid var(--c-edge)}
.c-fw{grid-area:fw;position:sticky;top:88px;display:flex;flex-direction:column;gap:14px}
.c-head{grid-area:head}
.c-body{grid-area:body;margin-top:clamp(28px,3vw,44px)}

.c-frame.xtile{outline-color:var(--c-edge)}
.c-hud{display:flex;flex-direction:column;gap:6px;color:var(--c-dim);font-variant-numeric:tabular-nums}
.c-hud .big{font-size:13px;color:var(--c-fg)}
html:not(.js) .c-hud{display:none}

.c-toc{display:none}
@media (min-width:1024px) and (min-height:760px){
  html.js .c-toc{display:flex;flex-direction:column;list-style:none;margin-top:6px;border-top:1px solid var(--c-edge);padding-top:8px}
}
.c-toc button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;text-align:left;color:var(--c-fg2);font:500 15px/1.2 var(--t);transition:color .25s}
.c-toc button:hover{color:var(--c-fg)}
.c-toc .xtag{transition:color .25s,border-color .25s}
.c-toc li.on button,.c-toc li.on .xtag{color:var(--amber);border-color:var(--amber)}
.c-flag{color:var(--c-dim);font-size:14px}
.c-head .h1{margin-top:12px}
.c-head .h1:focus{outline:none}
.c-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px;margin-top:28px;padding-top:22px;border-top:1px solid var(--c-edge)}
.c-meta dt{color:var(--c-dim);font-size:13px;line-height:1.3}
.c-meta dd{color:var(--c-fg);font-size:15px;line-height:1.35;font-weight:500;margin-top:5px}
.case .c-intro{max-width:60ch;margin-top:28px;color:var(--c-fg2)}
.c-go{margin-top:28px}
.c-in{margin-top:20px}
.c-note{color:var(--c-dim);font-size:15px;max-width:44ch}
.c-sec{padding:clamp(32px,3.4vw,44px) 0;border-top:1px solid var(--c-edge);scroll-margin-top:64px}
.c-lbl{display:flex;align-items:center;gap:12px;color:var(--c-dim);font:500 14px/1 var(--t);margin-bottom:16px;transition:color .25s}
.c-lbl .xtag{transition:color .25s,border-color .25s}
.cases.tone-dark .c-sec.on .c-lbl,.cases.tone-dark .c-sec.on .c-lbl .xtag{color:var(--amber);border-color:var(--amber)}
.c-sec .h3{color:var(--c-fg)}
.c-sec p{color:var(--c-fg2);font-size:clamp(16px,1.15vw,17px);line-height:1.6;margin-top:14px;max-width:62ch}
.c-list{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px;max-width:62ch}
.c-list li{position:relative;padding-left:22px;color:var(--c-fg2);line-height:1.5}

.c-list li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent-bright)}
.cases.tone-light .c-list li::before{background:var(--accent)}
.c-shots{display:grid;gap:22px;margin-top:24px}
.c-shots.pair{grid-template-columns:1fr 1fr;gap:14px}
.c-shot img{width:100%;height:auto;border-radius:12px;outline:1px solid var(--c-edge)}
.c-shot video{display:block;width:100%;height:auto;border-radius:12px;outline:1px solid var(--c-edge);background:var(--surface-dark)}
.c-shot figcaption{color:var(--c-dim);font-size:14px;line-height:1.4;margin-top:10px}
.c-phones{display:flex;gap:16px;margin-top:24px}
.c-phone{width:min(46%,250px)}
.c-phone img,.c-phone video{display:block;width:100%;height:auto;border-radius:22px;outline:1px solid var(--c-edge);background:var(--surface-dark)}

.c-vno{display:block;width:100%;height:auto;border-radius:12px;outline:1px solid var(--c-edge)}
.c-phone .c-vno{border-radius:22px}
.c-shot:has(> noscript > img) > video,.c-phone:has(> noscript > img) > video{display:none}
.c-chips{display:flex;flex-wrap:wrap;gap:8px}
.c-next{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:8px;padding:18px;border:1px solid var(--c-edge);border-radius:12px;
  transition:border-color .2s}
.c-next:hover{border-color:var(--accent-bright)}
.c-next-l{color:var(--c-dim);font-size:14px}
.c-next-r{display:flex;align-items:center;gap:16px;text-align:right}
.c-next-r img{width:128px;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:8px;outline:1px solid var(--c-edge);flex:none}
.c-next-r span{display:flex;flex-direction:column;gap:4px}
.c-next-r b{font:600 19px/1.2 var(--d);color:var(--c-fg)}
.c-next-r i{font-style:normal;color:var(--c-dim);font-size:14px}

html.js .cases{position:fixed;inset:0;z-index:60;padding:0;overflow-y:auto;overscroll-behavior:contain;display:none;
  background:var(--surface-dark);background-image:var(--grid-dark);background-size:64px 64px,64px 64px,8px 8px,8px 8px;background-attachment:local}
html.js .cases.open{display:block}
html.js .case{display:none;padding:clamp(32px,4vw,56px) var(--gut) 96px}
html.js .case.on{display:grid}
html.js .case{scroll-margin-top:56px}
html.js .case + .case{border-top:0}

html.js .cv-bar{display:flex;position:sticky;top:0;z-index:4;height:56px;align-items:center;justify-content:space-between;gap:16px;
  padding:0 max(var(--gut),env(safe-area-inset-right)) 0 max(var(--gut),env(safe-area-inset-left));
  background:var(--surface-dark);border-bottom:1px solid var(--c-edge)}
.cv-t{display:flex;align-items:baseline;gap:14px;min-width:0;color:var(--on-dark)}
.cv-t b{font:600 17px/1.2 var(--d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-t .mono{color:var(--on-dark-dim);flex:none;white-space:nowrap}
.cv-x{min-height:44px;padding:0 16px}

.cv-site{min-height:44px;padding:0 14px;margin-left:auto;flex:none}
.cv-site[hidden]{display:none}
.cv-site .cv-sm{display:none}
@media (max-width:759.98px){.cv-site .cv-lg{display:none}.cv-site .cv-sm{display:inline}}

.c-tel{display:none}

.c-more{margin-top:28px}
.c-more .btn-line{min-width:min(100%,260px);justify-content:center}
.c-more-n{color:var(--c-dim)}

@media (min-width:760px) and (min-height:501px){.c-more{display:none}}
@media (max-width:759.98px),(max-height:500px){html.js .case.fold .c-more ~ .c-sec{display:none}}

@media (max-height:500px){.case .c-fw,.case .c-shots{max-width:calc(100svh * 1.5)}}
@media (max-width:759.98px){
  .case.has-tel{grid-template-areas:"tel" "head" "body"}
  .case.has-tel .c-fw,.case.has-tel .c-ph-sec{display:none}
  .c-tel{grid-area:tel;position:relative;display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .c-tel::-webkit-scrollbar{display:none}
  .c-tel .c-phone{flex:0 0 min(64%,250px);width:auto;scroll-snap-align:start}
  .c-tel .c-phone img{aspect-ratio:9/16;object-fit:cover;object-position:top}
  .c-tel .c-phone:only-child{flex-basis:min(78%,300px)}
  
  .c-tel .c-phone.t45{flex-basis:min(70%,270px)}
  .c-tel .c-phone.t45 img{aspect-ratio:4/5;border-radius:16px}
  
  .c-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:14px;padding-top:12px}
  .c-meta .cm-k{display:none}
  .c-meta dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .c-meta dd{margin-top:0;font-size:14px;font-weight:500;color:var(--c-fg2)}
  .c-meta > div:not(.cm-k) ~ div:not(.cm-k) dd::before{content:"·";margin:0 8px;color:var(--c-dim)}
  .case .c-intro{margin-top:16px}
  html.js .c-go-a{display:none}
}

html.js .cv-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent-bright);transform:scaleX(0);transform-origin:0 50%}
html.js .c-fw{top:80px}
html.cv-open,html.cv-open body{overflow:hidden}
html.js .cases.cv-in{animation:kjIn .62s var(--out) both}
html.js .cases.cv-out{animation:kjOut .38s cubic-bezier(.7,0,.84,0) both}
html.js .cv-line{display:block;position:fixed;z-index:61;left:0;right:0;top:0;height:2px;background:var(--accent-bright);box-shadow:var(--glow);opacity:0;pointer-events:none}
html.js .cv-line.in{animation:kjLineIn .62s var(--out) both}
html.js .cv-line.out{animation:kjLineOut .38s cubic-bezier(.7,0,.84,0) both}
@keyframes kjIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes kjOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes kjLineIn{0%{opacity:1;transform:translateY(0)}88%{opacity:1}100%{opacity:0;transform:translateY(100vh)}}
@keyframes kjLineOut{0%{opacity:1;transform:translateY(100vh)}88%{opacity:1}100%{opacity:0;transform:translateY(0)}}

@media (max-width:1023.98px){
  .case{grid-template-columns:minmax(0,1fr);grid-template-areas:"fw" "head" "body"}
  .c-fw{position:relative;top:auto}
  html.js .c-fw{top:auto}
  .c-head{margin-top:28px}
  
  .cv-t{flex-direction:column;align-items:flex-start;gap:3px}
  .cv-t b{font-size:16px;max-width:100%}
}
@media (max-width:759.98px){
  .stol .hero{flex-direction:column;align-items:flex-start;gap:24px}
  .stol .lead{margin-top:14px}
  .stol .count > div{gap:6px}
  .stol .count .num{font-size:40px}
  .stol .count span:last-child{font-size:14px}
  
  .stol .info{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));width:auto;bottom:calc(16px + env(safe-area-inset-bottom));padding:12px 12px 14px 16px;gap:6px}
  .stol .info b{font-size:22px}
  .gorod .info .vnutri,.gorod .info .note{font-size:14px}
  .kj-a .sec-head{margin-bottom:20px}
  .kj-a{padding-bottom:56px}
  .kj-b{padding-top:48px}
  .pl-p{margin-top:12px}
  .pl-go{margin-top:18px}
  .pl-legend b{font-size:17px}
  html.js .pl.still .stage{height:auto;min-height:0;padding:0 var(--gut) 56px}
  html.js .pl.still .pl-legend{position:relative;left:auto;top:auto}
  .c-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-x{padding:0 14px}
  .c-next{flex-direction:column;align-items:flex-start}
  .c-next-r{text-align:left;flex-direction:row-reverse;justify-content:flex-end}
  .c-shots.pair{grid-template-columns:1fr}
  html.js .case{padding-top:16px}
}
@media (prefers-reduced-motion:reduce){
  
  .final{height:auto}
  .final .stage{position:relative;min-height:100vh;min-height:100svh}
  .stol .hint b::after{animation:none}
  html.js .cases.cv-in,html.js .cases.cv-out,html.js .cv-line.in,html.js .cv-line.out{animation:none}
  .gz-s,.gz,.gz-free,.gorod .gz-tag,.pl-legend li,.ply,.ply > *{transition:none}
}

.c-sloi{position:relative;display:none}
.c-sloi .sl-stack{position:relative;width:100%;height:100%}
.c-sloi.d{height:min(66vh,640px)}
html.js .c-fw.sl .c-frame,html.js .c-fw.sl .c-hud{display:none}
html.js .c-fw.sl .c-sloi.d{display:block}
html:not(.js) .c-sloi{display:none!important}
.c-slc{padding:20px 0 22px;border-top:1px solid var(--edge-dark);transition:opacity .35s var(--out)}
html.js .c-slc{opacity:.42}
html.js .c-slc.on{opacity:1}
.c-slc .xlabel{color:var(--amber)}
.c-slt{font:600 21px/1.2 var(--d);letter-spacing:-.01em;margin:8px 0 6px;color:var(--c-fg)}
.c-slc > p{color:var(--c-fg2);margin:0 0 12px}
.c-sl .sl-f{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.c-sl .sl-f li{display:grid;grid-template-columns:minmax(0,16ch) minmax(0,1fr);gap:14px;font-size:14px;line-height:1.4}
.c-sl .sl-f span{color:var(--on-dark-dim)}
.c-sl .sl-f b{color:var(--c-fg);font-weight:500}
.c-sl .sl-o{margin:12px 0 0;padding-left:20px;color:var(--c-fg2);font-size:14px;line-height:1.55}
.c-sl q{quotes:"«" "»"}
.sl-p{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;background:var(--surface-dark-2);
  outline:3px solid var(--edge-dark);transition:transform .55s var(--out),outline-color .35s var(--out)}
.sl-p.on{outline:10px solid var(--amber)}
.sl-p.ghost{background:transparent;outline-color:rgba(71,126,245,.4)}
.sl-p.ghost .sl-in{opacity:0}
.sl-in{position:absolute;inset:0;overflow:hidden;transition:opacity .35s var(--out)}
.sl-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.sl-in img.dim{opacity:.32}
.sl-n{position:absolute;left:24px;top:-60px;font-size:32px;color:var(--on-dark-dim);white-space:nowrap}
.sl-p.on .sl-n{color:var(--amber)}
.pl-dk{position:absolute;inset:0;background:var(--surface-dark)}
.pl-bx{position:absolute;outline:4px solid var(--accent-bright);outline-offset:-4px}
.pl-bx.f{outline-style:dashed;outline-color:var(--accent-pastel)}
.pl-ser{padding:96px 120px}
.pl-ser p{margin:0}
.pl-ser .s-u{font:400 30px/1.3 var(--m);color:var(--on-dark-dim)}
.pl-ser .s-t{font:600 54px/1.15 var(--d);color:var(--accent-bright);margin-top:14px}
.pl-ser .s-d{font:400 32px/1.4 var(--t);color:var(--on-dark-2);margin-top:18px;max-width:1100px}
.pl-ser .s-r{font:400 28px/1.35 var(--t);color:var(--on-dark-2);margin-top:26px;display:flex;gap:24px}
.pl-ser .s-r b{font:500 24px/1.5 var(--m);color:var(--accent-pastel);border:2px solid rgba(71,126,245,.55);border-radius:6px;padding:0 10px;flex:none}
.pl-ser q{quotes:none}
.pl-code{padding:72px 96px;display:flex;flex-direction:column;gap:6px}
.pl-code code{display:block;font:400 27px/1.35 var(--m);color:var(--on-dark-dim);white-space:pre;overflow:hidden}
.pl-code code:nth-child(-n+6){color:var(--accent-pastel)}
@media (max-width:1023.98px){
  html.js .c-sl .c-sloi.m{display:block;position:sticky;top:60px;z-index:2;height:34vh;height:34svh;margin:14px calc(-1 * var(--gut)) 6px;
    background:var(--surface-dark);border-bottom:1px solid var(--edge-dark)}
  .c-sl .sl-f li{grid-template-columns:minmax(0,13ch) minmax(0,1fr);font-size:13px}
}
@media (prefers-reduced-motion:reduce){.sl-p,.sl-in,.c-slc{transition:none}}

.hero-cta{display:none}
.nw.nb.nw-m{display:none}
.kj-grid .wk.wk-m{display:none}
@media (max-width:759.98px){
  .hero-cta{display:block;margin-top:22px}
  .hero-cta .btn{width:100%;justify-content:center}
  .gorod .gz-cam,.gorod .gz-plates,.gorod .scanline,.gorod .info,.gorod .gz-viz,.gorod .hint{display:none}
  html.js .gorod .stage,.gorod .stage{position:relative;height:auto;min-height:0;padding-bottom:48px}
  .gorod{height:auto}
  .nw.nb.nw-m{display:block}
  .nw-lh,.nw-lenta{display:none}
  #platforma{display:none}
  .kj-grid .wk.wk-m{display:block}
  
  html.js #setka.fold ~ .kj-work{display:none}
  
  html.js #main [data-reveal]{clip-path:none;transition:none}
  html.js #main [data-reveal]::after{display:none}
  
  .nw.nb .nw-d,#novoe .nw-head .kj-work-p,#raboty > .wrap > .sec-head .kj-work-p{display:none}
}