/* ============================================================
   object_detection_lab.css - 08 Detection
   ============================================================ */
/* ===== Detection Lab new elements ===== */
[data-detection-lab] {
    --det-accent: #2563eb;
    --det-accent-2: #06b6d4;
    --det-accent-dark: #1d4ed8;
    --det-soft: #eff6ff;
    --det-line: #bfdbfe;
    --det-ink: #172554;
    --det-shadow: rgba(37, 99, 235, 0.12);
}

[data-detection-lab][data-det-mode-view="yolo"] {
    --det-accent: #0ea5e9;
    --det-accent-2: #06b6d4;
    --det-accent-dark: #0369a1;
    --det-soft: #ecfeff;
    --det-line: #a5f3fc;
    --det-ink: #0c4a6e;
    --det-shadow: rgba(14, 165, 233, 0.16);
}

[data-detection-lab][data-det-mode-view="rcnn"] {
    --det-accent: #7c3aed;
    --det-accent-2: #4f46e5;
    --det-accent-dark: #5b21b6;
    --det-soft: #f5f3ff;
    --det-line: #c4b5fd;
    --det-ink: #312e81;
    --det-shadow: rgba(124, 58, 237, 0.14);
}

[data-detection-lab][data-det-mode-view="rcnn"] [data-yolo-only] {
    display: none !important;
}

[data-detection-lab] .vision-panel-index {
    background: linear-gradient(145deg, var(--det-accent), var(--det-accent-dark));
    box-shadow: 0 8px 16px var(--det-shadow);
}

[data-detection-lab] .vision-field output,
[data-detection-lab] .det-section-label,
[data-detection-lab] .detection-class-stats strong {
    color: var(--det-accent-dark);
}

[data-detection-lab] .vision-field input[type="range"] {
    accent-color: var(--det-accent);
}

.detection-mode-toggle {
    grid-template-columns: 1fr;
}

.detection-stage-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 10px;
    overflow: hidden;
}

.det-stage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.det-stage-chips span {
    display: inline-block;
    border: 1px solid var(--det-line);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    color: var(--det-accent-dark);
    background: var(--det-soft);
    letter-spacing: 0.03em;
}

.det-step-label {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 999px;
    padding: 4px 10px;
    color: #4c1d95;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(88, 28, 135, 0.1);
    backdrop-filter: blur(6px);
}

[data-detection-lab][data-det-submode="yolo"] .det-step-label,
[data-detection-lab][data-det-submode="yolo"] .det-step-nav,
[data-detection-lab][data-det-submode="yolo"] .det-play-btn {
    display: none !important;
}

.det-output-pipeline {
    display: grid;
    gap: 9px;
    width: calc(100% - 34px);
    margin: 0 auto;
    border: 1px solid var(--det-line);
    border-radius: 12px;
    padding: 10px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--det-soft) 70%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--det-soft) 70%, transparent) 1px, transparent 1px),
        #ffffff;
    background-size: 24px 24px;
}

.det-output-pipeline-head {
    display: grid;
    grid-template-columns: minmax(130px, auto) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.det-output-pipeline-head span,
.det-note-stage {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    border: 1px solid var(--det-line);
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--det-accent-dark);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--det-soft);
}

.det-output-pipeline-head strong {
    min-width: 0;
    overflow: hidden;
    color: var(--det-ink);
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.det-output-pipeline-head em {
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.det-output-pipeline-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.det-output-pipeline-track article {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 2px 6px;
    align-items: center;
    min-width: 0;
    min-height: 58px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 7px;
    background: #f8fafc;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    cursor: pointer;
}

.det-output-pipeline-track article:hover {
    border-color: var(--det-accent);
    box-shadow: 0 4px 12px var(--det-shadow);
    transform: translateY(-1px);
}

.det-output-pipeline-track article::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--det-line);
}

.det-output-pipeline-track article:last-child::after {
    display: none;
}

.det-output-pipeline-track span {
    grid-row: span 2;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 9px;
    font-weight: 950;
    background: #94a3b8;
}

.det-output-pipeline-track strong,
.det-output-pipeline-track small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.det-output-pipeline-track strong {
    color: #334155;
    font-size: 10px;
}

.det-output-pipeline-track small {
    color: #64748b;
    font-size: 8.5px;
}

.det-output-pipeline-track article.is-done,
.det-output-pipeline-track article.is-current {
    border-color: var(--det-line);
    background: var(--det-soft);
}

.det-output-pipeline-track article.is-current {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px var(--det-shadow);
}

.det-output-pipeline-track article.is-done span,
.det-output-pipeline-track article.is-current span {
    background: linear-gradient(135deg, var(--det-accent), var(--det-accent-2));
}

.detection-real-stage {
    position: relative;
    width: calc(100% - 34px);
    max-width: min(calc(100% - 34px), calc(min(50vh, 440px) * var(--det-aspect-raw-x, 1)));
    max-height: min(50vh, 440px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    background: #e2e8f0;
    flex: 0 1 auto;
    min-height: 180px;
    aspect-ratio: var(--det-aspect, 4 / 3);
}

[data-detection-lab][data-det-mode-view="yolo"] .det-yolo-dual-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    gap: 14px;
    align-items: stretch;
    padding: 0 16px;
}

[data-detection-lab][data-det-mode-view="yolo"] .det-yolo-dual-stage .detection-real-stage {
    width: 100%;
    max-width: none;
    max-height: min(54vh, 470px);
    margin: 0;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

[data-detection-lab][data-det-mode-view="rcnn"] .det-yolo-feature-view {
    display: none !important;
}

.detection-real-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

[data-detection-lab][data-det-mode-view="rcnn"] .detection-real-stage {
    max-width: min(calc(100% - 34px), calc(min(36vh, 300px) * var(--det-aspect-raw-x, 1)));
    max-height: min(36vh, 300px);
}

.det-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.det-yolo-feature-view {
    min-width: 0;
    min-height: 260px;
}

.det-yolo-feature-panel {
    display: grid;
    gap: 10px;
    height: 100%;
    min-height: 260px;
    border: 1px solid rgba(125, 211, 252, 0.58);
    border-radius: 14px;
    padding: 12px;
    background:
        radial-gradient(circle at 22% 18%, rgba(14, 165, 233, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.82));
    box-shadow: 0 16px 34px rgba(14, 165, 233, 0.08), inset 0 1px 0 rgba(255,255,255,0.85);
    overflow: hidden;
}

.det-yolo-feature-panel header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: start;
}

.det-yolo-feature-panel header span {
    grid-column: 1 / -1;
    width: fit-content;
    border: 1px solid rgba(14, 165, 233, 0.22);
    border-radius: 999px;
    padding: 2px 7px;
    color: #0284c7;
    background: rgba(14, 165, 233, 0.08);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.det-yolo-feature-panel header strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.2;
}

.det-yolo-feature-panel header em {
    color: #0891b2;
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.det-yolo-feature-panel > p {
    margin: 0;
    color: #475569;
    font-size: 11px;
    line-height: 1.52;
}

.det-yolo-feature-panel footer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    border-top: 1px dashed rgba(14, 165, 233, 0.22);
    padding-top: 8px;
}

.det-yolo-feature-panel footer span,
.det-yolo-feature-panel footer b {
    border-radius: 999px;
    padding: 3px 7px;
    background: rgba(14, 165, 233, 0.08);
    color: #0369a1;
    font-size: 9px;
    font-weight: 900;
}

.det-yolo-feature-panel footer b {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
}

.det-yolo-feature-map {
    position: relative;
    width: min(100%, calc(clamp(180px, 25vh, 270px) * var(--feature-aspect-ratio, 1.6)));
    margin: 0 auto;
    min-height: 156px;
    height: clamp(180px, 25vh, 270px);
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #eff6ff, #ecfeff);
}

.det-yolo-feature-map img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0.42;
    filter: saturate(0.9) contrast(0.96);
}

.det-yolo-feature-gridlines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 165, 233, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.10) 1px, transparent 1px);
    background-size: 12.5% 12.5%;
}

.det-yolo-heatmap-layer {
    position: absolute;
    inset: 0;
    opacity: min(0.86, calc(var(--hm-alpha, 0.55) + 0.16));
    mix-blend-mode: normal;
}

.det-yolo-heatmap-layer i {
    position: absolute;
    width: var(--hm-w, calc(24px + var(--score) * 42px));
    height: var(--hm-h, calc(24px + var(--score) * 42px));
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(var(--cell-rot, 0deg)) scale(calc(var(--cell-scale, 1) * 0.45));
    background:
        linear-gradient(135deg,
            rgba(var(--heat-rgb, 34, 211, 238), var(--part-alpha, 0.38)),
            rgba(14, 165, 233, var(--part-alpha-mid, 0.22))),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 48%, rgba(15, 118, 110, 0.10));
    box-shadow: 0 0 12px rgba(var(--heat-rgb, 34, 211, 238), 0.28);
    filter: blur(0.25px);
    animation: detYoloHeatGrow 0.7s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: var(--delay, 0ms);
}

.det-yolo-heatmap-layer--class i {
    background:
        linear-gradient(135deg, rgba(var(--heat-rgb, 45, 212, 191), var(--part-alpha, 0.42)), rgba(14, 165, 233, var(--part-alpha-mid, 0.24))),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
}

.det-yolo-heatmap-layer--suppression i.is-suppressed,
.det-yolo-heatmap-layer--suppression i.is-active {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.48), rgba(14, 165, 233, 0.18));
}

.det-yolo-heatmap-layer i.is-active {
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.36), 0 0 18px rgba(6, 182, 212, 0.28);
}

.det-yolo-feature-cell {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid #06b6d4;
    border-radius: 7px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.24);
    animation: detYoloCellPulse 1.2s ease-out infinite;
}

.det-yolo-feature-empty {
    display: grid;
    place-items: center;
    min-height: 150px;
    color: #64748b;
    font-size: 11px;
}

.det-yolo-rgb-stack {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.det-yolo-rgb-stack i {
    display: grid;
    min-height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    font-style: normal;
    font-weight: 950;
    animation: detYoloDecomposeSlide 0.7s cubic-bezier(.22,.61,.36,1) both;
}

.det-yolo-rgb-stack i:nth-child(1) { background: rgba(59, 130, 246, 0.72); }
.det-yolo-rgb-stack i:nth-child(2) { background: rgba(20, 184, 166, 0.72); animation-delay: 80ms; }
.det-yolo-rgb-stack i:nth-child(3) { background: rgba(6, 182, 212, 0.72); animation-delay: 160ms; }

.det-yolo-rgb-stack span {
    color: #0369a1;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    font-weight: 950;
}

.det-yolo-preprocess-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.det-yolo-preprocess-card div {
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.det-yolo-preprocess-card span,
.det-yolo-head-split span {
    display: block;
    color: #64748b;
    font-size: 9px;
    font-weight: 850;
}

.det-yolo-preprocess-card strong,
.det-yolo-head-split strong {
    color: #0f172a;
    font-size: 11px;
    font-weight: 950;
}

.det-yolo-model-flow {
    display: grid;
    grid-template-columns: 1fr 24px 1fr 24px 1fr;
    gap: 4px;
    align-items: center;
}

.det-yolo-model-flow span {
    display: grid;
    min-height: 34px;
    place-items: center;
    border: 1px solid rgba(14, 165, 233, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    color: #0369a1;
    font-size: 10px;
    font-weight: 950;
}

.det-yolo-model-flow i,
.det-yolo-head-split > i {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.10), rgba(14, 165, 233, 0.75));
    transform-origin: left;
    animation: detYoloExtend 0.8s cubic-bezier(.22,.61,.36,1) infinite;
}

.det-yolo-pyramid {
    display: grid;
    gap: 8px;
}

.det-yolo-pyramid article {
    display: grid;
    grid-template-columns: 42px 52px minmax(0, 1fr) 74px;
    gap: 7px;
    align-items: center;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 11px;
    padding: 7px;
    background: rgba(255, 255, 255, 0.70);
}

.det-yolo-pyramid span {
    color: #0284c7;
    font-weight: 950;
}

.det-yolo-pyramid strong,
.det-yolo-pyramid em {
    color: #475569;
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
}

.det-yolo-pyramid article div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.det-yolo-pyramid article i {
    height: 5px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.18);
    animation: detYoloFeatureFlicker 0.9s ease-in-out infinite;
    animation-delay: calc((var(--i, 0) * 70ms) + (var(--j, 0) * 20ms));
}

.det-yolo-head-split {
    display: grid;
    grid-template-columns: 1fr 22px 1fr 1fr 1fr 22px 1.15fr;
    gap: 6px;
    align-items: center;
}

.det-yolo-head-split div {
    min-width: 0;
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 10px;
    padding: 7px;
    background: rgba(255, 255, 255, 0.74);
    animation: detYoloDecomposeSlide 0.55s cubic-bezier(.22,.61,.36,1) both;
}

.det-yolo-head-split .is-source,
.det-yolo-head-split .is-output {
    border-color: rgba(6, 182, 212, 0.35);
    background: rgba(236, 254, 255, 0.82);
}

.det-yolo-head-split .is-output {
    animation-name: detYoloMergePop;
}

.det-yolo-head-split .is-merge {
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.10), rgba(20, 184, 166, 0.75));
}

.det-yolo-score-bars {
    display: grid;
    gap: 6px;
}

.det-yolo-score-bars div {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 34px;
    gap: 6px;
    align-items: center;
}

.det-yolo-score-bars span,
.det-yolo-score-bars strong {
    color: #475569;
    font-size: 10px;
    font-weight: 900;
}

.det-yolo-score-bars b {
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, #bae6fd calc(var(--score) * 100%), rgba(226, 232, 240, 0.8) 0);
    overflow: hidden;
}

.det-yolo-score-bars div.is-active span,
.det-yolo-score-bars div.is-active strong {
    color: #0369a1;
}

