/*
  3DWebStudio — премиальная разворотная карточка работы (work.php).
  Подключается поверх assets/work-page.css. Все новые правила сознательно
  завязаны на новые классы (.wdetail, .wgallery, .winfo, .wpanels, .wpanel...),
  а не на старые .work-detail-hero/.work-preview/.work-info-card — это сделано,
  чтобы не задеть ничего другого, что могло бы переиспользовать старые имена,
  и чтобы старый work-page.css можно было оставить подключённым без конфликтов
  (.work-detail-shell/.work-detail-loading по-прежнему берутся из него).
  Палитра и шрифты — из общей дизайн-системы сайта: teal rgba(53,232,245,*),
  violet rgba(124,92,255,*), pink rgba(255,79,180,*), gold rgba(224,184,79,*);
  --public-font-heading (Unbounded) на заголовках, --public-font-family (Golos
  Text) на тексте, .num-mono (IBM Plex Mono) на цифрах.
  Подробности: docs/work_detail_premium_redesign_2026-07-17.md
*/

[data-work-app] .work-detail-shell {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

[data-work-app] .wg-actions .public-btn,
[data-work-app] .wpanel .public-btn {
  min-height: 32px;
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 10.8px;
  line-height: 1.08;
}

[data-work-app] .wg-actions .public-btn-buy {
  border-color: rgba(53, 232, 245, .7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)),
    linear-gradient(135deg, rgba(53, 232, 245, .28), rgba(15, 184, 201, .14));
  color: #ecfeff;
}

/* ================= Верхний блок: галерея + инфо ================= */

.wdetail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 26px;
  align-items: start;
}

/* ---- Галерея ---- */

.wgallery {
  display: grid;
  gap: 12px;
}

.wgallery-stage {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(53, 232, 245, .28);
  background: rgba(10, 9, 17, .7);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 18px 50px -22px rgba(53, 232, 245, .35);
  aspect-ratio: 4 / 3;
}

.wgallery-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .22s ease;
}

.wgallery-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 66% 28%, rgba(255, 79, 180, .34), transparent 30%),
    linear-gradient(135deg, rgba(53, 232, 245, .32), rgba(124, 92, 255, .62));
}

.wgallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(53, 232, 245, .4);
  background: rgba(10, 9, 17, .58);
  backdrop-filter: blur(10px);
  color: #eafcff;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  z-index: 2;
}

.wgallery-arrow:hover {
  border-color: rgba(53, 232, 245, .85);
  background: rgba(53, 232, 245, .16);
  transform: translateY(-50%) scale(1.08);
}

.wgallery-arrow svg {
  width: 18px;
  height: 18px;
}

.wgallery-prev { left: 14px; }
.wgallery-next { right: 14px; }

.wgallery-counter {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(8, 8, 15, .68);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.wgallery-shield {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(53, 232, 245, .38);
  background: rgba(8, 8, 15, .62);
  backdrop-filter: blur(10px);
  color: #c9f8f1;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  max-width: calc(100% - 28px);
}

.wgallery-shield svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #6fe9e0;
}

.wgallery-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(53, 232, 245, .4) transparent;
}

.wgallery-thumbs::-webkit-scrollbar {
  height: 6px;
}

.wgallery-thumbs::-webkit-scrollbar-thumb {
  background: rgba(53, 232, 245, .35);
  border-radius: 999px;
}

.wgallery-thumb {
  flex: 0 0 auto;
  width: 78px;
  height: 58px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(124, 92, 255, .22);
  background: rgba(10, 9, 17, .6);
  padding: 0;
  cursor: pointer;
  opacity: .68;
  transition: opacity .16s ease, border-color .16s ease, transform .16s ease;
}

.wgallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wgallery-thumb:hover {
  opacity: .92;
  transform: translateY(-2px);
}

.wgallery-thumb.is-active {
  opacity: 1;
  border-color: rgba(53, 232, 245, .85);
  box-shadow: 0 0 0 1px rgba(53, 232, 245, .28), 0 8px 18px -8px rgba(53, 232, 245, .6);
}

/* Static screenshot strip under the video/audio/3D player (renderScreenshotsStrip
   in assets/work-page.js) — same look as the gallery thumbs, but the items are
   plain links (open the image in a new tab), not swap-buttons, so there's no
   .is-active state to style here. */
.wgallery-thumbs-static .wgallery-thumb {
  cursor: zoom-in;
}

/* ================= Тип-специфичные плееры героя ================= */
/* work-page.js: renderVideoPlayer()/renderAudioPlayer()/render3DViewer() —
   каждый рендерится в тот же .wgallery-stage, что и картинка галереи, только
   с модификатором класса, так что рамка/скругление/тень наследуются отсюда. */

/* Stage background intentionally NOT overridden here — video/audio/3D share
   the exact same .wgallery-stage backdrop as the plain image gallery
   (rgba(10,9,17,.7) + teal border, set once above). Only the content inside
   the stage changes between hero kinds; the frame around it stays identical
   everywhere so the four card types read as one consistent family. */

.wplayer-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Same reasoning as .wplayer-video above — no background override, just the
   layout needed to center the control panel over the shared stage backdrop. */
