:root{--dr-card:rgba(255,255,255,.03);--dr-border:rgba(255,255,255,.08)}

.dr-wrap{max-width:1180px;margin:0 auto;}
.dr-hero{
  padding:18px 0 6px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
}
.dr-title{font-size:26px;font-weight:950;letter-spacing:.01em;line-height:1.1}
.dr-sub{color:rgba(255,255,255,.62);margin-top:6px;max-width:68ch;line-height:1.6}
.dr-actions{display:flex;gap:10px;align-items:center}
.dr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(212,175,55,.35);
  background:rgba(212,175,55,.10);
  color:rgba(255,255,255,.92);
  font-weight:850;font-size:13px;text-decoration:none;cursor:pointer;
}
.dr-btn:hover{background:rgba(212,175,55,.16)}

.dr-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:18px}
.dr-card{
  grid-column:span 4;
  background:var(--dr-card);
  border:1px solid var(--dr-border);
  border-radius:18px;
  padding:14px 14px;
}
.dr-card__k{color:rgba(255,255,255,.62);font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.dr-card__v{font-size:26px;font-weight:950;margin-top:6px}
.dr-card__h{font-size:14px;font-weight:900;margin-bottom:8px}
.dr-card__p{color:rgba(255,255,255,.62);font-size:13px;line-height:1.7}

.dr-wide{grid-column:span 8}
.dr-full{grid-column:span 12}

.dr-sim{
  margin-top:14px;
  background:linear-gradient(135deg, rgba(34,211,238,.08), rgba(212,175,55,.08));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:14px;
}
.dr-sim__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.dr-input{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:12px;
}
.dr-input label{display:block;font-size:12px;font-weight:800;color:rgba(255,255,255,.70);margin-bottom:8px}
.dr-input input,.dr-input select{
  width:100%;background:transparent;border:none;outline:none;color:rgba(255,255,255,.92);
  font-size:14px;font-weight:750;
}
.dr-output{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px}
.dr-output__k{font-size:12px;color:rgba(255,255,255,.62);font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.dr-output__v{font-size:18px;font-weight:950;margin-top:6px}

canvas#drChart{width:100%;height:220px;display:block}

@media(max-width:900px){
  .dr-card{grid-column:span 6}
  .dr-wide{grid-column:span 12}
}
@media(max-width:640px){
  .dr-card{grid-column:span 12}
  .dr-title{font-size:22px}
  .dr-sim__row{grid-template-columns:1fr}
}