.det-yolo-score-bars div.is-active b {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.10);
}

.det-yolo-nms-compact {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(116px, 0.7fr);
    gap: 10px;
}

.det-yolo-iou-matrix {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
}

.det-yolo-iou-matrix span {
    display: grid;
    min-height: 25px;
    place-items: center;
    border-radius: 6px;
    background: color-mix(in srgb, #67e8f9 calc(var(--iou) * 48%), #f8fafc);
    color: #0f172a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 9px;
    font-weight: 900;
}

.det-yolo-iou-matrix span.is-active {
    outline: 2px solid #f97316;
    background: #ffedd5;
    animation: detYoloCollision 0.8s ease-in-out infinite;
}

.det-yolo-output-schema {
    display: grid;
    gap: 6px;
}

.det-yolo-output-schema strong {
    color: #0369a1;
    font-size: 11px;
    font-weight: 950;
}

.det-yolo-output-schema code,
.det-yolo-output-schema span {
    border: 1px solid rgba(14, 165, 233, 0.14);
    border-radius: 8px;
    padding: 5px 6px;
    background: rgba(255, 255, 255, 0.70);
    color: #334155;
    font-family: Consolas, "Courier New", monospace;
    font-size: 9px;
    overflow-wrap: anywhere;
}

@keyframes detYoloHeatGrow {
    to { transform: translate(-50%, -50%) rotate(var(--cell-rot, 0deg)) scale(var(--cell-scale, 1)); opacity: 1; }
}

@keyframes detYoloCellPulse {
    0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.28); }
    100% { box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); }
}

@keyframes detYoloDecomposeSlide {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes detYoloExtend {
    0% { transform: scaleX(0.16); opacity: 0.35; }
    55% { transform: scaleX(1); opacity: 0.9; }
    100% { transform: scaleX(1); opacity: 0.38; }
}

@keyframes detYoloFeatureFlicker {
    0%, 100% { opacity: 0.36; transform: scaleY(0.72); }
    50% { opacity: 0.95; transform: scaleY(1.15); }
}

@keyframes detYoloMergePop {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes detYoloCollision {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.det-missing-hint {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #64748b;
    pointer-events: none;
}

.det-step-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.det-step-nav button,
.det-play-btn {
    border: 1px solid var(--det-line);
    border-radius: 8px;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--det-accent-dark);
    background: var(--det-soft);
    cursor: pointer;
    transition: background 0.15s;
}

.det-step-nav button:hover,
.det-play-btn:hover {
    background: color-mix(in srgb, var(--det-soft) 62%, #ffffff);
}

.det-play-btn {
    width: 100%;
    margin-top: 6px;
}

.det-table-wrap {
    display: grid;
    gap: 8px;
    min-width: 0;
    overflow: auto;
    padding: 0 17px 17px 17px;
}

.det-table-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.det-section-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--det-accent-dark);
    border-left: 3px solid var(--det-accent);
    padding-left: 6px;
}

.det-class-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.det-class-filter label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 2px 6px;
    background: #f8fafc;
}

.det-candidate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.det-candidate-table th,
.det-candidate-table td {
    border: 1px solid #e2e8f0;
    padding: 4px 6px;
    text-align: left;
    white-space: nowrap;
}

.det-candidate-table th {
    background: #f1f5f9;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.04em;
}

.det-pair-card {
    display: grid;
    gap: 8px;
    border: 1px solid #fed7aa;
    border-radius: 11px;
    padding: 9px;
    background: linear-gradient(180deg, #fff7ed, #ffffff);
}

.det-pair-card[hidden] {
    display: none !important;
}

.det-pair-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.det-pair-card-head span {
    color: #9a3412;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.det-pair-card-head strong {
    min-width: 0;
    color: #7c2d12;
    font-size: 12px;
    font-weight: 950;
}

.det-pair-card-head em {
    border-radius: 999px;
    padding: 2px 7px;
    color: #ffffff;
    font-size: 9px;
    font-style: normal;
    font-weight: 950;
    background: #f97316;
}

.det-pair-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 0.86fr)) minmax(180px, 1.2fr);
    gap: 8px;
}

.det-pair-card-grid article,
.det-pair-card-grid dl {
    min-width: 0;
    margin: 0;
    border: 1px solid #ffedd5;
    border-radius: 9px;
    padding: 7px;
    background: #ffffff;
}

.det-pair-card-grid article {
    display: grid;
    gap: 4px;
}

.det-pair-card-grid article.is-a {
    border-left: 3px solid #f97316;
}

.det-pair-card-grid article.is-b {
    border-left: 3px dashed #f97316;
}

.det-pair-card-grid span,
.det-pair-card-grid dt {
    color: #9a3412;
    font-size: 9px;
    font-weight: 950;
}

.det-pair-card-grid strong,
.det-pair-card-grid dd,
.det-pair-card-grid code {
    min-width: 0;
    margin: 0;
    color: #0f172a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.det-pair-card-grid dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.det-pair-card-grid dl div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.det-pair-card-grid dl div:last-child {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.det-runtime-stats,
.det-class-stats {
    font-size: 12px;
    color: #475569;
}

.det-notes-tutorial {
    font-size: 12px;
    color: #334155;
    line-height: 1.6;
    padding: 10px 12px;
    border: 1px solid var(--det-line);
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, var(--det-soft));
    min-height: 60px;
    margin-bottom: 8px;
}

.det-notes-tutorial p {
    margin: 0;
}

.det-notes-tutorial strong {
    margin: 0 5px;
    color: var(--det-ink);
}

.det-notes-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--det-line);
    border-radius: 10px;
    margin-top: 8px;
    background: linear-gradient(180deg, #fff, var(--det-soft));
}
.det-notes-timeline-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--det-ink);
    opacity: 0.4;
    padding: 3px 0;
}
.det-notes-timeline-item.done  { opacity: 0.65; }
.det-notes-timeline-item.active { opacity: 1; font-weight: 600; color: var(--det-accent); }
.det-notes-tl-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    flex-shrink: 0;
}
.det-notes-timeline-item.active .det-notes-tl-dot {
    background: var(--det-accent);
    border-color: var(--det-accent);
}
.det-notes-timeline-item.done .det-notes-tl-dot {
    background: var(--det-accent);
    border-color: var(--det-accent);
    opacity: 0.5;
}
.det-notes-tl-label { flex: 1; }
.det-notes-tl-check {
    font-size: 10px;
    color: var(--det-accent);
    opacity: 0.7;
}

.det-notes-data dl {
    display: grid;
    gap: 0;
    font-size: 12px;
}

.det-notes-data dl > div {
    display: grid;
    grid-template-columns: minmax(78px, 0.42fr) minmax(0, 1fr);
    gap: 8px;
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 3px 2px;
    background: transparent;
}

.det-notes-data dl > div:last-child {
    border-bottom: 0;
}

.det-notes-data dt {
    color: #64748b;
    font-weight: 600;
}

.det-notes-data dd {
    min-width: 0;
    color: var(--det-accent-dark);
    font-weight: 800;
    font-family: monospace;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.det-yolo-active-context {
    margin-top: 8px !important;
    border-top: 1px dashed rgba(14, 165, 233, 0.22);
    padding-top: 6px;
}

.det-yolo-heatmap-note {
    margin: 7px 0 0;
    border-left: 2px solid rgba(14, 165, 233, 0.35);
    padding-left: 8px;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.5;
}

/* 学术概念卡片填充样式 */
.det-academic-cards {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px dashed var(--det-line);
    padding-top: 8px;
}

.det-academic-card {
    border: 1px solid var(--det-line);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    transition: all 0.2s ease;
}

.det-academic-card[open] {
    background: #ffffff;
    box-shadow: none;
}

.det-academic-card summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 9px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--det-ink);
    cursor: pointer;
    list-style: none;
    background: #f8fafc;
    user-select: none;
}

.det-academic-card summary::-webkit-details-marker {
    display: none;
}

.det-card-arrow {
    transition: transform 0.2s ease;
    color: #64748b;
}

.det-academic-card[open] .det-card-arrow {
    transform: rotate(180deg);
}

.det-academic-content {
    padding: 8px 9px;
    border-top: 1px solid var(--det-line);
}

.det-academic-desc {
    margin: 0 0 8px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.5;
}

/* IoU CSS 纯绘图区 */
.det-iou-diagram {
    position: relative;
    width: 140px;
    height: 90px;
    margin: 10px auto;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 6px;
    overflow: hidden;
}

.det-diag-box {
    position: absolute;
    border: 2px solid;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
}

.det-diag-box.box-a {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
    width: 65px;
    height: 55px;
    left: 20px;
    top: 15px;
    color: #3b82f6;
}

.det-diag-box.box-b {
    border-color: #ec4899;
    background: rgba(236, 72, 153, 0.05);
    width: 65px;
    height: 55px;
    left: 55px;
    top: 25px;
    color: #ec4899;
}

.det-diag-overlap {
    position: absolute;
    left: 55px;
    top: 25px;
    width: 30px;
    height: 45px;
    background: repeating-linear-gradient(
        45deg,
        rgba(16, 185, 129, 0.25),
        rgba(16, 185, 129, 0.25) 3px,
        rgba(16, 185, 129, 0.4) 3px,
        rgba(16, 185, 129, 0.4) 6px
    );
    border: 1px dashed #10b981;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #047857;
    font-weight: 700;
}

/* IoU 数学公式排版 */
.det-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 8px;
    font-family: serif;
    font-weight: bold;
}

.det-math-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 4px;
}

.det-math-num {
    border-bottom: 1px solid var(--det-ink);
    padding: 0 2px 2px;
    font-size: 10px;
}

.det-math-den {
    padding: 2px 2px 0;
    font-size: 10px;
}

.det-math-eq {
    margin-left: 4px;
    color: var(--det-accent-dark);
}

/* BBox 回归计算公式排版 */
.det-math-equations {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--det-soft);
    padding: 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 10.5px;
    color: var(--det-ink);
}

.det-math-equations > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.det-equation-note {
    font-size: 9px;
    color: #64748b;
    font-family: inherit;
}

.det-iou-equation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--det-line);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 7px;
    background: var(--det-soft);
}

.det-iou-equation span {
    color: var(--det-accent-dark);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.det-iou-equation strong {
    color: var(--det-ink);
    font-family: Consolas, "Courier New", monospace;
    font-size: 20px;
    animation: detNumberRoll 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.det-iou-equation small {
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
}

.det-final-output {
    display: grid;
    gap: 6px;
    border: 1px solid var(--det-line);
    border-radius: 10px;
    padding: 8px;
    margin-top: 7px;
    background: #ffffff;
}

.det-final-output strong {
    color: var(--det-accent-dark);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.det-final-output code {
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 10px;
    line-height: 1.45;
}

.detection-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 5px;
    font-size: 11px;
}

.detection-runtime-grid div {
    min-height: 52px;
}

.detection-inference-actions {
    grid-template-columns: 1fr;
}

.detection-inference-actions .ghost-button {
    grid-column: auto;
}

.detection-inference-message,
.detection-empty-hint {
    margin: 0;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.55;
}

.detection-source-schema {
    margin-bottom: 12px;
}

.detection-stage-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.detection-stage-badges span {
    border: 1px solid #dbeafe;
    border-radius: 999px;
    padding: 6px 10px;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 950;
    background: #eff6ff;
}

.detection-stage-cards {
    display: grid;
    grid-template-columns: minmax(320px, 1.35fr) minmax(220px, 0.9fr) minmax(180px, 0.7fr);
    gap: 12px;
    margin-top: 12px;
}

.detection-info-card {
    min-width: 0;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 12px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.detection-info-card header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.detection-info-card header span {
    color: #2563eb;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.detection-info-card h4 {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
}

.detection-table-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 120px;
    max-height: 300px;
    overflow: auto;
}

.detection-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.detection-table-wrap th,
.detection-table-wrap td {
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 5px;
    color: #334155;
    text-align: left;
    vertical-align: top;
}

.detection-table-wrap th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #1e3a8a;
    font-size: 9px;
    text-transform: uppercase;
    background: #eff6ff;
}

.detection-table-wrap td:nth-child(4) {
    max-width: 145px;
    color: #64748b;
    font-family: Consolas, "Courier New", monospace;
    word-break: break-word;
}

.detection-table-wrap td span {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 6px;
    color: #1e3a8a;
    font-weight: 950;
    background: #dbeafe;
}

.detection-table-wrap tr.is-low-confidence td span {
    color: #475569;
    background: #e2e8f0;
}

.detection-table-wrap tr.is-comparing td span {
    color: #9a3412;
    background: #fed7aa;
}

.detection-table-wrap tr.is-suppressed td span {
    color: #991b1b;
    background: #fee2e2;
}

.detection-table-wrap tr.is-kept td span {
    color: #166534;
    background: #dcfce7;
}

.detection-table-wrap tr.is-active-row td {
    background: color-mix(in srgb, var(--det-soft) 65%, #ffffff);
    box-shadow: inset 3px 0 0 var(--det-accent);
}

.detection-stat-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 16px;
    margin: 0;
}

.detection-stat-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 6px;
}

@media (max-width: 1200px) {
    .detection-stat-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .detection-stat-list {
        grid-template-columns: 1fr;
    }
}

.detection-stat-list dt,
.detection-stat-list dd {
    margin: 0;
    font-size: 10px;
}

.detection-stat-list dt {
    color: #64748b;
}

.detection-stat-list dd {
    color: #0f172a;
    font-weight: 950;
    text-align: right;
}

.detection-class-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #64748b;
    font-size: 11px;
}

.detection-class-stats span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--det-line);
    border-radius: 999px;
    padding: 6px 8px;
    background: var(--det-soft);
}

.detection-class-stats i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.detection-class-stats strong {
    color: var(--det-accent-dark);
}