.wgallery-stage.wplayer-audio {
  display: grid;
  place-items: center;
  padding: 24px;
}

.waudio-viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .85;
}

.waudio-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(420px, 100%);
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(8, 8, 15, .58);
  backdrop-filter: blur(14px);
}

.waudio-toggle {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 79, 180, .95), rgba(53, 232, 245, .95));
  color: #0a0910;
  box-shadow: 0 10px 26px -8px rgba(255, 79, 180, .55);
  transition: transform .16s ease;
}

.waudio-toggle:hover {
  transform: scale(1.06);
}

.waudio-toggle svg {
  width: 24px;
  height: 24px;
}

.waudio-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #fff;
}

.waudio-meta strong {
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waudio-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
  overflow: hidden;
}

.waudio-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(53, 232, 245, .95), rgba(255, 79, 180, .95));
  transition: width .1s linear;
}

.waudio-time {
  font-size: 11px;
  color: #a79bd1;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* "Mixing desk" toolbar under the audio stage — skip ±10s, speed, loop,
   volume/mute. Sits below the stage as a sibling in .wgallery, same spacing
   rhythm as the thumbnail strip so it reads as one consistent column. */
.waudio-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, .18);
  background: rgba(21, 18, 31, .55);
}

.waudio-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 255, .24);
  background: rgba(10, 9, 17, .5);
  color: #c9c1e2;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.waudio-tool svg {
  width: 14px;
  height: 14px;
}

.waudio-tool:hover {
  border-color: rgba(53, 232, 245, .55);
  color: #fff;
}

.waudio-tool.is-active {
  border-color: rgba(53, 232, 245, .8);
  background: rgba(53, 232, 245, .14);
  color: #fff;
}

.waudio-volume {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.waudio-volume-range {
  width: 84px;
  accent-color: #35e8f5;
}

/* Same reasoning as .wplayer-video/.wplayer-audio above — no background
   override, the model sits on the shared stage backdrop like everything else. */

.wviewer-3d model-viewer {
  position: absolute;
  inset: 0;
}

.wviewer-3d-hint {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, .4);
  background: rgba(8, 8, 15, .62);
  backdrop-filter: blur(10px);
  color: #d6ccff;
  font-size: 11.5px;
  font-weight: 800;
}

.wviewer-3d-hint svg {
  width: 14px;
  height: 14px;
}

/* Toolbar under the 3D stage — rotate/tilt nudges, view-preset ("selection")
   buttons, zoom, auto-rotate toggle. Same rhythm/spacing as .waudio-toolbar
   above so the four hero types keep a consistent "frame + content + toolbar"
   layout regardless of what's actually playing/rendering. */
.w3d-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, .18);
  background: rgba(21, 18, 31, .55);
}

.w3d-tool-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(10, 9, 17, .3);
}

.w3d-tool {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(124, 92, 255, .24);
  background: rgba(10, 9, 17, .5);
  color: #c9c1e2;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.w3d-tool svg {
  width: 16px;
  height: 16px;
}

.w3d-tool:hover {
  border-color: rgba(53, 232, 245, .55);
  color: #fff;
}

.w3d-tool.is-active {
  border-color: rgba(53, 232, 245, .8);
  background: rgba(53, 232, 245, .14);
  color: #fff;
}

.w3d-tool-auto {
  width: auto;
  padding: 0 10px;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
}

.w3d-view {
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 255, .24);
  background: rgba(10, 9, 17, .5);
  color: #c9c1e2;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.w3d-view:hover {
  border-color: rgba(53, 232, 245, .55);
  color: #fff;
}

@media (max-width: 680px) {
  .waudio-volume {
    margin-left: 0;
    width: 100%;
  }

  .waudio-volume-range {
    flex: 1 1 auto;
    width: auto;
  }

  .w3d-toolbar {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .waudio-controls {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .waudio-toggle {
    margin: 0 auto;
  }
}

/* ---- Инфо-колонка ---- */

.winfo {
  display: grid;
  align-content: start;
  gap: 14px;
}

.wg-eyebrow {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, .38);
  background: rgba(124, 92, 255, .12);
  color: #d8d1ec;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.winfo h1 {
  margin: 0;
  font-family: var(--public-font-heading);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  color: #fff;
}

.wg-desc {
  margin: 0;
  color: #c9c1e2;
  font-size: 16px;
  line-height: 1.62;
}

.wprice-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(224, 184, 79, .32);
  background:
    radial-gradient(circle at 0 0, rgba(224, 184, 79, .12), transparent 60%),
    rgba(31, 25, 52, .68);
}

.wprice-block strong {
  font-size: 28px;
  color: #fff;
}

.wg-license-chip {
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(224, 184, 79, .14);
  color: #f2d77b;
  font-weight: 900;
  font-size: 12.5px;
}

.wg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wquickstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.wquickstat {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(53, 232, 245, .2);
  background: rgba(21, 18, 31, .55);
  display: grid;
  gap: 2px;
}

.wquickstat strong {
  color: #fff;
  font-size: 15px;
}

