/* 案例画廊：令牌、字号与断点全部引用站点基座 */
.site-shell { width: min(var(--site-max), calc(100% - var(--site-gutter) * 2)); margin: 0 auto; }

/* ── 无脚本回退 ── */
.noscript-gallery { display: grid; gap: 36px; padding: 36px 0 64px; }
.noscript-hero { padding: 30px; border: 1px solid var(--site-line); border-radius: var(--site-radius); color: var(--site-ink); background: var(--site-surface-soft); }
.noscript-hero p { margin: 0 0 12px; color: var(--site-violet); font-size: var(--site-micro); font-weight: 700; }
.noscript-hero h1 { margin: 0 0 12px; font-size: var(--site-h1); font-weight: 600; line-height: var(--site-leading-display); letter-spacing: var(--site-tracking-display); }
.noscript-hero div { color: var(--site-muted); font-size: var(--site-body); line-height: var(--site-leading-body); }
.noscript-group h2 { margin: 0 0 16px; color: var(--site-ink); font-size: var(--site-h3); letter-spacing: var(--site-tracking-heading); }
.noscript-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.noscript-item { min-width: 0; padding: 16px; border: 1px solid var(--site-line); border-radius: var(--site-radius); color: var(--site-ink); background: #fff; }
.noscript-item:nth-child(4n + 1) { background: var(--site-tint-sky); }
.noscript-item:nth-child(4n + 2) { background: var(--site-tint-lavender); }
.noscript-item:nth-child(4n + 3) { background: var(--site-tint-mint); }
.noscript-item:nth-child(4n) { background: var(--site-tint-peach); }
.noscript-item img { display: block; width: 100%; aspect-ratio: 1.58; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.8); border-radius: var(--site-image-radius); object-fit: cover; }
.noscript-label { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 8px; border: 1px solid var(--site-line-strong); border-radius: var(--site-radius-control); color: var(--site-muted); background: rgba(255,255,255,.92); font-size: var(--site-micro); font-weight: 600; }
.noscript-item h3 { margin: 10px 0 6px; color: var(--site-ink); font-size: var(--site-h3); line-height: var(--site-leading-heading); }
.noscript-item p { margin: 0 0 8px; color: var(--site-muted); font-size: var(--site-small); line-height: var(--site-leading-body); }
.noscript-item a { display: inline-flex; min-height: 44px; align-items: center; color: var(--site-blue); font-size: var(--site-small); font-weight: 600; }
.noscript-skill ol { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 21px; color: var(--site-muted); font-size: var(--site-small); line-height: var(--site-leading-tight); }
.noscript-note { margin: 0; color: var(--site-muted); font-size: var(--site-small); line-height: var(--site-leading-body); }

/* ── 画廊首屏 ── */
.collection-view { padding-bottom: 35px; }
.collection-hero {
  display: grid; width: 100vw; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 0;
  margin-left: calc(50% - 50vw);
  padding: clamp(26px,3vw,40px) max(var(--site-gutter), calc((100vw - var(--site-max)) / 2)) 18px;
  color: var(--site-ink); background: radial-gradient(ellipse at 50% 0%, #fff 0%, var(--site-surface-soft) 58%, var(--site-tint-gray) 100%);
  text-align: center;
}
.overline, .detail-kicker, .section-kicker, .detail-label { color: var(--site-primary); font-size: var(--site-micro); font-weight: 600; letter-spacing: var(--site-tracking-label); }
.collection-hero .overline { color: var(--site-violet); }
.collection-hero h1, .detail-hero h1 { max-width: 1000px; margin: 14px 0 18px; color: var(--site-ink); font-size: var(--site-h1); font-weight: 600; letter-spacing: var(--site-tracking-display); line-height: var(--site-leading-display); }
.hero-copy, .detail-summary { max-width: var(--site-measure); margin: 0; color: var(--site-muted); font-size: var(--site-lead); line-height: var(--site-leading-prose); }
.collection-hero .hero-copy { max-width: var(--site-measure); margin-inline: auto; }
.collection-hero-aside { position: relative; width: min(100%, 620px); height: 180px; margin: 12px auto 0; }
.collection-hero-art { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.78); border-radius: var(--site-image-radius); background: var(--site-tint-gray); box-shadow: var(--site-shadow-float); }
.collection-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.collection-hero-art--evidence { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 10px; height: 100%; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.collection-hero-demo { position: relative; display: block; min-width: 0; overflow: hidden; border: 1px solid var(--site-line); border-radius: var(--site-image-radius); background: #fff; box-shadow: var(--site-shadow-soft); }
.collection-hero-demo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--site-image-radius); }
.collection-hero-demo span { position: absolute; right: 8px; bottom: 8px; left: 8px; padding: 6px 9px; border: 1px solid var(--site-line); border-radius: var(--site-radius-sm); color: var(--site-ink); background: rgba(255,255,255,.96); font-size: var(--site-micro); font-weight: 600; text-align: left; }
.collection-hero-demo:focus-visible { outline: 3px solid var(--site-focus); outline-offset: 3px; }
.hero-art-label { position: absolute; top: 12px; right: 12px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.72); border-radius: var(--site-radius-control); color: var(--site-navy); background: rgba(255,255,255,.94); font-size: var(--site-micro); font-weight: 600; }
.hero-count { position: absolute; right: 13px; bottom: 13px; display: flex; align-items: center; gap: 12px; min-width: 176px; padding: 12px 15px; border: 1px solid var(--site-line); border-radius: var(--site-radius-sm); background: rgba(255,255,255,.97); box-shadow: var(--site-shadow); }
.hero-count strong { color: var(--site-primary); font-size: var(--site-figure); line-height: 1; letter-spacing: var(--site-tracking-display); font-variant-numeric: tabular-nums; }
.hero-count span { color: var(--site-muted); font-size: var(--site-micro); line-height: var(--site-leading-tight); }

