/* Dark regular glass: a quiet body, one optical rim, interaction light.
   Visual reference: Apple HIG materials-ios-liquid-glass-over-dark@2x.png. */
.glass-control,.glass-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  color: var(--paper);
  background-color: var(--glass-fill);
  background-image: linear-gradient(170deg,rgba(255,255,255,.016),transparent 48%,rgba(218,231,255,.012));
  box-shadow: inset 0 0 2px rgba(230,236,248,.045),0 5px 14px rgba(0,0,0,.22);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  transition: transform .3s var(--ease-settle),background-color .22s,box-shadow .22s;
  -webkit-tap-highlight-color: transparent;
}
.glass-control {border-radius:999px}
.glass-surface {--glass-fill:rgba(13,16,20,.66);backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);box-shadow:0 22px 60px #0007,inset 0 1px 0 #ffffff05}
.glass-control::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(90px 65px at var(--glass-x,50%) var(--glass-y,50%),rgba(255,255,255,.14),rgba(224,233,250,.045) 38%,transparent 74%);
  opacity: 0;
  transform: scale(.92);
  transform-origin: var(--glass-x,50%) var(--glass-y,50%);
  transition: opacity .3s,transform .42s cubic-bezier(.2,.8,.2,1);
}
.glass-control::after,.glass-surface::after {content:none}
@supports (mask-composite: exclude) {
  .glass-control,.glass-surface {border-color:transparent}
  .glass-control::after,.glass-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: .7px;
    border-radius: inherit;
    pointer-events: none;
    background: var(--glass-rim);
    mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .82;
    transition: opacity .25s;
  }
}
.primary.glass-control {--glass-fill:rgba(39,43,51,.86)}
.primary .action-icon {width:12px;height:12px;padding:4px;box-sizing:content-box;margin-left:12px;border-radius:50%;background:#e8edf4;color:#14181f;transition:transform .25s var(--ease-settle)}
@media (hover:hover) {.primary:hover .action-icon {transform:rotate(45deg)}}
.glass-label {position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover) {
  .glass-control:hover {background-color:var(--glass-hover)}
  .glass-control:hover::before {opacity:.52;transform:scale(1)}
  .glass-control:hover::after {opacity:1}
}
.glass-control:active,.glass-control.is-pressed {
  transform: translateY(.25px) scaleX(1.022) scaleY(.974);
  transition-duration: .13s;
  box-shadow: inset 0 0 3px rgba(230,236,248,.065),0 3px 9px rgba(0,0,0,.18);
}
.glass-control:active::before,.glass-control.is-pressed::before {opacity:1;transform:scale(1.5);transition-duration:.18s}
.glass-control:active::after,.glass-control.is-pressed::after {opacity:1}
.glass-control:focus-visible {outline:2px solid #a8c8ee;outline-offset:4px}

/* Invisible gesture hit area; no visible frame or instructional overlay. */
.prism-control {
  position:absolute;left:50%;top:43%;
  width:min(520px,76%);height:76%;
  transform:translate(-50%,-50%);
  pointer-events:auto;touch-action:none;
  user-select:none;-webkit-user-select:none;
  cursor:grab;
  border:0;background:none;box-shadow:none;outline:none;
}
.prism-control.is-dragging {cursor:grabbing}
#prism-control:focus,#prism-control:focus-visible {outline:none;border:0;box-shadow:none}
/* Keyboard focus is expressed by the optical object, never by a rectangle. */
.art:has(#prism-control:focus-visible) #prism-scene {filter:brightness(1.09)}
@media (max-width:600px) {.nav-pill.glass-control {min-height:44px}}
@media (max-width:360px) {.primary .action-icon {margin-left:8px}}
@media (prefers-reduced-motion:reduce) {
  .glass-control,.glass-control::before,.glass-control::after {transition:none}
  .glass-control:active,.glass-control.is-pressed,.glass-control::before,
  .glass-control:active::before,.glass-control.is-pressed::before {transform:none}
}
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce) {
  .glass-control,.glass-surface,.glass-control:hover {background:#20232b;border:1px solid #a9b3c4;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .glass-control::before,.glass-control::after,.glass-surface::after {display:none}
}
@media (forced-colors:active) {
  .glass-control,.glass-surface {border:1px solid ButtonText;background:ButtonFace;color:ButtonText;box-shadow:none}
  .glass-control::before,.glass-control::after,.glass-surface::after {display:none}
}