.wquickstat span {
  color: #a79bd1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ================= Панели ================= */

.wpanels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.wpanels.wpanels-lower {
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  margin-top: 14px;
}

.wpanel {
  border-radius: 18px;
  border: 1px solid rgba(124, 92, 255, .22);
  background: rgba(31, 25, 52, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.wpanel-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wpanel-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.wpanel-icon svg {
  width: 16px;
  height: 16px;
}

.wpanel h2 {
  margin: 0;
  font-family: var(--public-font-heading);
  font-size: 16px;
  color: #fff;
}

.wpanel p {
  margin: 0;
  color: #c9c1e2;
  line-height: 1.55;
  font-size: 14px;
}

.wpanel dl {
  margin: 0;
  display: grid;
  gap: 8px;
}

.wpanel dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.wpanel dt {
  color: #a79bd1;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.wpanel dd {
  margin: 0;
  color: #fff;
  font-weight: 900;
  text-align: right;
}

.wpanel .public-btn {
  width: fit-content;
  margin-top: 4px;
}

.wpanel-author .wpanel-icon { background: rgba(124, 92, 255, .18); color: #d6ccff; }
.wpanel-license { border-color: rgba(224, 184, 79, .34); background: radial-gradient(circle at 100% 0, rgba(224, 184, 79, .1), transparent 34%), rgba(31, 25, 52, .78); }
.wpanel-license .wpanel-icon { background: rgba(224, 184, 79, .2); color: #ffe1a3; }
.wpanel-sales .wpanel-icon { background: rgba(53, 232, 245, .16); color: #9df3ee; }
.wpanel-media .wpanel-icon { background: rgba(124, 92, 255, .18); color: #d6ccff; }
.wpanel-tags .wpanel-icon { background: rgba(255, 79, 180, .16); color: #ffc2e6; }

.wg-license-note {
  margin-top: 4px;
  padding: 12px;
  border: 1px solid rgba(53, 232, 245, .3);
  border-radius: 12px;
  background: rgba(16, 39, 52, .42);
  color: #c9f8f1;
  line-height: 1.5;
  font-size: 13.5px;
}

.wg-media-list {
  display: grid;
  gap: 10px;
}

.wg-media-file,
.wg-media-note {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(53, 232, 245, .24);
  border-radius: 12px;
  background: rgba(10, 9, 17, .5);
}

.wg-media-file span,
.wg-media-file em,
.wg-small-note {
  color: #a79bd1;
  font-size: 12px;
  font-style: normal;
}

.wg-media-file strong {
  color: #fff;
  overflow-wrap: anywhere;
}

.wg-media-note {
  color: #c9c1e2;
}

.wg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wg-tags span {
  border: 1px solid rgba(255, 79, 180, .32);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255, 79, 180, .1);
  color: #ffd2ef;
  font-weight: 900;
  font-size: 12.5px;
}

/* ================= Адаптив ================= */

@media (max-width: 1080px) {
  .wdetail {
    grid-template-columns: 1fr;
  }

  .wpanels,
  .wpanels.wpanels-lower {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  [data-work-app] .work-detail-shell {
    padding: 14px;
  }

  .wgallery-stage {
    aspect-ratio: 1 / 1;
  }

  .wprice-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .wquickstats {
    grid-template-columns: 1fr 1fr;
  }

  .wgallery-thumb {
    width: 64px;
    height: 48px;
  }
}

/* ================= Реконструкция 2026-07-22: основная внутренняя карточка ================= */

@property --work-frame-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

[data-work-app] .work-detail-shell {
  max-width: 1200px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.work-premium-detail {
  display: grid;
  gap: 26px;
  color: #eae7fb;
}

.work-format-slot {
  min-width: 0;
  max-width: 100%;
}

.work-format-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
}

.crumbs-extra .work-format-switch {
  flex-wrap: nowrap;
  max-width: min(100%, 900px);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(53, 232, 245, .34) transparent;
}

.crumbs-extra .work-format-switch::-webkit-scrollbar {
  height: 4px;
}

.crumbs-extra .work-format-switch::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(53, 232, 245, .34);
}

.work-format-label {
  align-self: center;
  padding-inline: 8px;
  color: #6b6390;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.work-format-switch button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9a92bd;
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
  cursor: default;
}

.work-format-switch button.is-disabled:not(.is-active) {
  opacity: .74;
  filter: saturate(.82);
}

.work-format-switch button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.work-format-switch button.is-active {
  background: linear-gradient(120deg, #7c5cff, #5a3ce8);
  color: #fff;
  box-shadow: 0 6px 16px rgba(124, 92, 255, .34);
}

.work-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .95fr);
  gap: 26px;
  align-items: start;
}

.work-stage-column {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.work-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #9a92bd;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.work-stage-header span,
.work-stage-header strong {
  font-weight: 900;
}

.work-stage-header strong {
  color: #62f2e8;
}

.work-stage-frame {
  position: relative;
  padding: 1px;
  border-radius: 23px;
  background: linear-gradient(135deg, rgba(53, 232, 245, .42), rgba(124, 92, 255, .34) 50%, rgba(255, 79, 180, .42));
  box-shadow: 0 26px 70px -40px rgba(53, 232, 245, .54);
}

.work-stage-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--work-frame-angle), transparent 0deg, transparent 292deg, rgba(53, 232, 245, .92) 320deg, rgba(124, 92, 255, 1) 340deg, rgba(255, 79, 180, .95) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: workFrameSpin 7s linear infinite;
}

@keyframes workFrameSpin {
  to { --work-frame-angle: 360deg; }
}

.work-stage-frame .wgallery {
  position: relative;
  z-index: 1;
  gap: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 8px),
    radial-gradient(120% 88% at 76% 16%, rgba(124, 92, 255, .4), transparent 60%),
    radial-gradient(92% 80% at 8% 92%, rgba(53, 232, 245, .28), transparent 60%),
    linear-gradient(160deg, #151033, #0a0913);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 22px 60px -34px rgba(0, 0, 0, .82);
}

.work-stage-frame .wgallery-stage {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.work-stage-frame .wgallery-main {
  object-fit: contain;
  padding: clamp(34px, 6vw, 74px);
  box-sizing: border-box;
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .42));
}

.work-stage-frame .wgallery-stage.is-zoomed .wgallery-main {
  padding: clamp(10px, 2vw, 22px);
}

.work-stage-frame .wgallery-fallback {
  display: grid;
  place-items: center;
  inset: 50% auto auto 50%;
  width: 66%;
  height: 66%;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 50% 50%, rgba(124, 92, 255, .72), transparent 23%),
    radial-gradient(circle at 50% 50%, rgba(124, 92, 255, .34), transparent 42%),
    linear-gradient(160deg, #2a1f58, #111023);
  box-shadow: 0 26px 70px -36px rgba(124, 92, 255, .72);
}

.work-stage-frame .wgallery-fallback::before {
  content: "3DWEBSTUDIO · PREVIEW";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .12);
  font-size: clamp(10px, 1.25vw, 14px);
  font-weight: 950;
  letter-spacing: .34em;
  text-transform: uppercase;
  transform: rotate(-24deg);
}

.work-stage-frame .wformat-placeholder .wgallery-fallback::before {
  opacity: .38;
}

.wformat-placeholder-note {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 18px;
  color: #d9d4f5;
  text-align: center;
}

.wformat-placeholder-note svg {
  width: 38px;
  height: 38px;
  color: #35e8f5;
  filter: drop-shadow(0 0 18px rgba(53, 232, 245, .42));
}

.wformat-placeholder-note strong {
  color: #fff;
  font-family: var(--public-font-heading);
  font-size: 18px;
  line-height: 1.18;
}

.wformat-placeholder-note span {
  color: #a89fc9;
  font-size: 12.5px;
  line-height: 1.45;
}

.work-stage-frame .wdemo-stage {
  --demo-progress: 34%;
  --demo-speed-factor: 1;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px),
    radial-gradient(70% 70% at 68% 18%, rgba(124, 92, 255, .22), transparent 62%),
    linear-gradient(145deg, rgba(38, 30, 91, .96), rgba(14, 13, 25, .98) 55%, rgba(4, 39, 47, .88));
}

.wdemo-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wdemo-model-scene {
  perspective: 820px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.wdemo-model-scene:active {
  cursor: grabbing;
}

.wdemo-cube {
  --demo-cube-size: clamp(118px, 22vw, 158px);
  position: relative;
  width: var(--demo-cube-size);
  height: var(--demo-cube-size);
  transform-style: preserve-3d;
  transform: rotateX(var(--demo-rot-x)) rotateY(var(--demo-rot-y)) scale(var(--demo-scale));
  transition: transform .18s ease;
}

.wdemo-stage.is-auto .wdemo-cube {
  animation: workDemoCubeAuto 10s linear infinite;
}

.wdemo-cube-face {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(53, 232, 245, .62);
  background: linear-gradient(135deg, rgba(124, 92, 255, .34), rgba(53, 232, 245, .12));
  box-shadow:
    inset 0 0 28px rgba(124, 92, 255, .42),
    0 0 22px rgba(53, 232, 245, .12);
}

.wdemo-cube-face.is-front { transform: translateZ(calc(var(--demo-cube-size) / 2)); }
.wdemo-cube-face.is-back { transform: rotateY(180deg) translateZ(calc(var(--demo-cube-size) / 2)); }
.wdemo-cube-face.is-right { transform: rotateY(90deg) translateZ(calc(var(--demo-cube-size) / 2)); }
.wdemo-cube-face.is-left { transform: rotateY(-90deg) translateZ(calc(var(--demo-cube-size) / 2)); }
.wdemo-cube-face.is-top { transform: rotateX(90deg) translateZ(calc(var(--demo-cube-size) / 2)); }
.wdemo-cube-face.is-bottom { transform: rotateX(-90deg) translateZ(calc(var(--demo-cube-size) / 2)); }

.wdemo-orbit-hint {
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(78px, 14vw, 112px));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  color: #b9b2d1;
  font-size: 11px;
}

.wdemo-orbit-hint svg {
  width: 13px;
  height: 13px;
}

.wdemo-audio-scene {
  flex-direction: column;
  gap: 18px;
}

.wdemo-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: min(45%, 280px);
  height: 80px;
}

.wdemo-eq i {
  display: block;
  width: 6px;
  height: calc(6px + (var(--i) % 8) * 5px);
  border-radius: 999px;
  background: linear-gradient(180deg, #57fff5, #7c5cff 58%, #ff4fb4);
  box-shadow: 0 0 12px rgba(53, 232, 245, .26);
  animation: workDemoEq 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.06s);
}

.wdemo-stage.is-muted .wdemo-eq i {
  height: 6px;
  opacity: .42;
  animation-play-state: paused;
}

.wdemo-audio-controls {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.wdemo-play {
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #7c5cff, #ff4fb4);
  box-shadow: 0 18px 36px -16px rgba(124, 92, 255, .95);
  cursor: pointer;
}

.wdemo-play svg {
  width: 28px;
  height: 28px;
}

.wdemo-eq-toggle {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 12px;
  border: 1px solid rgba(53, 232, 245, .46);
  background: rgba(53, 232, 245, .12);
  color: #9cf9ff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.wdemo-eq-toggle svg {
  width: 16px;
  height: 16px;
}

.wdemo-progress {
  width: min(48%, 300px);
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}

.wdemo-progress i,
.wdemo-video-scrub i,
.wdemo-motion-timeline i {
  display: block;
  width: var(--demo-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35e8f5, #ff4fb4);
  transition: width .24s ease;
}

.wdemo-stage.is-playing .wdemo-progress i,
.wdemo-stage.is-playing .wdemo-video-scrub i {
  animation: workDemoProgress 3s linear infinite;
}

.wdemo-video-screen,
.wdemo-motion-frame {
  position: relative;
  width: 82%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(160deg, rgba(27, 17, 48, .96), rgba(7, 6, 15, .98));
  box-shadow: 0 22px 55px rgba(0, 0, 0, .48);
}

.wdemo-video-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 4px);
  opacity: .52;
}

.wdemo-video-play {
  position: relative;
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
  cursor: pointer;
}

.wdemo-video-play svg {
  width: 28px;
  height: 28px;
}

.wdemo-video-scrub,
.wdemo-motion-timeline {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}

.wdemo-web-window {
  position: relative;
  width: 86%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0b0b16;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .46);
}

