/* Figma 100:71333. Private refinements of the shared case-study components. */
.viaim-desktop-page {
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --desktop-figure-radius: 16px;
  --desktop-rule-width: 1px;
  --desktop-preview-height: 600px;
  --desktop-preview-blue: #377aff;
  --desktop-recording-width: 891px;
}
.viaim-desktop-page .brand { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.viaim-desktop-page .brand-name,
.viaim-desktop-page .brand-portfolio { line-height: var(--leading-body); }
.viaim-desktop-page .directory-project { margin-bottom: 0; }
.viaim-desktop-page .chapter-nav > ol { padding-top: var(--space-6); }
.viaim-desktop-page .section-header { border-top-width: var(--desktop-rule-width); }
.viaim-desktop-page .desktop-figure { margin-block: var(--space-6); }
.viaim-desktop-page .desktop-figure .figure-link { border-radius: var(--desktop-figure-radius); overflow: hidden; }
.viaim-desktop-page #figure-hero { margin-block: 0 var(--space-2); }
.viaim-desktop-page #figure-hero + .case-block { margin-top: 0; }
.viaim-desktop-page .intro-blocks .text-block + .text-block { margin-top: var(--space-2); }
.viaim-desktop-page #responsibilities-results p + p { margin-top: 0; }
.viaim-desktop-page #section-01 { margin-top: var(--space-14); }
.viaim-desktop-page #architecture-strategy,
.viaim-desktop-page #architecture-solution { margin-top: var(--space-2); }
.viaim-desktop-page .desktop-figure--architecture-comparison { margin-block: 0 var(--space-2); }
.viaim-desktop-page #window-rules { margin-top: 0; }
.viaim-desktop-page #settings-problem { padding-top: 0; }
.viaim-desktop-page #settings-strategy { margin-top: var(--space-2); }
.viaim-desktop-page #settings-solution { margin-top: var(--space-4); }
.viaim-desktop-page .desktop-figure--device-settings { margin-top: 0; }
.viaim-desktop-page #preview-problem,
.viaim-desktop-page #preview-strategy,
.viaim-desktop-page #independent-window-problem,
.viaim-desktop-page #independent-window-strategy,
.viaim-desktop-page #floating-problem { padding-top: 0; }
.viaim-desktop-page .desktop-figure--recording-path { margin-top: var(--space-3); }
.viaim-desktop-page .desktop-figure--recording-path .case-figure { width: var(--desktop-recording-width); max-width: 100%; }
.viaim-desktop-page .desktop-figure--independent-windows { margin-block: var(--space-6) 0; }
.viaim-desktop-page .desktop-figure--floating-workflow,
.viaim-desktop-page .desktop-figure--interface-switch { margin-block: 0; }
.viaim-desktop-page .desktop-anchor { display: block; scroll-margin-top: var(--space-8); }
.viaim-desktop-page #section-03 .block-heading h3,
.viaim-desktop-page #section-03 .block-heading h4 { margin-bottom: 0; }
.viaim-desktop-page #independent-picture-window { margin-top: var(--space-8); }
.viaim-desktop-page #floating-recording { margin-top: var(--space-4); }
.viaim-desktop-page #section-04 .section-header { margin-bottom: var(--space-8); }
.viaim-desktop-page .case-footer { margin-top: var(--space-10); }
.viaim-desktop-page .desktop-preview-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); }
.viaim-desktop-page .desktop-preview-links { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-control); line-height: var(--leading-control); color: var(--desktop-preview-blue); }
.viaim-desktop-page .desktop-preview-links a { display: inline-flex; align-items: center; min-height: var(--target-size); }
.viaim-desktop-page .desktop-preview-links a:hover { text-decoration: underline; text-underline-offset: var(--space-1); }

/* The inline iframe itself is 600px high. The same instance enters the top layer. */
.viaim-desktop-page .desktop-preview-dialog { position: relative; inset: auto; width: 100%; max-width: var(--content-max); height: var(--desktop-preview-height); max-height: none; margin: 0; padding: 0; border: 0; border-radius: var(--desktop-figure-radius); background: var(--surface); color: var(--ink); overflow: hidden; }
.viaim-desktop-page .desktop-preview-panel { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; background: var(--surface); }
.viaim-desktop-page .desktop-preview-frame { display: block; flex: 1; width: 100%; min-width: 0; min-height: 0; height: 100%; border: 0; background: var(--surface); }
.viaim-desktop-page .desktop-preview-toolbar { display: none; }
.viaim-desktop-page .desktop-preview-dialog.is-expanded { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
.viaim-desktop-page .desktop-preview-dialog::backdrop { background: var(--surface); }
.viaim-desktop-page .desktop-preview-dialog.is-expanded .desktop-preview-toolbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); border-bottom: var(--desktop-rule-width) solid var(--rule); font-size: var(--text-control); line-height: var(--leading-control); }
.viaim-desktop-page .desktop-preview-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.viaim-desktop-page .desktop-preview-sound { margin-left: auto; }
.viaim-desktop-page .desktop-preview-toolbar .portfolio-sound-toggle { position: static; }
.viaim-desktop-page .desktop-preview-controls a,
.viaim-desktop-page .desktop-preview-controls button { display: inline-flex; align-items: center; min-height: var(--target-size); }
.viaim-desktop-page .desktop-preview-controls a { color: var(--desktop-preview-blue); }
.viaim-desktop-page .desktop-preview-controls button { padding: 0 var(--space-3); border: var(--desktop-rule-width) solid var(--rule); border-radius: var(--space-2); background: var(--surface); color: var(--ink); cursor: pointer; }
.viaim-desktop-page .desktop-preview-panel:fullscreen { width: 100vw; height: 100vh; height: 100dvh; }
.viaim-desktop-page.has-open-desktop-preview { overflow: hidden; }
@media (min-width: 701px) {
  .viaim-desktop-page .desktop-figure--device-settings .case-figure { width: var(--content-max); max-width: calc(100% + var(--space-2)); }
}
@media (max-width: 700px) {
  .viaim-desktop-page .site-header { gap: var(--space-3); }
  .viaim-desktop-page .brand { max-width: 54%; }
  .viaim-desktop-page .brand-portfolio { font-size: 9px; line-height: var(--leading-small); }
  .viaim-desktop-page .desktop-preview-dialog.is-expanded .desktop-preview-toolbar { padding-inline: var(--space-3); }
}