/*! The Hypnotic Phenomena Lab */
.dwx-app .dwx-lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 22px; }
.dwx-app .dwx-lab-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 18px; border-radius: 14px; border: 1px solid var(--dwx-line); background: var(--dwx-surface); color: var(--dwx-muted); font: inherit; font-size: 14.5px; line-height: 1.5; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
.dwx-app .dwx-lab-card:hover, .dwx-app .dwx-lab-card:focus-visible { border-color: var(--dwx-gold); background: var(--dwx-soft); transform: translateY(-2px); }
.dwx-app .dwx-lab-card strong { font-family: var(--dwx-serif); font-size: 1.45rem; font-weight: 600; color: var(--dwx-cream); line-height: 1.15; }
.dwx-app .dwx-lab-min { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dwx-lav); }
.dwx-app .dwx-lab-card.is-done .dwx-lab-min { color: var(--dwx-gold); }
.dwx-app .dwx-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--dwx-ice); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dwx-app .dwx-lab-exp .dwx-h { margin-top: 14px; }
.dwx-app .dwx-lab-steps { margin: 8px 0 0 1.3em; padding: 0; display: grid; gap: 8px; max-width: 62ch; }
.dwx-app .dwx-lab-steps li { padding-left: 4px; }
.dwx-app .dwx-lab-steps li::marker { color: var(--dwx-gold); font-weight: 700; }
.dwx-app .dwx-lab-live { margin-top: 22px; }
.dwx-app .dwx-lab-wait { font-family: var(--dwx-serif); font-style: italic; font-size: 1.5rem; color: var(--dwx-cream); animation: dwx-labpulse 6s ease-in-out infinite; }
.dwx-app .dwx-lab-q legend, .dwx-app .dwx-lab-guess legend { font-family: var(--dwx-serif); font-size: 1.5rem; color: var(--dwx-cream); margin-bottom: 12px; }
.dwx-app .dwx-lab-scale { display: flex; flex-wrap: wrap; gap: 8px; }
.dwx-app .dwx-lab-guess label { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; color: var(--dwx-muted); }
.dwx-app .dwx-lab-guess select { min-height: 40px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--dwx-line-strong); background: var(--dwx-surface); color: var(--dwx-ink); font: inherit; }
.dwx-app .dwx-lab-you { font-size: 1.1rem; color: var(--dwx-ink); margin-bottom: 14px; }
.dwx-app .dwx-lab-you:focus { outline: none; }
.dwx-app .dwx-lab-you strong { color: var(--dwx-gold); }
.dwx-app .dwx-lab-bars { display: grid; gap: 8px; max-width: 560px; margin-bottom: 8px; }
.dwx-app .dwx-lab-bar { display: grid; grid-template-columns: 110px 1fr 46px; gap: 10px; align-items: center; font-size: 14px; color: var(--dwx-muted); }
.dwx-app .dwx-lab-track { height: 12px; border-radius: 6px; background: var(--dwx-surface); border: 1px solid var(--dwx-line); overflow: hidden; }
.dwx-app .dwx-lab-track span { display: block; height: 100%; background: var(--dwx-lav); border-radius: 6px; transition: width 1s ease; }
.dwx-app .dwx-lab-bar.is-mine { color: var(--dwx-cream); font-weight: 700; }
.dwx-app .dwx-lab-bar.is-mine .dwx-lab-track span { background: var(--dwx-gold); }
.dwx-app .dwx-lab-pc { text-align: right; font-variant-numeric: tabular-nums; }
.dwx-app .dwx-lab-explain { max-width: 62ch; color: var(--dwx-ink); }
@keyframes dwx-labpulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dwx-app .dwx-lab-wait { animation: none; } }