/* Работы и страницы проектов: сетка роликов (works.js) и «Мир» (world.js). */

/* ---------- сетка роликов (главная) и список работ (запасной вид страницы работ) ---------- */
.wk-grid, .wk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 2.6vw, 48px) clamp(16px, 2.6vw, 40px); width: min(81vw, 1500px); margin: clamp(18px, 2.4vw, 40px) auto 0; padding-bottom: clamp(90px, 14vh, 200px); }
.wk { position: relative; }
.wk.is-off { display: none; }
.wk > a { display: block; }
.wk__m { position: relative; display: block; aspect-ratio: 1.95; overflow: hidden; border-radius: 3px; background: #1a2021; }
.wk__m img, .wk__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s var(--o-ease), opacity .4s; }
.wk > a:hover .wk__m img, .wk > a:hover .wk__m video { transform: scale(1.035); }
.wk__m video { opacity: 0; }
.wk__m.is-play video { opacity: 1; }
.is-gl .wk__m img, .is-gl .wk__m video { opacity: 0 !important; }
.is-gl .wk__m { background: none; }
.wk__c { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 10px 0 10px; border-bottom: 1px solid var(--o-line); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.3; }
.wk__n { font-weight: 500; letter-spacing: -.01em; }
.wk__ar { grid-row: 1 / 3; grid-column: 2; align-self: end; font-size: 1.15em; line-height: 1; transition: transform .5s var(--o-ease); }
.wk > a:hover .wk__ar { transform: translate(3px, 3px); }
.wk__k { color: var(--o-mut); }
.wk__k b { font-weight: 400; color: var(--o-yellow); }
.wk__c::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--o-fg); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--o-ease); }
.wk > a:hover .wk__c::after, .wk > a:focus-visible .wk__c::after { transform: none; }
.wk > a:focus-visible { outline-offset: 6px; }

