/* TATWO phone home work switch.
   First-version clear glass material, clipped into the supplied flower-edge
   button language. The flower texture is a transparent rim layer, not a JPG
   square, circular wrapper, black dot, second wheel, or 3D showpiece. */

.page-home.is-work-selector .home-work-wheel::before,
.page-home.is-work-selector .home-work-wheel::after,
.home-work-wheel::before,
.home-work-wheel::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  pointer-events:none !important;
  border-radius:inherit !important;
}

@media (max-width:760px){
  .page-home.is-work-selector{
    --tatwo-flower-mask:url("content/uploads/2026-05-20--flower-glass-mask.svg?v=1");
    --tatwo-flower-rim:url("content/uploads/2026-05-20--IMG_5312-transparent-lace-button.png?v=3");
    --tatwo-flower-clip:polygon(
      50% 6%, 56% 9%, 61% 8%, 66% 12%, 72% 14%, 76% 20%,
      81% 24%, 84% 31%, 90% 36%, 91% 43%, 95% 50%,
      91% 57%, 90% 64%, 84% 69%, 81% 76%, 76% 80%,
      72% 86%, 66% 88%, 61% 92%, 56% 91%, 50% 94%,
      44% 91%, 39% 92%, 34% 88%, 28% 86%, 24% 80%,
      19% 76%, 16% 69%, 10% 64%, 9% 57%, 5% 50%,
      9% 43%, 10% 36%, 16% 31%, 19% 24%, 24% 20%,
      28% 14%, 34% 12%, 39% 8%, 44% 9%
    );
  }

  .page-home.is-work-selector .home-lower{
    right:18px !important;
    bottom:58px !important;
    width:78px !important;
    height:78px !important;
    pointer-events:none !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:78px !important;
    height:78px !important;
    pointer-events:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .page-home.is-work-selector .home-work-wheel{
    --press-x:0;
    --press-y:0;
    --tilt-x:0deg;
    --tilt-y:0deg;
    --glint-x:36%;
    --glint-y:22%;
    --glint-shift-x:0px;
    --glint-shift-y:0px;
    width:66px !important;
    height:66px !important;
    right:0 !important;
    bottom:0 !important;
    border-radius:0 !important;
    border:0 !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255,255,255,.17), rgba(255,255,255,.032) 24%, transparent 45%),
      radial-gradient(circle at 51% 53%, rgba(255,255,255,.006) 0 43%, rgba(255,255,255,.052) 58%, rgba(255,255,255,.018) 74%, transparent 88%),
      rgba(255,255,255,.002) !important;
    box-shadow:none !important;
    opacity:.94 !important;
    filter:
      drop-shadow(0 8px 15px rgba(13,16,18,.12))
      drop-shadow(0 0 1px rgba(255,255,255,.56)) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    -webkit-mask:var(--tatwo-flower-mask) center/100% 100% no-repeat !important;
    mask:var(--tatwo-flower-mask) center/100% 100% no-repeat !important;
    -webkit-clip-path:var(--tatwo-flower-clip) !important;
    clip-path:var(--tatwo-flower-clip) !important;
    pointer-events:auto !important;
    touch-action:none !important;
    isolation:isolate !important;
    transform:
      perspective(260px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      translate3d(0,0,0)
      scale(1) !important;
    transform-origin:52% 52% !important;
    will-change:transform, filter, opacity !important;
    transition:
      transform .22s cubic-bezier(.18,.9,.2,1),
      width .18s cubic-bezier(.18,.9,.2,1),
      height .18s cubic-bezier(.18,.9,.2,1),
      filter .18s ease,
      opacity .16s ease,
      background .18s ease !important;
  }

  .page-home.is-work-selector .home-work-wheel::before{
    inset:-1px !important;
    border-radius:0 !important;
    background:
      var(--tatwo-flower-rim) center/112% 112% no-repeat,
      radial-gradient(circle at 50% 52%, transparent 0 46%, rgba(255,255,255,.052) 59%, rgba(255,255,255,.012) 73%, transparent 83%) !important;
    opacity:.78 !important;
    mix-blend-mode:normal !important;
    image-rendering:auto !important;
    filter:
      drop-shadow(0 1px 0 rgba(39,45,48,.16))
      drop-shadow(0 -1px 0 rgba(255,255,255,.55)) !important;
    transform:rotate(var(--rim-rotation, 0deg)) scale(1.006) !important;
    transform-origin:50% 52% !important;
    transition:
      transform .24s cubic-bezier(.18,.9,.2,1),
      filter .18s ease,
      opacity .18s ease !important;
    -webkit-mask:var(--tatwo-flower-mask) center/100% 100% no-repeat !important;
    mask:var(--tatwo-flower-mask) center/100% 100% no-repeat !important;
    -webkit-clip-path:var(--tatwo-flower-clip) !important;
    clip-path:var(--tatwo-flower-clip) !important;
    z-index:1 !important;
  }

  .page-home.is-work-selector .home-work-wheel::after{
    inset:0 !important;
    border-radius:0 !important;
    background:
      linear-gradient(138deg, rgba(255,255,255,.14), rgba(255,255,255,.016) 37%, rgba(13,16,18,.012) 74%, rgba(255,255,255,.07)),
      radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255,255,255,.22), rgba(255,255,255,.04) 18%, transparent 40%),
      radial-gradient(circle at 50% 50%, transparent 52%, rgba(255,255,255,.08) 66%, rgba(255,255,255,.018) 80%, transparent 92%) !important;
    box-shadow:
      inset 7px 9px 15px rgba(255,255,255,.075),
      inset -8px -9px 14px rgba(13,16,18,.042) !important;
    opacity:.24 !important;
    transform:
      translate3d(var(--glint-shift-x), var(--glint-shift-y), 0)
      rotate(var(--sheen-rotation, 0deg))
      scale(1.01) !important;
    transform-origin:50% 50% !important;
    transition:
      transform .18s cubic-bezier(.18,.9,.2,1),
      opacity .18s ease,
      box-shadow .18s ease !important;
    -webkit-mask:var(--tatwo-flower-mask) center/100% 100% no-repeat !important;
    mask:var(--tatwo-flower-mask) center/100% 100% no-repeat !important;
    -webkit-clip-path:var(--tatwo-flower-clip) !important;
    clip-path:var(--tatwo-flower-clip) !important;
    z-index:2 !important;
  }

  .page-home.is-work-selector .home-wheel-center{
    display:none !important;
    position:absolute !important;
    inset:31% !important;
    width:auto !important;
    height:auto !important;
    border-radius:50% !important;
    border:0 !important;
    background:rgba(255,255,255,.18) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.42),
      0 1px 2px rgba(13,16,18,.045) !important;
    opacity:.46 !important;
    pointer-events:none !important;
    transform:none !important;
    z-index:3 !important;
  }

  .page-home.is-work-selector .home-wheel-sheen{
    display:block !important;
    position:absolute !important;
    inset:8% 18% 56% 12% !important;
    border-radius:50% !important;
    background:linear-gradient(125deg, rgba(255,255,255,.74), rgba(255,255,255,.08) 58%, transparent) !important;
    box-shadow:none !important;
    opacity:.34 !important;
    pointer-events:none !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:72px !important;
    height:72px !important;
    opacity:.98 !important;
    transform:
      perspective(260px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      translate3d(-2px,-2px,0)
      scale(1.045) !important;
    filter:
      drop-shadow(0 12px 20px rgba(13,16,18,.17))
      drop-shadow(0 0 2px rgba(255,255,255,.68)) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging{
    transform:
      perspective(260px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y))
      translate3d(-1px,-1px,0)
      scale(.992) !important;
    filter:
      drop-shadow(0 6px 12px rgba(13,16,18,.19))
      drop-shadow(0 0 1px rgba(255,255,255,.68)) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded::before,
  .page-home.is-work-selector .home-work-wheel:focus-visible::before{
    opacity:.88 !important;
    filter:
      drop-shadow(0 1px 0 rgba(39,45,48,.18))
      drop-shadow(0 -1px 0 rgba(255,255,255,.68)) !important;
    transform:rotate(var(--rim-active-rotation, var(--rim-rotation, 0deg))) scale(1.026) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::before{
    opacity:.94 !important;
    filter:
      drop-shadow(0 1px 0 rgba(39,45,48,.2))
      drop-shadow(0 -1px 0 rgba(255,255,255,.74)) !important;
    transform:rotate(var(--rim-active-rotation, var(--rim-rotation, 0deg))) scale(1.04) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded::after,
  .page-home.is-work-selector .home-work-wheel:focus-visible::after{
    opacity:.38 !important;
    box-shadow:
      inset 9px 11px 17px rgba(255,255,255,.105),
      inset -10px -10px 16px rgba(13,16,18,.052) !important;
    animation:tatwo-flower-glass-wake .46s cubic-bezier(.18,.9,.2,1) both !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::after{
    opacity:.46 !important;
    box-shadow:
      inset 10px 12px 18px rgba(255,255,255,.12),
      inset -11px -11px 17px rgba(13,16,18,.065) !important;
    animation:none !important;
  }

  .page-home.is-work-selector .home-work-wheel .home-work-chip,
  .page-home.is-work-selector .home-work-wheel .home-work-chip.is-active,
  .page-home.is-work-selector .home-work-wheel.is-expanded .home-work-chip,
  .page-home.is-work-selector .home-work-wheel.is-dragging .home-work-chip,
  .page-home.is-work-selector .home-work-wheel:focus-visible .home-work-chip{
    display:none !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

/* 2026-06-09 mobile wheel v3: liquid glass, not static glass.
   Inspired by layered liquid icon behavior: multiple translucent layers react
   to --press-x / --press-y so drag creates living refraction instead of a fixed
   highlight. */
@media (max-width:760px) and (orientation:portrait){
  .page-home.is-work-selector .home-work-wheel,
  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    isolation:isolate !important;
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
    min-height:60px !important;
    border:1px solid rgba(255,255,255,.46) !important;
    background:
      radial-gradient(
        circle at calc(50% + (var(--press-x, 0) * 18%)) calc(50% + (var(--press-y, 0) * 16%)),
        rgba(255,255,255,.52),
        rgba(255,255,255,.16) 26%,
        rgba(168,184,184,.055) 48%,
        transparent 72%
      ),
      conic-gradient(
        from calc(148deg + (var(--press-x, 0) * 24deg)),
        rgba(255,255,255,.10),
        rgba(18,24,25,.10),
        rgba(255,255,255,.44),
        rgba(255,255,255,.05),
        rgba(10,14,15,.12),
        rgba(255,255,255,.30),
        rgba(255,255,255,.10)
      ),
      repeating-linear-gradient(
        92deg,
        rgba(255,255,255,.22) 0 1px,
        rgba(255,255,255,.035) 1px 5px,
        rgba(20,26,27,.028) 5px 6px,
        rgba(255,255,255,.04) 6px 10px
      ),
      rgba(232,238,237,.16) !important;
    background-blend-mode:screen, overlay, soft-light, normal !important;
    box-shadow:
      0 18px 34px -26px rgba(8,10,12,.62),
      0 4px 12px -12px rgba(8,10,12,.42),
      0 0 0 1px rgba(255,255,255,.28),
      inset 0 1px 1px rgba(255,255,255,.68),
      inset calc(var(--press-x, 0) * -7px) calc(var(--press-y, 0) * -6px) 18px rgba(255,255,255,.11),
      inset calc(var(--press-x, 0) * 7px) calc(var(--press-y, 0) * 6px) 18px rgba(10,14,15,.045) !important;
    transform:
      translate3d(calc(var(--press-x, 0) * 1.8px), calc(var(--press-y, 0) * 1.8px), 0)
      scale(1) !important;
    transition:
      transform .28s cubic-bezier(.16,1,.25,1),
      box-shadow .28s cubic-bezier(.16,1,.25,1),
      filter .28s cubic-bezier(.16,1,.25,1) !important;
    filter:saturate(1.08) contrast(1.02) !important;
  }

  .page-home.is-work-selector .home-work-wheel::before,
  .page-home.is-work-selector .home-work-wheel.is-expanded::before,
  .page-home.is-work-selector .home-work-wheel.is-dragging::before,
  .page-home.is-work-selector .home-work-wheel:focus-visible::before{
    inset:2px !important;
    z-index:2 !important;
    opacity:.78 !important;
    background:
      radial-gradient(
        ellipse at var(--glint-x, 36%) var(--glint-y, 22%),
        rgba(255,255,255,.68),
        rgba(255,255,255,.16) 23%,
        transparent 48%
      ),
      radial-gradient(
        ellipse at calc(76% - (var(--press-x, 0) * 14%)) calc(78% - (var(--press-y, 0) * 13%)),
        rgba(12,18,19,.16),
        rgba(255,255,255,.08) 34%,
        transparent 56%
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.30) 0 1px,
        rgba(255,255,255,.025) 1px 4px,
        rgba(18,24,25,.030) 4px 5px,
        rgba(255,255,255,.035) 5px 8px
      ) !important;
    background-blend-mode:screen, difference, soft-light !important;
    mix-blend-mode:plus-lighter !important;
    transform:
      translate3d(var(--glint-shift-x, 0px), var(--glint-shift-y, 0px), 0)
      rotate(calc(var(--rim-active-rotation, 0deg) * .18))
      scale(1.015) !important;
    filter:saturate(1.22) contrast(1.12) !important;
  }

  .page-home.is-work-selector .home-work-wheel::after,
  .page-home.is-work-selector .home-work-wheel.is-expanded::after,
  .page-home.is-work-selector .home-work-wheel.is-dragging::after,
  .page-home.is-work-selector .home-work-wheel:focus-visible::after{
    z-index:3 !important;
    inset:0 !important;
    opacity:.96 !important;
    background:
      linear-gradient(
        calc(128deg + (var(--press-x, 0) * 16deg)),
        transparent 0 18%,
        rgba(255,255,255,.36) 31%,
        rgba(255,255,255,.035) 44%,
        rgba(10,16,17,.075) 61%,
        rgba(255,255,255,.18) 76%,
        transparent 100%
      ),
      radial-gradient(
        circle at calc(30% + (var(--press-x, 0) * 22%)) calc(24% + (var(--press-y, 0) * 18%)),
        rgba(255,255,255,.45),
        rgba(255,255,255,.08) 28%,
        transparent 54%
      ),
      conic-gradient(
        from calc(220deg + (var(--press-x, 0) * 32deg)),
        rgba(255,255,255,.00),
        rgba(255,255,255,.22),
        rgba(20,26,27,.05),
        rgba(255,255,255,.08),
        rgba(255,255,255,.30),
        rgba(255,255,255,.00)
      ) !important;
    background-blend-mode:color-dodge, screen, overlay !important;
    mix-blend-mode:screen !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.30),
      inset calc(var(--press-x, 0) * 9px) 0 14px rgba(255,255,255,.10),
      inset calc(var(--press-x, 0) * -10px) 0 16px rgba(8,12,13,.035) !important;
    transform:
      translate3d(calc(var(--press-x, 0) * -2.6px), calc(var(--press-y, 0) * -2.2px), 0)
      scale(1.02) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    transform:
      translate3d(calc(var(--press-x, 0) * 3px), calc(var(--press-y, 0) * 3px), 0)
      scale(1.055) !important;
    filter:saturate(1.20) contrast(1.08) brightness(1.02) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::before{
    opacity:.92 !important;
    transform:
      translate3d(calc(var(--press-x, 0) * 5px), calc(var(--press-y, 0) * 4px), 0)
      rotate(calc(var(--rim-active-rotation, 0deg) * .34))
      scale(1.06) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::after{
    opacity:1 !important;
    transform:
      translate3d(calc(var(--press-x, 0) * -4px), calc(var(--press-y, 0) * -3px), 0)
      scale(1.07) !important;
  }
}

@keyframes tatwo-flower-glass-wake{
  0%{
    opacity:.23;
    transform:
      translate3d(0,0,0)
      rotate(var(--sheen-rotation, 0deg))
      scale(.98);
  }
  52%{
    opacity:.48;
    transform:
      translate3d(var(--glint-shift-x), var(--glint-shift-y), 0)
      rotate(var(--sheen-rotation, 0deg))
      scale(1.045);
  }
  100%{
    opacity:.38;
    transform:
      translate3d(var(--glint-shift-x), var(--glint-shift-y), 0)
      rotate(var(--sheen-rotation, 0deg))
      scale(1.01);
  }
}

@media (prefers-reduced-motion:reduce){
  .page-home.is-work-selector .home-work-wheel,
  .page-home.is-work-selector .home-work-wheel::before,
  .page-home.is-work-selector .home-work-wheel::after{
    animation:none !important;
    transition:opacity .12s ease, filter .12s ease !important;
    transform:translate3d(0,0,0) scale(1) !important;
  }
}

/* 2026-06-09 Product Design final unified wheel override.
   Loaded after styles.css, so this is the real last word for both portrait
   and landscape. Use one vector-soft ring and remove older flower-edge bitmap,
   3D tilt, numbered chips, and shape masks. */
.page-home.is-work-selector .home-work-wheel,
.page-home.is-work-selector .home-work-wheel.is-expanded,
.page-home.is-work-selector .home-work-wheel.is-dragging,
.page-home.is-work-selector .home-work-wheel:focus-visible{
  --wheel-size:56px !important;
  --wheel-radius:0 !important;
  --tilt-x:0deg !important;
  --tilt-y:0deg !important;
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
  right:0 !important;
  bottom:0 !important;
  border-radius:50% !important;
  border:0 !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 38% 24%, rgba(255,255,255,.42), rgba(255,255,255,.08) 42%, transparent 70%),
    rgba(116,122,123,.26) !important;
  box-shadow:
    0 8px 18px -16px rgba(13,16,18,.32),
    0 0 0 1px rgba(255,255,255,.40),
    inset 0 0 0 1px rgba(255,255,255,.30) !important;
  opacity:1 !important;
  filter:none !important;
  transform:translateZ(0) !important;
  transform-origin:center center !important;
  backface-visibility:hidden !important;
  -webkit-mask:none !important;
  mask:none !important;
  -webkit-clip-path:none !important;
  clip-path:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  contain:paint !important;
  will-change:auto !important;
}

.page-home.is-work-selector .home-work-wheel.is-expanded,
.page-home.is-work-selector .home-work-wheel.is-dragging,
.page-home.is-work-selector .home-work-wheel:focus-visible{
  width:60px !important;
  height:60px !important;
  min-width:60px !important;
  min-height:60px !important;
  transform:translate3d(-2px, -2px, 0) !important;
}

.page-home.is-work-selector .home-work-wheel::before,
.page-home.is-work-selector .home-work-wheel.is-expanded::before,
.page-home.is-work-selector .home-work-wheel.is-dragging::before,
.page-home.is-work-selector .home-work-wheel:focus-visible::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:50% !important;
  background:url("content/uploads/2026-06-09--home-dial-smooth-ring.svg?v=3") center/100% 100% no-repeat !important;
  opacity:.96 !important;
  mix-blend-mode:normal !important;
  image-rendering:auto !important;
  filter:none !important;
  transform:translateZ(0) !important;
  transform-origin:center center !important;
  backface-visibility:hidden !important;
  pointer-events:none !important;
  -webkit-mask:none !important;
  mask:none !important;
  -webkit-clip-path:none !important;
  clip-path:none !important;
  animation:none !important;
  z-index:2 !important;
}

.page-home.is-work-selector .home-work-wheel::after,
.page-home.is-work-selector .home-work-wheel.is-expanded::after,
.page-home.is-work-selector .home-work-wheel.is-dragging::after,
.page-home.is-work-selector .home-work-wheel:focus-visible::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.24), rgba(255,255,255,.06) 30%, transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 58%, rgba(13,16,18,.025)) !important;
  box-shadow:none !important;
  opacity:1 !important;
  transform:translateZ(0) !important;
  pointer-events:none !important;
  -webkit-mask:none !important;
  mask:none !important;
  -webkit-clip-path:none !important;
  clip-path:none !important;
  animation:none !important;
  z-index:3 !important;
}