.detection-rcnn-stage {
    display: grid;
    gap: 12px;
    width: calc(100% - 34px);
    margin: 0 auto;
    border: 1px solid var(--det-line);
    border-radius: 12px;
    padding: 12px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--det-soft) 74%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--det-soft) 74%, transparent) 1px, transparent 1px),
        #f8fbff;
    background-size: 24px 24px;
}

.detection-rcnn-evolution {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.detection-rcnn-evolution::before {
    content: "";
    position: absolute;
    right: 8%;
    left: 8%;
    top: 18px;
    height: 2px;
    background: linear-gradient(90deg, #c4b5fd, #7c3aed, #4f46e5);
}

.detection-rcnn-evolution article {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, 0.92);
}

.detection-rcnn-evolution article::after {
    content: "→";
    position: absolute;
    right: -11px;
    top: 13px;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 950;
    background: transparent;
}

.detection-rcnn-evolution article:last-child::after {
    display: none;
}

.detection-rcnn-evolution article.is-active {
    border-color: var(--det-line);
    background: linear-gradient(180deg, #ffffff, var(--det-soft));
    box-shadow: 0 10px 20px var(--det-shadow);
}

.detection-rcnn-evolution span {
    width: max-content;
    border: 1px solid #c4b5fd;
    border-radius: 999px;
    padding: 2px 7px;
    color: var(--det-accent-dark);
    font-size: 10px;
    font-weight: 950;
    background: #ffffff;
}

.detection-rcnn-evolution strong {
    min-width: 0;
    overflow: hidden;
    color: var(--det-ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-rcnn-evolution small {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
}

[data-detection-lab] [hidden] {
    display: none !important;
}

.detection-demo-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.detection-demo-flow article,
.detection-proposal-lifecycle,
.detection-lifecycle-grid article,
.detection-regression-card,
.detection-roi-board section,
.detection-rpn-board section {
    min-width: 0;
    border: 1px solid var(--det-line);
    border-radius: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 22px var(--det-shadow);
}

.detection-demo-flow article {
    position: relative;
    overflow: hidden;
}

.detection-demo-flow article::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--det-accent) 12%, transparent);
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.detection-demo-flow article.is-active {
    border-color: var(--det-line);
    background: linear-gradient(180deg, #ffffff, var(--det-soft));
}

.detection-demo-flow article.is-current {
    transform: translateY(-2px);
}

.detection-demo-flow article.is-active::after {
    transform: scale(1);
    opacity: 1;
}

.detection-demo-flow strong,
.detection-roi-board h4,
.detection-rpn-board h4 {
    display: block;
    margin: 0 0 5px;
    color: var(--det-ink);
    font-size: 12px;
}

.detection-demo-flow span,
.detection-demo-flow em {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.4;
}

.detection-demo-flow em {
    margin-top: 6px;
    color: var(--det-accent-dark);
}

.detection-proposal-lifecycle {
    display: grid;
    gap: 10px;
}

.detection-proposal-lifecycle header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid #ede9fe;
    padding-bottom: 8px;
}

.detection-proposal-lifecycle header span {
    border: 1px solid var(--det-line);
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--det-accent-dark);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
    background: var(--det-soft);
}

.detection-proposal-lifecycle header strong {
    min-width: 0;
    overflow: hidden;
    color: var(--det-ink);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-proposal-lifecycle header em {
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.detection-lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.detection-lifecycle-grid article {
    position: relative;
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 128px;
    box-shadow: none;
    opacity: 0.72;
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

.detection-lifecycle-grid article.is-active {
    opacity: 1;
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffffff, var(--det-soft));
}

.detection-lifecycle-grid article.is-current {
    border-color: var(--det-accent);
    box-shadow: 0 12px 24px var(--det-shadow);
}

.detection-lifecycle-grid article::after {
    content: "→";
    position: absolute;
    right: -12px;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 10px;
    font-weight: 950;
    background: linear-gradient(135deg, var(--det-accent), var(--det-accent-2));
    transform: translateY(-50%);
    animation: detRcnnArrowPulse 1.2s ease-in-out infinite;
}

.detection-lifecycle-grid article:last-child::after {
    display: none;
}

.detection-lifecycle-grid article > span {
    color: var(--det-accent-dark);
    font-size: 10px;
    font-weight: 950;
}

.detection-lifecycle-grid article > strong {
    overflow-wrap: anywhere;
    color: var(--det-ink);
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
}

.detection-lifecycle-grid small,
.detection-lifecycle-grid code {
    color: #64748b;
    font-size: 9.5px;
    line-height: 1.35;
}

.detection-lifecycle-grid code {
    overflow-wrap: anywhere;
    font-family: Consolas, "Courier New", monospace;
}

.detection-crop-warp-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-height: 42px;
}

.detection-crop-warp-demo::before {
    content: "";
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--det-accent), var(--det-accent-2));
    animation: detRcnnFlow 1.2s linear infinite;
}

.detection-crop-warp-demo i,
.detection-crop-warp-demo b {
    display: grid;
    place-items: center;
    min-height: 34px;
    border: 1px solid var(--det-line);
    border-radius: 8px;
    color: var(--det-ink);
    font-size: 9px;
    font-style: normal;
    font-weight: 950;
    background: #ffffff;
}

.detection-crop-warp-demo i {
    grid-column: 1;
}

.detection-crop-warp-demo b {
    grid-column: 3;
}

.detection-lifecycle-grid .detection-feature-grid {
    gap: 2px;
}

.detection-lifecycle-grid .detection-feature-grid i {
    min-height: 12px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
}

.detection-classifier-bars {
    display: grid;
    gap: 6px;
}

.detection-classifier-bars div {
    display: grid;
    grid-template-columns: minmax(52px, 0.7fr) minmax(0, 1fr) 30px;
    gap: 5px;
    align-items: center;
}

.detection-classifier-bars span,
.detection-classifier-bars strong {
    color: #475569;
    font-size: 9px;
    font-weight: 850;
}

.detection-classifier-bars b {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #ede9fe;
}

.detection-classifier-bars b::after {
    content: "";
    display: block;
    width: var(--score-pct, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--det-accent), var(--det-accent-2));
    transform-origin: left;
    animation: detScoreGrow 0.55s ease both;
}

.detection-regression-track {
    position: relative;
    min-height: 48px;
    border: 1px dashed var(--det-line);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.78);
}

.detection-regression-track i {
    position: absolute;
    top: 12px;
    width: 34%;
    height: 22px;
    border: 2px solid #94a3b8;
    border-radius: 4px;
}

.detection-regression-track .is-before {
    left: 9%;
    border-style: dashed;
}

.detection-regression-track .is-after {
    left: 54%;
    border-color: var(--det-accent);
    transform: translateX(-16%);
    animation: detBoxRefine 0.72s ease both;
}

.detection-regression-track b {
    position: absolute;
    bottom: 4px;
    color: #64748b;
    font-size: 8px;
    font-weight: 900;
}

.detection-regression-track b:first-of-type {
    left: 8%;
}

.detection-regression-track b:last-of-type {
    right: 8%;
    color: var(--det-accent-dark);
}

.detection-nms-result {
    display: grid;
    gap: 6px;
}

.detection-nms-result b {
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 4px 6px;
    color: #166534;
    font-size: 9px;
    background: #dcfce7;
}

.detection-nms-result b.is-suppressed {
    border-color: #fecaca;
    color: #991b1b;
    text-decoration: line-through;
    background: #fee2e2;
    animation: detSuppressFlash 0.55s ease both;
}

.detection-regression-offsets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.detection-regression-offsets div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #ede9fe;
    border-radius: 8px;
    padding: 6px 8px;
    background: #ffffff;
}

.detection-regression-offsets dt,
.detection-regression-offsets dd {
    margin: 0;
    color: #64748b;
    font-size: 10px;
}

.detection-regression-offsets dd {
    color: var(--det-accent-dark);
    font-weight: 950;
}

@keyframes detRcnnFlow {
    from { background-position: 80px 0; }
    to { background-position: 0 0; }
}

@keyframes detScoreGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes detBoxRefine {
    from { opacity: 0.25; transform: translateX(-48%); }
    to { opacity: 1; transform: translateX(-16%); }
}

@keyframes detRcnnArrowPulse {
    0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.78; }
    50% { transform: translateY(-50%) scale(1.12); opacity: 1; }
}

.detection-regression-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.detection-regression-card div {
    display: grid;
    gap: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    background: #f8fafc;
}

.detection-regression-card b {
    color: #1d4ed8;
    font-size: 10px;
    text-transform: uppercase;
}

.detection-regression-card code {
    overflow-wrap: anywhere;
    color: #334155;
    font-size: 10px;
}

.detection-regression-card dl {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.detection-regression-card dl div,
.detection-roi-board dl div,
.detection-rpn-board dl div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.detection-regression-card dt,
.detection-regression-card dd,
.detection-roi-board dt,
.detection-roi-board dd,
.detection-rpn-board dt,
.detection-rpn-board dd {
    margin: 0;
    color: #475569;
    font-size: 10px;
}

.detection-regression-card dd,
.detection-roi-board dd,
.detection-rpn-board dd {
    color: #1e40af;
    font-weight: 900;
    text-align: right;
}

.detection-roi-board,
.detection-rpn-board {
    display: grid;
    grid-template-columns: minmax(170px, 0.8fr) minmax(240px, 1fr) minmax(170px, 0.8fr);
    gap: 10px;
}

.detection-feature-grid,
.detection-pooled-grid,
.detection-anchor-grid {
    display: grid;
    gap: 4px;
}

.detection-feature-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.detection-feature-grid i,
.detection-pooled-grid i,
.detection-anchor-grid i {
    display: grid;
    min-height: 28px;
    place-items: center;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1e3a8a;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    background: rgba(37, 99, 235, calc(0.08 + var(--v, 0.3) * 0.42));
}

.detection-feature-grid i.is-active {
    outline: 2px solid #f97316;
    outline-offset: 1px;
}

.detection-pooled-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detection-pooled-grid i {
    min-height: 42px;
    background: linear-gradient(180deg, rgba(96, 165, 250, calc(0.2 + var(--v, 0.3) * 0.45)), #ffffff);
}

.detection-pooled-grid b,
.detection-pooled-grid span {
    display: block;
}

.detection-pooled-grid span {
    color: #64748b;
    font-size: 8px;
}

.detection-anchor-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.detection-anchor-grid i {
    position: relative;
    min-height: 32px;
    background: #eff6ff;
}

.detection-anchor-grid i::before,
.detection-anchor-grid i::after {
    content: "";
    position: absolute;
    border: 1px solid #60a5fa;
    border-radius: 2px;
}

.detection-anchor-grid i::before {
    inset: 7px 11px;
}

.detection-anchor-grid i::after {
    inset: 11px 6px;
}

.detection-anchor-grid i.is-hot {
    background: #dbeafe;
    animation: detectionAnchorPulse 1.6s ease-in-out infinite;
}

.detection-anchor-grid span {
    position: relative;
    z-index: 1;
    color: #1d4ed8;
    font-size: 7px;
}

.detection-rpn-score {
    display: grid;
    gap: 8px;
}

.detection-rpn-score span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    background: #f8fafc;
}

.detection-rpn-score b {
    color: #1d4ed8;
    font-size: 14px;
}

.detection-demo-box {
    border-color: var(--demo-box-color, #2563eb);
}

.detection-demo-box span {
    max-width: 190px;
    background: var(--demo-box-color, #2563eb);
}

.detection-demo-box--proposal {
    --demo-box-color: var(--det-accent);
    animation: detProposalFloat 0.48s ease both;
    animation-delay: var(--proposal-delay, 0ms);
}

.detection-demo-box--proposal-active {
    --demo-box-color: #7c3aed;
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
    animation: detComparePulse 0.9s ease-in-out infinite;
}

.detection-demo-box--gt {
    --demo-box-color: #22c55e;
    border-style: dashed;
}

.detection-demo-box--refined,
.detection-demo-box--anchor-positive {
    --demo-box-color: #16a34a;
}

.detection-demo-box--nms-delete {
    --demo-box-color: #ef4444;
    border-style: dashed;
    opacity: 0.76;
    animation: detSuppressFlash 0.55s ease both;
}

.detection-demo-box--low {
    --demo-box-color: #94a3b8;
    border-style: dashed;
    opacity: 0.46;
}

.detection-demo-box--anchor-negative {
    --demo-box-color: #ef4444;
    border-style: dashed;
    opacity: 0.72;
}

.detection-demo-box--anchor-ignore {
    --demo-box-color: #f59e0b;
    border-style: dotted;
}

@keyframes detectionAnchorPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.2);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(37, 99, 235, 0);
    }
}

@media (max-width: 1180px) {
    .detection-stage-cards {
        grid-template-columns: 1fr;
    }

    .detection-demo-flow,
    .detection-lifecycle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detection-roi-board,
    .detection-rpn-board {
        grid-template-columns: 1fr;
    }

    .det-output-pipeline-track,
    .detection-rcnn-evolution {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .detection-regression-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .det-output-pipeline-head,
    .det-output-pipeline-track,
    .detection-rcnn-evolution,
    .detection-demo-flow,
    .detection-lifecycle-grid,
    .detection-regression-offsets {
        grid-template-columns: 1fr;
    }

    .det-output-pipeline-track article::after,
    .detection-rcnn-evolution article::after,
    .detection-lifecycle-grid article::after {
        display: none;
    }

    .detection-proposal-lifecycle header {
        grid-template-columns: 1fr;
    }

    .detection-proposal-lifecycle header em {
        white-space: normal;
    }
}

.vision-bbox {
    position: absolute;
    border: 2px solid var(--box-color, var(--det-accent));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42);
    transform-origin: center;
}