/* WebGL-слой поверх страницы: рисует только кадры, подписи остаются текстом */
.wk-gl { position: fixed; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.is-gl .wk__c { position: relative; z-index: 4; }
.wk-page > section, .cs-stage > section { position: relative; z-index: 5; }
.wk-page .dirs, .wk-page .ask { background: var(--o-bg); }
.wk-page .ask.sec--light { background: var(--o-light); }

/* плавающая плашка «обсудить проект» */
.wk-float { position: fixed; left: 50%; bottom: clamp(14px, 2vw, 26px); z-index: 30; display: inline-flex; gap: .7em; align-items: center; padding: .55em .7em .55em 1.1em; border-radius: 999px;
  background: rgba(18, 22, 23, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(237, 233, 232, .14), 0 18px 40px -18px rgba(0, 0, 0, .7);
  font-size: var(--o-fs-ui); white-space: nowrap; translate: -50% 0; transition: translate .6s var(--o-ease), opacity .4s; }
.wk-float span { color: var(--o-mut); }
.wk-float b { font-weight: 500; display: inline-flex; gap: .45em; align-items: center; padding: .38em .9em; border-radius: 999px; background: var(--o-yellow); color: var(--o-ink); text-transform: uppercase; }
.wk-float:hover b i { transform: translateX(4px); }
.wk-float b i { font-style: normal; transition: transform .5s var(--o-ease); }
.wk-float.is-away { translate: -50% 160%; opacity: 0; pointer-events: none; visibility: hidden; transition: translate .6s var(--o-ease), opacity .4s, visibility 0s .6s; }

/* направления на странице работ — та же полоса, что на главной */
.wk-page .dirs { padding-bottom: 0; }

@media (max-width: 759px) {
  .wk-grid, .wk-list { grid-template-columns: 1fr; gap: 26px; width: auto; margin-inline: var(--o-pad); }
  .wk-float span { display: none; }
}

/* сетка на главной: во всю ширину страницы, отступ сверху — от заголовка раздела */
.wk-grid--home { width: auto; margin: clamp(10px, 1.4vw, 24px) var(--o-pad) 0; padding-bottom: 0; }

/* ---------- страница проекта ---------- */
/* ---------- навигация проекта ---------- */
.cs-band { position: relative; z-index: 5; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: calc(clamp(42px, 4.2vw, 64px) + 34px) var(--o-pad) 14px; font-size: var(--o-fs-ui); text-transform: uppercase; }
.cs-band__path { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; margin: 0; }
.cs-band__path > span[aria-hidden] { color: var(--o-mut); }
.cs-band a { display: inline-flex; align-items: center; gap: .45em; min-height: 32px; border-bottom: 1px solid transparent; transition: border-color .3s; }
.cs-band a:hover { border-color: currentColor; }
.cs-band__next span { display: inline-block; transition: transform .5s var(--o-ease); }
.cs-band__next:hover span { transform: translateX(5px); }
.cs-stage { position: relative; z-index: 5; isolation: isolate; overflow: clip; }
.wk-page .cs-stage > .cs-hero { padding-top: clamp(56px, 6vw, 110px); }
.cs-stage + .cs-next { border-top: 0; }
/* плашка Vanta: липнет к низу экрана, пока видна сцена; ноль высоты — не сдвигает вёрстку */
.cs-pin { position: sticky; bottom: 0; z-index: 30; height: 0; }
.wk-page .cs-pin__in { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(18, 22, 23, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #EDE9E8; font: 400 13px/1 "Inter Tight", Arial, sans-serif; letter-spacing: -.01em; text-transform: uppercase; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .35s var(--o-ease), transform .5s var(--o-ease), visibility 0s .5s; }
.cs-pin.is-on .cs-pin__in, html:not(.js) .cs-pin .cs-pin__in { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--o-ease), transform .5s var(--o-ease); }
.wk-page .cs-pin__in svg { width: 30px; height: 30px; flex: none; color: #EDE9E8; }
.wk-page .cs-pin__in a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .85em; border: 0; border-radius: 999px; color: #EDE9E8; font: inherit; text-decoration: none; transition: background-color .3s, color .3s; }
.wk-page .cs-pin__in a:hover { background: #EDE9E8; color: #121617; }
.wk-page .cs-pin__in b { font-weight: 400; color: #A3A9AB; padding-right: .6em; }
@media (prefers-reduced-motion: reduce) { .wk-page .cs-pin__in { transform: none; } }
@media (max-width: 759px) {
  .cs-band { padding-top: 84px; }
  .cs-band .cs-band__next { display: none; }
  .wk-page .cs-pin__in { left: 10px; right: 10px; white-space: nowrap; }
  .wk-page .cs-pin__in a { padding: 0 .7em; }
  .wk-page .cs-pin__in b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.cs-hero { padding-top: clamp(118px, 11vw, 200px); padding-bottom: clamp(30px, 3.4vw, 60px); }
.cs-hero__lbl { color: var(--o-mut); margin-bottom: 16px; }
.cs-hero__lbl a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.cs-hero__lbl a:hover { border-color: currentColor; }
.cs-hero__h { font-size: var(--o-fs-h1); font-weight: 500; letter-spacing: -.025em; line-height: 1; }
.cs-hero__st { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: var(--o-fs-ui); text-transform: uppercase; }
.cs-hero__st .pill { padding: .3em .85em .32em; }
.pill--dev { border-color: var(--o-yellow); color: var(--o-yellow); }
.cs-hero__row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 80px); align-items: end; margin-top: clamp(26px, 3vw, 54px); }
.cs-hero__lead { font-size: clamp(19px, 1.7vw, 28px); line-height: 1.3; max-width: 30em; }
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.cs-facts div { border-top: 1px solid var(--o-line); padding-top: 10px; }
.cs-facts dt { font-size: clamp(30px, 3.2vw, 58px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.cs-facts dd { margin: 6px 0 0; color: var(--o-mut); font-size: 14px; line-height: 1.35; }
.cs-hero__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: clamp(24px, 2.6vw, 44px); }
.cs-btn { display: inline-flex; gap: .5em; align-items: center; min-height: 46px; padding: .55em 1.2em; font-size: var(--o-fs-ui); text-transform: uppercase; }
.cs-note { color: var(--o-mut); font-size: 14px; max-width: 34em; }

.cs-video { padding: 0 var(--o-pad) clamp(60px, 7vw, 130px); }
.cs-video__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(12px, 1.6vw, 28px); align-items: end; }
.cs-video__in--solo { grid-template-columns: 1fr; }
.cs-win { position: relative; border-radius: 10px; overflow: hidden; background: #0c0f10; box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(237, 233, 232, .1); }
.cs-win__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgba(237, 233, 232, .08); font-size: 12px; color: var(--o-mut); }
.cs-win__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(237, 233, 232, .18); }
.cs-win__bar span { margin-left: 10px; }
.cs-win video, .cs-win img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; object-position: top; }
.cs-win__pp { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(18, 22, 23, .7); color: var(--o-fg); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cs-win__pp svg { width: 14px; height: 14px; }
.cs-phones { display: flex; gap: clamp(8px, 1vw, 16px); }
.cs-phone { width: clamp(120px, 13vw, 230px); margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(237, 233, 232, .12), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.cs-phone img { display: block; width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.cs-phone:nth-child(2) { translate: 0 -12%; }

.cs-s { padding-block: clamp(60px, 7vw, 130px); border-top: 1px solid var(--o-line); }
.cs-s__head { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: start; margin-bottom: clamp(26px, 3vw, 56px); }
.cs-s__head .lbl { color: var(--o-mut); padding-top: .5em; }
.cs-s__h { font-size: var(--o-fs-h2); }
.cs-task { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); margin-left: 33.4%; }
.cs-task h3 { font-size: var(--o-fs-ui); text-transform: uppercase; font-weight: 500; margin-bottom: .8em; }
.cs-task p { line-height: 1.45; color: var(--o-mut); max-width: 30em; }
.cs-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px); margin: 0; padding: 0; list-style: none; }
.cs-steps li { border-top: 1px solid var(--o-fg); padding-top: 12px; }
.cs-steps span { display: block; color: var(--o-mut); font-size: var(--o-fs-ui); margin-bottom: 1.4em; }
.cs-steps b { display: block; font-weight: 500; font-size: clamp(18px, 1.5vw, 25px); letter-spacing: -.02em; line-height: 1.12; margin-bottom: .55em; }
.cs-steps p { color: var(--o-mut); line-height: 1.45; font-size: clamp(15px, 1.1vw, 18px); }

.cs-shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 44px) clamp(12px, 1.4vw, 24px); }
.cs-shot { margin: 0; grid-column: span 7; }
.cs-shot:nth-child(4n + 2) { grid-column: 6 / span 7; }
.cs-shot:nth-child(4n + 3) { grid-column: 2 / span 6; }
.cs-shot:nth-child(4n + 4) { grid-column: span 5; align-self: end; }
.cs-shot__f { border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(237, 233, 232, .1); }
.cs-shot img { display: block; width: 100%; height: auto; }
.cs-shot figcaption { display: flex; gap: 12px; margin-top: 10px; color: var(--o-mut); font-size: 14px; line-height: 1.4; }
.cs-shot figcaption i { font-style: normal; color: var(--o-fg); }

/* структура сайта: страницы колонками, разделы — пронумерованным списком, связи — тонкими линиями */
.cs-map { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 30px 0; }
.cs-map__root { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding-bottom: 22px; }
.cs-map__root b { font-weight: 500; font-size: clamp(18px, 1.4vw, 24px); }
.cs-map__root span { color: var(--o-mut); font-size: var(--o-fs-ui); text-transform: uppercase; }
.cs-page { position: relative; min-width: 0; padding: 18px clamp(12px, 1.2vw, 20px) 6px 0; border-top: 1px solid var(--o-line); }
.cs-page::before { content: ""; position: absolute; left: 0; top: -22px; width: 1px; height: 22px; background: var(--o-line); }
.cs-page h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: clamp(16px, 1.25vw, 21px); font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cs-page ol { margin: 12px 0 0; padding: 0 0 0 12px; border-left: 1px solid var(--o-line); list-style: none; counter-reset: sec; }
.cs-page li { position: relative; padding: 5px 0 5px 10px; color: var(--o-mut); font-size: 14.5px; line-height: 1.35; counter-increment: sec; overflow-wrap: anywhere; }
.cs-page li::before { content: counter(sec, decimal-leading-zero); margin-right: 8px; color: var(--o-fg); font-size: 11px; }
.cs-page li::after { content: ""; position: absolute; left: -12px; top: 13px; width: 8px; height: 1px; background: var(--o-line); }
.cs-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(26px, 3vw, 50px); font-size: var(--o-fs-ui); text-transform: uppercase; }
.cs-feats .pill { padding: .35em .9em; }

