/* ---- Dibs roadmap reel ---- */
.d-root{
  --d-bg:#141327; --d-bg2:#1C1A33; --d-card:#231F3D; --d-line:rgba(255,255,255,.14);
  --d-ink:#F2EFEA; --d-dim:#A9A3C0; --d-faint:#7C7799;
  --d-hot:#FF8A5B; --d-mint:#7EE0B8; --d-lilac:#9E8CFF;
  --ser:'Fraunces',Georgia,serif; --ui:'Inter',system-ui,sans-serif; --mono:'DM Mono',monospace;
}
.d-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:20px;
  background:radial-gradient(120% 90% at 20% 10%,#241F44,transparent 60%),linear-gradient(#141327,#1C1A33)}
.d-stage{position:absolute;top:0;left:0;width:1280px;height:720px;transform-origin:0 0}
.d-camera{position:absolute;inset:0}
.d-track{position:absolute;top:0;left:0;width:5920px;height:720px}

/* the rail everything hangs off */
.d-rail{position:absolute;left:0;top:360px;width:5920px;height:2px;background:
  linear-gradient(90deg,transparent 0,var(--d-line) 4%,var(--d-line) 96%,transparent 100%)}
.d-prog{position:absolute;left:0;top:360px;height:2px;width:0;
  background:linear-gradient(90deg,var(--d-hot),var(--d-lilac));box-shadow:0 0 14px rgba(255,138,91,.6)}
.d-node{position:absolute;top:360px;width:18px;height:18px;margin:-8px 0 0 -9px;border-radius:50%;
  background:var(--d-bg);border:2px solid var(--d-faint)}
.d-node.d-done{border-color:var(--d-hot);background:var(--d-hot)}
.d-node.d-next{border-color:var(--d-mint)}

.d-stop{position:absolute;top:360px;width:430px;transform:translateX(-50%)}
.d-stop.d-up{margin-top:-30px;height:0}
.d-stop.d-down{margin-top:42px}
.d-stop.d-up .d-card{transform:translateY(-100%)}
.d-stage-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--d-faint);margin-bottom:9px}
.d-stop.d-up .d-stage-label{position:absolute;top:9px;left:0;margin:0}
.d-card{background:var(--d-card);border:1px solid var(--d-line);border-radius:18px;padding:22px 24px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.d-card h4{font-family:var(--ser);font-weight:400;font-size:25px;line-height:1.2;margin:0;color:var(--d-ink);letter-spacing:-.01em}
.d-card p{font-size:14px;line-height:1.6;color:var(--d-dim);margin:10px 0 0}
.d-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.d-pills span{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:5px 11px;
  border-radius:999px;border:1px solid var(--d-line);color:var(--d-faint)}
.d-card.d-is-next{border-color:rgba(126,224,184,.45)}
.d-card.d-is-next .d-pills span{border-color:rgba(126,224,184,.4);color:var(--d-mint)}

/* the opening exchange */
.d-chat{display:flex;flex-direction:column;gap:11px;width:100%}
.d-bub{max-width:300px;padding:13px 17px;border-radius:20px;font-size:16.5px;line-height:1.45}
.d-them{align-self:flex-start;background:#2A2748;color:var(--d-ink);border-bottom-left-radius:6px}
.d-me{align-self:flex-end;background:var(--d-hot);color:#2A1206;border-bottom-right-radius:6px;
  font-family:var(--ser);font-size:21px}
.d-nodibs{align-self:flex-start;font-family:var(--mono);font-size:11px;color:var(--d-faint);letter-spacing:.05em}

/* the pool mock */
.d-pool{background:#120F22;border:1px solid var(--d-line);border-radius:14px;padding:9px;margin-top:12px}
.d-task{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:9px;background:#1B1832}
.d-task+.d-task{margin-top:5px}
.d-task em{font-style:normal;font-size:17px}
.d-task b{flex:1;font-weight:400;font-size:13.5px;color:var(--d-ink)}
.d-task i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  padding:5px 11px;border-radius:999px;background:var(--d-hot);color:#2A1206}
.d-task.d-claimed i{background:transparent;border:1px solid var(--d-mint);color:var(--d-mint)}

/* push notification */
.d-push{margin-top:10px;background:rgba(255,255,255,.07);border:1px solid var(--d-line);
  border-radius:12px;padding:9px 12px;backdrop-filter:blur(6px)}
.d-push b{display:block;font-size:12.5px;color:var(--d-ink);font-weight:500}
.d-push span{font-size:12px;color:var(--d-dim)}

/* house streak */
.d-house{display:flex;align-items:center;gap:14px;margin-top:14px}
.d-flame{font-size:30px}
.d-house div b{display:block;font-family:var(--ser);font-size:23px;color:var(--d-ink);font-weight:400}
.d-house div span{font-size:12.5px;color:var(--d-faint)}
.d-avs{display:flex;margin-left:auto}
.d-avs i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-family:var(--mono);color:#140F22;margin-left:-8px;border:2px solid var(--d-card)}

/* headline card that opens and closes the reel */
.d-title{position:absolute;left:0;top:0;width:1280px;height:720px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none}
.d-title h2{font-family:var(--ser);font-weight:400;font-size:66px;line-height:1.1;margin:0;
  color:var(--d-ink);letter-spacing:-.02em;overflow:hidden}
.d-title h2 span{display:inline-block}
.d-title .d-sub{font-family:var(--ser);font-style:italic;font-size:20px;color:var(--d-dim);margin:14px 0 0}
.d-title .d-row{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.d-title .d-row span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:9px 16px;
  border-radius:999px;border:1px solid var(--d-line);color:var(--d-dim)}
.d-title .d-row .d-flag{background:var(--d-lilac);border-color:var(--d-lilac);color:#15102B}

.d-caption{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:12px;padding:14px 20px;
  font-family:var(--mono);font-size:12px;color:var(--d-dim);letter-spacing:.03em;z-index:30}
.d-caption .d-n{color:var(--d-hot)}
.d-watermark{position:absolute;right:18px;top:16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--d-faint);z-index:30;
  border:1px solid var(--d-line);border-radius:999px;padding:6px 13px}