body[data-zoom="1"] #outline .sections { display: none; }
body[data-zoom="2"] #outline .sections { display: none; }
body[data-zoom="3"] #outline .sections:not([aria-current="true"]) { display: none; }
body[data-zoom="4"] #outline .sections:not([aria-current="true"]) { display: none; }
body[data-zoom="1"] #active .pipeline { display: flex; }
body[data-zoom="1"] #active .step-detail, body[data-zoom="1"] #active .section-detail, body[data-zoom="1"] #active .field-detail { display: none; }
body[data-zoom="2"] #active .pipeline, body[data-zoom="2"] #active .section-detail, body[data-zoom="2"] #active .field-detail { display: none; }
body[data-zoom="2"] #active .step-detail { display: grid; }
body[data-zoom="3"] #active .pipeline, body[data-zoom="3"] #active .step-detail, body[data-zoom="3"] #active .field-detail { display: none; }
body[data-zoom="3"] #active .section-detail { display: block; }
body[data-zoom="4"] #active .pipeline, body[data-zoom="4"] #active .step-detail, body[data-zoom="4"] #active .section-detail { display: none; }
body[data-zoom="4"] #active .field-detail { display: block; }
.pipeline { display: flex; flex-direction: column; gap: 12px; }
.pipeline .lane { display: grid; grid-template-columns: 60px 1fr 110px; gap: 16px; align-items: center; padding: 14px 18px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: all var(--dur); }
.pipeline .lane:hover { border-color: var(--accent); transform: translateX(2px); box-shadow: 0 4px 16px rgba(95,179,255,0.08); }
.pipeline .lane .nr { font: 600 24px var(--mono); color: var(--fg-dim); text-align: center; }
.pipeline .lane .body h3 { font-size: 14px; margin: 0 0 6px; color: var(--fg); }
.pipeline .lane .body .summary { font-size: 11px; color: var(--fg-mute); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pipeline .arrow { text-align: center; color: var(--fg-dim); font-size: 18px; line-height: 1; padding: 2px 0; opacity: 0.5; }
.pipeline .lane .scoreblock { font-family: var(--mono); font-size: 10px; color: var(--fg-mute); text-align: right; line-height: 1.4; }
.pipeline .lane .scoreblock .score-bar { width: 100%; display: block; margin-bottom: 2px; }
.step-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.step-detail .card { margin-bottom: 0; transition: all var(--dur); }
.step-detail .card[data-key] { cursor: pointer; }
.step-detail .card[data-key]:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(95,179,255,0.08); }
.step-detail .card.full { grid-column: 1 / -1; }
.section-detail .card { background: var(--bg-elev); }
.section-detail h2 { font-size: 14px; }
.field-detail .card { background: var(--bg-elev); }
.field-detail .breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--fg-mute); margin-bottom: 16px; }
.field-detail .breadcrumb .sep { color: var(--fg-dim); margin: 0 6px; }
.field-detail .breadcrumb a { color: var(--accent); cursor: pointer; transition: opacity var(--dur); }
.field-detail .breadcrumb a:hover { opacity: 0.7; text-decoration: underline; }
.field-detail .tag.ref::after { content: " →"; opacity: 0.5; margin-left: 2px; }