/* dalus.cobinar.com — design tokens & shared primitives
   Neobrutalist, in the same family as Cobinar's own products: warm paper
   background, true-black hard borders and offset shadows (no blur, no soft
   grey SaaS shadows), one loud accent used sparingly. Built for a developer
   tool, so a monospace face is a real, functional choice here — not a
   decorative label font — because actual terminal output appears on this
   page. */

   @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

   :root {
     --paper: #fffdf7;
     --paper-dim: #f7f2e7;
     --tx: #17130f;
     --mu: #6b6255;
     --line: #17130f;
   
     --ac: #ff5a1f;
     --ac-ink: #17130f;
     --as: #ffe4d6;
   
     --cool: #2f6fed;
     --cool-soft: #dbe7ff;
   
     --code-bg: #17130f;
     --code-tx: #f4f1ea;
     --code-mu: #9a9184;
     --code-prompt: #ff9a66;
     --code-ok: #7bd88f;
   
     --nb: 3px solid var(--line);
     --nb-thin: 2px solid var(--line);
     --nr: 14px;
     --nr-sm: 8px;
     --ns: 5px 5px 0 var(--line);
     --ns-lg: 9px 9px 0 var(--line);
   
     --fd: 'Unbounded', sans-serif;
     --fb: 'Plus Jakarta Sans', sans-serif;
     --fm: 'JetBrains Mono', monospace;
   }
   
   * { box-sizing: border-box; }
   html { -webkit-text-size-adjust: 100%; }
   
   body {
     margin: 0;
     background: var(--paper);
     color: var(--tx);
     font-family: var(--fb);
     font-size: 16px;
     line-height: 1.55;
     -webkit-font-smoothing: antialiased;
   }
   
   img, svg { max-width: 100%; display: block; }
   
   a { color: inherit; }
   
   :focus-visible {
     outline: 3px solid var(--cool);
     outline-offset: 2px;
   }
   
   .container {
     width: 100%;
     max-width: 1080px;
     margin: 0 auto;
     padding: 0 24px;
   }
   
   .container-narrow {
     width: 100%;
     max-width: 720px;
     margin: 0 auto;
     padding: 0 24px;
   }
   
   h1, h2, h3 {
     font-family: var(--fd);
     font-weight: 800;
     line-height: 1.08;
     margin: 0;
     letter-spacing: -0.01em;
   }
   
   h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 900; }
   h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
   h3 { font-size: 1.15rem; }
   
   p { margin: 0; }
   
   .lede {
     font-size: clamp(1.05rem, 1.6vw, 1.25rem);
     color: var(--mu);
     max-width: 42ch;
   }
   
   code, .mono {
     font-family: var(--fm);
   }
   
   /* Hard-edged, offset-shadow card — the one recurring structural device on
      this site. Deliberately not a soft-grey-shadow rounded card: the border
      IS the shape, the shadow is a flat, un-blurred block. */
   .nb-card {
     background: var(--paper);
     border: var(--nb);
     border-radius: var(--nr);
     box-shadow: var(--ns);
   }
   
   .nb-card--lg { box-shadow: var(--ns-lg); }
   
   .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--fb);
     font-weight: 700;
     font-size: 0.95rem;
     padding: 13px 22px;
     border: var(--nb);
     border-radius: var(--nr-sm);
     background: var(--paper);
     color: var(--tx);
     box-shadow: var(--ns);
     cursor: pointer;
     text-decoration: none;
     transition: transform 0.12s ease, box-shadow 0.12s ease;
   }
   .btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--line); }
   .btn:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--line); }
   
   .btn--primary { background: var(--ac); color: var(--ac-ink); }
   .btn--dark { background: var(--tx); color: var(--paper); }
   
   .copy-btn {
     border: var(--nb-thin);
     border-radius: var(--nr-sm);
     background: var(--paper);
     color: var(--tx);
     font-family: var(--fb);
     font-weight: 700;
     font-size: 0.82rem;
     padding: 8px 14px;
     cursor: pointer;
   }
   .copy-btn:hover { background: var(--paper-dim); }
   
   /* Terminal block — the hero device. Real content, typed content, not a
      screenshot: a monospace block styled to read as a terminal window. */
   .terminal {
     background: var(--code-bg);
     color: var(--code-tx);
     border: var(--nb);
     border-radius: var(--nr);
     box-shadow: var(--ns-lg);
     overflow: hidden;
   }
   .terminal__bar {
     display: flex;
     align-items: center;
     gap: 7px;
     padding: 12px 16px;
     border-bottom: var(--nb-thin);
   }
   .terminal__dot {
     width: 11px;
     height: 11px;
     border-radius: 50%;
     border: 1.5px solid var(--code-tx);
   }
   .terminal__body {
     padding: 22px 20px 26px;
     font-family: var(--fm);
     font-size: 0.92rem;
     line-height: 1.8;
   }
   .terminal__prompt { color: var(--code-prompt); }
   .terminal__ok { color: var(--code-ok); }
   .terminal__mu { color: var(--code-mu); }
   .terminal__cursor {
     display: inline-block;
     width: 8px;
     height: 1.1em;
     background: var(--code-tx);
     vertical-align: text-bottom;
     animation: blink 1s step-end infinite;
   }
   
   @keyframes blink { 50% { opacity: 0; } }
   @media (prefers-reduced-motion: reduce) {
     .terminal__cursor { animation: none; }
   }
   
   .pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-family: var(--fm);
     font-size: 0.78rem;
     font-weight: 500;
     padding: 5px 12px;
     border: var(--nb-thin);
     border-radius: 999px;
     background: var(--paper);
   }
   
   .tag-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--ac);
   }
   
   nav.site {
     border-bottom: var(--nb);
     background: var(--paper);
   }
   nav.site .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 18px;
     padding-bottom: 18px;
   }
   .brand {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     font-family: var(--fd);
     font-weight: 900;
     font-size: 1.05rem;
     text-decoration: none;
     color: var(--tx);
   }
   .brand__mark {
     width: 26px;
     height: 26px;
     border: var(--nb-thin);
     border-radius: 7px;
     background: var(--ac);
   }
   nav.site .links {
     display: flex;
     align-items: center;
     gap: 26px;
     font-weight: 600;
     font-size: 0.92rem;
   }
   nav.site .links a { text-decoration: none; }
   nav.site .links a:hover { color: var(--ac); }
   
   footer.site {
     border-top: var(--nb);
     margin-top: 100px;
   }
   footer.site .container {
     padding-top: 32px;
     padding-bottom: 40px;
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
     align-items: center;
     justify-content: space-between;
     color: var(--mu);
     font-size: 0.88rem;
   }
   footer.site a { text-decoration: underline; text-underline-offset: 3px; }
   
   @media (max-width: 640px) {
     nav.site .links { gap: 16px; font-size: 0.85rem; }
     .terminal__body { font-size: 0.82rem; }
   }