:root {
   --dl-bg-1: #0a1330;
   --dl-bg-2: #102148;
   --dl-panel: rgba(21, 32, 63, 0.55);
   --dl-panel-border: rgba(212, 162, 76, 0.18);
   --dl-accent: #d4a24c;
   --dl-accent-soft: rgba(212, 162, 76, 0.35);
   --dl-text: #eceef3;
   --dl-text-dim: #8b93ab;
 }

 * {
   box-sizing: border-box;
 }

 /* ===== Stage ===== */
 .dl-stage {
   position: relative;
   background:
     radial-gradient(ellipse 60% 40% at 15% 0%, rgba(212, 162, 76, 0.10), transparent 60%),
     radial-gradient(ellipse 50% 50% at 100% 100%, rgba(60, 100, 200, 0.12), transparent 60%),
     linear-gradient(160deg, var(--dl-bg-1), var(--dl-bg-2) 60%);
   overflow: hidden;
   padding: 88px 24px 96px;
 }

 .dl-canvas {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0.55;
   pointer-events: none;
 }

 /* ===== Header block ===== */
 .dl-head {
   position: relative;
   z-index: 2;
   max-width: 720px;
   margin: 0 auto 56px;
   text-align: center;
   font-family: 'Inter', sans-serif;
   color: var(--dl-text);
 }

 .dl-status-line {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--dl-accent);
   border: 1px solid var(--dl-accent-soft);
   border-radius: 999px;
   padding: 6px 16px;
   margin-bottom: 22px;
   background: rgba(212, 162, 76, 0.06);
 }

 .dl-status-line .dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #57e08a;
   box-shadow: 0 0 8px #57e08a;
   animation: pulse-dot 1.8s ease-in-out infinite;
 }

 @keyframes pulse-dot {

   0%,
   100% {
     opacity: 1;
     transform: scale(1);
   }

   50% {
     opacity: 0.4;
     transform: scale(0.7);
   }
 }

 .dl-logo-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-bottom: 18px;
 }

 .dl-logo-mark svg {
   width: 34px;
   height: 34px;
   display: block;
 }

 .dl-logo-word {
   font-family: 'Space Grotesk', sans-serif;
   font-weight: 700;
   font-size: 22px;
   letter-spacing: 0.04em;
 }

 .dl-logo-word span {
   color: var(--dl-accent);
 }

 .dl-head h1 {
   font-family: 'Space Grotesk', sans-serif;
   font-size: clamp(28px, 4vw, 40px);
   font-weight: 700;
   margin: 0 0 12px;
   background: linear-gradient(90deg, #fff, #d4c9ad 55%, var(--dl-accent));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .dl-head p {
   color: var(--dl-text-dim);
   font-size: 15px;
   margin: 0;
 }

 /* ===== Grid ===== */
 .dl-grid {
   position: relative;
   z-index: 2;
   max-width: 980px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px;
 }

 @media (max-width: 760px) {
   .dl-grid {
     grid-template-columns: 1fr;
   }
 }

 .dl-card {
   position: relative;
   display: block;
   text-decoration: none;
   color: var(--dl-text);
   background: var(--dl-panel);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border: 1px solid var(--dl-panel-border);
   border-radius: 16px;
   padding: 22px 22px 20px;
   overflow: hidden;
   transform-style: preserve-3d;
   transition: border-color .25s ease, box-shadow .25s ease, transform .08s linear;
   will-change: transform;
 }

 .dl-card::before {
   content: "";
   position: absolute;
   inset: -1px;
   padding: 1px;
   border-radius: 16px;
   background: conic-gradient(from var(--ang, 0deg), transparent 0deg, var(--dl-accent) 40deg, transparent 90deg);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   opacity: 0;
   transition: opacity .3s ease;
   animation: spin-border 3.2s linear infinite paused;
   pointer-events: none;
 }

 .dl-card:hover::before {
   opacity: 1;
   animation-play-state: running;
 }

 @keyframes spin-border {
   to {
     --ang: 360deg;
   }
 }

 .dl-card:hover {
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 162, 76, 0.25) inset;
 }

 .dl-card-top {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   transform: translateZ(30px);
 }

 .dl-icon {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   border-radius: 10px;
   background: rgba(212, 162, 76, 0.10);
   border: 1px solid var(--dl-accent-soft);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--dl-accent);
 }

 .dl-icon svg {
   width: 20px;
   height: 20px;
 }

 .dl-meta {
   flex: 1;
   min-width: 0;
 }

 .dl-name {
   font-family: 'Space Grotesk', sans-serif;
   font-size: 15.5px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
 }

 .dl-tag {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   letter-spacing: 0.06em;
   color: var(--dl-accent);
   border: 1px solid var(--dl-accent-soft);
   border-radius: 999px;
   padding: 3px 9px;
   white-space: nowrap;
   flex-shrink: 0;
 }

 .dl-desc {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   color: var(--dl-text-dim);
   margin-top: 3px;
 }

 .dl-hash {
   margin-top: 14px;
   padding-top: 12px;
   border-top: 1px dashed rgba(255, 255, 255, 0.08);
   font-family: 'IBM Plex Mono', monospace;
   font-size: 10px;
   color: rgba(139, 147, 171, 0.65);
   display: flex;
   align-items: center;
   justify-content: space-between;
   transform: translateZ(20px);
 }

 .dl-hash .arrow {
   color: var(--dl-accent);
   opacity: 0;
   transform: translateX(-4px);
   transition: opacity .2s ease, transform .2s ease;
 }

 .dl-card:hover .dl-hash .arrow {
   opacity: 1;
   transform: translateX(0);
 }

 .dl-foot-note {
   position: relative;
   z-index: 2;
   max-width: 980px;
   margin: 32px auto 0;
   text-align: center;
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   color: var(--dl-text-dim);
   letter-spacing: 0.03em;
 }

 @media (prefers-reduced-motion: reduce) {
   .dl-card::before {
     display: none;
   }

   .dl-status-line .dot {
     animation: none;
   }
 }