.cs-did { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); }
.cs-did div { border-top: 1px solid var(--o-line); padding-top: 12px; }
.cs-did i { display: block; font-style: normal; color: var(--o-yellow); font-size: var(--o-fs-ui); text-transform: uppercase; margin-bottom: 1.2em; }
.cs-did b { display: block; font-weight: 500; font-size: clamp(17px, 1.35vw, 23px); line-height: 1.15; margin-bottom: .5em; }
.cs-did p { color: var(--o-mut); line-height: 1.45; font-size: clamp(14.5px, 1.05vw, 17px); }
.cs-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 60px); margin-top: clamp(40px, 5vw, 90px); }
.cs-inside li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--o-line); }
.cs-inside b { font-weight: 500; }
.cs-inside span { color: var(--o-mut); line-height: 1.45; }
.cs-tech .lbl { color: var(--o-mut); display: block; margin-bottom: 12px; }
.cs-tech ul { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--o-fs-ui); }
.cs-tech li { border: 1.2px solid var(--o-line); border-radius: 999px; padding: .3em .85em; }
.cs-honest { margin-top: clamp(26px, 3vw, 50px); padding: 16px 18px; border-left: 2px solid var(--o-yellow); color: var(--o-mut); max-width: 50em; line-height: 1.5; background: rgba(252, 232, 127, .04); }

