.context-demo { margin-top: 1.5rem; }
.context-demo input[type=number] { width: 100%; padding: .8rem; border: 1px solid #a7aaa4; background: var(--white); color: var(--ink); font: 1rem ui-monospace, monospace; border-radius: 0; }
#comparison-status { min-height: 3rem; font-size: .95rem; }
.comparison-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.comparison-card { min-width: 0; padding: 1.25rem; background: #14282d; color: #fffdf8; }
.comparison-card h3 { margin: 0 0 1.3rem; font: 600 1.05rem system-ui, sans-serif; }
.learning-article .comparison-card p { color: #dce5e0; }
.learning-article .comparison-card .loss-caption { font-size: .85rem; margin: 0; }
.learning-article .comparison-card .loss-value { color: #fffdf8; font: 2.5rem ui-monospace, monospace; margin: .35rem 0; }
.learning-article .comparison-card .card-stats { font-size: .8rem; line-height: 1.5; }
.sample-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.sample-list li { border-top: 1px solid #526266; padding: .8rem 0; }
.sample-list code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; color: #fffdf8; }
.sample-list small { color: #c8d3cf; font-size: .75rem; }
@media (max-width: 40rem) { .comparison-cards { grid-template-columns: 1fr; } .context-demo .demo-settings { grid-template-columns: 1fr; } }