.industrial-page {
  --industrial-blue: #0a66e8;
  --industrial-ink: #1f1f1f;
  --industrial-muted: #5f6368;
  --industrial-faint: #9aa0a6;
  --industrial-line: #e1e4e8;
  --industrial-rail: #cbd2dc;
  --industrial-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --industrial-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  width: min(100%, 1180px);
  color: var(--industrial-ink);
}

.industrial-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.industrial-header { margin: 0 0 20px; }
.industrial-header h1 { margin: 0; color: var(--industrial-ink); font-family: var(--page-font-display, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif); font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.045em; }

.industrial-input-section { margin-top: 26px; }
.industrial-input-heading { display: flex; align-items: baseline; gap: 14px; margin: 0 0 11px 2px; }
.industrial-input-heading h2, .industrial-result-heading h2 { margin: 0; color: var(--olive); font-family: var(--page-font); font-size: 1.18rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; }
.industrial-input-heading p { flex: 0 0 auto; margin: 0; color: var(--muted); font-family: var(--page-font); font-size: 0.84rem; font-weight: 400; white-space: nowrap; }
.industrial-input-panel { display: grid; grid-template-columns: 320px minmax(400px, 420px) 320px; align-items: center; justify-content: center; column-gap: 40px; padding: 16px 18px; border: 1px solid var(--industrial-line); border-radius: 17px; background: transparent; box-shadow: 0 1px 2px rgba(31, 31, 31, 0.02); }
.industrial-upload-row { grid-column: 1; min-width: 0; align-self: center; }
.industrial-input-details { min-width: 0; display: grid; grid-column: 2; grid-template-rows: auto auto; align-content: center; row-gap: 13px; padding: 2px 0 2px 22px; border-left: 1px solid rgba(60, 60, 67, 0.1); }
.industrial-analyze-button { grid-column: 3; justify-self: start; width: 176px; min-width: 0; margin: 0; }

