.vl-catalog, .virtual-lab { --vl-blue: #155d8c; --vl-ink: #233d4e; --vl-border: #cbdbe5; --vl-soft: #f3f8fb; color: var(--vl-ink); }
.vl-pack { margin: 1.5rem 0 2rem; scroll-margin-top: 1rem; }
.vl-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.vl-card { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem; border: 1px solid var(--vl-border); border-top: 4px solid var(--vl-blue); border-radius: 8px; background: #fff; color: var(--vl-ink); text-decoration: none; }
.vl-card:hover, .vl-card:focus-visible { background: var(--vl-soft); border-color: var(--vl-blue); }
.vl-card h3 { margin: .15rem 0; font-size: 1.15rem; }
.vl-card p { margin: .25rem 0 .8rem; line-height: 1.55; }
.vl-card-kind, .vl-eyebrow { font-size: .85rem; font-weight: 700; color: #475f70; }
.vl-card-action { margin-top: auto; color: var(--vl-blue); font-weight: 700; }
.vl-pack li { margin: .6rem 0; }
.virtual-lab { font-size: 1rem; line-height: 1.6; }
.virtual-lab *, .vl-catalog * { box-sizing: border-box; }
.virtual-lab [hidden] { display: none !important; }
.vl-prediction, .vl-challenge { background: var(--vl-soft); border-left: 4px solid var(--vl-blue); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.vl-prediction h2, .vl-challenge h2 { margin-top: 0; }
.vl-prediction p, .vl-challenge > p { margin-bottom: 0; }
.vl-workbench { display: block; margin: 1.5rem 0; }
.vl-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); align-items: start; gap: .6rem 1rem; min-width: 0; border: 1px solid var(--vl-border); border-radius: 8px; padding: 1rem; margin: 0 0 1rem; background: #fff; }
.vl-controls legend { padding: 0 .4rem; font-weight: 700; }
.vl-control { margin: 0 0 1rem; }
.vl-control > label, .vl-time > label { display: block; margin: 0 0 .3rem; font-weight: 600; line-height: 1.35; }
.vl-input-pair { display: flex; align-items: center; gap: .55rem; }
.vl-input-pair input[type="range"] { min-width: 0; flex: 1; width: 100%; height: 32px; accent-color: var(--vl-blue); }
.vl-input-pair input[type="text"] { width: 5.2rem; min-width: 0; padding: .45rem .4rem; border: 1px solid #8ba5b6; border-radius: 4px; font: inherit; }
.vl-controls select { width: 100%; max-width: 100%; padding: .55rem .4rem; border: 1px solid #8ba5b6; border-radius: 4px; font: inherit; background: #fff; color: inherit; }
.vl-controls input[aria-invalid="true"] { border: 2px solid #ac2939; background: #fff3f4; }
.vl-time { grid-column: 1 / -1; border-top: 1px solid var(--vl-border); padding-top: .75rem; }
.vl-time input { width: 100%; height: 32px; accent-color: var(--vl-blue); }
.vl-time output { display: block; text-align: right; font-variant-numeric: tabular-nums; }
.vl-buttons { display: flex; flex-wrap: wrap; gap: .55rem; margin: .8rem 0; }
.virtual-lab .learning-button { white-space: normal; line-height: 1.4; padding: .55rem .7rem; min-height: 40px; cursor: pointer; }
.virtual-lab .learning-button:disabled { cursor: default; opacity: .55; }
.virtual-lab :focus-visible, .vl-catalog :focus-visible { outline: 3px solid #986a12; outline-offset: 3px; }
.vl-motion-note { grid-column: 1 / -1; font-size: .85rem; }
.vl-observation { min-width: 0; }
.vl-observation figure { margin: 0; border: 1px solid var(--vl-border); border-radius: 8px; overflow: hidden; background: #fff; }
.vl-diagram-scroll { max-width: 100%; overflow-x: auto; }
.vl-observation svg { display: block; width: 100%; min-width: 640px; height: auto; overflow: hidden; font-family: Arial, sans-serif; background: #fcfeff; }
.vl-observation .vl-fit svg { min-width: 0; }
.vl-observation [data-vl-fit] { display: block; margin-top: .55rem; }
.vl-observation figcaption { padding: .6rem .9rem; background: var(--vl-soft); font-size: .85rem; }
.vl-feedback { color: #942638; font-weight: 600; min-height: 1.5em; margin: .4rem 0; }
.vl-readouts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; border: 1px solid var(--vl-border); border-radius: 6px; overflow: hidden; }
.vl-readouts dt, .vl-readouts dd { margin: 0; padding: .5rem .65rem; overflow-wrap: anywhere; border-bottom: 1px solid #e0e9ef; }
.vl-readouts dt { font-weight: 600; background: var(--vl-soft); }
.vl-readouts dd { font-variant-numeric: tabular-nums; background: #fff; }
.vl-readouts dt:last-of-type, .vl-readouts dd:last-of-type { border-bottom: 0; }
.vl-message { font-size: .95rem; }
.vl-notebook { margin: 1.5rem 0; padding: 1rem 1.2rem; border: 1px solid var(--vl-border); border-radius: 8px; }
.vl-notebook h2 { margin-top: 0; }
.vl-notebook-status { font-size: .9rem; }
.vl-table-scroll { overflow-x: auto; max-width: 100%; }
.vl-table-scroll table { width: 100%; border-collapse: collapse; min-width: 420px; font-size: .85rem; }
.vl-table-scroll caption { text-align: left; padding: .6rem 0; font-weight: 600; }
.vl-table-scroll th, .vl-table-scroll td { padding: .55rem; border: 1px solid var(--vl-border); text-align: left; vertical-align: top; }
.vl-table-scroll th { background: var(--vl-soft); }
.vl-explanation, .vl-sources { margin: 1.5rem 0; overflow-wrap: anywhere; }
.vl-explanation li, .vl-sources li { margin: .45rem 0; }
.vl-related { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin: 2rem 0; }
@media (max-width: 480px) { .vl-controls { display: block; padding: .75rem; } .vl-control { margin-bottom: 1rem; } .vl-notebook, .vl-prediction, .vl-challenge { padding: .8rem; } .vl-readouts { font-size: .9rem; } }
@media print { .vl-controls, .vl-buttons, .vl-related, .vl-feedback, .vl-notebook-status { display: none; } .vl-workbench { display: block; } .vl-table-scroll { overflow: visible; } .vl-observation, .vl-notebook { break-inside: avoid; } }