/* ── 筛选工具条 ── */
.collection-toolbar { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; padding: 14px 18px; border: 1px solid var(--site-line); border-radius: var(--site-radius); background: #fff; }
.toolbar-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px 24px; padding-bottom: 10px; border-bottom: 1px solid var(--site-line); }
.toolbar-result { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.result-count { margin: 0; color: var(--site-muted); font-size: var(--site-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.toolbar-filters { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 24px; }
.filter-group { display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: center; gap: 12px; min-width: 0; }
.filter-label { flex: none; color: var(--site-ink); font-size: var(--site-micro); font-weight: 700; letter-spacing: .04em; }
.filter-list { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px; }
.field-select { display: none; width: 100%; min-height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--site-line-strong); border-radius: var(--site-radius-control); color: var(--site-nav-text); background: var(--site-chrome); font: inherit; font-size: var(--site-small); }
.field-select:focus-visible { outline: 3px solid var(--site-focus); outline-offset: 2px; }
.filter-button { min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--site-button-radius); color: var(--site-muted); background: var(--site-surface-soft); font-size: var(--site-small); cursor: pointer; transition: background var(--site-fast) var(--site-ease), color var(--site-fast) var(--site-ease); }
.filter-button:hover { border-color: var(--site-line-strong); color: var(--site-ink); }
.filter-button.is-active { color: #fff; background: var(--site-ink); font-weight: 600; }
.filter-reset { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 11px; border: 0; border-radius: var(--site-button-radius); color: var(--site-primary); background: transparent; font-size: var(--site-small); font-weight: 600; cursor: pointer; transition: color var(--site-fast) var(--site-ease), background var(--site-fast) var(--site-ease); }
.filter-reset:hover { color: var(--site-primary-pressed); background: var(--site-tint-lavender); }
.filter-reset:focus-visible, .empty-reset:focus-visible { outline: 2px solid var(--site-primary); outline-offset: 2px; }
.filter-reset[hidden] { display: none; }
.search-wrap { width: min(520px,100%); min-width: 0; flex: 1 1 520px; }
.search-label { display: block; margin-bottom: 6px; color: var(--site-ink); font-size: var(--site-micro); font-weight: 700; letter-spacing: .03em; }
.search-field { position: relative; display: block; }
.search-field svg { position: absolute; top: 50%; left: 13px; width: 15px; height: 15px; transform: translateY(-50%); color: var(--site-muted); pointer-events: none; }
.search-input { width: 100%; min-height: 44px; padding: 0 14px 0 38px; border: 1px solid var(--site-line-strong); border-radius: var(--site-radius-sm); outline: 0; color: var(--site-ink); background: #fff; font-size: var(--site-small); transition: border-color var(--site-fast) var(--site-ease), box-shadow var(--site-fast) var(--site-ease); }
.search-input::placeholder { color: var(--site-faint); }
.search-input:focus { border-color: var(--site-primary); box-shadow: 0 0 0 3px var(--site-primary-tint); }

/* ── 分组与卡片 ── */
.collection-group { margin-top: 18px; }
.collection-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 10px; }
.collection-group-head h2 { margin: 0; color: var(--site-ink); font-size: var(--site-h3); letter-spacing: var(--site-tracking-heading); }
.collection-group-head span { color: var(--site-muted); font-size: var(--site-micro); font-variant-numeric: tabular-nums; }
.collection-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding-bottom: 34px; }
.project-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--site-line); border-radius: var(--site-radius); color: inherit; background: #fff; box-shadow: var(--site-shadow-soft); transition: transform var(--site-fast) var(--site-ease), box-shadow var(--site-fast) var(--site-ease), border-color var(--site-fast) var(--site-ease); }
.project-card:hover { transform: translateY(-2px); border-color: var(--site-line-strong); box-shadow: var(--site-shadow); }
.project-card:focus-visible { outline-offset: 4px; }
.project-card[hidden] { display: none; }
.card-cover { position: relative; min-height: 0; aspect-ratio: 1.82; flex: none; overflow: hidden; padding: 0; background: var(--site-ice); border-radius: var(--site-image-radius); }
.cover-demo { padding: 10px; background: var(--site-surface-soft); }
.cover-skill { background: var(--site-surface-soft); }
.cover-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-demo .cover-photo { border: 1px solid var(--site-line); border-radius: var(--site-image-radius); background: #fff; object-fit: contain; }
.card-cover--detail { min-height: 340px; aspect-ratio: auto; border-radius: var(--site-image-radius); }
.cover-note--detail { position: absolute; z-index: 2; right: 14px; bottom: 14px; padding: 6px 10px; border-radius: var(--site-radius-control); color: var(--site-ink); background: rgba(255,255,255,.94); font-size: var(--site-micro); }
.cover-image-unavailable { display: grid; place-items: center; background: var(--site-surface-soft); }
.cover-unavailable { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--site-muted); font-size: var(--site-small); text-align: center; }
.cover-unavailable[hidden], .cover-note--detail[hidden] { display: none; }
.project-info { display: flex; flex: 1; flex-direction: column; padding: 16px; border-top: 1px solid var(--site-line); }
.project-info-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.project-info h2 { min-width: 0; margin: 0; color: var(--site-ink); font-size: var(--site-body); font-weight: 600; line-height: var(--site-leading-heading); letter-spacing: var(--site-tracking-heading); }
.project-arrow { flex: none; color: var(--site-primary); font-size: var(--site-h3); line-height: 1; transition: transform var(--site-fast) var(--site-ease); }
.project-card:hover .project-arrow { transform: translate(2px,-2px); }
.project-info p { margin: 8px 0 10px; color: var(--site-muted); font-size: var(--site-small); line-height: var(--site-leading-body); }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 4px; }
.tag { display: inline-flex; min-height: 28px; align-items: center; padding: 4px 8px; border: 1px solid var(--site-line); border-radius: var(--site-radius-control); color: var(--site-muted); background: var(--site-ice); font-size: var(--site-micro); line-height: 1.35; }
.empty-state { grid-column: 1/-1; padding: 54px 20px; border: 1px dashed var(--site-line-strong); border-radius: var(--site-radius); color: var(--site-muted); text-align: center; }
.empty-state strong { display: block; margin-bottom: 7px; color: var(--site-ink); font-size: var(--site-h3); }
.empty-reset { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; margin: 16px auto 0; padding: 0 16px; border: 1px solid var(--site-primary); border-radius: var(--site-button-radius); color: #fff; background: var(--site-primary); font-size: var(--site-small); font-weight: 600; cursor: pointer; transition: background var(--site-fast) var(--site-ease), border-color var(--site-fast) var(--site-ease); }
.empty-reset:hover { border-color: var(--site-primary-pressed); background: var(--site-primary-pressed); }

/* ── 详情页 ── */
.detail-shell { padding: 34px 0 80px; }
.detail-back { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--site-muted); font-size: var(--site-small); }
.detail-back:hover { color: var(--site-blue); }
.detail-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.8fr); align-items: center; gap: clamp(28px,5vw,70px); padding: 48px 0 38px; }
.detail-hero h1 { max-width: var(--site-measure); }
.detail-kicker { margin-bottom: 12px; }
.detail-summary { font-size: var(--site-lead); }
.detail-art .card-cover { min-height: 320px; border: 1px solid var(--site-line); border-radius: var(--site-image-radius); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 23px; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--site-button-radius); color: var(--site-nav-text); background: var(--site-surface-soft); font-size: var(--site-small); font-weight: 500; transition: background var(--site-fast) var(--site-ease), color var(--site-fast) var(--site-ease); }
.button:hover { color: var(--site-nav-text-strong); background: #ebebed; }
.button:active { opacity: .82; }
.button-primary { color: #fff; background: var(--site-primary); }
.button-primary:hover { color: #fff; background: var(--site-primary-pressed); }
.detail-body, .skill-detail-body { display: grid; grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr); gap: 30px; padding-top: 27px; border-top: 1px solid var(--site-line); }
.detail-label, .skill-section-label { margin: 0 0 10px; }
.detail-body h2, .skill-intro h2 { margin: 0; color: var(--site-ink); font-size: var(--site-h3); line-height: var(--site-leading-heading); letter-spacing: var(--site-tracking-heading); }
.detail-copy { margin: 0; max-width: var(--site-measure); color: var(--site-muted); font-size: var(--site-body); line-height: var(--site-leading-prose); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.detail-note, .skill-simple-note { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--site-line-strong); border-radius: var(--site-radius-sm); color: var(--site-ink-soft); background: var(--site-tint-lavender); font-size: var(--site-small); line-height: var(--site-leading-body); }
.demo-detail-extra { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.72fr); gap: 16px; margin-top: 28px; }
.demo-detail-extra section { padding: 21px; border: 1px solid var(--site-line); border-radius: var(--site-radius); background: #fff; }
.demo-detail-extra ol { display: grid; gap: 10px; margin: 13px 0 0; padding-left: 22px; color: var(--site-muted); font-size: var(--site-small); line-height: var(--site-leading-body); }
.demo-detail-extra p { margin: 13px 0 0; color: var(--site-muted); font-size: var(--site-small); line-height: var(--site-leading-body); }
.detail-note strong { color: var(--site-ink); }

/* ── Skill 流程图 ── */
.skill-detail-body { grid-template-columns: minmax(240px,.72fr) minmax(0,1.28fr); }
.skill-intro p { color: var(--site-muted); font-size: var(--site-small); line-height: var(--site-leading-body); }
.skill-section-label { margin: 0 0 12px; color: var(--site-blue); font-size: var(--site-micro); letter-spacing: var(--site-tracking-label); font-weight: 700; }
.skill-flowchart { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0 auto; }
.flow-terminal { width: 100%; padding: 13px 18px; border: 1px solid var(--site-line-strong); border-radius: var(--site-radius-sm); color: var(--site-ink); background: #fff; box-shadow: var(--site-shadow-soft); text-align: center; }
.flow-terminal span { display: block; color: var(--site-blue); font-size: var(--site-micro); font-weight: 700; letter-spacing: var(--site-tracking-label); }
.flow-terminal strong { display: block; margin-top: 4px; font-size: var(--site-small); line-height: var(--site-leading-tight); }
.flow-terminal--output { border-color: var(--site-line-strong); background: var(--site-ice); }
.flow-connector { position: relative; display: grid; min-height: 28px; place-items: center; color: var(--site-blue); font-size: var(--site-body); line-height: 1; }
.flow-connector::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--site-line-strong); }
.flow-connector span { position: relative; z-index: 1; padding: 2px 7px; background: var(--site-bg); }
.skill-flow-step { display: grid; grid-template-columns: 44px minmax(0,1fr); width: 100%; min-height: 76px; overflow: hidden; border: 1px solid var(--site-line); border-radius: var(--site-radius-sm); background: #fff; box-shadow: var(--site-shadow-soft); }
.flow-step-number { display: grid; place-items: center; color: var(--site-violet); background: var(--site-tint-lavender); font-size: var(--site-micro); font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-step-content { padding: 13px 15px; }
.flow-step-content strong { display: block; margin-bottom: 5px; color: var(--site-ink); font-size: var(--site-small); }
.flow-step-content span { display: block; color: var(--site-muted); font-size: var(--site-micro); line-height: var(--site-leading-body); }
.flow-decision { padding: 16px 18px; border: 1px solid var(--site-tint-yellow-bold); border-radius: var(--site-radius); color: var(--site-ink-soft); background: var(--site-tint-yellow); }
.flow-decision span { display: block; margin-bottom: 5px; color: var(--site-ink-soft); font-size: var(--site-micro); font-weight: 700; letter-spacing: var(--site-tracking-label); }
.flow-decision strong, .flow-decision p { margin: 0; font-size: var(--site-micro); line-height: var(--site-leading-body); }
.flow-decision p { margin-top: 6px; }
.skill-output-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 20px; }
.skill-output { padding: 12px 14px; border: 1px solid var(--site-line); border-radius: var(--site-radius-sm); color: var(--site-ink-soft); background: var(--site-tint-sky); font-size: var(--site-micro); line-height: var(--site-leading-body); }

/* ── 页脚 ── */
.site-footer { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .project-card, .project-arrow, .filter-button, .filter-reset, .empty-reset, .button, .case-preview-thumb img { transition: none; }
  .project-card:hover, .button:hover, .button:active, .filter-button:active { transform: none; }
}
@media (max-width: 1040px) {
  .collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .collection-hero { grid-template-columns: minmax(0,1fr); }
}
@media (min-width: 1041px) {
  .collection-grid .card-cover { aspect-ratio: 1.94; }
}
@media (max-width: 760px) {
  .site-shell { width: min(100% - 32px, 620px); }
  .collection-hero, .detail-hero, .detail-body, .skill-detail-body, .demo-detail-extra { grid-template-columns: 1fr; gap: 24px; }
  .collection-hero { padding: 30px 0 22px; }
  .collection-hero-aside { height: 148px; }
  .collection-toolbar { padding: 14px; }
  .toolbar-summary { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .toolbar-result { justify-content: space-between; }
  .toolbar-filters { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .filter-group { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .filter-list { flex-wrap: wrap; gap: 7px; overflow: visible; padding-bottom: 0; }
  .filter-button { flex: 0 0 auto; min-height: 44px; padding: 0 13px; }
  .field-filter-group .filter-list { display: none; }
  .field-filter-group .field-select { display: block; }
  .search-wrap { width: 100%; flex: 0 1 auto; }
  .card-cover { min-height: 0; }
  .detail-shell { padding-top: 22px; }
  .detail-hero { padding: 32px 0 25px; }
  .detail-art .card-cover { min-height: 250px; }
  .skill-output-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-shell { width: calc(100% - 32px); }
  .collection-hero .overline { display: none; }
  .collection-hero { padding: 22px 0 16px; }
  .collection-hero h1 { margin: 8px 0 10px; }
  .collection-hero-aside { width: 100%; height: 124px; margin-top: 12px; }
  .collection-hero-art--evidence { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 7px; }
  @media (max-width:560px) {
  .collection-hero-aside { height: auto; }
  .collection-hero-art--evidence { height: auto; align-items: start; }
  .collection-hero-demo { display: flex; flex-direction: column; height: auto; overflow: visible; border: 0; border-radius: var(--site-image-radius); background: transparent; box-shadow: none; }
  .collection-hero-demo img { height: auto; aspect-ratio: 2880 / 1758; border: 1px solid var(--site-line); border-radius: var(--site-image-radius); background: #fff; object-fit: contain; }
  .collection-hero-demo span { position: static; display: flex; height: 46px; align-items: center; justify-content: center; padding: 5px 3px; border: 0; border-radius: 0; background: transparent; font-size: var(--site-micro); line-height: var(--site-leading-tight); text-align: center; }
}
  .collection-toolbar { gap: 8px; padding: 12px; }
  .toolbar-summary { grid-template-columns: minmax(0,1fr); gap: 0; padding-bottom: 0; border-bottom: 0; }
  .search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .toolbar-result { display: none; }
  .toolbar-filters { grid-template-columns: minmax(0,1.45fr) minmax(0,.8fr); gap: 10px; }
  .filter-group { grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 5px; }
  .filter-label { margin: 0; }
  .filter-list { flex-wrap: nowrap; gap: 6px; }
  .filter-button { min-height: 44px; padding: 0 10px; }
  .field-select { min-height: 44px; }
  .collection-group { margin-top: 14px; }
  .collection-grid { grid-template-columns: 1fr; gap: 12px; }
  .card-cover { aspect-ratio: 1.82; }
  .project-info { padding: 15px; }
  .flow-connector span { background: var(--site-bg); }
  .skill-flow-step { grid-template-columns: 38px minmax(0,1fr); }
  .flow-step-content { padding: 12px; }
  .noscript-grid { grid-template-columns: 1fr; }
}