.page-home.is-work-selector .home-wheel-center,
.page-home.is-work-selector .home-wheel-sheen,
.page-home.is-work-selector .home-work-wheel .home-work-chip,
.page-home.is-work-selector .home-work-wheel .home-work-chip.is-active,
.page-home.is-work-selector .home-work-wheel.is-expanded .home-work-chip,
.page-home.is-work-selector .home-work-wheel.is-dragging .home-work-chip,
.page-home.is-work-selector .home-work-wheel:focus-visible .home-work-chip{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media (min-width:761px){
  .page-home.is-work-selector .home-work-picker{
    grid-template-columns:auto !important;
    width:64px !important;
    min-width:64px !important;
    height:64px !important;
    min-height:0 !important;
    padding:4px !important;
    gap:0 !important;
    align-items:center !important;
    justify-items:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .page-home.is-work-selector .home-picker-copy,
  .page-home.is-work-selector .home-side-ai-control{
    display:none !important;
  }
}

@media (orientation:landscape) and (max-height:560px) and (max-width:980px){
  .page-home.is-work-selector .home-lower{
    height:72px !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:64px !important;
    min-width:64px !important;
    height:64px !important;
    min-height:0 !important;
    padding:4px !important;
    grid-template-columns:auto !important;
  }
}

/* 2026-06-09 landscape audit: reserve a premium wide-phone tier.
   Future large iPhone-class landscape screens can be wider than the old
   980px cutoff while still being too short to use the desktop composition. */
@media (orientation:landscape) and (max-height:560px) and (min-width:981px) and (max-width:1120px){
  .tabnav{
    top:calc(8px + env(safe-area-inset-top)) !important;
    bottom:auto !important;
    left:50% !important;
    right:auto !important;
    width:min(760px, calc(100vw - 22px)) !important;
    transform:translateX(-50%) !important;
    padding:5px !important;
    border-radius:999px !important;
  }

  .page-stage{
    top:calc(58px + env(safe-area-inset-top)) !important;
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
  }

  .page-home.is-work-selector{
    grid-template-columns:minmax(330px,43%) minmax(440px,57%) !important;
    grid-template-rows:1fr !important;
    overflow:hidden !important;
  }

  .page-home.is-work-selector .home-left,
  .page-home.is-work-selector .home-right{
    height:100% !important;
    min-height:0 !important;
  }

  .page-home.is-work-selector .home-left{
    position:relative !important;
    padding:18px 20px 92px !important;
    gap:8px !important;
    overflow:hidden !important;
  }

  .page-home.is-work-selector .home-copy{
    max-width:none !important;
  }

  .page-home.is-work-selector .desktop-title{
    display:block !important;
    margin-top:10px !important;
    font-size:clamp(34px,5.4vw,54px) !important;
    line-height:.96 !important;
  }

  .page-home.is-work-selector .desktop-lede{
    display:block !important;
    max-height:4.9em !important;
    overflow:hidden !important;
    margin-top:10px !important;
    font-size:12px !important;
    line-height:1.58 !important;
  }

  .page-home.is-work-selector .mobile-title,
  .page-home.is-work-selector .mobile-lede{
    display:none !important;
  }

  .page-home.is-work-selector .home-lower{
    position:absolute !important;
    left:16px !important;
    right:auto !important;
    bottom:14px !important;
    width:64px !important;
    height:64px !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:64px !important;
    min-width:64px !important;
    height:64px !important;
    min-height:0 !important;
    padding:4px !important;
    grid-template-columns:auto !important;
  }

  .page-home.is-work-selector .home-right{
    border-left:.5px solid rgba(255,255,255,.46) !important;
    border-top:0 !important;
  }

  .page-home.is-work-selector .home-right .feat img{
    object-position:center 38% !important;
  }

  .page-home.is-work-selector .home-right-dock{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    width:auto !important;
    padding:10px !important;
    border-radius:18px !important;
    grid-template-columns:minmax(212px, auto) minmax(0, 1fr) !important;
    grid-template-areas:
      "actions caption" !important;
    column-gap:10px !important;
    row-gap:0 !important;
    align-items:end !important;
  }

  .page-home.is-work-selector .home-right-meta,
  .page-home.is-work-selector .caption-facts{
    display:none !important;
  }

  .page-home.is-work-selector .home-right-dock .actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .page-home.is-work-selector .home-right-dock .actions .btn{
    min-height:36px !important;
    justify-content:center !important;
    padding:8px 10px !important;
    font-size:12px !important;
  }

  .page-home.is-work-selector .home-right .caption{
    display:flex !important;
    min-width:0 !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:0 !important;
    border-top:0 !important;
    font-size:11px !important;
  }
}

/* 2026-06-09 iPhone ratio guard.
   This block is not a portrait redesign. It only locks the phone web ratios so
   390/430 portrait and 844/932 landscape do not drift into different systems. */
@media (max-width:760px) and (orientation:portrait){
  .page-home.is-work-selector{
    min-height:100% !important;
  }

  .page-home.is-work-selector .home-left{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .page-home.is-work-selector .mobile-title{
    width:max-content !important;
    max-width:calc(100vw - 58px) !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-wrap:nowrap !important;
  }

  .page-home.is-work-selector .mobile-lede{
    max-width:min(320px, calc(100vw - 58px)) !important;
  }

  .page-home.is-work-selector .home-work-picker{
    width:78px !important;
    min-width:78px !important;
    height:78px !important;
    min-height:78px !important;
    padding:11px !important;
    border-radius:22px !important;
  }

  .page-home.is-work-selector .home-work-wheel,
  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
  }
}

@media (max-width:400px) and (orientation:portrait){
  .page-home.is-work-selector .mobile-title{
    font-size:clamp(35px, 11.4vw, 44px) !important;
  }

  .page-home.is-work-selector .mobile-lede{
    font-size:13px !important;
    line-height:1.58 !important;
  }
}

@media (min-width:401px) and (max-width:760px) and (orientation:portrait){
  .page-home.is-work-selector .mobile-title{
    font-size:clamp(39px, 10.3vw, 48px) !important;
  }
}

@media (orientation:landscape) and (max-height:430px) and (max-width:980px){
  .page-home.is-work-selector .desktop-lede{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    max-height:3.2em !important;
    overflow:hidden !important;
  }

  .page-home.is-work-selector .home-right-dock{
    min-height:0 !important;
  }

  .page-home.is-work-selector .home-right .caption{
    max-height:50px !important;
    overflow:hidden !important;
  }
}

/* 2026-06-09 mobile wheel polish.
   Keep the same one-dial interaction, but make the phone control read as a
   smooth premium lens instead of a gray blob on top of the tattoo photo. */
@media (max-width:760px) and (orientation:portrait){
  .page-home.is-work-selector .home-work-picker{
    width:74px !important;
    min-width:74px !important;
    height:74px !important;
    min-height:74px !important;
    padding:8px !important;
    border-radius:50% !important;
    background:
      radial-gradient(circle at 38% 26%, rgba(255,255,255,.34), rgba(255,255,255,.10) 42%, rgba(255,255,255,.02) 72%, transparent 100%) !important;
    border:1px solid rgba(255,255,255,.30) !important;
    box-shadow:
      0 14px 26px -22px rgba(8,10,12,.42),
      0 0 0 1px rgba(255,255,255,.18) inset !important;
    backdrop-filter:blur(8px) saturate(118%) !important;
    -webkit-backdrop-filter:blur(8px) saturate(118%) !important;
  }

  .page-home.is-work-selector .home-work-wheel,
  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    background:
      radial-gradient(circle at 34% 22%, rgba(255,255,255,.56), rgba(255,255,255,.16) 34%, transparent 67%),
      radial-gradient(circle at 52% 58%, rgba(255,255,255,.16), rgba(255,255,255,.04) 42%, transparent 72%),
      rgba(226,230,229,.20) !important;
    box-shadow:
      0 10px 22px -18px rgba(8,10,12,.50),
      0 0 0 1px rgba(255,255,255,.56),
      inset 0 1px 0 rgba(255,255,255,.44),
      inset 0 -8px 16px rgba(12,14,15,.045) !important;
  }

  .page-home.is-work-selector .home-work-wheel::before,
  .page-home.is-work-selector .home-work-wheel.is-expanded::before,
  .page-home.is-work-selector .home-work-wheel.is-dragging::before,
  .page-home.is-work-selector .home-work-wheel:focus-visible::before{
    inset:0 !important;
    opacity:1 !important;
    background-size:104% 104% !important;
    filter:contrast(1.05) saturate(1.04) !important;
  }

  .page-home.is-work-selector .home-work-wheel::after,
  .page-home.is-work-selector .home-work-wheel.is-expanded::after,
  .page-home.is-work-selector .home-work-wheel.is-dragging::after,
  .page-home.is-work-selector .home-work-wheel:focus-visible::after{
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), rgba(255,255,255,.08) 31%, transparent 58%),
      linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.025) 56%, rgba(10,12,13,.035)) !important;
  }
}

