/* The same frosted surface as the page header, with native Web Awesome behavior. */
.work-dialog {
  --dialog-gap: 24px;
  --width: min(1180px, calc(100vw - var(--dialog-gap) * 2));
  --spacing: 24px;
  --backdrop-filter: blur(9px) saturate(.85);
  --wa-color-overlay-modal: #10182066;
  --wa-panel-border-radius: 28px;
  --wa-color-brand-on-quiet: #202224;
  --wa-color-neutral-on-quiet: #545b60;
  --wa-color-focus: #545b60;
  --show-duration: 240ms;
  --hide-duration: 180ms;
  color: #202224;
}
.work-dialog::part(dialog) {
  height: calc(100dvh - var(--dialog-gap) * 2);
  max-height: calc(100dvh - var(--dialog-gap) * 2);
  max-width: calc(100vw - var(--dialog-gap) * 2);
  margin: auto;
  overflow: hidden;
  background-color: #f3f5f5db;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath d='M0 0h128v128H0z' filter='url(%23grain)' opacity='.05'/%3E%3C/svg%3E");
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  backdrop-filter: blur(32px) saturate(1.2);
  box-shadow: inset 0 1px 0 #ffffffd9, 0 24px 100px #0005;
  border-radius: var(--wa-panel-border-radius);
}
.work-dialog::part(header) {
  align-items: center;
  padding: 18px 20px 6px 28px;
  background: transparent;
}
.work-dialog::part(title) {
  font: 500 clamp(18px, 1.8vw, 24px)/1.35 var(--display);
  letter-spacing: -.035em;
}
.work-dialog::part(close-button__base) {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #343b40;
  background: #ffffff85;
  box-shadow: 0 2px 8px #17252f08;
}
.work-dialog::part(body) {
  padding: 0 24px 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #69767a66 transparent;
}
.work-dialog::part(footer) {
  padding: 14px 24px 20px;
  background: transparent;
}
.screen-tabs { --indicator-color: transparent; --track-color: transparent; --track-width: 0; }
.screen-tabs::part(nav) {
  position: sticky;
  top: 0;
  z-index: 1;
  justify-content: center;
  padding: 8px 0 20px;
  background: transparent;
}
.screen-tabs::part(tabs) {
  flex: 0 1 auto;
  margin-inline: auto;
  gap: 2px;
  border: 0;
  padding: 4px;
  border-radius: 100px;
  background: #d9dfe2ad;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.screen-tabs::part(active-tab-indicator) { display: none; }
.screen-tabs wa-tab { border: 0; margin: 0; }
.screen-tabs wa-tab::part(base) {
  min-height: 44px;
  justify-content: center;
  min-width: 124px;
  padding: 10px 20px;
  border-radius: 100px;
  color: #555e64;
  font-size: 13px;
  font-weight: 500;
  transition: color .18s, background-color .18s, box-shadow .18s;
}
.screen-tabs wa-tab[active]::part(base) { background: #fff; color: #202224; box-shadow: 0 2px 8px #12212b12; }
.screen-tabs wa-tab-panel::part(base) { padding: 0; }
.dialog-desktop > img, .dialog-detail img, .dialog-mobile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 20px #1a283312;
}
.dialog-mobile img { width: min(100%, 430px); margin-inline: auto; }
.dialog-detail { margin-top: 24px; }
.dialog-detail > p { margin: 0 0 12px; font-size: 13px; color: #545b60; }
.dialog-external {
  --wa-color-fill-normal: #2022240e;
  --wa-color-on-normal: #343b40;
  --wa-form-control-height: 44px;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 13px;
}
@media (min-width: 1000px), (min-width: 700px) and (max-height: 540px) and (orientation: landscape) {
  .work-dialog::part(header) { min-height: 88px; padding-block: 16px; }
  .screen-tabs::part(nav) {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 266px;
    transform: translateX(-50%);
    padding: 0;
  }
}
@media (max-width: 760px) {
  .work-dialog { --dialog-gap: 12px; --wa-panel-border-radius: 24px; }
  .work-dialog::part(header) { padding: 12px 12px 4px 20px; }
  .work-dialog::part(body) { padding: 0 12px 6px; }
  .work-dialog::part(footer) { padding: 12px; }
  .screen-tabs::part(nav) { padding: 8px 0 16px; }
  .screen-tabs wa-tab::part(base) { min-width: 116px; padding-inline: 16px; }
  .dialog-external { width: 100%; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .work-dialog { --dialog-gap: 10px; --wa-panel-border-radius: 20px; }
  .work-dialog::part(header) { min-height: 64px; padding-block: 4px 0; }
  .work-dialog::part(footer) { padding-block: 6px 8px; }
  .screen-tabs::part(nav) { padding-block: 4px 10px; }
}
@media (min-width: 700px) and (max-height: 540px) and (orientation: landscape) {
  .screen-tabs::part(nav) { top: 6px; padding: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .work-dialog { --backdrop-filter: none; }
  .work-dialog::part(dialog) { background: #f3f5f5; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .work-dialog { --show-duration: 0ms; --hide-duration: 0ms; }
  .screen-tabs wa-tab::part(base) { transition: none; }
}