:root {
  --sound-size: 13px;
  --sound-top: 16px;
  --sound-space: 8px;
  --sound-gutter: 24px;
  --sound-clearance: 112px;
  --sound-ink: #f8f9ff;
  --sound-surface: rgba(7, 11, 35, .76);
  --sound-rule: rgba(248, 249, 255, .24);
  --sound-focus: #36b9ff;
}
.has-portfolio-sound .portfolio-sound-toggle {
  position: fixed; z-index: 1000;
  top: max(var(--sound-top), env(safe-area-inset-top));
  right: max(var(--sound-gutter), env(safe-area-inset-right));
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sound-space); min-height: 44px; padding: 0;
  border: 0; border-radius: 0;
  background: transparent; color: var(--sound-ink);
  font: 400 var(--sound-size)/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: .02em; white-space: nowrap; cursor: pointer;
  box-sizing: border-box; margin: 0; text-shadow: none;
  -webkit-appearance: none; appearance: none;
  pointer-events: auto;
  transition: opacity 180ms ease;
}
.has-portfolio-sound .portfolio-sound-toggle > span {
  display: inline; margin: 0; padding: 0;
  color: inherit; font: inherit; letter-spacing: inherit;
}
.portfolio-sound-toggle:hover { opacity: .72; }
.has-portfolio-sound .portfolio-sound-toggle.is-in-header {
  position: static; flex: 0 0 auto; align-self: center;
  color: inherit; font: inherit; letter-spacing: inherit;
}
.has-portfolio-sound .portfolio-sound-toggle:focus-visible { outline: 2px solid var(--sound-focus); outline-offset: 4px; }
.portfolio-sound-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.portfolio-sound-toggle[aria-pressed="false"] svg { opacity: .4; }
.portfolio-sound-toggle[aria-pressed="false"] svg path { d: path("M2 8h12"); }
.has-portfolio-sound .about-header > span,
.has-portfolio-sound .case-header__identity { margin-right: 0; margin-left: auto; }
.has-portfolio-sound .header-nav,
.has-portfolio-sound .site-header .site-nav { margin-right: 0; }
.has-portfolio-sound .site-nav .portfolio-sound-toggle { margin-left: auto; }
.has-portfolio-sound .viewer-actions .portfolio-sound-toggle {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule);
  color: var(--ink); background: var(--surface);
  font-size: var(--text-control); line-height: var(--leading-control);
}
.has-portfolio-sound .about-video__controls,
.has-portfolio-sound .about-video-host__fallback { right: calc(max(24px, env(safe-area-inset-right)) + var(--sound-clearance)); }
.portfolio-sound-toggle.is-in-dialog { position: absolute; }
dialog:not(.about-video-host) > .portfolio-sound-toggle { right: 64px; top: 8px; }
.has-portfolio-sound .image-viewer { padding-top: 72px; }
dialog.image-viewer > .portfolio-sound-toggle { right: 16px; top: 8px; }
.has-portfolio-sound .portfolio-sound-header {
  gap: 16px;
}
.portfolio-sound-header > span { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  :root { --sound-gutter: 16px; --sound-clearance: 104px; }
  .has-portfolio-sound body[data-video-detail] .about-header > span,
  .has-portfolio-sound .case-header__identity { display: none; }
  .has-portfolio-sound .about-video__controls,
  .has-portfolio-sound .about-video-host__fallback { right: calc(max(16px, env(safe-area-inset-right)) + var(--sound-clearance)); }
  .portfolio-sound-header { flex-wrap: wrap; column-gap: 8px; }
  .portfolio-sound-header > span { order: 3; flex-basis: 100%; padding-bottom: 8px; }
  .has-portfolio-sound .site-header.shell { flex-wrap: wrap; gap: 8px 24px; padding-block: 16px; }
  .has-portfolio-sound .site-header.shell .brand { max-width: calc(100% - var(--sound-clearance)); }
  .has-portfolio-sound .site-header.shell .site-nav { margin-right: 0; flex-basis: 100%; }
}
body[data-mobile-home] .site-header .portfolio-sound-toggle { font-size: clamp(13px, .95vw, 18px); line-height: 1.5; }
@media (max-width: 900px), (pointer: coarse) {
  body[data-mobile-home] .site-header .portfolio-sound-toggle { font-size: 12px; line-height: 1.5; }
}
@media (max-width: 600px) {
  .has-portfolio-sound body[data-mobile-home] .header-nav { display: none; }
}