/* Skill 70:4911 refinements. Page-scoped: sibling project components remain shared and unchanged. */
.design-skill-page {
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --skill-preview-blue: #377aff;
  --skill-preview-gap: var(--space-6);
  --skill-figure-radius: 12px;
  --skill-preview-height: 600px;
  --skill-related-cover-width: 208px;
}
.design-skill-page .brand { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.design-skill-page .brand-name { line-height: var(--leading-body); }
.design-skill-page .brand-portfolio { line-height: var(--leading-body); }
.design-skill-page .directory-project { margin-bottom: 0; }
.design-skill-page .chapter-nav > ol { padding-top: var(--space-6); }
.design-skill-page .case-block + .case-block { margin-top: var(--space-6); }
.design-skill-page .block-image { margin-block: var(--space-6); }
.design-skill-page .block-image .figure-link { border-radius: var(--skill-figure-radius); overflow: hidden; }
.design-skill-page .skill-contributions > h3 { margin-bottom: 0; }
.design-skill-page .skill-contributions ol { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.design-skill-page .skill-contributions li { padding-top: var(--space-6); }
.design-skill-page .skill-contributions li + li { margin-top: var(--space-3); }
.design-skill-page .skill-feature { border-top: 1px solid var(--rule); padding-top: var(--space-6); }
.design-skill-page .skill-feature:not(#material-input) { margin-top: var(--space-8); }
.design-skill-page .skill-deliverable { padding-top: var(--space-4); }
.design-skill-page .skill-preview-action { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--skill-preview-blue); }
.design-skill-page .skill-preview-action:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.design-skill-page .skill-role { padding-top: var(--space-6); }
.design-skill-page #section-03-block-5 { margin-top: var(--space-6); }
.design-skill-page #skill-rule-requirements { margin-top: 0; }
.design-skill-page #skill-rule-requirements .block-image { margin-block: var(--space-6) 0; }
.design-skill-page #section-02-block-7 { margin-top: var(--space-6); padding-top: var(--space-6); }
.design-skill-page .block-related .skill-related-cover { margin: 0; }
.design-skill-page .block-related .figure-link { aspect-ratio: auto; }
.design-skill-page .block-related .figure-link img { height: auto; object-fit: initial; }
@container case-content (width >= 720px) {
  .design-skill-page #practice-summary { grid-template-columns: var(--skill-related-cover-width) minmax(0, 1fr); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1108px) {
    .design-skill-page #practice-summary { grid-template-columns: var(--skill-related-cover-width) minmax(0, 1fr); }
  }
}
@media (min-width: 701px) {
  .design-skill-page .block-image:not(.skill-related-cover) > figure { width: 900px; max-width: calc(100% + var(--space-2)); }
  .design-skill-page #platform-preview > figure, .design-skill-page #section-04-block-3 > figure,
  .design-skill-page #space-comparison > figure, .design-skill-page #collaboration-roles > figure,
  .design-skill-page #section-03-block-8 > figure { width: 100%; max-width: 100%; }
}
@media (max-width: 700px) {
  .design-skill-page .site-header { gap: var(--space-3); }
  .design-skill-page .brand { max-width: 54%; }
  .design-skill-page .brand-portfolio { font-size: 9px; line-height: var(--leading-small); }
  .design-skill-page .skill-contributions li { padding-top: var(--space-4); }
  .design-skill-page .skill-feature:not(#material-input) { margin-top: var(--space-6); }
  .design-skill-page .skill-role { padding-top: var(--space-3); }
  .design-skill-page .block-related .skill-related-cover { width: 100%; }
}

.design-skill-page #intro-block-1 h2 { font-size: var(--text-intro); line-height: var(--leading-intro); }
.design-skill-page #platform-preview { margin-top: var(--skill-preview-gap); }
.design-skill-page .skill-preview-hint { margin-bottom: var(--space-2); }

/* Private Skill page geometry from Figma 70:4911. */
.design-skill-page #design-review { margin-top: var(--space-8); }
.design-skill-page .case-footer { margin-top: calc(var(--space-10) * 3); }

/* One stable iframe is used inline, in the modal, and in native fullscreen. */
.design-skill-page .skill-preview-dialog {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: var(--content-max);
  height: var(--skill-preview-height);
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--skill-figure-radius);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.design-skill-page .skill-preview-panel { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; background: var(--surface); }
.design-skill-page .skill-preview-frame { display: block; flex: 1; width: 100%; min-width: 0; min-height: 0; height: 100%; border: 0; background: var(--surface); }
.design-skill-page .skill-preview-toolbar { display: none; }
.design-skill-page .skill-preview-dialog.is-expanded {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.design-skill-page .skill-preview-dialog::backdrop { background: var(--surface); }
.design-skill-page .skill-preview-dialog.is-expanded .skill-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: 1px solid var(--rule);
  font-size: var(--text-control);
  line-height: var(--leading-control);
}
.design-skill-page .skill-preview-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.design-skill-page .skill-preview-sound { margin-left: auto; }
.design-skill-page .skill-preview-toolbar .portfolio-sound-toggle { position: static; }
.design-skill-page .skill-preview-controls a, .design-skill-page .skill-preview-controls button { display: inline-flex; align-items: center; min-height: var(--target-size); }
.design-skill-page .skill-preview-controls a { color: var(--skill-preview-blue); }
.design-skill-page .skill-preview-controls button { padding: 0 var(--space-3); border: 1px solid var(--rule); border-radius: var(--space-2); background: var(--surface); color: var(--ink); cursor: pointer; }
.design-skill-page .skill-preview-panel:fullscreen { width: 100vw; height: 100vh; height: 100dvh; }
.design-skill-page.has-open-skill-preview { overflow: hidden; }