.wdemo-web-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: rgba(20, 21, 36, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.wdemo-web-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.wdemo-web-bar .is-red { background: #ff5f57; }
.wdemo-web-bar .is-yellow { background: #febc2e; }
.wdemo-web-bar .is-green { background: #28c840; }

.wdemo-web-bar span {
  flex: 1;
  height: 20px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: #a89fc9;
  font-size: 10px;
}

.wdemo-web-body {
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(160deg, #12122a, #0a0913);
}

.wdemo-web-body b {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(135deg, rgba(124, 92, 255, .3), rgba(53, 232, 245, .14));
}

.wdemo-web-body .is-tall {
  grid-row: span 2;
}

.wdemo-web-code {
  position: absolute;
  inset: 38px 0 0;
  margin: 0;
  display: none;
  padding: 18px;
  background: rgba(6, 6, 14, .96);
  color: #86fff6;
  font-size: 12px;
  line-height: 1.45;
}

.wdemo-stage.is-code .wdemo-web-code {
  display: block;
}

.wdemo-stage.is-mobile .wdemo-web-window {
  width: min(46%, 260px);
}

.wdemo-live-dot {
  position: absolute;
  left: 50%;
  top: calc(50% + min(22vw, 205px));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  color: #42f5aa;
  font-size: 11px;
}

.wdemo-live-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42f5aa;
  box-shadow: 0 0 10px #42f5aa;
  animation: workDemoPulse 1.6s ease-in-out infinite;
}

.wdemo-render-frame {
  position: relative;
  width: 84%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .11);
  background:
    radial-gradient(46% 54% at 72% 18%, rgba(255, 214, 153, .54), transparent 58%),
    radial-gradient(60% 72% at 22% 96%, rgba(124, 92, 255, .42), transparent 62%),
    linear-gradient(160deg, #2a2140, #0c0a16);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .5);
}

.wdemo-stage.is-before .wdemo-render-frame {
  filter: saturate(.65) contrast(.88);
}

.wdemo-stage.is-panorama .wdemo-render-frame {
  animation: workDemoPano 3.6s ease-in-out infinite;
}

.wdemo-res-badge,
.wdemo-loop-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  color: #04121a;
  background: linear-gradient(120deg, #35e8f5, #4ad9c0);
  font-size: 10.5px;
  font-weight: 950;
}

.wdemo-light-chips {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  gap: 5px;
  justify-items: end;
}

.wdemo-light-chips span {
  padding: 3px 8px;
  border: 1px solid rgba(255, 180, 79, .34);
  border-radius: 6px;
  background: rgba(255, 180, 79, .16);
  color: #ffd9a0;
  font-size: 9.5px;
  font-weight: 900;
}

.wdemo-sun {
  position: absolute;
  top: 14%;
  right: 20%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff2d6, #ffb44f 70%);
  box-shadow: 0 0 54px rgba(255, 180, 79, .72);
}

.wdemo-room {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 34%;
  height: 42%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 40px rgba(255, 214, 153, .2);
}

.wdemo-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34%;
  height: 1px;
  background: rgba(255, 255, 255, .14);
}

.wdemo-pano-label {
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(9, 10, 18, .62);
  color: #eafcff;
  font-size: 11px;
  backdrop-filter: blur(6px);
}

.wdemo-pano-label svg,
.wdemo-loop-badge svg {
  width: 13px;
  height: 13px;
}

.wdemo-motion-frame {
  background: linear-gradient(160deg, #101a3a, #0a0913);
}

.wdemo-shape {
  position: absolute;
  display: block;
}

.wdemo-shape.is-one {
  width: 80px;
  height: 80px;
  left: 20%;
  top: 26%;
  border-radius: 14px;
  background: linear-gradient(135deg, #35e8f5, #7c5cff);
  animation: workDemoFloat 3.2s ease-in-out infinite;
}

.wdemo-shape.is-two {
  width: 54px;
  height: 54px;
  right: 24%;
  top: 22%;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4fb4, #7c5cff);
  animation: workDemoFloat 2.4s ease-in-out .3s infinite;
}

.wdemo-shape.is-three {
  width: 110px;
  height: 14px;
  left: 30%;
  bottom: 28%;
  border-radius: 999px;
  background: linear-gradient(90deg, #35e8f5, transparent);
  animation: workDemoSlide 2.8s ease-in-out infinite;
}

.wdemo-stage.is-paused .wdemo-shape,
.wdemo-stage.is-paused .wdemo-motion-timeline i {
  animation-play-state: paused;
}

.wdemo-stage.is-restarting .wdemo-motion-frame {
  animation: workDemoPulseFrame .22s ease;
}

.wdemo-motion-timeline i {
  width: 46%;
  animation: workDemoProgress 3s linear infinite;
}

.wdemo-creative-grid {
  width: 84%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 70px;
  gap: 9px;
}

.wdemo-tile {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
}

.wdemo-tile em {
  position: absolute;
  left: 9px;
  bottom: 7px;
  color: rgba(255, 255, 255, .86);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wdemo-tile.is-logo {
  grid-column: span 2;
  grid-row: span 2;
  background: radial-gradient(circle at 35% 30%, rgba(124, 92, 255, .62), transparent 60%), linear-gradient(160deg, #2a1a4a, #0e0b1e);
}

.wdemo-tile.is-pattern { background: linear-gradient(135deg, #ff4fb4, #7c5cff); }
.wdemo-tile.is-icons { background: linear-gradient(135deg, #35e8f5, #0fb8c9); }
.wdemo-tile.is-type { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 6px, transparent 6px 12px), linear-gradient(160deg, #241a4a, #0e0b1e); }
.wdemo-tile.is-mockups { grid-column: span 2; background: linear-gradient(120deg, #f4bd4c, #d9a63d); }

.wdemo-swatches {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
}

.wdemo-swatches b {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.wdemo-swatches b:nth-child(1) { background: #7c5cff; }
.wdemo-swatches b:nth-child(2) { background: #35e8f5; }
.wdemo-swatches b:nth-child(3) { background: #ff4fb4; }

.wdemo-stage.is-elements .wdemo-tile {
  box-shadow: 0 0 0 1px rgba(53, 232, 245, .4), 0 0 22px rgba(53, 232, 245, .18);
}

.wgallery-thumbs-demo .wgallery-thumb {
  display: block;
}

@keyframes workDemoCubeAuto {
  from { transform: rotateX(var(--demo-rot-x)) rotateY(var(--demo-rot-y)) scale(var(--demo-scale)); }
  to { transform: rotateX(var(--demo-rot-x)) rotateY(calc(var(--demo-rot-y) + 360deg)) scale(var(--demo-scale)); }
}

@keyframes workDemoEq {
  0%, 100% { transform: scaleY(.35); opacity: .7; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes workDemoProgress {
  from { width: 6%; }
  to { width: 96%; }
}

@keyframes workDemoPulse {
  50% { opacity: .35; }
}

@keyframes workDemoPano {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3%); }
}

@keyframes workDemoFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-22px) rotate(12deg); }
}

@keyframes workDemoSlide {
  0%, 100% { transform: translateX(-30px); opacity: .5; }
  50% { transform: translateX(30px); opacity: 1; }
}

@keyframes workDemoPulseFrame {
  50% { transform: scale(.985); filter: brightness(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .wdemo-stage.is-auto .wdemo-cube,
  .wdemo-eq i,
  .wdemo-stage.is-playing .wdemo-progress i,
  .wdemo-stage.is-playing .wdemo-video-scrub i,
  .wdemo-stage.is-panorama .wdemo-render-frame,
  .wdemo-shape,
  .wdemo-motion-timeline i,
  .wdemo-live-dot::before {
    animation: none;
  }
}

.work-stage-frame .wgallery-shield {
  top: 14px;
  left: 14px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(9, 10, 18, .72);
  color: #d7f9ff;
}

.wgallery-kind-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(53, 232, 245, .36);
  background: linear-gradient(135deg, #35e8f5, #4dd6a0);
  color: #06131a;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -15px rgba(53, 232, 245, .85);
}

.wgallery-kind-badge svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.work-stage-frame .wgallery-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 55px;
  padding: 11px 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(8, 8, 16, .5);
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
}

.work-stage-frame .wgallery-tool {
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
  color: #f3f0ff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.work-stage-frame .wgallery-tool:hover {
  border-color: rgba(53, 232, 245, .62);
  background: rgba(124, 92, 255, .14);
  transform: translateY(-1px);
}

.work-stage-frame .wgallery-tool.is-active {
  border-color: rgba(53, 232, 245, .82);
  background: rgba(53, 232, 245, .16);
  color: #f5ffff;
  box-shadow: 0 0 18px rgba(53, 232, 245, .18);
}

.work-stage-frame .wgallery-tool.is-pulsed {
  animation: workToolPulse .26s ease;
}

@keyframes workToolPulse {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

.work-stage-frame .wgallery-tool svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.work-stage-frame .wgallery-tool-mark {
  min-width: 13px;
  color: #f3f0ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.work-stage-frame .wgallery-tools-spacer {
  flex: 1 1 auto;
}

.work-stage-frame .wgallery-report {
  margin-left: auto;
}

.work-stage-frame .wgallery-tools[data-preview-tools="model"] .wgallery-tools-spacer {
  flex: 0 0 100%;
  height: 0;
}

.work-stage-frame .wgallery-tools[data-preview-tools="model"] .wgallery-report {
  margin-left: 0;
}

.work-stage-frame .wgallery-thumbs,
.work-stage-frame .waudio-toolbar,
.work-stage-frame .w3d-toolbar {
  margin-inline: 0;
}

.work-stage-frame .wgallery-thumbs {
  padding: 12px 14px 14px;
  background: rgba(5, 6, 12, .12);
}

.work-stage-frame .wgallery-thumb {
  width: 56px;
  height: 56px;
  border-width: 1px;
  border-radius: 11px;
  background: rgba(18, 14, 41, .78);
}

.work-buy-panel,
.work-info-card,
.work-sticky-buybar {
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(124, 92, 255, .12), transparent 55%),
    linear-gradient(160deg, rgba(15, 15, 29, .94), rgba(10, 10, 19, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.work-buy-panel {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.work-category-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, .42);
  background: rgba(124, 92, 255, .14);
  color: #d9ccff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.work-buy-panel h1 {
  margin: 0;
  color: #fff;
  font-family: var(--public-font-heading);
  font-size: clamp(30px, 3.7vw, 44px);
  line-height: 1.04;
  letter-spacing: 0;
}

.work-buy-panel p {
  margin: 0;
  color: #bfb8db;
  font-size: 14.5px;
  line-height: 1.58;
}

.work-price-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(227, 179, 65, .34);
  background:
    radial-gradient(80% 100% at 95% 8%, rgba(227, 179, 65, .16), transparent 58%),
    linear-gradient(160deg, rgba(20, 19, 42, .96), rgba(12, 11, 22, .96));
}

.work-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.work-price {
  color: #fff;
  font-size: 32px;
  line-height: 1.05;
  font-weight: 900;
}

.work-license-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid rgba(227, 179, 65, .34);
  background: rgba(227, 179, 65, .12);
  color: #fff0c2;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.1;
}

.work-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

[data-work-app] .work-actions .public-btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 11.4px;
}

[data-work-app] .work-action-main {
  flex: 1 1 170px;
}

[data-work-app] .work-action-secondary,
[data-work-app] .work-action-exclusive {
  flex: 1 1 140px;
}

.work-buy-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9a92bd;
  font-size: 12.5px;
  line-height: 1.48;
}

.work-buy-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #4dd6a0;
}

.work-quickstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.work-quickstats div,
.work-spec,
.work-mini-dl div {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
}

.work-quickstats div {
  padding: 12px;
}

.work-quickstats strong {
  display: block;
  color: #fff;
  font-size: 17px;
  line-height: 1.1;
}

.work-quickstats span,
.work-mini-dl dt {
  display: block;
  margin-top: 4px;
  color: #77709a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.work-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
  gap: 18px;
}

.work-content-stack {
  display: grid;
  gap: 18px;
  margin-top: 4px;
}

.work-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 18px;
}

.work-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.work-grid-2.is-single,
.work-grid-3.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.work-info-card {
  display: grid;
  align-content: start;
  gap: 15px;
  border-radius: 18px;
  padding: 22px;
  overflow: hidden;
}

.work-desc-card,
.work-deliver-card,
.work-license-card {
  grid-column: span 1;
}

.work-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.work-card-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 255, .3);
  background: rgba(124, 92, 255, .14);
  color: #c3b6ff;
}

.work-card-icon svg {
  width: 18px;
  height: 18px;
}

.work-card-head h2 {
  margin: 0;
  color: #fff;
  font-family: var(--public-font-heading);
  font-size: 17px;
  line-height: 1.18;
}

.work-card-head em {
  display: block;
  margin-top: 1px;
  color: #6b6390;
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.35;
}

.work-info-card p {
  margin: 0;
  color: #c9c3e8;
  font-size: 14px;
  line-height: 1.68;
}

.work-highlights,
.work-spec-grid,
.wg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-highlights {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.work-highlight {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-height: 34px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: #d4cef0;
  font-size: 12px;
}

.work-highlight b {
  color: #7df5ef;
  font-weight: 950;
  white-space: nowrap;
}

.work-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
}

.work-spec {
  display: grid;
  gap: 3px;
  min-height: 68px;
  padding: 13px 15px;
  border: 0;
  border-radius: 0;
  background: #0d0d1a;
}

.work-spec dt {
  margin: 0;
  color: #6b6390;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.work-spec dd {
  margin: 0;
  color: #eae7fb;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}

.work-spec dd.is-hot {
  color: #35e8f5;
}

.work-deliver-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-deliver-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #d4cef0;
  font-size: 13.5px;
}

.work-deliver-check {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  color: #4dd6a0;
}

.work-deliver-check svg {
  width: 18px;
  height: 18px;
}

.work-deliver-list strong {
  display: block;
  color: #fff;
  font-size: 13.5px;
  font-weight: 650;
}

.work-deliver-list em {
  display: block;
  margin-top: 3px;
  color: #a9a0c8;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.45;
}

.work-license-type {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(227, 179, 65, .25);
  background: rgba(227, 179, 65, .08);
}

.work-license-type .work-card-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-color: rgba(227, 179, 65, .3);
  background: rgba(227, 179, 65, .14);
  color: #ffb44f;
}

.work-license-type .work-card-icon svg {
  width: 16px;
  height: 16px;
}

.work-license-type strong {
  display: block;
  color: #ffb44f;
  font-size: 14px;
  font-weight: 750;
}

.work-license-type em {
  display: block;
  color: #9a92bd;
  font-size: 11.5px;
  font-style: normal;
  margin-top: 2px;
}

.work-license-rows {
  display: grid;
  gap: 12px;
}

.work-license-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #c9c3e8;
  font-size: 13px;
  line-height: 1.5;
}

.work-license-row svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 2px;
}

.work-license-row.is-ok svg {
  color: #4dd6a0;
}

.work-license-row.is-info svg {
  color: #35e8f5;
}

.work-license-row.is-no svg {
  color: #ff6fba;
}

.work-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.work-trust-row div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9a92bd;
  font-size: 11.5px;
}

.work-trust-row svg {
  width: 15px;
  height: 15px;
  color: #35e8f5;
}

.work-note {
  margin: 0;
  color: #6b6390;
  font-size: 11.5px;
  line-height: 1.5;
}

.work-author-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 13px;
  align-items: center;
}

.work-author-avatar {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--public-font-heading);
  font-weight: 900;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .48), transparent 28%),
    linear-gradient(135deg, #35e8f5, #7c5cff 56%, #ff4fb4);
  box-shadow: 0 0 20px rgba(124, 92, 255, .32);
}

.work-author-row strong {
  display: block;
  color: #fff;
  font-family: var(--public-font-heading);
  font-size: 17px;
}

.work-author-row em {
  display: block;
  margin-top: 4px;
  color: #bfb8db;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.35;
}

.work-mini-dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.work-mini-dl div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.work-mini-dl dt {
  margin: 0;
}

.work-mini-dl dd {
  margin: 0;
  color: #fff;
  font-weight: 900;
  text-align: right;
}

.work-empty-note {
  margin: 0;
  color: #9a92bd;
  font-size: 13px;
}

body.work-public-page {
  padding-bottom: 86px;
}

.work-sticky-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: 100%;
  display: block;
  padding: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .42), 0 0 24px rgba(53, 232, 245, .16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .24s ease;
}

.work-sticky-buybar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.work-sticky-buybar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
}

.work-sticky-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.work-sticky-buybar strong {
  display: block;
  max-width: 430px;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-sticky-spacer {
  flex: 1 1 auto;
}

.work-sticky-price {
  color: #35e8f5;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.work-actions-compact {
  flex-wrap: nowrap;
}

[data-work-app] .work-actions-compact .public-btn {
  min-height: 34px;
  padding: 8px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .work-stage-frame::before {
    animation: none;
  }
}

@media (max-width: 1080px) {
  .crumbs-extra .work-format-switch {
    max-width: calc(100vw - 20px);
  }

  .work-hero-grid,
  .work-content-grid,
  .work-grid-2,
  .work-grid-3 {
    grid-template-columns: 1fr;
  }

  .work-buy-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  .work-format-switch {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .work-format-switch button {
    flex: 0 0 auto;
  }

  .work-format-label {
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgba(13, 14, 26, .92);
    border-radius: 7px;
  }

  .work-premium-detail {
    gap: 18px;
  }

  .work-stage-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .work-info-card {
    padding: 18px;
    border-radius: 16px;
  }

  .work-spec-grid {
    grid-template-columns: 1fr;
  }

  .work-quickstats {
    grid-template-columns: 1fr;
  }

  body.work-public-page {
    padding-bottom: 128px;
  }

  .work-sticky-buybar-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 14px;
  }

  .work-sticky-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .work-sticky-price {
    font-size: 15px;
  }

  .work-sticky-spacer {
    display: none;
  }

  .work-actions-compact {
    flex-wrap: wrap;
  }
}