/* Discovery and standalone studio surfaces. */
body:has(#page > :is(.cv-list, .media-wrap, .plz-wrap, .skills-page)) { overflow: clip; }
.page :is(.cv-list, .media-wrap, .plz-wrap, .skills-page), .skills-modal {
  --section-line: #b9c8e025;
  --section-muted: #a3b1c7;
  --section-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-family: var(--section-font);
  -webkit-font-smoothing: antialiased;
}
.page :is(.page-inner.cv-list, .page-inner.media-wrap, .plz-wrap, .skills-page) {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: 1520px;
  margin: 0 auto;
  padding: 32px clamp(20px, 3vw, 44px) 88px;
}
body :is(.cv-list, .media-wrap, .plz-wrap, .skills-page) :is(h1, h2, h3),
body .skills-modal :is(h3, h4) {
  font-family: var(--section-font) !important;
  letter-spacing: -.025em;
  text-shadow: none;
}
.page :is(.cv-list, .media-wrap, .plz-wrap, .skills-page) :is(button, input, select, textarea) {
  font-family: inherit;
  letter-spacing: normal;
}
.page :is(.cv-list, .media-wrap, .plz-wrap, .skills-page) :focus-visible,
.skills-modal :focus-visible { outline: 2px solid #c2baf2; outline-offset: 3px; }
.page :is(.cv-list, .media-wrap) .btn-grad.px-host {
  background: #d4d6f2;
  border: 1px solid #e2e1ff70;
  border-radius: 8px;
  color: #252941 !important;
  font: 600 13px/1.5 var(--section-font);
  text-shadow: none;
  box-shadow: 0 4px 14px #0002;
}
.page :is(.cv-list, .media-wrap) .btn-grad.px-host > canvas.px-face { display: none; }
.page :is(.cv-list, .media-wrap) .btn-grad.px-host svg { opacity: 1; }
.page :is(.cv-list, .media-wrap, .plz-wrap, .skills-page) [hidden] { display: none !important; }

/* Canvas library: readable project names and compact, reachable controls. */
.cv-list > .atelier-eyebrow { margin-bottom: 10px; }
.cv-list > .page-title-row { justify-content: space-between; gap: 18px 24px; min-height: 0; padding: 0 0 22px; margin-bottom: 22px; border-bottom-color: var(--section-line); }
.cv-list-heading { flex: 1 1 260px; min-width: 0; }
.cv-list-heading h1 { font-size: clamp(26px, 2.4vw, 32px); margin: 0 0 6px; line-height: 1.3; }
.cv-list-heading h1::before { display: none; }
.cv-list-heading .crumb { border: 0; padding: 0; color: var(--section-muted); font-size: 12px; white-space: normal; }
.cv-list-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.cv-list-actions .btn { min-height: 40px; padding: 8px 12px; white-space: nowrap; }
.cv-list .cv-studio-intro { min-height: 186px; padding: 28px 32px; margin-bottom: 28px; border-radius: 16px; background: #101a28; border-color: var(--section-line); }
.cv-studio-intro > div { position: relative; z-index: 1; max-width: 65%; }
.cv-list .cv-studio-intro h2 { font-size: clamp(23px, 2.2vw, 29px); margin: 12px 0 9px; line-height: 1.4; }
.cv-list .cv-studio-intro p { font-size: 13px; line-height: 1.8; }
.cv-intro-cover { position: absolute; inset: 0 0 0 auto; width: 52%; height: 100%; object-fit: cover; object-position: right center; mask-image: linear-gradient(90deg, transparent, #000 42%); pointer-events: none; }
.cv-list .cv-library-heading { margin: 0 0 16px; gap: 8px; }
.cv-list .cv-library-heading h2 { font-size: 18px; }
.cv-list .cv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.cv-list .cv-card { min-width: 0; min-height: 194px; padding: 20px; gap: 16px; border-radius: 13px; background: linear-gradient(145deg, #182331, #101a26); }
.cv-list .cv-card-icon { width: 42px; height: 42px; font-size: 21px; border-radius: 11px; flex: none; }
.cv-list .cv-card-actions { opacity: 1; gap: 4px; }
.cv-list .cv-card-actions .icon-btn { width: 32px; height: 32px; color: #a5b6ce; }
.cv-list .cv-card-title { font-size: 15px; font-weight: 600; line-height: 1.65; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cv-list .cv-card-meta { padding-top: 13px; font-size: 11px; letter-spacing: 0; }
.page .cv-list .page-inner.cvm-page { max-width: none; padding: 0; margin: 0; }
.cv-list .cvm-page > .atelier-eyebrow { display: none; }
.cv-list .cvm-page .page-title-row { min-height: 0; margin-bottom: 16px; padding-bottom: 16px; }
.cv-list #cv-mode-market { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--section-line); }
.cv-list .cvm-page #cvm-title { margin: 0; font-size: 20px; line-height: 1.5; }
.cv-list .cvm-page .archive-toolbar { margin-bottom: 20px; }
.cv-list .cvm-page { background: transparent; }
.cv-list .cvm-page::before, .cv-list .cvm-page::after { display: none; }
.cv-list .cvm-page h1::before { display: none; }
.cv-list .cvm-page .page-title-row .crumb { padding: 0; border: 0; color: var(--section-muted); }
.cv-list .cvm-page .archive-toolbar { padding: 12px; border: 1px solid var(--section-line); border-radius: 11px; background: #0e1723; }
.cv-list .cvm-toolbar .seg { display: flex; flex: none; width: auto; max-width: 100%; gap: 3px; padding: 4px; border: 1px solid var(--section-line); border-radius: 8px; background: #0a121d; }
.cv-list .cvm-toolbar .seg button { flex: 1; border: 1px solid transparent; border-radius: 5px; padding: 7px 10px; font-size: 12px; cursor: pointer; color: #a6b5cb; white-space: nowrap; }
.cv-list .cvm-toolbar .seg button.active { background: #c6b9f21c; border-color: #c6b9f238; color: #ece9ff; box-shadow: none; }
.cv-list .cvm-toolbar .archive-search { min-width: 0; border-radius: 8px; border-color: var(--section-line); background: #0a121d; }
.cv-list .cvm-toolbar .archive-search input { min-width: 0; }

/* Media: a small editorial header keeps the working panels in the first screen. */
.media-wrap .media-head { position: relative; isolation: isolate; overflow: hidden; min-height: 140px; padding: 22px 26px; margin-bottom: 20px; border: 1px solid var(--section-line); border-radius: 15px; background: #101a25; gap: 14px; }
.media-head-cover { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 46%; height: 100%; object-fit: cover; object-position: right center; opacity: .56; mask-image: linear-gradient(90deg, transparent, #000 55%); pointer-events: none; }
.media-wrap .media-head-text { min-width: 0; flex: 1; }
.media-wrap .media-head-text h2 { font-size: clamp(25px, 2.3vw, 31px); line-height: 1.3; }
.media-wrap .media-head-text p { color: #acbbcd; font-size: 13px; }
.media-wrap .media-head .hub-eyebrow { color: #a0b9cb; margin-bottom: 8px; }
.media-wrap .media-title-icon { width: 34px; height: 34px; flex: none; border-color: #b9cbdf30; background: #c6d6ee0a; }
.media-wrap #media-status-slot { flex: none; align-self: flex-end; }
.media-wrap .media-status { color: #b8cfda; font-size: 11px; font-weight: 400; font-family: inherit; backdrop-filter: blur(12px); }
.media-wrap .media-workflow { gap: 10px; margin-bottom: 16px; }
.media-wrap .media-step { min-width: 0; min-height: 68px; padding: 12px 16px; }
.media-wrap .media-step.active { box-shadow: inset 2px 0 #9ad8e6; border-color: #9ad8e65c; }
.media-wrap .media-editor, .media-wrap .media-output { padding: 22px; border-radius: 14px; }
.media-wrap .media-work-head { margin-bottom: 18px; padding-bottom: 15px; gap: 10px; }
.media-wrap .media-work-head > div { min-width: 0; }
.media-wrap .media-work-head h3 { font-size: 18px; }
.media-wrap .media-output { min-height: 390px; }
.media-wrap .media-run { white-space: normal; }
.media-wrap .media-empty { max-width: 420px; }

/* Plugin catalog: quieter surfaces, dedicated imagery, denser introduction. */
.page .plz-wrap { --hall-line: var(--section-line); background: radial-gradient(ellipse at 90% 0, #65639410, transparent 40%), #0a101a; }
.plz-wrap .plz-hall-canvas { opacity: .18; }
.plz-wrap::after { opacity: .2; }
.plz-wrap .plz-head { min-height: 0; margin-bottom: 18px; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--section-line); border-radius: 0; background: transparent; box-shadow: none; gap: 16px; backdrop-filter: none; }
.plz-wrap .plz-head > div:first-child { min-width: 0; flex: 1 1 280px; }
.plz-wrap .plz-head h2 { font-size: clamp(26px, 2.4vw, 32px); margin: 7px 0; line-height: 1.3; }
.plz-wrap .plz-sub { font-size: 13px; }
.plz-wrap .plz-head-actions { gap: 8px; flex-wrap: wrap; }
.plz-wrap .plz-head-actions .btn { min-height: 38px; }
.plz-wrap .plz-feature { min-height: 184px; padding: 28px 32px; margin-bottom: 18px; border-radius: 16px; }
.plz-wrap .plz-feature h3 { font-size: clamp(23px, 2.1vw, 29px); margin: 11px 0 9px; }
.plz-wrap .plz-feature p { font-size: 13px; line-height: 1.8; }
.plz-wrap .plz-feature::after { display: none; }
.plz-wrap .plz-feature .editorial-feature-art { right: 0; width: 42%; opacity: .86; }
.plz-wrap .plz-feature .editorial-feature-art img { object-position: center; }
.plz-wrap .plz-hall-context { margin-bottom: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #101824; box-shadow: none; border-color: var(--section-line); border-radius: 12px; }
.plz-wrap .plz-context-cell { min-width: 0; min-height: 0; padding: 14px 16px; border-bottom: 0; border-right: 1px solid var(--section-line); }
.plz-wrap .plz-context-cell:last-child { border-right: 0; }
.plz-wrap .plz-context-cell::before { display: none; }
.plz-wrap .plz-context-kicker { color: #adbbd2; letter-spacing: .08em; margin-bottom: 7px; }
.plz-wrap .plz-context-cell b { font-size: 12px; line-height: 1.6; }
.plz-wrap .plz-context-cell small { color: #91a3bc; }
.plz-wrap .plz-official-head { gap: 8px 10px; margin-bottom: 14px; }
.plz-wrap .plz-official-sub { color: #91a2bb; font-size: 12px; }
.plz-wrap { container: plugin-hall / inline-size; }
.plz-wrap .plz-ogrid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 36px; }
.plz-wrap .plz-ocard { min-width: 0; padding: 22px; gap: 16px; border-color: var(--section-line); border-radius: 13px; background: #121c2a; overflow: hidden; }
.plz-oc-cover { margin: -22px -22px 2px; height: 160px; border-bottom: 1px solid #ffffff0c; background: #172334; }
.plz-wrap .plz-oc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.plz-wrap .plz-oc-name { grid-column: 1 / -1; font-size: 16px; }
.plz-wrap .plz-oc-badge { justify-self: start; }
.plz-oc-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plz-oc-name { padding: 0; border: 0; background: transparent; min-width: 0; flex: 1; text-align: left; color: #e5eaf5; font-size: 14px; font-weight: 600; line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.plz-oc-name:hover { color: #c9c0f4; }
.plz-wrap .plz-oc-desc { font-size: 13px; line-height: 1.8; min-height: 5.4em; -webkit-line-clamp: 3; color: #a8b6c9; }
.plz-wrap .plz-oc-meta { align-items: center; gap: 6px; }
.plz-wrap .plz-oc-meta .plz-hook { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plz-wrap .plz-oc-actions { gap: 10px; padding-top: 16px; border-top: 1px solid var(--section-line); }
.plz-wrap .plz-oc-actions .btn { min-height: 38px; padding-inline: 16px; }
.plz-wrap .plz-oc-actions [data-oc="detail"] { margin-left: auto; }
.plz-wrap .plz-tabs { width: fit-content; max-width: 100%; padding: 4px; border-color: var(--section-line); border-radius: 10px; box-shadow: none; }
.plz-wrap .plz-tab { min-height: 34px; border-radius: 7px; letter-spacing: normal; }
.plz-wrap .plz-tab.active { background: #d2caee; color: #2b2540; box-shadow: none; }
.plz-wrap .plz-toolbar { grid-template-columns: minmax(0, 1fr) 170px auto; padding: 10px; border-color: var(--section-line); border-radius: 11px; box-shadow: none; }
.plz-wrap .plz-toolbar > .plz-tag { grid-column: 1 / -1; }
.plz-wrap .plz-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.plz-wrap .plz-card { min-width: 0; min-height: 0; padding: 22px; gap: 14px; border-radius: 13px; box-shadow: none; }
.plz-wrap .plz-card-head { flex-wrap: wrap; gap: 10px; }
.plz-wrap .plz-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.6; }
.plz-wrap .plz-desc { line-height: 1.8; -webkit-line-clamp: 3; min-height: 5.4em; }
.plz-wrap .plz-actions { gap: 10px; padding-top: 16px; border-top: 1px solid var(--section-line); }
.plz-wrap .plz-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px #0003; }
.plz-wrap .plz-card::after { display: none; }
.plz-wrap .plz-thumb { margin: -22px -22px 2px; height: 160px; aspect-ratio: auto; }
.plz-wrap .plz-thumb::after { display: none; }
@container plugin-hall (min-width: 700px) {
  .plz-wrap :is(.plz-ogrid, .plz-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container plugin-hall (min-width: 1100px) {
  .plz-wrap :is(.plz-ogrid, .plz-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container plugin-hall (min-width: 1500px) {
  .plz-wrap :is(.plz-ogrid, .plz-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container plugin-hall (min-width: 2000px) {
  .plz-wrap :is(.plz-ogrid, .plz-grid) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Skills: distinct covers per skill, resilient titles, and complete modal tokens. */
.skills-page, .skills-modal { --sk-line: #e2ecf824; --sk-line-strong: #e2ecf842; }
.skills-page .sk-head h1 { font-size: clamp(26px, 2.4vw, 32px); margin: 8px 0 9px; line-height: 1.3; }
.skills-page .sk-sub { max-width: 760px; font-size: 13px; margin-bottom: 20px; color: var(--section-muted); }
.skills-page .sk-toolbar { gap: 10px; }
.skills-page .sk-toolbar input { flex: 0 1 390px; min-width: 0; min-height: 42px; border-radius: 9px; }
.skills-page .sk-create { min-height: 42px; border-radius: 9px; }
.skills-page .sk-cats { gap: 7px; margin-top: 18px; }
.skills-page .sk-tab { padding: 7px 14px; min-height: 34px; font-size: 12px; }
.skills-page .sk-stats { margin-top: 12px; font-size: 12px; }
.skills-page .sk-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 18px; margin-top: 20px; }
.skills-page .sk-card { min-width: 0; padding: 18px 18px 15px; gap: 12px; border-radius: 13px; }
.skills-page .sk-cover { height: auto; aspect-ratio: 1.5; }
.skills-page .sk-cover img { object-position: center; }
.skills-page .sk-card-head { gap: 10px; }
.skills-page .sk-titles { flex: 1; }
.skills-page .sk-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; font-size: 15px; }
.skills-page .sk-badge { font-size: 10px; padding: 3px 7px; }
.skills-page .sk-summary { line-height: 1.8; }
.skills-page .sk-foot { flex-wrap: wrap; gap: 10px; }
.skills-page .sk-actions { margin-left: auto; flex-wrap: wrap; }
.skills-page .sk-act { min-height: 34px; padding: 7px 11px; white-space: nowrap; }
.skills-modal .modal, .plugins-modal .modal { width: min(820px, calc(100vw - 32px)); padding: 28px; border-radius: 16px; }
.skills-modal .modal { position: relative; }
.skills-modal .skd-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--sk-line); border-radius: 8px; background: #111c2b; color: #cad2e4; font: 22px/1 var(--section-font); cursor: pointer; }
.skills-modal .skd-close:hover { color: #fff; border-color: var(--sk-line-strong); }
.plugins-modal .plz-dt-head h3 { flex-wrap: wrap; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; line-height: 1.6; }
.plugins-modal .btn-grad.px-host { color: #29223d !important; background: #d5caf1; border: 1px solid #d5caf166; border-radius: 8px; text-shadow: none; }
.plugins-modal .btn-grad.px-host > canvas.px-face { display: none; }
.plugins-modal .btn-grad.px-host svg { opacity: 1; }
.plugins-modal .plz-dt-cover { height: auto; aspect-ratio: 2.2; }
.skills-modal .skd-head > div { min-width: 0; }
.skills-modal .skd-head h3 { overflow-wrap: anywhere; line-height: 1.5; }
.skills-modal .skd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skills-modal .skd-form :is(input, select, textarea) { min-width: 0; max-width: 100%; }

@media (max-width: 1100px) {
  .cv-list-actions { flex: 1 1 100%; }
  .media-wrap .media-head { flex-wrap: wrap; }
  .media-wrap .media-work { grid-template-columns: minmax(0, 1fr); }
  .media-wrap .media-output { min-height: 260px; }
  .plz-wrap .plz-feature:has(.editorial-feature-art) > div:first-child { max-width: 68%; }
}
@media (max-width: 760px) {
  .page :is(.page-inner.cv-list, .page-inner.media-wrap, .plz-wrap, .skills-page) { padding: 24px 20px 100px; }
  .cv-list .cv-studio-intro, .plz-wrap .plz-feature { padding: 24px; min-height: 170px; }
  .cv-studio-intro > div { max-width: 80%; }
  .cv-intro-cover { width: 62%; opacity: .45; }
  .plz-wrap .plz-head-actions { width: 100%; margin: 0; }
  .plz-wrap .plz-head-actions .credits-pill { margin-right: auto; }
  .plz-wrap .plz-context-cell { padding: 12px; }
  .plz-wrap .plz-context-cell small { display: none; }
  .plz-wrap .plz-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plz-wrap .plz-toolbar #plz-q { grid-column: 1 / -1; }
  .plz-wrap .plz-toolbar select.input { width: 100%; min-width: 0; }
  .media-wrap .media-head { padding: 20px; }
  .media-wrap .media-head-cover { width: 65%; opacity: .35; }
  .media-wrap .media-head-text { flex-basis: 100%; }
  .media-wrap .media-work-head { flex-wrap: wrap; }
  .skills-page .sk-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
}
@media (max-width: 600px) {
  .page :is(.page-inner.cv-list, .page-inner.media-wrap, .plz-wrap, .skills-page) { padding: 22px 16px 100px; }
  .cv-list .page-title-row { gap: 16px; margin-bottom: 18px; }
  .cv-list-actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); width: 100%; }
  .cv-list-actions #cv-new-btn { justify-self: stretch; }
  .cv-list-actions .btn { padding-inline: 9px; font-size: 12px; }
  .cv-list .cv-studio-intro { min-height: 170px; padding: 22px; margin-bottom: 24px; }
  .cv-studio-intro > div { max-width: 100%; }
  .cv-intro-cover { width: 100%; opacity: .2; }
  .cv-list .cv-library-heading { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
  .cv-list .cv-library-heading > span { font-size: 11px; }
  .cv-list .cv-card { min-height: 186px; padding: 18px; }
  .cv-list .cvm-page .page-title-row .crumb { flex-basis: 100%; }
  .cv-list .cvm-toolbar .archive-seg { flex-wrap: wrap; max-width: 100%; }
  .cv-list .cvm-toolbar .seg { width: 100%; }
  .cv-list .cvm-toolbar .seg button { padding-inline: 8px; }
  .media-wrap .media-head { min-height: 0; margin-bottom: 16px; }
  .media-wrap .media-head-text h2 { font-size: 24px; gap: 8px; }
  .media-wrap .media-head-text p { line-height: 1.8; }
  .media-wrap .media-step { min-height: 44px; padding: 10px 4px; }
  .media-wrap .media-editor, .media-wrap .media-output { padding: 18px; }
  .media-wrap .media-shortcut { display: none; }
  .plz-wrap .plz-head { padding-bottom: 18px; gap: 14px; }
  .plz-wrap .plz-head-actions { display: grid; grid-template-columns: auto 1fr 1fr; }
  .plz-wrap .plz-head-actions #plz-upload { grid-column: 2 / -1; }
  .plz-wrap .plz-head-actions .credits-pill { grid-row: 1 / 3; margin: 0; align-self: stretch; justify-content: center; min-width: 48px; }
  .plz-wrap .plz-head-actions .btn { padding-inline: 8px; font-size: 11px; }
  .plz-wrap .plz-feature { min-height: 164px; padding: 22px; }
  .plz-wrap .plz-feature:has(.editorial-feature-art) > div:first-child { max-width: 100%; }
  .plz-wrap .plz-feature .editorial-feature-art { display: block; width: 65%; opacity: .2; }
  .plz-wrap .plz-feature h3 { font-size: 23px; line-height: 1.5; }
  .plz-wrap .plz-context-cell { padding: 10px; }
  .plz-wrap .plz-context-kicker { font-size: 9px; margin-bottom: 5px; }
  .plz-wrap .plz-context-cell b { font-size: 11px; }
  .plz-wrap .plz-official-sub { flex-basis: 100%; line-height: 1.7; }
  .plz-wrap :is(.plz-ogrid, .plz-grid) { gap: 20px; }
  .plz-wrap :is(.plz-ocard, .plz-card) { padding: 18px; }
  .plz-wrap :is(.plz-oc-cover, .plz-thumb) { margin: -18px -18px 2px; height: 148px; }
  .plz-wrap .plz-tab { padding-inline: 12px; font-size: 12px; }
  .plz-wrap .plz-free { width: 100%; padding: 0 8px; }
  .skills-page .sk-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .skills-page .sk-toolbar input { width: 100%; }
  .skills-page .sk-create { padding-inline: 12px; font-size: 12px; }
  .skills-page .sk-cats { gap: 6px; }
  .skills-page .sk-tab { padding: 6px 12px; }
  .skills-page .sk-grid { grid-template-columns: minmax(0, 1fr); }
  .skills-page .sk-runs { font-size: 11px; }
  .skills-modal .modal, .plugins-modal .modal { padding: 20px; }
  .skills-modal .skd-head { gap: 12px; padding-right: 28px; }
  .skills-modal .sk-icon.big { width: 42px; height: 42px; font-size: 24px; }
  .skills-modal .skd-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .page :is(.cv-list, .media-wrap, .plz-wrap, .skills-page) *, .skills-modal * { scroll-behavior: auto !important; transition: none !important; }
}

/* TV studio keeps its conversation flow, with three distinct starting scenes. */
body:has(#page > :is(.tv-chat-page, .integrations-page)) { overflow: clip; }
.page :is(.tv-chat-page, .integrations-page) {
  --section-line: #b9c8e025;
  --section-muted: #a3b1c7;
  --section-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  min-width: 0;
  font-family: var(--section-font);
  -webkit-font-smoothing: antialiased;
}
body :is(.tv-chat-page, .integrations-page) :is(h1,h2,h3) { font-family: var(--section-font) !important; letter-spacing: -.025em; text-shadow: none; }
.page :is(.tv-chat-page, .integrations-page) :is(button,input,textarea) { font-family: inherit; letter-spacing: normal; }
.page :is(.tv-chat-page, .integrations-page) :focus-visible { outline: 2px solid #c2baf2; outline-offset: 3px; }
.page .tv-chat-page { flex: none; max-width: 1180px; padding: 28px 36px 88px; }
.tv-chat-page .tv-chat-header { padding-bottom: 20px; border-bottom: 1px solid var(--section-line); }
.tv-chat-page .tv-chat-brand > span { color: #c9c9f2; border-color: #bcb4e840; background: #bcb4e810; }
.tv-chat-page .tv-chat-welcome { max-width: 860px; margin: 38px auto 0; }
.tv-chat-page .tv-chat-welcome h1 { font-size: clamp(26px, 2.8vw, 36px); margin: 12px 0; font-weight: 650; }
.tv-chat-page .tv-chat-welcome > p { margin: 0 0 24px; font-size: 13px; color: #a9b7cb; }
.tv-chat-page .tv-chat-start { padding: 20px; border-radius: 14px; background: #111b29; border-color: #c4c5e835; box-shadow: 0 8px 28px #0002; }
.tv-chat-page .tv-chat-start:focus-within { border-color: #b8b7ed80; box-shadow: 0 0 0 3px #b8b7ed0b; }
.tv-chat-page .tv-chat-start textarea { min-width: 0; min-height: 90px; font-size: 14px; }
.tv-chat-page .tv-chat-start textarea::placeholder { color: #8191a9; }
.tv-chat-page .tv-chat-start footer { margin-top: 12px; }
.tv-chat-page .tv-chat-start button.btn-grad { min-height: 38px; padding: 9px 17px; border: 1px solid #e2e1ff70; border-radius: 8px; background: #d4d6f2; color: #252941 !important; font: 600 13px/1.5 var(--section-font); text-shadow: none; box-shadow: 0 3px 10px #0002; }
.tv-chat-page .tv-chat-start button.btn-grad:disabled { opacity: .38; cursor: default; box-shadow: none; }
.tv-chat-page .tv-chat-start button.btn-grad > canvas.px-face { display: none; }
.tv-inspiration-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 28px 0 14px; }
.tv-inspiration-heading h2 { font-size: 15px; font-weight: 600; margin: 0; }
.tv-inspiration-heading > span { color: #8799b2; font-size: 11px; }
.tv-chat-page .tv-chat-inspiration { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; }
.tv-chat-page .tv-chat-inspiration button { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--section-line); border-radius: 12px; background: #121c29; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.tv-chat-page .tv-chat-inspiration button:hover { transform: translateY(-3px); border-color: #b5c4e05c; background: #162230; }
.tv-chat-inspiration img { display: block; width: 100%; height: 136px; object-fit: cover; }
.tv-starter-copy { display: flex; flex-direction: column; flex: 1; gap: 8px; width: 100%; min-width: 0; padding: 15px; }
.tv-starter-copy b { color: #e1e8f5; font-size: 14px; font-weight: 600; }
.tv-starter-copy > span { flex: 1; color: #a0b0c5; font-size: 11px; line-height: 1.8; }
.tv-starter-copy small { margin-top: 4px; font-size: 10px; color: #b5b5df; }
.tv-chat-page .tv-chat-recent { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--section-line); scroll-margin-top: 20px; }
.tv-chat-page .tv-chat-recent h2 { font-size: 15px; font-weight: 600; color: #dce4f1; margin: 0 0 14px; }
.tv-chat-recent .tv-recent-body { color: #94a5bc; font-size: 12px; }
.tv-chat-recent a { min-width: 0; align-items: flex-start; background: #111b28; }
.tv-chat-recent a b { min-width: 0; font-weight: 400; line-height: 1.6; }
.tv-chat-recent .tv-recent-empty { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed var(--section-line); border-radius: 10px; font-size: 12px; line-height: 1.8; }
.tv-chat-page .tv-chat-project { padding-top: 18px; }
.tv-chat-page .tv-chat-tabs { padding: 4px; border: 1px solid var(--section-line); border-radius: 11px; width: fit-content; max-width: 100%; background: #101925; }
.tv-chat-page .tv-chat-tabs button { min-height: 38px; border-radius: 7px; }
.tv-chat-page .tv-chat-tabs button[aria-pressed=true] { color: #e0ddf8; border-color: #c3b8ed30; background: #c3b8ed18; }
.tv-chat-page .tv-chat-stage { height: calc(100dvh - 300px); border-radius: 14px; }

/* Desktop software connections share a single navigation destination. */
.page .integrations-page { flex: none; width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px clamp(20px, 3vw, 44px) 100px; }
.integrations-head { padding-bottom: 24px; margin-bottom: 26px; border-bottom: 1px solid var(--section-line); }
.integrations-head h1 { font-size: clamp(26px, 2.5vw, 32px); margin: 12px 0; line-height: 1.4; }
.integrations-head p { margin: 0; color: var(--section-muted); font-size: 13px; line-height: 1.8; }
.integrations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.integration-card { min-width: 0; border: 1px solid var(--section-line); border-radius: 16px; overflow: hidden; background: #111b28; }
.integration-art { display: flex; align-items: center; justify-content: center; gap: clamp(15px, 3vw, 40px); min-height: 190px; padding: 24px; border-bottom: 1px solid var(--section-line); background: radial-gradient(ellipse at 25% 50%, #77d9c716, transparent 65%), #0e1d24; }
.integration-ps .integration-art { background: radial-gradient(ellipse at 25% 50%, #69abf724, transparent 65%), #101a2c; }
.integration-app, .integration-platform { display: grid; justify-items: center; gap: 14px; color: #bde1dd; font-size: 12px; }
.integration-app > svg { width: 64px; height: 64px; padding: 14px; box-sizing: content-box; border: 1px solid #b5e8df35; border-radius: 22px; background: #b5e8df08; }
.integration-ps .integration-app { color: #9ac8ff; }
.integration-ps .integration-app > svg { border-color: #9ac8ff40; background: #9ac8ff0b; }
.integration-platform svg { width: 38px; height: 38px; color: #c5c0eb; }
.integration-platform span { font-size: 10px; letter-spacing: .12em; color: #a7b1c9; }
.integration-link { color: #7692ab; font-size: 27px; }
.integration-body { padding: 26px; }
.integration-tag { font-size: 10px; color: #93a9c3; letter-spacing: .12em; }
.integration-body h2 { margin: 10px 0 14px; font-size: 25px; font-weight: 600; }
.integration-body h3 { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: #cbd5e6; }
.integration-body p { min-height: 3.6em; color: #98aac2; font-size: 13px; line-height: 1.8; margin: 0; }
.integration-body ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 24px; list-style: none; }
.integration-body li { padding: 5px 9px; border: 1px solid var(--section-line); border-radius: 5px; font-size: 10px; color: #acbdd2; background: #ffffff03; }
.integration-body .btn { display: flex; justify-content: space-between; min-height: 42px; width: 100%; gap: 12px; border-radius: 8px; padding: 10px 14px; color: #d8e1f1; background: #ffffff04; white-space: normal; font: 500 12px/1.5 var(--section-font); }
.integrations-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .integration-body { padding: 22px; }
  .integration-art { padding: 20px; gap: 18px; }
  .integration-app > svg { width: 46px; height: 46px; padding: 12px; border-radius: 17px; }
}
@media (max-width: 700px) {
  .page .tv-chat-page { padding: 20px 16px 100px; }
  .tv-chat-page .tv-chat-welcome { margin-top: 28px; }
  .tv-chat-page .tv-chat-start { padding: 16px; }
  .tv-chat-page .tv-chat-start footer { align-items: flex-end; }
  .tv-chat-page .tv-chat-start footer > span { font-size: 10px; max-width: 46%; }
  .tv-chat-page .tv-chat-start button.btn-grad { flex: none; padding-inline: 12px; font-size: 12px; }
  .tv-chat-page .tv-chat-inspiration { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tv-chat-page .tv-chat-inspiration button { flex-direction: row; min-height: 125px; }
  .tv-chat-inspiration img { width: 34%; min-width: 90px; height: auto; align-self: stretch; }
  .tv-starter-copy { padding: 12px; gap: 5px; }
  .tv-starter-copy b { font-size: 13px; }
  .tv-starter-copy > span { font-size: 11px; line-height: 1.65; }
  .tv-starter-copy small { margin-top: 3px; }
  .tv-chat-page .tv-chat-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 4px; }
  .tv-chat-page .tv-chat-tabs button { padding-inline: 6px; font-size: 12px; }
  .tv-chat-page .tv-chat-stage { height: calc(100dvh - 340px); min-height: 380px; }
  .page .integrations-page { padding: 24px 16px 100px; }
  .integrations-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .integration-art { min-height: 164px; gap: 32px; }
  .cv-list #cv-mode-market { margin-top: 28px; padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .page :is(.tv-chat-page, .integrations-page) * { scroll-behavior: auto !important; transition: none !important; }
}