@keyframes detProposalFloat {
    from { opacity: 0; transform: translateY(10px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.vision-bbox span {
    position: absolute;
    top: -22px;
    left: -2px;
    max-width: 160px;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
    padding: 4px 7px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--box-color, var(--det-accent));
}

.vision-bbox--raw,
.vision-bbox--candidate {
    border-color: var(--box-color, var(--det-accent));
    opacity: 0.65;
    animation: detCandidatePop 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.vision-bbox--raw span,
.vision-bbox--candidate span {
    background: var(--box-color, var(--det-accent));
}

.vision-bbox--low {
    border-color: #94a3b8;
    border-style: dashed;
    opacity: 0.15;
    animation: detLowFade 0.72s ease both;
}

.vision-bbox--low span {
    background: rgba(100, 116, 139, 0.55);
}

.vision-bbox--compare-a {
    border-color: #f97316;
    border-style: solid;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.28);
    animation: detComparePulse 0.84s ease-in-out infinite;
}

.vision-bbox--compare-a span {
    background: #ea580c;
}

.vision-bbox--compare-b {
    border-color: #f97316;
    border-style: dashed;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
    animation: detComparePulse 0.84s ease-in-out infinite 0.12s;
}

.vision-bbox--compare-b span {
    background: #f97316;
}

.vision-bbox--kept {
    border-color: #22c55e;
    border-style: solid;
    opacity: 0.7;
    animation: detFinalSettle 0.32s ease both;
}

.vision-bbox--kept span {
    background: #16a34a;
}

.vision-bbox--suppressed {
    border-color: #ef4444;
    border-style: dashed;
    opacity: 0.12;
    animation: detSuppressFlash 0.5s ease both;
}

.vision-bbox--suppressed span {
    background: rgba(220, 38, 38, 0.5);
}

.vision-iou-intersection {
    position: absolute;
    border: 1px solid #f97316;
    background: rgba(249, 115, 22, 0.34);
    animation: detIntersectionFill 0.32s ease both;
}

.det-iou-badge {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 8;
    display: grid;
    gap: 2px;
    min-width: 82px;
    border: 1px solid rgba(251, 146, 60, 0.72);
    border-radius: 10px;
    padding: 8px 10px;
    color: #7c2d12;
    background: rgba(255, 247, 237, 0.92);
    box-shadow: 0 12px 26px rgba(124, 45, 18, 0.14);
}

.det-iou-badge span {
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.det-iou-badge strong {
    font-family: Consolas, "Courier New", monospace;
    font-size: 21px;
    animation: detNumberRoll 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.det-iou-badge small {
    font-size: 9px;
    font-weight: 850;
}

@keyframes detCandidatePop {
    from { opacity: 0; transform: scale(0.86) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes detLowFade {
    from { opacity: 0.9; filter: grayscale(0); }
    to { opacity: 0.42; filter: grayscale(1); }
}

@keyframes detComparePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.025); }
}

@keyframes detSuppressFlash {
    from { opacity: 1; transform: scale(1.02); }
    to { opacity: 0.78; transform: scale(1); }
}

@keyframes detFinalSettle {
    from { transform: scale(1.025); }
    to { transform: scale(1); }
}

@keyframes detIntersectionFill {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes detNumberRoll {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.legend-dot--candidate {
    background: #2563eb;
}

.legend-dot--low {
    border: 2px dashed #94a3b8;
    background: transparent;
}

.legend-dot--compare-a {
    background: #f97316;
}

.legend-dot--compare-b {
    border: 2px dashed #f97316;
    background: transparent;
}

.legend-dot--kept {
    background: #22c55e;
}

.legend-dot--suppressed {
    border: 2px dashed #ef4444;
    background: transparent;
}

.detection-compare-card {
    display: grid;
    gap: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 12px;
    color: #475569;
    font-size: 11px;
    line-height: 1.55;
    background: #f8fbff;
}

.detection-pair {
    display: grid;
    gap: 3px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
}

.detection-pair strong {
    color: #1e3a8a;
}

.detection-pair code {
    color: #475569;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
}

.detection-compare-card dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.detection-compare-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.detection-compare-card dt,
.detection-compare-card dd {
    margin: 0;
}

.detection-compare-card dt {
    color: #64748b;
}

.detection-compare-card dd {
    color: #0f172a;
    font-weight: 950;
}

/* ============================================================
   UNIFIED ANIMATION LANGUAGE — Detection Module
   分解 / 线条伸展 / 碰撞 / 合并 / 脉冲
   ============================================================ */

/* --- 脉冲：呼吸光晕 --- */
@keyframes detBreathGlow {
    0%, 100% { box-shadow: 0 0 0 0 var(--det-glow, rgba(14,165,233,0.35)); }
    50% { box-shadow: 0 0 0 6px var(--det-glow, rgba(14,165,233,0.08)); }
}

@keyframes detBreathGlowPurple {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.35); }
    50% { box-shadow: 0 0 0 6px rgba(124,58,237,0.08); }
}

@keyframes detRingPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.35); opacity: 0; }
}