/* 2026-06-09 mobile wheel v2: changhong / fluted glass button.
   The picker remains the touch target, but becomes visually invisible so the
   phone does not show a second outer circle below the real dial. */
@media (max-width:760px) and (orientation:portrait){
  .page-home.is-work-selector .home-work-picker{
    width:76px !important;
    min-width:76px !important;
    height:76px !important;
    min-height:76px !important;
    padding:9px !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
  }

  .page-home.is-work-selector .home-work-wheel,
  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    overflow:hidden !important;
    outline:none !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.58) !important;
    background:
      radial-gradient(circle at 31% 20%, rgba(255,255,255,.74), rgba(255,255,255,.18) 25%, transparent 52%),
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.38) 0 1px,
        rgba(255,255,255,.10) 1px 3px,
        rgba(36,42,43,.035) 3px 4px,
        rgba(255,255,255,.06) 4px 7px
      ),
      linear-gradient(145deg, rgba(244,248,247,.32), rgba(210,218,216,.11) 48%, rgba(255,255,255,.24)),
      rgba(231,236,235,.22) !important;
    background-blend-mode:screen, soft-light, screen, normal !important;
    box-shadow:
      0 16px 26px -22px rgba(8,10,12,.58),
      0 3px 10px -10px rgba(8,10,12,.36),
      0 0 0 1px rgba(255,255,255,.36),
      inset 0 1px 1px rgba(255,255,255,.78),
      inset 0 -12px 18px rgba(12,15,16,.05) !important;
    -webkit-backdrop-filter:blur(10px) saturate(1.26) contrast(1.04) !important;
    backdrop-filter:blur(10px) saturate(1.26) contrast(1.04) !important;
  }

  .page-home.is-work-selector .home-work-wheel::before,
  .page-home.is-work-selector .home-work-wheel.is-expanded::before,
  .page-home.is-work-selector .home-work-wheel.is-dragging::before,
  .page-home.is-work-selector .home-work-wheel:focus-visible::before{
    inset:3px !important;
    border-radius:50% !important;
    opacity:.72 !important;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.46) 0 1px,
        rgba(255,255,255,.06) 1px 4px,
        rgba(18,24,25,.045) 4px 5px,
        rgba(255,255,255,.08) 5px 8px
      ),
      url("content/uploads/2026-06-09--home-dial-smooth-ring.svg?v=4") center/106% 106% no-repeat !important;
    background-blend-mode:screen, normal !important;
    filter:contrast(1.08) saturate(1.02) !important;
    mix-blend-mode:normal !important;
  }

  .page-home.is-work-selector .home-work-wheel::after,
  .page-home.is-work-selector .home-work-wheel.is-expanded::after,
  .page-home.is-work-selector .home-work-wheel.is-dragging::after,
  .page-home.is-work-selector .home-work-wheel:focus-visible::after{
    inset:0 !important;
    border-radius:50% !important;
    background:
      radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.58), rgba(255,255,255,.14) 24%, transparent 48%),
      radial-gradient(ellipse at 76% 82%, rgba(255,255,255,.20), transparent 38%),
      conic-gradient(from 210deg, rgba(255,255,255,.02), rgba(255,255,255,.28), rgba(255,255,255,.04), rgba(42,48,49,.05), rgba(255,255,255,.18), rgba(255,255,255,.02)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.36),
      inset 9px 0 14px rgba(255,255,255,.11),
      inset -8px 0 12px rgba(16,20,21,.035) !important;
    opacity:1 !important;
  }
}

