:root{
  --fresh-grass:#8ed462; --cream:#f5f1e4; --ink:#2c2e2a; --white:#fff; --sandstone:#e0dbce;
  --stone:#80827f; --mist:#d5d5d4; --sky:#2ba0ff; --coral:#ff705d; --sun:#f5e211; --lilac:#c9a8f5;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --e1:cubic-bezier(.5,0,0,1); --e2:cubic-bezier(.17,.67,.3,1.33); --e3:cubic-bezier(.38,.005,.215,1);
  --r:50px; --gutter:clamp(12px,1.6vw,20px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-weight:500;color:var(--ink);background:var(--cream);font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3{font-weight:500;text-wrap:balance}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--cream);padding:1px 6px;border-radius:6px}
::selection{background:var(--fresh-grass)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
@keyframes rise{to{transform:none}}

.logo{display:flex;align-items:center;gap:10px;font-size:17px;letter-spacing:-.04em}
.logo-mark{width:40px;height:40px;border-radius:14px;background:var(--fresh-grass);display:grid;place-items:center;transition:transform .5s var(--e2);flex:none}
.logo:hover .logo-mark{transform:rotate(-12deg) scale(1.06)}
.art .logo-mark{background:var(--white)}

/* buttons: same anatomy as the marketing site */
.btn{--bg:var(--white);--fg:var(--ink);--dot:var(--sky);display:inline-flex;align-items:center;gap:14px;background:var(--bg);color:var(--fg);
  border-radius:50px;padding:9px 8px 9px 20px;font-size:15px;letter-spacing:-.03em;white-space:nowrap;transition:transform .4s var(--e2),opacity .2s}
.btn:active{transform:scale(.97)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
.btn-label{display:block;transition:transform .4s var(--e2)}
.btn-dot{width:28px;height:28px;border-radius:50%;background:var(--dot);color:var(--white);display:grid;place-items:center;position:relative;overflow:hidden;flex:none}
.btn-dot svg{width:13px;height:13px;grid-area:1/1;transition:transform .4s var(--e2)}
.btn-dot svg+svg{transform:translateX(-200%)}
.btn:hover .btn-dot svg:first-child{transform:translateX(200%)}
.btn:hover .btn-dot svg+svg{transform:none}
.btn:hover .btn-label{transform:translateX(-3px)}
.btn.cream{--bg:var(--cream)}
.btn.green{--bg:var(--fresh-grass);--dot:var(--white)} .btn.green .btn-dot{color:var(--ink)}
.btn.coral{--bg:var(--coral);--fg:var(--white);--dot:var(--white)} .btn.coral .btn-dot{color:var(--coral)}
.btn.ink{--bg:var(--ink);--fg:var(--cream);--dot:var(--fresh-grass)} .btn.ink .btn-dot{color:var(--ink)}
.btn.plain{padding:9px 18px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:50px;padding:3px 12px;font-size:13px;letter-spacing:-.01em;background:var(--cream);white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.s-success{background:#e3f5d6;color:#2f6b12}
.s-failed,.s-rolled_back{background:#ffe3de;color:#a3321f}
.s-running,.s-pending,.s-created{background:#dcefff;color:#0d5ea8}
.s-manual{background:#fdf7c4;color:#6b6200}
.s-skipped,.s-canceled,.s-none{background:var(--cream);color:var(--stone)}
.s-running::before{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.7);opacity:.35}}