.det-pulse-ring {
    position: absolute;
    inset: -2px;
    border: 2px solid var(--det-accent, #0ea5e9);
    border-radius: inherit;
    pointer-events: none;
    animation: detRingPulse 1.2s ease-out infinite;
}

/* --- 线条伸展：发光连接线 + 流动粒子 --- */
@keyframes detFlowDash {
    to { stroke-dashoffset: -20; }
}

@keyframes detParticleFlow {
    0% { offset-distance: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

.det-flow-line {
    stroke: var(--det-accent, #0ea5e9);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 6 4;
    animation: detFlowDash 0.8s linear infinite;
    filter: drop-shadow(0 0 3px var(--det-accent, #0ea5e9));
    opacity: 0.7;
}

.det-flow-particle {
    fill: var(--det-accent, #0ea5e9);
    filter: drop-shadow(0 0 4px var(--det-accent, #0ea5e9));
}

/* --- 碰撞：抖动 + 压制 --- */
@keyframes detShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 2px); }
}

@keyframes detCrack {
    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
    30% { opacity: 1; transform: scale(1.03); filter: brightness(1.3); }
    100% { opacity: 0; transform: scale(0.7) rotate(2deg); filter: brightness(0.5); }
}

/* --- 合并：汇聚 --- */
@keyframes detConverge {
    0% { opacity: 0; transform: scale(0.5) translateY(20px); }
    60% { opacity: 1; transform: scale(1.08) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- 分解：拆裂 --- */
@keyframes detSplit {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- 数字滚动 --- */
@keyframes detCountRoll {
    0% { opacity: 0; transform: translateY(8px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- 轨道点亮 --- */
@keyframes detTrackLight {
    0% { opacity: 0.2; box-shadow: none; }
    100% { opacity: 1; box-shadow: 0 0 8px var(--det-accent, #0ea5e9); }
}

/* ============================================================
   YOLO PAGE — Enhanced Animations
   ============================================================ */

/* Candidate 粒子释放 */
.det-particle-burst {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0ea5e9;
    box-shadow: 0 0 8px #0ea5e9, 0 0 16px rgba(14,165,233,0.4);
    pointer-events: none;
    animation: detParticleBurst 0.6s ease-out forwards;
}

@keyframes detParticleBurst {
    0% { opacity: 0; transform: scale(0); }
    30% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(0.5) translateY(-20px); }
}

/* Confidence filter — 低分框抖动消失 */
@keyframes detLowShake {
    0% { opacity: 0.65; transform: translate(0,0) scale(1); filter: grayscale(0); }
    30% { opacity: 0.5; transform: translate(-1px,1px) scale(0.99); filter: grayscale(0.5); }
    60% { opacity: 0.3; transform: translate(1px,-1px) scale(0.97); filter: grayscale(1); }
    100% { opacity: 0.12; transform: translate(0,2px) scale(0.92); filter: grayscale(1); }
}

.vision-bbox--low {
    animation: detLowShake 0.7s cubic-bezier(0.4,0,0.2,1) both !important;
}

/* NMS — 碰撞抖动 */
@keyframes detSuppressShake {
    0% { opacity: 0.7; transform: translate(0,0) scale(1); }
    15% { opacity: 0.8; transform: translate(-2px,1px) scale(1.01); filter: brightness(1.2); }
    30% { opacity: 0.7; transform: translate(2px,-1px) scale(1); }
    50% { opacity: 0.5; transform: translate(-1px,-2px) scale(0.99); filter: brightness(0.9); }
    100% { opacity: 0.12; transform: translate(0,0) scale(0.95); filter: brightness(0.6); }
}

.vision-bbox--suppressed {
    animation: detSuppressShake 0.6s cubic-bezier(0.4,0,0.2,1) both !important;
}

/* NMS — 保留框脉冲环 */
.vision-bbox--kept::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid #22c55e;
    border-radius: 2px;
    pointer-events: none;
    animation: detRingPulse 1.4s ease-out infinite;
    opacity: 0;
}

/* Final — 收束动画 */
@keyframes detFinalConverge {
    0% { opacity: 0.5; transform: scale(1.08); }
    60% { opacity: 1; transform: scale(0.97); }
    100% { opacity: 0.7; transform: scale(1); }
}

.vision-bbox--kept {
    animation: detFinalConverge 0.5s cubic-bezier(0.16,1,0.3,1) both !important;
}

/* 数字滚动 */
.det-count-roll {
    animation: detCountRoll 0.4s ease both;
}

/* ============================================================
   R-CNN PAGE — Enhanced Animations
   ============================================================ */

/* Proposal 抽离 — 飞行动画 */
@keyframes detProposalFly {
    0% { opacity: 0; transform: scale(0.3) translate(var(--fly-from-x,0), var(--fly-from-y,0)); }
    40% { opacity: 1; transform: scale(0.6) translate(calc(var(--fly-from-x,0) * 0.5), calc(var(--fly-from-y,0) * 0.5)); }
    100% { opacity: 1; transform: scale(1) translate(0,0); }
}

.detection-proposal-patch {
    border-radius: 8px;
    overflow: hidden;
    animation: detProposalFly 0.7s cubic-bezier(0.16,1,0.3,1) both;
    box-shadow: 0 4px 16px rgba(124,58,237,0.2);
}

/* Crop/Warp — morph 动画 */
@keyframes detWarpMorph {
    0% { border-radius: 30% 10% 40% 15%; transform: scale(1.2) rotate(-3deg); opacity: 0.5; }
    50% { border-radius: 12% 8% 15% 10%; transform: scale(1.05) rotate(1deg); opacity: 0.8; }
    100% { border-radius: 8px; transform: scale(1) rotate(0); opacity: 1; }
}

.detection-crop-warp-demo .detection-warp-target {
    animation: detWarpMorph 0.6s cubic-bezier(0.16,1,0.3,1) both;
}

/* CNN Feature — 层片堆叠 */
@keyframes detFeatureStack {
    0% { opacity: 0; transform: translateY(12px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.detection-feature-grid {
    animation: detFeatureStack 0.5s ease both;
}

.detection-feature-grid:nth-child(1) { animation-delay: 0ms; }
.detection-feature-grid:nth-child(2) { animation-delay: 80ms; }
.detection-feature-grid:nth-child(3) { animation-delay: 160ms; }
.detection-feature-grid:nth-child(4) { animation-delay: 240ms; }

/* 双支路分叉 — 流动线 */
@keyframes detBranchFlow {
    0% { stroke-dashoffset: 30; opacity: 0; }
    20% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0.6; }
}

.det-branch-line {
    fill: none;
    stroke-width: 2.5;
    stroke-dasharray: 5 3;
    animation: detBranchFlow 0.8s ease both, detFlowDash 1s linear infinite 0.8s;
}

.det-branch-line--cls { stroke: #7c3aed; filter: drop-shadow(0 0 3px rgba(124,58,237,0.4)); }
.det-branch-line--reg { stroke: #f59e0b; filter: drop-shadow(0 0 3px rgba(245,158,11,0.4)); }

/* Refined box — 形变动画 */
@keyframes detBoxMorph {
    0% { border-color: #a78bfa; transform: scale(1.02); }
    50% { border-color: #7c3aed; transform: scale(0.98); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); }
    100% { border-color: #6d28d9; transform: scale(1); box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}

.detection-demo-box--refined {
    animation: detBoxMorph 0.6s cubic-bezier(0.16,1,0.3,1) both;
}

/* 生命周期条 — 流动粒子 */
@keyframes detLifecycleParticle {
    0% { left: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

.detection-lifecycle-particle {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7c3aed;
    box-shadow: 0 0 6px #7c3aed, 0 0 12px rgba(124,58,237,0.3);
    transform: translateY(-50%);
    animation: detLifecycleParticle 2.5s linear infinite;
    pointer-events: none;
}

/* 演化轴 — 渐进高亮 */
@keyframes detEvolutionGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
    50% { box-shadow: 0 0 0 4px rgba(124,58,237,0.1); }
}

.detection-rcnn-evolution-item.is-active {
    animation: detEvolutionGlow 2s ease-in-out infinite;
}

/* ============================================================
   VISUAL POLISH
   ============================================================ */

/* 主舞台突出 */
.detection-stage-panel {
    position: relative;
    box-shadow: 0 8px 32px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04);
    border-radius: 16px;
}

.detection-stage-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14,165,233,0.03), transparent 50%);
    pointer-events: none;
}

[data-det-mode-view="rcnn"] .detection-stage-panel::before {
    background: linear-gradient(135deg, rgba(124,58,237,0.03), transparent 50%);
}

/* 卡片柔和描边 + 阴影 + 内发光 */
.det-pair-card,
.det-runtime-stats,
.det-class-stats,
.detection-compare-card,
.detection-info-card {
    border: 1px solid rgba(148,163,184,0.18) !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* Stepper 流动线 */
.vision-stepper {
    position: relative;
}

.vision-stepper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,0.15), rgba(14,165,233,0.3), rgba(14,165,233,0.15), transparent);
    transform: translateY(-50%);
    pointer-events: none;
}

[data-det-mode-view="rcnn"] .vision-stepper::before {
    background: linear-gradient(90deg, transparent, rgba(124,58,237,0.15), rgba(124,58,237,0.3), rgba(124,58,237,0.15), transparent);
}

.vision-stepper li {
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}

.vision-stepper li.is-active {
    transform: translateY(-2px);
}

.vision-stepper li.is-active::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid var(--det-accent, #0ea5e9);
    opacity: 0;
    animation: detRingPulse 1.5s ease-out infinite;
    pointer-events: none;
}

[data-det-mode-view="rcnn"] .vision-stepper li.is-active::after {
    border-color: #7c3aed;
}

/* 表格弱化 — 只高亮 active rows */
.det-candidate-table tbody tr {
    opacity: 0.5;
    transition: opacity 0.3s, background 0.3s;
}

.det-candidate-table tbody tr.is-active,
.det-candidate-table tbody tr.is-kept {
    opacity: 1;
}

.det-candidate-table tbody tr.is-suppressed {
    opacity: 0.3;
}

/* 右侧说明卡联动高亮 */
.det-notes-tutorial {
    transition: border-color 0.4s, box-shadow 0.4s;
}

.det-notes-tutorial.is-active {
    border-color: var(--det-accent, #0ea5e9) !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,0.08), 0 4px 16px rgba(14,165,233,0.06) !important;
}

[data-det-mode-view="rcnn"] .det-notes-tutorial.is-active {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08), 0 4px 16px rgba(124,58,237,0.06) !important;
}

/* R-CNN lifecycle grid 卡片脉冲 */
.detection-lifecycle-grid > * {
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}

.detection-lifecycle-grid > .is-current {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(124,58,237,0.15);
}

/* R-CNN demo flow 卡片脉冲 */
.detection-demo-flow > * {
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}

.detection-demo-flow > .is-current {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(124,58,237,0.15);
}

/* Detection teaching polish: keep the existing workbench, reduce visual noise. */
.detection-table-wrap {
    min-height: 96px;
    max-height: 232px;
    padding-bottom: 12px;
}

.det-table-header {
    gap: 6px;
}

.det-candidate-table th,
.det-candidate-table td,
.detection-table-wrap th,
.detection-table-wrap td {
    padding: 4px 6px;
}

.det-runtime-stats.detection-stat-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 12px;
}

[data-detection-lab][data-det-mode-view="rcnn"] .detection-real-stage {
    max-width: min(calc(100% - 34px), calc(min(26vh, 196px) * var(--det-aspect-raw-x, 1)));
    max-height: min(26vh, 196px);
}

[data-detection-lab][data-det-mode-view="rcnn"] .detection-demo-flow {
    order: 2;
}

[data-detection-lab][data-det-mode-view="rcnn"] .detection-proposal-lifecycle {
    order: 1;
}

[data-detection-lab][data-det-mode-view="rcnn"] .detection-rcnn-evolution {
    order: 3;
}

[data-detection-lab][data-det-mode-view="rcnn"] .detection-demo-flow article {
    min-height: 48px;
    padding: 6px 7px;
}

[data-detection-lab][data-det-mode-view="rcnn"] .detection-demo-flow strong {
    margin-bottom: 2px;
    font-size: 11px;
}

[data-detection-lab][data-det-mode-view="rcnn"] .detection-demo-flow span,
[data-detection-lab][data-det-mode-view="rcnn"] .detection-demo-flow em {
    font-size: 9px;
    line-height: 1.25;
}

.det-pair-card {
    border-color: #fdba74;
    padding: 8px;
    background: linear-gradient(180deg, #fff7ed, #ffffff 72%);
}

.det-pair-card-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(210px, 1.05fr);
    gap: 7px;
}

.det-pair-card-grid article,
.det-pair-card-grid dl {
    padding: 6px;
}

.det-pair-card-grid dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.det-pair-card-grid dd {
    font-weight: 950;
}

[data-detection-lab][data-det-mode-view="rcnn"] .detection-rcnn-stage {
    gap: 10px;
    padding: 10px;
}

.detection-rcnn-evolution {
    gap: 10px;
}

.detection-rcnn-evolution article {
    min-height: 58px;
    padding: 8px 10px 8px 34px;
    box-shadow: none;
}

.detection-rcnn-evolution article::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 17px;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 0 2px #ddd6fe;
}

.detection-rcnn-evolution article.is-active::before {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 0 0 2px #c4b5fd, 0 0 14px rgba(124, 58, 237, 0.24);
}

.detection-rcnn-evolution span {
    border: 0;
    padding: 0;
    background: transparent;
}

.detection-demo-flow {
    grid-template-columns: repeat(6, minmax(86px, 1fr));
    gap: 7px;
}

.detection-demo-flow article {
    min-height: 62px;
    padding: 8px;
}

.detection-proposal-lifecycle {
    position: relative;
    overflow: hidden;
    padding: 10px;
}

.detection-proposal-lifecycle::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 2px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.16), #7c3aed);
}

.detection-proposal-lifecycle header {
    grid-template-columns: auto minmax(0, 1fr);
}

.detection-proposal-lifecycle header em {
    grid-column: 1 / -1;
    white-space: normal;
}

.detection-lifecycle-grid {
    position: relative;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 7px;
}

.detection-lifecycle-grid::before {
    content: "";
    position: absolute;
    right: 18px;
    left: 18px;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.16), rgba(124, 58, 237, 0.52), rgba(79, 70, 229, 0.18));
    transform: translateY(-50%);
}

.detection-lifecycle-grid article {
    z-index: 1;
    min-height: 112px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.96);
}

.detection-lifecycle-grid article::after {
    right: -10px;
    width: 14px;
    height: 14px;
    font-size: 9px;
}

.det-life-no {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid #ddd6fe;
    border-radius: 50%;
    color: #6d28d9;
    font-size: 9px;
    font-weight: 950;
    background: #ffffff;
}

.detection-lifecycle-grid article > span {
    padding-right: 20px;
}

.detection-regression-track {
    min-height: 42px;
}

.detection-refined-preview {
    position: relative;
    min-height: 42px;
    border: 1px dashed #ddd6fe;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.78);
}

.detection-refined-preview i,
.detection-refined-preview b {
    position: absolute;
    top: 12px;
    width: 38%;
    height: 20px;
    border-radius: 4px;
}

.detection-refined-preview i {
    left: 10%;
    border: 2px dashed #94a3b8;
}

.detection-refined-preview b {
    left: 52%;
    border: 2px solid #16a34a;
    background: rgba(34, 197, 94, 0.08);
    animation: detBoxRefine 0.72s ease both;
}

.det-notes-timeline {
    max-height: none;
    padding: 8px 10px;
}

.det-notes-timeline-item {
    padding: 2px 0;
}

@media (max-width: 1180px) {
    .det-runtime-stats.detection-stat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detection-demo-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .det-pair-card-grid,
    .detection-demo-flow {
        grid-template-columns: 1fr;
    }

    .detection-lifecycle-grid::before,
    .detection-proposal-lifecycle::before {
        display: none;
    }
}

/* Spotlight interaction */
[data-detection-lab].is-spotlight-active [data-det-related-id].is-dimmed,
[data-detection-lab].is-spotlight-active [data-det-hover-id].is-dimmed {
    opacity: 0.14;
}

[data-detection-lab].is-spotlight-active .det-candidate-table tr.is-dimmed {
    opacity: 0.24;
}

.vision-bbox.is-spotlight,
.detection-demo-box.is-spotlight {
    z-index: 18;
    opacity: 1 !important;
    filter: saturate(1.08);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.82),
        0 0 0 5px rgba(59, 130, 246, 0.18),
        0 0 26px rgba(59, 130, 246, 0.38);
    animation: detSpotlightGlow 1.35s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.det-candidate-table tr.is-spotlight td {
    background: rgba(239, 246, 255, 0.94);
    box-shadow: inset 3px 0 0 #3b82f6;
}

.detection-demo-flow.is-spotlight,
.detection-proposal-lifecycle.is-spotlight,
.det-bbox-reg-panel.is-spotlight {
    border-color: rgba(124, 58, 237, 0.38);
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.12);
}

.detection-demo-flow.is-spotlight article::before,
.detection-proposal-lifecycle.is-spotlight .detection-lifecycle-grid::before {
    animation: detPhotonFlow 1.1s linear infinite;
}

@keyframes detSpotlightGlow {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.82), 0 0 0 5px rgba(59,130,246,0.16), 0 0 18px rgba(59,130,246,0.28); }
    50% { box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 8px rgba(59,130,246,0.22), 0 0 32px rgba(59,130,246,0.42); }
}

@keyframes detPhotonFlow {
    from { background-position: 0 0; }
    to { background-position: 42px 0; }
}

/* BBox regression deduction panel */
.det-bbox-reg-panel {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(226, 232, 240, 0.76);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(10px);
}

.det-bbox-reg-panel header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
}

.det-bbox-reg-panel header span {
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 999px;
    padding: 3px 8px;
    color: #2563eb;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
    background: rgba(239, 246, 255, 0.78);
}

.det-bbox-reg-panel header strong {
    color: #0f172a;
    font-size: 12px;
}

.det-bbox-reg-panel header em {
    color: #64748b;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.det-reg-canvas {
    position: relative;
    min-height: 76px;
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, 0.72);
    border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px),
        rgba(248, 250, 252, 0.92);
    background-size: 18px 18px;
}

.det-reg-box {
    position: absolute;
    border-radius: 5px;
}

.det-reg-box--original {
    left: 13%;
    top: 18%;
    width: 30%;
    height: 60%;
    border: 2px dashed #94a3b8;
    background: rgba(255, 255, 255, 0.38);
}

.det-reg-box--target {
    left: 55%;
    top: 22%;
    width: 25%;
    height: 54%;
    border: 2px solid #22c55e;
    background: rgba(34, 197, 94, 0.08);
}

.det-reg-box--moving {
    left: 13%;
    top: 18%;
    width: 30%;
    height: 60%;
    border: 2px solid #2563eb;
    background: rgba(59, 130, 246, 0.12);
    box-shadow: 0 0 22px rgba(59, 130, 246, 0.22);
}

.det-bbox-reg-panel.is-running .det-reg-box--moving {
    animation: detRegBoxMove 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.det-reg-formulas {
    display: grid;
    gap: 6px;
}

.det-reg-formula-row {
    display: grid;
    grid-template-columns: 24px minmax(120px, 0.8fr) minmax(130px, 1fr) 48px;
    gap: 6px;
    align-items: center;
    border: 1px solid rgba(226, 232, 240, 0.78);
    border-radius: 9px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.72);
}

.det-reg-formula-row span {
    color: #2563eb;
    font-weight: 950;
}

.det-reg-formula-row b,
.det-reg-formula-row em {
    min-width: 0;
    overflow: hidden;
    color: #334155;
    font-style: normal;
    text-overflow: ellipsis;
}

.det-reg-formula-row strong {
    color: #2563eb;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    text-align: right;
    animation: detNumberTicker 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.det-bbox-reg-panel dl {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}

.det-bbox-reg-panel dl div {
    border: 1px solid rgba(226, 232, 240, 0.78);
    border-radius: 9px;
    padding: 6px;
    background: rgba(248, 250, 252, 0.82);
}

.det-bbox-reg-panel dt {
    color: #64748b;
    font-size: 9px;
    font-weight: 900;
}

.det-bbox-reg-panel dd {
    margin: 2px 0 0;
    color: #1d4ed8;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    font-weight: 950;
}

@keyframes detRegBoxMove {
    0% { left: 13%; top: 18%; width: 30%; height: 60%; opacity: 0.82; }
    65% { left: 55%; top: 22%; width: 25%; height: 54%; opacity: 1; }
    100% { left: 55%; top: 22%; width: 25%; height: 54%; opacity: 1; }
}

@keyframes detNumberTicker {
    from { transform: translateY(4px); opacity: 0.35; }
    to { transform: translateY(0); opacity: 1; }
}

/* YOLO NMS slow-motion controls */
.det-nms-control {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(191, 219, 254, 0.72);
    border-radius: 12px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
    backdrop-filter: blur(10px);
}

.det-nms-control-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.det-nms-control-head span {
    color: #2563eb;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.det-nms-control-head strong {
    color: #334155;
    font-size: 11px;
}

.det-nms-control-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.det-nms-control-actions button {
    border: 1px solid rgba(191, 219, 254, 0.86);
    border-radius: 9px;
    padding: 6px 7px;
    color: #1e3a8a;
    background: rgba(248, 250, 252, 0.94);
    cursor: pointer;
}

.det-nms-control-actions button.is-active {
    border-color: #60a5fa;
    color: #1d4ed8;
    background: rgba(239, 246, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12);
}

.det-nms-control-actions b,
.det-nms-control-actions small {
    display: block;
}

.det-nms-control-actions b {
    font-size: 10px;
}

.det-nms-control-actions small {
    margin-top: 2px;
    color: #64748b;
    font-size: 8.5px;
}

.det-nms-slow-layer,
.det-nms-link {
    position: absolute;
    inset: 0;
    z-index: 16;
    pointer-events: none;
}

.det-nms-radar {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.52);
    transform: translate(-50%, -50%);
}

.det-nms-radar::before,
.det-nms-radar::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(59, 130, 246, 0.38);
    border-radius: inherit;
    animation: detNmsRadar 1.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.det-nms-radar::after {
    animation-delay: 0.42s;
}

.det-nms-link line {
    stroke: #2563eb;
    stroke-width: 2.2;
    stroke-dasharray: 8 6;
    animation: detNmsLink 0.9s linear infinite;
}

.det-nms-link marker path {
    fill: #2563eb;
}

.det-nms-iou-tooltip,
.det-nms-sort-badge {
    position: absolute;
    z-index: 19;
    display: grid;
    gap: 3px;
    border: 1px solid rgba(191, 219, 254, 0.8);
    border-radius: 10px;
    padding: 7px 9px;
    color: #334155;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.13);
    backdrop-filter: blur(10px);
    transform: translate(-50%, -50%);
}

.det-nms-iou-tooltip b {
    color: #0f172a;
    font-size: 10px;
}

.det-nms-iou-tooltip strong {
    color: #2563eb;
    font-size: 12px;
}

.det-nms-iou-tooltip span,
.det-nms-sort-badge em {
    color: #64748b;
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
}

.det-nms-sort-badge {
    right: 12px;
    bottom: 12px;
    transform: none;
}

.det-nms-sort-badge span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #2563eb;
}

.det-nms-particles {
    position: absolute;
    z-index: 20;
    width: 1px;
    height: 1px;
    transform: translate(-50%, -50%);
}

.det-nms-particles i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ef4444;
    transform: rotate(calc(var(--i) * 36deg)) translateX(0);
    animation: detNmsParticle 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes detNmsRadar {
    from { transform: scale(0.5); opacity: 0.62; }
    to { transform: scale(7.2); opacity: 0; }
}

@keyframes detNmsLink {
    from { stroke-dashoffset: 28; }
    to { stroke-dashoffset: 0; }
}

@keyframes detNmsParticle {
    from { opacity: 0.9; transform: rotate(calc(var(--i) * 36deg)) translateX(0) scale(1); }
    to { opacity: 0; transform: rotate(calc(var(--i) * 36deg)) translateX(32px) scale(0.45); }
}

/* Algorithm motion overlay: light, non-blocking teaching layer */
.det-algo-motion {
    position: absolute;
    inset: 0;
    z-index: 14;
    pointer-events: none;
    overflow: hidden;
}

.det-algo-flow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.det-algo-flow-svg path,
.det-algo-flow-svg line {
    fill: none;
    stroke: rgba(14, 165, 233, 0.72);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 8 7;
    animation: detFlowDash 0.9s linear infinite;
    filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.22));
}