.cs-next { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; padding: clamp(40px, 5vw, 90px) var(--o-pad); border-top: 1px solid var(--o-line); }
.cs-next__all { font-size: var(--o-fs-ui); text-transform: uppercase; display: inline-flex; gap: .5em; }
.cs-next__go { text-align: right; }
.cs-next__go small { display: block; color: var(--o-mut); font-size: var(--o-fs-ui); text-transform: uppercase; margin-bottom: 10px; }
.cs-next__go b { font-size: clamp(36px, 6.4vw, 120px); font-weight: 500; letter-spacing: -.045em; line-height: 1; transition: color .4s; }
.cs-next__go b span { display: inline-block; transition: transform .6s var(--o-ease); }
.cs-next__go:hover b span { transform: translateX(10px); }

@media (max-width: 1099px) {
  .cs-steps, .cs-did { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-task { margin-left: 0; }
}
@media (max-width: 899px) {
  .cs-hero__row { grid-template-columns: 1fr; }
  .cs-video__in { grid-template-columns: 1fr; }
  .cs-phones { justify-content: center; }
  .cs-phone:nth-child(2) { translate: 0 0; }
  .cs-shots { grid-template-columns: 1fr; }
  .cs-shot, .cs-shot:nth-child(n) { grid-column: 1 / -1; }
  .cs-in { grid-template-columns: 1fr; }
  .cs-s__head { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .cs-task, .cs-steps, .cs-did { grid-template-columns: 1fr; }
  .cs-inside li { grid-template-columns: 1fr; gap: 4px; }
  .cs-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-next { grid-template-columns: 1fr; }
  .cs-next__go { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .wk__m img, .wk__m video, .wk__ar, .cs-next__go b span { transition: none; }
}


/* ---------- поле работ: первый экран страницы работ (world.js) ---------- */
.ww { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--o-bg); }
.ww::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: clamp(110px, 12vw, 170px); background: linear-gradient(var(--o-bg) 30%, rgba(18, 22, 23, 0)); pointer-events: none; }   /* шапка сайта — над тёмным, а не над кадрами */
.ww:focus { outline: none; }
.ww:focus-visible { outline: 2px solid var(--o-yellow); outline-offset: -6px; }
.ww .wd__gl { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.ww.is-drag .wd__gl { cursor: grabbing; }
.ww.is-over:not(.is-drag) .wd__gl { cursor: pointer; }
.wk-field.is-field .wk-list:not(:focus-within) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: 0; }
.wk-list { padding-top: 110px; }
.wk-field.is-field .wk-list:focus-within { padding-top: clamp(30px, 4vw, 60px); }
.wd__fx { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(5, 7, 8, .62) 100%); }
.wd__fx::after { content: ""; position: absolute; inset: 0; background: url("../img/grain-128.png") repeat; opacity: .06; }

