/* Loading-bar wing exhibit. Shared primitives live in museum.css. All colours come from --ld-c. */
.exhibit .ex-intro .ex-note, .exhibit .ex-panel .ex-note { margin: 12px 0 0; color: var(--ink-2); max-width: 64ch; }
.ld-bar { margin: 24px 0 18px; }
.ld-bar .ex-row { gap: 6px 22px; }
.ld-gallery { --ld-c: var(--era); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 0 0 28px; }
.ld-card { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--room-2); overflow: hidden; }
.ld-card figcaption { padding: 14px 16px 16px; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.ld-card figcaption b { color: var(--ink); }
.ld-host { --ld-c: inherit; display: flex; align-items: center; justify-content: center; min-height: 132px; padding: 22px 20px; background: radial-gradient(120% 120% at 50% 0%, #1a1822, #0b0a0e); }
.ld-gallery .ld-host { --ld-c: var(--era); }
.ld-build-preview .ld-host { border-radius: var(--r-m); min-height: 150px; }

.ld-pill { position: relative; width: 100%; height: 26px; border-radius: 999px; overflow: hidden; background: #1b1a22; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); }
.ld-pill .ld-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 64%; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--ld-c) 55%, #fff) 0%, var(--ld-c) 48%, color-mix(in srgb, var(--ld-c) 65%, #000) 100%); }
.ld-pill .ld-fill::after { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .38); }

.ld-seg { display: flex; gap: 3px; width: 100%; }
.ld-seg i { flex: 1; height: 26px; border-radius: 2px; background: #23212b; }
.ld-seg i.on { background: var(--ld-c); box-shadow: 0 0 8px color-mix(in srgb, var(--ld-c) 70%, transparent); }

.ld-gear { position: relative; width: 104px; height: 104px; }
.ld-ring { position: absolute; inset: 0; }
.ld-teeth { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(var(--ld-c) 0 11deg, transparent 11deg 22.5deg); -webkit-mask: radial-gradient(circle closest-side, transparent 0 74%, #000 75%); mask: radial-gradient(circle closest-side, transparent 0 74%, #000 75%); }
.ld-core { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle closest-side, transparent 0 62%, var(--ld-c) 63%); }
.ld-gear .ld-num { position: absolute; inset: 0; display: grid; place-items: center; font: 500 1rem var(--f-mono); color: var(--ink); }

.ld-liquid { position: relative; width: 74px; height: 104px; border: 3px solid color-mix(in srgb, var(--ld-c) 70%, #fff); border-radius: 10px 10px 26px 26px; overflow: hidden; background: #14121a; }
.ld-liq { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: linear-gradient(180deg, var(--ld-c), color-mix(in srgb, var(--ld-c) 55%, #000)); }
.ld-wave { position: absolute; top: -7px; left: 0; width: calc(100% + 40px); height: 14px; background: radial-gradient(circle at 10px 14px, var(--ld-c) 9px, transparent 10px) 0 0 / 20px 14px repeat-x; }

.ld-dots { display: flex; gap: 14px; align-items: flex-end; height: 40px; }
.ld-dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--ld-c); box-shadow: 0 0 10px color-mix(in srgb, var(--ld-c) 60%, transparent); }

.ld-text { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ld-trow { display: flex; justify-content: space-between; gap: 10px; font: 400 .85rem var(--f-mono); color: var(--ink-2); }
.ld-trow .ld-num { color: var(--ink); }
.ld-thin { height: 6px; border-radius: 3px; background: #23212b; overflow: hidden; }
.ld-thin .ld-fill { display: block; height: 100%; width: 64%; background: var(--ld-c); }

.ld-tips { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
.ld-tip { margin: 0; min-height: 3.2em; color: var(--ink); font: 400 .95rem/1.5 var(--f-mono); }

.ld-ad { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ld-adbtn { min-height: 44px; padding: 0 20px; border: 1px solid #8a8a94; border-radius: 3px; background: rgba(40, 40, 46, .9); color: #eee; font: 500 .95rem var(--f-body); cursor: pointer; }
.ld-adbtn::after { content: " \25B8"; }
.ld-adbtn:hover { background: rgba(70, 70, 78, .95); }
.ld-adnote { margin: 0; min-height: 1.5em; color: var(--ink-2); font: 400 .85rem var(--f-mono); text-align: center; }

.ld-build { margin: 0 0 28px; }
.ld-build-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ld-build-ctl { display: grid; gap: 12px; min-width: 0; }
.ex-hex { font: 400 .8rem var(--f-mono); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.ld-build code { font: .9em var(--f-mono); }
.ld-honour { margin-top: 12px; }
@media (max-width: 720px) { .ld-build-grid { grid-template-columns: 1fr; } }