.det-algo-flow-svg--rcnn path,
.det-algo-flow-svg--rcnn line,
[data-detection-lab][data-det-submode="rcnn"] .det-algo-flow-svg path,
[data-detection-lab][data-det-submode="rcnn"] .det-algo-flow-svg line {
    stroke: rgba(124, 58, 237, 0.70);
    filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.18));
}

.det-algo-pulse {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pulse-color, #0ea5e9);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse-color, #0ea5e9) 32%, transparent);
    transform: translate(-50%, -50%);
    animation: detAlgoPulse 1.1s ease-out infinite;
    animation-delay: var(--delay, 0ms);
}

.det-algo-pulse::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid color-mix(in srgb, var(--pulse-color, #0ea5e9) 46%, transparent);
    border-radius: 999px;
    animation: detAlgoRing 1.1s ease-out infinite;
    animation-delay: var(--delay, 0ms);
}

.det-algo-pulse.is-low {
    --pulse-color: #94a3b8;
    opacity: 0.56;
}

.det-algo-pulse.is-kept,
.det-algo-pulse.is-final,
.det-algo-pulse.is-rcnn-final {
    --pulse-color: #22c55e;
}

.det-algo-pulse.is-rcnn-active,
.det-algo-pulse.is-rcnn-proposal {
    --pulse-color: #8b5cf6;
}

.det-algo-chip {
    position: absolute;
    left: 50%;
    top: 8%;
    transform: translate(-50%, -50%);
    display: grid;
    gap: 2px;
    max-width: min(260px, 62%);
    border: 1px solid rgba(14, 165, 233, 0.22);
    border-radius: 10px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(10px);
    color: #0f172a;
}

.det-algo-chip b {
    color: var(--det-accent-dark, #0369a1);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.det-algo-chip span {
    color: #475569;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
}

.det-algo-chip--confidence,
.det-algo-chip--final {
    left: 52%;
    top: 9%;
}

.det-algo-chip--source,
.det-algo-chip--corner {
    left: 12px;
    top: 12px;
    transform: none;
    max-width: min(240px, calc(100% - 24px));
}

.det-algo-chip--nms {
    border-color: rgba(245, 158, 11, 0.35);
}

.det-algo-chip--rcnn {
    border-color: rgba(124, 58, 237, 0.24);
}

.det-algo-chip--rcnn b {
    color: #6d28d9;
}

.det-algo-shrink,
.det-algo-spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.det-algo-shrink {
    background: #94a3b8;
    animation: detAlgoShrink 0.78s ease-out both;
    animation-delay: var(--delay, 0ms);
}

.det-algo-spark {
    background: #ef4444;
    animation: detAlgoSpark 0.72s ease-out infinite;
}

.det-algo-spark.is-rcnn {
    background: #8b5cf6;
}

.det-algo-scan {
    position: absolute;
    pointer-events: none;
    opacity: 0.62;
}

.det-algo-scan--x {
    left: 8%;
    right: 8%;
    top: 50%;
    border-top: 1px dashed rgba(14, 165, 233, 0.46);
    animation: detAlgoScanX 1.6s ease-in-out infinite;
}

.det-algo-scan--y {
    top: 8%;
    bottom: 8%;
    left: 50%;
    border-left: 1px dashed rgba(14, 165, 233, 0.38);
    animation: detAlgoScanY 1.8s ease-in-out infinite;
}

.det-algo-scan--tensor {
    left: 18%;
    right: 18%;
    top: 18%;
    height: 42%;
    border: 1px dashed rgba(14, 165, 233, 0.34);
    border-radius: 12px;
    animation: detAlgoTensorScan 1.5s ease-in-out infinite;
}

@keyframes detAlgoPulse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.62); }
    24% { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0.32; transform: translate(-50%, -50%) scale(0.82); }
}

@keyframes detAlgoRing {
    0% { opacity: 0.42; transform: scale(0.35); }
    100% { opacity: 0; transform: scale(1.65); }
}

@keyframes detAlgoShrink {
    0% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
}

@keyframes detAlgoSpark {
    0% { opacity: 0.88; transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg)) translateX(0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg)) translateX(24px) scale(0.35); }
}

@keyframes detAlgoScanX {
    0%, 100% { transform: translateY(-34%); opacity: 0.24; }
    50% { transform: translateY(34%); opacity: 0.7; }
}

@keyframes detAlgoScanY {
    0%, 100% { transform: translateX(-32%); opacity: 0.22; }
    50% { transform: translateX(32%); opacity: 0.58; }
}

@keyframes detAlgoTensorScan {
    0%, 100% { transform: scale(0.96); opacity: 0.24; }
    50% { transform: scale(1.02); opacity: 0.62; }
}

.det-teach-dashboard {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    border-top: 1px dashed rgba(148, 163, 184, 0.38);
    padding-top: 8px;
}

.det-teach-one-line {
    display: grid;
    gap: 4px;
}

.det-teach-one-line span {
    width: fit-content;
    border-radius: 999px;
    padding: 2px 7px;
    background: rgba(14, 165, 233, 0.10);
    color: #0369a1;
    font-size: 10px;
    font-weight: 950;
}

.det-teach-one-line p {
    margin: 0;
    color: #334155;
    font-size: 11px;
    line-height: 1.5;
}

.det-teach-formula {
    border: 0;
    border-radius: 7px;
    padding: 5px 7px;
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.08), rgba(255, 255, 255, 0));
    color: #0f172a;
    font-size: 11px;
    overflow-x: auto;
}

.det-algo-symbol {
    display: grid;
    gap: 3px;
    padding: 2px 0 4px;
}

.det-algo-symbol svg {
    display: block;
    width: 100%;
    height: 54px;
}

.det-algo-symbol p {
    margin: 0;
    color: #64748b;
    font-size: 10px;
    font-weight: 750;
}

.det-algo-symbol p b {
    color: var(--det-accent-dark, #0369a1);
    font-family: Consolas, "Courier New", monospace;
}

.det-algo-symbol svg .det-symbol-flow {
    fill: none;
    stroke: rgba(14, 165, 233, 0.42);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 7 5;
    animation: detFlowDash 1.2s linear infinite;
}

.det-algo-symbol svg g > * {
    fill: #ffffff;
    stroke: #cbd5e1;
    stroke-width: 1.8;
    transition: stroke 0.2s ease, fill 0.2s ease, transform 0.2s ease;
}

.det-algo-symbol svg g text {
    fill: #64748b;
    stroke: none;
    font-size: 12px;
    font-weight: 900;
    text-anchor: middle;
}

.det-algo-symbol svg g.is-done > * {
    stroke: rgba(14, 165, 233, 0.48);
}

.det-algo-symbol svg g.is-active > * {
    fill: rgba(14, 165, 233, 0.10);
    stroke: #0ea5e9;
    filter: drop-shadow(0 0 5px rgba(14, 165, 233, 0.20));
}

.det-algo-symbol svg .det-symbol-cross {
    stroke: #ef4444;
}

.det-algo-symbol--rcnn svg .det-symbol-flow {
    stroke: rgba(124, 58, 237, 0.42);
}

.det-algo-symbol--rcnn svg g.is-done > * {
    stroke: rgba(124, 58, 237, 0.48);
}

.det-algo-symbol--rcnn svg g.is-active > * {
    fill: rgba(124, 58, 237, 0.10);
    stroke: #7c3aed;
    filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.18));
}

.det-algo-symbol--rcnn p b {
    color: #6d28d9;
}

.det-teach-flow {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    padding: 1px 0 2px;
}

.det-teach-flow span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: max-content;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    padding-right: 13px;
}

.det-teach-flow span::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 8px;
    border-top: 1px solid #cbd5e1;
}

.det-teach-flow span:last-child::after {
    display: none;
}

.det-teach-flow b {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 9px;
}

.det-teach-flow em {
    color: inherit;
    font-size: 9px;
    font-style: normal;
    font-weight: 850;
}

.det-teach-flow span.is-active {
    color: #0369a1;
}

.det-teach-flow span.is-done {
    opacity: 0.72;
}

.det-teach-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding-top: 2px;
}

.det-teach-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.det-teach-stats b {
    color: #0f172a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    font-weight: 950;
}

.det-teach-stats em {
    color: #64748b;
    font-size: 8.5px;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.det-teach-dashboard--rcnn .det-teach-one-line span,
.det-teach-dashboard--rcnn .det-teach-flow b {
    background: rgba(124, 58, 237, 0.10);
    color: #6d28d9;
}

.det-teach-dashboard--rcnn .det-teach-formula {
    border-color: rgba(124, 58, 237, 0.18);
}

.det-teach-dashboard--rcnn .det-teach-flow span.is-active {
    color: #6d28d9;
}

.det-teach-boxline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 5px;
    align-items: center;
}