.wd__title { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; pointer-events: none; }
.wd__title span { position: relative; display: block; font-size: clamp(64px, 14vw, 260px); font-weight: 500; letter-spacing: -.05em; line-height: 1; text-transform: uppercase; animation: wd-in 1.3s var(--o-ease) both; }
.wd__title span::before, .wd__title span::after { content: attr(data-t); position: absolute; inset: 0; mix-blend-mode: screen; opacity: .85; }
.wd__title span::before { color: #ff5a4f; animation: wd-g1 2.3s steps(1) infinite; }
.wd__title span::after { color: #4fc8ff; animation: wd-g2 1.9s steps(1) infinite; }
@keyframes wd-in { from { opacity: 0; letter-spacing: .12em; filter: blur(16px); } }
@keyframes wd-g1 { 0% { clip-path: inset(8% 0 62% 0); transform: translate(-4px, 0); } 18% { clip-path: inset(44% 0 31% 0); transform: translate(5px, -1px); } 36% { clip-path: inset(78% 0 4% 0); transform: translate(-7px, 1px); } 54% { clip-path: inset(22% 0 58% 0); transform: translate(2px, 0); } 72% { clip-path: inset(56% 0 22% 0); transform: translate(-3px, 1px); } 90% { clip-path: inset(100% 0 0 0); } }
@keyframes wd-g2 { 0% { clip-path: inset(62% 0 12% 0); transform: translate(4px, 0); } 22% { clip-path: inset(14% 0 70% 0); transform: translate(-5px, 1px); } 44% { clip-path: inset(36% 0 40% 0); transform: translate(6px, 0); } 66% { clip-path: inset(84% 0 2% 0); transform: translate(-2px, -1px); } 88% { clip-path: inset(100% 0 0 0); } }
.wd__title.is-gone span { animation: wd-out .9s var(--o-ease) forwards; }
@keyframes wd-out { 0% { opacity: 1; } 30% { opacity: 1; transform: skewX(-12deg) translateX(-2%); } 100% { opacity: 0; transform: scale(1.18) skewX(-18deg); letter-spacing: .14em; filter: blur(18px); } }

.wd__hint { position: absolute; left: 50%; top: calc(50% + clamp(56px, 8.6vw, 150px)); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; color: var(--o-mut); font-size: 13px; text-transform: uppercase; pointer-events: none; transition: opacity .5s, translate .6s var(--o-ease); }
.wd__hint svg { width: 28px; height: 28px; fill: none; stroke: var(--o-fg); stroke-width: 1.2; }
.wd__hint ellipse { transform-origin: 12px 12px; animation: wd-spin 3.2s ease-in-out infinite; }
@keyframes wd-spin { 50% { transform: scaleX(.12); } }
.wd__hint.is-gone { opacity: 0; translate: -50% 14px; }
.wd__label { position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; gap: .55em; align-items: baseline; padding: .5em .9em .52em; border-radius: 999px; background: rgba(18, 22, 23, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(237, 233, 232, .14); font-size: 14px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; }
.wd__label b { font-weight: 500; } .wd__label span { color: var(--o-mut); } .wd__label i { font-style: normal; }
.ww.is-over:not(.is-drag) .wd__label { opacity: 1; }
@media (hover: none) { .wd__label { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .wd__title span, .wd__title span::before, .wd__title span::after, .wd__hint ellipse { animation: none; }
  .wd__title span::before, .wd__title span::after { display: none; }
  .wd__title.is-gone span { animation: none; opacity: 0; transition: opacity .4s; }
}