.gen-panel { width: 100%; }
.gen-panel h3 { color: #00518a; font-size: 17px; margin: 0 0 .6rem; }
.gen-overview { display: grid; grid-template-columns: 1.45fr 25px 1fr 25px 1fr; align-items: center; gap: .8rem; }
.gen-history-item { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .6rem; padding: .7rem 0; border-top: 1px solid #cfcac0; }
.gen-product { display: grid; gap: .3rem; font-size: 13px; }
.gen-shoe { width: 95px; height: 40px; display: block; margin: 0 auto; fill: none; stroke: #00518a; stroke-width: 2; }
.gen-model, .gen-lookup { padding: 1rem .6rem; border: 1px solid #93aaa7; text-align: center; min-height: 150px; display: grid; align-content: center; gap: .5rem; }
.gen-model { background: #e3edf3; }
.gen-model p, .gen-lookup strong { font-size: 14px; margin: 0; }
.gen-codes { display: flex; justify-content: center; gap: .2rem; }
.gen-code { font-size: 16px; line-height: 1.3; border: 1px solid #93aaa7; padding: .3rem .45rem; text-align: center; font-family: "IBM Plex Mono", monospace; }
.gen-code-shared { background: #e3edf3; border-color: #00518a; color: #00518a; }
.gen-arrow { font-size: 26px; color: #00518a; text-align: center; }
.gen-takeaway { font-size: 20px; line-height: 1.35; margin: 1.5rem 0 0; color: #00518a; }
.gen-linear { display: flex; align-items: center; gap: .6rem; width: 100%; }
.gen-block { flex: 1; padding: .7rem; border: 1px solid #93aaa7; text-align: center; font-size: 16px; line-height: 1.3; }
.gen-levels { display: flex; align-items: center; gap: .8rem; margin: .9rem 0; }
.gen-level { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 14px; }
.gen-related { border-top: 1px solid #cfcac0; padding-top: .7rem; }
.gen-related-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .4rem 0; font-size: 16px; }
.gen-explanation { margin: .6rem 0 0; font-size: 15px; line-height: 1.35; }
.gen-collision { border-top: 1px solid #cfcac0; padding-top: .7rem; margin-top: .7rem; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .5rem 1rem; font-size: 15px; }
.gen-collision > p { margin: 0; grid-column: 1 / -1; color: #925d1b; }
.gen-collision-ids { display: flex; justify-content: flex-end; gap: .8rem; }
.gen-collision .gen-code:last-child { border-color: #925d1b; color: #925d1b; }
.gen-beam { display: grid; grid-template-columns: 1fr 24px 1.1fr 24px 1.6fr; gap: .9rem; align-items: center; }
.gen-prefix { padding: .7rem; border: 1px solid #00518a; background: #e3edf3; font-size: 17px; margin: .6rem 0; text-align: center; font-family: "IBM Plex Mono", monospace; }
.gen-pruned { border-top: 1px dashed #93aaa7; margin: .7rem 0 0; padding-top: .5rem; font-size: 13px; color: #697276; }
.gen-lookup-label { margin: 1rem 0 0; font-size: 17px; }
.gen-section + .gen-section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #cfcac0; }
.gen-section .gen-takeaway { margin-top: .8rem; }
.gen-mixed-tokens { display: flex; gap: .4rem; }
.gen-mixed-token { padding: .5rem .6rem; font-size: 14px; border: 1px solid #93aaa7; }
.gen-backbone { padding: .6rem; margin: .8rem 0; background: #e3edf3; border: 1px solid #00518a; text-align: center; color: #00518a; font-size: 19px; }
.gen-backbone::before { content: "↓ "; }
.gen-panel:has(.gen-backbone) .gen-linear { margin-top: .7rem; }
.gen-panel:has(.gen-backbone) .gen-takeaway { margin-top: .8rem; }
.gen-tradeoffs { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; }
.gen-costs { border-left: 1px solid #cfcac0; padding-left: 2rem; }
.gen-tradeoff-row { padding: .6rem 0; border-top: 1px solid #cfcac0; font-size: 17px; }
.gen-tradeoff-row strong { color: #00518a; }
.gen-costs .gen-tradeoff-row strong { color: #925d1b; }
.gen-tradeoff-row p { margin: .3rem 0 0; font-size: 16px; line-height: 1.35; }
@media print { .gen-model, .gen-code-shared, .gen-prefix, .gen-backbone { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

.gen-semantic-pipeline { display:grid; grid-template-columns:.7fr 20px .7fr 20px 2.4fr; align-items:center; gap:.6rem; margin-bottom:1rem; }
.gen-quantizer { border:1px solid #00518a; padding:.8rem; }
.gen-quantizer h3 { text-align:center; }
.gen-quantizer-levels { display:flex; align-items:center; gap:.5rem; }
.gen-quantizer-level { flex:1; display:grid; justify-items:center; text-align:center; gap:.5rem; font-size:13px; line-height:1.3; }
.gen-quantizer-level > span { min-height:34px; }

.gen-beam { align-items:start; }
.gen-beam-column h3 { min-height:2.7rem; }
.gen-beam > .gen-arrow { align-self:center; }