/* 2026-06-09 final mobile wheel v4: liquid icon layer override.
   This must stay after all older changhong/mobile wheel attempts. */
@media (max-width:760px) and (orientation:portrait){
  .page-home.is-work-selector .home-work-picker{
    width:76px !important;
    min-width:76px !important;
    height:76px !important;
    min-height:76px !important;
    padding:8px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
  }

  .page-home.is-work-selector .home-work-wheel,
  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    isolation:isolate !important;
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
    min-height:60px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.44) !important;
    border-radius:50% !important;
    background:
      radial-gradient(circle at calc(50% + (var(--press-x, 0) * 18%)) calc(50% + (var(--press-y, 0) * 16%)), rgba(255,255,255,.52), rgba(255,255,255,.16) 26%, rgba(168,184,184,.055) 48%, transparent 72%),
      conic-gradient(from calc(148deg + (var(--press-x, 0) * 24deg)), rgba(255,255,255,.10), rgba(18,24,25,.10), rgba(255,255,255,.44), rgba(255,255,255,.05), rgba(10,14,15,.12), rgba(255,255,255,.30), rgba(255,255,255,.10)),
      repeating-linear-gradient(92deg, rgba(255,255,255,.16) 0 1px, rgba(255,255,255,.018) 1px 5px, rgba(20,26,27,.020) 5px 6px, rgba(255,255,255,.03) 6px 10px),
      rgba(232,238,237,.14) !important;
    background-blend-mode:screen, overlay, soft-light, normal !important;
    box-shadow:
      0 18px 34px -26px rgba(8,10,12,.62),
      0 4px 12px -12px rgba(8,10,12,.42),
      0 0 0 1px rgba(255,255,255,.28),
      inset 0 1px 1px rgba(255,255,255,.68),
      inset calc(var(--press-x, 0) * -7px) calc(var(--press-y, 0) * -6px) 18px rgba(255,255,255,.11),
      inset calc(var(--press-x, 0) * 7px) calc(var(--press-y, 0) * 6px) 18px rgba(10,14,15,.045) !important;
    -webkit-backdrop-filter:blur(12px) saturate(1.36) contrast(1.08) !important;
    backdrop-filter:blur(12px) saturate(1.36) contrast(1.08) !important;
    transform:translate3d(calc(var(--press-x, 0) * 1.8px), calc(var(--press-y, 0) * 1.8px), 0) scale(1) !important;
    transition:transform .28s cubic-bezier(.16,1,.25,1), box-shadow .28s cubic-bezier(.16,1,.25,1), filter .28s cubic-bezier(.16,1,.25,1) !important;
    filter:saturate(1.08) contrast(1.02) !important;
  }

  .page-home.is-work-selector .home-work-wheel::before,
  .page-home.is-work-selector .home-work-wheel.is-expanded::before,
  .page-home.is-work-selector .home-work-wheel.is-dragging::before,
  .page-home.is-work-selector .home-work-wheel:focus-visible::before{
    content:"" !important;
    position:absolute !important;
    inset:2px !important;
    z-index:2 !important;
    border-radius:50% !important;
    opacity:.82 !important;
    background:
      radial-gradient(ellipse at var(--glint-x, 36%) var(--glint-y, 22%), rgba(255,255,255,.68), rgba(255,255,255,.16) 23%, transparent 48%),
      radial-gradient(ellipse at calc(76% - (var(--press-x, 0) * 14%)) calc(78% - (var(--press-y, 0) * 13%)), rgba(12,18,19,.16), rgba(255,255,255,.08) 34%, transparent 56%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 1px, rgba(255,255,255,.018) 1px 4px, rgba(18,24,25,.025) 4px 5px, rgba(255,255,255,.025) 5px 8px) !important;
    background-blend-mode:screen, difference, soft-light !important;
    mix-blend-mode:plus-lighter !important;
    transform:translate3d(var(--glint-shift-x, 0px), var(--glint-shift-y, 0px), 0) rotate(calc(var(--rim-active-rotation, 0deg) * .18)) scale(1.015) !important;
    filter:saturate(1.22) contrast(1.12) !important;
    pointer-events:none !important;
  }

  .page-home.is-work-selector .home-work-wheel::after,
  .page-home.is-work-selector .home-work-wheel.is-expanded::after,
  .page-home.is-work-selector .home-work-wheel.is-dragging::after,
  .page-home.is-work-selector .home-work-wheel:focus-visible::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;
    border-radius:50% !important;
    opacity:.98 !important;
    background:
      linear-gradient(calc(128deg + (var(--press-x, 0) * 16deg)), transparent 0 18%, rgba(255,255,255,.36) 31%, rgba(255,255,255,.035) 44%, rgba(10,16,17,.075) 61%, rgba(255,255,255,.18) 76%, transparent 100%),
      radial-gradient(circle at calc(30% + (var(--press-x, 0) * 22%)) calc(24% + (var(--press-y, 0) * 18%)), rgba(255,255,255,.45), rgba(255,255,255,.08) 28%, transparent 54%),
      conic-gradient(from calc(220deg + (var(--press-x, 0) * 32deg)), rgba(255,255,255,.00), rgba(255,255,255,.22), rgba(20,26,27,.05), rgba(255,255,255,.08), rgba(255,255,255,.30), rgba(255,255,255,.00)) !important;
    background-blend-mode:color-dodge, screen, overlay !important;
    mix-blend-mode:screen !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.30), inset calc(var(--press-x, 0) * 9px) 0 14px rgba(255,255,255,.10), inset calc(var(--press-x, 0) * -10px) 0 16px rgba(8,12,13,.035) !important;
    transform:translate3d(calc(var(--press-x, 0) * -2.6px), calc(var(--press-y, 0) * -2.2px), 0) scale(1.02) !important;
    pointer-events:none !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    transform:translate3d(calc(var(--press-x, 0) * 3px), calc(var(--press-y, 0) * 3px), 0) scale(1.055) !important;
    filter:saturate(1.20) contrast(1.08) brightness(1.02) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::before{
    opacity:.94 !important;
    transform:translate3d(calc(var(--press-x, 0) * 5px), calc(var(--press-y, 0) * 4px), 0) rotate(calc(var(--rim-active-rotation, 0deg) * .34)) scale(1.06) !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-dragging::after{
    opacity:1 !important;
    transform:translate3d(calc(var(--press-x, 0) * -4px), calc(var(--press-y, 0) * -3px), 0) scale(1.07) !important;
  }
}