.industrial-upload-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: stretch; gap: 10px; }
.industrial-dropzone { min-width: 0; height: 60px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 14px; border: 1px dashed #cbd0d8; border-radius: 10px; color: var(--industrial-ink); background: #fafafa; font: inherit; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease; }
.industrial-dropzone svg { width: 21px; flex: 0 0 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.industrial-dropzone strong { min-width: 0; overflow: hidden; color: var(--industrial-ink); font-size: var(--page-body-size, 0.92rem); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.industrial-dropzone.dragover { border-color: var(--industrial-blue); color: var(--industrial-blue); background: #eef4ff; }
.industrial-dropzone:disabled { cursor: not-allowed; opacity: 0.55; }

.industrial-example-picker { position: relative; min-width: 0; }
.industrial-secondary-button { width: 64px; height: 60px; display: grid; align-content: center; justify-items: center; gap: 1px; padding: 4px; border: 1px solid var(--industrial-line); border-radius: 10px; color: var(--industrial-ink); background: #fff; font: inherit; font-size: var(--page-body-size, 0.92rem); font-weight: 400; line-height: 1.15; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease; }
.industrial-secondary-button span:last-child { color: var(--industrial-ink); font-weight: 400; }
.industrial-secondary-button:disabled { cursor: not-allowed; opacity: 0.5; }
.industrial-example-list { position: absolute; z-index: 12; top: calc(100% + 8px); left: 0; width: min(350px, 70vw); max-height: 260px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow-y: auto; padding: 8px; border: 1px solid var(--industrial-line); border-radius: 12px; background: #fff; box-shadow: 0 16px 38px rgba(31, 35, 41, 0.14); }
.industrial-example-item { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px; border: 1px solid var(--industrial-line); border-radius: 9px; color: var(--industrial-ink); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.industrial-example-item img { width: 40px; height: 40px; display: block; border-radius: 6px; object-fit: cover; }
.industrial-example-item span { min-width: 0; display: grid; gap: 2px; }
.industrial-example-item strong, .industrial-example-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.industrial-example-item strong { font-size: var(--page-body-size, 0.92rem); font-weight: 400; }
.industrial-example-item small { color: var(--industrial-ink); font-size: var(--page-body-size, 0.92rem); font-weight: 400; }
.industrial-example-item.active { border-color: rgba(10, 102, 232, 0.5); background: #eef4ff; }
.industrial-example-item:disabled { cursor: not-allowed; opacity: 0.5; }

.industrial-file-info { min-width: 0; margin: 0; }
.industrial-file-info-pair { min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 13px; }
.industrial-file-info dt { min-width: 0; margin: 0; color: var(--ink); font-family: var(--page-font); font-size: var(--page-body-size, 0.92rem); font-weight: 400; }
.industrial-file-info dd { min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font-family: var(--page-font); font-size: 0.84rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.industrial-file-info dd:last-child { text-align: left; }

.industrial-model-controls { min-width: 0; display: grid; grid-template-columns: max-content max-content; align-items: center; justify-content: start; column-gap: 20px; }
.industrial-model-label { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; column-gap: 12px; color: var(--ink); font-size: var(--page-body-size, 0.92rem); font-weight: 400; }
.industrial-model-label strong { overflow: hidden; color: var(--muted); font-family: var(--page-font); font-size: 0.84rem; font-weight: 400; text-overflow: ellipsis; }
.industrial-model-option { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-family: var(--page-font); font-size: 0.84rem; font-weight: 400; cursor: pointer; white-space: nowrap; }
.industrial-model-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.industrial-checkbox-mark { position: relative; width: 16px; height: 16px; display: block; flex: 0 0 16px; border: 1px solid #b8bec7; border-radius: 4px; color: transparent; background: #fff; font-size: 0; box-shadow: 0 1px 2px rgba(31, 31, 31, 0.06); transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.industrial-checkbox-mark::after { content: ""; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border-right: 1.75px solid #fff; border-bottom: 1.75px solid #fff; opacity: 0; transform: rotate(45deg) scale(0.72); transform-origin: center; transition: opacity 120ms ease, transform 160ms var(--industrial-ease-out); }
.industrial-model-option:hover .industrial-checkbox-mark { border-color: #7f8a99; }
.industrial-model-option input:checked + .industrial-checkbox-mark { border-color: var(--industrial-blue); background: var(--industrial-blue); box-shadow: 0 1px 2px rgba(10, 102, 232, 0.18); }
.industrial-model-option input:checked + .industrial-checkbox-mark::after { opacity: 1; transform: rotate(45deg) scale(1); }
.industrial-model-option input:focus-visible + .industrial-checkbox-mark { outline: 2px solid rgba(10, 102, 232, 0.22); outline-offset: 2px; }

.industrial-analyze-button { height: 46px; border: 1px solid var(--industrial-blue); border-radius: 999px; color: #fff; background: var(--industrial-blue); font: inherit; font-size: var(--page-body-size, 0.92rem); font-weight: 400; cursor: pointer; box-shadow: 0 4px 12px rgba(10, 102, 232, 0.12); transition: transform 140ms var(--industrial-ease-out), opacity 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.industrial-analyze-button:not(:disabled):active { transform: scale(0.97); }
.industrial-analyze-button:disabled { border-color: #e8eaed; color: var(--industrial-muted); background: #e8eaed; cursor: not-allowed; }
.industrial-input-error { grid-column: 1 / -1; margin: -2px 0 0; color: #d93025; font-size: var(--page-body-size, 0.92rem); font-weight: 400; }

.industrial-result-panel { margin-top: 30px; }
.industrial-result-heading { display: flex; align-items: baseline; gap: 16px; margin-bottom: 15px; }
.industrial-result-heading p { margin: 0; color: var(--muted); font-family: var(--page-font); font-size: 0.84rem; font-weight: 400; }
.industrial-inference-canvas { position: relative; width: 100%; height: 792px; overflow: hidden; border: 1px solid var(--industrial-line); border-radius: 18px; background: #fff; }
.industrial-flows { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.industrial-rail { fill: none; stroke: var(--industrial-rail); stroke-width: 1.8; }
.industrial-flow { opacity: 0.28; transition: opacity 200ms ease; }
.industrial-flow circle { fill: #adb5c0; stroke: #fff; stroke-width: 4; transform-box: fill-box; transform-origin: center; transition: fill 180ms ease, opacity 180ms ease; }
.industrial-flow.running, .industrial-flow.complete { opacity: 1; }
.industrial-flow.running circle, .industrial-flow.complete circle { fill: var(--industrial-blue); }
.industrial-flow.running circle { animation: industrial-dot-pulse 820ms var(--industrial-ease-in-out) infinite alternate; }
.industrial-flow.running circle:nth-of-type(2) { animation-delay: 110ms; }
.industrial-flow.running circle:nth-of-type(3) { animation-delay: 220ms; }
.industrial-output-flow circle { stroke-width: 0; }
.industrial-stage-arrow { fill: none; stroke: var(--industrial-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.industrial-flow.running .industrial-stage-arrow { animation: industrial-arrow-pulse 820ms var(--industrial-ease-in-out) infinite alternate; }
@keyframes industrial-dot-pulse { to { opacity: 0.4; transform: scale(0.76); } }
@keyframes industrial-arrow-pulse { to { opacity: 0.45; transform: translateY(2px); } }

.industrial-artifact { position: absolute; z-index: 3; width: 252px; height: 300px; display: flex; overflow: hidden; padding: 0; border: 1px solid var(--industrial-line); border-radius: 17px; color: var(--industrial-ink); background: #fff; box-shadow: 0 12px 30px rgba(21, 33, 51, 0.06); flex-direction: column; font: inherit; text-align: left; transition: border-color 200ms ease, box-shadow 200ms ease, transform 220ms var(--industrial-ease-out), opacity 200ms ease; }
.industrial-artifact:not(:disabled) { cursor: zoom-in; }
.industrial-artifact-media { order: 1; width: 100%; height: 230px; display: grid; overflow: hidden; place-items: center; background: #fafbfc; }
.industrial-artifact-media img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transform: scale(0.97); transition: opacity 240ms var(--industrial-ease-out), transform 240ms var(--industrial-ease-out); }
.industrial-artifact-media img.loaded { opacity: 1; transform: scale(1); }
.industrial-artifact-contain .industrial-artifact-media { background: #050627; }
.industrial-artifact-contain img { object-fit: contain; background: #050627; }
.industrial-artifact-caption { order: 2; min-height: 70px; display: grid; align-content: center; gap: 4px; padding: 9px 14px; border-top: 1px solid #eff1f4; }
.industrial-artifact-title { min-width: 0; display: flex; align-items: center; gap: 9px; overflow: hidden; color: var(--industrial-ink); font-size: var(--page-body-size, 0.92rem); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.industrial-artifact-title em { color: var(--industrial-ink); font: var(--page-body-size, 0.92rem) var(--page-font); font-style: normal; font-weight: 400; }
.industrial-artifact-state { color: var(--muted); font-family: var(--page-font); font-size: 0.84rem; font-weight: 400; }
.industrial-artifact.pending { box-shadow: none; }
.industrial-artifact.pending .industrial-artifact-media { background: #f5f5f7; }
.industrial-artifact.pending .industrial-artifact-state { color: var(--muted); }
.industrial-artifact.skipped { opacity: 0.72; box-shadow: none; }
.industrial-artifact.skipped .industrial-artifact-media { background: #f5f5f7; }
.industrial-artifact.skipped .industrial-artifact-state { color: var(--industrial-faint); }
.industrial-artifact.current { border-color: rgba(10, 102, 232, 0.48); box-shadow: 0 12px 30px rgba(10, 102, 232, 0.1); transform: translateY(-2px); }
.industrial-artifact.error { border-color: #dc7474; }
.industrial-artifact.error .industrial-artifact-state { color: #b42318; }
.industrial-placeholder { display: flex; align-items: center; justify-content: center; gap: 10px; color: #6e6e73; font: 400 0.84rem var(--page-font); letter-spacing: 0; }
.industrial-placeholder::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #8e8e93; box-shadow: 0 0 0 4px rgba(142, 142, 147, 0.12); }
.industrial-placeholder-skipped::before { width: 13px; height: 13px; flex-basis: 13px; border: 1px solid #9aa0a6; border-radius: 50%; background: linear-gradient(135deg, transparent 42%, #9aa0a6 43%, #9aa0a6 57%, transparent 58%); box-shadow: none; }
.industrial-artifact-original { left: calc(15.6% - 126px); top: 72px; }
.industrial-artifact-attention { right: calc(15.6% - 126px); top: 72px; }
.industrial-artifact-heatmap { left: calc(17.8% - 126px); top: 478px; }
.industrial-artifact-mask { left: calc(50% - 126px); top: 478px; }
.industrial-artifact-overlay { right: calc(17.8% - 126px); top: 478px; }

.industrial-model-mark { position: absolute; z-index: 4; text-align: center; transition: opacity 180ms ease, transform 220ms var(--industrial-ease-out); }
.industrial-model-mark strong { display: block; color: var(--industrial-ink); font-size: 1.12rem; font-weight: 400; letter-spacing: -0.025em; }
.industrial-model-mark.active { transform: scale(1.04); }
.industrial-model-mark.active strong { color: var(--industrial-blue); }
.industrial-model-qwen { top: 202px; left: calc(50% - 52px); width: 104px; }
.industrial-model-sam { top: 394px; left: calc(50% - 32px); width: 64px; }
.industrial-prompt { position: absolute; z-index: 5; color: var(--industrial-ink); font: var(--page-body-size, 0.92rem) var(--page-font); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; opacity: 1; transition: opacity 180ms ease; }
.industrial-prompt b { color: var(--industrial-blue); font-weight: 800; }
.industrial-prompt.ready { opacity: 1; }
.industrial-prompt.disabled { color: var(--industrial-faint); opacity: 0.55; }
.industrial-prompt.disabled b { color: var(--industrial-faint); }
.industrial-sparse-label { top: 310px; left: calc(50% - 66px); }
.industrial-dense-label { top: 349px; left: calc(50% + 88px); line-height: 28px; }
.industrial-dense-label span { display: inline-block; margin-left: 24px; }

.industrial-explanation { margin-top: 16px; padding: 22px 24px; border: 1px solid var(--industrial-line); border-radius: 14px; color: var(--industrial-ink); background: #fff; font: 400 var(--page-body-size, 0.92rem)/1.75 var(--page-font, sans-serif); }
.industrial-explanation h3, .industrial-explanation h4 { margin: 0; color: var(--industrial-ink); line-height: 1.45; }
.industrial-explanation h3 { font-size: var(--page-body-size, 0.92rem); font-weight: 400; }
.industrial-explanation h4 { margin-top: 18px; color: var(--industrial-ink); font-size: var(--page-body-size, 0.92rem); font-weight: 400; letter-spacing: 0.02em; }
.industrial-explanation p { margin: 8px 0 0; color: var(--industrial-ink); }
.industrial-explanation ul { margin: 8px 0 0; padding-left: 18px; color: var(--industrial-ink); }
.industrial-explanation code { padding: 1px 4px; border-radius: 4px; background: #f1f3f4; font: 400 var(--page-body-size, 0.92rem) var(--page-font); }

.industrial-lightbox { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 24px; }
.industrial-lightbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(31, 31, 31, 0.56); cursor: zoom-out; }
.industrial-lightbox-dialog { position: relative; z-index: 1; width: min(88vw, 820px); max-height: 90vh; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; background: #fff; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28); }
.industrial-lightbox-dialog > img { width: 100%; max-height: 90vh; display: block; background: #fff; object-fit: contain; }
.industrial-lightbox-close, .industrial-lightbox-nav { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(31, 31, 31, 0.12); color: var(--industrial-ink); background: rgba(255, 255, 255, 0.88); box-shadow: 0 4px 14px rgba(31, 31, 31, 0.12); cursor: pointer; }
.industrial-lightbox-close { top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 999px; font: 1.15rem/1 sans-serif; }
.industrial-lightbox-nav { top: 50%; width: 34px; height: 52px; border-radius: 999px; font-size: 1.6rem; transform: translateY(-50%); transition: background-color 160ms ease, transform 100ms var(--industrial-ease-out); }
.industrial-lightbox-prev { left: 12px; }
.industrial-lightbox-next { right: 12px; }
.industrial-lightbox-nav:active { transform: translateY(-50%) scale(0.95); }

.industrial-dropzone:focus-visible, .industrial-secondary-button:focus-visible, .industrial-example-item:focus-visible, .industrial-analyze-button:focus-visible, .industrial-artifact:focus-visible, .industrial-lightbox button:focus-visible { outline: 3px solid rgba(10, 102, 232, 0.22); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .industrial-dropzone:hover { border-color: var(--industrial-blue); color: var(--industrial-blue); background: #eef4ff; }
  .industrial-secondary-button:hover { border-color: rgba(10, 102, 232, 0.35); background: #f7f9fc; }
  .industrial-analyze-button:not(:disabled):hover { background: #0959ca; }
  .industrial-artifact:not(:disabled):hover { border-color: rgba(10, 102, 232, 0.35); }
}

@media (max-width: 1120px) {
  .industrial-input-panel { grid-template-columns: minmax(0, 1fr) 156px; column-gap: 14px; row-gap: 16px; padding-inline: 14px; }
  .industrial-upload-row { grid-column: 1; grid-row: 1; }
  .industrial-input-details { grid-column: 1 / -1; grid-row: 2; padding: 15px 0 0; border-top: 1px solid rgba(60, 60, 67, 0.1); border-left: 0; }
  .industrial-analyze-button { grid-column: 2; grid-row: 1; width: 156px; }
  .industrial-file-info-pair, .industrial-model-label { grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; }
  .industrial-model-controls { column-gap: 10px; }
}
@media (max-width: 900px) {
  .industrial-inference-canvas { height: auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 54px 16px 16px; }
  .industrial-flows, .industrial-model-mark, .industrial-prompt { display: none; }
  .industrial-artifact { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 0.88; }
  .industrial-artifact-media { height: auto; flex: 1; }
  .industrial-artifact-overlay { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
}
@media (max-width: 680px) {
  .industrial-input-panel { grid-template-columns: 1fr; gap: 10px; }
  .industrial-upload-row, .industrial-input-details, .industrial-analyze-button, .industrial-input-error { grid-column: 1; grid-row: auto; }
  .industrial-input-details { margin-top: 4px; }
  .industrial-model-controls { grid-template-columns: 1fr; row-gap: 12px; }
  .industrial-analyze-button { width: 100%; max-width: none; margin-top: 4px; border-radius: 12px; }
  .industrial-example-list { left: auto; right: 0; }
  .industrial-inference-canvas { grid-template-columns: 1fr; }
  .industrial-artifact-overlay { grid-column: 1; width: 100%; }
  .industrial-lightbox { padding: 12px; }
  .industrial-lightbox-dialog { width: 94vw; }
}
@media (prefers-reduced-motion: reduce) {
  .industrial-flow.running circle, .industrial-flow.running .industrial-stage-arrow { animation: none; }
  .industrial-artifact, .industrial-artifact-media img, .industrial-model-mark, .industrial-prompt, .industrial-analyze-button { transition-duration: 0.01ms; }
}