/* 1.76.397: snelheidsduel op hosting en WordPress. Vlak paneel, haarlijnen, mono voor data. */
.nsl-duel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.nsl-duel__form { margin: 22px 0 10px; max-width: 520px; }
.nsl-duel__fine { font-size: 12.5px; color: #6d6d6d; margin: 0; max-width: 520px; }
.nsl-duel__panel { border: 1px solid #222; background: #0d0d0e; position: relative; overflow: hidden; }
.nsl-duel__head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #1d1d1f; font: 500 12px/1.2 'IBM Plex Mono', ui-monospace, monospace; color: #6d6d6d; }
.nsl-duel__head b { color: #a1a1a1; font-weight: 500; }
.nsl-duel__row { padding: 18px 20px 16px; border-bottom: 1px solid #1d1d1f; }
.nsl-duel__row p { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nsl-duel__row span { color: #d4d4d4; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsl-duel__row b { font: 600 28px/1 'IBM Plex Mono', ui-monospace, monospace; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.nsl-duel__row b small { font-size: .5em; color: #8a8a8a; margin-left: 3px; font-weight: 500; }
.nsl-duel__row i { display: block; height: 10px; background: #19191b; position: relative; overflow: hidden; }
.nsl-duel__row i em { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: #3a3a3d; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.nsl-duel__row.is-us i em { background: #7643c8; }
.nsl-duel__row.is-run i em { width: 100% !important; background: repeating-linear-gradient(90deg, #2b2b2e 0 12px, #19191b 12px 24px); background-size: 48px 100%; animation: nslDuelRun .6s linear infinite; transition: none; }
.nsl-duel__row.is-them.is-slow i em { background: #ff5c7a; }
.nsl-duel__row.is-them.is-mid i em { background: #ffb86b; }
@keyframes nslDuelRun { to { background-position: 48px 0; } }
.nsl-duel__log { list-style: none; margin: 0; padding: 12px 20px; font: 500 12px/1.5 'IBM Plex Mono', ui-monospace, monospace; color: #8a8a8a; min-height: 116px; }
.nsl-duel__log li { display: flex; gap: 12px; }
.nsl-duel__log li:last-child { color: #e6e6e6; }
.nsl-duel__log time { color: #7643c8; }
.nsl-duel__out { padding: 16px 20px 20px; border-top: 1px solid #1d1d1f; display: grid; gap: 14px; justify-items: start; }
.nsl-duel__out p { margin: 0; color: #e6e6e6; font-size: 15px; line-height: 1.5; }
.nsl-duel__out p b { color: #fff; }
@media (max-width: 900px) { .nsl-duel__grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 600px) { .nsl-duel__row b { font-size: 22px; } .nsl-duel__head, .nsl-duel__row, .nsl-duel__log, .nsl-duel__out { padding-left: 16px; padding-right: 16px; } }
@media (prefers-reduced-motion: reduce) { .nsl-duel__row.is-run i em { animation: none; } }