.det-teach-boxline span {
    display: grid;
    gap: 2px;
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.det-teach-boxline b {
    color: #64748b;
    font-size: 9px;
    text-transform: uppercase;
}

.det-teach-boxline code {
    color: #0f172a;
    font-size: 9px;
    overflow-wrap: anywhere;
}

.det-teach-boxline i {
    width: 18px;
    border-top: 1px dashed rgba(124, 58, 237, 0.55);
}

/* R-CNN focused single-step layout */
[data-detection-lab] [data-rcnn-only] {
    display: none !important;
}

[data-detection-lab][data-det-submode="rcnn"] .det-control-group-title[data-rcnn-only] {
    display: flex !important;
}

[data-detection-lab][data-det-submode="rcnn"] .det-side-summary-title[data-rcnn-only] {
    display: flex !important;
}

[data-detection-lab][data-det-submode="rcnn"] .det-course-step[data-rcnn-only] {
    display: grid !important;
}

[data-detection-lab][data-det-submode="rcnn"] .det-course-summary[data-rcnn-only] {
    display: block !important;
}

[data-detection-lab][data-det-submode="rcnn"] .vision-control-panel {
    position: sticky;
    top: 78px;
    align-self: start;
    min-height: min(78vh, 760px);
}

.det-control-group-title {
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed #d8b4fe;
    color: #4c1d95;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

[data-detection-lab] .vision-control-panel {
    gap: 6px !important;
}

[data-detection-lab] .vision-control-panel .vision-field {
    gap: 2px !important;
    margin-bottom: 0 !important;
}

[data-detection-lab] .vision-control-panel .vision-field > span,
[data-detection-lab] .vision-control-panel .vision-toggle-row > span {
    font-size: 12.5px !important;
}

[data-detection-lab] .vision-control-panel .vision-kv-grid {
    gap: 3px !important;
    padding: 6px !important;
}

[data-detection-lab] .vision-control-panel .vision-kv-grid div {
    padding: 4px 7px !important;
    font-size: 11.5px !important;
}

[data-detection-lab] .vision-control-panel .vision-metric-grid {
    gap: 6px !important;
}

[data-detection-lab] .vision-control-panel .vision-metric-grid > div {
    padding: 8px !important;
    gap: 2px !important;
}

[data-detection-lab] .vision-control-panel .vision-metric-grid span {
    font-size: 10px !important;
}

[data-detection-lab] .vision-control-panel .vision-metric-grid strong {
    font-size: 15px !important;
}

[data-detection-lab] .vision-control-panel .det-step-nav button,
[data-detection-lab] .vision-control-panel .det-play-btn {
    font-size: 12.5px !important;
    height: 34px !important;
    padding: 0 !important;
}

[data-detection-lab] .vision-control-panel .vision-hint {
    margin: 3px 0 1px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
}

[data-detection-lab] .vision-control-panel .det-upload-label {
    min-height: 34px !important;
    padding: 4px 8px !important;
    font-size: 12.5px !important;
}

[data-detection-lab] .vision-control-panel .det-course-step {
    gap: 5px !important;
    padding: 9px !important;
}

[data-detection-lab] .vision-control-panel .det-course-step > span {
    font-size: 14px !important;
}

[data-detection-lab] .vision-control-panel .det-course-step p {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

[data-detection-lab] .vision-control-panel .det-course-step dl {
    gap: 3px !important;
}

[data-detection-lab] .vision-control-panel .det-course-step dt {
    font-size: 12px !important;
}

[data-detection-lab] .vision-control-panel .det-course-step dd {
    font-size: 13px !important;
}

[data-detection-lab] .vision-control-panel select {
    min-height: 34px !important;
    font-size: 12px !important;
}

[data-detection-lab] .vision-control-panel .vision-toggle-row {
    margin: 1px 0 !important;
}

[data-detection-lab] .vision-control-panel .det-step-nav {
    margin-top: 2px !important;
}

[data-detection-lab] .vision-control-panel .det-play-btn {
    margin-top: 4px !important;
}

[data-detection-lab] .vision-control-panel .det-control-group-title {
    margin-top: 6px !important;
    padding-top: 8px !important;
}

.det-side-summary-title {
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(167, 139, 250, 0.55);
    color: #4c1d95;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.det-side-summary-title span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 7px;
    color: #ffffff;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.det-control-group-title span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 7px;
    color: #ffffff;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.det-course-step,
.det-course-summary {
    border: 1px solid rgba(196, 181, 253, 0.72);
    border-radius: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.08);
}

.det-course-step {
    gap: 6px;
}

.det-course-step > span {
    color: #5b21b6;
    font-size: 13px;
    font-weight: 950;
}

.det-course-step p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.det-course-step dl,
.det-course-summary dl {
    display: grid;
    gap: 4px;
    margin: 0;
}

.det-course-step dl div,
.det-course-summary dl div {
    display: grid;
    grid-template-columns: minmax(74px, 0.6fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    border: 1px solid #ede9fe;
    border-radius: 8px;
    padding: 3px 6px;
    background: #f8fafc;
}

.det-course-step dt,
.det-course-summary dt {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.det-course-step dd,
.det-course-summary dd {
    min-width: 0;
    margin: 0;
    color: #4c1d95;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
    overflow-wrap: anywhere;
}

.det-course-summary--side {
    margin-top: 8px;
    box-shadow: none;
}

.det-course-summary--side dl {
    gap: 0;
}

.det-course-summary--side dl div {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent;
}

.detection-real-stage[hidden] {
    display: none !important;
}

[data-detection-lab][data-det-submode="rcnn"] .detection-real-stage {
    display: block !important;
    max-width: min(calc(100% - 34px), calc(min(40vh, 340px) * var(--det-aspect-raw-x, 1)));
    max-height: min(40vh, 340px);
}

[data-detection-lab][data-det-submode="rcnn"] .detection-real-stage[data-det-pinned-image="true"][hidden] {
    display: block !important;
}

[data-detection-lab][data-det-submode="rcnn"] .detection-table-wrap {
    max-height: 210px;
    min-height: 108px;
}

[data-detection-lab][data-det-submode="rcnn"] .det-table-header {
    opacity: 0.84;
}

[data-detection-lab][data-det-submode="rcnn"] .det-class-filter,
[data-detection-lab][data-det-submode="rcnn"] .det-table-header .det-section-label:nth-of-type(n + 2) {
    display: none;
}

[data-detection-lab][data-det-submode="rcnn"] .det-academic-cards {
    display: none;
}

.det-rcnn-step-rail {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

.det-rcnn-step-rail button {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    padding: 7px 8px;
    color: #475569;
    background: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.det-rcnn-step-rail button:hover,
.det-rcnn-step-rail button.is-current {
    border-color: #a78bfa;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.12);
    transform: translateY(-1px);
}

.det-rcnn-step-rail button.is-current {
    animation: detRcnnCurrentPulse 1.8s ease-in-out infinite;
}

.det-rcnn-step-rail button.is-done span,
.det-rcnn-step-rail button.is-current span {
    color: #ffffff;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.det-rcnn-step-rail span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #6b7280;
    font-size: 10px;
    font-weight: 950;
    background: #f1f5f9;
}

.det-rcnn-step-rail strong {
    min-width: 0;
    overflow: hidden;
    color: #334155;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.det-rcnn-focus-board {
    display: grid;
    gap: 10px;
    min-height: 280px;
    border: 1px solid rgba(196, 181, 253, 0.72);
    border-radius: 14px;
    padding: 11px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(10px);
}

.det-rcnn-focus-head {
    display: grid;
    gap: 3px;
}

.det-rcnn-focus-head__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.det-rcnn-focus-head span {
    flex-shrink: 0;
    width: max-content;
    border: 1px solid #ddd6fe;
    border-radius: 999px;
    padding: 2px 8px;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #f5f3ff;
}

.det-rcnn-focus-head h4 {
    min-width: 0;
    margin: 0;
    color: #111827;
    font-size: 17px;
    font-weight: 950;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.det-rcnn-focus-head p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.det-rcnn-algo-canvas {
    position: relative;
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid rgba(196, 181, 253, 0.58);
    border-radius: 16px;
    padding: 10px;
    background:
        radial-gradient(circle at var(--active-left, 8%) 18%, rgba(139, 92, 246, 0.16), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 16px 30px rgba(88, 28, 135, 0.06);
    overflow: hidden;
}

.det-rcnn-algo-canvas::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 67px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.16), rgba(124, 58, 237, 0.34), rgba(124, 58, 237, 0.10));
    transform-origin: left center;
    animation: detRcnnExtendRail 1.55s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.det-rcnn-algo-canvas::after {
    content: "";
    position: absolute;
    top: 55px;
    left: var(--active-left, 8%);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.13);
    box-shadow: 0 0 0 9px rgba(124, 58, 237, 0.06);
    transform: translateX(-50%);
    animation: detRcnnActiveBeacon 1.6s ease-in-out infinite;
}

.det-rcnn-algo-flow {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(80px, 1fr));
    gap: 7px;
    min-width: 0;
}

.det-rcnn-algo-flow button {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 8px 6px 7px;
    background: rgba(255, 255, 255, 0.52);
    opacity: 0.58;
    cursor: pointer;
    transform: translateY(0) scale(0.985);
    transition: opacity 0.34s ease, transform 0.34s ease, border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
}

.det-rcnn-algo-flow button::after {
    content: "";
    position: absolute;
    left: calc(100% - 2px);
    top: 43px;
    width: 20px;
    border-top: 2px solid rgba(124, 58, 237, 0.25);
    transform-origin: left center;
    animation: detRcnnExtendShort 1.3s ease-in-out infinite;
}

.det-rcnn-algo-flow button:last-child::after {
    display: none;
}

.det-rcnn-algo-flow button.is-done {
    opacity: 0.78;
}

.det-rcnn-algo-flow button.is-active {
    border-color: rgba(124, 58, 237, 0.44);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.12), 0 0 0 5px rgba(124, 58, 237, 0.045);
    opacity: 1;
    transform: translateY(-2px) scale(1);
}

.det-rcnn-algo-flow button:hover:not(.is-active) {
    opacity: 0.92;
    border-color: rgba(124, 58, 237, 0.28);
    transform: translateY(-1px);
}

.det-rcnn-algo-flow small {
    color: #7c3aed;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.det-rcnn-algo-flow strong {
    color: #1e1b4b;
    font-size: 13px;
    font-weight: 950;
    text-align: center;
}

.det-rcnn-algo-flow p {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
}

.det-rcnn-glyph {
    position: relative;
    width: 52px;
    height: 42px;
    color: #7c3aed;
}

.det-rcnn-glyph i,
.det-rcnn-glyph b,
.det-rcnn-glyph span {
    position: absolute;
    display: block;
}

.det-rcnn-glyph--image .is-frame {
    left: 6px;
    top: 4px;
    width: 40px;
    height: 32px;
    border: 2px solid rgba(124, 58, 237, 0.68);
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(245, 243, 255, 0.9), rgba(221, 214, 254, 0.4));
}

.det-rcnn-glyph--image .is-scan {
    left: 10px;
    top: 10px;
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.8), rgba(139, 92, 246, 0.2));
    animation: detRcnnImageScan 1.8s ease-in-out infinite;
}

@keyframes detRcnnImageScan {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(16px); opacity: 1; }
}

.det-rcnn-glyph--decompose i {
    width: 15px;
    height: 12px;
    border: 1.5px solid rgba(124, 58, 237, 0.62);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.88);
    animation: detRcnnDecompose 1.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 70ms);
}

.det-rcnn-glyph--decompose i:nth-child(1) { left: 5px; top: 8px; --dx: -8px; --dy: -5px; --i: 0; }
.det-rcnn-glyph--decompose i:nth-child(2) { left: 19px; top: 5px; --dx: 0; --dy: -8px; --i: 1; }
.det-rcnn-glyph--decompose i:nth-child(3) { left: 31px; top: 12px; --dx: 8px; --dy: -2px; --i: 2; }
.det-rcnn-glyph--decompose i:nth-child(4) { left: 12px; top: 24px; --dx: -5px; --dy: 7px; --i: 3; }
.det-rcnn-glyph--decompose i:nth-child(5) { left: 29px; top: 27px; --dx: 7px; --dy: 6px; --i: 4; }

.det-rcnn-glyph--decompose b {
    left: 50%;
    top: 50%;
    border-radius: 999px;
    padding: 1px 5px;
    background: #7c3aed;
    color: #fff;
    font-size: 8px;
    transform: translate(-50%, -50%);
    animation: detRcnnPulseText 1.45s ease-in-out infinite;
}

.det-rcnn-glyph--crop .is-image,
.det-rcnn-glyph--crop .is-cut,
.det-rcnn-glyph--crop .is-patch {
    border-radius: 5px;
}

.det-rcnn-glyph--crop .is-image {
    left: 2px;
    top: 8px;
    width: 31px;
    height: 25px;
    border: 1px solid rgba(124, 58, 237, 0.28);
    background: linear-gradient(135deg, rgba(221, 214, 254, 0.7), rgba(255, 255, 255, 0.9));
}

.det-rcnn-glyph--crop .is-cut {
    left: 12px;
    top: 14px;
    width: 12px;
    height: 10px;
    border: 1.5px dashed #7c3aed;
    animation: detRcnnCutPulse 1.45s ease-in-out infinite;
}

.det-rcnn-glyph--crop .is-patch {
    left: 32px;
    top: 12px;
    width: 17px;
    height: 17px;
    border: 1.5px solid #8b5cf6;
    background: rgba(255, 255, 255, 0.9);
    animation: detRcnnPatchExtract 1.55s ease-in-out infinite;
}

.det-rcnn-glyph--feature {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    align-content: center;
    padding: 5px;
}

.det-rcnn-glyph--feature i {
    position: static;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(124, 58, 237, calc(0.18 + var(--v) * 0.52));
    animation: detRcnnFeaturePop 1.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 34ms);
}

.det-rcnn-glyph--classifier {
    display: grid;
    align-content: end;
    gap: 4px;
    padding: 4px 2px 2px;
}

.det-rcnn-glyph--classifier i {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: rgba(196, 181, 253, 0.5);
    overflow: hidden;
}

.det-rcnn-glyph--classifier i::before {
    content: "";
    display: block;
    width: calc(var(--score) * 100%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a78bfa, #7c3aed);
    animation: detRcnnScoreGrow 1.35s ease-in-out infinite;
}

.det-rcnn-glyph--classifier i.is-winner::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 1px solid rgba(124, 58, 237, 0.65);
    animation: detRcnnCollisionFlash 1.1s ease-in-out infinite;
}

.det-rcnn-glyph--regression .is-original,
.det-rcnn-glyph--regression .is-refined {
    border-radius: 5px;
}

.det-rcnn-glyph--regression .is-original {
    left: 7px;
    top: 12px;
    width: 25px;
    height: 18px;
    border: 1.5px dashed #a78bfa;
}

.det-rcnn-glyph--regression .is-refined {
    left: 20px;
    top: 9px;
    width: 25px;
    height: 18px;
    border: 1.5px solid #7c3aed;
    background: rgba(255, 255, 255, 0.68);
    animation: detRcnnRegressMove 1.5s ease-in-out infinite;
}

.det-rcnn-glyph--regression b {
    left: 15px;
    bottom: 0;
    color: #6d28d9;
    font-size: 8px;
}

.det-rcnn-glyph--nms .is-a,
.det-rcnn-glyph--nms .is-b,
.det-rcnn-glyph--nms .is-final {
    border-radius: 5px;
}

.det-rcnn-glyph--nms .is-a {
    left: 7px;
    top: 11px;
    width: 24px;
    height: 19px;
    border: 1.5px solid #22c55e;
}

.det-rcnn-glyph--nms .is-b {
    left: 20px;
    top: 14px;
    width: 23px;
    height: 18px;
    border: 1.5px dashed #ef4444;
    animation: detRcnnSuppressFade 1.5s ease-in-out infinite;
}

.det-rcnn-glyph--nms .is-final {
    left: 16px;
    top: 9px;
    width: 26px;
    height: 22px;
    border: 1.5px solid #22c55e;
    background: rgba(34, 197, 94, 0.08);
    animation: detRcnnMergeFinal 1.5s ease-in-out infinite;
}

.det-rcnn-proposal-stream {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border-top: 1px dashed rgba(167, 139, 250, 0.5);
    padding-top: 9px;
}

.det-rcnn-proposal-stream > strong {
    color: #6d28d9;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.det-rcnn-proposal-stream > div {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow-x: auto;
}

.det-rcnn-proposal-stream span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: max-content;
    border: 1px solid rgba(196, 181, 253, 0.68);
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.76);
    color: #475569;
    box-shadow: 0 6px 14px rgba(88, 28, 135, 0.05);
    opacity: 0;
    transform: translateY(7px) scale(0.96);
    animation: detRcnnStreamIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--i) * 85ms);
}

.det-rcnn-proposal-stream span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #8b5cf6;
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.26);
    animation: detRcnnTinyPulse 1.25s ease-out infinite;
}

