/* Lanne Video player (shared, see /assets/js/nb-player.js). */
.nbp { --nbp-accent: #FFD93D; --nbp-ink: #0A0A0A; --nbp-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; position: relative; display: inline-block; max-width: min(92vw, 1080px); background: #000; border-radius: 18px; overflow: hidden; outline: none; color: #fff; font-family: "Inter Tight", system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
.nbp video { display: block; max-width: min(92vw, 1080px); max-height: 86vh; width: auto; height: auto; cursor: pointer; }
.nbp:focus-visible { box-shadow: 0 0 0 3px var(--nbp-accent); }
.nbp-big { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--nbp-accent); color: var(--nbp-ink); cursor: pointer; box-shadow: 0 12px 34px rgba(0,0,0,.4); transform: scale(.85); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
.nbp-big svg { width: 30px; height: 30px; margin-left: 3px; }
.nbp.paused .nbp-big { opacity: 1; transform: none; pointer-events: auto; }
.nbp-big:hover { transform: scale(1.06) !important; }
.nbp-spin { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--nbp-accent); animation: nbp-spin .8s linear infinite; opacity: 0; pointer-events: none; }
.nbp.loading:not(.paused) .nbp-spin { opacity: 1; }
.nbp-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 6px 10px 6px; border-radius: 14px; background: rgba(10,10,10,.55); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease; }
.nbp.ui .nbp-bar, .nbp.paused .nbp-bar, .nbp:focus-within .nbp-bar { opacity: 1; transform: none; }
.nbp:not(.ui):not(.paused) video { cursor: none; }
.nbp-track { position: relative; height: 16px; margin: 0 2px; cursor: pointer; touch-action: none; }
.nbp-track::before, .nbp-buf, .nbp-prog { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 99px; transform-origin: left; transition: height .15s ease, top .15s ease; }
.nbp-track::before { background: rgba(255,255,255,.18); }
.nbp-buf { background: rgba(255,255,255,.32); transform: scaleX(0); }
.nbp-prog { background: var(--nbp-accent); transform: scaleX(0); }
.nbp-track:hover::before, .nbp-track:hover .nbp-buf, .nbp-track:hover .nbp-prog, .nbp.scrub .nbp-track::before, .nbp.scrub .nbp-buf, .nbp.scrub .nbp-prog { top: 5px; height: 6px; }
.nbp-knob { position: absolute; top: 8px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,217,61,.55), 0 2px 6px rgba(0,0,0,.4); transform: scale(0); transition: transform .15s ease; pointer-events: none; }
.nbp-track:hover .nbp-knob, .nbp.scrub .nbp-knob { transform: scale(1); }
.nbp-tip { position: absolute; bottom: 20px; transform: translateX(-50%); padding: 3px 7px; border-radius: 6px; background: var(--nbp-ink); color: #fff; font: 500 11px var(--nbp-mono); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.nbp-track:hover .nbp-tip { opacity: 1; }
.nbp-row { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.nbp-btn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; font: 600 12.5px "Inter Tight", system-ui, sans-serif; text-decoration: none; transition: background .15s ease, color .15s ease; }
.nbp-btn:hover { background: rgba(255,255,255,.12); }
.nbp-btn:focus-visible { outline: 2px solid var(--nbp-accent); outline-offset: -2px; }
.nbp-loop:not(.on) { color: rgba(255,255,255,.45); }
.nbp-loop.on { color: var(--nbp-accent); }
.nbp-rate { font-family: var(--nbp-mono); font-weight: 500; font-size: 12px; }
.nbp-time { margin-left: 6px; font: 500 12px var(--nbp-mono); color: rgba(255,255,255,.65); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nbp-time b { color: #fff; font-weight: 500; }
.nbp-sp { flex: 1; }
.nbp-vol { display: flex; align-items: center; }
.nbp-vol-r { -webkit-appearance: none; appearance: none; width: 0; height: 4px; margin: 0; border-radius: 99px; opacity: 0; background: linear-gradient(90deg, #fff var(--v, 100%), rgba(255,255,255,.25) var(--v, 100%)); transition: width .2s ease, opacity .2s ease, margin .2s ease; cursor: pointer; }
.nbp-vol:hover .nbp-vol-r, .nbp-vol-r:focus { width: 70px; opacity: 1; margin: 0 6px 0 2px; }
.nbp-vol-r::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.nbp-vol-r::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.nbp.fs { max-width: none; width: 100vw; height: 100vh; border-radius: 0; display: grid; place-items: center; }
.nbp.fs video { max-width: 100vw; max-height: 100vh; }
@media (max-width: 600px) {
  .nbp, .nbp video { max-width: 100vw; }
  .nbp-bar { left: 8px; right: 8px; bottom: 8px; }
  .nbp-vol-r, .nbp-rate, .nbp-loop { display: none; }
  .nbp-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}
@keyframes nbp-spin { to { transform: rotate(360deg); } }