/* 2026-06-10 cleanup: neutralize rejected wheel glass only.
   Keep one quiet transparent work-switch button; no Changhong ribs, no liquid/metal sheen. */
@media (max-width:760px) and (orientation:portrait){
  .page-home.is-work-selector .home-work-picker{
    width:76px !important;
    min-width:76px !important;
    height:76px !important;
    min-height:76px !important;
    padding:8px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    overflow:visible !important;
  }

  .page-home.is-work-selector .home-work-wheel,
  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
    min-height:60px !important;
    overflow:hidden !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.50) !important;
    background:
      radial-gradient(circle at 30% 22%, rgba(255,255,255,.40), rgba(255,255,255,.10) 30%, transparent 58%),
      rgba(246,249,248,.14) !important;
    background-blend-mode:screen, normal !important;
    box-shadow:
      0 18px 32px -27px rgba(6,8,10,.48),
      inset 0 1px 1px rgba(255,255,255,.70),
      inset 0 -10px 18px rgba(7,12,13,.035) !important;
    -webkit-backdrop-filter:blur(12px) saturate(1.12) !important;
    backdrop-filter:blur(12px) saturate(1.12) !important;
    transform:none !important;
    filter:none !important;
    transition:transform .22s cubic-bezier(.16,1,.25,1), box-shadow .22s ease !important;
  }

  .page-home.is-work-selector .home-work-wheel::before,
  .page-home.is-work-selector .home-work-wheel.is-expanded::before,
  .page-home.is-work-selector .home-work-wheel.is-dragging::before,
  .page-home.is-work-selector .home-work-wheel:focus-visible::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:1px !important;
    border-radius:50% !important;
    pointer-events:none !important;
    opacity:.42 !important;
    background:linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.030) 48%, rgba(5,9,10,.028) 78%, rgba(255,255,255,.08)) !important;
    background-blend-mode:normal !important;
    mix-blend-mode:screen !important;
    transform:none !important;
    filter:none !important;
  }

  .page-home.is-work-selector .home-work-wheel::after,
  .page-home.is-work-selector .home-work-wheel.is-expanded::after,
  .page-home.is-work-selector .home-work-wheel.is-dragging::after,
  .page-home.is-work-selector .home-work-wheel:focus-visible::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:50% !important;
    pointer-events:none !important;
    opacity:.26 !important;
    background:radial-gradient(ellipse at 30% 18%, rgba(255,255,255,.36), rgba(255,255,255,.045) 36%, transparent 62%) !important;
    background-blend-mode:normal !important;
    mix-blend-mode:screen !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.20) !important;
    transform:none !important;
    filter:none !important;
  }

  .page-home.is-work-selector .home-work-wheel.is-expanded,
  .page-home.is-work-selector .home-work-wheel.is-dragging,
  .page-home.is-work-selector .home-work-wheel:focus-visible{
    transform:scale(1.02) !important;
    filter:none !important;
  }

  .page-home.is-work-selector .home-work-wheel .home-wheel-center,
  .page-home.is-work-selector .home-work-wheel .home-wheel-sheen,
  .page-home.is-work-selector .home-work-wheel .home-work-chip,
  .page-home.is-work-selector .home-work-wheel .home-work-chip.is-active,
  .page-home.is-work-selector .home-work-wheel.is-expanded .home-work-chip,
  .page-home.is-work-selector .home-work-wheel.is-dragging .home-work-chip,
  .page-home.is-work-selector .home-work-wheel:focus-visible .home-work-chip{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
  }
}