.sb-jb{--jb-accent:#5cc0ff;--jb-accent-2:#9fd4ff;position:relative;z-index:96;background:linear-gradient(90deg,#07080b 0%,#0c1a30 50%,#07080b 100%);border-bottom:1px solid rgba(92,192,255,.28);overflow:hidden;contain:layout paint}
.sb-jb::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(680px 120% at 50% 0%,rgba(92,192,255,.18),transparent 72%)}
.sb-jb::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.07) 45%,rgba(255,255,255,.13) 50%,rgba(255,255,255,.07) 55%,transparent);animation:sbJbSheen 7.5s ease-in-out 1.6s infinite}
@keyframes sbJbSheen{0%{left:-45%}55%,100%{left:112%}}

.sb-jb-hit{position:absolute;inset:0;z-index:0}
.sb-jb-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:9px 52px;font-family:var(--body,'Archivo',sans-serif);font-size:13.5px;line-height:1.3;color:#aab4c2}

.sb-jb-badge{font-family:var(--display,'Sora',sans-serif);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#08111c;background:linear-gradient(120deg,var(--jb-accent),var(--jb-accent-2));padding:4px 11px;border-radius:100px;white-space:nowrap;box-shadow:0 2px 12px rgba(92,192,255,.28)}

.sb-jb-msg{color:#cfd7e2;white-space:nowrap;text-decoration:none}
.sb-jb-msg b{font-family:var(--display,'Sora',sans-serif);font-weight:800;font-size:14.5px;letter-spacing:-.01em;color:#fff}
.sb-jb:hover .sb-jb-msg b{color:#eaf6ff}

.sb-jb-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.26);flex-shrink:0}

.sb-jb-code{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;background:rgba(92,192,255,.10);border:1px solid rgba(92,192,255,.42);color:#a7dcff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:12.5px;letter-spacing:.1em;padding:4px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.sb-jb-code:hover{background:rgba(92,192,255,.19);border-color:rgba(92,192,255,.7);color:#e4f4ff;transform:translateY(-1px)}
.sb-jb-code:focus-visible{outline:2px solid var(--jb-accent);outline-offset:2px}
.sb-jb-code-static{cursor:default;letter-spacing:.04em;font-family:var(--body,'Archivo',sans-serif);font-weight:600;text-transform:none}
.sb-jb-code-static:hover{background:rgba(92,192,255,.10);border-color:rgba(92,192,255,.42);color:#a7dcff;transform:none}
.sb-jb-ic{width:13px;height:13px;flex-shrink:0;opacity:.75}
.sb-jb-ic-done{display:none}
.sb-jb-code.copied{background:var(--jb-accent);border-color:var(--jb-accent);color:#08111c}
.sb-jb-code.copied .sb-jb-ic-copy{display:none}
.sb-jb-code.copied .sb-jb-ic-done{display:block;opacity:1}

.sb-jb-timer{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.sb-jb-ends-lbl{font-size:12px;color:#7e8899;letter-spacing:.01em}
.sb-jb-clock{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:#e9edf3;letter-spacing:.02em}
.sb-jb-clock u{text-decoration:none;font-size:10.5px;font-weight:600;color:#78838f;margin:0 5px 0 1px}
.sb-jb-clock u:last-child{margin-right:0}

.sb-jb.is-soon{--jb-accent:#ffb648;--jb-accent-2:#ffd79a;border-bottom-color:rgba(255,182,72,.34)}
.sb-jb.is-soon::before{background:radial-gradient(680px 120% at 50% 0%,rgba(255,182,72,.16),transparent 72%)}
.sb-jb.is-soon .sb-jb-clock{color:#ffd08a}
.sb-jb.is-soon .sb-jb-code{background:rgba(255,182,72,.10);border-color:rgba(255,182,72,.42);color:#ffd08a}
.sb-jb.is-soon .sb-jb-code:hover{background:rgba(255,182,72,.2);border-color:rgba(255,182,72,.7);color:#fff1d8}
.sb-jb.is-final .sb-jb-clock{animation:sbJbBeat 1.6s ease-in-out infinite}
@keyframes sbJbBeat{0%,100%{opacity:1}50%{opacity:.55}}

.sb-jb-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:3;display:grid;place-items:center;background:none;border:none;color:#6b7280;width:30px;height:30px;padding:0;cursor:pointer;border-radius:8px;transition:color .18s ease,background .18s ease}
.sb-jb-x svg{width:14px;height:14px}
.sb-jb-x:hover{color:#fff;background:rgba(255,255,255,.09)}
.sb-jb-x:focus-visible{outline:2px solid var(--jb-accent);outline-offset:2px;color:#fff}

.sb-jb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* light mode */
html.sb-light .sb-jb{background:linear-gradient(90deg,#e7effe 0%,#d8e6fd 50%,#e7effe 100%)!important;border-bottom-color:rgba(29,78,216,.22)!important}
html.sb-light .sb-jb::before{background:radial-gradient(680px 120% at 50% 0%,rgba(29,78,216,.10),transparent 72%)}
html.sb-light .sb-jb::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.5) 50%,transparent)}
html.sb-light .sb-jb-inner{color:#4a5568}
html.sb-light .sb-jb-msg{color:#33415c}
html.sb-light .sb-jb-msg b{color:#0f172a}
html.sb-light .sb-jb-badge{color:#f8fbff;background:linear-gradient(120deg,#1d4ed8,#3b82f6)}
html.sb-light .sb-jb-code{background:rgba(29,78,216,.08);border-color:rgba(29,78,216,.4);color:#1d4ed8}
html.sb-light .sb-jb-code.copied{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
html.sb-light .sb-jb-clock{color:#0f172a}
html.sb-light .sb-jb-clock u{color:#64748b}
html.sb-light .sb-jb-ends-lbl{color:#64748b}
html.sb-light .sb-jb-x{color:#64748b}
html.sb-light .sb-jb-x:hover{color:#0f172a;background:rgba(15,23,42,.07)}
html.sb-light .sb-jb-dot{background:rgba(15,23,42,.2)}

@media(max-width:860px){
  .sb-jb-inner{gap:8px;padding:8px 42px;font-size:12.5px}
  .sb-jb-msg b{font-size:13.5px}
  .sb-jb-ends-lbl{display:none}
}
@media(max-width:560px){
  .sb-jb-inner{gap:7px;padding:8px 38px}
  .sb-jb-badge{font-size:9.5px;letter-spacing:.13em;padding:3px 9px}
  .sb-jb-msg{font-size:12px}
  .sb-jb-msg b{font-size:13px}
  .sb-jb-dot{display:none}
  .sb-jb-code{font-size:11.5px;letter-spacing:.07em;padding:3px 9px;gap:6px}
  .sb-jb-clock{font-size:12px}
  .sb-jb-x{right:4px}
}
@media(prefers-reduced-motion:reduce){
  .sb-jb::after{animation:none;display:none}
  .sb-jb.is-final .sb-jb-clock{animation:none}
  .sb-jb-code{transition:none}
}

/* The clock renders empty and is filled by JS a frame later. .sb-jb-inner is
   centred, so a clock that grows from 0 to ~104px shunts the whole row
   sideways on every load. Reserve the space up front. */
.sb-jb-clock{display:inline-block;min-width:104px;text-align:center}
@media(max-width:640px){.sb-jb-clock{min-width:88px}}