.det-rcnn-proposal-stream span.is-active {
    border-color: #8b5cf6;
    color: #4c1d95;
    background: rgba(245, 243, 255, 0.96);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.14);
}

.det-rcnn-proposal-stream span.is-low {
    opacity: 0.45;
}

.det-rcnn-proposal-stream b,
.det-rcnn-proposal-stream code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    font-weight: 950;
}

.det-rcnn-proposal-stream em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.det-rcnn-focus-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.74fr) minmax(0, 1.26fr);
    gap: 12px;
    align-items: stretch;
}

.det-rcnn-focus-grid--compact {
    grid-template-columns: minmax(0, 1fr);
}

@keyframes detRcnnExtendRail {
    0% { transform: scaleX(0.16); opacity: 0.22; }
    48% { transform: scaleX(1); opacity: 0.72; }
    100% { transform: scaleX(1); opacity: 0.30; }
}

@keyframes detRcnnExtendShort {
    0% { transform: scaleX(0.12); opacity: 0.18; }
    55% { transform: scaleX(1); opacity: 0.68; }
    100% { transform: scaleX(1); opacity: 0.25; }
}

@keyframes detRcnnActiveBeacon {
    0%, 100% { opacity: 0.42; transform: translateX(-50%) scale(0.86); }
    50% { opacity: 0.86; transform: translateX(-50%) scale(1.12); }
}

@keyframes detRcnnDecompose {
    0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.58; }
    52% { transform: translate(var(--dx), var(--dy)) scale(1.03); opacity: 1; }
}

@keyframes detRcnnPulseText {
    0%, 100% { opacity: 0.86; transform: translate(-50%, -50%) scale(0.92); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes detRcnnCutPulse {
    0%, 100% { opacity: 0.36; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes detRcnnPatchExtract {
    0%, 100% { transform: translateX(-8px) scale(0.78); opacity: 0.48; }
    52% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes detRcnnFeaturePop {
    0%, 100% { transform: scale(0.72); opacity: 0.42; }
    48% { transform: scale(1.12); opacity: 1; }
}

@keyframes detRcnnScoreGrow {
    0% { transform: translateX(-82%); opacity: 0.58; }
    45%, 100% { transform: translateX(0); opacity: 1; }
}

@keyframes detRcnnCollisionFlash {
    0%, 100% { opacity: 0; transform: scaleX(0.92); }
    42% { opacity: 0.9; transform: scaleX(1.04); }
}

@keyframes detRcnnRegressMove {
    0%, 100% { transform: translate(-10px, 4px) scale(0.88); opacity: 0.52; }
    52% { transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes detRcnnSuppressFade {
    0%, 44% { opacity: 0.72; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.72) translate(8px, 2px); }
}

@keyframes detRcnnMergeFinal {
    0%, 100% { opacity: 0.42; transform: scale(0.9); }
    52% { opacity: 1; transform: scale(1.05); }
}

@keyframes detRcnnStreamIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes detRcnnTinyPulse {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.28); }
    100% { box-shadow: 0 0 0 7px rgba(139, 92, 246, 0); }
}

.det-rcnn-focus-copy {
    display: grid;
    gap: 8px;
    align-content: start;
    border-left: 3px solid rgba(124, 58, 237, 0.35);
    border-radius: 0;
    padding: 2px 0 2px 12px;
    background: transparent;
}

.det-rcnn-focus-copy span,
.det-rcnn-feature-focus section > span {
    color: #6d28d9;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.det-rcnn-focus-copy strong {
    color: #312e81;
    font-size: 17px;
    font-weight: 950;
}

.det-rcnn-focus-copy p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.det-rcnn-focus-copy dl,
.det-rcnn-nms-focus dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.det-rcnn-focus-copy dl div,
.det-rcnn-nms-focus dl div {
    display: grid;
    grid-template-columns: minmax(86px, 0.6fr) minmax(0, 1fr);
    gap: 8px;
    border-radius: 0;
    border-bottom: 1px solid #e9d5ff;
    padding: 3px 0;
    background: transparent;
}

.det-rcnn-focus-copy dl div:last-child,
.det-rcnn-nms-focus dl div:last-child {
    border-bottom: 0;
}

.det-rcnn-focus-copy dt,
.det-rcnn-nms-focus dt {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.det-rcnn-focus-copy dd,
.det-rcnn-nms-focus dd {
    min-width: 0;
    margin: 0;
    color: #4c1d95;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
    overflow-wrap: anywhere;
}

.det-rcnn-proposal-cards {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    padding: 4px 0;
}

.det-rcnn-proposal-cards article {
    display: grid;
    gap: 4px;
    min-width: 112px;
    border: 0;
    border-left: 2px solid #ddd6fe;
    border-radius: 0;
    padding: 4px 10px;
    background: transparent;
    opacity: 0;
    transform-origin: center;
    animation: detRcnnProposalGrow 0.42s ease forwards;
    animation-delay: var(--proposal-delay, 0ms);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.det-rcnn-proposal-cards article.is-active {
    border-left-color: #8b5cf6;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.08), rgba(255, 255, 255, 0));
    box-shadow: none;
}

.det-rcnn-proposal-cards article.is-low {
    opacity: 0.46;
}

.det-rcnn-proposal-cards span,
.det-rcnn-refined-list span {
    color: #7c3aed;
    font-size: 12px;
    font-weight: 950;
}

.det-rcnn-proposal-cards strong,
.det-rcnn-refined-list strong {
    color: #334155;
    font-size: 12px;
    font-weight: 950;
}

.det-rcnn-proposal-cards em,
.det-rcnn-refined-list em {
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.det-rcnn-proposal-cards code,
.det-rcnn-refined-list code,
.det-rcnn-patch code {
    color: #64748b;
    font-family: Consolas, "Courier New", monospace;
    font-size: 9px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.det-rcnn-crop-flow,
.det-rcnn-feature-focus,
.det-rcnn-classifier-focus,
.det-rcnn-regression-focus,
.det-rcnn-nms-focus {
    display: grid;
    gap: 12px;
    align-items: stretch;
}

.det-rcnn-crop-flow {
    grid-template-columns: minmax(150px, 1fr) 42px minmax(150px, 1fr) 42px minmax(150px, 1fr);
}

.det-rcnn-patch {
    display: grid;
    gap: 8px;
    min-height: 180px;
    border: 1px solid #e9d5ff;
    border-radius: 13px;
    padding: 10px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.det-rcnn-patch span {
    color: #6d28d9;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.det-rcnn-patch-image {
    min-height: 112px;
    border: 2px solid #a78bfa;
    border-radius: 10px;
    background-image: var(--patch-url);
    background-position: center;
    background-size: cover;
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.12);
}

.det-rcnn-patch.is-crop .det-rcnn-patch-image {
    animation: detRcnnCropPull 0.62s ease both;
}

.det-rcnn-patch.is-warp .det-rcnn-patch-image {
    aspect-ratio: 1 / 1;
    min-height: 128px;
    animation: detWarpMorph 0.62s ease both;
}

.det-rcnn-flow-arrow {
    display: grid;
    place-items: center;
}

.det-rcnn-flow-arrow span {
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c4b5fd, #8b5cf6, #6366f1);
    animation: detPhotonFlow 0.9s linear infinite;
}

.det-rcnn-feature-focus {
    grid-template-columns: minmax(150px, 0.8fr) minmax(82px, 0.45fr) minmax(220px, 1fr) minmax(120px, 0.55fr);
}

.det-rcnn-cnn-stack {
    display: grid;
    gap: 8px;
}

.det-rcnn-cnn-stack i {
    display: grid;
    place-items: center;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    min-height: 34px;
    color: #5b21b6;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    background: #f8fafc;
    animation: detFeatureStack 0.42s ease both;
}

.det-rcnn-feature-focus section {
    display: grid;
    gap: 8px;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    padding: 10px;
    background: #ffffff;
}

.det-rcnn-feature-vector {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5px;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    padding: 12px 10px;
    background: #ffffff;
}

.det-rcnn-feature-vector i {
    width: 9px;
    height: 110px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #8b5cf6, #c4b5fd);
    transform: scaleY(0);
    transform-origin: bottom;
    animation: detVectorRise 0.55s ease both;
    animation-delay: var(--delay, 0ms);
}

.det-rcnn-classifier-focus {
    grid-template-columns: minmax(180px, 0.6fr) minmax(260px, 1fr);
}

.det-rcnn-classifier-focus article,
.det-rcnn-classifier-focus section {
    display: grid;
    gap: 10px;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    padding: 14px;
    background: #ffffff;
}

.det-rcnn-classifier-focus article span {
    color: #6d28d9;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.det-rcnn-classifier-focus article strong {
    color: #312e81;
    font-size: 24px;
    font-weight: 950;
}

.det-rcnn-classifier-focus article p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.detection-classifier-bars div.is-top span,
.detection-classifier-bars div.is-top strong {
    color: #4c1d95;
    font-weight: 950;
}

.detection-classifier-bars div.is-top b {
    background: #ddd6fe;
}

.det-rcnn-verdict {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid #c4b5fd;
    border-radius: 10px;
    padding: 10px;
    background: #f5f3ff;
}

.det-rcnn-verdict span {
    color: #64748b;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.det-rcnn-verdict strong {
    color: #312e81;
    font-size: 18px;
    font-weight: 950;
}

.det-rcnn-verdict em {
    color: #5b21b6;
    font-style: normal;
    font-weight: 950;
}

.det-rcnn-regression-focus {
    grid-template-columns: minmax(0, 1fr);
}

.det-rcnn-regression-focus .det-bbox-reg-panel {
    max-width: none;
}

.det-rcnn-regression-focus .detection-regression-offsets {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.det-rcnn-nms-focus {
    grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1fr);
}

.det-rcnn-nms-focus section {
    display: grid;
    gap: 10px;
    align-content: start;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    padding: 12px;
    background: #ffffff;
}

.det-rcnn-nms-focus section > span {
    color: #6d28d9;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.det-rcnn-nms-focus section > strong {
    color: #312e81;
    font-size: 18px;
    font-weight: 950;
}

.det-rcnn-refined-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.det-rcnn-refined-list article {
    display: grid;
    gap: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    padding: 10px;
    background: #ffffff;
    transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.det-rcnn-refined-list article.is-active {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.det-rcnn-refined-list article.is-suppressed {
    border-color: #fecaca;
    opacity: 0.38;
    transform: scale(0.96);
}

.det-rcnn-refined-list article.is-suppressed em {
    color: #b91c1c;
    text-decoration: line-through;
}

.detection-demo-box.is-rcnn-muted {
    opacity: 0.28;
}

[data-detection-lab][data-det-submode="rcnn"] .detection-demo-box--proposal {
    animation: detRcnnProposalGrow 0.42s ease both;
    animation-delay: var(--proposal-delay, 0ms);
}

@keyframes detRcnnCurrentPulse {
    0%, 100% { box-shadow: 0 10px 22px rgba(124, 58, 237, 0.10); }
    50% { box-shadow: 0 10px 26px rgba(124, 58, 237, 0.18), 0 0 0 3px rgba(167, 139, 250, 0.14); }
}

@keyframes detRcnnProposalGrow {
    0% { opacity: 0; transform: scale(0.88); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes detRcnnCropPull {
    0% { opacity: 0.55; transform: translateX(-18px) scale(0.92); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes detVectorRise {
    from { opacity: 0.45; transform: scaleY(0.08); }
    to { opacity: 1; transform: scaleY(var(--v)); }
}

@media (max-width: 1180px) {
    [data-detection-lab][data-det-mode-view="yolo"] .det-yolo-dual-stage {
        grid-template-columns: 1fr;
    }

    [data-detection-lab][data-det-mode-view="yolo"] .det-yolo-dual-stage .detection-real-stage {
        max-height: min(48vh, 420px);
    }

    .det-yolo-feature-panel {
        min-height: 240px;
    }

    .det-yolo-head-split,
    .det-yolo-model-flow {
        grid-template-columns: 1fr;
    }

    .det-yolo-head-split > i,
    .det-yolo-model-flow i {
        width: 2px;
        height: 18px;
        justify-self: center;
        transform-origin: top;
    }

    .det-yolo-nms-compact {
        grid-template-columns: 1fr;
    }

    .det-rcnn-step-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .det-rcnn-algo-flow {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    .det-rcnn-algo-canvas::before,
    .det-rcnn-algo-canvas::after,
    .det-rcnn-algo-flow article::after {
        display: none;
    }

    .det-rcnn-proposal-cards,
    .det-rcnn-refined-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .det-rcnn-crop-flow,
    .det-rcnn-feature-focus,
    .det-rcnn-classifier-focus,
    .det-rcnn-nms-focus {
        grid-template-columns: 1fr;
    }

    .det-rcnn-flow-arrow {
        min-height: 18px;
    }
}

@media (max-width: 760px) {
    [data-detection-lab][data-det-mode-view="yolo"] .det-yolo-dual-stage {
        padding: 0 8px;
    }

    .det-yolo-preprocess-card,
    .det-yolo-pyramid article {
        grid-template-columns: 1fr;
    }

    [data-detection-lab][data-det-submode="rcnn"] .vision-control-panel {
        position: static;
        min-height: auto;
    }

    .det-rcnn-step-rail,
    .det-rcnn-focus-grid,
    .det-rcnn-proposal-cards,
    .det-rcnn-refined-list,
    .det-rcnn-regression-focus .detection-regression-offsets {
        grid-template-columns: 1fr;
    }

    .det-rcnn-algo-flow {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }

    .det-rcnn-algo-flow article {
        min-width: 132px;
        scroll-snap-align: start;
    }

    .det-rcnn-proposal-stream {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .det-rcnn-algo-canvas *,
    .det-rcnn-proposal-stream *,
    .det-rcnn-step-rail button.is-current {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}