.work-wheel{
  display:block!important;position:relative;width:100vw;height:clamp(390px,48vw,610px);
  margin-left:calc(50% - 50vw);padding:0!important;overflow:hidden;
  cursor:grab;touch-action:pan-y;perspective:1500px;isolation:isolate;
}
.work-wheel:before{
  content:"";position:absolute;left:50%;top:52%;width:min(1120px,88vw);height:min(430px,34vw);
  transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--u-line,#d9d0c2) 74%,transparent);
  border-radius:50%;opacity:.65;pointer-events:none;
  box-shadow:inset 0 0 80px color-mix(in srgb,var(--u-accent,#c7653f) 7%,transparent);
}
.work-wheel.is-dragging{cursor:grabbing;user-select:none}
.work-wheel-card{
  --wheel-x:0px;--wheel-y:0px;--wheel-scale:1;--wheel-rotate:0deg;--wheel-opacity:0;
  position:absolute;left:50%;top:44%;width:clamp(250px,38vw,540px);
  overflow:hidden;border:1px solid var(--u-line,#d9d0c2);border-radius:30px;
  opacity:var(--wheel-opacity);visibility:hidden;pointer-events:none;
  transform:translate(-50%,-50%) translate(var(--wheel-x),var(--wheel-y)) scale(var(--wheel-scale)) rotate(var(--wheel-rotate));
  transform-origin:center;box-shadow:0 20px 58px rgba(27,21,16,.16);
  transition:transform .82s cubic-bezier(.22,1,.36,1),opacity .62s ease,filter .62s ease,box-shadow .62s ease;
  filter:saturate(.7) brightness(.8);will-change:transform,opacity;
}
.work-wheel-card.is-wheel-visible{visibility:visible;pointer-events:auto}
.work-wheel-card.is-wheel-active{
  filter:saturate(1) brightness(1);box-shadow:0 34px 100px rgba(27,21,16,.28),0 0 0 1px color-mix(in srgb,var(--u-accent,#c7653f) 32%,transparent);
}
.work-wheel-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;pointer-events:none;user-select:none;border-radius:0!important}
.work-wheel-card span{
  position:absolute;left:18px;bottom:18px;max-width:calc(100% - 36px);padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(20,17,14,.78);color:#fff;
  font:500 11px/1.2 'IBM Plex Mono',monospace;letter-spacing:.07em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .35s ease .12s,transform .35s ease .12s;
  backdrop-filter:blur(12px);pointer-events:none;
}
.work-wheel-card.is-wheel-active span{opacity:1;transform:none}
#primery .work-wheel-controls{
  display:flex;align-items:center;justify-content:center;gap:22px;margin-top:-44px;position:relative;z-index:3;
  background:transparent!important;border:0!important;backdrop-filter:none!important;
}
.work-wheel-controls button{
  width:60px;height:60px;border:1px solid var(--u-line,#d9d0c2);border-radius:50%!important;
  background:var(--u-card,#fffdf8);color:var(--u-text,#24211d);font:500 27px/1 Arial,sans-serif;
  cursor:pointer;box-shadow:0 9px 25px rgba(0,0,0,.09);transition:transform .2s,border-color .2s;
}
.work-wheel-controls button:hover{transform:translateY(-2px);border-color:var(--u-accent,#c7653f)}
html[data-theme="dark"] .work-wheel-card{box-shadow:0 24px 70px rgba(0,0,0,.48);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .work-wheel-card.is-wheel-active{box-shadow:0 38px 110px rgba(0,0,0,.68),0 0 0 1px rgba(226,125,82,.28)}

@media(max-width:700px){
  .work-wheel{height:390px}
  .work-wheel:before{width:118vw;height:260px}
  .work-wheel-card{width:min(78vw,340px);top:43%;border-radius:22px}
  .work-wheel-card span{left:12px;bottom:12px;max-width:calc(100% - 24px);font-size:9.5px;padding:7px 9px}
  .work-wheel-controls{margin-top:-34px;gap:16px;padding:0 12px}
  .work-wheel-controls button{width:52px;height:52px;font-size:23px}
}

@media(prefers-reduced-motion:reduce){.work-wheel-card{transition:none!important}}